/**
 * Styles des composants de présentation partagés entre blocs.
 *
 * Contrepartie CSS de templates/components/ : un composant emporte ici son
 * apparence propre, afin d'être autonome partout où un bloc le dépose. Ce qui
 * relève de la mise en page d'un bloc — panneau, grille, largeur, surcharges de
 * titre — reste dans la feuille de ce bloc.
 *
 * Chaque composant déclare ses propres jetons sur son élément racine, et non
 * sur le bloc hôte : c'est la condition pour qu'il rende à l'identique quel que
 * soit son contexte.
 *
 * Encapsulation : les règles restent portées par .artefact-block, comme dans la
 * base commune, afin de primer sur les styles globaux du thème sans recourir à
 * !important.
 */

/* --------------------------------------------------------------------------
 * Composant « affiliate-notice » : mention de transparence sur l'affiliation
 *
 * Le composant porte son propre espacement de séparation (margin-block-start),
 * contrairement aux autres : c'est une ligne terminale, et cet écart fait
 * partie de son identité partagée — il garantit un rendu rigoureusement
 * identique quel que soit le bloc qui l'insère. Gris plus clair que les
 * libellés courants : présente et lisible, jamais concurrente du contenu. La
 * largeur est bornée pour que le centrage reste lisible sur une colonne large.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-affiliate-notice {
	max-inline-size: 44rem;
	margin: 2.5rem auto 0;
	padding: 0;
	color: #8b9299;
	font-size: 0.8125rem;
	line-height: 1.55;
	text-align: center;
}

@media (max-width: 600px) {
	.artefact-block .artefact-affiliate-notice {
		margin-block-start: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
 * Composant « product-media » : visuel du Produit
 *
 * Le composant ne fixe que le rendu de l'image ; sa largeur et sa place dans
 * la mise en page relèvent du bloc appelant.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-product-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 12px;
}

/* --------------------------------------------------------------------------
 * Identité produit : nom et description
 *
 * Éléments de contenu (h3 et p), non des composants, mais partagés à l'identique
 * entre la fiche produit et le héros de test. Le nom se règle sur la largeur de
 * la colonne via des requêtes de conteneur : la colonne plus large du héros lui
 * donne donc davantage d'espace sans qu'aucune valeur soit dupliquée.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-product__name {
	display: block;
	margin: 0;
	color: var(--artefact-color-value);
	font-family: inherit;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

/* Le nom se règle sur la colonne au même titre que la note. Sans cela il reste
   dimensionné d'après la fenêtre et écrase la note dans une colonne étroite,
   inversant la hiérarchie voulue. Au-delà de 40 rem, rien ne change. */
@container (max-width: 40rem) {
	.artefact-block .artefact-product__name {
		font-size: 2.25rem;
	}
}

@container (max-width: 30rem) {
	.artefact-block .artefact-product__name {
		font-size: 1.875rem;
	}
}

.artefact-block .artefact-product__description {
	margin: 0;
	padding: 0;
	color: var(--artefact-color-label);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
 * Composant « product-score » : note du Test et accès au test complet
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-product-score {
	--artefact-score-border: rgba(16, 24, 40, 0.14);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 0.75rem;
}

/* La note est le point d'entrée de la lecture : elle porte l'accent et une
   échelle nettement supérieure au reste de la fiche. À cette taille, le
   contraste de l'accent relève du « grand texte » et satisfait AA. */
.artefact-block .artefact-product-score__value {
	display: inline-flex;
	align-items: baseline;
	/* Écarte la note du couple qualification / lien, qui se lit d'un bloc. */
	margin-inline-end: 0.5rem;
	color: var(--artefact-color-accent);
	font-weight: 800;
}

.artefact-block .artefact-product-score__number {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
	letter-spacing: -0.02em;
	line-height: 1;
}

.artefact-block .artefact-product-score__max {
	color: var(--artefact-color-muted);
	font-size: 1.125rem;
	font-weight: 600;
}

/* Qualification déduite de la note : pastille discrète, adossée au lien. */
.artefact-block .artefact-product-score__rating {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	background-color: var(--artefact-accent-tint);
	color: var(--artefact-accent-strong);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Bouton discret : encadré fin sur fond clair, sans séparateur interne.
   Neutralise la couleur et le soulignement que le thème impose aux liens. */
.artefact-block .artefact-product-score__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--artefact-score-border);
	border-radius: 10px;
	background-color: #ffffff;
	color: var(--artefact-color-accent);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		border-color 0.15s ease-in-out,
		color 0.15s ease-in-out;
}

.artefact-block .artefact-product-score__link:hover,
.artefact-block .artefact-product-score__link:focus {
	border-color: var(--artefact-color-accent);
	color: var(--artefact-accent-strong);
	text-decoration: none;
}

.artefact-block .artefact-product-score__link:focus-visible {
	outline: 2px solid var(--artefact-color-value);
	outline-offset: 2px;
}

.artefact-block .artefact-product-score__icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 * Note, qualification et lien : adaptation à la colonne, non à la fenêtre
 *
 * La taille de la note est exprimée en vw, donc d'après la fenêtre — alors que
 * la ligne est contrainte par la colonne de contenu, bien plus étroite dans un
 * article que dans le canevas de l'éditeur. D'où un retour à la ligne du bouton
 * sur le front alors que l'éditeur tient sur une seule ligne.
 *
 * Les requêtes de conteneur corrigent la cause : les trois éléments se règlent
 * sur la largeur réellement disponible. Le bloc appelant désigne le conteneur ;
 * si aucun ancêtre n'en est un, ces règles ne s'appliquent pas et les tailles
 * pleines sont conservées.
 * ----------------------------------------------------------------------- */

@container (max-width: 40rem) {
	.artefact-block .artefact-product-score__number {
		font-size: 2.75rem;
	}

	.artefact-block .artefact-product-score__max {
		font-size: 1.0625rem;
	}

	.artefact-block .artefact-product-score__rating {
		padding: 0.3125rem 0.625rem;
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}

	.artefact-block .artefact-product-score__link {
		gap: 0.4375rem;
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
	}
}

/* Colonne étroite : tout se resserre d'un cran supplémentaire — chiffre,
   pastille, libellé et icônes — plutôt que de sacrifier un élément. C'est ce
   qui permet à l'icône du livre de rester présente là où elle disparaissait. */
@container (max-width: 30rem) {
	/* Gouttière resserrée : quelques pixels qui décident du maintien de la note,
	   du qualificatif et du bouton sur une seule ligne aux largeurs courantes. */
	.artefact-block .artefact-product-score {
		gap: 0.625rem 0.5rem;
	}

	.artefact-block .artefact-product-score__number {
		font-size: 2rem;
	}

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

	.artefact-block .artefact-product-score__value {
		margin-inline-end: 0.25rem;
	}

	.artefact-block .artefact-product-score__rating {
		padding: 0.25rem 0.4375rem;
		font-size: 0.6875rem;
	}

	.artefact-block .artefact-product-score__link {
		gap: 0.3125rem;
		padding: 0.4375rem 0.5625rem;
		font-size: 0.8125rem;
	}

	.artefact-block .artefact-product-score__icon--book {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.artefact-block .artefact-product-score__icon--arrow {
		inline-size: 0.875rem;
		block-size: 0.875rem;
	}
}

/* L'icône du livre est conservée à toutes les largeurs : ce bouton est la seule
   représentation partagée de l'action « Lire le test complet » dans le plugin
   (fiche produit, héros de test, produits liés, top 3), et son identité — livre,
   libellé, flèche — doit rester rigoureusement identique partout où il paraît. */

/* --------------------------------------------------------------------------
 * Composant « pros-cons » : points forts et points faibles
 *
 * Deux colonnes autonomes : si une seule est renseignée, elle occupe toute la
 * largeur, la grille se contentant du nombre d'enfants effectivement rendus.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-pros-cons {
	--artefact-proscons-bg: #f2f4f7;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
}

.artefact-block .artefact-pros-cons__column {
	padding: 1.5rem;
	border-radius: 14px;
	background-color: var(--artefact-proscons-bg);
}

.artefact-block .artefact-pros-cons__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--artefact-color-value);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.artefact-block .artefact-pros-cons__column--pros .artefact-pros-cons__title {
	color: var(--artefact-color-accent);
}

.artefact-block .artefact-pros-cons__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background-color: var(--artefact-accent-tint);
	color: var(--artefact-color-accent);
}

.artefact-block .artefact-pros-cons__column--cons .artefact-pros-cons__icon {
	color: var(--artefact-color-label);
	background-color: rgba(16, 24, 40, 0.06);
}

.artefact-block .artefact-pros-cons__list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Puce dessinée en pseudo-élément : invisible aux technologies d'assistance,
   la sémantique de liste suffisant à les informer. */
.artefact-block .artefact-pros-cons__item {
	position: relative;
	margin: 0;
	padding-inline-start: 1.25rem;
	color: var(--artefact-color-label);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

.artefact-block .artefact-pros-cons__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--artefact-color-accent);
}

.artefact-block .artefact-pros-cons__column--cons .artefact-pros-cons__item::before {
	background-color: var(--artefact-color-muted);
}

@media (max-width: 600px) {
	.artefact-block .artefact-pros-cons {
		gap: 0.875rem;
	}

	.artefact-block .artefact-pros-cons__column {
		padding: 1.125rem;
	}
}

/* --------------------------------------------------------------------------
 * Composant « merchant-logo » : logo du marchand, repli sur monogramme
 *
 * La pastille est identique avec ou sans fichier : le monogramme occupe la même
 * surface, la mise en page ne bouge donc pas selon le marchand. Sa taille est
 * portée par deux variables, que le bloc hôte peut resserrer (liste d'offres en
 * mobile) ou garder ample (panneau du Top 3) sans dupliquer une règle.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-merchant-logo {
	--artefact-merchant-logo-size: 3rem;
	--artefact-merchant-logo-img: 1.875rem;

	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--artefact-merchant-logo-size);
	block-size: var(--artefact-merchant-logo-size);
	overflow: hidden;
	border: 1px solid var(--artefact-separator);
	border-radius: 50%;
	background-color: #ffffff;
}

.artefact-block .artefact-merchant-logo img {
	max-inline-size: var(--artefact-merchant-logo-img);
	max-block-size: var(--artefact-merchant-logo-img);
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.artefact-block .artefact-merchant-logo__monogram {
	color: var(--artefact-color-label);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

/* --------------------------------------------------------------------------
 * Composant « offer-cta » : bouton d'accès à une offre unique
 *
 * Même bouton affilié que la liste d'offres, pour une offre isolée. Sa largeur,
 * son alignement et la place du prix relèvent du bloc appelant ; le composant
 * ne fixe que son apparence propre.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-offer-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background-color: var(--artefact-color-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

.artefact-block .artefact-offer-cta:hover,
.artefact-block .artefact-offer-cta:focus {
	background-color: var(--artefact-accent-strong);
	color: #ffffff;
	text-decoration: none;
}

.artefact-block .artefact-offer-cta:focus-visible {
	outline: 2px solid var(--artefact-color-value);
	outline-offset: 2px;
}

.artefact-block .artefact-offer-cta__icon {
	flex: 0 0 auto;
}

/* Prix intégré au bouton : poussé à l'opposé du libellé lorsque le bloc étire
   le bouton en pleine largeur. */
.artefact-block .artefact-offer-cta__price {
	margin-inline-start: auto;
	font-weight: 700;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.artefact-block .artefact-offer-cta {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Composant « offers-list » : liste des offres marchandes
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-offers-list {
	--artefact-offer-bg: #ffffff;
	--artefact-offer-bg-hover: #f9fafb;
	--artefact-offer-border-hover: rgba(16, 24, 40, 0.12);
	--artefact-offer-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	--artefact-offer-shadow-hover: 0 4px 12px rgba(16, 24, 40, 0.08);

	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* position: relative ancre le lien étiré ; cursor: pointer annonce que la
   carte entière est cliquable. */
.artefact-block .artefact-offer {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 12px;
	background-color: var(--artefact-offer-bg);
	box-shadow: var(--artefact-offer-shadow);
	cursor: pointer;
	list-style: none;
	transition:
		background-color 0.18s ease-in-out,
		border-color 0.18s ease-in-out,
		box-shadow 0.18s ease-in-out;
}

/* focus-within aligne l'état clavier sur l'état souris : la carte réagit aussi
   lorsque le lien est atteint au clavier. */
.artefact-block .artefact-offer:hover,
.artefact-block .artefact-offer:focus-within {
	border-color: var(--artefact-offer-border-hover);
	background-color: var(--artefact-offer-bg-hover);
	box-shadow: var(--artefact-offer-shadow-hover);
}

/* --------------------------------------------------------------------------
 * Marchand et prix
 *
 * Le logo est rendu par le composant « merchant-logo », partagé : la liste ne
 * fait qu'en régler la taille par ses variables, à ses points de rupture.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-offer__merchant {
	flex: 1 1 auto;
	min-inline-size: 0;
	color: var(--artefact-color-value);
	font-size: 1.0625rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Seul emplacement où l'accent porte une valeur : dans un contexte de
   conversion, le prix est l'information à repérer d'un coup d'œil. */
.artefact-block .artefact-offer__price {
	flex: 0 0 auto;
	color: var(--artefact-color-accent);
	font-size: 1.125rem;
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Bouton affilié
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-offer__cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background-color: var(--artefact-color-accent);
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

/* Lien étiré : le pseudo-élément couvre toute la carte, sans ajouter de second
   lien au DOM. Un seul élément focusable par offre, aucune imbrication
   d'éléments interactifs, aucun JavaScript. Le pseudo-élément appartenant au
   lien, survoler n'importe quel point de la carte déclenche aussi son :hover —
   le bouton se fonce donc de lui-même. Contrepartie connue du procédé : le
   texte de la carte n'est plus sélectionnable à la souris. */
.artefact-block .artefact-offer__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.artefact-block .artefact-offer__cta:hover,
.artefact-block .artefact-offer__cta:focus {
	background-color: var(--artefact-accent-strong);
	color: #ffffff;
	text-decoration: none;
}

.artefact-block .artefact-offer__cta:focus-visible {
	outline: 2px solid var(--artefact-color-value);
	outline-offset: 2px;
}

.artefact-block .artefact-offer__icon {
	flex: 0 0 auto;
}

/* Libellé court réservé aux très petits écrans. */
.artefact-block .artefact-offer__cta-text--short {
	display: none;
}

/* --------------------------------------------------------------------------
 * Mobile : une seule ligne par offre
 *
 * L'offre reste sur une ligne unique jusqu'à 320 px. La répartition suit un
 * budget de largeur : logo et prix sont incompressibles, le bouton l'est
 * presque, seul le marchand cède — d'où l'ellipsis. Le desktop n'est pas
 * concerné : toutes les règles vivent sous le point de rupture.
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
	.artefact-block .artefact-offers-list {
		gap: 0.5rem;
	}

	/* nowrap explicite : rien ne doit repasser à la ligne. La hauteur minimale
	   garantit une cible tactile confortable, la carte entière étant le lien. */
	.artefact-block .artefact-offer {
		flex-wrap: nowrap;
		gap: 0.5rem;
		min-block-size: 4rem;
		padding: 0.625rem 0.75rem;
		border-radius: 10px;
	}

	.artefact-block .artefact-offer .artefact-merchant-logo {
		--artefact-merchant-logo-size: 2rem;
		--artefact-merchant-logo-img: 1.25rem;
	}

	.artefact-block .artefact-offer .artefact-merchant-logo__monogram {
		font-size: 0.875rem;
	}

	/* Seul élément compressible de la ligne : il absorbe la place restante et
	   tronque proprement. overflow-wrap est neutralisé, incompatible avec
	   l'ellipsis sur une seule ligne. */
	.artefact-block .artefact-offer__merchant {
		overflow: hidden;
		font-size: 1rem;
		overflow-wrap: normal;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Le prix domine la ligne : il passe au-dessus du marchand en taille, la
	   graisse et l'accent venant déjà du desktop. */
	.artefact-block .artefact-offer__price {
		font-size: 1.125rem;
	}

	/* Respiration supplémentaire entre le prix et le bouton : la gouttière du
	   conteneur est uniforme, ce retrait ne creuse que cet intervalle. */
	.artefact-block .artefact-offer__cta {
		gap: 0.375rem;
		margin-inline-start: 0.375rem;
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
	}

	/* Le panier est purement décoratif et coûte 18 px plus une gouttière : il
	   cède avant le libellé, qui porte le sens. */
	.artefact-block .artefact-offer__icon--cart {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Très petits écrans : dernier palier de compression
 * ----------------------------------------------------------------------- */

@media (max-width: 380px) {
	.artefact-block .artefact-offer {
		gap: 0.4375rem;
		padding: 0.625rem 0.5rem;
	}

	/* Un cran sous le palier précédent : à 320 px, ces deux pixels de moins
	   sur le prix rendent au marchand la largeur qu'il perdrait sinon. */
	.artefact-block .artefact-offer__price {
		font-size: 1.0625rem;
	}

	/* L'icône de lien externe et le libellé long libèrent ensemble une
	   quarantaine de pixels, rendus au nom du marchand. */
	.artefact-block .artefact-offer__icon--link,
	.artefact-block .artefact-offer__cta-text--full {
		display: none;
	}

	.artefact-block .artefact-offer__cta-text--short {
		display: inline;
	}

	.artefact-block .artefact-offer__cta {
		margin-inline-start: 0.25rem;
		padding: 0.5rem 0.75rem;
	}
}

/* --------------------------------------------------------------------------
 * Préférences d'affichage
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.artefact-block .artefact-offer,
	.artefact-block .artefact-offer__cta {
		transition: none;
	}
}