/* ==========================================================================
   HiveShop — mise en page : conteneurs, barre d'annonce, en-tete, pied de page
   ========================================================================== */

.hs-container {
	width: 100%;
	max-width: var(--hs-content);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-container--wide { max-width: var(--hs-wide); }
.hs-container--narrow { max-width: 760px; }

.hs-main {
	display: block;
	min-height: 40vh;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.hs-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hs-section--alt { background: var(--hs-bg-alt); }

/* === BARRE D'ANNONCE === */

.hs-announcement {
	background: var(--hs-heading);
	color: var(--hs-bg);
	font-size: 0.875rem;
	text-align: center;
}

.hs-announcement__text {
	display: block;
	padding: 0.6rem var(--hs-gutter);
	letter-spacing: 0.01em;
}

.hs-announcement a {
	color: inherit;
	text-decoration: underline;
}

/* === EN-TETE === */

.hs-header {
	position: relative;
	z-index: 60;
	border-bottom: 1px solid var(--hs-border);
	background: var(--hs-bg);
}

/* 🔴 UN ENFANT NE DEPASSE JAMAIS LE PLAFOND DE SON PARENT.
 *
 * Le menu mobile porte « z-index: 90 », le voile « 80 » : sur le papier, le
 * menu est devant. En realite il ne l'etait pas, et cliquer sur « Boutique »
 * ne faisait RIEN.
 *
 * La raison : le menu vit DANS l'en-tete, qui est « position: sticky;
 * z-index: 60 ». L'en-tete cree donc un contexte d'empilement, et le 90 du
 * menu ne vaut qu'A L'INTERIEUR de celui-ci. Face au voile, la comparaison
 * n'oppose pas 90 a 80 mais 60 a 80 : le voile passe devant, intercepte les
 * clics, et le lien reste inerte.
 *
 * Mesure : elementFromPoint() au centre de « Boutique » renvoyait
 * « div.hs-overlay.is-open », pas le lien. Constate a 390 px ET a 820 px.
 *
 * L'en-tete monte donc au-dessus du voile le temps que le menu soit ouvert.
 * Effet secondaire souhaitable : l'en-tete n'est plus assombri, et la croix
 * de fermeture reste bien lisible.
 *
 * Deux selecteurs pour une seule regle : « :has() » suffit sur les
 * navigateurs recents, la classe posee par le script couvre les autres.
 * Un menu inutilisable ne se repare pas a moitie. */
.hs-header:has(.hs-nav.is-open),
body.hs-menu-open .hs-header {
	z-index: 100;
}

.hs-header--sticky {
	position: sticky;
	top: 0;
	transition: box-shadow var(--hs-transition);
}

/* 🔴 LA BARRE D'ADMINISTRATION NE SE COMPORTE PAS PAREIL SELON LA LARGEUR.
 *
 * Au-dessus de 782 px, WordPress la fixe en haut de l'ecran : un en-tete
 * colle a « top: 0 » passe DESSOUS et se fait rogner. Il doit donc descendre
 * de ses 32 px.
 *
 * En dessous de 782 px, elle n'est plus fixe — elle defile avec la page. Un
 * en-tete colle a 46 px flotterait alors dans le vide, et c'est ce que Chris
 * a vu : « ça s'arrête au-dessus et c'est pas vraiment fixe ».
 *
 * Ce decalage ne concerne QUE les personnes connectees. Un visiteur n'a pas
 * cette barre : « body.admin-bar » n'existe pas chez lui, et l'en-tete se
 * colle a zero. C'est pour cela que le defaut ne se voit qu'en travaillant
 * sur le site — c'est-a-dire par la seule personne qui le teste. */
body.admin-bar .hs-header--sticky { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .hs-header--sticky { top: 0; }
}

/* L'ombre n'apparait qu'une fois la page defilee : au repos, l'en-tete se
   fond dans la page ; en defilement, il se detache du contenu qui passe
   dessous. */
.hs-header--sticky.is-scrolled { box-shadow: var(--hs-shadow-sm); }

.hs-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--hs-header-h);
	max-width: var(--hs-wide);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-header__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.hs-header__brand img {
	max-height: 44px;
	width: auto;
}

.hs-logo-text {
	margin: 0;
	font-family: var(--hs-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hs-logo-text a {
	color: var(--hs-heading);
	text-decoration: none;
}

/* Navigation principale — centree, elle laisse les actions a droite. */

.hs-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.hs-nav ul {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-nav li { position: relative; }

.hs-nav a {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: var(--hs-radius-sm);
	color: var(--hs-heading);
	/* Le menu est le seul element qui peut aller des deux cotes : enseigne
	   autant qu'outil. C'est la palette qui tranche — voir
	   hiveshop_menu_font_source(). Le repli sur la police de texte protege
	   les installations qui n'ont pas encore regenere leur bloc :root. */
	font-family: var(--hs-font-menu, var(--hs-font-body));
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--hs-transition), color var(--hs-transition);
}

.hs-nav a:hover,
.hs-nav a:focus,
.hs-nav .current-menu-item > a {
	background: var(--hs-bg-alt);
	color: var(--hs-primary);
}

/* Sous-menus : ils s'ouvrent au survol sur grand ecran, au clic sur mobile
   (le menu passe alors en tiroir lateral, cf. plus bas). */

.hs-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: block;
	min-width: 220px;
	padding: 0.4rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg);
	box-shadow: var(--hs-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--hs-transition), transform var(--hs-transition), visibility var(--hs-transition);
}

.hs-nav li:hover > ul,
.hs-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hs-nav ul ul li { width: 100%; }
.hs-nav ul ul a { padding: 0.5rem 0.7rem; }

/* Actions de droite : recherche, compte, panier. */

.hs-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Le bouton du panier est genere separement (il est remplace en AJAX apres
   chaque ajout) : il partage donc le style des autres actions par selecteur. */
.hs-action,
.hs-cart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--hs-radius-sm);
	background: transparent;
	color: var(--hs-heading);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--hs-transition), color var(--hs-transition);
}

.hs-action:hover,
.hs-action:focus,
.hs-cart-toggle:hover,
.hs-cart-toggle:focus {
	background: var(--hs-bg-alt);
	color: var(--hs-primary);
}

.hs-burger { display: none; }

/* === PIED DE PAGE === */

.hs-footer {
	margin-top: clamp(3rem, 7vw, 5rem);
	border-top: 1px solid var(--hs-border);
	background: var(--hs-bg-alt);
	color: var(--hs-text);
}

.hs-footer__top {
	display: grid;
	gap: 2rem clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	max-width: var(--hs-content);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--hs-gutter);
}

.hs-footer__brand p {
	margin-top: 0.9rem;
	color: var(--hs-text-muted);
	font-size: 0.9375rem;
}

.hs-footer .hs-widget__title,
.hs-footer__col-title {
	margin-bottom: 0.9rem;
	color: var(--hs-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hs-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-footer li { margin-bottom: 0.45rem; }

.hs-footer li a {
	color: var(--hs-text);
	font-size: 0.9375rem;
	text-decoration: none;
}

.hs-footer li a:hover { color: var(--hs-primary); }

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

.hs-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	max-width: var(--hs-content);
	margin-inline: auto;
	padding: 1.2rem var(--hs-gutter);
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.hs-footer__bottom-inner ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hs-footer__bottom-inner li { margin: 0; }

/* === FIL D'ARIANE === */

.hs-breadcrumb {
	margin-bottom: 1.5rem;
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.hs-breadcrumb a {
	color: var(--hs-text-muted);
	text-decoration: none;
}

.hs-breadcrumb a:hover { color: var(--hs-primary); }
.hs-breadcrumb__sep { margin-inline: 0.5rem; }

/* === GRILLE DE LA BOUTIQUE (contenu + colonne de filtres) === */

/* La grille ne porte que deux colonnes : le contenu et les filtres.
   Tous les blocs de la boutique vivent DANS .hs-shop-main — autrement le
   `gap` s'appliquerait entre chacun d'eux. */
.hs-shop-layout {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	max-width: var(--hs-wide);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
	grid-template-columns: 1fr;
}

.hs-shop-layout:has(.hs-shop-sidebar) {
	grid-template-columns: minmax(0, 1fr) 264px;
}

.hs-shop-main { min-width: 0; }

.hs-shop-sidebar { grid-row: 1; grid-column: 2; }

.hs-widget { margin-bottom: 2rem; }

.hs-widget__title {
	margin-bottom: 0.8rem;
	font-size: 1rem;
	font-weight: 600;
}

/* === CONTENU EDITORIAL === */

.hs-entry {
	max-width: var(--hs-content);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-entry--narrow { max-width: 760px; }

/* 🔑 PANIER, COMMANDE ET COMPTE : PLEINE LARGEUR UTILE.
 *
 * Ce ne sont pas des pages de lecture. Elles portent une grille a deux
 * colonnes, que les 760 px du contenu editorial ecrasaient — tout s'empilait
 * et les montants se coupaient a droite. */
.hs-entry--shop {
	max-width: min(1440px, 100%);
}

.hs-entry__header { margin-bottom: 2rem; }

.hs-entry__title { margin-bottom: 0.4rem; }

.hs-post-meta {
	color: var(--hs-text-muted);
	font-size: 0.9375rem;
}

.hs-post-meta__sep { margin-inline: 0.45rem; }

.hs-entry__content > *:last-child { margin-bottom: 0; }

.alignwide {
	width: min(var(--hs-wide), 100vw - 2 * var(--hs-gutter));
	max-width: none;
	margin-inline: auto;
}

/* 🔴 « 100vw » COMPTE LA BARRE DE DEFILEMENT, PAS « 100% ».
 *
 * Avec « scrollbar-gutter: stable » (base.css), le navigateur reserve 7 a 8 px
 * a droite. « 100vw » ignore cette reserve : un bloc pleine largeur depassait
 * donc de ~8 px de CHAQUE cote sous Windows, provoquant un defilement
 * horizontal de la page entiere — et le corps ne doit jamais defiler
 * lateralement.
 *
 * « 100dvw » se comporte comme 100vw. L'unite juste est celle qui EXCLUT la
 * barre : on part de la largeur reelle du conteneur, avec un repli en vw pour
 * les navigateurs sans « scrollbar-gutter » (ou la reserve n'existe pas). */
/* 🔴 MA PREMIERE CORRECTION NE CORRIGEAIT RIEN — ELLE CASSAIT.
 *
 * J'avais ecrit « calc( 100vw - ( 100vw - 100% ) ) ». Cela se simplifie en
 * « 100% », et la marge en « 0 » : dans un conteneur etroit — .hs-entry--narrow
 * fait 760 px — un bloc pleine largeur cessait purement et simplement d'etre
 * pleine largeur, sur tous les navigateurs modernes. Une soustraction qui
 * s'annule n'est pas une compensation.
 *
 * 🔑 LA LARGEUR DE LA BARRE NE SE DEDUIT PAS EN CSS, ELLE SE MESURE.
 *
 * « 100vw » compte la barre de defilement, « 100% » depend du conteneur : aucune
 * combinaison des deux ne donne « le viewport moins la barre » depuis un bloc
 * imbrique. On la mesure donc une fois en JS (theme.js) et on la pose en
 * variable. Repli a 0 : sans le script, on retrouve exactement le comportement
 * d'avant, jamais pire. */
.alignfull {
	width: calc( 100vw - var( --hs-scrollbar, 0px ) );
	max-width: none;
	margin-inline: calc( 50% - 50vw + var( --hs-scrollbar, 0px ) / 2 );
}

/* === LISTE D'ARTICLES === */

.hs-posts {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	max-width: var(--hs-content);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg);
	transition: box-shadow var(--hs-transition), transform var(--hs-transition);
}

.hs-post-card:hover {
	box-shadow: var(--hs-shadow);
	transform: translateY(-2px);
}

.hs-post-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.hs-post-card__body { padding: 1.2rem; }

.hs-post-card__title {
	margin-bottom: 0.4rem;
	font-size: 1.15rem;
}

.hs-post-card__title a {
	color: var(--hs-heading);
	text-decoration: none;
}

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

.hs-post-card__excerpt {
	margin: 0;
	color: var(--hs-text-muted);
	font-size: 0.9375rem;
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
	.hs-shop-layout:has(.hs-shop-sidebar) { grid-template-columns: 1fr; }
	.hs-shop-sidebar { grid-row: auto; grid-column: 1; }
}

@media (max-width: 900px) {
	.hs-burger { display: inline-flex; }

	.hs-nav {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 90;
		/* 🔑 UNE COLONNE, POUR QUE LE CONTACT RESTE EN BAS.
		   La liste des rayons prend la hauteur qu'elle peut et defile ; le
		   bloc de contact garde sa place sous elle. Avec « display: block »,
		   un menu d'une dizaine d'entrees repoussait le telephone hors de
		   vue — precisement ce qu'on ne veut pas d'un moyen de joindre la
		   boutique. */
		display: flex;
		flex-direction: column;
		width: min(320px, 86vw);
		padding: 5rem 1.25rem 2rem;
		overflow: hidden;
		background: var(--hs-bg);
		box-shadow: var(--hs-shadow-lg);
		transform: translateX(-100%);
		transition: transform var(--hs-transition);
	}

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

	/* 🔴 LE PANNEAU COMMENCAIT SOUS LA BARRE D'ADMINISTRATION.
	 *
	 * « inset: 0 auto 0 0 » le cale sur le haut de la FENETRE. Quand on est
	 * connecte, la barre de WordPress occupe deja ces 46 premiers pixels : le
	 * haut du menu passait dessous, tronque, et paraissait « raccourci ».
	 *
	 * Il commence donc juste sous elle. Les visiteurs, qui n'ont pas cette
	 * barre, gardent un menu qui part du bord de l'ecran. */
	body.admin-bar .hs-nav { top: 46px; }
}

@media screen and (min-width: 783px) and (max-width: 900px) {
	/* Au-dela de 782 px la barre de WordPress ne fait plus que 32 px. */
	body.admin-bar .hs-nav { top: 32px; }
}

@media (max-width: 900px) {

	/* Seule la liste defile. « min-height: 0 » est indispensable : sans lui,
	   un enfant flex refuse de descendre sous la taille de son contenu, la
	   liste pousse le contact hors du panneau et rien ne defile. */
	.hs-nav > ul {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.hs-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hs-nav a {
		padding: 0.8rem 0.6rem;
		border-bottom: 1px solid var(--hs-border);
		border-radius: 0;
		font-size: 1rem;
	}

	.hs-nav ul ul {
		position: static;
		min-width: 0;
		padding: 0 0 0 0.9rem;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hs-header__inner { gap: 0.75rem; }
	.hs-header__brand { flex: 1 1 auto; }
}

/* ==========================================================================
   BARRE DE MENU DU DEFILEMENT
   ==========================================================================

   Elle glisse en place des que la page a defile, et ne garde que ce qui sert
   pendant qu'on parcourt un catalogue : les rayons et le panier.

   🔑 ELLE REMPLACE L'EN-TETE COLLANT, ELLE NE S'Y AJOUTE PAS.

   Les deux ensemble feraient deux barres empilees et voleraient un quart de
   l'ecran sur un telephone. Quand la barre est active, l'en-tete cesse donc
   de coller et s'en va normalement avec la page.
   ========================================================================== */

.hs-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Au-dessus de l'en-tete (60) et du contenu, mais SOUS le voile (80) et
	   le tiroir (90) : un panier ouvert doit rester au premier plan. */
	z-index: 70;
	background: var(--hs-bg);
	border-bottom: 1px solid var(--hs-border);
	box-shadow: 0 2px 12px rgba(var(--hs-heading-rgb), 0.06);
	transform: translateY(-100%);
}

/* 🔑 LE FILET QUI SIGNE LA PALETTE.
 *
 * La barre est blanche comme le reste du site : rien n'y rappelle le theme
 * choisi. Ce trait de trois pixels le fait, en passant de la couleur
 * principale a la couleur d'accent — les deux teintes qui portent l'identite
 * de la boutique.
 *
 * Il est pose sous les DEUX barres — l'en-tete en haut de page et la barre du
 * defilement — pour que la signature ne disparaisse pas au moment ou l'on
 * descend. Meme trait, meme epaisseur, meme couleur : rien ne saute a l'oeil
 * au passage de l'une a l'autre.
 *
 * Il suit
 * automatiquement la palette : Or & nuit le rend dore, Torrefaction brun,
 * Vitamine cobalt. Aucune couleur en dur.
 *
 * Trois pixels, pas dix : un filet souligne, une bande domine.
 *
 * 🔴 UNI, PAS EN DEGRADE. Premiere version : un fondu de la couleur
 * principale vers l'accent. Deux teintes sur trois pixels ne se lisent pas
 * comme une signature, mais comme un effet — et la couleur d'accent, choisie
 * pour ressortir ponctuellement, n'a rien a faire en aplat continu. */
.hs-header::after,
.hs-navbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;               /* recouvre la bordure grise plutot que s'y ajouter */
	height: 3px;
	background: var(--hs-primary);
	pointer-events: none;
}

body.hs-scrolled .hs-navbar { transform: none; }

/* 🔴 LA BARRE D'ADMINISTRATION OCCUPE DEJA LE HAUT DE L'ECRAN.
 *
 * Un element « fixed; top: 0 » se glisse DESSOUS quand on est connecte : la
 * barre existait, fonctionnait, et restait invisible pour l'administrateur —
 * c'est-a-dire pour la seule personne qui la teste. Les visiteurs, eux, la
 * voyaient. De quoi chercher longtemps un bug qui n'en est pas un.
 *
 * WordPress fixe cette barre a 32 px, et a 46 px sous 782 px de large. */
body.admin-bar .hs-navbar { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .hs-navbar { top: 46px; }
}

/* 🔴 SANS CECI, LA BARRE AVALE LES CLICS DE TOUTE LA PAGE.
   Elle reste dans le document meme repliee : un element fixe hors ecran
   continue de recevoir les evenements de sa zone d'origine. */
.hs-navbar { visibility: hidden; pointer-events: none; }
body.hs-scrolled .hs-navbar { visibility: visible; pointer-events: auto; }

.hs-navbar__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* 🔴 « --hs-content », PAS « --hs-content-w ».
	   La seconde n'a jamais existe : c'est le repli de 1200 px qui s'appliquait,
	   et la barre collante ignorait donc la largeur de contenu reglee dans le
	   personnalisateur. Elle « marchait » — a la mauvaise largeur, sans que
	   rien ne le signale. */
	width: min(var(--hs-content), 100% - 2rem);
	margin: 0 auto;
	min-height: 3rem;
}


/* 🔴 LA BARRE DU DEFILEMENT EST UNE AFFAIRE DE GRAND ECRAN. UNIQUEMENT.
 *
 * Sur telephone et tablette, l'en-tete colle avec son hamburger fonctionnait
 * deja tres bien : un bouton, un menu plein ecran, toutes les entrees d'un
 * coup. Le remplacer par une seconde barre n'apportait rien et faisait perdre
 * un comportement eprouve — c'etait repondre a une demande faite POUR LE
 * DESKTOP en la generalisant a tout le monde.
 *
 * Sous 900 px, la barre n'existe donc pas et l'en-tete garde exactement le
 * comportement qu'il avait avant ce chantier. */
.hs-navbar__burger { display: none; }

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

}

/* Le nom de la boutique, en plus petit : c'est ce qui dit au client ou il se
   trouve. Il ne rapetisse pas au point de devenir illisible — il se contente
   de tenir sur une ligne de 48 px. */
.hs-navbar__brand {
	flex: 0 0 auto;
	max-width: 40%;
	overflow: hidden;
}

/* 🔑 « overflow: hidden » + « nowrap » TRANCHE NET, sans rien dire.
   Un nom de boutique long etait coupe au milieu d'une lettre, comme si
   l'affichage avait plante. Les points de suspension disent que le texte
   continue — c'est la seule difference entre un nom abrege et un nom casse. */
.hs-navbar__brand .hs-logo-text,
.hs-navbar__brand .hs-logo-text a {
	display: block;
	overflow: hidden;
	font-size: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hs-navbar__brand img {
	max-height: 30px;
	width: auto;
}

.hs-navbar__nav {
	flex: 1 1 auto;
	min-width: 0;
	/* 🔑 LES RAYONS DEFILENT DU DOIGT PLUTOT QUE DE PASSER A LA LIGNE.
	   Huit entrees sur 390 px tiendraient sur trois lignes : la barre ferait
	   alors 120 px de haut et mangerait le contenu qu'on essaie de lire. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Un degrade en bord droit annonce qu'il reste des entrees a droite —
	   sans lui, rien n'indique que la liste continue. */
	mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}

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

.hs-navbar__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.hs-navbar__list li { flex: 0 0 auto; }

.hs-navbar__list a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: var(--hs-radius-sm);
	color: var(--hs-heading);
	font-family: var(--hs-font-menu, var(--hs-font-body));
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--hs-transition), color var(--hs-transition);
}

.hs-navbar__list a:hover,
.hs-navbar__list .current-menu-item > a {
	background: var(--hs-bg-alt);
	color: var(--hs-primary);
}

.hs-navbar__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

/* Les icones de la barre sont un cran plus petites que celles de l'en-tete :
   c'est ce qui permet de tout garder sur 48 px de haut. */
.hs-navbar__actions .hs-action {
	width: 2.25rem;
	height: 2.25rem;
}

.hs-navbar__actions .hs-action svg {
	width: 19px;
	height: 19px;
}

/* 🔴 SOUS 480 px, LE COMPTE PASSE A LA TRAPPE — ET LUI SEUL.
   Logo, rayons, recherche et panier tiennent ; le compte est le seul dont on
   se passe en cours de navigation, et il reste a un doigt dans l'en-tete. */
@media (max-width: 480px) {
	.hs-navbar__compte { display: none; }
	.hs-navbar__brand { max-width: 32%; }
}

/* 🔴 NE JAMAIS CHANGER « position » POUR FAIRE PARTIR L'EN-TETE.
 *
 * Premiere version : « position: relative » quand la barre prend le relais.
 * L'en-tete quittait alors le mode colle d'un seul coup, la page se
 * reorganisait dans le meme instant, et tout sautait — un a-coup sec,
 * impossible a adoucir : « position » ne s'anime pas.
 *
 * Un « transform » ne touche PAS a la mise en page : l'element garde sa place
 * dans le flux, seul son dessin se deplace. L'en-tete glisse donc vers le
 * haut pendant que la barre descend, les deux d'un meme mouvement, sans que
 * rien ne bouge autour.
 *
 * 🔴 ET SEULEMENT LA OU UNE BARRE VIENT LE REMPLACER.
 *
 * Cette regle etait ecrite pour toutes les largeurs, avec une annulation plus
 * haut dans le fichier pour le mobile. Meme specificite, mais la derniere
 * ecrite l'emporte : l'annulation ne servait a rien. Sur telephone et
 * tablette l'en-tete partait donc vers le haut sans que rien ne le remplace,
 * et le menu disparaissait des qu'on defilait — alors qu'il restait colle
 * avant ce chantier.
 *
 * La condition est desormais dans la regle elle-meme. Il n'y a plus
 * d'annulation a tenir a jour ailleurs, donc plus d'ordre a respecter. */
@media (min-width: 901px) {
	body.hs-scrolled .hs-header--sticky {
		transform: translateY(-100%);
	}
}

/* 🔑 UNE COURBE QUI DEMARRE VITE ET FINIT LENTEMENT.
 *
 * Une transition lineaire donne l'impression d'un mecanisme ; celle-ci part
 * franchement puis se pose, comme un objet qui s'arrete. 280 ms : assez pour
 * que l'oeil suive le mouvement, assez court pour ne pas faire attendre. */
/* 🔴 PAS DE « will-change » SUR L'EN-TETE. IL CONTIENT LE MENU MOBILE.
 *
 * « will-change: transform » cree un contexte de confinement, exactement
 * comme un « transform ». Tout « position: fixed » a l'interieur cesse alors
 * de se caler sur la FENETRE pour se caler sur l'element transforme.
 *
 * Le menu mobile est un enfant de l'en-tete. Avec ce will-change, il passait
 * de la hauteur de l'ecran a celle de l'en-tete : 112 px. Ses six entrees
 * etaient bien la, mais deux seulement tenaient dans la zone — « il n'y a
 * simplement qu'accueil ».
 *
 * Il n'y reste que sur la barre du defilement, qui ne contient rien de fixe. */
.hs-navbar {
	transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* 🔴 ET CETTE TRANSITION NE SERT QUE LA OU L'EN-TETE BOUGE.
 *
 * Elle etait declaree pour toutes les largeurs. Sous 901 px, aucun transform
 * ne s'applique — mais annoncer une transition sur « transform » suffit a
 * faire promouvoir l'element sur sa propre couche de composition, ce qui
 * decale son rendu d'une fraction de pixel. D'ou le leger tressaillement au
 * moment ou l'en-tete se colle. */
@media (min-width: 901px) {
	.hs-header--sticky {
		transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
		            box-shadow var(--hs-transition);
	}
}

@media (max-width: 600px) {
	.hs-navbar__inner {
		width: 100%;
		padding: 0 0 0 0.75rem;
		gap: 0.25rem;
	}

	.hs-navbar__list a { padding: 0.5rem 0.6rem; }
	.hs-navbar__actions { padding-right: 0.5rem; }
}

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

/* ==========================================================================
   TELEPHONE ET CONTACT
   ==========================================================================

   Deux emplacements, un seul balisage : l'en-tete sur grand ecran, le bas du
   menu sur telephone et tablette. C'est le CSS qui decide lequel s'affiche —
   le PHP sort les deux, sans savoir ou l'on est.
   ========================================================================== */

.hs-contact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hs-contact__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hs-heading);
	font-family: var(--hs-font-menu, var(--hs-font-body));
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--hs-transition);
}

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

.hs-contact__lien {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* --- Dans l'en-tete : grand ecran seulement ------------------------------ */

.hs-contact--header { flex: 0 0 auto; margin-left: auto; }
.hs-contact--menu { display: none; }

/* 🔴 SOUS 1100 px, L'EN-TETE EST PLEIN. MESURE, PAS ESTIME.
 *
 * A 1000 px : logo 171 + menu 519 + contact 107 + icones 134, plus trois
 * ecarts de 24 px = 1003 px a caser dans 985. La page debordait de 51 px vers
 * la droite, et les icones du panier sortaient de l'ecran.
 *
 * Les liens du menu ne se compriment pas — ils portent « white-space: nowrap »
 * et doivent rester lisibles. Le contact est donc ce qui cede : il reprend sa
 * place des que la barre respire, et le pied de page le porte de toute facon.
 *
 * 900 a 1100 px est une plage etroite — tablettes en paysage — et le seuil du
 * menu hamburger reste a 900 px, la ou Chris le veut. */
@media (max-width: 1100px) {
	.hs-contact--header { display: none; }
}

@media (max-width: 900px) {
	/* .hs-contact--header est deja masque des 1100 px, juste au-dessus : le
	   repeter ici ne changeait rien et laissait croire a deux seuils distincts.
	   Une regle morte n'abime pas le rendu — elle egare la lecture. */

	.hs-contact--menu {
		display: grid;
		gap: 0.6rem;
		margin-top: 1.25rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--hs-border);
	}

	.hs-contact--menu .hs-contact__tel {
		justify-content: center;
		padding: 0.7rem;
		border: 1px solid var(--hs-border);
		border-radius: var(--hs-radius-sm);
		font-size: 1rem;
	}

	/* 🔴 « .hs-nav a » BAT « .hs-btn » : 0,1,1 CONTRE 0,1,0.
	   Le bouton prenait donc la couleur des titres sur son fond plein :
	   rgb(27,27,25) sur rgb(47,47,44), un contraste de 1,1 pour 1. Le mot
	   « Contact » etait la, invisible. Il faut au moins la meme specificite
	   pour reprendre la main. */
	.hs-nav .hs-contact--menu .hs-contact__lien {
		justify-content: center;
		padding: 0.85rem;
		color: var(--hs-on-primary);
		background: var(--hs-primary);
		font-size: 1rem;
		text-align: center;
	}

	.hs-nav .hs-contact--menu .hs-contact__lien:hover {
		color: var(--hs-on-primary);
		background: var(--hs-primary-dark);
	}

	/* 🔴 L'ICONE ET LE NUMERO PASSAIENT L'UN SOUS L'AUTRE.
	   « .hs-contact » est en flex, mais « .hs-contact--menu » le repasse en
	   grille pour empiler ses deux blocs : le lien telephone devenait alors
	   un element de grille, et son contenu se rangeait en colonne.
	   On redit donc explicitement ce qu'on veut : une ligne, sans retour. */
	.hs-nav .hs-contact--menu .hs-contact__tel {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		white-space: nowrap;
	}

	.hs-nav .hs-contact--menu .hs-contact__tel svg { flex: 0 0 auto; }
}

/* --- Dans la barre du defilement : l'icone seule ------------------------- */

.hs-contact--navbar {
	flex: 0 0 auto;
	gap: 0.35rem;
}

/* Le numero disparait a l'oeil mais reste lu par les lecteurs d'ecran et
   affiche au survol : l'information n'est pas perdue, seulement rangee. */
.hs-contact--navbar .hs-contact__tel {
	width: 2.25rem;
	height: 2.25rem;
	justify-content: center;
	border-radius: var(--hs-radius-sm);
}

.hs-contact--navbar .hs-contact__tel span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hs-contact--navbar .hs-contact__tel:hover { background: var(--hs-bg-alt); }

.hs-contact--navbar .hs-contact__lien {
	padding: 0.4rem 0.8rem;
	font-size: 0.8125rem;
}

/* Sous 900 px la barre n'existe pas : rien a prevoir de plus. */