/* ==========================================================================
   Whipple — styles du site
   Élégant, épuré, espacé, fin, clair, délicat.
   ========================================================================== */

:root {
	/* Palette chaude : ivoire, sable et un filet d'ocre ; le magenta du logo reste l'accent. */
	--ink: #28221d;
	--ink-soft: #50463c;
	--muted: #6c6054;
	--line: #e3d7c5;
	--paper: #fcf9f4;
	--sand: #f5eee2;
	--sand-deep: #ede2d0;
	--ochre: #b07636;
	--ochre-soft: rgba(176, 118, 54, 0.35);
	--accent: #aa0168;
	--shade: 24, 17, 11;

	/* Voile ocre, à peine perceptible, sur les photos (souvent en noir et blanc). */
	--photo-warmth: sepia(0.22) saturate(1.12) contrast(1.02);

	--font-text: Gruppo, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Poiret One", Georgia, serif;
	--font-name: "Bruno Ace", "Helvetica Neue", Arial, sans-serif;

	/* Poiret One et Gruppo n'existent qu'en une graisse, très fine : un léger contour
	   les épaissit à peine là où l'œil doit accrocher (titres, agenda). */
	--display-stroke: 0.016em;
	--label-stroke: 0.012em;

	--gutter: clamp(1.25rem, 5vw, 4rem);
	--content: 44rem;
	--wide: 72rem;
	--header-h: 5.5rem;
	--header-h-compact: 4.25rem;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Base
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1.3rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-rendering: optimizeLegibility;
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.25s var(--ease);
}

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

:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 4px;
}

::selection {
	background: var(--accent);
	color: #fff;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

h2,
h3,
h4,
.date__day,
.past-year__year,
.past-stats__num,
.child-card__title,
.cw-media-link,
.cw-embed__label {
	-webkit-text-stroke: var(--display-stroke) currentColor;
}

.date__weekday,
.date__month,
.date__place,
.date__note,
.date__link,
.past-year__count,
.past-year__groups,
.past-stats__label,
.past-filter__button {
	-webkit-text-stroke: var(--label-stroke) currentColor;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--ink);
	color: var(--paper);
}

.skip-link:focus {
	top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Petits éléments communs
   ------------------------------------------------------------------------- */

.button,
.wp-block-button__link {
	display: inline-block;
	padding: 1rem 1.9rem;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--font-text);
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.button:hover,
.wp-block-button__link:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.button--light:hover {
	border-color: #fff;
	background: #fff;
	color: var(--ink);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.95rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
}

.link-arrow::after {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	transition: width 0.35s var(--ease);
}

.link-arrow:hover::after,
a:hover .link-arrow::after {
	width: 3.6rem;
}

.empty-state {
	padding: 2.4rem 0 0.4rem;
	border-top: 1px solid var(--line);
}

.empty-state__text {
	margin: 0 0 1.6rem;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	color: var(--ink-soft);
}

/* Éléments séparés par un petit rond (le point médian de Gruppo est peu lisible).
   Le rond est posé dans l'espace qui précède chaque élément. La liste déborde à gauche de
   cet espace et le masque : le rond qui ouvrirait une ligne est caché. Jamais de rond seul
   sur une ligne, même quand un nom de salle trop long passe à la ligne. */
.dot-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.3em;
	margin-left: -1.86em;
	clip-path: inset(-1em 0 -1em 1.86em);
}

.dot-list > span {
	margin-left: 1.86em;
}

.dot-list > span::before {
	content: "";
	display: inline-block;
	width: 0.26em;
	height: 0.26em;
	margin: 0 0.8em 0 -1.06em;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.22em;
	opacity: 0.7;
}

/* En-tête
   ------------------------------------------------------------------------- */

/*
 * En-tête fixe. Il est hors du flux : la page réserve sa hauteur (.site-main),
 * sauf sur l'accueil où il flotte sur la photo. Au défilement (.is-scrolled,
 * posée par main.js), il s'affine sans faire bouger le contenu.
 */
.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: var(--header-h);
	padding: 0 var(--gutter);
	border-bottom: 1px solid var(--ochre-soft);
	transition: height 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Le fond est porté par un pseudo-élément : un backdrop-filter sur l'en-tête lui-même
   enfermerait le menu mobile (position: fixed) dans la hauteur de l'en-tête. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(249, 245, 238, 0.93);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: opacity 0.4s var(--ease);
}

.site-header.is-scrolled {
	height: var(--header-h-compact);
}

.site-main {
	padding-top: var(--header-h);
}

.has-hero .site-main {
	padding-top: 0;
}

/* Barre d'administration WordPress (visible seulement une fois connecté). */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Accueil : transparent et clair tant qu'il est sur la photo. */
.site-header--over:not(.is-scrolled) {
	border-bottom-color: transparent;
	color: #fff;
}

.site-header--over:not(.is-scrolled)::before {
	opacity: 0;
}

.brand {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.brand:hover {
	color: inherit;
}

/* Accueil : rien sur la photo (le nom y est déjà en grand) ; logo et nom
   arrivent en fondu avec l'en-tête fixe, une fois la photo passée. */
.site-header--over:not(.is-scrolled) .brand {
	opacity: 0;
	visibility: hidden;
}

.brand__logo {
	width: 4.4rem;
	transform-origin: 22% 78%;
	transition: width 0.4s var(--ease), opacity 0.4s var(--ease);
}

.site-header.is-scrolled .brand__logo {
	width: 3.7rem;
}

/* Motion : au survol, la guitare vibre comme une corde pincée. */
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
	animation: strum 0.9s var(--ease);
}

.brand__name {
	font-family: var(--font-name);
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 2.2rem;
}

.site-nav__list,
.lang-switch,
.footer-nav {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list {
	gap: 1.5rem;
}

.site-nav__list a,
.lang-switch a,
.footer-nav a {
	display: inline-block;
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
	font-size: 0.9rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a,
.site-nav__list .current-menu-ancestor > a,
.lang-switch a[aria-current] {
	border-bottom-color: currentColor;
}

.site-header--over:not(.is-scrolled) a:hover {
	color: #fff;
}

.lang-switch {
	gap: 0.35rem;
}

.lang-switch li + li::before {
	content: "/";
	margin-right: 0.35rem;
	opacity: 0.45;
}

/* Sous-menu (La Palette, Real Time Music sous Soundpainting) : il se déplie au survol
   ou quand le clavier atteint l'entrée ; un fin chevron signale sa présence. */
.site-nav__list > li {
	position: relative;
}

.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.55em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.28em) rotate(45deg);
	opacity: 0.7;
}

.site-nav__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sur ordinateur : une carte centrée sous son entrée, texte centré, un fin trait magenta en
   haut et un petit trait entre les sous-pages. */
@media (min-width: 90.01rem) {
	.site-nav__list .sub-menu {
		position: absolute;
		top: calc(100% + 0.9rem);
		left: 50%;
		z-index: 5;
		display: grid;
		justify-items: center;
		min-width: 13.5rem;
		padding: 1.15rem 1.8rem 1.25rem;
		border: 1px solid var(--line);
		background: var(--paper);
		box-shadow: 0 1.4rem 2.6rem -1.8rem rgba(var(--shade), 0.4);
		color: var(--ink);
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 0.4rem);
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
	}

	/* Petit pont invisible : le sous-menu ne se referme pas entre l'entrée et la liste. */
	.site-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 1.4rem;
	}

	.site-nav__list .sub-menu::after {
		content: "";
		position: absolute;
		top: -1px;
		left: 50%;
		width: 2.6rem;
		height: 1px;
		background: var(--accent);
		transform: translateX(-50%);
	}

	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.site-nav__list .sub-menu li + li::before {
		content: "";
		display: block;
		width: 1.1rem;
		height: 1px;
		margin: 0.45rem auto;
		background: var(--ochre-soft);
	}

	.site-nav__list .sub-menu a {
		font-size: 0.82rem;
		letter-spacing: 0.18em;
		white-space: nowrap;
	}

	.site-nav__list .sub-menu a:hover,
	.site-header--over:not(.is-scrolled) .sub-menu a:hover {
		color: var(--accent);
	}
}

.nav-toggle {
	display: none;
}

/* Menu mobile sous 90rem : le nom et les 7 entrées (dont « Sons & images ») demandent ~1400px. */
@media (max-width: 90rem) {
	.nav-toggle {
		position: relative;
		z-index: 31;
		display: inline-flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.5rem 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		font-size: 0.95rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.nav-toggle__icon,
	.nav-toggle__icon::before {
		display: block;
		width: 1.7rem;
		height: 1px;
		background: currentColor;
		transition: transform 0.35s var(--ease);
	}

	.nav-toggle__icon {
		position: relative;
		transform: translateY(-4px);
	}

	.nav-toggle__icon::before {
		content: "";
		position: absolute;
		top: 8px;
	}

	.nav-open .nav-toggle {
		color: var(--ink);
	}

	.nav-open .nav-toggle__icon {
		transform: rotate(45deg);
	}

	.nav-open .nav-toggle__icon::before {
		top: 0;
		transform: rotate(-90deg);
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 30;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 3rem;
		padding: var(--header-h) var(--gutter) 3rem;
		background: var(--paper);
		color: var(--ink);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease), visibility 0.35s;
	}

	.nav-open {
		overflow: hidden;
	}

	.nav-open .site-nav {
		opacity: 1;
		visibility: visible;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0.6rem;
	}

	.site-nav__list a {
		border: 0;
		font-family: var(--font-display);
		font-size: clamp(2rem, 8vw, 2.8rem);
		letter-spacing: 0.02em;
		text-transform: none;
	}

	.site-header--over .site-nav a:hover {
		color: var(--accent);
	}

	/* Sous-pages en retrait, plus petites, sous leur entrée. */
	.site-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	.site-nav__list .sub-menu {
		display: grid;
		gap: 0.1rem;
		margin: 0.1rem 0 0.3rem;
		padding-left: 1.3rem;
		border-left: 1px solid var(--ochre-soft);
	}

	.site-nav__list .sub-menu a {
		font-size: clamp(1.45rem, 5.6vw, 1.9rem);
		color: var(--ink-soft);
	}

	/* Dix entrées sur un petit écran : la liste défile plutôt que de déborder. */
	.site-nav {
		justify-content: safe center;
		overflow-y: auto;
	}
}

/* Téléphones : le nom et le bouton du menu doivent tenir sur une ligne. */
@media (max-width: 30rem) {
	.site-header {
		gap: 1rem;
	}

	.brand {
		gap: 0.6rem;
	}

	.brand__logo,
	.site-header.is-scrolled .brand__logo {
		width: 3.2rem;
	}

	.brand__name {
		font-size: 0.78rem;
		letter-spacing: 0.08em;
	}

	.nav-toggle {
		gap: 0.6rem;
		font-size: 0.85rem;
		letter-spacing: 0.14em;
	}
}

@media (max-width: 23rem) {
	.brand__name {
		display: none;
	}
}

/* Accueil : photo plein écran
   ------------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: rgb(var(--shade));
	color: #fff;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 35%;
	animation: hero-in 1.8s var(--ease) both;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(var(--shade), 0.78) 0%, rgba(var(--shade), 0.42) 38%, rgba(var(--shade), 0) 66%),
		linear-gradient(180deg, rgba(var(--shade), 0.45) 0%, rgba(var(--shade), 0) 22%),
		linear-gradient(0deg, rgba(176, 118, 54, 0.1), rgba(176, 118, 54, 0.1));
}

.hero__content {
	position: relative;
	max-width: 64rem;
	padding: 0 var(--gutter) clamp(3.5rem, 13vh, 8rem);
	animation: rise 1.2s 0.35s var(--ease) both;
}

.hero__name {
	margin: 0 0 1.3rem;
	font-family: var(--font-name);
	font-size: clamp(2.3rem, 6.2vw, 5.4rem);
	line-height: 1.04;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	animation: tracking-in 1.5s var(--ease) 0.2s both;
}

/* Le nom se resserre en apparaissant. */
@keyframes tracking-in {
	from {
		opacity: 0;
		filter: blur(6px);
		letter-spacing: 0.3em;
	}
	to {
		opacity: 1;
		filter: none;
		letter-spacing: 0.03em;
	}
}

/* Marges du haut et du bas seulement : la marge gauche appartient à .dot-list. */
.hero__roles {
	margin-top: 0;
	margin-bottom: 2.8rem;
	font-size: clamp(0.8rem, 1.25vw, 1.2rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.92;
}

/* Une seule ligne sur grand écran, en FR comme en EN : la taille suit la largeur de l'écran. */
@media (min-width: 48.01rem) {
	.hero__roles {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

/* Sur téléphone : deux rôles par ligne, plutôt qu'une coupure au hasard. */
@media (max-width: 48rem) {
	.hero__roles {
		font-size: 0.85rem;
		letter-spacing: 0.16em;
	}

	.hero__roles::after {
		content: "";
		flex-basis: 100%;
		order: 2;
	}

	.hero__roles > span:nth-child(-n + 2) {
		order: 1;
	}

	.hero__roles > span:nth-child(n + 3) {
		order: 3;
	}
}

.hero__credit {
	position: absolute;
	right: var(--gutter);
	bottom: 1.1rem;
	z-index: 1;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

.hero--plain {
	min-height: 70vh;
	background: var(--sand);
	color: var(--ink);
}

/* Fine ligne qui invite à faire défiler la page. */
.hero__scroll {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 4.5rem;
	overflow: hidden;
}

.hero__scroll::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
	animation: scroll-cue 2.8s var(--ease) 1.8s infinite both;
}

@keyframes scroll-cue {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	45% {
		transform: scaleY(1);
		transform-origin: top;
	}
	55% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* Sur téléphone : ligne plus courte, et le bouton remonte un peu pour lui laisser la place. */
@media (max-width: 48rem) {
	.hero__scroll {
		height: 3rem;
	}

	.hero__content {
		padding-bottom: max(4.75rem, 12vh);
	}
}

@media (max-width: 48rem) {
	.hero__media::after {
		background:
			linear-gradient(0deg, rgba(var(--shade), 0.88) 0%, rgba(var(--shade), 0.4) 45%, rgba(var(--shade), 0) 70%),
			linear-gradient(180deg, rgba(var(--shade), 0.5) 0%, rgba(var(--shade), 0) 25%),
			linear-gradient(0deg, rgba(176, 118, 54, 0.1), rgba(176, 118, 54, 0.1));
	}

	/* Crédit photo : en bas à droite comme sur ordinateur, hors du visage, plus petit. */
	.hero__credit {
		bottom: 0.9rem;
		font-size: 0.7rem;
	}
}

@keyframes hero-in {
	from {
		opacity: 0;
		transform: scale(1.04);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Accueil : texte de présentation et sections
   ------------------------------------------------------------------------- */

.home-intro {
	padding: clamp(5rem, 12vw, 9rem) var(--gutter);
	text-align: center;
}

.home-intro__text {
	max-width: 42rem;
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
	line-height: 1.6;
}

/* Lignes de longueurs voisines plutôt qu'un mot seul en bout de paragraphe (texte centré). */
.home-intro__text p {
	margin: 0 0 1em;
	text-wrap: balance;
}

.home-intro__text .line {
	display: block;
	text-wrap: balance;
}

.nowrap {
	white-space: nowrap;
}

.home-intro__text p:last-child {
	margin-bottom: 0;
}

.home-intro__sign {
	width: clamp(7.5rem, 5rem + 6vw, 10rem);
	margin: 0 auto 3.25rem;
}

/* Bandeau de fin de page : l'appel principal du site. */
.cta-band {
	padding: clamp(4.5rem, 10vw, 7.5rem) var(--gutter);
	border-top: 1px solid var(--line);
	background: radial-gradient(120% 130% at 50% 100%, var(--sand) 0%, var(--paper) 72%);
	text-align: center;
}

.cta-band__text {
	max-width: 40rem;
	margin: 0 auto 2.4rem;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1.3;
	text-wrap: balance;
}

.cta-band__text span {
	white-space: nowrap;
}

.section {
	padding: clamp(4rem, 9vw, 7rem) var(--gutter);
	border-top: 1px solid var(--line);
}

.section--listen {
	border-top: 0;
	background: var(--sand);
}

.section__inner {
	max-width: var(--wide);
	margin: 0 auto;
}

.section__title {
	margin: 0 0 2.6rem;
	font-size: clamp(2rem, 4vw, 3rem);
}

.section__more {
	margin: 2.8rem 0 0;
}

/* Agenda
   ------------------------------------------------------------------------- */

.dates {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.date {
	display: grid;
	grid-template-areas: "when body aside";
	grid-template-columns: 15rem minmax(0, 1fr) auto;
	gap: 1rem 2.5rem;
	align-items: center;
	padding: 1.7rem 0;
	border-bottom: 1px solid var(--line);
}

.date__body {
	grid-area: body;
}

.date__when {
	display: grid;
	grid-area: when;
	grid-template-areas:
		"day weekday"
		"day month";
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-items: center;
	line-height: 1.2;
}

.date__day {
	grid-area: day;
	min-width: 2.2ch;
	font-family: var(--font-display);
	font-size: 3.1rem;
	line-height: 1;
}

.date__weekday {
	grid-area: weekday;
	align-self: end;
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.date__month {
	grid-area: month;
	align-self: start;
	white-space: nowrap;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.date__title {
	margin: 0;
	font-size: 1.65rem;
	line-height: 1.25;
}

.date__title a {
	text-decoration: none;
}

/* Marges du haut et du bas seulement : la marge gauche appartient à .dot-list. */
.date__place {
	margin-top: 0.3rem;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 1.15rem;
	letter-spacing: 0.03em;
}

/* Mention au-dessus du lien : la colonne reste étroite et laisse la place au lieu. */
.date__aside {
	display: flex;
	flex-direction: column;
	grid-area: aside;
	align-items: flex-end;
	justify-self: end;
	gap: 0.7rem;
	text-align: right;
}

.date__note {
	color: var(--accent);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.date__link {
	padding-bottom: 0.15rem;
	border-bottom: 1px solid currentColor;
	font-size: 0.9rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.dates--past .date {
	padding: 1.1rem 0;
	opacity: 0.7;
}

.dates--past .date__day {
	font-size: 2.2rem;
}

.dates--past .date__title {
	font-size: 1.35rem;
}

/* Tablette : la mention et le lien passent sous le titre. */
@media (max-width: 64rem) {
	.date {
		grid-template-areas:
			"when body"
			". aside";
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 0.9rem 2rem;
	}

	.date__aside {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-self: start;
		gap: 0.8rem 1.6rem;
		text-align: left;
	}
}

@media (max-width: 48rem) {
	.date {
		grid-template-areas:
			"when"
			"body"
			"aside";
		grid-template-columns: 1fr;
		gap: 0.7rem;
	}
}

.agenda {
	max-width: var(--wide);
	margin: 0 auto;
}

/* Dates passées : une ligne par année, qui se déplie. */
.past-dates {
	margin-top: clamp(4rem, 8vw, 6rem);
}

.past-dates__title {
	margin: 0 0 1.6rem;
	font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

/* Années couvertes : suivent le filtre. */
.past-dates__span {
	margin-left: 0.5em;
	color: var(--muted);
	font-size: 0.6em;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Le script cache les dates et les années qui ne correspondent pas au filtre. */
.past-dates [hidden],
.upcoming-dates [hidden],
.tracklist[hidden] {
	display: none;
}

/* Filtre des dates à venir : au-dessus de la liste. */
.date-filter {
	margin-bottom: 2rem;
}

/* Compteur : grands chiffres fins, libellés en petites capitales. */
.past-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem clamp(2rem, 5vw, 4rem);
	margin: 0 0 2.4rem;
}

.past-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.past-stats__num {
	font-family: var(--font-display);
	font-size: clamp(2.3rem, 4.6vw, 3.1rem);
	line-height: 1;
}

.past-stats__label {
	color: var(--muted);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Filtre par projet : une ligne de mots, le projet choisi souligné en magenta. */
.past-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.8rem;
	margin: 0 0 1.4rem;
}

.past-filter__button {
	padding: 0.3rem 0 0.2rem;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.9rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.past-filter__button:hover {
	color: var(--accent);
}

.past-filter__button[aria-pressed="true"] {
	border-bottom-color: currentColor;
	color: var(--accent);
}

.past-filter__count {
	margin-left: 0.1em;
	color: var(--muted);
	font-size: 1.05em;
	letter-spacing: 0.06em;
}

.past-filter__button[aria-pressed="true"] .past-filter__count,
.past-filter__button:hover .past-filter__count {
	color: inherit;
}

.past-years {
	border-bottom: 1px solid var(--line);
}

.past-year {
	border-top: 1px solid var(--line);
}

/* Année, nombre de dates, projets de l'année, puis le « + ». */
.past-year summary {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 1.4rem;
	padding: 1rem 0;
	list-style: none;
	cursor: pointer;
	transition: color 0.3s var(--ease);
}

.past-year__groups {
	color: var(--ink-soft);
	font-size: 1.05rem;
	letter-spacing: 0.03em;
}

.past-year summary:hover .past-year__groups {
	color: inherit;
}

.is-filtered .past-year__groups {
	visibility: hidden;
}

@media (max-width: 40rem) {
	.past-year summary {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: 0.2rem;
	}

	.past-year__groups {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.is-filtered .past-year__groups {
		display: none;
	}
}

.past-year summary:hover {
	color: var(--accent);
}

.past-year summary::-webkit-details-marker {
	display: none;
}

.past-year__year {
	font-family: var(--font-display);
	font-size: 1.7rem;
}

.past-year__count {
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.past-year summary::after {
	content: "+";
	justify-self: end;
	font-size: 1.4rem;
	line-height: 1;
}

.past-year[open] summary::after {
	content: "–";
}

.past-year .dates {
	margin-bottom: 1.6rem;
}

.lang-switch abbr {
	text-decoration: none;
}

/* Extraits à écouter
   ------------------------------------------------------------------------- */

.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: 3rem 2.5rem;
}

.media-item {
	margin: 0;
}

/* Une vidéo seule ne s'étale pas sur toute la largeur : la page reste compacte. */
.media-grid > .media-item:only-child {
	max-width: 42rem;
}

.media-item__player iframe {
	display: block;
	width: 100%;
	border: 0;
}

.media-item__player.is-wide {
	aspect-ratio: 16 / 9;
	background: rgb(var(--shade));
}

.media-item__player.is-wide iframe {
	height: 100%;
}

.media-item__title {
	margin-top: 1rem;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
}

.cw-media-link {
	font-family: var(--font-display);
	font-size: 1.5rem;
}

.listen-group {
	max-width: var(--wide);
	margin: 0 auto;
}

.listen-group + .listen-group {
	margin-top: 5rem;
}

.listen-group__title {
	margin: 0 0 2.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	font-size: 2rem;
}

.listen-group__title a {
	text-decoration: none;
}

/* Vidéo envoyée sur le site (MP4) : lecteur du navigateur, au format des autres vidéos. */
.media-item__player .cw-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: rgb(var(--shade));
}

.section--watch {
	border-top: 0;
}

.section--listen + .section--watch {
	padding-top: clamp(4rem, 8vw, 6rem);
}

/* Deux liens côte à côte : « Tout écouter », « Tout voir ». */
.section__more--pair {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
}

/* Lecteur audio : listes de morceaux
   ------------------------------------------------------------------------- */

.tracklist {
	margin: 0 0 2.5rem;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.track__play {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: baseline;
	width: 100%;
	padding: 0.85rem 0.4rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.2rem;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.track__play:hover {
	background: rgba(255, 255, 255, 0.55);
	color: var(--accent);
}

.track__num {
	color: var(--muted);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.track__name {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	align-items: baseline;
	-webkit-text-stroke: var(--label-stroke) currentColor;
}

.track__artist {
	color: var(--muted);
	font-size: 1rem;
}

.track__time {
	color: var(--muted);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

/* Morceau en cours : numéro remplacé par trois barres qui dansent. */
.track__play[aria-current] {
	color: var(--accent);
}

.track__play[aria-current] .track__num {
	position: relative;
	color: transparent;
}

.track__play[aria-current] .track__num::before {
	content: "";
	position: absolute;
	bottom: 0.25em;
	left: 0;
	width: 1.1rem;
	height: 0.9rem;
	background: linear-gradient(currentColor, currentColor) 0 100% / 2px 60% no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 2px 40% no-repeat;
	color: var(--accent);
}

.is-playing .track__play[aria-current] .track__num::before {
	animation: eq 0.9s ease-in-out infinite alternate;
}

@keyframes eq {
	0% { background-size: 2px 30%, 2px 90%, 2px 55%; }
	50% { background-size: 2px 85%, 2px 40%, 2px 100%; }
	100% { background-size: 2px 55%, 2px 100%, 2px 25%; }
}

.listen-actions {
	max-width: var(--wide);
	margin: 0 auto 3.5rem;
}

.play-all {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	cursor: pointer;
}

.play-all__icon {
	width: 0.7rem;
	height: 0.8rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Pochette cliquable : un fin cercle « lecture » apparaît au survol. */
.cover-play {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(var(--shade), 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0.85;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.cover-play::before {
	content: "";
	width: 0.85rem;
	height: 1rem;
	margin-left: 0.2rem;
	background: #fff;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.is-playable:hover .cover-play,
.is-playable:focus-visible .cover-play {
	background: var(--accent);
	opacity: 1;
	transform: scale(1.06);
}

/* Discographie (bas de la page Bio) : pochettes en grille, références dessous.
   ------------------------------------------------------------------------- */

.section--discography {
	border-top: 1px solid var(--line);
	background: var(--sand);
}

.discography {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.6rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.discography {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.2rem 2rem;
	}
}

@media (min-width: 72rem) {
	.discography {
		gap: 3.6rem 2.8rem;
	}
}

.disc__cover {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--sand-deep);
	box-shadow: 0 1.4rem 2.2rem -1.6rem rgba(var(--shade), 0.55);
	color: inherit;
	cursor: default;
	aspect-ratio: 1;
}

a.disc__cover,
.disc__cover.is-playable {
	cursor: pointer;
}

.disc__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

a.disc__cover:hover img,
.disc__cover.is-playable:hover img {
	transform: scale(1.04);
}

.disc__caption {
	display: grid;
	gap: 0.15rem;
	margin: 1.1rem 0 0;
	font-size: 1.12rem;
	line-height: 1.4;
	text-align: center;
}

.disc__name {
	-webkit-text-stroke: var(--label-stroke) currentColor;
}

.disc__title {
	font-family: var(--font-display);
	font-size: 1.2em;
	font-style: normal;
}

.disc__meta {
	color: var(--muted);
	font-size: 0.95rem;
}

@media (max-width: 30rem) {
	.disc__caption {
		font-size: 1rem;
	}

	.cover-play {
		right: 0.6rem;
		bottom: 0.6rem;
		width: 2.6rem;
		height: 2.6rem;
	}
}

/* Cartes d'écoute : pochette, titre, grand bouton « Écouter », puis les morceaux.
   Sur fond clair, avec une ombre douce ; la carte en cours de lecture s'éclaire d'un filet magenta. */
.albums {
	display: grid;
	gap: clamp(1.8rem, 4vw, 2.6rem);
}

.listen-card {
	position: relative;
	display: grid;
	gap: 1.6rem;
	padding: clamp(1.2rem, 3vw, 2.2rem);
	border: 1px solid var(--line);
	background: linear-gradient(135deg, #fff 0%, var(--paper) 55%, var(--sand) 100%);
	box-shadow: 0 1.6rem 3rem -2.6rem rgba(var(--shade), 0.45);
	transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.listen-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width 0.8s var(--ease);
}

.listen-card.is-current {
	border-color: var(--ochre-soft);
	box-shadow: 0 2rem 3.4rem -2.4rem rgba(170, 1, 104, 0.35);
}

.listen-card.is-current::before {
	width: calc(100% + 2px);
}

.section--listen .listen-card {
	background: linear-gradient(135deg, #fff 0%, var(--paper) 100%);
}

.listen-card__cover {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--sand-deep);
	box-shadow: 0 1.4rem 2.2rem -1.6rem rgba(var(--shade), 0.55);
	aspect-ratio: 1;
	cursor: pointer;
}

.listen-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.listen-card__cover:hover img {
	transform: scale(1.04);
}

.listen-card__kicker {
	margin: 0 0 0.3rem;
	color: var(--muted);
	font-size: 0.9rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	-webkit-text-stroke: var(--label-stroke) currentColor;
}

.listen-card__title {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 3.8vw, 2.8rem);
	line-height: 1.1;
}

.listen-card__title a {
	text-decoration: none;
}

.listen-card__meta {
	margin: 0 0 1.4rem;
	color: var(--ink-soft);
	font-size: 1.1rem;
}

.listen-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.4rem;
	margin: 0 0 1.6rem;
}

/* Le grand bouton : disque magenta et mot « Écouter » en capitales espacées. */
.listen-card__play {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0 1.4rem 0 0;
	border: 0;
	border-radius: 2rem;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 0.95rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
}

.listen-card__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0.8rem 1.6rem -0.8rem rgba(170, 1, 104, 0.7);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.listen-card__icon::before {
	content: "";
	width: 0.95rem;
	height: 1.1rem;
	margin-left: 0.25rem;
	background: #fff;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* En lecture, le bouton devient « pause » (deux barres). */
.listen-card.is-current.is-playing .listen-card__icon::before {
	width: 0.85rem;
	margin-left: 0;
	clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.listen-card__play:hover .listen-card__icon,
.listen-card__play:focus-visible .listen-card__icon {
	transform: scale(1.07);
	box-shadow: 0 1rem 2rem -0.8rem rgba(170, 1, 104, 0.85);
}

.listen-card__play:hover {
	color: var(--accent);
}

.listen-card__summary {
	color: var(--muted);
	font-size: 1rem;
}

/* Égaliseur : cinq fines barres qui dansent pendant la lecture de la carte. */
.listen-card__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 1.2rem;
	margin-left: auto;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.listen-card__eq i {
	width: 2px;
	height: 30%;
	background: var(--accent);
}

.listen-card.is-current .listen-card__eq {
	opacity: 1;
}

.listen-card.is-current.is-playing .listen-card__eq i {
	animation: bar 1s ease-in-out infinite alternate;
}

.listen-card__eq i:nth-child(2) { animation-delay: -0.3s !important; }
.listen-card__eq i:nth-child(3) { animation-delay: -0.6s !important; }
.listen-card__eq i:nth-child(4) { animation-delay: -0.15s !important; }
.listen-card__eq i:nth-child(5) { animation-delay: -0.45s !important; }

@keyframes bar {
	0% { height: 20%; }
	50% { height: 100%; }
	100% { height: 45%; }
}

.listen-card .tracklist {
	margin: 0;
}

.listen-card + .media-grid {
	margin-top: 3rem;
}

@media (min-width: 52rem) {
	.listen-card {
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.4rem);
		align-items: start;
	}

	.listen-card__body {
		padding-top: 0.4rem;
	}
}

/* Page « Média » : écouter, puis voir. */
.media-jump {
	display: flex;
	gap: 2.4rem;
	max-width: var(--wide);
	margin: 0 auto 4rem;
}

.media-jump a {
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--ochre-soft);
	font-size: 0.95rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
}

.media-part {
	max-width: var(--wide);
	margin: 0 auto;
}

.media-part + .media-part {
	margin-top: clamp(5rem, 10vw, 8rem);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid var(--line);
}

.media-part__title {
	margin: 0 0 2.4rem;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
}

/* Barre de lecture : fixée en bas de l'écran pendant l'écoute.
   ------------------------------------------------------------------------- */

.player {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 25;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"cover info controls close"
		"progress progress progress progress";
	gap: 0.4rem 1rem;
	align-items: center;
	padding: 0.7rem var(--gutter) 0.6rem;
	border-top: 1px solid var(--ochre-soft);
	background: rgba(252, 249, 244, 0.96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 -1rem 2rem -1.6rem rgba(var(--shade), 0.4);
	transform: translateY(0);
	transition: transform 0.4s var(--ease);
}

.player[hidden] {
	display: none;
}

/* La page garde de la place pour la barre : le pied de page reste lisible. */
.has-player .site-footer {
	padding-bottom: 8.5rem;
}

.player__cover {
	grid-area: cover;
	width: 3.4rem;
	height: 3.4rem;
	object-fit: cover;
	background: var(--sand-deep);
}

.player__info {
	grid-area: info;
	min-width: 0;
}

.player__title,
.player__artist {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.player__title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.3;
	-webkit-text-stroke: var(--display-stroke) currentColor;
}

.player__artist {
	color: var(--muted);
	font-size: 0.95rem;
}

.player__controls {
	grid-area: controls;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.player__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ink);
	cursor: pointer;
	transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.player__button:hover {
	color: var(--accent);
}

.player__button svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.player__toggle {
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid currentColor;
}

.player__toggle svg {
	width: 1.35rem;
	height: 1.35rem;
}

.player__icon-pause,
.player.is-playing .player__icon-play {
	display: none;
}

.player.is-playing .player__icon-pause {
	display: inline;
}

.player__close {
	grid-area: close;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--muted);
}

.player__progress {
	grid-area: progress;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: center;
	color: var(--muted);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* Curseur de position : fine ligne magenta, comme les autres accents du site. */
.player__seek {
	width: 100%;
	height: 1.5rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	--fill: 0%;
}

.player__seek::-webkit-slider-runnable-track {
	height: 2px;
	background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--fill) 100% no-repeat, var(--line);
}

.player__seek::-moz-range-track {
	height: 2px;
	background: var(--line);
}

.player__seek::-moz-range-progress {
	height: 2px;
	background: var(--accent);
}

.player__seek::-webkit-slider-thumb {
	width: 0.8rem;
	height: 0.8rem;
	margin-top: calc(1px - 0.4rem);
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	-webkit-appearance: none;
	appearance: none;
}

.player__seek::-moz-range-thumb {
	width: 0.8rem;
	height: 0.8rem;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
}

/* Téléphone : place au titre du morceau ; on change de morceau dans la liste (l'enchaînement reste automatique). */
@media (max-width: 29.99rem) {
	.player {
		gap: 0.3rem 0.7rem;
	}

	.player__cover {
		width: 2.8rem;
		height: 2.8rem;
	}

	.player__prev,
	.player__next {
		display: none;
	}
}

@media (min-width: 48rem) {
	.player {
		grid-template-columns: auto minmax(10rem, 16rem) auto minmax(0, 1fr) auto;
		grid-template-areas: "cover info controls progress close";
		gap: 1.4rem;
		padding-block: 0.8rem;
	}

	.has-player .site-footer {
		padding-bottom: 7rem;
	}
}

/* Dates listées dans une page (sessions de La Palette, blocs Real Time Music). */
.entry-content .dates--inline {
	max-width: none;
	margin: 1.8rem 0 2.6rem;
	padding: 0;
	list-style: none;
}

.entry-content .dates--inline .date {
	margin: 0;
}

.dates-none {
	color: var(--ink-soft);
	font-style: italic;
}

/* Encarts : colonnes de l'éditeur avec la classe « encarts » (Avancé > Classe CSS).
   Chacune devient une carte claire, filet ocre en tête.
   ------------------------------------------------------------------------- */

.entry .entry-content > .wp-block-columns.encarts {
	max-width: none;
	gap: 1.4rem;
	margin: 2.8rem 0 3.4rem;
}

.wp-block-columns.encarts > .wp-block-column {
	padding: 1.8rem 1.8rem 1.9rem;
	border-top: 2px solid var(--ochre);
	background: var(--sand);
}

.wp-block-columns.encarts h3 {
	margin: 0 0 0.9rem;
	font-size: 1.65rem;
}

.wp-block-columns.encarts p {
	margin: 0 0 0.8rem;
	font-size: 1.15rem;
	line-height: 1.6;
}

.wp-block-columns.encarts p:last-child {
	margin-bottom: 0;
}

.encart-price {
	font-family: var(--font-display);
	font-size: 1.6rem !important;
	line-height: 1.3 !important;
	-webkit-text-stroke: var(--display-stroke) currentColor;
}

/* La Palette : une page qui éclate en couleurs
   Bandeau sombre éclaboussé de peinture (comme l'affiche de la saison), puis des touches de
   couleur sur les encarts, les titres et le bouton d'inscription.
   ------------------------------------------------------------------------- */

.page-banner {
	position: relative;
	isolation: isolate;
	margin: calc(-1 * clamp(3.5rem, 8vw, 6rem)) calc(-1 * var(--gutter)) clamp(3rem, 6vw, 4.5rem);
	padding: clamp(6rem, 15vw, 11rem) var(--gutter) clamp(3.5rem, 8vw, 5.5rem);
	overflow: hidden;
	background: #17110d;
	color: #fff;
}

.page-banner__paint {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 60%;
}

/* Voile sombre côté titre : le texte reste lisible sur la peinture. */
.page-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(23, 17, 13, 0.88) 0%, rgba(23, 17, 13, 0.55) 38%, rgba(23, 17, 13, 0) 72%);
}

.page-banner .page-header {
	margin-bottom: 0;
}

.page-banner .page-title {
	font-size: clamp(3.2rem, 9vw, 6.4rem);
	text-shadow: 0 0.2rem 1.6rem rgba(0, 0, 0, 0.45);
}

.page-banner .page-lede {
	color: rgba(255, 255, 255, 0.88);
}

.page-banner .page-header::after,
.page--paint .entry-content h2::after {
	width: 6rem;
	height: 3px;
	background: linear-gradient(90deg, #e8463e 0 20%, #f2a23a 20% 40%, #f0d77a 40% 60%, #33b1d4 60% 80%, var(--accent) 80%);
}

.page--paint .entry-content h2::after {
	content: "";
	display: block;
	width: 4rem;
	height: 2px;
	margin-top: 0.8rem;
}

.page--paint .wp-block-columns.encarts > .wp-block-column {
	position: relative;
	border-top-width: 3px;
	background: #fff;
	box-shadow: 0 1.2rem 2.4rem -2rem rgba(var(--shade), 0.35);
}

.page--paint .wp-block-columns.encarts > .wp-block-column:nth-child(3n + 1) {
	border-top-color: #e8463e;
}

.page--paint .wp-block-columns.encarts > .wp-block-column:nth-child(3n + 2) {
	border-top-color: #33b1d4;
}

.page--paint .wp-block-columns.encarts > .wp-block-column:nth-child(3n + 3) {
	border-top-color: #f2a23a;
}

/* Une goutte de couleur en coin de chaque encart. */
.page--paint .wp-block-columns.encarts > .wp-block-column::after {
	content: "";
	position: absolute;
	top: -0.55rem;
	right: 1.4rem;
	width: 0.7rem;
	height: 0.95rem;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: var(--accent);
}

.page--paint .wp-block-columns.encarts > .wp-block-column:nth-child(3n + 2)::after {
	background: #f0d77a;
}

.page--paint .wp-block-columns.encarts > .wp-block-column:nth-child(3n + 3)::after {
	background: #33b1d4;
}

.page--paint .entry-content .wp-block-gallery img {
	box-shadow: 0 1.2rem 2.4rem -1.8rem rgba(var(--shade), 0.6);
}

/* Bandeau photo (case « bandeau » de la page, ex. Soundpainting)
   La photo sort de l'ombre à droite, le titre se pose dans le noir à gauche. Elle glisse un peu
   moins vite que la page (main.js) : elle déborde donc de 12 % vers le haut.
   ------------------------------------------------------------------------- */

.page-banner--photo {
	--banner-bg: #100804;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(26rem, 44vw, 38rem);
	padding-top: clamp(4rem, 10vw, 6rem);
	background: var(--banner-bg);
}

.page-banner__photo {
	position: absolute;
	top: -12%;
	right: 0;
	z-index: -2;
	width: 100%;
	height: 112%;
	object-fit: cover;
	object-position: 62% 30%;
	filter: var(--photo-warmth);
	will-change: transform;
}

/* Voile du bas : le titre reste lisible sur la photo (téléphone). */
.page-banner--photo::after {
	background: linear-gradient(0deg, rgba(16, 8, 4, 0.92) 0%, rgba(16, 8, 4, 0.6) 30%, rgba(16, 8, 4, 0) 62%);
}

.page-banner--photo .page-header {
	width: 100%;
}

.page-banner--photo .page-title {
	font-size: clamp(2.9rem, 7vw, 5.4rem);
}

.page-banner__credit {
	position: absolute;
	right: var(--gutter);
	bottom: 0.9rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
	.page-banner__photo {
		width: min(68%, 66rem);
		object-position: 50% 24%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
		mask-image: linear-gradient(90deg, transparent 0, #000 32%);
	}

	.page-banner--photo::after {
		background: linear-gradient(90deg, rgba(16, 8, 4, 0.75) 0%, rgba(16, 8, 4, 0.45) 32%, rgba(16, 8, 4, 0) 56%);
	}
}

/* Pages intérieures
   ------------------------------------------------------------------------- */

.entry {
	container-type: inline-size;
	padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}

/*
 * Toutes les pages partagent le même cadre (largeur --wide) : titre, accroche et texte
 * partent du même bord gauche, quelle que soit la page. Le texte garde une largeur
 * de lecture (--content) ; photos, galeries et listes occupent tout le cadre.
 */
.page-header {
	max-width: var(--wide);
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.page-header {
	animation: rise 0.9s var(--ease) both;
}

.page-header::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin-top: 1.7rem;
	background: var(--accent);
}

.page-title {
	margin: 0;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.1;
}

/* Accroche : l'extrait de la page (ex. sous-titre d'un projet). */
.page-lede {
	max-width: 36rem;
	margin: 1rem 0 0;
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.45;
}

.page-cover {
	max-width: var(--wide);
	margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.page-cover img {
	width: 100%;
	max-height: 72vh;
	object-fit: cover;
}

/* Agenda, Écouter, Voir, Média : la photo devient un bandeau panoramique,
   le contenu (dates, lecteurs) reste haut dans la page. */
.entry--agenda .page-cover img,
.entry--listen .page-cover img {
	aspect-ratio: 2 / 1;
	max-height: 28rem;
	object-position: var(--cover-focus, 50% 20%);
}

@media (max-width: 40rem) {
	.entry--agenda .page-cover img,
	.entry--listen .page-cover img {
		aspect-ratio: 3 / 2;
	}
}

.image-credit {
	margin-top: 0.6rem;
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-align: right;
}

.entry + .section {
	padding-top: 0;
	border-top: 0;
}

/* Bande de couleur (Discographie, À écouter) juste sous le texte : elle garde son souffle en haut. */
.entry + .section--discography,
.entry + .section--listen {
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.entry--agenda .entry-content,
.entry--projects .entry-content,
.entry--listen .entry-content {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Contenu rédigé dans l'éditeur
   ------------------------------------------------------------------------- */

.entry-content {
	max-width: var(--content);
	margin: 0 auto;
}

.entry .entry-content {
	max-width: var(--wide);
}

.entry .entry-content > * {
	max-width: var(--content);
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.4rem;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content h2 {
	margin: 3.6rem 0 1.2rem;
	font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.entry-content h3 {
	margin: 2.6rem 0 1rem;
	font-size: 1.6rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3rem;
}

.entry-content li::marker {
	color: var(--accent);
}

.entry-content blockquote {
	margin: 2.6rem 0;
	padding: 0 0 0 1.8rem;
	border-left: 1px solid var(--accent);
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.5;
}

.entry-content figure {
	margin-top: 2.6rem;
	margin-bottom: 2.6rem;
}

.entry-content figcaption,
.wp-element-caption {
	margin-top: 0.6rem;
	color: var(--muted);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

/* Largeurs mesurées sur .entry (100cqw), et non sur 100vw qui inclut la barre de défilement. */
.entry .entry-content > .alignwide {
	width: 100%;
	max-width: none;
}

.entry .entry-content > .alignfull {
	width: calc(100cqw + 2 * var(--gutter));
	max-width: none;
	margin-left: calc((min(var(--wide), 100cqw) - 100cqw) / 2 - var(--gutter));
}

.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img {
	width: 100%;
}

/* Logo (classe « cw-logo » du bloc Image) : taille d'un logo, pas d'une photo. */
.entry-content .wp-block-image.cw-logo img {
	width: auto;
	max-width: min(100%, 28rem);
}

/* Les galeries débordent du texte pour donner de la place aux photos. */
.entry .entry-content > .wp-block-gallery {
	width: 100%;
	max-width: none;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	gap: 1rem;
}

.entry-content .wp-block-gallery img {
	transition: opacity 0.4s var(--ease);
}

.entry-content .wp-block-gallery img:hover {
	opacity: 0.88;
}

.wp-block-separator {
	width: 4rem;
	margin: 3.5rem auto;
	border: 0;
	border-top: 1px solid var(--line);
}

.wp-block-columns {
	gap: 2.5rem;
}

.wp-block-buttons {
	gap: 1rem;
}

.wp-block-embed iframe {
	width: 100%;
}

.wp-block-file a:not(.wp-block-file__button) {
	font-family: var(--font-display);
	font-size: 1.4rem;
}

.wp-block-file__button {
	margin-left: 1rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Projets
   ------------------------------------------------------------------------- */

/* Une ligne par projet : grande photo d'un côté, texte de l'autre, en alternance. */
.project-list {
	display: grid;
	gap: clamp(4.5rem, 10vw, 8rem);
	max-width: var(--wide);
	margin: 0 auto;
	counter-reset: project;
}

.project-row {
	display: grid;
	gap: 1.8rem;
	align-items: center;
}

.project-row__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sand);
}

.project-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease), filter 0.9s var(--ease);
}

.project-row__media:hover img {
	filter: var(--photo-warmth) brightness(1.04);
	transform: scale(1.03);
}

/* Le fin trait magenta au-dessus du titre (sans numéro : l'ordre des projets n'a pas de sens). */
.project-row__rule {
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: 0 0 1.4rem;
	background: var(--accent);
	opacity: 0.6;
}

.project-row__title {
	margin: 0 0 0.9rem;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1.08;
}

.project-row__title a {
	text-decoration: none;
}

.project-row__excerpt {
	max-width: 26rem;
	margin: 0 0 1.6rem;
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	line-height: 1.45;
}

.project-row__next {
	display: grid;
	gap: 0.15rem;
	margin: 0 0 1.8rem;
	padding-left: 1rem;
	border-left: 1px solid var(--ochre);
	font-size: 1.1rem;
	-webkit-text-stroke: var(--label-stroke) currentColor;
}

.project-row__label {
	color: var(--muted);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.project-row .link-arrow:hover {
	color: var(--accent);
}

@media (min-width: 52rem) {
	.project-row {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 6vw, 5.5rem);
	}

	.project-row--flip .project-row__media {
		order: 2;
	}

	/* La photo déborde légèrement vers le bord de l'écran, le texte reste dans le cadre. */
	.project-row__media {
		aspect-ratio: 4 / 3;
	}
}

/* Photos : voile ocre commun (les logos et images de l'éditeur aussi, la cohérence prime). */
.hero__media img,
.page-cover img,
.project-row__media img,
.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img,
.entry-content .wp-block-media-text img,
.wp-lightbox-overlay img {
	filter: var(--photo-warmth);
}

/* Bouton d'agrandissement des images : plus facile à toucher que les 20 px d'origine. */
.wp-lightbox-container button.lightbox-trigger {
	width: 2.25rem;
	height: 2.25rem;
}


/* Pied de page
   ------------------------------------------------------------------------- */

.site-footer {
	padding: 4rem var(--gutter) 2rem;
	border-top: 1px solid var(--ochre-soft);
	background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 3rem;
	max-width: var(--wide);
	margin: 0 auto;
}

.brand--footer .brand__logo {
	width: 3.8rem;
}

.footer-nav {
	flex-wrap: wrap;
	gap: 0.6rem 1.8rem;
}

.footer-nav a {
	font-size: 0.9rem;
}

/* Téléphone : même disposition en FR et en EN.
   Nom et langue sur une ligne, liens réunis sur la ligne suivante. */
@media (max-width: 48rem) {
	.site-footer__inner {
		display: grid;
		grid-template-areas:
			"brand lang"
			"nav nav";
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 1.8rem 1rem;
	}

	.brand--footer {
		grid-area: brand;
	}

	.site-footer__inner .lang-switch {
		grid-area: lang;
		justify-self: end;
	}

	/* Un lien par ligne : même disposition en FR et en EN, quelle que soit la longueur des libellés. */
	.footer-nav {
		grid-area: nav;
		flex-direction: column;
		gap: 0.35rem;
	}

	.footer-nav a {
		font-size: 0.88rem;
		letter-spacing: 0.12em;
		white-space: nowrap;
	}
}

.footer-nav a:hover {
	border-bottom-color: currentColor;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: var(--wide);
	margin: 3rem auto 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ochre-soft);
}

.site-footer__legal {
	margin: 0;
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
}

/* Réseaux sociaux et liens d'une page : simples liens, dans le style du menu. */
.social-links,
.page-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Zone cliquable d'au moins 24 px de haut (WCAG 2.2, taille de cible). */
.social-links a,
.page-links a {
	display: inline-block;
	padding: 0.3rem 0;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.social-links a:hover,
.page-links a:hover {
	border-bottom-color: currentColor;
}

.page-links {
	max-width: var(--wide);
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.page-links > * {
	max-width: var(--content);
}

.page-links__title {
	margin: 0 0 0.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Pages de texte : texte et colonne de droite (image, encadré, sous-pages, liens)
   Sur téléphone, l'image passe au-dessus du texte et le reste en dessous.
   ------------------------------------------------------------------------- */

.entry-split {
	display: flex;
	flex-direction: column;
	max-width: var(--wide);
	margin: 0 auto;
}

.entry-split > .entry-content {
	width: 100%;
	margin: 0;
}

.entry-split__side {
	display: contents;
}

.entry-split__media {
	order: -1;
	margin-bottom: 2.6rem;
}

.entry-split__aside {
	display: grid;
	gap: 2.4rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 64rem) {
	.entry-split {
		display: grid;
		grid-template-columns: minmax(0, var(--content)) minmax(15rem, 1fr);
		column-gap: clamp(3rem, 7vw, 6.5rem);
		align-items: start;
	}

	.entry-split--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(3rem, 5vw, 4.5rem);
	}

	.entry-split__side {
		display: grid;
		gap: 2.6rem;
		padding-top: 0.45rem;
	}

	.entry-split__media {
		order: 0;
		margin: 0;
	}

	.entry-split__aside {
		margin: 0;
	}
}

.aside-media {
	margin: 0;
}

.aside-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 84% 35%;
	filter: var(--photo-warmth);
}

@media (max-width: 63.99rem) {
	.aside-media img {
		aspect-ratio: 3 / 2;
	}
}

.aside-box {
	padding: 1.6rem 1.7rem 1.7rem;
	border-top: 1px solid var(--ochre);
	background: var(--sand);
}

.aside-box__title {
	margin: 0 0 0.9rem;
	font-size: 1.5rem;
}

.aside-box__text {
	font-size: 1.12rem;
	line-height: 1.6;
}

.aside-box__text p {
	margin: 0 0 0.8rem;
}

.aside-box__text > :last-child {
	margin-bottom: 0;
}

.aside-box__text ul {
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
}

.aside-box__text li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line);
}

.aside-box__text li:last-child {
	border-bottom: 0;
}

/* QR code : net, sans voile, sur fond blanc. */
.aside-box__text img {
	display: block;
	width: 9rem;
	height: auto;
	margin: 0.6rem 0 0.4rem;
	padding: 0.5rem;
	background: #fff;
	image-rendering: pixelated;
}

/* Le remplissage agrandit la zone cliquable sans décaler les lignes. */
.aside-box__text a {
	padding-block: 0.25rem;
	text-decoration-color: var(--ochre);
}

.entry-split .page-links {
	margin: 0;
}

/* Sous le texte, en pleine largeur : sous-pages et second encadré.
   ------------------------------------------------------------------------- */

.entry-below {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	max-width: var(--wide);
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.page-children {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 52rem) {
	.page-children {
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	}
}

/* Une invitation : la photo de la sous-page à gauche, son titre et son accroche à droite. */
.child-card {
	display: grid;
	grid-template-columns: minmax(7rem, 2fr) 3fr;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.35);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.child-card:hover {
	border-color: var(--ochre-soft);
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1.2rem 2.4rem -2rem rgba(var(--shade), 0.4);
	color: inherit;
}

.child-card__media {
	position: relative;
	overflow: hidden;
}

.child-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-warmth);
	transition: transform 0.9s var(--ease);
}

.child-card:hover .child-card__media img {
	transform: scale(1.04);
}

/* La Palette : un filet aux couleurs de son bandeau. */
.child-card--paint .child-card__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, #e8463e 0 20%, #f2a23a 20% 40%, #f0d77a 40% 60%, #33b1d4 60% 80%, var(--accent) 80%);
}

.child-card__body {
	display: grid;
	align-content: center;
	gap: 0.45rem;
	min-height: 11.5rem;
	padding: 1.5rem 1.7rem;
}

.child-card__title {
	font-family: var(--font-display);
	font-size: 1.85rem;
	line-height: 1.2;
}

.child-card__text {
	color: var(--ink-soft);
	font-size: 1.1rem;
	line-height: 1.5;
}

.child-card .link-arrow {
	margin-top: 0.4rem;
}

.child-card:hover .link-arrow {
	color: var(--accent);
}

@media (max-width: 29.99rem) {
	.child-card {
		grid-template-columns: 7.5rem minmax(0, 1fr);
	}

	.child-card__body {
		min-height: 10rem;
		padding: 1.1rem 1.2rem;
	}

	.child-card__title {
		font-size: 1.5rem;
	}

	.child-card__text {
		font-size: 1.02rem;
	}
}

/* Second encadré en bande : le texte et les liens à gauche, l'image (QR code) à droite. */
.entry-below .aside-box {
	padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 3rem);
}

.entry-below .aside-box__title {
	font-size: clamp(1.6rem, 3vw, 2rem);
}

.entry-below .aside-box__text {
	max-width: var(--content);
}

.entry-below .aside-box__text ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.6rem;
	margin-bottom: 1rem;
}

.entry-below .aside-box__text li {
	padding: 0;
	border: 0;
	font-size: 1.2rem;
}

@media (min-width: 40rem) {
	/* La 4e rangée, souple, absorbe la hauteur du QR code : le texte reste groupé en haut. */
	.entry-below .aside-box:has(.aside-box__text img) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(2rem, 5vw, 4rem);
	}

	.entry-below .aside-box:has(.aside-box__text img) .aside-box__text {
		display: contents;
	}

	.entry-below .aside-box__title,
	.entry-below .aside-box__text > * {
		grid-column: 1;
	}

	.entry-below .aside-box__text > p:has(> img) {
		grid-row: 1 / span 4;
		grid-column: 2;
		margin: 0;
	}

	.entry-below .aside-box__text > p:has(> img) + p {
		grid-row: 5;
		grid-column: 2;
		max-width: 10rem;
		margin: 0;
		color: var(--ink-soft);
		font-size: 1rem;
		line-height: 1.4;
	}

	.entry-below .aside-box__text img {
		width: 8rem;
		margin: 0;
	}
}

/* Lecteurs soumis au consentement (RGPD)
   Tant que le visiteur n'a pas accepté, un emplacement façon lecteur vidéo tient la place ;
   un clic sur la lecture lance l'extrait.
   ------------------------------------------------------------------------- */

/* Même format pour l'audio et la vidéo : la grille d'extraits reste alignée. */
.cw-embed--video,
.cw-embed--audio {
	aspect-ratio: 16 / 9;
}

.cw-embed__play {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: 1.5rem;
	border: 0;
	background:
		radial-gradient(120% 90% at 50% 40%, rgba(176, 118, 54, 0.22) 0%, rgba(var(--shade), 0) 70%),
		rgb(var(--shade));
	color: var(--paper);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: color 0.3s var(--ease);
}

.cw-embed__play:hover,
.cw-embed__play:focus-visible {
	color: #fff;
}

/* Vidéo avec image d'attente : la vignette, voilée d'ocre et assombrie, sous le bouton. */
.cw-embed.has-poster .cw-embed__play {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-shadow: 0 0.1rem 0.8rem rgba(0, 0, 0, 0.55);
}

.cw-embed__poster {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-warmth);
	transition: transform 1.1s var(--ease);
}

.cw-embed.has-poster .cw-embed__play::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--shade), 0.15) 0%, rgba(var(--shade), 0.55) 100%);
	transition: background-color 0.4s var(--ease);
}

.cw-embed.has-poster .cw-embed__play:hover .cw-embed__poster {
	transform: scale(1.035);
}

.cw-embed__play:hover .cw-embed__icon,
.cw-embed__play:focus-visible .cw-embed__icon {
	border-color: var(--accent);
	background: var(--accent);
}

/* Visiteur ayant accepté : l'emplacement s'efface le temps que le lecteur arrive. */
.embeds-ok .cw-embed:not(.is-loaded) .cw-embed__play {
	visibility: hidden;
}

.cw-embed__icon {
	position: relative;
	width: 4rem;
	height: 4rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform 0.5s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.cw-embed__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0.95rem;
	height: 1.1rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translate(-50%, -50%);
}

.cw-embed__play:hover .cw-embed__icon {
	transform: scale(1.08);
}

.cw-embed__label {
	font-family: var(--font-display);
	font-size: 1.35rem;
	line-height: 1.3;
}

.cw-embed__note {
	opacity: 0.7;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cw-embed.is-loaded iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

/* Bandeau de consentement : petite carte, « Refuser » et « Accepter » à égalité. */
.cw-consent {
	position: fixed;
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 50;
	display: grid;
	gap: 1rem;
	max-width: 24rem;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--ochre-soft);
	background: rgba(252, 249, 244, 0.97);
	box-shadow: 0 18px 50px -20px rgba(var(--shade), 0.35);
	color: var(--ink);
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.cw-consent.is-open {
	opacity: 1;
	transform: none;
}

.cw-consent[hidden] {
	display: none;
}

.cw-consent__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

.cw-consent__text a {
	white-space: nowrap;
}

.cw-consent__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}

.cw-consent__button {
	padding: 0.7rem 1rem;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cw-consent__button:hover,
.cw-consent__button:focus-visible {
	background: var(--ink);
	color: var(--paper);
}

@media (max-width: 30rem) {
	.cw-consent {
		right: 0.75rem;
		bottom: 0.75rem;
		left: 0.75rem;
		max-width: none;
	}
}

/* « Gérer les cookies », discret, à côté du copyright. */
.cookie-manage {
	margin-left: 1.2rem;
	padding: 0.3rem 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.cookie-manage:hover,
.cookie-manage:focus-visible {
	border-bottom-color: currentColor;
	color: var(--ink);
}

/* Formulaires (contact, inscription à La Palette)
   ------------------------------------------------------------------------- */

.cw-form,
.cw-form-done {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.cw-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.8rem 2rem;
}

@media (min-width: 40rem) {
	.cw-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.cw-field--wide {
		grid-column: 1 / -1;
	}
}

.cw-field {
	display: grid;
	gap: 0.45rem;
}

.cw-field label {
	color: var(--ink-soft);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cw-field__required {
	color: var(--accent);
}

.cw-field__optional {
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: none;
}

.cw-field input,
.cw-field select,
.cw-field textarea {
	width: 100%;
	padding: 0.65rem 0.1rem;
	border: 0;
	border-bottom: 1px solid var(--ink-soft);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1.4;
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
	appearance: none;
}

.cw-field textarea {
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--ink-soft);
	resize: vertical;
}

.cw-field select {
	padding-right: 2rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2350463c' stroke-width='1'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 0.2rem center / 0.8rem;
	cursor: pointer;
}

.cw-field input:focus,
.cw-field select:focus,
.cw-field textarea:focus {
	border-color: var(--accent);
	outline: none;
	background-color: rgba(255, 255, 255, 0.45);
}

.cw-field [aria-invalid="true"] {
	border-color: var(--accent);
}

.cw-field__error {
	margin: 0;
	color: var(--accent);
	font-size: 0.95rem;
}

.cw-form__errors {
	margin-bottom: 2rem;
	padding: 1rem 1.3rem;
	border-left: 2px solid var(--accent);
	background: var(--sand);
}

.cw-form__errors p {
	margin: 0 0 0.4rem;
}

.cw-form__errors ul {
	margin: 0;
	padding-left: 1.1rem;
}

.cw-form__note {
	margin: 0 0 2rem;
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-size: 1.3rem;
}

.cw-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2rem;
	margin-top: 2.4rem;
}

.cw-form__footer .button {
	cursor: pointer;
}

.cw-form__legal {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

/* Champ piège pour les robots : invisible et hors du parcours clavier. */
.cw-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cw-form-done {
	padding: 2rem 0 0;
	border-top: 1px solid var(--ochre-soft);
}

.cw-form-done p:first-child {
	margin: 0 0 1.4rem;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.4;
}

/* Accessibilité
   ------------------------------------------------------------------------- */

:root {
	color-scheme: light;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Lien vers un autre site : fine flèche ↗, annoncée « nouvel onglet » aux lecteurs d'écran. */
a[target="_blank"]::after {
	content: "";
	content: "" / " (nouvel onglet)";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-left: 0.35em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3.5 1.5h5v5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3.5 1.5h5v5'/%3E%3C/svg%3E") no-repeat center / contain;
	vertical-align: 0.05em;
}

:lang(en) a[target="_blank"]::after {
	content: "";
	content: "" / " (opens in a new tab)";
}

/* Contraste renforcé demandé par le système : trait de Gruppo épaissi, gris foncés. */
@media (prefers-contrast: more) {
	:root {
		--muted: #4a4038;
		--ink-soft: #2e2722;
		--line: #b8a68c;
		--photo-warmth: none;
	}

	body {
		-webkit-text-stroke: 0.25px currentColor;
	}
}

@media print {
	.site-header,
	.nav-toggle,
	.cta-band,
	.site-footer {
		display: none;
	}

	.site-main {
		padding-top: 0;
	}

	.reveal,
	.logo-draw {
		opacity: 1 !important;
		transform: none !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

/* Mouvement
   Discret et toujours facultatif : sans JavaScript, ou si le visiteur demande
   moins d'animations, tout est simplement affiché.
   ------------------------------------------------------------------------- */

@keyframes strum {
	0% {
		transform: rotate(0);
	}
	16% {
		transform: rotate(-6deg);
	}
	34% {
		transform: rotate(4deg);
	}
	52% {
		transform: rotate(-2.5deg);
	}
	70% {
		transform: rotate(1.2deg);
	}
	100% {
		transform: rotate(0);
	}
}

/* La guitare se dessine de gauche à droite : un masque dégradé glisse sur le logo. */
.has-js .logo-draw {
	-webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}

.has-js .logo-draw.is-visible {
	animation: draw 1.8s var(--ease) 0.2s forwards;
}

@keyframes draw {
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/* Apparition des blocs au défilement. */
.has-js .reveal {
	opacity: 0;
	transform: translateY(1.2rem);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.has-js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Fondu entre les pages (navigateurs récents), l'en-tête restant en place. */
@view-transition {
	navigation: auto;
}

.site-header {
	view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.has-js .logo-draw {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.has-js .reveal {
		opacity: 1;
		transform: none;
	}
}