/*
 * Méloria Jardins — feuille de style principale.
 *
 * Écrite à la main, sans framework ni préprocesseur : le fichier est servi tel
 * qu'il est écrit, et se relit sans outil.
 *
 * Direction artistique
 * --------------------
 * Le site est composé comme un dossier d'atelier, pas comme une page de
 * services. Trois règles en découlent, et expliquent la plupart des choix
 * ci-dessous :
 *
 *   1. la typographie porte la page, l'image l'illustre — d'où l'ouverture sur
 *      un titre plein cadre plutôt que sur une photographie voilée de noir,
 *      composition devenue le gabarit par défaut de tous les sites de service ;
 *   2. la structure est visible : filets, repères chiffrés, marges généreuses,
 *      aucune ombre portée, aucune carte arrondie ;
 *   3. l'asymétrie est la règle. Des blocs qui débordent de la grille, un index
 *      de projets plutôt qu'une grille de vignettes, jamais trois colonnes
 *      identiques alignées.
 *
 * Sommaire
 *   01. Jetons de conception
 *   02. Socle et typographie
 *   03. Mise en page
 *   04. Composants d'interface
 *   05. En-tête et navigation
 *   06. Bandes de couleur de la page d'accueil
 *   08. Blocs de contenu
 *   09. Réalisations, services et zones
 *   10. Formulaire de devis
 *   11. Pied de page
 *   12. Utilitaires, impression, préférences système
 */

/* ==========================================================================
   01. Jetons de conception
   ========================================================================== */

:root {
	/* Palette — §4 du cahier des charges. */
	--color-bg: #f5f3ee;
	--color-surface: #ffffff;
	--color-ink: #1d211c;
	--color-olive: #53624a;
	--color-olive-dark: #344032;
	--color-sand: #c8b99f;
	/*
	 * Le sable de la charte sert les filets et les aplats, où le contraste
	 * n'entre pas en jeu. Dès qu'il porte du texte — les numéros de section et
	 * de projet — il passe à cette déclinaison, qui tient le seuil AA.
	 */
	--color-sand-ink: #756540;
	/*
	 * Gris végétal assombri par rapport au #6C7169 du cahier des charges : sur
	 * le crème du fond, la valeur d'origine plafonne à 4,4:1, juste sous le
	 * seuil AA exigé au §19. Le ton reste le même, le contraste passe à 5,1:1.
	 */
	--color-muted: #63685f;
	--color-border: rgba(29, 33, 28, 0.12);

	/*
	 * Sols de couleur.
	 *
	 * Le cahier des charges fixe une palette de crème, d'olive et de sable ;
	 * il écarte le vert fluo et les dégradés verts, pas la couleur. Ces
	 * valeurs prolongent la charte : deux verts assez sombres pour porter du
	 * texte blanc, et une terre cuite réservée au moment où l'on demande
	 * quelque chose au visiteur.
	 */
	--color-vert-nuit: #1f2a19;
	--color-vert: #34452b;
	--color-terre: #9d5230;
	--color-sable: #e9dec8;

	/* Déclinaisons, toutes dérivées de la palette. */
	--color-bg-alt: #eeeae1;
	--color-ink-deep: #141810;
	--color-ink-soft: rgba(29, 33, 28, 0.74);
	--color-sand-soft: rgba(200, 185, 159, 0.3);
	--rule: 1px solid var(--color-border);

	--font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--font-body: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Rythme vertical : une seule échelle, reprise par toutes les sections. */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.25rem;
	--space-5: 3.5rem;
	--space-6: 5.5rem;
	--section-y: clamp(4rem, 8vw, 7.5rem);

	--wrap: 68ch;
	--wrap-wide: 1320px;
	--gutter: clamp(1.25rem, 4.5vw, 4rem);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition: 320ms var(--ease);
}

/* ==========================================================================
   02. Socle et typographie
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-2);
	font-weight: 500;
	line-height: 1.15;
}

p {
	margin: 0 0 var(--space-2);
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0 0 var(--space-2);
	padding-left: 1.2em;
}

/*
 * Titres éditoriaux.
 *
 * Cormorant Garamond en graisse 300 : sa finesse ne tient qu'aux grandes
 * tailles, avec un interlignage inférieur à l'unité et un léger resserrement.
 * En dessous de 1,6 rem, l'interface repasse en Manrope.
 */
.display {
	font-family: var(--font-display);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/*
 * Repère de section.
 *
 * Le chiffre romain et le filet remplacent le pictogramme décoratif : ils
 * situent la section dans la page sans ajouter d'illustration, et donnent à
 * l'ensemble sa lisibilité de dossier.
 */
.label {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0 0 var(--space-3);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--color-muted);
}

.label__index {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--color-sand-ink);
	flex: none;
}

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

.label::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 6rem;
	background: var(--color-border);
	transform: translateY(-0.3em);
}

.label--light {
	color: rgba(255, 255, 255, 0.74);
}

.label--light::after {
	background: rgba(255, 255, 255, 0.28);
}

/* Colonne de texte courant. */
.prose {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
	max-width: 68ch;
}

.prose > * + * {
	margin-top: var(--space-2);
}

.prose h2 {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--color-ink);
	margin-top: var(--space-5);
}

.prose h3 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-ink);
	margin-top: var(--space-4);
}

.prose a {
	color: var(--color-olive-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-sand);
}

.prose a:hover {
	color: var(--color-ink);
	text-decoration-color: currentColor;
}

.prose ul,
.prose ol {
	padding-left: 1.1em;
}

.prose li + li {
	margin-top: 0.4rem;
}

.prose img {
	margin-block: var(--space-4);
}

.prose--small {
	font-size: 0.9375rem;
}

/*
 * Chapô d'un contenu long : le premier paragraphe est légèrement agrandi et
 * ramené à la couleur pleine. C'est le seul repère typographique qui distingue
 * une entrée en matière d'un paragraphe courant, sans rien demander au client
 * au moment où il rédige.
 */
.section--page .prose > p:first-child {
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.55;
	color: var(--color-ink);
	max-width: 56ch;
}

.prose--lede {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.statement {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 300;
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--color-ink);
	max-width: 26ch;
	margin: 0;
}

/* ==========================================================================
   03. Mise en page
   ========================================================================== */

.site-main {
	display: block;
}

.wrap {
	width: 100%;
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * Colonne de lecture : sa mesure reste celle d'un texte courant, mais elle
 * s'aligne sur le bord gauche de la grille large plutôt que d'être centrée. Un
 * chapô centré sous un titre aligné à gauche se lit comme une erreur de
 * gabarit.
 */
.wrap:not(.wrap--wide) > * {
	max-width: var(--wrap);
}

/* Une phrase mise en exergue se mesure en signes, pas en colonne de texte. */
.wrap > .statement {
	max-width: 32ch;
}

.wrap--wide {
	max-width: var(--wrap-wide);
}

.section {
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--tight + .section--page,
.section--page + .section--tight {
	padding-top: 0;
}

/*
 * L'en-tête de page pose déjà une marge basse : la section suivante n'a pas à
 * y ajouter un blanc pleine hauteur, qui couperait la page en deux. Même
 * raisonnement entre la fiche d'un projet et sa galerie.
 */
.page-header + .section,
.section--fiche + .section--galerie {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.section--alt,
.section--prestations,
.section--budget {
	background: var(--color-bg-alt);
}

.section__after {
	margin-top: var(--space-4);
}

.section-head {
	max-width: 62rem;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head__title {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	max-width: 20ch;
	margin-bottom: 0;
}

.section-head__text {
	margin-top: var(--space-3);
	color: var(--color-ink-soft);
	max-width: 56ch;
}

/*
 * Grille éditoriale : repère à gauche, texte au centre, image à droite. Le
 * décalage — et non une ombre ou un arrondi — donne à la page son caractère.
 */
.editorial {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1000px) {
	.editorial {
		grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 0.74fr);
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: start;
	}

	/*
	 * Variante « débordante » : la photographie sort de la grille par la droite
	 * et va toucher le bord de la fenêtre. C'est ce qui donne son échelle à la
	 * section — une image sagement rangée dans sa colonne, entourée de blanc,
	 * n'a jamais l'air que d'une illustration.
	 */
	.editorial--bleed {
		grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 0.92fr);
	}

	.editorial--bleed .editorial__media {
		margin-right: calc(((100vw - min(100vw, var(--wrap-wide))) / 2 + var(--gutter)) * -1);
	}

	.editorial--bleed .editorial__media img {
		aspect-ratio: 4 / 5;
	}

	.editorial__side {
		position: sticky;
		top: 7rem;
	}

	.editorial--reverse .editorial__side {
		order: 1;
	}

	.editorial--reverse .editorial__main {
		order: 3;
	}

	.editorial--reverse .editorial__media {
		order: 2;
	}
}

.editorial__side .label {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.editorial__side .label::after {
	display: none;
}

.editorial__title {
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	max-width: 18ch;
	margin-bottom: var(--space-3);
}

.editorial__lede {
	color: var(--color-ink-soft);
	max-width: 52ch;
	margin-bottom: var(--space-3);
}

.editorial__aside {
	border-top: var(--rule);
	padding-top: var(--space-3);
}

.editorial__media {
	margin: 0;
	position: relative;
}

.editorial__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.editorial__media--wide img {
	aspect-ratio: 4 / 3;
}

/* Le filet sable rappelle la palette sans ajouter de couleur de fond. */
.editorial__media::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.9rem;
	width: 5rem;
	height: 1px;
	background: var(--color-sand);
}

.editorial--bleed .editorial__media::after {
	display: none;
}

/*
 * Légende de photographie : le lieu et le sujet, en italique, comme sous une
 * planche. C'est un détail, et c'est exactement ce qui distingue une image
 * choisie d'une image posée là.
 */
.editorial__legende {
	margin-top: var(--space-2);
	padding-left: var(--gutter);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--color-muted);
}

@media (min-width: 1000px) {
	.editorial__legende {
		padding-left: 0;
	}
}

.grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 720px) {
	.grid--projets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.grid--projets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   04. Composants d'interface
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 1.8rem;
	border: 1px solid transparent;
	background: var(--color-olive-dark);
	color: var(--color-bg);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover {
	background: var(--color-ink);
	color: var(--color-bg);
}

.btn--ghost {
	background: transparent;
	color: var(--color-ink);
	border-color: rgba(29, 33, 28, 0.3);
}

.btn--ghost:hover {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

/*
 * Bouton secondaire réduit à un lien souligné : deux boutons pleins côte à
 * côte se disputent l'attention, et le second finit par affaiblir le premier.
 */
.btn--text {
	padding: 1rem 0;
	background: transparent;
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-sand);
}

.btn--text:hover {
	background: transparent;
	color: var(--color-olive-dark);
	border-bottom-color: var(--color-olive-dark);
}

.btn--compact {
	padding: 0.75rem 1.1rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.btn--large {
	padding: 1.15rem 2.2rem;
	font-size: 0.875rem;
}

.btn[hidden],
[hidden] {
	display: none;
}

.link-arrow {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--color-sand);
	transition: color var(--transition), border-color var(--transition);
}

.link-arrow::after {
	content: "→";
	transition: transform var(--transition);
}

.link-arrow:hover {
	color: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
}

.link-arrow:hover::after {
	transform: translateX(0.3rem);
}

/* Listes : le marqueur est un tiret, jamais une icône de feuille (§4). */
.ticks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ticks li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.5rem;
	border-top: var(--rule);
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35em;
	width: 0.75rem;
	height: 1px;
	background: var(--color-sand);
}

@media (min-width: 760px) {
	.ticks--two {
		columns: 2;
		column-gap: var(--space-5);
	}

	.ticks--columns {
		columns: 3;
		column-gap: var(--space-5);
	}
}

.ticks--two li,
.ticks--columns li {
	break-inside: avoid;
}

/* Listes de définition. */
.notes {
	margin: var(--space-5) 0 0;
	border-top: var(--rule);
}

.notes__row {
	display: grid;
	gap: 0.35rem;
	padding: var(--space-3) 0;
	border-bottom: var(--rule);
}

@media (min-width: 760px) {
	.notes__row {
		grid-template-columns: 10rem minmax(0, 1fr);
		gap: var(--space-3);
		align-items: baseline;
	}
}

/*
 * L'intitulé passe en italique de Cormorant : un glossaire, pas un tableau de
 * caractéristiques. Le gras de la police d'interface donnait à cette liste un
 * air de fiche technique, qui est précisément ce qu'on ne veut pas ici.
 */
.notes dt {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--color-olive-dark);
}

.notes dd {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 0.9688rem;
	max-width: 52ch;
}

.deflist {
	margin: var(--space-3) 0 0;
	border-top: var(--rule);
}

.deflist__row {
	padding: var(--space-2) 0;
	border-bottom: var(--rule);
}

.deflist dt {
	font-weight: 600;
	font-size: 0.9375rem;
}

.deflist dd {
	margin: 0.25rem 0 0;
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	max-width: 60ch;
}

@media (min-width: 860px) {
	.deflist--grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-6);
		border-top: 0;
	}

	.deflist--grid .deflist__row {
		border-top: var(--rule);
		border-bottom: 0;
	}
}

.chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: var(--space-3) 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

.chips--links .chips__item a {
	text-decoration: none;
	border-bottom: 1px solid var(--color-sand);
	padding-bottom: 0.15rem;
}

.chips--links .chips__item a:hover {
	border-color: var(--color-ink);
}

.communes {
	list-style: none;
	margin: var(--space-3) 0 var(--space-4);
	padding: 0;
	columns: 2;
	column-gap: var(--space-4);
	font-size: 0.875rem;
}

/*
 * Deux colonnes, pas trois : dans la colonne éditoriale, un troisième rang
 * casserait « Aix-en-Provence » en deux lignes et séparerait le code postal de
 * sa commune.
 */
.communes__item {
	break-inside: avoid;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.45rem 0;
	border-bottom: var(--rule);
	color: var(--color-ink-soft);
}

.communes__cp {
	color: var(--color-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	flex: none;
}

/* ==========================================================================
   05. En-tête et navigation
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--color-ink);
	color: var(--color-bg);
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
}

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

/*
 * En-tête toujours opaque, sur le fond de la charte.
 *
 * L'en-tête transparent posé sur une photographie oblige à voiler l'image et
 * rend le contraste du menu dépendant du visuel choisi par le client. Un fond
 * crème constant règle les deux, et les pages ouvrent de toute façon sur la
 * typographie.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.site-header.is-stuck {
	border-bottom-color: var(--color-border);
}

.site-header__inner {
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	justify-content: space-between;
}

/*
 * L'identité reste visible par-dessus le panneau mobile : le menu ouvert doit
 * rester le même site, pas un écran neutre.
 */
.site-header__brand {
	position: relative;
	z-index: 45;
}

.wordmark {
	display: inline-block;
	text-decoration: none;
	line-height: 1;
}

.wordmark__name {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wordmark__baseline {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.5625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-muted);
	white-space: nowrap;
}

.custom-logo-link img {
	max-height: 56px;
	width: auto;
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 2rem);
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.5vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__item {
	position: relative;
}

.nav__link {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), color var(--transition);
}

.nav__link:hover,
.nav__item.is-current > .nav__link {
	border-bottom-color: var(--color-sand);
}

.nav__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.25rem;
	cursor: pointer;
	color: inherit;
}

.nav__chevron {
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--transition);
}

.nav__sub {
	list-style: none;
	margin: 0;
	padding: var(--space-2);
	min-width: 17rem;
}

@media (min-width: 1040px) {
	.nav__item--parent > .nav__toggle {
		display: inline-block;
		margin-left: 0.4rem;
		vertical-align: middle;
	}

	.nav__sub {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: -1.25rem;
		background: var(--color-surface);
		border: var(--rule);
		color: var(--color-ink);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.4rem);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		z-index: 20;
	}

	.nav__item--parent:hover > .nav__sub,
	.nav__item--parent:focus-within > .nav__sub,
	.nav__item--parent.is-open > .nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav__sub .nav__link {
		display: block;
		padding: 0.5rem 0;
		letter-spacing: 0.02em;
		text-transform: none;
		font-size: 0.9375rem;
		font-weight: 500;
	}
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/*
 * Le numéro disparaît des écrans intermédiaires : entre 1040 et 1240 px, le
 * menu, le téléphone et le bouton ne tiennent pas sur une ligne, et c'est le
 * menu qui doit rester intact.
 */
@media (min-width: 1040px) and (max-width: 1279px) {
	.nav__phone {
		display: none;
	}
}

.nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nav__phone-icon {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--color-olive);
	flex: none;
}

/*
 * Le bouton doit rester au-dessus du panneau qu'il ouvre.
 *
 * Le panneau mobile est en `position: fixed` avec un z-index de 40, dans le
 * même contexte d'empilement que le bouton : sans cette élévation, il recouvre
 * le bouton dès qu'il s'ouvre, et le menu devient impossible à refermer
 * autrement qu'en suivant un lien.
 */
.burger {
	position: relative;
	z-index: 45;
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	padding: 0.5rem 0;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: inherit;
	cursor: pointer;
}

.burger__bars {
	display: block;
	width: 1.4rem;
}

.burger__bars span {
	display: block;
	height: 1px;
	background: currentColor;
	transition: transform var(--transition), opacity var(--transition);
}

.burger__bars span + span {
	margin-top: 0.375rem;
}

.burger[aria-expanded="true"] .burger__bars span:first-child {
	transform: translateY(0.19rem) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars span:last-child {
	transform: translateY(-0.19rem) rotate(-45deg);
}

/* Menu mobile : panneau plein écran, même balisage que le menu de bureau. */
@media (max-width: 1039px) {
	.burger {
		display: inline-flex;
	}

	.nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 6rem var(--gutter) var(--space-5);
		background: var(--color-bg);
		color: var(--color-ink);
		overflow-y: auto;
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 380ms var(--ease), visibility 380ms var(--ease);
		z-index: 40;
	}

	.nav.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav__item--top {
		border-bottom: var(--rule);
	}

	.nav__link {
		padding: 1rem 0;
		font-family: var(--font-display);
		font-size: 1.65rem;
		font-weight: 300;
		letter-spacing: 0;
		text-transform: none;
	}

	.nav__item--parent > .nav__toggle {
		display: block;
		position: absolute;
		right: 0;
		top: 1.1rem;
		padding: 0.5rem;
	}

	.nav__sub {
		display: none;
		padding: 0 0 var(--space-2) var(--space-3);
	}

	.nav__item--parent.is-open .nav__sub {
		display: block;
	}

	.nav__item--parent.is-open .nav__chevron {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.nav__sub .nav__link {
		font-family: var(--font-body);
		font-size: 1rem;
		padding: 0.5rem 0;
	}

	.nav__actions {
		margin-top: var(--space-5);
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}

	.nav__actions .btn {
		width: 100%;
	}

	.nav__phone {
		justify-content: center;
		padding: 0.9rem;
		border: var(--rule);
	}

	body.nav-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   08. Blocs de contenu
   ========================================================================== */

/* En-tête des pages intérieures : même principe que l'accueil, typographie
   d'abord, photographie ensuite. */
.page-header {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-header__title {
	font-size: clamp(2.4rem, 5.6vw, 4.4rem);
	line-height: 1;
	letter-spacing: -0.025em;
	max-width: 18ch;
	margin-bottom: 0;
}

.page-header__lede {
	margin-top: var(--space-3);
	max-width: 54ch;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--color-ink-soft);
}

.page-header__media {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.page-header__media img {
	width: 100%;
	height: clamp(16rem, 44vh, 26rem);
	object-fit: cover;
}

.breadcrumb {
	margin-bottom: var(--space-3);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--color-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--color-sand);
}

.breadcrumb__item a {
	text-decoration: none;
}

.breadcrumb__item a:hover {
	text-decoration: underline;
}

.callout {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 2px solid var(--color-sand);
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	max-width: 62ch;
}

.placeholder-flag {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: 0.35rem 0.8rem;
	border: 1px dashed var(--color-sand);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--color-muted);
}

.quote {
	margin: 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-sand);
	max-width: 46ch;
}

.quote blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.012em;
}

.quote figcaption {
	margin-top: var(--space-2);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* Questions fréquentes : <details> natif, sans script. */
.faq {
	border-top: var(--rule);
	max-width: 62rem;
}

.faq__item {
	border-bottom: var(--rule);
}

.faq__question {
	list-style: none;
	cursor: pointer;
	padding: var(--space-3) 3rem var(--space-3) 0;
	position: relative;
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	font-weight: 600;
	transition: color var(--transition);
}

.faq__question:hover {
	color: var(--color-olive-dark);
}

.faq__question::-webkit-details-marker {
	display: none;
}

/* Le signe se transforme en trait quand le bloc est ouvert. */
.faq__question::after,
.faq__question::before {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.85rem;
	height: 1px;
	background: var(--color-olive);
	transition: transform var(--transition), opacity var(--transition);
}

.faq__question::before {
	transform: rotate(90deg);
}

.faq__item[open] .faq__question::before {
	transform: rotate(0deg);
	opacity: 0;
}

.faq__answer {
	padding: 0 3rem var(--space-3) 0;
	color: var(--color-ink-soft);
	font-size: 0.9688rem;
	max-width: 68ch;
}

.faq__answer > *:first-child {
	margin-top: 0;
}

.faq-group + .faq-group {
	margin-top: var(--space-6);
}

.faq-group__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 300;
	letter-spacing: -0.015em;
	margin-bottom: var(--space-3);
}

/* Comparateur avant / après. */
.compare {
	margin-top: var(--space-4);
}

.compare__frame {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.compare__layer img {
	width: 100%;
	display: block;
}

.compare__layer--before {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
}

.compare__layer--before img {
	width: auto;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: rgba(255, 255, 255, 0.9);
	transform: translateX(-1px);
	pointer-events: none;
}

.compare__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: rgba(20, 26, 19, 0.35);
}

.compare__control {
	display: block;
	margin-top: var(--space-2);
}

.compare__control input[type="range"] {
	width: 100%;
	accent-color: var(--color-olive);
}

.compare__legend {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* ==========================================================================
   09. Réalisations, services et zones
   ========================================================================== */

.filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-3) var(--space-5);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-5);
	border-bottom: var(--rule);
}

.filtres__all {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.25rem;
}

.filtres__all.is-current,
.filtres__all:hover {
	border-bottom-color: var(--color-sand);
}

.filtres__label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.filtres__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.filtres__link {
	font-size: 0.9063rem;
	color: var(--color-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.15rem;
}

.filtres__link:hover {
	color: var(--color-ink);
	border-bottom-color: var(--color-sand);
}

.filtres__link.is-current {
	color: var(--color-ink);
	font-weight: 600;
	border-bottom-color: var(--color-olive);
}

/* Vignette de projet, employée sur les archives de termes et la recherche. */
.card {
	background: transparent;
	border: 0;
}

.card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.card__media {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-alt);
	aspect-ratio: 4 / 3;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease);
}

.card__link:hover .card__media img {
	transform: scale(1.035);
}

.card__media-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-bg-alt), var(--color-sand-soft));
}

.card__body {
	padding: var(--space-3) 0 0;
}

.card__kicker {
	margin: 0 0 0.4rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-olive);
}

.card__title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin-bottom: 0.4rem;
}

.card__meta {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-muted);
	letter-spacing: 0.04em;
}

.card__more {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--color-sand);
	padding-bottom: 0.2rem;
}

.card__link:hover .card__more {
	border-color: var(--color-ink);
}

/* Fiche projet : récit à gauche, caractéristiques à droite. */
.fiche {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 960px) {
	.fiche {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
		align-items: start;
	}

	.fiche__side {
		position: sticky;
		top: 7rem;
	}
}

.fiche__main > * + * {
	margin-top: var(--space-4);
}

.recit {
	display: grid;
	gap: 0.5rem;
	max-width: 62ch;
}

@media (min-width: 760px) {
	.recit {
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: var(--space-3);
	}
}

.recit__title {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0.35rem 0 0;
}

.recit__text {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
	margin: 0;
}

.fiche__title {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: var(--space-4) 0 var(--space-2);
	padding-top: var(--space-3);
	border-top: var(--rule);
}

.fiche__side > .fiche__title:first-child,
.editorial__aside > .fiche__title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.fiche__list {
	margin: 0;
}

.fiche__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 0.6rem 0;
	border-bottom: var(--rule);
}

.fiche__row dt {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.fiche__row dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: right;
}

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

.fiche__links li + li {
	margin-top: 0.4rem;
}

.fiche__links a {
	font-size: 0.9375rem;
	color: var(--color-olive-dark);
}

/* Galerie : une image large toutes les trois, pour casser la grille. */
.galerie {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 800px) {
	.galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.galerie__item--wide {
		grid-column: 1 / -1;
	}
}

.galerie__item {
	margin: 0;
}

.galerie__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.galerie__item figcaption {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

/* Page « Services » : mêmes rangées que l'accueil, en plus détaillé. */
.offre {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	border-top: var(--rule);
	align-items: start;
}

.offre:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 960px) {
	.offre {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}

	.offre--reverse .offre__text {
		order: 2;
	}
}

.offre__index {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--color-sand);
	margin: 0 0 var(--space-2);
	line-height: 1;
}

.offre__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-2);
}

.offre__title a {
	text-decoration: none;
}

.offre__title a:hover {
	color: var(--color-olive-dark);
}

.offre__lede {
	font-size: 1.0625rem;
	color: var(--color-ink);
	max-width: 40ch;
}

.offre__probleme {
	color: var(--color-ink-soft);
	max-width: 52ch;
	font-size: 0.9688rem;
}

.offre__more {
	margin-top: var(--space-3);
}

.offre__media {
	margin: 0;
	overflow: hidden;
}

.offre__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 900ms var(--ease);
}

.offre:hover .offre__media img {
	transform: scale(1.03);
}

/* Zones d'intervention. */
.secteur + .secteur {
	margin-top: var(--space-6);
}

.secteur__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 300;
	letter-spacing: -0.015em;
	padding-bottom: var(--space-2);
	border-bottom: var(--rule);
	margin-bottom: var(--space-3);
}

.secteur__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

@media (min-width: 700px) {
	.secteur__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-5);
	}
}

@media (min-width: 1080px) {
	.secteur__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.secteur__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.7rem 0;
	border-bottom: var(--rule);
}

.secteur__nom {
	font-weight: 600;
}

.secteur__cp {
	font-size: 0.8125rem;
	color: var(--color-muted);
	letter-spacing: 0.06em;
}

.secteur__note {
	flex-basis: 100%;
	font-size: 0.875rem;
	color: var(--color-ink-soft);
}

/* Étapes détaillées d'une fiche de service. */
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule);
}

.steps__item {
	display: grid;
	gap: 0.3rem;
	padding: var(--space-3) 0;
	border-bottom: var(--rule);
}

@media (min-width: 760px) {
	.steps__item {
		grid-template-columns: 3rem minmax(0, 1fr);
		column-gap: var(--space-3);
	}

	.steps__num {
		grid-row: span 2;
	}
}

.steps__num {
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--color-sand);
}

.steps__title {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0;
}

.steps__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	max-width: 60ch;
}

/* ==========================================================================
   10. Formulaire de devis
   ========================================================================== */

.devis-layout {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.devis-layout {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
	}

	.devis-layout__side {
		position: sticky;
		top: 7rem;
	}
}

.devis__form {
	background: var(--color-surface);
	padding: clamp(1.5rem, 4vw, 3rem);
	border: var(--rule);
}

/* Champ-piège : masqué visuellement, rempli par les robots. */
.devis__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.devis__alert {
	margin-bottom: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-left: 3px solid rgb(150, 60, 40);
	background: rgba(150, 60, 40, 0.05);
	font-size: 0.9375rem;
}

.devis__confirmation {
	background: var(--color-surface);
	border: var(--rule);
	border-left: 3px solid var(--color-olive);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.devis__confirmation-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 300;
	letter-spacing: -0.015em;
}

.devis__confirmation-links {
	margin-top: var(--space-3);
}

.devis__step {
	border: 0;
	margin: 0;
	padding: 0;
}

.devis__step + .devis__step {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: var(--rule);
}

.devis__step-legend {
	display: block;
	width: 100%;
	margin-bottom: var(--space-2);
	padding: 0;
}

.devis__step-count {
	display: block;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-olive);
	margin-bottom: 0.5rem;
}

.devis__step-title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.devis__step-intro {
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	margin-bottom: var(--space-3);
}

.devis__fields {
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 620px) {
	.devis__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.field {
		grid-column: 1 / -1;
	}

	.field--half {
		grid-column: span 1;
	}

	.field--third {
		grid-column: span 1;
		max-width: 12rem;
	}
}

.devis__progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0 0 var(--space-3);
	border-bottom: var(--rule);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--color-muted);
}

.devis__progress-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.devis__progress-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: var(--rule);
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 600;
}

.devis__progress-item.is-current {
	color: var(--color-ink);
	font-weight: 600;
}

.devis__progress-item.is-current span {
	background: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
	color: var(--color-bg);
}

.devis__progress-item.is-done span {
	background: var(--color-sand-soft);
	border-color: var(--color-sand);
}

.devis__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.devis__submit {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: var(--rule);
}

.devis__submit-note {
	margin-top: var(--space-2);
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.devis__rgpd {
	margin-top: var(--space-3);
	font-size: 0.8125rem;
	color: var(--color-muted);
	max-width: 64ch;
}

.field__label,
.devis__step .field__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.field__set {
	border: 0;
	margin: 0;
	padding: 0;
}

.field__required {
	color: var(--color-olive);
}

.field__help {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.field__error {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	color: rgb(150, 60, 40);
	font-weight: 600;
}

.input {
	width: 100%;
	padding: 0.85rem 0.9rem;
	border: var(--rule);
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color var(--transition), background var(--transition);
}

.input:focus {
	outline: none;
	border-color: var(--color-olive);
	background: var(--color-surface);
}

.field--error .input {
	border-color: rgba(150, 60, 40, 0.6);
}

textarea.input {
	resize: vertical;
	min-height: 7rem;
}

.input--file {
	padding: 0.6rem;
	font-size: 0.875rem;
}

.options {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 620px) {
	.options--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Chaque choix est une cible cliquable complète : sur mobile, viser un rond de
 * 16 px avec le pouce est la première cause d'abandon d'un formulaire.
 */
.option {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.8rem 0.9rem;
	border: var(--rule);
	background: var(--color-bg);
	font-size: 0.9375rem;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
	min-height: 2.75rem;
}

.option:hover {
	border-color: var(--color-olive);
}

.option input {
	margin: 0.25rem 0 0;
	accent-color: var(--color-olive-dark);
	flex: none;
}

.option:has(input:checked) {
	border-color: var(--color-olive-dark);
	background: var(--color-surface);
}

.option--consent {
	background: transparent;
	border-style: dashed;
}

.devis-aside {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: var(--rule);
}

.devis-aside__title {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}

.devis-aside__phone {
	font-family: var(--font-display);
	font-size: 1.85rem;
	font-weight: 400;
	text-decoration: none;
}

.devis-aside__hours {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* Contact. */
.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.contact-address,
.contact-hours {
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-hours li + li {
	margin-top: 0.25rem;
}

.map {
	border: var(--rule);
	padding: var(--space-5) var(--space-4);
	text-align: center;
	background: var(--color-surface);
}

.map__notice {
	max-width: 52ch;
	margin: 0 auto var(--space-3);
	font-size: 0.875rem;
	color: var(--color-muted);
}

.map iframe {
	width: 100%;
	min-height: 22rem;
	border: 0;
}

/* ==========================================================================
   11. Pied de page
   ========================================================================== */

.site-footer {
	background: var(--color-ink-deep);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
}

.site-footer__inner {
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 760px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.site-footer__inner {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: var(--space-6);
	}
}

.site-footer a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.site-footer a:hover {
	border-bottom-color: var(--color-sand);
}

.wordmark--footer {
	margin: 0 0 var(--space-3);
	color: #fff;
}

.wordmark--footer .wordmark__name {
	font-size: 1.75rem;
}

.wordmark--footer .wordmark__baseline {
	color: var(--color-sand);
}

.site-footer__text {
	max-width: 38ch;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-footer__title {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-sand);
	margin-bottom: var(--space-3);
}

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

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

.site-footer__list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__list--inline li + li {
	margin-top: 0;
}

.site-footer__more {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-sand) !important;
	padding-bottom: 0.15rem;
}

.site-footer__address {
	font-style: normal;
}

.site-footer__address p {
	margin-bottom: 0.5rem;
}

.site-footer__hours {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.social {
	list-style: none;
	display: flex;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	padding: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__bottom {
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter) var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__copy {
	margin: 0;
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   12. Utilitaires, impression, préférences système
   ========================================================================== */

.links-list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	max-width: 34rem;
	border-top: var(--rule);
}

.links-list li {
	border-bottom: var(--rule);
}

.links-list a {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: -0.015em;
	text-decoration: none;
}

.links-list a:hover {
	color: var(--color-olive-dark);
}

.results {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule);
}

.results__item {
	padding-block: var(--space-3);
	border-bottom: var(--rule);
}

.results__kind {
	margin: 0 0 0.3rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-olive);
}

.results__title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: -0.015em;
	margin-bottom: 0.4rem;
}

.results__title a {
	text-decoration: none;
}

.results__excerpt {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	max-width: 66ch;
}

.search-block {
	max-width: 34rem;
	margin-top: var(--space-4);
}

.searchform__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.searchform__row {
	display: flex;
	gap: 0.5rem;
}

.searchform__input {
	flex: 1;
	padding: 0.85rem 0.9rem;
	border: var(--rule);
	background: var(--color-surface);
	font-family: inherit;
	font-size: 1rem;
}

.pagination,
.navigation.pagination {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: var(--rule);
}

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

.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.7rem;
	border: var(--rule);
	font-size: 0.875rem;
	text-decoration: none;
}

.pagination .current,
.nav-links .current {
	background: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
	color: var(--color-bg);
	font-weight: 600;
}

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

/*
 * Apparition à la lecture.
 *
 * Un décalage de quelques pixels, une fois, au premier passage : de quoi
 * donner du rythme au défilement sans transformer la page en diaporama. Les
 * éléments restent visibles si le script ne s'exécute pas — la classe n'est
 * posée que par JavaScript.
 */
.is-revealable {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.is-revealed {
	opacity: 1;
	transform: none;
}

/*
 * Focus visible partout. Le contour est décalé de 3 px : collé au texte, il
 * devient illisible sur les fonds sombres.
 */
:focus-visible {
	outline: 2px solid var(--color-olive);
	outline-offset: 3px;
}

.cta :focus-visible,
.site-footer :focus-visible,
.section--methode :focus-visible {
	outline-color: var(--color-sand);
}

/*
 * Classes employées par les compositions Gutenberg dans le contenu libre :
 * elles doivent produire le même rendu que dans les gabarits du thème, sinon
 * une page composée dans l'éditeur se détache du reste du site.
 */
.lede {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	color: var(--color-ink-soft);
	max-width: 52ch;
}

.wp-block-list.steps {
	list-style: none;
	padding-left: 0;
	counter-reset: etape;
}

.wp-block-list.steps li {
	counter-increment: etape;
	position: relative;
	padding: var(--space-2) 0 var(--space-2) 3rem;
	border-top: var(--rule);
}

.wp-block-list.steps li::before {
	content: counter(etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--space-2);
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--color-sand);
}

/* Compositions Gutenberg : même rythme que les sections du thème. */
.pattern-hero,
.pattern-services,
.pattern-methode,
.pattern-galerie,
.pattern-cta,
.pattern-confiance,
.pattern-faq {
	padding-block: var(--space-4);
}

.pattern-cta {
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--color-bg-alt);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.is-revealable {
		opacity: 1;
		transform: none;
	}

	.card__link:hover .card__media img,
	.row:hover .row__media img,
	.offre:hover .offre__media img {
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.cta,
	.filtres,
	.devis__form,
	.skip-link,
	.index__preview {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.opening,
	.page-header {
		padding-block: 1rem;
	}

	.opening__media,
	.page-header__media {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}


/* ==========================================================================
   06. Bandes de couleur de la page d'accueil
   ==========================================================================

   La page n'est plus une longue surface crème : elle enchaîne des sols — vert
   profond, sable, crème, terre cuite — et la photographie y occupe de vraies
   surfaces plutôt que des vignettes. Chaque bande a sa couleur, et le passage
   de l'une à l'autre donne son rythme au défilement.
   ========================================================================== */

/* --- Une seule grammaire pour toute la page ------------------------------

   Un site se lit comme un imprimé : ce qui fatigue l'œil n'est pas la
   densité, c'est le changement de règle à chaque page. La version
   précédente empilait neuf compositions différentes — tirages inclinés,
   textes posés sur des photographies, mosaïque de tuiles inégales,
   médaillons ronds — et l'ensemble se lisait comme un brouillon.

   Tout passe désormais par deux objets : un en-tête de section identique
   partout, et une carte. Une carte, c'est une image dans un rapport de
   cadrage connu, un filet, puis du texte dessous. Jamais de texte sur une
   photographie, jamais d'inclinaison, jamais de vignette hors grille. Les
   seules ruptures sont les quatre sols de couleur et les trois images qui
   traversent la fenêtre : elles n'en ont que plus de force.
   ------------------------------------------------------------------------ */

.grille {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

@media (min-width: 640px) {
	.grille--2,
	.grille--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grille--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.grille--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grille--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* --- La carte ------------------------------------------------------------ */

.carte {
	margin: 0;
}

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

.carte__media {
	display: block;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1200ms var(--ease);
}

/*
 * Trois cadrages, pas un de plus : le paysage pour les projets, le portrait
 * pour les savoir-faire, le carré pour les végétaux. Un quatrième rapport
 * suffirait à faire perdre à la page sa régularité.
 */
.carte--paysage .carte__media img {
	aspect-ratio: 3 / 2;
}

.carte--portrait .carte__media img {
	aspect-ratio: 3 / 4;
}

.carte--carre .carte__media img {
	aspect-ratio: 1;
}

.carte__lien:hover .carte__media img {
	transform: scale(1.03);
}

.carte__corps {
	display: block;
	padding-top: var(--space-3);
	margin-top: var(--space-3);
	border-top: var(--rule);
	transition: border-color var(--transition);
}

.carte__lien:hover .carte__corps {
	border-color: var(--color-vert);
}

.carte__num {
	display: block;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1;
	color: var(--color-terre);
	margin-bottom: 0.5rem;
}

.carte__titre {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.9vw, 1.65rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--color-ink);
}

.carte__latin {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--color-sand-ink);
}

.carte__texte {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	max-width: 40ch;
}

.carte__meta {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--color-muted);
}

.carte__type {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-vert);
}

.carte__lire {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-vert);
}

/* --- Ouverture ----------------------------------------------------------- */

/*
 * Le titre et l'engagement à gauche, une photographie à droite : la même
 * structure que les sections qui suivent, à l'échelle du haut de page. Le
 * collage de tirages inclinés qui occupait cette place donnait le ton d'un
 * site désordonné dès le premier écran.
 */
.ouverture {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
	background: var(--color-bg);
}

.ouverture__grille {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 1000px) {
	.ouverture__grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		gap: clamp(3rem, 6vw, 6rem);
		align-items: end;
	}
}

.ouverture__titre {
	font-size: clamp(2.6rem, 5.6vw, 4.4rem);
	line-height: 1;
	letter-spacing: -0.028em;
	max-width: 13ch;
	margin: 0 0 var(--space-3);
}

.ouverture__lede {
	color: var(--color-ink-soft);
	max-width: 40ch;
	margin: 0 0 var(--space-4);
}

.ouverture__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.ouverture__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: var(--space-3) 0 0;
	border-top: var(--rule);
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.ouverture__points li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.ouverture__points li::before {
	content: "";
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	background: var(--color-terre);
}

.ouverture__media {
	margin: 0;
}

.ouverture__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.ouverture__media figcaption {
	padding-top: var(--space-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

/* --- Point de départ : bande sable -------------------------------------- */

/*
 * La bande sable est tenue par une photographie qui touche le bord droit de
 * la fenêtre et les deux bords de la bande. Sans elle, la colonne de droite
 * s'arrêtait après quatre repères et laissait un tiers de couleur vide — le
 * défaut le plus visible d'une page longue.
 */
.section--repere {
	background: var(--color-sable);
}

.repere {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1000px) {
	.repere {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: stretch;
	}
}

.repere__titre {
	font-size: clamp(2rem, 4vw, 3.2rem);
	max-width: 15ch;
	margin-bottom: var(--space-3);
}

.repere__prose {
	max-width: 54ch;
}

/*
 * L'image sort de la grille par la droite et remonte sous les marges hautes
 * et basses de la section : elle occupe exactement la hauteur de la bande.
 */
.repere__media {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.repere__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * La légende s'appuie sur le bord bas de la photographie en grand écran ;
 * sous 1000 px elle passe dessous, où elle mangerait un coin de l'image.
 */
.repere__media figcaption {
	padding: var(--space-2) 0 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

@media (min-width: 1000px) {
	.repere__media figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: var(--space-2) var(--space-3);
		background: var(--color-sable);
	}
}

@media (min-width: 1000px) {
	.repere__media {
		margin-block: calc(var(--section-y) * -1);
		margin-right: calc(((100vw - min(100vw, var(--wrap-wide))) / 2 + var(--gutter)) * -1);
	}

	.repere__media img {
		aspect-ratio: auto;
		min-height: 100%;
	}
}

/* --- Les quatre repères -------------------------------------------------- */

.reperes {
	list-style: none;
	display: grid;
	gap: 0;
	margin: var(--space-5) 0 0;
	padding: 0;
}

@media (min-width: 620px) {
	.reperes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 clamp(1.5rem, 3vw, 3rem);
	}
}

.reperes__item {
	padding: var(--space-3) 0;
	border-top: 1px solid rgba(29, 33, 28, 0.16);
}

.reperes__num {
	display: block;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--color-terre);
	margin-bottom: 0.4rem;
}

.reperes__terme {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.2;
	margin-bottom: 0.35rem;
	color: var(--color-ink);
}

.reperes__texte {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	max-width: 38ch;
}

/* --- Palette végétale ---------------------------------------------------- */

/*
 * Six végétaux nommés, en carte carrée comme le reste de la page. Les
 * médaillons ronds posés sur un aplat vert étaient une septième manière de
 * présenter une image dans une page qui en comptait déjà six.
 */
.palette__nom {
	display: block;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.15;
	color: var(--color-ink);
}

.palette__note {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

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

/*
 * Deux colonnes de cartes, toutes du même cadrage. La mosaïque de tuiles
 * inégales, légendées par-dessus la photographie et coupée par un bloc de
 * couleur, était le passage le plus confus de la page : on n'y lisait ni les
 * titres ni les images.
 */
.projets-lien {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: var(--space-3);
	border-top: var(--rule);
}

/* --- Citation : respiration pleine largeur ------------------------------- */

.citation {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(24rem, 68vh, 40rem);
	padding-block: clamp(4rem, 9vw, 7rem);
	background: var(--color-vert-nuit);
	color: #fff;
	overflow: hidden;
}

.citation__media {
	position: absolute;
	inset: 0;
}

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

.citation__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 22, 17, 0.34), rgba(18, 22, 17, 0.55));
}

.citation__inner {
	position: relative;
	text-align: center;
}

.citation__texte {
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 22ch;
	margin: 0 auto;
	color: #fff;
}

.citation__note {
	margin: var(--space-4) 0 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

/* --- Méthode : cinq étapes en registre ---------------------------------- */

/*
 * Titre fixe à gauche, étapes qui défilent à droite. Le quinconce autour d'un
 * axe central étalait cinq lignes sur deux écrans de haut : la suite des
 * étapes — qui est tout le propos — s'y perdait entre deux vides.
 */
.methode {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 1000px) {
	.methode {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: clamp(3rem, 6vw, 6.5rem);
		align-items: start;
	}

}

.methode__tete .section-head {
	margin-bottom: 0;
}

/*
 * La photographie occupe le bas de la colonne de gauche, sous le chapô : sans
 * elle le registre laissait deux étapes en face d'un vide. Cadrage et légende
 * sont ceux des cartes, à la marge blanche près, qui n'a plus lieu d'être.
 */
.methode__media {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.methode__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.methode__media figcaption {
	padding-top: var(--space-2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule);
}

.etapes__item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 1.75rem);
	padding-block: clamp(1.15rem, 2.2vw, 1.75rem);
	border-bottom: var(--rule);
}

/*
 * Le chiffre s'aligne sur la première ligne du titre, pas sur le haut de la
 * ligne : c'est ce qui distingue un registre imprimé d'une liste à puces.
 */
.etapes__num {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--color-terre);
}

.etapes__titre {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin-bottom: 0.3rem;
}

.etapes__texte {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	max-width: 48ch;
}

/* --- Territoire : bande verte -------------------------------------------- */

/*
 * Le propos et les communes en haut, une photographie panoramique en bas qui
 * traverse toute la largeur et vient buter contre la bande suivante. Rangée
 * dans une colonne, l'image laissait un quart de vert vide sous elle : le
 * défaut se voyait plus que le paysage.
 */
.section--territoire {
	background: var(--color-vert);
	color: rgba(255, 255, 255, 0.82);
	padding-top: var(--section-y);
}

.territoire {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	padding-bottom: var(--section-y);
}

@media (min-width: 1000px) {
	.territoire {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}
}

.territoire__titre {
	font-size: clamp(2rem, 3.6vw, 3rem);
	color: #fff;
	max-width: 16ch;
	margin-bottom: var(--space-3);
}

.territoire__lede {
	color: rgba(255, 255, 255, 0.76);
	max-width: 48ch;
	margin: 0;
}

.territoire__communes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0 0 var(--space-4);
	padding: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 620px) {
	.territoire__communes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.territoire__communes li {
	padding-bottom: 0.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/*
 * Le panoramique n'a pas de marge : il touche les deux bords de la fenêtre et
 * la bande terre cuite qui suit. C'est cette lisière franche entre deux
 * couleurs pleines qui donne son rythme au bas de page.
 */
.territoire__bande {
	margin: 0;
	display: block;
}

.territoire__bande img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width: 700px) {
	.territoire__bande img {
		aspect-ratio: 3 / 1;
	}
}

/* --- Appel à l'action : terre cuite -------------------------------------- */

.cta {
	background: var(--color-terre);
	color: rgba(255, 255, 255, 0.86);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.cta__inner {
	display: grid;
	gap: var(--space-4);
	align-items: start;
}

@media (min-width: 900px) {
	.cta__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(2.5rem, 6vw, 6rem);
	}
}

.cta__title {
	color: #fff;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	max-width: 14ch;
	margin: 0;
}

/*
 * Tout ce qui engage l'action est réuni sous un filet : la phrase, le bouton
 * et le téléphone. Un bouton seul, flottant au milieu de la couleur, se lit
 * comme un accident de gabarit.
 */
.cta__action {
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.cta__lede {
	color: rgba(255, 255, 255, 0.86);
	max-width: 44ch;
	margin: 0 0 var(--space-4);
}

.cta__phone {
	margin: var(--space-3) 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.82);
}

.cta__phone a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	padding-bottom: 0.1rem;
	margin-left: 0.35rem;
}

/* --- Boutons sur fond de couleur ---------------------------------------- */

.btn--clair {
	background: var(--color-bg);
	color: var(--color-ink);
}

.btn--clair:hover {
	background: #fff;
	color: var(--color-ink);
}

.btn--texte-clair {
	padding: 1rem 0;
	background: transparent;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.btn--texte-clair:hover {
	background: transparent;
	color: #fff;
	border-bottom-color: #fff;
}

.link-arrow--clair {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

.link-arrow--clair:hover {
	color: #fff;
	border-bottom-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.carte__lien:hover .carte__media img {
		transform: none;
	}
}

/* ==========================================================================
   13. Matière et italique
   ========================================================================== */

/*
 * Grain de papier.
 *
 * Un aplat numérique parfaitement lisse se lit comme un écran ; un très léger
 * bruit lui donne la profondeur d'un papier imprimé. Le motif est un SVG en
 * ligne de 160 px, répété : aucune requête réseau, aucun fichier à charger, et
 * il reste sous la couche de contenu (`pointer-events: none`).
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
}

/*
 * L'italique du Cormorant est une autre lettre, pas une inclinaison : ses
 * liaisons et son axe changent complètement. C'est ce qui rend le contraste
 * lisible même à l'intérieur d'un titre.
 */
.display em {
	font-style: italic;
	font-weight: 300;
}

/* ==========================================================================
   14. Nouvelle direction — Méditerranée magnétique
   ========================================================================== */

:root {
	--color-bg: #f4f0e7;
	--color-surface: #fffdf8;
	--color-ink: #132821;
	--color-olive: #426454;
	--color-olive-dark: #12352b;
	--color-sand: #d6c7a4;
	--color-sand-ink: #756448;
	--color-muted: #5e6d66;
	--color-border: rgba(19, 40, 33, 0.14);
	--color-vert-nuit: #09251d;
	--color-vert: #17483a;
	--color-terre: #e9683c;
	--color-sable: #e5d7b8;
	--color-bg-alt: #e9e3d7;
	--color-ink-deep: #061b15;
	--color-ink-soft: rgba(19, 40, 33, 0.74);
	--color-sand-soft: rgba(214, 199, 164, 0.34);
	--color-citron: #d8f06f;
	--color-ciel: #b8d9d3;
	--rule: 1px solid rgba(19, 40, 33, 0.14);
	--wrap-wide: 1440px;
	--gutter: clamp(1.25rem, 4vw, 4.5rem);
	--section-y: clamp(5rem, 9vw, 9rem);
}

body {
	background: var(--color-bg);
}

/* L'accueil commence comme un film : navigation en lévitation, image plein cadre. */
.is-front .site-header {
	position: fixed;
	width: 100%;
	background: transparent;
	border: 0;
	color: #fff;
	transition: background 380ms var(--ease), color 380ms var(--ease), backdrop-filter 380ms var(--ease);
}

.is-front .site-header.is-stuck {
	background: rgba(7, 31, 24, 0.92);
	color: #fff;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header__inner {
	padding-block: 1.15rem;
}

.is-front .wordmark__baseline,
.is-front .site-header .nav__phone {
	color: rgba(255, 255, 255, 0.7);
}

.wordmark__name {
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	letter-spacing: 0.08em;
}

.wordmark__baseline {
	letter-spacing: 0.22em;
}

.is-front .nav__link {
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.22);
}

.is-front .nav__phone-icon {
	background: var(--color-citron);
	box-shadow: 0 0 0 5px rgba(216, 240, 111, 0.14);
}

.is-front .site-header .btn--primary {
	background: var(--color-citron);
	color: var(--color-vert-nuit);
}

.is-front .site-header .btn--primary:hover {
	background: #fff;
	color: var(--color-vert-nuit);
}

.ouverture {
	position: relative;
	isolation: isolate;
	min-height: max(46rem, 100svh);
	padding: 0;
	background: var(--color-vert-nuit);
	color: #fff;
	overflow: hidden;
}

.ouverture::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(3, 21, 16, 0.91) 0%, rgba(3, 21, 16, 0.66) 43%, rgba(3, 21, 16, 0.08) 76%),
		linear-gradient(0deg, rgba(3, 21, 16, 0.7) 0%, transparent 38%);
}

.ouverture__grille {
	min-height: max(46rem, 100svh);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	padding-top: 9rem;
	padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

.ouverture__texte {
	position: relative;
	z-index: 2;
	max-width: 68rem;
}

.ouverture .label {
	color: var(--color-citron);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}

.ouverture .label::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 1px;
	background: currentColor;
}

.ouverture .label::after {
	display: none;
}

.ouverture__titre {
	font-size: clamp(4rem, 9.2vw, 8.8rem);
	line-height: 0.82;
	letter-spacing: -0.055em;
	max-width: 9ch;
	margin: 0 0 clamp(1.75rem, 4vh, 3.25rem);
	text-wrap: balance;
	color: #fff;
}

.ouverture__titre em {
	color: var(--color-citron);
}

.ouverture__lede {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-width: 40rem;
	margin-bottom: 2rem;
}

.ouverture__actions {
	gap: 1rem 1.5rem;
}

.ouverture__actions .btn--primary {
	background: var(--color-citron);
	color: var(--color-vert-nuit);
	padding: 1.15rem 1.8rem;
}

.ouverture__actions .btn--primary:hover {
	background: #fff;
	color: var(--color-vert-nuit);
}

.ouverture__actions .btn--text {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.55);
}

.ouverture__points {
	gap: 0.6rem 2rem;
	width: fit-content;
	margin-top: clamp(2rem, 5vh, 4rem);
	padding-top: 1.1rem;
	border-top-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.72);
}

.ouverture__points li::before {
	background: var(--color-citron);
}

.ouverture__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.ouverture__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 52%;
	transform: scale(1.015);
	animation: mj-hero-breathe 14s ease-out both;
}

.ouverture__media figcaption {
	position: absolute;
	right: var(--gutter);
	bottom: 2rem;
	max-width: 24rem;
	padding: 0;
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

@keyframes mj-hero-breathe {
	from { transform: scale(1.08); }
	to { transform: scale(1.015); }
}

@media (max-width: 1039px) {
	.is-front .nav {
		background: var(--color-vert-nuit);
		color: #fff;
	}

	.is-front .nav__sub {
		background: transparent;
	}

	.is-front .nav__phone {
		border-color: rgba(255, 255, 255, 0.22);
	}
}

@media (max-width: 720px) {
	.ouverture {
		min-height: 100svh;
	}

	.ouverture::after {
		background: linear-gradient(0deg, rgba(3, 21, 16, 0.94) 0%, rgba(3, 21, 16, 0.42) 72%, rgba(3, 21, 16, 0.25) 100%);
	}

	.ouverture__grille {
		min-height: 100svh;
		padding-top: 8rem;
		padding-bottom: 2rem;
	}

	.ouverture__titre {
		font-size: clamp(3.75rem, 18vw, 6.2rem);
		max-width: 7.7ch;
	}

	.ouverture__points {
		display: grid;
		gap: 0.3rem;
		margin-top: 2rem;
	}

	.ouverture__media img {
		object-position: 63% center;
	}

	.ouverture__media figcaption {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ouverture__media img {
		animation: none;
		transform: none;
	}
}

/* --- Rythme, titrage et actions ----------------------------------------- */

.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.55fr);
	gap: clamp(2rem, 8vw, 8rem);
	align-items: end;
	max-width: none;
}

.section-head .label {
	grid-column: 1 / -1;
	margin-bottom: -0.75rem;
}

.section-head__title {
	font-size: clamp(3rem, 6.2vw, 6.5rem);
	line-height: 0.89;
	letter-spacing: -0.045em;
	max-width: 11ch;
	text-wrap: balance;
}

.section-head__text {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
	line-height: 1.65;
}

.label {
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	color: var(--color-olive);
}

.label__index {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-terre);
}

.btn {
	position: relative;
	min-height: 3.25rem;
	padding: 1rem 1.65rem;
	background: var(--color-olive-dark);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	border-radius: 0.2rem;
	box-shadow: none;
}

.btn::after {
	content: "↗";
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--transition);
}

.btn:hover::after {
	transform: translate(0.15rem, -0.15rem);
}

.btn--text::after,
.btn--texte-clair::after {
	content: "→";
}

.btn--compact {
	min-height: 2.7rem;
	padding: 0.8rem 1.25rem;
}

/* --- Point de départ : une décharge de lumière -------------------------- */

.section--repere {
	background: var(--color-citron);
	color: var(--color-vert-nuit);
}

.repere {
	gap: 0;
}

.repere__texte {
	padding-right: clamp(2rem, 7vw, 7rem);
}

.repere .label,
.repere .label__index,
.repere__prose,
.reperes__texte {
	color: var(--color-vert-nuit);
}

.repere__titre {
	font-size: clamp(3rem, 6vw, 6rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
	max-width: 10ch;
}

.repere__prose {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.repere__media img {
	filter: saturate(0.86) contrast(1.05);
}

.repere__media figcaption {
	background: var(--color-citron);
	color: var(--color-vert-nuit);
}

.reperes {
	border-bottom: 1px solid rgba(9, 37, 29, 0.24);
}

.reperes__item {
	padding: 1.5rem 1.25rem 1.5rem 0;
	border-top-color: rgba(9, 37, 29, 0.24);
}

.reperes__num {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-vert-nuit);
}

.reperes__terme {
	font-size: clamp(1.45rem, 2vw, 2rem);
	font-style: normal;
	font-weight: 500;
}

/* --- Savoir-faire : trois grandes arches végétales ---------------------- */

.is-front #services {
	background: var(--color-bg);
}

.is-front #services .grille--3 {
	align-items: start;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.is-front #services .carte--portrait:nth-child(1),
.is-front #services .carte--portrait:nth-child(3) {
	margin-top: clamp(3rem, 8vw, 8rem);
}

.is-front #services .carte--portrait .carte__media {
	border-radius: 18rem 18rem 0.35rem 0.35rem;
	background: var(--color-vert-nuit);
}

.is-front #services .carte--portrait .carte__media img {
	aspect-ratio: 3 / 4.35;
}

.is-front #services .carte--portrait .carte__corps {
	position: relative;
	margin: 0;
	padding: 1.75rem;
	min-height: 14rem;
	background: var(--color-vert-nuit);
	border: 0;
	color: #fff;
}

.is-front #services .carte--portrait:nth-child(2) .carte__corps {
	background: var(--color-terre);
}

.is-front #services .carte--portrait:nth-child(3) .carte__corps {
	background: var(--color-ciel);
	color: var(--color-vert-nuit);
}

.is-front #services .carte--portrait .carte__num,
.is-front #services .carte--portrait .carte__lire {
	color: var(--color-citron);
}

.is-front #services .carte--portrait:nth-child(3) .carte__num,
.is-front #services .carte--portrait:nth-child(3) .carte__lire {
	color: var(--color-vert);
}

.is-front #services .carte--portrait .carte__titre,
.is-front #services .carte--portrait .carte__texte {
	color: inherit;
}

.is-front #services .carte--portrait .carte__titre {
	font-size: clamp(2rem, 3vw, 3.25rem);
	line-height: 0.98;
}

.is-front #services .carte--portrait .carte__lire {
	position: absolute;
	left: 1.75rem;
	bottom: 1.6rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15rem;
}

/* --- Palette végétale : cabinet de curiosités --------------------------- */

.is-front #services + .section {
	background: var(--color-vert-nuit);
	color: #fff;
}

.is-front #services + .section .section-head__title,
.is-front #services + .section .palette__nom {
	color: #fff;
}

.is-front #services + .section .section-head__text,
.is-front #services + .section .label {
	color: rgba(255, 255, 255, 0.72);
}

.is-front #services + .section .label__index,
.is-front #services + .section .carte__latin {
	color: var(--color-citron);
}

.is-front #services + .section .grille--6 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	align-items: end;
}

.is-front #services + .section .carte--carre {
	grid-column: span 2;
}

.is-front #services + .section .carte--carre:nth-child(even) {
	transform: translateY(-2rem);
}

.is-front #services + .section .carte--carre .carte__media {
	border-radius: 50%;
	outline: 1px solid rgba(255, 255, 255, 0.24);
	outline-offset: 0.5rem;
}

.is-front #services + .section .carte--carre:nth-child(3n + 2) .carte__media {
	border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%;
}

.is-front #services + .section .carte--carre .carte__corps {
	border-color: rgba(255, 255, 255, 0.2);
}

.is-front #services + .section .palette__note {
	color: rgba(255, 255, 255, 0.55);
}

/* --- Réalisations : un portfolio, pas un catalogue ---------------------- */

.is-front #realisations .grille--2 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.is-front #realisations .carte--paysage {
	grid-column: span 7;
}

.is-front #realisations .carte--paysage:nth-child(4n + 2),
.is-front #realisations .carte--paysage:nth-child(4n + 3) {
	grid-column: span 5;
}

.is-front #realisations .carte--paysage:nth-child(even) {
	margin-top: clamp(2rem, 7vw, 7rem);
}

.is-front #realisations .carte--paysage .carte__media {
	border-radius: 0.35rem;
}

.is-front #realisations .carte--paysage .carte__media img {
	aspect-ratio: 16 / 11;
}

.is-front #realisations .carte--paysage:nth-child(3n + 2) .carte__media img {
	aspect-ratio: 4 / 5;
}

.is-front #realisations .carte--paysage .carte__corps {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.4rem 1rem;
	align-items: baseline;
	margin-top: 1rem;
	padding-top: 1rem;
}

.is-front #realisations .carte--paysage .carte__num {
	grid-row: span 2;
}

.is-front #realisations .carte--paysage .carte__titre {
	font-size: clamp(1.6rem, 2.6vw, 2.6rem);
}

.is-front #realisations .carte--paysage .carte__type {
	grid-row: span 2;
}

.is-front #realisations .carte--paysage .carte__meta {
	grid-column: 2;
}

/* --- Respiration : la nuit dans le jardin ------------------------------- */

.citation {
	min-height: clamp(36rem, 88vh, 58rem);
	background: var(--color-vert-nuit);
}

.citation__media::after {
	background:
		radial-gradient(circle at 70% 45%, transparent 0, rgba(3, 18, 14, 0.12) 36%, rgba(3, 18, 14, 0.72) 100%),
		linear-gradient(0deg, rgba(3, 18, 14, 0.62), transparent 60%);
}

.citation__inner {
	text-align: left;
}

.citation__texte {
	font-size: clamp(3.4rem, 8vw, 8.5rem);
	line-height: 0.88;
	letter-spacing: -0.05em;
	max-width: 9.5ch;
	margin: 0;
	text-wrap: balance;
}

.citation__texte em {
	color: var(--color-citron);
}

.citation__note {
	width: fit-content;
	margin-top: 2.5rem;
	padding: 0.8rem 1rem;
	background: var(--color-citron);
	color: var(--color-vert-nuit);
	letter-spacing: 0.18em;
}

/* --- Méthode : registre nocturne ---------------------------------------- */

.section--methode {
	background: var(--color-vert);
	color: #fff;
}

.section--methode .section-head__title,
.section--methode .etapes__titre {
	color: #fff;
}

.section--methode .section-head__text,
.section--methode .label,
.section--methode .etapes__texte,
.section--methode .methode__media figcaption {
	color: rgba(255, 255, 255, 0.7);
}

.section--methode .label__index,
.section--methode .etapes__num {
	color: var(--color-citron);
}

.methode {
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.methode__media {
	position: relative;
	margin-top: 3rem;
}

.methode__media::before {
	content: "";
	position: absolute;
	inset: -0.75rem 0.75rem 0.75rem -0.75rem;
	border: 1px solid var(--color-citron);
	pointer-events: none;
}

.methode__media img {
	position: relative;
	aspect-ratio: 4 / 5;
}

.etapes {
	border-top-color: rgba(255, 255, 255, 0.22);
}

.etapes__item {
	grid-template-columns: 4.5rem minmax(0, 1fr);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom-color: rgba(255, 255, 255, 0.22);
	transition: padding-left var(--transition), background var(--transition);
}

.etapes__item:hover {
	padding-left: 1rem;
	background: rgba(255, 255, 255, 0.05);
}

.etapes__num {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.etapes__titre {
	font-size: clamp(1.8rem, 3vw, 3rem);
	line-height: 1;
}

/* --- Territoire et appel final ------------------------------------------ */

.section--territoire {
	background: var(--color-ciel);
	color: var(--color-vert-nuit);
}

.territoire__titre {
	font-size: clamp(3.2rem, 7vw, 7rem);
	line-height: 0.87;
	letter-spacing: -0.05em;
	color: var(--color-vert-nuit);
	max-width: 8ch;
}

.territoire .label,
.territoire .label__index,
.territoire__lede,
.territoire__communes {
	color: var(--color-vert-nuit);
}

.territoire__communes li {
	padding: 0.7rem 0;
	border-bottom-color: rgba(9, 37, 29, 0.2);
}

.territoire__liste .btn--clair {
	background: var(--color-vert-nuit);
	color: #fff;
}

.territoire__bande {
	padding: 0 var(--gutter) var(--gutter);
	background: var(--color-ciel);
}

.territoire__bande img {
	border-radius: 0.35rem;
}

.cta {
	position: relative;
	background: var(--color-terre);
	color: var(--color-vert-nuit);
	padding-block: clamp(4rem, 9vw, 8rem);
	overflow: hidden;
}

.cta::before {
	content: "M";
	position: absolute;
	right: -0.03em;
	top: -0.28em;
	font-family: var(--font-display);
	font-size: clamp(18rem, 38vw, 42rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.09);
	pointer-events: none;
}

.cta__inner {
	position: relative;
	z-index: 1;
}

.cta__title {
	font-size: clamp(3.6rem, 8vw, 8rem);
	line-height: 0.84;
	letter-spacing: -0.05em;
	color: var(--color-vert-nuit);
}

.cta__action {
	border-top-color: rgba(9, 37, 29, 0.3);
}

.cta__lede,
.cta__phone,
.cta__phone a {
	color: var(--color-vert-nuit);
}

.cta .btn--clair {
	background: var(--color-vert-nuit);
	color: #fff;
}

/* --- Pages intérieures -------------------------------------------------- */

body:not(.is-front) .site-header {
	background: rgba(244, 240, 231, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.page-header {
	position: relative;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
	background: var(--color-ciel);
	overflow: hidden;
}

.page-header::after {
	content: "";
	position: absolute;
	right: -10vw;
	top: -30vw;
	width: 55vw;
	height: 55vw;
	border: 1px solid rgba(9, 37, 29, 0.18);
	border-radius: 50%;
	pointer-events: none;
}

.page-header__title {
	font-size: clamp(3.8rem, 8vw, 8rem);
	line-height: 0.84;
	letter-spacing: -0.05em;
	max-width: 10ch;
	text-wrap: balance;
}

.page-header__lede {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: var(--color-vert-nuit);
}

.page-header__media {
	position: relative;
	z-index: 1;
}

.page-header__media img {
	height: clamp(22rem, 58vh, 42rem);
	border-radius: 18rem 18rem 0.35rem 0.35rem;
}

.breadcrumb {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.faq__question {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 500;
}

.devis__form,
.devis__confirmation {
	background: var(--color-surface);
	border: 0;
	box-shadow: 0 2rem 5rem rgba(9, 37, 29, 0.09);
}

.devis__progress-item.is-current span {
	background: var(--color-terre);
	border-color: var(--color-terre);
	color: #fff;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
	border-radius: 0.2rem;
	background: #fff;
}

/* --- Pied de page ------------------------------------------------------- */

.site-footer {
	position: relative;
	background: var(--color-ink-deep);
	overflow: hidden;
}

.site-footer::before {
	content: "MÉLORIA";
	display: block;
	padding: 0.08em var(--gutter) 0;
	font-family: var(--font-display);
	font-size: clamp(5rem, 17vw, 17rem);
	line-height: 0.8;
	letter-spacing: -0.055em;
	color: rgba(255, 255, 255, 0.055);
	white-space: nowrap;
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	padding-top: clamp(3rem, 5vw, 5rem);
}

.wordmark--footer .wordmark__name {
	font-size: clamp(2rem, 3vw, 3rem);
	color: var(--color-citron);
}

.site-footer__title {
	color: var(--color-citron);
}

/* --- Adaptation des compositions --------------------------------------- */

@media (max-width: 999px) {
	.section-head {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.section-head .label {
		margin-bottom: 0;
	}

	.repere__texte {
		padding-right: 0;
	}

	.is-front #services .carte--portrait:nth-child(1),
	.is-front #services .carte--portrait:nth-child(3) {
		margin-top: 0;
	}

	.is-front #services + .section .carte--carre {
		grid-column: span 4;
	}

	.is-front #realisations .carte--paysage,
	.is-front #realisations .carte--paysage:nth-child(4n + 2),
	.is-front #realisations .carte--paysage:nth-child(4n + 3) {
		grid-column: span 6;
	}

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

@media (max-width: 639px) {
	.section-head__title {
		font-size: clamp(2.8rem, 14vw, 4.5rem);
	}

	.is-front #services .grille--3,
	.is-front #services + .section .grille--6,
	.is-front #realisations .grille--2 {
		display: grid;
		grid-template-columns: 1fr;
	}

	.is-front #services + .section .carte--carre,
	.is-front #realisations .carte--paysage,
	.is-front #realisations .carte--paysage:nth-child(4n + 2),
	.is-front #realisations .carte--paysage:nth-child(4n + 3) {
		grid-column: auto;
	}

	.is-front #services + .section .carte--carre {
		display: grid;
		grid-template-columns: 7rem 1fr;
		gap: 1.5rem;
		align-items: center;
	}

	.is-front #services + .section .carte--carre:nth-child(even) {
		transform: none;
	}

	.is-front #services + .section .carte--carre .carte__corps {
		margin: 0;
	}

	.is-front #realisations .carte--paysage:nth-child(even) {
		margin-top: 0;
	}

	.is-front #realisations .carte--paysage .carte__corps {
		grid-template-columns: auto 1fr;
	}

	.is-front #realisations .carte--paysage .carte__type {
		grid-column: 2;
		grid-row: auto;
	}

	.citation__texte,
	.cta__title,
	.territoire__titre,
	.page-header__title {
		font-size: clamp(3.2rem, 16vw, 5rem);
	}

	.territoire__bande {
		padding-inline: 0;
	}

	.etapes__item {
		grid-template-columns: 3rem 1fr;
	}
}

/* ==========================================================================
   15. Ajustements ciblés — plus calme, plus architectural
   ========================================================================== */

/* La palette redevient un herbier lisible : six cadrages identiques, aucune
   forme molle ni décalage décoratif. */
.is-front #services + .section {
	background: var(--color-sable);
	color: var(--color-vert-nuit);
}

.is-front #services + .section .section-head {
	grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.45fr);
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.is-front #services + .section .section-head__title {
	max-width: 13ch;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: 0.94;
	color: var(--color-vert-nuit);
}

.is-front #services + .section .section-head__text,
.is-front #services + .section .label,
.is-front #services + .section .palette__nom,
.is-front #services + .section .palette__note {
	color: var(--color-vert-nuit);
}

.is-front #services + .section .label__index,
.is-front #services + .section .carte__latin {
	color: var(--color-terre);
}

.is-front #services + .section .grille--6 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: start;
}

.is-front #services + .section .carte--carre,
.is-front #services + .section .carte--carre:nth-child(even) {
	grid-column: auto;
	transform: none;
}

.is-front #services + .section .carte--carre .carte__media,
.is-front #services + .section .carte--carre:nth-child(3n + 2) .carte__media {
	border-radius: 0;
	outline: 0;
}

.is-front #services + .section .carte--carre .carte__media img {
	aspect-ratio: 4 / 5;
	filter: saturate(0.88) contrast(1.04);
}

.is-front #services + .section .carte--carre .carte__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.25rem 1rem;
	align-items: baseline;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-color: rgba(9, 37, 29, 0.28);
}

.is-front #services + .section .carte__latin,
.is-front #services + .section .palette__note {
	grid-column: 1 / -1;
}

/* La méthode devient claire et concrète : une photo de geste, puis cinq
   étapes nettes. Le titre ne cherche plus à occuper tout l'écran. */
.section--methode {
	background: var(--color-bg);
	color: var(--color-vert-nuit);
}

.section--methode .section-head {
	display: block;
	margin-bottom: 0;
}

.section--methode .section-head .label {
	margin-bottom: 1.5rem;
}

.section--methode .section-head__title {
	max-width: 12ch;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: 0.93;
	color: var(--color-vert-nuit);
}

.section--methode .section-head__text {
	margin-top: 2rem;
	max-width: 42ch;
	border-top-color: rgba(9, 37, 29, 0.24);
	color: var(--color-ink-soft);
}

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

.section--methode .label__index,
.section--methode .etapes__num {
	color: var(--color-terre);
}

.section--methode .etapes__titre {
	color: var(--color-vert-nuit);
}

.section--methode .etapes__texte,
.section--methode .methode__media figcaption {
	color: var(--color-ink-soft);
}

.methode {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(3rem, 7vw, 7rem);
}

.methode__media {
	margin-top: 3.5rem;
}

.methode__media::before {
	display: none;
}

.methode__media img {
	aspect-ratio: 4 / 5;
	filter: saturate(0.88) contrast(1.03);
}

.etapes {
	border-top-color: rgba(9, 37, 29, 0.24);
}

.etapes__item {
	grid-template-columns: 3.5rem minmax(0, 1fr);
	border-bottom-color: rgba(9, 37, 29, 0.24);
}

.etapes__item:hover {
	padding-left: 0.75rem;
	background: rgba(23, 72, 58, 0.05);
}

.etapes__titre {
	font-size: clamp(1.65rem, 2.5vw, 2.5rem);
}

/* La citation reste une respiration, pas un second hero. */
.citation {
	width: calc(100% - (2 * var(--gutter)));
	max-width: var(--wrap-wide);
	min-height: clamp(31rem, 68vh, 46rem);
	margin: var(--gutter) auto;
	border-radius: 0.35rem;
}

.citation__media::after {
	background: linear-gradient(90deg, rgba(3, 18, 14, 0.62), rgba(3, 18, 14, 0.18) 60%, rgba(3, 18, 14, 0.42));
}

.citation__inner {
	text-align: center;
}

.citation__texte {
	max-width: 15ch;
	margin-inline: auto;
	font-size: clamp(2.8rem, 5vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.citation__note {
	margin: 2rem auto 0;
	padding: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 1000px) {
	.methode__tete {
		position: sticky;
		top: 7rem;
	}
}

@media (max-width: 999px) {
	.is-front #services + .section .section-head {
		grid-template-columns: 1fr;
	}

	.is-front #services + .section .grille--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (max-width: 639px) {
	.is-front #services + .section .grille--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}

	.is-front #services + .section .carte--carre {
		display: block;
	}

	.is-front #services + .section .carte--carre .carte__corps {
		display: block;
		margin-top: 0.75rem;
	}

	.citation {
		width: 100%;
		margin-block: 0;
		border-radius: 0;
	}

	.citation__texte {
		font-size: clamp(2.6rem, 12vw, 4rem);
	}
}