/* CLC Événements — vue en liste.
   ============================================================================
   Volontairement minimale : une ligne par événement, séparée par un filet.
   Pas de carte, pas d'ombre portée, pas de coin arrondi sur les lignes.

   La signature CLC (coin haut-gauche à 0, motif « élément d'appel »
   0 R 0 R, accent) est réservée à la pastille de date : c'est le seul
   repère visuel de la liste, et lui seul porte la couleur. Multiplier les
   accents dans une liste dense la rendrait illisible.

   Couleurs personnalisables par bloc via variables CSS
   (--clc-text, --clc-text-soft, --clc-accent, --clc-font), avec les
   valeurs du site en défaut.

   Modes : clc-evliste-date-pastille / -court / -long
           clc-evliste-avec-image (+ clc-evliste-img-carre / -paysage)
           clc-evliste-sans-image
           clc-evliste-filets
*/

.clc-evliste-wrap {
	font-family: var( --clc-font, inherit );
	container-type: inline-size;
}

.clc-evliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clc-evliste-item {
	margin: 0;
	padding: 0;
}

/* Filet entre les lignes, jamais avant la première ni après la dernière. */
.clc-evliste-filets .clc-evliste-item + .clc-evliste-item {
	border-top: 1px solid var( --clc-evl-filet, color-mix( in srgb, currentColor 14%, transparent ) );
}

/* ── La ligne ────────────────────────────────────────────────────────── */

.clc-evliste-lien {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 6px;
	text-decoration: none;
	color: var( --clc-text, #111 );
}

.clc-evliste-lien:hover .clc-evliste-titre,
.clc-evliste-lien:focus-visible .clc-evliste-titre {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Focus clavier distinct du survol. */
.clc-evliste-lien:focus-visible {
	outline: 2px solid var( --clc-text, #111 );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: no-preference ) {
	.clc-evliste-lien {
		transition: background-color 0.12s ease;
	}
}

.clc-evliste-lien:hover {
	background-color: color-mix( in srgb, var( --clc-accent, #fed647 ) 18%, transparent );
}

/* ── Pastille de date ────────────────────────────────────────────────── */
/* Apparence : badge commun, voir clc-datebadge.css (2.11.0). */

/* ── Date en texte (formats « court » et « long ») ───────────────────── */

.clc-evliste-datetexte {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --clc-text, #111 );
}

.clc-evliste-date-court .clc-evliste-datetexte {
	width: 5.5em;
}

.clc-evliste-date-long .clc-evliste-datetexte {
	width: 11em;
	text-transform: lowercase;
}

.clc-evliste-date-long .clc-evliste-datetexte::first-letter {
	text-transform: uppercase;
}

/* ── Visuel ──────────────────────────────────────────────────────────── */

.clc-evliste-visuel {
	flex: none;
	overflow: hidden;
	/* Motif « surface » du design system. */
	border-radius: 0 10px 10px 10px;
	background-color: color-mix( in srgb, currentColor 8%, transparent );
}

.clc-evliste-img-carre .clc-evliste-visuel {
	width: 64px;
	aspect-ratio: 1;
}

.clc-evliste-img-paysage .clc-evliste-visuel {
	width: 104px;
	aspect-ratio: 8 / 5;
}

.clc-evliste-visuel img,
.clc-evliste-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
}

.clc-evliste-novisuel {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Corps de la ligne ───────────────────────────────────────────────── */

.clc-evliste-corps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* sans quoi un titre long empêche la ligne de rétrécir */
}

.clc-evliste-titre {
	font-size: var( --clc-evl-title-size, 18px );
	font-weight: 600;
	line-height: 1.25;
	text-wrap: pretty;
}

.clc-evliste-meta,
.clc-evliste-extrait {
	font-size: 14px;
	color: var( --clc-text-soft, #5a5751 );
	line-height: 1.4;
}

.clc-evliste-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 7px;
}

.clc-evliste-sep {
	opacity: 0.55;
}

.clc-evliste-extrait {
	margin-top: 2px;
}

/* ── Pied et état vide ───────────────────────────────────────────────── */

.clc-evliste-pied {
	margin-top: 14px;
}

.clc-evliste-agenda {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: var( --clc-text, #111 );
	text-decoration: none;
	padding: 7px 15px;
	background-color: var( --clc-accent, #fed647 );
	border: 1.5px solid var( --clc-text, #111 );
	border-radius: 0 12px 0 12px;
	box-shadow: 3px 3px 0 rgba( 17, 17, 17, 0.85 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.clc-evliste-agenda {
		transition: transform 0.1s ease, box-shadow 0.1s ease;
	}
}

.clc-evliste-agenda:hover {
	transform: translateY( -2px );
	box-shadow: 4px 5px 0 rgba( 17, 17, 17, 0.85 );
}

.clc-evliste-agenda:focus-visible {
	outline: 2px solid var( --clc-text, #111 );
	outline-offset: 3px;
}

.clc-evliste-vide {
	font-family: var( --clc-font, inherit );
	color: var( --clc-text-soft, #5a5751 );
	font-style: italic;
	margin: 0;
}

/* ── Colonnes étroites ───────────────────────────────────────────────────
   Réglé au conteneur et non à l'écran : le bloc peut être posé dans une
   colonne latérale sur un grand écran. */

@container ( max-width: 380px ) {
	.clc-evliste-lien {
		gap: 12px;
		padding: 11px 4px;
	}

	.clc-evliste-img-paysage .clc-evliste-visuel {
		width: 76px;
	}

	.clc-evliste-date-long .clc-evliste-datetexte {
		width: auto;
	}

	/* En dessous de cette largeur, date et titre ne tiennent plus côte à
	   côte : la date passe au-dessus du titre. */
	.clc-evliste-date-court .clc-evliste-lien,
	.clc-evliste-date-long .clc-evliste-lien {
		flex-wrap: wrap;
	}

	.clc-evliste-date-court .clc-evliste-datetexte,
	.clc-evliste-date-long .clc-evliste-datetexte {
		width: 100%;
		order: -1;
		font-size: 13px;
	}
}

/* ── Mode contrasté de Windows ───────────────────────────────────────── */

@media ( forced-colors: active ) {
	.clc-evliste-pastille {
		border: 1px solid;
	}

	.clc-evliste-filets .clc-evliste-item + .clc-evliste-item {
		border-top: 1px solid;
	}
}

/* ── Aperçu dans l'éditeur Gutenberg ─────────────────────────────────── */
/* Chaque ligne de la liste est un lien vers l'événement, et le pied en
   contient un second vers l'agenda. Dans l'éditeur, un clic dessus fait
   quitter la page d'édition au lieu de sélectionner le bloc — au mieux on
   perd le fil, au pire un brouillon non enregistré.
   .block-editor-block-list__block n'existe que dans l'éditeur (le bloc est
   dynamique : rien de ce conteneur n'est rendu sur le site), la règle ne
   peut donc pas fuir côté public. Si une version future de WordPress
   renommait cette classe, les liens redeviendraient simplement cliquables
   dans l'éditeur : rien ne casse.
   pointer-events neutralise aussi le survol, ce qui signale au passage que
   la ligne n'est pas actionnable ici. */
.block-editor-block-list__block .clc-evliste-lien,
.block-editor-block-list__block .clc-evliste-agenda {
	pointer-events: none;
}