/**
 * Cartes produit — grille de la boutique ET grille de formules de l'accueil.
 *
 * Les deux passent par le même gabarit WooCommerce (l'accueil via le
 * shortcode `[products]`), donc par le même balisage : `.woocommerce
 * ul.products li.product`. Cette feuille est volontairement commune, pour
 * qu'une carte ait le même aspect partout.
 *
 * Plusieurs sélecteurs sont longs. Ce n'est pas de la paresse inversée :
 * WooCommerce et le CSS dynamique d'Astra déclarent les mêmes propriétés à
 * des spécificités élevées, et chaque poids nécessaire est justifié sur place.
 *
 * @package Plein_R_Astra_Child
 */

/* La GRILLE, ici et pas seulement sur l'accueil. C'est le corollaire
   obligatoire des règles ci-dessous : neutraliser le `float` et la largeur en
   pourcentage que WooCommerce pose sur `li.product` suppose que le parent
   sache disposer ses enfants. Sans cette grille, la boutique repassait ses
   neuf produits sur une seule colonne — et aucun test de débordement ne
   l'aurait signalé, une colonne unique ne débordant pas. */
.woocommerce ul.products {
	display: grid;
	/* `auto-fill` et non `auto-fit` : avec `auto-fit`, les pistes vides
	   s'effondrent et un produit seul — le cas des « Produits similaires »,
	   mesuré à une carte — s'étirait sur toute la largeur, son image occupant
	   1 084 px de haut. */
	grid-template-columns: repeat(auto-fill, minmax(min(265px, 100%), 1fr));
	gap: var(--e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	background: var(--fond);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	overflow: hidden;
}

/* Format de vignette. Le sélecteur doit contenir `a img` et une classe de
   plus : WooCommerce déclare `.woocommerce-js ul.products li.product a img
   { height: auto }` en (0,3,4), qui battait notre (0,3,3) — les images
   restaient CARRÉES à la largeur de la colonne, soit des cartes de 659 px
   dont on ne voyait que trois par écran.
   Un rapport 4/3 plutôt qu'une hauteur fixe : il suit la largeur de colonne
   à tous les paliers. Les sujets de ces photos sont centrés, un recadrage
   centré ne coupe donc pas de visage. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a img,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	margin: 0;
}

/* Astra enveloppe titre, prix, description et bouton dans
   `.astra-shop-summary-wrap` : c'est CE bloc qui doit être la colonne flex,
   pas le `li`. Sans cela, la marge automatique du bouton n'a aucun conteneur
   sur lequel s'appuyer et les trois boutons ne s'alignent pas. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	flex: 1;
	padding: var(--e-2);
}

/* La description courte porte deux niveaux, posés par la migration 010 :
   le PREMIER paragraphe est l'accroche, les suivants le détail pratique.
   La hiérarchie repose sur l'ORDRE et non sur des classes — le propriétaire
   perdrait une classe en réécrivant son texte dans l'éditeur, il ne perdra
   pas l'ordre des paragraphes. */
.woocommerce ul.products li.product .ast-woo-shop-product-description {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
}

.woocommerce ul.products li.product .ast-woo-shop-product-description p {
	margin: 0;
	color: var(--encre);
	font-size: var(--t-corps);
	line-height: var(--lh-corps);
}

/* Le détail : plus petit, atténué, il ne concurrence pas l'accroche. */
.woocommerce ul.products li.product .ast-woo-shop-product-description p + p {
	color: var(--encre-douce);
	font-size: var(--t-petit);
	line-height: var(--lh-corps);
}

.woocommerce ul.products li.product .ast-loop-product__link { text-decoration: none; }

/* Typographie de titre HOMOGÈNE d'une carte à l'autre : une seule taille, un
   seul interligne, un seul poids, et deux lignes maximum réservées pour que
   les trois cartes s'alignent quelle que soit la longueur du nom. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--t-h5);
	line-height: var(--lh-h4);
	font-weight: 700;
	padding: 0;
	margin: 0;
	color: var(--encre);
	text-wrap: balance;
	min-height: calc(var(--t-h5) * var(--lh-h4) * 2);
}

.woocommerce ul.products li.product .price {
	padding: 0;
	margin: 0;
	font-size: var(--t-h5);
	font-weight: 700;
	color: var(--encre);
}

/* L'ancien prix barré, dans la GRILLE et sur la FICHE produit. Deux
   atténuations le rendaient illisible :
   - `opacity: .5` de WooCommerce dans la grille ;
   - une couleur `#999` sur la fiche, soit 2,84:1 sur fond blanc.
   Ce second défaut existait depuis toujours mais échappait à axe : le fond de
   page était un DÉGRADÉ, et axe renonce à mesurer un contraste dont il ne
   peut pas déterminer le fond. Le fond rendu uni, le défaut est apparu.
   L'atténuation passe donc par une couleur franche, mesurable. */
.woocommerce div.product .summary .price del,
.woocommerce div.product .summary .price del .amount,
.woocommerce div.product .summary .price del bdi {
	color: var(--encre-douce);
	opacity: 1;
}

/* Sélecteur long et non `!important` : WooCommerce déclare
   `.woocommerce-js ul.products li.product .price del { opacity: .5 }`, soit
   (0,4,3) — exactement le poids du sélecteur naturel ici. À égalité, seul
   l'ordre de chargement trancherait : on passe par le conteneur d'Astra pour
   atteindre (0,5,3) et ne plus rien devoir au hasard. */
.woocommerce ul.products li.product .astra-shop-summary-wrap .price del {
	opacity: 1;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del bdi {
	color: var(--encre-douce);
	font-weight: 400;
	font-size: var(--t-petit);
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Le bouton d'ajout au panier est collé en bas pour que les trois cartes
   s'alignent quelle que soit la longueur du titre. */
/* `a.` n'est pas décoratif : Astra déclare `.woocommerce a.button` en
   (0,2,1), qui battait notre sélecteur en (0,2,0) — le bouton restait rouge. */
/* `a.button` couvre aussi « Lire la suite », rendu à la place du bouton
   d'achat pour un produit non achetable : il restait au rouge de WooCommerce
   au milieu de huit boutons roses. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart {
	margin: auto 0 0;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rayon-s);
	background-color: var(--accent);
	border: 2px solid var(--accent);
	color: var(--accent-texte);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus-visible,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:focus-visible,
.woocommerce ul.products li.product a.added_to_cart:hover,
.woocommerce ul.products li.product a.added_to_cart:focus-visible {
	background-color: var(--encre);
	border-color: var(--encre);
	color: var(--fond);
}

/* Le badge de promotion. Il porte l'économie réelle (« −36 € »), posée par
   inc/boutique.php : « Promo ! » n'informait de rien et obligeait le visiteur
   à comparer lui-même deux prix dont l'un est barré.
   Il était auparavant collé dans l'angle, rogné par le bord de la carte.

   Le sélecteur est long à dessein, et non forcé par `!important` : il doit
   battre DEUX surcharges — le CSS dynamique d'Astra
   (`.woocommerce span.onsale`, un fond gris, en (0,2,1)) et WooCommerce
   (`.woocommerce-js ul.products li.product .onsale { top: 0 }`, en (0,4,2)).
   Ce sélecteur pèse (0,4,3). */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { position: relative; }

/* Le badge, en vitrine ET sur la fiche. Sur la fiche il est un enfant direct
   de `div.product` : sans ce second sélecteur il restait au gris du CSS
   dynamique d'Astra, rose en vitrine et gris sur la fiche du même produit. */
.woocommerce div.product > span.onsale,
.woocommerce ul.products li.product span.onsale {
	position: absolute;
	top: var(--e-1);
	left: var(--e-1);
	right: auto;
	bottom: auto;
	z-index: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--accent);
	color: var(--accent-texte);
	font-size: var(--t-petit);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 4px rgba(20, 24, 31, .28);
}

/* ========================================================================
   Note « supplément de poids » — fiches de saut
   ======================================================================== */

/* Rendue par `inc/boutique.php`, à partir du texte de l'article 5978 sorti du
   catalogue à la migration 011. Un encadré discret : c'est une information
   utile à la décision, pas un avertissement ni un argument de vente. */
.plnr-note-poids {
	margin-block: var(--e-3);
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--bordure);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--rayon-s);
	background-color: var(--surface);
}

.plnr-note-poids p { margin: 0; }
.plnr-note-poids p + p { margin-top: var(--e-1); }

.plnr-note-poids__titre {
	font-size: var(--t-menu);
	line-height: var(--lh-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
}

.plnr-note-poids a {
	color: var(--lien);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ========================================================================
   Intitulés de groupe dans la grille
   ======================================================================== */

/* Posés par `inc/boutique.php` avant le premier produit de chaque nature.
   Ce sont des `<li>` parce qu'un `<ul>` n'admet pas d'autre enfant ; ils
   occupent toute la largeur de la grille. */
.woocommerce ul.products li.plnr-groupe {
	grid-column: 1 / -1;
	display: block;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

/* Le premier intitulé n'a pas besoin d'air au-dessus : l'introduction de la
   page l'en donne déjà. Les suivants séparent deux natures de produits. */
.woocommerce ul.products li.plnr-groupe + li.product ~ li.plnr-groupe,
.woocommerce ul.products li.plnr-groupe:not(:first-child) {
	margin-top: var(--e-4) !important;
	padding-top: var(--e-3);
	border-top: 1px solid var(--bordure);
}

.plnr-groupe__titre {
	margin: 0;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--encre);
}

/* Introduction de la page boutique, rendue par WooCommerce au-dessus de la
   grille à partir du contenu de la page 3522. */
.woocommerce .page-description {
	max-width: var(--mesure);
	margin-bottom: var(--e-5);
}

.woocommerce .page-description p {
	margin: 0;
	font-size: var(--t-h5);
	line-height: var(--lh-lead);
	color: var(--encre-douce);
}

/* ========================================================================
   Fiche produit
   ======================================================================== */

/* Le bouton d'achat de la FICHE : il restait au rouge de WooCommerce, seul
   bouton rouge au milieu de huit boutons roses en vitrine. Même traitement
   que dans la grille, et même raison de spécificité (`a.button` d'Astra). */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 52px;
	padding: 0 var(--e-3);
	border: 2px solid var(--accent);
	border-radius: var(--rayon-s);
	background-color: var(--accent);
	color: var(--accent-texte);
	font-size: var(--t-corps);
	line-height: var(--lh-ui);
	font-weight: 700;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible {
	background-color: var(--encre);
	border-color: var(--encre);
	color: var(--fond);
}

/* Le champ de quantité doit faire la même hauteur que le bouton : il était
   plus bas, et la ligne d'achat paraissait de guingois. */
.woocommerce div.product form.cart .quantity input.qty {
	min-height: 52px;
	padding-inline: var(--e-1);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-s);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product form.cart { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }

/* L'image de la fiche suit le même format que les vignettes (4/3). Le visuel
   principal du saut est en 16/9 : la colonne de gauche s'arrêtait à 303 px
   quand celle de droite en faisait 727, laissant un grand vide. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: var(--rayon);
}

/* Galerie à plusieurs images (les prolongations, qui portent le billet
   cadeau en second visuel) : les vignettes en rang, format carré. */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: var(--e-1);
	margin: var(--e-1) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li { width: 72px; margin: 0; }

.woocommerce div.product .flex-control-thumbs img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--rayon-s);
	cursor: pointer;
}

@media (min-width: 993px) {
	/* Réagencement en grille. Astra fait flotter la galerie à gauche et le
	   résumé à droite, puis empile les onglets et les produits liés en pleine
	   largeur — d'où un vide sous la galerie, plus courte que le résumé.
	   Les onglets remontent dans la colonne de gauche, sous la galerie : le
	   vide se comble et la description reste près de l'image. */
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		grid-template-areas:
			"galerie resume"
			"onglets resume"
			"lies    lies";
		gap: var(--e-4) var(--e-5);
		align-items: start;
	}

	/* `!important` pour les mêmes raisons qu'ailleurs : ces largeurs et ces
	   `float` viennent du CSS de WooCommerce et d'Astra. */
	.woocommerce div.product > .woocommerce-product-gallery {
		grid-area: galerie;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}

	.woocommerce div.product > .summary {
		grid-area: resume;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}

	.woocommerce div.product > .woocommerce-tabs {
		grid-area: onglets;
		width: auto !important;
		margin: 0 !important;
	}

	.woocommerce div.product > .related,
	.woocommerce div.product > .upsells {
		grid-area: lies;
		width: auto !important;
	}
}

/* Sur la fiche, le badge se cale DANS la vignette. WooCommerce le décale
   volontairement de -0,5 em hors de l'image, via
   `.woocommerce-js.single-product .sale:not(…) > span.onsale` — soit (0,5,1).
   Il faut donc au moins autant : ce sélecteur pèse (0,5,2). */
.woocommerce.single-product div.product.sale > span.onsale {
	top: var(--e-2);
	left: var(--e-2);
	right: auto;
	z-index: 2;
}

/* Onglets : un seul onglet « Description » la plupart du temps — l'habillage
   reste sobre. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 var(--e-2);
	padding: 0;
	border-bottom: 1px solid var(--bordure);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	border: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs .panel > h2 { display: none; }

.woocommerce div.product .woocommerce-tabs p { max-width: var(--mesure); }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	margin-bottom: var(--e-3);
}

/* Le titre de la fiche produit suit la même règle de couleur que tous les
   titres du site : il sortait au gris par défaut d'Astra. */
.single-product div.product .product_title {
	color: var(--encre);
	text-wrap: balance;
}