/*
 * SAHB Theme — Compiled CSS
 * Generated by scripts/build_css.py on 2026-06-05 02:26:01 UTC.
 * Source : assets/css/style.css
 * DO NOT EDIT — modifier les sources, puis just build-css.
 */

/**
 * SAHB Theme – Main stylesheet
 * theme.json is the single source of truth; this file supplements with layout and block overrides.
 */

/* ─── @import base/reset.css ─── */
/**
 * SAHB – Base reset
 * theme.json is the source of truth; CSS only what it cannot do.
 */

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

html {
	scroll-behavior: smooth;
}

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

/* ─── end base/reset.css ─── */

/* ─── @import base/typography.css ─── */
/**
 * SAHB – Typography (supplements theme.json elements)
 */

p {
	margin-top: 0;
}

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

/* ─── end base/typography.css ─── */

/* ─── @import base/accessibility.css ─── */
/**
 * SAHB – Accessibility: skip link, focus, reduced motion
 */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--wp--preset--spacing--30);
	z-index: 999999;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--md);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--wp--custom--transition--fast);
}

.skip-link:focus {
	top: var(--wp--preset--spacing--30);
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* :focus-visible : primary (#1a3a5c) au lieu d'accent (#c9a227)
 * — accent sur blanc = 2.4:1 (ECHEC WCAG AA UI ≥3:1)
 * — primary sur blanc = 11.4:1 (AAA), reste lisible sur fonds colorés. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ─── end base/accessibility.css ─── */

/* ─── @import base/layout.css ─── */
/**
 * SAHB – Layout (wp-site-blocks, main)
 */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

/*
 * Neutralise le block gap par défaut de WordPress entre les régions racines
 * (header → main → footer). WP génère `:where(.wp-site-blocks) > * { margin-block-start: 24px }`,
 * ce qui ajoutait une gouttière entre le header et le hero. Chaque région gère
 * son propre espacement vertical via son padding.
 * `.wp-site-blocks > *` (spécificité 0,1,0) surcharge le `:where()` (spécificité 0) sans !important.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* ============================================================
 * Grilles SAHB — colonnes explicites & équilibrées (anti-orphelin)
 *
 * Problème : les grilles de contenu utilisent `layout:grid` +
 * `minimumColumnWidth` → Gutenberg génère `repeat(auto-fill, minmax(...))`,
 * qui choisit le nombre de colonnes selon la largeur DISPONIBLE. Résultat :
 * 4 cartes peuvent tomber en « 3 sur une ligne puis 1 » selon le conteneur.
 *
 * Correctif : on impose des colonnes explicites par palier, et on ADAPTE le
 * nombre de colonnes au compte réel d'items via des "quantity queries"
 * (`:has()` + `:nth-child()`), de sorte qu'aucune grille ne laisse un item seul
 * sur sa ligne — quel que soit son nombre de cartes, aujourd'hui ou demain.
 *
 * Paliers desktop : 2 items → 2 · 4 items → 2×2 · 3/5/6 → 3 (3 / 3+2 / 3+3)
 * · 7+ (catalogues) → 4. Aucun reste = 1.
 *
 * Cible générique `.is-layout-grid` (toutes les grilles, sans énumérer les
 * classes). La spécificité (0,3,1) surclasse la règle conteneur de WordPress
 * (0,1,0) sans !important.
 * ============================================================ */

/* Mobile : une colonne */
main .wp-block-post-content .wp-block-group.is-layout-grid {
	grid-template-columns: 1fr;
}

/* ≥ 600px : deux colonnes (toujours équilibré : 2, 2×2, 2×3…) */
@media (min-width: 37.5em) {
	main .wp-block-post-content .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ≥ 992px : paliers adaptés au nombre d'items */
@media (min-width: 62em) {
	/* défaut : 3 colonnes (sûr pour 3, 5→3+2, 6→3+3) */
	main .wp-block-post-content .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* exactement 2 items → 2 colonnes */
	main .wp-block-post-content .wp-block-group.is-layout-grid:has(> :last-child:nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* exactement 4 items → 2×2 (jamais « 3 puis 1 ») */
	main .wp-block-post-content .wp-block-group.is-layout-grid:has(> :last-child:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 7 items ou plus (catalogues type collection) → 4 colonnes */
	main .wp-block-post-content .wp-block-group.is-layout-grid:has(> :nth-child(7)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ─── end base/layout.css ─── */

/* ─── @import base/prose.css ─── */
/**
 * SAHB – Prose : conteneur long-form contraint
 *
 * Applique une mesure de lecture confortable (~60ch ≈ 70 caractères) et un
 * rythme vertical cohérent aux blocs de contenu narratif. À appliquer
 * via la classe utilitaire `.sahb-prose` sur le bloc Group qui enveloppe
 * un texte long (article, page patrimoine, page histo-art, etc.).
 *
 * Les patterns hero / cards / grilles N'utilisent PAS .sahb-prose, ils
 * vivent à pleine largeur. Cette classe s'applique aux groupes de
 * paragraphes courants.
 */

.sahb-prose {
	max-width: var(--wp--custom--measure--prose, 34rem);
	margin-left: auto;
	margin-right: auto;
}

.sahb-prose > * + * {
	margin-top: var(--wp--custom--rhythm--base);
}

.sahb-prose > * + h2,
.sahb-prose > * + h3 {
	margin-top: var(--wp--custom--rhythm--loose);
}

.sahb-prose > h2 + *,
.sahb-prose > h3 + * {
	margin-top: var(--wp--custom--rhythm--tight);
}

.sahb-prose p {
	line-height: 1.7;
}

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

.sahb-prose ul li + li,
.sahb-prose ol li + li {
	margin-top: 0.4em;
}

.sahb-prose img,
.sahb-prose .wp-block-image {
	margin-top: var(--wp--custom--rhythm--loose);
	margin-bottom: var(--wp--custom--rhythm--loose);
}

.sahb-prose blockquote,
.sahb-prose .wp-block-quote {
	margin-top: var(--wp--custom--rhythm--loose);
	margin-bottom: var(--wp--custom--rhythm--loose);
}

/* Variante narrow pour les passages dramatiques (citations longues, lead) */
.sahb-prose.is-narrow {
	max-width: var(--wp--custom--measure--narrow, 28rem);
}

/* Variante wide pour les colonnes de patrimoine / archives avec tableaux */
.sahb-prose.is-wide {
	max-width: var(--wp--custom--measure--wide, 42rem);
}

/* ─── end base/prose.css ─── */


/* ─── @import blocks/core-navigation.css ─── */
/**
 * SAHB – core/navigation
 */

/* Beaucoup de liens + flex-nowrap du core = scroll horizontal ; le header doit pouvoir envelopper */
.site-header .wp-block-navigation .wp-block-navigation__container {
	flex-wrap: wrap;
	row-gap: 0.25rem;
	column-gap: 0.35rem;
	justify-content: flex-end;
}

.site-header .wp-block-navigation {
	max-width: 100%;
	min-width: 0;
	flex: 1 1 auto;
}

.header-bar__tools .wp-block-navigation {
	flex: 0 1 auto;
}

.header-bar .wp-block-navigation .wp-block-navigation__container {
	justify-content: flex-end;
}

/* Navigation principale : texte bleu (primaire) sur fond blanc */
.header-bar .header-main--nav .wp-block-navigation-item .wp-block-navigation-item__content,
.header-bar .header-main--nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.header-bar .header-main--nav .wp-block-navigation-item a:hover,
.header-bar .header-main--nav .wp-block-navigation-item a:focus-visible {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.header-bar .header-main--nav .current-menu-item > a,
.header-bar .header-main--nav .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.header-bar .header-main--nav .wp-block-navigation__submenu-icon svg {
	stroke: var(--wp--preset--color--primary);
}

.header-bar .header-main--nav .wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--primary);
}

.header-bar .header-main--nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
}

.header-bar .header-main--nav .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--primary);
}

.header-bar .header-main--nav .wp-block-navigation__submenu-container a:hover,
.header-bar .header-main--nav .wp-block-navigation__submenu-container a:focus-visible {
	background: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--secondary);
}

/* Mobile overlay open : style explicite pour garantir un fond lisible
 * et un padding cohérent. Renforce le rendu natif du bloc navigation
 * sur mobile. Audit a11y v1.0.6. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	padding: var(--wp--preset--spacing--30);
	font-size: 1.125rem;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
	background: var(--wp--preset--color--gray-100);
}

/* Burger et close icons : cible tactile minimale 44×44 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation .wp-block-navigation-item a {
	padding: 0.5rem 1rem;
	transition: color var(--wp--custom--transition--normal);
}

/* Footer / autres navigations : survol bleu */
.wp-block-navigation:not(.header-main--nav) .wp-block-navigation-item a:hover,
.wp-block-navigation:not(.header-main--nav) .wp-block-navigation-item a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--custom--border-radius--sm);
	box-shadow: var(--wp--preset--shadow--small);
	min-width: 200px;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.75rem 1rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--gray-100);
}

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ─── end blocks/core-navigation.css ─── */

/* ─── @import blocks/core-button.css ─── */
/**
 * SAHB – core/button (variations)
 */

.wp-block-button__link {
	transition: all var(--wp--custom--transition--normal);
}

/* Boutons à fond accent (or #c9a227) : texte noir pur pour maximiser le contraste.
 * Le noir sur l'accent or dépasse confortablement le seuil WCAG AA (4.5:1) pour le
 * texte normal. Une seule règle couvre tous les CTA accent (présents et futurs) et
 * surcharge has-dark-color (spécificité 0,2,0 > 0,1,0) sans toucher chaque pattern. */
.wp-block-button__link.has-accent-background-color {
	color: #000;
}

/* Hover des CTA accent : on assombrit l'or (color-mix) plutôt que de basculer vers
 * la couleur secondaire (theme.json button:hover), ce qui produisait un saut or → brun
 * peu lisible. Le texte reste noir. Fallback hex pour les navigateurs sans color-mix. */
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus-visible {
	background-color: #ad8a21;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, #000);
	color: #000;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
}

/* Outline sans couleur explicite : on force le primary (bord + texte) pour une
 * identité de marque cohérente sur fond clair, là où currentColor donnait un gris
 * terne. Les outline explicitement colorés (ex. hero, has-text-color blanc) sont exclus. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

/* Au focus clavier, le fond devient primary : l'outline global (3px primary)
 * serait invisible. On force un outline blanc contrasté (11.4:1 sur primary). */
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* ─── end blocks/core-button.css ─── */

/* ─── @import blocks/core-heading.css ─── */
/**
 * SAHB – Bloc Titre (core/heading)
 *
 * theme.json applique Georgia (serif) sur h1 et h2 + tracking serré (-0.02/-0.01em)
 * pour le caractère éditorial institutionnel. Ce fichier supplémente :
 *
 * - Alignement (margin auto pour centrage/droit)
 * - Variantes de style (is-style-display, is-style-eyebrow)
 * - Décoration d'accent optionnelle
 */

.wp-block-heading.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-heading.has-text-align-right {
	margin-left: auto;
	margin-right: 0;
}

/* Display heading — pour les titres de section qui doivent dominer (encore plus grand que h1 par défaut) */
.wp-block-heading.is-style-display {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

/* Eyebrow — petite étiquette au-dessus d'un h2 ou h3 (uppercase secondary).
 * Couleur passée d'accent (#c9a227, 2.4:1 sur blanc) à secondary (#8b4513, 7.1:1)
 * pour respecter WCAG AA texte normal — audit a11y v1.0.6. letterSpacing
 * réduit de 0.1em à 0.05em pour meilleure lisibilité dyslexie. */
.wp-block-heading.is-style-eyebrow,
.sahb-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Underline accent — soulignement décoratif sous un titre */
.wp-block-heading.is-style-underline {
	display: inline-block;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 3px solid var(--wp--preset--color--accent);
}

/* ─── end blocks/core-heading.css ─── */

/* ─── @import blocks/sahb-partners.css ─── */
/**
 * SAHB – Bloc Partenaires
 */

.wp-block-sahb-partners.sahb-partners {
	max-width: 100%;
	box-sizing: border-box;
}

.sahb-partners .sahb-partners__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 1.25rem);
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}

.sahb-partners .sahb-partners__rule {
	flex: 1 1 0;
	min-width: 2rem;
	max-width: 6rem;
	height: 0;
	border: none;
	border-top: 4px double var(--wp--preset--color--gray-200, #e5e5e5);
	opacity: 0.9;
}

.sahb-partners .sahb-partners__title {
	flex: 0 1 auto;
	margin: 0;
	max-width: 100%;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.2;
}

.sahb-partners .sahb-partners__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sahb-partners .sahb-partners__item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sahb-partners .sahb-partners__link {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--sm, 4px);
}

.sahb-partners .sahb-partners__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.sahb-partners .sahb-partners__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(280px, 42vw);
	max-height: 5.5rem;
	object-fit: contain;
}

@media (max-width: 640px) {
	.sahb-partners .sahb-partners__title-row {
		margin-bottom: var(--wp--preset--spacing--30, 1.25rem);
	}

	.sahb-partners .sahb-partners__rule {
		max-width: 3rem;
	}

	.sahb-partners .sahb-partners__img {
		max-height: 4.5rem;
	}
}

/* ─── end blocks/sahb-partners.css ─── */


/* ─── @import components/cards.css ─── */
/**
 * SAHB – Cards, post cards, group card style
 *
 * Style "card" appliqué via is-style-card sur core/group. Hover : shadow
 * elevation + légère translation pour signaler l'interactivité. Les cards
 * spécifiques (mission-grid, course-card, house-card, artwork-card, etc.)
 * utilisent les mêmes tokens via le className utilitaire correspondant.
 */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--md);
	box-shadow: var(--wp--preset--shadow--small);
	transition:
		box-shadow var(--wp--custom--transition--normal),
		transform var(--wp--custom--transition--normal);
}

.wp-block-group.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--large);
	transform: translateY(-4px);
}

/* Cards thématiques (cours, oeuvres, maisons, programmes, etc.) — hover lift
 * généreux pour signaler clairement l'interactivité. Audit visuel : v1.1.0
 * utilisait -2px + shadow-medium (subtle), v1.1.1 passe à -4px + shadow-large
 * pour un effet plus marqué et moderne. */
.sahb-course-card,
.sahb-artwork-card,
.sahb-house-card,
.sahb-program-card,
.sahb-mission-card,
.sahb-cta-card {
	transition:
		box-shadow var(--wp--custom--transition--normal),
		transform var(--wp--custom--transition--normal);
}

.sahb-course-card:has(a:hover, a:focus-visible),
.sahb-artwork-card:has(a:hover, a:focus-visible),
.sahb-program-card:has(a:hover, a:focus-visible) {
	box-shadow: var(--wp--preset--shadow--large);
	transform: translateY(-4px);
}

/* Mission card — number et titre alignés en colonne + accent edge gauche
 * (4px secondary, inset via box-shadow pour ne pas affecter le layout).
 * Apporte du caractère éditorial sans surcharger. Audit visuel v1.1.1. */
.sahb-mission-card {
	display: flex;
	flex-direction: column;
	box-shadow:
		var(--wp--preset--shadow--small),
		inset 4px 0 0 var(--wp--preset--color--secondary);
	transition:
		box-shadow var(--wp--custom--transition--normal),
		transform var(--wp--custom--transition--normal);
}

.sahb-mission-card:hover {
	box-shadow:
		var(--wp--preset--shadow--large),
		inset 4px 0 0 var(--wp--preset--color--secondary);
	transform: translateY(-4px);
}

.sahb-mission-card__number {
	margin-bottom: 0;
}

/* CTA cards primary background — pas de lift au hover (déjà saturées en couleur),
 * juste une élévation plus marquée */
.sahb-cta-card:hover {
	box-shadow: var(--wp--preset--shadow--large);
}

/* Stats grid (chiffres clés accueil) — espacement régulier */
.sahb-stats-grid > * {
	min-width: 0;
}

/* Post / archive cards historiques (composants legacy) */
.post-card,
.archive-card,
.search-result {
	transition: transform var(--wp--custom--transition--normal), box-shadow var(--wp--custom--transition--normal);
}

.archive-card {
	box-shadow: var(--wp--preset--shadow--small);
	overflow: hidden;
}

.archive-card:has(a:hover, a:focus-visible) {
	box-shadow: var(--wp--preset--shadow--medium);
	transform: translateY(-2px);
}

.archive-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Logos partenaires legacy (.partners-logos) retirés : aucun émetteur dans les
 * patterns/templates. Le bloc dynamique sahb/partners gère le rendu via la classe
 * .sahb-partners (cf. assets/css/blocks/sahb-partners.css). */

/* ─── end components/cards.css ─── */

/* ─── @import components/forms.css ─── */
/**
 * SAHB – Forms, search, inputs
 *
 * - Inputs avec border gray-200, focus ring primary tinted
 * - États error / valid avec aria-invalid
 * - Labels et helper text
 */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--custom--border-radius--sm);
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--white);
	transition: border-color var(--wp--custom--transition--normal), box-shadow var(--wp--custom--transition--normal);
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--gray-500);
}

input:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
	border-color: var(--wp--preset--color--gray-500);
}

input:focus,
textarea:focus,
select:focus {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--gray-500);
	cursor: not-allowed;
}

/* États d'erreur — déclenchés par aria-invalid="true" ou .has-error */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.has-error input,
.has-error textarea,
.has-error select {
	border-color: var(--wp--preset--color--danger);
	background-color: color-mix(in srgb, var(--wp--preset--color--danger) 4%, var(--wp--preset--color--white));
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
.has-error input:focus,
.has-error textarea:focus,
.has-error select:focus {
	outline: 3px solid var(--wp--preset--color--danger);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--danger);
}

/* États de validation — pour aria-invalid="false" explicite ou .is-valid */
input[aria-invalid="false"],
textarea[aria-invalid="false"],
.is-valid input,
.is-valid textarea {
	border-color: var(--wp--preset--color--success);
}

/* Labels et helper text */
.sahb-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin-bottom: var(--wp--preset--spacing--40);
}

.sahb-form-field label {
	font-weight: 600;
	color: var(--wp--preset--color--gray-700);
	font-size: 0.95em;
}

.sahb-form-field .sahb-form-helper {
	font-size: 0.85em;
	color: var(--wp--preset--color--gray-500);
	line-height: 1.4;
}

.sahb-form-field .sahb-form-error {
	font-size: 0.85em;
	color: var(--wp--preset--color--danger);
	font-weight: 600;
	line-height: 1.4;
}

.sahb-form-field .sahb-form-error::before {
	content: '⚠ ';
}

.sahb-form-field .sahb-required {
	color: var(--wp--preset--color--danger);
	margin-left: 0.15em;
}

.wp-block-search__input {
	border-radius: var(--wp--custom--border-radius--sm) 0 0 var(--wp--custom--border-radius--sm);
}

.wp-block-search__button {
	border-radius: 0 var(--wp--custom--border-radius--sm) var(--wp--custom--border-radius--sm) 0;
}

/* ─── end components/forms.css ─── */

/* ─── @import components/header.css ─── */
/**
 * SAHB – Header
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: clip;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--small);
}

/* alignfull / pleine largeur dans l’éditeur : évite 100vw + marges négatives hors viewport */
.site-header .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Wrappers de layout du bloc groupe (classe type wp-container-core-group-is-layout-XXXXXX).
 * Le suffixe hashé change à chaque re-sauvegarde de l'éditeur : on ne cible que le
 * motif stable via [class*=...], sans figer de hash en dur (qui mourrait à la 1re régén).
 */
.site-header [class*="wp-container-core-group-is-layout-"] {
	max-width: 100%;
	box-sizing: border-box;
}

.site-header [class*="wp-container-core-group-is-layout-"] .alignfull {
	max-width: 100%;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* Une seule barre : fond blanc, texte / liens bleus (couleur primary du thème) */
.header-bar {
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.header-bar__inner.is-layout-flex {
	align-items: center;
	min-width: 0;
}

.header-bar__brand {
	align-items: center;
	min-width: 0;
	flex: 0 0 auto;
}

.header-bar__tools {
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	flex: 1 1 auto;
}

.header-bar__contact {
	margin: 0;
	color: inherit;
}

.header-bar__contact a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.header-bar__contact a:hover,
.header-bar__contact a:focus {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Logo GIF SAHB : hauteur max pour ne pas casser la barre sur mobile */
.site-header-logo {
	margin: 0;
}

.site-header-logo img {
	width: auto;
	max-width: min(220px, 70vw);
	height: auto;
	max-height: 72px;
	display: block;
	object-fit: contain;
}

.site-header-logo a {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.site-header-logo a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: var(--wp--custom--border-radius--sm);
}

/* ─── end components/header.css ─── */

/* ─── @import components/footer.css ─── */
/**
 * SAHB – Footer
 */

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

/* Le footer a un fond primary : l'outline :focus-visible global (primary) y serait
 * invisible. On le force en blanc pour rester perceptible au clavier. */
.site-footer a:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.site-footer h4 {
	margin-bottom: var(--wp--preset--spacing--30);
}

.footer-bottom {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

.site-footer .wp-block-social-links a {
	transition: transform var(--wp--custom--transition--normal);
}

.site-footer .wp-block-social-links a:hover {
	transform: scale(1.1);
}

/* ─── end components/footer.css ─── */

/* ─── @import components/content.css ─── */
/**
 * SAHB – Content: hero, images, quote, separator
 */

/**
 * Colonne de page : un seul conteneur contraint (groupe parent).
 * post-content en layout « default » évite un 2e max-width imbriqué (texte trop étroit / décalé).
 */
main .wp-block-group.is-layout-constrained > .wp-block-post-content {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

main .wp-block-group.is-layout-constrained > .wp-block-post-content.is-layout-flow > * {
	max-width: none;
}

/* Mesure de lecture : seuls les blocs de TEXTE direct du contenu (paragraphes,
 * titres, listes, citations) se limitent à ~60ch et se centrent, pour un confort
 * de lecture sur les pages institutionnelles. Les blocs larges (alignwide/full),
 * images, galeries, groupes et colonnes gardent la pleine largeur du contenu.
 * Ne cible que les pages (post-content enfant direct du groupe contraint) ; les
 * articles passent, eux, par le wrapper .sahb-prose (single.html). */
main .wp-block-group.is-layout-constrained > .wp-block-post-content.is-layout-flow > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote):not(.alignwide):not(.alignfull) {
	max-width: var(--wp--custom--measure--prose, 34rem);
	margin-left: auto;
	margin-right: auto;
}

/* Mesure de lecture — pages sectionnées (cas dominant SAHB).
 * Les pages enveloppent leur contenu dans des sections `alignfull` > `constrained`
 * (bandeaux pleine largeur avec fond). Le texte courant vit DANS ces sections, donc
 * il échappait à la règle ci-dessus (qui ne cible que les enfants directs de
 * post-content) et s'étalait jusqu'à contentSize. On rapatrie ce texte à la mesure
 * de lecture (~60ch ≈ 70 caractères espaces compris) en le centrant, tout en
 * laissant respirer les blocs larges : grilles, cartes, colonnes, covers, images,
 * tableaux et tout conteneur préfixé `sahb-` gardent la pleine largeur de section. */
/* Mesure de lecture — approche ROBUSTE, indépendante de la profondeur de section.
 *
 * On contraint TOUT le texte courant descendant de post-content à la mesure
 * (~60ch ≈ 70 caractères) et on le centre — titres h2…h6 INCLUS, pour qu'ils
 * s'alignent exactement sur les paragraphes, quelle que soit l'imbrication
 * (section, ou section > groupe > texte : peu importe).
 *
 * Puis on RELÂCHE cette contrainte à l'intérieur des conteneurs structurants
 * (grilles, cartes, colonnes, covers/héros, encadrés) dont le texte doit remplir
 * sa propre boîte. Le sélecteur de reset a une spécificité supérieure
 * (0,4,2 > 0,3,2) → il gagne sans !important. */
main .wp-block-post-content :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, .wp-block-buttons):not(.alignwide):not(.alignfull) {
	max-width: var(--wp--custom--measure--prose, 34rem);
	margin-left: auto;
	margin-right: auto;
}

main .wp-block-post-content :is([class*="grid"], [class*="card"], [class*="columns"], .wp-block-column, .wp-block-cover, [class*="callout"], [class*="highlight"], [class*="cta"], [class*="stat-band"], [class*="key-figure"], [class*="pullquote"], .sahb-issue) :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, .wp-block-buttons):not(.alignwide):not(.alignfull) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Articles : même principe (groupe contraint unique) */
main .wp-block-group.is-layout-constrained .wp-block-post-content {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

/* Titre de page dupliqué quand le hero (Cover) reprend déjà le h1 dans le contenu.
 * On masque le post-title dès que le contenu contient un hero (.hero-section) — ça
 * couvre les pages sur le gabarit PAR DÉFAUT (ex. Archives), et pas seulement celles
 * assignées au gabarit « page-hero » (qui, lui, n'a pas de post-title du tout). */
main .wp-block-post-title:has(+ .wp-block-post-content .wp-block-cover.hero-section),
main .wp-block-post-title:has(+ .wp-block-post-content > .wp-block-cover.alignfull:first-child) {
	display: none;
}

/* ...et dans ce cas le wrapper de contenu du template (page.html applique
 * padding-top: spacing-60 + blockGap) ne doit laisser aucun vide au-dessus du
 * hero : il colle au header. !important pour surcharger le padding inline du
 * template ; ne s'applique qu'aux pages démarrant par un hero pleine largeur. */
main > .wp-block-group:has(> .wp-block-post-content > .wp-block-cover.alignfull:first-child) {
	padding-top: 0 !important;
}

main > .wp-block-group:has(> .wp-block-post-content > .wp-block-cover.alignfull:first-child) > .wp-block-post-content {
	margin-top: 0 !important;
}

/* Heros page : moins de vide vertical (les exports HTML fixent souvent min-height: 400px) */
.wp-block-cover.alignfull .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Heros importés (covers DANS le contenu de page/article) : on borne la hauteur
 * car les exports HTML fixent souvent un min-height inline excessif. Le hero de
 * la home (main.front-page) et celui du template page-hero gardent leur propre
 * hauteur intentionnelle (inline) — ils ne sont volontairement PAS ciblés ici. */
.wp-block-post-content .wp-block-cover.alignfull,
.entry-content .wp-block-cover.alignfull {
	min-height: clamp(13rem, 32vh, 22rem) !important;
}

/* Héros de page : présence affirmée. On surclasse le plafond générique ci-dessus
 * (mêmes sélecteurs + .hero-section = spécificité supérieure) pour donner aux héros
 * une vraie hauteur cinématique sans gonfler les petits covers de CTA en milieu de page. */
.wp-block-post-content .wp-block-cover.alignfull.hero-section,
.entry-content .wp-block-cover.alignfull.hero-section {
	min-height: clamp(20rem, 44vh, 32rem) !important;
}

/* Grand écran (≥ 1200px) : héros nettement plus hauts — au moins 600px, montant
 * jusqu'à 704px sur très large. La hauteur suit la largeur (vw) plutôt que la
 * hauteur de fenêtre, pour une bannière ample sur desktop. Inclut la page d'accueil
 * (`.front-page .hero-section`, dont le min-height inline est surclassé par !important). */
@media (min-width: 75em) {
	.wp-block-post-content .wp-block-cover.alignfull.hero-section,
	.entry-content .wp-block-cover.alignfull.hero-section,
	.front-page .wp-block-cover.alignfull.hero-section {
		min-height: clamp(37.5rem, 42vw, 44rem) !important;
	}
}

.hero-section {
	position: relative;
}

/* Voile composite pour la lisibilité du texte blanc quelle que soit la photo :
 *  1. vignette CENTRALE — le titre/sous-titre étant centrés (contentPosition
 *     center center), c'est là qu'il faut protéger le contraste (audit a11y) ;
 *  2. dégradé bas — pour les contenus ancrés en bas et le pied du héros ;
 *  3. teinte primaire discrète au pied — raccord chromatique avec la charte.
 * Dosé pour rester photographique (la photo reste lisible) tout en garantissant
 * un contraste suffisant même sur une image claire. */
.hero-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 75% at 50% 50%, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 82%),
		linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.14) 45%, transparent 80%),
		radial-gradient(120% 80% at 50% 120%, rgba(26, 58, 92, 0.30), transparent 70%);
	pointer-events: none;
}

/* Le contenu du héros passe au-dessus du voile */
.hero-section .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-inline: auto;
}

/* Titre & accroche du héros : mieux détachés du fond photographique */
.hero-section h1,
.hero-section h2 {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-section p {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
	opacity: 0.97;
}

/* Filet d'accent sous le titre du héros — signature visuelle discrète */
.hero-section h1::after {
	content: '';
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: var(--wp--preset--spacing--30) auto 0;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--border-radius--full);
}

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--wp--custom--border-radius--md);
}

/* core/quote : max-width prose-friendly + cite plus contrastée (gray-700)
 * Exclut .sahb-pullquote qui a déjà sa propre mesure (narrow 52ch) */
.wp-block-quote:not(.sahb-pullquote) {
	max-width: var(--wp--custom--measure--prose, 34rem);
}

.wp-block-quote cite {
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray-700);
}

.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	margin: var(--wp--preset--spacing--50) auto;
}

.wp-block-separator.is-style-wide {
	width: 100%;
}

/* ─── end components/content.css ─── */

/* ─── @import components/content-blocks.css ─── */
/**
 * SAHB – Content blocks utilitaires
 *
 * Composants visuels réutilisables que les édimestres peuvent appliquer
 * via la classe additionnelle sur un bloc Group ou Paragraph.
 *
 * Conventions :
 * - Préfixe `sahb-` pour éviter collision avec WP core
 * - Bord-gauche coloré + fond teinté + icône pour callouts
 * - Tokens theme.json partout (couleurs, spacing, border-radius, shadow)
 * - Tous distingués sur ≥ 3 axes visuels (couleur + icône + bord/fond)
 */

/* ─── Callouts (info / success / warning / danger) ─────────────────── */

.sahb-callout {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-left: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40));
	border-left: 4px solid var(--wp--preset--color--info);
	background-color: var(--wp--preset--color--gray-100); /* fallback browsers sans color-mix */
	background-color: color-mix(in srgb, var(--wp--preset--color--info) 8%, var(--wp--preset--color--white));
	border-radius: 0 var(--wp--custom--border-radius--md) var(--wp--custom--border-radius--md) 0;
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: auto;
	/* Mesure de lecture : un encadré-notice ne doit pas s'étaler sur toute la
	 * largeur de section, sinon les lignes deviennent illisibles. */
	max-width: var(--wp--custom--measure--wide, 42rem);
}

.sahb-callout::before {
	/* alt vide (' ' / '') pour que les lecteurs d'écran modernes (Chrome 108+,
	 * FF 130+) ignorent l'icône décorative. Audit a11y v1.0.6. */
	content: 'ⓘ' / '';
	position: absolute;
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
	font-size: 1.5em;
	line-height: 1;
	color: var(--wp--preset--color--info);
	font-weight: 700;
}

.sahb-callout > :first-child {
	margin-top: 0;
}

.sahb-callout > :last-child {
	margin-bottom: 0;
}

.sahb-callout strong {
	color: var(--wp--preset--color--info);
}

/* Variante succès */
.sahb-callout.is-success {
	border-left-color: var(--wp--preset--color--success);
	background: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--white));
}

.sahb-callout.is-success::before {
	content: '✓' / '';
	color: var(--wp--preset--color--success);
}

.sahb-callout.is-success strong {
	color: var(--wp--preset--color--success);
}

/* Variante avertissement */
.sahb-callout.is-warning {
	border-left-color: var(--wp--preset--color--warning);
	background: color-mix(in srgb, var(--wp--preset--color--warning) 10%, var(--wp--preset--color--white));
}

.sahb-callout.is-warning::before {
	content: '⚠' / '';
	color: var(--wp--preset--color--warning);
}

.sahb-callout.is-warning strong {
	color: var(--wp--preset--color--warning);
}

/* Variante erreur / danger */
.sahb-callout.is-danger {
	border-left-color: var(--wp--preset--color--danger);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--white));
}

.sahb-callout.is-danger::before {
	content: '✕' / '';
	color: var(--wp--preset--color--danger);
}

.sahb-callout.is-danger strong {
	color: var(--wp--preset--color--danger);
}

/* Variante neutre (accent) — pour mises en avant éditoriales */
.sahb-callout.is-accent {
	border-left-color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--white));
}

.sahb-callout.is-accent::before {
	content: '★' / '';
	color: var(--wp--preset--color--accent);
}

/* Variante information — explicite par symétrie (identique au défaut de .sahb-callout) */
.sahb-callout.is-info {
	border-left-color: var(--wp--preset--color--info);
	background: color-mix(in srgb, var(--wp--preset--color--info) 8%, var(--wp--preset--color--white));
}

.sahb-callout.is-info::before {
	content: 'ⓘ' / '';
	color: var(--wp--preset--color--info);
}

.sahb-callout.is-info strong {
	color: var(--wp--preset--color--info);
}

/* ─── Badges (étiquettes inline) ────────────────────────────────────── */

.sahb-badge {
	display: inline-block;
	padding: 0.15em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--wp--custom--border-radius--full);
	background: var(--wp--preset--color--gray-200);
	color: var(--wp--preset--color--gray-700);
	line-height: 1.4;
	vertical-align: middle;
}

.sahb-badge.is-primary {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 15%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--primary);
}

.sahb-badge.is-accent {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 25%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--dark);
}

.sahb-badge.is-success {
	background: color-mix(in srgb, var(--wp--preset--color--success) 18%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--success);
}

.sahb-badge.is-warning {
	background: color-mix(in srgb, var(--wp--preset--color--warning) 18%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--warning);
}

/* ─── Key-figure (chiffre clé inline) ───────────────────────────────── */

.sahb-key-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.sahb-key-figure__number {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	/* secondary (#8b4513, ~6.9:1 sur blanc) : conforme AA pour un chiffre informatif.
	 * L'accent (#c9a227, ~2.3:1) est réservé aux ornements décoratifs, jamais au texte. */
	color: var(--wp--preset--color--secondary);
}

.sahb-key-figure__label {
	font-size: 0.95em;
	color: var(--wp--preset--color--gray-700);
	text-align: center;
	line-height: 1.4;
	max-width: 18rem;
}

/* ─── Pull-quote (citation éditoriale dans le flux) ─────────────────── */

.sahb-pullquote {
	margin: var(--wp--preset--spacing--60) auto;
	max-width: var(--wp--custom--measure--narrow, 28rem);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-bottom: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-style: italic;
	line-height: 1.4;
	text-align: center;
	color: var(--wp--preset--color--primary);
}

.sahb-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7em;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-700);
}

.sahb-pullquote cite::before {
	content: '— ';
}

/* ─── Tables stylées (.sahb-table sur wp:table ou tableau natif) ─────── */

.sahb-table table,
table.sahb-table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--wp--preset--spacing--50) 0;
	font-variant-numeric: tabular-nums;
}

.sahb-table table thead,
table.sahb-table thead {
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

.sahb-table table th,
table.sahb-table th {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: left;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sahb-table table td,
table.sahb-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	vertical-align: top;
}

.sahb-table table tr:hover td,
table.sahb-table tr:hover td {
	background: var(--wp--preset--color--gray-100);
}

/* ─── Lead paragraph (premier paragraphe imposant) ───────────────────── */

.sahb-lead {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.55;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--gray-700);
	margin-bottom: var(--wp--custom--rhythm--loose);
}

/* ─── Image-placeholder (visuel pour TODO images) ───────────────────── */

.sahb-image-placeholder {
	position: relative;
}

.sahb-image-placeholder img[src*="PLACEHOLDER-"] {
	/* Le style placeholder (bordure pointillée + icône) ne s'applique QUE tant
	 * que le src pointe vers un fichier PLACEHOLDER-*. Dès qu'un édimestre
	 * remplace par une vraie image (src sans « PLACEHOLDER- »), le style
	 * disparaît automatiquement, même si la classe sahb-image-placeholder reste. */
	background-color: var(--wp--preset--color--gray-100);
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 16px,
			color-mix(in srgb, var(--wp--preset--color--gray-200) 60%, transparent) 16px,
			color-mix(in srgb, var(--wp--preset--color--gray-200) 60%, transparent) 32px
		),
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238b4513' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='12' width='48' height='40' rx='3'/%3E%3Ccircle cx='22' cy='26' r='4'/%3E%3Cpath d='M8 44l14-14 12 12 8-8 14 14'/%3E%3C/svg%3E");
	background-position: center center, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, 96px 96px;
	min-height: 16rem;
	width: 100%;
	object-fit: cover;
	border: 2px dashed var(--wp--preset--color--gray-500);
	border-radius: var(--wp--custom--border-radius--md);
}

.sahb-image-placeholder figcaption {
	font-size: 0.875em;
	color: var(--wp--preset--color--gray-700);
	text-align: center;
	font-style: italic;
	margin-top: 0.5em;
}

.sahb-image-placeholder:has(img[src*="PLACEHOLDER-"]) figcaption::before {
	content: 'Image en attente · ' / '';
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

/* ─── Section divider décoratif (séparateur fin centré) ──────────────── */

.sahb-divider {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--60) auto;
	max-width: var(--wp--custom--measure--narrow, 28rem);
}

.sahb-divider::before,
.sahb-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--gray-200);
}

.sahb-divider__ornament {
	color: var(--wp--preset--color--accent);
	font-size: 1.25em;
	line-height: 1;
}

/* ─── Histo'Art : cartes de numéros + sommaire repliable (core/details) ── */

.sahb-issue {
	box-shadow: var(--wp--preset--shadow--small);
}

.sahb-issue .wp-block-details {
	margin-top: var(--wp--preset--spacing--30);
}

.sahb-issue .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	padding: var(--wp--preset--spacing--10) 0;
}

.sahb-issue .wp-block-details summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sahb-issue .wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--20);
}

.sahb-issue .wp-block-details ul {
	margin: 0;
	padding-left: 1.25em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray-700);
}

.sahb-issue .wp-block-details li + li {
	margin-top: 0.35em;
}

/* ─── Hooks pour les classes utilisées dans les patterns/templates ──── */
/* Audit FSE v1.0.6 : ces classes étaient émises en markup sans aucune
 * règle CSS correspondante. Déclarations minimales pour stabiliser le
 * rendu et permettre des overrides futurs sans changer le markup. */

/* Back-to-top link dans le footer */
.sahb-back-to-top {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.sahb-back-to-top:hover,
.sahb-back-to-top:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Conteneurs de grilles thématiques (déjà gérés via layout:grid Gutenberg,
 * on ajoute juste un hook pour overrides spécifiques si besoin) */
.sahb-activites-grid,
.sahb-mission-grid {
	min-width: 0;
}

/* Image d'œuvre (collection / patrimoine) : aspect carré stable */
.sahb-oeuvre-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Liste de suggestions sur le template 404 : item espacé, marker accent */
.sahb-404-suggestions {
	list-style: none;
	padding-left: 0;
}

.sahb-404-suggestions li {
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.sahb-404-suggestions li::before {
	content: '→' / '';
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	margin-right: 0.5em;
}

.sahb-404-suggestions a {
	font-weight: 600;
}

/* Cartes de cours unifiées sur .sahb-course-card (cf. cards.css) : une seule classe
 * et une seule élévation hover (shadow-large / -4px). L'ancien alias .sahb-carte-cours
 * a été retiré — les patterns utilisent désormais is-style-card + sahb-course-card. */

/* ─── Callout « astuce » (conseil pratique) ─────────────────────────── */
/* 4e variante de callout, distincte de is-info (ⓘ) : glyphe crayon + teinte
 * primaire. Pour les conseils pratiques, astuces de visite, bons à savoir. */

.sahb-callout.is-tip {
	border-left-color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--white));
}

.sahb-callout.is-tip::before {
	content: '✎' / '';
	color: var(--wp--preset--color--primary);
}

.sahb-callout.is-tip strong {
	color: var(--wp--preset--color--primary);
}

/* ─── Highlight (panneau éditorial de mise en avant) ─────────────────── */
/* Encadré sans bord-gauche (contraste avec les callouts) : fond teinté primaire
 * + filet d'accent en haut. Pour un paragraphe-clé, une définition, un encart
 * « le saviez-vous ». Se distingue des callouts par la forme (bandeau plein,
 * pas d'icône) → variété visuelle réelle entre encadrés d'une même page. */

.sahb-highlight {
	margin-block: var(--wp--preset--spacing--60);
	margin-inline: auto;
	max-width: var(--wp--custom--measure--wide, 42rem);
	padding: var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--white));
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 0 var(--wp--custom--border-radius--md) var(--wp--custom--border-radius--md);
}

.sahb-highlight > :first-child {
	margin-top: 0;
}

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

.sahb-highlight .sahb-highlight__kicker {
	display: block;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ─── Stat-band (rangée équilibrée de chiffres clés) ─────────────────── */
/* Présente 2 à 4 chiffres clés sur une seule rangée qui se rééquilibre :
 * chaque item prend une part égale (flex 1 1 12rem) et passe dessous proprement
 * sur mobile — pas d'orphelin « 3 puis 1 ». À combiner avec .sahb-key-figure. */

.sahb-stat-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0;
}

.sahb-stat-band > * {
	flex: 1 1 12rem;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--gray-100);
	border-radius: var(--wp--custom--border-radius--md);
	text-align: center;
}

/* ─── end components/content-blocks.css ─── */

/* ─── @import components/utilities.css ─── */
/**
 * SAHB – Utilities
 */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── end components/utilities.css ─── */

/* ─── @import components/responsive.css ─── */
/**
 * SAHB – Responsive
 *
 * Breakpoints normalisés (auparavant 480/768/782 inconsistents) :
 * - 1024px : tablet landscape / desktop bas
 * - 768px  : tablet portrait
 * - 480px  : mobile
 *
 * Approche mobile-first préférée mais grosses parts du thème en desktop-first
 * (héritage WP) — on garde les media queries max-width existantes.
 */

@media (max-width: 1024px) {
	/* Réduire le padding horizontal des sections sur tablet */
	.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 768px) {
	/* Header bar : stack vertical sur mobile/tablet portrait */
	.header-bar__inner.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30);
	}

	.header-bar__tools.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.site-header {
		position: relative;
	}

	.wp-block-navigation__responsive-container-open {
		padding: 0.5rem;
	}

	/* Columns stack par défaut (WP le fait via stackOnMobile, mais on force) */
	.wp-block-columns {
		flex-direction: column;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Footer alignement */
	.footer-bottom .wp-block-group {
		flex-direction: column;
		text-align: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* Post card columns stack */
	.post-card .wp-block-columns {
		flex-direction: column;
	}

	.post-card .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Boutons CTA justifiés à droite (cta-don) : repassent à gauche une fois la
	 * colonne empilée pleine largeur, pour s'aligner sur le texte au-dessus. */
	.wp-block-buttons.is-content-justification-right {
		justify-content: flex-start;
	}

	/* Pullquote moins emphatique sur mobile */
	.sahb-pullquote {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	/* Callout : icône à l'intérieur du padding sur mobile */
	.sahb-callout {
		padding: var(--wp--preset--spacing--40);
		padding-top: calc(var(--wp--preset--spacing--40) + 1.75em);
	}

	.sahb-callout::before {
		left: var(--wp--preset--spacing--40);
		top: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 480px) {
	/* Compression du rythme vertical sur mobile pour éviter les pages trop longues */
	body {
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 4rem;
	}

	/* Headings : Georgia reste mais clamp plus serré */
	h1 {
		font-size: clamp(1.75rem, 6vw, 2.5rem);
	}

	h2 {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	h3 {
		font-size: clamp(1.25rem, 4vw, 1.5rem);
	}

	/* Cibles tactiles : boutons et liens nav avec hit area suffisante */
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Key figures : compression typo */
	.sahb-key-figure__number {
		font-size: clamp(2rem, 8vw, 3rem);
	}
}

/* Print : adapté pour les pages institutionnelles et les articles. */
@media print {
	/* Masque les éléments UI non pertinents à l'impression */
	.site-header,
	.site-footer,
	.skip-link,
	.wp-block-navigation,
	.sahb-cta-card,
	.wp-block-buttons,
	.wp-block-post-navigation-link,
	.wp-block-comments,
	.sahb-callout::before {
		display: none !important;
	}

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

	h1, h2, h3, h4 {
		color: #000;
		page-break-after: avoid;
	}

	p, li {
		orphans: 3;
		widows: 3;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	/* Expansion des URLs externes après le texte du lien */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}

	/* Garder les images dans leur bloc */
	img, .wp-block-image, .sahb-image-placeholder {
		page-break-inside: avoid;
		max-width: 100% !important;
	}

	/* Gallery patrimoine : passe à 2 colonnes au lieu de 3 pour mieux remplir le format papier */
	.wp-block-gallery.has-nested-images.columns-3 {
		grid-template-columns: 1fr 1fr;
	}

	/* Callouts : conserver la bordure mais retirer le fond pour économiser l'encre */
	.sahb-callout {
		background: none !important;
		border-left-width: 2px;
		padding-left: var(--wp--preset--spacing--30);
	}

	/* Heros : version compacte sur papier (50px au lieu de 380px) */
	.wp-block-cover.hero-section {
		min-height: 0 !important;
		padding: 1cm 0 !important;
		background: none !important;
		color: #000 !important;
	}

	.hero-section h1,
	.hero-section h2 {
		color: #000 !important;
		font-size: 24pt;
		text-shadow: none !important;
	}

	/* Décorations d'écran (voile dégradé, filet d'accent) inutiles sur papier */
	.hero-section::after,
	.hero-section h1::after {
		display: none !important;
	}
}

/* ─── end components/responsive.css ─── */

/* ─── @import custom.css ─── */
/**
 * SAHB – Overrides optionnels
 * Les styles principaux sont dans style.css et ses imports (base/, blocks/, components/).
 * Ajoutez ici les règles spécifiques au projet si nécessaire.
 */

/* ─── end custom.css ─── */