/* Cartes immersives (cnd/immersive-cards, v0.35.0) : accueil, « Tout pour votre chien » et « Trouvez un
   centre ». Photo pleine carte, couleur de l'univers de chaque carte (pastille, filet bas, voile au survol).

   v0.35.2 (recette du 06/11) : texte et appel toujours affichés, à toutes les largeurs ; seul effet au survol
   de la souris, le zoom de la photo.

   Contraste : texte blanc sur le voile #1D2327, à 70 % au moins sur les 70 % bas de la carte, où se trouvent
   le titre, le texte et l'appel (dégradé de bas en haut) : 5,8:1 au pire, sur un pixel blanc de la photo
   (AA : 4,5:1). La pastille d'univers garde le couple
   bouton du design system (--brand-btn / --brand-on, ≥ 4,5:1 dans les 6 univers). */
.cnd.cnd-immersive-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0 0;
	padding: 0;
}
.cnd.cnd-immersive-cards.cnd-immersive-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cnd.cnd-immersive-cards.cnd-immersive-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cnd.cnd-immersive-cards .cnd-immersive-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	min-height: 340px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--ink);
	isolation: isolate;
}
/* Filet à la couleur de l'univers, au pied de la carte. */
.cnd.cnd-immersive-cards .cnd-immersive-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	z-index: 2;
	background: var(--brand);
	pointer-events: none;
}
.cnd.cnd-immersive-cards .cnd-immersive-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: 0;
	transform: scale(1.001);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(29, 35, 39, .86) 0%, rgba(29, 35, 39, .70) 70%, rgba(29, 35, 39, .08) 96%, rgba(29, 35, 39, 0) 100%);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__body {
	position: relative;
	z-index: 2;
	padding: var(--s-5) var(--s-5) calc(var(--s-5) + 6px);
	color: var(--on-image);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__eyebrow {
	display: inline-block;
	margin: 0 0 var(--s-3);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--brand-btn);
	color: var(--brand-on);
	font-family: var(--font-body);
	font-size: var(--t-caption);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .02em;
}
.cnd.cnd-immersive-cards .cnd-immersive-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--on-image);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__link,
.cnd.cnd-immersive-cards .cnd-immersive-card__link:hover,
.cnd.cnd-immersive-cards .cnd-immersive-card__link:focus,
.cnd.cnd-immersive-cards .cnd-immersive-card__link:visited {
	color: var(--on-image);
	text-decoration: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}
/* Lien étiré : toute la carte est cliquable, un seul arrêt au clavier. */
.cnd.cnd-immersive-cards .cnd-immersive-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--r-lg);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__link:focus-visible {
	outline: none;
}
.cnd.cnd-immersive-cards .cnd-immersive-card__link:focus-visible::before {
	outline: 3px solid var(--brand-strong);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 5px var(--on-image);
}
/* Hauteur commune (3 lignes de texte et l'appel) : les titres d'une rangée restent alignés. */
.cnd.cnd-immersive-cards .cnd-immersive-card__reveal {
	min-height: 96px;
	margin-top: var(--s-2);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__text {
	margin: 0 0 var(--s-3);
	font-family: var(--font-body);
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--on-image);
}
.cnd.cnd-immersive-cards .cnd-immersive-card__cta {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--on-image);
	border-bottom: 2px solid var(--brand);
	padding-bottom: 2px;
}

/* Ordinateur (souris) : photo zoomée au survol ou au focus clavier, seul effet. */
@media (hover: hover) and (pointer: fine) {
	.cnd.cnd-immersive-cards .cnd-immersive-card:hover .cnd-immersive-card__image,
	.cnd.cnd-immersive-cards .cnd-immersive-card:focus-within .cnd-immersive-card__image {
		transform: scale(1.06);
	}
}

@media (max-width: 1199px) and (min-width: 900px) {
	.cnd.cnd-immersive-cards .cnd-immersive-card__body {
		padding: var(--s-4) var(--s-4) calc(var(--s-4) + 6px);
	}
	.cnd.cnd-immersive-cards .cnd-immersive-card__title {
		font-size: 1.25rem;
	}
}

/* Sous 900 px sans rangée défilante : 2 colonnes. Avec la rangée (data-cnd-rail, réglée dans le design
   system), cartes à 78 % de la largeur. */
@media (max-width: 899px) {
	.cnd.cnd-immersive-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cnd.cnd-immersive-cards .cnd-immersive-card {
		min-height: 300px;
		aspect-ratio: 4 / 5;
	}
}
/* Tablette : deux cartes et le début de la troisième dans la rangée (78 % les rendait trop hautes). */
@media (min-width: 600px) and (max-width: 899px) {
	.cnd.cnd.cnd.cnd-immersive-cards[data-cnd-rail] > .cnd-immersive-card {
		flex-basis: 44%;
	}
}
@media (max-width: 599px) {
	.cnd.cnd-immersive-cards:not([data-cnd-rail]) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnd.cnd-immersive-cards .cnd-immersive-card__image {
		transition: none;
	}
	.cnd.cnd-immersive-cards .cnd-immersive-card:hover .cnd-immersive-card__image,
	.cnd.cnd-immersive-cards .cnd-immersive-card:focus-within .cnd-immersive-card__image {
		transform: none;
	}
}