/* ==========================================================================
   Ka'Com — Header v2 « pilule flottante, logo au centre » (03/10/2026)
   Charge APRES header.css. Pour revenir a l'ancien header : retirer
   l'enqueue 'kacom-header-v2' dans functions.php.
   ========================================================================== */

:root {
	--kc-pill-h: 64px;
	--kc-pill-gap: 14px;          /* marge autour de la pilule */
	--kc-logo-size: 92px;         /* medaillon, deborde de la pilule */
	--kc-header-h: calc(var(--kc-pill-h) + var(--kc-pill-gap) * 2);
	--kc-pill-bg: rgba(250, 245, 240, .86);
}
@media (max-width: 1024px) {
	:root {
		--kc-pill-h: 56px;
		--kc-pill-gap: 18px;
		--kc-logo-size: 72px;
	}
}

/* 1. Le header devient transparent : seule la pilule est visible ---------- */
#masthead,
#masthead .site-header-wrap,
#masthead .site-mobile-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container-inner,
#masthead.item-is-stuck,
#masthead .item-is-stuck {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

#masthead { position: relative; z-index: 1000; }

#masthead .site-main-header-wrap .site-header-row-container-inner {
	padding: var(--kc-pill-gap) 16px;
}

/* 2. La pilule ------------------------------------------------------------ */
#masthead .site-main-header-inner-wrap {
	position: relative;
	min-height: var(--kc-pill-h) !important;
	height: var(--kc-pill-h);
	padding: 0 26px;
	border-radius: 999px;
	background: var(--kc-pill-bg);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 8px 30px rgba(61, 35, 20, .12);
	outline: 1px solid rgba(61, 35, 20, .07);
	transition: background .25s ease, box-shadow .25s ease;
}
#masthead .item-is-stuck .site-main-header-inner-wrap {
	background: rgba(250, 245, 240, .95);
	box-shadow: 0 10px 34px rgba(61, 35, 20, .16);
}
#masthead .site-header-wrap .site-container { max-width: 1180px; }

/* 3. Logo : medaillon centre sur la pilule, qui deborde en haut et en bas -- */
#masthead .site-header-main-section-center .site-branding,
#masthead .site-header-main-section-center .site-header-item[data-section="title_tagline"] {
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}
#masthead .custom-logo-link,
#masthead .site-branding > a {
	width: var(--kc-logo-size) !important;
	height: var(--kc-logo-size) !important;
	background: var(--kc-terracotta);
	border: 0;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 8px 24px rgba(61, 35, 20, .2);
	box-sizing: border-box;
}
#masthead .custom-logo-link img,
#masthead .custom-logo { max-height: none !important; }
#masthead .site-header-main-section-center { min-width: calc(var(--kc-logo-size) + 30px) !important; }

/* 4. Liens : fonces sur fond clair ----------------------------------------- */
#masthead .secondary-navigation a,
#masthead .header-navigation .menu > li > a,
#masthead .secondary-navigation .menu > li > a,
#masthead .header-menu-container ul.menu > li > a,
#masthead .secondary-menu-container ul.menu > li > a {
	color: var(--kc-cacao) !important;
	padding: 10px 15px !important;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .2s ease;
}
#masthead .header-navigation .menu > li > a:hover,
#masthead .secondary-navigation .menu > li > a:hover {
	background: rgba(255, 255, 255, .8);
	color: var(--kc-cacao) !important;
}
#masthead .header-navigation .menu > li.current-menu-item > a,
#masthead .header-navigation .menu > li.current-menu-ancestor > a,
#masthead .secondary-navigation .menu > li.current-menu-item > a {
	background: #fff;
	box-shadow: 0 2px 8px rgba(61, 35, 20, .08);
	text-decoration: none !important;
}
#masthead .header-navigation .dropdown-nav-toggle svg { fill: var(--kc-cacao); }

/* Panier, compte, burger : icones foncees */
#masthead .header-cart-button,
#masthead .header-mobile-cart-wrap .header-cart-button,
#masthead .kc-account-link,
#masthead .mobile-toggle-open-container .menu-toggle-open,
#masthead .menu-toggle-open {
	color: var(--kc-cacao) !important;
}
#masthead .header-cart-button svg,
#masthead .menu-toggle-open svg { fill: currentColor; color: var(--kc-cacao) !important; }
#masthead .header-cart-total { background: var(--kc-caramel, #a0704a); }

/* Burger : pastille foncee, comme sur la maquette */
#masthead .menu-toggle-open {
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--kc-cacao) !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
#masthead .menu-toggle-open svg,
#masthead .menu-toggle-open .menu-toggle-icon { color: #fff !important; fill: #fff !important; }

/* 5. Mega-menu : panneau arrondi sous la pilule ---------------------------- */
#main-header .header-navigation ul.sub-menu {
	top: calc(100% + 12px);
	padding-top: 50px;
	border-radius: 24px;
	border-top: 0;
	overflow: hidden;
}
#main-header .header-navigation ul.sub-menu::before { top: 22px; }
/* pont pour garder le survol entre la pilule et le panneau */
#main-header .header-navigation ul.menu > li.menu-item-has-children > a::after { height: 46px; }

/* 6. Mobile : panier a gauche, logo au centre, burger a droite ------------- */
@media (max-width: 1024px) {
	#masthead .site-main-header-inner-wrap { padding: 0 8px; }
	#masthead .site-mobile-header-wrap .site-header-row-container-inner { padding: var(--kc-pill-gap) 0; }
	#masthead .site-mobile-header-wrap .site-container { padding: 0 12px !important; }
	#masthead .site-mobile-header-wrap .site-header-item[data-section="kadence_customizer_mobile_cart"] {
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
	#masthead .site-mobile-header-wrap .header-cart-button {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #fff !important;
		justify-content: center;
		padding: 0 !important;
	}
}

/* 7. Le contenu remonte sous la pilule quand la page commence par un hero --- */
body:has(.entry-content > .kc-hero-accueil:first-child) #inner-wrap,
body:has(.entry-content > .kc-hero-page:first-child) #inner-wrap {
	margin-top: calc(var(--kc-header-h) * -1);
}
/* Pages sans hero : un peu d'air sous le medaillon */
body:not(:has(.entry-content > .kc-hero-accueil:first-child)):not(:has(.entry-content > .kc-hero-page:first-child)) #inner-wrap {
	padding-top: 24px;
}
.entry-content > .kc-hero-page:first-child {
	padding-top: calc(var(--kc-section-y, 80px) + var(--kc-header-h)) !important;
}
.entry-content > .kc-hero-accueil:first-child {
	box-sizing: content-box;
	padding-top: var(--kc-header-h);
}

/* 8. Tiroir mobile (repris de l'ancien mu-plugin kacom-circle-logo) -------- */
#mobile-drawer .drawer-inner { background: #674c3c !important; }
#mobile-drawer .drawer-content a { color: #ffffff !important; }
#mobile-drawer .drawer-content li { border-color: rgba(255, 255, 255, .14) !important; }

/* Logo : image dans le medaillon */
#masthead .site-branding > a,
#masthead .custom-logo-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}
#masthead .site-branding > a img,
#masthead .custom-logo { width: 100% !important; height: auto !important; object-fit: contain; }
#masthead .site-header-main-section-center .site-header-item[data-section="title_tagline"],
#masthead .site-header-main-section-center .site-branding {
	position: absolute !important;
	left: 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 120 !important;
}

/* Bouton projet en bas du tiroir */
#mobile-drawer .kc-drawer-cta .kc-cta-ico {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: var(--kc-cacao);
}
#mobile-drawer .menu-item.kc-drawer-cta {
	border: 0 !important;
	margin-top: 22px;
}
#mobile-drawer .drawer-content .menu-item.kc-drawer-cta > a,
#mobile-drawer .menu-item.kc-drawer-cta > a {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	background: var(--kc-terracotta);
	color: var(--kc-cacao) !important;
	font-weight: 700 !important;
	border-radius: 999px;
	padding: 14px 20px !important;
	text-decoration: none !important;
}

/* Reflet lumineux qui traverse le bouton projet (03/10/2026) */
#mobile-drawer .menu-item.kc-drawer-cta > a {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
#mobile-drawer .menu-item.kc-drawer-cta > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(250, 245, 240, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: kcShine 3.2s 1s ease-in-out infinite;
}
@keyframes kcShine {
	0%, 60% { transform: translateX(-120%); }
	100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
	#mobile-drawer .menu-item.kc-drawer-cta > a::after { animation: none; }
}