/*
 * Amadeus — styles du thème (complément à theme.json).
 * Tokens : voir theme.json (--wp--preset--* et --wp--custom--*).
 * Ici : helpers, boutons réutilisables, header, hero, accessibilité, motion.
 */

/* ============================================================
   Base & helpers
   ============================================================ */
html { scroll-behavior: smooth; }

::selection { background: var(--wp--preset--color--teal-100, #d4f5f2); }

/* Décalage d'ancre sous le header collant */
[id] { scroll-margin-top: 96px; }

/* Eyebrow / kicker — capitales Lexend Giga + petit trait */
.ds-eyebrow,
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--custom--color--teal--800, #007c73);
}
/* Trait décoratif avant le kicker supprimé. */
/* Variante accent orange : texte navy (AA) + trait orange décoratif */
.kicker--orange {
	color: var(--wp--preset--color--navy);
	--kicker-line: var(--wp--preset--color--orange);
}

/* ============================================================
   Accessibilité — focus visible
   ============================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================
   Boutons réutilisables (variantes de core/button)
   theme.json applique déjà : pilule, Lexend 600, padding md, teal/navy.
   Couleurs choisies pour respecter le contraste AA.
   ============================================================ */
.wp-block-button__link {
	transition:
		transform var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease),
		background-color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease),
		color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.wp-block-button__link:hover { transform: translateY(-1px); }

/* Tailles */
.wp-block-button.is-size-sm > .wp-block-button__link {
	min-height: 36px;
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
}
.wp-block-button.is-size-lg > .wp-block-button__link {
	min-height: 56px;
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--lg);
}

/* Accent (rouge) — blanc sur red-600 ≈ 4.9:1 (AA) */
.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: var(--wp--custom--color--red--600, #e3002a);
	color: #fff;
}
.wp-block-button.is-style-accent > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--red--700, #c30024);
}

/* Outline — navy sur paper (AA), bordure navy-300 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--custom--color--navy--300, #b4bcc6);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy-050);
	border-color: var(--wp--preset--color--navy);
}

/* Highlight (orange) — navy sur orange ≈ 7.8:1 (AA) */
.wp-block-button.is-style-highlight > .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-highlight > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--orange--600, #e88a00);
}

/* Navy — blanc sur navy ≈ 16:1 (AA) */
.wp-block-button.is-style-navy > .wp-block-button__link {
	background-color: var(--wp--custom--color--navy--900, #001727);
	color: #fff;
}
.wp-block-button.is-style-navy > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--navy--800, #0a2336);
}

/* Ghost — navy sur paper (AA) */
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy-050);
}

/* Flèche optionnelle */
.wp-block-button.btn-arrow > .wp-block-button__link::after {
	content: "\2192";
	margin-left: 0.5em;
	display: inline-block;
	transition: transform var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.wp-block-button.btn-arrow > .wp-block-button__link:hover::after { transform: translateX(3px); }

/* ============================================================
   Header — barre collante, paper translucide + blur
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(251, 250, 247, 0.88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	/* Pleine largeur SANS marge négative : ici .wp-site-blocks n'a aucun
	   padding racine, l'en-tête occupe donc déjà toute la largeur. Des marges
	   négatives le feraient déborder de 24px (= scroll horizontal). */
}
.site-header__bar {
	max-width: var(--wp--custom--container--max, 1200px);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	min-height: 76px;
}
.site-header .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 38px;
}

/* Navigation */
.site-nav a,
.site-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	padding-block: 4px;
}
.site-nav a:hover,
.site-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--color--teal--800, #007c73);
}
/* Lien actif : teal-700 souligné (scroll-spy via navigation.js) */
.site-nav a.is-active,
.site-nav a[aria-current] {
	color: var(--wp--custom--color--teal--800, #007c73);
	box-shadow: inset 0 -2px 0 0 var(--wp--custom--color--teal--700, #008a80);
}

/* ============================================================
   En-tête MOBILE (≤ 960px) : bouton contact en picto + menu
   plein écran glissant depuis la droite. Desktop (≥ 961px) inchangé.
   Bascule activée seulement si JS (classe .js) — sinon nav inline en repli.
   ============================================================ */
.site-header__mobile { display: none; align-items: center; gap: 4px; }
.nav-toggle,
.header-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;            /* cible tactile confortable */
	height: 44px;
	border: none;
	background: transparent;
	border-radius: var(--wp--custom--radius--md, 12px);
	cursor: pointer;
	text-decoration: none;
}
.nav-toggle { color: var(--wp--preset--color--navy); }
/* picto contact = accent rouge (≈ 4.9:1 sur paper, AA) */
.header-contact-icon { color: var(--wp--custom--color--red--600, #e3002a); }
.nav-toggle:hover,
.header-contact-icon:hover { background: rgba(0, 23, 39, 0.06); }
.nav-toggle:focus-visible,
.header-contact-icon:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}

/* Panneau plein écran, glisse depuis la droite */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1rem, 5vw, 1.75rem) clamp(1.25rem, 6vw, 2.25rem) clamp(2rem, 8vw, 3rem);
	background: var(--wp--preset--color--paper);
	transform: translateX(100%);
	visibility: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transition: transform 320ms var(--wp--custom--easing--out, ease), visibility 0s linear 320ms;
}
.mobile-menu.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 320ms var(--wp--custom--easing--out, ease), visibility 0s linear 0s;
}
.mobile-menu__close {
	align-self: flex-end;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.mobile-menu__close:hover { background: rgba(0, 23, 39, 0.06); color: var(--wp--custom--color--teal--800, #007c73); }
.mobile-menu__close:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}
.mobile-menu__nav { display: flex; flex-direction: column; margin-top: 0.25rem; }
.mobile-menu__nav a {
	display: block;
	padding: 0.7rem 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.6rem, 7vw, 2.25rem);
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--color--navy--100, #eceff2);
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: var(--wp--custom--color--teal--800, #007c73); }
.mobile-menu__nav a:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}
.mobile-menu__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.85rem 1.5rem;
	background: var(--wp--custom--color--red--600, #e3002a);
	color: #fff;     /* blanc sur rouge-600 ≈ 4.9:1, AA */
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	text-decoration: none;
	border-radius: 999px;
}
.mobile-menu__cta:hover { background: var(--wp--custom--color--red--700, #c40025); }
.mobile-menu__cta:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 3px;
}

/* Bascule desktop -> mobile à 960px (uniquement avec JS) */
@media (max-width: 960px) {
	.js .site-nav,
	.js .site-header__cta { display: none; }
	.js .site-header__mobile { display: flex; }
	.js .mobile-menu { display: flex; }
}

/* Défilement de page bloqué tant que le menu est ouvert */
html.menu-open,
body.menu-open { overflow: hidden; }

/* ============================================================
   Hero — poster typographique asymétrique
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper);
	/* Pleine hauteur d'écran : repli vh puis dvh (viewport dynamique mobile).
	   min-height (pas de hauteur fixe) → la section grandit si le contenu
	   déborde sur petit écran. L'en-tête collant est dans le flux au-dessus,
	   donc rien n'est masqué ni coupé dessous. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(3rem, 8vw, 6rem);
}
/* Hero collé à l'en-tête : supprime le blockGap (sinon bande de ~16px au-dessus) */
.wp-site-blocks > .hero { margin-block-start: 0; }

/* Décor (pictos + label) — non interactif */
.hero__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Label vertical pivoté */
/* Label vertical du hero supprimé. */

/* Pictogrammes de marque */
.hero-picto {
	position: absolute;
	display: block;
	animation: amaFloat 7s ease-in-out infinite;
}
.hero-picto--circle {
	width: clamp(70px, 9vw, 130px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-100);
	top: 12%;
	right: 7%;
	animation-duration: 8s;
}
.hero-picto--dome {
	width: clamp(56px, 7vw, 96px);
	aspect-ratio: 2 / 1;
	border-radius: 999px 999px 0 0;
	background: var(--wp--custom--color--navy--900, #001727);
	bottom: 14%;
	left: 7%;
	animation-duration: 9s;
	animation-delay: -2s;
}
.hero-picto--triangle {
	width: 0;
	height: 0;
	border-left: clamp(26px, 3vw, 42px) solid transparent;
	border-right: clamp(26px, 3vw, 42px) solid transparent;
	border-bottom: clamp(44px, 5vw, 72px) solid var(--wp--preset--color--red);
	top: 16%;
	left: 7%;
	animation-duration: 7.5s;
	animation-delay: -1s;
}
.hero-picto--half {
	width: clamp(56px, 7vw, 96px);
	aspect-ratio: 2 / 1;
	border-radius: 0 0 999px 999px;
	background: var(--wp--preset--color--orange);
	bottom: 15%;
	right: 10%;
	animation-duration: 8.5s;
	animation-delay: -3s;
}
.hero-picto--quarter {
	width: clamp(46px, 5.5vw, 80px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--teal);
	/* quart de cercle (NON directionnel, plein comme les autres pictos) :
	   arc en haut-gauche, coin net en bas-droite. Aucune rotation -> rien à
	   préserver sous prefers-reduced-motion (le float seul est neutralisé). */
	border-radius: 100% 0 0 0;
	top: 40%;
	right: 6%;
	animation-duration: 9.5s;
	animation-delay: -1.5s;
}
.hero-picto--diamond {
	width: clamp(40px, 5vw, 72px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--orange);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	top: 45%;
	left: 6%;
	animation-duration: 8.2s;
	animation-delay: -2.5s;
}
.hero-picto--square {
	width: clamp(34px, 4vw, 58px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--teal-100);
	border-radius: var(--wp--custom--radius--sm, 6px);
	top: 11%;
	left: 34%;
	animation-duration: 7.8s;
	animation-delay: -0.6s;
}
.hero-picto--triangle2 {
	width: 0;
	height: 0;
	border-left: clamp(20px, 2.4vw, 34px) solid transparent;
	border-right: clamp(20px, 2.4vw, 34px) solid transparent;
	border-bottom: clamp(34px, 4vw, 56px) solid var(--wp--preset--color--red);
	bottom: 12%;
	right: 34%;
	animation-duration: 8.8s;
	animation-delay: -3.5s;
}

/* Contenu éditable, au-dessus du décor, centré */
.hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 24px);
	text-align: center;
}
.hero__title {
	font-size: clamp(2.75rem, 7.5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin-block: 0.4em 0.5em;
}
.hero__lead {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--wp--custom--color--navy--800, #0a2336);
}
.hero__cta { margin-top: clamp(1.5rem, 4vw, 2.5rem); justify-content: center; }

/* ============================================================
   Photos flottantes en fond du hero (décoratives, sous le contenu)
   3 carrés à coins arrondis, légèrement inclinés, qui flottent comme les
   pictos (même keyframe amaFloat, vitesses/délais différents → organique).
   Couche au z-index 0, donc strictement DERRIÈRE .hero__content (z-index 1).
   Placée APRÈS .hero__decor dans le DOM → les photos passent DEVANT les pictos.
   ============================================================ */
.hero__photos {
	position: absolute;
	inset: 0;
	z-index: 0;          /* sous le contenu (z-index 1) ; après .hero__decor dans le DOM → devant les pictos */
	pointer-events: none;
}
.hero-photo {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg, 20px);
	box-shadow: var(--wp--custom--shadow--lg, 0 16px 48px rgba(0, 23, 39, 0.14));
	/* Inclinaison statique : sert AUSSI de repli sous prefers-reduced-motion,
	   où l'animation est neutralisée (l'inclinaison reste, le flottement non). */
	transform: rotate(var(--r, 0deg));
	animation: amaFloat 9s ease-in-out infinite;
}
.hero-photo--1 {
	--r: -5deg;
	width: clamp(120px, 16vw, 220px);
	top: 9%;
	left: 3%;
	animation-duration: 9s;
	animation-delay: -1s;
}
.hero-photo--2 {
	--r: 4deg;
	width: clamp(110px, 15vw, 200px);
	top: 34%;
	right: 2%;
	animation-duration: 10.5s;
	animation-delay: -3s;
}
.hero-photo--3 {
	--r: -3deg;
	width: clamp(115px, 14vw, 190px);
	bottom: 9%;
	left: 5%;
	animation-duration: 8.5s;
	animation-delay: -2s;
}
/* Voile doux entre les photos et le texte : couleur de fond (paper), opaque au
   centre (sous le titre/lead/CTA), transparent vers les bords (photos visibles).
   Posé en ::after → recouvre les photos tout en restant dans la couche z-index 0,
   donc sous le contenu. */
.hero__photos::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 82% 72% at 50% 44%,
		var(--wp--preset--color--paper) 0%,
		color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent) 40%,
		transparent 74%
	);
}
/* Petits écrans : photos plus petites (via clamp) et légèrement tuckées hors
   cadre dans les coins (clippées par .hero overflow:hidden) → ne gênent pas le
   texte et ne débordent pas. */
@media (max-width: 600px) {
	.hero-photo--1 { top: 3%; left: -4%; }
	.hero-photo--2 { top: 30%; right: -5%; }
	.hero-photo--3 { bottom: 4%; left: -4%; }
}

/* ============================================================
   Section « Pourquoi Amadeus » — bandeau teal full-bleed
   Texte navy sur teal-500 (navy-900 ≈ 8.4:1, navy-800 ≈ 7.4:1, AA).
   Même traitement que l'en-tête du formulaire « Parlons de votre enfant ».
   ============================================================ */
.why {
	background-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--navy);
	text-align: center;
	padding-block: clamp(4.5rem, 9vw, 8rem);
}
.why__kicker {
	color: var(--wp--preset--color--navy);
	--kicker-line: var(--wp--preset--color--navy);
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
}
.why__quote {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: clamp(1.55rem, 3.4vw, 2.4rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	max-width: 820px;
	margin-inline: auto;
	text-wrap: balance;
}
.why__text {
	color: var(--wp--custom--color--navy--800, #0a2336);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	max-width: 620px;
	margin-inline: auto;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ============================================================
   Révélation à l'entrée — translate seul, jamais d'opacité.
   Le contenu reste lisible même sans JS (gated par .js) et
   est totalement neutralisée sous prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal {
		transform: translateY(22px);
		transition: transform 0.7s var(--wp--custom--easing--out, ease);
	}
	.js .reveal.is-visible { transform: none; }
	.js .why > .reveal:nth-child(2) { transition-delay: 90ms; }
	.js .why > .reveal:nth-child(3) { transition-delay: 180ms; }
}

/* ============================================================
   En-tête de section réutilisable
   (numéro fantôme + kicker + titre + intro)
   ============================================================ */
.section-head {
	position: relative;
	max-width: 760px;
	margin-inline: 0 auto;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-variation-settings: "wght" 900;
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	line-height: 0.9;
	/* Numéral plein, teinte navy discrète (déco) — plus de contour */
	color: var(--wp--preset--color--navy-200);
	margin-bottom: 0.1em;
}
.section-head__title { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0.2em 0 0.6rem; }
.section-head__intro {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--navy-800);
	max-width: 58ch;
}

/* ============================================================
   Carte réutilisable « axe » (.card + accent + numéro fantôme)
   ============================================================ */
.card--teal   { --card-accent: var(--wp--preset--color--teal);   --card-soft: var(--wp--preset--color--teal-100); }
.card--orange { --card-accent: var(--wp--preset--color--orange); --card-soft: var(--wp--custom--color--orange--100, #ffecd1); }
.card--red    { --card-accent: var(--wp--preset--color--red);    --card-soft: var(--wp--custom--color--red--100, #ffd6dd); }

.card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	border-top: 4px solid var(--card-accent, var(--wp--preset--color--teal));
	border-radius: var(--wp--custom--radius--lg, 20px);
	box-shadow: var(--wp--custom--shadow--sm);
	padding: clamp(1.5rem, 3vw, 2rem);
	transition:
		transform var(--wp--custom--duration--base, 240ms) var(--wp--custom--easing--out, ease),
		box-shadow var(--wp--custom--duration--base, 240ms) var(--wp--custom--easing--out, ease);
}
.card:hover,
.card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--wp--custom--shadow--lg);
}
.card__num {
	position: absolute;
	top: -0.12em;
	right: 0.08em;
	z-index: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-variation-settings: "wght" 900;
	font-size: clamp(4rem, 9vw, 6.5rem);
	line-height: 1;
	/* Numéral plein, ton clair de l'accent de la carte — plus de contour */
	color: var(--card-soft, var(--wp--preset--color--teal-100));
	opacity: 0.9;
	pointer-events: none;
}
.card__tag,
.card__title,
.card__desc { position: relative; z-index: 1; }
.card__tag {
	display: inline-block;
	margin: 0 0 0.85rem;
	padding: 0.3rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	background: var(--card-soft, var(--wp--preset--color--teal-100));
	border-radius: var(--wp--custom--radius--pill, 999px);
}
.card__title { font-size: var(--wp--preset--font-size--h4); line-height: 1.25; margin: 0 0 0.6rem; }
.card__desc  { color: var(--wp--preset--color--navy-500); margin: 0; }

/* ============================================================
   Section Programs — grille de 3 cartes décalées
   ============================================================ */
.programs {
	background: var(--wp--preset--color--paper);
	padding-block: clamp(4rem, 8vw, 7rem);
}
.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
	align-items: start;
}
@media (min-width: 901px) {
	.cards-grid > .card:nth-child(2) { margin-top: clamp(0px, 4vw, 56px); }
	.cards-grid > .card:nth-child(3) { margin-top: clamp(0px, 2vw, 24px); }
}
@media (max-width: 900px) {
	.cards-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
	.js .cards-grid > .reveal:nth-child(2) { transition-delay: 110ms; }
	.js .cards-grid > .reveal:nth-child(3) { transition-delay: 220ms; }
}

/* ============================================================
   Section Schedule — « Une semaine au Conservatoire »
   Rendu dynamique (bloc amadeus/semaine) lu depuis l'option
   'amadeus_schedule'. Agenda « un jour à la fois » (onglets).
   Sans JS : la tablist est masquée et tous les panneaux s'empilent
   (info accessible). Le script ajoute .is-enhanced pour révéler les
   onglets et n'afficher qu'un seul jour. Tokens + police Lexend du thème.
   ============================================================ */
.schedule {
	background: var(--wp--preset--color--navy-050);
	padding-block: clamp(4rem, 8vw, 7rem);
}

/* Liste d'onglets : masquée par défaut, révélée par le script (.is-enhanced). */
.week-tabs {
	display: none;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var(--wp--custom--color--navy--100, #eceff2);
}
.week-tabs-wrap.is-enhanced .week-tabs { display: flex; }

.week-tab {
	appearance: none;
	margin: 0 0 -1px;
	border: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	border-bottom: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md, 12px) var(--wp--custom--radius--md, 12px) 0 0;
	background: #fff;
	color: var(--wp--preset--color--navy-800);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.2;
	padding: 0.6rem 1.05rem;
	cursor: pointer;
}
.week-tab:hover { color: var(--wp--preset--color--navy); }
.week-tab[aria-selected="true"] {
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy-050);
	border-bottom-color: var(--wp--preset--color--navy-050);
	box-shadow: inset 0 3px 0 0 var(--wp--preset--color--red);
}
.week-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

/* Panneaux : sans JS, tous empilés et espacés. Avec JS (.is-enhanced), un seul. */
.week-panel { margin-top: 1.5rem; }
.week-panels > .week-panel:first-child { margin-top: 0; }
.week-tabs-wrap.is-enhanced .week-panel { margin-top: 0; }
.week-tabs-wrap.is-enhanced .week-panel:not(.is-current) { display: none; }
.week-panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 4px;
}

/* Panneau = deux colonnes (musique / suivis) → une seule sur mobile ou si
   l'une des deux colonnes manque (ex. vendredi sans musique). */
.daygrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}
.daygrid--single { grid-template-columns: 1fr; }
@media (max-width: 720px) {
	.daygrid { grid-template-columns: 1fr; }
}
.daycol { min-width: 0; }

/* Couleur par catégorie. Le LIBELLÉ texte reste navy/navy-800 (contraste AA) ;
   la couleur (pastille, trait, teinte claire) n'est jamais le seul porteur
   d'information — WCAG 1.4.1. */
.cat-music   { --cat: var(--wp--preset--color--teal); }
.cat-suivis  { --cat: var(--wp--preset--color--red); }
.cat-soutien { --cat: var(--wp--preset--color--orange); }

/* Légende : pastille colorée + libellé navy */
.legend { margin-top: 1.25rem; }
.legend__item {
	position: relative;
	margin: 0;
	padding-left: 1.2rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.legend__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cat, var(--wp--preset--color--teal));
}

/* Panneau-jour = carte blanche (vaut aussi comme carte empilée sans JS). */
.week-panel {
	background: #fff;
	border: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	border-radius: var(--wp--custom--radius--lg, 20px);
	box-shadow: var(--wp--custom--shadow--xs);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.week-panel__day {
	font-size: var(--wp--preset--font-size--h4);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--custom--color--navy--100, #eceff2);
}

/* Bloc de demi-journée (musique / suivis / soutien) — trait coloré + libellé */
.daypart {
	margin-top: 1.2rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--cat, var(--wp--preset--color--teal));
}
.daypart:first-of-type { margin-top: 0; }
.daypart__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}
.daypart__label::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cat, var(--wp--preset--color--teal));
	flex: none;
}
.daypart__time {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy-800);
}
.daypart__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--navy-800);
}

/* Disciplines musicales : disclosure natif (<details>/<summary>), sans JS */
.discs { display: flex; flex-direction: column; gap: 0.4rem; }
.disc {
	border: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: var(--wp--preset--color--navy-050);
}
.disc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0.7rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	list-style: none;
	border-radius: inherit;
}
.disc__summary::-webkit-details-marker { display: none; }
.disc__summary::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--wp--preset--color--navy-500);
	border-bottom: 2px solid var(--wp--preset--color--navy-500);
	transform: rotate(45deg);
	flex: none;
	transition: transform var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.disc[open] .disc__summary::after { transform: rotate(-135deg); }
.disc__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}
.disc__slots {
	margin: 0;
	padding: 0.1rem 0.7rem 0.6rem 1.7rem;
	list-style: none;
}
.disc__slots li {
	position: relative;
	margin: 0.25rem 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--navy-800);
}
.disc__slots li::before {
	content: "";
	position: absolute;
	left: -0.9rem;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
}
.disc__empty {
	margin: 0;
	padding: 0.1rem 0.7rem 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	color: var(--wp--preset--color--navy-500);
}

/* Suivis : étiquettes — texte navy sur teinte rouge claire (contraste AA élevé) */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tag {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--custom--color--red--100, #ffd6dd);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.15rem 0.65rem;
}

/* Format de cours : libellé + horaire mis en avant. */
.disc__fmt { color: var(--wp--preset--color--navy-800); }
.disc__time {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

/* Suivis du jour : nom + pastilles « matin » / « après-midi ». */
.suivis {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.suivi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
}
.suivi__name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.suivi__moments {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}
.pill {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--custom--color--red--100, #ffd6dd);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.1rem 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.disc__summary::after { transition: none; }
}

/* Révélation douce du panneau actif (uniquement avec JS + mouvement autorisé). */
@media (prefers-reduced-motion: no-preference) {
	.week-tabs-wrap.is-enhanced .week-panel.is-current {
		animation: weekPanelIn 220ms var(--wp--custom--easing--out, ease) both;
	}
}
@keyframes weekPanelIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ============================================================
   Section WhyMusic — bandeau navy full-bleed, texte blanc
   ============================================================ */
.why-music {
	background: var(--wp--custom--color--navy--900, #001727);
	color: #fff;
	padding-block: clamp(4.5rem, 9vw, 8rem);
}
.why-music .section-head__title,
.why-music .arg__title { color: #fff; }
.why-music .section-head__intro { color: var(--wp--preset--color--navy-200); }
.why-music .section-head__num { color: rgba(255, 255, 255, 0.14); }

/* Kicker clair pour fond sombre (teal-500 sur navy ≈ 7.6:1) */
.kicker--on-dark { color: var(--wp--preset--color--teal); }

/* 3 colonnes d'arguments */
.args {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3.4vw, 2.75rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
}
@media (max-width: 820px) { .args { grid-template-columns: 1fr; } }

.arg--teal   { --arg-accent: var(--wp--preset--color--teal); }
.arg--orange { --arg-accent: var(--wp--preset--color--orange); }
.arg--red    { --arg-accent: var(--wp--preset--color--red); }
.arg {
	border-top: 3px solid var(--arg-accent, var(--wp--preset--color--teal));
	padding-top: 1.1rem;
}
.arg__title { font-size: var(--wp--preset--font-size--h4); line-height: 1.25; margin: 0.4rem 0 0.6rem; }
.arg__text  { margin: 0; }

/* Note de bas de section */
.why-music__note {
	max-width: 70ch;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy-200);
}

@media (prefers-reduced-motion: no-preference) {
	.js .args > .reveal:nth-child(2) { transition-delay: 120ms; }
	.js .args > .reveal:nth-child(3) { transition-delay: 240ms; }
}

/* ============================================================
   Section Team — grille de portraits (carte .member réutilisable)
   Grille 3 -> 2 -> 1 colonnes.
   ============================================================ */
.team { background: #fff; padding-block: clamp(4rem, 8vw, 7rem); }
.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mobile (≤620px) : la grille devient un carrousel à défilement tactile
   (scroll-snap horizontal), points indicateurs injectés en JS. */
@media (max-width: 620px) {
	.team-grid {
		grid-template-columns: none;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 4px;
		gap: 1rem;
		padding-bottom: 0.75rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.team-grid::-webkit-scrollbar { display: none; }
	.team-grid > .member {
		flex: 0 0 84%;
		scroll-snap-align: center;
	}
}
.team-dots { display: none; }
@media (max-width: 620px) {
	.team-dots {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1.25rem;
	}
}
.team-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--wp--custom--color--navy--200, #d6dbe1);
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}
.team-dot.is-active {
	background: var(--wp--preset--color--teal);
	transform: scale(1.25);
}
.team-dot:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 3px;
}

.member--teal   { --m-accent: var(--wp--preset--color--teal);   --m-soft: var(--wp--preset--color--teal-100); }
.member--orange { --m-accent: var(--wp--preset--color--orange); --m-soft: var(--wp--custom--color--orange--100, #ffecd1); }
.member--red    { --m-accent: var(--wp--preset--color--red);    --m-soft: var(--wp--custom--color--red--100, #ffd6dd); }
.member--navy   { --m-accent: var(--wp--custom--color--navy--900, #001727); --m-soft: var(--wp--custom--color--navy--100, #eceff2); }

.member {
	background: #fff;
	border: 1px solid var(--wp--custom--color--navy--100, #eceff2);
	/* Filet d'accent en tête : reprend la couleur du membre (--m-accent) pour
	   garder une identité visuelle par carte maintenant qu'il n'y a plus de photo. */
	border-top: 4px solid var(--m-accent, var(--wp--preset--color--teal));
	border-radius: var(--wp--custom--radius--xl, 32px);
	overflow: hidden;
	transition:
		transform var(--wp--custom--duration--base, 240ms) var(--wp--custom--easing--out, ease),
		box-shadow var(--wp--custom--duration--base, 240ms) var(--wp--custom--easing--out, ease);
}
.member:hover,
.member:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--wp--custom--shadow--lg);
}

/* Zone photo — RETIRÉE pour l'instant (pas encore de portraits). La structure
   est conservée pour une réintroduction facile : insérer un bloc Image en
   première position dans .member, enveloppé d'un groupe .member__photo ; il
   remplit alors la zone 4/5 (object-fit: cover) au-dessus de .member__body. */
.member__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--m-soft, var(--wp--preset--color--teal-100));
}
.member__photo .wp-block-image,
.member__photo img {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member__body { padding: clamp(1.5rem, 3vw, 2rem); }
.member__role {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-500);
	margin: 0 0 0.35rem;
}
.member__name { font-size: var(--wp--preset--font-size--h4); margin: 0 0 0.5rem; }
.member__bio {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--custom--color--navy--600, #36495a);
	margin: 0;
}
.member__links { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
/* Icône = vrai lien (e-mail ou LinkedIn). Couleur navy-600 -> contraste AA
   (> 4.5:1 sur blanc) ; survol teal ; focus visible au clavier. */
.member__link {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--custom--color--navy--200, #d6dbe1);
	color: var(--wp--custom--color--navy--600, #36495a);
	transition:
		color 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}
.member__link:hover {
	color: var(--wp--custom--color--teal--800, #007c73);
	border-color: var(--wp--custom--color--teal--600, #00a99d);
	background: var(--wp--preset--color--teal-100);
}
.member__link:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}
.member__link svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
	.js .team-grid > .reveal:nth-child(3n+2) { transition-delay: 80ms; }
	.js .team-grid > .reveal:nth-child(3n+3) { transition-delay: 160ms; }
}

/* ============================================================
   Section Place — « Notre maison » : split 2 colonnes
   Gauche : en-tête + adresse + salles. Droite : carte « Nos programmes ».
   Aucune carte interactive embarquée (RGPD : pas d'iframe/traceur).
   ============================================================ */
.place { background: var(--wp--preset--color--paper); padding-block: clamp(4rem, 8vw, 7rem); }
.place__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 860px) { .place__grid { grid-template-columns: 1fr; } }

/* Le head occupe toute la colonne ici */
.place__left .section-head { max-width: none; margin-bottom: clamp(1.5rem, 3vw, 2rem); }

/* Liste des salles */
.rooms { display: grid; gap: 0.85rem; }
.room {
	position: relative;
	margin: 0;
	padding-left: 1.7rem;
	color: var(--wp--preset--color--navy-800);
}
.room::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 13px;
	height: 13px;
	border-radius: 4px;
	background: var(--dot, var(--wp--preset--color--teal));
}
.room--teal   { --dot: var(--wp--preset--color--teal); }
.room--orange { --dot: var(--wp--preset--color--orange); }
.room--red    { --dot: var(--wp--preset--color--red); }

/* Carte « Nos programmes » — réutilise .card, version plate (non survolée) */
.card--flat { box-shadow: var(--wp--custom--shadow--md); }
.card--flat:hover,
.card--flat:focus-within { transform: none; box-shadow: var(--wp--custom--shadow--md); }
.place__subtitle {
	color: var(--wp--preset--color--navy-500);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 1rem;
}
.proglist { display: grid; gap: 0.9rem; }
.prog--teal   { --accent: var(--wp--preset--color--teal); }
.prog--orange { --accent: var(--wp--preset--color--orange); }
.prog {
	border-left: 3px solid var(--accent, var(--wp--preset--color--teal));
	padding-left: 0.9rem;
}
.prog__title { font-weight: 600; margin: 0 0 0.15rem; }
.prog__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--navy--600, #36495a);
}
.tariff {
	margin: 1.2rem 0 0;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--md, 12px);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.js .place__grid > .reveal:nth-child(2) { transition-delay: 120ms; }
}

/* ============================================================
   Section InscriptionForm — bandeau teal + carte formulaire blanche
   En-tête : texte navy sur teal-500 (≈ 8.4:1, AA). Formulaire sur blanc.
   ============================================================ */
.inscription {
	background: var(--wp--preset--color--teal);
	padding-block: clamp(4.5rem, 9vw, 8rem);
}
.inscription__head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.inscription__head .kicker {
	justify-content: center;
	color: var(--wp--preset--color--navy);
	--kicker-line: var(--wp--preset--color--navy);
}
.inscription__title {
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	margin: 0.2em 0 0.5rem;
}
.inscription__intro {
	color: var(--wp--custom--color--navy--800, #0a2336);
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}

/* Carte formulaire (réutilisable) */
.amform {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--wp--custom--radius--xl, 32px);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}
.amform__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* gouttière nette : 1.25rem vertical entre rangées, 1.5rem (~24px) horizontal */
	gap: 1.25rem 1.5rem;
	align-items: start;
}
@media (max-width: 600px) { .amform__grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }
/* Honeypot anti-spam : hors flux, jamais visible, n'affecte pas la grille */
.amform .website-url-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Champ texte (style Input réutilisable) */
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy);
}
.req { color: var(--wp--custom--color--red--600, #e3002a); }
.field__control {
	font: inherit;
	width: 100%;
	/* border-box : la largeur 100% INCLUT padding + bordure → le champ tient
	   exactement dans sa colonne, sans déborder ni chevaucher le voisin. */
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	color: var(--wp--preset--color--navy);
	background: #fff;
	/* bordure navy-400 = 3.1:1 sur blanc (AA 1.4.11 pour les composants) */
	border: 2px solid var(--wp--custom--color--navy--400, #87939c);
	border-radius: var(--wp--custom--radius--md, 12px);
	transition: border-color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease),
		box-shadow var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.field__control::placeholder { color: var(--wp--custom--color--navy--400, #87939c); }
.field__control:focus {
	outline: none;
	border-color: var(--wp--custom--color--teal--700, #008a80);
	box-shadow: var(--wp--custom--focus-ring);
}
textarea.field__control { min-height: 120px; resize: vertical; }

/* Consentement (style Checkbox réutilisable) */
.consent { display: grid; gap: 0.45rem; }
.checkbox { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.checkbox__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.checkbox__box {
	flex: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--wp--custom--color--navy--400, #87939c);
	border-radius: var(--wp--custom--radius--sm, 6px);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease),
		border-color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.checkbox__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.checkbox__input:checked + .checkbox__box {
	background: var(--wp--custom--color--teal--700, #008a80);
	border-color: var(--wp--custom--color--teal--700, #008a80);
}
.checkbox__input:checked + .checkbox__box svg { opacity: 1; }
.checkbox__input:focus-visible + .checkbox__box {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}
.checkbox__text { font-size: var(--wp--preset--font-size--sm); color: var(--wp--custom--color--navy--800, #0a2336); }
.consent__note {
	margin: 0;
	padding-left: 2.1rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--navy-500);
}
.consent__note a { color: var(--wp--custom--color--teal--800, #007c73); text-decoration: underline; }

.amform__actions { margin-top: 0.75rem; display: flex; justify-content: center; }
.amform__note {
	margin: 1rem 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--navy-500);
}
.amform__success { text-align: center; padding: 1rem 0; }
.amform__success h3 { color: var(--wp--custom--color--teal--800, #007c73); margin-bottom: 0.5rem; }

/* --- Formulaire de pré-inscription « une question à la fois » -------------- */
.aminscription { position: relative; }

/* Bannières du repli sans JS (?inscription=success|error) */
.amform__banner {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 2px solid;
	border-radius: var(--wp--custom--radius--md, 12px);
	font-size: var(--wp--preset--font-size--sm);
}
.amform__banner--ok {
	border-color: var(--wp--custom--color--teal--700, #008a80);
	background: var(--wp--preset--color--teal-100);
	color: var(--wp--custom--color--teal--800, #007c73);
}
.amform__banner--err {
	border-color: var(--wp--custom--color--red--600, #e3002a);
	background: var(--wp--custom--color--red--100, #ffd6dd);
	color: var(--wp--custom--color--red--700, #c30024);
}

/* Honeypot : hors écran, jamais visible */
.aminscription__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Question : énoncé + contrôles */
.q__label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
	margin: 0 0 1rem;
	padding: 0;
}
.q__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__sublabel {
	display: block;
	margin: 0.9rem 0 0.3rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy);
}

/* Choix (radios / cases) — texte navy, couleur jamais seul porteur d'info */
.choices { display: flex; flex-direction: column; gap: 0.5rem; }
.choice {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--wp--preset--color--navy-200);
	border-radius: var(--wp--custom--radius--md, 12px);
	cursor: pointer;
}
.choice:hover { border-color: var(--wp--custom--color--navy--400, #87939c); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box {
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--wp--custom--color--navy--400, #87939c);
	background: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.choice__box--check { border-radius: var(--wp--custom--radius--sm, 6px); }
.choice__box::after { content: ""; opacity: 0; }
.choice__box:not(.choice__box--check)::after { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.choice__box--check::after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.choice input:checked + .choice__box { background: var(--wp--custom--color--teal--700, #008a80); border-color: var(--wp--custom--color--teal--700, #008a80); }
.choice input:checked + .choice__box::after { opacity: 1; }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--wp--custom--color--teal--700, #008a80); outline-offset: 2px; }
.choice__text { font-size: var(--wp--preset--font-size--sm); color: var(--wp--custom--color--navy--800, #0a2336); }
.choice:has(input:checked) { border-color: var(--wp--custom--color--teal--700, #008a80); background: var(--wp--preset--color--teal-100); }

/* Bouton d'envoi (accent rouge, blanc ≈ 4.9:1 sur rouge-600, AA) */
.am-btn {
	display: inline-block;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--wp--custom--color--red--600, #e3002a);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.85rem 1.7rem;
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--fast, 140ms) var(--wp--custom--easing--out, ease);
}
.am-btn:hover { background: var(--wp--custom--color--red--700, #c30024); }
.am-btn:focus-visible { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 2px; }

/* Mode enrichi (JS) : une question à la fois, hauteur bornée, défilement interne */
.aminscription.is-enhanced .aminscription__viewport {
	min-height: 15rem;
	max-height: min(58vh, 26rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.aminscription.is-enhanced .q { display: none; }
.aminscription.is-enhanced .q.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.aminscription.is-enhanced .q.is-active { animation: amq-in 0.32s var(--wp--custom--easing--out, ease) both; }
	@keyframes amq-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Sans JS : toutes les questions empilées, séparées */
.aminscription:not(.is-enhanced) .q + .q {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	padding-top: clamp(1.5rem, 4vw, 2.5rem);
	border-top: 1px solid var(--wp--preset--color--navy-200);
}

/* Barre de navigation (révélée par le JS) */
.aminscription__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.aminscription__nav[hidden] { display: none; }
.am-nav-btn {
	width: 44px;
	height: 44px;
	flex: none;
	border: 2px solid var(--wp--custom--color--navy--400, #87939c);
	background: #fff;
	border-radius: 50%;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.am-nav-btn:hover { border-color: var(--wp--custom--color--teal--700, #008a80); }
.am-nav-btn:focus-visible { outline: 3px solid var(--wp--custom--color--teal--700, #008a80); outline-offset: 2px; }
.am-nav-btn[hidden] { display: none; }
.am-nav-btn:disabled { opacity: 0.4; cursor: default; }
.aminscription__progress {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--custom--color--navy--800, #0a2336);
	text-align: center;
}

.aminscription__submit { margin-top: 1.5rem; }
.aminscription:not(.is-enhanced) .aminscription__submit { text-align: center; }

/* Message d'erreur d'envoi (JS) */
.aminscription__error {
	margin: 1rem 0 0;
	color: var(--wp--custom--color--red--700, #c30024);
	font-size: var(--wp--preset--font-size--sm);
}
.aminscription__error[hidden] { display: none; }

/* Écran de remerciement (JS) */
.aminscription__done { text-align: center; padding: 2rem 0; }
.aminscription__done[hidden] { display: none; }
.aminscription__done h3 {
	color: var(--wp--custom--color--teal--800, #007c73);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 0.5rem;
}
.aminscription__done:focus { outline: none; }

/* ============================================================
   Footer — bandeau navy pleine largeur, 3 colonnes + barre de bas
   ============================================================ */
/* Le footer colle à la dernière section (pas d'écart blockGap) */
.wp-site-blocks > footer { margin-block-start: 0; }
.site-footer {
	background: var(--wp--custom--color--navy--900, #001727);
	color: #fff;
	/* Pleine largeur SANS marge négative (cf. .site-header) : évite le
	   débordement de 24px qui créait le scroll horizontal. */
}
.site-footer__inner {
	max-width: var(--wp--custom--container--max, 1200px);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(16px, 4vw, 32px) clamp(1.5rem, 3vw, 2rem);
}
.site-footer__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .site-footer__cols { grid-template-columns: 1fr; } }

.footer-logo {
	display: block;
	width: clamp(150px, 16vw, 188px);
	height: auto;
	margin-bottom: 1.1rem;
}
.site-footer__tagline { color: var(--wp--preset--color--navy-200); max-width: 40ch; margin: 0; }

.footer__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 0.8rem;
}
.site-footer__cols p { margin: 0 0 0.3rem; line-height: 1.5; }
.footer__muted { color: var(--wp--preset--color--navy-200); }
.site-footer a { color: var(--wp--custom--color--teal--300, #6fded6); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Réseaux sociaux — icônes SVG inline (aucun appel externe / RGPD) */
.site-footer__social {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}
.site-footer .social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* cible tactile confortable au doigt (mobile) */
	height: 44px;
	border-radius: 50%;
	/* couleur de marque (orange ≈ 8.6:1 sur navy, AA) */
	color: var(--wp--preset--color--orange);
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
	transition: color var(--wp--custom--duration--fast, 140ms) ease,
		background-color var(--wp--custom--duration--fast, 140ms) ease;
}
.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
	/* survol / focus : teal (≈ 8.4:1 sur navy, AA) */
	color: var(--wp--preset--color--teal);
	background: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}
.site-footer .social-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}
.site-footer .social-link svg { display: block; }

/* Colonne « Contact » à deux personnes : espace entre les deux fiches et
   resserre l'icône LinkedIn sous l'e-mail (réutilise .footer__muted,
   .social-link et .site-footer__social). */
.footer__person + .footer__person { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.footer__person .site-footer__social { margin-top: 0.6rem; }

.site-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: var(--wp--preset--font-size--sm);
}
.site-footer__copy,
.site-footer__credit { color: var(--wp--preset--color--navy-200); margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; }

/* ============================================================
   Templates internes (page, single, archive, search, 404)
   Mise en page sobre, contenu ~760 (contentSize de theme.json).
   ============================================================ */
.page-main {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	min-height: 55vh;
}
.page-main > .wp-block-post-title,
.page-main > .wp-block-query-title { margin-bottom: 0.5rem; }

.post-meta {
	color: var(--wp--preset--color--navy-500);
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.post-meta a { color: var(--wp--custom--color--teal--800, #007c73); }

.posts-list .wp-block-post { padding-block: 1.6rem; border-bottom: 1px solid var(--wp--custom--color--navy--100, #eceff2); }
.posts-list .wp-block-post:first-child { padding-top: 0.5rem; }
.posts-list .wp-block-post-title { font-size: var(--wp--preset--font-size--h3); line-height: 1.2; margin: 0 0 0.3rem; }
.posts-list .wp-block-post-excerpt { color: var(--wp--custom--color--navy--600, #36495a); margin: 0.5rem 0 0; }
.wp-block-query-pagination { margin-top: 2rem; }

.post-nav {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--custom--color--navy--100, #eceff2);
}

.error-404 { text-align: center; }
.error-404 .wp-block-buttons { margin-top: 1.5rem; }
.error-404 .wp-block-search { max-width: 440px; margin: 2rem auto 0; }

/* Champ de recherche cohérent avec les champs du formulaire */
.wp-block-search__input {
	border: 2px solid var(--wp--custom--color--navy--400, #87939c);
	border-radius: var(--wp--custom--radius--md, 12px);
	padding: 0.6rem 0.85rem;
	color: var(--wp--preset--color--navy);
}
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--custom--color--teal--700, #008a80);
	box-shadow: var(--wp--custom--focus-ring);
}

/* ============================================================
   Animations de marque
   ============================================================ */
@keyframes amaFloat {
	0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
	50%      { transform: translateY(-16px) rotate(var(--r, 0deg)); }
}

/* ============================================================
   Confort sensoriel — coupe les animations si demandé
   (public neurodivers : on respecte strictement prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	html { scroll-behavior: auto; }
	.hero-picto { transform: none; }
}

/* ==========================================================================
   Étape « souhaits » — sélecteur de créneaux (3 onglets), formulaire d'inscription
   ========================================================================== */

/* « (facultatif) » dans la légende de la question */
.q__optional {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy-500);
}

/* Repli sans JS : masqué dès que le JS a bâti les onglets ; les cases restent
   dans le DOM (display:none n'empêche pas l'envoi) et continuent de s'envoyer. */
.souhaits--enhanced .souhaits__fallback { display: none; }

.souhaits__fbgroup { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.souhaits__fbtitle,
.souhaits__fbsection {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.4rem;
	padding: 0;
}
.souhaits__fbsection { margin-top: 1.25rem; }

/* Onglets (ARIA tablist) */
.souhaits__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
	border-bottom: 2px solid var(--wp--preset--color--navy-200);
}
.souhaits__tab {
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--navy--800, #0a2336);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 0.5rem 0.65rem;
	cursor: pointer;
}
.souhaits__tab:hover { color: var(--wp--custom--color--teal--800, #007c73); }
.souhaits__tab[aria-selected="true"] {
	color: var(--wp--custom--color--teal--800, #007c73);
	border-bottom-color: var(--wp--custom--color--teal--700, #008a80);
}
.souhaits__tab:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm, 6px);
}

/* Sélecteur (discipline / jour / suivi) + liste de créneaux */
.souhaits__pick { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; }
.souhaits__select { max-width: 24rem; }
.souhaits__slots { max-height: 15rem; overflow-y: auto; padding-right: 0.2rem; }
.souhaits__slots:empty { display: none; }

/* Panier « Mes souhaits » */
.souhaits__basket {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 2px solid var(--wp--preset--color--navy-200);
}
.souhaits__baskettitle {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy);
}
.souhaits__empty {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--navy-500);
}
.souhaits__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.souhaits__chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem;
	background: var(--wp--preset--color--teal-100);
	border: 2px solid var(--wp--custom--color--teal--700, #008a80);
	border-radius: var(--wp--custom--radius--md, 12px);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--navy--800, #0a2336);
}
.souhaits__chip span { flex: 1 1 auto; min-width: 0; }
.souhaits__chipremove {
	flex: none;
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	width: 1.7rem;
	height: 1.7rem;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--custom--color--red--700, #c30024);
	cursor: pointer;
}
.souhaits__chipremove:focus-visible {
	outline: 3px solid var(--wp--custom--color--teal--700, #008a80);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.souhaits__select { max-width: 100%; }
}