/* ==========================================================================
   Rêves Nomades — PAGE « NOS ÉVÉNEMENTS » ET FICHES DES ÉVÉNEMENTS
   Repris de la maquette validée (reference/maquette/Evenements.dc.html) :
   filtres du programme, mises en page Plein écran, Billet, Panorama, Affiche et Carte
   (diaporama « Partir pour mieux revenir »), Motos & Coffee, bande Agenda,
   « Ce qu’on a vécu ensemble » ; fiche d’un événement (mêmes composants).
   ========================================================================== */

/* Un petit espace entre chaque rubrique : le fond Nuit de la page apparaît entre deux blocs. */
.rn-evenements .rn-main > :is(section, article).amb {
	margin-bottom: clamp(8px, .9vw, 14px);
}

.wrap-wide {
	max-width: 1800px;
	padding: 0 clamp(16px, 4vw, 56px);
}

.media-fill {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zoom {
	overflow: hidden;
}

.zoom img,
.zoom video {
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.zoom:hover img,
.zoom:hover video {
	transform: scale(1.04);
}

/* ---------- Étiquettes et lignes d’informations ---------- */
/* Couleur de la pastille « Places limitées », selon l’ambiance (maquette). */
.amb-nuit,
.amb-tilleul,
.amb-papier {
	--dot: var(--verm);
}

.amb-vermillon {
	--dot: var(--c-verm-texte);
}

.amb-ete,
.amb-soleil {
	--dot: var(--c-carmin);
}

.mtag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-label);
	font-weight: var(--l-weight);
	font-size: 11px;
	letter-spacing: var(--l-track);
	text-transform: uppercase;
	white-space: nowrap;
}

.mtag::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.m-info::before {
	border: 1.5px solid currentcolor;
}

.m-resa::before {
	background: var(--dot);
}

.irow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.irow .k {
	color: var(--fg2);
	flex: 0 0 auto;
}

.irow .v {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.15;
	text-align: right;
}

.ev-meta {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

.logline {
	margin: 0;
	max-width: 50ch;
	line-height: 1.75;
	font-size: clamp(13px, 1vw, 15px);
}

.ev-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 6px;
}

.ev-ag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 2px;
	color: var(--fg2);
	text-decoration: none;
	transition: color .3s;
}

.ev-ag:hover {
	color: var(--fg);
}

.evh-panel,
.bil-a,
.aff-media,
.ea-ph,
.pano-media {
	position: relative;
}

.evh-panel .stamp {
	top: -24px;
	right: -14px;
}

/* ---------- Filtres du programme ---------- */
.ev-filt {
	padding: clamp(92px, 7.6vw, 112px) 0 clamp(6px, .8vw, 12px);
}

/* Barre sans titre ni filtre : elle ne prend aucune place (la page s’ouvre sur le premier événement). */
.ev-filt.ev-filt-vide,
.rn-evenements .rn-main > section.ev-filt.ev-filt-vide {
	padding: 0;
	margin: 0;
}

.ev-filt-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 28px;
}

.ev-filt-k {
	color: var(--kick);
}

.rn-masque-filtre {
	display: none !important;
}

.av-empty {
	padding: clamp(90px, 10vw, 140px) 0;
}

.av-empty-in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.av-empty-in p {
	margin: 0;
	font-size: clamp(34px, 4vw, 60px);
	line-height: .95;
	max-width: 18ch;
}

/* ---------- Plein écran (Nuit) ---------- */
.evh {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Plein écran, comme l’ouverture de la page d’accueil. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.evh .grain {
	opacity: .875;
}

.evh-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.evh-media img,
.evh-media video {
	position: absolute;
	inset: -2%;
	width: 104%;
	height: 104%;
	object-fit: cover;
	display: block;
}

.evh-media img {
	animation: kb 20s ease-in-out infinite alternate;
}

.evh .scrim {
	background: linear-gradient(180deg, rgb(var(--c-nuit-rgb) / .62) 0%, rgb(var(--c-nuit-rgb) / .06) 26%, rgb(var(--c-nuit-rgb) / .16) 50%, rgb(var(--c-nuit-rgb) / .94) 100%), linear-gradient(90deg, rgb(var(--c-nuit-rgb) / .55) 0%, rgb(var(--c-nuit-rgb) / 0) 62%);
}

.evh-in {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	align-items: end;
	gap: 40px clamp(32px, 5vw, 96px);
	padding-top: clamp(200px, 18vw, 260px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

.evh-main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	color: var(--c-papier);
}

.evh-t {
	margin: 0;
	font-size: clamp(76px, 12.4vw, 212px);
	line-height: .84;
	max-width: 9.5ch;
	text-shadow: 0 6px 40px rgba(0, 0, 0, .35);
}

.evh-t.mid {
	font-size: clamp(64px, 9.4vw, 160px);
	max-width: 12ch;
}

.evh-t.long {
	font-size: clamp(54px, 7.4vw, 124px);
	max-width: 14ch;
}

.evh-lead {
	margin: 4px 0 0;
	max-width: 48ch;
	line-height: 1.75;
	font-size: clamp(13px, 1.05vw, 15px);
	color: var(--c-papier-3);
	white-space: pre-line;
}

.evh-panel {
	display: flex;
	flex-direction: column;
	background: rgb(var(--c-nuit-rgb) / .76); /* sans flou d’arrière-plan (fluidité du défilement) */
	padding: 8px 24px 24px;
	border: 1px solid rgb(var(--c-papier-rgb) / .14);
}

.evh-acts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.evh-acts .btn {
	width: 100%;
}

.evh-acts .ev-ag {
	align-self: flex-start;
}

.evh:not(.amb-nuit) .evh-panel {
	background: var(--bg);
	color: var(--fg);
	border-color: transparent;
}

/* ---------- Billet (Tilleul) ---------- */
.c-billet {
	padding: clamp(90px, 10vw, 150px) 0;
}

.bil-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: center;
}

.bil-txt {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.bil-date {
	display: flex;
	align-items: flex-end;
	gap: clamp(14px, 1.6vw, 24px);
	padding-bottom: 18px;
	border-bottom: 2px solid var(--fg);
}

.bil-num {
	font-family: var(--f-title);
	font-weight: 700;
	font-size: clamp(96px, 11.5vw, 196px);
	line-height: .78;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.bil-my {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: .5em;
}

.bil-m {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1;
}

.bil-t {
	margin: 6px 0 0;
	font-size: clamp(46px, 5.4vw, 92px);
	line-height: .88;
}

.bil-media {
	position: relative;
	padding: 0 0 clamp(50px, 6vw, 90px) clamp(40px, 6vw, 90px);
	min-width: 0;
}

.bil-a {
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--c-nuit-2);
}

.bil-b {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40%;
	aspect-ratio: 2 / 3;
	margin: 0;
	overflow: hidden;
	z-index: 2;
	box-shadow: 0 30px 60px -24px rgb(var(--c-foret-rgb) / .55);
}

/* ---------- Panorama (Nuit) ---------- */
.c-pano {
	padding: clamp(90px, 10vw, 150px) 0 clamp(80px, 9vw, 130px);
}

.pano-kick {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 12px 24px;
	margin-bottom: clamp(18px, 2vw, 28px);
}

.pano-d {
	color: var(--fg2);
}

.pano-t {
	position: relative;
	z-index: 6;
	margin: 0 0 -.42em;
	font-size: clamp(64px, 10.4vw, 180px);
	line-height: .84;
	text-shadow: 0 6px 40px rgba(0, 0, 0, .5);
	transform: translateZ(0);
	pointer-events: none;
}

.pano-media {
	z-index: 1;
	margin: 0;
	height: clamp(380px, 38vw, 560px);
	background: var(--c-nuit-2);
}

.pano-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px clamp(20px, 2.4vw, 40px);
	margin-top: clamp(36px, 4vw, 56px);
	align-items: start;
}

.pano-info {
	grid-column: 1 / span 5;
	min-width: 0;
}

.pano-txt {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ---------- Affiche (Vermillon) ---------- */
.c-affiche {
	padding: clamp(90px, 10vw, 150px) 0;
}

.aff-num {
	font-family: var(--f-title);
	font-weight: 700;
	font-size: clamp(110px, 17vw, 290px);
	line-height: .76;
	letter-spacing: -.015em;
	white-space: nowrap;
}

.aff-my {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
	padding-bottom: .4em;
}

.aff-m {
	font-family: var(--f-title);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(40px, 5.4vw, 92px);
	line-height: .85;
}

.aff-mid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(28px, 3vw, 44px);
	align-items: start;
}

.aff-date {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.aff-date .aff-num {
	font-size: clamp(72px, 8vw, 140px);
}

.aff-date .aff-my {
	align-items: flex-start;
	text-align: left;
	padding-bottom: .3em;
}

.aff-date .aff-m {
	font-size: clamp(28px, 3vw, 50px);
}

.aff-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 780px;
}

.aff-rub {
	margin: 0;
	font-size: clamp(36px, 4.2vw, 72px);
	line-height: .88;
}

.aff-big {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 40px;
	margin-top: clamp(36px, 4vw, 64px);
	padding-top: clamp(18px, 2vw, 28px);
	border-top: 3px solid var(--fg);
}

.aff-dest {
	margin: 0;
	font-size: clamp(64px, 10vw, 180px);
	line-height: .82;
	min-width: 0;
}

.aff-big .aff-date {
	border-bottom: 0;
	padding-bottom: .1em;
}

.aff-big .aff-num {
	font-size: clamp(56px, 6.4vw, 116px);
}

.aff-sum {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(20px, 1.9vw, 30px);
	line-height: 1.15;
	max-width: 60ch;
}

.aff-media {
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--c-nuit-2);
}

.aff-txt {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.rub-txt {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.75;
	white-space: pre-line;
}

/* ---------- Carte : diaporama « Partir pour mieux revenir » (Papier) ---------- */
.c-liste {
	padding: clamp(80px, 9vw, 130px) 0;
}

.rub-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 780px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.ea-wrap .gal {
	align-items: flex-start;
	gap: clamp(14px, 1.8vw, 28px);
	list-style: none;
	margin: 0;
	max-width: none;
}

.ea-slide {
	flex: 0 0 auto;
	width: clamp(300px, 64vw, 940px);
	scroll-snap-align: start;
	scroll-margin-top: 110px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ea-gal.solo .ea-slide {
	flex: 0 0 100%;
	width: auto;
}

.ea-slide .ea-ph {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.ea-slide .ea-ph > img {
	transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
}

.ea-slide:hover .ea-ph > img {
	transform: scale(1.04);
}

/* Événement terminé : la photo s’atténue, le tampon « Terminé » reprend celui de « Complet ». */
.ea-slide.is-past .ea-ph .media-fill {
	filter: grayscale(.6) brightness(.72);
}

.ea-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(var(--c-nuit-rgb) / 0) 38%, rgb(var(--c-nuit-rgb) / .86) 100%);
	pointer-events: none;
}

.ea-over {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	padding: clamp(20px, 3vw, 44px);
	color: var(--c-papier);
}

.ea-txt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ea-date {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1;
	color: var(--c-papier-3);
}

.ea-dest {
	margin: 0;
	font-size: clamp(46px, 6.4vw, 112px);
	line-height: .84;
	color: var(--c-papier);
	text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

.ea-over .btn {
	flex: 0 0 auto;
}

.ea-foot {
	margin-top: 10px;
}

/* ---------- Motos & Coffee (Été) ---------- */
.c-renc {
	padding: clamp(64px, 7vw, 110px) 0;
}

.renc-k {
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.6;
}

.renc-t {
	margin: 6px 0 0;
	font-size: clamp(52px, 6.4vw, 110px);
	line-height: .86;
}

.mc {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(14px, 1.8vw, 28px);
	row-gap: clamp(30px, 3.6vw, 60px);
	align-items: start;
}

.mc-head {
	grid-column: 1 / 8;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 780px;
}

.mc-head .renc-t {
	margin: 0;
}

.mc-head .ev-ag {
	align-self: flex-start;
}

.mc-p {
	margin: 0;
	max-width: 40ch;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.7;
}

.mc-head .mc-t1 {
	margin-top: clamp(6px, 1vw, 14px);
}

.mc-f {
	position: relative;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.mc-f img {
	position: absolute;
	inset: 0;
}

.mc-f1 {
	grid-column: 8 / -1;
	grid-row: 1;
	aspect-ratio: 16 / 10;
	margin-right: calc(-1 * clamp(16px, 4vw, 56px));
}

.mc-f2 {
	grid-column: 1 / 5;
	grid-row: 2;
	aspect-ratio: 3 / 2;
	margin-left: calc(-1 * clamp(16px, 4vw, 56px));
}

.mc-f3 {
	grid-column: 5 / 7;
	grid-row: 2;
	aspect-ratio: 4 / 5;
	margin-top: clamp(56px, 7vw, 120px);
}

.mc-t2 {
	grid-column: 8 / 12;
	grid-row: 2;
	align-self: center;
}

.mc-t3 {
	grid-column: 2 / 6;
	grid-row: 3;
	align-self: center;
}

.mc-f4 {
	grid-column: 7 / 11;
	grid-row: 3;
	aspect-ratio: 3 / 2;
}

.mc-f5 {
	grid-column: 10 / 12;
	grid-row: 3;
	align-self: end;
	aspect-ratio: 1;
	margin-bottom: calc(-1 * clamp(32px, 4vw, 64px));
	z-index: 2;
	box-shadow: 0 0 0 clamp(5px, .55vw, 8px) var(--bg);
}

/* ---------- Bande « Toutes les dates de la saison » (Papier) ---------- */
.ev-agenda {
	padding: clamp(26px, 2.8vw, 40px) 0;
}

.ev-agenda-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 28px;
}

.ev-agenda-in p {
	margin: 0;
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.1;
}

/* ---------- « Ce qu’on a vécu ensemble » (Nuit) ---------- */
.c-arch {
	padding: clamp(90px, 10vw, 150px) 0 clamp(80px, 9vw, 130px);
}

.arch-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 460px;
}

.arch-side p {
	margin: 0;
	line-height: 1.75;
	font-size: clamp(13px, 1.05vw, 15px);
	color: var(--fg2);
}

.yr {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	font-family: var(--f-label);
	font-weight: var(--l-weight);
	font-size: 11px;
	letter-spacing: var(--l-track);
	text-transform: uppercase;
	transition: background .3s, color .3s, border-color .3s;
	flex: 0 0 auto;
}

.chip:hover {
	border-color: var(--fg);
}

.chip.on {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

.c-arch .gal {
	align-items: flex-start;
	gap: clamp(14px, 1.8vw, 28px);
}

.c-arch .sl-arw {
	top: 42%;
}

.ac {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: clamp(260px, 23vw, 340px);
	min-width: 0;
}

.ac.wide {
	width: clamp(320px, 38vw, 560px);
}

.ac-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
	font: inherit;
	text-decoration: none;
}

.ac-fig {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.ac.wide .ac-fig {
	aspect-ratio: 16 / 10;
}

.ac-fig img,
.ac-fig video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.ac-btn:hover .ac-fig img,
.ac-btn:hover .ac-fig video {
	transform: scale(1.05);
}

.ac-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgb(var(--c-nuit-rgb) / .6);
	color: var(--c-papier);
}

.ac-play {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgb(var(--c-nuit-rgb) / .6);
	display: grid;
	place-items: center;
	color: var(--c-papier);
	transition: background .3s, color .3s;
}

.ac-btn:hover .ac-play {
	background: var(--verm);
	color: var(--c-blanc);
}

.ac-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: clamp(22px, 2.2vw, 32px);
	background: var(--c-papier);
	color: var(--c-foret);
	transition: background .35s;
}

.ac-btn:hover .ac-quote {
	background: var(--c-tilleul);
}

.ac-q {
	font-family: var(--f-title);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(28px, 2.5vw, 40px);
	line-height: .95;
	text-wrap: balance;
}

.ac-qb {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ac-qb img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
	flex: 0 0 auto;
}

.ac-cap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ac-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fg2);
}

.ac-t {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.05;
}

.ac-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg2);
}

/* Défilé de photos : une photo toutes les 3,5 s, en fondu d’une seconde (maquette : 2 à 4 photos ; jusqu’à 8 ici). */
.ac-defile .ac-ph {
	opacity: 0;
}

@keyframes ac-defile-2 { 0% { opacity: 1; } 36% { opacity: 1; } 50% { opacity: 0; } 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-3 { 0% { opacity: 1; } 24% { opacity: 1; } 33.33% { opacity: 0; } 90.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-4 { 0% { opacity: 1; } 18% { opacity: 1; } 25% { opacity: 0; } 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-5 { 0% { opacity: 1; } 14.29% { opacity: 1; } 20% { opacity: 0; } 94.29% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-6 { 0% { opacity: 1; } 11.9% { opacity: 1; } 16.67% { opacity: 0; } 95.24% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-7 { 0% { opacity: 1; } 10.2% { opacity: 1; } 14.29% { opacity: 0; } 95.92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-defile-8 { 0% { opacity: 1; } 8.93% { opacity: 1; } 12.5% { opacity: 0; } 96.43% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- Fiche d’un événement ---------- */
.fe-corps {
	padding: clamp(80px, 9vw, 130px) 0;
}

.fe-grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

.fe-texte {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.fe-prog-dl {
	margin: 4px 0 0;
}

.fe-texte h2 {
	margin: 0;
	font-size: clamp(46px, 5.4vw, 92px);
	line-height: .88;
}

.fe-prose {
	max-width: 62ch;
	line-height: 1.75;
	font-size: clamp(14px, 1.1vw, 16px);
}

.fe-prose h2,
.fe-prose h3 {
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.05;
	margin: 1.6em 0 .5em;
}

.fe-prose a {
	color: inherit;
}

.fe-infos {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fe-infos h3 {
	margin: 0;
	color: var(--kick);
}

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

.fe-infos li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.6;
}

.fe-infos li::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentcolor;
	flex: 0 0 auto;
	transform: translateY(-4px);
}

.fe-photos {
	padding: 0 0 clamp(80px, 9vw, 130px);
}

.fe-photos .gal {
	align-items: flex-start;
	gap: clamp(14px, 1.8vw, 28px);
}

.fe-photo {
	flex: 0 0 auto;
	width: clamp(260px, 34vw, 520px);
	aspect-ratio: 3 / 2;
	margin: 0;
	scroll-snap-align: start;
	background: var(--c-nuit-2);
}

.fe-retour {
	padding: clamp(26px, 2.8vw, 40px) 0;
}

/* Voyage rangé dans un projet : bandeau discret du projet (nom, phrase facultative), puis le
   voyage en plein écran, comme avant ; les deux tiennent dans le premier écran. */
.fe-tete {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.fe-tete > .evh {
	flex: 1 0 auto;
	min-height: 0;
}

.fe-tete .evh-in {
	padding-top: clamp(90px, 10vw, 160px);
}

.fe-axe {
	position: relative;
	z-index: 4;
	/* L’en-tête opaque (56 px) reste au-dessus. */
	padding: calc(56px + clamp(10px, 1.2vw, 16px)) 0 clamp(10px, 1.2vw, 16px);
}

.fe-axe-in {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px clamp(18px, 2.4vw, 36px);
}

.fe-axe-nom {
	margin: 0;
}

.fe-axe-t {
	color: inherit;
	text-decoration: none;
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1;
}

a.fe-axe-t:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.fe-axe-txt {
	flex: 1 1 30ch;
	margin: 0;
	max-width: 62ch;
	color: var(--fg2);
	line-height: 1.6;
	font-size: clamp(13px, 1vw, 15px);
	white-space: pre-line;
}

.fe-axe-lien {
	margin-left: auto;
}

.fe-axe-fl {
	display: none;
}

/* « Les grandes lignes » : quelques temps forts, puis la phrase sur les détails. */
.fe-lignes {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	max-width: 62ch;
	border-top: 1px solid var(--line);
	counter-reset: fe-ligne;
}

.fe-lignes li {
	position: relative;
	padding: 14px 0 14px 2.6em;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.2;
	counter-increment: fe-ligne;
}

.fe-lignes li::before {
	content: counter(fe-ligne, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--kick);
	font-family: var(--f-label);
	font-weight: var(--l-weight);
	font-size: 11px;
	letter-spacing: .14em;
}

.fe-lignes-note {
	margin: 0;
	max-width: 62ch;
	color: var(--fg2);
	line-height: 1.7;
	font-size: clamp(13px, 1vw, 15px);
}

/* « Aussi dans … » : les autres rendez-vous du projet, en cartes. */
.fe-autres {
	padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px);
}

.fe-photos + .fe-autres.amb-papier {
	padding-top: 0;
}

.fe-autres .prj-passes-tete {
	margin-top: 0;
}

/* Smartphone : le nom du projet porte la flèche, « Voir le projet » est masqué (place). */
@media (max-width: 640px) {
	.fe-axe-lien {
		display: none;
	}

	.fe-axe-t {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
	}

	.fe-axe-fl {
		display: inline-flex;
	}
}

/* ---------- Petits écrans ---------- */
@media (max-width: 899px) {
	.evh {
		min-height: 100vh;
		min-height: 100svh;
	}

	.evh-in {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: clamp(300px, 74vw, 420px);
	}

	.evh-t {
		font-size: clamp(58px, 17vw, 120px);
	}

	.evh-t.mid {
		font-size: clamp(50px, 13.5vw, 100px);
	}

	.evh-t.long {
		font-size: clamp(44px, 11.5vw, 86px);
	}

	.evh-panel {
		padding: 4px 18px 20px;
	}

	.bil-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bil-media {
		padding: 0 0 56px 56px;
	}

	.bil-b {
		width: 44%;
	}

	.pano-t {
		font-size: clamp(48px, 13vw, 96px);
	}

	.pano-media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.pano-grid {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.aff-mid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ea-slide {
		width: 84vw;
	}

	.ea-slide .ea-ph {
		aspect-ratio: 4 / 5;
	}

	.ea-over {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
	}

	.ea-over .ea-dest,
	.ea-dest {
		font-size: clamp(44px, 13vw, 80px);
	}

	.fe-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.ev-filt {
		padding-top: 78px;
	}

	/* Grande ouverture d’un événement (Imagine…) : titre et texte plus haut sur smartphone
	   (demandé par l’association le 23/10/2026). */
	.evh-in {
		padding-top: clamp(150px, 46vw, 300px);
	}

	.ev-filt-in {
		gap: 0 20px;
	}

	.ev-filt .filters {
		gap: 0 16px;
	}

	.bil-num {
		font-size: 25vw;
	}

	.aff-date .aff-num {
		font-size: 20vw;
	}

	.aff-big {
		flex-direction: column;
		align-items: flex-start;
	}

	.aff-dest {
		font-size: clamp(52px, 15vw, 100px);
	}

	.aff-big .aff-num {
		font-size: 16vw;
	}

	.aff-date .aff-m {
		font-size: 9vw;
	}

	.rub-t {
		font-size: clamp(46px, 13vw, 90px);
	}

	.mc {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 22px;
	}

	.mc-head {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.mc-f1 {
		grid-column: 2 / -1;
		grid-row: 2;
		aspect-ratio: 3 / 2;
	}

	.mc-t2 {
		grid-column: 2 / -1;
		grid-row: 3;
		align-self: start;
	}

	.mc-f2 {
		grid-column: 1 / 5;
		grid-row: 4;
		aspect-ratio: 4 / 3;
	}

	.mc-f3 {
		grid-column: 5 / -1;
		grid-row: 4;
		margin-top: 40px;
	}

	.mc-t3 {
		grid-column: 1 / 6;
		grid-row: 5;
		align-self: start;
	}

	.mc-f4 {
		grid-column: 2 / -1;
		grid-row: 6;
		margin-right: calc(-1 * clamp(16px, 4vw, 56px));
	}

	.mc-f5 {
		grid-column: 1 / 3;
		grid-row: 6;
		margin-bottom: -28px;
	}

	.ac {
		width: 72vw;
	}

	.ac.wide {
		width: 86vw;
	}

	.fe-photo {
		width: 80vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-defile .ac-ph {
		animation: none !important;
		opacity: 0;
	}

	.ac-defile .ac-ph:first-child {
		opacity: 1;
	}

	.evh-media img {
		animation: none;
	}
}

/* Fiche : souvenir (film ou récit) */
.fe-video {
	display: block;
	width: 100%;
	max-height: 80vh;
	aspect-ratio: 16 / 9;
	background: #000;
}

.fe-recit {
	margin: 0;
	aspect-ratio: auto;
	min-height: 0;
	max-width: 820px;
}

.rub-head[hidden],
.av-empty[hidden] {
	display: none !important;
}

/* Listes de cartes : sans marge ni puce de liste (la maquette utilise des blocs simples). */
.c-arch .gal,
.fe-photos .gal {
	margin: 0;
	list-style: none;
}

/* ---------- Affiche de l’événement (montrée en entier) ---------- */
.evt-affiche {
	padding: clamp(40px, 5vw, 80px) 0;
}

.evt-affiche-fig {
	margin: 0;
	display: flex;
	justify-content: center;
}

.evt-affiche-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 1000px);
	max-height: 85vh;
	box-shadow: 0 30px 70px -30px rgb(0 0 0 / .55);
}

/* ---------- Projets (page Nos événements) ----------
 * Section « Projet » : en-tête (surtitre, titre, texte) toujours affiché, puis les
 * rendez-vous dans une mise en page existante (plein écran, affiche, cartes), puis les
 * rendez-vous passés en petites cartes. Sans rendez-vous à venir : « Dates à venir ». */

.prj-k {
	color: var(--kick);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.prj-une {
	padding: clamp(80px, 9vw, 130px) 0 clamp(40px, 5vw, 70px);
}

.prj-une .prj-head {
	margin-bottom: 0;
}

.prj-une .prj-attente,
.prj-une .prj-passes {
	margin-top: clamp(32px, 4vw, 56px);
}

.prj-suite {
	padding: clamp(10px, 2vw, 30px) 0 clamp(70px, 8vw, 110px);
}

.prj-attente {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
	padding-top: clamp(18px, 2vw, 28px);
	border-top: 3px solid var(--fg);
}

.c-affiche .prj-attente {
	margin-top: clamp(36px, 4vw, 64px);
}

.c-liste .prj-attente {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.prj-attente:not(:has(.prj-img)) {
	grid-template-columns: minmax(0, 1fr);
}

.prj-img {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--c-nuit-2);
}

.prj-attente-txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.prj-dates {
	margin: 0;
	font-size: clamp(48px, 7vw, 120px);
	line-height: .85;
}

.prj-note {
	margin: 0;
	max-width: 46ch;
	line-height: 1.7;
}

.prj-rdv + .prj-rdv {
	margin-top: clamp(56px, 7vw, 100px);
}

.prj-passes {
	margin-top: clamp(56px, 7vw, 100px);
}

.prj-passes-t {
	display: block;
	margin-bottom: 18px;
	color: var(--kick);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.prj-passes-tete {
	margin-top: clamp(8px, 1vw, 16px);
}

@media (max-width: 899px) {
	.prj-attente {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}