/* Base — typographie, layout, signature graphique */

/* Garde-fou universel : aucune section ne doit créer de scroll horizontal (overflow-x:clip
   ne casse pas position:sticky, contrairement à hidden). Filet de sécurité site-wide. */
html { font-size: 100%; overflow-x: clip; }

body {
	font-family: var(--sl-font-sans);
	font-size: var(--sl-fs-base);
	color: var(--sl-color-text);
	background: var(--sl-color-bg);
	line-height: var(--sl-lh-normal);
}

/* === Typo hiérarchie === */
h1, .sl-h1 {
	font-family: var(--sl-font-sans);
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	font-weight: var(--sl-fw-bold);
	line-height: var(--sl-lh-tight);
	letter-spacing: var(--sl-tracking-tight);
	color: var(--sl-color-ink-900);
}

h2, .sl-h2 {
	font-family: var(--sl-font-sans);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: var(--sl-fw-bold);
	line-height: var(--sl-lh-tight);
	color: var(--sl-color-ink-900);
}

h3, .sl-h3 {
	font-family: var(--sl-font-sans);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: var(--sl-fw-semi);
	line-height: var(--sl-lh-snug);
	color: var(--sl-color-ink-800);
}

h4, .sl-h4 {
	font-family: var(--sl-font-sans);
	font-size: 1.25rem;
	font-weight: var(--sl-fw-semi);
	color: var(--sl-color-ink-800);
}

/* === Signature visuelle Sailoé : point bleu après les titres === */
.sl-text-point::after,
h1.sl-text-point::after,
h2.sl-text-point::after,
h3.sl-text-point::after,
.sl-title-separator::after,
.sl-hero__title::after,
.sl-section__title.sl-text-point::after {
	content: ".";
	color: var(--sl-color-brand);
	margin-left: 2px;
}

/* === Hero scénique (Bodoni → Playfair Display) === */
.sl-hero-serif {
	font-family: var(--sl-font-serif);
	font-weight: var(--sl-fw-regular);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* === Eyebrow uppercase letterspaced (HelveticaNeue Thin → Inter) === */
.sl-eyebrow,
.sl-uppercase-tracked {
	font-family: var(--sl-font-display);
	font-size: var(--sl-fs-sm);
	font-weight: var(--sl-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--sl-tracking-wider);
}

.sl-uppercase-tracked--xl {
	letter-spacing: var(--sl-tracking-widest);
}

p { line-height: var(--sl-lh-loose); }

a {
	color: var(--sl-color-link);
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--sl-duration) var(--sl-ease);
}
a:hover { color: var(--sl-color-link-hover); }

.sl-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

strong, b { font-weight: var(--sl-fw-semi); }

/* === Layout === */
.sl-container { max-width: var(--sl-container-max); padding-inline: var(--sl-gutter); margin-inline: auto; }
.sl-container--narrow { max-width: var(--sl-container-narrow); }
.sl-container--wide { max-width: var(--sl-container-wide); }

.sl-section { padding-block: clamp(3rem, 7vw, 6rem); }
.sl-section--tight { padding-block: clamp(2rem, 5vw, 4rem); }
.sl-section--center { text-align: center; }
.sl-section--alt { background: var(--sl-color-bg-alt); }
.sl-section--soft { background: var(--sl-color-bg-soft); }
.sl-section--dark { background: var(--sl-color-bg-dark); color: var(--sl-color-white); }
.sl-section--dark h1, .sl-section--dark h2, .sl-section--dark h3 { color: var(--sl-color-white); }
.sl-section--dark a { color: var(--sl-color-brand-light); }

/* === Grid utilitaires (rappel pattern Sailoé .Grid--5 .Grid--4 .Grid--3 .Grid--2 .Grid--1) === */
.sl-grid { display: grid; gap: var(--sl-space-6); }
.sl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sl-grid--5 { grid-template-columns: repeat(5, 1fr); }
.sl-grid--half { grid-template-columns: 1fr 1fr; gap: 0; }

@media (max-width: 1180px) { .sl-grid--5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px) { .sl-grid--5, .sl-grid--4 { grid-template-columns: repeat(3, 1fr); } .sl-grid--3 { grid-template-columns: repeat(2, 1fr); } .sl-grid--half { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .sl-grid--5, .sl-grid--4, .sl-grid--3 { grid-template-columns: repeat(2, 1fr); } .sl-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .sl-grid--5, .sl-grid--4, .sl-grid--3, .sl-grid--2 { grid-template-columns: 1fr; } }

/* === Accessibility helpers === */
.sl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sl-skip-link {
	position: absolute; top: -100px; left: var(--sl-space-4); padding: var(--sl-space-3) var(--sl-space-4);
	background: var(--sl-color-brand); color: var(--sl-color-white);
	border-radius: var(--sl-radius-md); z-index: var(--sl-z-toast);
	transition: top var(--sl-duration) var(--sl-ease);
	font-weight: var(--sl-fw-semi);
}
.sl-skip-link:focus { top: var(--sl-space-4); }

/* === Prose (content rédigé via éditeur WP) === */
.sl-prose { line-height: var(--sl-lh-loose); color: var(--sl-color-text); }
.sl-prose > * + * { margin-top: var(--sl-space-5); }
.sl-prose h2 { margin-top: var(--sl-space-12); }
.sl-prose h3 { margin-top: var(--sl-space-8); }
.sl-prose img { border-radius: var(--sl-radius-md); margin-block: var(--sl-space-6); }
.sl-prose ul, .sl-prose ol { padding-left: var(--sl-space-5); }
.sl-prose ul li::marker { color: var(--sl-color-brand); }
.sl-prose li + li { margin-top: var(--sl-space-2); }
.sl-prose blockquote {
	border-left: 4px solid var(--sl-color-brand);
	padding-left: var(--sl-space-5);
	font-family: var(--sl-font-serif);
	font-size: var(--sl-fs-lg);
	color: var(--sl-color-ink-700);
	font-style: italic;
}

/* === Breadcrumb (fond beige sable comme Sailoé .Breadcrumb--container) === */
.sl-breadcrumb {
	background: var(--sl-color-sand);
	padding: var(--sl-space-3) 0;
	font-size: var(--sl-fs-xs);
	color: var(--sl-color-text);
}
.sl-breadcrumb__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl-space-2);
	align-items: center;
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.sl-breadcrumb__inner > li { list-style: none !important; }
.sl-breadcrumb__inner > li::marker { content: none; }
.sl-breadcrumb__item { display: inline-flex; align-items: center; }
.sl-breadcrumb__sep { color: var(--sl-color-ink-400); }
.sl-breadcrumb a { color: inherit; text-decoration: none; }
.sl-breadcrumb a:hover { color: var(--sl-color-brand); }
.sl-breadcrumb [aria-current="page"] { color: var(--sl-color-ink-800); font-weight: var(--sl-fw-medium); }

/* En contexte page (header.php le rend en haut, donc on neutralise le bg dans certains conteneurs si besoin) */
.sl-breadcrumb--inline { background: transparent; padding: 0; margin-bottom: var(--sl-space-6); }