/* =========================================================================
   Braise & Noblesse - feuille de styles principale
   =========================================================================

   Sommaire
   1.  Polices
   2.  Variables
   3.  Reset et base
   4.  Typographie
   5.  Accessibilité
   6.  Intro logo
   7.  En-tête
   8.  Hero
   9.  Manifeste
   10. Fondatrice
   11. Déroulé
   12. Soirées : carrousel, cartes
   13. Popup et panneau menu
   14. Réservation et formulaire
   15. Pied de page
   16. Boutons
   17. Mouvement réduit
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Polices
   Auto-hébergées : aucune requête vers un CDN tiers. Variables, donc une
   seule requête par famille couvre toutes les graisses.
   ---------------------------------------------------------------------- */
/* Titres. Libre Baskerville, SIL Open Font License, libre d'usage web.
   Trois fichiers, une graisse chacun : cette famille n'est pas variable.
   Pour repasser sur ITC New Baskerville si la licence webfont est acquise,
   il suffit de remplacer les src ci-dessous. */
@font-face {
	font-family: 'Baskerville';
	src: url('../fonts/libre-baskerville-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Baskerville';
	src: url('../fonts/libre-baskerville-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Baskerville';
	src: url('../fonts/libre-baskerville-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* -------------------------------------------------------------------------
   2. Variables
   ---------------------------------------------------------------------- */
:root {
	/* Noir pur, demandé par la charte. Les sections ne pouvant plus se
	   distinguer par une nuance de fond, la séparation passe par des filets. */
	--bn-noir: #000000;
	--bn-noir-profond: #000000;
	--bn-blanc: #f4f1ec;
	--bn-blanc-pur: #ffffff;
	--bn-gris: #8a857d;
	--bn-braise: #c0562a;
	--bn-ligne: rgba(244, 241, 236, 0.14);
	--bn-filet: rgba(244, 241, 236, 0.09);

	/* Typographie */
	--bn-titre: 'Baskerville', 'Times New Roman', serif;
	--bn-titre-poids: 700;
	--bn-texte: 'Inter', system-ui, -apple-system, sans-serif;

	/* Échelle fluide. clamp évite les paliers de media queries sur les titres. */
	--bn-t-hero: clamp(3rem, 11vw, 10rem);
	--bn-t-section: clamp(2.5rem, 7vw, 6.5rem);
	--bn-t-grand: clamp(1.75rem, 3.5vw, 3rem);
	--bn-t-corps: clamp(1rem, 1.05vw, 1.125rem);
	--bn-t-petit: 0.8125rem;

	/* Rythme */
	--bn-marge: clamp(1.25rem, 5vw, 6rem);
	--bn-section: clamp(6rem, 14vh, 12rem);
	--bn-max: 1680px;
	--bn-lecture: 62ch;

	/* Mouvement */
	--bn-transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	--bn-rapide: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   3. Reset et base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	background: var(--bn-noir);
	/* Barres de défilement et éléments natifs du navigateur en version
	   sombre, plutôt que des barres claires en bordure d'une page noire. */
	color-scheme: dark;
}

/* Lenis pilote le défilement : le smooth scroll natif entrerait en conflit. */
html.lenis {
	scroll-behavior: auto !important;
}

html.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--bn-noir);
	color: var(--bn-blanc);
	font-family: var(--bn-texte);
	font-size: var(--bn-t-corps);
	font-weight: 340;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   4. Typographie
   ---------------------------------------------------------------------- */
h1, h2, h3 {
	font-family: var(--bn-titre);
	font-weight: var(--bn-titre-poids);
	line-height: 1.02;
	letter-spacing: -0.005em;
	margin: 0;
}

h3 {
	line-height: 1.2;
}

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

.bn-surtitre {
	font-family: var(--bn-texte);
	font-size: var(--bn-t-petit);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-lien {
	border-bottom: 1px solid var(--bn-ligne);
	padding-bottom: 2px;
	transition: border-color var(--bn-rapide);
}

.bn-lien:hover {
	border-color: var(--bn-blanc);
}

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

.bn-skip-link {
	position: absolute;
	top: -100px;
	left: var(--bn-marge);
	z-index: 999;
	background: var(--bn-blanc);
	color: var(--bn-noir);
	padding: 0.75rem 1.25rem;
	transition: top var(--bn-rapide);
}

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

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

/* -------------------------------------------------------------------------
   6. Intro logo
   La vidéo est opaque sur fond noir : mix-blend-mode: screen efface ce noir
   et ne laisse que le blanc du logo. Un WebM à canal alpha ne serait pas lu
   par Safari, d'où ce contournement.
   ---------------------------------------------------------------------- */
.bn-intro {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: var(--bn-noir-profond);
	transition: opacity 0.8s ease;
}

.bn-intro.is-sortie {
	opacity: 0;
	pointer-events: none;
}

.bn-intro__video {
	width: min(60vmin, 640px);
	height: auto;
	mix-blend-mode: screen;
}

.bn-intro__skip {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.7rem 1.6rem;
	border: 1px solid var(--bn-ligne);
	font-size: var(--bn-t-petit);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(244, 241, 236, 0.75);
	opacity: 0;
	transition: opacity var(--bn-transition), color var(--bn-rapide), border-color var(--bn-rapide);
}

/* Le bouton n'apparaît qu'après un court délai : proposer de passer une
   animation avant même qu'elle ait commencé n'a pas de sens. */
.bn-intro.is-passable .bn-intro__skip {
	opacity: 1;
}

.bn-intro__skip:hover {
	color: var(--bn-blanc);
	border-color: var(--bn-blanc);
}

/* -------------------------------------------------------------------------
   7. En-tête
   ---------------------------------------------------------------------- */
.bn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: clamp(1rem, 2.5vw, 2rem) var(--bn-marge);
	transition: transform var(--bn-transition), background-color var(--bn-transition);
	mix-blend-mode: difference;
}

/* Masqué au défilement vers le bas, révélé au retour vers le haut. */
.bn-header.is-cache {
	transform: translateY(-110%);
}

.bn-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--bn-max);
	margin: 0 auto;
}

.bn-header__logo svg {
	width: auto;
	height: clamp(28px, 3.5vw, 46px);
	fill: var(--bn-blanc-pur);
}

.bn-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.75rem);
}

.bn-header__liens {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Les liens de la liste et le bouton d'action doivent avoir exactement la
   même hauteur de boîte : les premiers vivent dans des <li> qui héritent de
   la hauteur de ligne du corps de page, le second est un enfant direct du
   conteneur flex et se dimensionne sur son seul contenu. Sans line-height
   fixe, l'écart atteignait plusieurs pixels et se voyait à l'œil. */
.bn-header__liens li {
	display: flex;
}

.bn-header__nav a {
	display: block;
	font-size: var(--bn-t-petit);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
	transition: border-color var(--bn-rapide);
}

.bn-header__nav a:hover {
	border-color: currentColor;
}

/* Le dernier lien est l'action attendue : il porte son soulignement en
   permanence pour se distinguer des liens de navigation. */
.bn-header__cta {
	border-bottom-color: currentColor !important;
}

/* Bouton de dépliage : masqué sur grand écran, où tout tient sur une ligne. */
.bn-header__plus {
	display: none;
	position: relative;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 50%;
	flex: 0 0 auto;
	transition: transform var(--bn-transition);
}

/* Le signe est fait de deux barres croisées : la rotation de 45 degrés
   suffit à le transformer en croix, sans changer un seul élément. */
.bn-header__plus-signe,
.bn-header__plus-signe::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.bn-header__plus-signe::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.bn-header__plus[aria-expanded="true"] {
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   Sous 700 px : les liens se replient derrière le bouton.

   « Réserver » reste toujours visible, c'est l'action principale et elle ne
   doit jamais demander un geste supplémentaire. Le panneau se déploie sous
   l'en-tête, aligné à droite sous le bouton qui l'ouvre.
   ---------------------------------------------------------------------- */
@media (max-width: 699px) {

	.bn-header__plus {
		display: block;
		order: 1;
	}

	.bn-header__cta {
		order: 2;
	}

	.bn-header__liens {
		position: absolute;
		top: calc(100% + 0.75rem);
		right: var(--bn-marge);
		flex-direction: column;
		align-items: flex-end;
		gap: 0.9rem;
		padding: 1.1rem 1.4rem;
		background: rgba(0, 0, 0, 0.92);
		border: 1px solid var(--bn-ligne);
		/* Le panneau se déplie sans occuper de place tant qu'il est fermé.
		   La transition porte sur l'opacité et un léger décalage, jamais sur
		   la hauteur, qui ne s'anime pas de façon fluide. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity var(--bn-rapide), transform var(--bn-rapide), visibility 0s var(--bn-rapide);
	}

	.bn-header__liens.is-ouvert {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--bn-rapide), transform var(--bn-rapide), visibility 0s 0s;
	}

	/* Le panneau sort du mode de fusion de l'en-tête : sur une photo claire,
	   difference rendrait son fond noir illisible. */
	.bn-header__liens {
		mix-blend-mode: normal;
	}
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */
.bn-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.bn-hero__media {
	position: absolute;
	inset: 0;
	/* Le poster est facultatif. Sans lui, ce fond tient la place le temps
	   que la vidéo se charge, au lieu de laisser un vide. */
	background: var(--bn-noir);
}

.bn-hero__video,
.bn-hero__fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile dégradé : garantit la lisibilité du titre quelle que soit l'image
   sous-jacente, sans assombrir uniformément la vidéo. */
.bn-hero__voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0) 35%),
		linear-gradient(to top, rgba(5, 5, 5, 0.75) 0%, rgba(5, 5, 5, 0) 55%);
}

.bn-hero__contenu {
	position: relative;
	text-align: center;
	padding: 0 var(--bn-marge);
}

.bn-hero__titre {
	font-size: var(--bn-t-hero);
	font-weight: var(--bn-titre-poids);
	text-wrap: balance;
}

.bn-hero__baseline {
	margin-top: clamp(1rem, 2vw, 2rem);
	font-size: clamp(0.875rem, 1.3vw, 1.0625rem);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(244, 241, 236, 0.82);
	text-wrap: balance;
}

.bn-hero__scroll {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.bn-hero__scroll-ligne {
	display: block;
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--bn-blanc));
	animation: bn-descend 2.4s ease-in-out infinite;
	transform-origin: top;
}

@keyframes bn-descend {
	0%   { transform: scaleY(0); opacity: 0; }
	40%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* -------------------------------------------------------------------------
   9. Manifeste
   ---------------------------------------------------------------------- */
.bn-manifeste {
	padding: var(--bn-section) var(--bn-marge);
	background: var(--bn-noir-profond);
	border-bottom: 1px solid var(--bn-filet);
}

.bn-manifeste__inner {
	max-width: var(--bn-max);
	margin: 0 auto;
	text-align: center;
}

.bn-manifeste__ligne {
	font-family: var(--bn-titre);
	font-size: var(--bn-t-grand);
	font-weight: var(--bn-titre-poids);
	line-height: 1.3;
	margin: 0 0 0.4em;
	text-wrap: balance;
}

.bn-manifeste__ligne:last-child {
	margin-bottom: 0;
}

/* État initial des blocs révélés au scroll. Le JS retire la classe. */
[data-bn-reveal] {
	opacity: 0;
	transform: translateY(2.5rem);
}

[data-bn-reveal].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   10. Fondatrice
   Photo en sticky, texte qui défile par-dessus. C'est le motif de
   SingleThread : l'image tient pendant que la lecture avance.
   ---------------------------------------------------------------------- */
.bn-fondatrice {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.bn-fondatrice__media {
	position: relative;
	height: 70svh;
	overflow: hidden;
}

.bn-fondatrice__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-fondatrice__texte {
	padding: var(--bn-section) var(--bn-marge);
	max-width: var(--bn-lecture);
	margin: 0 auto;
}

.bn-fondatrice__titre {
	font-size: var(--bn-t-section);
	margin-bottom: 0.6em;
}

@media (min-width: 900px) {
	.bn-fondatrice {
		grid-template-columns: 1fr 1fr;
	}

	.bn-fondatrice__media {
		position: sticky;
		top: 0;
		height: 100svh;
	}

	.bn-fondatrice__texte {
		padding: var(--bn-section) clamp(2rem, 5vw, 5rem);
		margin: 0;
	}
}

.bn-fondatrice__contenu p {
	color: rgba(244, 241, 236, 0.86);
}

.bn-fondatrice__contenu strong {
	font-weight: 500;
	color: var(--bn-blanc);
}

/* Premier paragraphe : c'est la promesse, elle doit se détacher du récit. */
.bn-fondatrice__contenu p:first-child {
	font-family: var(--bn-titre);
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.45;
	color: var(--bn-blanc);
	margin-bottom: 2rem;
}

.bn-fondatrice__contenu p:first-child strong {
	font-weight: inherit;
}

/* Litanie. Sémantiquement une liste, visuellement une suite de propositions :
   les puces rondes feraient basculer un texte littéraire du côté de
   l'argumentaire commercial. Le filet garde le rythme sans le registre. */
.bn-litanie {
	list-style: none;
	margin: 1.5rem 0 2rem;
	padding: 0;
}

.bn-litanie li {
	position: relative;
	padding-left: 2.75rem;
	margin-bottom: 0.55rem;
	font-family: var(--bn-titre);
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--bn-blanc);
}

.bn-litanie li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 1.75rem;
	height: 1px;
	background: var(--bn-braise);
}

/* -------------------------------------------------------------------------
   11. Déroulé
   Quatre temps, image plein cadre et texte en surimpression décalée.
   ---------------------------------------------------------------------- */
.bn-deroule {
	background: var(--bn-noir-profond);
}

/* Alternance : le texte se place à droite sur les temps impairs (Ateliers,
   Fromage), à gauche sur les pairs (Plat, Dessert). La section menu qui
   précède étant à gauche, la page alterne sans rupture d'un bloc à l'autre.

   Défilement : la photo se bloque le temps que le texte la traverse, comme
   sur la section fondatrice. Le bloc mesure plus d'une hauteur d'écran,
   c'est cette hauteur excédentaire qui donne sa durée à l'effet.
   ---------------------------------------------------------------------- */
.bn-temps {
	position: relative;
}

.bn-temps__media {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	z-index: 0;
}

/* L'image dépasse le cadre de 40 % en hauteur, répartis en haut et en bas.
   C'est la réserve dans laquelle le parallax se déplace : sans elle, la
   moindre translation ferait apparaître une bande vide.

   Le débordement sert aussi le cadrage : sur une photo verticale, un
   conteneur plus haut laisse voir davantage du sujet avant recadrage. */
.bn-temps__media img {
	position: absolute;
	top: -20%;
	left: 0;
	width: 100%;
	height: 140%;
	object-fit: cover;
	filter: brightness(0.72);
	will-change: transform;
}

/* Le dégradé appartient au média, pas à la section : sur un bloc de deux
   hauteurs d'écran, il se serait étiré sur toute la piste de défilement. */
.bn-temps__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}

.bn-temps:nth-child(odd) .bn-temps__media::after {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}

/* Le texte remonte sur la photo puis la traverse. La marge négative le
   superpose au média collé, la hauteur donne la course. */
.bn-temps__texte {
	position: relative;
	z-index: 1;
	margin-top: -100svh;
	min-height: 175svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--bn-section) var(--bn-marge);
	max-width: 66ch;
}

.bn-temps:nth-child(odd) .bn-temps__texte {
	margin-left: auto;
	text-align: right;
}

.bn-temps__index {
	display: block;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.3em;
	color: var(--bn-gris);
	margin-bottom: 1.5rem;
}

.bn-temps__titre {
	font-size: var(--bn-t-section);
}

/* Le chapô a besoin d'une mesure de lecture confortable, indépendante de
   la largeur du bloc : au-delà de 50 caractères, l'œil décroche en fin de
   ligne. Le titre, lui, occupe toute la largeur disponible. */
.bn-temps__chapo {
	margin-top: 1.5rem;
	max-width: 46ch;
	color: rgba(244, 241, 236, 0.82);
}

.bn-temps__chapo p {
	margin: 0 0 0.8em;
}

.bn-temps__chapo p:last-child {
	margin-bottom: 0;
}

.bn-temps:nth-child(odd) .bn-temps__chapo {
	margin-left: auto;
}

/* Variante 50/50 : photo et texte côte à côte, sans superposition
   ni blocage au défilement. */
@media (min-width: 900px) {

	.bn-deroule--split .bn-temps {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		min-height: 100svh;
	}

	.bn-deroule--split .bn-temps__media {
		position: relative;
		top: auto;
		height: 100%;
	}

	.bn-deroule--split .bn-temps__media img {
		position: relative;
		top: 0;
		height: 100%;
		filter: none;
		transform: none;
	}

	.bn-deroule--split .bn-temps__media::after {
		display: none;
	}

	.bn-deroule--split .bn-temps:nth-child(odd) .bn-temps__media {
		order: 2;
	}

	.bn-deroule--split .bn-temps__texte {
		margin-top: 0;
		min-height: 0;
		max-width: none;
		text-align: left;
		padding: var(--bn-section) clamp(2rem, 4vw, 4.5rem);
	}

	.bn-deroule--split .bn-temps:nth-child(odd) .bn-temps__texte {
		margin-left: 0;
		text-align: left;
	}
}

/* Sous 900 px, le texte repasse au centre et la course se raccourcit :
   une colonne alignée à droite sur écran étroit n'a plus de sens, et un
   blocage trop long devient pesant au doigt. */
@media (max-width: 899px) {

	.bn-temps__texte,
	.bn-temps:nth-child(odd) .bn-temps__texte {
		max-width: none;
		margin-left: 0;
		min-height: 135svh;
		text-align: center;
	}

	.bn-temps__chapo,
	.bn-temps:nth-child(odd) .bn-temps__chapo {
		margin-left: auto;
		margin-right: auto;
	}

	.bn-temps__media::after,
	.bn-temps:nth-child(odd) .bn-temps__media::after {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%);
	}
}


/* -------------------------------------------------------------------------
   11c. Dérive des images de fond

   Animation pilotée par le défilement, en CSS natif : aucune librairie,
   et le mouvement est calculé par le compositeur plutôt que par du script
   à chaque image.

   La timeline est déclarée sur la section, pas sur l'image : celle-ci vit
   dans un conteneur collé, elle reste donc visible tout au long du passage
   et sa propre progression ne mesurerait rien d'utile.

   Repli : sans prise en charge, l'image reste simplement fixe, et le JS
   prend le relais avec GSAP s'il est présent.
   ---------------------------------------------------------------------- */
/* L'image monte pendant qu'on descend, comme le reste du contenu, mais sur
   une amplitude bien plus faible que la course de la section : elle suit le
   défilement au lieu de le contrarier, en restant nettement plus lente. */
@keyframes bn-derive {
	from { transform: translateY(12%); }
	to   { transform: translateY(-12%); }
}

@supports (animation-timeline: view()) {

	.bn-temps,
	.bn-menu-intro {
		view-timeline-name: --bn-piste;
		view-timeline-axis: block;
	}

	.bn-temps__media img[data-bn-parallax],
	.bn-menu-intro__media img[data-bn-parallax] {
		animation: bn-derive linear both;
		animation-timeline: --bn-piste;
		animation-range: cover 0% cover 100%;
	}

	/* En variante 50/50, l'image ne déborde pas : pas de dérive possible. */
	.bn-deroule--split .bn-temps__media img[data-bn-parallax] {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bn-temps__media img[data-bn-parallax],
	.bn-menu-intro__media img[data-bn-parallax] {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   11b. Introduction au menu
   Grande photo et bloc texte décalé : c'est la page charnière entre le récit
   et le déroulé de la soirée.
   ---------------------------------------------------------------------- */
.bn-menu-intro {
	position: relative;
}

.bn-menu-intro__media {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	z-index: 0;
}

.bn-menu-intro__media img {
	position: absolute;
	top: -20%;
	left: 0;
	width: 100%;
	height: 140%;
	object-fit: cover;
	filter: brightness(0.72);
	will-change: transform;
}

/* Même principe que le déroulé : un dégradé local du côté du texte plutôt
   qu'un assombrissement uniforme, qui aplatissait toute la photo. */
.bn-menu-intro__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 70%);
}

.bn-menu-intro__texte {
	position: relative;
	z-index: 1;
	margin-top: -100svh;
	min-height: 165svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 60ch;
	padding: var(--bn-section) var(--bn-marge);
}

.bn-menu-intro__titre {
	font-size: var(--bn-t-section);
	margin-bottom: 1.5rem;
}

.bn-menu-intro__contenu {
	max-width: 46ch;
}

.bn-menu-intro__contenu p {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: rgba(244, 241, 236, 0.88);
}

.bn-menu-intro__action {
	margin: 2.5rem 0 0;
}

@media (max-width: 899px) {

	.bn-menu-intro__texte {
		max-width: none;
		min-height: 130svh;
		text-align: center;
	}

	.bn-menu-intro__contenu {
		max-width: none;
	}

	.bn-menu-intro__media::after {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%);
	}
}

/* -------------------------------------------------------------------------
   12. Soirées
   ---------------------------------------------------------------------- */
.bn-soirees {
	padding: var(--bn-section) 0;
}

.bn-soirees__entete {
	padding: 0 var(--bn-marge);
	max-width: var(--bn-max);
	margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
}

.bn-soirees__titre {
	font-size: var(--bn-t-section);
}

.bn-soirees__attente {
	padding: 0 var(--bn-marge);
	max-width: var(--bn-lecture);
	margin: 0 auto;
	text-align: center;
	color: var(--bn-gris);
}

/* Carrousel : défilement horizontal natif avec accroche. Pas de librairie,
   le comportement tactile est déjà celui attendu sur mobile. */
.bn-carrousel {
	position: relative;
}

.bn-carrousel__piste {
	display: flex;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0 var(--bn-marge);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* safe center : centre tant que les tuiles tiennent dans la largeur,
	   et repasse en alignement à gauche dès qu'elles débordent. Sans le
	   mot-clé safe, la première tuile deviendrait inatteignable au scroll. */
	justify-content: safe center;
}

.bn-carrousel__piste::-webkit-scrollbar {
	display: none;
}

.bn-carte {
	flex: 0 0 clamp(260px, 78vw, 380px);
	scroll-snap-align: center;
}

@media (min-width: 900px) {
	.bn-carte {
		flex-basis: 380px;
		scroll-snap-align: start;
	}
}

.bn-carte__declencheur {
	display: block;
	width: 100%;
	text-align: left;
}

.bn-carte__visuel {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #141414;
}

.bn-carte__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter var(--bn-transition);
}

/* Diaporama : les vues sont superposées, une seule visible à la fois.
   Le fondu passe par l'opacité, jamais par display, pour rester animable. */
.bn-carte__visuel--diapo .bn-carte__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bn-carte__visuel--diapo .bn-carte__image.is-active {
	opacity: 1;
}

/* Replis sans photo : logo du lieu, puis logo de la marque. */
.bn-carte__embleme {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 22%;
	background: linear-gradient(160deg, #161616 0%, #0c0c0c 100%);
}

.bn-carte__embleme img,
.bn-carte__embleme svg {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.bn-carte__embleme--marque svg {
	fill: var(--bn-blanc);
	opacity: 0.5;
}

.bn-carte__embleme--lieu img {
	opacity: 0.8;
}

.bn-carte__declencheur:hover .bn-carte__image {
	transform: scale(1.04);
}

.bn-carte.is-complet .bn-carte__image {
	filter: grayscale(1) brightness(0.7);
}

.bn-carte__pastille {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	background: var(--bn-blanc);
	color: var(--bn-noir);
}

.bn-carte__infos {
	display: block;
	padding-top: 1.25rem;
}

.bn-carte__date {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.bn-carte__jour {
	font-family: var(--bn-titre);
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1;
}

.bn-carte__mois {
	font-size: var(--bn-t-petit);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-carte__titre {
	display: block;
	font-family: var(--bn-titre);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.2;
}

.bn-carte__lieu {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--bn-gris);
}

/* Repère d'action. Toujours visible, y compris sur mobile où le survol
   n'existe pas : sans lui, la tuile pouvait se lire comme une simple fiche
   d'information et non comme une porte d'entrée. */
.bn-carte__action {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.6rem 1.4rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bn-blanc);
	border: 1px solid var(--bn-ligne);
	transition: background-color var(--bn-rapide), border-color var(--bn-rapide), color var(--bn-rapide);
}

/* Le survol de la tuile entière anime le repère : il montre que c'est bien
   tout le bloc qui est cliquable, pas seulement ce cadre. */
.bn-carte__declencheur:hover .bn-carte__action,
.bn-carte__declencheur:focus-visible .bn-carte__action {
	background: var(--bn-blanc);
	border-color: var(--bn-blanc);
	color: var(--bn-noir);
}

.bn-carrousel__nav {
	display: none;
	gap: 0.75rem;
	justify-content: flex-end;
	max-width: var(--bn-max);
	margin: 2rem auto 0;
	padding: 0 var(--bn-marge);
}

@media (min-width: 900px) {
	.bn-carrousel__nav {
		display: flex;
	}
}

.bn-carrousel__fleche {
	width: 52px;
	height: 52px;
	border: 1px solid var(--bn-ligne);
	border-radius: 50%;
	position: relative;
	transition: border-color var(--bn-rapide), background-color var(--bn-rapide);
}

.bn-carrousel__fleche::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 9px;
	height: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateX(2px) rotate(-135deg);
}

.bn-carrousel__fleche--suiv::after {
	transform: translateX(-2px) rotate(45deg);
}

.bn-carrousel__fleche:hover {
	border-color: var(--bn-blanc);
	background: rgba(244, 241, 236, 0.06);
}

.bn-carrousel__fleche[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   13. Popup et panneau menu
   ---------------------------------------------------------------------- */
.bn-popup {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	padding: clamp(0px, 4vw, 3rem);
}

.bn-popup[hidden] {
	display: none;
}

.bn-popup__fond {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	transition: opacity var(--bn-transition);
}

.bn-popup.is-ouverte .bn-popup__fond {
	opacity: 1;
}

.bn-popup__boite {
	position: relative;
	width: min(100%, 940px);
	max-height: 100%;
	background: var(--bn-noir);
	border: 1px solid rgba(244, 241, 236, 0.22);
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9);
	overflow: hidden;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity var(--bn-transition), transform var(--bn-transition);
}

.bn-popup.is-ouverte .bn-popup__boite {
	opacity: 1;
	transform: none;
}

.bn-popup__fermer {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	z-index: 3;
	font-size: 2rem;
	line-height: 1;
	color: var(--bn-gris);
	transition: color var(--bn-rapide);
}

.bn-popup__fermer:hover {
	color: var(--bn-blanc);
}

.bn-popup__corps {
	/* Le padding est repris par l'en-tête pour en sortir en pleine largeur :
	   il est donc déclaré une fois, ici, et repris par variable. */
	--bn-popup-pad: clamp(2rem, 4vw, 3.5rem);
	max-height: min(84svh, 800px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bn-popup-pad);
}

/* En-tête. Avec photo de couverture, il occupe toute la largeur de la boîte
   et sert de bandeau ; sans elle, il reste sur fond noir. */
.bn-popup__entete {
	position: relative;
}

.bn-popup__entete--photo {
	margin: calc(var(--bn-popup-pad) * -1) calc(var(--bn-popup-pad) * -1) 0;
	padding: clamp(2.5rem, 5vw, 4rem) var(--bn-popup-pad) clamp(2rem, 4vw, 3rem);
	overflow: hidden;
}

.bn-popup__entete-fond {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(3px);
	opacity: 0.5;
	/* Le flou déborde des bords : l'agrandissement masque la frange claire
	   que laisse le filtre sur le pourtour. */
	transform: scale(1.1);
}

.bn-popup__entete--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15));
	pointer-events: none;
}

.bn-popup__entete-texte {
	position: relative;
	z-index: 1;
	display: block;
}

.bn-popup__titre {
	font-size: var(--bn-t-grand);
}

.bn-popup__date {
	margin-top: 0.75rem;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-popup__entete--photo .bn-popup__date {
	color: rgba(244, 241, 236, 0.85);
}

.bn-popup__statut {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.35rem 0.9rem;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: var(--bn-blanc);
	color: var(--bn-noir);
}

.bn-popup__lieu-logo {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bn-popup__lieu-logo img {
	width: auto;
	max-height: 64px;
	opacity: 0.85;
}

/* Liste de définitions : chaque paire n'existe que si le champ est rempli,
   donc aucune ligne vide n'est possible. */
.bn-popup__infos {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem 2rem;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--bn-ligne);
	font-size: 0.9375rem;
}

/* Avec une photo en bandeau, la séparation est déjà faite par l'image. */
.bn-popup__infos--sans-filet {
	border-top: 0;
	padding-top: 0;
}

.bn-popup__infos dt {
	font-size: var(--bn-t-petit);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bn-gris);
	white-space: nowrap;
}

.bn-popup__infos dd {
	margin: 0;
}

.bn-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bn-popup__galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bn-popup__photo {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.bn-popup__zoom {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.bn-popup__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bn-popup__zoom:hover img {
	transform: scale(1.05);
}

/* Panneau menu.
   Grand écran : glisse depuis la droite, par-dessus les informations.
   Mobile : remonte en plein écran depuis le bas, parce qu'un panneau
   latéral de 400 px n'a aucun sens sur un écran de 380 px.

   L'état est porté uniquement par la classe : manipuler l'attribut hidden
   en même temps que la transition faisait apparaître le panneau avant son
   déplacement, d'où le saut. visibility bascule sans délai à l'ouverture,
   et attend la fin du glissement à la fermeture. */
.bn-menu-panneau {
	/* Largeur déclarée une fois : elle sert à la fois à dimensionner le
	   panneau et à calculer sa position de départ. Utiliser translateX(100%)
	   revenait à faire dépendre l'animation de la largeur mesurée, qui change
	   dès que la barre de défilement apparaît : le panneau repartait alors
	   d'un autre point en plein mouvement. */
	--bn-menu-w: 100%;

	position: absolute;
	inset: 0;
	z-index: 3;
	width: var(--bn-menu-w);
	background: var(--bn-noir);
	border-left: 1px solid var(--bn-ligne);
	padding: clamp(2rem, 4vw, 3.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Espace de barre réservé en permanence : sans lui, son apparition
	   modifie la largeur utile et provoque un recalcul en cours d'animation. */
	scrollbar-gutter: stable;

	/* Isole le panneau du reste : un recalcul à l'intérieur ne peut plus
	   remonter et déplacer ce qui l'entoure. */
	contain: layout paint;

	visibility: hidden;
	transform: translateX(var(--bn-menu-w));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.55s;
	will-change: transform;
}

.bn-menu-panneau.is-ouvert {
	visibility: visible;
	transform: translateX(0);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s;
}

/* Sous 768 px, le panneau occupe tout l'écran.
   Il n'y remonte pas depuis le bas : translateY(100%) dépend de sa hauteur,
   or la hauteur utile change sur mobile au gré de la barre d'adresse du
   navigateur, ce qui déplaçait le point de départ en pleine animation.
   Un fondu accompagné d'un court déplacement ne dépend d'aucune mesure, et
   ne demande pas de recomposer une couche plein écran à chaque image. */
@media (max-width: 767px) {

	.bn-menu-panneau {
		transform: translateY(24px);
		opacity: 0;
		will-change: opacity;
		transition:
			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.35s ease,
			visibility 0s 0.4s;
	}

	.bn-menu-panneau.is-ouvert {
		transform: translateY(0);
		opacity: 1;
		transition:
			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.35s ease,
			visibility 0s 0s;
	}
}

@media (min-width: 768px) {
	.bn-menu-panneau {
		--bn-menu-w: min(460px, 62%);
		left: auto;
	}
}

/* Voile sur les informations pendant que le menu est ouvert. Cliquable :
   c'est le geste attendu pour refermer un panneau latéral. */
.bn-menu-panneau__voile {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.72);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: opacity 0.55s ease, visibility 0s 0.55s;
}

.bn-popup__boite.is-menu-ouvert .bn-menu-panneau__voile {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0s 0s;
}

.bn-menu-panneau__retour {
	font-size: var(--bn-t-petit);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bn-gris);
	margin-bottom: 2.5rem;
	transition: color var(--bn-rapide);
}

.bn-menu-panneau__retour::before {
	content: '\2190';
	margin-right: 0.6rem;
}

.bn-menu-panneau__retour:hover {
	color: var(--bn-blanc);
}

/* Contenu saisi dans l'éditeur riche : on stylise les balises produites
   par WordPress, sans classes à ajouter côté rédaction. */
.bn-menu-panneau__contenu {
	text-align: center;
}

.bn-menu-panneau__contenu h3 {
	font-size: 0.8125rem;
	font-family: var(--bn-texte);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bn-gris);
	margin: 2.5rem 0 0.9rem;
}

.bn-menu-panneau__contenu h3:first-child {
	margin-top: 0;
}

.bn-menu-panneau__contenu p {
	font-family: var(--bn-titre);
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.9;
}

.bn-menu-panneau__evin {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bn-ligne);
	font-size: 0.6875rem;
	color: var(--bn-gris);
	text-align: center;
}

/* -------------------------------------------------------------------------
   13b. Visionneuse
   ---------------------------------------------------------------------- */
.bn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(0, 0, 0, 0.96);
	opacity: 0;
	transition: opacity var(--bn-rapide);
}

.bn-lightbox[hidden] {
	display: none;
}

.bn-lightbox.is-ouverte {
	opacity: 1;
}

.bn-lightbox__image {
	grid-column: 2;
	justify-self: center;
	max-width: 100%;
	max-height: 88svh;
	width: auto;
	object-fit: contain;
}

.bn-lightbox__fermer {
	position: absolute;
	top: clamp(0.5rem, 2vw, 1.5rem);
	right: clamp(1rem, 3vw, 2.5rem);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--bn-gris);
	transition: color var(--bn-rapide);
}

.bn-lightbox__fermer:hover {
	color: var(--bn-blanc);
}

.bn-lightbox__nav {
	width: 52px;
	height: 52px;
	border: 1px solid var(--bn-ligne);
	border-radius: 50%;
	position: relative;
	flex: 0 0 auto;
	transition: border-color var(--bn-rapide), background-color var(--bn-rapide);
}

.bn-lightbox__nav::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateX(2px) rotate(-135deg);
}

.bn-lightbox__nav--suiv::after {
	transform: translateX(-2px) rotate(45deg);
}

.bn-lightbox__nav:hover {
	border-color: var(--bn-blanc);
	background: rgba(244, 241, 236, 0.08);
}

.bn-lightbox__compteur {
	position: absolute;
	bottom: clamp(0.75rem, 3vw, 2rem);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--bn-t-petit);
	letter-spacing: 0.2em;
	color: var(--bn-gris);
}

/* Sur mobile, les flèches passent sous l'image : les garder sur les côtés
   rognerait la photo sur les écrans étroits. */
@media (max-width: 700px) {

	.bn-lightbox {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
		justify-items: center;
	}

	.bn-lightbox__image {
		grid-column: 1;
		grid-row: 1;
		max-height: 74svh;
	}

	.bn-lightbox__nav {
		grid-row: 2;
	}

	.bn-lightbox__nav--prec {
		justify-self: end;
		margin-right: 4rem;
	}

	.bn-lightbox__nav--suiv {
		grid-row: 2;
		justify-self: start;
		margin-left: 4rem;
	}

	.bn-lightbox__compteur {
		bottom: auto;
		top: calc(74svh + 1.5rem);
	}
}


/* -------------------------------------------------------------------------
   13c. Archives des soirées passées
   ---------------------------------------------------------------------- */
.bn-archives {
	padding: var(--bn-section) 0;
	border-top: 1px solid var(--bn-filet);
}

.bn-archives__entete {
	padding: 0 var(--bn-marge);
	max-width: var(--bn-max);
	margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.bn-archives__titre {
	font-size: var(--bn-t-section);
}

/* Onglets de dates. Défilement horizontal natif : sur mobile, une année de
   soirées ne tient pas sur une ligne, et le glissement au doigt est le geste
   attendu. */
.bn-archives__onglets {
	display: flex;
	gap: 0.6rem;
	padding: 0 var(--bn-marge) 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	justify-content: safe center;
}

.bn-archives__onglets::-webkit-scrollbar {
	display: none;
}

.bn-archives__onglet {
	flex: 0 0 auto;
	scroll-snap-align: center;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--bn-ligne);
	font-size: var(--bn-t-petit);
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--bn-gris);
	white-space: nowrap;
	transition: color var(--bn-rapide), border-color var(--bn-rapide), background-color var(--bn-rapide);
}

.bn-archives__onglet:hover {
	color: var(--bn-blanc);
	border-color: var(--bn-blanc);
}

.bn-archives__onglet.is-actif {
	background: var(--bn-blanc);
	border-color: var(--bn-blanc);
	color: var(--bn-noir);
}

.bn-archives__panneau {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.bn-archives__panneau[hidden] {
	display: none;
}

/* Le titre de la soirée surmonte les miniatures : sans lui, une grille de
   photos ne dit pas de quelle soirée il s'agit. */
.bn-archives__intitule {
	text-align: center;
	padding: 0 var(--bn-marge);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bn-archives__soiree {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.bn-archives__lien {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	margin: 1rem 0 0;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-archives__meta {
	margin: 0.6rem 0 0;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

/* Carrousel de photos. Même mécanique que les tuiles de soirées : défilement
   horizontal natif, accroche, et centrage tant que les vignettes tiennent
   dans la largeur. Le mot-clé safe est indispensable : sans lui, la première
   photo deviendrait inatteignable dès que la série déborde. */
.bn-archives__piste {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0 var(--bn-marge);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	justify-content: safe center;
}

.bn-archives__piste::-webkit-scrollbar {
	display: none;
}

/* Vignettes carrées et compactes : une archive se parcourt du regard, elle
   n'a pas à occuper la place d'une galerie de présentation. */
.bn-archives__photo {
	flex: 0 0 clamp(140px, 34vw, 220px);
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	background: #111;
	scroll-snap-align: center;
}

@media (min-width: 900px) {
	.bn-archives__photo {
		scroll-snap-align: start;
	}
}

.bn-archives__zoom {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.bn-archives__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter var(--bn-rapide);
	filter: brightness(0.85);
}

.bn-archives__zoom:hover img {
	transform: scale(1.06);
	filter: brightness(1);
}

.bn-archives__nav {
	display: none;
	gap: 0.75rem;
	justify-content: flex-end;
	max-width: var(--bn-max);
	margin: 1.75rem auto 0;
	padding: 0 var(--bn-marge);
}

@media (min-width: 900px) {
	.bn-archives__nav {
		display: flex;
	}
}

.bn-archives__attente {
	text-align: center;
	color: var(--bn-gris);
	padding: clamp(2rem, 5vw, 4rem) 0;
}

/* -------------------------------------------------------------------------
   14. Réservation et formulaire
   ---------------------------------------------------------------------- */
.bn-reservation {
	padding: var(--bn-section) var(--bn-marge);
	background: var(--bn-noir-profond);
	border-top: 1px solid var(--bn-filet);
}

.bn-reservation__inner {
	max-width: 980px;
	margin: 0 auto;
}

.bn-reservation__titre {
	font-size: var(--bn-t-section);
	text-align: center;
}

.bn-reservation__direct {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	margin: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--bn-ligne);
	border: 1px solid var(--bn-ligne);
}

@media (min-width: 700px) {
	.bn-reservation__direct {
		grid-template-columns: 1fr 1fr;
	}
}

.bn-reservation__canal {
	background: var(--bn-noir-profond);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	transition: background-color var(--bn-rapide);
}

.bn-reservation__canal:hover {
	background: #101010;
}

.bn-reservation__label {
	display: block;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bn-gris);
	margin-bottom: 0.6rem;
}

.bn-reservation__valeur {
	display: block;
	font-family: var(--bn-titre);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	word-break: break-word;
}

/* Le piège à robots doit rester invisible sans être display:none, que
   certains robots détectent. */
.bn-form__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bn-form__retour {
	margin: 0 0 2rem;
	padding: 1.1rem 1.5rem;
	border-left: 2px solid var(--bn-braise);
	background: rgba(244, 241, 236, 0.05);
	font-size: 0.9375rem;
}

.bn-form__retour--succes {
	border-left-color: #4a8f5b;
}

.bn-form__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 700px) {
	.bn-form__retour {
	margin: 0 0 2rem;
	padding: 1.1rem 1.5rem;
	border-left: 2px solid var(--bn-braise);
	background: rgba(244, 241, 236, 0.05);
	font-size: 0.9375rem;
}

.bn-form__retour--succes {
	border-left-color: #4a8f5b;
}

.bn-form__grille {
		grid-template-columns: 1fr 1fr;
	}

	.bn-form__champ--large {
		grid-column: 1 / -1;
	}
}

.bn-form__champ {
	margin: 0;
}

.bn-form__champ label {
	display: block;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bn-gris);
	margin-bottom: 0.6rem;
}

.bn-form__champ input,
.bn-form__champ select,
.bn-form__champ textarea {
	width: 100%;
	padding: 0.9rem 0;
	font: inherit;
	color: var(--bn-blanc);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bn-ligne);
	border-radius: 0;
	transition: border-color var(--bn-rapide);
}

.bn-form__champ select {
	/* Le menu déroulant natif est blanc sur fond blanc dans certains
	   navigateurs : la couleur des options doit être forcée. */
	color-scheme: dark;
}

.bn-form__champ input:focus,
.bn-form__champ select:focus,
.bn-form__champ textarea:focus {
	outline: none;
	border-color: var(--bn-blanc);
}

.bn-form__champ textarea {
	resize: vertical;
}

.bn-form__consentement label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--bn-gris);
}

.bn-form__consentement input {
	width: auto;
	margin-top: 0.25rem;
	accent-color: var(--bn-braise);
}

.bn-form__envoi {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	text-align: center;
}


/* -------------------------------------------------------------------------
   14b. Inscription aux annonces
   Bloc autonome, réutilisé sous le formulaire et dans la section des dates
   quand aucune n'est programmée.
   ---------------------------------------------------------------------- */
.bn-annonces {
	text-align: center;
}

.bn-annonces__titre {
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	margin-top: 1rem;
}

.bn-annonces__chapo {
	max-width: 44ch;
	margin: 1rem auto 0;
	font-size: 0.9375rem;
	color: var(--bn-gris);
}

.bn-annonces__form {
	max-width: 30rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
}

/* Champ et bouton alignés : c'est une action unique, elle doit se lire
   d'un seul tenant. Sous 560 px ils s'empilent, un bouton de 44 px de haut
   à côté d'un champ ne tenant pas sur un écran étroit. */
.bn-annonces__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

.bn-annonces__ligne input {
	flex: 1 1 14rem;
	padding: 0.9rem 0;
	font: inherit;
	color: var(--bn-blanc);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bn-ligne);
	border-radius: 0;
	transition: border-color var(--bn-rapide);
}

.bn-annonces__ligne input::placeholder {
	color: rgba(138, 133, 125, 0.7);
}

.bn-annonces__ligne input:focus {
	outline: none;
	border-color: var(--bn-blanc);
}

.bn-annonces__ligne .bn-bouton {
	flex: 0 0 auto;
	padding: 0.9rem 2rem;
}

@media (max-width: 559px) {

	.bn-annonces__ligne {
		flex-direction: column;
	}

	.bn-annonces__ligne .bn-bouton {
		width: 100%;
	}
}

.bn-annonces__mention {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--bn-gris);
}

.bn-annonces__mention a {
	border-bottom: 1px solid var(--bn-ligne);
}

.bn-annonces__mention a:hover {
	border-color: var(--bn-blanc);
}


/* -------------------------------------------------------------------------
   14c. Choix d'entrée du formulaire
   Deux intentions distinctes, deux boutons. Les formulaires restent repliés
   tant qu'aucune n'est choisie : présenter d'emblée une quinzaine de champs
   à quelqu'un qui veut seulement laisser son adresse est décourageant.
   ---------------------------------------------------------------------- */
.bn-choix {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.bn-choix__bouton {
	flex: 0 1 auto;
	/* Interlettrage resserré par rapport aux autres boutons : à 0.22em, les
	   deux libellés ne tiennent pas côte à côte sous 900 px et se cassent
	   en deux lignes inégales. */
	padding: 1.1rem 1.75rem;
	font-size: var(--bn-t-petit);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* Au repos, l'apparence des autres boutons du site : blanc plein. Le
	   braise est réservé à l'état choisi, où il fait office de marque
	   d'accent plutôt que de couleur de fond permanente. */
	color: var(--bn-noir);
	background: var(--bn-blanc);
	border: 1px solid var(--bn-blanc);
	transition: background-color var(--bn-rapide), color var(--bn-rapide), border-color var(--bn-rapide);
}

.bn-choix__bouton:hover {
	background: transparent;
	color: var(--bn-blanc);
}

/* Le bouton actif s'inverse : c'est le seul repère qui indique quel volet
   est ouvert, une fois le formulaire déployé sous les deux boutons. */
.bn-choix__bouton[aria-expanded="true"],
.bn-choix__bouton[aria-expanded="true"]:hover {
	background: var(--bn-braise);
	border-color: var(--bn-braise);
	color: var(--bn-blanc);
}

@media (max-width: 559px) {

	.bn-choix {
		flex-direction: column;
	}

	.bn-choix__bouton {
		width: 100%;
	}
}

/* Volet dépliable. hidden est retiré par le script avant l'animation,
   sinon la transition partirait d'un élément absent de la mise en page. */
.bn-volet[hidden] {
	display: none;
}

.bn-volet {
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity var(--bn-transition), transform var(--bn-transition);
}

.bn-volet.is-ouvert,
.bn-volet.is-seul {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   15. Pied de page
   ---------------------------------------------------------------------- */
.bn-footer {
	padding: clamp(4rem, 8vw, 7rem) var(--bn-marge) 3rem;
	border-top: 1px solid var(--bn-ligne);
}

.bn-footer__inner {
	max-width: var(--bn-max);
	margin: 0 auto;
	text-align: center;
}

.bn-footer__partenaires {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
	margin-bottom: 3.5rem;
}

.bn-partenaire {
	display: block;
	opacity: 0.75;
	transition: opacity var(--bn-rapide);
}

.bn-partenaire:hover {
	opacity: 1;
}

.bn-partenaire__logo svg {
	width: auto;
	fill: var(--bn-blanc-pur);
}

/* Les tracés touchent les bords de leur viewBox sur MG Com' et Monderys,
   Gueuleton a une marge intégrée inégale. Sans compensation individuelle,
   des logos de même hauteur paraissent de tailles différentes. */
.bn-partenaire__logo--mgcom-blanc svg {
	height: 54px;
}

.bn-partenaire__logo--gueuleton-blanc svg {
	height: 68px;
	margin: -7px 0;
}

.bn-partenaire__role {
	display: block;
	margin-top: 1rem;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-footer__contact {
	font-family: var(--bn-titre);
	font-size: clamp(1.1rem, 2.4vw, 1.75rem);
	margin-bottom: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.5rem;
}

.bn-footer__reseaux {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.bn-footer__reseaux a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bn-ligne);
	border-radius: 50%;
	transition: border-color var(--bn-rapide), background-color var(--bn-rapide);
}

.bn-footer__reseaux a:hover {
	border-color: var(--bn-blanc);
	background: rgba(244, 241, 236, 0.06);
}

.bn-footer__reseaux svg {
	width: 18px;
	height: 18px;
	fill: var(--bn-blanc);
	opacity: 0.8;
}

.bn-footer__reseaux a:hover svg {
	opacity: 1;
}

.bn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-footer__legal a:hover {
	color: var(--bn-blanc);
}

.bn-footer__evin,
.bn-footer__copyright {
	font-size: 0.6875rem;
	color: var(--bn-gris);
	margin: 0.5rem 0 0;
}


/* -------------------------------------------------------------------------
   15b. Pages simples
   Mentions légales, politique de confidentialité : tout ce qui passe par
   index.php. L'en-tête étant fixe, la marge haute compense sa hauteur,
   sinon le titre passerait dessous.
   ---------------------------------------------------------------------- */
.bn-simple {
	padding: clamp(7rem, 16vh, 11rem) var(--bn-marge) var(--bn-section);
}

.bn-simple__inner {
	max-width: 70ch;
	margin: 0 auto;
}

.bn-simple__titre {
	font-size: clamp(2.25rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--bn-ligne);
}

.bn-simple__contenu {
	color: rgba(244, 241, 236, 0.86);
}

.bn-simple__contenu h2 {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	margin: 2.75rem 0 0.9rem;
	color: var(--bn-blanc);
}

.bn-simple__contenu h2:first-child {
	margin-top: 0;
}

.bn-simple__contenu h3 {
	font-family: var(--bn-texte);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bn-gris);
	margin: 2rem 0 0.75rem;
}

.bn-simple__contenu strong {
	color: var(--bn-blanc);
	font-weight: 500;
}

.bn-simple__contenu a {
	border-bottom: 1px solid var(--bn-ligne);
	transition: border-color var(--bn-rapide);
}

.bn-simple__contenu a:hover {
	border-color: var(--bn-blanc);
}

.bn-simple__contenu ul,
.bn-simple__contenu ol {
	padding-left: 1.25rem;
	margin: 0 0 1.2em;
}

.bn-simple__contenu li {
	margin-bottom: 0.4em;
}

.bn-simple__contenu table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.9375rem;
}

.bn-simple__contenu th,
.bn-simple__contenu td {
	padding: 0.7rem 1rem 0.7rem 0;
	border-bottom: 1px solid var(--bn-ligne);
	text-align: left;
	vertical-align: top;
}

.bn-simple__contenu th {
	font-size: var(--bn-t-petit);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bn-gris);
	font-weight: 500;
}

.bn-simple__retour {
	display: inline-block;
	margin-top: clamp(3rem, 6vw, 5rem);
	font-size: var(--bn-t-petit);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bn-gris);
	transition: color var(--bn-rapide);
}

.bn-simple__retour::before {
	content: '\2190';
	margin-right: 0.6rem;
}

.bn-simple__retour:hover {
	color: var(--bn-blanc);
}

/* Crédit photographe, sous la mention sanitaire. */
.bn-footer__credits {
	margin: 0.5rem 0 0;
	font-size: 0.6875rem;
	color: var(--bn-gris);
}

.bn-footer__credits a {
	border-bottom: 1px solid var(--bn-ligne);
	transition: border-color var(--bn-rapide);
}

.bn-footer__credits a:hover {
	border-color: var(--bn-blanc);
}


/* -------------------------------------------------------------------------
   15c. Fiche d'une soirée à venir
   Réutilise les classes de la popup : seul le positionnement change, tout
   le reste, en-tête photo, listes d'informations, panneau menu, est déjà
   décrit plus haut et n'a pas à être redit.
   ---------------------------------------------------------------------- */
.bn-fiche {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(7rem, 16vh, 11rem) var(--bn-marge) var(--bn-section);
}

.bn-fiche .bn-popup__boite {
	position: relative;
	width: 100%;
	max-height: none;
	opacity: 1;
	transform: none;
}

.bn-fiche .bn-popup__corps {
	max-height: none;
	overflow: visible;
}

.bn-fiche .bn-simple__retour,
.bn-passee .bn-simple__retour {
	margin-top: 2.5rem;
}

/* -------------------------------------------------------------------------
   15d. Fiche d'une soirée passée
   ---------------------------------------------------------------------- */
.bn-passee {
	padding-bottom: var(--bn-section);
}

.bn-passee__banniere {
	height: clamp(45svh, 60vh, 70svh);
	overflow: hidden;
	position: relative;
}

.bn-passee__banniere img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.65);
}

.bn-passee__banniere::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--bn-noir) 0%, rgba(0, 0, 0, 0) 60%);
}

.bn-passee__entete {
	position: relative;
	z-index: 1;
	max-width: 60ch;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--bn-marge) 0;
	text-align: center;
}

/* Sans bannière, l'en-tête doit dégager la hauteur de l'en-tête fixe. */
.bn-passee__banniere + .bn-passee__entete {
	margin-top: calc(clamp(2rem, 6vw, 5rem) * -1);
}

.bn-passee:not(:has(.bn-passee__banniere)) .bn-passee__entete {
	padding-top: clamp(7rem, 16vh, 11rem);
}

.bn-passee__titre {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 1rem 0 0;
}

.bn-passee__meta {
	margin: 1rem 0 0;
	font-size: var(--bn-t-petit);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bn-gris);
}

.bn-passee__logo {
	margin-top: 2rem;
}

.bn-passee__logo img {
	width: auto;
	max-height: 60px;
	margin: 0 auto;
	opacity: 0.85;
}

.bn-passee__section {
	font-family: var(--bn-texte);
	font-size: var(--bn-t-petit);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bn-gris);
	text-align: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bn-passee__menu {
	max-width: 46ch;
	margin: clamp(3rem, 7vw, 5rem) auto 0;
	padding: 0 var(--bn-marge);
}

.bn-passee__galerie {
	margin-top: clamp(3.5rem, 8vw, 6rem);
	padding: 0 var(--bn-marge);
}

/* Grille et non carrousel : en pleine largeur, une série se donne à voir
   d'un coup. Le carrousel ne sert que dans un espace contraint. */
.bn-passee__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75rem;
	max-width: var(--bn-max);
	margin: 0 auto;
}

.bn-passee__photo {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #111;
}

.bn-passee__zoom {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.bn-passee__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.88);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter var(--bn-rapide);
}

.bn-passee__zoom:hover img {
	transform: scale(1.05);
	filter: brightness(1);
}

.bn-passee__pied {
	margin-top: clamp(4rem, 9vw, 7rem);
	padding: 0 var(--bn-marge);
	text-align: center;
	color: var(--bn-gris);
}

.bn-passee__pied p {
	margin-bottom: 1.75rem;
}

/* -------------------------------------------------------------------------
   16. Boutons
   ---------------------------------------------------------------------- */
.bn-bouton {
	display: inline-block;
	padding: 1rem 2.5rem;
	font-size: var(--bn-t-petit);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: var(--bn-blanc);
	color: var(--bn-noir);
	border: 1px solid var(--bn-blanc);
	transition: background-color var(--bn-rapide), color var(--bn-rapide);
}

.bn-bouton:hover {
	background: transparent;
	color: var(--bn-blanc);
}

.bn-bouton--fantome {
	background: transparent;
	color: var(--bn-blanc);
	border-color: var(--bn-ligne);
}

.bn-bouton--fantome:hover {
	background: var(--bn-blanc);
	color: var(--bn-noir);
	border-color: var(--bn-blanc);
}


/* -------------------------------------------------------------------------
   18. Bandeau de consentement (Complianz)
   Le plugin apporte son propre habillage : on ne le refait pas, on le
   raccorde à la charte et on corrige ce qui gêne.
   ---------------------------------------------------------------------- */

/* En-tête du bandeau. La grille de Complianz fixe la colonne du logo à
   100px et le plafonne à 40px de haut, ce qui écrase un logo horizontal. */
.cmplz-cookiebanner .cmplz-header {
	grid-template-columns: auto 1fr auto;
}

.cmplz-cookiebanner .cmplz-logo img {
	max-height: 52px;
	width: auto;
	max-width: 100%;
}

/* Bouton de réouverture du consentement.
   Par défaut, Complianz affiche un libellé texte, illisible sur mobile où il
   se réduit à une bande. On le remplace par une pastille ronde portant une
   icône, compréhensible sans lecture et discrète sur une page sombre. Le
   texte reste dans le DOM pour les lecteurs d'écran.

   La classe est répétée cinq fois, et ce n'est pas une coquille. Complianz
   cible ses boutons avec quatre classes ET !important : à !important égal,
   c'est la spécificité qui tranche, et un sélecteur à deux classes perd.
   Répéter la classe monte la spécificité sans rien changer aux éléments
   visés, et sans dépendre du numéro de bandeau (manage-consent-1), qui
   change si un second bandeau est configuré.

   Les dimensions sont fixées dans les trois directions, largeur, hauteur et
   minimums, pour que la pastille reste ronde quoi que le plugin place à
   l'intérieur.

   TROIS VALEURS À AJUSTER :
   - 50px  : diamètre de la pastille
   - 24px  : taille de l'icône dans la pastille
   - 0.82  : opacité au repos
   ---------------------------------------------------------------------- */
.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 !important;
	/* Le contour détache la pastille des photos claires, sur lesquelles
	   le seul fond braise se fondait. box-sizing hérité du reset : le
	   contour est compris dans les 50px, la pastille ne grandit pas. */
	border: 2px solid #f4f1ec !important;
	border: 2px solid var(--bn-blanc, #f4f1ec) !important;
	border-radius: 50% !important;
	background: #c0562a !important;
	background: var(--bn-braise, #c0562a) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-indent: 0 !important;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	opacity: 0.82;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent::before {
	content: '';
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	background: #f4f1ec !important;
	background: var(--bn-blanc, #f4f1ec) !important;
	/* L'icône sert de masque : sa couleur vient du CSS, et les pépites
	   laissent transparaître le fond de la pastille. Propriétés détaillées
	   plutôt que la forme raccourcie, que tous les navigateurs
	   n'interprètent pas de la même façon. */
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjEuNTk4IDExLjA2NGExLjAwNiAxLjAwNiAwIDAgMC0uODU0LS4xNzJBMi45MzggMi45MzggMCAwIDEgMjAgMTFjLTEuNjU0IDAtMy0xLjM0Ni0zLjAwMy0yLjkzOC4wMDUtLjAzNC4wMTYtLjEzNC4wMTctLjE2OGEuOTk4Ljk5OCAwIDAgMC0xLjI1NC0xLjAwNkEzLjAwMiAzLjAwMiAwIDAgMSAxNSA3Yy0xLjY1NCAwLTMtMS4zNDYtMy0zIDAtLjIxNy4wMzEtLjQ0NC4wOTktLjcxNmExIDEgMCAwIDAtMS4wNjctMS4yMzZBOS45NTYgOS45NTYgMCAwIDAgMiAxMmMwIDUuNTE0IDQuNDg2IDEwIDEwIDEwczEwLTQuNDg2IDEwLTEwYzAtLjA0OS0uMDAzLS4wOTctLjAwNy0uMTZhMS4wMDQgMS4wMDQgMCAwIDAtLjM5NS0uNzc2ek04LjUgNmExLjUgMS41IDAgMSAxIDAgMyAxLjUgMS41IDAgMCAxIDAtM3ptLTIgOGExLjUgMS41IDAgMSAxIDAtMyAxLjUgMS41IDAgMCAxIDAgM3ptMyA0YTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzem0yLjUtNi41YTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0zLjUgNi41YTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzeiIvPjwvc3ZnPg==");
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjEuNTk4IDExLjA2NGExLjAwNiAxLjAwNiAwIDAgMC0uODU0LS4xNzJBMi45MzggMi45MzggMCAwIDEgMjAgMTFjLTEuNjU0IDAtMy0xLjM0Ni0zLjAwMy0yLjkzOC4wMDUtLjAzNC4wMTYtLjEzNC4wMTctLjE2OGEuOTk4Ljk5OCAwIDAgMC0xLjI1NC0xLjAwNkEzLjAwMiAzLjAwMiAwIDAgMSAxNSA3Yy0xLjY1NCAwLTMtMS4zNDYtMy0zIDAtLjIxNy4wMzEtLjQ0NC4wOTktLjcxNmExIDEgMCAwIDAtMS4wNjctMS4yMzZBOS45NTYgOS45NTYgMCAwIDAgMiAxMmMwIDUuNTE0IDQuNDg2IDEwIDEwIDEwczEwLTQuNDg2IDEwLTEwYzAtLjA0OS0uMDAzLS4wOTctLjAwNy0uMTZhMS4wMDQgMS4wMDQgMCAwIDAtLjM5NS0uNzc2ek04LjUgNmExLjUgMS41IDAgMSAxIDAgMyAxLjUgMS41IDAgMCAxIDAtM3ptLTIgOGExLjUgMS41IDAgMSAxIDAtMyAxLjUgMS41IDAgMCAxIDAgM3ptMyA0YTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzem0yLjUtNi41YTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0zLjUgNi41YTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzeiIvPjwvc3ZnPg==");
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent.cmplz-manage-consent:hover {
	opacity: 1;
	transform: scale(1.06);
}

@media (max-width: 767px) {

	.cmplz-cookiebanner .cmplz-header {
		grid-template-columns: 1fr auto;
	}

	.cmplz-cookiebanner .cmplz-logo {
		grid-column: 1 / -1;
		margin-bottom: 0.75rem;
	}

	.cmplz-cookiebanner .cmplz-logo img {
		max-height: 44px;
	}
}


/* -------------------------------------------------------------------------
   16b. Bouton de partage
   Présent dans la popup et sur les deux fiches de soirée. Le libellé change
   brièvement en « Lien copié » quand le presse-papier prend le relais de
   l'API de partage, sinon rien n'indiquerait que l'action a eu lieu.
   ---------------------------------------------------------------------- */
.bn-partage {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.5rem;
	font-size: var(--bn-t-petit);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bn-gris);
	transition: color var(--bn-rapide);
}

.bn-partage:hover,
.bn-partage.is-confirme {
	color: var(--bn-blanc);
}

.bn-partage__icone {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTggMTYuMDhjLS43NiAwLTEuNDQuMy0xLjk2Ljc3TDguOTEgMTIuN2MuMDUtLjIzLjA5LS40Ni4wOS0uN3MtLjA0LS40Ny0uMDktLjdsNy4wNS00LjExYy41NC41IDEuMjUuODEgMi4wNC44MWEzIDMgMCAxIDAtMy0zYzAgLjI0LjA0LjQ3LjA5LjdMOC4wNCA5LjgxQTIuOTkgMi45OSAwIDAgMCAzIDEyYTMgMyAwIDAgMCA1LjA0IDIuMTlsNy4xMiA0LjE2Yy0uMDUuMjEtLjguNDMtLjguNjVhMi45MiAyLjkyIDAgMSAwIDIuOTItMi45MnoiLz48L3N2Zz4=");
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTggMTYuMDhjLS43NiAwLTEuNDQuMy0xLjk2Ljc3TDguOTEgMTIuN2MuMDUtLjIzLjA5LS40Ni4wOS0uN3MtLjA0LS40Ny0uMDktLjdsNy4wNS00LjExYy41NC41IDEuMjUuODEgMi4wNC44MWEzIDMgMCAxIDAtMy0zYzAgLjI0LjA0LjQ3LjA5LjdMOC4wNCA5LjgxQTIuOTkgMi45OSAwIDAgMCAzIDEyYTMgMyAwIDAgMCA1LjA0IDIuMTlsNy4xMiA0LjE2Yy0uMDUuMjEtLjguNDMtLjguNjVhMi45MiAyLjkyIDAgMSAwIDIuOTItMi45MnoiLz48L3N2Zz4=");
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	transition: transform var(--bn-rapide);
}

.bn-partage:hover .bn-partage__icone {
	transform: translateY(-1px);
}

/* Dans le pied d'une fiche passée, le bouton suit un bouton plein : il se
   place en dessous plutôt qu'à côté, sur les écrans étroits. */
.bn-passee__pied .bn-partage {
	display: inline-flex;
	margin-top: 0.5rem;
}

/* Version compacte, à côté d'un lien de texte plutôt que d'un bouton plein :
   le rembourrage d'un bouton d'action désalignerait les deux libellés. */
.bn-partage--compact {
	padding: 0;
	margin-left: 1.5rem;
	vertical-align: baseline;
}

.bn-partage--compact .bn-partage__icone {
	width: 14px;
	height: 14px;
}

/* Sous 560 px, le partage passe sous le lien : les deux libellés en
   capitales espacées ne tiennent pas sur une ligne. */
@media (max-width: 559px) {

	.bn-archives__lien {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	.bn-partage--compact {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
   17. Mouvement réduit
   Le site perd ses animations mais reste entièrement fonctionnel.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-bn-reveal] {
		opacity: 1;
		transform: none;
	}

	.bn-intro {
		display: none;
	}

	.bn-hero__scroll-ligne {
		animation: none;
		opacity: 0.6;
	}
}