/**
 * Tuile d'animation — photo ou vidéo, puis bandeau de légende coloré.
 *
 * Figma : tuiles de 396 à 398 px de large, de hauteurs libres, bandeau de
 * 113 px, légende de 32 px en capitales initiales. Le bandeau recouvre le bas
 * de la photo dans la maquette ; ici il se pose dessous, ce qui revient au même
 * — il est opaque — et évite un positionnement absolu.
 *
 * Emplacement : assets/css/components/card-animation.css
 */

.card-animation {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xxl);
}

/* ── Média ─────────────────────────────────────────────────── */

/* La zone rogne l'agrandissement au survol : sans elle, la photo déborderait
   par-dessus le bandeau de légende. */
.card-animation__media {
	display: block;
	overflow: hidden;
}

/* Le composant vidéo impose un cadre de 744 × 412 et ses propres angles ; dans
   une tuile, c'est la photo qui donne la hauteur et la tuile qui rogne. */
.card-animation__media.video {
	aspect-ratio: 4 / 5;
	border-radius: 0;
	background: none;
}

/* Et son aperçu remplit ce cadre en cover ; ici la photo garde ses
   proportions, comme dans toutes les autres tuiles. */
.card-animation__media.video .card-animation__img {
	height: auto;
	object-fit: fill;
}

/* Au lancement, le composant escamote l'aperçu — la tuile perdrait sa hauteur
   et la mosaïque se réorganiserait sous les yeux. On lui garde sa place et le
   lecteur vient se poser dessus. */
.card-animation__media.video--lance .card-animation__img {
	display: block;
	visibility: hidden;
}

.card-animation__media.video--lance .video__cadre {
	position: absolute;
	inset: 0;
}

/* Une proportion commune, et non celle de chaque photographie.

   Les tuiles tiraient leur hauteur de l'image : entre un format 3:4 et un
   panoramique 2,2:1, les colonnes se désalignaient et les bandeaux de légende
   flottaient à des niveaux sans rapport. Le décalage de la mosaïque vient
   désormais du nombre de tuiles par colonne, qui diffère d'une unité, et non
   du hasard des cadrages. */
.card-animation__media {
	aspect-ratio: 4 / 5;
}

.card-animation__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Les scènes de terrain placent leurs sujets au centre ou légèrement
	   au-dessus ; un cadrage centré leur convient, à la différence des
	   portraits des bandeaux de page. */
	object-position: center;
	transition: transform var(--duration) var(--ease);
}

/* Zoom au survol. Le sélecteur porte sur la tuile entière et non sur le média :
   survoler la légende agrandit la photo aussi, la tuile se lit d'un bloc. */
.card-animation:hover .card-animation__img,
.card-animation__media:focus-visible .card-animation__img {
	transform: scale(1.06);
}

/* ── Légende ───────────────────────────────────────────────── */

.card-animation__legende {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Figma : bandeau de 113 px sur une tuile de 396. Une hauteur minimale
	   plutôt que fixe, pour qu'une légende sur deux lignes tienne quand même. */
	min-block-size: 113px;
	padding: var(--space-4) var(--space-5);
	font-size: var(--fs-h3);          /* Figma : 32 px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-align: center;
	color: var(--color-text-inverse);
}

/* ── Variantes ─────────────────────────────────────────────── */

.card-animation--vert .card-animation__legende {
	background-color: var(--card-green-bg);
}

.card-animation--ambre .card-animation__legende {
	background-color: var(--card-amber-bg);
}

.card-animation--or .card-animation__legende {
	background-color: var(--card-gold-bg);
}

.card-animation--orange .card-animation__legende {
	background-color: var(--card-orange-bg);
}

/* Le sable est le seul aplat clair de la série : le blanc n'y tiendrait pas,
   la maquette le montre d'ailleurs à peine lisible. La légende y passe au vert,
   comme sur la carte produit. */
.card-animation--sable .card-animation__legende {
	background-color: var(--card-sand-bg);
	color: var(--color-text);
}


/* Le zoom est un agrément, pas une information. */
@media (prefers-reduced-motion: reduce) {

	.card-animation__img {
		transition: none;
	}

	.card-animation:hover .card-animation__img,
	.card-animation__media:focus-visible .card-animation__img {
		transform: none;
	}

}