/* CLC Événements — carrousel.
   Couleurs personnalisables par bloc via variables CSS
   (--clc-text, --clc-text-soft, --clc-accent, --clc-accent-dark),
   avec les couleurs d'origine en valeurs par défaut.
   Modes : clc-anim-fade / clc-anim-slide / clc-anim-none,
           clc-fmt-paysage / clc-fmt-portrait (affiches A4). */

/* La marge verticale n'est plus qu'un défaut (2.8.0) : le panneau
   Dimensions natif la surcharge en ligne dès qu'une valeur est saisie,
   zéro compris. Jusqu'ici elle était écrite en dur ici et aucun réglage de
   l'éditeur ne pouvait l'atteindre — le bloc étant rendu côté serveur, sa
   balise racine ne recevait pas les styles des supports. */
.clc-wrap {
	font-family: var(--clc-font, Arial, sans-serif);
	padding: 20px 0;
	container-type: inline-size;
}

.clc-main {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	align-items: start;
}

/* En portrait, la colonne image est plus étroite. */
.clc-wrap.clc-fmt-portrait .clc-main {
	grid-template-columns: minmax(0, 420px) 1fr;
}

.clc-col-img {
	position: relative;
}

.clc-ev-track {
	position: relative;
	overflow: hidden;
	border-radius: 0 30px 30px 30px;
}

.clc-fmt-paysage .clc-ev-track {
	height: 340px;
}

.clc-fmt-portrait .clc-ev-track {
	aspect-ratio: 210 / 297;
	max-width: 420px;
}

/* Bandeau Facebook : ratio 1600 × 600, image entière sur fond flou. */
.clc-fmt-bandeau .clc-ev-track {
	aspect-ratio: 1600 / 600;
}

.clc-fmt-bandeau .clc-main {
	grid-template-columns: 2.5fr 1fr;
}

/* Toutes les slides sont superposées ; .active est visible. */
.clc-ev-slide {
	position: absolute;
	inset: 0;
	background-color: #ececec;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	pointer-events: none;
}

/* Portrait : l'affiche est toujours visible en entier.
   Le vide autour est comblé par la même image très floue (façon YouTube) :
   ::before = image floue en cover, ::after = affiche nette en contain. */
.clc-fmt-portrait .clc-ev-slide,
.clc-fmt-bandeau .clc-ev-slide,
.clc-fit-contain .clc-ev-slide {
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--clc-poster-bg, #f3f3f3);
	overflow: hidden;
}

.clc-fmt-portrait .clc-ev-slide::before,
.clc-fmt-bandeau .clc-ev-slide::before,
.clc-fit-contain .clc-ev-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	filter: blur(22px) brightness(0.9) saturate(1.15);
	transform: scale(1.2);
}

.clc-fmt-portrait .clc-ev-slide::after,
.clc-fmt-bandeau .clc-ev-slide::after,
.clc-fit-contain .clc-ev-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

/* Animations */
.clc-anim-fade .clc-ev-slide {
	transition: opacity 1.5s ease;
}

/* Diapo : la nouvelle image recouvre l'ancienne en glissant (revu en 2.8.2).
   Jusqu'ici l'entrante glissait EN MÊME TEMPS que l'ancienne s'effaçait en
   fondu : pendant presque une seconde on voyait deux images translucides se
   chevaucher, et le fond gris de la piste apparaissait par transparence.
   Le principe est maintenant celui d'une vraie diapositive : l'image
   entrante est opaque dès le départ et passe PAR-DESSUS (z-index 2) ;
   l'ancienne ne bouge pas et ne s'efface pas — elle est simplement
   recouverte, puis retirée sans transition une fois cachée.
   D'où l'absence d'opacité dans la transition : seule la translation est
   animée. Et d'où la classe « leaving », posée par le script pendant la
   durée du mouvement — sans elle l'ancienne repartirait aussitôt vers son
   côté d'origine, ce qui produisait justement l'effet jugé disgracieux. */
.clc-anim-diapo .clc-ev-slide {
	opacity: 1;
	transition: transform 0.9s ease;
	transform: translateX(100%);
}

.clc-anim-diapo.clc-rev .clc-ev-slide {
	transform: translateX(-100%);
}

/* Indispensable, et facile à oublier : « .clc-ev-slide.active » du socle ne
   compte que deux classes, alors que la règle de sens inverse ci-dessus en
   compte trois. Sans ce rappel, l'image entrante d'un retour en arrière
   resterait collée à -100 % — le mode glissement avait déjà son équivalent
   plus bas, pour la même raison. */
.clc-anim-diapo.clc-rev .clc-ev-slide.active {
	transform: none;
}

/* L'entrante garde le z-index 1 du socle : c'est la SORTANTE qu'on fait
   passer dessous, en 0. Le réflexe inverse — pousser l'active à 2 — la
   faisait passer au-dessus des flèches (z-index 2 elles aussi) et, étant
   plus loin dans le DOM, elle gagnait : les flèches devenaient
   incliquables. Vérifié après coup, le clic était bien intercepté. */
.clc-anim-diapo .clc-ev-slide.leaving,
.clc-anim-diapo.clc-rev .clc-ev-slide.leaving {
	transform: none;
	z-index: 0;
}

/* Glissement : défilement continu — l'ancienne image sort à gauche
   pendant que la nouvelle entre par la droite (inversé avec ‹). */
.clc-anim-slide .clc-ev-slide {
	opacity: 1;
	transition: transform 0.9s ease;
	transform: translateX(100%);
}

.clc-anim-slide.clc-rev .clc-ev-slide {
	transform: translateX(-100%);
}

.clc-anim-slide .clc-ev-slide.leaving {
	transform: translateX(-100%);
}

.clc-anim-slide.clc-rev .clc-ev-slide.leaving {
	transform: translateX(100%);
}

.clc-ev-slide.active,
.clc-anim-slide.clc-rev .clc-ev-slide.active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	z-index: 1;
}


.clc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border: 2.5px solid var(--clc-text, #111);
	width: 40px;
	height: 48px;
	font-size: 28px;
	font-weight: 900;
	cursor: pointer;
	color: var(--clc-text, #111);
	z-index: 2;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clc-arrow:hover {
	background: var(--clc-accent, #f5d000);
}

.clc-prev {
	left: 10px;
	border-radius: 0 8px 8px 0;
}

.clc-next {
	right: 10px;
	border-radius: 8px 0 0 8px;
}

/* 2.5.10 : pastilles en haut à gauche du visuel, même position sur
   ordinateur et sur mobile. En bas au centre (jusqu'en 2.5.9), elles
   tombaient sur le sujet de l'affiche neuf fois sur dix ; le coin haut
   gauche est la zone la plus souvent neutre sur nos visuels, et c'est
   aussi le sens de lecture. Sur mobile, cela supprime du même coup le
   second groupe sous l'image, qui ajoutait de la hauteur au bloc. */
.clc-ev-dots {
	position: absolute;
	top: 10px;
	left: 12px;
	display: flex;
	gap: 10px;
	z-index: 2;
}

/* Posées sur une image quelconque, les pastilles ne peuvent compter ni sur
   un fond clair ni sur un fond sombre : blanc translucide pour les
   inactives, blanc plein pour l'active, et une ombre portée courte qui les
   détache d'une affiche claire. Plus d'accent jaune — il se perdait sur les
   visuels colorés et jurait avec la plupart de nos affiches. */
.clc-ev-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	position: relative;
}

/* Cible tactile élargie sans agrandir la pastille : 19 px de côté, soit
   exactement le pas entre deux pastilles (9 px + 10 px de gouttière) — les
   zones se touchent sans se chevaucher. */
.clc-ev-dot::after {
	content: "";
	position: absolute;
	inset: -5px;
}

.clc-ev-dot.active {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.clc-col-info {
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.clc-ev-info {
	display: none;
	/* 2.5.8 : pleine largeur systématique. .clc-col-info est en
	   « align-items: flex-start » : sans width, .clc-ev-info se réduit à la
	   largeur de son contenu et le bouton du pied n'a nulle part où aller. */
	width: 100%;
}

.clc-ev-info.active {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 0;
}

/* Le panneau d'infos arrive en fondu + léger glissement vertical. */
.clc-anim-fade .clc-ev-info.active,
.clc-anim-diapo .clc-ev-info.active,
.clc-anim-slide .clc-ev-info.active {
	animation: clcInfoIn 1s ease;
}

@keyframes clcInfoIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.clc-slide-title {
	font-size: var(--clc-title-size, 32px);
	font-size: clamp(17px, 5.5cqw, var(--clc-title-size, 32px));
	font-weight: 700;
	color: var(--clc-text, #111);
	line-height: 1.2;
	margin-bottom: 12px;
}

/* Badge date (2.5.5) — variante E2 validée sur maquette : même radius
   « coin carré en haut-gauche, arrondi ailleurs » que .clc-ev-track
   juste à côté, pour rattacher le badge au reste de l'identité CLC
   plutôt que d'introduire une nouvelle forme. Actif seulement quand
   l'attribut de bloc « showDateBadge » est coché — remplace alors la
   ligne de texte « Date : » plutôt que de s'ajouter à côté (voir le
   calcul de $metas dans clc_vignettes_render_evenements). */
/* 2.5.8 : bloc de flux plutôt que rangée flex — le badge y flotte et le
   texte l'habille. flow-root contient le flottant sans hack de clearfix :
   le pied de diapositive, qui suit, démarre bien sous l'ensemble. */
.clc-ev-body {
	display: flow-root;
}

.clc-ev-badge {
	/* Apparence : voir clc-datebadge.css (2.11.0). Ici, la seule mise en
	   page du carrousel : le badge flotte à gauche du titre. */
	float: left;
	margin: 2px 14px 8px 0;
}

/* .clc-ev-textcol retiré du rendu en 2.5.8 (badge flottant). */
.clc-ev-body .clc-slide-title {
	margin-bottom: 6px;
}

.clc-slide-meta {
	font-size: var(--clc-meta-size, 18px);
	font-size: clamp(12px, 3cqw, var(--clc-meta-size, 18px));
	color: var(--clc-text-soft, #444);
	line-height: 1.8;
}

.clc-slide-meta strong {
	color: var(--clc-text, #111);
}

.clc-slide-excerpt {
	font-size: var(--clc-meta-size, 16px);
	font-size: clamp(12px, 2.8cqw, var(--clc-meta-size, 16px));
	color: var(--clc-text-soft, #444);
	line-height: 1.6;
	margin-top: 4px;
}

.clc-layout-ev-superpose .clc-slide-excerpt {
	color: #ddd;
}

/* 2.5.13 : le bouton adopte partout la taille qu'il avait sous 768 px.
   À 18 px et 10/24 px de remplissage, il pesait sur grand écran autant que
   le titre de la séance alors qu'il n'est qu'un lien secondaire — la carte
   se lisait par son bouton avant de se lire par son affiche. Plus de
   clamp() sur la taille de texte : une seule valeur, identique d'un bout à
   l'autre des largeurs, c'est ce qui rend le bloc cohérent quand plusieurs
   carrousels se suivent sur une page à des largeurs de colonne différentes. */
.clc-slide-btn {
	display: inline-block;
	border: 2px solid var(--clc-text, #111);
	border-radius: 30px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--clc-text, #111);
	margin-top: 14px;
	align-self: flex-start;
}

.clc-slide-btn:visited {
	color: var(--clc-text, #111);
}

.clc-slide-btn:hover,
.clc-slide-btn:focus {
	background: var(--clc-accent, #f5d000);
	color: var(--clc-text, #111);
}

/* 2.5.8 : le bouton « + d'infos » vit maintenant dans .clc-ev-pied, à
   droite des informations pratiques — il n'est donc plus un enfant flex
   direct de .clc-ev-info et l'ancien « align-self: flex-end » (2.5.4)
   n'avait plus de cible. Le pied aligne le bouton à droite dans tous les
   cas, de sorte que le réglage « Justifier le bouton à droite » décrit
   désormais le comportement par défaut. Le width:100% du bloc, lui, est
   remonté sur .clc-ev-info : le pied en a besoin en permanence. */

.clc-footer {
	text-align: left;
	padding-top: 14px;
}

.clc-btn-agenda {
	display: inline-block;
	background: var(--clc-accent, #f5d000);
	border: 2px solid var(--clc-accent-dark, #c9aa00);
	font-size: 18px;
	font-weight: 700;
	padding: 10px 28px;
	text-decoration: none;
	color: var(--clc-text, #111);
	border-radius: 4px;
}

.clc-btn-agenda:visited {
	color: var(--clc-text, #111);
}

.clc-btn-agenda:hover,
.clc-btn-agenda:focus {
	filter: brightness(0.92);
	color: var(--clc-text, #111);
}

@media (max-width: 768px) {
	.clc-wrap {
		padding: 12px 0;
	}

	.clc-main,
	.clc-wrap.clc-fmt-portrait .clc-main,
	.clc-wrap.clc-fmt-bandeau .clc-main {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.clc-fmt-paysage .clc-ev-track {
		height: 200px;
	}

	.clc-fmt-portrait .clc-ev-track {
		max-width: 100%;
	}

	.clc-ev-track {
		border-radius: 0 16px 16px 16px;
	}

	.clc-arrow {
		width: 32px;
		height: 40px;
		font-size: 20px;
	}

	.clc-prev {
		left: 4px;
	}

	.clc-next {
		right: 4px;
	}

	.clc-slide-title {
		margin-bottom: 6px;
	}

	.clc-slide-meta {
		line-height: 1.5;
		margin-bottom: 0;
	}

	/* Taille et remplissage désormais identiques à ceux du bureau
	   (2.5.13) : seule la marge reste propre au petit écran. */
	.clc-slide-btn {
		margin-top: 8px;
	}

	.clc-btn-agenda {
		font-size: 13px;
		padding: 7px 18px;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.clc-footer {
		width: 100%;
		padding-top: 10px;
	}

}

/* ---------- Carrousel CLC (bloc carrousel d'images) ---------- */

.clc-carrousel {
	font-family: var(--clc-font, Arial, sans-serif);
	position: relative;
	padding: 8px 0;
}

a.clc-ev-slide {
	display: block;
}

.clc-car-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 18px 34px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: left;
}

@media (max-width: 768px) {
	.clc-carrousel .clc-ev-track {
		height: 220px !important;
	}

	.clc-car-caption {
		font-size: 14px;
		padding: 32px 12px 30px;
	}
}

/* ---------- Dispositions du carrousel Événements ---------- */

/* Image à droite */
.clc-layout-ev-droite .clc-main {
	grid-template-columns: 1fr 2fr;
}

.clc-layout-ev-droite .clc-col-img {
	order: 2;
}

.clc-layout-ev-droite .clc-col-info {
	order: 1;
}

/* Image en haut, texte en bas */
.clc-layout-ev-haut .clc-main {
	grid-template-columns: 1fr;
}

/* Texte superposé sur l'image */
.clc-layout-ev-superpose .clc-main {
	display: block;
	position: relative;
}

.clc-layout-ev-superpose .clc-col-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 22px 20px 16px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
	border-radius: 0 0 30px 30px;
}

.clc-layout-ev-superpose .clc-slide-title {
	color: #fff;
	margin-bottom: 6px;
}

.clc-layout-ev-superpose .clc-slide-meta {
	color: #ddd;
	line-height: 1.5;
}

.clc-layout-ev-superpose .clc-slide-meta strong {
	color: #fff;
}

.clc-layout-ev-superpose .clc-slide-btn {
	color: #fff;
	border-color: #fff;
	margin-top: 10px;
}

.clc-layout-ev-superpose .clc-slide-btn:hover,
.clc-layout-ev-superpose .clc-slide-btn:focus {
	background: var(--clc-accent, #f5d000);
	color: #111;
	border-color: #111;
}

/* Compact (bandeau) */
.clc-layout-ev-compact .clc-main {
	grid-template-columns: 240px 1fr;
	gap: 18px;
	align-items: center;
}

.clc-layout-ev-compact.clc-fmt-paysage .clc-ev-track {
	height: 160px;
}

.clc-layout-ev-compact .clc-slide-title {
	font-size: clamp(16px, 3.5cqw, 22px);
	margin-bottom: 6px;
}

.clc-layout-ev-compact .clc-ev-info.active {
	display: block;
}

.clc-layout-ev-compact .clc-slide-meta {
	display: inline-block;
	margin-right: 16px;
	line-height: 1.5;
}

.clc-layout-ev-compact .clc-slide-btn {
	padding: 6px 16px;
	margin-top: 10px;
	display: inline-block;
}

.clc-layout-ev-compact .clc-arrow {
	width: 30px;
	height: 36px;
	font-size: 18px;
}

/* Dispositions spécifiques mobile (prioritaires sur la disposition principale) */
@media (max-width: 768px) {
	.clc-mlayout-superpose .clc-main {
		display: block;
		position: relative;
	}

	.clc-mlayout-superpose .clc-col-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding: 14px 14px 12px;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
		border-radius: 0 0 16px 16px;
	}

	.clc-mlayout-superpose .clc-slide-title {
		color: #fff;
		margin-bottom: 4px;
	}

	.clc-mlayout-superpose .clc-slide-meta {
		color: #ddd;
		line-height: 1.4;
	}

	.clc-mlayout-superpose .clc-slide-meta strong {
		color: #fff;
	}

	.clc-mlayout-superpose .clc-slide-btn {
		color: #fff;
		border-color: #fff;
	}

	.clc-mlayout-compact .clc-main {
		display: grid;
		grid-template-columns: 130px 1fr;
		gap: 10px;
		align-items: center;
	}

	.clc-mlayout-compact.clc-fmt-paysage .clc-ev-track {
		height: 100px;
	}

	.clc-mlayout-compact .clc-col-info {
		position: static;
		padding: 0;
		background: none;
	}

	.clc-mlayout-compact .clc-slide-title {
		font-size: 16px;
		color: var(--clc-text, #111);
		margin-bottom: 4px;
	}

	.clc-mlayout-compact .clc-slide-meta {
		display: inline-block;
		margin-right: 10px;
		color: var(--clc-text-soft, #444);
	}

	.clc-mlayout-compact .clc-slide-meta strong {
		color: var(--clc-text, #111);
	}

	.clc-mlayout-compact .clc-ev-info.active {
		display: block;
	}

	.clc-mlayout-compact .clc-slide-btn {
		padding: 5px 12px;
		margin-top: 6px;
		color: var(--clc-text, #111);
		border-color: var(--clc-text, #111);
	}

	.clc-mlayout-compact .clc-slide-excerpt {
		display: none;
	}

	.clc-mlayout-superpose .clc-slide-excerpt {
		color: #ddd;
	}

	.clc-mlayout-compact .clc-arrow {
		display: none;
	}

}

/* ---------- Alignement du texte ---------- */

.clc-align-left { text-align: left; }
.clc-align-center { text-align: center; }
.clc-align-right { text-align: right; }

.clc-align-center .clc-col-info { align-items: center; }
.clc-align-right .clc-col-info { align-items: flex-end; }
.clc-align-center .clc-slide-btn { align-self: center; }
.clc-align-right .clc-slide-btn { align-self: flex-end; }
.clc-align-center .clc-footer { text-align: center; }
.clc-align-right .clc-footer { text-align: right; }

/* ---------- Pied de diapositive (2.5.8) ---------- */
/* Heure, lieu et durée sur une ligne, bouton « + d'infos » poussé au bout de
   cette même ligne par « margin-left: auto ». Quand la place manque, le
   bouton passe seul à la ligne suivante — et y reste collé à droite, la
   marge automatique agissant aussi sur une ligne flex isolée. Aucun
   media query : c'est le contenu qui décide, pas la largeur d'écran.
   Placé en fin de fichier à dessein — plusieurs règles de disposition
   (.clc-layout-ev-*, .clc-mlayout-*) ciblent .clc-slide-btn avec la même
   spécificité (0,2,0) ; l'ordre source tranche, il faut donc passer après. */

.clc-ev-pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 6px;
	clear: both;
}

.clc-ev-pratique {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 2px;
	/* flex:1 pour occuper la ligne et repousser le bouton ; min-width:0 pour
	   qu'un nom de lieu à rallonge se coupe au lieu d'élargir le pied. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Les dispositions compactes espacent les métas avec un margin-right hérité
   d'une mise en page en ligne ; dans le pied, c'est column-gap qui s'en
   charge — sinon les deux s'additionnent. */
.clc-ev-pied .clc-slide-meta {
	margin-right: 0;
	margin-bottom: 0;
	line-height: 1.4;
}

.clc-ev-pied .clc-slide-btn {
	flex: none;
	margin-top: 0;
	margin-left: auto;
	align-self: center;
}


/* ---------- Corps resserré : badge + titre sans extrait (2.5.9) ---------- */
/* Un titre d'une ligne n'habille pas un badge de 64 px de haut : le
   flottant laisse un vide à sa droite sous le titre, et le pied démarre
   sous le badge plutôt que sous le titre. Dans ce seul cas, on abandonne
   le flottant pour une grille de deux colonnes : le badge tient la colonne
   de gauche sur toute la hauteur, le titre et le pied s'empilent à sa
   droite. La hauteur morte disparaît, l'ordre de lecture ne bouge pas.

   « auto » plutôt qu'une largeur fixe en première colonne, et la gouttière
   portée par le badge plutôt que par column-gap : sans badge (date en
   texte), la colonne se réduit à zéro et rien n'est décalé — la même règle
   sert donc les deux cas sans sélecteur conditionnel.

   Les deux rangées explicites sont ce qui rend « grid-row: 1 / -1 »
   fiable : dans une grille purement implicite, -1 retombe sur la première
   ligne et le badge ne s'étendrait pas. */

.clc-ev-info.clc-ev-serre.active {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: min-content min-content;
	column-gap: 0;
	row-gap: 6px;
	align-items: start;
}

.clc-ev-serre .clc-ev-body {
	display: contents;
}

.clc-ev-serre .clc-ev-body > * {
	grid-column: 2;
}

.clc-ev-serre .clc-ev-badge {
	grid-column: 1;
	grid-row: 1 / -1;
	float: none;
	margin: 0 14px 0 0;
}

.clc-ev-serre .clc-slide-title {
	margin-bottom: 0;
}

.clc-ev-serre .clc-ev-pied {
	grid-column: 2;
	clear: none;
}

/* Même resserrement sur la disposition compacte en mobile : l'extrait y est
   masqué par la feuille de style (et non absent du rendu), la classe
   .clc-ev-serre posée par PHP ne peut donc pas le savoir. Règles répétées
   plutôt que factorisées : une media query ne peut pas partager un bloc de
   déclarations avec une règle hors media query. Placé en fin de fichier
   pour passer après « .clc-mlayout-compact .clc-ev-info.active { display:
   block } », de même spécificité. */
@media (max-width: 768px) {
	.clc-mlayout-compact .clc-ev-info.active {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: min-content min-content;
		column-gap: 0;
		row-gap: 6px;
		align-items: start;
	}

	.clc-mlayout-compact .clc-ev-body {
		display: contents;
	}

	.clc-mlayout-compact .clc-ev-body > * {
		grid-column: 2;
	}

	.clc-mlayout-compact .clc-ev-badge {
		grid-column: 1;
		grid-row: 1 / -1;
		float: none;
		margin: 0 14px 0 0;
	}

	.clc-mlayout-compact .clc-slide-title {
		margin-bottom: 0;
	}

	.clc-mlayout-compact .clc-ev-pied {
		grid-column: 2;
		clear: none;
	}
}


/* ---------- Flèches sur petit écran (2.5.10) ---------- */
/* « Petit écran » ne veut pas dire « écran tactile » : une fenêtre étroite
   sur ordinateur passe par la même media query. La disposition compacte
   masquait donc les flèches à des visiteurs qui ont une souris et aucun
   autre moyen évident de faire défiler — le balayage n'existe pas là.
   On les rétablit, mais au survol seulement, pour ne pas encombrer un bloc
   déjà ramassé. « hover: hover » et « pointer: fine » restreignent la
   règle aux vrais pointeurs : sur téléphone et tablette, rien ne change et
   le balayage reste le seul contrôle.
   :focus-within est indispensable ici — sans lui, un bouton à opacité 0
   resterait focalisable au clavier sans jamais devenir visible. */
@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
	.clc-wrap.clc-mlayout-compact .clc-arrow {
		display: flex;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.clc-wrap.clc-mlayout-compact:hover .clc-arrow,
	.clc-wrap.clc-mlayout-compact:focus-within .clc-arrow {
		opacity: 1;
	}
}


/* ---------- Pastilles sur petit écran (2.5.11) ---------- */
/* À 9 px et 10 px de gouttière, les pastilles pesaient autant sur une
   affiche vue sur téléphone que la vignette elle-même. Divisées par trois,
   resserrées, collées à l'angle et passées à la verticale : elles lisent
   comme une réglette de position dans la marge plutôt que comme un contrôle
   posé sur le visuel. La colonne occupe aussi une zone moins disputée que la
   bande horizontale, qui longeait souvent un titre d'affiche.
   Largeur identique pour toutes : l'active s'allonge au lieu de grossir,
   sinon son bord droit dépasserait de la colonne. */
@media (max-width: 768px) {
	.clc-ev-dots {
		top: 3px;
		left: 3px;
		flex-direction: column;
		gap: 2px;
	}

	/* Décoratives sur petit écran : le balayage est le contrôle, et une
	   cible de 3 px ne se vise pas au doigt — un curseur « pointer » sur un
	   élément qu'on ne peut pas atteindre induirait en erreur. */
	.clc-ev-dot {
		width: 2px;
		height: 2px;
		/* À 2 px, l'ombre ne peut plus être un halo : plus large que la
		   pastille, elle la ferait lire comme une tache floue. Rayon réduit
		   à 1 px et pastille inactive remontée à 65 % de blanc, pour ne pas
		   disparaître sur une affiche claire maintenant qu'elle est deux
		   fois plus petite. */
		background: rgba(255, 255, 255, 0.65);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
		cursor: default;
		pointer-events: none;
	}

	.clc-ev-dot::after {
		content: none;
	}

	.clc-ev-dot.active {
		height: 6px;
		border-radius: 1px;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
	}
}


/* ---------- Marge du bloc dans l'éditeur (2.8.1) ---------- */
/* Sur le site, la marge verticale est portée par .clc-wrap : le PHP compose
   la balise racine et y injecte les styles des supports natifs.
   Dans l'éditeur, non — l'aperçu est rendu par une route maison qui ignore le
   contexte du bloc, et c'est le CONTENEUR du bloc qui reçoit les styles
   natifs, via useBlockProps(). Résultat en 2.8.0 : la marge saisie
   s'appliquait au conteneur pendant que le padding par défaut de .clc-wrap
   restait en place à l'intérieur — les deux s'additionnaient, et la valeur
   par défaut ne pouvait jamais être réduite.

   On déplace donc la marge d'un cran dans l'éditeur : .clc-wrap n'en porte
   plus, et le conteneur du bloc reçoit la même valeur par défaut. Toute
   valeur saisie arrive en style EN LIGNE sur ce conteneur et l'emporte
   naturellement sur la règle ci-dessous, zéro compris.

   .block-editor-block-list__block n'existe que dans l'éditeur : aucune de ces
   deux règles ne peut atteindre le site public. */
.block-editor-block-list__block .clc-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

.block-editor-block-list__block[data-type="clc/evenements"] {
	padding-top: 20px;
	padding-bottom: 20px;
}


/* ---------- Galerie : flèches, icône plein écran (2.9.0) ---------- */

/* Les flèches sont une affordance : elles annoncent que ça défile. Une fois
   le geste connu, elles n'ont plus de raison de rester sur l'image.
   Deux publics, deux règles, et surtout deux media queries distinctes : sur
   écran tactile il n'y a pas de survol pour les faire revenir, donc elles
   sont retirées franchement une fois le premier balayage réussi ; à la
   souris elles restent accessibles, simplement effacées au repos. */
@media ( hover: none ) {
	.clc-carrousel.clc-geste-connu .clc-arrow {
		display: none;
	}
}

@media ( hover: hover ) and ( pointer: fine ) {
	.clc-carrousel.clc-survol-connu .clc-arrow {
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	/* :focus-within est indispensable : sans lui, une flèche à opacité nulle
	   resterait atteignable au clavier sans jamais devenir visible. */
	.clc-carrousel.clc-survol-connu:hover .clc-arrow,
	.clc-carrousel.clc-survol-connu:focus-within .clc-arrow {
		opacity: 1;
	}
}

.clc-car-plein {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 0 8px 8px 8px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

/* L'icône ne s'efface qu'au pointeur fin. Sur écran tactile elle reste
   visible : sans survol pour la révéler, la cacher la rendrait inatteignable
   — il ne resterait que le double-tap, peu fiable et rien ne l'annoncerait. */
@media ( hover: hover ) and ( pointer: fine ) {
	.clc-car-plein {
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.clc-carrousel:hover .clc-car-plein,
	.clc-carrousel:focus-within .clc-car-plein {
		opacity: 1;
	}
}

/* Plein écran natif et repli CSS portent les mêmes déclarations, mais en
   deux règles séparées à dessein : un navigateur qui ne connaît pas
   « :fullscreen » invaliderait toute la liste de sélecteurs, y compris le
   repli — c'est-à-dire exactement le cas où il sert. */
.clc-carrousel:fullscreen {
	background: #000;
	padding: 0;
}

.clc-carrousel:fullscreen .clc-ev-track {
	height: 100% !important;
	border-radius: 0 !important;
}

/* En plein écran, l'image entière prime sur le remplissage : une affiche
   recadrée en « cover » perdrait ses bords, ce qu'on cherche justement à
   éviter en agrandissant. */
.clc-carrousel:fullscreen .clc-ev-slide {
	background-size: contain;
	background-repeat: no-repeat;
}

.clc-carrousel.clc-plein-repli {
	position: fixed;
	inset: 0;
	z-index: 99998;
	margin: 0;
	padding: 0;
	background: #000;
}

.clc-carrousel.clc-plein-repli .clc-ev-track {
	height: 100% !important;
	border-radius: 0 !important;
}

.clc-carrousel.clc-plein-repli .clc-ev-slide {
	background-size: contain;
	background-repeat: no-repeat;
}