/* ==================================================================
   En-tête du site (Blocksy) — 1000 BOLS
   Menu, icônes Favoris / Compte, panier, recherche, pastille, centrage.
   Chargé par inc/header.php sur tout le site public.
   ================================================================== */

/* ------------------------------------------------------------------
   Menu principal (en-tête) : liens actifs/survolés en bordeaux.
   ------------------------------------------------------------------ */
#header .menu > li > a:hover,
#header .menu > li.current-menu-item > a,
#header .menu > li.current-menu-ancestor > a,
#header .menu > li.current_page_item > a {
	color: var(--mb-bordeaux);
}

/* ------------------------------------------------------------------
   "Mes favoris" / "Mon compte" en icônes (cœur, bonhomme). Le texte
   reste lisible par les lecteurs d'écran. Classes posées dans
   Apparence > Menus (champ "Classes CSS") : mb-menu-favoris,
   mb-menu-compte. Menu mobile (tiroir) non touché.
   ------------------------------------------------------------------ */
#header .mb-menu-favoris > a,
#header .mb-menu-compte > a {
	font-size: 0;
	color: inherit;
	padding-inline: 6px;
}
#header .mb-menu-favoris > a::before,
#header .mb-menu-compte > a::before {
	content: "";
	/* Blocksy utilise ce ::before en position absolue (soulignement) : on le remet dans le flux. */
	position: static;
	inset: auto;
	transform: none;
	opacity: 1;
	margin: 0;
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--mb-ico) center / contain no-repeat;
	mask: var(--mb-ico) center / contain no-repeat;
}
#header .mb-menu-favoris > a {
	--mb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.5-8.6C.8 8 2 4.5 5.4 3.6 8 2.9 10.3 4 12 6.3 13.7 4 16 2.9 18.6 3.6 22 4.5 23.2 8 21.5 11.4 19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}
#header .mb-menu-compte > a {
	--mb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Panier et recherche (en-tête) : infobulle au survol + survol bordeaux.
   ------------------------------------------------------------------ */
#header [data-id="cart"] .ct-cart-item,
#header button[data-id="search"] {
	position: relative;
}
#header [data-id="cart"] .ct-cart-item::after,
#header button[data-id="search"]::after {
	display: block;
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	background: var(--mb-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	border-radius: 2px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
	z-index: 10;
}
#header [data-id="cart"] .ct-cart-item::after { content: "Mon panier"; }
#header button[data-id="search"]::after       { content: "Rechercher"; }
#header [data-id="cart"] .ct-cart-item:hover::after,
#header button[data-id="search"]:hover::after { opacity: 1; }
#header [data-id="cart"] .ct-cart-item:hover,
#header button[data-id="search"]:hover { color: var(--mb-bordeaux); }

/* Pastille de quantité du panier : bordeaux (au lieu du bleu Blocksy). */
#header .ct-dynamic-count-cart,
#header [data-id="cart"] .ct-dynamic-count-cart {
	background-color: var(--mb-bordeaux);
	color: #fff;
}

/* ------------------------------------------------------------------
   En-tête (bureau) : colonne du logo réduite à la largeur du logo, et
   groupe liens + icônes Favoris / Compte centré entre le logo et le
   panier. Police, espaces et marges se réduisent avec la largeur de la
   fenêtre pour que les 8 liens du compte céramiste tiennent.

   IMPORTANT : pas de marges "auto" ici. Blocksy additionne les marges
   calculées des éléments du menu pour décider s'ils tiennent ; une
   marge auto compte alors tout le blanc libre et le thème range des
   liens dans un bouton "Plus". Marges et espaces fixes uniquement.
   ------------------------------------------------------------------ */
@media (min-width: 1000px) {
	#header [data-row="middle"] > .ct-container {
		grid-template-columns: auto 1fr !important;
	}
	#header [data-id="menu"] > ul {
		justify-content: center !important;
		gap: clamp(2px, 0.6vw, 20px);
	}
	#header .menu > li > a {
		padding-inline: clamp(5px, 0.6vw, 9px);
		font-size: clamp(11px, 0.85vw, 12px);
	}
	/* Les icônes gardent leur texte masqué (sélecteur plus précis que ci-dessus). */
	#header .menu > li.mb-menu-favoris > a,
	#header .menu > li.mb-menu-compte > a {
		font-size: 0;
	}
	#header .mb-menu-favoris {
		margin-inline-start: clamp(6px, 1.4vw, 32px);
	}
	#header .mb-menu-compte {
		margin-inline-start: 0;
	}
}

/* ------------------------------------------------------------------
   Jamais de bouton "Plus" : si le menu du compte céramiste (8 liens)
   ne tient plus sur une ligne, on bascule sur l'en-tête mobile (bouton
   burger + menu latéral), comme sur smartphone. Blocksy ne bascule
   qu'à 999 px ; on relève ce seuil pour les céramistes seulement.
   Seuil mesuré (8 liens tiennent jusqu'à ~1170 px) ; à relever si on
   ajoute des liens au menu. Les visiteurs (6 liens) tiennent jusqu'à
   999 px, donc aucun seuil pour eux.

   Le panneau latéral contient deux blocs, "desktop" (vide) et "mobile"
   (le menu) : il faut basculer aussi celui-là, sinon il reste noir.
   ------------------------------------------------------------------ */
@media (min-width: 1000px) and (max-width: 1169px) {
	body:has(.mb-petit-potier-link) #header [data-device="desktop"] { display: none !important; }
	body:has(.mb-petit-potier-link) #header [data-device="mobile"]  { display: block !important; }
	body:has(.mb-petit-potier-link) #offcanvas .ct-panel-content[data-device="desktop"] { display: none !important; }
	body:has(.mb-petit-potier-link) #offcanvas .ct-panel-content[data-device="mobile"]  { display: flex !important; }
}

/* Menu latéral : le lien de la page courante reste lisible sur fond sombre. */
#offcanvas .menu > li.current-menu-item > a,
#offcanvas .menu > li.current-menu-ancestor > a,
#offcanvas .menu > li.current_page_item > a {
	color: #e0715d;
}