/*
 * La carte produit et l'alternative — issue 12. Référence : planche 6,
 * maquette 3. Balisage : inc/carte.php, pel_alternative() dans inc/fiche.php.
 *
 * pel-alternative est un seul bloc pour la fiche (--inline), la ligne de
 * projet et la carte : le même article de remplacement, dessiné une fois.
 *
 * Valeurs de la planche ramenées à l'échelle : nom 17 en Karla 600 (Fraunces
 * jamais sous 22 px), légende 11,5 → 14, prix de l'alternative 12,5 → 14, marges
 * 12 → 12 et 16, vignette 48 → 56. Légende en encre douce, pas en bronze :
 * 4,36:1 sur champagne pâle (même arbitrage que les badges, issue 07).
 * Indisponible : la photo seule est grisée (décidé par Will le 25/09) ; à
 * 55 % sur toute la carte, le nom et le prix tombaient à 3,4:1.
 */

/* --- pel-alternative ------------------------------------------------------ */
.pel-alternative {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
}

.pel-alternative__legende {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales-legende);
	text-transform: uppercase;
}

.pel-alternative__article {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-xs);
}

.pel-alternative__vignette {
	flex-shrink: 0;
	width: var(--pel-vignette-s);
	height: var(--pel-vignette-s);
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
	object-fit: contain;   /* photo produit entière (#269) */
}

.pel-alternative__detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--pel-space-3xs);
	min-width: 0;
}

.pel-alternative__nom {
	position: relative;
	align-self: flex-start;
	margin: 0;
	color: var(--pel-encre);
	font-weight: 600;
}

/* Hors --inline, le lien du nom garde 44 px de cible sans pousser la ligne. */
.pel-alternative__nom--lien::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: calc((var(--pel-cible) - 1lh) / -2);
}

/* --etendu (fiche, --inline) : le nom est le lien, et toute la ligne est cliquable. */
.pel-alternative__nom--etendu {
	position: static;                    /* la zone du lien couvre l'article entier */
}

.pel-alternative__nom--etendu::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pel-alternative__prix {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pel-space-3xs) var(--pel-space-xs);
}

.pel-alternative__stock {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

/* --- pel-product-card ----------------------------------------------------- */
.pel-product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	box-shadow: var(--pel-shadow-s);
}

.pel-product-card__media {
	margin: var(--pel-space-xs) var(--pel-space-xs) 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
}

/* Photo produit : détourée sur blanc, montrée entière, jamais recadrée (#269). */
.pel-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Indisponible : la photo s'efface, le texte reste lisible. */
.pel-product-card.is-unavailable .pel-product-card__image {
	opacity: 0.55;
	filter: grayscale(1);
}

.pel-product-card__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-xs);
}

.pel-product-card__nom {
	margin: 0;
	font-family: var(--pel-font-texte);   /* Fraunces jamais sous 22 px (planche 2) */
	font-size: var(--pel-fs-body);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
}

.pel-product-card__lien {
	position: relative;
	color: var(--pel-encre);
	text-decoration: none;
}

/* 44 px de cible sans pousser la mise en page. */
.pel-product-card__lien::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: calc((var(--pel-cible) - 1lh) / -2);
}

.pel-product-card__lien:hover {
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

.pel-product-card__dispo {
	margin: 0;
}

/* Produit à options : « 3 tailles au choix », vers la fiche (#266). */
.pel-product-card__options {
	color: var(--pel-terre-foncee);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	text-underline-offset: var(--pel-soulignement);
}

/* Date choisie, état inconnu : la pastille renvoie à la fiche, qui sait. */
.pel-product-card__verifier {
	color: inherit;
	text-underline-offset: var(--pel-soulignement);
}

.pel-product-card__ajout {
	margin-top: auto;
	padding-top: var(--pel-space-3xs);
}

/* L'alternative vit DANS la carte, en pied, jamais ailleurs. */
.pel-product-card__alternative {
	padding: var(--pel-space-xs);
	border-top: var(--pel-filet) solid var(--pel-champagne);   /* décoratif */
	background: var(--pel-champagne-pale);
}