/* ==========================================================================
   Icône de panier dans le menu principal

   Elle se pose à côté du bouton « Boutique » et doit tenir dans un menu qu'on ne
   maîtrise pas : celui d'Elementor, dont les marges entre éléments sont réglées
   dans le thème enfant. D'où des sélecteurs qui visent notre propre élément et
   ne touchent à rien d'autre.

   Couleurs prises dans le logo officiel : vert #397441, or #D19334.
   ========================================================================== */

.gg-panier-item {
	display: flex;
	align-items: center;
}

.gg-panier-item .gg-panier {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 36 px de cible tactile, marge comprise. La place est comptée dans ce
	   menu : le rond de 44 px poussait un cran de trop, et l'arrivée de
	   l'espace client a obligé à descendre de 40 à 36. */
	width: 36px;
	height: 36px;
	margin-inline-start: 2px;
	border-radius: 50%;
	color: #2f5c36;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.gg-panier-item .gg-panier:hover,
.gg-panier-item .gg-panier:focus-visible {
	background: rgba(57, 116, 65, 0.1);
	color: #04251e;
}

.gg-panier-item .gg-panier:focus-visible {
	outline: 2px solid #397441;
	outline-offset: 2px;
}

/* `flex: 0 0 auto` est indispensable : le lien est un conteneur flexible, et
   sans ça le SVG se laissait comprimer par la pastille du compteur. Mesuré sur
   la préproduction : 4 px de large au lieu de 22, donc un sac invisible. */
.gg-panier__icone {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: block;
}

/* Les marges entre entrées de menu étaient réglées ici quand le panier était
   seul. Elles le sont maintenant dans `compte.css`, qui porte les deux icônes
   et connaît donc la place qu'il faut leur faire. Les régler des deux côtés
   laissait deux valeurs concurrentes départagées par l'ordre de chargement :
   si `compte.css` venait à ne pas se charger, le menu repassait sur deux
   lignes sans qu'on comprenne pourquoi. */

/* Le compteur. Il est en position absolue pour ne pas élargir la cible, et son
   fond est l'or du logo, la seule couleur qui accroche l'œil sur cet en-tête
   blanc sans jurer avec le bouton « Boutique » juste à côté. */
.gg-panier__compte {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 9px;
	background: #d19334;
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	/* Le clic doit toujours atteindre le lien, jamais la pastille. */
	pointer-events: none;
}

/* WooCommerce remplace ce fragment après un ajout au panier. Quand le panier est
   vide, l'attribut `hidden` revient : sans cette règle, une feuille de style du
   thème qui impose `display` à un `span` le laisserait visible. */
.gg-panier__compte[hidden] {
	display: none;
}

/*
 * « Mon panier » et le mot « article » sont du TEXTE, pas un `aria-label`.
 *
 * Un `aria-label` remplace le contenu de l'élément : il rendait le compteur
 * inaudible, alors que c'est précisément la seule partie que les fragments de
 * WooCommerce rafraîchissent. Le nom accessible se calcule donc à partir du
 * contenu, ce qui donne « Mon panier 2 articles », juste et mis à jour.
 */
.gg-panier__titre,
.gg-panier__unite {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dans le menu déroulant du mobile, les éléments sont empilés en pleine largeur :
   une pastille ronde isolée y serait incompréhensible, le libellé reprend donc
   sa place normale. */
.elementor-nav-menu--dropdown .gg-panier-item {
	display: block;
}

.elementor-nav-menu--dropdown .gg-panier__titre {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	font-size: 15px;
}

.elementor-nav-menu--dropdown .gg-panier-item .gg-panier {
	width: auto;
	height: auto;
	margin-inline-start: 0;
	padding: 12px 20px;
	gap: 10px;
	border-radius: 0;
	justify-content: center;
}

.elementor-nav-menu--dropdown .gg-panier__compte {
	position: static;
	margin-inline-start: 2px;
}