/* ==========================================================================
   Notalma — feuille de style unique, sans build.
   Valeurs relevées dans Figma à 1920 px : voir TOKENS.md.
   ========================================================================== */

/* 1. Polices ------------------------------------------------------------- */

@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-mediumitalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-semibolditalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("../fonts/google-sans-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* Police de secours aux métriques de Google Sans : limite le décalage au chargement (CLS). */
@font-face {
	font-family: "Google Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica");
	size-adjust: 100.8%;
	ascent-override: 95.8%;
	descent-override: 28.4%;
	line-gap-override: 0%;
}

/* 2. Tokens -------------------------------------------------------------- */

:root {
	/* Couleurs */
	--c-navy: #02283d;
	--c-sky: #cde0eb;
	--c-white: #fff;
	--c-mist: #c8d2d8;
	--c-slate: #2b455d;
	--c-field: #12344a;
	--c-cream: #fff3e5;

	/* Filigrane : blanc en opacité réduite */
	--wm-hero: rgb(255 255 255 / .04);
	--wm-dark: rgb(255 255 255 / .05);
	--wm-light: rgb(255 255 255 / .2);

	/* Typographie */
	--font: "Google Sans", "Google Sans Fallback", system-ui, sans-serif;
	--fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);       /* 60 */
	--fs-h2: clamp(2rem, 1.5rem + 2.3vw, 3.4375rem);        /* 55 */
	--fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.6875rem);     /* 27 */
	--fs-lead: clamp(1.125rem, 1rem + .4vw, 1.375rem);      /* 22 */
	--fs-body: clamp(1rem, .95rem + .25vw, 1.25rem);        /* 20 */
	--fs-small: 1rem;                                       /* 16 */
	--fs-xs: .875rem;                                       /* 14 */
	--lh-title: 1.2;
	--lh-body: 1.6;
	--ls-overline: .48em;                                   /* 7.68 px à 16 px */

	/* Grille */
	--container: 1594px;
	--container-text: 944px;
	--gutter: clamp(1rem, 4vw, 2.5rem);

	/* Espacements */
	--space-2xs: .5rem;
	--space-xs: 1rem;
	--space-s: 1.25rem;
	--space-m: 2rem;
	--space-l: 3.125rem;
	--space-xl: clamp(3.5rem, 2rem + 4vw, 5.625rem);        /* 90 */
	--space-section: clamp(4rem, 2.5rem + 5vw, 7rem);       /* 112 */

	/* Rayons */
	--radius-s: 4px;
	--radius-m: 10px;
	--radius-l: 20px;

	/* Composants */
	--header-h: 80px;
	--btn-h: 60px;

	/* Couleurs contextuelles (surchargées par les thèmes de section) */
	--fg: var(--c-navy);
	--bg: var(--c-white);

	/* Espace au-dessus d'un bloc de texte qui suit un titre (interligne 3 de la maquette). */
	--lead-gap: 23px;

	/* 1 px des maquettes (1920) : réduit proportionnellement jusqu'à 0,5 px sous 960 px. */
	--px: clamp(.5px, 100vw / 1920, 1px);

	--ease: cubic-bezier(.2, .6, .2, 1);
	--duration: .2s;
}

.theme-dark  { --fg: var(--c-white); --bg: var(--c-navy); }
.theme-sky   { --fg: var(--c-navy);  --bg: var(--c-sky); }
.theme-white { --fg: var(--c-navy);  --bg: var(--c-white); }

/* 3. Base ---------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-navy);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, address { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-title); }
address { font-style: normal; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:target { scroll-margin-top: var(--space-m); }

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.site-main:focus { outline: none; }

/* 4. Utilitaires --------------------------------------------------------- */

.container {
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}

.container--text { width: min(var(--container-text), 100% - 2 * var(--gutter)); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--c-navy);
	color: var(--c-white);
	border-radius: var(--radius-s);
	font-size: var(--fs-small);
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* 5. Monogramme et filigranes -------------------------------------------- */

.monogram { display: block; overflow: visible; }

/* Filigrane géant : 2391 × 3824 px à 1920 px, décalé de −243 px. Mis à l'échelle en vw. */
.watermark {
	position: absolute;
	z-index: 0;
	left: -12.656vw;
	width: 124.53vw;
	height: 199.17vw;
	pointer-events: none;
}

.watermark--hero   { top: -19.69vw;  color: var(--wm-hero); }  /* −378 px sous le haut du hero */
.watermark--footer { top: -149.27vw; color: var(--wm-hero); }  /* −2866 px sous le haut du pied de page */

/* 6. Boutons ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--btn-h);
	min-inline-size: var(--btn-w, 0);
	padding: 0 var(--btn-px, 1.6875rem);
	border: 1px solid var(--fg);
	border-radius: var(--btn-radius, var(--radius-s));
	font-size: var(--btn-fs, var(--fs-body));
	line-height: var(--btn-lh, 1.6);
	letter-spacing: var(--btn-ls, 0);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn--plein   { background: var(--fg); color: var(--btn-text, var(--bg)); }
.btn--contour { background: transparent; color: var(--fg); }

.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.btn--plein:hover   { background: transparent; color: var(--fg); }
.btn--contour:hover { background: var(--fg); color: var(--bg); }

/* Bouton « Nous contacter » de l'en-tête : 185 × 50 px, texte 16 px. */
.btn--header {
	--btn-h: 50px;
	--btn-w: 185px;
	--btn-px: 2.25rem;
	--btn-fs: var(--fs-small);
	--btn-lh: 1.4;
}

/* 7. En-tête ------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 20;
	height: var(--header-h);
	padding-top: 8px;
	background: var(--c-white);
	color: var(--c-navy);
}

.site-header--accueil { padding-top: 17px; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
}

.site-header__logo {
	display: block;
	flex: none;
	text-decoration: none;
}

.site-header__logo .logo {
	width: 148.45px;
	height: 40px;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 47px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.4;
}

.site-nav__list a:not(.btn) {
	display: inline-block;
	padding-block: 11px;
	text-decoration: none;
	text-underline-offset: .3em;
}

.site-nav__list a:not(.btn):hover { text-decoration: underline; }

/* Page active (non maquettée) : lien souligné, bouton rempli. */
.site-nav__list a[aria-current="page"]:not(.btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .45em;
}

.site-nav__list .btn[aria-current="page"] { background: var(--fg); color: var(--bg); }

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
	.site-header,
	.site-header--accueil { padding-top: 15px; height: 80px; }

	.site-header__logo .logo { width: 129.9px; height: 35px; }

	.nav-toggle { display: block; }

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: var(--space-xs) var(--gutter) var(--space-m);
		background: var(--c-white);
		box-shadow: 0 12px 24px rgb(2 40 61 / .12);
	}

	.js .site-nav:not(.is-open) { display: none; }

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: var(--fs-body);
	}

	.site-nav__list a:not(.btn) {
		display: block;
		padding: .75rem 0;
	}

	.site-nav__list .btn { width: 100%; margin-top: var(--space-xs); }
}

/* 8. Pied de page -------------------------------------------------------- */

.site-footer {
	--fg: var(--c-white);
	--bg: var(--c-navy);
	position: relative;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--footer-fg, var(--c-white));
	border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.site-footer--creme { --footer-fg: var(--c-cream); }
.site-footer--blanc { --footer-fg: var(--c-white); }

/* Pas d'arrondi quand la dernière section est un aplat pleine largeur posé sur le bleu nuit. */
body:has(.site-main > .section--bleed:last-child) .site-footer { border-radius: 0; }

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-m);
	padding-block: 88px 56px;
}

.site-footer__logo { display: block; color: var(--c-white); }

.site-footer__logo .logo {
	width: 293px;
	height: 79px;
}

.site-footer__address {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	line-height: 1.6;
}

.site-footer__address strong { font-weight: 700; }

.site-footer a { text-decoration: none; }
.site-footer__address a,
.site-footer__list a { display: inline-block; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }

.site-footer__nav { padding-top: 35px; }

/* Colonnes relevées : 1215 → 1429 → 1618 px, alignées à droite du conteneur. */
.site-footer__list {
	display: grid;
	grid-template-columns: 214px 189px max-content;
	row-gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
}

.site-footer__list li:nth-child(5) { grid-column: span 2; }

@media (max-width: 1100px) {
	.site-footer__inner { flex-direction: column; gap: var(--space-l); padding-block: var(--space-xl) var(--space-l); }
	.site-footer__nav { padding-top: 0; }
	.site-footer__list { grid-template-columns: repeat(2, max-content); column-gap: var(--space-l); row-gap: 0; }
	.site-footer__list li:nth-child(5) { grid-column: auto; }
}

@media (max-width: 767px) {
	.site-footer__logo .logo { width: 220px; height: 59.3px; }
	.site-footer__list { grid-template-columns: 1fr; line-height: 1.6; }
	.site-footer__list a { padding-block: 6px; }
}


/* 9. Sections : socle ---------------------------------------------------- */

/*
 * Rythme vertical : marges des sections blanches (elles fusionnent entre voisines),
 * valeurs relevées dans les maquettes, en multiples de --px.
 */
.section { position: relative; }

.section-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-title);
}

.overline {
	font-size: var(--fs-small);
	line-height: 0;
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	padding-top: 7px;
	margin-bottom: 20px;
}

/* Première ligne de chaque paragraphe à 60 px d'interligne, comme dans les maquettes. */
.prose { line-height: var(--lh-body); }
.prose > * + * { margin-top: 0; }
.prose > p { margin-top: var(--lead-gap); }
.prose > p + p { margin-top: 28px; }
.has-subtitle .prose > p:first-child { margin-top: 0; }
.prose a { text-underline-offset: .2em; }
.prose ul { margin: 0; padding-left: 1.5em; }

.prose--long > * + * { margin-top: 1em; }
.prose--long h2 { font-size: var(--fs-h3); margin-top: 2em; }
.prose--long h3 { font-size: var(--fs-lead); margin-top: 1.5em; }

/* Section qui remonte sur le hero. */
.section.is-overlap {
	z-index: 2;
	margin-top: calc(var(--overlap, 325) * var(--px) * -1);
}

.hero--accueil.hero--overlap + .is-overlap { --overlap: 328; }

/* 10. Hero ---------------------------------------------------------------- */

.hero {
	overflow: hidden;
	isolation: isolate;
	background: var(--c-navy);
	color: var(--c-white);
	text-align: center;
	border-radius: 0 0 var(--radius-l) var(--radius-l);
	--hero-pt: 138;
	--hero-gap-actions: 37.64;
	--hero-pb: 151.36;
	--hero-overlap: 0;
	padding-block: calc(var(--hero-pt) * var(--px)) calc((var(--hero-pb) + var(--hero-overlap)) * var(--px));
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__logo { margin-bottom: calc(129 * var(--px)); }
.hero__logo svg { width: calc(329.69 * var(--px)); height: auto; color: var(--c-white); }

.hero__title { font-size: var(--fs-h1); line-height: 1.2; }

.hero__text {
	max-width: 618px;
	margin-top: calc(26 * var(--px));
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs) calc(59.53 * var(--px));
	margin-top: calc(var(--hero-gap-actions) * var(--px));
}

.hero .btn { --btn-w: 279.47px; }

.hero--accueil { --hero-pb: 167.36; }
.hero--accueil.hero--overlap { --hero-overlap: 328; }
.hero--interne.hero--overlap { --hero-overlap: 325; }

/* Hero suivi de la section Expertises (navigation par ancres incluse dans le chevauchement). */
.hero--interne:has(+ .section--expertises-detail) { --hero-pt: 119; --hero-gap-actions: 86; --hero-pb: 102; }
.hero--interne.hero--overlap:has(+ .section--expertises-detail) { --hero-overlap: 364; }
.hero--overlap + .section--expertises-detail.is-overlap { --overlap: 364; }

/* Hero « plein » (Contact) : sans arrondi, enchaîne sur la section sombre suivante. */
.hero--plein {
	--hero-pt: 94;
	--hero-pb: 0;
	border-radius: 0;
}

body:has(.site-main > .hero--plein:first-child) .site-header { height: 67px; }

/* 11. Texte + image ------------------------------------------------------ */

.texte-media { color: var(--fg); }

.texte-media__inner {
	display: grid;
	align-items: center;
	grid-template-columns: 878fr 616fr;
	column-gap: calc(100 * var(--px));
}

.texte-media--image-droite .texte-media__inner { grid-template-columns: 616fr 878fr; }
.texte-media--image-droite .texte-media__media { order: 2; }
.texte-media--sans-image .texte-media__inner { grid-template-columns: minmax(0, 944px); justify-content: center; }

.texte-media__media { margin: 0; }

.texte-media__image {
	width: 100%;
	aspect-ratio: 878 / 672;
	object-fit: cover;
	border-radius: var(--radius-l);
}

.texte-media__subtitle {
	padding-top: 26px;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 36px;
}

.texte-media__content { display: flex; flex-direction: column; align-items: flex-start; }
.texte-media__content > * { max-width: 100%; }
.texte-media__button { --btn-w: 262px; margin-top: calc(33 * var(--px)); }

/* Format pleine largeur sur fond coloré : aplat arrondi en haut. */
.texte-media--pleine.section--bleed {
	background: var(--bg);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	padding-block: calc(89 * var(--px));
}

/* Accueil : image à gauche, marges relevées 99 / 88 px (89 / 89 avec l'image à droite). */
.texte-media--pleine.texte-media--image-gauche.section--bleed { padding-block: calc(99 * var(--px)) calc(88 * var(--px)); }

.section--bleed.is-before-white { border-bottom-left-radius: var(--radius-l); border-bottom-right-radius: var(--radius-l); }

/* Format pleine largeur sur fond blanc. */
.texte-media--pleine:not(.section--bleed) { margin-block: calc(151 * var(--px)) calc(84.5 * var(--px)); }

/* Format carte : panneau arrondi dans la grille (« Notre mission »). */
.texte-media--carte { margin-bottom: calc(111 * var(--px)); }

.texte-media--carte .texte-media__inner {
	grid-template-columns: 456fr 782fr;
	column-gap: calc(98 * var(--px));
	padding: calc(80 * var(--px)) calc(128 * var(--px)) calc(80 * var(--px)) calc(130 * var(--px));
	background: var(--bg);
	border-radius: var(--radius-m);
}

.texte-media--carte.texte-media--image-droite .texte-media__inner {
	grid-template-columns: 782fr 456fr;
	padding-inline: calc(128 * var(--px)) calc(130 * var(--px));
}

.texte-media--carte .texte-media__image { aspect-ratio: 456 / 490; border-radius: var(--radius-m); }

/* 12. Texte centré ------------------------------------------------------- */

.texte-centre { color: var(--fg); text-align: center; margin-bottom: calc(111 * var(--px)); }

.texte-centre__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(650 * var(--px));
	padding: calc(80 * var(--px)) var(--gutter);
	background: var(--bg);
	border-radius: var(--radius-l);
}

.texte-centre__content { max-width: var(--container-text); }

.texte-centre--pleine { background: var(--bg); }
.texte-centre--pleine .texte-centre__inner { background: none; }

/* 13. Cartes -------------------------------------------------------------- */

.cartes { margin-block: calc(83 * var(--px)) calc(112 * var(--px)); }
.cartes--3-col { margin-bottom: calc(121 * var(--px)); }

.section-header {
	max-width: 782px;
	margin-inline: auto;
	text-align: center;
}

.cards {
	display: grid;
	margin: calc(53 * var(--px)) auto 0;
	padding: 0;
	list-style: none;
}

.section-header:has(.prose) + .cards { margin-top: calc(118 * var(--px)); }

.cartes--4-col .cards { grid-template-columns: repeat(4, 1fr); gap: calc(40.67 * var(--px)); }
.cartes--3-col .cards { grid-template-columns: repeat(3, 1fr); gap: calc(33 * var(--px)); max-width: 1434px; }
.cartes--2-col .cards { grid-template-columns: repeat(2, 1fr); gap: calc(33 * var(--px)); max-width: 945px; }
.cartes--1-col .cards { max-width: 456px; }

.card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: calc(423 * var(--px));
	padding: 44px 30px 30px;
	background: var(--bg);
	color: var(--fg);
	border-radius: var(--radius-m);
	transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
	--card-gap: 139;
	--wm-right: -32px;
	--wm-bottom: -50px;
}

.cartes--4-col .card {
	min-height: calc(545 * var(--px));
	--card-gap: 154;
	--wm-right: -41px;
	--wm-bottom: -48px;
}

.card__picto { flex: none; width: 50px; height: 80px; }

.card__watermark {
	position: absolute;
	right: var(--wm-right);
	bottom: var(--wm-bottom);
	width: 205px;
	height: 329px;
	color: var(--wm-light);
}

.card.theme-dark .card__watermark { color: var(--wm-dark); }

.card__body { position: relative; margin-top: calc(var(--card-gap) * var(--px)); }

.card__title { font-size: var(--fs-h3); line-height: 1.2; }

.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--c-navy); outline-offset: 4px; }
.card:has(.card__link):hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgb(2 40 61 / .18); }

.card__subtitle {
	margin-top: 6px;
	padding-block: 11px;
	font-style: italic;
	line-height: 1.2;
	color: var(--c-slate);
}

.card.theme-dark .card__subtitle { color: var(--c-mist); }

.card__text { margin-top: 3px; line-height: 1.6; }
.card__text:not(:has(br)) { max-width: 308px; }
.card__title + .card__text { margin-top: 22px; }

/* 14. Galerie ------------------------------------------------------------- */

.galerie { margin-block: calc(84.5 * var(--px)) calc(83 * var(--px)); text-align: center; }

.galerie__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(32 * var(--px));
	margin: calc(84.5 * var(--px)) 0 0;
	padding: 0;
	list-style: none;
}

.galerie__list:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 4px; }

.galerie__image {
	width: 100%;
	aspect-ratio: 618 / 624;
	object-fit: cover;
	border-radius: var(--radius-l);
}

.galerie__item:first-child .galerie__image { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.galerie__item:last-child .galerie__image { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.galerie__footer { margin-top: calc(66 * var(--px)); }
.galerie__footer .btn { --btn-w: 262px; --btn-ls: -.02em; --btn-lh: 1.4; margin-top: calc(53 * var(--px)); }

/* 15. Expertises ---------------------------------------------------------- */

.expertises { margin-bottom: calc(59 * var(--px)); }

.expertises-nav { position: relative; z-index: 1; color: var(--c-white); }

.expertises-nav__list {
	display: flex;
	justify-content: center;
	gap: calc(102 * var(--px));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.6;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.expertises-nav__link {
	display: inline-block;
	padding-block: 9px;
	margin-block: -9px;
	text-decoration: none;
	text-decoration-thickness: 8.5%;
	text-underline-offset: .15em;
	white-space: nowrap;
}

.expertises-nav__link:hover,
.expertises-nav__link.is-active { text-decoration-line: underline; }

.expertises__list {
	display: grid;
	gap: calc(50 * var(--px));
	margin-top: calc(30 * var(--px));
}

.expertise {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: calc(597 * var(--px));
	padding-block: calc(60 * var(--px));
	background: var(--bg);
	color: var(--fg);
	border-radius: var(--radius-l);
	scroll-margin-top: var(--space-m);
}

.expertise__content {
	position: relative;
	z-index: 2;
	width: calc(616 / 1592 * 100%);
	margin-left: calc(164 / 1592 * 100%);
}

.expertise--texte-droite .expertise__content { margin-left: calc(814 / 1592 * 100%); }
.expertise.has-image .expertise__content { top: calc(-15 * var(--px)); }

.expertise.theme-dark .expertise__title { letter-spacing: -.02em; }

.expertise__lead {
	padding-top: 26px;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.6;
}

.expertise__list { margin: 28px 0 0; padding-left: 1.5em; line-height: 1.6; }

.expertise__watermark {
	position: absolute;
	top: calc(36 * var(--px));
	left: calc(-100 * var(--px));
	width: 455px;
	height: 729px;
	color: var(--wm-light);
}

.expertise.theme-dark .expertise__watermark { color: var(--wm-dark); left: auto; right: calc(-78 * var(--px)); top: calc(45 * var(--px)); }

/* Image facultative : moitié opposée au texte, fondue dans la couleur du bloc. */
.expertise__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: calc(814 / 1592 * 100%);
	background: var(--c-mist);
}

.expertise--texte-droite .expertise__media { inset: 0 auto 0 0; }

.expertise__image { width: 100%; height: 100%; object-fit: cover; }

.expertise.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to left, transparent 19.755%, var(--bg) 45.791%);
}

.expertise--texte-droite.has-image::before { background: linear-gradient(to right, transparent 19.755%, var(--bg) 45.791%); }

/* 16. Appel à l'action ---------------------------------------------------- */

.cta { text-align: center; color: var(--fg); }
.cta__title { line-height: 1.1; }
.cta__button { margin-top: calc(32 * var(--px)); }

.cta--bleu-clair { background: var(--bg); padding-block: calc(56 * var(--px)) calc(71 * var(--px)); }
.cta--bleu-clair .cta__button { --btn-w: 316px; --btn-radius: 0; margin-top: calc(42 * var(--px)); }

.cta--blanc { margin-block: calc(59 * var(--px)); }
.cta--blanc .cta__button { --btn-w: 246px; }

/* 17. Accès --------------------------------------------------------------- */

.acces.is-after-dark { background: var(--c-navy); }
.acces.is-last:not(.is-after-dark) { background: linear-gradient(transparent 50%, var(--c-navy) 50%); }

.acces__band {
	padding-block: calc(90 * var(--px)) calc(89 * var(--px));
	background: var(--c-sky);
	color: var(--c-navy);
	border-radius: var(--radius-m);
}

.acces__inner {
	display: grid;
	align-items: center;
	grid-template-columns: 878fr 616fr;
	column-gap: calc(100 * var(--px));
}

.acces__content { display: flex; flex-direction: column; align-items: flex-start; }
.acces__title { letter-spacing: -.01em; }

.acces__address { display: flex; flex-direction: column; line-height: 1.6; }
.acces__street { margin-top: var(--lead-gap); font-weight: 700; }
.acces__address a, .acces__transit a { text-decoration: none; }
.acces__address a:hover { text-decoration: underline; }

.acces__transit { margin: 28px 0 0; padding: 0; list-style: none; line-height: 1.6; }

.acces__button { --btn-w: 262px; --btn-ls: -.02em; --btn-lh: 1.4; margin-top: calc(47 * var(--px)); }

/* Sans liste de transports (L'étude) : seul le texte est centré sur la carte, le bouton suit. */
.acces__content:not(:has(.acces__transit)) .acces__button { margin-top: 33px; margin-bottom: -81px; }

/* Carte : aperçu, chargée au clic. */
.map {
	position: relative;
	display: grid;
	place-items: center;
	align-content: end;
	gap: var(--space-2xs);
	aspect-ratio: 878 / 672;
	overflow: hidden;
	padding: var(--space-m);
	background: #e4edf2;
	border-radius: var(--radius-l);
	text-align: center;
}

.map__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map__load { position: relative; --fg: var(--c-navy); --bg: var(--c-white); cursor: pointer; }

.map__note {
	position: relative;
	max-width: 28em;
	padding: .25em .75em;
	background: rgb(255 255 255 / .85);
	border-radius: var(--radius-s);
	font-size: var(--fs-xs);
}

.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded > :not(iframe) { display: none; }

/* 18. Formulaire ------------------------------------------------------------ */

.formulaire {
	background: var(--c-navy);
	color: var(--c-white);
	padding-block: calc(86 * var(--px));
}

.formulaire.is-before-white { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.formulaire__inner { width: min(943px, 100% - 2 * var(--gutter)); }
.formulaire__notice { padding: var(--space-xs); border: 1px dashed currentColor; }

.formulaire__mention,
.notalma-form-mention {
	max-width: 895px;
	font-size: var(--fs-xs);
	line-height: 1.6;
	letter-spacing: .01em;
}

.formulaire__mention p,
.notalma-form-mention p { margin: 0; }
.formulaire__mention em,
.notalma-form-mention em { font-style: italic; }


/* Formulaire WPForms (styles WPForms désactivés, voir inc/forms.php). */
.wpforms-container .wpforms-label-hide,
.wpforms-container .wpforms-error-noscript,
.wpforms-container #wpforms-error-noscript { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wpforms-field-container {
	display: grid;
	grid-template-columns: 455.5fr 130.5fr 293fr;
	gap: 33.3px 32px;
}

.wpforms-field { position: relative; grid-column: 1 / -1; }
.wpforms-field.notalma-col-half:not(.notalma-prenom) { grid-column: 1; }
.wpforms-field.notalma-prenom { grid-column: 2 / span 2; }
.wpforms-field.notalma-col-email { grid-column: 1 / span 2; }
.wpforms-field.notalma-col-phone { grid-column: 3; }

.wpforms-form input:not([type="radio"], [type="checkbox"], [type="hidden"]),
.wpforms-form textarea {
	display: block;
	width: 100%;
	height: 70px;
	padding: 3px 16px 0;
	background: var(--c-field);
	border: 1px solid transparent;
	border-radius: var(--radius-m);
	color: var(--c-white);
	font: inherit;
	letter-spacing: .01em;
	transition: border-color var(--duration) var(--ease);
}

.wpforms-form textarea { height: 360px; padding-block: 23px; resize: none; }
.wpforms-form ::placeholder { color: var(--c-white); opacity: 1; }

.wpforms-form input:focus-visible,
.wpforms-form textarea:focus-visible { outline: none; border-color: var(--c-white); }

.wpforms-field-radio { margin-top: 4.7px; }
.wpforms-field-radio fieldset { margin: 0; padding: 0; border: 0; }
.wpforms-field-radio legend { padding: 0; line-height: 1.25; letter-spacing: .01em; }

.wpforms-field-radio ul {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 28px);
	grid-template-columns: 422px 324px max-content;
	gap: 11px 0;
	margin: 11px 0 0;
	padding: 0 0 0 30px;
	list-style: none;
}

.wpforms-field-radio li { display: flex; align-items: center; gap: 10px; line-height: 1.4; letter-spacing: -.02em; }
.wpforms-field-radio li label { cursor: pointer; }

.wpforms-field-radio input[type="radio"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	appearance: none;
	background: var(--c-navy);
	border: 1px solid var(--c-mist);
	border-radius: 50%;
	cursor: pointer;
}

.wpforms-field-radio input[type="radio"]:checked { background: var(--c-white); border-color: var(--c-navy); box-shadow: 0 0 0 1px var(--c-white); }
.wpforms-field-radio input[type="radio"]:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

.wpforms-field-textarea { margin-top: 3.7px; }

.wpforms-required-label { margin-left: .15em; }

.wpforms-submit-container { margin-top: 40px; }
.notalma-form-mention { margin-bottom: 33px; }

.wpforms-submit {
	min-width: 185px;
	height: 50px;
	padding: 0 2.25rem;
	background: var(--c-white);
	color: var(--c-navy);
	border: 1px solid var(--c-white);
	border-radius: var(--radius-s);
	font: inherit;
	font-size: var(--fs-small);
	line-height: 1.4;
	cursor: pointer;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.wpforms-submit:hover { background: transparent; color: var(--c-white); }
.wpforms-submit-spinner { display: inline-block; margin-left: .75rem; vertical-align: middle; }

/* Erreurs et confirmation, lisibles sur fond bleu nuit. */
.wpforms-form .wpforms-error,
.wpforms-form em.wpforms-error,
.wpforms-form label.wpforms-error {
	display: block;
	margin-top: .4rem;
	color: #ffc9c9;
	font-size: var(--fs-xs);
	font-style: normal;
}

.wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error { border-color: #ffc9c9; }
.wpforms-field-radio:has(input.wpforms-error) legend { color: #ffc9c9; }

.wpforms-error-container,
.wpforms-confirmation-container-full {
	padding: var(--space-s) var(--space-m);
	border: 1px solid currentColor;
	border-radius: var(--radius-m);
}

.wpforms-error-container { color: #ffc9c9; margin-bottom: var(--space-s); }
.wpforms-confirmation-container-full p { margin: 0; }

/* 19. Texte libre ----------------------------------------------------------- */

.texte-libre { margin-block: calc(112 * var(--px)); }


/* 20. Responsive ----------------------------------------------------------- */

@media (max-width: 1279px) {
	.cartes--4-col .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-m); max-width: 800px; }
	.cartes--4-col .card { min-height: 0; --card-gap: 120; }
	.cartes--4-col .card__body { margin-top: var(--space-l); }
}

@media (max-width: 1023px) {
	.cartes--3-col .cards,
	.cartes--2-col .cards { grid-template-columns: 1fr; max-width: 520px; gap: var(--space-s); }
	.cartes--3-col .card { min-height: 0; }
	.cartes--3-col .card__body { margin-top: var(--space-l); }

	.expertise__content,
	.expertise--texte-droite .expertise__content { width: auto; margin-inline: var(--space-l); }

	.expertise.has-image { flex-direction: column; align-items: stretch; padding-top: 0; }
	.expertise.has-image .expertise__media,
	.expertise--texte-droite.has-image .expertise__media { position: relative; inset: auto; width: 100%; height: clamp(180px, 40vw, 320px); }
	.expertise.has-image::before { display: none; }
	.expertise.has-image .expertise__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 60%); }
	.expertise.has-image .expertise__content { top: 0; margin-top: var(--space-m); }
}

@media (max-width: 899px) {
	.texte-media__inner,
	.texte-media--image-droite .texte-media__inner,
	.texte-media--carte .texte-media__inner,
	.texte-media--carte.texte-media--image-droite .texte-media__inner,
	.acces__inner {
		grid-template-columns: 1fr;
		row-gap: var(--space-m);
	}

	.texte-media--image-droite .texte-media__media { order: 0; }

	.texte-media--carte .texte-media__inner,
	.texte-media--carte.texte-media--image-droite .texte-media__inner { padding: var(--space-m) var(--space-m) var(--space-l); }

	.texte-media--carte .texte-media__image { aspect-ratio: 4 / 3; }

	.texte-centre__inner { min-height: 0; padding-block: var(--space-xl); }

	.acces__content:not(:has(.acces__transit)) .acces__button { margin-bottom: 0; }

	/* Galerie : défilement horizontal. */
	.galerie__list {
		display: flex;
		gap: var(--space-xs);
		overflow-x: auto;
		padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.galerie__item { flex: 0 0 min(80vw, 420px); scroll-snap-align: start; }
	.galerie__item .galerie__image { border-radius: var(--radius-l) !important; }

	/* Navigation par ancres : défilement horizontal. */
	.expertises-nav__list {
		justify-content: flex-start;
		gap: var(--space-m);
		overflow-x: auto;
		padding: 0 var(--gutter) var(--space-2xs);
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--gutter);
	}

	.expertises-nav__list li { flex: none; scroll-snap-align: start; }
	.expertises-nav__link { padding-block: .5rem; }

	.hero--interne.hero--overlap:has(+ .section--expertises-detail) { --hero-overlap: 300; }
	.hero--overlap + .section--expertises-detail.is-overlap { --overlap: 300; }

	/* Formulaire : une colonne. */
	.wpforms-field-container { grid-template-columns: 1fr; gap: var(--space-s); }
	.wpforms-field.notalma-col-half:not(.notalma-prenom),
	.wpforms-field.notalma-prenom,
	.wpforms-field.notalma-col-email,
	.wpforms-field.notalma-col-phone { grid-column: 1; }

	.wpforms-form input:not([type="radio"], [type="checkbox"], [type="hidden"]) { height: 60px; }
	.wpforms-form textarea { height: 240px; }

	.wpforms-field-radio ul {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
		gap: var(--space-2xs);
		padding-left: 0;
	}

	.wpforms-field-radio li { min-height: 44px; }
}

@media (max-width: 599px) {
	.cartes--4-col .cards { grid-template-columns: 1fr; max-width: 520px; }

	.hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
	.hero .btn { --btn-w: 0; }

	.cta--bleu-clair .cta__button,
	.cta--blanc .cta__button { --btn-w: 0; }

	.section-title br,
	.hero__title br,
	.hero__text br { display: none; }

	.expertise__content,
	.expertise--texte-droite .expertise__content { margin-inline: var(--space-m); }

	.acces__title,
	.section-title { overflow-wrap: break-word; }

	.acces__band { border-radius: 0; }
}

/* 21. Animations d'apparition -------------------------------------------- */

/*
 * Seuls les éléments situés sous la ligne de flottaison au chargement sont masqués (par main.js) :
 * le hero et l'image LCP ne sont jamais retardés. Sans JS ou en mouvement réduit, rien n'est masqué.
 */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		transition:
			opacity .7s var(--ease) var(--reveal-delay, 0s),
			transform .7s var(--ease) var(--reveal-delay, 0s);
	}

	.reveal-pending {
		opacity: 0;
		transform: translateY(24px);
	}
}

@media print {
	.reveal-pending { opacity: 1; transform: none; }
}

/* 22. Préférences -------------------------------------------------------- */

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