/*
 * Ashtanga Fusion — Feuille de style principale
 * Version 0.4.0 — header + footer + single + archive + horaires/planning
 *
 * Sections :
 *   1.  Reset & variables
 *   2.  Typographie & base
 *   3.  Layout (container, grilles)
 *   4.  Header & navigation
 *   5.  Footer
 *   6.  Boutons & composants utilitaires
 *   7.  Accessibilité (skip-link, screen-reader-text)
 *   8.  Responsive
 *   …
 *   22. Page Horaires — hero intro, notice, encart cours
 *   23. Plugin Events Schedule — surcharges CSS
 *   24. Responsive — planning
 */

/* =========================================================
   1. RESET & VARIABLES
   ========================================================= */
:root {
	--bg: #FAF7EF;
	--panel: #FFFFFF;
	--text: #2C2C2C;
	--muted: #5F5F5F;
	--primary: #009C8C;
	--accent: #F25C3C;
	--cta: #F59E0B;
	--card: #FFFFFF;
	--line: rgba(0, 0, 0, .08);
	--line-strong: rgba(0, 0, 0, .12);
	--nav-h: 64px;
	--radius: 12px;
	--radius-lg: 18px;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);

	/* Système de spacing global — utilisé partout pour cohérence */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Espacements sémantiques (préférer ceux-ci dans les composants) */
	--section-gap-tight: var(--space-6);   /* 32px — entre items proches */
	--section-gap:       var(--space-8);   /* 64px — espace standard entre sections */
	--section-gap-loose: 80px;             /* 80px — entre grandes zones (home/hero) */
	--footer-gap:        80px;             /* 80px — avant le footer (uniforme sur toutes les pages) */
}

/* Mobile : espacements réduits */
@media (max-width: 768px) {
	:root {
		--section-gap-tight: var(--space-5);   /* 24px */
		--section-gap:       var(--space-7);   /* 48px */
		--section-gap-loose: var(--space-8);   /* 64px */
		--footer-gap:        var(--space-7);   /* 48px */
	}
}

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

html {
	scroll-behavior: smooth;
	/* Offset pour le scroll vers une ancre : compense la hauteur du
	   sticky header (~80-100px) + flash info éventuel. Sinon, le titre
	   de la section ciblée se cache sous la barre de nav. */
	scroll-padding-top: 120px;
}

/* =========================================================
   2. TYPOGRAPHIE & BASE
   ========================================================= */
body {
	margin: 0;
	font-family: 'Montserrat', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	/* Fond de page uniformément cream pour que les cards blanches
	   (.section-focus-glossaire, etc.) se détachent partout. */
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: var(--primary);
}

h1, h2, h3, h4 {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	letter-spacing: .3px;
	line-height: 1.15;
	margin: 0 0 .5em;
}

p {
	margin: 0 0 1em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.muted {
	color: var(--muted);
}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.site-main {
	min-height: 50vh;
}

/* =========================================================
   4. HEADER & NAVIGATION
   ========================================================= */
/* Wrapper sticky qui contient header + flash info — un seul plan sticky.
   Comme ça flash info ne peut JAMAIS passer derrière le header au scroll. */
.sticky-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header {
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--line);
	overflow: visible;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--nav-h);
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Logo */
.brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.brand img,
.brand .custom-logo {
	display: block;
	height: 52px;
	width: auto;
	object-fit: contain;
}

/* Logo long (PNG horizontal avec texte) */
.brand-logo-long {
	height: 48px;
	width: auto;
	max-width: 200px;
}

/* Lien interne si custom-logo WordPress */
.brand .custom-logo-link {
	display: flex;
	align-items: center;
}

/* Menu principal */
.nav-primary {
	display: flex;
	align-items: center;
	flex: 1;
}

.menu-primary {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.menu-primary li {
	position: relative;
}

.menu-primary a {
	display: inline-block;
	padding: 10px 14px;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 19px;
	letter-spacing: .3px;
	border-radius: 10px;
	transition: background .2s ease, color .2s ease;
}

.menu-primary a:hover,
.menu-primary .current-menu-item > a {
	background: rgba(0, 156, 140, .08);
	color: var(--primary);
}

/* Sous-menus */
.menu-primary .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 6px;
	margin: 0;
	list-style: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.menu-primary li:hover > .sub-menu,
.menu-primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu-primary .sub-menu a {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-size: 15px;
}

.nav-fallback-notice {
	margin: 0 0 0 12px;
	font-size: 12px;
	color: var(--muted);
	font-style: italic;
}

/* Burger mobile */
.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 52px;
	height: 44px;
	padding: 0 10px;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	margin-left: auto;
	color: var(--text);
	transition: background .2s ease;
}

.nav-toggle:hover {
	background: rgba(0, 0, 0, .05);
}

/* Pas d'outline focus sur le burger — on garde le hover à la place */
.nav-toggle:focus-visible {
	outline: none;
	background: rgba(0, 156, 140, .1);
}

.nav-toggle-bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

/* Label "Menu" sous les barres */
.nav-toggle-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--muted);
	transition: color .2s ease;
}

.nav-toggle:hover .nav-toggle-label,
.nav-toggle[aria-expanded="true"] .nav-toggle-label {
	color: var(--primary);
}

/* Animation croix à l'ouverture */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Sélecteur de langue */
.lang-switch {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .04);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.chip:hover {
	background: rgba(0, 156, 140, .08);
	color: var(--primary);
}

.lang-switch .chip.active {
	background: color-mix(in hsl, var(--primary) 20%, #fff);
	border-color: color-mix(in hsl, var(--primary) 45%, #fff);
	color: #0b3b38;
}

/* =========================================================
   5. FOOTER (refonte SEO v0.10.0)
   =========================================================
   Structure : 5 zones (brand / 3 colonnes / newsletter) + bottom
   (legal + pratique + tagline finale). Mappé sur les tokens
   existants (--bg, --text, --primary, --accent, --line, --card,
   --muted) — aucune nouvelle variable introduite.
   ========================================================= */

/* Source UNIQUE de l'espacement avant footer — uniforme sur toutes les pages. */
.site-footer {
	position: relative;
	overflow: hidden;
	margin-top: var(--footer-gap);
	padding: clamp(48px, 6vw, 80px) 0 28px;
	border-top: 1px solid var(--line);
	background:
		radial-gradient(640px 300px at 8% 12%, color-mix(in hsl, var(--accent) 10%, transparent), transparent 55%),
		radial-gradient(560px 280px at 92% 14%, color-mix(in hsl, var(--primary) 8%, transparent), transparent 55%),
		linear-gradient(180deg, var(--bg), color-mix(in hsl, var(--bg) 92%, #000));
	color: var(--text);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--primary);
}

/* ---- Layout principal : brand | nav 3 cols | newsletter ---- */
.site-footer__main {
	display: grid;
	grid-template-columns: minmax(240px, .88fr) minmax(480px, 1.7fr) minmax(260px, .8fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
	padding-bottom: clamp(40px, 5vw, 64px);
	border-bottom: 1px solid var(--line);
}

/* ---- 1. Brand ---- */
.site-footer__brand {
	text-align: center;
}

.site-footer__logo {
	display: block;
	margin: 0 auto 12px;
	max-width: min(100%, 220px);
}

.site-footer__logo img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 10px 20px rgba(21, 61, 56, .08));
}

/* Ornement décoratif : ॐ entre 2 lignes (entre logo et tagline) */
.site-footer__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 auto 16px;
	color: var(--accent);
}

.site-footer__ornament::before,
.site-footer__ornament::after {
	content: "";
	width: 44px;
	height: 1px;
	background: color-mix(in hsl, var(--accent) 35%, transparent);
}

/* ॐ : SVG Wikipedia (om-symbol.svg) utilisé en mask CSS pour pouvoir
   contrôler la couleur via background-color (héritée du design system). */
.site-footer__omega {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-color: var(--accent);
	-webkit-mask: url("../img/om-symbol.svg") center / contain no-repeat;
	        mask: url("../img/om-symbol.svg") center / contain no-repeat;
	opacity: .9;
	vertical-align: middle;
}

.site-footer__intro {
	max-width: 320px;
	margin: 0 auto;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.7;
}

.site-footer__tags {
	margin: 20px 0 0;
	color: var(--text);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.9;
	text-transform: uppercase;
}

.site-footer__tags span {
	color: var(--accent);
	margin: 0 6px;
}

/* ---- 2-4. Nav 3 colonnes ---- */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3.5vw, 44px);
	padding-top: 12px;
}

.site-footer__col {
	padding-left: clamp(18px, 2.5vw, 32px);
	border-left: 1px solid var(--line);
}

/* Même typo que .site-footer__tags (mots-clés du brand) pour
   harmoniser visuellement les colonnes : Montserrat 600, .72rem,
   uppercase, letter-spacing .16em.
   IMPORTANT : on override la règle globale h1-h4 qui force
   Lobster Two italique, sinon le heading ressort en cursive. */
.site-footer__heading {
	margin: 0 0 18px;
	color: var(--text);
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
	font-style: normal;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.site-footer__heading::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: color-mix(in hsl, var(--primary) 50%, transparent);
	margin-top: 8px;
}

.site-footer__list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 9px;
}

.site-footer__list li { margin: 0; }

.site-footer__list a {
	display: inline-block;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.5;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--primary);
	transform: translateX(3px);
}

.site-footer__list-empty {
	margin: 0 0 22px;
	font-size: .85rem;
	font-style: italic;
}

.site-footer__more {
	display: inline-block;
	color: var(--primary);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.site-footer__more:hover,
.site-footer__more:focus-visible {
	color: var(--accent);
}

/* ---- 5. Newsletter (carte blanche + lotus) ---- */
.site-footer__newsletter {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 24px 24px;
	box-shadow: var(--shadow-sm);
	text-align: center;
}

/* Lotus newsletter : SVG du favicon (cohérence visuelle avec l'icône du site) */
.site-footer__lotus {
	display: block;
	width: 56px;
	height: auto;
	margin: 0 auto 14px;
}

.site-footer__newsletter-title {
	margin: 0 0 8px;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 1.55rem;
	color: var(--text);
}

.site-footer__newsletter-line {
	width: 32px;
	height: 1px;
	background: color-mix(in hsl, var(--primary) 50%, transparent);
	margin: 8px auto 14px;
}

.site-footer__newsletter-intro {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: .88rem;
	line-height: 1.55;
}

/* Form Brevo : on garde toute la mécanique, on ré-habille avec des styles
   dédiés .site-footer__input / .site-footer__button (le .newsletter-form
   reste compatible si Brevo cible cette classe en JS). */
.site-footer__form {
	display: grid;
	gap: 10px;
	margin: 0;
	position: relative;
}

.site-footer__input,
.site-footer__form #EMAIL {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: .92rem;
	box-sizing: border-box;
}

.site-footer__input:focus,
.site-footer__form #EMAIL:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in hsl, var(--primary) 15%, transparent);
}

.site-footer__button {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--primary);
	background: var(--primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .2s ease, transform .1s ease;
}

.site-footer__button:hover,
.site-footer__button:focus-visible {
	background: color-mix(in hsl, var(--primary) 85%, #000);
	transform: translateY(-1px);
}

.site-footer__note {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: .76rem;
	letter-spacing: .04em;
}

/* ---- Bas du footer : legal + pratique + tagline finale ---- */
.site-footer__bottom {
	padding-top: 26px;
}

.site-footer__legal {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-size: .82rem;
	letter-spacing: .04em;
}

.site-footer__legal li {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	color: var(--muted);
}

.site-footer__legal li + li::before {
	content: "·";
	opacity: .45;
	margin: 0 10px;
	display: inline-block;
}

.site-footer__legal a {
	color: var(--muted);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--primary);
}

.site-footer__practical {
	margin: 0 0 18px;
	font-style: normal;
}

.site-footer__practical-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 24px;
	color: var(--muted);
	font-size: .85rem;
}

.site-footer__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
}

.site-footer__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;  /* Hérité du parent .site-footer__item (= var(--muted)) */
}

.site-footer__final {
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	text-align: center;
}

.site-footer__final-text {
	display: inline-block;
	margin: 0;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 1.05rem;
	color: color-mix(in hsl, var(--text) 70%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.site-footer__main {
		grid-template-columns: 1fr;
	}
	.site-footer__brand,
	.site-footer__newsletter {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 720px) {
	.site-footer__nav {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.site-footer__col {
		padding-left: 16px;
		border-left: 2px solid color-mix(in hsl, var(--primary) 25%, transparent);
	}
	.site-footer__legal {
		gap: 4px 0;
		flex-direction: column;
	}
	.site-footer__legal li + li::before {
		display: none;
	}
	.site-footer__practical-inner {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
}

/* =========================================================
   6. BOUTONS & UTILITAIRES
   ========================================================= */
.btn,
button.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, transform .1s ease, border-color .2s ease;
}

.btn:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.btn-primary {
	background: var(--primary);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}

.btn-primary:hover {
	background: color-mix(in hsl, var(--primary) 85%, #000);
	color: #fff;
}

/* =========================================================
   7. ACCESSIBILITÉ
   ========================================================= */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 12px 16px;
	background: var(--primary);
	color: #fff;
	border-radius: 0 0 var(--radius) 0;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================
   8. PAGE D'ACCUEIL
   ========================================================= */

/* Wrapper home */
.home {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 72px 36px;
	background:
		radial-gradient(1200px 600px at 10% 10%, color-mix(in hsl, var(--primary) 12%, transparent), transparent 60%),
		radial-gradient(800px 400px at 90% 0%, color-mix(in hsl, var(--accent) 10%, transparent), transparent 60%),
		linear-gradient(180deg, #FFFFFF, #FFFFFF);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	margin-bottom: 12px;
	/* Décalage vers le haut pour coller au bandeau nav */
	margin-top: -4px;
}

.hero h1 {
	font-size: clamp(32px, 4.4vw, 48px);
	margin: 12px 0 8px;
}

.hero .hero-lead,
.hero p.hero-lead {
	color: var(--muted);
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 4px;
}

.hero-actions {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

/* Chip */
.chip-hero,
.hero .chip {
	display: inline-flex;
	padding: 6px 12px;
	font-size: 12px;
	letter-spacing: .3px;
	font-weight: 600;
	text-transform: uppercase;
	background: color-mix(in hsl, var(--accent) 15%, #fff);
	border: 1px solid color-mix(in hsl, var(--accent) 30%, #fff);
	color: #8b1e10;
	border-radius: 999px;
}

/* ============================================================
   SYSTÈME D'ESPACEMENT VERTICAL — règles universelles
   ============================================================
   1. Entre 2 sections (.section) : `margin-top: var(--section-gap)` (64px).
   2. Avant le footer : `margin-top: var(--footer-gap)` sur .site-footer
      (80px). Pas de padding-bottom sur les wrappers.
   3. Première section après un hero : un peu plus d'air avec
      var(--section-gap-loose) (80px).
   4. Section après planning WCS : moins d'air car widget volumineux,
      var(--section-gap-tight) (32px).
   5. Pas d'autre margin-top/bottom à définir sur les sections : tout
      passe par les tokens ci-dessus. Les composants internes (cards,
      grids) peuvent avoir leur propre padding/margin mais doivent éviter
      d'ajouter du whitespace en bas qui se propage entre sections.
   ============================================================ */

/* Sections — espacement uniforme (token global) */
.section {
	margin-top: var(--section-gap);
	margin-bottom: 0; /* explicite : aucune section n'ajoute de marge en bas */
}

/* =========================================================
   HARMONISATION VERTICALE GLOBALE
   Force le même padding-bottom avant footer sur tous les
   wrappers principaux de pages + uniformise les variantes
   de .section qui avaient des margins custom historiques.
   ========================================================= */

/* Wrappers principaux : on ne touche plus au padding-bottom.
   L'espace avant le footer est désormais piloté UNIQUEMENT par
   `margin-top` de `.site-footer` (voir §5 FOOTER). */

/* Cas particuliers : forcer le margin-top des sections "spéciales"
   à matcher le standard .section (au lieu d'avoir leur propre logique
   padding-top / margin-top hybride). */
.related-posts {
	padding-top: 0;
	margin-top: var(--section-gap);
}

.section-focus-glossaire {
	margin-bottom: 0;
	margin-top: var(--section-gap);
}

.section-focus-head {
	margin-top: var(--section-gap);
}

/* Header glossaire suivi de sa carte : on garde un gap visuel court */
.section-focus-head + .section-focus-glossaire {
	margin-top: var(--space-3); /* 12px */
}

/* Première section après un hero : un peu plus d'air pour respirer
   visuellement après la grande zone du hero */
.hero + .section,
.hero-home + .section,
.hero-archive + .section,
.hero + .filter-bar + .section,
.hero-archive + .filter-bar + .section {
	margin-top: var(--section-gap-loose);
}

/* Cas particulier : la section planning home contient un widget WCS qui
   ajoute son propre padding interne. On compense en réduisant le margin
   top de la section qui suit pour éviter un vide de 100+ px. */
.section-planning-home + .section {
	margin-top: var(--section-gap-tight); /* 32px au lieu de 64px */
}

/* Reset des marges bottom des conteneurs externes du widget WCS — on
   ne touche PLUS au bouton .wcs-more lui-même pour ne pas casser ses
   styles internes (padding, ladda animation, etc.) */
.planning-embed .wcs-timetable__container,
.planning-embed .wcs-timetable__wrapper {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Le bouton "+ de dates" : centré horizontalement et bien aéré */
.planning-embed .wcs-more {
	display: block;
	margin: 24px auto 0;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.section-head h2 {
	font-size: clamp(24px, 3vw, 32px);
	margin: 0;
}

.section-cta {
	text-align: center;
	margin-top: 18px;
}

.note-demo {
	margin-top: 12px;
	font-size: 13px;
	font-style: italic;
}

/* Grilles */
.grid {
	display: grid;
	gap: 20px;
}

.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Cartes */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
	display: flex;
	flex-direction: column;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
	border-color: color-mix(in hsl, var(--primary) 25%, var(--line));
}

.card .media {
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg,
			color-mix(in hsl, var(--primary) 22%, #fff),
			color-mix(in hsl, var(--accent) 18%, #fff));
	overflow: hidden;
}

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

.card .body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.card h3 {
	margin: 0 0 4px;
	font-size: 22px;
}

.card .body .btn,
.card .body .btn-link {
	margin-top: auto;
	align-self: flex-start;
}

/* Bouton CTA en bas de carte (En savoir +) — pleine largeur, séparé du contenu */
.card .body .card-cta-btn {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
	justify-content: center;
}

/* Force le contenu textuel des cartes séminaires à coller au haut */
.card-seminaire .body {
	justify-content: flex-start;
}

/* Bouton secondaire — même format que .btn-primary, couleur plus discrète
   (utile pour les CTA secondaires comme "Voir les tarifs" sur fiche séminaire) */
.btn.btn-secondary {
	background: transparent;
	color: var(--primary);
	border: 1px solid color-mix(in hsl, var(--primary) 35%, var(--line));
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
	background: color-mix(in hsl, var(--primary) 10%, #fff);
	border-color: var(--primary);
	color: var(--primary);
}

[data-theme="dark"] .btn.btn-secondary {
	background: transparent;
	color: color-mix(in hsl, var(--primary) 60%, #fff);
}
[data-theme="dark"] .btn.btn-secondary:hover {
	background: color-mix(in hsl, var(--primary) 15%, var(--panel, #0f172a));
}

/* Espacement vertical entre deux boutons consécutifs dans une info-card */
.info-card .btn + .btn {
	margin-top: 10px;
}

/* Card link wrapper (article cliquable entier) */
.card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Variantes de cartes */
.card-creneau .body {
	gap: 8px;
}

.card-prof .media-portrait {
	aspect-ratio: 3 / 4;
	background:
		linear-gradient(160deg,
			color-mix(in hsl, var(--primary) 30%, #fff),
			color-mix(in hsl, var(--accent) 22%, #fff) 70%,
			color-mix(in hsl, var(--cta) 18%, #fff));
}

/* Badge (créneaux horaires) */
.badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 10px;
	background: color-mix(in hsl, var(--primary) 12%, #fff);
	border: 1px solid color-mix(in hsl, var(--primary) 35%, #fff);
	color: #054944;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	width: fit-content;
}

/* Label (rubrique au-dessus du titre) */
.label {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 2px;
}

/* Bouton lien (texte avec flèche) */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	padding: 4px 0;
	color: var(--primary);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.btn-link:hover {
	color: color-mix(in hsl, var(--primary) 80%, #000);
	text-decoration: underline;
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
	.grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.grid.cols-3,
	.grid.cols-2 {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 48px 24px;
	}

	.brand img,
	.brand .custom-logo {
		height: 40px;
	}

	.brand-logo-long {
		height: 36px;
		max-width: 160px;
	}

	.hero {
		padding: 48px 24px;
	}

	.nav-toggle {
		display: flex;
		order: 3;
	}

	.lang-switch {
		order: 2;
		margin-left: auto;
	}

	.site-nav {
		flex-wrap: wrap;
		align-items: center;
	}

	.nav-primary {
		order: 4;
		flex: 1 0 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}

	.nav-primary.is-open {
		max-height: 600px;
		padding: 12px 0 18px;
	}

	.menu-primary {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.menu-primary a {
		display: block;
		padding: 12px 14px;
	}

	.menu-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding-left: 16px;
		background: transparent;
	}
	/* (Anciennes règles .footer-grid retirées : refonte footer v0.10.0) */
}

@media (max-width: 600px) {
	.container {
		padding: 0 18px;
	}

	.lang-switch .chip {
		padding: 5px 9px;
		font-size: 11px;
	}
}

/* Header mobile — resserrer pour faire tenir TOUS les éléments sur une
   seule ligne (logo + loupe + thème + FR/EN + burger menu).
   Sans ces ajustements, le burger menu wrappait sur une 2e ligne sur
   les viewports ≤ 420px (iPhone 13 mini, iPhone SE, etc.). */
@media (max-width: 600px) {
	.site-nav {
		gap: 8px;             /* 16px → 8px : gagne ~32px sur 4 gaps */
	}
	.brand-logo-long {
		height: 32px;          /* 36px → 32px */
		max-width: 130px;      /* 160px → 130px */
	}
	.search-trigger {
		width: 34px;           /* 38px → 34px */
		height: 34px;
		margin-right: 0;       /* le gap du flex suffit */
	}
	.search-trigger svg {
		width: 15px;
		height: 15px;
	}
	.lang-switch {
		gap: 4px;              /* 6px → 4px entre FR et EN */
	}
	.nav-toggle {
		min-width: auto;       /* 52px → auto */
		padding: 0 6px;        /* 0 10px → 0 6px */
	}
}

/* Sous 420px (iPhone SE, vieux Android compacts), on cache aussi le
   petit label "MENU" sous le burger pour gagner ~12px de plus. */
@media (max-width: 420px) {
	.nav-toggle-label {
		display: none;
	}
	.nav-toggle {
		min-height: 36px;
	}
}

/* =========================================================
   10. ARCHIVE — LISTE DES ARTICLES
   ========================================================= */
.archive-wrap {
	padding-top: var(--space-5);  /* 24px */
	/* padding-bottom géré par la règle harmonisation globale (--footer-gap) */
}

/* Hero archive : variante légère sans image de fond */
.hero-archive {
	background:
		radial-gradient(900px 400px at 5% 5%, color-mix(in hsl, var(--primary) 10%, transparent), transparent 60%),
		radial-gradient(600px 300px at 95% 0%, color-mix(in hsl, var(--accent) 8%, transparent), transparent 60%),
		#FFFFFF;
}

/* Titre des cartes en archive (h2 sémantique mais visuellement comme h3) */
.card-title {
	font-size: 22px;
	margin: 0 0 4px;
}

/* Meta : date + temps de lecture dans les cartes */
.card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	font-size: 12px;
	color: var(--muted);
}

.meta-sep {
	opacity: .4;
}

/* Pagination — supporte les deux structures :
   - the_posts_pagination() (utilisé dans les archives) : <nav><div.nav-links>...</div></nav>
   - paginate_links() (utilisé dans home.php) : <nav>...items directs...</nav>
   Le flex layout est appliqué aux deux niveaux. Margin-top sur .nav-links
   (the_posts_pagination) ET sur .archive-pagination quand elle contient
   des page-numbers directs (paginate_links). */
.archive-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 40px;
}

/* Si le <nav> est rendu mais vide (1 seule page) → on le cache pour
   ne pas créer de gap fantôme avant la section suivante. */
.archive-pagination:empty {
	display: none;
	margin: 0;
}

.archive-pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.archive-pagination .page-numbers:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.archive-pagination .page-numbers.current {
	background: var(--primary);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}

.archive-pagination .page-numbers.dots {
	border: none;
	pointer-events: none;
}

/* =========================================================
   11. SINGLE — ARTICLE INDIVIDUEL
   ========================================================= */

/* =========================================================
   Flash Info — bandeau d'alerte sticky sous le header
   3 niveaux d'urgence : .flash-info--standard | --medium | --urgent
   ========================================================= */
.flash-info {
	/* Plus de sticky ici : c'est le wrapper .sticky-header-wrap qui colle
	   l'ensemble (header + flash) en haut de la fenêtre. */
	font-size: 14px;
	line-height: 1.4;
	/* Slide-down à l'apparition */
	animation: flashSlideDown .35s ease both;
	/* Couleurs par défaut = niveau Standard (ambiance actuelle). */
	background: color-mix(in hsl, var(--accent) 14%, #fff);
	border-bottom: 1px solid color-mix(in hsl, var(--accent) 30%, #fff);
	color: #5a2310;
}

/* --- Niveau Standard (info pratique, fermeture exceptionnelle…) --- */
.flash-info--standard {
	background: color-mix(in hsl, var(--accent) 14%, #fff);
	border-bottom-color: color-mix(in hsl, var(--accent) 30%, #fff);
	color: #5a2310;
}

/* --- Niveau Moyen (changement important, retard, événement) --- */
.flash-info--medium {
	background: color-mix(in hsl, var(--accent) 32%, #fff);
	border-bottom: 1px solid color-mix(in hsl, var(--accent) 55%, #fff);
	color: #5a2310;
	font-weight: 500;
}
.flash-info--medium .flash-info-link {
	background: color-mix(in hsl, var(--accent) 28%, #fff);
	border-color: color-mix(in hsl, var(--accent) 70%, #fff);
}
.flash-info--medium .flash-info-link:hover {
	background: color-mix(in hsl, var(--accent) 42%, #fff);
}

/* --- Niveau Urgent (annulation, situation critique) — rouge pulsant --- */
.flash-info--urgent {
	background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
	border-bottom: 1px solid #7f1d1d;
	color: #fff;
	font-weight: 600;
	animation: flashSlideDown .35s ease both, flashPulse 2s ease-in-out 1s infinite;
	box-shadow: 0 2px 12px rgba(220, 38, 38, .35);
}
.flash-info--urgent .flash-info-msg a {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.flash-info--urgent .flash-info-link {
	background: #fff;
	color: #b91c1c;
	border-color: #fff;
	font-weight: 700;
}
.flash-info--urgent .flash-info-link:hover {
	background: #fef2f2;
}
.flash-info--urgent .flash-info-close {
	color: #fff;
}
.flash-info--urgent .flash-info-close:hover {
	background: rgba(255, 255, 255, .15);
}

/* Pulsation discrète du fond (urgence) — non clignotante par accessibilité,
   juste une ondulation d'opacité pour attirer l'œil sans agresser. */
@keyframes flashPulse {
	0%, 100% { box-shadow: 0 2px 12px rgba(220, 38, 38, .35); }
	50%      { box-shadow: 0 2px 24px rgba(220, 38, 38, .65); }
}

/* prefers-reduced-motion : on coupe la pulsation pour les utilisateurs sensibles. */
@media (prefers-reduced-motion: reduce) {
	.flash-info--urgent {
		animation: flashSlideDown .35s ease both;
	}
}

@keyframes flashSlideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

.flash-info-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.flash-info-msg {
	flex: 1;
}

.flash-info-msg a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

.flash-info-link {
	flex-shrink: 0;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid color-mix(in hsl, var(--accent) 50%, #fff);
	color: #5a2310;
	background: color-mix(in hsl, var(--accent) 12%, #fff);
	transition: background .2s ease;
}

.flash-info-link:hover {
	background: color-mix(in hsl, var(--accent) 22%, #fff);
}

.flash-info-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #5a2310;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}

.flash-info-close:hover {
	background: color-mix(in hsl, var(--accent) 20%, #fff);
}

/* Flash masqué (via JS) */
.flash-info.is-hidden {
	display: none;
}

/* Barre de progression de lecture */
.reading-progress {
	position: sticky;
	top: var(--header-h, var(--nav-h));
	z-index: 40;
	height: 3px;
	background: var(--line);
	width: 100%;
}

.reading-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transition: width .1s linear;
	border-radius: 0 2px 2px 0;
}

/* Hero article */
.hero-single {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg,
		color-mix(in hsl, var(--primary) 15%, #fff),
		color-mix(in hsl, var(--accent) 10%, #fff) 60%,
		#fff);
	padding: 64px 0 48px;
}

.hero-single.has-thumbnail {
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	padding: 80px 0 48px;
}

/* Image de fond du hero */
.hero-single-img {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-single-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay sombre sur l'image pour lisibilité */
.hero-single-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,.35) 0%,
		rgba(0,0,0,.55) 60%,
		rgba(0,0,0,.72) 100%
	);
}

/* Contenu du hero : au-dessus de l'overlay */
.hero-single-content {
	position: relative;
	z-index: 2;
}

/* Sur les single article (post) : on aligne la largeur du contenu hero
   (titre, breadcrumb, meta) avec la largeur du corps de l'article (960px).
   Sinon on a un mismatch visuel : titre à 1200px puis texte à 960px.
   L'image de fond du hero reste pleine largeur (overlay sur tout le viewport),
   seul le contenu textuel est contraint. */
.single-article .hero-single-content {
	max-width: 960px;
}

/* Textes en blanc quand image de fond */
.has-thumbnail .hero-single-content .breadcrumb,
.has-thumbnail .hero-single-content .breadcrumb a,
.has-thumbnail .hero-single-content .breadcrumb .breadcrumb-sep {
	color: rgba(255,255,255,.75);
}

.has-thumbnail .hero-single-content .breadcrumb a:hover {
	color: #fff;
}

.has-thumbnail .article-title,
.has-thumbnail .article-meta-row,
.has-thumbnail .article-meta-row a,
.has-thumbnail .article-meta-row .meta-sep {
	color: #fff;
}

.has-thumbnail .article-meta-row .meta-sep {
	opacity: .5;
}

.has-thumbnail .article-meta-row a:hover {
	color: rgba(255,255,255,.8);
}

/* Lien vers la fiche du lieu dans le meta-row (📍 Nom du lieu).
   Hérite de la couleur du contexte (blanc sur hero image, muted sinon),
   avec un soulignement subtil au hover pour signaler la cliquabilité. */
.article-meta-row .meta-lieu {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}
.article-meta-row .meta-lieu:hover,
.article-meta-row .meta-lieu:focus-visible {
	border-bottom-color: currentColor;
}

.has-thumbnail .label {
	color: color-mix(in hsl, var(--accent) 90%, #fff);
}

/* Breadcrumb */
.breadcrumb {
	margin-bottom: 20px;
}

.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--muted);
}

.breadcrumb-item a {
	color: var(--muted);
	transition: color .2s ease;
}

.breadcrumb-item a:hover {
	color: var(--primary);
}

.breadcrumb-sep {
	opacity: .4;
	font-size: 12px;
}

.breadcrumb-current {
	color: var(--text);
	font-weight: 500;
	max-width: 30ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Titre de l'article */
.article-title {
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.1;
	margin: 8px 0 16px;
}

/* Meta row */
.article-meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 13px;
	color: var(--muted);
}

.article-meta-row a {
	color: var(--muted);
	font-weight: 600;
	transition: color .2s ease;
}

.article-meta-row a:hover {
	color: var(--primary);
}

/* Wrapper corps article (colonne centrale) */
.article-body-wrap {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* Contenu de l'article */
.article-content {
	/* 960px = sweet spot entre lisibilité (~85 caractères/ligne, encore
	   confortable à lire) et cohérence visuelle avec le reste du site
	   (encarts, hero à 1200px). Moins large que le container parent
	   (gardera ~120px de marge respirante de chaque côté sur desktop),
	   beaucoup plus large que l'ancien 68ch (~765px) qui paraissait
	   étriqué face au reste. */
	max-width: 960px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
}

/* Dropcap sur le premier paragraphe */
.article-content > p:first-of-type::first-letter {
	float: left;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 4.5em;
	line-height: .82;
	margin: 4px 10px 0 0;
	color: var(--primary);
}

/* Typographie du contenu */
.article-content h2,
.article-content h3,
.article-content h4 {
	margin-top: 2em;
}

.article-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-content a:hover {
	color: color-mix(in hsl, var(--primary) 80%, #000);
}

.article-content blockquote {
	margin: 2em 0;
	padding: 20px 24px;
	border-left: 4px solid var(--primary);
	background: color-mix(in hsl, var(--primary) 6%, #fff);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--muted);
}

.article-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Figures et images — désormais que .article-content est en pleine largeur
   (100% du container 1200px), le système "break-out" précédent (transform
   translateX -50% qui faisait déborder les images d'une colonne 68ch vers
   860px) n'a plus de sens : les images se contraignent simplement à 100%
   du parent. Plus de transform qui décale et provoque des bugs. */
.article-content figure,
.article-content > p > img:only-child,
.article-content > img,
.article-content .wp-block-image,
.article-content .wp-block-gallery {
	margin-top: 2em;
	margin-bottom: 2em;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.article-content figcaption {
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	margin-top: 8px;
}

/* Toutes les images du contenu : largeur fluide + cursor zoom pour signaler
   la lightbox. Le JS attache les handlers à toute <img> dans .article-content. */
.article-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	cursor: zoom-in;
}

/* Si JS désactivé, on retire le cursor (sera réactivé par .has-lightbox-ready) */
.article-content:not(.has-lightbox-ready) img {
	cursor: default;
}

/* Galeries Gutenberg — images alignées en grille, on laisse WP gérer l'intérieur */
.article-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}
.article-content .wp-block-gallery .wp-block-image {
	margin: 0;
	width: auto;
	transform: none;
}
.article-content .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   ARTICLES LEGACY — contenu importé de l'ancien site
   ============================================================
   Les articles repris de l'ancien WordPress contiennent souvent du HTML4
   ancien : attributs align="left/right/center" hérités, style="float:.."
   inline, width="600" codés en dur, <img> imbriquées dans des <table>
   utilisées pour le layout, etc. Les règles modernes plus haut ne ciblent
   que les images "Gutenberg-shape" (enfant direct, dans .wp-block-image,
   etc.) et ratent ces cas legacy → débordements, images non-centrées,
   layouts cassés.

   Ce bloc capture TOUTES les images du contenu d'article (peu importe la
   profondeur d'imbrication) et neutralise les attributs HTML4 anciens.
*/

/* 1. Toute image dans le contenu : largeur fluide, hauteur proportionnelle.
   On garde la largeur INTENTIONNELLE de l'image (attribut width="422"
   pour une statue portrait par ex) — on contraint juste pour ne pas
   dépasser le parent (max-width: 100%). Pas de width: auto qui ferait
   exploser les images à 100% du parent au lieu de leur taille naturelle. */
.article-content img,
.article-content p img,
.article-content div img,
.article-content table img,
.article-content td img {
	max-width: 100% !important;
	height: auto !important;
}

/* 2. Centrage forcé des images "seules" : si une image est dans un <p>
   sans autre texte (cas typique import ancien), on la centre. Les images
   inline (avec texte autour) gardent leur position naturelle. */
.article-content p img:only-child,
.article-content > img,
.article-content figure img {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3. Reset des attributs d'alignement HTML4 / styles inline floats.
   Sur les anciens articles, on trouve <img align="left"> ou
   <img style="float:left"> qui font déborder le texte autour. Ici on
   neutralise pour reprendre le centrage moderne. */
.article-content img[align="left"],
.article-content img[align="right"],
.article-content img[align="center"],
.article-content img[style*="float:left"],
.article-content img[style*="float: left"],
.article-content img[style*="float:right"],
.article-content img[style*="float: right"] {
	float: none !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

/* 4. Tables de layout legacy : certains imports utilisent des <table>
   sans bordure pour positionner les images. On force la table à se
   comporter comme un bloc fluide, sans débordement. */
.article-content table {
	max-width: 100% !important;
	width: auto !important;
	border-collapse: collapse;
	margin: 1.5em auto;
}
.article-content table td,
.article-content table th {
	max-width: 100%;
	padding: 8px;
	vertical-align: top;
}

/* 5. Figures legacy avec largeur fixe : si une <figure> a un style
   width="600px" en dur, on relâche. */
.article-content figure[style*="width"] {
	width: auto !important;
	max-width: min(860px, calc(100vw - 32px)) !important;
}

/* 6. Liens autour d'images : certains imports enveloppent les <img> dans
   un <a href="..."> qui devient inline-block et casse le centrage. */
.article-content a:has(> img:only-child) {
	display: block;
	text-align: center;
}
.article-content p > a > img {
	display: block;
	margin: 0 auto;
}

/* 7. Classes d'alignement WordPress natives. Le thème ne charge pas le
   stylesheet block-library.css de WP par défaut, donc .aligncenter,
   .alignnone, .alignleft, .alignright n'ont aucun effet. Cas réels
   rencontrés sur les imports :
     - <figure class="wp-block-image alignnone"> → image collée à gauche
     - <div class="wp-block-image"><figure class="aligncenter"> → ignoré
   On définit ici le comportement attendu pour chaque classe. */
.article-content .aligncenter,
.article-content figure.aligncenter,
.article-content img.aligncenter,
.article-content .alignnone,
.article-content figure.alignnone,
.article-content img.alignnone,
.article-content .wp-block-image:not(.alignleft):not(.alignright) {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	/* Neutralise le transform: translateX(-50%) du système "break-out"
	   appliqué aux figures pleine largeur (règle media query plus haut).
	   Sans ça, une image legacy <p><img class="alignnone" width="850"></p>
	   se retrouvait décalée à gauche, car margin auto seul ne suffit pas
	   à contrer le transform. */
	transform: none !important;
}

/* Cas problématique : <div class="wp-block-image"><figure class="aligncenter"><img>.
   Plusieurs approches ont été tentées (text-align, margin auto, transform
   reset, flexbox). Cette version utilise la spécificité MAXIMALE avec
   préfixe body + classes WP body pour battre toute cascade adverse :
     1. Wrapper : transform DÉSACTIVÉ totalement, width fluide + margin auto
        (au lieu du hack 50% + translateX(-50%) qui décale tout en cascade)
     2. Figure : inline-block centrée par text-align du parent
     3. Image : display block + margin auto dans la figure
   Le transform du wrapper était la racine du problème : il décalait tout
   le contenu enfant qui ne pouvait plus se recentrer naturellement. */
body .article-content .wp-block-image,
body.wp-singular .article-content .wp-block-image {
	width: 100% !important;
	max-width: min(860px, calc(100vw - 32px)) !important;
	margin-top: 2em !important;
	margin-bottom: 2em !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: none !important;
	display: block !important;
	text-align: center !important;
	float: none !important;
	left: auto !important;
	right: auto !important;
	position: relative;
}
body .article-content .wp-block-image > figure,
body .article-content .wp-block-image figure,
body.wp-singular .article-content .wp-block-image figure {
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transform: none !important;
	/* display: block (au lieu de inline-block) : la figure occupe 100% du
	   wrapper, ce qui permet au figcaption de s'étaler normalement sur la
	   largeur du wrapper et de wrap le texte sur 1-2 lignes au lieu d'un
	   mot par ligne. L'image est centrée par son propre margin auto, pas
	   besoin de shrink-fit la figure. */
	display: block !important;
	text-align: center !important;
	float: none !important;
	left: auto !important;
	right: auto !important;
}
body .article-content .wp-block-image img,
body .article-content .wp-block-image figure img,
body.wp-singular .article-content .wp-block-image img {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	height: auto !important;
	float: none !important;
}
body .article-content .wp-block-image figcaption,
body .article-content .wp-block-image .wp-element-caption {
	text-align: center !important;
	margin-top: 8px;
}

/* === Cas particulier des CAPTIONS LEGACY [caption] ===
   Le shortcode [caption] historique de WordPress (utilisé avant Gutenberg)
   génère un markup différent : <figure class="wp-caption alignnone" style="width: 285px">.
   Pas de wrapper .wp-block-image, l'image est souvent enveloppée dans <a>,
   et la figure a un style inline width qui force la largeur image+padding.

   Le transform: translateX(-50%) de la règle "figure pleine largeur"
   s'applique aussi à ces figures legacy → décale à gauche. On neutralise.
*/
body .article-content figure.wp-caption,
body .article-content figure.wp-caption.alignnone,
body .article-content figure.wp-caption.aligncenter {
	transform: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
	text-align: center !important;
	max-width: 100% !important;
	float: none !important;
}
/* Image dans une wp-caption (souvent enveloppée dans <a>) */
body .article-content figure.wp-caption img,
body .article-content figure.wp-caption a img {
	display: block !important;
	margin: 0 auto !important;
	max-width: 100% !important;
	height: auto !important;
}
/* Le lien <a> autour de l'image — block pour ne pas casser le centrage */
body .article-content figure.wp-caption > a {
	display: block;
	margin: 0 auto;
}
/* Caption legacy : .wp-caption-text (≠ .wp-element-caption du Gutenberg) */
body .article-content figure.wp-caption .wp-caption-text,
body .article-content figure.wp-caption figcaption {
	text-align: center !important;
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}

/* alignleft / alignright : conserver le float ancien si l'admin le veut
   explicitement. Sur mobile (< 600px), on neutralise pour éviter le wrap
   text incompréhensible sur écran étroit. */
.article-content .alignleft,
.article-content figure.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
	max-width: 50%;
}
.article-content .alignright,
.article-content figure.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
	max-width: 50%;
}
@media (max-width: 600px) {
	.article-content .alignleft,
	.article-content figure.alignleft,
	.article-content .alignright,
	.article-content figure.alignright {
		float: none;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ============================================================
   §41 — Lightbox vanilla (single article)
   Construite et alimentée par JS dans main.js (IIFE article-lightbox).
   ============================================================ */

.af-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(8, 12, 20, 0.94);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .2s ease;
}

.af-lightbox.is-open {
	display: flex;
	opacity: 1;
}

.af-lightbox__inner {
	position: relative;
	max-width: min(1400px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.af-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 120px);
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0,0,0,.55);
	cursor: zoom-out;
	background: #111;
}

.af-lightbox__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -64px;
	color: rgba(255,255,255,.86);
	font-size: 14px;
	text-align: center;
	padding: 8px 16px;
	pointer-events: none;
}

.af-lightbox__close,
.af-lightbox__prev,
.af-lightbox__next {
	position: absolute;
	top: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.10);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .15s ease;
	z-index: 2;
}

.af-lightbox__close:hover,
.af-lightbox__prev:hover,
.af-lightbox__next:hover {
	background: rgba(255,255,255,.20);
	transform: scale(1.06);
}

.af-lightbox__close {
	right: 16px;
}

.af-lightbox__prev,
.af-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.af-lightbox__prev:hover,
.af-lightbox__next:hover {
	transform: translateY(-50%) scale(1.06);
}

.af-lightbox__prev { left: 16px; }
.af-lightbox__next { right: 16px; }

.af-lightbox__counter {
	position: absolute;
	top: 22px;
	left: 24px;
	color: rgba(255,255,255,.72);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Body lock quand la lightbox est ouverte */
body.af-lightbox-open {
	overflow: hidden;
}

/* Mobile : moins d'espace autour, caption sous l'image */
@media (max-width: 600px) {
	.af-lightbox {
		padding: 12px;
	}
	.af-lightbox__img {
		max-height: calc(100vh - 100px);
	}
	.af-lightbox__close,
	.af-lightbox__prev,
	.af-lightbox__next {
		width: 40px;
		height: 40px;
	}
	.af-lightbox__caption {
		bottom: -52px;
		font-size: 13px;
	}
}

/* Réduction des animations utilisateur */
@media (prefers-reduced-motion: reduce) {
	.af-lightbox,
	.af-lightbox__close,
	.af-lightbox__prev,
	.af-lightbox__next {
		transition: none;
	}
}

.article-content ul,
.article-content ol {
	padding-left: 1.5em;
}

.article-content li {
	margin-bottom: .4em;
}

.article-content hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 2.5em 0;
}

/* Tags en bas de l'article */
.article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 68ch;
	margin: 32px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.article-tags .tags-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.article-tags .chip {
	font-size: 12px;
}

/* Navigation prev / next */
.article-nav {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 68ch;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.article-nav-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 48%;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .2s ease, background .2s ease;
}

.article-nav-link:hover {
	border-color: var(--primary);
	background: color-mix(in hsl, var(--primary) 4%, #fff);
}

.article-nav-next {
	margin-left: auto;
	text-align: right;
}

.nav-dir {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--primary);
}

.nav-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
}

/* Articles liés / sections croisées — utilise le même token que .section */
.related-posts {
	padding-top: 0;
	margin-top: var(--section-gap);
	background: transparent;
}

/* (Règle `.site-main > .section.related-posts:last-of-type` supprimée :
   l'espace avant le footer est pilotée par `margin-top` de `.site-footer`
   et margin-collapsing fait le reste, peu importe la structure du template.) */

/* =========================================================
   13. COURS — archive + fiche
   ========================================================= */

/* Barre de filtre (archive-cours) */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
}

.filter-bar .chip.active {
	background: var(--primary);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}

/* Badge niveau (sur les cartes et la fiche) */
.badge-niveau {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	border: 1px solid transparent;
}

/* Couleurs par niveau.
   On double les sélecteurs pour couvrir 2 cas :
   - .badge-niveau--tous          : valeur ACF clé "tous" (cas standard)
   - .badge-niveau--tous-niveaux  : valeur legacy "Tous niveaux" sanitize → "tous-niveaux"
   Idem pour les autres niveaux par sécurité. */
.badge-niveau--tous,
.badge-niveau--tous-niveaux {
	background: color-mix(in hsl, var(--primary) 15%, #fff);
	border-color: color-mix(in hsl, var(--primary) 35%, #fff);
	color: #054944;
}

.badge-niveau--debutant {
	background: #e8f5e9;
	border-color: #a5d6a7;
	color: #1b5e20;
}

.badge-niveau--intermediaire {
	background: #fff8e1;
	border-color: #ffe082;
	color: #7b5800;
}

.badge-niveau--avance {
	background: #fce4ec;
	border-color: #f48fb1;
	color: #880e4f;
}

/* Badge positionné sur l'image de la carte */
.card .media {
	position: relative;
}

.card .media .badge-niveau {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

/* Meta cours sur les cartes (durée, lieu, prof) */
.cours-meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	color: var(--muted);
}

.cours-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cours-meta-icon {
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}

/* ---- Fiche cours (single-cours) ---- */

.cours-body-wrap {
	padding-top: 40px;
}

/* Deux colonnes : contenu + sidebar */
.cours-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: stretch;  /* les items s'étirent pour remplir leur zone */
}

.cours-content {
	font-size: 17px;
	line-height: 1.75;
	/* Garde-fous responsive : empêche le contenu migré de l'ancien site
	   (images avec width="800" en attribut HTML, tables non-responsive,
	   embeds Vimeo/YouTube, etc.) de déborder du viewport sur mobile. */
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Médias intégrés dans the_content() — toujours fluides */
.cours-content img,
.cours-content iframe,
.cours-content video,
.cours-content embed,
.cours-content object,
.cours-content figure {
	max-width: 100%;
	height: auto;
}

/* Tables : scroll horizontal si trop larges plutôt que débordement */
.cours-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cours-content pre,
.cours-content code {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.cours-content h2,
.cours-content h3 {
	margin-top: 2em;
}

.cours-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

/* Carte d'info (sidebar) */
.info-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.info-card-title {
	font-size: 18px;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

/* Liste définition (niveau, durée, tarif) */
.info-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
}

.info-list dt {
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}

.info-list dd {
	margin: 0;
	color: var(--text);
}

/* Lieu */
.info-lieu-nom {
	font-weight: 600;
	margin: 0;
}

.info-lieu-nom a {
	color: var(--primary);
}

.info-lieu-adresse {
	font-size: 13px;
	margin: 0;
}

/* Prof mini (sidebar) */
.prof-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.prof-mini {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--radius);
	transition: background .2s ease;
}

.prof-mini:hover {
	background: color-mix(in hsl, var(--primary) 6%, #fff);
}

.prof-mini-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(135deg,
		color-mix(in hsl, var(--primary) 30%, #fff),
		color-mix(in hsl, var(--accent) 20%, #fff));
}

.prof-mini-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prof-mini-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.prof-mini-nom {
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
}

.prof-mini-meta {
	font-size: 12px;
}

/* =========================================================
   14. SÉMINAIRES — archive + fiche
   ========================================================= */

/* Badge destination (sur image, dans une carte) */
.badge-dest {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	background: color-mix(in hsl, var(--cta) 18%, #fff);
	border: 1px solid color-mix(in hsl, var(--cta) 40%, #fff);
	color: #7b4e00;
}

/* Badge destination dans le hero d'une fiche séminaire : retour au flux normal,
   sinon il se cale en absolute top:12 left:12 du .hero-single-content et
   se retrouve désaligné par rapport au breadcrumb / titre / date. */
.article-meta-top .badge-dest {
	position: static;
	padding: 6px 14px;
	font-size: 12px;
}

/* CTA inscription sidebar */
.info-card--cta {
	background: color-mix(in hsl, var(--primary) 6%, #fff);
	border-color: color-mix(in hsl, var(--primary) 30%, #fff);
}

.btn-full {
	width: 100%;
	justify-content: center;
}

.info-places {
	text-align: center;
	font-size: 13px;
	margin: 0;
}

/* =========================================================
   Séminaires — Mode "Contact direct" (ACF semi_contacts_inscription)
   Affiche un encart avec un bouton mailto par organisateur quand le
   séminaire utilise ce mode d'inscription (pas de lien externe ni form
   contact). Affiché dans la sidebar à la place du bouton standard.
   ========================================================= */
.semi-contacts-inscr {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.semi-contacts-inscr__intro {
	font-size: 13px;
	margin: 0 0 12px;
	line-height: 1.5;
}

.semi-contacts-inscr__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.semi-contacts-inscr__list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.semi-contacts-inscr__btn {
	width: 100%;
	justify-content: center;
	font-size: 14px;
}

.semi-contacts-inscr__email {
	font-size: 12px;
	text-align: center;
	word-break: break-all;
}

/* Texte libre injecté via WYSIWYG (semi_inscription_custom) */
.semi-inscription-custom {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.65;
}

.semi-inscription-custom p {
	margin: 0 0 .8em;
}

.semi-inscription-custom p:last-child {
	margin-bottom: 0;
}

.semi-inscription-custom a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================
   15. PROFESSEURS — archive + fiche
   ========================================================= */

/* Grille portraits : ratio 3/4 */
.card-prof-archive .media.media-portrait {
	aspect-ratio: 3 / 4;
}

/* Lieux du prof sur les cartes archive */
.prof-lieux-list {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	margin: 0;
}

/* Hero prof : portrait centré, plus étroit */
.hero-prof {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg,
		color-mix(in hsl, var(--primary) 15%, #fff),
		color-mix(in hsl, var(--accent) 10%, #fff) 60%,
		#fff);
	padding: 64px 0 48px;
}

.hero-prof.has-thumbnail {
	min-height: 520px;
	display: flex;
	align-items: flex-end;
	padding: 80px 0 48px;
}

.hero-prof-img {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-prof-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Object-position par défaut (carré ou ratio inconnu) : center center.
	   Pour les ratios spécifiques (portrait/paysage), des modifiers ciblés
	   plus bas appliquent un object-position adapté.
	   Voir single-professeurs.php pour la logique de détection PHP. */
	object-position: center center;
	display: block;
}

/* Photo PAYSAGE (ratio > 1.4) — ex Rémy avec photo de paysage où le sujet
   est au milieu/bas. Sans correction, on verrait le ciel/décor en haut.
   center 35% privilégie le tiers supérieur tout en restant centré. */
.hero-prof--landscape .hero-prof-img img {
	object-position: center 35%;
}

/* Photo PORTRAIT (ratio < 0.95) — ex Dorothée avec photo 1200×1600 bien
   cadrée. Le visage est au milieu vertical de la photo, donc center center
   (déjà la règle par défaut) est ce qu'il faut. On l'explicite pour clarté. */
.hero-prof--portrait .hero-prof-img img {
	object-position: center center;
}

/* Photo CARRÉE (ratio entre 0.95 et 1.4) — comportement neutre. */
.hero-prof--square .hero-prof-img img {
	object-position: center center;
}

/* Formation block dans le contenu */
.prof-formation {
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid var(--line);
}

.prof-formation h2 {
	font-size: 26px;
	margin-bottom: .5em;
}

/* =========================================================
   16. LIEUX — fiche
   ========================================================= */

/* Lien lieu dans la sidebar */
.lieux-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lieu-mini {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .2s ease, background .2s ease;
}

.lieu-mini:hover {
	border-color: var(--primary);
	background: color-mix(in hsl, var(--primary) 5%, #fff);
}

.lieu-mini-nom {
	font-weight: 600;
	font-size: 14px;
	color: var(--primary);
}

.lieu-mini-adr {
	font-size: 12px;
}

/* Horaires (tableau jour / heure) */
.lieu-horaires {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.horaire-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 4px 0;
	border-bottom: 1px solid var(--line);
}

.horaire-row:last-child {
	border-bottom: none;
}

.horaire-jour {
	font-weight: 600;
	color: var(--text);
}

.horaire-heure {
	color: var(--muted);
}

/* =========================================================
   12. RESPONSIVE — single & archive
   ========================================================= */
@media (max-width: 900px) {
	.hero-single.has-thumbnail {
		min-height: 340px;
		padding: 60px 0 36px;
	}

	.article-content {
		font-size: 16px;
	}

	.article-nav {
		flex-direction: column;
	}

	.article-nav-link {
		max-width: 100%;
	}

	.article-nav-next {
		text-align: left;
	}

	/* Cours / séminaires / lieux / profs : colonne unique sous 900px */
	.cours-layout {
		grid-template-columns: 1fr;
	}

	/* Filet de sécurité : empêche tout contenu rebelle (images legacy,
	   embeds, etc.) de provoquer un scroll horizontal de la page. */
	.cours-body-wrap,
	.cours-content {
		overflow-x: hidden;
	}

	.cours-sidebar {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.cours-sidebar .info-card:first-child {
		grid-column: 1 / -1;
	}

	/* Hero prof */
	.hero-prof.has-thumbnail {
		min-height: 380px;
		padding: 60px 0 36px;
	}
}

@media (max-width: 600px) {
	.article-title {
		font-size: 28px;
	}

	.hero-single {
		padding: 48px 0 32px;
	}

	.article-content > p:first-of-type::first-letter {
		font-size: 3.5em;
	}

	.cours-sidebar {
		grid-template-columns: 1fr;
	}

	.cours-sidebar .info-card:first-child {
		grid-column: auto;
	}
}

/* =========================================================
   17. PDF TARIFS + PLANNING PLUGIN
   ========================================================= */

/* Barre PDF tarifs (archive cours + séminaires) */
.tarif-pdf-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: color-mix(in hsl, var(--cta) 10%, #fff);
	border: 1px solid color-mix(in hsl, var(--cta) 30%, #fff);
	border-radius: var(--radius-lg);
	padding: 16px 22px;
	margin-top: 24px;
}

.tarif-pdf-bar p {
	margin: 0;
	font-size: 14px;
}

/* Section planning sur fiches prof/lieu */
.planning-section {
	border-top: 1px solid var(--line);
	padding-top: 48px;
}

.planning-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 600px;
}

.planning-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
}

.planning-row-lieu {
	font-size: 13px;
}

/* =========================================================
   18. PAGE STATIQUE (page.php)
   ========================================================= */
/* .page-wrap : padding-bottom piloté par .site-footer margin-top */

.hero-page {
	padding: 48px 0 40px;
	background:
		radial-gradient(700px 300px at 0% 0%, color-mix(in hsl, var(--primary) 8%, transparent), transparent 60%),
		#fff;
	border-bottom: 1px solid var(--line);
	margin-bottom: 48px;
}

.page-title {
	font-size: clamp(28px, 3.5vw, 42px);
	margin: 12px 0 0;
}

.page-content-wrap {
	display: flex;
	justify-content: center;
}

.page-content {
	width: 100%;
	max-width: 72ch;
	font-size: 17px;
	line-height: 1.75;
}

/* =========================================================
   18. PAGE 404
   ========================================================= */
.page-404-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 64px 24px;
}

.page-404 {
	text-align: center;
	max-width: 480px;
}

.page-404-code {
	display: block;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: clamp(80px, 16vw, 140px);
	line-height: 1;
	color: color-mix(in hsl, var(--primary) 20%, var(--line));
	margin-bottom: 8px;
}

.page-404-title {
	font-size: clamp(24px, 3vw, 36px);
	margin: 0 0 12px;
}

.page-404-lead {
	font-size: 16px;
	margin-bottom: 32px;
}

.page-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* =========================================================
   19. STYLES GLOBAUX ÉDITEUR (entry-content)
       S'applique à tous les templates qui affichent
       du contenu WordPress : single, page, cours, profs…
   ========================================================= */

/* Sélection de texte */
::selection {
	background: color-mix(in hsl, var(--primary) 22%, #fff);
	color: var(--text);
}

/* Tableaux */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 1.5em 0;
}

.entry-content th,
.entry-content td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.entry-content th {
	font-weight: 700;
	background: color-mix(in hsl, var(--primary) 6%, #fff);
	color: var(--text);
}

.entry-content tr:last-child td {
	border-bottom: none;
}

/* Code */
.entry-content code {
	font-family: 'Fira Code', 'Courier New', monospace;
	font-size: .88em;
	background: color-mix(in hsl, var(--primary) 8%, #fff);
	border: 1px solid color-mix(in hsl, var(--primary) 20%, #fff);
	border-radius: 4px;
	padding: 2px 6px;
	color: #054944;
}

.entry-content pre {
	background: #1e1e2e;
	color: #cdd6f4;
	border-radius: var(--radius);
	padding: 20px 24px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
	margin: 1.5em 0;
}

.entry-content pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Alignements WordPress (classes Gutenberg) */
.entry-content .alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
	max-width: 45%;
}

.entry-content .alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
	max-width: 45%;
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.entry-content .alignwide {
	margin-left: -40px;
	margin-right: -40px;
	max-width: calc(100% + 80px);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Images dans le contenu */
.entry-content img {
	border-radius: var(--radius);
	height: auto;
}

.entry-content figure.wp-block-image {
	margin: 1.5em 0;
}

.entry-content .wp-block-image figcaption {
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	margin-top: 8px;
	font-style: italic;
}

/* Boutons Gutenberg */
.entry-content .wp-block-button__link {
	background: var(--primary);
	color: #fff;
	border-radius: var(--radius);
	padding: 12px 20px;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	transition: background .2s ease;
}

.entry-content .wp-block-button__link:hover {
	background: color-mix(in hsl, var(--primary) 85%, #000);
}

/* Separateur */
.entry-content .wp-block-separator,
.entry-content hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 2.5em 0;
}

/* Clearfix pour les flottants */
.entry-content::after {
	content: '';
	display: table;
	clear: both;
}

/* =========================================================
   20. PLACEHOLDER DES IMAGES (cartes sans photo)
       Gradient animé subtil pour indiquer que l'image
       n'est pas encore renseignée.
   ========================================================= */
.card .media:not(:has(img)),
.card .media-portrait:not(:has(img)) {
	background:
		linear-gradient(135deg,
			color-mix(in hsl, var(--primary) 18%, #fff) 0%,
			color-mix(in hsl, var(--accent) 12%, #fff) 50%,
			color-mix(in hsl, var(--cta) 10%, #fff) 100%);
	position: relative;
	overflow: hidden;
}

/* Shimmer subtil sur les placeholders */
.card .media:not(:has(img))::after,
.card .media-portrait:not(:has(img))::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255,255,255,.35) 50%,
		transparent 60%
	);
	animation: shimmer 2.4s ease-in-out infinite;
}

@keyframes shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* =========================================================
   21. RESPONSIVE — page.php + 404 + éditeur
   ========================================================= */
@media (max-width: 900px) {
	.hero-page {
		padding: 36px 0 28px;
		margin-bottom: 32px;
	}

	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin: 1em 0;
	}

	.entry-content .alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.page-404-actions {
		flex-direction: column;
		align-items: center;
	}

	.page-404-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================
   22. PAGE HORAIRES — hero, intro, notice planning
   ========================================================= */

/* Intro éditeur sous le hero */
.horaires-intro {
	max-width: 68ch;
	margin: 32px auto 0;
	font-size: 1.05rem;
	color: var(--muted);
	line-height: 1.75;
}

/* Zone principale du planning */
.planning-embed {
	margin-top: 40px;
}

/* Variante home : suit déjà un .section-head qui fournit le 16px d'écart
   sous le titre — on neutralise margin + padding-top internes du widget
   WCS pour aligner l'agenda comme les autres sections directement sous
   leur titre. */
.planning-embed--home {
	margin-top: 0;
}
/* Le plugin pose ses styles via un sélecteur ID (#wcs-app-N) plus
   spécifique que nos classes. On utilise !important uniquement ici
   pour battre la spécificité ID sans surcharger toutes les règles. */
.planning-embed--home > .wcs-timetable__wrapper,
.planning-embed--home > .wcs-timetable__container,
.planning-embed--home [id^="wcs-app"],
.planning-embed--home .wcs-timetable,
.planning-embed--home .wcs-timetable__inner {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Reset des marges bottom des conteneurs externes du widget WCS.
   Les règles sur .wcs-more sont posées plus haut (§35quater). */
.planning-embed > .wcs-timetable__wrapper,
.planning-embed > .wcs-timetable__container {
	margin-bottom: 0;
}

/* Notice "planning non configuré" */
.planning-notice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 32px;
}

.planning-notice p {
	margin: 0;
	color: var(--muted);
}

/* Variante admin (guide de config) */
.planning-notice--admin {
	background: color-mix(in hsl, var(--primary) 6%, #fff);
	border-color: color-mix(in hsl, var(--primary) 30%, #fff);
}

.planning-notice--admin strong {
	color: var(--text);
}

.planning-notice--admin code {
	background: color-mix(in hsl, var(--primary) 10%, #fff);
	border: 1px solid color-mix(in hsl, var(--primary) 20%, #fff);
	border-radius: 5px;
	padding: 1px 5px;
	font-size: 0.88em;
}

/* Lien dans la notice admin */
.planning-notice--admin a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================
   23. PLUGIN EVENTS SCHEDULE — surcharges CSS (wcs_*)
   ========================================================= */

/*
 * Le plugin génère ses propres classes (.wcs-*, .wcs_timetable, etc.).
 * On surcharge ici pour s'aligner sur le design system.
 * On évite !important autant que possible — on augmente la spécificité.
 */

/* Conteneur global du timetable */
.planning-embed #wcs-widget-wrap,
.planning-embed .wcs-timetable-wrap,
.planning-embed [class*="wcs-"] {
	font-family: var(--font-body, 'Montserrat', sans-serif);
}

/* Fond et bords des panneaux plugin */
.planning-embed .wcs-panel,
.planning-embed .wcs-card,
.planning-embed .wcs-event-wrap {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* En-tête des colonnes de jours */
.planning-embed .wcs-day-header,
.planning-embed .wcs-column-header {
	background: color-mix(in hsl, var(--primary) 8%, #fff);
	color: var(--text);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 10px 10px 0 0;
	padding: 10px 14px;
}

/* Carte individuelle d'un cours */
.planning-embed .wcs-event,
.planning-embed .wcs-class-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 8px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.planning-embed .wcs-event:hover,
.planning-embed .wcs-class-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

/* Nom du cours */
.planning-embed .wcs-event-name,
.planning-embed .wcs-class-name {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 1.05rem;
	color: var(--text);
	margin: 0 0 4px;
}

/* Heure */
.planning-embed .wcs-event-time,
.planning-embed .wcs-time {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: 0.02em;
}

/* Instructeur */
.planning-embed .wcs-event-instructor,
.planning-embed .wcs-instructor {
	font-size: 0.8rem;
	color: var(--muted);
}

/* Bouton "Réserver" / CTA du plugin */
.planning-embed .wcs-btn,
.planning-embed .wcs-book-btn,
.planning-embed .wcs-reserve-btn {
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 8px 16px;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.planning-embed .wcs-btn:hover,
.planning-embed .wcs-book-btn:hover {
	opacity: 0.88;
}

/* Filtre / onglets du plugin */
.planning-embed .wcs-filter-bar,
.planning-embed .wcs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.planning-embed .wcs-filter-btn,
.planning-embed .wcs-tab {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.planning-embed .wcs-filter-btn.active,
.planning-embed .wcs-filter-btn:hover,
.planning-embed .wcs-tab.active,
.planning-embed .wcs-tab:hover {
	background: color-mix(in hsl, var(--primary) 12%, #fff);
	border-color: color-mix(in hsl, var(--primary) 40%, #fff);
	color: var(--primary);
}

/* Badge de catégorie (type de cours) */
.planning-embed .wcs-category-badge,
.planning-embed .wcs-type-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	background: color-mix(in hsl, var(--accent) 12%, #fff);
	color: color-mix(in hsl, var(--accent) 70%, #000);
	border: 1px solid color-mix(in hsl, var(--accent) 30%, #fff);
}

/* Sélecteur de semaine / navigation calendrier */
.planning-embed .wcs-nav-prev,
.planning-embed .wcs-nav-next {
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 14px;
	color: var(--text);
	cursor: pointer;
	font-size: 0.88rem;
	transition: background 0.15s ease;
}

.planning-embed .wcs-nav-prev:hover,
.planning-embed .wcs-nav-next:hover {
	background: color-mix(in hsl, var(--primary) 8%, #fff);
}

/* Titre de la semaine */
.planning-embed .wcs-week-title {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 1.1rem;
	color: var(--text);
}

/* Modal/popup du plugin */
.planning-embed .wcs-modal-wrap,
#wcs-vue-modal .wcs-modal-inner {
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
	border: 1px solid var(--line);
}

#wcs-vue-modal .wcs-modal-title {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: 1.4rem;
	color: var(--text);
}

/* =========================================================
   24. RESPONSIVE — page horaires & planning
   ========================================================= */
@media (max-width: 900px) {
	.horaires-intro {
		max-width: 100%;
		padding: 0 4px;
	}

	.planning-embed {
		margin-top: 28px;
	}

	/* Le plugin passe souvent en vue liste sur mobile */
	.planning-embed .wcs-timetable-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 600px) {
	.planning-notice {
		padding: 20px;
	}

	.planning-embed .wcs-event,
	.planning-embed .wcs-class-item {
		padding: 10px 12px;
	}
}

/* =========================================================
   25. NEWSLETTER BREVO — messages de retour + champ caché
   ========================================================= */

/* Champ honeypot Brevo — invisible pour les humains */
.input--hidden {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/* Messages succès / erreur affichés par le JS Brevo */
.newsletter-msg {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.85rem;
	margin-bottom: 10px;
	line-height: 1.5;
}

.newsletter-msg--success {
	background: color-mix(in hsl, var(--primary) 10%, #fff);
	border: 1px solid color-mix(in hsl, var(--primary) 30%, #fff);
	color: color-mix(in hsl, var(--primary) 80%, #000);
}

.newsletter-msg--error {
	background: color-mix(in hsl, var(--accent) 10%, #fff);
	border: 1px solid color-mix(in hsl, var(--accent) 30%, #fff);
	color: color-mix(in hsl, var(--accent) 80%, #000);
}

/* Erreur inline sur le champ email (injectée par le JS Brevo dans .entry__error) */
.entry__error {
	display: block;
	font-size: 0.78rem;
	color: color-mix(in hsl, var(--accent) 80%, #000);
	margin-top: 4px;
	width: 100%;
}

/* Masqué tant que vide — le JS Brevo remplit le contenu au besoin */
.entry__error:empty {
	display: none;
}

/* Wrapper champ + bouton sur la même ligne */
.newsletter-field-wrap {
	display: flex;
	gap: 8px;
	flex: 1;
	width: 100%;
}

/* =========================================================
   26. PAGE CONTACT — formulaire, infos pratiques, alertes
   ========================================================= */

/* Grille 2 colonnes : formulaire + infos */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 32px;
	align-items: stretch;  /* les items s'étirent pour remplir leur zone */
	margin: 40px 0 56px;
}

/* Titres de section */
.contact-form-wrap h2,
.contact-info-wrap h2 {
	font-size: 1.5rem;
	margin: 0 0 20px;
}

/* ── Formulaire ── */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text);
	letter-spacing: 0.02em;
}

.required {
	color: var(--accent);
	margin-left: 2px;
}

.form-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: var(--card);
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in hsl, var(--primary) 18%, transparent);
}

.form-input::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.form-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F5F5F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

.form-textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.6;
}

.form-notice {
	font-size: 0.8rem;
	margin: 0;
}

.form-submit {
	align-self: flex-start;
	padding: 14px 28px;
	font-size: 1rem;
}

/* Honeypot — invisible pour les humains */
.contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	tab-size: 0;
}

/* ── Alertes retour ── */
.contact-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 14px;
	margin: 24px 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.contact-alert--success {
	background: color-mix(in hsl, var(--primary) 8%, #fff);
	border: 1px solid color-mix(in hsl, var(--primary) 28%, #fff);
	color: color-mix(in hsl, var(--primary) 80%, #000);
}

.contact-alert--error {
	background: color-mix(in hsl, var(--accent) 8%, #fff);
	border: 1px solid color-mix(in hsl, var(--accent) 28%, #fff);
	color: color-mix(in hsl, var(--accent) 80%, #000);
}

/* ── Infos pratiques ── */
.contact-info-wrap .info-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-info-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.contact-info-icon {
	font-size: 1.2rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}

.contact-info-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 0 3px;
}

.contact-info-value {
	font-size: 0.95rem;
	color: var(--text);
	margin: 0;
	text-decoration: none;
}

/* Lien adresse vers la fiche lieu (page-contact) — discret par défaut */
.contact-info-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}

a.contact-info-value:hover,
.contact-info-link:hover,
.contact-info-link:focus-visible {
	color: var(--primary);
	text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* =========================================================
   27. PAGE ARTICLES — À la une, Rubriques, Explorer
   ========================================================= */

/* Wrapper général — aligné sur .archive-wrap pour cohérence hauteur du hero */
.articles-wrap {
	padding-top: var(--space-5);  /* 24px — même hauteur que /contact/, /cours/, etc. */
	/* padding-bottom géré par .site-footer { margin-top: --footer-gap } */
}

/* ----- À la une — grille featured ----- */
.featured {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 18px;
	align-items: stretch;  /* les items s'étirent pour remplir leur zone */
}

/* Grande carte : occupe les 2 rangées de la colonne gauche */
.featured .big {
	grid-row: span 2;
	height: 100%;          /* force le remplissage de la zone span 2 */
}

/* Carte horizontale : image à gauche, contenu à droite */
.tile-h {
	display: grid;
	grid-template-columns: 1.1fr 1.6fr;
	min-height: 340px;
}

.tile-h .media,
.tile-h .media-tile {
	aspect-ratio: unset;     /* on laisse la hauteur s'étirer */
	height: 100%;
	border-radius: 0;        /* les bords arrondis sont sur .card */
	border-right: 1px solid var(--line);
}

.tile-h .media img,
.tile-h .media-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lien sur toute la hauteur */
.tile-h .card-link {
	display: grid;
	grid-template-columns: 1.1fr 1.6fr;
	width: 100%;
	height: 100%;
}

/* Corps de la grande carte */
.tile-h .body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 24px;
	gap: 10px;
}

.tile-h .card-title {
	font-size: 1.45rem;
	margin: 0;
}

.featured-cta {
	align-self: flex-start;
	margin-top: 6px;
}

/* ----- Rubriques — mosaïque ----- */
.tiles-mosaic {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 18px;
}

.card-rubrique {
	display: block;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-rubrique:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

/* Dégradés distincts par position pour les tuiles sans image */
.media-rubrique {
	aspect-ratio: 16 / 8;
	background: linear-gradient(
		135deg,
		color-mix(in hsl, var(--primary) 18%, #fff),
		color-mix(in hsl, var(--accent)  14%, #fff)
	);
}

/* Variation de couleur par index via custom property */
.media-rubrique[style*="--rubrique-index: 1"] {
	background: linear-gradient(135deg,
		color-mix(in hsl, var(--accent)  16%, #fff),
		color-mix(in hsl, var(--primary) 10%, #fff));
}
.media-rubrique[style*="--rubrique-index: 2"] {
	background: linear-gradient(135deg, #e8f5f3, #f0faf9);
}
.media-rubrique[style*="--rubrique-index: 3"] {
	background: linear-gradient(135deg,
		color-mix(in hsl, var(--cta) 18%, #fff), #fff9ee);
}
.media-rubrique[style*="--rubrique-index: 4"] {
	background: linear-gradient(135deg, #f5eef8, #ede6f5);
}
.media-rubrique[style*="--rubrique-index: 5"] {
	background: linear-gradient(135deg,
		color-mix(in hsl, var(--primary) 10%, #fff), #e8f7f5);
}

.card-rubrique h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

/* ----- Explorer — toolbar ----- */
.toolbar-articles {
	position: sticky;
	/* Décale sous le sticky wrap (header + flash) avec marge confortable
	   pour éviter le chevauchement. Fallback élevé pour tenir compte du
	   menu agrandi + flash info éventuel. */
	top: calc(var(--header-h, 160px) + 20px);
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 12px 16px;
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

.toolbar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
}

.toolbar-chips .chip {
	white-space: nowrap;
}

.toolbar-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 4px 4px 14px;
}

.toolbar-search-input {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.88rem;
	color: var(--text);
	width: 200px;
	outline: none;
}

.toolbar-search-input::placeholder {
	color: var(--muted);
}

.toolbar-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: none;
	background: var(--primary);
	color: #fff;
	cursor: pointer;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.toolbar-search-btn:hover {
	opacity: 0.85;
}

.toolbar-search-btn svg {
	stroke: #fff;
}

/* Feed articles */
.articles-feed {
	margin-top: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1000px) {
	.tiles-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.featured {
		grid-template-columns: 1fr;
	}

	.featured .big {
		grid-row: span 1;
	}

	.tile-h,
	.tile-h .card-link {
		grid-template-columns: 1fr;
	}

	.tile-h .media,
	.tile-h .media-tile {
		height: 220px;
		border-right: none;
		border-bottom: 1px solid var(--line);
	}

	.tiles-mosaic {
		grid-template-columns: 1fr;
	}

	.toolbar-articles {
		position: static;
	}

	.toolbar-search-input {
		width: 140px;
	}
}


/* ==========================================================
   28. GLOSSAIRE
   ========================================================== */

/* ---- Archive ---- */
/* Wrapper archive glossaire — même padding-top que .archive-wrap et
   .articles-wrap pour cohérence inter-pages. padding-bottom piloté
   par .site-footer { margin-top: --footer-gap }. */
.glossaire-archive-wrap {
	padding-top: var(--space-5);  /* 24px */
}

.hero-glossaire {
	padding: 56px 36px 48px;
	/* Surcharge l'overflow:hidden de .hero pour permettre au dropdown
	   d'autocomplete de déborder sous le hero. Le hero glossaire n'a
	   pas d'effet visuel qui aurait besoin du clip. */
	overflow: visible;
}

/* ===== Glossaire — Champ de recherche dans le hero ===== */
.glossaire-search {
	position: relative;
	max-width: 560px;
	margin: 28px auto 0;
	/* z-index 10 : crée un stacking context propre pour que le dropdown
	   __suggestions passe par-dessus la barre alpha (z-index auto = 0)
	   et le reste du contenu local. IMPORTANT : doit rester < 50 (sticky
	   header), sinon le champ déborde au-dessus du menu lorsqu'il est en
	   bas de page (single-glossaire) et qu'on scroll. */
	z-index: 10;
}

.glossaire-search__field {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 2px solid color-mix(in hsl, var(--primary) 35%, #fff);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08),
				0 2px 4px rgba(0, 0, 0, .04);
	transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}

.glossaire-search__field:hover {
	border-color: color-mix(in hsl, var(--primary) 55%, #fff);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .1),
				0 2px 4px rgba(0, 0, 0, .04);
}

.glossaire-search__field:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in hsl, var(--primary) 18%, transparent),
				0 8px 22px rgba(0, 0, 0, .1);
}

.glossaire-search__icon {
	position: absolute;
	left: 20px;
	width: 20px;
	height: 20px;
	color: var(--primary);
	pointer-events: none;
}

.glossaire-search__input {
	flex: 1;
	width: 100%;
	padding: 16px 22px 16px 52px;
	background: transparent;
	border: none;
	outline: none;
	font: inherit;
	font-size: 1.02rem;
	color: var(--text);
	border-radius: 999px;
}

.glossaire-search__input::placeholder {
	color: color-mix(in hsl, var(--text) 50%, transparent);
	opacity: 1;
}

/* Liste des suggestions (dropdown) */
.glossaire-search__suggestions {
	list-style: none;
	margin: 8px 0 0;
	padding: 6px;
	background: #fff;
	border: 1px solid color-mix(in hsl, var(--primary) 20%, var(--line));
	border-radius: 16px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, .15),
				0 4px 8px rgba(0, 0, 0, .06);
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	/* Très élevé : passe par-dessus la barre alpha, la grille glossaire,
	   et tout ce qui pourrait suivre. Inférieur au header sticky (qui
	   utilise z-index ~999 pour rester au-dessus). */
	z-index: 900;
	max-height: 420px;
	overflow-y: auto;
	text-align: left;
}

.glossaire-search__suggestions[hidden] {
	display: none;
}

.glossaire-search__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .12s ease;
}

.glossaire-search__item:hover,
.glossaire-search__item.is-active {
	background: color-mix(in hsl, var(--primary) 8%, #fff);
}

.glossaire-search__title {
	font-weight: 600;
	color: var(--text);
}

.glossaire-search__sansk {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: .92rem;
	color: var(--accent);
	flex-shrink: 0;
}

.glossaire-search__empty {
	padding: 14px 16px;
	color: var(--muted);
	font-style: italic;
	font-size: .9rem;
	text-align: center;
}

@media (max-width: 600px) {
	.glossaire-search {
		max-width: 100%;
	}
	.glossaire-search__input {
		font-size: 1rem; /* évite le zoom iOS Safari sur focus */
	}
}

/* Navigation thématique */
.glossaire-themes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.chip-theme {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--line);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip-theme:hover,
.chip-theme.active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.chip-count {
	background: rgba(0,0,0,.12);
	border-radius: 999px;
	padding: 0 6px;
	font-size: 0.72rem;
}

.chip-theme.active .chip-count {
	background: rgba(255,255,255,.25);
}

/* Index alphabétique */
.glossaire-alpha {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 32px;
}

.glossaire-alpha-letter {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--text);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.glossaire-alpha-letter:hover {
	background: var(--primary);
	color: #fff;
}

/* Groupe par lettre */
.glossaire-group {
	margin-bottom: 48px;
}

.glossaire-letter-head {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--primary);
}

/* Grille des cartes termes */
.glossaire-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* ---- Carte terme ---- */
.card-glossaire {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	transition: box-shadow 0.2s, transform 0.2s;
}

.card-glossaire:hover {
	box-shadow: 0 4px 18px rgba(0,0,0,.1);
	transform: translateY(-2px);
}

.card-glossaire .card-link {
	display: block;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.card-glossaire .card-title {
	/* Georgia : même raison que .glossaire-single-title — garantit le rendu
	   de tous les diacritiques sanskrit dans les cartes de termes. */
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.05rem;
	margin: 4px 0 8px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.card-glossaire--featured {
	border-color: var(--primary);
	background: linear-gradient(135deg, rgba(var(--primary-rgb, 139,90,43), .04) 0%, var(--card) 100%);
}

/* Petite carte termes liés (chips dans le bloc "Termes liés" du single) */
.card-glossaire--sm {
	/* Georgia italic : cohérence avec le H1 et les cartes de termes —
	   garantit le rendu des sanskrits. */
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 0.95rem;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--line);
	background: var(--card);
	transition: background 0.15s, border-color 0.15s;
}

.card-glossaire--sm:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

/* Sanskrit inline (dans les cartes) */
.gloss-sanskrit-inline {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-size: 0.85em;
	color: var(--muted);
	font-weight: 400;
}

/* Badge Mot du mois */
.badge-motdumois {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---- Single terme ---- */
.single-glossaire-wrap {
	max-width: 860px;
}

/* Sur la fiche d'un terme : aligner les sections "Prochains séminaires"
   et "Articles récents" (rendues hors du wrap 860px) à la même largeur
   que le contenu de lecture, pour éviter le mismatch visuel (contenu
   étroit 860px puis encarts qui s'étalent à 1200px standard). */
body.single-glossaire .related-posts > .container {
	max-width: 860px;
}

.glossaire-single-header {
	padding: 48px 0 32px;
}

.glossaire-single-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.glossaire-single-title {
	/* Georgia italic : convention typographique pour les mots étrangers,
	   et surtout font web-safe qui couvre 100% des diacritiques sanskrit
	   (ś, ā, ī, ṁ, ṅ, ṇ, ṛ, ṣ…). Lobster Two ne supportait pas tous ces
	   glyphes → fallback inconsistant lettre par lettre (ex Abhiniveśa
	   où le 'ś' tombait sur la font cursive système). Georgia garantit
	   un rendu uniforme et académique pour TOUS les termes. */
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin-bottom: 8px;
	line-height: 1.1;
}

.glossaire-single-sanskrit {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 20px;
}

.gloss-sanskrit {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--primary);
}

.gloss-prononciation {
	font-size: 0.9rem;
	color: var(--muted);
	font-style: italic;
}

.glossaire-single-lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--text);
	max-width: 680px;
	border-left: 3px solid var(--primary);
	padding-left: 16px;
	margin: 0;
}

.glossaire-single-image {
	margin-bottom: 40px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.glossaire-single-image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.glossaire-single-body {
	margin-bottom: 48px;
	font-size: 1.05rem;
	line-height: 1.8;
}

/* Sections liées */
.glossaire-related {
	border-top: 1px solid var(--line);
	padding-top: 40px;
	margin-bottom: 40px;
}

.glossaire-related h2 {
	font-size: 1.25rem;
	margin-bottom: 20px;
}

.glossaire-terms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.glossaire-single-footer {
	border-top: 1px solid var(--line);
	padding-top: 32px;
	margin-top: 24px;
}

/* ---------- Phase 1 enrichissement : single glossaire ---------- */

/* Bouton "Écouter la prononciation" — inline dans le titre.
   Caché par défaut (hidden attr), démasqué par JS si SpeechSynthesis dispo. */
.glossaire-single-title {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.glossaire-single-title-text {
	display: inline-block;
}
.gloss-tts {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--card, #fff);
	color: var(--primary);
	cursor: pointer;
	padding: 0;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gloss-tts:hover,
.gloss-tts:focus-visible {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
	transform: scale(1.06);
}
.gloss-tts:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 122, 90), .25);
}
.gloss-tts.is-playing {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
	animation: gloss-tts-pulse 1.4s ease-in-out infinite;
}
@keyframes gloss-tts-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 0, 122, 90), .35); }
	50%      { box-shadow: 0 0 0 10px rgba(var(--primary-rgb, 0, 122, 90), 0); }
}
.gloss-tts__icon { display: block; }

/* "Vu dans ces articles" — liste compacte, pas de cards (différencié visuellement
   du bloc "Pour aller plus loin" qui est en cards). Style éditorial sobre. */
.glossaire-mentions h2 em {
	font-style: italic;
	color: var(--primary);
}
.glossaire-mentions-lead {
	margin: -8px 0 18px;
	font-size: .95rem;
}
.glossaire-mentions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--line);
	border-radius: var(--radius, 12px);
	overflow: hidden;
}
.glossaire-mention-item {
	background: var(--card, #fff);
}
.glossaire-mention-link {
	display: grid;
	grid-template-columns: minmax(110px, 140px) 1fr auto;
	gap: 18px;
	align-items: baseline;
	padding: 14px 18px;
	color: inherit;
	text-decoration: none;
	transition: background .15s ease;
}
.glossaire-mention-link:hover,
.glossaire-mention-link:focus-visible {
	background: color-mix(in srgb, var(--primary) 6%, transparent);
	outline: none;
}
.glossaire-mention-cat {
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary);
	font-weight: 600;
}
.glossaire-mention-title {
	font-weight: 500;
	line-height: 1.4;
}
.glossaire-mention-date {
	font-size: .82rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.glossaire-mention-link {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.glossaire-mention-date { font-size: .78rem; }
}

/* Navigation prev/next entre termes (ordre alphabétique).
   Deux colonnes : précédent à gauche, suivant à droite.
   Si un seul des deux existe, on garde l'alignement avec span vide. */
.glossaire-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.glossaire-pager-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius, 12px);
	color: inherit;
	text-decoration: none;
	background: var(--card, #fff);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.glossaire-pager-link:hover,
.glossaire-pager-link:focus-visible {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
	outline: none;
}
.glossaire-pager-prev { text-align: left; }
.glossaire-pager-next { text-align: right; }
.glossaire-pager-dir {
	font-size: 1.1rem;
	color: var(--primary);
	line-height: 1;
}
.glossaire-pager-meta {
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
.glossaire-pager-title {
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.glossaire-pager {
		grid-template-columns: 1fr;
	}
	.glossaire-pager-next { text-align: left; }
}

/* Hero "Explorer un autre terme" en fin de fiche.
   Hérite du look hero-glossaire (déjà stylé pour l'archive) avec une
   nuance : fond légèrement teinté pour le différencier visuellement
   du hero d'archive et marquer la fin du parcours de lecture. */
.hero-glossaire--explore {
	margin-top: 48px;
	padding: 56px 32px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--primary) 4%, transparent) 0%,
		color-mix(in srgb, var(--accent, var(--primary)) 4%, transparent) 100%
	);
	border-radius: var(--radius-lg, 18px);
	text-align: center;
}
.hero-glossaire--explore h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	margin: 12px 0 8px;
}
.hero-glossaire--explore .hero-lead {
	max-width: 540px;
	margin: 0 auto 24px;
}
.hero-glossaire--explore .glossaire-search {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.hero-glossaire-back {
	margin-top: 20px;
	margin-bottom: 0;
}
.btn-ghost {
	background: transparent;
	color: var(--primary);
	border: 1px solid transparent;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* ---- Focus Glossaire (home.php) ---- */
.section-focus-glossaire {
	background: var(--card);
	border-radius: var(--radius-lg);
	padding: 40px;
	margin-bottom: 40px;
}

.focus-glossaire-inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
	align-items: stretch;  /* les items s'étirent pour remplir leur zone */
}

/* Carte mot du mois */
.card-motdumois {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #fff;
	width: 100%;
	height: 100%;
}

/* La colonne principale (.focus-glossaire-main) doit étirer son contenu pour
   remplir toute la cellule du grid parent. */
.focus-glossaire-main {
	display: flex;
	flex-direction: column;
}

.card-motdumois-body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.focus-term-title {
	font-size: 1.6rem;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.focus-term-def {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	margin: 0;
}

.card-motdumois-media {
	width: 200px;
	flex-shrink: 0;
}

.card-motdumois-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Articles liés dans le focus */
.focus-glossaire-articles {
	margin-top: 20px;
}

.focus-glossaire-label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

.focus-articles-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.focus-article-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 0.15s;
}

.focus-article-link:hover {
	color: var(--primary);
}

.focus-article-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	overflow: hidden;
	flex-shrink: 0;
}

.focus-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sidebar : autres termes */
.focus-glossaire-sidebar {
	border-left: 1px solid var(--line);
	padding-left: 28px;
}

.focus-termes-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 16px;
}

.focus-terme-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--text);
	transition: color 0.15s;
}

.focus-terme-item:hover {
	color: var(--primary);
}

.focus-terme-item strong {
	font-size: 0.95rem;
}

.focus-terme-item .muted {
	font-size: 0.8rem;
}

/* Auto-link dans les articles */
.glossaire-inline {
	color: inherit;
	border-bottom: 1px dashed var(--primary);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.glossaire-inline:hover {
	color: var(--primary);
	border-bottom-style: solid;
}

/* Auto-link navigation (séminaires, cours, professeurs) — un peu plus
   marqué que le glossaire (texte coloré direct). */
.article-content a.nav-inline {
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in hsl, var(--primary) 30%, transparent);
	transition: color 0.15s, border-color 0.15s;
}

.article-content a.nav-inline:hover {
	color: color-mix(in hsl, var(--primary) 80%, #000);
	border-bottom-color: var(--primary);
}

/* ---- Responsive glossaire ---- */
@media (max-width: 900px) {
	.glossaire-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.focus-glossaire-inner {
		grid-template-columns: 1fr;
	}

	.focus-glossaire-sidebar {
		border-left: none;
		border-top: 1px solid var(--line);
		padding-left: 0;
		padding-top: 24px;
	}

	.card-motdumois {
		grid-template-columns: 1fr;
	}

	.card-motdumois-media {
		width: 100%;
		height: 220px;
	}

	.single-glossaire-wrap {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.glossaire-grid {
		grid-template-columns: 1fr;
	}

	.section-focus-glossaire {
		padding: 24px 16px;
	}
}

/* Explorer — état de chargement AJAX */
#explorer-content {
	transition: opacity 0.2s ease;
}

#explorer-content.explorer-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* ==========================================================
   Chip catégorie active — vert validation
   ========================================================== */
.toolbar-chips .chip.active {
	background: #2e7d5e;
	border-color: #2e7d5e;
	color: #fff;
	font-weight: 700;
}

.toolbar-chips .chip.active:hover {
	background: #256950;
	border-color: #256950;
}

/* ==========================================================
   Grande carte "À la une" — image pleine + texte overlay bas
   Remplace le layout horizontal image-gauche / texte-droite
   ========================================================== */

/* La carte elle-même : position relative pour l'overlay */
.tile-h {
	display: block;        /* annule le grid précédent */
	position: relative;
	min-height: 420px;
}

/* Le lien couvre toute la carte */
.tile-h .card-link {
	display: block;        /* annule le grid précédent */
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 420px;
}

/* Image : remplit toute la surface.
   Fallback (article sans image à la une) : gradient coloré du design system
   au lieu d'un gris fade qui rendait la carte illisible avec l'overlay sombre. */
.tile-h .media,
.tile-h .media-tile {
	position: absolute;
	inset: 0;
	height: 100%;
	border-right: none;    /* supprime le séparateur vertical */
	border-radius: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, var(--accent), transparent 70%),
		linear-gradient(135deg, var(--primary), color-mix(in hsl, var(--primary) 60%, #000));
}

.tile-h .media img,
.tile-h .media-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Corps : positionné en bas, gradient de lisibilité */
.tile-h .body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 48px 28px 28px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .82) 0%,
		rgba(0, 0, 0, .55) 55%,
		transparent 100%
	);
	border-radius: 0;
	justify-content: flex-end;
}

/* Textes en blanc sur le gradient.
   Label : fond plus contrasté + texte 100% blanc pour bonne lisibilité
   (les .15 d'opacité disparaissaient quand l'image manquait). */
.tile-h .body .label {
	color: #fff;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .4);
}

.tile-h .card-title {
	color: #fff;
	font-size: 1.55rem;
	margin: 0;
	line-height: 1.25;
}

.tile-h .body .muted {
	color: rgba(255, 255, 255, .78);
}

.tile-h .body .card-meta {
	color: rgba(255, 255, 255, .65);
}

.tile-h .featured-cta {
	align-self: flex-start;
	margin-top: 4px;
}

/* Responsive — pas de changement de structure nécessaire */
@media (max-width: 900px) {
	.tile-h,
	.tile-h .card-link {
		min-height: 300px;
	}
}

/* Override : neutralise les anciennes règles responsive .tile-h (grid → overlay) */
@media (max-width: 900px) {
	.tile-h,
	.tile-h .card-link {
		grid-template-columns: unset;
	}

	.tile-h .media,
	.tile-h .media-tile {
		height: 100%;
		border-bottom: none;
	}
}

/* Mobile (≤600px) : troncature visuelle de l'excerpt à 3 lignes pour
   éviter que la carte hero ne devienne trop haute. L'excerpt complet
   reste dans le DOM (bon pour le SEO), seul l'affichage est tronqué. */
@media (max-width: 600px) {
	.tile-h .body {
		padding: 36px 20px 20px;
	}
	.tile-h .card-title {
		font-size: 1.3rem;
	}
	.tile-h .body .muted {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ==========================================================
   Ajustements nav — espace logo/menu + taille typo menu
   ========================================================== */
.nav-primary {
	margin-left: 36px;   /* espace après le logo (réduit de 48 → 36) */
}

/* Taille typo menu — passe de 24px à 20px pour que le menu tienne sur
   une seule ligne avec 6 entrées (Horaires & Cours / Séminaires /
   Professeurs / Articles / Glossaire / Contact). Padding lateral
   réduit aussi pour gagner ~8px par item. */
.menu-primary a {
	font-size: 20px;
	padding: 10px 10px;
}

/* ==========================================================
   Pages légales (mentions légales, politique de confidentialité)
   ========================================================== */
.legal-wrap {
	max-width: 780px;
	padding-top: 48px;
	padding-bottom: 80px;
}

.legal-content h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin-bottom: 8px;
}

.legal-intro {
	font-size: 1.05rem;
	color: var(--muted);
	line-height: 1.7;
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--line);
}

.legal-section {
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--line);
}

.legal-section:last-of-type {
	border-bottom: none;
}

.legal-section h2 {
	font-size: 1.2rem;
	margin-bottom: 14px;
	color: var(--primary);
}

.legal-section h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 20px 0 8px;
}

.legal-section p,
.legal-section li {
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--text);
}

.legal-section ul {
	padding-left: 20px;
	margin: 8px 0 16px;
}

.legal-section li {
	margin-bottom: 6px;
}

.legal-section a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.legal-updated {
	font-size: 0.85rem;
	color: var(--muted);
	margin-top: 32px;
}

/* Fix flash-info : rétablit l'alignement horizontal du .container */
.flash-info-inner {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ============================================================
   §29 – Single article : Focus Glossaire + CTA + Lectures liées
   ============================================================ */

/* Focus Glossaire ------------------------------------------ */
.section-focus-single {
	margin-top: 64px;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--line);
}
.focus-single-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
	margin-top: 28px;
}
.card-focus-term {
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
}
.card-focus-term-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.card-focus-term-media {
	position: relative;
	overflow: hidden;
}
.card-focus-term-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.badge-motdumois {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border-radius: 20px;
	padding: 4px 12px;
	align-self: flex-start;
}
.focus-term-title {
	font-size: 1.5rem;
	margin: 0;
	line-height: 1.2;
}
.gloss-sanskrit-inline {
	display: block;
	font-size: .9rem;
	font-weight: 400;
	color: var(--muted);
	font-style: italic;
	margin-top: 4px;
}
/* Aside glossaire */
.focus-single-aside {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.focus-glossaire-label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 4px;
}
.focus-termes-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.focus-articles-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.focus-article-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text);
	font-size: .9rem;
	line-height: 1.35;
}
.focus-article-link:hover { color: var(--accent); }
.focus-article-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
}
.focus-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* CTA Séminaires & Cours ----------------------------------- */
.section-cta-single {
	margin-top: 64px;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--line);
}
.cta-single-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 28px;
}
.cta-single-grid .card {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--card);
	transition: transform .2s, box-shadow .2s;
}
.cta-single-grid .card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cta-single-grid .card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.cta-single-grid .media {
	position: relative;
	height: 200px;
	overflow: hidden;
}
.cta-single-grid .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cta-single-grid .body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cta-single-grid .label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--accent);
}
.cta-single-grid h3 {
	font-size: 1.15rem;
	margin: 0;
	line-height: 1.3;
}
.cta-single-grid .btn {
	align-self: flex-start;
	margin-top: 8px;
}

/* Lectures liées — flux infini ----------------------------- */
.section-lectures-liees {
	margin-top: 64px;
	/* padding-bottom retiré : piloté par .site-footer margin-top */
}
/* .toolbar-lectures hérite de .toolbar-articles (HTML : "toolbar-articles toolbar-lectures").
   On override seulement ce qui doit différer : la position sticky du flux infini single. */
.toolbar-lectures {
	top: var(--header-h, 116px);
	z-index: 20;
	margin-bottom: 32px;
}

/* Feed cards */
.lectures-feed .card {
	border-radius: 14px;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	transition: transform .2s, box-shadow .2s;
}
.lectures-feed .card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.lectures-feed .card a { display: block; text-decoration: none; color: inherit; }
.lectures-feed .card .media {
	height: 180px;
	overflow: hidden;
}
.lectures-feed .card .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}
.lectures-feed .card:hover .media img { transform: scale(1.04); }
.lectures-feed .card .body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lectures-feed .card .label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
}
.lectures-feed .card h3 {
	font-size: 1rem;
	margin: 0;
	line-height: 1.35;
}
.lectures-feed .card .excerpt {
	font-size: .88rem;
	color: var(--muted);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Skeleton loader */
.lectures-skeleton {
	border-radius: 14px;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
}
.lectures-skeleton .sk-img {
	height: 180px;
	background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 60%, var(--bg)) 50%, var(--line) 75%);
	background-size: 200% 100%;
	animation: sk-shimmer 1.4s infinite;
}
.lectures-skeleton .sk-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lectures-skeleton .sk-line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 60%, var(--bg)) 50%, var(--line) 75%);
	background-size: 200% 100%;
	animation: sk-shimmer 1.4s infinite;
}
.lectures-skeleton .sk-line.short { width: 55%; }
.lectures-skeleton .sk-line.long  { width: 90%; }
@keyframes sk-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Sentinel & fin de flux */
.lectures-sentinel {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32px 0;
	min-height: 60px;
}
.lectures-dots {
	display: flex;
	gap: 8px;
}
.lectures-dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	animation: lectures-bounce 1.2s ease-in-out infinite;
}
.lectures-dots span:nth-child(2) { animation-delay: .2s; }
.lectures-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes lectures-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: .4; }
	40%            { transform: translateY(-10px); opacity: 1; }
}
.lectures-done {
	text-align: center;
	padding: 24px 0 8px;
	font-size: .9rem;
}

/* Responsive single extras */
@media (max-width: 1024px) {
	.focus-single-grid { grid-template-columns: 1fr; }
	.focus-single-aside { order: -1; }
}
@media (max-width: 900px) {
	.card-focus-term { grid-template-columns: 1fr; }
	.card-focus-term-media { height: 200px; }
	.cta-single-grid { grid-template-columns: 1fr; }
	.toolbar-lectures { top: 56px; flex-direction: column; align-items: stretch; }
	.toolbar-search-input { width: 100%; }
}
@media (max-width: 600px) {
	.focus-single-grid { gap: 20px; }
}

/* Fix flash-info — restaure le padding horizontal du .container
   (le shorthand padding:10px 0 dans .flash-info-inner écrasait
   le padding: 0 24px hérité de .container) */
.flash-info .flash-info-inner {
	padding-top:    10px;
	padding-bottom: 10px;
	padding-left:   24px;
	padding-right:  24px;
}

/* ============================================================
   §30 – Corrections single.php — alignement design système
   Annule les surcharges §29 sur .lectures-feed .card qui
   cassaient l'apparence uniforme avec archive.php.
   ============================================================ */

/* Réinitialise les surcharges de carte — laisse les règles
   globales .card, .card-link, .card .media, .card .body jouer */
.lectures-feed .card             { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); }
.lectures-feed .card:hover       { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.06); border-color: color-mix(in hsl, var(--primary) 25%, var(--line)); }
.lectures-feed .card > a,
.lectures-feed .card .card-link  { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.lectures-feed .card .media      { aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
.lectures-feed .card .media img  { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lectures-feed .card:hover .media img { transform: scale(1.04); }
.lectures-feed .card .body       { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lectures-feed .card .label      { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.lectures-feed .card .card-title { font-size: 22px; margin: 0 0 4px; }
.lectures-feed .card .muted      { font-size: .9rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Skeleton — garde ses propres styles (pas de .card) */
.lectures-skeleton               { border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); overflow: hidden; }

/* Sections de single.php — utilise la même base que .section */
.section-focus-single,
.section-cta-single,
.section-lectures-liees          { margin-top: 48px; }

/* Toolbar sticky — hérite de .toolbar-articles (HTML : "toolbar-articles toolbar-lectures").
   On ne définit ici que les overrides spécifiques au flux infini single. */
.toolbar-lectures {
	top: var(--header-h, 116px);
	z-index: 20;
	margin-bottom: 32px;
}

/* ============================================================
   §31 – Décalage sticky avec flash info
   Les éléments sticky utilisent --flash-h (mis à jour par JS)
   pour se positionner correctement sous le flash info.
   ============================================================ */
.reading-progress {
	top: var(--header-h, var(--nav-h));
	z-index: 44; /* juste sous le wrap sticky (z:50) */
}

.toolbar-lectures {
	top: var(--header-h, 116px); /* colle exactement sous le sticky wrap */
}

/* ============================================================
   §32 – Mode sombre + Palette de couleurs
   ============================================================ */

/* --- Variables mode nuit --- */
[data-theme="dark"] {
	--bg:    #111318;
	--panel: #1c1f2b;
	--card:  #1c1f2b;
	--text:  #e6e2d8;
	--muted: #8a8a8a;
	--line:  rgba(255,255,255,.09);
	--line-strong: rgba(255,255,255,.16);
	--shadow-sm: 0 1px 3px rgba(0,0,0,.4);
}

/* --- Palettes d'accentuation (modifient --primary et --accent) --- */
[data-palette="teal"]      { --primary:#009C8C; --accent:#F25C3C; }   /* défaut */
[data-palette="indigo"]    { --primary:#5C6BC0; --accent:#FF7043; }
[data-palette="forest"]    { --primary:#2E7D5E; --accent:#E8A020; }
[data-palette="plum"]      { --primary:#7B5EA7; --accent:#E05C7A; }
[data-palette="clay"]      { --primary:#A0522D; --accent:#4A9B7F; }

/* --- Bouton toggle thème --- */
.theme-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--line-strong);
	border-radius: 24px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	transition: background .2s, border-color .2s;
	white-space: nowrap;
}
.theme-toggle:hover { background: var(--card); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { width:16px; height:16px; display:block; flex-shrink:0; }
[data-theme="dark"] .icon-sun  { display:none; }
[data-theme="dark"] .icon-moon { display:block; }
[data-theme="light"] .icon-sun  { display:block; }
[data-theme="light"] .icon-moon { display:none; }

/* --- Palette picker panel --- */
.palette-picker {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.18);
	display: none;
	flex-direction: column;
	gap: 10px;
	z-index: 200;
	min-width: 220px;
}
.palette-picker.is-open { display: flex; }
.palette-picker-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}
.palette-swatches {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.palette-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s, border-color .15s;
	position: relative;
}
.palette-swatch:hover { transform: scale(1.15); }
.palette-swatch.active {
	border-color: var(--text);
	transform: scale(1.1);
}
.palette-swatch[data-pal="teal"]   { background: linear-gradient(135deg,#009C8C,#F25C3C); }
.palette-swatch[data-pal="indigo"] { background: linear-gradient(135deg,#5C6BC0,#FF7043); }
.palette-swatch[data-pal="forest"] { background: linear-gradient(135deg,#2E7D5E,#E8A020); }
.palette-swatch[data-pal="plum"]   { background: linear-gradient(135deg,#7B5EA7,#E05C7A); }
.palette-swatch[data-pal="clay"]   { background: linear-gradient(135deg,#A0522D,#4A9B7F); }

/* Wrapper relatif pour positionner le picker */
.theme-controls {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Transitions globales sur le changement de thème */
body,
.site-header,
.card,
.flash-info,
.footer,
.reading-progress,
.toolbar-lectures,
input, textarea, select {
	transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ============================================================
   §33 – Corrections visibilité : thème + barre de progression
   ============================================================ */

/* --- Header : fond adaptatif dark/light --- */
.site-header {
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}
[data-theme="dark"] .site-header {
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	border-bottom-color: var(--line);
}

/* --- Theme controls : positionnement dans la nav --- */
.theme-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	position: relative; /* pour le picker absolu */
}

/* Desktop : en dernier dans la nav */
@media (min-width: 769px) {
	.theme-controls {
		order: 10;
	}
}

/* Mobile : à côté du lang-switch, avant le nav-toggle */
@media (max-width: 768px) {
	.theme-controls {
		order: 1;      /* avant lang-switch (order:2) et nav-toggle (order:3) */
		margin-left: 0;
	}
	.theme-toggle-label {
		display: none; /* Masquer le texte "Thème" sur mobile */
	}
	.palette-picker {
		right: auto;
		left: 0;       /* picker s'ouvre à gauche sur mobile */
	}
}

/* --- Bouton toggle : toujours visible --- */
.theme-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(0,0,0,.05);
	border: 1px solid var(--line-strong);
	border-radius: 24px;
	padding: 7px 14px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	transition: background .2s, border-color .2s;
	white-space: nowrap;
	flex-shrink: 0;
}
.theme-toggle:hover {
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	border-color: var(--primary);
}
[data-theme="dark"] .theme-toggle {
	background: rgba(255,255,255,.08);
}

/* Icônes soleil/lune */
.theme-toggle svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
/* Gestion affichage selon thème */
html:not([data-theme="dark"]) .icon-moon { display: none !important; }
html:not([data-theme="dark"]) .icon-sun  { display: block !important; }
[data-theme="dark"] .icon-moon { display: block !important; }
[data-theme="dark"] .icon-sun  { display: none !important; }

/* --- Barre de progression : plus visible --- */
.reading-progress {
	height: 4px;
	background: transparent; /* track invisible — seule la barre colorée compte */
	box-shadow: none;
}
.reading-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
	transition: width .12s linear;
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* --- Palette picker : toujours bien positionné --- */
.palette-picker {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 200;
	min-width: 200px;
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
	display: none;
	flex-direction: column;
	gap: 12px;
}
.palette-picker.is-open {
	display: flex;
}

/* Bouton palette (pastille d'accès au picker) */
.palette-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: conic-gradient(#009C8C 0deg 72deg,#5C6BC0 72deg 144deg,#2E7D5E 144deg 216deg,#7B5EA7 216deg 288deg,#A0522D 288deg 360deg);
	cursor: pointer;
	flex-shrink: 0;
	transition: transform .2s, box-shadow .2s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	overflow: hidden;
}
.palette-btn:hover {
	transform: scale(1.12);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}
.palette-btn svg { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }

/* ============================================================
   §34 – 3 Thèmes complets (remplace palette + dark séparés)
   ============================================================ */

/* THÈME 1 : Clair (défaut — maquette actuelle, inchangée) */
[data-theme="light"],
:root:not([data-theme]) {
	--bg:         #FAF7EF;
	--panel:      #FFFFFF;
	--card:       #FFFFFF;
	--text:       #2C2C2C;
	--muted:      #5F5F5F;
	--primary:    #009C8C;
	--accent:     #F25C3C;
	--line:       rgba(0,0,0,.08);
	--line-strong:rgba(0,0,0,.14);
	--shadow-sm:  0 1px 2px rgba(0,0,0,.04);
}

/* THÈME 2 : Sombre (inspiré de html/article.html) */
[data-theme="dark"] {
	--bg:         #0b1020;
	--panel:      #0f172a;
	--card:       #0b1224;
	--text:       #e6edf6;
	--muted:      #94a3b8;
	--primary:    #0ea5e9;
	--accent:     #f59e0b;
	--line:       rgba(255,255,255,.08);
	--line-strong:rgba(255,255,255,.16);
	--shadow-sm:  0 1px 4px rgba(0,0,0,.5);
}
[data-theme="dark"] body {
	background: linear-gradient(180deg, #0b1020 0%, #0a1226 60%, #091328 100%);
}
[data-theme="dark"] .site-header {
	background: rgba(11,16,32,.75);
	border-bottom-color: rgba(255,255,255,.06);
}

/* THÈME 3 : Vert yoga (couleurs du logo) */
[data-theme="vert"] {
	--bg:         #EEF6F2;
	--panel:      #FFFFFF;
	--card:       #FFFFFF;
	--text:       #172820;
	--muted:      #486355;
	--primary:    #006A5B;
	--accent:     #3D9E6E;
	--line:       rgba(0,90,65,.10);
	--line-strong:rgba(0,90,65,.20);
	--shadow-sm:  0 1px 3px rgba(0,80,55,.06);
}
[data-theme="vert"] .site-header {
	background: color-mix(in srgb, #EEF6F2 88%, transparent);
}

/* --- Picker : 3 swatches thèmes --- */
.theme-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	flex-shrink: 0;
}
.theme-swatch:hover          { transform: scale(1.15); }
.theme-swatch.active         { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.theme-swatch[data-t="light"]{ background: linear-gradient(135deg, #FAF7EF 50%, #009C8C 50%); }
.theme-swatch[data-t="dark"] { background: linear-gradient(135deg, #0b1020 50%, #0ea5e9 50%); }
.theme-swatch[data-t="vert"] { background: linear-gradient(135deg, #EEF6F2 50%, #006A5B 50%); }

/* ============================================================
   §35 – Hero avec image de fond (front-page)
   ============================================================ */

/* Hero sans image : apparence actuelle, inchangée */
.hero-home {
	position: relative;
	overflow: hidden;
}

/* Hero avec image */
.hero-home.hero-has-bg {
	min-height: 520px;
	display: flex;
	align-items: center;
	padding: 80px 0 64px;
	border-radius: var(--radius-lg);
	margin-bottom: 8px;
}

/* Couche image (CSS var --hero-bg injectée en inline) */
.hero-home .hero-bg-img {
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	/* Léger zoom au surveil si souhaité */
	transition: transform 12s ease;
}
.hero-home.hero-has-bg:hover .hero-bg-img {
	transform: scale(1.03);
}

/* Overlay dégradé pour lisibilité du texte */
.hero-home .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(0,0,0,.62) 0%,
		rgba(0,0,0,.35) 55%,
		rgba(0,0,0,.15) 100%
	);
	z-index: 1;
}

/* Contenu au-dessus de l'overlay */
.hero-home .hero-content {
	position: relative;
	z-index: 2;
	max-width: 680px;
}

/* Souffle de couleur supprimé — réflexion utilisateur en cours. */

/* Adapter les couleurs du texte quand image présente */
.hero-home.hero-has-bg h1,
.hero-home.hero-has-bg .hero-lead {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.hero-home.hero-has-bg .chip {
	background: rgba(255,255,255,.18);
	border-color: rgba(255,255,255,.3);
	color: #fff;
	backdrop-filter: blur(4px);
}
.hero-home.hero-has-bg .btn:not(.btn-primary) {
	background: rgba(255,255,255,.15);
	border-color: rgba(255,255,255,.4);
	color: #fff;
	backdrop-filter: blur(4px);
}
.hero-home.hero-has-bg .btn:not(.btn-primary):hover {
	background: rgba(255,255,255,.28);
}

/* Responsive */
@media (max-width: 768px) {
	.hero-home.hero-has-bg {
		min-height: 380px;
		padding: 56px 0 48px;
	}
}
@media (max-width: 480px) {
	.hero-home.hero-has-bg {
		min-height: 300px;
		padding: 40px 0 36px;
	}
}

/* =========================================================
   BARRE D'ADMINISTRATION WORDPRESS
   Quand l'admin est connecté, #wpadminbar fait 32px (desktop)
   ou 46px (mobile). On décale notre wrap sticky en conséquence.
   ========================================================= */
.admin-bar .sticky-header-wrap {
	top: 32px;
}

/* La barre d'admin passe en 46px sous 782px */
@media screen and (max-width: 782px) {
	.admin-bar .sticky-header-wrap {
		top: 46px;
	}
}

/* Ajuster aussi les éléments qui se basent sur --nav-h */
.admin-bar {
	--admin-bar-h: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar {
		--admin-bar-h: 46px;
	}
}

/* Barre de progression tient compte de la barre admin (qui pousse le wrap sticky vers le bas) */
.admin-bar .reading-progress {
	top: calc(var(--admin-bar-h) + var(--header-h, var(--nav-h)));
}

/* =========================================================
   BOUTON RETOUR EN HAUT
   ========================================================= */
.back-to-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 200;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
	pointer-events: none;
}
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.back-to-top:hover {
	background: var(--accent);
}
.back-to-top svg {
	width: 20px;
	height: 20px;
}
@media (max-width: 600px) {
	.back-to-top {
		bottom: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
	}
}

/* ============================================================
   §35quinquies – Cacher le toggle "Filtres —" / "Filters —"
   Le plugin WCS affiche un bouton de masquage des filtres quand
   l'option label_toggle a une valeur. On le cache visuellement
   partout (FR + EN) : les filtres restent visibles en permanence
   (v-show="filters.visible" reste à true par défaut).
   ============================================================ */
.planning-embed .wcs-filter-toggler-container,
.planning-embed [id^="wcs-app"] .wcs-filter-toggler-container {
	display: none !important;
}

/* ============================================================
   §35sexies – Cours ANNULÉS dans le planning WCS
   ============================================================
   Le plugin pose la classe .wcs-class--canceled sur les cours annulés
   et leur applique un fond hachuré. Mais visuellement c'est trop subtil :
   les textes restent normaux, on a du mal à voir que c'est annulé.

   Renforcement :
   1. Texte barré (line-through) sur le titre et l'horaire — convention
      universelle pour "annulé / supprimé"
   2. Opacité globale réduite pour griser tout le bloc
   3. Badge "ANNULÉ" / "CANCELED" en haut à droite, accent rouge clair,
      pour qu'on voie immédiatement le statut
   4. Localisation FR/EN via [lang] sur <html>
*/
.planning-embed .wcs-class--canceled,
.planning-embed [id^="wcs-app"] .wcs-class--canceled {
	position: relative;
	opacity: .72;
}
.planning-embed .wcs-class--canceled .wcs-class__title,
.planning-embed .wcs-class--canceled .wcs-class__time,
.planning-embed .wcs-class--canceled .wcs-class__duration,
.planning-embed [id^="wcs-app"] .wcs-class--canceled .wcs-class__title,
.planning-embed [id^="wcs-app"] .wcs-class--canceled .wcs-class__time,
.planning-embed [id^="wcs-app"] .wcs-class--canceled .wcs-class__duration {
	text-decoration: line-through !important;
	text-decoration-thickness: 1.5px !important;
	text-decoration-color: rgba(178, 60, 60, .55) !important;
}
.planning-embed .wcs-class--canceled .wcs-class__location,
.planning-embed .wcs-class--canceled .wcs-class__instructor,
.planning-embed [id^="wcs-app"] .wcs-class--canceled .wcs-class__location,
.planning-embed [id^="wcs-app"] .wcs-class--canceled .wcs-class__instructor {
	color: color-mix(in srgb, var(--text) 50%, transparent);
}

/* Badge "ANNULÉ" en pseudo-element — toujours visible en haut à droite */
.planning-embed .wcs-class--canceled::after,
.planning-embed [id^="wcs-app"] .wcs-class--canceled::after {
	content: "ANNULÉ";
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #fff;
	background: rgba(178, 60, 60, .92);
	padding: 3px 8px;
	border-radius: 4px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	pointer-events: none;
}
/* Localisation EN — Polylang met lang="en" sur <html> en page EN */
html[lang="en"] .planning-embed .wcs-class--canceled::after,
html[lang="en-GB"] .planning-embed .wcs-class--canceled::after,
html[lang="en-US"] .planning-embed .wcs-class--canceled::after,
html[lang="en"] .planning-embed [id^="wcs-app"] .wcs-class--canceled::after,
html[lang="en-GB"] .planning-embed [id^="wcs-app"] .wcs-class--canceled::after,
html[lang="en-US"] .planning-embed [id^="wcs-app"] .wcs-class--canceled::after {
	content: "CANCELED";
}

/* ============================================================
   §35quater – Espacement horaire/durée WCS (notamment mobile)
   Sur le plugin WCS, <time>10:45 - 12:15</time><br><span>1h 30'</span>
   peuvent se coller en compact-view. On force un séparateur visible.
   ============================================================ */

/* Cible : durée toujours sur la ligne sous l'horaire pour la lisibilité.
   Pièges à contourner (validés en live) :
     - Le plugin WCS pose des styles via #wcs-app-N (sélecteur ID) → besoin
       de !important sur les déclarations layout pour les neutraliser.
     - La vue GRILLE hebdo utilise un display:flex par cellule. Y forcer
       width:100% / flex-basis:100% en desktop FAIT DÉBORDER les blocs des
       cellules adjacentes (cas vu sur /cours/ desktop). En mobile par
       contre, la même vue est rendue en accordéon empilé, où le stack
       est nécessaire.

   Convention BEM du plugin :
     - wcs-timetable--compact / --list / --large = vues liste (stack OK partout)
     - wcs-timetable__week                       = vue grille hebdo (stack en mobile uniquement)
     - wcs-timetable__monthly-calendar           = calendrier mois (laissé tel quel)
*/

/* Couleur primaire de la durée — quelle que soit la vue, ne change pas le layout */
.planning-embed .wcs-class__duration,
.planning-embed [id^="wcs-app"] .wcs-class__duration {
	color: var(--primary);
}

/* Vues LISTE : stack systématique (mobile + desktop) */
.planning-embed .wcs-timetable--compact .wcs-class__duration,
.planning-embed .wcs-timetable--list    .wcs-class__duration,
.planning-embed .wcs-timetable--large   .wcs-class__duration {
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	margin-top: 2px;
}

/* Planning WCS — ajustements mobile transverses (toutes vues confondues).
   IMPORTANT : les sélecteurs ne sont PAS préfixés par .wcs-timetable__week
   parce que le shortcode bascule en vue compact-list / agenda sur les
   écrans étroits (sortie console confirmée : .wcs-day__date présent, pas
   .wcs-day__title qui n'existe que dans la vue week desktop).
   On cible donc les classes communes à toutes les vues : .wcs-day__date,
   .wcs-class__title, .wcs-class__time, .wcs-class__duration. */
@media (max-width: 768px) {
	/* Jour ("mardi 19/05") — ancre visuelle de chaque bloc en mobile.
	   Bold + plus grand pour rétablir la hiérarchie d'info :
	     Jour → Horaire → Titre cours → Lieu/Prof. */
	.planning-embed .wcs-day__date,
	.planning-embed [id^="wcs-app"] .wcs-day__date {
		font-size: 1.15rem !important;
		font-weight: 700 !important;
		letter-spacing: .01em;
		color: var(--text) !important;
	}
	/* Date "19/05" dans le <small> à l'intérieur — un cran plus discrète
	   que le jour bold pour ne pas concurrencer. */
	.planning-embed .wcs-day__date small,
	.planning-embed [id^="wcs-app"] .wcs-day__date small {
		font-size: .85em !important;
		font-weight: 500 !important;
		opacity: .7;
		margin-left: 4px;
	}

	/* Titre du cours — sur mobile était trop dominant à 140% du plugin.
	   1.20rem : redescendu vs natif mais reste accroche visuelle forte. */
	.planning-embed .wcs-class .wcs-class__title,
	.planning-embed [id^="wcs-app"] .wcs-class .wcs-class__title,
	.planning-embed .wcs-class .wcs-timetable--class-title,
	.planning-embed [id^="wcs-app"] .wcs-class .wcs-timetable--class-title,
	.planning-embed .wcs-class h3.wcs-class__title,
	.planning-embed [id^="wcs-app"] .wcs-class h3.wcs-class__title {
		font-size: 1.20rem !important;
		line-height: 1.3 !important;
	}

	/* Horaire — aligné à gauche en mobile (vs centré/droite en desktop). */
	.planning-embed .wcs-class__time,
	.planning-embed [id^="wcs-app"] .wcs-class__time {
		text-align: left !important;
	}

	/* Durée — alignée à gauche (en desktop elle est centrée sous l'horaire
	   dans sa colonne dédiée, OK ; en mobile/empilé centrer fait bizarre
	   car le reste du bloc est en alignement gauche). */
	.planning-embed .wcs-class__duration,
	.planning-embed [id^="wcs-app"] .wcs-class__duration {
		text-align: left !important;
	}

	/* Alignement vertical uniforme — le <small> sous le titre contient
	   le lieu + le pipe-séparateur + le prof. Sur mobile en stack, le
	   pipe (avec son ::before qui crée une puce ronde) se retrouve devant
	   le nom du prof comme une "puce" indentée. On normalise pour aligner
	   tout sur la gauche. */
	.planning-embed .wcs-class .wcs-class__content > small,
	.planning-embed [id^="wcs-app"] .wcs-class .wcs-class__content > small {
		display: block;
	}

	/* Remplace la puce ronde du séparateur .wcs-addons--pipe par le
	   caractère ॐ (Om). Sur desktop le pipe sert de séparateur entre lieu
	   et prof sur la même ligne — on garde le ॐ qui fait office de joli
	   séparateur. Sur mobile en stack, le ॐ devient une "puce" devant le
	   prof, en cohérence avec l'identité yoga du site. */
	.planning-embed .wcs-class .wcs-addons--pipe,
	.planning-embed [id^="wcs-app"] .wcs-class .wcs-addons--pipe {
		padding-left: 0 !important;
		margin: 0 4px;
	}
	.planning-embed .wcs-class .wcs-addons--pipe::before,
	.planning-embed [id^="wcs-app"] .wcs-class .wcs-addons--pipe::before {
		/* Reset complet du pseudo-element original (cercle 0.3em rond) */
		content: "ॐ" !important;
		position: static !important;
		display: inline-block !important;
		background: none !important;
		border-radius: 0 !important;
		width: auto !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		opacity: 1 !important;
		/* Style ॐ */
		color: var(--primary) !important;
		font-weight: 600;
		font-size: .95em;
		line-height: 1;
	}

	/* Ancien bloc spécifique vue week (conservé au cas où la vue week est
	   utilisée ailleurs, ex archive cours) — assure la cohérence si jamais
	   le DOM bascule sur __week en certaines circonstances. */
	.planning-embed .wcs-timetable__week .wcs-class__title,
	.planning-embed [id^="wcs-app"] .wcs-timetable__week .wcs-class__title,
	.planning-embed .wcs-timetable__week .wcs-class__time,
	.planning-embed [id^="wcs-app"] .wcs-timetable__week .wcs-class__time {
		flex: 0 0 100% !important;
		width: 100% !important;
		text-align: left !important;
	}
}

/* ============================================================
   §35ter – Bouton "Réinitialiser les filtres" du planning WCS
   Apparaît dynamiquement quand au moins un filtre est coché.
   ============================================================ */

.planning-reset-bar {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
	margin-bottom: 4px;
}

.planning-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	font-size: 0.84rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.planning-reset-btn:hover,
.planning-reset-btn:focus-visible {
	background: color-mix(in hsl, var(--primary) 10%, #fff);
	border-color: color-mix(in hsl, var(--primary) 35%, var(--line));
	color: var(--primary);
	outline: none;
}

[data-theme="dark"] .planning-reset-btn {
	background: var(--panel, #0f172a);
	color: var(--muted);
}

[data-theme="dark"] .planning-reset-btn:hover {
	background: color-mix(in hsl, var(--primary) 18%, var(--panel, #0f172a));
}

/* ============================================================
   §35bis – Practice badge (cercle rotatif qui dérive dans la fenêtre)
   "practice, practice, everyday" — inspiré threejewels.org
   ============================================================
   Position en JS via transform: translate() sur l'élément.
   La rotation du ring est sur l'enfant `.practice-badge__ring` pour
   ne pas conflicter avec la translation pilotée en JS.
   ============================================================ */

.practice-badge {
	/* Position de départ — JS prend le relais via translate() */
	position: fixed;
	left: 0;
	top: 0;
	width: 130px;
	height: 130px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--text);
	will-change: transform;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	/* Sécurité : si JS ne charge pas, on a quand même un coin visible */
	transform: translate3d(24px, calc(100vh - 154px), 0);
	transition: filter .25s ease;
	user-select: none;
}

/* Quand JS a pris la main, on retire le translate fallback (la classe
   .is-floating reste, c'est juste un marqueur). JS lit / écrit le
   transform en continu. */
.practice-badge.is-floating {
	transition: none;
}

.practice-badge:hover,
.practice-badge:focus-visible {
	outline: none;
	filter: drop-shadow(0 8px 18px rgba(0,0,0,.14));
}

.practice-badge:focus-visible .practice-badge__core {
	box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0,0,0,.18);
}

.practice-badge__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: practice-spin 18s linear infinite;
	transform-origin: center center;
	pointer-events: none;
}

.practice-badge:hover .practice-badge__ring {
	animation-duration: 9s;
}

.practice-badge__text {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

/* Texte extérieur (rayon 68) — foncé qui tourne autour du badge */
.practice-badge__text--outer {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	fill: var(--text);
}

/* Sourire fixe (NE TOURNE PAS) — "everyday" en blanc en arc bas du core */
.practice-badge__smile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3; /* au-dessus du core (z-index 2 implicite via DOM order) */
}

.practice-badge__smile-text {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: #fff;
}

.practice-badge__core {
	position: relative;
	z-index: 2; /* au-dessus du ring (1), sous le sourire (3) */
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	transition: background .2s ease, transform .35s ease, box-shadow .2s ease;
	pointer-events: none;
	overflow: hidden;
}

.practice-badge:hover .practice-badge__core {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.practice-badge__icon {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

@keyframes practice-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Mode sombre — texte du cercle plus clair (le core garde --primary) */
[data-theme="dark"] .practice-badge__text {
	fill: var(--text);
}

/* Responsive : plus petit sur mobile */
@media (max-width: 768px) {
	.practice-badge {
		width: 104px;
		height: 104px;
	}
	.practice-badge__core {
		width: 52px;
		height: 52px;
	}
	.practice-badge__icon {
		width: 28px;
		height: 28px;
	}
	.practice-badge__text {
		font-size: 11px;
		letter-spacing: 0.14em;
	}
}

@media (max-width: 480px) {
	.practice-badge {
		width: 92px;
		height: 92px;
	}
	.practice-badge__core {
		width: 46px;
		height: 46px;
	}
	.practice-badge__icon {
		width: 24px;
		height: 24px;
	}
	.practice-badge__text {
		font-size: 10px;
		letter-spacing: 0.12em;
	}
}

/* Réduction des animations utilisateur */
@media (prefers-reduced-motion: reduce) {
	.practice-badge__ring {
		animation: none;
	}
	.practice-badge,
	.practice-badge__core {
		transition: none;
	}
	/* Le JS détecte aussi prefers-reduced-motion et fige la dérive */
}

/* ============================================================
   §36 – Corrections mode sombre : hero, toolbar, hero-single
   ============================================================ */

/* 1. Hero archive/planning : dégradé blanc → couleurs sombres */
[data-theme="dark"] .hero {
	background:
		radial-gradient(1200px 600px at 10% 10%, color-mix(in hsl, var(--primary) 18%, transparent), transparent 60%),
		radial-gradient(800px 400px at 90% 0%, color-mix(in hsl, var(--accent) 12%, transparent), transparent 60%),
		linear-gradient(180deg, var(--panel), var(--bg));
	border-color: var(--line);
}

/* 2. Toolbar "Explorer" (filtre articles) : fond blanc → fond sombre */
[data-theme="dark"] .toolbar-articles {
	background: rgba(15, 23, 42, 0.88);
}

/* 3. Hero single (contact, pages statiques) : #fff → var sombres */
[data-theme="dark"] .hero-single {
	background: linear-gradient(160deg,
		color-mix(in hsl, var(--primary) 20%, var(--panel)),
		color-mix(in hsl, var(--accent) 12%, var(--panel)) 60%,
		var(--bg));
}

/* ============================================================
   §37 – Corrections mode sombre : card-motdumois + tarif-pdf
   ============================================================ */

/* Carte "Mot du mois" : fond blanc → fond card */
[data-theme="dark"] .card-motdumois {
	background: var(--card);
}

/* Encart tarif PDF : fond blanc → fond card sombre */
[data-theme="dark"] .tarif-pdf-bar {
	background: color-mix(in hsl, var(--primary) 12%, var(--card));
	border-color: color-mix(in hsl, var(--primary) 25%, var(--line));
}

/* ============================================================
   §38 – Corrections boutons WCS + label carte article
   ============================================================ */

/* 1. Boutons WCS (Précédent, Suivant, + de dates) : angles arrondis */
.planning-embed .wcs-btn,
.planning-embed .wcs-more {
	border-radius: var(--radius-lg) !important;
}

/* 2. Label catégorie sur tile-h (grande carte à la une) : fond transparent */
.tile-h .body .label {
	background: transparent;
	border-color: transparent;
}

/* ============================================================
   §39 – Focus glossaire : espacement et alignement vertical
   ============================================================ */

/* Header flottant (sorti du .section) : récupère le margin-top.
   Le padding horizontal aligne le titre avec le contenu de la card
   (.section-focus-glossaire a padding 28px tout autour). */
.section-focus-head {
	margin-top: 48px;
	padding: 0 28px;
}

/* La section-card n'a plus besoin de son margin-top (header l'a) */
.section-focus-head + .section-focus-glossaire {
	margin-top: 12px;
}

/* Réduit le padding interne de la carte pour serrer le contenu */
.section-focus-glossaire {
	padding: 28px;
}

/* Corps du mot du mois : gaps plus serrés */
.card-motdumois-body {
	padding: 24px;
	gap: 8px;
}


/* ============================================================
   §40 – Comptes à rebours séminaires (version consolidée)
   ============================================================ */

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

.countdown-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;       /* tout aligné à gauche */
	gap: 10px;
	border-radius: var(--radius-lg);
	padding: 28px 28px 24px;
	text-decoration: none;
	color: var(--text);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--card);
	transition: transform .2s ease, box-shadow .2s ease;
}
.countdown-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

/* Image de fond semi-transparente */
.countdown-card.has-thumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cd-thumb);
	background-size: cover;
	background-position: center;
	opacity: .18;
	z-index: 0;
	transition: opacity .3s ease;
}
.countdown-card.has-thumb:hover::before { opacity: .28; }
.countdown-card > * { position: relative; z-index: 1; }

/* Badge destination */
.countdown-card .badge-dest {
	position: static;          /* annule le position:absolute global */
	align-self: flex-start;
	max-width: 100%;
	white-space: normal;
	text-align: left;
	line-height: 1.3;
}

/* Titre */
.countdown-title {
	color: var(--text) !important;   /* écrase héritage couleur lien */
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Dates */
.countdown-dates {
	font-size: .88rem;
	color: var(--muted);
	margin: 0;
}

/* Timer */
.countdown-timer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0;
}
.countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 54px;
	background: color-mix(in hsl, var(--primary) 10%, var(--bg));
	border: 1px solid color-mix(in hsl, var(--primary) 20%, var(--line));
	border-radius: 10px;
	padding: 10px 8px 6px;
}
.countdown-num {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
}
.countdown-lbl {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.countdown-sep {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--muted);
	line-height: 1;
	margin-bottom: 14px;
}

/* Message "C'est parti" quand event est passé */
.countdown-started {
	font-size: .95rem;
	font-weight: 600;
	color: var(--primary);
}

/* CTA ancré en bas */
.countdown-cta {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 8px;
}

/* Mode sombre */
[data-theme="dark"] .countdown-unit {
	background: color-mix(in hsl, var(--primary) 15%, var(--panel));
}

@media (max-width: 700px) {
	.countdown-grid { grid-template-columns: 1fr; }
	.countdown-card  { padding: 22px 20px 20px; }
	.countdown-num   { font-size: 1.5rem; }
	.countdown-unit  { min-width: 44px; }
}

/* ============================================================
   §41 – Carte séminaire : body ancré en haut, meta en bas
   ============================================================ */
.card-seminaire .card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-seminaire .media {
	flex-shrink: 0;
	position: relative;   /* ancre le badge-dest position:absolute */
}
.card-seminaire .body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 16px 18px 18px;
	gap: 4px;
}
.card-seminaire .cours-meta {
	margin-top: auto;
	padding-top: 10px;
}

/* =========================================================
   SEARCH OVERLAY — bouton trigger + modal de recherche
   Bouton loupe dans le header → ouvre un modal plein écran
   avec autocomplete global + recherches suggérées + ressources.
   ========================================================= */

/* Bouton loupe dans le nav */
.search-trigger {
	width: 38px;
	height: 38px;
	border: 1px solid color-mix(in hsl, var(--primary) 25%, transparent);
	border-radius: 999px;
	background: color-mix(in hsl, var(--primary) 8%, #fff);
	color: var(--primary);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease, border-color .2s ease;
	margin-right: 8px;
	flex-shrink: 0;
}

.search-trigger:hover,
.search-trigger:focus-visible {
	background: color-mix(in hsl, var(--primary) 18%, #fff);
	border-color: var(--primary);
	transform: translateY(-1px);
}

.search-trigger svg {
	width: 17px;
	height: 17px;
}

/* Overlay : fond plein écran avec backdrop blur */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;       /* au-dessus du sticky header */
	display: none;
	background: rgba(29, 47, 44, .35);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: clamp(80px, 12vh, 120px) 22px 24px;
	overflow-y: auto;
	animation: searchOverlayFadeIn .2s ease;
}

.search-overlay.is-open {
	display: block;
}

@keyframes searchOverlayFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Lock du scroll body quand l'overlay est ouvert */
body.search-overlay-open {
	overflow: hidden;
}

/* Bouton fermer en haut à droite */
.search-overlay__close {
	position: fixed;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--text);
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
	z-index: 1001;
	transition: transform .15s ease, background .2s ease;
}

.search-overlay__close:hover,
.search-overlay__close:focus-visible {
	background: #fff;
	transform: rotate(90deg);
}

/* Panel central */
.search-overlay__panel {
	max-width: 860px;
	margin: 0 auto;
	border-radius: 26px;
	background:
		radial-gradient(circle at 88% 12%, color-mix(in hsl, var(--accent) 10%, transparent), transparent 26%),
		linear-gradient(180deg, #fffaf2, color-mix(in hsl, var(--bg) 85%, #fff));
	box-shadow: 0 28px 90px rgba(29, 47, 44, .25);
	border: 1px solid rgba(255, 255, 255, .8);
	overflow: hidden;
	animation: searchPanelRise .25s ease;
}

@keyframes searchPanelRise {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Top du panel : titre + champ */
.search-overlay__top {
	padding: clamp(28px, 5vw, 48px);
	border-bottom: 1px solid var(--line);
	position: relative;
}

.search-overlay__title {
	margin: 0 0 10px;
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(30px, 5vw, 50px);
	line-height: 1;
	color: var(--text);
}

.search-overlay__subtitle {
	margin: 0 0 24px;
	color: var(--muted);
	line-height: 1.7;
	font-size: .95rem;
}

/* Form recherche */
.search-overlay__form {
	position: relative;
}

.search-overlay__input {
	width: 100%;
	min-height: 64px;
	padding: 0 64px 0 22px;
	border-radius: 999px;
	border: 1px solid color-mix(in hsl, var(--primary) 24%, transparent);
	background: rgba(255, 255, 255, .9);
	color: var(--text);
	font: inherit;
	font-size: 1.05rem;
	outline: none;
	box-shadow: 0 12px 34px rgba(29, 47, 44, .06);
	transition: border-color .15s ease, box-shadow .2s ease;
}

.search-overlay__input::placeholder {
	color: color-mix(in hsl, var(--text) 38%, transparent);
}

.search-overlay__input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in hsl, var(--primary) 15%, transparent),
				0 12px 34px rgba(29, 47, 44, .08);
}

.search-overlay__submit {
	position: absolute;
	right: 7px;
	/* Centrage vertical robuste : top:50% + translateY(-50%) calcule
	   automatiquement le décalage selon la hauteur RÉELLE de l'input
	   (qui peut différer de min-height à cause du line-height de la
	   police, du zoom navigateur, etc.). Plus fiable que top:7px en dur. */
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease;
}

/* (Pas de translate sur le SVG : le path est nativement centré dans
   le viewBox 24×24 — anneau à (10.5, 10.5), manche jusqu'à (19, 19),
   mid visuel ≈ (12, 12). Voir template-parts/search-overlay.php.) */

.search-overlay__submit:hover,
.search-overlay__submit:focus-visible {
	background: color-mix(in hsl, var(--primary) 88%, #000);
}

/* Liste de suggestions sous le champ (autocomplete) */
.search-overlay__suggest {
	list-style: none;
	margin: 10px 0 0;
	padding: 6px;
	background: #fff;
	border: 1px solid color-mix(in hsl, var(--primary) 20%, var(--line));
	border-radius: 16px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, .15);
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 5;
	max-height: 380px;
	overflow-y: auto;
}

.search-overlay__suggest[hidden] {
	display: none;
}

.search-overlay__suggest-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .12s ease;
}

.search-overlay__suggest-item:hover,
.search-overlay__suggest-item.is-active {
	background: color-mix(in hsl, var(--primary) 8%, #fff);
}

.search-overlay__suggest-type {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in hsl, var(--accent) 10%, #fff);
	padding: 3px 8px;
	border-radius: 999px;
	min-width: 80px;
	text-align: center;
}

.search-overlay__suggest-title {
	font-weight: 600;
	color: var(--text);
	font-size: .98rem;
}

.search-overlay__suggest-sansk {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-size: .9rem;
	color: var(--accent);
}

.search-overlay__suggest-empty {
	padding: 14px 16px;
	color: var(--muted);
	font-style: italic;
	font-size: .9rem;
	text-align: center;
}

/* Content du panel : 2 colonnes (chips + ressources) */
.search-overlay__content {
	padding: clamp(24px, 4vw, 36px) clamp(28px, 5vw, 48px) clamp(32px, 5vw, 44px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 44px;
}

.search-overlay__heading {
	margin: 0 0 14px;
	color: color-mix(in hsl, var(--accent) 70%, #000);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Chips "recherches suggérées" */
.search-overlay__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.search-overlay__chip {
	padding: 9px 14px;
	border-radius: 999px;
	background: color-mix(in hsl, var(--primary) 8%, #fff);
	color: var(--primary);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid color-mix(in hsl, var(--primary) 18%, transparent);
	transition: background .15s ease, transform .12s ease;
}

.search-overlay__chip:hover,
.search-overlay__chip:focus-visible {
	background: color-mix(in hsl, var(--primary) 18%, #fff);
	transform: translateY(-1px);
}

/* Ressources à explorer */
.search-overlay__resources {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.search-overlay__resources a {
	display: grid;
	gap: 3px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: padding-left .15s ease;
}

.search-overlay__resources a:hover,
.search-overlay__resources a:focus-visible {
	padding-left: 6px;
}

.search-overlay__resources strong {
	font-family: 'Lobster Two', 'Georgia', cursive;
	font-style: italic;
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--text);
}

.search-overlay__resources span {
	color: var(--muted);
	font-size: .85rem;
	line-height: 1.5;
}

/* Responsive */
@media (max-width: 760px) {
	.search-overlay {
		padding: 72px 16px 16px;
	}
	.search-overlay__content {
		grid-template-columns: 1fr;
	}
	.search-overlay__input {
		min-height: 56px;
		font-size: 1rem;
	}
	.search-overlay__suggest-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.search-overlay__suggest-type {
		min-width: 0;
		justify-self: start;
	}
}

/* ===== Search overlay — mode nuit =====
   Les fonds par défaut sont hardcodés en clair (#fffaf2, rgba(255,255,255,.9),
   color-mix avec #fff…) pour le rendu jour. En mode nuit, var(--text) bascule
   en clair → texte clair sur fond clair = illisible. On override ici tous
   les fonds vers le sombre, en conservant les accents primary/accent qui
   marchent bien dans les deux modes. */
[data-theme="dark"] .search-overlay {
	background: rgba(0, 0, 0, .55);   /* renforce l'isolation visuelle */
}

[data-theme="dark"] .search-overlay__panel {
	background:
		radial-gradient(circle at 88% 12%, color-mix(in hsl, var(--accent) 18%, transparent), transparent 30%),
		linear-gradient(180deg, var(--panel), color-mix(in hsl, var(--bg) 85%, #000));
	border: 1px solid var(--line-strong);
	box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .search-overlay__top {
	border-bottom-color: var(--line);
}

[data-theme="dark"] .search-overlay__close {
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--line-strong);
}
[data-theme="dark"] .search-overlay__close:hover,
[data-theme="dark"] .search-overlay__close:focus-visible {
	background: color-mix(in hsl, var(--card) 80%, #fff);
}

[data-theme="dark"] .search-overlay__input {
	background: rgba(255, 255, 255, .06);
	border-color: color-mix(in hsl, var(--primary) 35%, var(--line-strong));
	color: var(--text);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .search-overlay__input::placeholder {
	color: color-mix(in hsl, var(--text) 50%, transparent);
}
[data-theme="dark"] .search-overlay__input:focus {
	background: rgba(255, 255, 255, .09);
	border-color: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in hsl, var(--primary) 25%, transparent),
				0 12px 34px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .search-overlay__suggest {
	background: var(--card);
	border-color: var(--line-strong);
	box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .search-overlay__suggest-item:hover,
[data-theme="dark"] .search-overlay__suggest-item.is-active {
	background: color-mix(in hsl, var(--primary) 18%, transparent);
}
[data-theme="dark"] .search-overlay__suggest-type {
	background: color-mix(in hsl, var(--accent) 22%, transparent);
	color: color-mix(in hsl, var(--accent) 80%, #fff);
}
[data-theme="dark"] .search-overlay__suggest-title {
	color: var(--text);
}

[data-theme="dark"] .search-overlay__heading {
	/* En mode jour, le heading est color-mix(accent 70%, #000) — assombri pour
	   contraster sur fond clair. En mode nuit on prend l'accent direct, plus
	   lumineux, qui se détache mieux sur fond sombre. */
	color: color-mix(in hsl, var(--accent) 85%, #fff);
}

[data-theme="dark"] .search-overlay__chip {
	background: color-mix(in hsl, var(--primary) 16%, transparent);
	color: color-mix(in hsl, var(--primary) 70%, #fff);
	border-color: color-mix(in hsl, var(--primary) 35%, transparent);
}
[data-theme="dark"] .search-overlay__chip:hover,
[data-theme="dark"] .search-overlay__chip:focus-visible {
	background: color-mix(in hsl, var(--primary) 28%, transparent);
}

[data-theme="dark"] .search-overlay__resources a {
	border-bottom-color: var(--line);
}
[data-theme="dark"] .search-overlay__resources strong {
	color: var(--text);
}
[data-theme="dark"] .search-overlay__resources span {
	color: color-mix(in hsl, var(--text) 65%, transparent);
}