/*
 * Drache d'Avril — Carrousel produits (bloc drache/product-carousel).
 * Réf design : Figma node 14361:2638 (section COUPS DE COEUR).
 *
 * Deux zones :
 *   .product-carousel__header : titre + cœur à gauche, flèches à droite, au
 *                               format du conteneur (1280 max, centré)
 *   .product-carousel__track  : piste défilante, alignée à gauche sur le titre
 *                               et saignant vers le bord droit
 *
 * Le FOND de la section (dégradé) et le quadrillage ne sont pas ici : ils sont
 * portés par le core/group qui contient le bloc, comme pour le hero et la
 * section univers (cf. inc/quadrillage.php).
 *
 * La carte (.product-card) est stylée plus bas mais reste indépendante du
 * carrousel : elle servira telle quelle aux listings WooCommerce, seule sa
 * largeur est imposée de l'extérieur.
 */

.product-carousel {
	/* Respiration au bout de la piste, une fois passé le bord du conteneur. */
	--pc-gutter: var(--wp--preset--spacing--md, 1rem);

	/* Largeur d'une carte. Commande aussi les quelques tailles décoratives qui
	   doivent suivre l'échelle de la carte plutôt que celle de la page. */
	--pc-card-w: 400px;

	/* Hauteur dont la pastille déborde au-dessus de la carte. La piste doit se
	   la réserver : en overflow-x, un conteneur rogne AUSSI verticalement. */
	--pc-badge-overflow: 2.5rem;

	/*
	 * Écart entre le bord de la page et le bord du conteneur. Le bloc n'est pas
	 * garanti pleine largeur : c'est le groupe qui l'accueille qui lui impose sa
	 * largeur, et cette formule s'y adapte — elle tombe à zéro si le bloc occupe
	 * déjà toute la page. Le % se résout sur la largeur du bloc au moment où la
	 * variable est consommée, pas ici.
	 */
	--pc-edge: calc(50vw - 50%);

	/*
	 * Grille nommée plutôt qu'une colonne flex : les flèches doivent se poser à
	 * droite du titre en bureau, et SOUS la piste en mobile. Elles sont donc
	 * sorties de l'en-tête dans le markup, et c'est la grille qui les replace
	 * dans les deux cas, sans dupliquer de règles.
	 */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"header nav"
		"track  track";
	align-items: center;
	row-gap: var(--wp--preset--spacing--6-xl, 5rem);
	column-gap: var(--wp--preset--spacing--xl, 1.5rem);
	padding-block: var(--wp--preset--spacing--8-xl, 10rem);
}

.product-carousel__header {
	grid-area: header;
}

.product-carousel__nav {
	grid-area: nav;
}

.product-carousel__track {
	grid-area: track;
}

/* ----------------------------------------------------------------------------
 * En-tête
 * -------------------------------------------------------------------------- */

.product-carousel__header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
	min-width: 0;
}

.product-carousel .product-carousel__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 0.75rem);
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--3-xl, 2.5rem);
	line-height: var(--wp--custom--typography--headings--h3--line-height, 1.2);
	letter-spacing: var(--wp--custom--typography--headings--h3--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/*
 * Cœur du titre : décor, pas ponctuation. Il remplace le mot « cœur » dans la
 * maquette, d'où sa taille relative au texte (em) et non à la carte.
 * Le SVG de Figma portait l'ancien orange #FC4C04 ; il est passé en currentColor
 * pour consommer le token, mis à jour depuis (#FC4C02).
 */
.product-carousel__heart {
	display: block;
	flex-shrink: 0;
	width: 2.2em;
	rotate: 17.18deg;
	color: var(--wp--preset--color--orange, #fc4c02);
	--pc-heart-stroke: var(--wp--preset--color--rouge-07, #fef2f5);
}
.product-carousel__heart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ----------------------------------------------------------------------------
 * Flèches
 * -------------------------------------------------------------------------- */

/*
 * Masquées tant que view.js ne les a pas activées : sans le script elles ne
 * feraient rien, et la piste reste parcourable au doigt, à la molette et au
 * clavier. Mieux vaut aucun bouton qu'un bouton mort.
 */
.product-carousel__nav {
	display: none;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--md, 1rem);
}
.product-carousel[data-ready] .product-carousel__nav {
	display: flex;
}

.product-carousel__arrow {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 10px;
	border: 0;
	border-radius: var(--wp--custom--radius--full, 9999px);
	background: var(--wp--preset--color--lilas, #e5b0fe);
	color: var(--wp--preset--color--violet, #7631ff);
	cursor: pointer;
	transition: scale 0.3s var(--dda-spring, ease), opacity 0.2s ease;
}
.product-carousel__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}
.product-carousel__arrow:hover:not(:disabled) {
	scale: 1.08;
}
.product-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ----------------------------------------------------------------------------
 * Piste
 * -------------------------------------------------------------------------- */

.product-carousel__track {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
	margin: 0;
	/*
	 * La piste sort du conteneur DES DEUX CÔTÉS pour occuper toute la largeur de
	 * la page : sinon les cartes disparaissent au bord du conteneur en défilant,
	 * ce qui donne une coupe en plein vide au lieu d'une sortie par le bord.
	 *
	 * Le retrait de départ est rendu par le padding, pour que la première carte
	 * reste alignée sur le titre alors que la piste, elle, commence au bord.
	 */
	margin-inline: calc(-1 * var(--pc-edge));
	/*
	 * Réserve en haut pour la pastille, annulée par une marge négative de même
	 * valeur : la piste gagne la place de l'afficher sans que la mise en page
	 * bouge. overflow-x: auto force overflow-y à auto (une seule valeur non
	 * visible suffit), donc sans ça la pastille est coupée net.
	 */
	margin-block-start: calc(-1 * var(--pc-badge-overflow));
	padding: var(--pc-badge-overflow) var(--pc-gutter) 0 var(--pc-edge);
	list-style: none;
	overflow-x: auto;
	/*
	 * Pas de scroll-snap. Il se bat avec le retrait de départ : l'accroche cale la
	 * première carte sur le bord du conteneur de défilement, qui commence au bord
	 * de la page, donc la carte se colle au bord au lieu de s'aligner sur le
	 * titre — et scroll-padding ne l'en empêche pas (vérifié, l'origine reste
	 * épinglée sur le point d'accroche). Le bénéfice était mince : les flèches
	 * avancent déjà d'une carte exacte, et le geste reste libre.
	 */
	/* Barre de défilement masquée : la navigation passe par les flèches et le
	   geste. Le défilement reste actif. */
	scrollbar-width: none;
}
.product-carousel__track::-webkit-scrollbar {
	display: none;
}
.product-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet, #7631ff);
	outline-offset: 4px;
}

.product-carousel__item {
	flex: 0 0 auto;
	width: var(--pc-card-w);
}

/* ----------------------------------------------------------------------------
 * Apparition
 *
 * Quand le carrousel entre dans l'écran, les cartes arrivent de la droite en
 * glissant vers la gauche, chacune avec un retard sur la précédente (cf.
 * view.js, qui pose .est-arme, .est-joue et le rang de chaque carte).
 *
 * L'arrivée a un rebond, comme le reste du thème, mais ADOUCI : --dda-spring
 * (logo, pastilles) monte à 139 % et oscille plusieurs fois, ce qui va à un
 * petit élément mais devient brutal sur une carte qui traverse sa propre
 * largeur. --pc-rebond garde la même signature — un dépassement, puis la
 * pose — avec un seul dépassement d'environ 5 %. Le rebond porte sur le
 * déplacement seulement ; l'opacité, elle, ne doit pas dépasser 1.
 *
 * ÉTAT DE REPOS = ÉTAT FINAL : rien n'est caché tant que le script n'a pas
 * posé .est-arme, ce qu'il ne fait pas en mouvement réduit.
 *
 * --pc-recul : d'où part chaque carte, en pourcentage de sa largeur.
 * --pc-intervalle : le retard d'une carte sur la précédente.
 * -------------------------------------------------------------------------- */
.product-carousel {
	--pc-recul: 120%;
	--pc-intervalle: 300ms;
	--pc-rebond: linear(0, 0.25 10%, 0.62 22%, 0.88 35%, 1.03 50%, 1.05 58%, 1.03 68%, 1.005 80%, 0.998 90%, 1);
}

.product-carousel.est-arme .product-carousel__item {
	opacity: 0;
	translate: var(--pc-recul) 0;
}

/* Après .est-arme, à poids égal : c'est l'ordre qui la fait gagner. */
.product-carousel.est-joue .product-carousel__item {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 400ms ease-out calc(var(--pc-rang, 0) * var(--pc-intervalle)),
		translate 1000ms var(--pc-rebond) calc(var(--pc-rang, 0) * var(--pc-intervalle));
}

/* ----------------------------------------------------------------------------
 * Carte produit
 *
 * Indépendante du carrousel : elle occupe la largeur qu'on lui donne et se
 * dimensionne en % de celle-ci. Réf design : Figma node 14361:2516.
 * -------------------------------------------------------------------------- */

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--5-xl, 4rem);
	padding: 0.625rem;
	text-decoration: none;
	color: inherit;
}

/*
 * Lien étiré. La carte n'est plus un <a> (ses pastilles sont des liens, et un
 * lien n'en contient pas d'autre) : le lien est sur le titre, et son ::after
 * couvre toute la carte, qui reste cliquable partout comme avant. Les
 * pastilles passent au-dessus de ce calque (z-index 2, plus bas).
 *
 * Le focus clavier se pose sur le titre ; on le dessine autour de la carte
 * entière, là où il était quand la carte était le lien.
 */
.product-card__lien {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs, 0.25rem);
	color: inherit;
	text-decoration: none;
}

.product-card__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.product-card__lien:focus-visible {
	outline: none;
}

.product-card:has(.product-card__lien:focus-visible) {
	outline: 2px solid var(--wp--preset--color--violet, #7631ff);
	outline-offset: 4px;
	border-radius: 4px;
}

.product-card__media {
	position: relative;
	display: grid;
	place-items: center;
	/*
	 * 100 % par défaut : le visuel suit la carte, et la carte reste
	 * homothétique — c'est ce dont les listings WooCommerce auront besoin.
	 *
	 * Un contexte peut découpler les deux en posant --pc-media-w, pour resserrer
	 * l'emprise de la carte sans réduire le produit. Le visuel déborde alors de
	 * la carte, symétriquement : le blob est en absolu et le packshot est centré
	 * par place-items, donc il n'y a rien à repositionner.
	 */
	width: var(--pc-media-w, 100%);
	/* Hauteur du bloc média dans la maquette : 293 pour 380 de contenu (la carte
	   fait 400 hors padding). Fixée pour que des produits de formats différents
	   alignent quand même leurs titres. */
	aspect-ratio: 380 / 293;
}

/* Blob blanc de fond. Trois formes alternées le long de la liste (cf. render). */
.product-card__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	/* 320 de blob pour 380 de contenu. */
	width: 84.2%;
	color: var(--wp--preset--color--blanc, #fff);
}
.product-card__blob svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * Packshot. max-width + max-height sans dimensions imposées = comportement
 * « contain » : un format portrait occupe la hauteur, un format paysage la
 * largeur, et le ratio d'origine est préservé dans les deux cas.
 *
 * L'ombre est diagonale et translucide, aucun preset theme.json ne correspond
 * (les tokens violet-* sont verticaux et opaques) : elle est composée à partir
 * du token de couleur.
 */
.product-card__image {
	position: relative;
	z-index: 1;
	/* 201.6 de packshot pour 380 de contenu. */
	max-width: 53.1%;
	max-height: 98%;
	width: auto;
	height: auto;
	rotate: -2deg;
	box-shadow: 0.5rem 0.5rem 0 0
		color-mix(in srgb, var(--wp--preset--color--rose-04, #664d9a) 40%, transparent);
	transition: rotate 0.5s var(--dda-spring, ease), scale 0.5s var(--dda-spring, ease);
}

/*
 * Reprise de la main sur WooCommerce.
 *
 * woocommerce-layout.css pose `.woocommerce img { max-width: 100% }`. Une
 * classe PLUS un élément, donc plus spécifique que `.product-card__image` : sur
 * une page WooCommerce — et seulement là — le plafond de 53,1 % sautait et le
 * packshot doublait de taille. La carte grandissait avec lui, et la pastille,
 * positionnée en pourcentage du média, débordait alors au-dessus de la piste où
 * le défilement horizontal la rognait.
 *
 * D'où l'écart entre l'accueil, où rien ne s'appliquait, et la fiche produit.
 * On repasse donc devant en pesant deux classes plutôt qu'une.
 */
.product-card .product-card__image {
	max-width: 53.1%;
	max-height: 98%;
}

.product-card:hover .product-card__image {
	rotate: 2deg;
	scale: 1.04;
}

/*
 * Pastille, en débord au-dessus du média.
 * La couleur et le libellé sont DANS le fichier (cf. le type de contenu
 * Pastilles) : plus de couleur par variante ici, plus de texte superposé. Cette
 * règle ne fait plus que placer et incliner l'image.
 *
 * C'est ce qui a réglé le défaut d'origine : la couleur vivait dans la feuille
 * de style, et n'avait été écrite que pour la carte — la fiche produit héritait
 * de la couleur ambiante.
 *
 * Pas de rapport de forme imposé : les fichiers sont quelconques, c'est l'image
 * qui porte le sien.
 */
.product-card__badge {
	position: absolute;
	z-index: 2;
	top: -13%;
	left: 2%;
	display: block;
	width: 20%;
	rotate: -8deg;
	pointer-events: none;
}

.product-card__badge-image {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * Texte aligné à gauche, retrait de 24 : la carte des listings, devenue la
 * carte de partout (demande d'Hubert du 2026-10-08, « on reprend les mêmes que
 * sur les listings pour unifier »). Le carrousel de l'accueil et le « À
 * découvrir aussi » des fiches centraient leur texte.
 */
.product-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs, 0.25rem);
	width: 100%;
	padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	text-align: start;
}

.product-card__title {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--2-xl, 2rem);
	line-height: var(--wp--custom--typography--headings--h4--line-height, 1.25);
	letter-spacing: var(--wp--custom--typography--headings--h4--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/*
 * Prix. Le violet de marque. La maquette porte ici un « text/heading-brand »
 * (#7f4dff) qui est une scorie du Figma, pas un token du design system : c'est
 * theme.json qui fait foi.
 */
.product-card__price {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: var(--wp--custom--typography--headings--h5--line-height, 1.3333);
	letter-spacing: var(--wp--custom--typography--headings--h5--letter-spacing, -2px);
	color: var(--wp--preset--color--violet, #7631ff);
}
/* Woo enveloppe le prix dans ses propres balises : on neutralise ses styles. */
.product-card__price .woocommerce-Price-amount,
.product-card__price bdi {
	font: inherit;
	color: inherit;
}

/*
 * Ligne prix + format + coloris. Réf design : Figma 14794:7091.
 *
 * 24 d'écart entre les trois, calée à gauche comme le reste du texte.
 * flex-wrap : sur une carte étroite, les pastilles passent à la ligne plutôt
 * que de pousser le prix hors du cadre.
 */
.product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--xs, 0.5rem) var(--wp--preset--spacing--xl, 1.5rem);
}

/*
 * Pastille de format, le composant « tag » small de la maquette.
 *
 * Texte en #4411a1, le « btn/primary/plain/text » du Figma : la palette n'a pas
 * ce violet-là, violet-bolder (#28076e) est nettement plus sombre. Littéral,
 * comme le gris du fil d'ariane, à promouvoir en token s'il ressert.
 */
.product-card__format {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	min-height: 1.25rem;
	padding: 0.125rem var(--wp--preset--spacing--xs, 0.5rem);
	border-radius: 2px;
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	line-height: 1;
	text-transform: uppercase;
	color: #4411a1;
}

/* Pastilles de coloris : 24, 8 d'écart. */
.product-card__swatches {
	position: relative;
	/* Au-dessus du lien étiré de la carte : chaque pastille garde son lien. */
	z-index: 2;
	display: inline-flex;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
}

/*
 * Un rond coupé en diagonale, du coin haut droit au coin bas gauche : la
 * couleur de texte du coloris en haut à gauche, sa couleur de fond en bas à
 * droite (Figma 14794:6890, où elles valent blanc et gris). Toutes deux se
 * règlent sur le coloris, dans Produits > Attributs > Couleur.
 *
 * Un dégradé « vers le bas à droite » coupé net à 50 % trace exactement cette
 * diagonale, sans SVG ni masque.
 */
.product-card__swatch {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: linear-gradient(to bottom right, var(--sw-texte, #fff) 50%, var(--sw-fond, #d9d9d9) 50%);

	/*
	 * Contour et ombre (Figma 14794:6890, mis à jour le 2026-10-06) : un trait
	 * de 1 à l'extérieur du rond, et une ombre décalée de 1 en bas à droite,
	 * sans flou. Dans le Figma l'ombre s'applique au rond ET à son contour,
	 * d'où l'étalement de 1 sur la seconde ombre : elle reprend la silhouette
	 * contour compris.
	 *
	 * box-shadow plutôt que border : le contour reste hors de la boîte, la
	 * pastille garde ses 24 et le dégradé n'est pas rogné.
	 *
	 * #374151, le gris du fil d'ariane : même couleur, même littéral.
	 */
	box-shadow:
		0 0 0 1px #374151,
		1px 1px 0 1px #374151;
}

/*
 * Pastille du coloris de la carte, sur une carte de coloris : un anneau violet
 * à 2 du contour, comme une vignette sélectionnée sur la fiche. outline et non
 * une ombre de plus : il suit l'arrondi, et ne se mélange pas à l'ombre portée.
 *
 * Traitement proposé, pas dessiné dans la maquette : à caler avec Hubert.
 */
.product-card__swatch.is-actif {
	outline: 2px solid var(--wp--preset--color--violet, #7631ff);
	outline-offset: 3px;
}

/*
 * « +X » après la quatrième pastille : le nombre de coloris non affichés, en
 * lien vers la fiche. Même hauteur que les pastilles, pour ne pas décaler la
 * ligne ; cible de 24 au moins, comme elles.
 */
.product-card__swatch-plus {
	display: inline-flex;
	align-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	line-height: 1;
	text-decoration: none;
	color: #374151;
}

.product-card__swatch-plus:hover,
.product-card__swatch-plus:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Une pastille est un lien : elle réagit au survol et au focus clavier. */
.product-card__swatch {
	transition: scale 0.2s var(--dda-spring, ease);
}

.product-card__swatch:hover {
	scale: 1.15;
}

.product-card__swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet-bolder, #28076e);
	outline-offset: 3px;
}

/* Nom du coloris d'une carte de déclinaison : le corps de texte, en p-md. */
.product-card__coloris,
.product-card__variants {
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.5;
	color: var(--wp--preset--color--noir, #1f2937);
}

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

/*
 * Gouttière tant que la largeur maximale ne la fournit pas elle-même.
 *
 * Le bloc est en largeur contrainte : au-delà de 1280 px de contenu, les marges
 * automatiques écartent le titre du bord. En dessous, elles tombent à zéro et il
 * n'y a plus rien — le titre touchait le bord de l'écran sur toute la plage
 * tablette. 1328 = 1280 + les deux fois 24 qu'on veut voir.
 */
@media (max-width: 1328px) {
	.product-carousel {
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	}
}

@media (max-width: 781px) {
	.product-carousel {
		/*
		 * 260 au lieu de 300. C'est l'emprise de la carte qui se resserre, pour
		 * qu'on voie la suivante arriver au bord de l'écran : à 300 il ne restait
		 * que 22 px du blob de la carte 2, et sur un fond rose pâle ça ne se lit
		 * pas comme « il y en a d'autres ».
		 *
		 * Le seuil en vw suit : 260 / 68vw bascule à la même largeur de fenêtre
		 * que 300 / 78vw, donc le comportement sur les écrans étroits ne change
		 * pas.
		 */
		--pc-card-w: min(260px, 68vw);
		padding-block: var(--wp--preset--spacing--6-xl, 5rem);

		/*
		 * Gouttière du bloc. En bureau le carrousel est un bloc contraint, donc
		 * centré et déjà en retrait ; en mobile il occupe toute la largeur et son
		 * titre collait au bord.
		 *
		 * Rien d'autre à ajuster : --pc-edge vaut « 50vw - 50% », donc il se cale
		 * tout seul sur ce padding. La piste ressort d'autant pour saigner
		 * jusqu'au bord, et son retrait de départ garde la première carte alignée
		 * sur le titre. Le padding lui-même vient de la règle ci-dessus, qui
		 * couvre toute la plage où la largeur max ne donne pas de gouttière.
		 */

		/* Les flèches passent sous la piste, centrées sous l'écran. */
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"track"
			"nav";
		row-gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	.product-carousel__nav {
		justify-self: center;
	}
	.product-carousel__header {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--wp--preset--spacing--md, 1rem);
	}
	/*
	 * Le titre passe en bloc et le cœur en ligne. En flex, le texte se replie
	 * dans son propre item et le cœur reste sur la ligne du haut, seul à droite :
	 * or il remplace le mot « cœur », il doit suivre le dernier mot.
	 */
	.product-carousel .product-carousel__title {
		display: block;
		font-size: var(--wp--preset--font-size--2-xl, 2rem);
	}
	/*
	 * Le cœur est SUSPENDU : il garde sa taille mais cesse de compter dans la
	 * largeur de la ligne, grâce à une marge de fin négative égale à sa largeur
	 * plus sa marge de début. La ligne se mesure alors comme s'il n'était pas
	 * là, elle ne déborde plus, donc le navigateur n'a plus de raison de couper
	 * — et le cœur se dessine après le dernier mot en sortant par la droite.
	 *
	 * Sans ça il tombait seul sur une ligne à lui : il lui faut 2,4 em et il
	 * n'en restait qu'une trentaine de pixels en fin de ligne. Or il remplace le
	 * mot « cœur », il doit suivre le dernier mot, pas s'en détacher.
	 *
	 * Le débord de quelques pixels au-delà du bord de l'écran est assumé.
	 */
	.product-carousel__heart {
		display: inline-block;
		vertical-align: -0.35em;
		margin-inline-start: 0.2em;
		margin-inline-end: -2.4em;
	}
	/*
	 * Écart resserré entre les cartes : c'est lui qui commande la part de la
	 * carte suivante visible au bord de l'écran. À 24 px il n'en restait qu'une
	 * quarantaine, et selon le produit ce n'était qu'une tranche indistincte.
	 */
	.product-carousel__track {
		gap: var(--wp--preset--spacing--sm, 0.75rem);
	}

	/*
	 * Le visuel garde EXACTEMENT la taille qu'il avait pour une carte de 300 :
	 * la formule est celle d'avant, moins les deux fois 10 px de padding de la
	 * carte. Il déborde donc de 20 px de chaque côté, sans que rien ne bouge à
	 * l'intérieur. Seul le texte suit la nouvelle largeur, ce qui est bien le
	 * comportement voulu : c'est de la mise en page, pas du visuel.
	 */
	.product-carousel .product-card {
		--pc-media-w: calc(min(300px, 78vw) - 1.25rem);
	}

	.product-carousel__arrow {
		width: 48px;
		height: 48px;
	}
	.product-card {
		gap: var(--wp--preset--spacing--2-xl, 2rem);
	}
	.product-card__title {
		font-size: var(--wp--preset--font-size--lg, 1.25rem);
	}
	.product-card__price {
		font-size: var(--wp--preset--font-size--md, 1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card__image,
	.product-carousel__arrow {
		transition: none;
	}
	.product-card:hover .product-card__image {
		rotate: -2deg;
		scale: 1;
	}
	.product-card__swatch {
		transition: none;
	}
	.product-card__swatch:hover {
		scale: 1;
	}
}

/* Message d'aide affiché dans l'éditeur uniquement (cf. render.php). */
.product-carousel--empty {
	margin: 0;
	padding: var(--wp--preset--spacing--md, 1rem);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
}

/*
 * Éditeur : la carte est un lien. Sans ça, cliquer dessus tente de naviguer vers
 * la fiche produit au lieu de sélectionner le bloc. Même correctif que pour
 * category-push ; les flèches, elles, restent actives pour pouvoir parcourir la
 * sélection depuis le canvas.
 */
[data-type="drache/product-carousel"] .product-card {
	pointer-events: none;
}