/**
 * Page « Events » (/events/) — styles propres à la page.
 * Mise en file automatique par functions.php (clé de vue « events »).
 * Composants partagés : style.css (/components/). Aucune valeur de couleur,
 * de taille de texte ou de rayon en dur : variables --fsa-* seulement.
 *
 * 13/11/2026 — refonte 0.9.0, direction C (lot P4, docs/85-refonte-design/lots/
 * p4-lieux-editorial.md). Préférence du propriétaire : une LISTE CALME (nom, dates,
 * ville, un lien en tête de lecture) et une GRANDE PHOTO pour le prochain événement.
 * - Rang : filets, pas de boîte ; date en typographie à gauche (mois et année en
 *   donnée mono, jours en Poppins), nom, lieu, liens ; résumé, rôle et sociétés en
 *   second plan (aucun texte retiré) ; petite photo à droite s'il en a une.
 * - Prochain (premier à venir, .fsa-events__card--next) : grande photo 16:9 à gauche,
 *   ou l'habit de la page (anneau, treillis du lot S-b) sur le bleu ; texte à droite.
 * - État vide : la même forme qu'un rang, un carré bleu à l'anneau à la place de la date.
 */

/* Ouverture éditoriale : pied resserré (même réserve que Media et Contact). */
.fsa-events__hero .fsa-hero-inner__grid { padding-bottom: clamp(2.25rem, 4vw, 3.25rem); }

/* Têtes des deux bandes : la liste suit un filet fort, l'écart de tête se resserre. */
:is(.fsa-events__upcoming, .fsa-events__past) .fsa-sec-head { margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }

/* ── Liste ─────────────────────────────────────────────────────────────── */
.fsa-events__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fsa-fg-strong);
}
.fsa-events__list > li { margin: 0; min-width: 0; border-bottom: 1px solid var(--fsa-rule); }

/* ── Rang : date | nom + corps | photo ─────────────────────────────────── */
.fsa-events__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 7fr) minmax(0, 2.6fr); /* trame des actualités */
	grid-template-areas:
		"date head head"
		"date body body";
	grid-template-rows: auto 1fr;
	column-gap: var(--fsa-col-gap);
	padding-block: 24px;
}
.fsa-events__card > * { min-width: 0; margin: 0; }
:where(.fsa-events__card) :where(p, h3, dl, dd) { margin: 0; }

.fsa-events__head { grid-area: head; }
.fsa-events__tags { margin-bottom: 10px !important; }
.fsa-events__title {
	max-width: 34ch;
	font: 500 clamp(1.25rem, 1.08rem + .6vw, 1.625rem)/1.2 var(--fsa-font-title);
	letter-spacing: -.015em;
	color: var(--fsa-fg-strong);
	text-wrap: balance;
}

/* Date : la typographie fait le pavé (plus de fond pointillé). */
.fsa-events__date { grid-area: date; }
.fsa-events__when { display: grid; justify-items: start; gap: 6px; }
.fsa-events__when .fsa-mono { color: var(--fsa-fg-soft); }
.fsa-events__days {
	font: 500 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1 var(--fsa-font-title);
	letter-spacing: -.035em;
	color: var(--fsa-fg-strong);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Période à cheval sur deux mois : « Jun 30 – Jul 2 », en plus petit corps */
.fsa-events__date--span .fsa-events__days { font-size: var(--fsa-fs-h4); letter-spacing: -.012em; white-space: normal; }
/* À venir : la date prend l'accent du ton (lien). */
.fsa-events__card--upcoming .fsa-events__days { color: var(--fsa-link); }
.fsa-events__card--upcoming .fsa-events__when .fsa-mono { color: var(--fsa-link); }

/* Corps : le lieu et les liens en tête de lecture ; résumé, rôle, sociétés en second plan. */
.fsa-events__body { grid-area: body; display: flex; flex-direction: column; align-items: flex-start; padding-top: 12px; }
.fsa-events__summary { order: 2; max-width: 62ch; margin-top: 10px !important; font-size: var(--fsa-fs-card); line-height: 1.55; color: var(--fsa-fg-soft); }
.fsa-events__meta {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	font-size: var(--fsa-fs-m);
	line-height: 1.45;
}
.fsa-events__meta > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.fsa-events__meta dt { font: 500 var(--fsa-fs-label, .875rem)/1.4 var(--fsa-font-sans); letter-spacing: 0; color: var(--fsa-fg-soft); } /* libellé (passe G, P1-8) */
.fsa-events__meta dd { color: var(--fsa-fg); overflow-wrap: anywhere; }
.fsa-events__links { order: 3; display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 12px !important; }
@media (max-width: 1080px) {
	.fsa-events__links { margin-top: 18px !important; }
}

/* Invitation sous la liste des événements à venir */
.fsa-events__meet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin-top: 1.75rem;
	color: var(--fsa-fg-soft);
}

/* ── Photo (« Event photo » de l'écran Events, clé imageId) ───────────────
   Couleurs naturelles, cadre borné, recadrage automatique (object-fit), cadrage
   facultatif _fi_image_focus. Rang : 3:2 à droite (≥ 1024), à droite en petit
   (601–1023), bandeau 16:9 sous la date (≤ 600). */
.fsa-events__photo {
	grid-area: photo;
	position: relative;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--fsa-band);
}
.fsa-events__photo .fsa-events__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fsa-events__photo--habit > .fsa-field { background: var(--fsa-lat-bg); }
.fsa-events__card--photo {
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 7fr) minmax(0, 2.6fr);
	grid-template-areas:
		"date head photo"
		"date body photo";
}
.fsa-events__card--photo .fsa-events__photo { align-self: start; }

/* ── Le prochain événement : grande photo (ou l'habit) | texte ─────────── */
.fsa-events__card--next,
.fsa-events__card--next.fsa-events__card--photo {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas:
		"photo date"
		"photo head"
		"photo body";
	grid-template-rows: auto auto 1fr;
	row-gap: 0;
	padding-block: 0 36px;
}
.fsa-events__card--next .fsa-events__photo { aspect-ratio: 16 / 9; align-self: start; }
.fsa-events__card--next .fsa-events__date { padding-bottom: 18px; }
.fsa-events__card--next .fsa-events__when { grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 14px; }
.fsa-events__card--next .fsa-events__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.12; letter-spacing: -.025em; max-width: 20ch; }
.fsa-events__list:has(> li > .fsa-events__card--next) { border-top: 0; }
.fsa-events__list > li:has(> .fsa-events__card--next) { border-bottom-color: var(--fsa-fg-strong); }

@media (max-width: 1023px) {
	.fsa-events__card,
	.fsa-events__card--photo,
	.fsa-events__card--next,
	.fsa-events__card--next.fsa-events__card--photo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"date"
			"head"
			"body";
		grid-template-rows: none;
		row-gap: 10px;
	}
	.fsa-events__card--photo:not(.fsa-events__card--next) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
		grid-template-areas:
			"date photo"
			"head photo"
			"body photo";
		grid-template-rows: auto auto 1fr;
		column-gap: 1.75rem;
	}
	.fsa-events__card--next,
	.fsa-events__card--next.fsa-events__card--photo {
		grid-template-areas:
			"photo"
			"date"
			"head"
			"body";
		padding-bottom: 28px;
	}
	.fsa-events__card--next .fsa-events__photo { margin-bottom: 8px; }
	.fsa-events__card--next .fsa-events__date { padding-bottom: 0; }
	/* Date sur une ligne : « Mar 2026  17–21 ». */
	.fsa-events__when { grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 12px; }
	.fsa-events__days { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
	.fsa-events__body { padding-top: 0; }
}
@media (max-width: 600px) {
	.fsa-events__card--photo:not(.fsa-events__card--next) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"date"
			"photo"
			"head"
			"body";
	}
	.fsa-events__card--photo:not(.fsa-events__card--next) .fsa-events__photo { aspect-ratio: 16 / 9; }
	.fsa-events__card { padding-block: 22px; }
}

/* ── État vide (aucun événement à venir) ──────────────────────────────── */
/* La forme d'un rang : un carré bleu portant l'anneau (habit de la page) à la place de
   la date, le texte à la place du nom et du corps ; sous un filet fort, sans boîte. */
.fsa-events__card.fsa-events__empty {
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 7fr) minmax(0, 2.6fr);
	grid-template-areas: "date text text";
	grid-template-rows: auto;
	align-items: center;
	padding-block: 20px 0;
	border-top: 1px solid var(--fsa-fg-strong);
}
.fsa-events__empty-fig { grid-area: date; position: relative; overflow: hidden; aspect-ratio: 1; max-width: 8rem; }
.fsa-events__empty-text { grid-area: text; }
:where(.fsa-events__empty-text) > * { margin: 0; }
.fsa-events__empty-title {
	font: 500 clamp(1.25rem, 1.08rem + .6vw, 1.625rem)/1.2 var(--fsa-font-title);
	letter-spacing: -.015em;
	color: var(--fsa-fg-strong);
	text-wrap: balance;
}
.fsa-events__empty-text > p:not(.fsa-events__empty-title) { max-width: 38rem; margin-top: .6rem; color: var(--fsa-fg-soft); }
.fsa-events__empty .fsa-actions { margin-top: 1.25rem; }
@media (max-width: 600px) {
	.fsa-events__card.fsa-events__empty { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "date text"; align-items: start; column-gap: 1rem; padding-top: 22px; }
}