/* =============================================================================
   HLSEO — main.css
   Direction L'Ingénieur · Bi-chromie cobalt + minium
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
	/* Couleurs */
	--c-creme:        #f5f3ee;
	--c-creme-warm:   #ece8dd;
	--c-encre:        #1a1a1a;
	--c-encre-50:     #3a3a3a;
	--c-encre-30:     #6b6b6b;
	--c-cobalt:       #2563eb;
	--c-cobalt-soft:  rgba(37, 99, 235, 0.08);
	--c-minium:       #ea580c;
	--c-minium-soft:  rgba(234, 88, 12, 0.08);
	--c-ligne:        rgba(26, 26, 26, 0.12);
	--c-ligne-faible: rgba(26, 26, 26, 0.05);
	--c-blanc:        rgba(255, 255, 255, 0.55);

	/* Polices */
	--ff-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ff-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

	/* Tailles */
	--fs-mono:   0.6875rem;
	--fs-small:  0.8125rem;
	--fs-base:   1rem;
	--fs-large:  1.125rem;
	--fs-h3:     1.375rem;
	--fs-h2:     1.875rem;
	--fs-h1:     2.625rem;
	--fs-hero:   clamp(2rem, 1.4rem + 2.5vw, 3.25rem);

	/* Espacements */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 2.5rem;
	--sp-6: 3rem;
	--sp-7: 4rem;
	--sp-8: 5rem;

	/* Layout */
	--container:      1080px;
	--container-prose: 720px;
	--gutter:          clamp(1.25rem, 2vw, 2rem);

	/* Bordures & rayons */
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 8px;

	/* Grille de fond */
	--grid-size: 28px;
}

/* -------------------------------------------------------------------------
   2. RESET MINIMAL
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: none; border-top: 0.5px solid var(--c-ligne); }
::selection { background: var(--c-cobalt); color: var(--c-creme); }

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
body {
	background: var(--c-creme);
	color: var(--c-encre);
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-serif);
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--c-encre);
	margin: 0 0 0.5em;
}

h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-large); line-height: 1.4; }

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

a {
	color: var(--c-cobalt);
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 3px;
	transition: color 0.12s ease;
}
a:hover { color: var(--c-encre); }

em, i { font-style: italic; }
strong, b { font-weight: 500; }

blockquote {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.1875rem;
	line-height: 1.45;
	margin: 1.5em 0;
	padding-left: 1.125rem;
	border-left: 2px solid var(--c-encre);
}

code, pre, kbd {
	font-family: var(--ff-mono);
	font-size: 0.875em;
}

/* -------------------------------------------------------------------------
   4. LAYOUT — conteneurs & grille de fond
   ------------------------------------------------------------------------- */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--prose {
	max-width: var(--container-prose);
}

/* Grille de fond signature : visible sous tout le contenu, n'interfère pas
   avec les clics car positionnée en background-image. */
body {
	background-image:
		linear-gradient(var(--c-ligne-faible) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-ligne-faible) 1px, transparent 1px);
	background-size: var(--grid-size) var(--grid-size);
	background-position: 0 0;
	background-attachment: fixed;
}

/* -------------------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-creme);
	border-bottom: 0.5px solid var(--c-ligne);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(245, 243, 238, 0.92);
}

.site-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.125rem 0;
}

.hlseo-wordmark-link {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
}
.hlseo-wordmark-link:hover { color: inherit; }

.hlseo-wordmark {
	font-family: var(--ff-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--c-encre);
	text-decoration: none;
}
.hlseo-wordmark.is-large {
	font-size: 1.625rem;
}
.hlseo-wordmark__dot {
	color: var(--c-cobalt);
}
.hlseo-wordmark:hover { color: var(--c-encre); }

.site-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.site-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 1.375rem;
}
.site-nav a {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	color: var(--c-encre-50);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--c-cobalt);
}

/* -------------------------------------------------------------------------
   6. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--sp-7);
	border-top: 0.5px solid var(--c-ligne);
	background: var(--c-creme);
}
.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.875rem 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	color: var(--c-encre-30);
	flex-wrap: wrap;
	gap: 0.5rem;
}
.site-footer__nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 1.25rem;
}
.site-footer__nav a {
	color: var(--c-encre-30);
	text-decoration: none;
}
.site-footer__nav a:hover { color: var(--c-cobalt); }

/* -------------------------------------------------------------------------
   7. BREADCRUMB
   ------------------------------------------------------------------------- */
.breadcrumb {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	color: var(--c-encre-30);
	padding: 0.75rem 0;
	border-bottom: 0.5px solid var(--c-ligne-faible);
}
.breadcrumb a {
	color: var(--c-encre-30);
	text-decoration: none;
}
.breadcrumb a:hover { color: var(--c-cobalt); }
.breadcrumb__current { color: var(--c-encre); }

/* -------------------------------------------------------------------------
   8. COMPOSANTS — labels mono "cotation"
   ------------------------------------------------------------------------- */
.hlseo-cotation {
	display: inline-block;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	color: var(--c-cobalt);
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.hlseo-cotation--minium { color: var(--c-minium); }

.hlseo-section-number {
	display: inline-block;
	font-family: var(--ff-mono);
	font-size: 0.75rem;
	color: var(--c-cobalt);
	margin-right: 0.5rem;
	vertical-align: 4px;
}

/* -------------------------------------------------------------------------
   9. BOUTONS & CTA
   ------------------------------------------------------------------------- */
.hlseo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6875rem 1rem;
	font-family: var(--ff-mono);
	font-size: var(--fs-small);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: transform 0.12s ease, background 0.12s ease;
	border: 0.5px solid transparent;
	letter-spacing: 0.005em;
}
.hlseo-btn:hover { transform: translateY(-1px); }
.hlseo-btn:active { transform: translateY(0); }

.hlseo-btn--primary {
	background: var(--c-cobalt);
	color: var(--c-creme);
}
.hlseo-btn--primary:hover {
	background: #1d4ed8;
	color: var(--c-creme);
}

.hlseo-btn--dark {
	background: var(--c-encre);
	color: var(--c-creme);
}
.hlseo-btn--dark:hover {
	background: #2a2a2a;
	color: var(--c-creme);
}

.hlseo-btn--ghost {
	border: 0.5px solid var(--c-encre);
	color: var(--c-encre);
	background: transparent;
}
.hlseo-btn--ghost:hover {
	background: var(--c-encre);
	color: var(--c-creme);
}

/* -------------------------------------------------------------------------
   10. FORMULAIRES
   ------------------------------------------------------------------------- */
.hlseo-form {
	display: grid;
	gap: 0.875rem;
}

.hlseo-field label,
.hlseo-field__label {
	display: block;
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-cobalt);
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}

.hlseo-field input[type="text"],
.hlseo-field input[type="email"],
.hlseo-field input[type="url"],
.hlseo-field input[type="tel"],
.hlseo-field select,
.hlseo-field textarea {
	width: 100%;
	background: var(--c-blanc);
	border: 0.5px solid rgba(26, 26, 26, 0.25);
	border-radius: var(--radius-sm);
	padding: 0.625rem 0.75rem;
	color: var(--c-encre);
	font-size: var(--fs-small);
	font-family: var(--ff-sans);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.hlseo-field input:focus,
.hlseo-field select:focus,
.hlseo-field textarea:focus {
	outline: none;
	border-color: var(--c-cobalt);
	box-shadow: 0 0 0 2px var(--c-cobalt-soft);
}
.hlseo-field--mono input { font-family: var(--ff-mono); }
.hlseo-field textarea { resize: vertical; min-height: 6.5rem; }

.hlseo-field__chips {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.hlseo-chip {
	display: inline-block;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	padding: 0.4375rem 0.6875rem;
	border: 0.5px solid rgba(26, 26, 26, 0.25);
	border-radius: var(--radius-sm);
	color: var(--c-encre-50);
	background: transparent;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hlseo-chip:hover { border-color: var(--c-cobalt); color: var(--c-cobalt); }
.hlseo-chip.is-active,
.hlseo-chip[aria-pressed="true"] {
	background: var(--c-cobalt-soft);
	border-color: var(--c-cobalt);
	color: var(--c-cobalt);
}

/* -------------------------------------------------------------------------
   11. PATTERN — HERO
   ------------------------------------------------------------------------- */
.hlseo-hero {
	padding: var(--sp-6) 0 var(--sp-5);
}
.hlseo-hero__title {
	font-size: var(--fs-hero);
	line-height: 1.08;
	margin: 0 0 1rem;
	max-width: 18ch;
}
.hlseo-hero__title em {
	font-style: italic;
	font-weight: 400;
}
.hlseo-hero__lede {
	font-family: var(--ff-sans);
	font-size: var(--fs-large);
	line-height: 1.6;
	color: var(--c-encre-50);
	max-width: 52ch;
	margin: 0 0 1.75rem;
}
.hlseo-hero__cta {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.hlseo-hero--two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
}
@media (max-width: 760px) {
	.hlseo-hero--two-col { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   12. PATTERN — FICHE / SPECIFICATIONS
   ------------------------------------------------------------------------- */
.hlseo-fiche {
	background: var(--c-blanc);
	border: 0.5px solid rgba(26, 26, 26, 0.15);
	border-radius: var(--radius-md);
	padding: 1rem;
}
.hlseo-fiche__label {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-cobalt);
	letter-spacing: 0.04em;
	margin-bottom: 0.875rem;
}
.hlseo-fiche dl {
	margin: 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	line-height: 1.7;
	color: var(--c-encre);
}
.hlseo-fiche dt {
	color: var(--c-encre-30);
	margin-bottom: 0.0625rem;
}
.hlseo-fiche dd {
	margin: 0 0 0.625rem;
}
.hlseo-fiche dd:last-child { margin-bottom: 0; }
.hlseo-fiche dd em {
	color: var(--c-encre-30);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   13. PATTERN — DISPONIBILITÉ (avec point pulsé minium)
   ------------------------------------------------------------------------- */
.hlseo-dispo {
	background: var(--c-minium-soft);
	border: 0.5px solid var(--c-minium);
	border-radius: var(--radius-md);
	padding: 0.75rem;
}
.hlseo-dispo__label {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-minium);
	letter-spacing: 0.04em;
	margin-bottom: 0.375rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.hlseo-dispo__title {
	font-family: var(--ff-serif);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--c-encre);
	margin-bottom: 0.25rem;
}
.hlseo-dispo__desc {
	font-size: 0.6875rem;
	color: var(--c-encre-50);
	line-height: 1.4;
}

/* Point pulsé réutilisable */
.hlseo-pulse {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--c-minium);
	box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
	animation: hlseo-pulse 2.4s ease-in-out infinite;
}
.hlseo-pulse--cobalt {
	background: var(--c-cobalt);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
@keyframes hlseo-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }
	50%      { box-shadow: 0 0 0 5px rgba(234, 88, 12, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
	.hlseo-pulse { animation: none; }
}

/* -------------------------------------------------------------------------
   14. PATTERN — TIMELINE / PARCOURS
   ------------------------------------------------------------------------- */
.hlseo-timeline {
	position: relative;
	padding-left: 1.125rem;
}
.hlseo-timeline::before {
	content: '';
	position: absolute;
	left: 0.25rem;
	top: 0.375rem;
	bottom: 0.375rem;
	width: 0.5px;
	background: rgba(26, 26, 26, 0.2);
	border-left: 0.5px dashed var(--c-encre);
}
.hlseo-timeline__item {
	position: relative;
	margin-bottom: 0.875rem;
}
.hlseo-timeline__item:last-child { margin-bottom: 0; }
.hlseo-timeline__dot {
	position: absolute;
	left: -1.125rem;
	top: 0.3125rem;
	width: 9px; height: 9px;
	border: 1.5px solid var(--c-cobalt);
	background: var(--c-creme);
	border-radius: 50%;
}
.hlseo-timeline__item--present .hlseo-timeline__dot {
	width: 11px; height: 11px;
	left: -1.1875rem;
	border: none;
	background: var(--c-minium);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.18);
}
.hlseo-timeline__date {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	color: var(--c-cobalt);
}
.hlseo-timeline__item--present .hlseo-timeline__date {
	color: var(--c-minium);
	font-weight: 500;
}
.hlseo-timeline__title {
	font-family: var(--ff-serif);
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}
.hlseo-timeline__meta {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 0.75rem;
	color: var(--c-encre-50);
}

/* -------------------------------------------------------------------------
   15. PATTERN — CARTE CHANTIER
   ------------------------------------------------------------------------- */
.hlseo-chantier {
	background: var(--c-blanc);
	border: 0.5px solid rgba(26, 26, 26, 0.15);
	border-radius: var(--radius-md);
	padding: 1rem;
	transition: border-color 0.15s ease, transform 0.15s ease;
	text-decoration: none;
	color: inherit;
	display: block;
}
.hlseo-chantier:hover {
	border-color: rgba(26, 26, 26, 0.4);
	transform: translateY(-1px);
	color: inherit;
}

.hlseo-chantier__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.625rem;
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
}
.hlseo-chantier__ref {
	color: var(--c-cobalt);
}
.hlseo-chantier--studio .hlseo-chantier__ref {
	color: var(--c-minium);
}
.hlseo-chantier__date {
	color: var(--c-encre-30);
}

.hlseo-chantier__title {
	font-family: var(--ff-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	margin: 0 0 0.25rem;
}
.hlseo-chantier__sub {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: var(--fs-small);
	color: var(--c-encre-50);
	margin-bottom: 0.875rem;
}

.hlseo-chantier__metrics {
	display: flex;
	gap: 0.875rem;
	padding-top: 0.625rem;
	border-top: 0.5px dashed rgba(26, 26, 26, 0.18);
}
.hlseo-chantier__metric {
	flex: 0 0 auto;
}
.hlseo-chantier__metric-value {
	font-family: var(--ff-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1;
}
.hlseo-chantier__metric-value sup,
.hlseo-chantier__metric-value .unit {
	color: var(--c-cobalt);
	font-size: 0.8125rem;
}
.hlseo-chantier__metric-label {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-encre-30);
	margin-top: 0.125rem;
}

/* Variante anonyme : ajoute un fond rayé subtil pour signaler le statut */
.hlseo-chantier--anonyme .hlseo-chantier__title {
	font-style: italic;
	color: var(--c-encre-50);
}
.hlseo-chantier--anonyme::after {
	content: '';
	display: block;
	margin-top: 0.625rem;
	height: 0.5px;
	background-image: repeating-linear-gradient(45deg, var(--c-ligne), var(--c-ligne) 2px, transparent 2px, transparent 4px);
}

/* -------------------------------------------------------------------------
   16. PATTERN — TABLEAU TARIFS
   ------------------------------------------------------------------------- */
.hlseo-tarifs {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
}
.hlseo-tarifs thead {
	color: var(--c-encre-30);
	border-bottom: 0.5px solid rgba(26, 26, 26, 0.2);
}
.hlseo-tarifs th {
	text-align: left;
	padding: 0.5rem 0;
	font-weight: 400;
}
.hlseo-tarifs th:last-child { text-align: right; }
.hlseo-tarifs td {
	padding: 0.625rem 0;
	border-bottom: 0.5px solid rgba(26, 26, 26, 0.08);
	color: var(--c-encre);
}
.hlseo-tarifs tr:last-child td { border-bottom: none; }
.hlseo-tarifs td:first-child { color: var(--c-cobalt); width: 60px; }
.hlseo-tarifs td:nth-child(2) {
	font-family: var(--ff-serif);
	font-size: 0.8125rem;
}
.hlseo-tarifs td:nth-child(3) { color: var(--c-encre-50); }
.hlseo-tarifs td:last-child { text-align: right; }

/* -------------------------------------------------------------------------
   17. PATTERN — SECTION MÉTHODE NUMÉROTÉE
   ------------------------------------------------------------------------- */
.hlseo-methode-section {
	margin: 1.75rem 0 1rem;
}
.hlseo-methode-section__title {
	font-family: var(--ff-serif);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 0.625rem;
}
.hlseo-methode-section__title-num {
	font-family: var(--ff-mono);
	font-size: 0.75rem;
	color: var(--c-cobalt);
	margin-right: 0.5rem;
	vertical-align: 4px;
}

/* -------------------------------------------------------------------------
   18. PATTERN — ENCADRÉ SPEC INLINE
   ------------------------------------------------------------------------- */
.hlseo-spec-inline {
	background: var(--c-blanc);
	border-left: 1.5px solid var(--c-cobalt);
	padding: 0.75rem 0.875rem;
	margin: 1.125rem 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono);
	line-height: 1.7;
}
.hlseo-spec-inline__label {
	color: var(--c-cobalt);
	margin-bottom: 0.375rem;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   19. CONTENU LONG — articles / pages prose
   ------------------------------------------------------------------------- */
.entry-content {
	font-family: var(--ff-serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-encre);
}
.entry-content p { margin: 0 0 1.125rem; }
.entry-content > h2,
.entry-content > h3 { margin-top: 2rem; }
.entry-content blockquote { color: var(--c-encre); }
.entry-content a {
	color: var(--c-encre);
	text-decoration: underline;
	text-decoration-color: var(--c-cobalt);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.entry-content a:hover { color: var(--c-cobalt); }

/* -------------------------------------------------------------------------
   20. UTILITAIRES
   ------------------------------------------------------------------------- */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.hlseo-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}
.hlseo-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}
.hlseo-grid-sidebar {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: var(--sp-4);
	align-items: start;
}
@media (max-width: 760px) {
	.hlseo-grid-2,
	.hlseo-grid-3,
	.hlseo-grid-sidebar { grid-template-columns: 1fr; }
}

.hlseo-divider {
	height: 0.5px;
	background: var(--c-ligne);
	margin: var(--sp-3) 0;
}
.hlseo-divider--dashed {
	background: none;
	border-top: 0.5px dashed rgba(26, 26, 26, 0.25);
}

.hlseo-section {
	padding: var(--sp-5) 0;
	border-top: 0.5px solid var(--c-ligne);
}
.hlseo-section--no-border { border-top: none; }
.hlseo-section--soft { background: rgba(255, 255, 255, 0.4); }

/* -------------------------------------------------------------------------
   21. RESPONSIVE — ajustements mobile
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	:root {
		--fs-h1: 2rem;
		--fs-h2: 1.5rem;
		--grid-size: 24px;
	}
	.site-nav ul { gap: 0.875rem; }
	.site-nav a { font-size: 0.625rem; }
	.hlseo-hero { padding: var(--sp-4) 0 var(--sp-3); }
}

/* -------------------------------------------------------------------------
   22b. PATTERN — HERO 2 COLONNES (avec fiche personnelle latérale)
   ------------------------------------------------------------------------- */
.hlseo-hero-split {
	padding: 3.5rem 0 2.5rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: start;
}
.hlseo-hero-split__metrics {
	display: flex;
	gap: 2rem;
	padding-top: 1.25rem;
	border-top: 0.5px solid var(--c-ligne);
	margin-top: 2rem;
}
.hlseo-hero-metric { font-family: var(--ff-serif); }
.hlseo-hero-metric__value {
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 500;
	margin-bottom: 0.25rem;
}
.hlseo-hero-metric__value sup {
	font-size: 0.875rem;
	color: var(--c-cobalt);
}
.hlseo-hero-metric__label {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-encre-30);
	letter-spacing: 0.04em;
}
@media (max-width: 860px) {
	.hlseo-hero-split { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
	.hlseo-hero-split__metrics { gap: 1.25rem; }
}

/* -------------------------------------------------------------------------
   22c. PATTERN — INTERVENTION CARD (3 colonnes avec border-left)
   ------------------------------------------------------------------------- */
.hlseo-intervention {
	border-left: 1.5px solid var(--c-cobalt);
	padding: 0.25rem 0 0.25rem 1.125rem;
}
.hlseo-intervention__num {
	font-family: var(--ff-mono); font-size: 0.625rem;
	color: var(--c-cobalt);
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}
.hlseo-intervention__title {
	font-family: var(--ff-serif);
	font-size: 1.125rem;
	font-weight: 500;
	margin: 0 0 0.5rem;
	letter-spacing: -0.012em;
}
.hlseo-intervention__desc {
	font-family: var(--ff-sans);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--c-encre-50);
	margin: 0 0 0.75rem;
}
.hlseo-intervention__spec {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-encre-30);
	letter-spacing: 0.02em;
}
.hlseo-intervention__spec span { color: var(--c-cobalt); }

/* -------------------------------------------------------------------------
   22d. PATTERN — MÉTHODE FLOW (4 étapes en ligne)
   ------------------------------------------------------------------------- */
.hlseo-methode-flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 0.5px solid var(--c-ligne);
	border-radius: 4px;
	background: var(--c-blanc);
}
.hlseo-methode-step {
	padding: 1.125rem 1rem;
	border-right: 0.5px solid var(--c-ligne);
}
.hlseo-methode-step:last-child { border-right: none; }
.hlseo-methode-step__num {
	font-family: var(--ff-mono);
	font-size: 0.625rem;
	color: var(--c-cobalt);
	letter-spacing: 0.04em;
	margin-bottom: 0.625rem;
}
.hlseo-methode-step__title {
	font-family: var(--ff-serif);
	font-size: 0.9375rem;
	font-weight: 500;
	margin: 0 0 0.375rem;
}
.hlseo-methode-step__desc {
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--c-encre-50);
}
@media (max-width: 860px) {
	.hlseo-methode-flow { grid-template-columns: 1fr 1fr; }
	.hlseo-methode-step { border-right: 0.5px solid var(--c-ligne); border-bottom: 0.5px solid var(--c-ligne); }
	.hlseo-methode-step:nth-child(2n) { border-right: none; }
	.hlseo-methode-step:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
	.hlseo-methode-flow { grid-template-columns: 1fr; }
	.hlseo-methode-step { border-right: none; border-bottom: 0.5px solid var(--c-ligne); }
	.hlseo-methode-step:last-child { border-bottom: none; }
}

/* -------------------------------------------------------------------------
   22e. INTRO DE SECTION + FOOTER TRAVAUX
   ------------------------------------------------------------------------- */
.hlseo-section__intro {
	font-family: var(--ff-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--c-encre-50);
	max-width: 56ch;
	margin: 0 0 2rem;
}
.hlseo-travaux-footer {
	margin-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 0.5px dashed var(--c-ligne);
	flex-wrap: wrap;
	gap: 0.75rem;
}
.hlseo-travaux-footer__count {
	font-family: var(--ff-mono);
	font-size: 0.6875rem;
	color: var(--c-encre-30);
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   22f. CHANTIER — bloc NDA (variante anonyme)
   ------------------------------------------------------------------------- */
.hlseo-chantier__nda {
	margin-top: 0.875rem;
	padding-top: 0.625rem;
	border-top: 0.5px solid var(--c-ligne);
	font-family: var(--ff-mono);
	font-size: 0.6875rem;
	color: var(--c-encre-30);
}
.hlseo-chantier__nda a {
	color: var(--c-cobalt);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   22g. TARIFS — sous-titre italique sous le nom de la prestation
   ------------------------------------------------------------------------- */
.hlseo-tarifs td:nth-child(2) em {
	font-style: italic;
	font-size: 0.75rem;
	color: var(--c-encre-50);
	display: block;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   22h. CTA FINAL (section centrée de fin de page)
   ------------------------------------------------------------------------- */
.hlseo-cta-final {
	padding: 4rem 0;
	text-align: center;
}
.hlseo-cta-final__title {
	font-family: var(--ff-serif);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.018em;
	margin: 0.5rem 0 0.875rem;
	line-height: 1.15;
}
.hlseo-cta-final__title em { font-style: italic; font-weight: 400; }
.hlseo-cta-final__lede {
	font-family: var(--ff-sans);
	font-size: 1rem;
	color: var(--c-encre-50);
	max-width: 50ch;
	margin: 0 auto 1.75rem;
	line-height: 1.5;
}
.hlseo-cta-final__dispo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	font-family: var(--ff-mono);
	font-size: 0.6875rem;
	color: var(--c-minium);
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   23. ÉDITEUR — surcharges Gutenberg
   ------------------------------------------------------------------------- */
.editor-styles-wrapper {
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
}
.wp-block { max-width: var(--container); }
.wp-block-quote {
	font-family: var(--ff-serif);
	font-style: italic;
	border-left: 2px solid var(--c-encre);
}