/**
 * Cyor - Menu Overlay Transparent
 *
 * Scope: uniquement les pages avec body.cyor-mo-transparent (metabox activée).
 *
 * Avant scroll, l'en-tête garde EXACTEMENT la disposition du menu normal
 * (topbar, puis logo centré, puis menu centré en dessous), mais tout est sorti
 * du flux et superposé à la bannière, sans aucun fond : l'image de la bannière
 * remonte donc tout en haut de la page, sous la topbar.
 *
 * Au scroll, la topbar défile avec la page, le logo disparaît en fondu et seul
 * le menu reste, fixé tout en haut, sur un bandeau au fond identique à celui
 * du menu normal :
 *   - fond menu (menuWrapper) : linear-gradient(70deg, #f4eee3, #e2dcd1, #f4eee3)
 *
 * Même comportement à toutes les largeurs : au-dessus de 1300px le menu est
 * complet, en dessous il bascule en burger (cf. mobile-breakpoint-override.css).
 *
 * Les hauteurs de la topbar et du bloc logo varient selon la largeur (la
 * topbar passe sur 2 lignes en mobile) : elles sont mesurées en JS
 * (menu-overlay.js) et injectées dans --cyor-mo-topbar-height et
 * --cyor-mo-header-height ; les valeurs ci-dessous ne sont que des fallbacks
 * utilisés le temps que le JS s'exécute.
 */

:root {
	--cyor-mo-topbar-height: 35px;
	--cyor-mo-header-height: 110px;
	--cyor-mo-menu-height: 50px;
	--cyor-mo-admin-bar: 0px;
}

/* offset de l'admin bar WordPress (32px, réduite à 46px sous 782px).
   La classe "admin-bar" est posée directement sur <body>, avec
   "cyor-mo-transparent" : sélecteur composé, pas de descendant. */
body.admin-bar.cyor-mo-transparent {
	--cyor-mo-admin-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.cyor-mo-transparent {
		--cyor-mo-admin-bar: 46px;
	}
}

/* ---------------------------------------------------------------------------
 * Topbar : sans fond, superposée à la bannière. En absolute (et pas fixed)
 * pour qu'elle défile naturellement avec la page.
 * ------------------------------------------------------------------------- */
body.cyor-mo-transparent .topbar {
	position: absolute;
	top: var(--cyor-mo-admin-bar);
	left: 0;
	right: 0;
	z-index: 1001;
	background: transparent !important;
}

/* ---------------------------------------------------------------------------
 * Logo puis menu, empilés comme en menu normal, en position fixe
 * ------------------------------------------------------------------------- */
body.cyor-mo-transparent .header-flex-ligne,
body.cyor-mo-transparent .menuWrapper {
	position: fixed !important;
	left: 0;
	right: 0;
	/* !important : le thème force ".menuWrapper { width: 100% !important }" sous
	   1000px, on s'aligne dessus à toutes les largeurs */
	width: 100% !important;
	margin: 0;
	z-index: 1001;
	background: transparent !important;
	box-shadow: none !important;
	transition: top .3s ease, opacity .3s ease;
}

body.cyor-mo-transparent .header-flex-ligne {
	top: calc(var(--cyor-mo-admin-bar) + var(--cyor-mo-topbar-height));
}

body.cyor-mo-transparent .menuWrapper {
	top: calc(var(--cyor-mo-admin-bar) + var(--cyor-mo-topbar-height) + var(--cyor-mo-header-height));
}

/* neutralise le sticky JS natif de VC Mega Menu s'il est activé sur ce menu,
   pour éviter un double position:fixed en conflit avec le nôtre */
body.cyor-mo-transparent .vc-mm-menu-h.vc-sticky,
body.cyor-mo-transparent .vc-mm-h-sticky-wrapper {
	position: static !important;
	width: auto !important;
	top: auto !important;
}

/* barre d'accueil des clients pro : désactivée sur les pages en menu transparent
   (elle se retrouverait, hors flux, par-dessus la bannière) */
body.cyor-mo-transparent .annoncePro {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Picto panier mobile (visible sous 1000px, cf. responsive.scss du thème) :
 * calé à droite du logo, badge en pastille sur le coin haut droit de l'icône.
 * Le badge .nb_prod_mob est ré-injecté en JS par footer.php à côté du lien
 * (pas dedans) : il est donc positionné par rapport au conteneur, lui-même
 * calé sur toute la largeur de l'en-tête (position fixed).
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
	body.cyor-mo-transparent .menu-mobile-icon-shop {
		position: absolute;
		top: 50%;
		right: 20px;
		width: auto;
		margin: 0;
		transform: translateY(-50%);
	}

	body.cyor-mo-transparent .menu-mobile-icon-shop a {
		display: block;
		font-size: 22px;
		line-height: 1;
	}

	body.cyor-mo-transparent .menu-mobile-icon-shop .nb_prod_mob {
		position: absolute;
		top: -7px;
		right: -10px;
		min-width: 17px;
		height: 17px;
		margin: 0;
		padding: 0 4px;
		border-radius: 9px;
		font-size: 10px;
		line-height: 17px;
		text-align: center;
		color: #fff;
		background-color: #c0a060 !important;
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------------------
 * État "scrollé" : le logo disparaît, le menu remonte tout en haut (sous l'admin
 * bar si présente) sur son bandeau de fond
 * ------------------------------------------------------------------------- */
body.cyor-mo-transparent.cyor-mo-scrolled .header-flex-ligne {
	opacity: 0;
	pointer-events: none;
}

body.cyor-mo-transparent.cyor-mo-scrolled .menuWrapper {
	top: var(--cyor-mo-admin-bar);
}

/*
 * Une seule et unique source de fond pour la barre : le bandeau plein écran
 * ci-dessous (::before), placé sous le menu (z-index inférieur). Le menu reste
 * transparent en permanence pour qu'il n'y ait jamais deux fonds juxtaposés —
 * juste ce bandeau, qui apparaît une fois la barre "scrollée".
 */
body.cyor-mo-transparent::before {
	content: "";
	position: fixed;
	top: var(--cyor-mo-admin-bar);
	left: 0;
	right: 0;
	height: var(--cyor-mo-menu-height);
	z-index: 1000;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

body.cyor-mo-transparent.cyor-mo-scrolled::before {
	background: linear-gradient(70deg, #f4eee3, #e2dcd1, #f4eee3);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	opacity: 1;
}