/*
 * Bolly Deewani — feuille de style principale.
 *
 * Reproduction fidèle de la maquette « Direction A · Crème » :
 *   - header sticky sombre, liseré rose ;
 *   - hero avec photos inclinées + ombres dures ;
 *   - manifeste rose plein + compteurs ;
 *   - festival marigold ;
 *   - grille disciplines cyclée ;
 *   - art-thérapie teal ;
 *   - témoignages cartes ;
 *   - newsletter marigold ;
 *   - footer sombre.
 *
 * Variables CSS (--bd-*) exposées pour permettre des overrides ponctuels.
 */

/* ─── Tokens ───────────────────────────────────────────────────────────── */
:root {
	--bd-creme:     #F5EBD8;
	--bd-ink:       #241712;
	--bd-border:    #3A2A22;
	--bd-white:     #FFFFFF;
	--bd-rose:      #C8284F;
	--bd-marigold:  #E8841C;
	/* Le marigold de marque ne dépasse 3:1 sur aucun de nos fonds (2,29 sur
	   crème, 2,00 sur framboise, 2,62 sur sarcelle). Ces deux déclinaisons
	   servent partout où il porte une information et pas seulement du décor. */
	--bd-marigold-fonce: #A85E08;
	--bd-marigold-clair: #F5B15F;
	/* Le framboise est le fond le plus exigeant : #F5B15F n'y atteint que
	   2,93:1. Cette valeur-ci passe sur les trois fonds sombres. */
	--bd-or-clair:       #F5D9A8;
	--bd-teal:      #0F6266;

	--bd-on-dark:   #F5EBD8;
	--bd-stripe:    rgba(255, 255, 255, 0.18);

	--bd-shadow-1:  6px 6px 0 var(--bd-ink);
	--bd-shadow-2:  8px 8px 0 var(--bd-ink);
	--bd-shadow-3:  12px 12px 0 var(--bd-ink);
	--bd-shadow-4:  16px 16px 0 var(--bd-marigold);

	--bd-radius:    0;

	--bd-content:   1280px;
	--bd-narrow:    760px;
	--bd-section-y: 100px;
}

/* ─── Reset léger / globals ───────────────────────────────────────────── */
/* scroll-padding-top : le header collant ne doit pas recouvrir la cible d'une
   ancre (#bd-content, liens de menu vers une section). */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Bouton « retour en haut » — desktop uniquement : sur mobile il masquerait
   du contenu et le pouce est déjà proche du header collant. */
.bd-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 45;
	width: 48px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--bd-on-dark);
	background: var(--bd-ink);
	border: 2px solid var(--bd-rose);
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	/* `visibility` (et non l'opacité seule) : sans elle le bouton reste
	   focalisable alors qu'il est invisible, et le focus clavier semble
	   disparaître en fin de page (RGAA 10.7.1). Le JS pose aussi `inert`. */
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
@media (min-width: 861px) {
	.bd-to-top { display: flex; }
}
/* Sans JS le bouton reste `hidden` : il ne doit jamais réapparaître via le display:flex ci-dessus. */
.bd-to-top[hidden] { display: none; }
.bd-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.bd-to-top:hover { background: var(--bd-rose); color: var(--bd-ink); }
.bd-to-top:focus-visible { outline: 3px solid var(--bd-marigold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.bd-to-top { transition: none; }
}

/* Lien d'évitement clavier — caché jusqu'au focus. */
.bd-skip-link {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 100;
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	padding: 12px 18px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border: 2px solid var(--bd-marigold);
	transform: translateY(-160%);
	transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1);
}
.bd-skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.bd-skip-link { transition: none; }
}
body { background: var(--bd-creme); color: var(--bd-ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.55; }
::selection { background: var(--bd-rose); color: var(--bd-white); }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* ─── Boutons ─────────────────────────────────────────────────────────── */
.bd-btn {
	display: inline-block;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding: 15px 26px;
	border: 0;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.2,1.1,.3,1), box-shadow .25s, background .2s, color .2s;
}
.bd-btn--primary    { background: var(--bd-rose);     color: var(--bd-white); }
.bd-btn--outline    { background: transparent;        color: currentColor;     border: 2px solid currentColor; padding: 13px 24px; }
.bd-btn--ink        { background: var(--bd-ink);      color: var(--bd-marigold); }
.bd-btn--marigold   { background: var(--bd-marigold); color: var(--bd-ink); }
.bd-btn--small      { padding: 10px 16px; font-size: 14px; }
.bd-btn:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 0 1px currentColor, 0 10px 34px -8px currentColor;
}
.bd-btn--outline:hover {
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	box-shadow: none;
}
/* Retour tactile à l'appui : le bouton « répond » au doigt/clic. */
.bd-btn:active { transform: scale(0.97); transition-duration: .1s; }

/* ─── Focus visible (accessibilité clavier) ───────────────────────────── */
/* RGAA 3.3.1 / WCAG 1.4.11 : l'indicateur doit atteindre 3:1 avec CE QUI
   L'ENTOURE. Le marigold n'y arrivait que sur l'encre (2,29:1 sur crème,
   2,71 sur blanc, 2,00 sur rose) : on prend l'encre par défaut (14,7:1 sur
   crème, 12,9 sur blanc) doublée d'un halo crème, qui garantit le contraste
   même sur les fonds sombres. Le marigold reste sur les fonds encre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bd-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--bd-creme);
}
.bd-header :focus-visible,
.bd-footer :focus-visible,
.bd-lightbox :focus-visible,
.bd-modal :focus-visible,
.bd-join-section--ink :focus-visible,
.bd-card--ink:focus-visible {
	outline-color: var(--bd-marigold);
	box-shadow: 0 0 0 6px var(--bd-ink);
}

/* ─── Effets de survol réservés aux vrais pointeurs ───────────────────── */
/* Sur écran tactile, un tap ne doit pas « coller » l'état survol (lift). */
@media (hover: none) {
	.bd-btn:hover,
	.bd-card:hover { transform: none; box-shadow: none; }
}

/* ─── Kicker (sur-titres mono) ────────────────────────────────────────── */
.bd-kicker {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 16px;
	opacity: 0.85;
}
.bd-kicker--rose { color: var(--bd-rose); opacity: 1; }

/* ─── Marquee (ticker) ────────────────────────────────────────────────── */
.bd-marquee {
	background: var(--bd-ink);
	color: var(--bd-marigold);
	padding: 14px 0;
	border-top: 4px solid var(--bd-rose);
	overflow: hidden;
	width: 100%;
}
.bd-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	animation: bd-marquee 46s linear infinite;
	will-change: transform;
}
.bd-marquee__item {
	font-family: 'Rozha One', serif;
	font-size: 28px;
	letter-spacing: 0.04em;
	padding-right: 32px;
}
@keyframes bd-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── Reveal / Spin / Wobble (animations principales) ─────────────────── */
/* Le contenu est visible par défaut ; on ne le masque que si JS est présent
   (classe .has-js posée tôt dans le <head>) — sinon la page reste lisible
   sans JS / dans les crawlers qui ne déclenchent pas l'IntersectionObserver. */
.has-js .bd-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .7s cubic-bezier(0.23, 1, 0.32, 1), transform .7s cubic-bezier(0.23, 1, 0.32, 1);
	will-change: opacity, transform;
}
.bd-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Le titre principal est l'élément LCP de chaque page : le laisser à
   opacity:0 jusqu'à l'exécution d'animations.js (chargé en defer, en pied de
   page) repoussait le LCP du temps de chargement du JS. Il s'anime donc en
   CSS pur, sans attendre l'IntersectionObserver — qui posera .is-in ensuite,
   sans effet de bord. */
.has-js .bd-hero__title .bd-reveal,
.has-js .bd-page-hero__title .bd-reveal,
.has-js .bd-join-hero__title.bd-reveal {
	opacity: 1;
	transform: none;
	animation: bd-reveal-in .7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes bd-reveal-in {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.has-js .bd-hero__title .bd-reveal,
	.has-js .bd-page-hero__title .bd-reveal,
	.has-js .bd-join-hero__title.bd-reveal { animation: none; }
}
.bd-no-motion .bd-hero__title .bd-reveal,
.bd-no-motion .bd-page-hero__title .bd-reveal,
.bd-no-motion .bd-join-hero__title.bd-reveal { animation: none; }
.bd-reveal[data-bd-step="1"].is-in { transition-delay: .09s; }
.bd-reveal[data-bd-step="2"].is-in { transition-delay: .18s; }
.bd-reveal[data-bd-step="3"].is-in { transition-delay: .27s; }
.bd-reveal[data-bd-step="4"].is-in { transition-delay: .36s; }
.bd-reveal[data-bd-step="5"].is-in { transition-delay: .45s; }

.bd-ornament { display: block; }
.bd-spin       { animation: bd-spin 26s linear infinite; transform-origin: 50% 50%; }
.bd-spin-slow  { animation: bd-spin 64s linear infinite; transform-origin: 50% 50%; }
.bd-wobble     { animation: bd-wobble 4.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes bd-spin   { to { transform: rotate(360deg); } }
@keyframes bd-wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(-4deg); } }

/* Paillettes (twinkle) */
.bd-glitter { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.bd-glitter span {
	position: absolute;
	border-radius: 50%;
	animation: bd-twinkle 2.4s ease-in-out infinite;
	will-change: opacity, transform;
}
@keyframes bd-twinkle {
	0%,100% { opacity: 0;   transform: scale(0.4); }
	50%     { opacity: 0.9; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
	.bd-reveal { opacity: 1; transform: none; transition: none; }
	.bd-spin, .bd-spin-slow, .bd-wobble { animation: none; }
	.bd-marquee__track { animation: none; }
	.bd-glitter { display: none; }
}

/* RGAA 13.8 : le mouvement automatique doit pouvoir être arrêté DEPUIS LA
   PAGE — beaucoup de personnes gênées par le mouvement n'ont pas activé la
   préférence système. Le bouton du pied de page bascule cette classe (et la
   mémorise), qui reprend exactement les mêmes neutralisations. */
.bd-no-motion .bd-reveal { opacity: 1; transform: none; transition: none; }
.bd-no-motion .bd-spin,
.bd-no-motion .bd-spin-slow,
.bd-no-motion .bd-wobble { animation: none; }
.bd-no-motion .bd-marquee__track { animation: none; }
.bd-no-motion .bd-glitter { display: none; }

.bd-motion-toggle {
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font: inherit;
	font-size: 13px;
	padding: 7px 14px;
	cursor: pointer;
}
.bd-motion-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* ─── Placeholders rayés ──────────────────────────────────────────────── */
.bd-placeholder {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	background-image:
		repeating-linear-gradient(135deg, transparent 0 12px, var(--bd-stripe) 12px 13px);
}
.bd-placeholder--rose { background-color: var(--bd-rose); color: var(--bd-white); }
.bd-placeholder--ink  { background-color: var(--bd-ink);  color: var(--bd-on-dark); }
.bd-placeholder--teal { background-color: var(--bd-teal); color: var(--bd-white); }
.bd-placeholder__label {
	display: inline-block;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	padding: 5px 9px;
	margin: 14px;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
/* WordPress enveloppe chaque template-part dans un <div> dont la hauteur est
   exactement celle du header : `position: sticky` sur .bd-header n'a alors
   aucune marge de manœuvre et le menu défile avec la page. On sort ce wrapper
   du layout pour que le header colle vraiment (mobile comme desktop). */
.wp-site-blocks > .wp-block-template-part { display: contents; }

.bd-header {
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	border-bottom: 4px solid var(--bd-rose);
	position: sticky;
	top: 0;
	z-index: 50;
}
/* Connectée à l'admin : la barre d'outils WordPress est fixe en haut, le
   header collant doit se caler dessous (32 px, 46 px sur petit écran). */
.admin-bar .bd-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .bd-header { top: 46px; }
}
/* Sous 600 px la barre d'admin n'est plus fixe : elle défile avec la page. */
@media screen and (max-width: 600px) {
	.admin-bar .bd-header { top: 0; }
}
.bd-header__inner {
	max-width: var(--bd-content);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.bd-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.bd-header__logo-mark {
	width: 36px; height: 36px;
	background: var(--bd-rose);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Rozha One', serif; font-size: 26px; color: var(--bd-white);
	line-height: 1;
}
.bd-header__wordmark { font-family: 'Rozha One', serif; font-size: 24px; letter-spacing: -0.01em; line-height: 1; }
.bd-header__wordmark span { color: var(--bd-marigold); }
.bd-header__logo-img { height: 44px; width: auto; display: block; }

.bd-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
}
.bd-header__menu a {
	color: var(--bd-on-dark);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.bd-header__menu .current-menu-item a,
.bd-header__menu a:hover {
	color: var(--bd-marigold);
	border-bottom-color: var(--bd-marigold);
}

/* Bouton hamburger — masqué en desktop */
.bd-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.bd-header__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--bd-on-dark);
	transition: transform .3s cubic-bezier(.2,1,.3,1), opacity .2s;
}
.bd-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bd-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bd-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
	.bd-header__burger { display: flex; }
	.bd-header__inner { gap: 10px; }
	.bd-header__cta { margin-left: auto; padding: 9px 12px; font-size: 13px; }
	/* Le burger est AVANT le menu dans le DOM (ordre de tabulation correct,
	   cf. site-header/render.php) mais reste à droite visuellement. */
	.bd-header__brand  { order: 1; }
	.bd-header__cta    { order: 2; }
	.bd-header__burger { order: 3; }

	.bd-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bd-ink);
		border-top: 2px solid var(--bd-stripe);
		padding: 8px 24px 20px;
		box-shadow: 0 24px 40px -20px rgba(0,0,0,0.6);
		/* Fermé : présent dans le DOM mais escamoté et inerte. */
		opacity: 0;
		transform: translateY(-10px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity .22s cubic-bezier(0.23, 1, 0.32, 1),
			transform .22s cubic-bezier(0.23, 1, 0.32, 1),
			visibility 0s linear .22s;
	}
	.bd-header__nav.is-open {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.bd-header__menu {
		flex-direction: column;
		gap: 0;
		font-size: 17px;
	}
	.bd-header__menu li { border-bottom: 1px solid rgba(255,255,255,0.08); }
	.bd-header__menu a {
		display: block;
		padding: 16px 0;
		border-bottom: 0;
	}
	.bd-header__menu .current-menu-item a,
	.bd-header__menu a:hover { border-bottom: 0; }
}

/* Très petits écrans : on masque le CTA texte pour garantir la place du burger
   (le lien S'inscrire reste accessible via le menu Planning / Disciplines). */
@media (max-width: 400px) {
	.bd-header__cta { display: none; }
	.bd-header__wordmark { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-header__burger span { transition: none; }
	.bd-header__nav { transform: none; transition: opacity .15s linear, visibility 0s linear .15s; }
	.bd-header__nav.is-open { transform: none; }
}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.bd-hero {
	background: var(--bd-creme);
	color: var(--bd-ink);
	position: relative;
	overflow: hidden;
}
.bd-hero__inner {
	max-width: var(--bd-content);
	margin: 0 auto;
	padding: 80px 24px 120px;
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
	z-index: 1;
}
@media (max-width: 860px) {
	.bd-hero__inner { grid-template-columns: 1fr; }
}
.bd-hero__ornament { position: absolute; z-index: 0; pointer-events: none; }
.bd-hero__ornament--burst   { top: -60px;  right: -80px; }
.bd-hero__ornament--mandala { bottom: 30px; left: -60px; opacity: .9; }
@media (max-width: 860px) {
	/* En dessous de 860px, .bd-hero__inner passe en 1 colonne : le texte
	   occupe toute la largeur et se retrouve derrière le burst (qui était
	   pensé pour la colonne photos). On le repousse hors du bloc de titre
	   et on baisse son opacité pour qu'il reste décoratif sans nuire à la
	   lisibilité (même logique que .bd-join-hero__mandala). */
	.bd-hero__ornament--burst {
		top: auto;
		bottom: -40px;
		right: -60px;
		opacity: .35;
	}
	.bd-hero__ornament--burst svg { width: 260px; height: 260px; }
	.bd-hero__ornament--mandala { opacity: .35; }
}

.bd-hero__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(44px, 6.8vw, 99px);
	line-height: .88;
	letter-spacing: -0.03em;
	margin: 0;
	font-weight: 400;
}
.bd-hero__title > span { display: block; }
.bd-hero__accent { color: var(--bd-rose); }
.bd-hero__stamp {
	background: var(--bd-rose);
	color: var(--bd-creme);
	padding: 0 12px;
	display: inline-block;
	transform: rotate(-2deg);
	white-space: nowrap;
}
.bd-hero__lede { font-size: 19px; line-height: 1.45; color: rgba(0, 0, 0, 0.8); max-width: 520px; margin-top: 28px; }
.bd-hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.bd-hero__photos { position: relative; min-height: 560px; }
@media (max-width: 860px) { .bd-hero__photos { min-height: 480px; } }
.bd-hero__photo {
	position: absolute;
	overflow: hidden;
	margin: 0;
}
.bd-hero__photo--main {
	top: 0; right: 0;
	width: 85%; height: 440px;
	transform: rotate(2deg);
	box-shadow: var(--bd-shadow-3);
	background: var(--bd-rose);
}
.bd-hero__photo--secondary {
	bottom: 0; left: 0;
	width: 52%; height: 260px;
	transform: rotate(-4deg);
	box-shadow: 8px 8px 0 var(--bd-rose);
	background: var(--bd-ink);
}
.bd-hero__photo-img,
.bd-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-hero__credit {
	position: absolute;
	bottom: 8px; right: 8px;
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 4px 8px;
}
.bd-hero__sticker {
	position: absolute;
	top: 20px;
	left: -10px;
	background: var(--bd-marigold);
	color: var(--bd-ink);
	padding: 8px 14px;
	font-family: 'Rozha One', serif;
	font-size: 22px;
	transform: rotate(-8deg);
	box-shadow: 4px 4px 0 var(--bd-ink);
}

/* ─── Manifeste ───────────────────────────────────────────────────────── */
.bd-manifesto {
	background: var(--bd-rose);
	color: var(--bd-white);
	padding: var(--bd-section-y) 24px;
	position: relative;
	overflow: hidden;
}
.bd-manifesto__ornament { position: absolute; z-index: 0; pointer-events: none; }
.bd-manifesto__ornament--top    { top: -40px; right: -60px; opacity: .55; }
.bd-manifesto__ornament--bottom { bottom: -30px; left: 40px; opacity: .4; }
.bd-manifesto__inner { max-width: 980px; margin: 0 auto; position: relative; z-index: 1; }
.bd-manifesto__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(40px, 6vw, 74px);
	line-height: .95;
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 400;
}
.bd-manifesto__title > span { display: block; }
.bd-manifesto__stamp {
	background: var(--bd-ink);
	color: var(--bd-marigold);
	padding: 0 16px;
	display: inline-block;
}
.bd-manifesto__lede { font-size: 20px; line-height: 1.55; margin-top: 36px; max-width: 760px; }

.bd-manifesto__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
	margin-top: 56px;
}
.bd-stat__value {
	font-family: 'Rozha One', serif;
	font-size: 72px;
	line-height: 1;
	color: var(--bd-creme);
}
.bd-stat__label {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 4px;
	opacity: 0.9;
}

/* ─── Event-feature ───────────────────────────────────────────────────── */
.bd-event {
	background: var(--bd-marigold);
	color: var(--bd-ink);
	padding: 90px 24px;
	position: relative;
	overflow: hidden;
}
.bd-event__ornament { position: absolute; top: 40px; left: -90px; opacity: 0.85; z-index: 0; pointer-events: none; }
.bd-event__inner { max-width: var(--bd-content); margin: 0 auto; position: relative; z-index: 1; }
.bd-event__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .bd-event__grid { grid-template-columns: 1fr; } }

.bd-event__date {
	display: inline-flex;
	align-items: stretch;
	background: var(--bd-creme);
	border: 3px solid var(--bd-ink);
	margin-bottom: 26px;
	box-shadow: var(--bd-shadow-1);
}
.bd-event__date-day {
	font-family: 'Rozha One', serif;
	font-size: clamp(54px, 9vw, 96px);
	line-height: 0.78;
	padding: 14px 20px;
	border-right: 3px solid var(--bd-ink);
	display: flex;
	align-items: center;
}
.bd-event__date-meta { display: flex; flex-direction: column; justify-content: center; padding: 10px 22px; }
.bd-event__date-month {
	font-family: 'Rozha One', serif;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1;
}
.bd-event__date-hours {
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 7px;
	font-weight: 700;
}

.bd-event__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(52px, 8vw, 104px);
	line-height: 0.84;
	letter-spacing: -0.03em;
	margin: 0;
	font-weight: 400;
}
.bd-event__title > span { display: block; }
.bd-event__year {
	color: var(--bd-ink);
	text-shadow: 6px 6px 0 var(--bd-rose);
}
.bd-event__lede { font-size: 18px; line-height: 1.5; margin-top: 20px; max-width: 470px; }

.bd-event__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.bd-chip { display: inline-block; background: var(--bd-creme); border: 1.5px solid var(--bd-ink); padding: 8px 14px; }
.bd-chip__k {
	display: block;
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}
.bd-chip__v { font-size: 14px; font-weight: 700; margin-top: 2px; display: block; }

.bd-event__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.bd-event__cta .bd-btn { text-align: center; }
@media (max-width: 560px) {
	.bd-event__chips,
	.bd-event__cta { grid-template-columns: 1fr; }
}

.bd-event__media .bd-event__photo {
	width: 100%; height: 360px; margin: 0;
	box-shadow: 0 16px 34px -20px rgba(0,0,0,0.55);
	background: var(--bd-ink);
	overflow: hidden;
}
.bd-event__media .bd-event__photo img,
.bd-event__photo-img { width: 100%; height: 100%; object-fit: cover; }
.bd-event__photos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.bd-event__photos-row .bd-placeholder { height: 150px; }

/* ─── Disciplines (grille) ───────────────────────────────────────────── */
.bd-disciplines {
	background: var(--bd-creme);
	color: var(--bd-ink);
	padding: var(--bd-section-y) 24px;
}
.bd-disciplines__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-disciplines__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 48px;
}
.bd-disciplines__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(40px, 5vw, 62px);
	line-height: 0.95;
	margin: 8px 0 0;
	font-weight: 400;
}
.bd-text-accent { color: var(--bd-rose); }

.bd-link-arrow {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bd-ink);
	border-bottom: 2px solid var(--bd-rose);
	padding-bottom: 4px;
	text-decoration: none;
}

.bd-disciplines__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	border: 2px solid var(--bd-border);
}
.bd-card {
	padding: 24px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s;
	border-right: 2px solid var(--bd-border);
	border-bottom: 2px solid var(--bd-border);
}
.bd-disciplines__grid .bd-card:nth-child(4n) { border-right: 0; }
.bd-disciplines__grid .bd-card:nth-last-child(-n+4) { border-bottom: 0; }
.bd-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45); z-index: 2; }
.bd-card:active { transform: scale(0.99); transition-duration: .1s; }
.bd-card--rose   { background: var(--bd-rose);     color: var(--bd-white); }
.bd-card--teal   { background: var(--bd-teal);     color: var(--bd-white); }
.bd-card--orange { background: var(--bd-marigold); color: var(--bd-ink); }
.bd-card--creme  { background: var(--bd-creme);    color: var(--bd-ink); }
.bd-card--ink    { background: var(--bd-ink);      color: var(--bd-on-dark); }
.bd-card__level {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.bd-card__title {
	display: block;
	font-family: 'Rozha One', serif;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.01em;
}
.bd-card__text { display: block; font-size: 14px; line-height: 1.45; margin-top: 8px; opacity: 0.9; }
.bd-card__cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bd-card__arrow { transition: transform .3s; }
.bd-card:hover .bd-card__arrow { transform: translate(4px, -4px); }

/* Carte illustrée (« Autres festivals » d'une fiche festival) : la photo de
   l'édition passe en fond, l'aplat de couleur de la carte reste dessous et
   sert de repli aux fiches sans image à la une. */
.bd-card--photo .bd-card__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.bd-card--photo .bd-card__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Voile sombre indispensable : le texte de la carte est blanc et la photo est
   quelconque. Dans le pire cas (photo entièrement blanche), le voile ramène
   le fond à ~#4E4841 en haut → contraste ≈ 6,9:1 avec le blanc, et bien plus
   bas dans la carte (RGAA 3.2/3.3 : 4,5:1 exigés pour le texte courant). */
.bd-card--photo .bd-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 23, 18, 0.72) 0%, rgba(36, 23, 18, 0.9) 100%);
}
/* Le contenu repasse au-dessus du fond photo. */
.bd-card--photo > *:not(.bd-card__photo) { position: relative; z-index: 1; }
/* Forcé après .bd-card--orange / --creme, dont le texte sombre serait
   illisible sur le voile. */
.bd-card.bd-card--photo { color: var(--bd-white); }
.bd-card--photo .bd-card__text { opacity: 1; }

/* Mobile, home uniquement (data-bd-discipline-carousel) : carrousel autoplay
   (3 cartes visibles, celle du centre en pleine opacité) plutôt qu'une
   longue pile de 8 cartes empilées verticalement. La page Disciplines
   (12 cartes, sans cet attribut) garde sa grille classique. */
.bd-disciplines__dots { display: none; }
@media (max-width: 700px) {
	.bd-disciplines__grid[data-bd-discipline-carousel] {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		border: none;
		margin: 0 -24px;
		padding: 6px 24px 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.bd-disciplines__grid[data-bd-discipline-carousel]::-webkit-scrollbar { display: none; }
	.bd-disciplines__grid[data-bd-discipline-carousel] .bd-card {
		flex: 0 0 78%;
		scroll-snap-align: center;
		border: 2px solid var(--bd-border);
		opacity: .4;
		transition: opacity .35s ease;
	}
	.bd-disciplines__grid[data-bd-discipline-carousel] .bd-card.is-active { opacity: 1; }
	.bd-disciplines__grid[data-bd-discipline-carousel] .bd-card:nth-child(4n) { border-right: 2px solid var(--bd-border); }
	.bd-disciplines__grid[data-bd-discipline-carousel] .bd-card:nth-last-child(-n+4) { border-bottom: 2px solid var(--bd-border); }

	.bd-disciplines__dots { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
	.bd-disciplines__dots button { width: 9px; height: 9px; padding: 0; border: 2px solid var(--bd-ink); background: transparent; cursor: pointer; transition: background .2s, transform .2s, border-color .2s; }
	.bd-disciplines__dots button.is-on { background: var(--bd-rose); border-color: var(--bd-rose); transform: scale(1.25); }
}

/* ─── Art-thérapie ────────────────────────────────────────────────────── */
.bd-art {
	background: var(--bd-teal);
	color: var(--bd-white);
	padding: var(--bd-section-y) 24px;
	position: relative;
	overflow: hidden;
}
.bd-art__ornament { position: absolute; top: -90px; right: -110px; opacity: 0.32; z-index: 0; pointer-events: none; }
.bd-art__inner {
	max-width: var(--bd-content); margin: 0 auto;
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 64px; align-items: center;
}
@media (max-width: 860px) { .bd-art__inner { grid-template-columns: 1fr; gap: 40px; } }
.bd-art__photo { width: 100%; height: 480px; margin: 0; box-shadow: var(--bd-shadow-4); overflow: hidden; }
.bd-art__photo img { width: 100%; height: 100%; object-fit: cover; }

.bd-art__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(38px, 5vw, 60px);
	line-height: 0.95;
	margin: 0;
	font-weight: 400;
}
.bd-art__accent { color: var(--bd-creme); }
.bd-art__lede { font-size: 18px; line-height: 1.55; margin-top: 24px; opacity: 0.85; }

.bd-art__programs { display: grid; gap: 16px; margin-top: 32px; }
.bd-art__program {
	padding: 12px 20px;
	background: rgba(255,255,255,0.05);
}
.bd-art__program--rose      { border-left: 4px solid var(--bd-rose); }
.bd-art__program--marigold  { border-left: 4px solid var(--bd-marigold); }
.bd-art__program-title { font-family: 'Rozha One', serif; font-size: 22px; }
.bd-art__program-detail { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.bd-art__cta { margin-top: 32px; }

/* ─── Témoignages ─────────────────────────────────────────────────────── */
.bd-testimonials {
	background: var(--bd-creme);
	color: var(--bd-ink);
	padding: var(--bd-section-y) 24px;
}
.bd-testimonials__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-testimonials__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 48px;
}
.bd-testimonials__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(40px, 5vw, 62px);
	line-height: 0.95;
	margin: 0;
	font-weight: 400;
}
.bd-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.bd-testimonial {
	margin: 0;
	padding: 32px 28px;
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 2px solid var(--bd-border);
}
.bd-testimonial--creme { background: var(--bd-creme); color: var(--bd-ink); }
.bd-testimonial--rose  { background: var(--bd-rose);  color: var(--bd-white); }
.bd-testimonial--teal  { background: var(--bd-teal);  color: var(--bd-white); }
.bd-testimonial__mark {
	font-family: 'Rozha One', serif;
	font-size: 84px;
	line-height: 0.5;
	color: var(--bd-rose);
}
.bd-testimonial--rose .bd-testimonial__mark { color: var(--bd-creme); }
.bd-testimonial--teal .bd-testimonial__mark { color: var(--bd-creme); }
.bd-testimonial__quote { font-size: 19px; line-height: 1.4; font-weight: 500; margin: -32px 0 0; }
.bd-testimonial__foot { margin-top: 24px; }
.bd-testimonial__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bd-testimonial__stars { margin-top: 12px; }
/* Les avis du livre d'or intercalent les étoiles entre le guillemet et la
   citation. Le retrait négatif de la citation, prévu pour la glisser sous le
   guillemet, la faisait alors passer PAR-DESSUS les étoiles dès que le texte
   était long : la carte n'ayant plus d'espace libre à distribuer, plus rien
   n'absorbait les -32px. Les étoiles prennent donc le retrait, la citation
   reprend un flux normal. */
.bd-testimonial__mark + .bd-testimonial__stars { margin-top: -30px; }
.bd-testimonial__stars + .bd-testimonial__quote { margin-top: 14px; }
.bd-testimonial__date {
	display: block;
	margin-top: 3px;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* 0.6 tombait à 2,80:1 sur carte rose, sous le 4,5:1 attendu (RGAA 3.2.1). */
	opacity: 0.85;
}
.bd-testimonial__discipline { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .8; display: block; }
/* La discipline devient un lien quand sa fiche existe encore. Souligné plutôt
   que coloré : sur les cartes rose et teal, aucune couleur d'accent ne tient
   le contraste, et la couleur seule ne signale pas un lien (RGAA 10.6). */
a.bd-testimonial__discipline {
	color: inherit;
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color .2s;
}
a.bd-testimonial__discipline:hover,
a.bd-testimonial__discipline:focus-visible { text-decoration-color: currentColor; }
.bd-testimonials__more { margin-top: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }

/* ─── Étoiles (note sur 5) ────────────────────────────────────────────── */
.bd-stars { display: inline-flex; line-height: 1; letter-spacing: 1px; font-size: 15px; }
/* Les étoiles portent la note : elles relèvent du seuil de 3:1 des éléments
   graphiques porteurs d'information (RGAA 3.3). Deux déclinaisons selon la
   clarté du fond de la carte, le marigold de marque n'y arrivant sur aucun. */
.bd-stars__on  { color: var(--bd-marigold-fonce); }
.bd-testimonial--rose .bd-stars__on,
.bd-testimonial--teal .bd-stars__on,
.bd-join-section--ink .bd-stars__on { color: var(--bd-or-clair); }
/* 0.28 tombait à 1,81:1 : sous le 3:1 exigé pour un graphique porteur
   d'information (RGAA 3.3.1). L'info reste doublée par l'aria-label. */
.bd-stars__off { color: currentColor; opacity: 0.45; }

/* ─── Utilitaire accessibilité : visible aux lecteurs d'écran uniquement ── */
.bd-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ─── Livre d'or ──────────────────────────────────────────────────────── */
.bd-guestbook { background: var(--bd-creme); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-guestbook__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-guestbook__head { margin-bottom: 48px; }
.bd-guestbook__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 0.95; margin: 0; }
.bd-guestbook__intro { font-size: 19px; opacity: 0.8; margin: 12px 0 0; max-width: 60ch; }
.bd-guestbook__summary { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.bd-guestbook__summary .bd-stars { font-size: 22px; }
/* min(300px, 100%) et non 300px : sous 348 px de large, le plancher de la
   colonne dépassait la place disponible et les cartes sortaient de l'écran. */
/* Trois colonnes au maximum : la page sert 6 avis, ce qui remplit exactement
   2 lignes de 3 (ou 3 lignes de 2). À 4 colonnes, la dernière ligne restait à
   moitié vide et la grille paraissait bancale. */
.bd-guestbook__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, (100% - 40px) / 3), 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
/* Le <li> s'étire déjà sur la hauteur de la ligne ; sans cette règle la carte
   qu'il contient gardait sa hauteur propre, et un avis court laissait un trou
   sous lui. */
.bd-guestbook__grid li { margin: 0; display: flex; }
.bd-guestbook__grid li > .bd-testimonial { flex: 1; }
.bd-guestbook__empty { opacity: .75; font-style: italic; }
[data-bd-guestbook-list] { outline: none; }

.bd-guestbook__pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; font-family: 'Space Mono', monospace; font-size: 13px; }
.bd-guestbook__pagelink { display: inline-block; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: none; padding: 6px; font: inherit; color: inherit; }
.bd-guestbook__pagelink.is-disabled { opacity: .4; text-decoration: none; cursor: default; }
.bd-guestbook__pagestatus { text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.bd-guestbook__head-cta { margin-top: 26px; }

.bd-guestbook-form { display: grid; gap: 14px; border: 2px solid var(--bd-border); background: var(--bd-white); padding: 28px; }
.bd-guestbook-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .bd-guestbook-form__row { grid-template-columns: 1fr; } }
.bd-guestbook-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.bd-guestbook-form input[type="text"],
.bd-guestbook-form input[type="email"],
.bd-guestbook-form input[type="date"],
.bd-guestbook-form textarea {
	width: 100%;
	background: var(--bd-white);
	border: 2px solid var(--bd-border);
	padding: 13px 14px;
	color: var(--bd-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	outline: none;
	box-sizing: border-box;
}
/* Idem contact : ne neutraliser l'outline qu'hors focus (RGAA 10.7.1). */
.bd-guestbook-form input:focus-visible,
.bd-guestbook-form textarea:focus-visible {
	outline: 3px solid var(--bd-ink);
	outline-offset: 2px;
}
.bd-guestbook-form textarea { resize: vertical; }

/* Le <select> natif n'héritait d'aucun style : il arrivait en gris système au
   milieu de champs à bordure franche. Il sert maintenant de repli quand le JS
   ne prend pas la main, et doit donc ressembler aux autres champs. */
.bd-guestbook-form select {
	width: 100%;
	background: var(--bd-white);
	border: 2px solid var(--bd-border);
	padding: 13px 40px 13px 14px;
	color: var(--bd-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	box-sizing: border-box;
	appearance: none;
	/* Chevron dessiné en fond : une flèche en SVG data-URI évite d'ajouter un
	   élément juste pour ça, et suit la couleur d'encre de la charte. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241712' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

/* ─── Champ de recherche dans une liste (livre d'or) ───────────────────── */
/* Le <label> du formulaire met son contenu en capitales espacées : bon pour un
   intitulé de champ, illisible sur des noms de stages entiers. On repart d'une
   casse normale à l'intérieur du champ et de sa liste. */
.bd-combo,
.bd-combo * {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}
.bd-combo { position: relative; }
.bd-combo__input {
	width: 100%;
	background: var(--bd-white);
	border: 2px solid var(--bd-border);
	padding: 13px 40px 13px 14px;
	color: var(--bd-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	box-sizing: border-box;
	/* Loupe : le champ ressemble à un champ de saisie, l'icône dit qu'on peut
	   y chercher plutôt que devoir tout écrire. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='%23241712' stroke-width='2'/%3E%3Cpath d='M13.5 13.5 18 18' stroke='%23241712' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px 17px;
}
.bd-combo__list {
	position: absolute;
	z-index: 20;
	top: calc(100% - 2px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--bd-white);
	border: 2px solid var(--bd-border);
	box-shadow: 6px 6px 0 var(--bd-ink);
}
.bd-combo__group {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
	padding: 12px 14px 4px;
}
.bd-combo__list > .bd-combo__group:first-child { padding-top: 4px; }
.bd-combo__option {
	padding: 9px 14px;
	font-size: 15px;
	cursor: pointer;
	/* Le libellé d'un stage porte sa date : il peut dépasser la largeur du
	   champ, on le laisse passer à la ligne plutôt que de le rogner. */
	line-height: 1.35;
}
.bd-combo__option.is-active,
.bd-combo__option:hover { background: var(--bd-creme); }
.bd-combo__option[aria-selected="true"] { font-weight: 700; }
/* Focus visible sur le champ, comme les autres champs du formulaire. */
.bd-combo__input:focus-visible { outline: 3px solid var(--bd-ink); outline-offset: 2px; }
.bd-combo__empty { padding: 12px 14px; font-size: 14px; opacity: 0.7; font-style: italic; }
.bd-guestbook-form__consent { display: flex !important; align-items: flex-start; gap: 10px; flex-direction: row !important; text-transform: none !important; font-weight: 400; }
.bd-guestbook-form__consent input { width: auto; }
.bd-guestbook-form__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.bd-guestbook-form__stars { border: none; padding: 0; margin: 0; }
.bd-guestbook-form__stars legend { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; padding: 0; }
.bd-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.bd-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bd-star-input label { display: block; font-size: 28px; line-height: 1; cursor: pointer; color: var(--bd-border); transition: color .15s; }
.bd-star-input input:checked ~ label,
.bd-star-input label:hover,
.bd-star-input label:hover ~ label { color: var(--bd-marigold); }
/* Étoile vide en contour : pleine par défaut, elle laissait croire que la
   note était déjà donnée et le formulaire partait sans note. */
.bd-star-input__glyph::before { content: '\2606'; }
.bd-star-input input:checked ~ label .bd-star-input__glyph::before,
.bd-star-input label:hover .bd-star-input__glyph::before,
.bd-star-input label:hover ~ label .bd-star-input__glyph::before { content: '\2605'; }
.bd-guestbook-form__hint { display: block; margin: 6px 0 0; font-size: 14px; opacity: .75; }
.bd-guestbook-form__stars .bd-guestbook-form__hint { margin-top: 4px; }
.bd-star-input input:focus-visible + label { outline: 3px solid var(--bd-marigold); outline-offset: 2px; border-radius: 2px; }
.bd-guestbook-form__stars[aria-invalid="true"] .bd-star-input label { color: var(--bd-rose); }

[aria-invalid="true"] { border-color: var(--bd-rose) !important; background: #fdeef1; }

/* ─── Modale « Laisser un avis » ─────────────────────────────────────────
   Rendue une fois en pied de page (dialog[open] par défaut : lisible et
   soumettable en flux normal sans JS). Le JS retire `open` et bascule sur
   showModal()/close() pour l'expérience modale (focus trap + Échap natifs). */
.bd-modal {
	border: 2px solid var(--bd-border);
	padding: 0;
	max-width: 640px;
	width: min(100% - 32px, 640px);
	max-height: calc(100vh - 32px);
	margin: 16px auto;
	background: var(--bd-white);
	color: var(--bd-ink);
	overflow: hidden;
}
.bd-modal::backdrop { background: rgba(58, 42, 34, .55); }
.bd-modal__panel { position: relative; padding: 32px; max-height: calc(100vh - 32px); overflow-y: auto; }
.bd-modal__title { font-family: 'Rozha One', serif; font-size: 28px; font-weight: 400; margin: 0 0 20px; }
.bd-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	background: transparent;
	border: 2px solid transparent;
	color: currentColor;
	cursor: pointer;
	border-radius: 50%;
}
.bd-modal__close:hover,
.bd-modal__close:focus-visible { border-color: var(--bd-border); }

/* ─── Presse ──────────────────────────────────────────────────────────── */
.bd-press { background: var(--bd-creme); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-press__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-press__head { max-width: 760px; margin-bottom: 48px; }
.bd-press__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(40px, 5.5vw, 68px); line-height: 0.95; margin: 8px 0 0; }
.bd-press__intro { font-size: 19px; line-height: 1.55; opacity: 0.82; margin: 18px 0 0; }

.bd-press__wall {
	list-style: none; margin: 0 0 56px; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	border: 2px solid var(--bd-border); border-bottom: 0; border-right: 0;
}
.bd-press__logo {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 110px; padding: 18px 20px;
	border-right: 2px solid var(--bd-border); border-bottom: 2px solid var(--bd-border);
	font-family: 'Rozha One', serif; font-size: 22px; line-height: 1.05;
	transition: background .2s, color .2s;
}
.bd-press__logo:hover { background: var(--bd-ink); color: var(--bd-marigold); }
.bd-press__logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bd-press__logo-img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; transition: opacity .2s, transform .2s; }
.bd-press__logo:has(.bd-press__logo-img):hover { background: none; color: inherit; }
.bd-press__logo:has(.bd-press__logo-img):hover .bd-press__logo-img { opacity: .8; transform: scale(1.05); }

.bd-press__quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 56px; }
.bd-press__quote { margin: 0; padding: 28px; border: 2px solid var(--bd-border); background: var(--bd-white); display: flex; flex-direction: column; gap: 16px; }
.bd-press__quote-text { font-family: 'Rozha One', serif; font-size: 22px; line-height: 1.2; margin: 0; }
/* La source ne s'appuie plus sur un tiret d'attribution : c'est la graisse, la
   chasse des capitales et l'alignement en pied de carte qui la posent. */
.bd-press__quote-src {
	font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-rose); font-style: normal;
	margin-top: auto;
}

.bd-press__contact {
	display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
	padding: 32px; background: var(--bd-ink); color: var(--bd-on-dark);
}
.bd-press__contact-k { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bd-marigold); margin: 0 0 6px; }
.bd-press__contact-mail { font-family: 'Rozha One', serif; font-size: clamp(22px, 3vw, 30px); color: var(--bd-on-dark); text-decoration: none; border-bottom: 2px solid var(--bd-marigold); }

/* Kit presse : la rédactrice peut mettre une image cliquable (couverture du
   dossier) à la place du bouton texte. Même destination dans les deux cas. */
.bd-press__kit-link { display: inline-flex; line-height: 0; border: 2px solid var(--bd-marigold); transition: transform .2s; }
.bd-press__kit-link:hover { transform: translateY(-3px); }
.bd-press__kit-img { display: block; max-width: 260px; max-height: 150px; width: auto; height: auto; object-fit: contain; }
/* Zone de dépôt de cette image dans l'éditeur (blocks/press/edit.js). */
.bd-press__kit-figure { margin: 0; width: 260px; max-width: 100%; }
.bd-press__kit-figure .bd-placeholder { min-height: 120px; }
@media (prefers-reduced-motion: reduce) {
	.bd-press__kit-link:hover { transform: none; }
}

/* Bouton contact flottant : reste visible pendant tout le scroll de la page. */
.bd-press__float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bd-rose);
	color: var(--bd-white);
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	padding: 14px 22px;
	box-shadow: var(--bd-shadow-2);
	transition: transform .2s, box-shadow .2s;
}
.bd-press__float:hover { transform: translateY(-3px); box-shadow: 10px 10px 0 var(--bd-ink); }
.bd-press__float span:first-child { font-size: 17px; }
@media (max-width: 640px) {
	/* Sur mobile, la barre fixe pleine largeur recouvrait en permanence le bas
	   du contenu sans moyen de la masquer (RGAA 10.11) : elle redevient un
	   bouton dans le flux, toujours visible mais plus obstruant. */
	.bd-press__float {
		position: static;
		display: flex;
		/* Le thème n'impose pas border-box globalement : width 100% + 16 px de
		   rembourrage de chaque côté débordaient de 32 px. */
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
		box-shadow: none;
		border-top: 2px solid var(--bd-ink);
		padding: 16px;
	}
	.bd-press__float:hover { transform: none; box-shadow: none; }
}

/* Le bouton « retour en haut » occupe le même coin : on le remonte sur les
   pages qui portent le bouton flottant Presse. */
body:has(.bd-press__float) .bd-to-top { bottom: 92px; }

/* ─── Festivals passés (galerie) ──────────────────────────────────────── */
.bd-pastfest { background: var(--bd-creme); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-pastfest__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-pastfest__head { max-width: 760px; margin-bottom: 44px; }
.bd-pastfest__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 0.95; margin: 8px 0 0; }
.bd-pastfest__intro { font-size: 19px; opacity: 0.82; margin: 16px 0 0; }
.bd-pastfest__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.bd-pastfest__card { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,1.1,.3,1); }
.bd-pastfest__media {
	position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
	border: 2px solid var(--bd-border); box-shadow: var(--bd-shadow-2);
}
.bd-pastfest__media--rose { background: var(--bd-rose); }
.bd-pastfest__media--teal { background: var(--bd-teal); }
.bd-pastfest__media--ink  { background: var(--bd-ink); }
.bd-pastfest__img { width: 100%; height: 100%; object-fit: cover; }
.bd-pastfest__ph {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: 'Rozha One', serif; font-size: clamp(44px, 7vw, 84px); color: var(--bd-creme); opacity: 0.85;
}
.bd-pastfest__play {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.55);
	color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px;
	backdrop-filter: blur(2px); transition: transform .3s, background .2s;
}
.bd-pastfest__card:hover { transform: translateY(-6px); }
.bd-pastfest__card:hover .bd-pastfest__play { transform: scale(1.12); background: var(--bd-rose); }
.bd-pastfest__body { padding: 16px 2px 0; }
.bd-pastfest__name { display: block; font-family: 'Rozha One', serif; font-size: 24px; line-height: 1.05; }
.bd-pastfest__meta { display: block; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-top: 6px; }
@media (hover: none) { .bd-pastfest__card:hover { transform: none; } }

/* ─── Instagram ───────────────────────────────────────────────────────── */
.bd-instagram {
	background: var(--bd-creme);
	color: var(--bd-ink);
	padding: var(--bd-section-y) 24px;
}
.bd-instagram__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-instagram__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.bd-instagram__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: 'Rozha One', serif;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 400;
	margin: 6px 0 16px;
}
.bd-instagram__icon { color: var(--bd-rose); flex: none; }
.bd-instagram__desc { margin: 0 0 24px; opacity: .85; }
.bd-instagram__cta { display: inline-flex; }
.bd-instagram__widget { width: 100%; }
.bd-instagram__widget iframe { width: 100% !important; border: none; }
.bd-instagram__carousel { position: relative; }
.bd-instagram__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.bd-instagram__track::-webkit-scrollbar { display: none; }
.bd-instagram__track:focus-visible { outline: 3px solid var(--bd-marigold); outline-offset: 4px; }
.bd-instagram__tile {
	display: block;
	flex: 0 0 clamp(150px, 28vw, 240px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 2px solid var(--bd-border);
	scroll-snap-align: start;
}
.bd-instagram__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.bd-instagram__tile:hover .bd-instagram__img,
.bd-instagram__tile:focus-visible .bd-instagram__img { transform: scale(1.06); }
.bd-instagram__tile .bd-placeholder { min-height: 0; height: 100%; align-items: center; justify-content: center; }
.bd-instagram__tile .bd-placeholder__label { margin: 0; }
.bd-instagram__nav { display: none; }
.has-js .bd-instagram__nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.bd-instagram__arrow {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	background: var(--bd-creme);
	color: var(--bd-ink);
	border: 2px solid var(--bd-ink);
	cursor: pointer;
	transition: background .2s, color .2s, transform .2s;
}
.bd-instagram__arrow:hover:not(:disabled) { background: var(--bd-ink); color: var(--bd-marigold); }
.bd-instagram__arrow:active:not(:disabled) { transform: scale(0.94); }
.bd-instagram__arrow:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
	.bd-instagram__tile:hover .bd-instagram__img,
	.bd-instagram__tile:focus-visible .bd-instagram__img { transform: none; }
}

/* ─── Newsletter ──────────────────────────────────────────────────────── */
.bd-newsletter {
	background: var(--bd-marigold);
	color: var(--bd-ink);
	padding: 88px 24px;
	position: relative;
	overflow: hidden;
	border-top: 4px solid var(--bd-ink);
}
.bd-newsletter__ornament { position: absolute; z-index: 0; pointer-events: none; }
.bd-newsletter__ornament--tr { top: -40px; right: -40px; }
.bd-newsletter__ornament--bl { bottom: -30px; left: -20px; }
.bd-newsletter__inner { max-width: 720px; margin: 0 auto; position: relative; text-align: center; z-index: 1; }
.bd-newsletter__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(34px, 4.5vw, 52px);
	line-height: 1;
	margin: 8px 0 0;
	font-weight: 400;
}
.bd-newsletter__form {
	display: flex;
	gap: 0;
	margin-top: 32px;
	border: 2px solid var(--bd-ink);
	background: var(--bd-white);
	padding: 4px;
}
.bd-newsletter__form input[type="email"] {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 14px 16px;
	color: var(--bd-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	outline: none;
}
/* Idem contact : ne neutraliser l'outline qu'hors focus (RGAA 10.7.1). */
.bd-newsletter__form input[type="email"]:focus-visible {
	outline: 3px solid var(--bd-ink);
	outline-offset: -3px;
}
.bd-newsletter__form button {
	background: var(--bd-ink);
	color: var(--bd-marigold);
	border: 0;
	padding: 14px 22px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

/* Mention de finalité sous le champ : elle doit rester lisible sur le fond
   du bloc, donc pas d'opacité qui la ferait passer sous le seuil de
   contraste (RGAA 3.2). */
.bd-newsletter__consent {
	max-width: 52ch;
	margin: 14px auto 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.bd-newsletter__consent a { color: inherit; text-underline-offset: 3px; }
.bd-newsletter__consent a:hover { text-decoration-thickness: 2px; }
.bd-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ─── Page-hero (intérieures) ─────────────────────────────────────────── */
.bd-page-hero {
	padding: 60px 24px 80px;
	position: relative;
	overflow: hidden;
}
.bd-page-hero--rose     { background: var(--bd-rose);     color: var(--bd-white); }
.bd-page-hero--creme    { background: var(--bd-creme);    color: var(--bd-ink); }
.bd-page-hero--marigold { background: var(--bd-marigold); color: var(--bd-ink); }
.bd-page-hero--teal     { background: var(--bd-teal);     color: var(--bd-white); }
.bd-page-hero__ornament { position: absolute; top: -100px; right: -100px; opacity: 0.95; z-index: 0; pointer-events: none; }
/* Sur petit écran, ce mandala de 500 px couvrait tout le hero et passait
   pile derrière le fil d'ariane, le kicker et le titre, qui devenaient
   illisibles sur ses pétales. On le garde, mais réduit, désaturé et repoussé
   dans l'angle, comme le hero d'accueil le fait déjà de ses ornements. */
@media (max-width: 700px) {
	/* Motif entier, jamais tronqué. Sur ces hero courts, un mandala de 300 px
	   fait presque la hauteur du bloc : quelle que soit la position, il ne
	   pouvait que se faire trancher par le bord droit, en une bande de
	   pétales flottante. Réduit, il tient tout entier dans l'angle. */
	/* Le hero garde une bande libre en bas : sur cette largeur, le motif
	   n'a nulle part où aller horizontalement, il se retrouvait derrière le
	   titre. C'est l'équivalent vertical de l'espace dont il dispose à droite
	   sur grand écran. */
	.bd-page-hero { padding-bottom: 150px; }
	.bd-page-hero__ornament { top: auto; bottom: 16px; right: 16px; opacity: 0.32; }
	.bd-page-hero__ornament .bd-ornament { width: 130px; height: 130px; }
}
.bd-page-hero__inner { max-width: var(--bd-content); margin: 0 auto; position: relative; z-index: 1; }
.bd-breadcrumb { display: flex; gap: 12px; font-size: 13px; font-weight: 500; margin-bottom: 24px; }
.bd-breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.bd-breadcrumb__current { font-weight: 600; }
.bd-page-hero__title {
	font-family: 'Rozha One', serif;
	font-size: clamp(60px, 9vw, 128px);
	line-height: 0.86;
	letter-spacing: -0.03em;
	margin: 12px 0 0;
	font-weight: 400;
}
.bd-page-hero__title > span { display: block; }
.bd-page-hero__accent { color: var(--bd-creme); }
.bd-page-hero--creme .bd-page-hero__accent { color: var(--bd-rose); }
.bd-page-hero__lede { font-size: 20px; line-height: 1.45; margin-top: 24px; max-width: 640px; opacity: 0.85; }
/* .bd-chip hérite sinon la couleur (souvent blanche) du hero, illisible sur son fond crème clair. */
.bd-page-hero .bd-chip { color: var(--bd-ink); margin-top: 20px; }

/* Séances d'une discipline : une ligne de chips (jours / horaire / lieu) par
   créneau, plusieurs cours pouvant coexister sur une même fiche. */
.bd-seances { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.bd-seances__item { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.bd-page-hero .bd-seances .bd-chip { margin-top: 0; }

/* ─── Section-header, rich-prose, footer, contact ─────────────────────── */
.bd-section-header { padding: 60px 24px 0; max-width: var(--bd-content); margin: 0 auto; }
.bd-section-header__title { font-family: 'Rozha One', serif; font-size: clamp(34px, 4.5vw, 52px); line-height: 0.95; margin: 8px 0 0; font-weight: 400; }

.bd-prose { padding: 40px 24px; }
.bd-prose + .bd-prose { padding-top: 0; }
.bd-prose__inner { max-width: var(--bd-narrow); margin: 0 auto; }
.bd-prose__title { font-family: 'Rozha One', serif; font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 400; margin: 0 0 16px; }
.bd-prose__body p { margin: 0 0 1em; }
.bd-prose__body a { color: var(--bd-rose); }
.bd-prose__body > *:last-child { margin-bottom: 0; }
/* Le bloc accepte désormais de vraies listes et de vrais sous-titres : sans
   ces règles, la rédaction continuerait de simuler des puces avec des tirets
   en début de ligne, faute de rendu correct. */
.bd-prose__body h3 { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin: 1.6em 0 0.5em; }
.bd-prose__body h4 { font-weight: 700; font-size: 19px; margin: 1.4em 0 0.4em; }
.bd-prose__body ul,
.bd-prose__body ol { margin: 0 0 1em; padding-left: 0; list-style: none; }
.bd-prose__body ol { counter-reset: bd-prose-li; }
.bd-prose__body li { position: relative; padding-left: 28px; margin: 0 0 0.5em; }
.bd-prose__body ul > li::before {
	content: '';
	position: absolute; left: 2px; top: 0.62em;
	width: 9px; height: 9px;
	background: var(--bd-rose);
}
.bd-prose__body ol > li::before {
	counter-increment: bd-prose-li;
	content: counter(bd-prose-li) '.';
	position: absolute; left: 0; top: 0;
	font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700;
	color: var(--bd-rose);
}
.bd-prose__body li > ul,
.bd-prose__body li > ol { margin: 0.5em 0 0; }

.bd-cta-wrap { padding: 24px; max-width: var(--bd-content); margin: 0 auto; text-align: center; }

/* ─── Fiche discipline (single) ───────────────────────────────────────── */
.bd-discipline-lead { padding: clamp(56px, 8vw, 96px) 24px; }
.bd-discipline-lead__inner { max-width: var(--bd-narrow); margin: 0 auto; }
.bd-discipline-lead--media .bd-discipline-lead__inner {
	max-width: var(--bd-content);
	display: grid;
	grid-template-columns: minmax(0, 46%) 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.bd-discipline-lead__media { margin: 0; }
.bd-discipline-lead__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 2px solid var(--bd-border);
	box-shadow: var(--bd-shadow-2);
}
/* ─── Vidéos (bloc bollydeewani/video + média principal des fiches) ───── */
.bd-video {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--bd-ink);
	border: 2px solid var(--bd-border);
	box-shadow: var(--bd-shadow-2);
}
.bd-video--ratio-16-9 { aspect-ratio: 16 / 9; }
.bd-video--ratio-9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.bd-video--ratio-1-1  { aspect-ratio: 1 / 1; }
/* Média principal d'une fiche : même gabarit que l'image à la une qu'il remplace. */
.bd-video--media { aspect-ratio: 4 / 5; }
.bd-video__media,
.bd-video__poster,
.bd-video__iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.bd-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: rgba(20, 12, 9, 0.25);
	border: 0;
	cursor: pointer;
	transition: background .2s ease;
}
.bd-video__play:hover { background: rgba(20, 12, 9, 0.4); }
.bd-video__play:focus-visible { outline: 3px solid var(--bd-marigold); outline-offset: -6px; }
.bd-video__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	padding-left: 6px;
	font-size: 26px;
	color: var(--bd-ink);
	background: var(--bd-creme);
	border: 2px solid var(--bd-ink);
	border-radius: 999px;
	box-shadow: var(--bd-shadow-2);
	transition: transform .2s ease;
}
.bd-video__play:hover .bd-video__play-icon { transform: scale(1.06); }
.bd-video__pause {
	position: absolute;
	right: 10px;
	bottom: 10px;
	min-width: 40px;
	min-height: 40px;
	font-size: 13px;
	color: var(--bd-on-dark);
	background: rgba(20, 12, 9, 0.75);
	border: 1.5px solid var(--bd-creme);
	border-radius: 999px;
	cursor: pointer;
}
.bd-video__pause:focus-visible { outline: 3px solid var(--bd-marigold); outline-offset: 2px; }

.bd-video-block { margin: 0; padding: 0 24px; }
.bd-video-block__inner { max-width: var(--bd-narrow); margin: 0 auto; }
.bd-video-block__caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
	.bd-video__play,
	.bd-video__play-icon { transition: none; }
}

.bd-discipline-lead__body { font-size: 20px; line-height: 1.55; max-width: 62ch; }
.bd-discipline-lead__body p { margin: 0 0 1em; }
.bd-discipline-lead__body p:last-child { margin-bottom: 0; }

/* Le panneau sombre est encarté (24px de crème de chaque côté) : sans marge
   haute, il venait coller le hero coloré quand la fiche n'a ni photo ni
   description, et les deux aplats se touchaient. */
.bd-discipline-cta { padding: clamp(32px, 5vw, 56px) 24px clamp(64px, 9vw, 100px); }
.bd-discipline-cta--no-lead { padding-top: clamp(56px, 8vw, 96px); }
.bd-discipline-cta__inner {
	max-width: var(--bd-content);
	margin: 0 auto;
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	padding: clamp(48px, 7vw, 88px) 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}
.bd-discipline-cta__lead {
	font-family: 'Space Mono', monospace;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	color: var(--bd-marigold);
	margin: 0;
}
.bd-discipline-cta__title {
	font-family: 'Rozha One', serif;
	font-weight: 400;
	font-size: clamp(30px, 4.5vw, 52px);
	line-height: 1;
	margin: 0 0 8px;
	max-width: 18ch;
	text-wrap: balance;
}

/* ─── Fiche festival (single) ─────────────────────────────────────────── */
.bd-festival-single__date { margin-bottom: 24px; }
.bd-festival-single__chips { margin: 20px 0; }

.bd-festival-programme { background: var(--bd-white); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-festival-programme__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-festival-programme__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bd-border); }
.bd-festival-programme__list li { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 2px solid var(--bd-border); }
.bd-festival-programme__time { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; color: var(--bd-rose); flex: 0 0 auto; min-width: 90px; }
.bd-festival-programme__label { font-size: 16px; }

.bd-festival-gallery { background: var(--bd-creme); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-festival-gallery__inner { max-width: var(--bd-content); margin: 0 auto; }
/* Le bloc Galerie natif (v2 : <figure class="wp-block-gallery has-nested-images">
   en flex, images imbriquées) impose la largeur de ses figures avec le
   sélecteur `figure.wp-block-image:not(#individual-image)` : le `:not(#id)`
   lui donne une spécificité de niveau identifiant (1,3,1) qu'aucun empilement
   de classes ne peut dépasser — nos règles étaient donc battues et les photos
   restaient à leur taille naturelle, éparpillées. On reprend la même astuce
   (`:not(#bd-no-id)`, identifiant volontairement inexistant, uniquement là
   pour le poids) et on ajoute l'ancêtre .bd-festival-gallery pour rester
   au-dessus même des variantes `.columns-N` du bloc natif. */
.bd-festival-gallery__wall .wp-block-gallery,
.bd-festival-gallery__wall .wp-block-gallery.has-nested-images,
.bd-festival-gallery__wall .blocks-gallery-grid {
	display: grid;
	/* Nombre de colonnes fixé, pas d'`auto-fit` : la photo d'ouverture
	   s'étend sur toute la rangée (1 / -1), donc aucune colonne n'est jamais
	   vide et `auto-fit` n'en replie aucune — il laissait une quatrième
	   colonne fantôme et un trou à droite. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Parti pris éditorial : la première photo ouvre la section sur toute la
   largeur, les suivantes suivent en grille régulière. C'est elle qui absorbe
   les formats horizontaux, que la grille recadrerait en portrait. */
.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image.bd-gallery__lead:not(#bd-no-id),
.bd-festival-gallery__wall .blocks-gallery-item.bd-gallery__lead {
	grid-column: 1 / -1;
}
.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image:not(#bd-no-id),
.bd-festival-gallery__wall .blocks-gallery-item {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	flex: none;
	border: 2px solid var(--bd-border);
	box-shadow: var(--bd-shadow-2);
	overflow: hidden;
}
/* Galerie « liée au fichier média » : le bloc natif enveloppe l'image dans un
   <a>, et `figure > img` ne matche alors plus rien. On cadre donc le lien
   comme une vignette et on vise l'image en descendant (pas en enfant direct). */
.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image > a:not(#bd-no-id) {
	display: block;
	width: 100%;
	margin: 0;
}
.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image img:not(#bd-no-id),
.bd-festival-gallery__wall .blocks-gallery-item img,
.bd-festival-gallery__wall img {
	display: block;
	/* Le bloc natif pose `flex: 1 0 0%` sur l'image, dont la figure est un
	   conteneur flex en colonne : la base 0 + l'étirement l'emportaient sur
	   notre `height`, qui ne servait à rien. */
	flex: none;
	width: 100%;
	height: 300px;
	max-width: none;
	object-fit: cover;
}
.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image.bd-gallery__lead img:not(#bd-no-id),
.bd-festival-gallery__wall .blocks-gallery-item.bd-gallery__lead img {
	height: 420px;
}
/* Sur petit écran, la grille empilerait une colonne de vignettes hautes : on
   voit la première photo, et les suivantes défilent horizontalement plutôt
   que de manger toute la page. Le débord de 18 % de la vignette suivante sert
   d'indice qu'il y a autre chose à voir. Pas de flèches : le groupe reste
   parcourable au clavier par les photos elles-mêmes, qui sont focusables. */
@media (max-width: 1000px) {
	.bd-festival-gallery__wall .wp-block-gallery,
	.bd-festival-gallery__wall .wp-block-gallery.has-nested-images,
	.bd-festival-gallery__wall .blocks-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.bd-festival-gallery__wall .wp-block-gallery,
	.bd-festival-gallery__wall .wp-block-gallery.has-nested-images,
	.bd-festival-gallery__wall .blocks-gallery-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		gap: 16px;
		/* L'ombre portée (8px) serait rognée par le défilement sans cette
		   marge basse et cette réserve à droite pour la dernière vignette. */
		padding: 0 10px 16px 0;
	}
	.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image:not(#bd-no-id),
	.bd-festival-gallery__wall .blocks-gallery-item {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image.bd-gallery__lead:not(#bd-no-id),
	.bd-festival-gallery__wall .blocks-gallery-item.bd-gallery__lead {
		/* Pas 100 % : sans le bord de la photo suivante qui dépasse, rien ne
		   dit qu'il y en a d'autres derrière. */
		flex: 0 0 90%;
	}
	.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image img:not(#bd-no-id),
	.bd-festival-gallery__wall .blocks-gallery-item img,
	.bd-festival-gallery__wall img { height: 300px; }
	.bd-festival-gallery .bd-festival-gallery__wall .wp-block-gallery.has-nested-images figure.wp-block-image.bd-gallery__lead img:not(#bd-no-id),
	.bd-festival-gallery__wall .blocks-gallery-item.bd-gallery__lead img { height: 340px; }
}
/* Photo agrandissable : le curseur et le focus visible doivent le dire, que
   le déclencheur soit l'image (rendue focusable côté serveur) ou le lien
   média qui l'enveloppe. */
.bd-festival-gallery__wall [data-bd-lightbox-photo] { cursor: zoom-in; }
/* Règle séparée : un navigateur sans :has() invaliderait toute la liste de
   sélecteurs, curseur compris, s'il partageait la règle ci-dessus. */
.bd-festival-gallery__wall a:has([data-bd-lightbox-photo]) { cursor: zoom-in; }
/* La vignette est en overflow:hidden : un focus dessiné à l'extérieur serait
   rogné, on le ramène donc à l'intérieur de la photo (RGAA 10.7). */
.bd-festival-gallery__wall [data-bd-lightbox-photo]:focus-visible,
.bd-festival-gallery__wall a:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 8px var(--bd-creme); }

/* ─── Galerie (bloc bollydeewani/gallery) ─────────────────────────────────
   Même parti pris que le mur photo d'un festival ci-dessus — première photo
   en ouverture pleine largeur, les suivantes en grille de trois, carrousel
   sous 700 px — mais sur notre propre markup : les figures sont écrites par
   render.php, donc aucun besoin des sélecteurs à spécificité d'identifiant
   qu'impose le bloc Galerie natif. */
.bd-gallery { background: var(--bd-white); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-gallery__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-gallery__head { max-width: 760px; margin-bottom: 44px; }
.bd-gallery__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 0.95; margin: 8px 0 0; }
.bd-gallery__intro { font-size: 19px; opacity: 0.82; margin: 16px 0 0; }
.bd-gallery__wall {
	display: grid;
	/* Nombre de colonnes fixé, pas d'`auto-fit` : la photo d'ouverture s'étend
	   sur toute la rangée (1 / -1) et laisserait sinon une colonne fantôme. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.bd-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--bd-border);
	box-shadow: var(--bd-shadow-2);
}
/* Parti pris éditorial : la première photo ouvre la section sur toute la
   largeur. C'est elle qui absorbe les formats horizontaux, que la grille
   recadrerait en portrait. */
.bd-gallery__item.bd-gallery__lead { grid-column: 1 / -1; }
.bd-gallery__img { display: block; width: 100%; height: 300px; object-fit: cover; }
.bd-gallery__item.bd-gallery__lead .bd-gallery__img { height: 420px; }
/* Photo agrandissable : le curseur doit le dire. */
.bd-gallery__wall [data-bd-lightbox-photo] { cursor: zoom-in; }
/* La vignette est en overflow:hidden : un focus dessiné à l'extérieur serait
   rogné, on le ramène donc à l'intérieur de la photo (RGAA 10.7). */
.bd-gallery__wall [data-bd-lightbox-photo]:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 8px var(--bd-creme); }
@media (max-width: 1000px) {
	.bd-gallery__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sur petit écran, la grille empilerait une colonne de vignettes hautes : on
   voit la première photo, et les suivantes défilent horizontalement plutôt
   que de manger toute la page. Le débord de la vignette suivante sert d'indice
   qu'il y a autre chose à voir. Pas de flèches : le groupe reste parcourable
   au clavier par les photos elles-mêmes, qui sont focusables. */
@media (max-width: 700px) {
	.bd-gallery__wall {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		gap: 16px;
		/* L'ombre portée (8px) serait rognée par le défilement sans cette
		   marge basse et cette réserve à droite pour la dernière vignette. */
		padding: 0 10px 16px 0;
	}
	.bd-gallery__item { flex: 0 0 82%; scroll-snap-align: start; }
	/* Pas 100 % : sans le bord de la photo suivante qui dépasse, rien ne dit
	   qu'il y en a d'autres derrière. */
	.bd-gallery__item.bd-gallery__lead { flex: 0 0 90%; }
	.bd-gallery__img,
	.bd-gallery__item.bd-gallery__lead .bd-gallery__img { height: 300px; }
}

.bd-festival-faq { background: var(--bd-white); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-festival-faq__inner { max-width: var(--bd-narrow); margin: 0 auto; }

.bd-discipline-related { background: var(--bd-creme); color: var(--bd-ink); padding: var(--bd-section-y) 24px; }
.bd-discipline-related__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-discipline-related__head { margin-bottom: 40px; }
.bd-discipline-related__title {
	font-family: 'Rozha One', serif;
	font-weight: 400;
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 0.95;
	margin: 8px 0 0;
}
.bd-discipline-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	border: 2px solid var(--bd-border);
	margin-bottom: 32px;
}
.bd-discipline-related__grid .bd-card { border-bottom: 0; }
.bd-discipline-related__grid .bd-card:last-child { border-right: 0; }

@media (max-width: 860px) {
	.bd-discipline-lead--media .bd-discipline-lead__inner { grid-template-columns: 1fr; }
	.bd-discipline-lead__img { aspect-ratio: 16 / 10; }
}

/* ─── Galerie discipline : carrousel « coverflow » + lightbox ──────────
   3 photos visibles (centrale en valeur, 2 voisines en opacité réduite),
   boucle infinie sans saut visible : les positions (active/prev/next/
   hidden) sont pilotées par data-bd-pos en JS (cf. animations.js), tout
   le visuel (taille, décalage, opacité) reste en CSS pur. */
.bd-discipline-gallery { padding: 0 24px clamp(56px, 8vw, 96px); }
.bd-discipline-gallery__carousel {
	position: relative;
	max-width: var(--bd-content);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.bd-discipline-gallery__carousel--single { max-width: 640px; }

.bd-discipline-gallery__track {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	height: clamp(300px, 34vw, 460px);
}
.bd-discipline-gallery__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(58%, 540px);
	height: 100%;
	margin: 0;
	transform: translate3d(-50%, 0, 0) scale(0.8);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: transform 0.55s cubic-bezier(.16, .7, .3, 1), opacity 0.55s ease;
}
.bd-discipline-gallery__slide[data-bd-pos="active"] {
	opacity: 1;
	transform: translate3d(-50%, 0, 0) scale(1);
	z-index: 3;
	pointer-events: auto;
}
.bd-discipline-gallery__slide[data-bd-pos="prev"],
.bd-discipline-gallery__slide[data-bd-pos="next"] {
	opacity: 0.4;
	z-index: 2;
	pointer-events: auto;
}
.bd-discipline-gallery__slide[data-bd-pos="prev"] { transform: translate3d(calc(-50% - 60%), 0, 0) scale(0.82); }
.bd-discipline-gallery__slide[data-bd-pos="next"] { transform: translate3d(calc(-50% + 60%), 0, 0) scale(0.82); }
.bd-discipline-gallery__slide[data-bd-pos="farPrev"] { transform: translate3d(calc(-50% - 100%), 0, 0) scale(0.75); }
.bd-discipline-gallery__slide[data-bd-pos="farNext"] { transform: translate3d(calc(-50% + 100%), 0, 0) scale(0.75); }

.bd-discipline-gallery__carousel--single .bd-discipline-gallery__track { height: auto; overflow: visible; }
.bd-discipline-gallery__carousel--single .bd-discipline-gallery__slide {
	position: static;
	width: 100%;
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.bd-discipline-gallery__trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 2px solid var(--bd-border);
	background: var(--bd-stripe, rgba(0, 0, 0, 0.05));
	cursor: zoom-in;
}
.bd-discipline-gallery__trigger:disabled { cursor: default; }
.bd-discipline-gallery__trigger:focus-visible { outline: 3px solid var(--bd-marigold); outline-offset: 2px; }
.bd-discipline-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bd-discipline-gallery__arrow {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	border: 2px solid var(--bd-border);
	border-radius: 50%;
	background: var(--bd-white);
	color: var(--bd-ink);
	cursor: pointer;
	z-index: 4;
}
.bd-discipline-gallery__arrow:hover,
.bd-discipline-gallery__arrow:focus-visible { background: var(--bd-ink); color: var(--bd-white); }

@media (max-width: 700px) {
	.bd-discipline-gallery__track { height: clamp(220px, 62vw, 320px); }
	.bd-discipline-gallery__slide { width: 72%; }
	.bd-discipline-gallery__slide[data-bd-pos="prev"] { transform: translate3d(calc(-50% - 46%), 0, 0) scale(0.8); }
	.bd-discipline-gallery__slide[data-bd-pos="next"] { transform: translate3d(calc(-50% + 46%), 0, 0) scale(0.8); }
	.bd-discipline-gallery__slide[data-bd-pos="farPrev"] { transform: translate3d(calc(-50% - 80%), 0, 0) scale(0.7); }
	.bd-discipline-gallery__slide[data-bd-pos="farNext"] { transform: translate3d(calc(-50% + 80%), 0, 0) scale(0.7); }
	.bd-discipline-gallery__arrow { width: 38px; height: 38px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-discipline-gallery__slide { transition: none; }
}

/* ─── Lightbox (photo en grand format) ─────────────────────────────── */
.bd-lightbox {
	max-width: min(100% - 32px, 1100px);
	width: min(100% - 32px, 1100px);
	background: #0c0806;
	border-color: #0c0806;
}
.bd-lightbox::backdrop { background: rgba(12, 8, 6, 0.9); }
.bd-lightbox__panel {
	position: relative;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
}
.bd-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	margin: 0 auto;
}
.bd-lightbox .bd-modal__close { color: #fff; }
.bd-lightbox .bd-modal__close:hover,
.bd-lightbox .bd-modal__close:focus-visible { border-color: #fff; }
.bd-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 24px;
	cursor: pointer;
}
/* Le dialogue est mutualisé : le JS masque les flèches pour un groupe d'une
   seule photo, et `display: grid` ci-dessus battrait l'attribut hidden. */
.bd-lightbox__arrow[hidden] { display: none; }
.bd-lightbox__arrow--prev { left: 12px; }
.bd-lightbox__arrow--next { right: 12px; }
.bd-lightbox__arrow:hover,
.bd-lightbox__arrow:focus-visible { background: rgba(255, 255, 255, 0.3); }
.bd-lightbox__caption {
	position: absolute;
	bottom: 10px;
	left: 16px;
	right: 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	margin: 0;
}
@media (max-width: 700px) {
	.bd-lightbox__arrow { width: 40px; height: 40px; font-size: 20px; }
	.bd-lightbox__panel { padding: 12px; }
}

.bd-contact { padding: 40px 24px 90px; }
.bd-contact__inner {
	max-width: var(--bd-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 860px) { .bd-contact__inner { grid-template-columns: 1fr; gap: 40px; } }
.bd-contact__intro { font-size: 14px; opacity: 0.72; margin: 0 0 22px; }
.bd-contact__info-title { font-family: 'Rozha One', serif; font-size: 22px; line-height: 1; font-weight: 400; margin: 0 0 18px; }
.bd-contact__info-list { display: grid; gap: 10px; font-size: 15px; }
.bd-contact__info-list a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--bd-rose); padding-bottom: 2px; width: fit-content; }
.bd-contact__form { display: grid; gap: 14px; border: 2px solid var(--bd-border); background: var(--bd-white); padding: 28px; }
.bd-contact__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bd-contact__form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.bd-contact__form input, .bd-contact__form select, .bd-contact__form textarea {
	width: 100%;
	background: var(--bd-white);
	border: 2px solid var(--bd-border);
	padding: 13px 14px;
	color: var(--bd-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	outline: none;
	box-sizing: border-box;
}
/* `outline: none` ci-dessus est purement esthétique HORS focus : sans cette
   règle, il l'emportait sur l'anneau global (même spécificité, plus bas dans
   le fichier) et le formulaire n'avait aucun focus visible (RGAA 10.7.1). */
.bd-contact__form input:focus-visible,
.bd-contact__form select:focus-visible,
.bd-contact__form textarea:focus-visible {
	outline: 3px solid var(--bd-ink);
	outline-offset: 2px;
}
.bd-contact__form textarea { resize: vertical; }
.bd-contact__consent { display: flex !important; align-items: flex-start; gap: 10px; flex-direction: row !important; text-transform: none !important; font-weight: 400; }
.bd-contact__consent input { width: auto; }
.bd-form-status { padding: 12px 16px; margin-bottom: 18px; font-weight: 700; }
.bd-form-status--ok  { background: #1f7a4a; color: #fff; }
.bd-form-status--err { background: #b3261e; color: #fff; }

.bd-footer {
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	padding: 60px 24px 32px;
}
.bd-footer__inner { max-width: var(--bd-content); margin: 0 auto; }
.bd-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(127,127,127,0.3);
}
@media (max-width: 860px) { .bd-footer__grid { grid-template-columns: 1fr 1fr; } }
/* Deux colonnes ne descendent pas sous la largeur de leur contenu : la
   signature à 40 px mesure 254 px à elle seule, et le pied de page faisait
   déborder TOUTES les pages de 67 px à 320 px de large (RGAA 10.11). */
@media (max-width: 520px) {
	.bd-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.bd-footer__wordmark { font-size: 34px; }
}
.bd-footer__wordmark { font-family: 'Rozha One', serif; font-size: 40px; line-height: 1; }
.bd-footer__wordmark span { color: var(--bd-rose); }
.bd-footer__tagline { font-size: 14px; opacity: 0.7; margin: 12px 0 10px; }
.bd-footer__contact { display: grid; gap: 7px; font-size: 14px; }
.bd-footer__contact a { color: var(--bd-on-dark); text-decoration: none; opacity: 0.85; border-bottom: 1px solid var(--bd-marigold); width: fit-content; padding-bottom: 1px; }
.bd-footer__col-title { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-marigold); margin: 0 0 12px; font-weight: 700; }
.bd-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bd-footer__col a { color: var(--bd-on-dark); text-decoration: none; font-size: 14px; opacity: 0.85; }
.bd-footer__col a:hover { opacity: 1; color: var(--bd-marigold); }
.bd-footer__base { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; opacity: 0.6; flex-wrap: wrap; gap: 8px; }
.bd-footer__base a { color: var(--bd-on-dark); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.bd-footer__base a:hover { color: var(--bd-marigold); }

/* ─── Responsive nettoyage léger ──────────────────────────────────────── */
@media (max-width: 860px) {
	:root { --bd-section-y: 70px; }
	.bd-event__title  { font-size: clamp(36px, 9vw, 64px); }
	.bd-page-hero__title { font-size: clamp(44px, 11vw, 80px); }
}

/* Layout maximal : conteneur WordPress par défaut */
.wp-site-blocks > main { display: block; }

/* Sections custom collées : on neutralise le block-gap WP (24px par défaut)
   entre header/main/footer et entre les blocs sections dans `post-content` en flow.
   Les blocs custom gèrent eux-mêmes leur padding vertical (--bd-section-y). */
.wp-site-blocks > *,
.wp-block-post-content.is-layout-flow > *,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Devenir membre (bloc bollydeewani/membership)
   Réutilise .bd-btn, .bd-marquee, .bd-reveal, .bd-spin-slow, .bd-wobble,
   .bd-text-accent et les tokens --bd-*. Ombres offset dures « Pop Affiche ».
   ═══════════════════════════════════════════════════════════════════════ */
.bd-join { --bd-join-ease: cubic-bezier(.16,.7,.3,1); display: block; }
.bd-join-wrap { max-width: var(--bd-content); margin: 0 auto; padding: 0 24px; }
.bd-join-wrap--narrow { max-width: var(--bd-narrow); }
.bd-join-section { padding: var(--bd-section-y) 0; border-bottom: 3px solid var(--bd-ink); scroll-margin-top: 84px; }
.bd-join-section--ink { background: var(--bd-ink); color: var(--bd-on-dark); }
.bd-join-section--rose { background: var(--bd-rose); color: #fff; }
.bd-join-section--contact { background: var(--bd-ink); color: var(--bd-on-dark); text-align: center; }

.bd-join-head { margin-bottom: 48px; }
.bd-join-head--center { text-align: center; }
.bd-join-head__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(34px, 5vw, 58px); line-height: 1.03; letter-spacing: .4px; text-wrap: balance; }
.bd-join-head__title--light { color: var(--bd-on-dark); }
.bd-join-head__intro { margin-top: 16px; max-width: 60ch; font-size: 18px; }
/* Section inscription (fond rose) : intro et bouton centrés sous le titre. */
.bd-join-head__intro--light { color: var(--bd-on-dark); margin-inline: auto; }
.bd-join-inscription__cta { display: flex; justify-content: center; margin-top: 32px; }

/* Hero */
.bd-join-hero { position: relative; overflow: hidden; background: var(--bd-teal); color: var(--bd-on-dark); border-bottom: 4px solid var(--bd-ink); }
.bd-join-hero__inner { position: relative; z-index: 2; max-width: var(--bd-content); margin: 0 auto; padding: 86px 24px 96px; }
.bd-join-hero__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(46px, 8vw, 96px); line-height: 1.02; letter-spacing: .4px; color: var(--bd-on-dark); max-width: 12ch; text-wrap: balance; }
/* 2,62:1 sur le fond sarcelle, sous le seuil de 3:1 du grand texte. */
.bd-join-hero__title .bd-text-accent { color: var(--bd-marigold-clair); }
.bd-join-hero__lead { max-width: 52ch; margin-top: 22px; font-size: 20px; line-height: 1.6; }
.bd-join-hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.bd-join-hero__stripes { position: absolute; inset: 0; z-index: 1; opacity: .14; background-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 22px); }
.bd-join-hero__disc { position: absolute; z-index: 1; border-radius: 50%; transform-origin: 50% 50%; }
.bd-join-hero__disc--1 { width: 220px; height: 220px; background: var(--bd-marigold); right: -40px; top: -40px; opacity: .92; }
.bd-join-hero__disc--2 { width: 120px; height: 120px; background: var(--bd-rose); right: 150px; bottom: -30px; }
.bd-join-hero__mandala { position: absolute; left: 4%; bottom: 9%; width: clamp(120px, 16vw, 190px); color: var(--bd-on-dark); opacity: .32; z-index: 1; }
.bd-join-hero__mandala .bd-ornament { width: 100%; height: auto; }
@media (max-width: 640px) { .bd-join-hero__mandala { left: auto; right: -30px; bottom: -24px; opacity: .22; } }

/* Marquee (surcharge locale de l'étoile rose) */
.bd-join-marquee__star { color: var(--bd-rose); font-size: 15px; }

/* Avantages : grille desktop → carousel mobile */
/* Trois cartes par rangée : `auto-fit` en posait quatre sur un grand écran,
   ce qui tassait les titres sur deux lignes. */
.bd-join-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) {
	.bd-join-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bd-join-card { background: var(--bd-white); color: var(--bd-ink); border: 3px solid var(--bd-ink); box-shadow: var(--bd-shadow-1, 6px 6px 0 var(--bd-ink)); padding: 28px 24px; transition: transform .3s var(--bd-join-ease), box-shadow .3s; }
.bd-join-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--bd-ink); }
/* Fond clair unique pour la pastille : les icônes sont des émojis, donc des
   images en couleur qu'on ne peut pas recolorer. Sur le fond framboise et
   surtout sur le fond encre, leurs parties sombres disparaissaient. La
   couleur de la rubrique passe donc dans l'ombre portée, où elle ne gêne
   plus la lisibilité du glyphe. */
.bd-join-card__ic { width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; background: var(--bd-creme); color: var(--bd-ink); border: 3px solid var(--bd-ink); margin-bottom: 20px; transition: transform .35s var(--bd-join-ease); }
.bd-join-card:hover .bd-join-card__ic { transform: rotate(-8deg) scale(1.06); }
.bd-join-card__ic--rose { box-shadow: 4px 4px 0 var(--bd-rose); }
.bd-join-card__ic--mar  { box-shadow: 4px 4px 0 var(--bd-marigold); }
.bd-join-card__ic--teal { box-shadow: 4px 4px 0 var(--bd-teal); }
.bd-join-card__ic--ink  { box-shadow: 4px 4px 0 var(--bd-ink); }
/* Un fond clair sauve les émojis sombres mais noie les pâles (ampoule,
   étiquette, bulle), et un fond sombre fait l'inverse : aucune couleur unique
   ne convient à des glyphes multicolores. On leur donne donc un liseré sombre,
   qui détache n'importe quel émoji sans toucher à ses couleurs. Le filtre
   porte sur le glyphe seul, pas sur la pastille, dont la bordure et l'ombre
   colorée doivent rester nettes. */
.bd-join-card__glyph { display: block; line-height: 1; filter: drop-shadow(0 0 1px rgba(36, 23, 18, .9)) drop-shadow(0 1px 1px rgba(36, 23, 18, .5)); }
.bd-join-card__title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.bd-join-card__text { font-size: 15.5px; line-height: 1.5; color: #4a352c; }
.bd-join-dots { display: none; }
@media (max-width: 700px) {
	.bd-join-benefits { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -24px; padding: 6px 24px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.bd-join-benefits::-webkit-scrollbar { display: none; }
	.bd-join-card { flex: 0 0 84%; scroll-snap-align: center; box-shadow: 0 6px 0 var(--bd-ink); }
	.bd-join-dots { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
	.bd-join-dots button { width: 9px; height: 9px; padding: 0; border: 2px solid var(--bd-ink); background: transparent; cursor: pointer; transition: background .2s, transform .2s, border-color .2s; }
	.bd-join-dots button.is-on { background: var(--bd-rose); border-color: var(--bd-rose); transform: scale(1.25); }
}
.bd-join-benefits-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 20px; margin-top: 44px; padding-top: 36px; border-top: 2px dashed rgba(58,42,34,.28); }
.bd-join-benefits-cta span { font-family: 'Rozha One', serif; font-size: clamp(20px, 2.6vw, 26px); }

/* Formule : bascule + panneau + FFD */
.bd-join-toggle { display: inline-flex; background: rgba(255,255,255,.08); border: 2px solid var(--bd-on-dark); padding: 5px; gap: 5px; margin-bottom: 36px; }
.bd-join-toggle button { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; padding: 12px 26px; border: none; background: transparent; color: var(--bd-on-dark); cursor: pointer; transition: background .25s var(--bd-join-ease), color .25s, transform .25s var(--bd-join-ease); }
.bd-join-toggle button.is-on { background: var(--bd-marigold); color: var(--bd-ink); transform: translateY(-1px); }
.bd-join-plan { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; }
.bd-join-plan__panel { background: var(--bd-creme); color: var(--bd-ink); border: 3px solid var(--bd-marigold); padding: 30px; box-shadow: 8px 8px 0 var(--bd-marigold); }
.bd-join-plan__name { font-family: 'Rozha One', serif; font-weight: 400; font-size: 30px; margin-bottom: 6px; }
.bd-join-plan__price { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--bd-rose); letter-spacing: .08em; margin-bottom: 18px; }
.bd-join-plan__list { list-style: none; margin: 0; padding: 0; }
.bd-join-plan__list li { padding: 11px 0 11px 30px; position: relative; border-top: 1px dashed rgba(58,42,34,.3); font-size: 16px; animation: bd-join-li .45s var(--bd-join-ease) both; }
.bd-join-plan__list li:first-child { border-top: none; }
.bd-join-plan__list li::before { content: "✦"; position: absolute; left: 0; color: var(--bd-rose); font-size: 16px; }
@keyframes bd-join-li { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.bd-join-ffd { display: flex; flex-direction: column; background: rgba(255,255,255,.06); border: 2px solid var(--bd-on-dark); padding: 26px; transition: opacity .35s, filter .35s; }
.bd-join-ffd__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: 24px; color: var(--bd-marigold); margin-bottom: 14px; }
.bd-join-ffd__list { list-style: none; margin: 0; padding: 0; }
.bd-join-ffd__list li { padding: 8px 0 8px 26px; position: relative; font-size: 15.5px; }
.bd-join-ffd__list li::before { content: "🛡"; position: absolute; left: 0; }
.bd-join-ffd.is-dim { opacity: .4; filter: grayscale(.6); }
.bd-join-ffd__locked { display: inline-block; margin-top: auto; padding-top: 14px; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--bd-marigold); }
@media (max-width: 820px) { .bd-join-plan { grid-template-columns: 1fr; } }

/* Cautions */
.bd-join-caution__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(24px, 3.4vw, 32px); }
.bd-join-caution__lead { color: #5a4438; margin: 14px 0 24px; font-size: 16.5px; max-width: 62ch; }
.bd-join-caution__list { border: 2px solid var(--bd-ink); background: var(--bd-white); }
.bd-join-caution__list > div { display: grid; grid-template-columns: 74px 1fr; gap: 20px; align-items: baseline; padding: 18px 22px; border-top: 1px solid rgba(58,42,34,.18); }
.bd-join-caution__list > div:first-child { border-top: none; }
.bd-join-caution__list dt { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 18px; color: var(--bd-ink); white-space: nowrap; }
.bd-join-caution__list dd { font-size: 15.5px; color: #4a352c; line-height: 1.5; }
@media (max-width: 520px) { .bd-join-caution__list > div { grid-template-columns: 1fr; gap: 5px; } }

/* Accordéon */
.bd-join-acc { border: 3px solid var(--bd-ink); background: var(--bd-white); box-shadow: var(--bd-shadow-1, 6px 6px 0 var(--bd-ink)); }
.bd-join-acc__item { border-top: 3px solid var(--bd-ink); }
.bd-join-acc__item:first-child { border-top: none; }
.bd-join-acc__q { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 17.5px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--bd-ink); transition: background .2s; }
.bd-join-acc__q:hover { background: #faf3e5; }
.bd-join-acc__sign { font-family: 'Space Mono', monospace; font-size: 22px; color: var(--bd-rose); transition: transform .3s var(--bd-join-ease); }
.bd-join-acc__q[aria-expanded="true"] .bd-join-acc__sign { transform: rotate(135deg); }
.bd-join-acc__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--bd-join-ease); }
/* Sans JS, `hidden` masquerait la réponse pour de bon : on la laisse repliée
   comme avant, c'est le script qui gère l'attribut une fois chargé. */
.bd-join-acc__a[hidden] { display: block; }
.has-js .bd-join-acc__a[hidden] { display: none; }
.bd-join-acc__inner { padding: 0 24px 22px; font-size: 16px; color: #4a352c; line-height: 1.55; }

/* Wizard / formulaire */
.bd-join-wizard { max-width: var(--bd-narrow); margin: 0 auto; background: var(--bd-creme); color: var(--bd-ink); border: 3px solid var(--bd-ink); box-shadow: 12px 12px 0 var(--bd-ink); overflow: hidden; }
.bd-join-wizard__steps { display: flex; background: var(--bd-ink); color: var(--bd-on-dark); }
.bd-join-wizard__step { flex: 1; padding: 16px 10px; text-align: center; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em; border-right: 1px solid rgba(255,255,255,.15); opacity: .5; transition: opacity .3s, background .3s, color .3s; }
.bd-join-wizard__step:last-child { border-right: none; }
.bd-join-wizard__step.is-on { opacity: 1; background: var(--bd-marigold); color: var(--bd-ink); }
.bd-join-wizard__step.is-done { opacity: 1; color: var(--bd-marigold); }
.bd-join-form { padding: 34px; }
.bd-join-step { display: none; }
.bd-join-step.is-on { display: block; animation: bd-join-step .4s var(--bd-join-ease); }
.bd-join .no-js-fallback .bd-join-step, .bd-join-form:not([data-enhanced]) .bd-join-step { display: block; }
@keyframes bd-join-step { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bd-join-step__title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.bd-join-step__sub { color: #4a352c; margin-bottom: 24px; font-size: 15.5px; }
.bd-join-field { margin-bottom: 20px; }
.bd-join-field--mt { margin-top: 24px; }
.bd-join-field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.bd-join-field input, .bd-join-field select, .bd-join-field textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--bd-ink); background: #fff; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--bd-ink); transition: border-color .2s, background .2s; }
.bd-join-field input::placeholder, .bd-join-field textarea::placeholder { color: #7a6a60; }
.bd-join-field input:focus, .bd-join-field select:focus, .bd-join-field textarea:focus { outline: 3px solid var(--bd-marigold); outline-offset: 1px; }
.bd-join-field.is-err input, .bd-join-field.is-err select { border-color: var(--bd-rose); background: #fdeef1; }
.bd-join-msg { color: var(--bd-rose); font-size: 13px; margin-top: 6px; display: none; font-weight: 700; }
.bd-join-field.is-err .bd-join-msg { display: block; animation: bd-join-shake .3s; }
@keyframes bd-join-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.bd-join-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .bd-join-row2 { grid-template-columns: 1fr; } }
.bd-join-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bd-join-choice { border: 2px solid var(--bd-ink); padding: 20px; cursor: pointer; background: #fff; transition: transform .2s var(--bd-join-ease), box-shadow .2s, border-color .2s; position: relative; display: block; }
.bd-join-choice:hover { transform: translate(-2px, -2px); box-shadow: var(--bd-shadow-1, 6px 6px 0 var(--bd-ink)); }
.bd-join-choice.is-sel { border-color: var(--bd-rose); box-shadow: 6px 6px 0 var(--bd-rose); }
.bd-join-choice:focus-within { outline: 3px solid var(--bd-teal); outline-offset: 2px; }
.bd-join-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bd-join-choice__t { display: block; font-weight: 700; font-size: 18px; }
.bd-join-choice__d { display: block; font-size: 14px; color: #4a352c; margin-top: 6px; }
.bd-join-choice__p { display: block; font-family: 'Space Mono', monospace; font-size: 13px; color: var(--bd-teal); margin-top: 10px; font-weight: 700; }
@media (max-width: 600px) { .bd-join-choices { grid-template-columns: 1fr; } }
.bd-join-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-bottom: 14px; line-height: 1.45; }
.bd-join-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--bd-rose); }
.bd-join-recap { background: #fff; border: 2px dashed var(--bd-ink); padding: 20px; margin-bottom: 22px; }
.bd-join-recap__line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px dashed rgba(58,42,34,.25); font-size: 15.5px; }
.bd-join-recap__line:first-child { border-top: none; }
.bd-join-recap__line b { font-weight: 700; text-align: right; }
.bd-join-form__nav { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 24px; border-top: 3px solid var(--bd-ink); }
.bd-join-form__nav .bd-btn[hidden] { display: none; }

/* Contact */
.bd-join-contact__title { font-family: 'Rozha One', serif; font-weight: 400; font-size: clamp(34px, 5vw, 56px); color: var(--bd-on-dark); }
.bd-join-contact__title .bd-text-accent--marigold { color: var(--bd-marigold); }
.bd-join-contact__text { max-width: 52ch; margin: 16px auto 30px; opacity: .92; }
.bd-join-contact__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bd-join-contact__mail { display: inline-block; font-family: 'Space Mono', monospace; font-size: 16px; color: var(--bd-marigold); margin-top: 24px; text-underline-offset: 4px; }
.bd-join-contact__mail:hover { text-decoration: underline; }

/* Statut du formulaire */
.bd-join-form .bd-form-status { padding: 14px 18px; margin-bottom: 20px; border: 2px solid var(--bd-ink); font-weight: 700; font-size: 15px; }
.bd-join-form .bd-form-status--ok { background: var(--bd-teal); color: #fff; }
.bd-join-form .bd-form-status--err { background: #fdeef1; color: var(--bd-rose); }

@media (prefers-reduced-motion: reduce) {
	.bd-join-card:hover, .bd-join-choice:hover { transform: none; }
	.bd-join-plan__list li { animation: none; }
}

/* ─── Stages ──────────────────────────────────────────────────────────────
   Trois surfaces partagent ces règles : la page liste (bloc stage-list), la
   section « Prochains stages » (bloc upcoming-stages) et la fiche (bloc
   stage-single). Même langage que le reste du thème : bordure 2px encre,
   ombre portée dure, angles vifs. La couleur de niveau ne passe pas par un
   liseré d'accent mais par la couleur de l'ombre, comme les cartes
   existantes.
   ─────────────────────────────────────────────────────────────────────── */

.bd-stages { padding: var(--bd-section-y) 0; background: var(--bd-creme); }
.bd-stages--section { background: var(--bd-white); }
.bd-stages--related { background: var(--bd-creme); }
.bd-stages__inner { max-width: var(--bd-content); margin: 0 auto; padding: 0 24px; }
.bd-stages__head { max-width: 60ch; margin-bottom: 40px; }

.bd-stages__heading {
	font-family: 'Rozha One', serif;
	font-weight: 400;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.1;
	color: var(--bd-ink);
	margin-bottom: 28px;
}
/* Le second intertitre de la page liste suit une grille de cartes : il lui
   faut l'air que la marge des cartes ne donne pas. */
.bd-stages__heading--past { margin-top: 72px; }
.bd-stages__intro { max-width: 56ch; color: #4a352c; margin-bottom: 8px; }

.bd-stages__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 100%, 320px), 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bd-stages__grid > li { display: flex; }

/* Filtre « à venir / passés » : de vrais liens, donc pas de rôle d'onglet
   simulé qui mentirait à un lecteur d'écran. L'état courant est porté par
   aria-current, et visuellement par le fond plein, pas par la seule
   couleur du texte. */
.bd-stages__filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.bd-stages__filter { display: flex; flex-wrap: wrap; gap: 12px; }
/* Second rang de filtres : des pastilles plus discrètes que les onglets de
   période, pour que la hiérarchie entre les deux se lise d'un coup d'œil. */
.bd-stages__filter--chips { gap: 8px; }
.bd-stages__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	color: var(--bd-ink);
	background: transparent;
	border: 2px solid var(--bd-border);
	padding: 7px 14px;
	transition: background .15s ease, color .15s ease;
}
.bd-stages__chip:hover { background: var(--bd-white); }
.bd-stages__chip.is-on { background: var(--bd-rose); border-color: var(--bd-rose); color: var(--bd-white); font-weight: 700; }
.bd-stages__chip .bd-stages__filter-count { font-size: 11px; }
.bd-stages__filter-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--bd-ink);
	background: var(--bd-white);
	border: 2px solid var(--bd-ink);
	padding: 11px 18px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bd-stages__filter-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--bd-ink); }
.bd-stages__filter-link.is-on { background: var(--bd-ink); color: var(--bd-creme); }
.bd-stages__filter-count {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	opacity: .75;
}

/* Grille bento : une tuile large ouvre chaque groupe de six, les suivantes
   se répartissent pour combler exactement trois rangées de quatre colonnes.
   Le motif se répète, donc il tient quel que soit le nombre de stages. */
/* Motif de trois : une tuile double ouvre, deux tuiles simples suivent, et
   le groupe remplit exactement deux rangées de quatre colonnes. Aucune tuile
   ne descend sous la demi-largeur — les tuiles au quart, essayées d'abord,
   faisaient passer les libellés « Lieu » et « Tarif » à la ligne et le corps
   de carte dépassait de cent pixels. */
.bd-stages__grid--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 330px; grid-auto-flow: dense; }
.bd-stages__grid--bento > li:nth-child(3n + 1) { grid-column: span 2; grid-row: span 2; }
.bd-stages__grid--bento > li:nth-child(3n + 2),
.bd-stages__grid--bento > li:nth-child(3n + 3) { grid-column: span 2; }
/* Une ou deux tuiles seulement : le motif laisserait un trou béant à droite
   d'une carte isolée. */
.bd-stages__grid--bento:has(> li:only-child) > li { grid-column: 1 / -1; grid-row: span 1; }
.bd-stages__grid--bento:has(> li:first-child:nth-last-child(2)) > li { grid-column: span 2; grid-row: span 1; }
/* Toutes les tuiles disent la même chose : le lieu, le tarif et le bouton de
   réservation, en plus du titre et de la date. Faire dépendre le niveau de
   détail du rang dans la grille rendait l'affichage arbitraire, et deux
   stages identiques ne se ressemblaient pas. La discipline, le niveau et le
   nombre de places restent sur la fiche, faute de place ici. */
.bd-stages__grid--bento .bd-stage-facts__row--discipline,
.bd-stages__grid--bento .bd-stage-facts__row--niveau,
.bd-stages__grid--bento .bd-stage-facts__row--places { display: none; }
.bd-stages__grid--bento .bd-stage-card { height: 100%; overflow: hidden; }
/* Le texte passe avant la photo. La hauteur de la tuile est imposée par la
   grille et le débord est rogné : si le corps et la photo se partagent
   l'espace, c'est le texte qui se fait couper, et une date tranchée en deux
   ressemble à une panne. Le corps garde donc sa hauteur naturelle, la photo
   prend ce qui reste et se recadre. min-height: 0 est indispensable, sans
   quoi un élément flexible refuse de descendre sous la hauteur de son
   contenu et la photo repousse la tuile à sa propre taille. */
/* margin-top: auto pour que le texte se cale toujours en pied de tuile,
   avec ou sans photo : sans lui, une tuile sans image laissait cent
   soixante-dix pixels de blanc sous son titre. */
.bd-stages__grid--bento .bd-stage-card__body { flex: 0 0 auto; min-height: 0; margin-top: auto; gap: 8px; padding: 18px 20px; }
.bd-stages__grid--bento .bd-stage-facts__row { padding: 5px 0; }
.bd-stages__grid--bento .bd-stage-card__media { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bd-stages__grid--bento .bd-stage-card__img { height: 100%; width: 100%; object-fit: cover; }
/* Un titre long doit être borné, sinon il repousse la date hors du cadre. */
.bd-stages__grid--bento > li:not(:nth-child(3n + 1)) .bd-stage-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 1000px) {
	.bd-stages__grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 400px; }
	.bd-stages__grid--bento > li:nth-child(3n + 1) { grid-column: 1 / -1; grid-row: span 2; }
	.bd-stages__grid--bento > li:nth-child(6n + 2),
	.bd-stages__grid--bento > li:nth-child(6n + 3),
	.bd-stages__grid--bento > li:nth-child(6n + 4) { grid-column: span 1; }
}
/* Deux stages par ligne jusqu'en bas de l'échelle : la tuile d'ouverture
   prend la largeur, les autres se rangent par paires. À cette largeur, la
   fiche technique et le bouton ne tiennent pas, la photo et la date
   suffisent, et la tuile entière mène à la fiche. */
@media (max-width: 700px) {
	.bd-stages__grid--bento { gap: 16px; grid-auto-rows: 214px; }
	.bd-stages__grid--bento > li:nth-child(3n + 1) .bd-stage-card__media { min-height: 100px; }
	/* Deux tuiles par ligne sur un téléphone, c'est cent soixante-cinq pixels
	   de large : la fiche technique et le bouton n'y sont pas utilisables, et
	   leurs libellés passaient à la ligne trois fois. La tuile se limite au
	   titre et à la date, et mène à la fiche où le bouton attend. */
	.bd-stages__grid--bento .bd-stage-facts,
	.bd-stages__grid--bento .bd-stage-card__cta { display: none; }
	.bd-stages__grid--bento .bd-stage-card__title { font-size: 17px; line-height: 1.2; }
	.bd-stages__grid--bento .bd-stage-card__when { font-size: 12px; }
	.bd-stages__grid--bento .bd-stage-card__body { padding: 14px 15px; }
	/* Tuiles jumelées : la photo passe en fond, très atténuée, et le texte
	   se pose sur un voile presque blanc. À cette largeur, une photo en
	   bandeau ne laissait qu'une soixantaine de pixels au texte ; en fond,
	   elle habille toute la tuile sans lui voler de place.
	   L'atténuation est volontairement forte : le texte reste de l'encre sur
	   du quasi-blanc, donc son contraste ne dépend pas de la photo choisie
	   par l'association (RGAA 3.2). */
	.bd-stages__grid--bento > li:not(:nth-child(3n + 1)) .bd-stage-card { position: relative; }
	.bd-stages__grid--bento > li:not(:nth-child(3n + 1)) .bd-stage-card__media {
		position: absolute;
		inset: 0;
		flex: none;
		opacity: 0.3;
		pointer-events: none;
	}
	.bd-stages__grid--bento > li:not(:nth-child(3n + 1)) .bd-stage-card__img { height: 100%; width: 100%; object-fit: cover; }
	.bd-stages__grid--bento > li:not(:nth-child(3n + 1)) .bd-stage-card__body {
		position: relative;
		/* flex: 0 0 auto contre le flex: 1 de la carte : sans lui le bloc de
		   texte s'étirait sur toute la tuile, le voile masquait la photo et
		   « margin-top: auto » n'avait plus d'espace libre à absorber. */
		flex: 0 0 auto;
		margin-top: auto;
		gap: 6px;
		background: rgba(255, 255, 255, 0.86);
		border-top: 2px solid var(--bd-ink);
	}
}
@media (max-width: 460px) {
	.bd-stages__grid--bento { gap: 12px; grid-auto-rows: 200px; }
	.bd-stages__grid--bento .bd-stage-card__title { font-size: 15.5px; }
	.bd-stages__grid--bento .bd-stage-card__body { padding: 12px 13px; }
	.bd-stages__filter-link { padding: 9px 13px; font-size: 13px; }
}
/* Le lien collait à la grille : les cartes portent une ombre portée dure qui
   déborde encore de plusieurs pixels sous leur bordure. Et sans display
   inline-block, une marge haute ne s'applique pas à un lien. */
.bd-stages__grid + .bd-link-arrow { display: inline-block; margin-top: 40px; }

.bd-stages__empty {
	border: 2px dashed var(--bd-border);
	background: var(--bd-white);
	padding: 24px;
	max-width: 60ch;
	color: #4a352c;
}

/* Carte de stage */
.bd-stage-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--bd-white);
	border: 2px solid var(--bd-ink);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-shadow-1);
	transition: transform .2s ease, box-shadow .2s ease;
}
.bd-stage-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--bd-ink); }
.bd-stage-card--rose:hover   { box-shadow: 9px 9px 0 var(--bd-rose); }
.bd-stage-card--teal:hover   { box-shadow: 9px 9px 0 var(--bd-teal); }
.bd-stage-card--orange:hover { box-shadow: 9px 9px 0 var(--bd-marigold-fonce); }
.bd-stage-card--creme:hover  { box-shadow: 9px 9px 0 var(--bd-border); }
/* Un stage passé reste lisible : fond distinct plutôt qu'une opacité, qui
   aurait fait tomber le texte sous le rapport de contraste exigé. */
.bd-stage-card--past { background: var(--bd-creme); }

.bd-stage-card__media { border-bottom: 2px solid var(--bd-ink); }
.bd-stage-card__img { display: block; width: 100%; height: 190px; object-fit: cover; }
.bd-stage-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }

.bd-stage-card__title {
	font-family: 'Rozha One', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	margin: 0;
}
.bd-stage-card__title a { color: var(--bd-ink); text-decoration: none; }
.bd-stage-card__title a:hover, .bd-stage-card__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.bd-stage-card__when,
.bd-stage-single__when {
	font-family: 'Space Mono', monospace;
	font-size: 14px;
	color: var(--bd-teal);
	margin: 0;
}
.bd-stage-single__when { font-size: 16px; margin-bottom: 18px; }

.bd-stage-card__cta { align-self: flex-start; margin-top: auto; }

/* Informations pratiques d'une carte, en paires intitulé / valeur. */
.bd-stage-facts { margin: 0; font-size: 15px; }
.bd-stage-facts__row { display: flex; gap: 10px; padding: 6px 0; border-top: 1px dashed rgba(58, 42, 34, .25); }
.bd-stage-facts__row:first-child { border-top: none; }
.bd-stage-facts dt { flex: none; min-width: 92px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #4a352c; padding-top: 2px; }
.bd-stage-facts dd { margin: 0; font-weight: 700; color: var(--bd-ink); }

/* État du stage. Toujours porté par un mot, jamais par la seule couleur. */
.bd-stage-status {
	align-self: flex-start;
	display: inline-block;
	margin: 0;
	padding: 5px 12px;
	border: 2px solid var(--bd-ink);
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bd-stage-status--full { background: var(--bd-rose); color: var(--bd-white); }
.bd-stage-status--past { background: var(--bd-creme); color: var(--bd-ink); border-style: dashed; }
/* Sur le fond sombre de l'en-tête de fiche, la variante « passé » disparaît :
   elle reprend le fond crème du corps de page. */
.bd-page-hero .bd-stage-status { margin-top: 20px; }

/* Fiche stage */
.bd-stage-single__chips { margin: 22px 0; }
.bd-stage-single__discipline { margin-bottom: 22px; font-size: 15.5px; }
.bd-stage-single__discipline a { color: var(--bd-teal); font-weight: 700; text-underline-offset: 4px; }
.bd-stage-single__closed {
	border: 2px solid var(--bd-ink);
	background: var(--bd-creme);
	padding: 14px 18px;
	margin-bottom: 18px;
	font-weight: 700;
	max-width: 46ch;
}

/* Intervenante */
.bd-stage-teacher { padding: var(--bd-section-y) 0; background: var(--bd-white); }
.bd-stage-teacher__inner { max-width: var(--bd-narrow); margin: 0 auto; padding: 0 24px; }
.bd-stage-teacher__heading {
	font-family: 'Rozha One', serif;
	font-weight: 400;
	font-size: clamp(28px, 3.5vw, 40px);
	color: var(--bd-ink);
	margin-bottom: 28px;
}
.bd-stage-teacher__body { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; }
.bd-stage-teacher__figure { margin: 0; }
.bd-stage-teacher__img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--bd-ink);
	box-shadow: var(--bd-shadow-1);
}
.bd-stage-teacher__name { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 21px; margin-bottom: 10px; }
.bd-stage-teacher__text p { margin-bottom: 12px; }

@media (max-width: 700px) {
	.bd-stage-teacher__body { grid-template-columns: 1fr; }
	.bd-stage-teacher__figure { max-width: 200px; }
	.bd-stage-facts__row { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-stage-card, .bd-stage-card:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
 * Chip « Lieu » : l'adresse est cliquable (itinéraire Google Maps).
 * Souligné plutôt qu'une couleur seule : la charte n'a pas de bleu de lien, et
 * la couleur seule ne suffirait pas à signaler un lien (RGAA 10.6).
 * ------------------------------------------------------------------------- */
.bd-chip__map {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	/* Trait continu : sans « skip-ink », le soulignement se coupait sous les
	   jambages et donnait un pointillé sale sous une adresse. */
	text-decoration-skip-ink: none;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.bd-chip__map:hover,
.bd-chip__map:focus-visible { text-decoration-color: var(--bd-rose); }

/* Bouton pleine largeur : sur la fiche d'un festival passé, « voir le prochain »
 * est la seule action restante — elle occupe toute la colonne au lieu de se
 * fondre dans la grille des chips.
 *
 * box-sizing : sans lui, les 26px de padding horizontal du bouton s'ajoutent
 * aux 100 % et le bouton débordait de la colonne, plus large que les chips
 * juste au-dessus.
 *
 * L'ombre dure décalée est ce qui le fait ressortir : à plat sur le fond crème,
 * l'aplat rose seul se lisait comme un bandeau, pas comme un bouton. */
.bd-btn--block {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
	text-align: center;
	margin-top: 28px;
	border: 2px solid var(--bd-ink);
	box-shadow: var(--bd-shadow-1, 6px 6px 0 var(--bd-ink));
	font-size: 16px;
}
.bd-btn--block:hover,
.bd-btn--block:focus-visible {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 var(--bd-ink);
}

/* Liens de réseaux du pied de page : le pictogramme et le libellé forment une
   seule cible, alignés sur la ligne de base du texte. */
.bd-footer__social { display: inline-flex; align-items: center; gap: 8px; }
.bd-footer__social .bd-social-icon { flex: 0 0 18px; }