/**
 * Bloc « Fiche produit ».
 *
 * Ne porte que sa mise en page : le panneau, la répartition visuel / contenu,
 * les rythmes verticaux entre sections et l'apparence des éléments qui lui sont
 * propres. Le visuel, la note, les offres et les points forts / faibles
 * viennent de composants partagés, dont l'apparence vit dans la feuille des
 * composants — c'est ce qui permettra à la variante « Test produit »
 * d'afficher les mêmes données dans une mise en page héros sans dupliquer une
 * seule règle.
 *
 * Encapsulation : chaque règle est portée par .artefact-block afin de primer
 * sur les styles globaux du thème sans recourir à !important.
 */

/* Panneau légèrement contrasté : la fiche se détache du fil éditorial, et les
   cartes d'offres blanches y ressortent sans changer d'apparence. */
.artefact-block.artefact-product {
	padding: 2.5rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 20px;
	background-color: var(--artefact-row-bg);
}

/* --------------------------------------------------------------------------
 * Corps : visuel et contenu
 *
 * En flex plutôt qu'en grille : le composant du visuel ne rend rien lorsque le
 * Produit n'a pas d'image, et le contenu occupe alors toute la largeur sans
 * qu'aucune classe modificatrice soit nécessaire.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-product__body {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

/* Le visuel repose sur un fond blanc : les packshots sont détourés, ils ont
   besoin d'une surface claire pour ne pas flotter sur le panneau gris.
   Sa part de largeur est volontairement contenue : chaque point gagné par le
   visuel est perdu par la colonne de contenu, qui doit garder de quoi tenir la
   note, la qualification et le bouton sur une seule ligne. */
.artefact-block.artefact-product .artefact-product-media {
	flex: 0 0 clamp(12rem, 32%, 22rem);
	padding: 1.25rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 16px;
	background-color: #ffffff;
}

/* Conteneur de requête : les composants qu'il accueille se règlent sur la
   largeur de cette colonne, et non sur celle de la fenêtre. Sans quoi la note
   reste à sa taille maximale dans un article dont la colonne est étroite, et
   le bouton du test passe à la ligne.
   flex-basis à 0 plutôt qu'auto : la largeur vient alors de la ligne flex et
   jamais du contenu, ce qu'exige le confinement en ligne. */
.artefact-block .artefact-product__content {
	display: flex;
	container-type: inline-size;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	min-inline-size: 0;
	padding-block-start: 0.5rem;
}

/* Le nom et la description du produit sont stylés dans la feuille des
   composants : ce sont des éléments d'identité produit partagés entre la fiche
   produit et le héros de test, la colonne plus large du second leur donnant
   davantage d'espace sans dupliquer une règle. */

/* --------------------------------------------------------------------------
 * Rythme entre les sections
 *
 * Un intervalle unique, sans filet : les cartes d'offres et les colonnes de
 * points forts portent déjà leurs propres contours, un trait supplémentaire ne
 * séparait rien que l'espace ne sépare mieux. La fiche se lit d'un bloc.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-product__offers,
.artefact-block .artefact-product__pros-cons {
	margin-block-start: 2.25rem;
}

/* La mention d'affiliation qui clôt la fiche est un composant partagé : son
   apparence et son espacement vivent dans la feuille des composants. */

/* --------------------------------------------------------------------------
 * Mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
	.artefact-block.artefact-product {
		padding: 1.25rem;
		border-radius: 16px;
	}

	/* Le visuel passe au-dessus du contenu et cesse d'être contraint en
	   largeur fixe.
	   align-items doit impérativement repasser à stretch : en colonne, l'axe
	   transversal devient horizontal, et un flex-start y dimensionnerait la
	   colonne de contenu d'après son contenu — or celui-ci est confiné par
	   container-type, donc sans largeur intrinsèque. */
	.artefact-block .artefact-product__body {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}

	.artefact-block.artefact-product .artefact-product-media {
		flex: 0 0 auto;
		align-self: center;
		inline-size: 100%;
		max-inline-size: 15rem;
		padding: 1rem;
	}

	/* En colonne, flex-basis porte sur la hauteur : la valeur 0 du desktop n'a
	   plus de sens ici, la colonne se dimensionne sur son contenu vertical. */
	.artefact-block .artefact-product__content {
		flex: 0 0 auto;
		gap: 1rem;
		padding-block-start: 0;
	}

	.artefact-block .artefact-product__description {
		font-size: 1rem;
	}

	.artefact-block .artefact-product__offers,
	.artefact-block .artefact-product__pros-cons {
		margin-block-start: 1.75rem;
	}
}