/* Bloc cnd/image-cards — signature §8 (variante overlay) + variante plain (maquette Formations).
   Racine scopée .cnd.cnd-image-cards (correctif post-QA). */
.cnd.cnd-image-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-4);
}
.cnd.cnd-image-cards .cnd-image-card {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface);
}

/* Variante overlay (signature §8 : dégradé sombre + titre blanc). */
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card {
	min-height: 220px;
	max-height: 300px;
	display: flex;
	align-items: flex-end;
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 0%, var(--overlay-strong) 100%);
	z-index: 1;
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__content {
	position: relative;
	z-index: 2;
	padding: var(--s-4);
	color: var(--on-image);
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: var(--on-image);
	text-decoration: none;
	margin: 0 0 var(--s-1);
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--on-image);
	margin: 0 0 var(--s-2);
}

/* Variante plain (maquette Formations : image au-dessus, titre dessous, pas de voile). */
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card {
	border: 1px solid var(--line);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content {
	padding: var(--s-4);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
	margin: 0 0 var(--s-1);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-3);
	margin: 0;
}

/* Chips de services et bouton en variante simple (v0.12.0, hub des centres). */
.cnd.cnd-image-cards .cnd-image-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: var(--s-2) 0 0;
}
.cnd.cnd-image-cards .cnd-image-card__chips .cnd-chip { margin: 0; }
.cnd.cnd-image-cards .cnd-image-card__chips > li:not(.cnd-chip) { display: flex; margin: 0; }
/* Chip lien (v0.28.4, accueil) : même pastille (contraste inchangé), soulignée au survol. */
.cnd.cnd-image-cards .cnd-image-card__chips a.cnd-chip--link { min-height: 32px; }
.cnd.cnd-image-cards .cnd-image-card__chips a.cnd-chip--link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-1);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card { display: flex; flex-direction: column; }
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content { flex: 1 1 auto; }
/* Bouton calé en bas de carte : alignés d'une carte à l'autre quels que soient les chips. */
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content .cnd-btn { margin-top: auto; }
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content > :nth-last-child(2) { margin-bottom: var(--s-3); }

/* Colonnes imposées (v0.8.0) : nombre exact au bureau, rangées équilibrées sur tablette (5 → 3 + 2,
   4 → 2 + 2), grille fluide (une colonne) sur mobile. */
.cnd.cnd-image-cards.cnd-image-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cnd.cnd-image-cards.cnd-image-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cnd.cnd-image-cards.cnd-image-cards--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) {
	.cnd.cnd-image-cards.cnd-image-cards--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cnd.cnd-image-cards.cnd-image-cards--cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
	.cnd.cnd-image-cards[class*="cnd-image-cards--cols-"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- Filtre (v0.7.0) : pastilles au style des pilules d'ancres, étiquette sur chaque carte. ---------- */
.cnd.cnd-image-cards-filterable {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
/* Sans JavaScript (pas de classe cnd-js sur <html>), pas de pastilles : toutes les cartes restent
   visibles. La classe est posée dans <head> avant le premier rendu : aucun décalage. */
html:not(.cnd-js) .cnd.cnd-image-cards-filterable .cnd-image-cards__filter {
	display: none;
}
.cnd.cnd-image-cards-filterable .cnd-image-cards__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
/* Libellé visible du filtre (option filterLabelVisible, recette Sport du 05/11 : maquette). */
.cnd.cnd-image-cards-filterable .cnd-image-cards__filter-label {
	align-self: center;
	margin-right: 4px;
	font-size: var(--t-caption);
	font-weight: 600;
	color: var(--ink);
}
.cnd.cnd-image-cards-filterable button.cnd-filter-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-caption);
	line-height: 1.2;
	color: var(--brand-strong);
	background: var(--surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--r-pill);
	padding: 7px 16px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cnd.cnd-image-cards-filterable button.cnd-filter-pill:hover,
.cnd.cnd-image-cards-filterable button.cnd-filter-pill[aria-pressed="true"] {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--on-strong);
}
.cnd.cnd-image-cards-filterable button.cnd-filter-pill:focus {
	background: var(--surface);
	border-color: var(--brand-border);
	color: var(--brand-strong);
}
.cnd.cnd-image-cards-filterable button.cnd-filter-pill[aria-pressed="true"]:focus {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--on-strong);
}
.cnd.cnd-image-cards .cnd-image-card[hidden] {
	display: none;
}
/* Cartes filtrables : texte plus long (étiquette + description) — pas de hauteur maximale. */
.cnd.cnd-image-cards.cnd-image-cards--filterable.cnd-image-cards--overlay .cnd-image-card {
	max-height: none;
	min-height: 300px;
}
.cnd.cnd-image-cards .cnd-image-card__tag {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-caption);
	line-height: 1.3;
	margin: 0 0 var(--s-1);
}
.cnd.cnd-image-cards.cnd-image-cards--overlay .cnd-image-card__tag {
	color: var(--on-image);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__tag {
	color: var(--ink-3);
}
/* Cartes filtrables, plus hautes : le texte (étiquette comprise) monte dans la zone claire de la photo.
   Voile renforcé dès le tiers de la carte (tokens --overlay / --overlay-strong). */
.cnd.cnd-image-cards.cnd-image-cards--filterable.cnd-image-cards--overlay .cnd-image-card__overlay {
	background: linear-gradient(to bottom, transparent 0%, var(--overlay) 35%, var(--overlay-strong) 100%);
}

/* ---------- v0.24.0 (maquette Sport, « Nos sports ») ----------
   Carte blanche bordée, photo 180 px en haut, titre Outfit 21, description 14 px, centres en pied
   sous un filet (12 px), lien fléché ; toute la carte est cliquable (lien étiré), bordure de
   l'univers au survol. */
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card:has(.cnd-image-card__where, .cnd-image-card__arrow) {
	position: relative;
	border-radius: var(--r-lg);
	transition: border-color .2s ease;
}
.cnd.cnd-image-cards.cnd-image-cards--arrow .cnd-image-card:has(.cnd-image-card__arrow):hover {
	border-color: var(--brand);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card:has(.cnd-image-card__where, .cnd-image-card__arrow) .cnd-image-card__content {
	gap: 10px;
	padding: 20px 22px 22px;
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card:has(.cnd-image-card__where, .cnd-image-card__arrow) .cnd-image-card__title {
	font-size: 21px;
	margin: 0;
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card:has(.cnd-image-card__where, .cnd-image-card__arrow) .cnd-image-card__description {
	flex: 1 1 auto;
	font-size: var(--t-small);
	line-height: 1.55;
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__where {
	align-self: stretch;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: 1.5;
	color: var(--ink-3);
}
.cnd.cnd-image-cards.cnd-image-cards--plain .cnd-image-card__content > .cnd-image-card__where:nth-last-child(2) {
	margin-bottom: 0;
}
.cnd.cnd-image-cards .cnd-image-card__arrow {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-small);
	color: var(--brand-strong);
	text-decoration: none;
}
.cnd.cnd-image-cards .cnd-image-card__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.cnd.cnd-image-cards .cnd-image-card__arrow:focus-visible {
	outline: none;
}
.cnd.cnd-image-cards .cnd-image-card__arrow:focus-visible::after {
	outline: 2px solid var(--brand-strong);
	outline-offset: 2px;
}

/* Carrousel (recette du 05/11/2026, attribut `carousel`, fiches centres) : la grille devient la piste du
   carrousel partagé ; chaque carte est une diapositive (largeur réglée par --cnd-per-view du carrousel). */
.cnd.cnd-image-cards.cnd-image-cards--carousel {
	display: flex;
	align-items: stretch;
}
.cnd.cnd-image-cards.cnd-image-cards--carousel > .cnd-image-card {
	height: auto;
}