/*
 * Drache d'Avril — Listings produits (boutique, catégories, étiquettes).
 *
 * Réf design : Figma 14794:13562, section « Listings produits ».
 *   - cadre rayonnage    14794:12963 (hero 14794:12964, grille 14794:13306)
 *   - tuile éditoriale   14794:13035
 *   - À découvrir aussi  14794:13045
 *
 * Chargée seulement sur les listings, après les feuilles de WooCommerce
 * (cf. inc/enqueue.php) : à poids égal c'est donc elle qui l'emporte.
 *
 * Seuils : 782 / 781 pour le passage une ou deux colonnes, 1328 pour la
 * gouttière (.u-gouttiere, main.css). La version mobile n'est pas dessinée :
 * les replis ci-dessous sont provisoires, à valider en recette.
 */

/* -------------------------------------------------------------------------
 * Réserve du nuage du footer
 *
 * footer.css la pose sur `.site-main > :last-child`, ici le conteneur
 * .listing, qui n'a pas de fond. La réserve doit être sur la section qui porte
 * la couleur, sinon le trou de la drache laisse voir le fond de page. Même
 * déplacement que sur la fiche produit (product-single.css, .produit-suite).
 *
 * !important pour répondre à celui de footer.css, et une classe de plus pour
 * passer devant lui à poids égal.
 * ------------------------------------------------------------------------- */
.site-main > .listing.listing {
	padding-bottom: 0 !important;
}

/* Sans « À découvrir aussi » (aucune autre catégorie à pousser), c'est la
   dernière section présente qui prend la réserve. */
.listing > :last-child {
	padding-bottom: calc(var(--footer-cloud-height) + var(--wp--preset--spacing--6-xl, 5rem));
}

/* -------------------------------------------------------------------------
 * Scène : le fond commun du hero et de la grille
 *
 * D'un seul tenant comme dans la maquette (le cadre HERO y contient aussi la
 * grille). Couleurs et opacités réglées sur la catégorie et posées en ligne
 * par le gabarit ; le fond et les lignes sont dessinés par .has-drache-fond
 * et .has-quadrillage (main.css). Défauts : jaune à 40 %, lignes orange à
 * 12 %, cette dernière valeur estimée sur la capture et à caler dans Figma.
 * ------------------------------------------------------------------------- */
.listing-scene {
	/* Le visuel du hero déborde à droite : il ne doit pas créer de défilement. */
	overflow: clip;
}

/* -------------------------------------------------------------------------
 * Hero
 *
 * Texte à gauche, visuel à droite qui déborde vers le haut et sur le bord :
 * c'est la vignette de la catégorie, posée inclinée comme un objet sur la
 * table.
 * ------------------------------------------------------------------------- */
.listing-hero {
	/*
	 * Le header est en position absolue : c'est au hero de réserver sa hauteur.
	 * La maquette pose le fil d'ariane 32 sous un header de 168, qui est aussi
	 * la hauteur du nôtre en bureau.
	 */
	padding-block: calc(var(--dda-header-height, 10.5rem) + var(--wp--preset--spacing--2-xl, 2rem)) var(--wp--preset--spacing--6-xl, 5rem);
}

.listing-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

.listing-hero__texte {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
	min-width: 0;
}

/* Fil d'ariane : mêmes valeurs que celui de la fiche (product-single.css). */
.listing-hero__fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	font-family: var(--wp--preset--font-family--headings);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	text-transform: uppercase;
}

/* Sélecteur double : `.woocommerce .woocommerce-breadcrumb` impose son gris et
   sa marge basse à un poids que la classe seule n'atteint pas. */
.listing-hero__fil.woocommerce-breadcrumb {
	margin: 0;
	color: #374151;
}

.listing-hero__fil.woocommerce-breadcrumb a {
	color: #374151;
	text-decoration: none;
}

.listing-hero__fil-maison {
	display: flex;
}

.listing-hero__fil-maison svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.listing-hero__fil-sep {
	display: flex;
	color: var(--wp--preset--color--rose-04, #664d9a);
}

.listing-hero__fil-sep svg {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
}

/*
 * Titre : 120 / 120 dans la maquette, au-dessus du h1 de l'échelle (8-xl, 7.5rem
 * en est le plafond). Il se resserre avec la fenêtre pour ne pas couper un mot
 * comme « AFFICHES » sur tablette.
 */
.listing-hero__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: clamp(3rem, 8.333vw, var(--wp--preset--font-size--8-xl, 7.5rem));
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--wp--custom--typography--headings--h1--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.listing-hero__accroche {
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: var(--wp--custom--typography--paragraph--p-xl--line-height, 1.3333);
	color: var(--wp--preset--color--noir, #1f2937);
}

.listing-hero__accroche > :first-child {
	margin-top: 0;
}

.listing-hero__accroche > :last-child {
	margin-bottom: 0;
}

/*
 * Visuel. Emprise de 552 × 419 dans la maquette, mais l'image en sort, et
 * chaque catégorie à sa façon : le pot de crayons des livrets remonte de 95 %,
 * l'éventail des cartes déborde à droite, incliné de 12°. On garde l'emprise
 * pour la mise en page et on laisse l'image la dépasser.
 *
 * Taille, décalages et rotation sont réglés sur la catégorie (« Visuel du
 * hero ») et arrivent en variables sur ce cadre. Tous relatifs au cadre :
 * largeur et décalage horizontal en % de sa largeur, décalage vertical en % de
 * sa hauteur (c'est ce que font left et top en % sur un élément positionné).
 */
.listing-hero__visuel {
	position: relative;
	flex: 0 0 auto;
	width: min(552px, 40%);
	aspect-ratio: 552 / 419;
}

/* Sélecteur double : `.woocommerce img { max-width: 100% }` pèse plus qu'une
   classe seule et briderait l'image à son cadre, qu'elle doit déborder. */
.listing-hero .listing-hero__image {
	position: absolute;
	top: var(--hero-y, 0%);
	left: var(--hero-x, 0%);
	width: var(--hero-taille, 100%);
	max-width: none;
	height: auto;
	rotate: var(--hero-rotation, 0deg);
	pointer-events: none;
}

/* Sans visuel, le texte reprend toute la largeur : rien à faire, flex s'en charge. */

/* -------------------------------------------------------------------------
 * Grille (rayonnage)
 *
 * Trois colonnes de 400, 40 d'écart, soit les 1280 de la largeur large.
 * Dernière rangée alignée à gauche, trous assumés : c'est ce que fait une
 * grille CSS sans qu'on lui demande rien.
 * ------------------------------------------------------------------------- */
.listing-grille {
	padding-block: var(--wp--preset--spacing--6-xl, 5rem) var(--wp--preset--spacing--8-xl, 10rem);
}

.listing-grille__corps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 400px));
	justify-content: center;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin: 0 auto;
}

/*
 * La liste s'efface de la mise en page : ses cartes deviennent des cellules de
 * la grille du conteneur, à la suite de l'intro (cf. grille.php). La liste
 * garde son rôle pour les lecteurs d'écran (role="list" dans le balisage).
 */
.listing-grille__liste {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flèches : mobile seulement (carrousel de section). */
.listing-carrousel__fleches {
	display: none;
}

/* WooCommerce pose ses notices et son message « aucun produit » sans largeur. */
.listing-grille > .woocommerce-notices-wrapper,
.listing-grille > .woocommerce-no-products-found,
.listing-grille > .woocommerce-pagination {
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

/*
 * Carte en listing : la carte de base (product-carousel.css), texte à gauche
 * avec un retrait de 24, comme partout depuis le 2026-10-08. Titre libre en
 * hauteur, pas de prix ancré en bas : sans fond de carte, l'espace réservé
 * ferait un trou (décision du 2026-10-05). Seule la grille compacte du mobile
 * la retouche, plus bas.
 */

/* -------------------------------------------------------------------------
 * Sections (rayonnage découpé)
 *
 * Réf design : Figma 14794:5236. Chaque section a son fond, posé en ligne par
 * le gabarit avec les classes du quadrillage (main.css). 80 au-dessus et
 * au-dessous, là où la grille simple en a 160 en bas. Sélecteur double pour
 * passer devant .listing-grille, y compris dans ses media queries.
 * ------------------------------------------------------------------------- */
.listing-grille.listing-section {
	padding-block: var(--wp--preset--spacing--6-xl, 5rem);
}

/*
 * Case d'intro : la première cellule de la grille, à la place d'une carte.
 * Titre 56 / 64, phrase en p-xl plafonnée à 320, lien souligné. Alignée en
 * haut, comme les cartes voisines.
 */
.listing-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
}

.listing-intro__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--5-xl, 3.5rem);
	font-weight: 400;
	line-height: 1.1429;
	letter-spacing: var(--wp--custom--typography--headings--h1--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.listing-intro__texte {
	max-width: 20rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: var(--wp--custom--typography--paragraph--p-xl--line-height, 1.3333);
	color: var(--wp--preset--color--noir, #1f2937);
}

/*
 * Lien « Voir la collection » : le bouton « underlined » du design system,
 * texte violet, trait gris de 4 sous le texte. Le violet de la maquette
 * (#7f4dff, « btn/primary/underlined/text ») est la même scorie que celle du
 * prix : c'est le violet de marque du thème qui fait foi.
 */
.listing-intro__lien,
.vedette__voir {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet, #7631ff);
	text-decoration: underline;
	text-decoration-color: #374151;
	text-decoration-thickness: 4px;
	text-underline-offset: 5px;
}

.listing-intro__lien:hover,
.listing-intro__lien:focus-visible,
.vedette__voir:hover,
.vedette__voir:focus-visible {
	text-decoration-color: currentColor;
}

/* Notices et pagination d'une page découpée : sans hauteur à vide. */
.listing-notices,
.listing-pagination {
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

.listing-notices:empty,
.listing-pagination:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * Ancres du hero vers les sections
 *
 * Réf design : Figma 14794:6590, composant « tag » large : blanc, liseré gris,
 * rond complet, libellé en 16.
 * ------------------------------------------------------------------------- */
.listing-hero__ancres ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.listing-hero__ancres a {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: var(--wp--preset--spacing--xxs, 0.25rem) var(--wp--preset--spacing--xs, 0.5rem);
	border: 1px solid #9ca3af;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--blanc, #fff);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: #111827;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.listing-hero__ancres a:hover,
.listing-hero__ancres a:focus-visible {
	border-color: var(--wp--preset--color--violet, #7631ff);
	color: var(--wp--preset--color--violet, #7631ff);
}

/*
 * Défilement animé jusqu'à la section, plutôt qu'un saut (demande d'Hubert du
 * 2026-10-06).
 *
 * En CSS et non en script : le navigateur anime, met l'adresse à jour avec
 * l'ancre et déplace le focus clavier sur la section, ce qu'un défilement
 * scripté devrait refaire à la main. :has() le limite aux pages qui ont des
 * ancres, le reste du site garde le saut habituel.
 *
 * Pas de décalage à prévoir à l'arrivée : le header n'est pas collant, il
 * défile avec la page.
 *
 * Coupé pour qui demande moins d'animations à son système.
 */
@media (prefers-reduced-motion: no-preference) {
	html:has(.listing-hero__ancres) {
		scroll-behavior: smooth;
	}
}

/* -------------------------------------------------------------------------
 * Mise en scène : un bloc vedette par produit
 *
 * Réf design : Figma 14794:13565 et 14794:13665. Visuel de 640 et texte côte à
 * côte, 80 d'écart, sur 1280 au plus ; 80 entre deux blocs. Le visuel passe à
 * gauche puis à droite d'un bloc à l'autre, et son inclinaison s'inverse avec.
 * ------------------------------------------------------------------------- */
.listing-vedettes {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6-xl, 5rem);
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

.vedette {
	--vedette-rotation: -4deg;

	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--6-xl, 5rem);
}

.vedette--droite {
	--vedette-rotation: 4deg;

	grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
}

.vedette--droite .vedette__media {
	order: 2;
}

/* Visuel : nuage blanc, packshot incliné, pastille en débord en haut à gauche. */
.vedette__media {
	position: relative;
	display: grid;
	place-items: center;
	/* 600 de haut pour 640 de large dans la maquette. */
	aspect-ratio: 640 / 600;
	padding-inline: var(--wp--preset--spacing--6-xl, 5rem);
	text-decoration: none;

	/*
	 * Conteneur de requête : le packshot se plafonne en cqw / cqh, c'est-à-dire
	 * sur la taille réelle de ce cadre. Un max-height en % ne se résout pas
	 * ici, la hauteur venant du rapport et non d'une valeur posée : la photo
	 * reprenait alors sa taille naturelle et débordait du cadre.
	 */
	container-type: size;
}

/* Nuage : 572 de large pour 640. */
.vedette__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 89.3%;
	translate: -50% -50%;
	color: var(--wp--preset--color--blanc, #fff);
}

.vedette__blob svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * Packshot : 404 × 574 dans la maquette. Plafonné en largeur ET en hauteur,
 * sans dimension imposée : un livret en portrait bute sur la hauteur, une
 * carte en paysage sur la largeur, sans déformation. Même ombre que la carte.
 *
 * Sélecteur double : `.woocommerce img { max-width: 100% }` pèse plus qu'une
 * classe seule (cf. product-carousel.css).
 */
.vedette .vedette__image {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	/* 404 × 574 dans un cadre de 640 × 600. */
	max-width: 63cqw;
	max-height: 95cqh;
	rotate: var(--vedette-rotation);
	box-shadow: 0.42rem 0.42rem 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);
}

.vedette__media:hover .vedette__image {
	rotate: calc(var(--vedette-rotation) * -0.5);
	scale: 1.03;
}

/* Pastille : 164 de large, à 42 et 36 du coin, inclinée de -8°. */
.vedette__badge {
	position: absolute;
	z-index: 2;
	top: -6%;
	left: -6.5%;
	width: 25.6%;
	rotate: -8deg;
	pointer-events: none;
}

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

/* Texte : 40 de marge intérieure, 40 entre les groupes. */
.vedette__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	padding: var(--wp--preset--spacing--3-xl, 2.5rem);
}

.vedette__entete {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs, 0.25rem);
}

.vedette__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--4-xl, 3rem);
	font-weight: 400;
	line-height: var(--wp--custom--typography--headings--h2--line-height, 1.1667);
	letter-spacing: var(--wp--custom--typography--headings--h2--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.vedette__titre a {
	color: inherit;
	text-decoration: none;
}

.vedette__titre a:hover,
.vedette__titre a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.vedette__coloris {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.4;
	color: var(--wp--preset--color--noir, #1f2937);
}

/* Prix : h3, 40 / 48, violet de marque (cf. la note sur #7f4dff, carte). */
.vedette__prix {
	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);
	color: var(--wp--preset--color--violet, #7631ff);
}

.vedette__prix .woocommerce-Price-amount,
.vedette__prix bdi {
	font: inherit;
	color: inherit;
}

/* Mentions : 24 sous le prix dans la maquette, là où les groupes en ont 40. */
.vedette__mentions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: calc(var(--wp--preset--spacing--md, 1rem) * -1) 0 0;
	padding: 0;
	list-style: none;
}

/* Accroche : titre h6 de la maquette, Intro Rust 20 / 28, sur 480 au plus. */
.vedette__accroche {
	max-width: 30rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: var(--wp--custom--typography--headings--h6--line-height, 1.4);
	letter-spacing: var(--wp--custom--typography--tracking--tight, -0.5px);
	color: var(--wp--preset--color--noir, #1f2937);
}

.vedette__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--md, 1rem) var(--wp--preset--spacing--xl, 1.5rem);
}

.vedette__panier {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	text-transform: uppercase;
}

/*
 * États de l'ajout AJAX de WooCommerce : « loading » pendant l'appel, puis
 * « added », et un lien « Voir le panier » inséré juste après le bouton.
 */
.vedette__panier.loading {
	opacity: 0.6;
	pointer-events: none;
}

.vedette__actions .added_to_cart {
	flex-basis: 100%;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet, #7631ff);
}

/* -------------------------------------------------------------------------
 * Tuile éditoriale
 *
 * Fond vert olive à 10 %. Photo et phrase côte à côte, 80 d'écart, sur une
 * largeur de contenu de 1024.
 * ------------------------------------------------------------------------- */
.listing-tuile {
	--qg-grid-color: var(--wp--preset--color--orange, #fc4c02);
	--qg-grid-opacity: 12%;

	background-color: color-mix(in srgb, var(--wp--preset--color--green, #89a135) 10%, transparent);
	padding-block: var(--wp--preset--spacing--6-xl, 5rem);
}

.listing-tuile__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6-xl, 5rem);
	max-width: var(--wp--custom--layout--container--content, 1024px);
	margin-inline: auto;
}

.listing-tuile__media {
	flex: 1 1 0;
	min-width: 0;
}

.listing-tuile .listing-tuile__image {
	display: block;
	width: 100%;
	height: 35rem;
	max-width: none;
	object-fit: cover;
}

.listing-tuile__phrase {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--4-xl, 3rem);
	line-height: var(--wp--custom--typography--headings--h2--line-height, 1.1667);
	letter-spacing: var(--wp--custom--typography--headings--h2--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/* -------------------------------------------------------------------------
 * « À découvrir aussi »
 *
 * Même fond que celui de la fiche produit : dégradé rose vers lilas, chacun à
 * 40 %, quadrillage lilas. Deux pushes, le premier à gauche, le second à
 * droite et remonté pour chevaucher le premier.
 * ------------------------------------------------------------------------- */
.listing-decouvrir {
	--qg-grid-color: var(--wp--preset--color--lilas, #e5b0fe);
	--qg-grid-opacity: 45%;

	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--pink, #f8c9de) 40%, transparent),
		color-mix(in srgb, var(--wp--preset--color--lilas, #e5b0fe) 40%, transparent)
	);
	padding-top: var(--wp--preset--spacing--6-xl, 5rem);
}

.listing-decouvrir__titre {
	margin: 0 0 var(--wp--preset--spacing--3-xl, 2.5rem);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--5-xl, 3.5rem);
	font-weight: 400;
	line-height: 1.1429;
	letter-spacing: var(--wp--custom--typography--headings--h1--letter-spacing, -2px);
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.listing-decouvrir__pushes {
	display: flex;
	flex-direction: column;
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

/*
 * Chevauchement. category-push.css remonte les pushes IMPAIRS de 47 % de leur
 * largeur, pour la section de l'accueil où un titre les précède. Ici le
 * premier ne remonte pas, et c'est le second qui vient chevaucher le premier
 * de 480 sur 640, soit 81 % de la largeur du push (594).
 */
.listing-decouvrir__pushes > .category-push:nth-of-type(odd) {
	margin-block-start: 0;
}

.listing-decouvrir__pushes > .category-push + .category-push {
	margin-block-start: calc(var(--cp-w) * -0.808);
}

/* -------------------------------------------------------------------------
 * Deux colonnes sous 1280
 *
 * Demande d'Hubert du 2026-10-06. Trois colonnes de 400 et deux écarts de 40
 * remplissent exactement 1280 : en dessous, les cartes rétrécissent et le
 * titre en 32 se casse sur trois lignes. 1280 est déjà un seuil du thème
 * (hero.css, footer.css), écrit en min-width là-bas, d'où le 1279 ici.
 * ------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.listing-grille__corps {
		grid-template-columns: repeat(2, minmax(0, 400px));
	}

	/* Vedette : les deux colonnes se partagent la largeur. */
	.vedette,
	.vedette--droite {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	.vedette__media {
		padding-inline: var(--wp--preset--spacing--3-xl, 2.5rem);
	}
}

/* -------------------------------------------------------------------------
 * Mobile
 *
 * Réf design : Figma 14839:21492 (mise en scène, collections, rayonnage).
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.listing-hero__inner,
	.listing-tuile__inner {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Hero : titre en 64 / 64, accroche en p-lg 20 / 28.
	 *
	 * Tailles en rem et non en presets : les presets du thème sont fluides et
	 * rétrécissent sur petit écran (le 6-xl sortait à 38 px à 390), là où la
	 * maquette mobile fixe ses valeurs.
	 */
	.listing-hero__titre {
		font-size: 4rem;
		line-height: 1;
	}

	.listing-hero__accroche {
		font-size: var(--wp--preset--font-size--lg, 1.25rem);
		line-height: var(--wp--custom--typography--paragraph--p-lg--line-height, 1.4);
	}

	/*
	 * Visuel : sous le texte, bord à bord, à la proportion du fichier
	 * (décision du 2026-10-07). Taille et décalages du bureau ne s'appliquent
	 * pas ; la rotation, si. Le débord latéral d'une image inclinée est rogné
	 * par la scène (overflow: clip), pas de défilement horizontal.
	 */
	.listing-hero__visuel {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		aspect-ratio: auto;
	}

	.listing-hero .listing-hero__image {
		position: static;
		display: block;
		width: 100%;
	}

	.listing-grille {
		padding-block: var(--wp--preset--spacing--4-xl, 3rem) var(--wp--preset--spacing--6-xl, 5rem);
	}

	/*
	 * Rayonnage simple : deux colonnes de cartes compactes (maquette
	 * 14843:21494, retenue le 2026-10-07). 24 entre les colonnes, 40 entre les
	 * rangées. Le carrousel des sections, plus bas, garde ses grandes cartes :
	 * d'où le :not().
	 */
	.listing-grille__corps:not(.listing-grille__corps--carrousel) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--3-xl, 2.5rem) var(--wp--preset--spacing--xl, 1.5rem);
	}

	/*
	 * Carte compacte. Visuel de 168 × 164 : nuage de 159, packshot de 160 de
	 * haut au plus, pastille de 48 en débord. Toutes les cotes en % de la
	 * carte, pour suivre la largeur de l'écran.
	 *
	 * Titre en 16 et non à la taille du Figma, qui se lit trop petit sur un
	 * vrai téléphone (convenu le 2026-10-07 : 14 au minimum). Sélecteurs
	 * longs : ils doivent passer devant les règles mobiles de la carte du
	 * carrousel (product-carousel.css), écrites pour tout .product-card.
	 */
	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing {
		gap: var(--wp--preset--spacing--xl, 1.5rem);
		padding: 0;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__media {
		aspect-ratio: 168 / 164;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__blob {
		width: 94.6%;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__image {
		max-width: 67%;
		max-height: 97.5%;
		box-shadow: 0.25rem 0.25rem 0 0
			color-mix(in srgb, var(--wp--preset--color--rose-04, #664d9a) 40%, transparent);
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__badge {
		top: -7.3%;
		left: -6%;
		width: 28.6%;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__text {
		padding-inline: 0;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__title {
		font-size: 1rem;
		line-height: 1.25;
		letter-spacing: var(--wp--custom--typography--tracking--tight, -0.5px);
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__coloris {
		font-size: 0.875rem;
	}

	.listing-grille__corps:not(.listing-grille__corps--carrousel) .product-card--listing .product-card__price {
		font-size: 1.125rem;
		letter-spacing: var(--wp--custom--typography--tracking--tight, -0.5px);
	}

	/*
	 * Section : carrousel horizontal (maquette 14839:19805). L'intro au-dessus,
	 * 64 d'écart ; les cartes de 320 défilent, 24 entre elles, aimantées au
	 * bord gauche ; la suivante dépasse pour dire qu'il y a une suite. La liste
	 * sort de la gouttière des deux côtés pour que les cartes partent du bord
	 * de l'écran, et non d'une coupe dans le vide.
	 */
	.listing-grille__corps--carrousel {
		display: block;
	}

	.listing-grille__corps--carrousel .listing-intro {
		margin-bottom: var(--wp--preset--spacing--5-xl, 4rem);
	}

	.listing-grille__corps--carrousel .listing-grille__liste {
		display: flex;
		gap: var(--wp--preset--spacing--xl, 1.5rem);
		/* La gouttière mobile, 16 (cf. .u-gouttiere, main.css). */
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding-inline: var(--wp--style--root--padding-left, 1rem);

		/*
		 * Réserve en haut pour la pastille des cartes, annulée par une marge
		 * négative de même valeur : la pastille a sa place, la mise en page ne
		 * bouge pas. overflow-x: auto force overflow-y à auto, donc sans elle
		 * la pastille, qui dépasse au-dessus de la carte, était coupée net.
		 * Même réserve que le carrousel de l'accueil (--pc-badge-overflow).
		 */
		margin-block-start: -2.5rem;
		padding-block-start: 2.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--style--root--padding-left, 1rem);
		scrollbar-width: none;
	}

	.listing-grille__corps--carrousel .listing-grille__liste::-webkit-scrollbar {
		display: none;
	}

	.listing-grille__corps--carrousel .listing-grille__item {
		flex: 0 0 min(320px, 82vw);
		scroll-snap-align: start;
	}

	.listing-carrousel__fleches {
		display: flex;
		justify-content: center;
		gap: var(--wp--preset--spacing--md, 1rem);
		margin-top: var(--wp--preset--spacing--xl, 1.5rem);
	}

	/* 64 dans la maquette des listings, là où le carrousel de l'accueil passe
	   à 48 en mobile (product-carousel.css). */
	.listing-carrousel__fleches .product-carousel__arrow {
		width: 64px;
		height: 64px;
	}

	/*
	 * « À découvrir aussi » : comme la section des pushes de l'accueil en
	 * mobile (category-push.css), les pushes s'empilent, centrés, sans se
	 * chevaucher, avec l'écart par défaut entre blocs (24). La remontée du
	 * second push, plus haut, ne vaut que pour le bureau : à cette largeur elle
	 * le faisait mordre sur le premier.
	 */
	.listing-decouvrir__pushes {
		align-items: center;
		gap: var(--wp--style--block-gap, 1.5rem);
	}

	.listing-decouvrir__pushes > .category-push + .category-push {
		margin-block-start: 0;
	}

	/*
	 * Un push (92vw) est plus large que la colonne entre les gouttières : des
	 * marges automatiques retombent alors à zéro et le collent à gauche. Sans
	 * marges, align-items: center le centre sur l'écran, débord égal des deux
	 * côtés.
	 */
	.listing-decouvrir__pushes > .category-push {
		margin-inline: 0;
	}

	.listing-tuile__inner {
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	/* Tuile : photo au-dessus, 361 × 560 dans la maquette. */
	.listing-tuile .listing-tuile__image {
		height: auto;
		aspect-ratio: 361 / 560;
	}

	.listing-tuile__phrase {
		font-size: var(--wp--preset--font-size--2-xl, 2rem);
	}

	/* 40 / 48 dans la maquette mobile ; en rem pour la même raison que le hero. */
	.listing-decouvrir__titre,
	.listing-intro__titre {
		font-size: 2.5rem;
		line-height: 1.2;
	}

	/* 80 au-dessus et au-dessous, comme en bureau (maquette mobile). */
	.listing-grille.listing-section {
		padding-block: var(--wp--preset--spacing--6-xl, 5rem);
	}

	/* Vedette : une colonne, visuel toujours au-dessus. */
	.vedette,
	.vedette--droite {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--md, 1rem);
	}

	.vedette--droite .vedette__media {
		order: 0;
	}

	.vedette__media {
		padding-inline: var(--wp--preset--spacing--2-xl, 2rem);
	}

	.vedette__texte {
		padding: 0;
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.vedette__titre {
		font-size: var(--wp--preset--font-size--2-xl, 2rem);
	}

	.vedette__prix {
		font-size: var(--wp--preset--font-size--xl, 1.5rem);
	}

	.vedette__mentions {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vedette .vedette__image {
		transition: none;
	}

	.vedette__media:hover .vedette__image {
		rotate: var(--vedette-rotation);
		scale: 1;
	}
}