@charset "UTF-8";
/*
 * WooCommerce, habillé aux couleurs du site.
 *
 * La feuille de mise en page de WooCommerce est retirée (voir
 * inc/woocommerce.php) : la grille est refaite ici en CSS grid, ce qui évite
 * de se battre contre des flottants en pourcentages.
 */

.sbg-woo {
	padding-block: var(--sbg-e6) var(--sbg-e8);
}

/* Le bandeau est posé AVANT `.sbg-woo` (voir inc/woocommerce.php) : il va donc
   d'un bord à l'autre sans avoir à défaire une largeur. */

/* ------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------
   Trois défauts, tous corrigés ici :

   1. La feuille de WooCommerce pose un glyphe de sa police d'icônes en absolu
      (`::before`, `left: 1.5em`). Le padding de 3,5em qui lui faisait place a
      sauté : le glyphe tombait SUR les premiers mots, dans trois couleurs
      étrangères au kit. Le `::after` de clearfix devenait en prime une case de
      flex vide.
   2. `.woocommerce-error` est un `<ul>` de N `<li>`, pas un bloc. En flex, deux
      erreurs se rangeaient côte à côte sur la même ligne.
   3. Succès et information partageaient le vert très pâle du bandeau de la
      boutique : le message se confondait avec la bande qu'il surmonte.
   ------------------------------------------------------------------ */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: var(--sbg-e4);
}

.woocommerce-notices-wrapper > * + * {
	margin-top: var(--sbg-e2);
}

.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-error li::before,
.woocommerce-error li::after {
	content: none;
}

/* La liste ne porte rien : c'est chaque <li> qui est une carte. */
.woocommerce-error {
	display: grid;
	gap: var(--sbg-e2);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error li {
	display: flex;
	align-items: flex-start;
	gap: var(--sbg-e2);
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sbg-ligne);
	border-inline-start: 4px solid var(--sbg-pine);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
	color: var(--sbg-encre);
	font-size: 0.95rem;
	line-height: 1.5;
	list-style: none;
	text-wrap: pretty;
}

.woocommerce-message {
	border-color: var(--sbg-pine-100);
	border-inline-start-color: var(--sbg-pine);
	background: var(--sbg-feuille);
	color: var(--sbg-pine-fonce);
}

.woocommerce-info {
	border-inline-start-color: var(--sbg-pine-300);
}

.woocommerce-error li {
	border-color: var(--sbg-rose);
	border-inline-start-color: var(--sbg-berry);
	background: var(--sbg-blush);
	color: var(--sbg-berry-fonce);
}

.woocommerce-message > .sbg-ico,
.woocommerce-info > .sbg-ico,
.woocommerce-error li > .sbg-ico {
	flex: none;
	margin-top: 2px;
}

/* ------------------------------------------------------------------
   Grille des produits
   ------------------------------------------------------------------ */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--sbg-e4);
	margin: 0 0 var(--sbg-e6);
	padding: 0;
	list-style: none;
}

/* WooCommerce pose deux pseudo-éléments de « clearfix » sur la liste. En grille
   ils comptent comme deux cases vides et décalent le premier produit d'une
   colonne. Le sélecteur reprend celui de la feuille de WooCommerce, sinon il
   perd en spécificité. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	padding: var(--sbg-e4);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-carte);
	text-align: start;
	transition: transform var(--sbg-transition), box-shadow var(--sbg-transition);
}

ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 8px 10px 20px 0 rgb(0 0 0 / 0.14);
}

ul.products li.product a {
	text-decoration: none;
}

ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: var(--sbg-e3);
	border-radius: var(--sbg-r-champ);
}

ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin-bottom: var(--sbg-e1);
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: none;
	line-height: 1.25;
	color: var(--sbg-pine);
}

ul.products li.product .price {
	margin-bottom: var(--sbg-e3);
	color: var(--sbg-pine);
	font-size: 1.15rem;
	font-weight: 700;
}

ul.products li.product .price del {
	opacity: 0.55;
	font-weight: 400;
	margin-inline-end: 0.4em;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--sbg-berry);
}

ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

ul.products li.product .onsale,
.single-product .onsale {
	position: absolute;
	top: var(--sbg-e3);
	inset-inline-start: var(--sbg-e3);
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 2px var(--sbg-e2);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-berry);
	color: var(--sbg-blanc);
	font-size: var(--sbg-t-petit);
	font-weight: 600;
	line-height: 1.6;
}

ul.products li.product {
	position: relative;
}

/* ------------------------------------------------------------------
   Boutons de WooCommerce
   ------------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button,
button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sbg-e1);
	padding: 0.6rem 1.875rem;
	border: 2px solid var(--sbg-pine);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: var(--sbg-ombre-bouton);
	transition: background var(--sbg-transition), color var(--sbg-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button:hover,
button.button:hover {
	background: var(--sbg-blanc);
	color: var(--sbg-pine);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--sbg-berry);
	border-color: var(--sbg-berry);
	color: var(--sbg-blanc);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--sbg-blush);
	color: var(--sbg-berry);
}

.woocommerce .button.disabled,
.woocommerce button.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Fiche produit
   ------------------------------------------------------------------ */

.single-product div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sbg-e6);
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--sbg-r-carte);
}

.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e3);
}

.single-product .product_title {
	font-size: var(--sbg-t-h2);
	color: var(--sbg-pine);
}

.single-product div.product p.price,
.single-product div.product span.price {
	margin: 0;
	color: var(--sbg-pine);
	font-size: 1.75rem;
	font-weight: 900;
}

.single-product div.product p.price del {
	opacity: 0.5;
	font-weight: 400;
	font-size: 1.2rem;
}

.single-product div.product p.price ins {
	text-decoration: none;
	color: var(--sbg-berry);
}

.woocommerce-product-details__short-description {
	color: var(--sbg-encre);
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sbg-e2);
	margin: 0;
}

.single-product form.cart.variations_form {
	flex-direction: column;
	align-items: stretch;
}

.single-product table.variations {
	width: 100%;
	margin: 0;
	border: 0;
}

.single-product table.variations :is(th, td) {
	padding: var(--sbg-e1) 0;
	border: 0;
	vertical-align: middle;
}

.single-product table.variations label {
	font-weight: 600;
	color: var(--sbg-pine);
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sbg-e2);
}

.woocommerce div.product form.cart .variations select,
.sbg-woo select,
.sbg-woo input[type="number"],
.sbg-woo input[type="text"],
.sbg-woo input[type="email"],
.sbg-woo input[type="tel"],
.sbg-woo textarea {
	padding: 0.5rem var(--sbg-e3);
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
	color: var(--sbg-encre);
}

.sbg-woo :is(select, input, textarea):focus {
	border-color: var(--sbg-pine);
	outline: none;
}

.quantity input.qty {
	width: 5rem;
	text-align: center;
}

.product_meta {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.product_meta a {
	color: var(--sbg-pine);
}

/* Onglets : mis à plat en sections empilées, plus lisibles sur téléphone que
   des onglets à faire glisser. */
.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--sbg-e6);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e1);
	margin: 0 0 var(--sbg-e4);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	content: none !important;
	border: 0 !important;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: var(--sbg-r-pilule);
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.4rem var(--sbg-e4);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
}

.woocommerce-tabs ul.tabs li.active a {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

.woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.woocommerce-tabs .panel h2 {
	font-size: var(--sbg-t-h3);
	margin-bottom: var(--sbg-e2);
}

/* Produits associés et ventes croisées. */
.related.products,
.upsells.products,
.cross-sells {
	grid-column: 1 / -1;
	margin-top: var(--sbg-e7);
}

.related.products > h2,
.upsells.products > h2 {
	margin-bottom: var(--sbg-e4);
	font-size: var(--sbg-t-h3);
}

/* ------------------------------------------------------------------
   Panier — page de repli
   ------------------------------------------------------------------
   Le parcours d'achat passe par sbg-commerce, qui court-circuite cette page.
   Elle reste habillée pour le jour où la bascule est refermée.
   ------------------------------------------------------------------ */

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: var(--sbg-r-carte);
	overflow: hidden;
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce);
}

.woocommerce table.shop_table th {
	padding: var(--sbg-e3);
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
	font-weight: 600;
	text-align: start;
}

.woocommerce table.shop_table td {
	padding: var(--sbg-e3);
	border-top: 1px solid var(--sbg-trait);
}

.woocommerce table.shop_table img {
	width: 64px;
	border-radius: var(--sbg-r-champ);
}

.cart_totals h2,
.woocommerce-billing-fields h3 {
	font-size: var(--sbg-t-h3);
	margin-bottom: var(--sbg-e3);
}

/* ------------------------------------------------------------------
   Pagination des produits
   ------------------------------------------------------------------ */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbg-e1);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 var(--sbg-e1);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce);
	color: var(--sbg-pine);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   Adaptations
   ------------------------------------------------------------------ */

@media (min-width: 768px) {

	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (min-width: 1025px) {

	.single-product div.product {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
}

/* ------------------------------------------------------------------
   La boutique en deux colonnes
   ------------------------------------------------------------------
   Le site historique posait un quart de texte à gauche, trois quarts de
   produits à droite, et une bande pleine largeur en dessous. Le texte vient du
   contenu de la page « Boutique » ; `display: contents` laisse ses sections
   prendre place dans la grille sans que le PHP ait à découper le contenu.
   ------------------------------------------------------------------ */

.sbg-boutique__intro > * + * {
	margin-top: var(--sbg-e4);
}

.sbg-boutique__aside > * + * {
	margin-top: var(--sbg-e2);
}

.sbg-boutique__aside h2,
.sbg-boutique__aside h3 {
	margin-top: var(--sbg-e5);
	font-size: var(--sbg-t-faq);
	font-weight: 900;
	text-transform: uppercase;
}

.sbg-boutique__aside > :first-child {
	margin-top: 0;
}

.sbg-boutique__bas {
	margin-top: var(--sbg-e7);
}

.sbg-etapes {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sbg-etapes li {
	display: flex;
	align-items: center;
	gap: var(--sbg-e1);
	color: var(--sbg-encre);
}

.sbg-etapes .sbg-ico {
	color: var(--sbg-pine);
}

.sbg-faq--serree {
	margin-top: var(--sbg-e5);
	gap: var(--sbg-e2);
}

.sbg-faq--serree details {
	box-shadow: none;
	border: 1px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
}

.sbg-faq--serree summary {
	padding: var(--sbg-e2) var(--sbg-e3);
	font-size: 0.95rem;
	text-transform: none;
	font-weight: 600;
}

.sbg-faq--serree details > :not(summary) {
	padding-inline: var(--sbg-e3);
	font-size: var(--sbg-t-petit);
}

.sbg-annonce {
	margin-bottom: var(--sbg-e4);
	font-size: 1.3rem;
	color: var(--sbg-pine);
}

@media (min-width: 900px) {

	/* Trois zones, trois lignes : le texte à gauche sur toute la hauteur,
	   l'annonce puis les produits à droite, la bande d'histoire en dessous.
	   `display: contents` fait entrer les sections du contenu éditorial dans
	   cette grille sans que le PHP ait à découper quoi que ce soit. */
	.sbg-boutique--colonnes {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"aside annonce"
			"aside produits"
			"bas   bas";
		column-gap: var(--sbg-e7);
		row-gap: 0;
		align-items: start;
	}

	.sbg-boutique--colonnes .sbg-boutique__intro {
		display: contents;
	}

	.sbg-boutique--colonnes .sbg-boutique__aside {
		grid-area: aside;
	}

	.sbg-boutique--colonnes .sbg-boutique__annonce {
		grid-area: annonce;
	}

	.sbg-boutique--colonnes .sbg-boutique__produits {
		grid-area: produits;
	}

	.sbg-boutique--colonnes .sbg-boutique__bas {
		grid-area: bas;
		margin-top: var(--sbg-e7);
	}
}

/* ------------------------------------------------------------------
   Fiche produit : réassurance et compléments
   ------------------------------------------------------------------ */

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	padding: var(--sbg-e3);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: 0 0 10px 0 rgb(0 0 0 / 0.08);
}

.single-product div.product .summary {
	padding: var(--sbg-e5);
}

.sbg-produit__reassurance {
	margin-top: var(--sbg-e4);
}

.sbg-produit__reassurance details {
	box-shadow: none;
	border: 1px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
}

.sbg-produit__reassurance summary {
	padding: var(--sbg-e2) var(--sbg-e3);
	font-size: 0.95rem;
}

.sbg-produit__reassurance details > :not(summary) {
	padding-inline: var(--sbg-e3);
	font-size: var(--sbg-t-petit);
}

.sbg-complements {
	grid-column: 1 / -1;
	margin-top: var(--sbg-e6);
}

.sbg-complements__titre {
	margin-bottom: var(--sbg-e4);
	font-size: var(--sbg-t-h3);
}

.sbg-complements__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--sbg-e4);
}

.sbg-complement {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e1);
	padding: var(--sbg-e3);
	border: 2px solid var(--sbg-pine);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-feuille);
}

.sbg-complement__titre {
	font-size: 1.1rem;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--sbg-pine);
}

.sbg-complement__texte {
	font-size: var(--sbg-t-petit);
}

.sbg-complement__texte p {
	margin: 0;
}

.sbg-complement__texte p + p {
	margin-top: 0.4em;
}

.sbg-complement__prix {
	font-weight: 700;
	color: var(--sbg-pine);
}

.sbg-complement__lien {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--sbg-t-petit);
	font-weight: 600;
}

.sbg-complement .button {
	margin-top: auto;
	align-self: flex-start;
}

.sbg-complement form.cart {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e1);
	align-items: center;
}

/* ------------------------------------------------------------------
   Le bouton d'un message
   ------------------------------------------------------------------
   Posé ici, après le chapitre des boutons : `.woocommerce a.button` a la même
   spécificité et gagnerait par l'ordre. Le sélecteur doit contenir `a` pour
   battre le `margin: 0` de WooCommerce.
   ------------------------------------------------------------------ */

.woocommerce-message a.button,
.woocommerce-info a.button {
	margin-inline-start: auto;
	padding: 0.3rem 0.9rem;
	border: 1.5px solid currentcolor;
	border-radius: var(--sbg-r-pilule);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: var(--sbg-t-petit);
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message a.button:focus-visible,
.woocommerce-info a.button:focus-visible {
	border-color: var(--sbg-pine);
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}