/**
 * Carte produit — photo puis bloc de texte coloré.
 *
 * Figma : carte 398 × 572 px, photo 292 px (51 %), corps 280 px (49 %) —
 * les mêmes proportions que la carte actualité. Titre de 20 px en deux lignes,
 * le champion en capitales au-dessus du nom du produit ; texte de 16 px.
 * La hauteur n'est jamais fixée ici : les cartes s'égalisent via la piste du
 * carousel, ce qui absorbe les descriptions de longueurs différentes.
 *
 * Emplacement : assets/css/components/card-produit.css
 */

.card-produit {
	/* width autant que height : la carte est posée dans un conteneur flex qui
	   lui laisse sa largeur de colonne, mais sans cette déclaration elle se
	   dimensionne sur son contenu. Une photographie étroite rétrécissait alors
	   toute la carte, et la rangée perdait son alignement. */
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* ── Photo ─────────────────────────────────────────────────── */

/* flex: none + min-height: 0 : sans eux la zone s'étire à la hauteur
   intrinsèque de l'image et l'aspect-ratio n'est plus respecté. */
.card-produit__media {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 0;
	aspect-ratio: 398 / 292;   /* proportions Figma */
	overflow: hidden;
	/* Le crème ne se voit que sur un produit sans photographie : ailleurs, la
	   photo le recouvre. */
	background-color: var(--color-bg);
}

/* Ni photographie ni image de repli : la marque en filigrane, qui se lit
   « photographie à venir » là où un aplat nu passait pour une panne. */
.card-produit__marque {
	width: 34%;
	max-width: 96px;
	height: auto;
	opacity: 0.16;
}

/* cover : la photo occupe toute la zone, quel que soit le format du fichier
   confié à l'équipe. */
.card-produit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Bloc coloré ───────────────────────────────────────────── */

.card-produit__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4);
	/* Figma : 36 px au-dessus du titre, autant sous le bouton. */
	padding: var(--space-6) var(--space-5);
	text-align: center;
}

/* Deux lignes dans un seul titre : le champion et le produit se lisent d'un
   bloc, mais chacun garde sa ligne quelle que soit la longueur de l'autre. */
.card-produit__titre {
	font-size: var(--fs-lead);        /* Figma : 20 px */
	line-height: var(--lh-heading);
	color: var(--color-text-inverse);
}

.card-produit__champion,
.card-produit__nom {
	display: block;
}

.card-produit__champion {
	text-transform: uppercase;
}

.card-produit__desc {
	font-size: var(--fs-body);        /* Figma : 16 px */
	line-height: var(--lh-heading);
	color: var(--color-text-inverse);
}

.card-produit__bouton {
	align-self: center;
	margin-block-start: auto;   /* collé au bas, quelle que soit la longueur du texte */
}

/* ── Variantes de couleur ──────────────────────────────────── */

.card-produit--orange .card-produit__corps {
	background-color: var(--card-orange-bg);
}

.card-produit--gold .card-produit__corps {
	background-color: var(--card-gold-bg);
}

.card-produit--green .card-produit__corps {
	background-color: var(--card-green-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. Le texte y passe au vert. */
.card-produit--sand .card-produit__corps {
	background-color: var(--card-sand-bg);
}

.card-produit--sand .card-produit__titre,
.card-produit--sand .card-produit__desc {
	color: var(--color-text);
}