/* =============================================================
   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/
   select/textarea n'héritent PAS de la font du parent (regression historique).
   Sans ce reset, le hamburger button mobile, les inputs et le select dans le
   formulaire de contact afficheraient la font système au lieu de Mona Sans. */
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: 1.5rem;
}

.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: 9999;
}

.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 */
.wrap {
	max-width: 1280px;
	margin: 0 auto;
	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: 100;
	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);
}

.site-header__inner {
	height: 100%;
	/* Aligne avec le contenu interne de .wrap (max-width 1280px + padding 5% du viewport, box-sizing border-box). */
	padding: 0 max(5%, calc(55% - 640px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.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(--text-strong);
	text-decoration: none;
	letter-spacing: -0.02em;
	line-height: 0;
}

.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(--text-soft);
	text-decoration: none;
	transition: color 0.2s;
	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 0.25s 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: 100px;
	font-weight: 600 !important;
	transition: background 0.2s !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: 101; /* au-dessus de l'overlay menu (z 99) ET du header lui-même */
	transition: background 0.2s;
}

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

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--text-strong);
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.2s, background 0.2s;
	transform-origin: center;
}

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

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

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

/* En état "ouvert" — cercle blanc semi-transparent visible sur le fond navy,
   barres blanches qui forment un X bien lisible. */
.hamburger[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.12);
}

.hamburger[aria-expanded="true"]:hover {
	background: rgba(255, 255, 255, 0.20);
}

.hamburger[aria-expanded="true"] span {
	background: var(--white);
}

/* Header transparent + logo blanc quand menu mobile ouvert (fond navy visible). */
body.has-mobile-menu-open .site-header {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.has-mobile-menu-open .logo,
body.has-mobile-menu-open .custom-logo-link {
	color: var(--white);
}

/* 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;
	--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);
}

/* 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)
   ============================================================= */

.hero {
	padding: calc(120px + var(--woonet-admin-offset, 0px)) max(5%, calc(55% - 640px)) 80px;
	position: relative;
	background: var(--surface-dark);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

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

.hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	max-width: 100%;
}

.hero__visual img {
	max-width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
}

/* Variante 2-col activée via Customizer */
@media (min-width: 901px) {
	.hero--has-visual {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 4rem;
	}
}

/* Sur mobile/tablet : illustration sous le texte, taille réduite */
@media (max-width: 900px) {
	.hero--has-visual {
		grid-template-rows: auto auto;
	}

	.hero--has-visual .hero__visual {
		max-width: 360px;
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	.hero--has-visual .hero__visual {
		max-width: 280px;
	}
}

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

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

/* Background sobrissime — juste un soupçon de vert pour ne pas être plat */
.hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 85% 50%,
			color-mix(in srgb, var(--primary) 12%, var(--black)) 0%,
			transparent 70%);
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	color: var(--white);
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-bottom: 2rem;
	width: fit-content;
	position: relative;
	z-index: 1;
}

.hero-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	display: block;
	animation: woonet-pulse 2s infinite;
}

@keyframes woonet-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

.hero h1 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(2.8rem, 6vw, 5rem);
	font-weight: 800;
	color: var(--white);
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 800px;
	position: relative;
	z-index: 1;
	margin-bottom: 1.5rem;
}

.hero h1 em {
	color: var(--accent);
	font-style: normal;
}

.hero-sub {
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	color: color-mix(in srgb, var(--white) 65%, transparent);
	max-width: 520px;
	line-height: 1.7;
	position: relative;
	z-index: 1;
	margin-bottom: 2.5rem;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.hero-stats {
	position: relative;
	z-index: 1;
	margin-top: 3rem;
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
	padding-top: 1.5rem;
}

.stat-num {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 2rem;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
	letter-spacing: -0.02em;
}

.stat-txt {
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--white) 50%, transparent);
	margin-top: 4px;
}

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

.btn-primary,
.btn-outline {
	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: 100px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	letter-spacing: -0.01em;
}

.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);
}

/* =============================================================
   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;
}

.section-label::before {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--primary);
	display: block;
}

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

.section-label--accent::before {
	background: 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: 12px;
	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(--border);
	border-radius: 6px;
	transition: none;
	text-decoration: none;
	color: inherit;
}

.service-card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.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);
}

.service-card--illustrated .svc-body {
	padding: 2rem 2rem 2.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--realisations {
	background: var(--gray-100);
}

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

.portfolio-card {
	background: var(--white);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--gray-200);
	transition: none;
}

.portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

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

.portfolio-img {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%);
	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: 2rem;
	color: var(--accent);
	letter-spacing: -0.05em;
}

.portfolio-img.v2 {
	background: linear-gradient(135deg, #1a2a4a 0%, #2d4a8a 100%);
	color: #B5D4F4;
}

.portfolio-img.v3 {
	background: linear-gradient(135deg, #3a1a1a 0%, #8a2d2d 100%);
	color: #FAC775;
}

.portfolio-img.v4 {
	background: linear-gradient(135deg, #1a1a3a 0%, #4a3a8a 100%);
	color: #AFA9EC;
}

.portfolio-img--photo {
	padding: 0;
}

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

.portfolio-body {
	padding: 1.5rem;
}

.portfolio-tag {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 0.5rem;
	display: block;
}

.portfolio-body h3 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.portfolio-body p {
	font-size: 0.875rem;
	color: var(--gray-600);
	line-height: 1.6;
}

/* =============================================================
   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: 6px;
	padding: 1.5rem;
}

.stars {
	color: #F5A623;
	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 0.3s;
	flex-shrink: 0;
}

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

.faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

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

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

.cta-band {
	background: var(--primary);
	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(1.8rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--white);
	margin-bottom: 1rem;
	letter-spacing: -0.03em;
}

.cta-band p {
	color: color-mix(in srgb, var(--white) 80%, transparent);
	margin-bottom: 2rem;
	font-size: 1.05rem;
}

/* Bouton dans la CTA band — inverse : fond blanc, texte vert */
.cta-band .btn-primary {
	background: var(--white);
	color: var(--primary);
}

.cta-band .btn-primary:hover {
	background: var(--accent);
	color: var(--white);
	transform: translateY(-1px);
}

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

.site-footer {
	background: var(--surface-dark);
	padding: var(--space-section-sm) 0 30px;
	color: rgba(255, 255, 255, 0.45);
}

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

.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: 0.875rem;
	line-height: 1.7;
	max-width: 280px;
}

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

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

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

/* Underline slide micro-anim sur hover */
.footer-col a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
}

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

.footer-col a:hover::after {
	transform: scaleX(1);
}

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

.footer-socials {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 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 0.2s;
}

.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.5rem;
	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;
}

.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.45);
	text-decoration: none;
}

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

/* =============================================================
   FOOTER — Newsletter inline
   ============================================================= */
.site-footer__newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 2.5rem;
	align-items: center;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__newsletter-text h3 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 0.4rem;
	letter-spacing: -0.01em;
}

.site-footer__newsletter-text p {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
	line-height: 1.5;
}

.site-footer__newsletter-form {
	display: flex;
	gap: 0.5rem;
	max-width: 460px;
}

.site-footer__newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--white);
	padding: 0.75rem 1rem;
	border-radius: 100px;
	font-size: 0.9rem;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	transition: border-color 0.2s, background 0.2s;
}

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

.site-footer__newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.12);
}

.site-footer__newsletter-form button {
	flex-shrink: 0;
	white-space: nowrap;
}

.site-footer__newsletter-msg {
	margin: 0;
	align-self: center;
	font-size: 0.95rem;
	font-weight: 600;
}

.site-footer__newsletter-msg--ok {
	color: #4ADE80;
}

.site-footer__newsletter-msg--error {
	color: #FCA5A5;
}

@media (max-width: 768px) {
	.site-footer__newsletter {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Formulaire empilé : input puis bouton, pleine largeur, plus de débordement. */
	.site-footer__newsletter-form {
		flex-direction: column;
		max-width: 100%;
		gap: 0.6rem;
	}

	.site-footer__newsletter-form input[type="email"] {
		width: 100%;
	}

	.site-footer__newsletter-form button {
		width: 100%;
		justify-content: center;
	}
}

/* =============================================================
   BACK-TO-TOP — bouton flottant bas-droit
   ============================================================= */
.woonet-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	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 0.25s, transform 0.25s, background 0.2s;
}

.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)
   ============================================================= */

.page-hero {
	padding: var(--space-section-xl) max(5%, calc(55% - 640px)) var(--space-section-md);
	background: var(--surface-dark);
	color: var(--white);
}

.page-hero--light {
	background: var(--gray-100);
	color: var(--black);
}

.page-hero--light .section-label {
	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(2.5rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	max-width: 700px;
	margin-bottom: 1.5rem;
	color: inherit;
}

.page-hero__sub {
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	color: rgba(255, 255, 255, 0.6);
	max-width: 560px;
	line-height: 1.7;
}

.page-hero--light .page-hero__sub {
	color: var(--gray-600);
}

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

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

.valeur-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	padding: 1.5rem;
}

.valeur-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: var(--primary);
}

.valeur-icon svg {
	width: 32px;
	height: 32px;
	display: block;
}

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

.valeur-card p {
	font-size: 0.875rem;
	color: var(--gray-600);
	line-height: 1.7;
}

/* 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: 6px;
	overflow: hidden;
	transition: none;
}

.team-card:hover {
	transform: translateY(-4px);
}

.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, #1a2a4a, #2d4a8a);
	color: #B5D4F4;
}

.team-avatar.c3 {
	background: linear-gradient(135deg, #3a1a1a, #8a4a2d);
	color: #FAC775;
}

.team-avatar.c4 {
	background: linear-gradient(135deg, #1a1a3a, #4a3a8a);
	color: #AFA9EC;
}

.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 — Chiffres */
.section--chiffres,
.chiffres {
	background: var(--surface-dark);
	text-align: center;
}

.chiffres-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 3rem;
}

.chiffre-num {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.chiffre-txt {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.5);
}

/* 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: 16px;
	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: 6px;
	border: 1px solid var(--border);
	background: var(--surface);
	text-decoration: none;
	color: inherit;
	transition: none;
}

.contact-card:hover {
	border-color: var(--primary);
	transform: translateX(4px);
}

.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: 12px;
}

.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: 8px;
	padding: 0.75rem 1rem;
	background: var(--white);
	color: var(--black);
	outline: none;
	transition: border-color 0.2s;
	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: 12px;
	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: #FEF2F2;
	border-radius: 12px;
	border: 1px solid #DC2626;
	margin-top: 1.5rem;
}

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

.form-error p {
	color: #B91C1C;
	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: 2rem 1.5rem;
	}

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

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

	/* Bump font-size dans tout le footer sur mobile/tablette (≥16px). */
	.footer-col h4 {
		font-size: 1rem;
	}

	.footer-col a,
	.footer-col .footer-address {
		font-size: 1rem;
		padding: 8px 0;
		margin-bottom: 0;
	}

	.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;
	}

	.chiffres-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

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

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

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

	.hero h1 {
		line-height: 1.1;
	}

	.hero-stats {
		margin-top: 2rem;
		padding-top: 0;
		border-top: none;
		gap: 1.5rem;
	}

	.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) {
	.nav-links {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	/* Mobile menu — FULLSCREEN OVERLAY avec stagger animation */
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--surface-dark);
		padding: calc(var(--header-height) + 2rem) 8% 4rem;
		gap: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		align-items: flex-start;
		z-index: 99;
	}

	.nav-links.open li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.nav-links.open a {
		display: block;
		padding: 0.9rem 0;
		font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
		font-size: 1.05rem;
		font-weight: 500;
		color: var(--white);
		letter-spacing: 0;
	}

	.nav-links.open a:hover,
	.nav-links.open .current-menu-item > a,
	.nav-links.open .current_page_item > a {
		color: var(--accent);
	}

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

	/* Le <li> du CTA : pas de border-bottom (c'est un bouton, pas un lien),
	   espacement plus généreux au-dessus pour le séparer des liens. */
	.nav-links.open li:has(.nav-cta) {
		border-bottom: none;
		margin-top: 1.5rem;
	}

	.nav-links.open 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(--accent) !important;
		color: var(--white) !important;
		border-radius: 100px;
		letter-spacing: -0.01em;
		transition: background 0.2s, transform 0.2s;
	}

	.nav-links.open a.nav-cta::after {
		content: "→";
		font-size: 1.05rem;
		font-weight: 400;
		line-height: 1;
		transition: transform 0.2s;
	}

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

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

	/* Compense la barre admin sur mobile (46px) */
	.admin-bar .nav-links.open {
		top: 46px;
		padding-top: calc(var(--header-height) + 2rem);
	}

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

	.hero-stats {
		gap: 2rem;
	}

	/* 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 : Brand full + Services|Agence 2-col + Contact full en bas. */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
	}

	.footer-brand,
	.footer-col:last-of-type {
		grid-column: 1 / -1; /* Brand (1er) et Contact (dernier) en pleine largeur */
	}

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

	.chiffres-grid {
		grid-template-columns: 1fr 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: 2.5rem;
		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 */
.nav-links a:focus-visible,
.footer-col a:focus-visible,
.footer-legal a:focus-visible,
.footer-socials a:focus-visible,
.btn-primary:focus-visible,
.btn-outline: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: 4px;
}

/* 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;
	}

	.hero-badge::before {
		animation: none;
	}

	.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(auto-fill, minmax(320px, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

/* Mobile : 2 colonnes serrées au lieu de 1 colonne pleine largeur.
   Cap à 360px : couvre les smartphones courants (≥ iPhone 11, Android standard). En-dessous (iPhone SE, mini), retour à 1 col. */
@media (max-width: 768px) {
	.blog-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin: 1rem 0;
	}
}

/* Page Actualités (liste blog) : 4 cartes/ligne sur grand écran,
   dégradé responsive 4 → 3 → 2 → 1. Scopé pour ne pas toucher les articles similaires. */
.site-main--archive .blog-grid {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
	.site-main--archive .blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.site-main--archive .blog-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 360px) {
	.site-main--archive .blog-grid {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	overflow: hidden;
	transition: none;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
	border-color: var(--gray-200);
}

.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: none;
}

.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);
	font-weight: 800;
	font-size: 3rem;
	color: var(--accent);
	letter-spacing: -0.05em;
}

.blog-card__body {
	padding: 1rem 1rem 1rem;
}

.blog-card__cat {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 0.65rem;
}

.blog-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem;
	color: var(--black);
}

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

.blog-card__excerpt {
	font-size: 0.875rem;
	color: var(--gray-600);
	line-height: 1.65;
	margin-bottom: 1rem;
}

.blog-card__meta {
	font-size: 0.75rem;
	color: var(--gray-400);
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
}

.blog-card__meta time {
	color: var(--black);
}

.blog-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	transition: background 0.15s ease-out, color 0.15s ease-out, transform 0.15s ease-out;
}

.blog-card:hover .blog-card__arrow {
	background: var(--primary);
	color: var(--white);
	transform: translateX(3px);
}

/* Mobile (≤768px) : grille 1 colonne, extrait masqué, typo compacte. */
@media (max-width: 768px) {
	.blog-card__body { padding: 1rem 1rem 1.2rem; }
	.blog-card__title { font-size: 1rem; line-height: 1.25; }
	.blog-card__cat { font-size: 0.65rem; margin-bottom: 0.5rem; }
	.blog-card__excerpt { display: none; }
	.blog-card__meta { font-size: 0.68rem; gap: 0.35rem; }
}

/* =============================================================
   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: 100px;
	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 0.2s;
}

.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-hero .section-label--accent {
	text-decoration: none;
	color: var(--accent);
}

.article-hero .section-label--accent::before {
	background: var(--accent);
}

.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: 0 16px 40px rgba(15, 27, 61, 0.08);
}

.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.btn-text,
.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;
}

.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: 12px;
	margin: 1.5rem 0;
}

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

/* Post tags */
.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: 100px;
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

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

/* Share buttons */
.share-buttons {
	margin: 2rem 0;
	padding: 1.5rem 0;
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	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);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	transition: all 0.2s;
}

.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: 16px;
	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);
	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 */
.article-comments {
	padding: 40px 0 40px;
}

.woonet-comments__title {
	font-family: var(--font-heading);
	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: 12px;
	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);
	font-size: 0.95rem;
	border: 1.5px solid var(--gray-200);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	background: var(--white);
	color: var(--black);
	outline: none;
	transition: border-color 0.2s;
}

.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: 100px;
	padding: 4px;
	max-width: 480px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.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);
	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 0.2s;
}

.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);
}

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

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

.service-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2rem 0;
}

.service-hero__metabox {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 150px;
	padding: 0.7rem 0.95rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.service-hero__metalabel {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.service-hero__metalabel svg {
	flex-shrink: 0;
	color: #93B4FF;
}

.service-hero__metavalue {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	color: var(--white);
	font-size: 1.05rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Le tarif est l'info clé : on l'accentue par la taille uniquement */
.service-hero__metabox--price .service-hero__metavalue {
	font-size: 1.2rem;
}

.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: 40px 0 50px;
}

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

.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
   ============================================================= */

.project-hero__meta {
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

.project-hero__meta strong {
	display: block;
	color: var(--white);
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 4px;
}

.project-hero__metalabel {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
}

/* Bouton "Visiter le site" dans le hero */
.project-hero__cta {
	margin-top: 1.5rem;
}

/* Gap garanti entre le hero et le contenu (évite le margin-collapse qui
   collait l'image au hero sur mobile). */
.single-woonet_realisation .site-main {
	padding-top: var(--space-section-md);
}

/* Image à la une — pleine largeur du conteneur (1280px) → remplit l'écran */
.project-featured {
	margin: 0 0 var(--space-section-sm);
	padding: 0;
}

.project-featured img {
	width: 100%;
	max-height: 560px;
	display: block;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(15, 27, 61, 0.08);
}

/* Résultats KPI — bande pleine largeur (remplit l'écran sur PC) */
.project-results {
	background: var(--surface-alt);
	padding: var(--space-section-md) 0;
	margin: 0 0 var(--space-section-md);
}

/* Layout 2 colonnes : narratif large + sidebar sticky des détails.
   Remplit l'écran sur PC tout en gardant le texte lisible (~720px). */
.project-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	align-items: start;
}

.project-layout--no-aside {
	grid-template-columns: minmax(0, 760px);
}

.project-layout__main {
	min-width: 0;
}

/* Sidebar sticky */
.project-sidebar {
	position: sticky;
	top: calc(var(--header-height, 68px) + 24px);
}

.project-sidebar__card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	padding: 1.5rem;
}

.project-sidebar__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-strong);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--gray-200);
}

.project-sidebar__list {
	margin: 0 0 1.25rem;
}

.project-sidebar__list dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary);
	margin-top: 1rem;
}

.project-sidebar__list dt:first-child {
	margin-top: 0;
}

.project-sidebar__list dd {
	margin: 2px 0 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-strong);
}

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

@media (max-width: 900px) {
	.project-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	/* Sidebar avant le narratif sur mobile : les détails du projet d'abord. */
	.project-sidebar {
		position: static;
		order: -1;
	}
}

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

@media (max-width: 600px) {
	.project-results__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.project-result {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	padding: 1.5rem;
	text-align: center;
	transition: none;
}

.project-result:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
}

.project-result__value {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--primary);
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
}

.project-result__label {
	font-size: 0.85rem;
	color: var(--gray-600);
	font-weight: 500;
}

.project-content {
	padding: 0;
	margin-bottom: var(--space-section-md);
}

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

/* --- CTA final "Démarrer un projet similaire" --- */
.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', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	max-width: 600px;
	margin: 0 auto 0.75rem;
}

.project-cta__sub {
	color: var(--text-soft);
	font-size: 1rem;
	max-width: 540px;
	margin: 0 auto 1.5rem;
}

.project-nav {
	border-top: 1px solid var(--gray-200);
	padding: var(--space-section-sm) 0;
	background: var(--surface);
}

.project-nav__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: center;
}

.project-nav__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 1rem 1.25rem;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	transition: none;
}

.project-nav__link--next {
	text-align: right;
	align-items: flex-end;
}

.project-nav__link:hover {
	border-color: var(--primary);
}

@media (max-width: 600px) {
	.project-nav__inner {
		grid-template-columns: 1fr;
	}
	.project-nav__link--next {
		text-align: left;
		align-items: flex-start;
	}

	/* Hero meta : 4 items (Client/Secteur/Année/Durée) en grille 2×2 plutôt
	   qu'un flex avec gros gaps qui wrappe mal sur petit écran. */
	.project-hero__meta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1.5rem;
	}
}

.project-nav__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.project-nav__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--black);
}

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

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
}

.portfolio-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.2rem;
	border-radius: 100px;
	background: var(--white);
	border: 1.5px solid var(--gray-200);
	color: var(--gray-600);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

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

.portfolio-filter.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

/* =============================================================
   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;
	}

	.project-nav__inner {
		grid-template-columns: 1fr;
	}

	.project-nav__link--next {
		text-align: left;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.project-featured {
		margin-top: -30px;
	}

	.project-hero__meta {
		gap: 1.5rem;
	}

	/* Tarif / Délai : deux colonnes égales sur mobile */
	.service-hero__meta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.service-hero__metabox {
		min-width: 0;
	}
}

/* =============================================================
   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 0.2s;
}

.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: 90;
	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 0.2s, background 0.2s;
}

.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: 95;
	background: var(--surface-dark);
	color: var(--white);
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s, transform 0.3s;
	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,
	.project-nav,
	.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 : padding latéral hérite du .wrap déjà en place
	   au niveau de section--related-posts ; on ajoute juste de l'air vertical. */
	.related-posts + .widget-area--blog {
		margin-top: 3rem;
		margin-bottom: 3rem;
		padding: 0 5%;
	}
}

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

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

.widget-title {
	font-family: var(--font-heading);
	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 0.2s;
	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: 100px;
	font-size: 0.78rem !important;
	transition: all 0.2s;
}

.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: 100px;
	padding: 4px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.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);
	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: 100px !important;
	padding: 0.45rem 1.1rem !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.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: 16px;
}

.woonet-cta-card__title {
	font-family: var(--font-heading);
	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: 100px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
}

/* 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 moderne : fond subtil + icon pill colorée + flèche au hover */
.widget-services-list li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	background: var(--surface-alt);
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.widget-services-list li a:hover {
	background: var(--primary-soft);
	color: var(--primary);
	transform: translateX(2px);
}

/* Icône dans un pill carré avec background */
.widget-services-list__icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	color: var(--primary);
	border-radius: 8px;
	flex-shrink: 0;
	transition: background 0.2s, color 0.2s;
}

.widget-services-list li a:hover .widget-services-list__icon {
	background: var(--primary);
	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) */
.widget-services-list li a::after {
	content: "→";
	margin-left: 0.25rem;
	font-size: 0.95rem;
	color: var(--primary);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s, transform 0.2s;
}

.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 cliquable : fond subtil + hover qui lift */
.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: var(--surface-alt);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.widget-realisations-list li a:hover {
	background: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 27, 61, 0.08);
}

.widget-realisations-list__thumb {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	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 0.3s 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);
}

.widget-realisations-list__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--text-strong);
	line-height: var(--leading-snug);
	transition: color 0.2s;
}

.widget-realisations-list li a:hover .widget-realisations-list__title {
	color: var(--primary);
}

/* =============================================================
   WIDGET AUTHOR
   ============================================================= */

.widget-author {
	background: var(--surface-alt);
	border-radius: 12px;
	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);
	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;
}

.article-toc[hidden] { display: none; }

/* Summary clickable — masque le marker par défaut du <details> */
.article-toc__summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 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: var(--text-lg);
	transition: background 0.15s;
}

.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 0.25s 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: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.3rem 0.75rem;
	margin-left: -0.75rem;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.9375rem; /* 15px mobile → 16px PC : aligné sur le corps de l'article */
	line-height: 1.4;
	color: var(--text);
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s, transform 0.15s;
}

@media (min-width: 768px) {
	.article-toc__link { font-size: 1rem; } /* 16px */
}

.article-toc__item--h2 > .article-toc__link::before {
	content: counter(woonet-toc-h2);
	display: inline-block;
	min-width: 1.5rem;
	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;
	flex-shrink: 0;
}

.article-toc__item--h3 > .article-toc__link::before {
	content: counter(woonet-toc-h2) "." counter(woonet-toc-h3);
	display: inline-block;
	min-width: 2rem;
	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;
	flex-shrink: 0;
}

.article-toc__link:hover {
	color: var(--primary);
	background: var(--primary-soft);
	transform: translateX(2px);
}

.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.85rem 1rem; gap: 0.6rem; font-size: var(--text-lg); }
	.article-toc__icon-wrap { width: 28px; height: 28px; }
	.article-toc__list { padding: 0.25rem 1rem 1rem; }
	.article-toc__link { padding: 0.3rem 0.6rem; }
	.article-toc__item--h3 { padding-left: 1.75rem; }
}

/* =============================================================
   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: 100px;
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.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 0.2s, color 0.2s, transform 0.2s;
}

.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 0.2s, transform 0.2s;
}

.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 0.2s 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 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
	pointer-events: none;
	z-index: 1;
}

/* 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: 0 24px 48px rgba(15, 27, 61, 0.10);
}

/* Colonne gauche : intro / titre / CTA */
.mega-menu__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mega-menu__label {
	font-family: var(--font-heading);
	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);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--text-strong);
	margin: 0;
}

.mega-menu__sub {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
	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 0.2s;
}

.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 0.2s, transform 0.15s;
}

.mega-menu__link:hover {
	background: var(--primary-soft);
	transform: translateX(2px);
}

.mega-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--primary-soft);
	color: var(--primary);
	border-radius: 8px;
	flex-shrink: 0;
	transition: background 0.2s, color 0.2s;
}

.mega-menu__link:hover .mega-menu__icon {
	background: var(--primary);
	color: var(--white);
}

.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: var(--text-strong);
	line-height: 1.3;
}

.mega-menu__excerpt {
	font-size: 0.78rem;
	color: var(--text-soft);
	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: 101;
	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-badge {
		background: rgba(37, 99, 235, 0.12);
		border-color: rgba(37, 99, 235, 0.3);
	}
	.hero-bg {
		background: radial-gradient(ellipse 60% 50% at 85% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
	}
	.hero-sub {
		color: rgba(250, 250, 248, 0.65);
	}
	.hero-stats {
		border-top-color: rgba(250, 250, 248, 0.1);
	}
	.stat-txt {
		color: rgba(250, 250, 248, 0.5);
	}
	.btn-outline {
		border-color: rgba(250, 250, 248, 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; /* l'image full-bleed reste, body get padding */
	}

	.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; /* nombres énormes étaient un peu trop sur 320-375px */
	}

	.team-info {
		padding: 1rem;
	}
}