/*
 * EMPRIZE — mise en page et composants.
 * Aucune couleur ni police en dur : tout passe par assets/css/tokens.css.
 */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-x: hidden;
}

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

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

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-display);
	line-height: var(--lh-title);
	margin: 0 0 var(--space-3);
}

::selection {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--space-3);
	top: var(--space-3);
	z-index: 300;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	padding: var(--space-2) var(--space-3);
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* Structure ------------------------------------------------------------- */

.wrap {
	width: min(100%, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow {
	width: min(100%, var(--wrap-narrow));
	margin-inline: auto;
}

.section {
	padding: var(--space-7) var(--gutter);
	/* La navigation est fixe : les ancres s'arrêtent sous elle, pas dessous. */
	scroll-margin-top: 72px;
}

.section--alt {
	background: var(--c-bg-alt);
}

.section__label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--c-accent);
}

.section__title {
	font-size: var(--fs-h2);
	scroll-margin-top: 6rem;
}

/* Trait rouge court sous le titre : le séparateur de la maquette. */
.section__divider {
	width: var(--divider);
	height: 2px;
	margin: var(--space-4) 0;
	background: var(--c-accent);
	border: 0;
}

.section__text {
	max-width: var(--measure);
	color: var(--c-text-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

.section__subtitle {
	margin-top: var(--space-6);
	font-family: var(--font-accent);
	font-size: 1.5rem;
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.section__empty {
	color: var(--c-text-muted);
}

.section__more {
	margin-top: var(--space-5);
}

/* Navigation ------------------------------------------------------------- */

/*
 * Bandeau noir plein, dès le chargement : la lisibilité du titre et du menu ne
 * doit dépendre d'aucune photo. Une barre translucide devenait illisible sur
 * une image claire, et c'est le genre de réglage qu'on ne peut pas refaire à
 * chaque changement de photo.
 */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 72px;
	padding-inline: var(--gutter);
	background: var(--c-dark);
	border-bottom: 1px solid rgba(var(--rgb-primary), 0.2);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
	border-bottom-color: var(--c-accent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.site-title {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--c-accent);
	text-decoration: none;
}

.site-baseline {
	margin: 0.2rem 0 0;
	font-size: var(--fs-label);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.site-nav {
	margin-left: auto;
}

.site-nav ul {
	display: flex;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	color: var(--c-text);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: var(--weight-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
	transition: opacity var(--transition), color var(--transition);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	opacity: 1;
	color: var(--c-accent);
}

.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--c-text);
	padding: var(--space-2);
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	content: "";
}

.nav-toggle__bar::before {
	transform: translateY(-7px);
}

.nav-toggle__bar::after {
	transform: translateY(5px);
}

/* Menu plein écran sur mobile, comme la référence. */
.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(var(--rgb-dark), 0.97);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
}

.mobile-menu.is-open {
	display: flex;
}

.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

.mobile-menu a {
	font-family: var(--font-accent);
	font-size: 2.5rem;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text);
	text-decoration: none;
}

.mobile-menu a:hover {
	color: var(--c-accent);
}

.mobile-menu__close {
	position: fixed;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 201;
	min-width: 52px;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--c-text);
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
}

/* Héros ------------------------------------------------------------------ */

.hero {
	position: relative;
	overflow: hidden;
}

/*
 * Mode « photo entière » : l'image garde sa proportion d'origine, personne
 * n'est coupé, et le texte se pose dessous. C'est le réglage par défaut, parce
 * qu'un recadrage automatique ne sait pas où sont les visages.
 */
.hero--entier {
	display: block;
	padding-top: 72px;
	background: var(--c-bg);
}

.hero--entier .hero__bg {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	object-position: center;
}

.hero--entier .hero__overlay {
	display: none;
}

.hero--entier .hero__inner {
	max-width: none;
	padding: var(--space-5) var(--gutter) var(--space-6);
}

/* Mode « grand format » : l'image remplit le haut de l'écran et se recadre,
   le cadrage vertical étant réglé dans l'outil de personnalisation. */
.hero--plein {
	height: min(86vh, 780px);
	min-height: 520px;
	display: flex;
	align-items: flex-end;
}

.hero--plein .hero__bg {
	object-position: 50% var(--hero-position, 22%);
}

/* Renfort de lisibilité : le voile dégradé ne suffit pas sur une photo claire. */
.hero--plein .hero__inner {
	text-shadow: 0 2px 18px rgba(var(--rgb-dark), 0.85);
}

.hero--plein .hero__overlay {
	background: linear-gradient(
		to top,
		rgba(var(--rgb-dark), 0.96) 0%,
		rgba(var(--rgb-dark), 0.62) 45%,
		rgba(var(--rgb-dark), 0.15) 100%
	);
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans photo, un dégradé sombre tient lieu de fond : la page reste juste. */
.hero--noimage {
	background: radial-gradient(120% 80% at 50% 0%, var(--c-mid) 0%, var(--c-dark) 70%);
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(var(--rgb-dark), 0.95) 0%,
		rgba(var(--rgb-dark), 0.4) 50%,
		transparent 100%
	);
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding: 0 var(--gutter) var(--space-6);
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	font-size: 0.75rem;
	font-weight: var(--weight-ui);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--c-accent);
}

/* Le trait rouge qui précède le surtitre. */
.hero__eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--c-accent);
}

.hero__title {
	margin: 0;
	font-size: var(--fs-hero);
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: var(--c-text);
}

.hero__title span {
	color: var(--c-accent);
}

.hero__tagline {
	margin-top: var(--space-4);
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(1rem, 2.5vw, 1.4rem);
	color: var(--c-text-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.hero__next {
	margin-top: var(--space-4);
	font-size: var(--fs-small);
	letter-spacing: 0.06em;
	color: var(--c-text-faint);
}

.hero__next strong {
	color: var(--c-text);
	font-weight: var(--weight-ui);
}

/* Boutons ---------------------------------------------------------------- */

.button {
	display: inline-block;
	padding: 0.85rem 2.2rem;
	background: transparent;
	color: var(--c-text);
	border: 1px solid rgba(var(--rgb-light), 0.3);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Bouton plein : aplat rouge, texte sombre, coin supérieur droit biseauté. */
.button--primary {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border: 0;
	font-weight: 700;
	clip-path: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%);
}

.button--primary:hover {
	color: var(--c-accent-contrast);
	transform: translateY(-2px);
	box-shadow: var(--glow);
}

.button--small {
	padding: 0.6rem 1.4rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	border-color: var(--c-border-hi);
	color: var(--c-accent);
}

.button--small:hover {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}

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

.gig-list {
	list-style: none;
	margin: var(--space-6) auto 0;
	padding: 0;
	max-width: var(--wrap-narrow);
}

.gig {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: var(--space-5);
	align-items: center;
	padding-block: var(--space-4);
	border-bottom: 1px solid rgba(var(--rgb-primary), 0.1);
}

.gig:first-child {
	border-top: 1px solid rgba(var(--rgb-primary), 0.1);
}

/* Bloc de date : le jour en gros, le mois en petites capitales. */
.gig__date {
	text-align: center;
}

.gig__day {
	display: block;
	font-family: var(--font-accent);
	font-weight: var(--weight-ui);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--c-accent);
}

.gig__month {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.gig__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: var(--weight-ui);
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--c-text);
}

.gig__place,
.gig__lineup,
.gig__details {
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--c-text-faint);
}

.gig__lineup {
	font-style: italic;
}

.gig-list--past .gig {
	opacity: 0.55;
	transition: opacity var(--transition);
}

.gig-list--past .gig:hover {
	opacity: 1;
}

/* Écoute ----------------------------------------------------------------- */

.track-list {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	counter-reset: track;
}

.track {
	position: relative;
	padding: var(--space-4);
	background: var(--c-surface);
	border: var(--border);
	transition: background var(--transition), border-color var(--transition);
}

.track:hover {
	background: rgba(var(--rgb-primary), 0.05);
	border-color: var(--c-border-hi);
}

.track__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

/* Numéro de piste, comme la setlist de la maquette. */
.track__head::before {
	counter-increment: track;
	content: counter(track, decimal-leading-zero);
	font-family: var(--font-accent);
	font-size: 0.9rem;
	color: var(--c-accent);
	opacity: 0.5;
}

.track__title {
	margin: 0;
	margin-right: auto;
	font-family: var(--font-accent);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.track__duration,
.track__theme {
	color: var(--c-text-faint);
	font-size: var(--fs-small);
}

.track__theme {
	margin: var(--space-1) 0 0 2rem;
	font-style: italic;
}

.track__audio {
	width: 100%;
	margin-top: var(--space-3);
	filter: invert(0.92) hue-rotate(180deg);  /* lecteur natif lisible sur fond noir */
}

.listen-embed {
	margin-top: var(--space-5);
}

.listen-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Vidéos ----------------------------------------------------------------- */

.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.video {
	margin: 0;
}

.video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--c-mid);
	overflow: hidden;
}

.video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__fallback {
	display: block;
	position: relative;
	height: 100%;
	text-decoration: none;
}

.video__fallback img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--img-filter-strong);
	transition: filter var(--transition), transform 500ms ease;
}

.video__fallback:hover img {
	filter: var(--img-filter-hover);
	transform: scale(1.04);
}

.video__fallback span {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--space-3);
	background: linear-gradient(to top, rgba(var(--rgb-dark), 0.85), transparent);
	font-size: var(--fs-small);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	color: var(--c-text);
}

.video__caption {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: 0.75rem;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--c-text-faint);
}

.video__caption strong {
	color: var(--c-text);
	font-weight: var(--weight-ui);
}

/* Membres ---------------------------------------------------------------- */

.member-grid {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-5);
}

.member {
	text-align: center;
}

.member__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: var(--space-3);
}

/* Voile sombre en bas de la photo, pour asseoir le nom. */
.member__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(var(--rgb-dark), 0.5), transparent 50%);
}

.member__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--img-filter-strong);
	transition: filter var(--transition);
}

.member:hover .member__media img {
	filter: var(--img-filter-hover);
}

.member__name {
	margin: 0;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
}

.member__nickname,
.member__role {
	margin: var(--space-1) 0 0;
	font-size: 0.75rem;
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-accent);
}

.member__city {
	margin: var(--space-1) 0 0;
	font-size: 0.75rem;
	color: var(--c-text-faint);
}

/* Galerie ---------------------------------------------------------------- */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-top: var(--space-6);
}

/* aspect-ratio plutôt qu'une hauteur fixe : le cadrage reste carré à toute
   largeur d'écran, quelle que soit la proportion d'origine de la photo. */
.gallery-item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin: 0;
}

.gallery-item--tall {
	grid-row: span 2;
	aspect-ratio: auto;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	filter: var(--img-filter);
	transition: transform 500ms ease, filter 500ms ease;
}

.gallery-item:hover img {
	transform: scale(1.08);
	filter: var(--img-filter-hover);
}

/* À propos --------------------------------------------------------------- */

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}

.about__media {
	position: relative;
	overflow: hidden;
}

.about__media img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--img-filter);
	transition: filter 600ms ease;
}

/* Recadrage en hauteur : seulement si la photo fournie est un vrai portrait. */
.about__media--portrait {
	aspect-ratio: 4 / 5;
}

.about__media--portrait img {
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.about__media:hover img {
	filter: var(--img-filter-hover);
}

/* Filet rouge posé sur la photo, et son décalage en arrière-plan. */
.about__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(var(--rgb-primary), 0.25);
	pointer-events: none;
}

.about__frame {
	position: absolute;
	bottom: -12px;
	right: -12px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(var(--rgb-primary), 0.12);
	z-index: -1;
}

.prose {
	max-width: var(--measure);
	color: var(--c-text-muted);
	line-height: 1.8;
}

.prose p {
	margin: 0 0 var(--space-3);
}

/* Presse et contact ------------------------------------------------------ */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: start;
	margin-top: var(--space-6);
}

.contact-info p {
	margin: 0 0 var(--space-3);
	color: var(--c-text-muted);
}

.contact-info a {
	color: var(--c-accent);
	text-decoration: none;
}

.contact-info a:hover {
	text-decoration: underline;
}

.contact-info__label {
	font-size: var(--fs-label);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.contact-social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-5);
	list-style: none;
	padding: 0;
}

.social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--space-3);
	border: 1px solid rgba(var(--rgb-primary), 0.3);
	color: var(--c-text);
	text-decoration: none;
	font-size: var(--fs-label);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.social-btn:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
	background: rgba(var(--rgb-primary), 0.08);
}

.press-kit {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Champs de formulaire : la mise en forme s'applique aussi aux formulaires
   produits par une extension (Contact Form 7, Forminator…). */
.contact-form,
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-form label,
.wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(var(--rgb-primary), 0.2);
	color: var(--c-text);
	padding: 0.8rem 1rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	outline: none;
	resize: vertical;
	color-scheme: dark;
	transition: border-color var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	border-color: var(--c-accent);
}

/* Contenus éditoriaux ---------------------------------------------------- */

.site-main {
	/* La navigation est fixe : on décale les pages intérieures. */
	padding-top: 0;
}

body:not(.home) .site-main {
	padding-top: 72px;
}

.entry {
	padding: var(--space-7) var(--gutter);
}

.page-header {
	padding: var(--space-7) var(--gutter) var(--space-4);
}

.page-header__title,
.entry__title {
	font-size: var(--fs-h2);
}

.entry__meta {
	font-size: var(--fs-label);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--c-accent);
}

.entry__place {
	color: var(--c-text-faint);
	letter-spacing: 0.08em;
}

.entry__media img,
.card__media img {
	width: 100%;
	filter: var(--img-filter);
}

.entry__content {
	max-width: var(--measure);
	color: var(--c-text-muted);
	line-height: 1.8;
}

.entry__content a {
	color: var(--c-accent);
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
	margin-block: var(--space-5);
}

.card {
	border: var(--border);
	padding: var(--space-4);
	transition: border-color var(--transition);
}

.card:hover {
	border-color: var(--c-border-hi);
}

.card__title {
	margin-top: var(--space-3);
	font-size: var(--fs-h3);
}

.card__title a {
	color: var(--c-text);
	text-decoration: none;
}

.card__excerpt {
	color: var(--c-text-faint);
	font-size: var(--fs-small);
}

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

.site-footer {
	background: var(--c-dark);
	border-top: 1px solid rgba(var(--rgb-primary), 0.1);
	padding: var(--space-6) var(--gutter) var(--space-4);
}

.site-footer__inner {
	width: min(100%, var(--wrap));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-5);
}

.site-footer h2 {
	font-size: 1.2rem;
	letter-spacing: 0.08em;
}

.site-footer p,
.site-footer li {
	color: var(--c-text-faint);
	font-size: var(--fs-small);
}

.site-footer a {
	color: var(--c-text-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--c-accent);
}

.site-footer__assoc {
	margin-top: var(--space-3);
	font-size: var(--fs-label);
}

.site-footer__social ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	font-size: var(--fs-label);
}

.site-footer__bottom {
	width: min(100%, var(--wrap));
	margin: var(--space-5) auto 0;
	padding-top: var(--space-3);
	border-top: 1px solid rgba(var(--rgb-primary), 0.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-label);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.site-footer__bottom ul {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Petits écrans ---------------------------------------------------------- */

@media (max-width: 980px) {
	.about-grid,
	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
}

@media (max-width: 860px) {
	.site-nav {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

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

	.gallery-item--tall {
		grid-row: span 1;
		aspect-ratio: 1 / 1;
	}

	.gig {
		grid-template-columns: 64px 1fr;
		gap: var(--space-4);
	}

	.gig__cta {
		grid-column: 2;
		justify-self: start;
	}
}

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

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

/* Emplacements photo ----------------------------------------------------- */

/* Cadre affiché tant qu'aucune image n'a été fournie : la mise en page se
   juge tout de suite, il suffira de déposer la photo. */
.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	padding: var(--space-3);
	background: repeating-linear-gradient(
		45deg,
		rgba(var(--rgb-primary), 0.04) 0 10px,
		transparent 10px 20px
	);
	border: 1px dashed rgba(var(--rgb-primary), 0.35);
	text-align: center;
}

.placeholder__label {
	font-size: var(--fs-label);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: rgba(var(--rgb-light), 0.55);
}

.member__media .placeholder,
.gallery-item .placeholder {
	position: absolute;
	inset: 0;
}

/* Boutique --------------------------------------------------------------- */

.merch-grid {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-4);
}

.merch {
	display: flex;
	flex-direction: column;
	border: var(--border);
	background: var(--c-surface);
	transition: border-color var(--transition), transform var(--transition);
}

.merch:hover {
	border-color: var(--c-border-hi);
	transform: translateY(-3px);
}

.merch__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.merch__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--img-filter);
	transition: transform 500ms ease, filter 500ms ease;
}

.merch:hover .merch__media img {
	transform: scale(1.05);
	filter: var(--img-filter-hover);
}

.merch__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-4);
}

.merch__title {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.merch__desc {
	margin: var(--space-2) 0 0;
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

.merch__variants {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-label);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

/* Le prix reste collé en bas de la carte, quelle que soit la longueur du
   descriptif : la grille garde une ligne de prix alignée. */
.merch__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: auto 0 0;
	padding-top: var(--space-3);
}

.merch__price {
	font-family: var(--font-accent);
	font-weight: var(--weight-ui);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--c-accent);
}

.merch__stock {
	font-size: var(--fs-label);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text-faint);
}

.merch__note {
	margin-top: var(--space-6);
	padding: var(--space-5);
	border-left: 3px solid var(--c-accent);
	background: rgba(var(--rgb-primary), 0.06);
}

.merch__note h3 {
	margin: 0 0 var(--space-3);
	font-size: 1.6rem;
}

.merch__note p {
	margin: 0;
	color: var(--c-text-muted);
}

.merch__ways {
	margin: var(--space-3) 0 0;
	padding-left: 1.2rem;
	display: grid;
	gap: var(--space-2);
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

.merch__ways::marker,
.merch__ways li::marker {
	color: var(--c-accent);
}

.merch__note .contact-social {
	margin-top: var(--space-4);
}

/* Bandeau sur petit écran ------------------------------------------------ */

/*
 * En dessous de 860 px, la photo de groupe est affichée en entier, dans sa
 * proportion d'origine, et le texte passe dessous sur fond noir. Un recadrage
 * en plein écran sur un téléphone coupait systématiquement des musiciens.
 */
@media (max-width: 860px) {
	.hero--plein {
		display: block;
		height: auto;
		min-height: 0;
		/* La navigation est fixe : on démarre la photo dessous, sinon elle
		   recouvre le haut du cadrage. */
		padding-top: 72px;
		background: var(--c-bg);
	}

	.hero--plein .hero__bg {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-position: 50% 30%;
	}

	.hero--noimage {
		padding-top: 96px;
	}

	/* Le voile ne couvre plus que le bas de la photo, pour la raccorder au fond. */
	.hero__overlay {
		inset: auto 0 0 0;
		height: 35%;
		background: linear-gradient(to top, var(--c-bg) 0%, rgba(var(--rgb-dark), 0) 100%);
	}

	.hero__inner {
		max-width: none;
		padding: var(--space-5) var(--gutter) var(--space-6);
		background: var(--c-bg);
	}

	.hero--entier .hero__bg {
		max-height: none;
	}

	.hero__title {
		margin-left: 0;
	}
}

/* Effet verre ------------------------------------------------------------ */

/*
 * « Liquid Glass » : une surface translucide qui floute et sature ce qu'il y a
 * dessous, avec un liseré clair sur l'arête haute pour simuler la réfraction.
 *
 * Volontairement réservé aux éléments posés SUR une image : sur un aplat noir,
 * un flou n'a rien à flouter et ne produirait qu'un gris terne. Et jamais sur
 * la navigation, qui doit rester lisible quelle que soit la photo.
 *
 * Se désactive entièrement depuis l'outil de personnalisation : la classe
 * emprize-verre n'est alors pas posée sur la page.
 */

.emprize-verre .verre {
	position: relative;
	background: var(--verre-fond);
	border: 1px solid var(--verre-bordure);
	box-shadow: var(--verre-ombre);
	backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-saturation));
	-webkit-backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-saturation));
}

/* L'arête haute qui accroche la lumière. */
.emprize-verre .verre::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--verre-eclat) 30%,
		var(--verre-eclat) 70%,
		transparent
	);
	pointer-events: none;
}

/* Navigateur sans backdrop-filter : on retombe sur un fond dense et lisible. */
@supports not (backdrop-filter: blur(1px)) {
	.emprize-verre .verre {
		background: var(--verre-fond-dense);
	}
}

/* Le système respecte le réglage d'accessibilité « réduire la transparence ». */
@media (prefers-reduced-transparency: reduce) {
	.emprize-verre .verre {
		background: var(--verre-fond-dense);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* 1. Le rappel de prochaine date, posé sur la photo du bandeau. */
.emprize-verre .hero__next {
	padding: var(--space-3) var(--space-4);
	border-left-width: 3px;
	border-left-color: var(--c-accent);
}

/* 2. Le menu plein écran, posé sur la page. */
.emprize-verre .mobile-menu {
	background: rgba(var(--rgb-dark), 0.72);
	backdrop-filter: blur(22px) saturate(var(--verre-saturation));
	-webkit-backdrop-filter: blur(22px) saturate(var(--verre-saturation));
}

/* 3. La légende qui apparaît sur un portrait au survol. */
.member__plaque {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-accent);
	font-size: var(--fs-small);
	letter-spacing: var(--tracking-ui);
	text-transform: uppercase;
	color: var(--c-text);
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--transition), transform var(--transition);
}

.emprize-verre .member:hover .member__plaque,
.emprize-verre .member:focus-within .member__plaque {
	opacity: 1;
	transform: translateY(0);
}

/* 4. Le prix, posé sur la photo de l'article. */
.merch__badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-accent);
	font-weight: var(--weight-ui);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--c-text);
}

/* 5. Le bandeau « Voir la vidéo » sur une vignette. */
.emprize-verre .video__fallback span {
	background: var(--verre-fond-dense);
	backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-saturation));
	-webkit-backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-saturation));
}

/* Sans l'effet, ces deux éléments restent lisibles sur un fond plein. */
.member__plaque,
.merch__badge {
	background: var(--verre-fond-dense);
}

.member__plaque {
	display: none;
}

.emprize-verre .member__plaque {
	display: block;
}

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