/**
 * Bloc « Fiche produit (test) » — en-tête héros d'un test produit.
 *
 * Ne porte que sa mise en page : la carte, la grille héros et les rythmes
 * verticaux. Le visuel, l'identité produit (nom, description), la note, les
 * offres et les points forts / faibles viennent de composants et de styles
 * partagés — le bloc n'en redéfinit aucun. L'effet « plus large » naît des
 * proportions : une image nettement plus grande qu'en fiche produit et une
 * colonne de contenu plus spacieuse, à l'intérieur du conteneur éditorial.
 *
 * La disposition repose sur une grille à zones nommées, pilotée par une requête
 * de conteneur sur le héros — non par la fenêtre, car le gabarit test_produit
 * fait varier la largeur de sa colonne selon le viewport (1140 px en grand,
 * 600 px en tablette). La grille vit sur un enfant (.artefact-hero__grid), le
 * héros portant le conteneur : un élément ne peut pas répondre à ses propres
 * requêtes de conteneur. Trois états :
 *   - large   : image à gauche sur deux rangs, contenu puis offres à droite ;
 *   - resserré : image et contenu sur un rang, offres en pleine largeur dessous
 *                — ce qui évite le vide sous une image plus haute que le texte ;
 *   - étroit   : tout empilé.
 *
 * Encapsulation : chaque règle est portée par .artefact-block afin de primer
 * sur les styles globaux du thème sans recourir à !important.
 */

/* Carte et conteneur de requête. Même traitement que la fiche produit — fond
   légèrement contrasté, bordure fine, grand rayon — pour rester cohérent avec
   le bloc existant. Le héros se distingue par sa disposition, non par sa
   palette. */
.artefact-block.artefact-hero {
	/* En-tête de test : colle au haut de sa colonne. Neutralise la marge
	   supérieure partagée de .artefact-block (margin-block: 2rem) sans toucher
	   aux paddings internes ni aux autres blocs. */
	margin-block-start: 0;
	container-type: inline-size;
	padding: 2.5rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 20px;
	background-color: var(--artefact-row-bg);
}

/* Grille des zones. row-gap nul : les écarts verticaux sont portés par les
   marges des zones, qui diffèrent d'un rang à l'autre (offres serrées sous le
   texte, sections aérées). align-items au début : chaque zone garde sa hauteur
   naturelle, l'image ne s'étire pas sur ses deux rangs. */
.artefact-block .artefact-hero__grid {
	display: grid;
	grid-template-columns: 44% 1fr;
	column-gap: 2.5rem;
	row-gap: 0;
	align-items: start;
	grid-template-areas:
		"media    main"
		"media    offers"
		"proscons proscons"
		"affiliate affiliate";
}

/* --------------------------------------------------------------------------
 * Zones de la grille
 * ----------------------------------------------------------------------- */

/* Visuel dominant, sur un panneau blanc — les packshots sont détourés. Il
   occupe les deux rangs de la colonne de gauche en grand écran, d'où sa hauteur
   caractéristique. */
.artefact-block.artefact-hero .artefact-product-media {
	grid-area: media;
	padding: 2rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 16px;
	background-color: #ffffff;
}

/* Conteneur de requête imbriqué : le nom et la note se règlent sur la largeur
   de cette colonne, comme en fiche produit. */
.artefact-block .artefact-hero__main {
	display: flex;
	container-type: inline-size;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	grid-area: main;
	min-inline-size: 0;
	padding-block-start: 0.25rem;
}

/* Sous le contenu dans la colonne de droite, séparées du texte par un mince
   espace — le composant conserve son apparence, seule sa place change. */
.artefact-block .artefact-hero__offers {
	grid-area: offers;
	margin-block-start: 0.75rem;
}

.artefact-block .artefact-hero__pros-cons {
	grid-area: proscons;
	margin-block-start: 2.5rem;
}

/* La mention porte déjà sa propre marge de séparation via la feuille des
   composants ; seule sa place dans la grille est fixée ici. */
.artefact-block.artefact-hero .artefact-affiliate-notice {
	grid-area: affiliate;
}

/* Sans visuel, la grille repasse à une colonne : le contenu occupe toute la
   largeur, aucune zone d'image vide n'est réservée. */
.artefact-block.artefact-hero--no-media .artefact-hero__grid {
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"offers"
		"proscons"
		"affiliate";
}

/* --------------------------------------------------------------------------
 * Héros resserré : les offres repassent en pleine largeur sous le héros
 *
 * L'image et le contenu tiennent chacun un seul rang, alignés en hauteur, et
 * les offres s'étalent dessous. Cela supprime le vide qui se creuse, sous une
 * image plus haute que le texte, lorsque les offres restent dans la colonne
 * étroite de droite.
 * ----------------------------------------------------------------------- */

@container (max-width: 820px) {
	.artefact-block .artefact-hero__grid {
		grid-template-columns: 36% 1fr;
		column-gap: 2rem;
		grid-template-areas:
			"media    main"
			"offers   offers"
			"proscons proscons"
			"affiliate affiliate";
	}

	.artefact-block.artefact-hero .artefact-product-media {
		padding: 1.5rem;
	}

	/* Pleine largeur : l'écart au contenu doit être franc, non plus le rapproché
	   qui suivait la description. */
	.artefact-block .artefact-hero__offers {
		margin-block-start: 2rem;
	}
}

/* --------------------------------------------------------------------------
 * Héros étroit : empilement vertical
 * ----------------------------------------------------------------------- */

@container (max-width: 560px) {
	.artefact-block .artefact-hero__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"main"
			"offers"
			"proscons"
			"affiliate";
	}

	.artefact-block.artefact-hero .artefact-product-media {
		justify-self: center;
		inline-size: 100%;
		max-inline-size: 20rem;
		padding: 1.5rem;
	}

	.artefact-block .artefact-hero__main {
		padding-block-start: 0;
	}

	.artefact-block .artefact-hero__offers {
		margin-block-start: 1.75rem;
	}

	.artefact-block .artefact-hero__pros-cons {
		margin-block-start: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
 * Cosmétique mobile : resserrement de la carte
 *
 * Le seul réglage qui vise le héros lui-même, donc hors requête de conteneur.
 * La bascule structurelle est gérée ci-dessus par la largeur réelle du héros.
 * ----------------------------------------------------------------------- */

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