/**
 * Selecteur de format et cartes de format — partage entre la fiche produit
 * (ecran 2) et l'accueil (ecran 1, brique 1).
 *
 * Extrait de produit.css au lot 3, sans changement de valeur : le handoff
 * renvoie explicitement a l'ecran 2 pour la specification de ces cartes, elles
 * doivent donc etre identiques des deux cotes. Les couleurs passent par les
 * tokens : aucune valeur hexadecimale n'est ecrite ici.
 */

/* --- Selecteur de format --- */
.odg-selecteur {
	margin-top: var(--odg-espace-28);
}

.odg-selecteur__intitule {
	display: block;
	margin-bottom: var(--odg-espace-12);
	font-size: var(--odg-texte-11);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odg-vert-fonce);
}

/*
 * Le champ natif reste dans le DOM en toutes circonstances. Il n'est masque
 * a l'oeil que lorsque le script a revele les cartes : sans JavaScript, la
 * classe --enrichi n'est jamais posee et la liste deroulante reste utilisable.
 */
.odg-selecteur__natif {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--odg-espace-8);
	font-size: var(--odg-texte-14);
}

.odg-selecteur__natif select {
	padding: 10px var(--odg-espace-12);
	border: 1px solid var(--odg-trait-fort);
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-papier);
}

.odg-selecteur--enrichi .odg-selecteur__natif {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.odg-selecteur__cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--odg-espace-12);
}

.odg-selecteur__cartes[hidden] {
	display: none;
}

/* --- Carte de format --- */
.odg-format {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--odg-espace-4);
	/* 16 px de padding ; la bordure de 2 px de l'etat choisi est compensee
	   par une bordure transparente, pour que la carte ne bouge pas. */
	padding: var(--odg-espace-16);
	min-height: 44px;
	text-align: left;
	border: 1px solid var(--odg-trait);
	border-radius: var(--odg-rayon-4);
	background-color: transparent;
	transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms, background-color 200ms;
}

.odg-format:hover:not([disabled]) {
	transform: translateY(-2px);
}

.odg-format--choisi {
	border: 2px solid var(--odg-vert-fonce);
	padding: calc(var(--odg-espace-16) - 1px);
	background-color: var(--odg-vert-clair);
}

.odg-format[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.odg-format__badge {
	position: absolute;
	top: -9px;
	left: 14px;
	padding: 2px var(--odg-espace-8);
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-vert-fonce);
	color: var(--odg-creme);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.odg-format__poids {
	font-size: var(--odg-texte-15);
	font-weight: 700;
	color: var(--odg-encre);
}

.odg-format__usage {
	font-size: var(--odg-texte-12);
	color: var(--odg-gris-texte);
}

.odg-format__prix {
	font-family: var(--odg-police-titre);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--odg-encre);
}

.odg-format__unitaire {
	font-size: var(--odg-texte-11);
	color: var(--odg-gris-texte);
}

.odg-format__rupture {
	font-size: var(--odg-texte-11);
	color: var(--odg-terracotta);
}

/* -------------------------------------------------------------------------
 * Ecrans etroits — handoff, « Ecran 4 — Mobile ».
 *
 * « Les trois formats empiles en pleine largeur : poids + usage a gauche, prix
 * a droite, memes etats de selection que sur desktop, hauteur de frappe
 * >= 44 px. »
 *
 * Le balisage de la carte est plat (poids, usage, prix, prix aux 100 g) et
 * partage avec le desktop : on ne l'enveloppe pas de <div> pour le mobile. Une
 * grille a deux colonnes suffit a poser les quatre elements — texte a gauche,
 * chiffres a droite — sans toucher a template-parts/carte-format.php.
 *
 * La regle vit ici et non dans produit.css : les memes cartes sont rendues dans
 * la brique 1 de l'accueil, qui ne charge pas la feuille de la fiche produit.
 * ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	.odg-selecteur__cartes {
		grid-template-columns: minmax(0, 1fr);
		/* 12 px : le badge « RECOMMANDÉ » deborde de 9 px vers le haut, il ne doit
		   pas mordre sur la carte precedente une fois les cartes empilees. */
		gap: var(--odg-espace-12);
	}

	.odg-format {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"poids    prix"
			"usage    unitaire"
			"rupture  rupture";
		align-items: center;
		column-gap: var(--odg-espace-16);
		row-gap: 0;
		/* 12 px + 12 px + 20 px de prix = 44 px de hauteur de frappe au minimum. */
		min-height: 44px;
		padding: var(--odg-espace-12) var(--odg-espace-16);
	}

	/* Meme compensation qu'en desktop : la bordure de 2 px ne doit pas decaler la carte. */
	.odg-format--choisi {
		padding: calc(var(--odg-espace-12) - 1px) calc(var(--odg-espace-16) - 1px);
	}

	.odg-format__poids    { grid-area: poids; }
	.odg-format__usage    { grid-area: usage; }
	.odg-format__rupture  { grid-area: rupture; }

	.odg-format__prix {
		grid-area: prix;
		text-align: right;
	}

	.odg-format__unitaire {
		grid-area: unitaire;
		text-align: right;
	}
}