/*
 * studioBLM — styles complémentaires.
 *
 * Ce fichier ne contient QUE ce que theme.json ne peut pas exprimer :
 * animations, dégradés de fond, grilles spécifiques, comportements de la
 * barre de navigation, décors (halos, filets, pastilles).
 * Toutes les couleurs proviennent des tokens de theme.json
 * (--wp--preset--color--* et --wp--custom--*) : aucune couleur décorative
 * n'est écrite en dur.
 *
 * Sommaire :
 *   1. Base & utilitaires partagés
 *   2. En-tête / pied de page
 *   3. Boutons
 *   4. En-têtes de page & de section, appels finaux
 *   5. Listes à coches / croix
 *   6. Accueil (hero, constat, parcours, formules, engagements)
 *   7. Les offres (timeline, détails, options, questions)
 *   8. Qui suis-je (hero, parcours, réalisations, valeurs)
 *   9. Une démarche éthique (manifeste, principes, engagement)
 *  10. Me contacter (formulaire CF7, colonne latérale)
 *  11. Adaptations mobiles
 *  12. Éditeur de blocs (fond/texte du thème, contenu visible)
 */

/* --------------------------------------------------------------------------
 * 1. Base & utilitaires partagés
 * ----------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Segment de texte en Instrument Serif italique (motif récurrent des titres).
 * La couleur reste héritée : les sections la précisent (émeraude / clair). */
.is-style-serif-accent,
.serif {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

.is-style-serif-accent,
.serif.em,
.em {
	color: var(--wp--preset--color--emerald);
}

/* Apparition au défilement (assets/js/theme.js ajoute .is-visible). */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * 2. En-tête / pied de page
 * ----------------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-block: 20px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}

/* Fond translucide + flou portés par un calque dédié.
 * IMPÉRATIF : ne PAS poser backdrop-filter directement sur .site-header — un
 * élément avec backdrop-filter devient le bloc conteneur de ses descendants
 * position:fixed, ce qui piégerait l'overlay du menu mobile dans la hauteur du
 * header (~64 px) au lieu de couvrir le viewport. Le pseudo-élément isole le flou. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(var(--wp--custom--base-rgb) / 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	pointer-events: none;
}

.site-header.is-scrolled {
	border-bottom-color: var(--wp--custom--line);
}

.site-logo {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.site-logo a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-logo .logo-slash {
	color: var(--wp--preset--color--emerald);
}

.site-header .main-nav {
	gap: 32px;
	font-size: 0.92rem;
}

.site-header .main-nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color 0.25s ease;
}

.site-header .main-nav .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Dernier élément du menu : bouton d'appel à l'action. */
.site-header .main-nav .nav-cta a {
	background: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--on-emerald);
	padding: 11px 22px;
	border-radius: 8px;
	font-weight: 500;
}

.site-header .main-nav .nav-cta a:hover {
	background: var(--wp--preset--color--emerald-deep);
	color: var(--wp--preset--color--on-emerald);
}

/* Menu overlay mobile (core/navigation) : fond encre + liens clairs.
 * Sécurité CSS en complément des attributs overlayBackgroundColor/Text du bloc :
 * sans cela, l'overlay s'ouvre sur fond blanc par défaut → liens clairs invisibles. */
.wp-block-navigation__responsive-container.is-menu-open {
	/* Verre dépoli : bleu nuit translucide + flou de l'arrière-plan.
	 * Le backdrop-filter est posé sur l'OVERLAY lui-même (pas un ancêtre) :
	 * il ne piège donc QUE ses propres descendants position:fixed (il n'y en a
	 * aucun). Le positionnement de l'overlay reste relatif au viewport → il
	 * couvre toujours le plein écran. !important pour battre la classe
	 * has-base-background-color (opaque) posée par overlayBackgroundColor. */
	background-color: rgb(var(--wp--custom--base-rgb) / 0.6) !important;
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--contrast);
	/* Voile peu opaque : ombre portée discrète pour garder les liens lisibles
	 * même au-dessus d'une zone claire de la page floutée derrière. */
	text-shadow: 0 1px 12px rgb(var(--wp--custom--base-rgb) / 0.9);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--emerald);
}

/* Le CTA « Me contacter » garde son bouton émeraude dans l'overlay. */
.wp-block-navigation__responsive-container.is-menu-open .nav-cta a {
	background: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--on-emerald);
	text-shadow: none;
}

/* Boutons d'ouverture (☰) et de fermeture (×) lisibles sur fond sombre. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.site-footer {
	border-top: 1px solid var(--wp--custom--line);
	padding-block: 60px 30px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--ink-dim);
	font-size: 0.92rem;
}

.site-footer a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color 0.25s ease;
}

.site-footer a:hover {
	color: var(--wp--preset--color--emerald);
}

.site-footer .site-logo {
	margin: 0 0 14px;
	font-size: 1.3rem;
}

.site-footer .site-logo a {
	color: var(--wp--preset--color--contrast);
}

/* Bandeau supérieur : marque + deux colonnes de liens. */
.footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr;
	gap: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--wp--custom--line);
}

.footer-brand .footer-pitch {
	max-width: 42ch;
	margin: 0 0 18px;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.footer-social {
	margin: 0;
}

.footer-social a {
	color: var(--wp--preset--color--emerald);
	font-size: 0.98rem;
}

.footer-social a:hover {
	color: var(--wp--preset--color--emerald-light);
}

.footer-col h4 {
	margin: 0 0 6px;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.footer-col p {
	margin: 0;
	font-size: 0.95rem;
}

.footer-col .footer-loc {
	margin: 4px 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-dim);
}

/* Zones d'intervention géographiques. */
.footer-zones {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 34px;
	border-bottom: 1px solid var(--wp--custom--line);
}

.footer-zones .zone {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 18px;
	align-items: baseline;
}

.footer-zones .zk {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--emerald);
}

.footer-zones .zv {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-dim);
}

/* Bas de page : copyright + liens légaux. */
.footer-bottom {
	gap: 12px;
	padding-top: 26px;
}

.footer-bottom .footer-copy,
.footer-bottom .footer-legal {
	margin: 0;
	color: var(--wp--preset--color--ink-dim);
}

.footer-bottom .footer-legal a {
	color: var(--wp--preset--color--ink-dim);
}

.footer-bottom .footer-legal a:hover {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 840px) {

	.footer-top {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.footer-zones .zone {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* --------------------------------------------------------------------------
 * 3. Boutons
 *    Le bouton principal hérite de theme.json ; on ajoute la translation au
 *    survol et la variante fantôme (.is-ghost).
 * ----------------------------------------------------------------------- */

.wp-block-button__link {
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wp-block-button:not(.is-ghost) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -16px rgb(var(--wp--custom--emerald-rgb) / 0.55);
}

.wp-block-button.is-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--custom--line-strong);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--emerald);
}

/* --------------------------------------------------------------------------
 * 4. En-têtes de page & de section, appels finaux
 * ----------------------------------------------------------------------- */

/* Étiquette en petites capitales espacées, émeraude. */
.section-tag {
	display: inline-block;
	margin: 0 0 20px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

/* En-tête de page interne (offres / qui suis-je / éthique / contact). */
.page-hero {
	position: relative;
	overflow: hidden;
	/* 150 px en haut : dégage la barre de navigation fixe (valeur maquette .phead). */
	padding-block: 150px 50px;
}

.page-hero::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -120px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgb(var(--wp--custom--emerald-rgb) / 0.14), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
}

.page-hero__title {
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.07;
}

.page-hero__lead {
	max-width: 56ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink-soft);
}

.page-hero__lead strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* En-tête de section : centré par défaut, variante alignée à gauche. */
.sec-head {
	text-align: center;
	max-width: 64ch;
	margin: 0 auto 64px; /* valeur exacte maquette (.sec-head) */
}

.sec-head--left {
	text-align: left;
	margin-left: 0;
	max-width: 58ch;
	margin-bottom: 44px;
}

.sec-title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--xx-large);
}

.sec-title .serif {
	color: var(--wp--preset--color--emerald-light);
}

.sec-sub {
	margin: 0;
	font-size: 1.1rem;
	color: var(--wp--preset--color--ink-soft);
}

.sec-head .section-tag {
	margin-bottom: 18px;
}

/* Appel final de page (toutes pages). */
.page-final {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--100);
	text-align: center;
}

.page-final::before {
	content: "";
	position: absolute;
	bottom: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 480px;
	background: radial-gradient(circle, rgb(var(--wp--custom--emerald-rgb) / 0.16), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Variante sur bande bleu nuit (Qui suis-je). */
.page-final--band {
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--custom--line);
}

.final-inner {
	position: relative;
	z-index: 2;
}

.final-title {
	max-width: 22ch;
	margin: 0 auto 18px;
	font-size: var(--wp--preset--font-size--section);
}

.final-title .serif {
	color: var(--wp--preset--color--emerald-light);
}

.final-lead {
	margin: 0 0 36px;
	font-size: 1.12rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Appel final de l'accueil : valeurs propres à la maquette index.html. */
.home-final {
	padding-block: 110px;
}

.home-final .final-title {
	max-width: 20ch;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.home-final .final-lead {
	font-size: 1.15rem;
}

/* Renvoi discret vers la page locale Bordeaux. */
.final-bordeaux {
	margin: 26px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-dim);
}

.final-bordeaux a {
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
	padding-bottom: 2px;
	transition: border-color 0.25s ease;
}

.final-bordeaux a:hover {
	border-bottom-color: var(--wp--preset--color--emerald);
}

/* --------------------------------------------------------------------------
 * 5. Listes à coches / croix
 *    La coche est dessinée en ::before : le contenu reste du texte pur.
 * ----------------------------------------------------------------------- */

/* Surtout pas de display:flex ici : sur un paragraphe à contenu mixte
   (texte + <strong>), chaque segment deviendrait un item flex séparé et le
   texte s'éclaterait en colonnes étroites. La coche est ancrée en absolu. */
.check-item {
	position: relative;
	padding-left: 35px; /* 22px de coche + 13px d'écart */
	margin: 0;
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

.check-item::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	font-size: 0.7rem;
	background: rgb(var(--wp--custom--emerald-rgb) / 0.16);
	border: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.35);
	color: var(--wp--preset--color--emerald);
}

.check-item strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Élément « non compris » : tiret discret. */
.notinc {
	margin: 0 0 10px;
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink-dim);
}

.notinc::before {
	content: "—";
	margin-right: 8px;
}

.notinc small {
	font-size: 0.92em;
	color: var(--wp--preset--color--ink-dim);
}

/* --------------------------------------------------------------------------
 * 6. Accueil
 * ----------------------------------------------------------------------- */

/* 6.1 Hero — photo de fond plein cadre + dégradé directionnel + halo animé.
 * Reproduit exactement .hero de index.html. La mise en page contrainte de WP
 * n'est PAS utilisée ici (layout "default") : le wrap interne reproduit le
 * comportement .wrap de la maquette (1200 px centrés), sans que WordPress
 * impose une largeur à l'image de fond ni un padding racine. */
.home-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 84vh;
	padding-block: 170px 110px;
}

/* Image de fond plein cadre (bloc core/image, remplaçable dans l'admin). */
.home-hero > .hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	max-width: none;
}

.home-hero > .hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Dégradé encre → transparent : lisibilité du texte à gauche (90deg, 3 arrêts). */
.home-hero > .hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--base) 24%,
		rgb(var(--wp--custom--base-rgb) / 0.72) 55%,
		rgb(var(--wp--custom--base-rgb) / 0.2) 100%
	);
}

/* Halo émeraude qui « respire ». */
.home-hero::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -150px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgb(var(--wp--custom--emerald-rgb) / 0.16), transparent 65%);
	pointer-events: none;
	z-index: 1;
	transform-origin: center;
	animation: halo-breathe 6s ease-in-out infinite;
}

@keyframes halo-breathe {

	0%,
	100% {
		opacity: 0.5;
		transform: scale(0.92);
	}

	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

@media (prefers-reduced-motion: reduce) {

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

/* Équivalent de .wrap (maquette) : 1200 px centrés, padding latéral 32 px. */
.home-hero__wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Colonne de texte calée à gauche, exactement comme .hero-inner. */
.home-hero__inner {
	max-width: 600px;
}

.hero-title {
	margin: 0 0 26px;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.05;
	text-shadow: 0 2px 30px rgb(var(--wp--custom--base-rgb) / 0.5);
}

.hero-title .serif {
	font-style: italic;
}

.hero-lead {
	max-width: 54ch;
	margin: 0 0 40px;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--custom--hero-lead);
	text-shadow: 0 1px 16px rgb(var(--wp--custom--base-rgb) / 0.7);
}

.hero-lead strong {
	color: var(--wp--custom--hero-lead-strong);
	font-weight: 500;
}

.hero-actions {
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

/* 6.2 Le constat */
.home-problem {
	padding-block: 80px; /* valeur exacte maquette (.problem) */
	border-top: 1px solid var(--wp--custom--line);
}

.home-problem .problem-grid {
	gap: 60px;
}

.problem-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.problem-title .serif {
	color: var(--wp--preset--color--emerald-light);
}

.home-problem p {
	font-size: 1.08rem;
	color: var(--wp--preset--color--ink-soft);
}

.home-problem p + p {
	margin-top: 18px;
}

/* 6.3 Le parcours (timeline) */
.home-process {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--110);
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
}

.home-process::before {
	content: "";
	position: absolute;
	top: 10%;
	left: -120px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgb(var(--wp--custom--azure-rgb) / 0.08), transparent 70%);
	pointer-events: none;
}

.home-process::after {
	content: "";
	position: absolute;
	bottom: 5%;
	right: -120px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgb(var(--wp--custom--emerald-rgb) / 0.1), transparent 70%);
	pointer-events: none;
}

.snake {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
}

/* La ligne verticale dégradée : bleu → vert clair → vert dollar. */
.snake::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 24px;
	bottom: 40px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--azure) 0%,
		var(--wp--preset--color--azure) 33%,
		var(--wp--preset--color--emerald-light) 41%,
		var(--wp--preset--color--emerald-light) 47%,
		var(--wp--preset--color--emerald) 55%,
		var(--wp--preset--color--emerald) 100%
	);
}

.pstep {
	position: relative;
	z-index: 2;
	padding-left: 92px;
	padding-bottom: 46px;
}

.pstep:last-child {
	padding-bottom: 0;
}

/* Pastille numérotée, ancrée sur la ligne. */
.pstep .pnode {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
	border: 2px solid var(--wp--preset--color--azure);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	z-index: 3;
	transition: transform 0.3s ease;
}

.pstep:hover .pnode {
	transform: scale(1.08);
}

.pstep h3 {
	margin: 0 0 7px;
	font-size: 1.3rem;
}

.pstep > p:not(.pnode):not(.who):not(.scope) {
	margin: 0;
	max-width: 54ch;
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Pastille « De votre côté : … ». */
.pstep .who {
	display: inline-block;
	margin: 11px 0 0;
	padding: 5px 14px;
	border-radius: var(--wp--custom--radius--chip);
	border: 1px solid;
	font-size: 0.83rem;
}

/* Étiquette de palier (« À partir de l'offre 2 », …). */
.pstep .scope {
	display: inline-block;
	margin: 0 0 11px;
	padding: 4px 13px;
	border-radius: var(--wp--custom--radius--chip);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Paliers : tronc commun (bleu), offre 2 (vert clair), offre 3 (vert dollar). */
.pstep.t1 .pnode {
	border-color: var(--wp--preset--color--azure);
	color: var(--wp--preset--color--azure);
}

.pstep.t1 .who {
	color: var(--wp--preset--color--azure);
	border-color: rgb(var(--wp--custom--azure-rgb) / 0.3);
	background: rgb(var(--wp--custom--azure-rgb) / 0.07);
}

.pstep.t2 .pnode {
	border-color: var(--wp--preset--color--emerald-light);
	color: var(--wp--preset--color--emerald-light);
	border-style: dashed;
}

.pstep.t2 .who {
	color: var(--wp--preset--color--emerald-light);
	border-color: rgb(var(--wp--custom--emerald-light-rgb) / 0.3);
	background: rgb(var(--wp--custom--emerald-light-rgb) / 0.07);
}

.pstep.t2 .scope {
	color: var(--wp--preset--color--emerald-light);
	background: rgb(var(--wp--custom--emerald-light-rgb) / 0.12);
	border: 1px solid rgb(var(--wp--custom--emerald-light-rgb) / 0.3);
}

.pstep.t3 .pnode {
	border-color: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--emerald);
	border-style: dotted;
	box-shadow: 0 0 22px rgb(var(--wp--custom--emerald-rgb) / 0.35);
}

.pstep.t3 .who {
	color: var(--wp--preset--color--emerald);
	border-color: rgb(var(--wp--custom--emerald-rgb) / 0.35);
	background: rgb(var(--wp--custom--emerald-rgb) / 0.1);
}

.pstep.t3 .scope {
	color: var(--wp--preset--color--on-emerald);
	background: var(--wp--preset--color--emerald);
	border: 1px solid var(--wp--preset--color--emerald);
}

/* Étape finale : pastille pleine et lumineuse. */
.pstep.final-step .pnode {
	background: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--on-emerald);
	border-style: solid;
	box-shadow: 0 0 30px rgb(var(--wp--custom--emerald-rgb) / 0.6);
	font-size: 1.7rem;
}

.pstep.final-step h3 {
	color: var(--wp--preset--color--emerald-light);
}

/* 6.4 Les trois formules */
.home-offers {
	padding-block: var(--wp--preset--spacing--100);
}

.offers-grid {
	gap: 24px;
}

.offer {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 36px 30px;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 18px;
	background: linear-gradient(165deg, var(--wp--preset--color--surface), var(--wp--preset--color--base-2));
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.offer:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.5);
}

/* Liseré de palier en haut de carte. */
.offer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.offer.o1::before {
	background: var(--wp--preset--color--azure);
}

.offer.o2::before {
	background: var(--wp--preset--color--emerald-light);
}

.offer.o3::before {
	background: linear-gradient(90deg, var(--wp--preset--color--emerald), var(--wp--preset--color--emerald-light));
}

.offer.o3 {
	border-color: rgb(var(--wp--custom--emerald-rgb) / 0.4);
}

/* Ruban « Le plus complet ». */
.offer .ribbon {
	position: absolute;
	top: 22px;
	right: -38px;
	margin: 0;
	background: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--on-emerald);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 6px 44px;
	transform: rotate(45deg);
	z-index: 2;
	box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.4);
}

.offer .o-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}

.offer .o-tag::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.offer.o1 .o-tag {
	color: var(--wp--preset--color--azure);
}

.offer.o2 .o-tag {
	color: var(--wp--preset--color--emerald-light);
}

.offer.o3 .o-tag {
	color: var(--wp--preset--color--emerald);
}

.offer .offer-title {
	margin: 0 0 9px;
	font-size: 1.55rem;
}

.offer .for {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.05rem;
}

.offer.o1 .for {
	color: var(--wp--preset--color--azure);
}

.offer.o2 .for {
	color: var(--wp--preset--color--emerald-light);
}

.offer.o3 .for {
	color: var(--wp--preset--color--emerald-light);
}

.offer .offer-intro {
	margin: 0 0 22px;
	font-size: 0.96rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Encart d'héritage « ↑ Tout l'Offre N, et en plus : ». */
.inherits {
	margin: 0 0 18px;
	padding: 10px 14px;
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-dim);
	background: rgb(var(--wp--custom--line-rgb) / 0.03);
	border: 1px solid var(--wp--custom--line);
	border-radius: 9px;
}

.inherits strong {
	color: var(--wp--preset--color--ink-soft);
	font-weight: 500;
}

.offer .offer-list {
	flex-grow: 1;
	margin: 0 0 26px;
}

.offer .check-item {
	padding-left: 30px; /* 19px de coche + 11px d'écart */
	font-size: 0.93rem;
}

.offer .check-item::before {
	width: 19px;
	height: 19px;
	border-radius: 5px;
	font-size: 0.62rem;
	top: 3px;
}

.offer.o1 .check-item::before {
	background: rgb(var(--wp--custom--azure-rgb) / 0.14);
	border-color: rgb(var(--wp--custom--azure-rgb) / 0.3);
	color: var(--wp--preset--color--azure);
}

.offer.o2 .check-item::before {
	background: rgb(var(--wp--custom--emerald-light-rgb) / 0.14);
	border-color: rgb(var(--wp--custom--emerald-light-rgb) / 0.3);
	color: var(--wp--preset--color--emerald-light);
}

/* Le bouton occupe toute la largeur de la carte. */
.offer .offer-cta,
.offer .offer-cta .wp-block-button,
.offer .offer-cta .wp-block-button__link {
	width: 100%;
}

.offer .offer-cta .wp-block-button__link {
	justify-content: center;
	display: inline-flex;
}

.offers-foot {
	margin-top: 42px;
	text-align: center;
}

.offers-foot__link {
	margin: 0;
}

.offers-foot__link a {
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	font-size: 1rem;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
	padding-bottom: 3px;
	transition: border-color 0.25s ease;
}

.offers-foot__link a:hover {
	border-color: var(--wp--preset--color--emerald);
}

.offers-foot__note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-dim);
}

/* 6.5 Les engagements */
.home-trust {
	padding-block: var(--wp--preset--spacing--100);
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
}

.home-trust .sec-head--left {
	margin-bottom: 0;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 50px;
}

.tcard {
	padding: 30px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.tcard:hover {
	transform: translateY(-4px);
	border-color: var(--wp--custom--line-strong);
}

.tcard .ic,
.vcard .ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 16px;
	border-radius: 11px;
	background: var(--wp--custom--emerald-soft);
	color: var(--wp--preset--color--emerald);
	font-size: 1.1rem;
}

.tcard h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.tcard p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--wp--preset--color--ink-soft);
}

/* 6.6 Manifeste — moment de rupture (« vitrines » / « cabinets »). */
.home-manifesto {
	position: relative;
	overflow: hidden;
	padding-block: 160px;
	text-align: center;
}

.home-manifesto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 500px;
	background: radial-gradient(ellipse, rgb(var(--wp--custom--emerald-rgb) / 0.07), transparent 70%);
	pointer-events: none;
}

.manifesto-inner {
	position: relative;
	z-index: 2;
}

.manifesto-line {
	max-width: 18ch;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.6rem, 7vw, 5.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.manifesto-line .serif {
	font-style: italic;
}

/* « vitrines » barré d'un trait émeraude. */
.manifesto-line .strike {
	position: relative;
	color: var(--wp--preset--color--ink-dim);
	white-space: nowrap;
}

.manifesto-line .strike::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 52%;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--emerald);
	transform: rotate(-2deg);
}

.manifesto-sub {
	position: relative;
	z-index: 2;
	margin: 34px 0 0;
	font-size: 1.2rem;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 600px) {

	.home-manifesto {
		padding-block: 100px;
	}
}

/* --------------------------------------------------------------------------
 * 7. Les offres
 * ----------------------------------------------------------------------- */

/* 7.1 La timeline des offres
 * Même langage visuel que le parcours de l'accueil : ligne verticale dégradée
 * et pastilles numérotées. Chaque offre étant une composition autonome, la
 * ligne est dessinée par segments (un par offre) raccordés bord à bord. */
.odetail {
	position: relative;
	/* Les sections doivent être jointives pour que la ligne soit continue
	 * (annule l'écart de blocs injecté par la mise en page racine). */
	margin-block-start: 0 !important;
}

.odetail .otrack {
	position: relative;
	padding-left: 92px;
	padding-bottom: 70px;
}

/* La première offre ménage un espace sous l'en-tête de page. */
.odetail.o1 .otrack {
	padding-top: 40px;
}

/* Segments de ligne : la couleur du palier, avec un fondu depuis le palier
 * précédent en tête de segment pour reconstituer le dégradé global. */
.odetail .otrack::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 0;
	bottom: 0;
	width: 3px;
}

.odetail.o1 .otrack::before {
	top: 71px; /* démarre au centre de la pastille (40 px d'espace + rayon) */
	border-radius: 3px 3px 0 0;
	background: var(--wp--preset--color--azure);
}

.odetail.o2 .otrack::before {
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--azure) 0,
		var(--wp--preset--color--emerald-light) 90px,
		var(--wp--preset--color--emerald-light) 100%
	);
}

.odetail.o3 .otrack::before {
	bottom: 60px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--emerald-light) 0,
		var(--wp--preset--color--emerald) 90px,
		var(--wp--preset--color--emerald) 100%
	);
}

/* Pastille numérotée, ancrée sur la ligne. */
.onode {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--azure);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	z-index: 3;
	transition: transform 0.3s ease;
}

.odetail:hover .onode {
	transform: scale(1.08);
}

.odetail.o1 .onode {
	top: 40px;
	color: var(--wp--preset--color--azure);
}

.odetail.o2 .onode {
	border-style: dashed;
	border-color: var(--wp--preset--color--emerald-light);
	color: var(--wp--preset--color--emerald-light);
}

.odetail.o3 .onode {
	border-style: dotted;
	border-color: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--emerald);
	box-shadow: 0 0 22px rgb(var(--wp--custom--emerald-rgb) / 0.35);
}

/* 7.2 Détail d'une offre */

.ohead {
	gap: 30px;
	margin-bottom: 40px;
}

.olabel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

.olabel::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Seule l'Offre 3 porte un badge (« Le plus complet »). */
.odetail.o3 .olabel {
	color: var(--wp--preset--color--emerald);
}

.ohead-title {
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--xx-large);
}

.odetail .for {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.25rem;
}

.odetail.o1 .for {
	color: var(--wp--preset--color--azure);
}

.odetail.o2 .for {
	color: var(--wp--preset--color--emerald-light);
}

.odetail.o3 .for {
	color: var(--wp--preset--color--emerald-light);
}

.odetail .promise {
	margin: 0;
	max-width: 54ch;
	font-size: 1.08rem;
	color: var(--wp--preset--color--ink-soft);
}

.price-box {
	min-width: 230px;
	padding: 28px 32px;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 16px;
}

.odetail.o3 .price-box {
	border-color: rgb(var(--wp--custom--emerald-rgb) / 0.4);
}

.price-box .amt {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--emerald);
}

.odetail.o3 .price-box .amt {
	color: var(--wp--preset--color--emerald-light);
}

.price-box .unit {
	margin: 6px 0 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Détail des 3 échéances : sous le montant, plus discret mais lisible. */
.price-box .plan {
	margin: 10px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.price-box .pay {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--wp--custom--line);
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-dim);
}

.obody {
	gap: 40px;
}

.inc-title {
	margin: 0 0 18px;
	font-size: 1.15rem;
}

.inc-list {
	margin-bottom: 30px;
}

.odetail .check-item::before {
	top: 2px;
}

.odetail.o1 .check-item::before {
	background: rgb(var(--wp--custom--azure-rgb) / 0.14);
	border-color: rgb(var(--wp--custom--azure-rgb) / 0.3);
	color: var(--wp--preset--color--azure);
}

.odetail.o2 .check-item::before {
	background: rgb(var(--wp--custom--emerald-light-rgb) / 0.14);
	border-color: rgb(var(--wp--custom--emerald-light-rgb) / 0.3);
	color: var(--wp--preset--color--emerald-light);
}

.inherits-d {
	margin: 0 0 24px;
	padding: 13px 16px;
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink-dim);
	background: rgb(var(--wp--custom--line-rgb) / 0.03);
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
}

.inherits-d strong {
	color: var(--wp--preset--color--ink-soft);
	font-weight: 500;
}

.aside-card {
	padding: 24px;
	margin-bottom: 18px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.aside-card__k {
	margin: 0 0 12px;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-dim);
	font-weight: 500;
}

.aside-card p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.aside-card p + p {
	margin-top: 10px;
}

.aside-card p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.aside-card .notinc {
	margin: 0 0 8px;
}

.aside-card .notinc:last-child {
	margin-bottom: 0;
}

/* 7.3 Options photo */
.offres-options {
	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
}

.opt-grid {
	gap: 22px;
}

/* Cartes scopées à la section : la classe .opt sert aussi de mention
 * « (facultatif) » dans les labels du formulaire de contact. */
.offres-options .opt {
	padding: 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.offres-options .opt h3 {
	margin: 0 0 10px;
	font-size: 1.2rem;
}

.offres-options .opt p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--wp--preset--color--ink-soft);
}

.offres-options .opt .deco {
	margin-top: 10px;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-dim);
}

/* 7.4 Les questions */
.offres-reassure {
	padding-block: var(--wp--preset--spacing--90);
}

.reassure-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.rcard {
	padding: 26px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.rcard h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.rcard p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

/* --------------------------------------------------------------------------
 * 8. Qui suis-je
 * ----------------------------------------------------------------------- */

/* 8.1 Hero avec portrait */
.qsj-hero {
	/* 150 px en haut : dégage la barre de navigation fixe (valeur maquette .hero). */
	padding-block: 150px 70px;
}

.qsj-hero__grid {
	gap: 56px;
}

/* Portrait : bloc image (ou emplacement stylisé tant qu'il n'y a pas d'image). */
.portrait {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	margin: 0;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 16px;
	background: linear-gradient(155deg, var(--wp--preset--color--surface), var(--wp--preset--color--base-2));
}

.portrait::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--emerald), transparent);
}

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

.portrait--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}

.portrait-ic {
	margin: 0;
	font-size: 2.4rem;
	color: var(--wp--preset--color--ink-dim);
	opacity: 0.5;
}

.portrait-label {
	margin: 0;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink-dim);
}

/* 8.2 Le parcours */
.qsj-story {
	padding-block: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--custom--line);
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: var(--wp--preset--spacing--70);
}

.stat {
	padding: 32px;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 16px;
}

.stat .big {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.8rem;
	line-height: 1;
	color: var(--wp--preset--color--emerald);
}

.stat .lbl {
	margin: 10px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.prose {
	max-width: 62ch;
	margin: 0 auto;
}

.prose h2 {
	margin: 0 0 22px;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.prose h2 .serif {
	color: var(--wp--preset--color--emerald-light);
}

.prose h2:not(:first-child) {
	margin-top: 48px;
}

.prose p {
	margin: 0 0 18px;
	font-size: 1.1rem;
	color: var(--wp--preset--color--ink-soft);
}

.prose p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Citation en exergue. */
.prose .pull {
	margin: 40px 0;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--wp--preset--color--emerald);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.prose .pull .em {
	font-style: italic;
}

/* 8.3 Mes réalisations */
.qsj-work {
	padding-block: var(--wp--preset--spacing--90);
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
}

.work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}

.case {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 16px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.case:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.5);
}

/* Visuel du projet : bloc image remplaçable dans l'admin. */
.case .case-shot {
	margin: 0;
	aspect-ratio: 16 / 10;
	border-bottom: 1px solid var(--wp--custom--line);
	overflow: hidden;
}

.case .case-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Emplacement vide (visuel pas encore importé). */
.case .case-shot--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, var(--wp--preset--color--base-2), var(--wp--preset--color--surface));
	color: var(--wp--preset--color--ink-dim);
}

/* Carte « Le vôtre, peut-être ? ». */
.case .case-shot--next {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 40%, rgb(var(--wp--custom--emerald-rgb) / 0.12), transparent 60%),
		linear-gradient(150deg, var(--wp--preset--color--base-2), var(--wp--preset--color--surface));
}

.case .case-shot--next .qm {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--emerald);
	opacity: 0.9;
	text-shadow: 0 0 30px rgb(var(--wp--custom--emerald-rgb) / 0.4);
}

.case .case-shot--next .case-shot__label {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--wp--preset--color--emerald-light);
}

.case .case-shot--empty .case-shot__label {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

.case .case-meta {
	padding: 24px 26px;
}

.case .case-meta .k {
	margin: 0 0 8px;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

.case .case-meta h3 {
	margin: 0 0 8px;
	font-size: 1.3rem;
}

.case .case-meta p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--wp--preset--color--ink-soft);
}

/* 8.4 Ma façon de faire */
.qsj-values {
	padding-block: var(--wp--preset--spacing--90);
}

.qsj-values .sec-head--left {
	margin-bottom: 0;
}

.val-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 50px;
}

.vcard {
	padding: 30px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 16px;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.vcard:hover {
	transform: translateY(-4px);
	border-color: var(--wp--custom--line-strong);
}

.vcard .ic {
	width: 42px;
	height: 42px;
	font-size: 1.2rem;
}

.vcard h3 {
	margin: 0 0 8px;
	font-size: 1.18rem;
}

.vcard p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

/* --------------------------------------------------------------------------
 * 9. Une démarche éthique
 * ----------------------------------------------------------------------- */

.manifesto {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.manifesto-text {
	max-width: 24ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.manifesto-text .em {
	font-style: italic;
}

.principles {
	padding-block: var(--wp--preset--spacing--50);
}

.group-head {
	padding: 38px 0 24px;
}

.group-head + .pr {
	border-top: 1px solid var(--wp--custom--line);
}

/* Étiquette de groupe avec pastille. */
.group-head .gk {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

.group-head .gk::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.group-head.group-o3 {
	border-top: 1px solid var(--wp--custom--line);
	margin-top: 8px;
}

.group-head.group-o3 .gk {
	color: var(--wp--preset--color--emerald-light);
}

.group-head h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.group-head h2 .serif {
	color: var(--wp--preset--color--emerald-light);
}

.group-head p {
	max-width: 58ch;
	margin: 10px 0 0;
	font-size: 1.04rem;
	color: var(--wp--preset--color--ink-soft);
}

.pr {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 40px;
	padding: 46px 0;
	border-top: 1px solid var(--wp--custom--line);
}

.pr:last-child {
	border-bottom: 1px solid var(--wp--custom--line);
}

.pr-num {
	margin: 0;
	padding-top: 6px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	color: var(--wp--preset--color--emerald);
}

.pr-body h3 {
	margin: 0 0 14px;
	font-size: 1.6rem;
}

.pr-body h3 .serif {
	color: var(--wp--preset--color--emerald);
}

.pr-body p {
	max-width: 62ch;
	margin: 0 0 14px;
	font-size: 1.08rem;
	color: var(--wp--preset--color--ink-soft);
}

.pr-body p:last-child {
	margin-bottom: 0;
}

.pr-body p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Engagement « Concrètement, ce que ça change ». */
.pledge {
	padding-block: var(--wp--preset--spacing--70);
}

.pledge-card {
	position: relative;
	overflow: hidden;
	padding: 50px;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius--card);
	background: linear-gradient(160deg, var(--wp--preset--color--surface), var(--wp--preset--color--base-2));
}

.pledge-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--gradient--hairline);
	opacity: 0.5;
}

.pledge-title {
	margin: 0 0 32px;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.pledge-title .serif {
	color: var(--wp--preset--color--emerald);
}

.pledge-grid {
	gap: 30px;
}

.pl-head {
	margin: 0 0 18px;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

.pl-col.no .pl-head {
	color: var(--wp--preset--color--ink-dim);
}

.pl-col.yes .pl-head {
	color: var(--wp--preset--color--emerald);
}

/* Même contrainte que .check-item : pas de flex sur le paragraphe,
   sinon les <small> éclatent le texte en items flex séparés. */
.pl-item {
	position: relative;
	padding-left: 35px; /* 22px de pictogramme + 13px d'écart */
	margin: 0 0 14px;
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

.pl-item::before {
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	font-size: 0.75rem;
}

.pl-col.no .pl-item::before {
	content: "✕";
	background: rgb(var(--wp--custom--line-rgb) / 0.05);
	border: 1px solid var(--wp--custom--line-strong);
	color: var(--wp--preset--color--ink-dim);
}

.pl-col.yes .pl-item::before {
	content: "✓";
	background: rgb(var(--wp--custom--emerald-rgb) / 0.14);
	border: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
	color: var(--wp--preset--color--emerald);
}

.pl-item small {
	color: var(--wp--preset--color--ink-dim);
}

/* --------------------------------------------------------------------------
 * 10. Me contacter
 * ----------------------------------------------------------------------- */

.contact-main {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--90);
}

.contact-grid {
	gap: 50px;
}

/* Carte du formulaire. */
.formcard {
	position: relative;
	overflow: hidden;
	padding: 40px;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius--card);
	background: linear-gradient(165deg, var(--wp--preset--color--surface), var(--wp--preset--color--base-2));
}

.formcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--gradient--hairline);
}

.formcard-title {
	margin: 0 0 8px;
	font-size: 1.5rem;
}

.formcard .sub {
	margin: 0 0 28px;
	font-size: 0.98rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Champs du formulaire Contact Form 7 — fidèles à la maquette. */
.formcard .field {
	margin-bottom: 20px;
}

/* CF7 (wpcf7_autop) enveloppe chaque champ d'un <p> et insère un <br>
 * après le label : on neutralise les deux pour retrouver le rythme
 * label → champ (8 px) de la maquette. */
.formcard .field p {
	margin: 0;
}

.formcard .field br {
	display: none;
}

.formcard .field label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--ink-soft);
}

.formcard .field label .opt {
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-dim);
}

.formcard .wpcf7-form-control-wrap {
	display: block;
}

.formcard .field input[type="text"],
.formcard .field input[type="email"],
.formcard .field input[type="tel"],
.formcard .field select,
.formcard .field textarea {
	/* Le padding fait partie des 100 % : inputs, select et textarea
	 * gardent exactement la même largeur. */
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 300;
	transition: border-color 0.25s ease;
}

.formcard .field input:focus,
.formcard .field select:focus,
.formcard .field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--emerald);
}

.formcard .field input::placeholder,
.formcard .field textarea::placeholder {
	color: var(--wp--preset--color--ink-dim);
}

.formcard .field textarea {
	resize: vertical;
	/* Hauteur fixe : CF7 émet rows="10" (~224 px), la maquette attend ~120 px.
	 * Le redimensionnement vertical reste possible. */
	height: 120px;
	min-height: 120px;
}

/* Le sélecteur reprend la flèche discrète de la maquette (teinte ink-soft). */
.formcard .field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239aa6bd' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

/* Bouton d'envoi : pleine largeur, style bouton principal. */
.formcard .wpcf7-submit {
	width: 100%;
	margin-top: 8px;
	padding: 16px 32px;
	border: none;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--on-emerald);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.formcard .wpcf7-submit:hover {
	background: var(--wp--preset--color--emerald-deep);
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -16px rgb(var(--wp--custom--emerald-rgb) / 0.55);
}

/* Mention sous le formulaire. */
.formcard .form-foot {
	margin: 14px 0 0;
	font-size: 0.84rem;
	color: var(--wp--preset--color--ink-dim);
}

/* Messages de validation et de réponse CF7, accordés à la charte. */
.formcard .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 0.84rem;
	color: var(--wp--preset--color--emerald-light);
}

.formcard .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius--button);
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink-soft);
}

.formcard .wpcf7 form.sent .wpcf7-response-output {
	border-color: rgb(var(--wp--custom--emerald-rgb) / 0.4);
	color: var(--wp--preset--color--emerald-light);
}

/* Colonne latérale : les trois étapes. */
.aside-block {
	margin-bottom: 34px;
}

.aside-block .k {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

.sl {
	gap: 14px;
	align-items: flex-start;
}

.sl .n {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--emerald);
	border-radius: 50%;
	color: var(--wp--preset--color--emerald);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
}

.sl p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--wp--preset--color--ink-soft);
}

.sl p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Contact direct. */
.direct {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.direct h3 {
	margin: 0;
	font-size: 1.05rem;
}

.direct-mail {
	margin: 0;
}

.direct-mail a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	font-size: 1rem;
}

.direct-mail a:hover {
	color: var(--wp--preset--color--emerald-light);
}

.direct .loc {
	margin: 0;
	font-size: 0.94rem;
	color: var(--wp--preset--color--ink-soft);
}

.reassure-pills {
	gap: 10px;
}

.rp {
	margin: 0;
	padding: 7px 14px;
	border: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.2);
	border-radius: var(--wp--custom--radius--chip);
	background: rgb(var(--wp--custom--emerald-rgb) / 0.08);
	font-size: 0.84rem;
	color: var(--wp--preset--color--ink-soft);
}

/* --------------------------------------------------------------------------
 * 11. Adaptations mobiles
 *     (les colonnes natives s'empilent d'elles-mêmes sous 782 px)
 * ----------------------------------------------------------------------- */

@media (max-width: 880px) {

	.trust-grid,
	.val-grid {
		grid-template-columns: 1fr;
	}

	/* Les formules s'empilent dès 880 px (comme .grid3 de la maquette),
	 * et non au point de bascule mobile par défaut de core/columns (782 px). */
	.home-offers .offers-grid {
		flex-wrap: wrap;
	}

	.home-offers .offers-grid > .wp-block-column {
		flex-basis: 100%;
	}
}

@media (max-width: 781px) {

	.reassure-grid,
	.story-grid,
	.work-grid {
		grid-template-columns: 1fr;
	}

	.pledge-card {
		padding: 32px 24px;
	}

	.formcard {
		padding: 30px 24px;
	}

	.pr {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 36px 0;
	}

	.pr-num {
		padding-top: 0;
		font-size: 1.1rem;
	}

	.portrait {
		max-width: 340px;
	}

	.price-box {
		min-width: 0;
	}
}

@media (max-width: 600px) {

	.odetail .otrack {
		padding-left: 76px;
	}

	.odetail .otrack::before {
		left: 25px;
	}

	.odetail.o1 .otrack::before {
		top: 66px; /* 40 px d'espace + rayon de la pastille réduite */
	}

	.onode {
		width: 52px;
		height: 52px;
		font-size: 1.3rem;
	}

	.pstep {
		padding-left: 76px;
		padding-bottom: 36px;
	}

	.snake::before {
		left: 25px;
	}

	.pstep .pnode {
		width: 52px;
		height: 52px;
		font-size: 1.3rem;
	}

	.pstep.final-step .pnode {
		font-size: 1.4rem;
	}
}

/* --------------------------------------------------------------------------
 * 12. Éditeur de blocs (back-office)
 *     Ce fichier est chargé à la fois sur le front et dans l'éditeur (via
 *     add_editor_style). Les règles ci-dessous ne s'appliquent QUE dans
 *     l'éditeur : sur le front, .editor-styles-wrapper n'existe pas, elles
 *     sont donc inertes. Objectif : que l'éditeur reflète fidèlement le thème
 *     (fond encre, texte clair) et que tout le contenu reste visible/éditable.
 * ----------------------------------------------------------------------- */

/* Fond sombre + texte clair du thème, garantis sur le canevas de l'éditeur
 * (theme.json les pose déjà ; on les réaffirme par sécurité, tous contextes). */
.editor-styles-wrapper {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Les éléments « apparition au défilement » sont masqués (opacity:0) tant que
 * le script du front ne les révèle pas. Ce script ne s'exécute pas dans
 * l'éditeur : on neutralise donc l'état initial caché pour que le contenu
 * (constat, étapes, offres, manifeste, engagements…) soit visible et éditable. */
.editor-styles-wrapper .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
 * 13. Réalisations — projets en alternance (valeurs exactes maquette)
 * ----------------------------------------------------------------------- */

.projects {
	padding-block: 50px 70px;
}

.project.wp-block-columns {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 50px;
	align-items: center;
	margin: 0;
	padding-block: 50px;
	border-top: 1px solid var(--wp--custom--line);
}

.project.wp-block-columns:first-child {
	border-top: none;
}

.project.wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
}

.project.reverse > .wp-block-column:first-child {
	order: 2;
}

.pvisual {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 16px;
	box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.6);
}

.pvisual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.pvisual::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgb(var(--wp--custom--line-rgb) / 0.04);
	pointer-events: none;
}

.pbody .ptag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--emerald);
}

.pbody .ptag .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.pbody h2 {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
}

.pbody .lead {
	margin: 0 0 20px;
	font-size: 1.08rem;
	color: var(--wp--preset--color--ink-soft);
}

.pbody ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0 0 24px;
	padding: 0;
}

.pbody li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 0.97rem;
	color: var(--wp--preset--color--ink-soft);
}

.pbody li .c {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border-radius: 6px;
	background: rgb(var(--wp--custom--emerald-rgb) / 0.14);
	border: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
	color: var(--wp--preset--color--emerald);
	font-size: 0.64rem;
}

.pbody li b {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.pbody .plink-wrap {
	margin: 0;
}

.plink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	font-size: 0.98rem;
	transition: border-color 0.25s ease;
}

.plink:hover {
	border-bottom-color: var(--wp--preset--color--emerald);
}

@media (max-width: 840px) {

	.project.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-block: 40px;
	}

	.project.reverse > .wp-block-column:first-child {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
 * 14. Conception Bordeaux — page locale SEO
 *     Largeur de contenu : 880 px (sections, via layout constrained du bloc),
 *     1120 px (hero, via .phead__wrap). Classes propres à cette page.
 * ----------------------------------------------------------------------- */

.phead {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 80vh;
	padding-block: 150px 50px;
}

.phead > .phead-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	max-width: none;
}

.phead > .phead-bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

.phead > .phead-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--base) 26%,
		rgb(var(--wp--custom--base-rgb) / 0.78) 58%,
		rgb(var(--wp--custom--base-rgb) / 0.35) 100%
	);
}

.phead::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -120px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgb(var(--wp--custom--emerald-rgb) / 0.13), transparent 65%);
	pointer-events: none;
	z-index: 1;
	transform-origin: center;
	animation: phead-halo 7s ease-in-out infinite;
}

@keyframes phead-halo {

	0%,
	100% {
		opacity: 0.6;
		transform: scale(0.95);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@media (prefers-reduced-motion: reduce) {

	.phead::before {
		animation: none;
	}
}

.phead__wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 32px;
}

.phead__inner {
	max-width: 620px;
}

.phead .tag {
	display: inline-block;
	margin: 0 0 18px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

.phead-title {
	margin: 0;
	font-size: clamp(2.3rem, 5vw, 3.7rem);
	line-height: 1.12;
	text-shadow: 0 2px 30px rgb(var(--wp--custom--base-rgb) / 0.55);
}

.phead-title .serif {
	font-style: italic;
}

.phead-sub {
	max-width: 60ch;
	margin: 20px 0 0;
	font-size: 1.2rem;
	color: var(--wp--custom--hero-lead);
	text-shadow: 0 1px 16px rgb(var(--wp--custom--base-rgb) / 0.6);
}

.phead-sub strong {
	color: var(--wp--custom--hero-lead-strong);
	font-weight: 500;
}

.phead-actions {
	margin-top: 34px;
	gap: 14px;
	flex-wrap: wrap;
}

.sec {
	padding-block: 54px;
	border-top: 1px solid var(--wp--custom--line);
}

.sec-h2 {
	margin: 0 0 20px;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	line-height: 1.12;
}

.sec-h2 .serif {
	font-style: italic;
	color: var(--wp--preset--color--emerald-light);
}

.sec p {
	max-width: 68ch;
	margin: 0 0 16px;
	font-size: 1.08rem;
	color: var(--wp--preset--color--ink-soft);
}

.sec p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.sec a {
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
}

.sec a:hover {
	border-bottom-color: var(--wp--preset--color--emerald);
}

.lead-serif {
	max-width: 24ch;
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.pills {
	gap: 12px;
	margin-top: 24px;
}

.pill {
	margin: 0;
	padding: 10px 20px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 30px;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 28px;
}

.card {
	padding: 26px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.card h3 {
	margin: 0 0 10px;
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast);
}

.card h3 .i {
	margin-right: 8px;
	color: var(--wp--preset--color--emerald);
}

.card p {
	max-width: none;
	margin: 0;
	font-size: 0.98rem;
	color: var(--wp--preset--color--ink-soft);
}

.quartiers {
	margin-top: 26px;
	padding: 30px 32px;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--custom--line);
	border-radius: 16px;
}

.quartiers .qtitle {
	margin: 0 0 16px;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald);
}

.quartiers .qbody {
	max-width: none;
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 680px) {

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

/* --------------------------------------------------------------------------
 * 15. Qui suis-je — passerelle (bridge) vers les réalisations
 * ----------------------------------------------------------------------- */

.bridge {
	padding-block: 70px;
	border-top: 1px solid var(--wp--custom--line);
}

.bridge-inner {
	gap: 20px;
	text-align: center;
}

.bridge-q {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--wp--preset--color--contrast);
}

.bridge-note {
	margin: 2px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-dim);
}

.bridge-note a {
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
}

.bridge-note a:hover {
	border-bottom-color: var(--wp--preset--color--emerald);
}

/* --------------------------------------------------------------------------
 * 16. Pages légales (mentions légales, CGV) — gabarit commun, contenu 820 px
 * ----------------------------------------------------------------------- */

.legal-content {
	padding-block: 30px 80px;
}

.legal-section {
	padding-block: 30px;
	border-top: 1px solid var(--wp--custom--line);
}

.legal-section > h2 {
	margin: 0 0 18px;
	font-size: 1.5rem;
}

.legal-section h2 .n {
	margin-right: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--emerald);
}

.legal-section h3 {
	margin: 22px 0 10px;
	font-size: 1.08rem;
}

.legal-section p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--ink-soft);
}

.legal-section p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.legal-section ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.legal-section li {
	position: relative;
	margin-bottom: 9px;
	padding-left: 22px;
	color: var(--wp--preset--color--ink-soft);
}

.legal-section li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--emerald);
}

.legal-section a {
	color: var(--wp--preset--color--emerald);
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.3);
}

.legal-section a:hover {
	border-bottom-color: var(--wp--preset--color--emerald);
}

/* Encart d'information clé/valeur (mentions légales). */
.infobox {
	margin: 4px 0 0;
	padding: 24px 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 14px;
}

.infobox .row {
	gap: 18px;
	align-items: baseline;
	padding-block: 7px;
}

.infobox .row + .row {
	border-top: 1px solid var(--wp--custom--line);
}

.infobox .row .k {
	flex: 0 0 200px;
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-dim);
}

.infobox .row .v {
	flex: 1;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* Encarts colorés (CGV). */
.highlight {
	margin: 16px 0;
	padding: 18px 22px;
	background: rgb(var(--wp--custom--emerald-rgb) / 0.08);
	border: 1px solid rgb(var(--wp--custom--emerald-rgb) / 0.25);
	border-radius: 12px;
}

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

.note {
	margin: 16px 0;
	padding: 18px 22px;
	background: rgb(var(--wp--custom--azure-rgb) / 0.07);
	border: 1px solid rgb(var(--wp--custom--azure-rgb) / 0.2);
	border-radius: 12px;
	font-size: 0.94rem;
	color: var(--wp--preset--color--ink-soft);
}

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

@media (max-width: 560px) {

	.infobox .row {
		flex-direction: column;
		gap: 2px;
	}

	.infobox .row .k {
		flex-basis: auto;
	}
}