/* ==========================================================================
   HiveShop — composants : boutons, badges, tiroirs, accordeons, reassurance
   ========================================================================== */

/* === BOUTONS ===
 *
 * 🔴 ON NE CIBLE PLUS « button » TOUT COURT.
 *
 * La regle visait autrefois toute balise <button>, avec une liste d'exceptions
 * qui s'allongeait a chaque nouveau composant : fermeture du tiroir, boutons
 * de quantite, fleches du carrousel, blocs WooCommerce… Chacun devait penser a
 * s'y inscrire, et celui qui l'oubliait sortait en pave sombre — les chevrons
 * du carrousel en carres noirs, les « + » et « − » du panier en gros blocs,
 * le lien « Retirer » en rectangle vide.
 *
 * 🔑 UN <button> N'EST PAS FORCEMENT UN BOUTON D'ACTION.
 *
 * C'est aussi une bascule, une icone, une fleche. Ne sont donc styles que les
 * elements qui DEMANDENT cette apparence : ceux qui portent une classe de
 * bouton, ceux qui soumettent un formulaire, et ceux de WooCommerce.
 *
 * Tout le reste garde son apparence naturelle, et chaque composant definit la
 * sienne — ce qui est le seul moyen de ne plus avoir de surprise a chaque
 * ajout.
 */

.hs-btn,
.wp-block-button__link,
button[type="submit"]:not([class*="wc-block-"]),
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--hs-radius);
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hs-transition), border-color var(--hs-transition),
		color var(--hs-transition), transform var(--hs-transition);
}

.hs-btn:hover,
.wp-block-button__link:hover,
button[type="submit"]:not([class*="wc-block-"]):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--hs-primary-dark);
	color: var(--hs-on-primary);
	transform: translateY(-1px);
}

.hs-btn:active { transform: translateY(0); }

.hs-btn--ghost,
.woocommerce a.button.wc-backward {
	background: transparent;
	border-color: var(--hs-border);
	color: var(--hs-heading);
}

.hs-btn--ghost:hover,
.woocommerce a.button.wc-backward:hover {
	background: var(--hs-bg-alt);
	border-color: var(--hs-primary);
	color: var(--hs-primary);
}

.hs-btn--block { width: 100%; }

.hs-btn[disabled],
button[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* === BADGES === */

.hs-badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 3;
	padding: 0.3rem 0.6rem;
	border-radius: var(--hs-radius-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}

/* 🔑 L'encre suit le fond. En « #fff », le badge tombait a 2,6:1 sur les
   palettes a promo claire (nuit, or & nuit, vitamine) — mesure du 26/08. */
.hs-badge--sale {
	background: var(--hs-sale);
	color: var(--hs-on-sale, #fff);
}

.hs-badge--oos {
	top: auto;
	bottom: 0.7rem;
	left: 0.7rem;
	background: var(--hs-heading);
	color: var(--hs-bg);
}

/* === TIROIRS LATERAUX (panier, recherche) === */

.hs-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
}

.hs-drawer[hidden] { display: none; }

.hs-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(var(--hs-heading-rgb), 0.45);
	opacity: 0;
	transition: opacity var(--hs-transition);
}

.hs-drawer.is-open::before { opacity: 1; }

.hs-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	height: 100%;
	background: var(--hs-bg);
	box-shadow: var(--hs-shadow-lg);
	transform: translateX(100%);
	transition: transform var(--hs-transition);
}

.hs-drawer.is-open .hs-drawer__panel { transform: translateX(0); }

.hs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--hs-border);
}

.hs-drawer__title {
	margin: 0;
	font-size: 1.1rem;
}

.hs-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--hs-radius-sm);
	background: transparent;
	color: var(--hs-heading);
	cursor: pointer;
	transition: background var(--hs-transition);
}

.hs-drawer__close:hover { background: var(--hs-bg-alt); }

.hs-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem;
}

/* === STOCK QUI S'EPUISE ===
 *
 * 🔑 UNE INDICATION, PAS UNE ALARME.
 *
 * « Plus que 2 en stock » doit se remarquer sans dramatiser : l'ambre suffit,
 * le rouge est reserve aux ruptures et aux erreurs. Un message trop fort sur
 * un produit encore disponible fait douter de la boutique plutot que du delai.
 *
 * Il se pose SOUS le selecteur de quantite, sur sa propre ligne : accole au
 * prix, il se lirait comme une mention de tarif. */
.hs-stock-bas {
	display: block;
	margin-top: 0.25rem;
	color: var(--hs-warning);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

/* === « ANNULER » APRES UN RETRAIT ===
 *
 * 🔑 UN RATTRAPAGE, PAS UNE ALERTE.
 *
 * Retirer un article est une action VOULUE neuf fois sur dix : la teinter de
 * rouge, ou la faire clignoter, punirait un geste normal. Le bandeau se
 * contente donc du fond alternatif du theme et d'un liseré discret — il se
 * remarque parce qu'il apparait, pas parce qu'il crie.
 *
 * 🔴 IL NE DOIT PAS POUSSER LE PANIER HORS DE VUE.
 *
 * Pose en tete du corps du tiroir, il decale la liste vers le bas de sa propre
 * hauteur. Sur un telephone ou trois articles remplissent deja l'ecran, un
 * bandeau haut ferait disparaitre le dernier. D'ou une seule ligne, un
 * remplissage serre, et le nom du produit tronque plutot que replie. */
.hs-undo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
	padding: 0.5rem 0.75rem;
	background: var(--hs-bg-alt);
	border: 1px solid var(--hs-border);
	border-left: 3px solid var(--hs-primary);
	border-radius: var(--hs-radius-sm);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.hs-undo__texte {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--hs-text-muted);
}

/* Le bouton porte le geste : il doit se lire comme un lien d'action, pas
   comme le bouton plein d'un ajout au panier — on ne met pas au meme niveau
   « Commander » et « Annuler ». */
.hs-undo__btn {
	flex: 0 0 auto;
	padding: 0.25rem 0.5rem;
	background: transparent;
	border: 0;
	border-radius: var(--hs-radius-sm);
	color: var(--hs-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.hs-undo__btn:hover,
.hs-undo__btn:focus-visible { background: var(--hs-bg); }

.hs-undo__btn[disabled] { opacity: .5; cursor: default; }

.hs-undo.est-echec {
	border-left-color: var(--hs-sale, #dc2626);
}

.hs-undo.est-echec .hs-undo__texte {
	color: var(--hs-sale, #dc2626);
	font-weight: 600;
}

/* === MINI-PANIER (tiroir) ===
 *
 * 🔴 CES REGLES VIVENT ICI, ET NON DANS woocommerce.css.
 *
 * woocommerce.css n'est charge que sur les pages de la boutique — une
 * optimisation qui evite d'imposer 20 Ko de styles produits a la page
 * d'accueil. Mais le tiroir du panier, lui, est injecte sur TOUTES les
 * pages (hiveshop_cart_drawer, accroche a wp_footer).
 *
 * Resultat constate : hors boutique, le tiroir s'ouvrait sans le moindre
 * style — liens soulignes, puces de liste apparentes, et les deux boutons
 * « Voir le panier » et « Commander » colles l'un a l'autre faute du
 * display:grid ci-dessous. Le panier etant accessible partout, son style
 * doit l'etre aussi.
 */

/* === MINI-PANIER (tiroir) === */

.hs-drawer .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce imbrique la vignette DANS le lien du produit
   (<a><img>Titre</a>) : c'est donc le lien qu'il faut disposer en ligne,
   pas le <li>. Une grille posee sur le <li> ne verrait jamais l'image. */
/* 🔴 LE SELECTEUR EST LONG PARCE QUE WOOCOMMERCE PESE PLUS LOURD.
 *
 * Signale par Chris sur telephone : la corbeille touchait le nom du produit.
 * Mesure sur la fiche « Jean baggy taille haute en denim noir et gris » :
 *
 *   titre finit a          1875
 *   corbeille commence a   1847     ← 28 px de CHEVAUCHEMENT
 *   padding droit calcule  0px      ← alors que la regle demandait 1.6rem
 *
 * La cause n'est pas la valeur, c'est la cascade :
 *
 *   .woocommerce ul.cart_list li            (0,2,2)  padding: 4px 0    ← gagne
 *   .hs-drawer .woocommerce-mini-cart-item  (0,2,0)  padding-right: 1.6rem
 *
 * La reserve n'a donc JAMAIS existe. Rien ne le signalait : sur un nom court,
 * le texte s'arrete avant la corbeille et tout parait normal — le defaut
 * n'apparait qu'avec un titre long, c'est-a-dire sur les fiches importees.
 *
 * 🔑 ET 1.6rem N'AURAIT PAS SUFFI.
 *
 * La corbeille mesure 28 px. Reserver 25,6 px l'aurait laissee mordre sur le
 * texte de deux pixels, meme sans le probleme de cascade. On reserve donc
 * 2,25rem — 36 px — soit la corbeille plus huit pixels d'air.
 */
.hs-drawer ul.cart_list li.woocommerce-mini-cart-item {
	position: relative;
	margin: 0 0 1rem;
	padding: 0 2.25rem 1rem 0;
	border-bottom: 1px solid var(--hs-border);
	font-size: 0.9375rem;
	list-style: none;
}

/* 🔑 UNE SEULE MESURE GOUVERNE TOUTE LA LIGNE.
 *
 * La vignette, l'ecart qui la suit, et le retrait du selecteur de quantite
 * doivent s'accorder : si l'un change sans les autres, le « − 2 + » ne tombe
 * plus sous le nom du produit et la ligne parait de travers.
 *
 * Une variable, trois usages — impossible de les desynchroniser. */

.hs-drawer .woocommerce-mini-cart-item > a:not(.remove) {
	display: grid;
	gap: var(--hs-mini-gap);
	grid-template-columns: var(--hs-mini-vignette) minmax(0, 1fr);
	align-items: center;
	min-height: var(--hs-mini-vignette);
	color: var(--hs-heading);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

.hs-drawer .woocommerce-mini-cart-item > a:not(.remove):hover {
	color: var(--hs-primary);
}

/* WooCommerce impose `.woocommerce ul.cart_list li img { width:32px; float:right }`,
   soit une specificite de (0,2,3). Il faut donc au moins l'egaler pour
   reprendre la main — d'ou les trois classes de ce selecteur. */
.hs-drawer ul.woocommerce-mini-cart.cart_list li img,
.hs-drawer .woocommerce-mini-cart-item > a img {
	width: var(--hs-mini-vignette);
	height: var(--hs-mini-vignette);
	margin: 0;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
	object-fit: cover;
	float: none;
}

/* La quantite est un frere du lien : on la recale sous le titre, aligne
   sur la colonne de texte (64 px de vignette + 0,9 rem de gouttiere). */
.hs-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 0.3rem;
	padding-left: calc(64px + 0.9rem);
	border: 0;
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.hs-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

/* 🔴 LE DECALAGE ETAIT COMPTE DEUX FOIS.
 *
 * Cette regle posait « padding-left: calc(64px + 0.9rem) » — la vignette d'une
 * ancienne version, en dur. La reecriture plus bas pose « margin-left » avec
 * les variables (--hs-mini-vignette + --hs-mini-gap). Les deux s'ADDITIONNENT :
 * la ligne de variante partait a ~136 px au lieu de 72, decalee de la largeur
 * d'une vignette entiere par rapport a ce qu'elle doit longer.
 *
 * Rien ne le signalait : le texte s'affichait, simplement trop a droite — et
 * les 64 px en dur ne suivaient plus la variable depuis qu'elle vaut 72.
 *
 * Le decalage appartient a la reecriture, avec les variables. Ici on ne garde
 * que ce qui est propre a la liste de variantes. */
.hs-drawer .woocommerce-mini-cart-item dl.variation {
	margin: 0.3rem 0 0;
	color: var(--hs-text-muted);
	font-size: 0.8125rem;
}

.hs-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 1rem;
	padding-top: 0.5rem;
	color: var(--hs-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.hs-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.hs-drawer .woocommerce-mini-cart__buttons a { width: 100%; }

.hs-drawer .woocommerce-mini-cart__buttons a:not(.checkout) {
	background: transparent;
	border-color: var(--hs-border);
	color: var(--hs-heading);
}

.hs-drawer .woocommerce-mini-cart__empty-message {
	margin: 2rem 0;
	color: var(--hs-text-muted);
	text-align: center;
}


/* === RECHERCHE EN SURCOUCHE === */

.hs-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18vh;
	background: rgba(var(--hs-heading-rgb), 0.55);
	opacity: 0;
	transition: opacity var(--hs-transition);
}

.hs-search-overlay[hidden] { display: none; }
.hs-search-overlay.is-open { opacity: 1; }

.hs-search-overlay__inner {
	width: min(640px, 92vw);
	padding: 1.5rem;
	border-radius: var(--hs-radius);
	background: var(--hs-bg);
	box-shadow: var(--hs-shadow-lg);
}

.hs-search-form {
	display: flex;
	gap: 0.5rem;
}

.hs-search-form input[type="search"] { flex: 1 1 auto; }

/* === COMPTEUR DU PANIER === */

.hs-cart-toggle { position: relative; }

/* 🔑 UN SEUL COMPTEUR, DEUX EMPLACEMENTS.
 *
 * Celui de l'en-tete et celui de la pastille flottante partagent la meme
 * regle : meme jaune, meme taille, meme graisse. Les ecrire deux fois les
 * aurait fait diverger au premier ajustement — et le client aurait vu deux
 * paniers differents sur la meme page.
 *
 * Seul le POSITIONNEMENT differe, chacun s'ancrant sur son propre parent.
 */

/* 🔑 UNE SEULE SOURCE POUR TOUTES LES PASTILLES DE QUANTITE.
 *
 * Le compteur du menu et celui du recapitulatif de commande disent la meme
 * chose au client — combien d'articles. Ils doivent se ressembler, sinon
 * le rappel ne fait pas son travail.
 *
 * Les deux couleurs vivent donc ici, et nulle part ailleurs : un endroit
 * qui les redefinirait dans son coin finirait par deriver.
 *
 * 🔴 SUR « OR & NUIT », CE COMPTEUR ETAIT ILLISIBLE.
 *
 * Mesure des douze palettes : le dore de l'accent sur la couleur des
 * titres n'y contraste qu'a 1,9 pour 1 — le chiffre disparaissait dans la
 * pastille. Les autres palettes vont de 4,5 a 11,6, d'ou un defaut qui ne
 * se voyait que sur une seule.
 *
 * « --hs-on-accent » est calcule pour chaque palette : c'est celle des
 * deux couleurs — fond ou titres — qui se lit le mieux sur l'accent.
 * Voir hiveshop_readable_on().
 */
:root {
	--hs-pastille-fond: var(--hs-accent);
	--hs-pastille-encre: var(--hs-on-accent, var(--hs-heading));
}

.hs-cart-toggle__count,
.hs-cart-float__count {
	position: absolute;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--hs-pastille-fond);
	color: var(--hs-pastille-encre);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	/* « 11 » ne doit pas etre plus haut que « 4 » a cause des jambages. */
	font-variant-numeric: tabular-nums;
}

.hs-cart-toggle__count { top: 3px; right: 2px; }

.hs-cart-toggle__count.is-empty { display: none; }

/* === REASSURANCE === */

.hs-reassurance {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 1.5rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--hs-border);
	list-style: none;
}

.hs-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	font-size: 0.875rem;
}

.hs-reassurance__item svg {
	flex: 0 0 auto;
	color: var(--hs-primary);
}

.hs-reassurance__item strong {
	display: block;
	color: var(--hs-heading);
	font-size: 0.9375rem;
}

.hs-reassurance__item span { color: var(--hs-text-muted); }

/* === ACCORDEON === */

.hs-accordion {
	border-top: 1px solid var(--hs-border);
}

.hs-accordion__item { border-bottom: 1px solid var(--hs-border); }

.hs-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1rem 0;
	border: 0;
	background: transparent;
	color: var(--hs-heading);
	font-family: var(--hs-font-heading);
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.hs-accordion__head svg {
	flex: 0 0 auto;
	transform: rotate(90deg);
	transition: transform var(--hs-transition);
}

.hs-accordion__head[aria-expanded="true"] svg { transform: rotate(-90deg); }

.hs-accordion__body {
	padding-bottom: 1.1rem;
	color: var(--hs-text);
	font-size: 0.9375rem;
}

.hs-accordion__body[hidden] { display: none; }

/* === PAGINATION === */

.hs-pagination {
	margin-top: 2.5rem;
}

.hs-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-pagination a,
.hs-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
	color: var(--hs-heading);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background var(--hs-transition), border-color var(--hs-transition), color var(--hs-transition);
}

.hs-pagination a:hover {
	border-color: var(--hs-primary);
	color: var(--hs-primary);
}

.hs-pagination .current {
	background: var(--hs-primary);
	border-color: var(--hs-primary);
	color: var(--hs-on-primary);
}

.hs-pagination .prev svg { transform: rotate(180deg); }

/* === HERO === */

.hs-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 46vw, 520px);
	overflow: hidden;
	background: var(--hs-bg-alt);
}

.hs-hero__media {
	position: absolute;
	inset: 0;
}

.hs-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hs-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(var(--hs-heading-rgb), 0.62) 0%, rgba(var(--hs-heading-rgb), 0.15) 70%);
}

.hs-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--hs-content);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--hs-gutter);
}

.hs-hero__content { max-width: 34rem; }

/* 🔴 LE PIRE CONTRASTE DU THEME : 1,1:1, soit INVISIBLE.
   Le voile est teinte avec --hs-heading (voir .hs-hero__media::after). Sur une
   palette a fond sombre, heading est CLAIR — le voile aussi, et le titre blanc
   posait du blanc sur du blanc. Mesure du 26/08 : nuit et or & nuit a 1,1:1.
   L'encre se derive donc du voile, comme partout ailleurs. */
.hs-hero--has-media .hs-hero__title,
.hs-hero--has-media .hs-hero__text {
	color: var(--hs-on-heading, #fff);
}

.hs-hero__title { margin-bottom: 0.7rem; }

.hs-hero__text {
	margin-bottom: 1.5rem;
	font-size: 1.0625rem;
}

/* === NOTIFICATIONS WOOCOMMERCE === */

/* 🔴 CE BLOC EXISTAIT EN DOUBLE, AVEC DES VALEURS DIFFERENTES.
 *
 * woocommerce.css redefinissait les memes selecteurs avec un autre rayon, une
 * autre encre, une autre taille et une autre marge. Comme il n'est charge QUE
 * sur les pages de la boutique, le rendu dependait de la page — et surtout
 * « .woocommerce-noreviews » et « p.no-comments », presents ici seulement,
 * gardaient les valeurs d'ici. Deux notices cote a cote sur une fiche produit
 * n'avaient donc pas la meme apparence : rayon, couleur et taille differaient.
 *
 * 🔑 UNE SEULE DEFINITION, DANS LE FICHIER TOUJOURS CHARGE.
 *
 * Les valeurs retenues sont celles de woocommerce.css : c'est ce que le site
 * affiche aujourd'hui sur les pages de boutique, donc le rendu de reference —
 * corriger un doublon ne doit pas changer l'apparence au passage. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--hs-border);
	border-left: 3px solid var(--hs-primary);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
	color: var(--hs-heading);
	font-size: 0.92rem;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-message { border-left-color: var(--hs-success); }
.woocommerce-error { border-left-color: var(--hs-sale); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

/* === VOILE DU MENU MOBILE === */

.hs-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(var(--hs-heading-rgb), 0.45);
	opacity: 0;
	transition: opacity var(--hs-transition);
}

.hs-overlay[hidden] { display: none; }
.hs-overlay.is-open { opacity: 1; }

/* === PAGES EDITORIALES === */

.hs-entry__thumb {
	margin: 0 0 2rem;
}

.hs-entry__thumb img {
	width: 100%;
	border-radius: var(--hs-radius);
}

.hs-archive-desc {
	margin-top: 0.6rem;
	color: var(--hs-text-muted);
}

.hs-pagelinks {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}

.hs-pagelinks a { margin-inline: 0.2rem; }

.hs-main--full {
	padding-block: 0;
}

/* === NAVIGATION ENTRE ARTICLES === */

.hs-post-nav {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hs-border);
}

.hs-post-nav .nav-links {
	display: contents;
}

.hs-post-nav a {
	display: block;
	padding: 1rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	color: var(--hs-heading);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--hs-transition);
}

.hs-post-nav a:hover { border-color: var(--hs-primary); }

.hs-post-nav a span {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--hs-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hs-post-nav .nav-next { text-align: right; }

/* === PAGE INTROUVABLE === */

.hs-404 { text-align: center; }

.hs-404__code {
	margin: 0 0 0.5rem;
	color: var(--hs-primary);
	font-family: var(--hs-font-heading);
	font-size: clamp(3.5rem, 12vw, 6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.hs-404 .hs-search-form {
	max-width: 420px;
	margin: 1.5rem auto;
}

.hs-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* === AUCUN RESULTAT === */

.hs-none {
	padding: 2.5rem 0;
	text-align: center;
}

.hs-none .hs-search-form {
	max-width: 420px;
	margin: 1.5rem auto 0;
}

/* === COMMENTAIRES === */

.hs-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hs-border);
}

.hs-comments__title { font-size: 1.35rem; }

.hs-comments__list,
.hs-comments__list ol.children {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.hs-comments__list ol.children { margin: 1.25rem 0 0 1.5rem; }

.hs-comments__list .comment-body {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hs-border);
}

.hs-comments__list .comment-author img {
	display: inline-block;
	margin-right: 0.6rem;
	border-radius: 999px;
	vertical-align: middle;
}

.hs-comments__list .comment-meta {
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.comment-form { display: grid; gap: 1rem; }
.comment-form .form-submit { margin: 0; }

/* === SUGGESTIONS DANS LE TIROIR ===
 *
 * 🔑 UN CARROUSEL SANS BIBLIOTHEQUE.
 *
 * scroll-snap fait tout le travail : le navigateur gere l'inertie, le clavier
 * et le tactile. Les deux fleches n'ont qu'a appeler scrollBy(). Les carrousels
 * tout faits pesent de 30 a 80 Ko et reclament jQuery — ici, zero octet de plus.
 */

/* 🔑 LE PIED NE DEFILE JAMAIS.
 *
 * « flex: 0 0 auto » le fige a sa hauteur naturelle, et c'est le corps
 * (flex: 1 1 auto, overflow-y: auto) qui absorbe tout le reste. Les totaux et
 * les deux boutons restent donc sous les yeux, quel que soit le nombre
 * d'articles — c'est le sens meme de la separation en trois zones.
 *
 * 🔴 « min-height: 0 » SUR LE CORPS EST INDISPENSABLE.
 *
 * Sans lui, un enfant flex refuse de descendre sous la taille de son contenu :
 * le corps pousse alors le pied hors du panneau, et les boutons disparaissent
 * en bas de l'ecran sans qu'aucun defilement ne permette de les atteindre.
 */

.hs-drawer__foot {
	flex: 0 0 auto;
	padding: 0 1.25rem 1rem;
	border-top: 1px solid var(--hs-border);
	background: var(--hs-bg);
}

.hs-drawer__foot:empty { display: none; }

/* Les totaux collent au haut du pied : la bordure fait deja la separation. */
.hs-drawer__foot .hs-totals {
	margin-top: 0;
	padding-top: 0.85rem;
	border-top: 0;
}

.hs-suggest {
	margin-top: 0.9rem;
	padding: 0.85rem 0 0;
	border-top: 1px dashed var(--hs-border);
}

.hs-suggest__title {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hs-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hs-suggest__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hs-suggest__track {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hs-suggest__track::-webkit-scrollbar { display: none; }

.hs-suggest__item {
	display: flex;
	flex: 0 0 100%;
	gap: 0.6rem;
	align-items: center;
	scroll-snap-align: start;
	min-width: 0;
}

.hs-suggest__media {
	flex: 0 0 56px;
	line-height: 0;
}

.hs-suggest__media img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--hs-radius);
}

.hs-suggest__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.hs-suggest__name {
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--hs-heading);
	text-decoration: none;
	/* Deux lignes au plus : un titre a rallonge deformerait la tuile. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hs-suggest__name:hover { color: var(--hs-accent); }

.hs-suggest__price {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--hs-heading);
}

.hs-suggest__price del { font-weight: 400; opacity: 0.6; }
.hs-suggest__price ins { text-decoration: none; }

/* 🔴 IL PORTAIT « hs-action », LA CLASSE DES BOUTONS DU PIED.
 *
 * Ceux-la sont regles en pleine largeur : le bouton de suggestion prenait donc
 * toute la tuile et repoussait le produit. Une meme classe pour deux roles
 * differents finit toujours ainsi. */

.hs-suggest__add {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
	margin-top: 0.2rem;
	padding: 0.32rem 0.75rem;
	border: 1px solid var(--hs-primary);
	border-radius: 999px;
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--hs-transition), border-color var(--hs-transition);
}

.hs-suggest__add:hover {
	background: var(--hs-primary-dark);
	border-color: var(--hs-primary-dark);
	color: var(--hs-on-primary);
}

/* Apres l'ajout, WooCommerce y colle sa classe « added » et un lien : ni l'un
   ni l'autre n'a sa place dans une vignette de 56 px. */
.hs-suggest__add.added { background: var(--hs-success, #15803d); border-color: var(--hs-success, #15803d); }
.hs-suggest .added_to_cart { display: none !important; }

/* Les fleches. Masquees quand un doigt suffit — sur mobile, on fait glisser. */
.hs-suggest__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--hs-border);
	border-radius: 50%;
	background: var(--hs-bg);
	color: var(--hs-text-muted);
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.hs-suggest__nav:hover {
	color: var(--hs-accent);
	border-color: var(--hs-accent);
}

/* Le theme n'a qu'un chevron, tourne vers la droite. */
.hs-suggest__nav--prev .hs-icon { transform: rotate(180deg); }

/* Rien a faire defiler : la fleche n'a plus d'objet. */
.hs-suggest__nav[hidden] { display: none; }

@media (max-width: 480px) {
	.hs-suggest__nav { display: none; }
}

/* === BARRE DE LIVRAISON GRATUITE (tiroir) === */

.hs-shipbar {
	margin: 0 0 1rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
}

.hs-shipbar__text {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--hs-text);
}

.hs-shipbar__text .hs-icon { flex: 0 0 auto; color: var(--hs-text-muted); }

.hs-shipbar__text .amount { font-weight: 700; }

.hs-shipbar__track {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--hs-border);
}

.hs-shipbar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--hs-primary);
	transition: width .35s ease;
}

.hs-shipbar.is-reached .hs-shipbar__text,
.hs-shipbar.is-reached .hs-shipbar__text .hs-icon { color: var(--hs-primary); }

.hs-shipbar.is-reached .hs-shipbar__text { font-weight: 600; }

/* === SELECTEUR DE QUANTITE DANS LE TIROIR ===
 *
 * 🔴 CES REGLES NE PEUVENT PAS VIVRE DANS woocommerce.css.
 *
 * Ce fichier n'est charge que sur les pages de la boutique, alors que le
 * tiroir s'ouvre partout. Le selecteur de la page produit, lui, reste la-bas :
 * les deux ne se marchent pas dessus, les selecteurs different.
 */

.hs-drawer .hs-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 2px;
	border: 1px solid var(--hs-border);
	border-radius: 999px;
	vertical-align: middle;
}

/* 🔴 « pointer-events: none » AVALAIT LES CLICS AVANT TOUT JAVASCRIPT.
 *
 * Le verrou JS retient desormais la derniere intention et la rejoue — mais il
 * ne recevait jamais les clics 2 et 3 : cette ligne les supprimait a la racine,
 * avant meme qu'un evenement soit emis. Trois clics rapides sur « + » donnaient
 * donc toujours +1, et le message du commit qui « corrigeait » le verrou
 * decrivait un comportement que le CSS rendait inatteignable.
 *
 * 🔑 L'ATTENTE SE VOIT, ELLE NE SE SUBIT PAS.
 *
 * On garde le signal visuel — le groupe palit pendant l'appel — mais les clics
 * passent : c'est le JS qui decide quoi en faire, lui seul sait empiler les
 * intentions. Deux mecanismes de protection sur le meme geste, l'un aveugle a
 * l'autre, c'est un de trop. */
.hs-drawer .hs-qty.is-busy { opacity: 0.5; }

/* La zone touchable, etendue a 44 px sans deplacer un seul pixel visible.
   « inset » negatif plutot que padding : le padding pousserait les voisins. */
.hs-drawer .hs-qty__btn::after {
	content: "";
	position: absolute;
	inset: -11px;
	border-radius: 50%;
}

/* 🔴 22 px : SOUS LE MINIMUM, ET SUR LA CIBLE LA PLUS UTILISEE DU TIROIR.
 *
 * WCAG 2.2 (critere 2.5.8, niveau AA) exige 24 px ; les recommandations
 * tactiles d'Apple et de Google demandent 44 a 48. Ces deux boutons sont ceux
 * qu'un client touche le plus souvent sur mobile, et rater un « + » dans un
 * panier n'est pas une gene : c'est une commande qui n'est pas passee.
 *
 * 🔑 LA CIBLE GRANDIT, LE DESSIN NE BOUGE PAS.
 *
 * Passer le bouton a 44 px casserait la compacite du tiroir. On garde donc son
 * apparence a 22 px et l'on etend la ZONE TOUCHABLE par un pseudo-element
 * centre — invisible, sans effet sur la mise en page. La cible fait 44 px, le
 * bouton en parait toujours 22.
 */
.hs-drawer .hs-qty__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hs-text-muted);
	cursor: pointer;
	transition: background .2s, color .2s;
}

.hs-drawer .hs-qty__btn:hover {
	background: var(--hs-primary);
	color: var(--hs-on-primary);
}

.hs-drawer .hs-qty__value {
	min-width: 1.6em;
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
	color: var(--hs-heading);
}

.hs-drawer .hs-qty__total {
	margin-left: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--hs-heading);
	white-space: nowrap;
}

/* === TOTAUX DU TIROIR === */

.hs-totals {
	margin: 1rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--hs-border);
}

.hs-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.28rem 0;
	font-size: 0.88rem;
	color: var(--hs-text);
}

.hs-totals__value { font-weight: 600; color: var(--hs-heading); white-space: nowrap; }

.hs-totals__row--discount,
.hs-totals__row--discount .hs-totals__value { color: var(--hs-primary); }

.hs-totals__free { color: var(--hs-primary); font-weight: 600; }

.hs-totals__pending {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--hs-text-muted);
}

.hs-totals__row--total {
	margin-top: 0.35rem;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--hs-border);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--hs-heading);
}

.hs-totals__row--total .hs-totals__value { font-size: 1.08rem; }

/* === LES DEUX BOUTONS DU PIED === */

.hs-cart-actions {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.hs-drawer .hs-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--hs-primary);
	border-radius: var(--hs-radius);
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}

.hs-drawer .hs-action--ghost {
	background: transparent;
	border-color: var(--hs-border);
	color: var(--hs-heading);
}

.hs-drawer .hs-action--ghost:hover {
	border-color: var(--hs-primary);
	color: var(--hs-primary);
}

.hs-drawer .hs-action--primary:hover { background: var(--hs-primary-dark); border-color: var(--hs-primary-dark); }

/* === CORBEILLE ===
 *
 * 🔑 ELLE REMPLACE LE « × » DE WOOCOMMERCE.
 *
 * Deux croix dans le meme panneau — fermer le tiroir, supprimer une ligne —
 * pour deux gestes aux consequences opposees. La corbeille leve le doute, et
 * le rouge n'apparait qu'au survol : signaler le danger avant meme l'intention
 * rendrait le panier inquietant.
 */

.hs-drawer a.remove.hs-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hs-text-muted);
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transition: background .2s, color .2s;
}

/* 🔑 AU SURVOL, LE FOND DEVIENT ROUGE ET LA CORBEILLE BLANCHE.
 *
 * Un simple changement de teinte se remarque a peine sur une icone de 16 px.
 * Le disque plein, lui, ne laisse aucun doute sur ce qui va se passer — et le
 * rouge n'apparait qu'a l'approche : signaler le danger avant meme l'intention
 * rendrait le panier inquietant.
 *
 * « sale » est le seul rouge de la palette : la corbeille le suit, donc elle
 * change avec le theme. Le repli garde un rouge lisible si le token venait a
 * disparaitre — une corbeille qui se fond dans le fond serait pire qu'une
 * corbeille d'une nuance inattendue. */

.hs-drawer a.remove.hs-remove:hover,
.hs-drawer a.remove.hs-remove:focus-visible {
	background: var(--hs-sale, #dc2626);
	color: var(--hs-on-sale, #fff);
}

/* L'icone est dessinee en « currentColor » : elle blanchit d'elle-meme. */
.hs-drawer a.remove.hs-remove:hover .hs-icon,
.hs-drawer a.remove.hs-remove:focus-visible .hs-icon { color: var(--hs-on-sale, #fff); }

/* 🔑 LA LIGNE ENTIERE S'ESTOMPE PENDANT LE RETRAIT.
 *
 * Sans ce retour, on reclique — et le second appel part sur une ligne que le
 * serveur a deja supprimee. */
.hs-drawer .woocommerce-mini-cart-item.is-busy {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity .2s;
}

.hs-drawer a.remove.hs-remove .hs-icon { flex: 0 0 auto; }

/* === PASTILLE DE PANIER FLOTTANTE ===
 *
 * 🔑 ELLE RESTE SOUS LA MAIN, PARTOUT.
 *
 * Le compteur de l'en-tete disparait des qu'on fait defiler. Sur une fiche
 * produit, le client passe pourtant l'essentiel de son temps loin du haut de
 * page : pour verifier son panier, il devrait remonter. La pastille lui evite
 * ce trajet.
 *
 * 🔴 « env(safe-area-inset-bottom) » N'EST PAS UN LUXE.
 *
 * Sur iPhone, la barre de gestes occupe le bas de l'ecran. Sans cette marge,
 * la pastille se retrouve dessous : le doigt declenche le retour a l'accueil
 * au lieu d'ouvrir le panier.
 */

.hs-cart-float {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	/* 🔑 L'ICONE EST DECALEE VERS LA GAUCHE, PAS ECARTEE DU MONTANT.
	 *
	 * Elargir l'ecart entre les deux etirait le bouton et laissait un trou au
	 * milieu. On rapproche plutot l'icone du bord gauche : le montant garde sa
	 * place, le bouton reste compact, et le compteur — qui deborde de 8 px a
	 * droite de l'icone — cesse de mordre sur le premier chiffre. */
	gap: 0.9rem;
	padding: 0.75rem 1.15rem 0.75rem 0.7rem;
	border: 0;
	border-radius: 999px;
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--hs-shadow-lg);
	cursor: pointer;
	transition: transform .2s, box-shadow .2s, opacity .2s;
}

.hs-cart-float:hover {
	transform: translateY(-2px);
	color: var(--hs-on-primary);
}

.hs-cart-float[hidden],
.hs-cart-float.is-empty { display: none; }

/* 🔑 L'ICONE PORTE LE COMPTEUR, LE BOUTON N'EN SAIT RIEN.
 *
 * Ancre sur le bouton, le compteur se decalait des que le montant changeait de
 * largeur : « 9,90 € » et « 112,90 € » ne donnent pas le meme bouton, et la
 * pastille suivait. Ce conteneur la fige sur le coin de l'icone.
 */

.hs-cart-float__icon {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.hs-cart-float__icon .hs-icon { display: block; }

/* La pastille s'ancre sur l'icone, pas sur le bouton : le montant peut
   changer de largeur (« 9,90 € » puis « 112,90 € ») sans la deplacer. */
.hs-cart-float__count { top: -6px; right: -8px; }

/* 🔴 SANS LARGEUR RESERVEE, LE BOUTON SAUTE A CHAQUE MISE A JOUR.
 *
 * WooCommerce reecrit la pastille deux fois de suite au chargement : d'abord
 * avec les fragments gardes en sessionStorage, puis avec ceux du serveur. Et
 * a chaque ajout au panier, le montant change de largeur — « 9,90 € » puis
 * « 112,90 € ».
 *
 * Comme le bouton est ancre a DROITE, il grandit vers la GAUCHE : l'icone se
 * deplace sous les yeux du client, alors qu'il n'a rien demande.
 *
 * On reserve donc la place de cinq chiffres. En dessous, le montant est
 * simplement centre dans cette largeur ; au-dela, le bouton s'elargit — mais
 * un panier a plus de 99 999 € n'est plus un probleme d'affichage.
 */

.hs-cart-float__total {
	display: inline-flex;
	justify-content: flex-end;
	min-width: 5.5ch;
	white-space: nowrap;
	/* Chiffres de largeur egale : « 111,00 € » et « 999,00 € » occupent
	   exactement la meme place, sans quoi la reserve ne servirait a rien. */
	font-variant-numeric: tabular-nums;
}

.hs-cart-float__total .amount { font-weight: 700; }

/* Meme raison pour le compteur : « 1 » et « 12 » ne doivent pas donner deux
   pastilles de tailles differentes. */
.hs-cart-float__count,
.hs-cart-toggle__count { justify-content: center; }

/* 🔑 QUAND LE TIROIR EST OUVERT, LA PASTILLE N'A PLUS D'OBJET.
 *
 * Elle se retrouverait par-dessus le panneau, a proposer d'ouvrir ce qui est
 * deja ouvert. On l'efface le temps de la consultation.
 */
.hs-drawer.is-open ~ .hs-cart-float,
body.hs-locked .hs-cart-float { opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
	.hs-cart-float {
		right: 0.75rem;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		gap: 0.85rem;
		padding: 0.65rem 1rem 0.65rem 0.6rem;
	}
}


/* === LIGNE DU TIROIR — ALIGNEMENT ===
 *
 * 🔴 LE SELECTEUR DE QUANTITE TOMBAIT SOUS LA VIGNETTE.
 *
 * WooCommerce le sort en FRERE du lien produit, pas dedans : il ne peut donc
 * pas entrer dans la grille « vignette | texte ». Il repartait a la marge
 * gauche, sous l'image, alors que le nom qu'il complete est a droite.
 *
 * On lui donne le meme retrait que la colonne de texte. Il se place ainsi
 * exactement sous le nom du produit, et la ligne se lit d'un bloc.
 */

:root {
	--hs-mini-vignette: 72px;
	--hs-mini-gap: 0.9rem;
}

.hs-drawer .woocommerce-mini-cart-item .hs-qty-row,
.hs-drawer .woocommerce-mini-cart-item .quantity,
.hs-drawer .woocommerce-mini-cart-item dl.variation {
	margin-left: calc(var(--hs-mini-vignette) + var(--hs-mini-gap));
}

/* La quantite et le total sur une meme ligne, verticalement centres. */
.hs-drawer .woocommerce-mini-cart-item .hs-qty-row,
.hs-drawer .woocommerce-mini-cart-item .quantity {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 0.55rem;
}

/* Le total ne se colle plus au selecteur : il prend la place qui reste. */
.hs-drawer .hs-qty-row .hs-qty__total { margin-left: auto; }

/* Le nom du produit respire au-dessus de la quantite. */
.hs-drawer .woocommerce-mini-cart-item > a:not(.remove) {
	margin-bottom: 0;
}

/* La corbeille reste calee en haut a droite, alignee sur la vignette. */
.hs-drawer .woocommerce-mini-cart-item a.remove.hs-remove {
	position: absolute;
	top: 0;
	right: 0;
}

/* --- MOBILE ---
 *
 * La vignette perd quelques pixels, et le retrait suit tout seul : c'est
 * l'interet de la variable. */

@media (max-width: 600px) {
	:root {
		--hs-mini-vignette: 64px;
		--hs-mini-gap: 0.75rem;
	}

	/* Meme cascade a battre qu'au-dessus : une media query n'ajoute AUCUNE
	   specificite, ce selecteur doit donc rester aussi long. */
	.hs-drawer ul.cart_list li.woocommerce-mini-cart-item { padding-right: 2.5rem; }

	.hs-drawer .woocommerce-mini-cart-item .hs-qty-row,
	.hs-drawer .woocommerce-mini-cart-item .quantity { gap: 0.5rem; }

	.hs-drawer .hs-qty__total { font-size: 0.9rem; }
}

/* ==========================================================================
   FENETRE DE MESSAGE — a la place des alertes du navigateur
   ==========================================================================

   🔑 ELLE RESSEMBLE AU SITE, PAS AU NAVIGATEUR.

   Une window.alert() s'affiche en haut de l'ecran, grise, avec le nom de
   domaine et « OK » : elle a l'air d'un avertissement de securite. Le client
   ne sait plus s'il a fait une erreur ou si le site est casse.

   Celle-ci prend la couleur, la police et les arrondis du theme. Elle dit
   simplement ce qu'il manque, au centre, et se referme d'un clic, d'un
   « Echap », ou en cliquant a cote.
   ========================================================================== */

.hs-message {
	position: fixed;
	inset: 0;
	z-index: 200;               /* au-dessus de tout : c'est un message bloquant */
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(var(--hs-heading-rgb), 0.5);
	opacity: 0;
	transition: opacity var(--hs-transition);
}

.hs-message[hidden] { display: none; }
.hs-message.is-open { opacity: 1; }

.hs-message__panel {
	width: min(26rem, 100%);
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: var(--hs-radius);
	background: var(--hs-bg);
	/* Le theme a une variable d'ombre, employee partout ailleurs. Celle-ci
	   etait la seule en dur : sur une palette sombre, une ombre noire posee sur
	   un fond deja noir ne detache rien du tout. */
	box-shadow: var(--hs-shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.25));
	text-align: center;
	/* Le panneau monte legerement : sans ce mouvement, la fenetre parait
	   surgir de nulle part et l'oeil met un instant a la trouver. */
	transform: translateY(10px) scale(0.98);
	transition: transform var(--hs-transition);
}

.hs-message.is-open .hs-message__panel { transform: none; }

.hs-message__texte {
	margin: 0 0 1.25rem;
	color: var(--hs-heading);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.hs-message__ok { min-width: 9rem; }

@media (prefers-reduced-motion: reduce) {
	.hs-message,
	.hs-message__panel { transition: none; }
}

/* 🔑 MEME PRINCIPE QUE LES BOUTONS « − / + » : la cible grandit, le dessin
   ne bouge pas. Toutes ces commandes sont sous les 44 px recommandes en
   tactile et sous les 24 px exiges par WCAG 2.2 pour certaines. Un
   pseudo-element centre porte la zone touchable a 44 px sans deplacer un
   seul pixel visible ni pousser les voisins. */
.hs-suggest__nav,
.hs-drawer a.remove.hs-remove {
	position: relative;
}

.hs-suggest__nav::after,
.hs-drawer a.remove.hs-remove::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
}