/**
 * Studio Tabs, barre de navigation.
 *
 * Une seule barre pour tout le site, accueil compris : sur une boutique, la
 * navigation et le panier doivent se trouver au meme endroit sur chaque page.
 * Elle occupe la largeur du conteneur moins une gouttiere, flotte avec des angles
 * arrondis, et reste collee en haut pendant le defilement.
 *
 * Le collage est porte par `position: sticky` sur le bloc d'entete, pas par le
 * sticky JS d'Elementor. Deux raisons : il ne depend d'aucun script, donc il
 * tient meme si Elementor Pro ne charge pas, et il colle le bloc entier plutot
 * que de sortir la barre du flux et d'inserer une cale, ce qui evitait mal le
 * saut de mise en page. Le sticky natif a ete retire des deux conteneurs dans le
 * builder : ne pas le reactiver, les deux mecanismes se marchent dessus.
 *
 * `body` est en `overflow-x: clip`, qui n'ouvre pas de contexte de defilement :
 * le sticky se resout donc bien sur la fenetre. A verifier si un jour ce clip
 * devient `hidden`, qui lui casserait le collage.
 *
 * Elementor 4 n'emet pas les classes personnalisees des conteneurs : les deux
 * barres sont donc ciblees par leur identifiant d'element (44410275 pour le
 * desktop, 582615b5 pour le tactile). A mettre a jour si elles sont recreees
 * dans le builder. Tout le reste est porte par des classes stables de
 * WooCommerce et d'Elementor.
 */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

.elementor-element-44410275,
.elementor-element-582615b5 {
	width: min(1400px, calc(100% - 40px));
	margin: 12px auto;
	/* Blanc sur blanc, la barre flottante ne se lisait pas comme un objet pose
	   sur la page : un filet et une ombre douce lui rendent son epaisseur, et la
	   detachent aussi des visuels plein cadre par-dessus lesquels elle passe. */
	border: 1px solid var(--st-line, #e4ded9);
	box-shadow: 0 6px 24px rgba(61, 30, 20, 0.08);
}

@media (max-width: 1024px) {
	.elementor-element-44410275,
	.elementor-element-582615b5 {
		width: calc(100% - 20px);
		margin: 10px auto;
	}
}

/* Aucune ligne de la barre ne doit passer a la ligne : c'est ce qui empilait le
   panier au-dessus du bouton menu en tactile. */
.elementor-location-header .e-con {
	flex-wrap: nowrap;
}

.elementor-location-header .e-con-inner {
	padding: 0;
}

/**
 * Menu.
 *
 * Pousse a droite pour laisser respirer le logo, colle au bloc d'actions
 * (panier puis appel a l'action).
 */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
	margin-inline-start: auto;
}

.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a {
	/* 44px : la cible tactile minimale. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Bouton menu tactile : meme gabarit que le panier pour que les deux s'alignent.
   Uniquement sous 1025px : sans cette borne, la regle rendait aussi le bouton
   visible en desktop, ou le menu est deja deplie. */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: var(--st-radius-sm, 8px);
	}
}

/**
 * Panier.
 *
 * Le declencheur arrive avec un cadre et un sous-total qui allongent la barre
 * pour rien. On garde l'icone et la pastille de comptage : c'est le seul retour
 * visuel qu'un ajout a fonctionne, elle prend donc la couleur d'accent.
 */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text {
	display: none;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon {
	font-size: 22px;
	line-height: 1;
}

.elementor-location-header .elementor-button-icon .elementor-button-icon-qty[data-counter] {
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-weight: 600;
	font-size: 11px;
}

/* Une pastille rouge affichant zero annonce une erreur plutot qu'un panier vide.
   Elle ne reapparait qu'au premier article. */
.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter="0"] {
	display: none;
}

/* Tiroir du panier : aligne sur la charte plutot que sur les gris par defaut. */
.elementor-menu-cart__container .elementor-menu-cart__main {
	font-family: var(--st-font, "Cabin", sans-serif);
	color: var(--st-ink, #3d1e14);
}

.elementor-menu-cart__product-name a {
	color: var(--st-ink, #3d1e14);
	font-weight: 500;
}

.elementor-menu-cart__footer-buttons .elementor-button {
	border-radius: var(--st-radius-pill, 999px);
	min-height: 48px;
}

/**
 * Appel a l'action.
 *
 * Une seule action principale dans la barre. Sa peau (degrade brun, Figtree 600,
 * fleche) est reglee dans le builder, a l'identique des boutons de l'accueil :
 * on ne redefinit ici que le gabarit, pour que la hauteur tactile soit garantie
 * meme si quelqu'un touche au remplissage dans Elementor.
 */
.elementor-location-header .elementor-widget-button .elementor-button {
	min-height: 44px;
	white-space: nowrap;
}

/* Entre 1025 et 1200px, menu et bouton se disputent la place : on resserre le
   menu avant qu'il ne passe a la ligne. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a {
		padding-inline: 8px;
		font-size: 14px;
	}
}

/**
 * Barre tactile.
 *
 * Le builder posait des largeurs en pourcentage sur les trois blocs (18, 14 et
 * 30) : elles ne totalisaient pas la barre, et le `space-between` etalait le
 * reste en vide au milieu, logo decale vers le centre. Les blocs reprennent
 * donc leur largeur naturelle, le logo se cale a gauche et les actions a droite.
 */
.elementor-element-582615b5 > .e-con {
	width: auto;
	flex: 0 0 auto;
}

.elementor-element-582615b5 > .e-con:first-child {
	align-items: flex-start;
	min-width: 0;
}

/* Le logo cede en premier quand la largeur manque : sur un 320px, c'est lui qui
   doit retrecir, pas le panier ni le menu. */
.elementor-element-582615b5 .elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 380px) {
	.elementor-element-582615b5 .elementor-widget-image {
		width: 130px;
	}
}

/**
 * Panneau lateral du panier.
 *
 * Elementor cale par defaut le nom des articles sur la typographie "principale"
 * du kit, qui vaut ici 50px : le panneau s'ouvrait avec trois mots par ligne et
 * des boutons gris de la taille d'un titre. Tout est donc redefini, et en
 * !important, car la feuille generee du modele d'en-tete a la meme specificite.
 */
.elementor-menu-cart__main {
	width: min(420px, 100vw) !important;
	/* Reserve en haut pour la croix de fermeture, posee en absolu : sans elle,
	   la croix de suppression du premier article vient se coller dessous. */
	padding: 76px var(--st-space-sm) var(--st-space-sm) !important;
	background-color: var(--st-bg, #ffffff) !important;
	box-shadow: -12px 0 40px rgba(61, 30, 20, 0.12);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
}

/* La croix de fermeture d'Elementor est faite de deux barres larges de 100 %
   de son conteneur : il faut donc dimensionner le conteneur, pas la police. */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__close-button {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 2;
	/* Les deux barres font 100 % de la boite de contenu : on la garde a 16px et
	   on elargit la cible tactile par le padding, pas par la largeur. */
	box-sizing: content-box !important;
	width: 16px !important;
	height: 16px !important;
	padding: 12px !important;
	margin: 0 !important;
	background: none !important;
	color: var(--st-ink, #3d1e14) !important;
	opacity: 1 !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__close-button::before,
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__close-button::after {
	height: 1.5px !important;
	background-color: var(--st-ink, #3d1e14) !important;
}

/**
 * Articles.
 */
.elementor-menu-cart__products {
	padding: 0 !important;
}

.elementor-menu-cart__product {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr) 28px;
	align-items: start;
	gap: 14px;
	padding: var(--st-space-xs) 0 !important;
	border-bottom: 1px solid var(--st-line, #e4ded9) !important;
}

.elementor-menu-cart__product-image {
	grid-column: 1;
	width: 64px !important;
	margin: 0 !important;
}

.elementor-menu-cart__product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6px;
	background-color: var(--st-surface, #f6f6f6);
	border-radius: 0 0 0 10px;
}

.elementor-menu-cart__product-name {
	grid-column: 2;
	margin: 0 !important;
	padding: 0 !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-name,
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-name a {
	font-family: var(--st-font, "Cabin", sans-serif) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	color: var(--st-ink, #3d1e14) !important;
	text-decoration: none !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-name a:hover {
	color: var(--st-accent, #a3280a) !important;
}

.st-mini__specs {
	display: block;
	margin-top: 3px;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--st-muted, #7a6a5f) !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-price {
	grid-column: 2;
	display: flex !important;
	align-items: baseline;
	gap: 6px;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--st-muted, #7a6a5f) !important;
}

.st-mini__total {
	color: var(--st-ink, #3d1e14) !important;
	font-weight: 600 !important;
}

/* Le lien de suppression d'Elementor est un <a> vide : sans glyphe dessine ici,
   la seule facon de retirer un article est d'ouvrir la page panier. */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove {
	grid-column: 3;
	grid-row: 1 / span 2;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	width: 28px !important;
	height: 28px !important;
	/* Elementor cercle ce conteneur d'un trait : c'est l'anneau gris qu'on
	   voyait a la place de la croix. */
	border: 0 !important;
	border-radius: 0 !important;
}

/* Elementor dessine sa croix en deux barres posees sur ce conteneur. On la
   remplace par une vraie croix sur le lien lui-meme, sinon les deux barres se
   redimensionnent sur la largeur du panneau et barrent tout l'article. */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove::before,
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove::after {
	content: none !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a {
	position: static !important;
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	border-radius: 50%;
	background-color: var(--st-surface, #f6f6f6) !important;
	color: var(--st-ink, #3d1e14) !important;
	/* Elementor ne revele son lien de suppression qu'au survol. Sur un ecran
	   tactile, il n'y a pas de survol : le bouton reste donc invisible et le
	   panier n'est plus modifiable depuis le panneau. */
	opacity: 1 !important;
	animation: none !important;
	color: var(--st-muted, #7a6a5f);
	text-align: center;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* La croix est un vrai caractere dans le balisage, pas un pseudo-element :
   une feuille de reinitialisation du site force background et color sur tous
   les ::before, ce qui rendait le glyphe illisible. */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a::before,
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a::after {
	content: none !important;
	animation: none !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a svg {
	display: block;
	width: 13px;
	height: 13px;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a::after {
	content: none !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a:hover {
	background-color: var(--st-accent, #a3280a) !important;
	color: #ffffff !important;
}

/* Les deux liens de suppression sont dans le balisage d'Elementor pour deux
   chemins de script differents ; un seul doit se voir. */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__product-remove a + a {
	display: none !important;
}

/**
 * Sous-total, arguments, boutons.
 */
[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__subtotal {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--st-space-sm);
	padding: var(--st-space-sm) 0 !important;
	border: 0 !important;
	font-family: var(--st-font, "Cabin", sans-serif) !important;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--st-ink, #3d1e14) !important;
	text-align: left !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__subtotal strong {
	font-weight: 500 !important;
}

.st-mini__facts {
	margin: 0 0 var(--st-space-sm);
	padding: var(--st-space-xs) 0 0;
	border-top: 1px solid var(--st-line, #e4ded9);
	list-style: none;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--st-muted, #7a6a5f);
}

.st-mini__facts li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 15px;
}

.st-mini__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--st-accent, #a3280a);
}

.st-mini__facts strong {
	color: var(--st-ink, #3d1e14);
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__footer-buttons {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	grid-template-columns: none !important;
	border: 0 !important;
	padding: 0 !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__footer-buttons .st-btn-solid {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 47px !important;
	height: auto !important;
	padding: 12px 26px !important;
	line-height: 1.2 !important;
	background-color: transparent !important;
	background-image: var(--st-btn) !important;
	color: #ffffff !important;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	border-radius: var(--st-radius-pill, 999px) !important;
}

[data-widget_type^="woocommerce-menu-cart"] .elementor-menu-cart__footer-buttons .st-btn-solid:hover {
	background-image: var(--st-btn-hover) !important;
}

[data-widget_type^="woocommerce-menu-cart"] .st-mini__link {
	display: block !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--st-ink, #3d1e14) !important;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: underline !important;
}

[data-widget_type^="woocommerce-menu-cart"] .st-mini__link:hover {
	color: var(--st-accent, #a3280a) !important;
}

/**
 * Panneau vide.
 */
.st-mini-empty {
	padding: var(--st-space-md) 0 !important;
	text-align: center;
	font-family: var(--st-font-ui, "Figtree", sans-serif) !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	color: var(--st-muted, #7a6a5f) !important;
}

.st-mini-empty__title {
	margin: 0 0 8px !important;
	font-family: var(--st-font, "Cabin", sans-serif) !important;
	font-size: 1.25rem !important;
	color: var(--st-ink, #3d1e14) !important;
}

.st-mini-empty__text {
	margin: 0 auto var(--st-space-sm) !important;
	max-width: 30ch;
}