/* ==========================================================================
   Ka'Com — En-tête Kadence Header Builder
   Séparé du design system pour faciliter la maintenance indépendante.
   Toutes les règles ciblent spécifiquement le header builder Kadence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Structure : fond, bordure, ombre
   -------------------------------------------------------------------------- */

#masthead,
.site-header {
	background: var(--kc-terracotta); /* #d9a689 */
	border-bottom: none;
	box-shadow: none;
}

/* Supprime tout pseudo-élément séparateur que Kadence pourrait injecter */
#masthead::after,
.site-header::after {
	display: none;
}

/* Hauteur confortable de la rangée principale */
#masthead .header-main-layout-inner {
	min-height: 76px;
}

/* Les rangées vide du haut / bas : on s'assure qu'elles restent imperceptibles
   si Kadence les laisse dans le DOM malgré la désactivation dans le builder. */
#masthead .header-top-layout-inner,
#masthead .header-bottom-layout-inner {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Liens de navigation desktop
   -------------------------------------------------------------------------- */

/* Sélecteurs larges pour couvrir navigation primaire ET secondaire
   quel que soit l'emplacement dans le builder. */
#masthead .header-navigation a,
#masthead .header-menu-container ul.menu > li > a,
#masthead .nav-menu > li > a {
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: 0.01em;
}

#masthead .header-navigation a:hover,
#masthead .header-menu-container ul.menu > li > a:hover,
#masthead .nav-menu > li > a:hover {
	color: var(--kc-creme); /* #faf2ec */
}

/* Page active : soulignée */
#masthead .header-menu-container ul.menu > li.current-menu-item > a,
#masthead .header-menu-container ul.menu > li.current-menu-ancestor > a,
#masthead .nav-menu > li.current-menu-item > a,
#masthead .nav-menu > li.current-menu-ancestor > a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}

/* --------------------------------------------------------------------------
   2b. Méga-menu (sous-menu de la navigation principale)

   Un panneau clair sur toute la largeur du contenu, sans coins arrondis,
   souligné d'un filet caramel. Chaque service a son icône, son titre et
   une phrase ; la description se saisit dans Apparence > Menus.
   -------------------------------------------------------------------------- */

/* L'élément de menu ne sert plus de repère : le panneau se cale sur la
   rangée du header, donc sur toute la largeur du conteneur. */
#main-header .header-navigation li.menu-item-has-children {
	position: static;
}

#main-header .header-navigation ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	/* Le médaillon du logo déborde de 56 px : le contenu commence en dessous. */
	padding: 74px clamp(22px, 3.2vw, 44px) 26px;
	box-sizing: border-box;
	background: var(--kc-creme);
	border: 0;
	border-top: 3px solid var(--kc-caramel);
	border-radius: 0;
	box-shadow: 0 24px 48px rgba(103, 76, 60, .18);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px 18px;
	z-index: 90;
	/* Kadence bascule display:none / block. On garde la grille en place et
	   on gère nous-mêmes l'apparition, pour un fondu propre. */
	display: grid !important;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	/* Le délai ne s'applique qu'à la fermeture : le panneau apparaît tout de
	   suite au survol, mais laisse un temps de grâce quand la souris sort. */
	transition: opacity .18s ease .35s, transform .18s ease .35s, visibility .18s .35s;
}

#main-header .header-navigation li.menu-item-has-children:hover > ul.sub-menu,
#main-header .header-navigation li.menu-item-has-children:focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Pont invisible entre le lien du menu et le haut du panneau : la souris peut
   descendre jusqu'au méga-menu sans le faire disparaître en chemin. */
#main-header .header-navigation ul.menu > li.menu-item-has-children > a {
	position: relative;
}

#main-header .header-navigation ul.menu > li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -16px;
	right: -16px;
	height: 30px;
}

/* Surtitre dans la bande haute, face au médaillon */
#main-header .header-navigation ul.sub-menu::before {
	content: "Mes services";
	position: absolute;
	top: 26px;
	left: clamp(22px, 3.2vw, 44px);
	font-family: var(--kc-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--kc-caramel-soft);
}

#main-header .header-navigation ul.sub-menu > li {
	width: auto;
	margin: 0;
	border: 0;
	display: block;
}

#main-header .header-navigation ul.sub-menu > li > a {
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 13px;
	align-items: start;
	height: 100%;
	padding: 16px 14px 18px;
	box-sizing: border-box;
	background: transparent;
	border-top: 2px solid transparent;
	border-radius: 0;
	color: var(--kc-cacao);
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}

#main-header .header-navigation ul.sub-menu > li > a:hover,
#main-header .header-navigation ul.sub-menu > li > a:focus {
	background: var(--kc-blanc);
	border-top-color: var(--kc-terracotta);
	color: var(--kc-cacao);
	text-decoration: none;
}

/* Icône : masque SVG hérité des classes kc-icon-* du design system,
   posées sur l'élément de menu dans Apparence > Menus. */
#main-header .header-navigation ul.sub-menu > li > a::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 28px;
	height: 28px;
	margin-top: 3px;
	background: var(--kc-caramel);
	-webkit-mask: var(--kc-icon, none) center / contain no-repeat;
	mask: var(--kc-icon, none) center / contain no-repeat;
}

#main-header .header-navigation .kc-mega__title {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--kc-font-title);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.3;
	color: var(--kc-cacao);
	white-space: normal;
}

#main-header .header-navigation .kc-mega__desc {
	grid-column: 2;
	grid-row: 2;
	margin-top: 6px;
	font-family: var(--kc-font-body);
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--kc-text-muted);
	white-space: normal;
}

/* Bandeau d'appel à l'action, sur toute la largeur du panneau */
#main-header .header-navigation ul.sub-menu > li.kc-mega-cta {
	grid-column: 1 / -1;
	order: 9;
	margin-top: 16px;
	display: flex;
	justify-content: center;
}

/* Bouton pilule, identique aux boutons du site */
#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a {
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--kc-cacao);
	border: 0;
	border-top: 0;
	border-radius: var(--kc-radius-pill);
	padding: 15px 34px !important;
	transition: background .22s ease, transform .22s ease;
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a::before {
	display: none;
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a::after {
	content: "→";
	font-size: 16px;
	color: #ffffff;
	line-height: 1;
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta .kc-mega__title {
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a:hover {
	background: var(--kc-cacao-deep);
	transform: translateY(-2px);
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a:hover .kc-mega__title,
#main-header .header-navigation ul.sub-menu > li.kc-mega-cta > a:hover::after {
	color: #ffffff;
}

#main-header .header-navigation ul.sub-menu > li.kc-mega-cta .kc-mega__desc {
	display: none;
}

/* La flèche du menu parent pivote quand le panneau est ouvert */
#main-header .header-navigation li.menu-item-has-children:hover > a .kadence-svg-iconset {
	transform: rotate(180deg);
	transition: transform .2s ease;
}

/* Tablette : deux colonnes */
@media (max-width: 1100px) {
	#main-header .header-navigation ul.sub-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   3. Bouton CTA "Réserver un audit"
   (Élément Button du header builder Kadence)
   -------------------------------------------------------------------------- */

#masthead .kadence-header-btn-wrap a,
#masthead .header-button-wrap a,
#masthead .kadence-header-button a,
#masthead .kb-btn-custom-colors-active {
	background: var(--kc-cacao) !important; /* #674c3c */
	color: #ffffff !important;
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 600;
	border-radius: 26px !important;
	padding: 10px 22px;
	border: none !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s ease, transform .2s ease;
	display: inline-block;
}

#masthead .kadence-header-btn-wrap a:hover,
#masthead .header-button-wrap a:hover,
#masthead .kadence-header-button a:hover {
	background: var(--kc-cacao-deep) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. Logo
   -------------------------------------------------------------------------- */

/* Desktop : ≈ 110 px de hauteur max */
#masthead .site-branding img,
#masthead .custom-logo {
	max-height: 110px;
	width: auto;
	display: block;
}

/* Supprime le texte du site si le logo image est présent */
#masthead .site-title,
#masthead .site-description {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Tiroir mobile (drawer)
   -------------------------------------------------------------------------- */

.kadence-mobile-nav,
.kadence-mobile-nav-wrap,
.mobile-drawer-widget-area,
.drawer-layout-inner {
	background: var(--kc-cacao) !important; /* #674c3c */
}

/* Liens */
.kadence-mobile-nav a,
.kadence-mobile-nav-wrap a,
.mobile-drawer-widget-area a {
	color: #ffffff !important;
	font-family: var(--kc-font-body);
	font-size: 15px;
	font-weight: 500;
}

.kadence-mobile-nav a:hover,
.kadence-mobile-nav-wrap a:hover,
.mobile-drawer-widget-area a:hover {
	color: var(--kc-creme) !important;
}

/* Page active dans le tiroir */
.kadence-mobile-nav .current-menu-item > a,
.kadence-mobile-nav-wrap .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Séparateurs entre items */
.kadence-mobile-nav ul.menu > li,
.kadence-mobile-nav-wrap ul.menu > li {
	border-color: rgba(255, 255, 255, .12) !important;
}

/* Icône hamburger : blanche */
#masthead .mobile-toggle-btn,
#masthead .header-mobile-bar-toggle {
	color: #ffffff;
}

#masthead .mobile-toggle-btn .toggle-inner > span,
#masthead .header-mobile-bar-toggle .toggle-inner > span {
	background: #ffffff;
}

#masthead .mobile-toggle-btn svg,
#masthead .header-mobile-bar-toggle svg {
	color: #ffffff;
	fill: #ffffff;
}

/* Bouton de fermeture du tiroir */
.kadence-mobile-nav .mobile-nav-close-btn,
.drawer-close-btn {
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. En-tête sticky
   -------------------------------------------------------------------------- */

#masthead {
	transition: background .25s ease, box-shadow .25s ease;
}

/* Kadence ajoute .item-is-stuck au masthead quand on défile */
#masthead.item-is-stuck {
	background: var(--kc-terracotta) !important;
	box-shadow: none !important;
	border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   8. Menu logo centré — style split navigation (Figma)
   -------------------------------------------------------------------------- */

/*
   PRÉREQUIS (à faire dans Kadence Header Builder) :
   Apparence > Personnaliser > En-tête > Ligne principale
   → Disposition : 3 colonnes [Navigation Gauche] [Logo] [Navigation Droite]
   → Colonne gauche  : Navigation (menu "Nav Gauche" : Accueil, Mes services, E-boutique)
   → Colonne centre  : Logo
   → Colonne droite  : Navigation (menu "Nav Droite" : Ressources, Blog, Contact)
*/

/* Overflow visible sur toute la pile header pour que le cercle logo déborde */
#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 .site-container,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-section,
#masthead .site-header-item,
#masthead .header-main-layout-inner {
	overflow: visible !important;
}

/* Rangée principale : hauteur nette, sans marge basse.
   Elle sert de repère de position au cercle logo. */
#masthead .header-main-layout-inner {
	min-height: 76px;
	padding-bottom: 0;
}

#masthead .site-main-header-inner-wrap {
	position: relative;
}

/* Colonne centrale : réserve la largeur du cercle dans la grille,
   pour que les deux menus restent symétriques autour du logo. */
#masthead .site-header-main-section-center {
	min-width: 140px;
}

/* Le bloc marque sort du flux : son centre tombe pile sur la limite
   basse du header, donc le cercle est à cheval sur la première section. */
#masthead .site-header-main-section-center .site-branding,
#masthead .site-header-main-section-center .site-header-item[data-section="title_tagline"] {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	z-index: 120;
}

/* Logo : médaillon plein, exactement la teinte de la barre.
   Le fichier du logo est un PNG carré à fond transparent, le monogramme
   y est déjà centré : rien à recaler côté CSS. */
#masthead .custom-logo-link,
#masthead .site-branding > a {
	background: var(--kc-terracotta);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: var(--kc-terracotta);
	box-shadow: 0 6px 22px rgba(103, 76, 60, 0.18);
	overflow: hidden;
	margin: 0 !important;
	padding: 0;
	flex-shrink: 0;
	transition: box-shadow 0.25s ease;
}

#masthead .custom-logo-link:hover,
#masthead .site-branding > a:hover {
	box-shadow: 0 10px 28px rgba(103, 76, 60, 0.32);
}

/* Image logo à l'intérieur du cercle */
#masthead .custom-logo-link img,
#masthead .custom-logo {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin-top: 0 !important;
}

/* Navigation secondaire (droite) — mêmes couleurs que la primaire */
#masthead .secondary-navigation a,
#masthead .secondary-menu-container ul.menu > li > a {
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: 0.01em;
}

#masthead .secondary-navigation a:hover,
#masthead .secondary-menu-container ul.menu > li > a:hover {
	color: var(--kc-creme);
}

#masthead .secondary-menu-container ul.menu > li.current-menu-item > a,
#masthead .secondary-menu-container ul.menu > li.current-menu-ancestor > a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}

/* Espacement symétrique des items de navigation autour du logo */
#masthead .header-navigation .menu-item > a,
#masthead .secondary-navigation .menu-item > a {
	padding: 0 16px;
}

/* Alignement vertical des deux blocs nav sur la hauteur du header */
#masthead .header-navigation {
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   7. Responsive — Mobile (≤ 1024 px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Cercle logo un peu plus petit, toujours à cheval sur la limite */
	#masthead .custom-logo-link,
	#masthead .site-branding > a {
		width: 88px;
		height: 88px;
	}

	#masthead .custom-logo-link img,
	#masthead .custom-logo {
		max-height: 58px !important;
	}

	#masthead .site-header-main-section-center {
		min-width: 110px;
	}

	/* Rangée principale plus resserrée */
	#masthead .header-main-layout-inner {
		min-height: 64px;
	}
}