/*
Theme Name: Laustriat Conseils
Theme URI: https://laustriat-conseils.fr
Author: Cabinet Laustriat Conseils
Description: Thème bloc sur-mesure pour un cabinet de conseil en gestion de patrimoine et courtage en assurances. Direction artistique institutionnelle : bleu nuit, laiton, typographie Fraunces. Polices auto-hébergées (conformité RGPD), formulaire de contact intégré sans plugin.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laustriat
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Socle
   ========================================================================== */

:root {
	--lc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lc-line: rgba(7, 26, 47, 0.12);
	--lc-line-strong: rgba(7, 26, 47, 0.22);
	--lc-line-gold: rgba(217, 179, 104, 0.38);
	--lc-line-dark: rgba(240, 220, 168, 0.2);
	--lc-shadow-lift: 0 2px 6px rgba(4, 14, 27, 0.06), 0 28px 60px -20px rgba(4, 14, 27, 0.26);
	--lc-header-h: 82px;
}

* { box-sizing: border-box; }

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

html, body { overflow-x: clip; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
	text-wrap: balance;
	font-variant-numeric: lining-nums;
}

p { text-wrap: pretty; }

::selection { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--ink-deep); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 3px;
	border-radius: 1px;
}

.lc-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 999;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.85rem 1.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: top 0.2s var(--lc-ease);
}
.lc-skip-link:focus { top: 1rem; }

/* Grain : texture papier discrète sur tout le site */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.032;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* ==========================================================================
   2. Typographie éditoriale
   ========================================================================== */

.lc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	margin: 0 0 1.5rem;
}
.lc-eyebrow::before {
	content: "";
	width: 2.75rem;
	height: 1px;
	flex: none;
	background: currentColor;
	opacity: 0.7;
}
.lc-eyebrow.is-centered { justify-content: center; }
.lc-eyebrow.is-centered::after {
	content: "";
	width: 2.75rem;
	height: 1px;
	flex: none;
	background: currentColor;
	opacity: 0.7;
}

.lc-lead {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.62;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
	max-width: 62ch;
}

.lc-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.lc-display em,
.lc-accent-italic {
	font-style: italic;
	font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 120;
	color: var(--wp--preset--color--brass);
}

/* Filet décoratif */

/* ==========================================================================
   3. En-tête
   ========================================================================== */

.lc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 249, 245, 0.86);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.35s var(--lc-ease), box-shadow 0.35s var(--lc-ease);
}
.lc-header.is-stuck {
	border-bottom-color: var(--lc-line);
	box-shadow: 0 10px 30px -24px rgba(4, 14, 27, 0.5);
}

.lc-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-right: auto;
	text-decoration: none;
}
.lc-brand:hover .lc-brand__mark { border-color: var(--wp--preset--color--brass); }

.lc-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.lc-nav a {
	position: relative;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-block: 0.4rem;
	display: inline-block;
}
.lc-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--brass);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--lc-ease);
}
.lc-nav a:hover::after,
.lc-nav .current-menu-item > a::after,
.lc-nav .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }
.lc-nav .current-menu-item > a,
.lc-nav .current_page_item > a { color: var(--wp--preset--color--brass); }

.lc-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.85rem 1.6rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: color 0.35s var(--lc-ease);
}
.lc-header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--brass);
	transform: translateY(101%);
	transition: transform 0.42s var(--lc-ease);
}
.lc-header__cta:hover { color: var(--wp--preset--color--ink-deep); }
.lc-header__cta:hover::before { transform: translateY(0); }
.lc-header__cta span { position: relative; }

/* Menu mobile */
.lc-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--lc-line);
	background: transparent;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.lc-burger span {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 1px;
	background: var(--wp--preset--color--ink);
	transition: transform 0.35s var(--lc-ease), opacity 0.2s linear;
}
.lc-burger span:nth-child(1) { top: 17px; }
.lc-burger span:nth-child(2) { top: 22px; }
.lc-burger span:nth-child(3) { top: 27px; }
.lc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.lc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px) {
	.lc-burger { display: block; }
	.lc-header__cta { display: none; }
	.lc-nav {
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--ink);
		display: grid;
		place-items: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--lc-ease), visibility 0.4s;
		z-index: 200;
	}
	.lc-nav.is-open { opacity: 1; visibility: visible; }
	.lc-nav ul { flex-direction: column; gap: 1.75rem; text-align: center; }
	.lc-nav a { color: var(--wp--preset--color--paper); font-size: 1.5rem; font-family: var(--wp--preset--font-family--display); letter-spacing: -0.01em; }
	.lc-nav__close {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		width: 44px;
		height: 44px;
		background: none;
		border: 1px solid var(--lc-line-dark);
		color: var(--wp--preset--color--paper);
		font-size: 1.25rem;
		cursor: pointer;
	}
}
@media (min-width: 981px) { .lc-nav__close { display: none; } }

/* ==========================================================================
   4. Héros
   ========================================================================== */

.lc-hero {
	position: relative;
	background: linear-gradient(165deg, #071A2F 0%, #040E1B 62%, #08203A 100%);
	color: var(--wp--preset--color--paper);
	overflow: hidden;
	isolation: isolate;
}
.lc-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	width: 68vw;
	height: 68vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle at center, rgba(217, 179, 104, 0.22) 0%, rgba(217, 179, 104, 0.06) 42%, transparent 68%);
	z-index: -1;
	pointer-events: none;
}
.lc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(rgba(240, 220, 168, 0.055) 1px, transparent 1px);
	background-size: 100% 5rem;
	mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.lc-hero__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
@media (max-width: 900px) {
	.lc-hero__inner { grid-template-columns: 1fr; gap: 3rem; }
}

.lc-hero .lc-eyebrow { color: var(--wp--preset--color--brass-light); }
.lc-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 6.2vw, 5rem);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.032em;
	margin: 0 0 1.75rem;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
}
.lc-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--brass-light);
	font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
}
.lc-hero__lead {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.66;
	font-weight: 400;
	color: rgba(251, 249, 245, 0.74);
	max-width: 54ch;
	margin: 0 0 2.5rem;
}
.lc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }

/* Portrait en arche */
.lc-portrait { position: relative; justify-self: center; width: min(100%, 400px); }
.lc-portrait__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 6px 6px;
	overflow: hidden;
	background: var(--wp--preset--color--ink-soft);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.lc-portrait__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	filter: saturate(0.92) contrast(1.03);
}
.lc-portrait::before {
	content: "";
	position: absolute;
	inset: -14px -14px 28px -14px;
	border: 1px solid rgba(240, 220, 168, 0.32);
	border-radius: 999px 999px 6px 6px;
	pointer-events: none;
}
.lc-portrait__caption { margin-top: 1.75rem; text-align: center; }
.lc-portrait__caption strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.01em;
}
.lc-portrait__caption span {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-light);
}

/* Bandeau de chiffres sous le héros */
.lc-figures {
	border-top: 1px solid rgba(240, 220, 168, 0.16);
	background: rgba(4, 14, 27, 0.5);
}
.lc-figures__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 5vw, 3.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.75rem clamp(1.5rem, 4vw, 3rem);
}
.lc-figure { position: relative; padding-left: 1.5rem; }
.lc-figure::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 1px;
	background: rgba(240, 220, 168, 0.3);
}
.lc-figure strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--brass-light);
	font-variant-numeric: lining-nums;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 90;
}
.lc-figure > span {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(251, 249, 245, 0.6);
	letter-spacing: 0.02em;
}

/* ==========================================================================
   5. Sections & mise en page
   ========================================================================== */

.lc-section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.lc-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.lc-section--sand { background: var(--wp--preset--color--sand); }
.lc-section--ink {
	background: linear-gradient(165deg, #071A2F 0%, #040E1B 100%);
	color: var(--wp--preset--color--paper);
}
.lc-shell {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.lc-shell--narrow { max-width: 820px; }

.lc-section-head {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.lc-section-head h2 { margin: 0; }
.lc-section-head p { margin: 0; }
@media (max-width: 820px) {
	.lc-section-head { grid-template-columns: 1fr; align-items: start; }
}

.lc-section--ink .lc-lead,
.lc-section--ink p { color: rgba(251, 249, 245, 0.72); }
.lc-section--ink .lc-eyebrow { color: var(--wp--preset--color--brass-light); }
.lc-section--ink h2, .lc-section--ink h3 { color: var(--wp--preset--color--paper); }

/* ==========================================================================
   6. Index numéroté des pôles
   ========================================================================== */

/* ==========================================================================
   7. Cartes & grilles
   ========================================================================== */

.lc-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.lc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.lc-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lc-line);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	position: relative;
	transition: transform 0.45s var(--lc-ease), box-shadow 0.45s var(--lc-ease), border-color 0.45s var(--lc-ease);
}
.lc-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--brass);
	transition: width 0.5s var(--lc-ease);
}
.lc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lc-shadow-lift);
	border-color: transparent;
}
.lc-card:hover::before { width: calc(100% + 2px); }
.lc-card h3 { margin: 0 0 0.85rem; }
.lc-card p { margin: 0; color: var(--wp--preset--color--slate); font-size: 0.9688rem; line-height: 1.68; font-weight: 400; }

.lc-section--ink .lc-card {
	background: rgba(255, 255, 255, 0.028);
	border-color: rgba(240, 220, 168, 0.16);
}
.lc-section--ink .lc-card p { color: rgba(251, 249, 245, 0.66); }
.lc-section--ink .lc-card:hover { border-color: rgba(240, 220, 168, 0.16); box-shadow: none; }

/* Liste à puces losange */
.lc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.lc-list li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9688rem;
	line-height: 1.62;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}
.lc-list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.62em;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--brass);
	transform: rotate(45deg);
}
.lc-list li strong { color: var(--wp--preset--color--ink); font-weight: 500; }
.lc-section--ink .lc-list li { color: rgba(251, 249, 245, 0.7); }
.lc-section--ink .lc-list li strong { color: var(--wp--preset--color--paper); }

/* Bloc expertise : titre collant + contenu */

.lc-subblock { margin-bottom: 2.25rem; }
.lc-subblock:last-child { margin-bottom: 0; }
.lc-subblock h3,
.lc-subblock h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lc-line);
	line-height: 1.4;
}

/* Encadré mis en avant */

/* ==========================================================================
   8. Boutons
   ========================================================================== */

.lc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.05rem 2.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: color 0.35s var(--lc-ease), border-color 0.35s var(--lc-ease);
}
.lc-btn > * { position: relative; }
.lc-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateY(101%);
	transition: transform 0.45s var(--lc-ease);
}
.lc-btn:hover::before { transform: translateY(0); }
.lc-btn svg { width: 14px; height: 14px; transition: transform 0.35s var(--lc-ease); }
.lc-btn:hover svg { transform: translateX(4px); }

.lc-btn--primary { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--ink-deep); }
.lc-btn--primary::before { background: var(--wp--preset--color--paper); }
.lc-btn--primary:hover { color: var(--wp--preset--color--ink-deep); }

.lc-btn--dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.lc-btn--dark::before { background: var(--wp--preset--color--brass); }
.lc-btn--dark:hover { color: var(--wp--preset--color--ink-deep); }

.lc-btn--ghost { border-color: rgba(240, 220, 168, 0.42); color: var(--wp--preset--color--paper); }
.lc-btn--ghost::before { background: var(--wp--preset--color--brass); }
.lc-btn--ghost:hover { color: var(--wp--preset--color--ink-deep); border-color: var(--wp--preset--color--brass); }

/* Lien fléché texte */
.lc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	text-decoration: none;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid rgba(217, 179, 104, 0.35);
	transition: border-color 0.35s var(--lc-ease), gap 0.35s var(--lc-ease);
}
.lc-link:hover { border-color: var(--wp--preset--color--brass); gap: 1rem; }
.lc-link svg { width: 13px; height: 13px; }

/* ==========================================================================
   9. Méthode — étapes
   ========================================================================== */

/* ==========================================================================
   10. Cabinets / adresses
   ========================================================================== */

.lc-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.lc-office {
	border: 1px solid var(--lc-line);
	background: var(--wp--preset--color--white);
	padding: clamp(1.5rem, 2.6vw, 2.125rem);
	transition: border-color 0.4s var(--lc-ease), transform 0.4s var(--lc-ease);
}
.lc-office:hover { border-color: var(--lc-line-gold); transform: translateY(-3px); }
.lc-office__city {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 400;
	margin: 0 0 0.35rem;
	letter-spacing: -0.01em;
}
.lc-office__region {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	display: block;
	margin-bottom: 1.25rem;
}
.lc-office address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}

/* ==========================================================================
   11. Formulaire de contact
   ========================================================================== */

.lc-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
@media (max-width: 900px) { .lc-contact { grid-template-columns: 1fr; } }

.lc-contact__aside dl { margin: 0; display: grid; gap: 1.5rem; }
.lc-contact__aside dt {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	margin-bottom: 0.4rem;
}
.lc-contact__aside dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; font-weight: 400; }
.lc-contact__aside dd a { color: inherit; border-bottom: 1px solid var(--lc-line-gold); transition: border-color 0.3s var(--lc-ease); }
.lc-contact__aside dd a:hover { border-color: var(--wp--preset--color--brass); }

.lc-form { display: grid; gap: 1.5rem; }
.lc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .lc-form__row { grid-template-columns: 1fr; } }

.lc-field { position: relative; display: block; }
.lc-field > span {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-bottom: 0.6rem;
	transition: color 0.3s var(--lc-ease);
}
.lc-field > span .req { color: var(--wp--preset--color--brass); margin-left: 0.2rem; }
.lc-field input,
.lc-field textarea,
.lc-field select {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lc-line-strong);
	padding: 0.75rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.35s var(--lc-ease);
	border-radius: 0;
	appearance: none;
}
.lc-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C6B7C' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	background-size: 12px 8px;
	padding-right: 2rem;
	cursor: pointer;
}
.lc-field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.65; }
.lc-field input::placeholder,
.lc-field textarea::placeholder { color: rgba(92, 107, 124, 0.45); font-weight: 400; }
.lc-field input:focus,
.lc-field textarea:focus,
.lc-field select:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--brass);
}
.lc-field:focus-within > span { color: var(--wp--preset--color--brass); }
.lc-field input[aria-invalid="true"],
.lc-field textarea[aria-invalid="true"] { border-bottom-color: #B3261E; }

.lc-consent {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}
.lc-consent input { margin-top: 0.3rem; accent-color: var(--wp--preset--color--brass); width: 1rem; height: 1rem; flex: none; }
.lc-consent a { color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--lc-line-gold); }

.lc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lc-notice {
	padding: 1.15rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--brass);
	background: var(--wp--preset--color--sand);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.lc-notice--error { border-left-color: #B3261E; background: rgba(179, 38, 30, 0.06); }
.lc-notice strong { display: block; font-weight: 500; margin-bottom: 0.2rem; }
.lc-notice ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.lc-footer {
	background: var(--wp--preset--color--ink-deep);
	color: rgba(251, 249, 245, 0.62);
	font-size: 0.9375rem;
	font-weight: 400;
}
.lc-footer__top {
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(150px, 1fr));
	gap: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .lc-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lc-footer__top { grid-template-columns: 1fr; } }

.lc-footer__brandline {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--paper);
	margin: 0 0 1rem;
	letter-spacing: -0.015em;
}
.lc-footer__blurb { margin: 0 0 1.75rem; max-width: 42ch; line-height: 1.7; }
.lc-footer__col h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-light);
	margin: 0 0 1.25rem;
	line-height: 1.4;
}
.lc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.lc-footer a { color: inherit; text-decoration: none; transition: color 0.3s var(--lc-ease); }
.lc-footer a:hover { color: var(--wp--preset--color--brass-light); }
.lc-footer address { font-style: normal; line-height: 1.75; }

.lc-footer__legal {
	border-top: 1px solid rgba(240, 220, 168, 0.14);
	font-size: 0.8125rem;
	color: rgba(251, 249, 245, 0.42);
}
.lc-footer__legal-inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 1.75rem clamp(1.25rem, 5vw, 3.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	justify-content: space-between;
}
.lc-footer__legal p { margin: 0; }
.lc-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.lc-mentions {
	font-size: 0.75rem;
	line-height: 1.7;
	color: rgba(251, 249, 245, 0.38);
	max-width: 1240px;
	margin-inline: auto;
	padding: 0 clamp(1.25rem, 5vw, 3.5rem) 2.5rem;
}

/* ==========================================================================
   13. Contenu éditorial (pages classiques, articles)
   ========================================================================== */

.lc-page-hero {
	background: linear-gradient(165deg, #071A2F 0%, #040E1B 100%);
	color: var(--wp--preset--color--paper);
	position: relative;
	overflow: hidden;
}
.lc-page-hero::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 55vw;
	height: 55vw;
	max-width: 700px;
	max-height: 700px;
	background: radial-gradient(circle, rgba(217, 179, 104, 0.18), transparent 65%);
	pointer-events: none;
}
.lc-page-hero__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3.5rem);
	position: relative;
}
.lc-page-hero h1 {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 400;
	margin: 0 0 1.25rem;
	max-width: 20ch;
	color: var(--wp--preset--color--paper);
}
.lc-page-hero p { color: rgba(251, 249, 245, 0.72); max-width: 58ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.65; font-weight: 400; }

.lc-breadcrumb {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(240, 220, 168, 0.8);
	margin-bottom: 1.5rem;
}
.lc-breadcrumb a { color: inherit; text-decoration: none; }
.lc-breadcrumb a:hover { color: var(--wp--preset--color--brass-light); }
.lc-breadcrumb span { opacity: 0.45; margin-inline: 0.5rem; }

.lc-prose > * + * { margin-top: 1.35rem; }
.lc-prose h2 { margin-top: 2.75rem; }
.lc-prose h3 { margin-top: 2.25rem; }
.lc-prose ul, .lc-prose ol { padding-left: 1.35rem; }
.lc-prose li + li { margin-top: 0.5rem; }
.lc-prose a { border-bottom: 1px solid var(--lc-line-gold); }

/* ==========================================================================
   14. Révélations au défilement
   ========================================================================== */

/* Titres découpés en lignes : chaque ligne est rognée par un masque,
   son intérieur glisse depuis le bas. Sans JS, tout reste lisible. */
.lc-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

/* États initiaux appliqués uniquement quand le JS a pris la main
   et que l'utilisateur n'a pas demandé moins d'animations. */

/* Parallaxe : le média déborde légèrement de son cadre. */
[data-parallax] { will-change: transform; }

/* Empilement « rideau » : la section claire recouvre la sombre. */

/* ==========================================================================
   15. Impression
   ========================================================================== */

@media print {
	.lc-header, .lc-topbar, .lc-footer, .lc-hero__actions, .lc-form { display: none !important; }
	body::after { display: none; }
	body { background: #fff; color: #000; }
}

/* ==========================================================================
   16. Ajustements après recette navigateur
   ========================================================================== */

/* Navigation et appels à l'action : jamais de retour à la ligne. */
.lc-nav a,
.lc-header__cta,
.lc-btn { white-space: nowrap; }

/* Le titre du héros tenait sur six lignes : on réduit et on borne la largeur. */
.lc-hero__title {
	font-size: clamp(2.5rem, 4.8vw, 4.25rem);
	max-width: 14ch;
}
@media (max-width: 900px) {
	.lc-hero__title { max-width: 18ch; }
}

/* Chiffres du bandeau : franchement plus imposants que leur légende. */
.lc-figure strong { font-size: clamp(2rem, 3.4vw, 2.75rem); }

/* Le portrait ne doit jamais passer au-dessus de l'en-tête collant. */
.lc-hero__inner { position: relative; z-index: 1; }

/* ==========================================================================
   17. En-tête refait : bandeau flottant translucide
   L'ancienne version empilait une barre de contact et un bandeau ivoire
   opaque qui coupait le héros net. On passe à une pilule unique, posée
   par-dessus l'image, qui se densifie une fois la page défilée.
   ========================================================================== */

.lc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: clamp(0.85rem, 1.6vw, 1.25rem) clamp(1rem, 4vw, 2.5rem);
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	box-shadow: none;
}

.lc-header__bar {
	max-width: 1240px;
	margin-inline: auto;
	min-height: 68px;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	padding: 0.5rem 0.5rem 0.5rem clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 999px;
	background: rgba(6, 22, 40, 0.46);
	border: 1px solid rgba(240, 220, 168, 0.2);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	color: var(--wp--preset--color--paper);
	transition: background-color 0.45s var(--lc-ease), border-color 0.45s var(--lc-ease),
		color 0.45s var(--lc-ease), box-shadow 0.45s var(--lc-ease);
}

.lc-header.is-stuck .lc-header__bar {
	background: rgba(251, 249, 245, 0.94);
	border-color: rgba(7, 26, 47, 0.07);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 18px 44px -26px rgba(4, 14, 27, 0.5);
}

/* Marque : losange laiton + bloc typographique, sans cadre vide. */
.lc-brand { gap: 0.8rem; align-items: center; }
.lc-brand:hover .lc-brand__diamond { transform: rotate(135deg); }
.lc-header.is-stuck .lc-brand__name span { color: var(--wp--preset--color--brass); }

/* Navigation centrée dans la pilule. */
.lc-nav { margin-inline: auto; }
.lc-nav ul { gap: clamp(1.1rem, 2.2vw, 2rem); }
.lc-nav a {
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 450;
	letter-spacing: 0.005em;
	opacity: 0.82;
	transition: opacity 0.3s var(--lc-ease);
}
.lc-nav a:hover { opacity: 1; }
.lc-nav .current-menu-item > a,
.lc-nav .current_page_item > a { color: var(--wp--preset--color--brass); opacity: 1; }

.lc-header__actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }

.lc-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	opacity: 0.72;
	font-size: 0.875rem;
	font-weight: 450;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.3s var(--lc-ease);
}
.lc-header__tel:hover { opacity: 1; color: var(--wp--preset--color--brass); }
.lc-header__tel svg { width: 15px; height: 15px; opacity: 0.8; }

.lc-header__cta {
	border-radius: 999px;
	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink-deep);
	padding: 0.9rem 1.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	display: inline-flex;
}
.lc-header__cta::before { background: var(--wp--preset--color--paper); }
.lc-header__cta:hover { color: var(--wp--preset--color--ink-deep); }

.lc-burger {
	border-radius: 999px;
	/* Cercle en or, comme le bouton de rendez-vous à côté : les deux seuls
	   éléments interactifs de l'en-tête partagent la même couleur d'accent.
	   Les trois traits restent clairs, pour garder le contraste au centre. */
	border-color: var(--wp--preset--color--brass);
	color: inherit;
}
.lc-burger span { background: currentColor; }
.lc-burger:hover { border-color: var(--wp--preset--color--brass-light); }

@media (max-width: 1180px) { .lc-header__tel { display: none; } }
@media (max-width: 980px) {
	.lc-nav { margin-inline: 0; }
	.lc-header__cta { display: none; }
	.lc-header__actions { margin-left: auto; }
}
@media (max-width: 600px) {
	.lc-header__bar { min-height: 58px; padding-left: 1.1rem; }
}

/* Le héros doit laisser passer le bandeau flottant au-dessus de lui. */
.lc-hero__inner { padding-top: clamp(8.5rem, 13vw, 12rem); }
.lc-page-hero__inner { padding-top: clamp(8.5rem, 11vw, 10rem); }

/* ==========================================================================
   18. Présence typographique
   Tout était réglé en graisse 300 sur 17 px : maigre, petit, générique.
   On remonte les corps, les graisses et le contraste.
   ========================================================================== */

.lc-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
}

.lc-lead {
	font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
	line-height: 1.55;
	font-weight: 400;
	letter-spacing: -0.008em;
}

.lc-hero__lead {
	font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
	line-height: 1.6;
	color: rgba(251, 249, 245, 0.82);
	letter-spacing: -0.005em;
}

/* Un peu de chaleur rendue à Fraunces sur les très grands corps. */
.lc-hero__title,
.lc-display { font-variation-settings: "SOFT" 12, "WONK" 0, "opsz" 144; }
.lc-hero__title em,
.lc-display em { font-variation-settings: "SOFT" 45, "WONK" 1, "opsz" 144; }
.lc-index__desc,
.lc-card p,
.lc-list li { font-size: 1.0625rem; line-height: 1.6; }

.lc-figure strong { font-size: clamp(2.5rem, 4vw, 3.375rem); letter-spacing: -0.02em; }
.lc-figure > span { font-size: 0.9375rem; line-height: 1.5; color: rgba(251, 249, 245, 0.66); }

.lc-office__city { font-size: 1.5rem; }
.lc-office address { font-size: 1rem; }
.lc-office__region { font-size: 0.75rem; letter-spacing: 0.16em; font-weight: 600; }

.lc-subblock h3,
.lc-subblock h4 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; }

.lc-btn { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: none; }
.lc-link { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: none; }

.lc-field > span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; }
.lc-field input, .lc-field textarea, .lc-field select { font-size: 1.0625rem; font-weight: 400; }
.lc-consent { font-size: 0.9375rem; }

.lc-contact__aside dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; }
.lc-contact__aside dd { font-size: 1.0625rem; }

.lc-footer { font-size: 1rem; }
.lc-footer__brandline { font-size: 1.75rem; }
.lc-footer__col h2 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; }

/* ==========================================================================
   19. Correctifs d'en-tête
   ========================================================================== */

/* Le filet sous les liens ne doit apparaître qu'au survol ou sur la section
   réellement visible. WordPress marquait tous les liens à ancre comme
   « page courante », ce qui les soulignait en permanence. */
.lc-nav .current-menu-item > a::after,
.lc-nav .current_page_item > a::after { transform: scaleX(0); }
.lc-nav a:hover::after,
.lc-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.lc-nav .current-menu-item > a,
.lc-nav .current_page_item > a { color: inherit; opacity: 0.82; }
.lc-nav a.is-active { color: var(--wp--preset--color--brass); opacity: 1; }

/* Marque plus lisible dans la pilule. */

/* Le bouton secondaire du héros était bleu nuit sur bleu nuit. */
.lc-btn--ghost {
	background: rgba(251, 249, 245, 0.06);
	border-color: rgba(240, 220, 168, 0.5);
}

/* ==========================================================================
   20. Marque et mot-symbole du héros
   ========================================================================== */

/* .lc-brand est un <a> : il héritait de la couleur de lien du thème
   (bleu nuit), donc le mot « Laustriat » disparaissait sur la pilule sombre. */
.lc-brand,
.lc-brand:hover { color: inherit; }

/* Grand mot-symbole en filigrane, au pied du héros. */

.lc-hero { padding-bottom: clamp(3rem, 7vw, 6rem); }
.lc-hero__inner { z-index: 2; }
.lc-figures { position: relative; z-index: 2; }

/* ==========================================================================
   21. Mot-symbole : flux normal, coupé net par le bord du héros
   ========================================================================== */

.lc-hero { padding-bottom: 0; }

/* ==========================================================================
   22. En-tête ouvert + héros plein écran
   La pilule enfermait la navigation dans un cadre. On repasse à un
   en-tête sans contenant : marque à gauche, navigation libre, bouton à
   droite. Au défilement, un bandeau pleine largeur prend le relais.
   ========================================================================== */

.lc-header {
	padding: 0;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.4s var(--lc-ease), border-color 0.4s var(--lc-ease);
}
.lc-header.is-stuck {
	background: rgba(7, 26, 47, 0.86);
	border-bottom-color: rgba(240, 220, 168, 0.14);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: none;
}

.lc-header__bar {
	max-width: none;
	min-height: 92px;
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 0;
	border: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	color: var(--wp--preset--color--paper);
	transition: min-height 0.4s var(--lc-ease);
}
.lc-header.is-stuck .lc-header__bar { min-height: 72px; background: none; color: var(--wp--preset--color--paper); }

.lc-nav a { font-size: 0.9375rem; }
.lc-header__actions { gap: 1.25rem; }

.lc-header__cta {
	background: var(--wp--preset--color--brass);
	color: #10233A;
	padding: 0.95rem 1.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 999px;
}
.lc-header__cta::before { background: var(--wp--preset--color--paper); }
.lc-header__cta:hover { color: #10233A; }

/* ---------- Héros plein écran ---------- */

.lc-hero {
	min-height: 100svh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: clamp(7rem, 15vh, 11rem) 0 clamp(5.5rem, 11vh, 8rem);
	background: radial-gradient(120% 90% at 50% 0%, #0C2743 0%, #071A2F 45%, #040E1B 100%);
}

/* Dessin au trait de la cathédrale, en arrière-plan. */

/* Voile central : garantit la lisibilité du titre par-dessus le dessin. */
.lc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	top: 0;
	right: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	background: radial-gradient(60% 46% at 50% 44%, rgba(7, 26, 47, 0.92) 0%, rgba(7, 26, 47, 0.62) 55%, rgba(7, 26, 47, 0) 100%);
	pointer-events: none;
}
.lc-hero::after { content: none; }

.lc-hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	grid-template-columns: none;
	max-width: 940px;
	margin-inline: auto;
	padding: 0 clamp(1.5rem, 5vw, 3rem);
	gap: 0;
}

.lc-hero__title {
	font-size: clamp(2.375rem, 5.6vw, 5rem);
	max-width: none;
	margin: 0 0 1.75rem;
	line-height: 1.06;
}
.lc-hero__lead { margin: 0 auto 2.75rem; max-width: 58ch; }
.lc-hero__actions { justify-content: center; }

.lc-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(1.75rem, 4.5vh, 3rem);
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(240, 220, 168, 0.85);
	text-decoration: none;
	transition: color 0.3s var(--lc-ease);
}
.lc-hero__scroll:hover { color: var(--wp--preset--color--brass-light); }
.lc-hero__scroll svg { width: 14px; height: 24px; }

/* ---------- Bandeau de chiffres, désormais autonome ---------- */

.lc-figures {
	background: var(--wp--preset--color--ink);
	border-top: 1px solid rgba(240, 220, 168, 0.14);
	border-bottom: 1px solid rgba(240, 220, 168, 0.1);
}

/* ---------- Portrait déplacé dans la section « Le cabinet » ---------- */

.lc-portrait-split {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.lc-portrait-split .lc-portrait { width: min(100%, 340px); justify-self: start; }
.lc-portrait-split .lc-portrait__caption strong { color: var(--wp--preset--color--ink); }
.lc-portrait-split .lc-portrait__caption span { color: var(--wp--preset--color--brass); }
.lc-portrait-split .lc-portrait::before { border-color: rgba(217, 179, 104, 0.42); }

@media (max-width: 860px) {
	.lc-portrait-split { grid-template-columns: 1fr; }
	.lc-portrait-split .lc-portrait { justify-self: center; }
}

/* ---------- Titres de section ---------- */

.lc-h2 {
	font-size: clamp(2rem, 3.8vw, 3.25rem);
	margin: 0 0 1.5rem;
	max-width: 22ch;
}
.lc-section-head .lc-h2 { margin-bottom: 0; }
.lc-portrait-split .lc-lead { margin-bottom: 1.25rem; }

@media (max-width: 600px) {
	.lc-hero { min-height: 92svh; }
}

/* ==========================================================================
   23. Cohérence des boutons + présence du dessin
   ========================================================================== */

/* Tous les boutons adoptent la forme arrondie de celui de l'en-tête. */
.lc-btn {
	border-radius: 999px;
	padding: 1.05rem 2rem;
}
.lc-btn--ghost {
	background: transparent;
	border-color: rgba(240, 220, 168, 0.45);
	color: var(--wp--preset--color--paper);
}
.lc-btn--ghost:hover { color: #10233A; }
.lc-btn--primary { color: #10233A; }
.lc-btn--primary:hover { color: #10233A; }

/* Le dessin gagne en échelle et en présence. */

/* Le voile se resserre sur le bloc de texte pour ne pas éteindre le dessin. */
.lc-hero::before {
	background: radial-gradient(52% 40% at 50% 42%, rgba(7, 26, 47, 0.94) 0%, rgba(7, 26, 47, 0.68) 52%, rgba(7, 26, 47, 0) 100%);
}

/* L'invite de défilement était rognée par le bas du héros. */
.lc-hero { padding-bottom: clamp(7rem, 13vh, 9.5rem); }
.lc-hero__scroll { bottom: clamp(2.5rem, 6vh, 4rem); }

/* ==========================================================================
   24. Fond de héros : dégradé atmosphérique en couches
   Remplace le dessin au trait. Quatre halos superposés créent la
   profondeur, un vignettage resserre le regard vers le centre.
   ========================================================================== */

.lc-hero {
	background-color: #040E1B;
	background-image:
		/* halo laiton, en bas à droite */
		radial-gradient(58% 50% at 80% 86%, rgba(217, 179, 104, 0.24) 0%, rgba(217, 179, 104, 0) 62%),
		/* halo bleu clair, en haut à droite */
		radial-gradient(62% 54% at 88% 14%, rgba(26, 92, 148, 0.55) 0%, rgba(26, 92, 148, 0) 60%),
		/* halo principal, en haut à gauche */
		radial-gradient(78% 64% at 26% 2%, rgba(24, 72, 122, 0.85) 0%, rgba(24, 72, 122, 0) 64%),
		/* profondeur générale */
		linear-gradient(168deg, #0A2542 0%, #071A2F 48%, #040E1B 100%);
	background-repeat: no-repeat;
}

/* Vignettage : assombrit les bords, concentre l'attention sur le titre. */
.lc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	z-index: 1;
	background:
		radial-gradient(118% 96% at 50% 46%, rgba(4, 14, 27, 0) 38%, rgba(3, 11, 22, 0.72) 100%);
	pointer-events: none;
}

/* ==========================================================================
   25. Boutons : ils étaient beaucoup trop petits
   ========================================================================== */

.lc-btn {
	padding: 1.3rem 2.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.015em;
	gap: 0.85rem;
}
.lc-btn svg { width: 16px; height: 16px; }

.lc-hero__actions { gap: 1.25rem 1.5rem; margin-top: 0.5rem; }

.lc-header__cta {
	padding: 1.05rem 2rem;
	font-size: 0.875rem;
}

/* Le champ d'envoi du formulaire suit la même échelle. */
.lc-form .lc-btn { padding: 1.3rem 2.75rem; }

@media (max-width: 560px) {
	.lc-btn { padding: 1.15rem 2rem; font-size: 0.875rem; width: 100%; justify-content: center; }
	.lc-hero__actions { flex-direction: column; align-items: stretch; }
}

/* Le titre était trop petit pour un héros plein écran : il flottait au
   milieu d'un grand vide. On lui donne l'échelle de la page. */
.lc-hero__title {
	font-size: clamp(2.625rem, 6.6vw, 6rem);
	max-width: 15ch;
	margin-inline: auto;
	line-height: 1.02;
}
.lc-hero__lead { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); max-width: 52ch; }
.lc-hero__inner { max-width: 1080px; }

/* ==========================================================================
   26. Typographie moderne : un seul grotesque, plus de serif
   Fraunces puis Instrument Serif rendaient mal en gros corps. Tous les
   titres passent au grotesque, en graisse 600 et interlettrage resserré.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.lc-display,
.lc-hero__title,
.lc-index__title,
.lc-office__city,
.lc-footer__brandline,
.lc-figure strong,
.lc-brand__name,
.lc-step__num,
.lc-index__num,
.lc-portrait__caption strong {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: normal;
	font-feature-settings: normal;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-style: normal;
}

/* L'accent du titre : plus d'italique, une couleur suffit. */
.lc-hero__title em,
.lc-display em,
.lc-accent-italic {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--brass-light);
	font-variation-settings: normal;
}

.lc-hero__title {
	font-size: clamp(2.75rem, 7vw, 6.25rem);
	letter-spacing: -0.042em;
	line-height: 0.98;
	max-width: 16ch;
}
.lc-h2 { letter-spacing: -0.038em; }
.lc-figure strong { letter-spacing: -0.04em; }
.lc-office__region { font-family: var(--wp--preset--font-family--body); }

/* ==========================================================================
   27. Marque et navigation : c'était beaucoup trop petit
   ========================================================================== */

.lc-brand { gap: 0; align-items: center; }

.lc-nav ul { gap: clamp(1.5rem, 2.6vw, 2.5rem); }
.lc-nav a {
	font-size: 1.0625rem;
	font-weight: 450;
	letter-spacing: -0.01em;
	opacity: 0.86;
}
.lc-nav a:hover { opacity: 1; }

.lc-header__tel { font-size: 0.9375rem; }
.lc-header__tel svg { width: 16px; height: 16px; }
.lc-header__cta { font-size: 0.9375rem; padding: 1.1rem 2.1rem; }
.lc-header__bar { min-height: 104px; gap: clamp(1.5rem, 3vw, 2.75rem); }
.lc-header.is-stuck .lc-header__bar { min-height: 80px; }

/* Le fond du héros descend plus bas pour compenser l'en-tête plus haut. */
.lc-hero { padding-top: clamp(8rem, 16vh, 12rem); }

/* ==========================================================================
   28. Bricolage Grotesque sur les titres
   Police variable : l'axe « opsz » adapte le dessin au corps affiché.
   Il faut donc le régler explicitement, plus grand pour les gros titres.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.lc-display,
.lc-index__title,
.lc-office__city,
.lc-footer__brandline,
.lc-figure strong,
.lc-brand__name,
.lc-portrait__caption strong {
	font-variation-settings: "opsz" 40, "wdth" 100;
}

.lc-hero__title { font-variation-settings: "opsz" 96, "wdth" 100; }
.lc-h2,
.lc-figure strong { font-variation-settings: "opsz" 72, "wdth" 100; }

/* Les libellés hors titres restent sur le grotesque de texte. */

/* ==========================================================================
   29. Calque d'image de fond du héros
   Prêt à l'emploi : il suffit de renseigner --lc-hero-image ci-dessous
   avec le nom du fichier déposé dans assets/img/. Tant que la variable
   vaut « none », le calque est invisible et seul le dégradé s'affiche.
   ========================================================================== */

.lc-hero {
	--lc-hero-image: none;
	/* Dosage de l'image par-dessus le dégradé. */
	--lc-hero-image-opacity: 0.55;
}

.lc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--lc-hero-image);
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	opacity: var(--lc-hero-image-opacity);
	/* Fondu vers le bas : l'image ne coupe jamais net au bord de la section. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
	pointer-events: none;
}

/* ==========================================================================
   30. Or : une variante lisible sur les fonds clairs
   L'or éclairci (#D9B368) passe très bien sur le bleu nuit, mais son
   contraste tombe sous le seuil lisible sur l'ivoire et le sable. Les
   petits textes dorés posés sur fond clair utilisent donc une teinte plus
   dense, qui reste le même or, simplement assombri.
   ========================================================================== */

:root { --lc-brass-sur-clair: #8A6620; }

.lc-section--sand .lc-eyebrow,
.lc-section:not(.lc-section--ink) .lc-eyebrow,
.lc-office__region,
.lc-subblock h3,
.lc-subblock h4,
.lc-contact__aside dt,
.lc-index__num,
.lc-link {
	color: var(--lc-brass-sur-clair);
}

/* Sur fond sombre, l'or clair reprend ses droits. */
.lc-hero .lc-eyebrow,
.lc-section--ink .lc-eyebrow,
.lc-section--ink .lc-office__region,
.lc-section--ink .lc-subblock h3,
.lc-section--ink .lc-subblock h4,
.lc-section--ink .lc-contact__aside dt,
.lc-section--ink .lc-index__num,
.lc-section--ink .lc-link,
.lc-footer .lc-link {
	color: var(--wp--preset--color--brass-light);
}

/* Les filets décoratifs restent dorés clairs, ils ne portent pas de texte. */
.lc-list li::before,
.lc-card__icon { color: var(--wp--preset--color--brass); }

/* ==========================================================================
   31. Correctif : rendre à Bricolage son dessin d'origine
   Forcer l'axe de taille optique (« opsz ») à une valeur haute resserre le
   dessin et lui retire son caractère : le titre redevenait un grotesque
   neutre. On laisse donc la police dans son instance par défaut, celle qui
   avait été validée sur la planche comparative.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.lc-display,
.lc-hero__title,
.lc-h2,
.lc-index__title,
.lc-office__city,
.lc-footer__brandline,
.lc-figure strong,
.lc-brand__name,
.lc-portrait__caption strong {
	font-variation-settings: normal;
}

/* ==========================================================================
   32. Pas de ligatures dans les titres
   Bricolage soude automatiquement « fi », « fl », « ff »... Discret dans
   un paragraphe, mais à 96 px le f et le i fusionnent et le point du i
   disparaît : « fructifier » devient illisible. On coupe les ligatures
   sur tout ce qui est composé en gros corps.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.lc-display,
.lc-hero__title,
.lc-h2,
.lc-index__title,
.lc-office__city,
.lc-footer__brandline,
.lc-figure strong,
.lc-brand__name,
.lc-portrait__caption strong,
.lc-step h3,
.lc-callout h3,
.lc-callout h4 {
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0, "dlig" 0;
}

/* ==========================================================================
   33. Interlettrage des titres desserré
   À −0,042 em les lettres se percutaient : le bras du « f » touchait le
   « i » suivant. Bricolage est déjà dessinée serrée, elle n'a pas besoin
   qu'on la comprime davantage.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.lc-display,
.lc-h2,
.lc-index__title,
.lc-office__city,
.lc-footer__brandline { letter-spacing: -0.018em; }

.lc-hero__title { letter-spacing: -0.022em; }
.lc-figure strong { letter-spacing: -0.02em; }

/* ==========================================================================
   34. Boutons : le texte était noyé dans la pilule
   15 px de texte dans un bouton de 60 px de haut : le libellé flottait au
   milieu du vide et n'accrochait pas l'œil. On remonte le corps, on
   resserre légèrement le rembourrage horizontal.
   ========================================================================== */

.lc-btn {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	padding: 1.15rem 2.35rem;
}
.lc-btn svg { width: 18px; height: 18px; }

.lc-header__cta {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 0.95rem 1.85rem;
}

.lc-hero__actions { gap: 1rem 1.25rem; }

@media (max-width: 560px) {
	.lc-btn { font-size: 1.0625rem; padding: 1.1rem 1.75rem; }
}

/* ==========================================================================
   35. Image de fond du héros
   Photographie fournie par le client. Déclarée en JPEG pour compatibilité,
   remplacée par la version WebP (164 Ko contre 232) quand le navigateur
   sait la lire.
   ========================================================================== */

.lc-hero {
	--lc-hero-image: url("assets/img/hero-fond.jpg");
	--lc-hero-image-opacity: 0.8;
}

@supports ( background-image: image-set( url("a.webp") type("image/webp") ) ) {
	.lc-hero {
		--lc-hero-image: image-set(
			url("assets/img/hero-fond.webp") type("image/webp"),
			url("assets/img/hero-fond.jpg") type("image/jpeg")
		);
	}
}

.lc-hero__media {
	background-position: center 46%;
	/* Le bâti est à droite sur la photo ; on garde le cadrage centré mais on
	   laisse l'image déborder pour ne jamais écraser la façade. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 98%);
}

/* Voile de lisibilité : sans lui, le titre se perd dans le ciel et les
   fenêtres éclairées. Deux couches — un assombrissement général en haut,
   et un halo sombre resserré derrière le bloc de texte. */
.lc-hero::before {
	background:
		radial-gradient(46% 34% at 50% 44%, rgba(4, 14, 27, 0.86) 0%, rgba(4, 14, 27, 0.45) 60%, rgba(4, 14, 27, 0) 100%),
		linear-gradient(to bottom, rgba(4, 14, 27, 0.72) 0%, rgba(4, 14, 27, 0.32) 32%, rgba(4, 14, 27, 0.42) 70%, rgba(4, 14, 27, 0.88) 100%);
}

/* ==========================================================================
   36. Logo en image
   ========================================================================== */

.lc-brand__logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: none;
}
.lc-brand picture { display: block; }

@media (max-width: 860px) {
	.lc-brand__logo { height: 38px; }
}
@media (max-width: 520px) {
	.lc-brand__logo { height: 32px; }
}

/* Le logo à 46 px rendait « CONSEILS » illisible et écrasait l'arbre. */
.lc-brand__logo { height: 68px; }
.lc-header.is-stuck .lc-brand__logo { height: 54px; transition: height 0.4s var(--lc-ease); }
.lc-brand__logo { transition: height 0.4s var(--lc-ease); }

@media (max-width: 1100px) { .lc-brand__logo { height: 56px; } }
@media (max-width: 860px)  { .lc-brand__logo { height: 46px; } }
@media (max-width: 520px)  { .lc-brand__logo { height: 40px; } }

/* ==========================================================================
   37. Sections jointives
   WordPress insère un espacement entre les blocs de premier niveau
   (« blockGap »). Sur des sections pleine largeur qui alternent fond
   sombre et fond clair, cela laissait apparaître une bande ivoire de
   1,5 rem entre chacune. Les sections doivent se toucher.
   ========================================================================== */

.lc-main .entry-content > *,
.lc-main .wp-block-post-content > * { margin-block: 0 !important; }

.lc-main .entry-content,
.lc-main .wp-block-post-content { margin-block: 0; }

/* Le héros et le bandeau de chiffres forment un bloc sombre continu. */
.lc-hero + .lc-figures { border-top: 0; }

/* Le cadre décalé autour du portrait dessinait un rectangle qui coupait
   sous la légende. Sur fond sable, l'arche se suffit à elle-même. */
.lc-portrait-split .lc-portrait::before { display: none; }
.lc-portrait-split .lc-portrait__frame {
	box-shadow: 0 28px 60px -32px rgba(4, 14, 27, 0.55);
	background: var(--wp--preset--color--sand);
}
.lc-portrait-split .lc-portrait__caption { margin-top: 1.5rem; }

/* ==========================================================================
   38. Vignette « Qui est Olivier Laustriat ? » dans le héros
   Le client souhaitait voir son visage dès l'ouverture. Plutôt qu'un
   troisième bouton, une vignette discrète : le portrait apparaît tout de
   suite et mène à la présentation complète, sans alourdir la composition.
   ========================================================================== */

/* Le haut du crâne était rogné dans la vignette ronde : on descend le cadrage. */

/* ==========================================================================
   39. Signature du héros
   Trois appels à l'action de natures différentes obligeaient le visiteur à
   arbitrer. Le portrait quitte donc la rangée de boutons et remonte
   au-dessus du titre : il ne propose plus une action concurrente, il
   signe la page. Le visage est visible dès l'ouverture, comme voulu, mais
   la hiérarchie redevient nette — une action principale, une secondaire.
   ========================================================================== */

/* La signature portrait en tête de héros est abandonnée : elle alourdissait
   l'entrée de page. Les règles sont neutralisées, le balisage est revenu au
   simple surtitre. */

/* ==========================================================================
   40. Nom du conseiller au-dessus du surtitre
   Attribution en deux lignes : le nom en ivoire, sa qualité en laiton
   juste en dessous. Pas de portrait — le visage reviendra plus bas, en
   grand, dans la section « Le cabinet ».
   ========================================================================== */

/* Le surtitre passe au second plan : plus petit, plus discret. */
.lc-hero .lc-eyebrow { margin-bottom: 1.75rem; font-size: 0.75rem; }

/* ==========================================================================
   41. Curseur de défilement
   Le nom au-dessus du titre est abandonné. À la place, une invite claire
   en bas du héros : elle annonce ce qu'on trouve juste en dessous et se
   lit comme un bouton, pas comme une étiquette décorative.
   ========================================================================== */
.lc-hero .lc-eyebrow { margin-bottom: 2rem; font-size: 0.8125rem; }

.lc-hero__scroll {
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.6rem 0.85rem 1.75rem;
	border-radius: 999px;
	border: 1px solid rgba(240, 220, 168, 0.28);
	background: rgba(4, 14, 27, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--paper);
	transition: border-color 0.35s var(--lc-ease), background-color 0.35s var(--lc-ease);
}
.lc-hero__scroll:hover {
	border-color: rgba(240, 220, 168, 0.62);
	background: rgba(4, 14, 27, 0.62);
	color: var(--wp--preset--color--paper);
}

.lc-hero__scroll svg {
	width: 15px;
	height: 20px;
	flex: none;
	color: var(--wp--preset--color--brass);
	transition: transform 0.35s var(--lc-ease);
}
.lc-hero__scroll:hover svg { transform: translateY(3px); }

/* ==========================================================================
   42. Curseur de défilement sans encadré
   La pilule en faisait un troisième bouton, en concurrence avec les deux
   appels à l'action. On revient à une simple invite : le libellé, la
   flèche en dessous, rien autour.
   ========================================================================== */

.lc-hero__scroll {
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.5rem;
	border: 0;
	border-radius: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(251, 249, 245, 0.78);
	transition: color 0.3s var(--lc-ease);
}
.lc-hero__scroll:hover,
.lc-hero__scroll:focus-visible {
	background: none;
	border: 0;
	color: var(--wp--preset--color--paper);
}
.lc-hero__scroll svg { width: 14px; height: 22px; opacity: 0.85; }

/* ==========================================================================
   43. Flèche du curseur : va-et-vient discret
   Seule animation du site, et elle a une fonction : signaler qu'il y a
   quelque chose en dessous. Amplitude faible, cycle lent, et arrêt complet
   si l'utilisateur a demandé moins d'animations dans son système.
   ========================================================================== */

@keyframes lc-flottement {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(7px); }
}

.lc-hero__scroll svg {
	animation: lc-flottement 2.4s ease-in-out infinite;
	transition: opacity 0.3s var(--lc-ease);
}
.lc-hero__scroll:hover svg { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.lc-hero__scroll svg { animation: none; }
}

/* ==========================================================================
   44. Défilement doux
   Uniquement sur les clics d'ancres (menu, « Faisons connaissance »). La
   molette reste strictement native : c'est le pilotage de la molette par
   Lenis qui rendait la page inutilisable, pas le défilement doux lui-même.
   ========================================================================== */

html { scroll-behavior: smooth; }

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

/* L'en-tête est fixe : sans cette marge, une ancre atterrit sous le bandeau
   et le titre de section se retrouve caché. */
[id] { scroll-margin-top: clamp(6rem, 11vh, 8rem); }

/* ==========================================================================
   45. Alignement vertical de l'en-tête
   Mesures relevées dans le navigateur : la barre centre ses éléments sur
   57,4 px. Le bouton, le téléphone et le bloc de navigation y étaient ;
   les liens du menu tombaient 9,5 px plus bas et le logo 4,4 px plus haut.
   Deux causes distinctes :
   — la liste du menu n'était pas centrée dans son conteneur <nav> ;
   — le logo, image en ligne, laissait dépasser l'interligne sous lui.
   ========================================================================== */

@media (min-width: 981px) {
	.lc-nav {
		display: flex;
		align-items: center;
		line-height: 0;
	}
	.lc-nav ul { line-height: normal; }
}

.lc-brand {
	display: flex;
	align-items: center;
	line-height: 0;
}
.lc-brand picture { display: flex; line-height: 0; }

/* ==========================================================================
   46. Curseur de défilement : corps rétabli
   Il avait été réduit par erreur en supprimant l'encadré.
   ========================================================================== */

.lc-hero__scroll { font-size: 0.875rem; }

/* ==========================================================================
   47. Bande blanche en haut de page
   WordPress applique son espacement entre blocs jusqu'au niveau racine
   (.wp-site-blocks), ce qui décalait le contenu de 24 px vers le bas et
   laissait apparaître le fond ivoire du body au-dessus du héros.
   L'en-tête, le contenu et le pied de page doivent se toucher.
   ========================================================================== */

.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Les conteneurs de l'en-tête et du pied de page n'abritent que des éléments
   sortis du flux (position fixe ou absolue) ; les retours à la ligne du code
   y créaient malgré tout une ligne vide de 19 et 31 px. On annule l'interligne
   du conteneur, et on le rétablit sur son contenu réel. */
.wp-block-template-part { line-height: 0; font-size: 0; }
.wp-block-template-part > * { line-height: 1.62; font-size: 1rem; }

/* ==========================================================================
   48. Lien d'évitement de WordPress
   WordPress insère lui-même un lien « Aller au contenu » avec la classe
   .screen-reader-text, que le thème doit masquer visuellement tout en le
   laissant accessible au clavier et aux lecteurs d'écran. Faute de quoi il
   occupait 16 px en haut de page.
   ========================================================================== */

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

.screen-reader-text:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.85rem 1.5rem;
	clip-path: none;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   49. Bandeau de chiffres — version travaillée
   ========================================================================== */

.lc-figures {
	position: relative;
	background:
		radial-gradient(70% 140% at 50% 0%, rgba(217, 179, 104, 0.09) 0%, rgba(217, 179, 104, 0) 62%),
		linear-gradient(180deg, #071A2F 0%, #04101F 100%);
	border-top: 0;
	border-bottom: 0;
	overflow: hidden;
}

/* Filets horizontaux en dégradé, plus fins sur les bords. */
.lc-figures::before,
.lc-figures::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(240, 220, 168, 0) 0%, rgba(240, 220, 168, 0.32) 22%, rgba(240, 220, 168, 0.32) 78%, rgba(240, 220, 168, 0) 100%);
	pointer-events: none;
}
.lc-figures::before { top: 0; }
.lc-figures::after  { bottom: 0; opacity: 0.6; }

.lc-figures__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(3rem, 5.5vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.lc-figure {
	position: relative;
	padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Séparateur vertical : dégradé qui s'éteint aux extrémités. */
.lc-figure::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, rgba(240, 220, 168, 0) 0%, rgba(240, 220, 168, 0.42) 28%, rgba(240, 220, 168, 0.42) 72%, rgba(240, 220, 168, 0) 100%);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 1s var(--lc-ease) calc(var(--i, 0) * 110ms + 180ms);
}
.lc-figures.is-visible .lc-figure::before { transform: scaleY(1); }

/* Le nombre : dégradé doré appliqué au texte. */
.lc-figure strong {
	display: block;
	font-size: clamp(2.75rem, 4.6vw, 4rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.045em;
	font-variant-numeric: lining-nums tabular-nums;
	background: linear-gradient(170deg, #FBEFD2 0%, #E8C877 46%, #C79A3C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.lc-figure > span {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(251, 249, 245, 0.6);
	max-width: 26ch;
	transition: color 0.4s var(--lc-ease);
}
.lc-figure:hover > span { color: rgba(251, 249, 245, 0.82); }

/* Arrivée en cascade. */
.lc-figure {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.8s var(--lc-ease) calc(var(--i, 0) * 110ms),
		transform 0.8s var(--lc-ease) calc(var(--i, 0) * 110ms);
}
.lc-figures.is-visible .lc-figure { opacity: 1; transform: none; }

/* Sans JavaScript, ou si l'utilisateur refuse les animations : tout est
   visible d'emblée, rien ne dépend du script. */
.no-js .lc-figure,
.lc-figures:not(.lc-figures--anim) .lc-figure { opacity: 1; transform: none; }
.lc-figures:not(.lc-figures--anim) .lc-figure::before { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
	.lc-figure,
	.lc-figure::before { transition: none; opacity: 1; transform: none; }
	.lc-figure::before { transform: scaleY(1); }
}

@media (max-width: 700px) {
	.lc-figure { padding-left: 1.25rem; }
	.lc-figure > span { max-width: none; }
}

/* ==========================================================================
   50. Portrait de la section « Le cabinet »
   L'arche rognait le haut du cadrage et l'image était bridée à 340 px.
   On passe à un rectangle net, qui occupe réellement sa colonne.
   ========================================================================== */

.lc-portrait-split {
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.lc-portrait-split .lc-portrait {
	width: 100%;
	max-width: none;
	justify-self: stretch;
}

.lc-portrait-split .lc-portrait__frame {
	border-radius: 3px;
	aspect-ratio: 4 / 5;
	box-shadow: 0 32px 70px -34px rgba(4, 14, 27, 0.6);
}

.lc-portrait-split .lc-portrait__frame img {
	object-position: center top;
}

/* Légende alignée sur le bord de l'image plutôt que centrée. */
.lc-portrait-split .lc-portrait__caption {
	text-align: left;
	margin-top: 1.35rem;
	padding-left: 0.1rem;
}
.lc-portrait-split .lc-portrait__caption strong { font-size: 1.25rem; }
.lc-portrait-split .lc-portrait__caption span { margin-top: 0.4rem; }

@media (max-width: 860px) {
	.lc-portrait-split .lc-portrait { max-width: 460px; margin-inline: auto; }
	.lc-portrait-split .lc-portrait__caption { text-align: center; }
}

/* Le nom sous le portrait était trop discret face à une image agrandie. */
.lc-portrait-split .lc-portrait__caption strong { font-size: 1.5rem; letter-spacing: -0.025em; }
.lc-portrait-split .lc-portrait__caption span { font-size: 0.75rem; letter-spacing: 0.18em; }

/* ==========================================================================
   51. Texture de papier sur les fonds sable
   Un grain très fin, répété, qui donne de la matière au fond uni sans
   jamais gêner la lecture. Motif de 120 px généré en SVG : aucun fichier
   image à charger.
   ========================================================================== */

.lc-section--sand { position: relative; isolation: isolate; }

.lc-section--sand::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
	background-repeat: repeat;
	mix-blend-mode: multiply;
}

/* Le contenu doit rester au-dessus de la texture. */
.lc-section--sand > * { position: relative; z-index: 1; }

/* Chapeaux plus contrastés sur les fonds clairs : ils voisinaient avec des
   paragraphes en bleu nuit, ce qui les faisait paraître délavés. */
.lc-section:not(.lc-section--ink) .lc-lead { color: #2E3D50; }

/* ==========================================================================
   52. Carte d'identité sous le portrait
   La légende flottait sans structure. Elle devient une carte posée en
   débord sur le bas de l'image : nom, fonction, et un appel à l'action
   pour prendre rendez-vous directement depuis cette zone.
   ========================================================================== */

.lc-portrait-split .lc-portrait { position: relative; padding-bottom: 1rem; }

.lc-portrait-split .lc-portrait__caption {
	position: relative;
	z-index: 2;
	margin: -3.25rem 0 0 clamp(1.25rem, 3vw, 2.25rem);
	margin-right: clamp(1.25rem, 4vw, 3.5rem);
	padding: clamp(1.35rem, 2.2vw, 1.75rem) clamp(1.5rem, 2.4vw, 1.9rem);
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(7, 26, 47, 0.08);
	border-top: 2px solid var(--wp--preset--color--brass);
	box-shadow: 0 22px 48px -26px rgba(4, 14, 27, 0.42);
	text-align: left;
}

.lc-portrait-split .lc-portrait__caption strong {
	display: block;
	font-size: clamp(1.375rem, 2vw, 1.625rem);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.lc-portrait-split .lc-portrait__caption > span {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lc-brass-sur-clair);
}

.lc-portrait__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.15rem;
	padding-top: 1.05rem;
	border-top: 1px solid rgba(7, 26, 47, 0.1);
	width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.3s var(--lc-ease), gap 0.3s var(--lc-ease);
}
.lc-portrait__cta svg { width: 15px; height: 15px; flex: none; color: var(--wp--preset--color--brass); }
.lc-portrait__cta:hover { color: var(--lc-brass-sur-clair); gap: 0.95rem; }

@media (max-width: 860px) {
	.lc-portrait-split .lc-portrait__caption {
		margin-left: 1.25rem;
		margin-right: 1.25rem;
		text-align: left;
	}
}

/* ==========================================================================
   53. Téléphone de l'en-tête en doré
   ========================================================================== */

.lc-header__tel {
	color: var(--wp--preset--color--brass-light);
	opacity: 1;
	font-weight: 600;
}
.lc-header__tel svg { opacity: 1; color: var(--wp--preset--color--brass); }
.lc-header__tel:hover { color: #FBEFD2; opacity: 1; }
.lc-header__tel:hover svg { color: var(--wp--preset--color--brass-light); }

/* ==========================================================================
   54. Section « Le détail » — trois colonnes d'offre
   ========================================================================== */

.lc-section--ink .lc-subblock h4 {
	color: var(--wp--preset--color--brass-light);
	border-bottom-color: rgba(240, 220, 168, 0.16);
}

/* Bandeau de chiffres à trois colonnes. */
.lc-figures__inner--trois { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lc-figures__inner--trois .lc-figure strong { font-size: clamp(2.25rem, 3.4vw, 2.875rem); }

/* ==========================================================================
   55. Pôles dépliables
   L'ancienne version affichait trente puces d'un coup, en trois colonnes,
   juste après un index qui annonçait déjà les mêmes trois pôles. Les deux
   sections sont fusionnées : on ne voit que trois lignes, et le détail
   s'ouvre à la demande. Balise <details> native : fonctionne sans
   JavaScript et reste accessible au clavier.
   ========================================================================== */

.lc-poles { border-top: 1px solid var(--lc-line); }

.lc-pole { border-bottom: 1px solid var(--lc-line); }

.lc-pole__tete {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	cursor: pointer;
	list-style: none;
	transition: padding-left 0.4s var(--lc-ease), background-color 0.4s var(--lc-ease);
}
.lc-pole__tete::-webkit-details-marker { display: none; }
.lc-pole__tete:hover { padding-left: 1rem; }

.lc-pole__texte { display: flex; flex-direction: column; gap: 0.5rem; }

.lc-pole__titre {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

.lc-pole__resume {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
	max-width: 58ch;
}

/* Le signe « plus » devient « moins » à l'ouverture. */
.lc-pole__signe {
	justify-self: end;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--lc-line-strong);
	border-radius: 50%;
	transition: background-color 0.4s var(--lc-ease), border-color 0.4s var(--lc-ease), transform 0.4s var(--lc-ease);
}
.lc-pole__signe::before,
.lc-pole__signe::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	background: var(--wp--preset--color--ink);
	transform: translate(-50%, -50%);
	transition: transform 0.4s var(--lc-ease), background-color 0.4s var(--lc-ease);
}
.lc-pole__signe::after { transform: translate(-50%, -50%) rotate(90deg); }

.lc-pole__tete:hover .lc-pole__signe {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.lc-pole__tete:hover .lc-pole__signe::before,
.lc-pole__tete:hover .lc-pole__signe::after { background: var(--wp--preset--color--paper); }

.lc-pole[open] .lc-pole__signe {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.lc-pole[open] .lc-pole__signe::before,
.lc-pole[open] .lc-pole__signe::after { background: var(--wp--preset--color--paper); }
.lc-pole[open] .lc-pole__signe::after { transform: translate(-50%, -50%) rotate(0deg); }

.lc-pole__tete:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: -4px;
}

/* Contenu déplié : deux colonnes, alignées sous le titre. */
.lc-pole__corps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.75rem, 3vw, 3rem);
	padding: 0.5rem 0 clamp(2.25rem, 3.5vw, 3rem) calc(4.5rem + clamp(1rem, 2.5vw, 2rem));
	animation: lc-deplie 0.45s var(--lc-ease);
}

@keyframes lc-deplie {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lc-pole__corps { animation: none; }
}

.lc-pole__corps .lc-subblock { margin-bottom: 0; }

/* Avertissement réglementaire, discret, une seule fois pour la section. */
.lc-avertissement {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--lc-line-gold);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--slate);
	max-width: 86ch;
}

@media (max-width: 720px) {
	.lc-pole__tete { grid-template-columns: 2.75rem minmax(0, 1fr) 2.25rem; gap: 1rem; }
	.lc-pole__signe { width: 2.25rem; height: 2.25rem; }
	.lc-pole__corps { padding-left: 0; }
	.lc-pole__resume { font-size: 1rem; }
}

/* Le pied de page s'adapte au nombre réel de colonnes. */
.lc-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(160px, 1fr)); }

/* ==========================================================================
   56. Pôles dépliables — affordance et matière
   Le « + » ne se lisait pas comme un bouton : cercle gris, fin, sur fond
   clair. Il devient doré et cerclé, la ligne entière réagit au survol, et
   un filet doré signale le pôle ouvert.
   ========================================================================== */

.lc-pole {
	position: relative;
	isolation: isolate;
	transition: background-color 0.4s var(--lc-ease);
}

/* Nappe de survol qui s'étire depuis la gauche. */
.lc-pole__tete::before {
	content: "";
	position: absolute;
	inset: 0 0 -1px 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(241, 234, 222, 0.85) 0%, rgba(241, 234, 222, 0.25) 55%, rgba(241, 234, 222, 0) 100%);
	opacity: 0;
	transition: opacity 0.45s var(--lc-ease);
}
.lc-pole__tete:hover::before { opacity: 1; }
.lc-pole[open] .lc-pole__tete::before { opacity: 0.55; }

/* Filet doré vertical sur le pôle ouvert. */
.lc-pole::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--brass);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s var(--lc-ease);
}
.lc-pole[open]::after { transform: scaleY(1); }
.lc-pole__tete:hover .lc-pole__num,
.lc-pole[open] .lc-pole__num { color: var(--wp--preset--color--brass); }

.lc-pole__titre { transition: color 0.35s var(--lc-ease); }
.lc-pole[open] .lc-pole__titre { color: var(--wp--preset--color--ink); }

/* Le bouton : doré, cerclé, nettement plus présent. */
.lc-pole__signe {
	width: 3.25rem;
	height: 3.25rem;
	border: 1.5px solid var(--wp--preset--color--brass);
	background: rgba(217, 179, 104, 0.09);
	box-shadow: 0 0 0 0 rgba(217, 179, 104, 0.35);
	transition:
		background-color 0.4s var(--lc-ease),
		border-color 0.4s var(--lc-ease),
		box-shadow 0.4s var(--lc-ease),
		transform 0.4s var(--lc-ease);
}
.lc-pole__signe::before,
.lc-pole__signe::after {
	width: 15px;
	height: 2px;
	background: var(--lc-brass-sur-clair);
	border-radius: 2px;
}

.lc-pole__tete:hover .lc-pole__signe {
	background: var(--wp--preset--color--brass);
	border-color: var(--wp--preset--color--brass);
	transform: scale(1.06);
	box-shadow: 0 0 0 6px rgba(217, 179, 104, 0.16);
}
.lc-pole__tete:hover .lc-pole__signe::before,
.lc-pole__tete:hover .lc-pole__signe::after { background: var(--wp--preset--color--ink); }

.lc-pole[open] .lc-pole__signe {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	transform: none;
	box-shadow: none;
}
.lc-pole[open] .lc-pole__signe::before,
.lc-pole[open] .lc-pole__signe::after { background: var(--wp--preset--color--brass-light); }

/* Le trait vertical disparaît à l'ouverture : le « + » devient « − ». */
.lc-pole__signe::after { transition: transform 0.45s var(--lc-ease), background-color 0.4s var(--lc-ease); }
.lc-pole[open] .lc-pole__signe::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

/* L'ouverture est animée en JavaScript : plus d'animation d'apparition ici,
   sinon les deux se superposeraient. */
.lc-pole__corps { animation: none; }

.lc-pole__tete { padding-block: clamp(2rem, 3.4vw, 2.75rem); }
.lc-pole__tete:hover { padding-left: 1.25rem; }

@media (max-width: 720px) {
	.lc-pole__signe { width: 2.75rem; height: 2.75rem; }
	.lc-pole__signe::before, .lc-pole__signe::after { width: 13px; }
}

/* ==========================================================================
   57. Motif de fond
   Le grain photographique précédent salissait le fond. On le remplace par
   un motif géométrique : le losange de la charte, celui des puces de liste,
   répété en réseau très espacé et très pâle.
   ========================================================================== */

body::after { display: none; }

.lc-section--sand::after {
	opacity: 1;
	mix-blend-mode: normal;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%238A6620' fill-opacity='0.07'%3E%3Cpath d='M36 30l6 6-6 6-6-6z'/%3E%3Cpath d='M0 -6l6 6-6 6-6-6z'/%3E%3Cpath d='M72 -6l6 6-6 6-6-6z'/%3E%3Cpath d='M0 66l6 6-6 6-6-6z'/%3E%3Cpath d='M72 66l6 6-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 72px 72px;
}

/* Même motif, en doré pâle, sur les sections sombres. */
.lc-section--ink { position: relative; isolation: isolate; }
.lc-section--ink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23F0DCA8' fill-opacity='0.05'%3E%3Cpath d='M36 30l6 6-6 6-6-6z'/%3E%3Cpath d='M0 -6l6 6-6 6-6-6z'/%3E%3Cpath d='M72 -6l6 6-6 6-6-6z'/%3E%3Cpath d='M0 66l6 6-6 6-6-6z'/%3E%3Cpath d='M72 66l6 6-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 72px 72px;
}
.lc-section--ink > * { position: relative; z-index: 1; }

/* ==========================================================================
   58. Cartes de cabinet
   Elles n'étaient que des rectangles blancs. On ajoute un indice en
   filigrane, un filet doré qui se trace au survol, et un lien d'itinéraire.
   ========================================================================== */

.lc-offices { gap: clamp(1.5rem, 2.5vw, 2.25rem); }

.lc-office {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 3vw, 2.75rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lc-line);
	transition:
		transform 0.45s var(--lc-ease),
		box-shadow 0.45s var(--lc-ease),
		border-color 0.45s var(--lc-ease);
}

/* Filet doré qui se trace en haut de la carte. */
.lc-office::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brass), var(--wp--preset--color--brass-light));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--lc-ease);
}
.lc-office:hover::before { transform: scaleX(1); }

.lc-office:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: 0 26px 52px -28px rgba(4, 14, 27, 0.42);
}

/* Indice en filigrane dans l'angle. */
.lc-office__indice {
	position: absolute;
	top: -0.32em;
	right: 0.1em;
	font-size: clamp(5rem, 8vw, 7rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(7, 26, 47, 0.045);
	pointer-events: none;
	user-select: none;
	transition: color 0.5s var(--lc-ease);
}
.lc-office:hover .lc-office__indice { color: rgba(217, 179, 104, 0.16); }

.lc-office__city { position: relative; margin: 0 0 0.5rem; }

.lc-office__region {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
}
.lc-office__region::after {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--lc-line-gold);
}

.lc-office address { position: relative; margin-bottom: 1.75rem; }

/* Lien d'itinéraire, poussé en bas pour aligner toutes les cartes. */
.lc-office__lien {
	position: relative;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-line);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.3s var(--lc-ease), gap 0.3s var(--lc-ease);
}
.lc-office__lien svg { width: 16px; height: 16px; flex: none; color: var(--wp--preset--color--brass); }
.lc-office__lien:hover { color: var(--lc-brass-sur-clair); gap: 0.9rem; }

/* ==========================================================================
   59. Motif : trame gravée plutôt que losanges
   Les losanges dispersés lisaient comme un décor. On passe à une trame de
   lignes fines, référence au papier réglé et au papier à en-tête gravé :
   même principe de motif répété, registre nettement plus sobre.
   ========================================================================== */

.lc-section--sand::after {
	background-image:
		linear-gradient(rgba(138, 102, 32, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(138, 102, 32, 0.055) 1px, transparent 1px);
	background-size: 58px 58px, 58px 58px;
	background-position: center center;
	opacity: 1;
	-webkit-mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
	mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
}

.lc-section--ink::after {
	background-image:
		linear-gradient(rgba(240, 220, 168, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(240, 220, 168, 0.045) 1px, transparent 1px);
	background-size: 58px 58px, 58px 58px;
	background-position: center center;
	-webkit-mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
	mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
}

/* Angles légèrement adoucis sur le portrait et sa carte d'identité. */
.lc-portrait-split .lc-portrait__frame { border-radius: 10px; }
.lc-portrait-split .lc-portrait__caption { border-radius: 8px; }
.lc-office { border-radius: 8px; }

/* ==========================================================================
   60. Pôles : dégagement du filet et harmonisation des numéros
   Le filet doré du pôle ouvert venait toucher le numéro. On réserve une
   gouttière constante à gauche : rien ne se déplace à l'ouverture, et le
   filet respire.
   ========================================================================== */

.lc-pole__tete {
	padding-left: 1.75rem;
	transition:
		padding-left 0.4s var(--lc-ease),
		background-color 0.4s var(--lc-ease);
}
.lc-pole__tete:hover { padding-left: 2.5rem; }

.lc-pole__corps { padding-left: calc(1.75rem + 4.5rem + clamp(1rem, 2.5vw, 2rem)); }

/* Le filet occupe la gouttière, sans jamais chevaucher le texte. */
.lc-pole::after { width: 3px; }

/* Numéros plus présents, et de la même famille visuelle partout. */

.lc-office__region,
.lc-subblock h3,
.lc-subblock h4,
.lc-contact__aside dt,
.lc-eyebrow { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
	.lc-pole__tete { padding-left: 1.25rem; }
	.lc-pole__tete:hover { padding-left: 1.5rem; }
	.lc-pole__corps { padding-left: 1.25rem; }
}

/* ==========================================================================
   61. Bande d'infolettre
   ========================================================================== */

.lc-lettre__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.lc-lettre__texte h2 { margin-bottom: 1.25rem; }
.lc-lettre__texte p { margin: 0; max-width: 46ch; }

.lc-lettre__ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: end;
}

.lc-lettre__champ input {
	border-bottom-color: rgba(240, 220, 168, 0.4);
	color: var(--wp--preset--color--paper);
	font-size: 1.0625rem;
	padding-block: 0.9rem;
}
.lc-lettre__champ input::placeholder { color: rgba(251, 249, 245, 0.45); }
.lc-lettre__champ input:focus { border-bottom-color: var(--wp--preset--color--brass); }

.lc-lettre__consent {
	margin-top: 1.5rem;
	color: rgba(251, 249, 245, 0.62);
	font-size: 0.8125rem;
	line-height: 1.55;
}
.lc-lettre__consent a { color: var(--wp--preset--color--brass-light); border-bottom: 1px solid rgba(240, 220, 168, 0.35); }

.lc-lettre .lc-notice {
	background: rgba(240, 220, 168, 0.1);
	border-left-color: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--paper);
	margin-bottom: 1.5rem;
}
.lc-lettre .lc-notice--error { background: rgba(179, 38, 30, 0.14); border-left-color: #E4867E; }
.lc-lettre .lc-notice strong { display: block; margin-bottom: 0.2rem; }

/* Variante compacte, dans le pied de page. */
.lc-lettre__form--pied .lc-lettre__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.lc-lettre__form--pied .lc-btn { width: 100%; justify-content: center; padding-block: 1rem; }
.lc-lettre__form--pied input {
	border-bottom-color: rgba(240, 220, 168, 0.3);
	color: var(--wp--preset--color--paper);
	font-size: 1rem;
}
.lc-lettre__form--pied input::placeholder { color: rgba(251, 249, 245, 0.42); }
.lc-lettre__form--pied .lc-lettre__consent { margin-top: 1rem; font-size: 0.75rem; }

.lc-footer__lettre h2 { margin-bottom: 1rem; }

@media (max-width: 900px) {
	.lc-lettre__inner { grid-template-columns: 1fr; }
	.lc-lettre__ligne { grid-template-columns: 1fr; }
	.lc-lettre__ligne .lc-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   62. Méthode en frise
   Les colonnes séparées par des barres verticales dataient. On passe à une
   frise : une ligne continue, quatre jalons numérotés posés dessus.
   ========================================================================== */

.lc-frise {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(2rem, 3.5vw, 3rem);
	position: relative;
}

/* La ligne de la frise, derrière les jalons. */
.lc-frise::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(240, 220, 168, 0) 0%,
		rgba(240, 220, 168, 0.35) 8%,
		rgba(240, 220, 168, 0.35) 92%,
		rgba(240, 220, 168, 0) 100%);
	pointer-events: none;
}

.lc-frise__etape { position: relative; padding-right: 1rem; }

/* Le jalon : pastille pleine, posée sur la ligne. */
.lc-frise__marque {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	background: #0A2038;
	border: 1px solid rgba(240, 220, 168, 0.4);
	box-shadow: 0 0 0 6px rgba(7, 26, 47, 1);
	transition: background-color 0.4s var(--lc-ease), border-color 0.4s var(--lc-ease);
}

.lc-frise__num {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brass-light);
	font-variant-numeric: tabular-nums;
	transition: color 0.4s var(--lc-ease);
}

.lc-frise__etape:hover .lc-frise__marque {
	background: var(--wp--preset--color--brass);
	border-color: var(--wp--preset--color--brass);
}
.lc-frise__etape:hover .lc-frise__num { color: var(--wp--preset--color--ink); }

.lc-frise__etape h3 {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--paper);
}

.lc-frise__etape p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(251, 249, 245, 0.66);
	max-width: 34ch;
}

/* En colonne sur mobile : la ligne devient verticale. */
@media (max-width: 720px) {
	.lc-frise { grid-template-columns: 1fr; gap: 2.25rem; }
	.lc-frise::before {
		top: 1.5rem;
		bottom: 1.5rem;
		left: 1.5rem;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg,
			rgba(240, 220, 168, 0) 0%,
			rgba(240, 220, 168, 0.35) 6%,
			rgba(240, 220, 168, 0.35) 94%,
			rgba(240, 220, 168, 0) 100%);
	}
	.lc-frise__etape { padding-left: 4.25rem; padding-right: 0; }
	.lc-frise__marque { position: absolute; left: 0; top: 0; margin: 0; }
	.lc-frise__etape p { max-width: none; }
}

/* ==========================================================================
   63. Formulaire de contact posé sur un panneau
   Il flottait sur le fond de page, sans limite visible. Il devient une
   carte, dans la même famille que les cartes de cabinet.
   ========================================================================== */

.lc-contact .lc-form-wrap {
	position: relative;
	padding: clamp(2rem, 3.5vw, 3rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lc-line);
	border-radius: 10px;
	box-shadow: 0 30px 64px -36px rgba(4, 14, 27, 0.4);
}

/* Filet doré en tête du panneau, comme sur les cartes de cabinet. */
.lc-contact .lc-form-wrap::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(90deg, var(--wp--preset--color--brass), var(--wp--preset--color--brass-light));
}

/* La section passe sur fond sable pour que le panneau blanc se détache. */
.lc-contact { align-items: stretch; }
.lc-contact__aside { align-self: center; }

.lc-section--contact { background: var(--wp--preset--color--sand); }

.lc-contact .lc-notice { border-radius: 6px; }

@media (max-width: 900px) {
	.lc-contact .lc-form-wrap { padding: clamp(1.5rem, 5vw, 2rem); }
}

/* Signature sous le texte de l'infolettre. */
.lc-lettre__signature {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
	padding-top: clamp(1.5rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(240, 220, 168, 0.18);
}

.lc-lettre__visage {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--ink-soft);
	box-shadow: 0 0 0 1px rgba(240, 220, 168, 0.4);
}
.lc-lettre__visage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
}

.lc-lettre__signataire { display: flex; flex-direction: column; gap: 0.15rem; }
.lc-lettre__signataire strong {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--paper);
}
.lc-lettre__signataire > span {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

/* Le filet au-dessus de la signature alourdissait le bloc : la signature
   se distingue déjà par la photo et l'espacement. */
.lc-lettre__signature {
	border-top: 0;
	padding-top: 0;
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

/* La règle « .lc-lettre__texte p { margin: 0 } » écrasait la marge de la
   signature, qui se retrouvait collée au paragraphe. */
.lc-lettre__texte p.lc-lettre__signature {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 0;
}

/* ==========================================================================
   64. Bandeau de chiffres — harmonisé avec le reste du site
   Les barres verticales reprenaient le motif qu'on a justement retiré de la
   section « méthode ». On passe au filet doré horizontal, celui des
   surtitres, posé au-dessus de chaque chiffre.
   ========================================================================== */

.lc-figure { padding-left: 0; padding-top: 2rem; }

/* Plus de séparateur vertical : un filet en tête, qui se trace. */
.lc-figure::before {
	top: 0;
	left: 0;
	bottom: auto;
	width: 3.25rem;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--brass), rgba(217, 179, 104, 0));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s var(--lc-ease) calc(var(--i, 0) * 110ms + 150ms);
}
.lc-figures.is-visible .lc-figure::before { transform: scaleX(1); }
.lc-figures:not(.lc-figures--anim) .lc-figure::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.lc-figure::before { transform: scaleX(1); transition: none; }
}

.lc-figures__inner--trois { gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (max-width: 700px) {
	.lc-figure { padding-top: 1.75rem; }
}

/* ==========================================================================
   65. Bandeau de chiffres — à plat
   Plus de dégradé nulle part : fond uni, or uni, filet uni. Seule la trame
   gravée reste, la même que sur les autres sections.
   ========================================================================== */

.lc-figures {
	background-color: var(--wp--preset--color--ink);
	background-image: none;
	position: relative;
	isolation: isolate;
}

/* Trame gravée, identique aux sections sombres. */
.lc-figures::before {
	content: "";
	position: absolute;
	inset: 0;
	top: 0;
	z-index: -1;
	height: auto;
	background:
		linear-gradient(rgba(240, 220, 168, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(240, 220, 168, 0.045) 1px, transparent 1px);
	background-size: 58px 58px, 58px 58px;
	background-position: center center;
	-webkit-mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
	mask-image: radial-gradient(115% 95% at 50% 50%, #000 55%, transparent 100%);
	pointer-events: none;
}
.lc-figures::after { display: none; }

.lc-figures__inner { position: relative; z-index: 1; }

/* Chiffres en or uni, sans dégradé appliqué au texte. */
.lc-figure strong {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: var(--wp--preset--color--brass-light);
	-webkit-text-fill-color: var(--wp--preset--color--brass-light);
}

/* Filet de tête en or uni. */
.lc-figure::before { background: var(--wp--preset--color--brass); }

/* ==========================================================================
   66. Pôles en cartes
   Les lignes séparées par des filets restaient des lignes de liste. Chaque
   pôle devient une carte, avec le vocabulaire déjà en place sur les cartes
   de cabinet : indice en filigrane, filet doré qui se trace, relief au
   survol. L'ouverture se fait à l'intérieur de la carte.
   ========================================================================== */

.lc-poles {
	border-top: 0;
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.35rem);
}

.lc-pole {
	border: 1px solid var(--lc-line);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
	transition:
		transform 0.45s var(--lc-ease),
		box-shadow 0.45s var(--lc-ease),
		border-color 0.45s var(--lc-ease);
}
.lc-pole:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(4, 14, 27, 0.38); }
.lc-pole[open] { transform: none; box-shadow: 0 24px 56px -32px rgba(4, 14, 27, 0.34); }

/* Filet doré en tête de carte, comme sur les cabinets. */
.lc-pole::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	width: auto;
	height: 3px;
	background: var(--wp--preset--color--brass);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--lc-ease);
	z-index: 2;
}
.lc-pole:hover::after,
.lc-pole[open]::after { transform: scaleX(1); }

/* La nappe de survol n'a plus lieu d'être : la carte porte l'état. */
.lc-pole__tete::before { display: none; }

.lc-pole__tete {
	grid-template-columns: auto minmax(0, 1fr) 3.25rem;
	gap: clamp(1.25rem, 2.2vw, 1.75rem);
	padding: clamp(1.75rem, 2.8vw, 2.25rem) clamp(1.75rem, 2.8vw, 2.25rem);
}
.lc-pole__tete:hover { padding-left: clamp(1.75rem, 2.8vw, 2.25rem); }

/* Icône dans un carré cerclé d'or. */
.lc-pole__icone {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	flex: none;
	border: 1px solid var(--lc-line-gold);
	border-radius: 8px;
	color: var(--lc-brass-sur-clair);
	background: rgba(217, 179, 104, 0.07);
	transition: background-color 0.4s var(--lc-ease), color 0.4s var(--lc-ease), border-color 0.4s var(--lc-ease);
}
.lc-pole__icone svg { width: 22px; height: 22px; }
.lc-pole:hover .lc-pole__icone,
.lc-pole[open] .lc-pole__icone {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--brass-light);
}

/* Indice en filigrane dans l'angle, comme sur les cartes de cabinet. */
.lc-pole__indice {
	position: absolute;
	top: -0.3em;
	right: 0.12em;
	font-size: clamp(4.5rem, 7vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(7, 26, 47, 0.04);
	pointer-events: none;
	user-select: none;
	transition: color 0.5s var(--lc-ease);
	z-index: 0;
}
.lc-pole:hover .lc-pole__indice,
.lc-pole[open] .lc-pole__indice { color: rgba(217, 179, 104, 0.15); }

.lc-pole__texte { position: relative; z-index: 1; }
.lc-pole__signe { position: relative; z-index: 1; width: 2.875rem; height: 2.875rem; }
.lc-pole__signe::before, .lc-pole__signe::after { width: 14px; }

/* Contenu déplié : aligné sur le texte, séparé par un filet. */
.lc-pole__corps {
	position: relative;
	z-index: 1;
	padding: 0 clamp(1.75rem, 2.8vw, 2.25rem) clamp(2rem, 3vw, 2.5rem);
	margin-left: calc(3.25rem + clamp(1.25rem, 2.2vw, 1.75rem));
	padding-left: 0;
	margin-right: clamp(1.75rem, 2.8vw, 2.25rem);
	padding-right: 0;
}
.lc-pole__corps::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--lc-line);
	margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}

@media (max-width: 720px) {
	.lc-pole__tete {
		grid-template-columns: auto minmax(0, 1fr) 2.5rem;
		gap: 1rem;
		padding: 1.5rem 1.25rem;
	}
	.lc-pole__tete:hover { padding-left: 1.25rem; }
	.lc-pole__icone { width: 2.75rem; height: 2.75rem; }
	.lc-pole__icone svg { width: 19px; height: 19px; }
	.lc-pole__signe { width: 2.5rem; height: 2.5rem; }
	.lc-pole__corps { margin-left: 1.25rem; margin-right: 1.25rem; padding: 0 0 1.75rem; }
}

/* ==========================================================================
   67. Navigation : un caractère à part
   Bricolage Grotesque, déjà présente dans le thème, apporte du tempérament
   sans introduire un nouveau téléchargement — elle n'est chargée que pour
   ces quelques mots.
   ========================================================================== */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/bricolage.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

.lc-nav a {
	font-family: "Bricolage Grotesque", var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0;
}

.lc-header__cta {
	font-family: "Bricolage Grotesque", var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: -0.012em;
	font-variant-ligatures: none;
}

/* ==========================================================================
   68. Titres des étapes
   Écouter, Analyser, Proposer, Suivre : ce sont les mots qui portent la
   méthode. Ils passent en Bricolage Grotesque, plus grands, pour devenir
   le point d'accroche de la frise.
   ========================================================================== */

.lc-frise__etape h3 {
	font-family: "Bricolage Grotesque", var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 2.2vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin-bottom: 0.9rem;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0;
	font-variation-settings: normal;
}

/* Le numéro du jalon suit le même caractère. */
.lc-frise__num {
	font-family: "Bricolage Grotesque", var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (max-width: 720px) {
	.lc-frise__etape h3 { font-size: 1.5rem; }
}

/* ==========================================================================
   69. Frise : respiration et verbes en or
   ========================================================================== */

.lc-frise { margin-top: clamp(2rem, 4vw, 3.5rem); }

.lc-frise__etape h3 {
	font-size: clamp(1.875rem, 2.6vw, 2.375rem);
	color: var(--wp--preset--color--brass-light);
}

@media (max-width: 720px) {
	.lc-frise__etape h3 { font-size: 1.75rem; }
	.lc-frise { margin-top: 2rem; }
}

/* Le chapeau de la section « méthode » a été retiré : le titre occupe
   désormais toute la largeur de l'en-tête de section. */
#methode .lc-section-head { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   70. RESPONSIVE — bloc consolidé, volontairement en fin de feuille
   Les règles mobile écrites au fil de l'eau se faisaient écraser par les
   règles de bureau déclarées plus bas (même spécificité, ordre de cascade).
   Tout le comportement adaptatif est donc regroupé ici, en dernier.
   ========================================================================== */

@media (max-width: 900px) {

	/* --- Mises en page à deux colonnes : tout passe en une seule. --- */
	.lc-portrait-split,
	.lc-contact,
	.lc-lettre__inner,
	.lc-section-head {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 6vw, 2.75rem);
	}

	.lc-section-head { align-items: start; margin-bottom: 2.5rem; }

	/* --- Portrait et carte d'identité --- */
	.lc-portrait-split .lc-portrait {
		max-width: 420px;
		margin-inline: auto;
		width: 100%;
	}
	.lc-portrait-split .lc-portrait__caption {
		margin-left: 1.25rem;
		margin-right: 1.25rem;
		text-align: left;
	}

	/* --- Infolettre --- */
	.lc-lettre__ligne { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.lc-lettre__ligne .lc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {

	/* --- Héros --- */
	.lc-hero { min-height: auto; padding: 7.5rem 0 5.5rem; }
	.lc-hero__title { font-size: clamp(2.25rem, 10vw, 3rem); max-width: 100%; }
	.lc-hero__lead { font-size: 1.0625rem; max-width: 100%; }

	/* Les filets de part et d'autre du surtitre n'ont plus de sens dès que
	   celui-ci passe sur plusieurs lignes. */
	.lc-eyebrow.is-centered::before,
	.lc-eyebrow.is-centered::after { display: none; }
	.lc-eyebrow.is-centered { font-size: 0.6875rem; letter-spacing: 0.14em; justify-content: center; }

	/* L'invite de défilement chevauchait le second bouton. */
	.lc-hero__scroll { position: static; transform: none; margin-top: 2.5rem; }
	.lc-hero__actions { margin-bottom: 0; }

	/* --- Sections --- */
	.lc-section { padding-block: clamp(3.5rem, 11vw, 5rem); }
	.lc-h2 { font-size: clamp(1.875rem, 8vw, 2.375rem); max-width: 100%; }
	.lc-lead { font-size: 1.0625rem; max-width: 100%; }

	/* --- Pôles --- */
	.lc-pole__tete {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "icone signe" "texte texte";
		gap: 1rem;
		padding: 1.5rem 1.25rem;
		align-items: center;
	}
	.lc-pole__icone { grid-area: icone; }
	.lc-pole__signe { grid-area: signe; justify-self: end; }
	.lc-pole__texte { grid-area: texte; }
	.lc-pole__titre { font-size: 1.5rem; }
	.lc-pole__resume { font-size: 1rem; }
	.lc-pole__corps { margin-left: 1.25rem; margin-right: 1.25rem; padding: 0 0 1.75rem; }
	.lc-pole__indice { font-size: 4.5rem; }

	/* --- Frise --- */
	.lc-frise { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2.5rem; }
	.lc-frise::before {
		top: 1.5rem;
		bottom: 1.5rem;
		left: 1.5rem;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, rgba(240,220,168,0) 0%, rgba(240,220,168,0.35) 6%, rgba(240,220,168,0.35) 94%, rgba(240,220,168,0) 100%);
	}
	.lc-frise__etape { padding-left: 4.5rem; padding-right: 0; }
	.lc-frise__marque { position: absolute; left: 0; top: 0; margin: 0; }
	.lc-frise__etape h3 { font-size: 1.625rem; }
	.lc-frise__etape p { max-width: none; }

	/* --- Chiffres --- */
	.lc-figures__inner,
	.lc-figures__inner--trois { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.lc-figure { padding-top: 1.5rem; }
	.lc-figure strong { font-size: 2.25rem; }

	/* --- Cabinets --- */
	.lc-offices { grid-template-columns: minmax(0, 1fr); }

	/* --- Contact --- */
	.lc-contact .lc-form-wrap { padding: 1.5rem 1.25rem; }
	.lc-form__row { grid-template-columns: minmax(0, 1fr); }

	/* --- Pied de page --- */
	.lc-footer__top { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.lc-footer__legal-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.lc-hero__title { font-size: clamp(2rem, 11vw, 2.5rem); }
	.lc-btn { width: 100%; justify-content: center; }
	.lc-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.lc-portrait-split .lc-portrait__caption { margin-inline: 0.75rem; }
	.lc-pole__indice { display: none; }
}

/* ==========================================================================
   71. Menu mobile
   Les liens avaient gardé leur corps de bureau : une règle tardive écrasait
   celle du plein écran. On redéclare ici, après tout le reste, et on ajoute
   le téléphone et le bouton de rendez-vous — invisibles ailleurs sur mobile.
   ========================================================================== */

.lc-nav__contact { display: none; }

@media (max-width: 980px) {

	.lc-nav {
		display: grid;
		place-items: center;
		align-content: center;
		gap: 0;
		/* Marges resserrées : avec 5rem en haut et 3rem en bas, le contenu
		   dépassait de 4 px sur un écran courant et le menu affichait sa propre
		   barre de défilement à côté de celle de la page. */
		padding: 4rem 1.5rem 2.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.lc-nav ul {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
		margin: 0 0 2.75rem;
	}

	.lc-nav a {
		font-family: "Bricolage Grotesque", var(--wp--preset--font-family--display);
		font-size: 1.875rem;
		font-weight: 600;
		letter-spacing: -0.035em;
		color: var(--wp--preset--color--paper);
		opacity: 1;
		padding-block: 0.3rem;
	}
	.lc-nav a::after { display: none; }
	.lc-nav a.is-active { color: var(--wp--preset--color--brass-light); }

	/* Téléphone et rendez-vous, repris dans le plein écran. */
	.lc-nav__contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		width: min(100%, 320px);
		padding-top: 2.25rem;
		border-top: 1px solid rgba(240, 220, 168, 0.18);
	}

	.lc-nav__tel {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--wp--preset--color--brass-light);
		text-decoration: none;
	}
	.lc-nav__tel svg { width: 17px; height: 17px; color: var(--wp--preset--color--brass); }

	/* « justify-content » ne s'appliquait à rien : le bouton est un <a>, donc
	   affiché en bloc. Le libellé partait du bord gauche et débordait à droite.
	   On le passe en flex centré, et on réduit la marge intérieure horizontale
	   pour que « Prendre rendez-vous » tienne dans les 320 px de la colonne. */
	.lc-nav__contact .lc-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-inline: 1.25rem;
	}

	.lc-nav__close {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		border-color: rgba(240, 220, 168, 0.3);
		color: var(--wp--preset--color--brass-light);
		font-size: 1.5rem;
		line-height: 1;
	}
}

@media (max-width: 400px) {
	.lc-nav a { font-size: 1.625rem; }
	.lc-nav ul { gap: 1.25rem; }
}

/* ==========================================================================
   72. Frise : jalons nettement agrandis
   Les numéros deviennent les points d'ancrage visuels de la frise. La ligne
   est repositionnée pour rester centrée sur les pastilles.
   ========================================================================== */

.lc-frise__marque {
	width: 5.5rem;
	height: 5.5rem;
	margin-bottom: 1.75rem;
	border-width: 1.5px;
	box-shadow: 0 0 0 8px rgba(7, 26, 47, 1);
}

.lc-frise__num {
	font-size: 2.375rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* La ligne passe au centre des nouvelles pastilles. */
.lc-frise::before { top: 2.75rem; left: 2.75rem; right: 2.75rem; }

@media (max-width: 720px) {
	.lc-frise__marque { width: 4.5rem; height: 4.5rem; }
	.lc-frise__num { font-size: 1.875rem; }
	.lc-frise::before { top: 2.25rem; bottom: 2.25rem; left: 2.25rem; right: auto; }
	.lc-frise__etape { padding-left: 6rem; }
}

/* Les indices en filigrane étaient trop pâles pour se lire. */
.lc-office__indice { color: rgba(7, 26, 47, 0.1); }
.lc-office:hover .lc-office__indice { color: rgba(176, 138, 74, 0.26); }

.lc-pole__indice { color: rgba(7, 26, 47, 0.09); }
.lc-pole:hover .lc-pole__indice,
.lc-pole[open] .lc-pole__indice { color: rgba(176, 138, 74, 0.24); }

/* ==========================================================================
   73. Numérotation en Bricolage Grotesque
   Les indices en filigrane reprennent le caractère des jalons de la frise :
   une seule famille pour toute la numérotation du site. Elle est déjà
   chargée pour la navigation et les étapes, donc aucun poids supplémentaire.
   ========================================================================== */

.lc-office__indice,
.lc-pole__indice {
	font-family: "Bricolage Grotesque", var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: -0.045em;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0;
	font-variation-settings: normal;
}

/* Les intertitres des pôles sont passés de h4 à h3 pour rétablir la
   hiérarchie des titres (un saut h2 → h4 gênait les lecteurs d'écran).
   Leur apparence ne change pas. */
.lc-subblock h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lc-line);
}

/* ==========================================================================
   74. Barre de défilement
   Rail bleu nuit, curseur or : les deux couleurs de l'identité, posées une
   fois pour toutes. Aucun état au survol ni au clic — un changement de
   couleur pendant qu'on fait défiler attire l'œil sur l'accessoire au moment
   précis où il devrait être sur le contenu.

   Deux syntaxes coexistent. Firefox ne connaît que la propriété standard
   « scrollbar-color » ; Chrome, Edge et Safari passent par les pseudo-éléments
   ::-webkit-scrollbar. Depuis Chrome 121, voir « scrollbar-color » suffit à
   lui faire abandonner les pseudo-éléments : on la réserve donc aux
   navigateurs qui les ignorent.
   ========================================================================== */

@supports not selector(::-webkit-scrollbar) {
	:root {
		scrollbar-color: var(--wp--preset--color--brass) var(--wp--preset--color--ink);
		scrollbar-width: thin;
	}
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background-color: var(--wp--preset--color--ink);
}

::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--brass);
	border-radius: 999px;
	/* La bordure transparente laisse voir le rail de part et d'autre : le
	   curseur paraît plus fin que sa zone de préhension, qui reste confortable
	   à attraper. */
	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background-color: var(--wp--preset--color--ink);
}

/* Sur écran tactile la barre n'est qu'un repère de position : elle s'efface. */
@media (hover: none) {
	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-thumb {
		border-width: 1px;
	}
}

/* ==========================================================================
   75. Menu mobile — correction du bloc conteneur
   Une fois la page défilée, « .lc-header.is-stuck » applique un
   backdrop-filter. Cette propriété crée un bloc conteneur pour ses
   descendants en position fixed : la navigation plein écran, pourtant en
   « inset: 0 », se retrouvait bornée à la hauteur de l'en-tête — on ne voyait
   plus que les deux premiers liens, coupés.

   Tant que le menu est ouvert, on neutralise donc le flou. L'en-tête est de
   toute façon recouvert par la nav à ce moment-là : la différence ne se voit
   pas, et le menu retrouve l'écran entier.
   ========================================================================== */

.lc-menu-ouvert .lc-header,
.lc-menu-ouvert .lc-header.is-stuck {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	filter: none;
}

@media (max-width: 980px) {
	/* Sur un écran court, un contenu centré déborde des deux côtés à la fois
	   et le haut devient inatteignable au défilement. « safe » bascule
	   l'alignement en début de zone dès que le contenu ne tient plus. */
	.lc-nav {
		align-content: safe center;
	}
}

/* Deux barres de défilement apparaissaient à l'ouverture du menu : celle de la
   page, qui reste affichée parce qu'un « overflow: hidden » posé sur le body
   ne suffit pas à la faire disparaître ici, et celle du menu lui-même. On
   verrouille donc aussi la racine du document.

   « scrollbar-gutter: stable » réserve en permanence la largeur de la barre :
   sans cela, la faire disparaître décalerait toute la page de 12 px au moment
   de l'ouverture. */
html {
	scrollbar-gutter: stable;
}

html.lc-menu-ouvert {
	overflow: hidden;
}