/* ==========================================================================
   Armorik Sticky Menu — trois états pilotés par le JS via des classes body :

   body.armk-menu-hero  : #intro-bloc encore à l'écran → header transparent,
                          menu et logo en blanc simple (lisible sur le héro).
   body.armk-menu-fixed : l'intro est passée → header toujours transparent,
                          menu et logo en mode exclusion : leurs couleurs
                          s'inversent selon les blocs traversés.
   body.armk-menu-solid : aplat blanc légèrement translucide, menu et logo
                          bleu nuit (pages « solid_pages » une fois l'intro
                          passée, toutes les autres pages dès le scroll).

   Le logo garde une hauteur FIXE en pixels dans tous les états (variable
   --armk-logo-h posée par le JS) : aucun héritage Divi / Divi Pixel ne
   peut le faire rétrécir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header fixé par le plugin
   --------------------------------------------------------------------------
   Le mécanisme et-fixed-header de Divi est désactivé par le JS (retrait de
   la classe et_fixed_nav du body avant l'init de Divi) : plus aucun
   rétrécissement ni repositionnement piloté par Divi. Le header est fixé
   ici, une fois pour toutes. */

#main-header {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	width: 100%;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Barre d'admin WordPress */
body.admin-bar #main-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #main-header {
		top: 46px !important;
	}
}

/* --------------------------------------------------------------------------
   Pages avec bloc d'intro : le header survole le contenu
   -------------------------------------------------------------------------- */

body.armk-has-hero #page-container {
	padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Fond transparent dans les deux états
   --------------------------------------------------------------------------
   Quoi que fasse Divi (classe .et-fixed-header, CSS custom
   « background: #0E102D !important »…) : la spécificité
   body.classe + #id + .classe l'emporte. */

body.armk-menu-hero #main-header,
body.armk-menu-hero #main-header.et-fixed-header,
body.armk-menu-fixed #main-header,
body.armk-menu-fixed #main-header.et-fixed-header {
	background: transparent !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   État héro : blanc simple (pas de blend sur le héro)
   État fixe : exclusion — le blend est posé sur le header lui-même (un
   élément fixed crée son propre stacking context : un enfant ne peut pas
   se fondre avec la page, le parent si). Desktop uniquement : sur mobile
   le menu déroulant à fond blanc deviendrait illisible.
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
	body.armk-menu-fixed #main-header {
		mix-blend-mode: exclusion;
	}
}

/* Mobile : pas d'exclusion possible → fond bleu nuit une fois l'intro
   passée, pour garder le menu lisible sur les blocs clairs. */
@media (max-width: 980px) {
	body.armk-menu-fixed #main-header,
	body.armk-menu-fixed #main-header.et-fixed-header {
		background: #0e102d !important;
	}
}

/* --------------------------------------------------------------------------
   Texte du menu et logo en blanc dans les deux états
   --------------------------------------------------------------------------
   Blanc lisible sur le héro ; en mode exclusion, le blanc est aussi la
   bonne base : il s'inverse proprement sur les fonds clairs. */

body.armk-menu-hero #main-header #top-menu li a,
body.armk-menu-fixed #main-header #top-menu li a {
	color: #ffffff !important;
}

body.armk-menu-hero #main-header #top-menu li a:hover,
body.armk-menu-fixed #main-header #top-menu li a:hover {
	color: #ffffff !important;
	opacity: 0.7;
}

/* Icône du menu mobile (hamburger) */
body.armk-menu-hero #main-header .mobile_menu_bar::before,
body.armk-menu-fixed #main-header .mobile_menu_bar::before,
body.armk-menu-hero #main-header .select_page,
body.armk-menu-fixed #main-header .select_page {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   État aplat : fond blanc translucide, menu et logo bleu nuit
   --------------------------------------------------------------------------
   Opacité réglable via --armk-solid-bg. Le logo (blanc) est assombri par
   filtre, sans fichier supplémentaire. */

body.armk-menu-solid #main-header,
body.armk-menu-solid #main-header.et-fixed-header {
	background: var(--armk-solid-bg, rgba(255, 255, 255, 0.92)) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(14, 16, 45, 0.08) !important;
	mix-blend-mode: normal !important;
}

body.armk-menu-solid #main-header #top-menu li a,
body.armk-menu-solid #main-header #top-menu li a:hover {
	color: #0e102d !important;
}

body.armk-menu-solid #main-header #top-menu li a:hover {
	opacity: 0.7;
}

body.armk-menu-solid #main-header .mobile_menu_bar::before,
body.armk-menu-solid #main-header .select_page {
	color: #0e102d !important;
}

body.armk-menu-solid #main-header #logo {
	filter: brightness(0);
}

/* --------------------------------------------------------------------------
   Logo : hauteur fixe, identique dans tous les états
   --------------------------------------------------------------------------
   Hauteur en px (variable posée par le JS, réglable via le filtre
   armk_sticky_menu_settings) : insensible aux pourcentages hérités du
   header Divi (style split, et-fixed-header, Divi Pixel…). */

body.armk-has-hero #main-header #logo,
body.armk-menu-fixed #main-header #logo,
body.armk-menu-solid #main-header #logo {
	height: var(--armk-logo-h, 90px) !important;
	max-height: none !important;
	width: auto !important;
	max-width: none !important;
}

/* Header compact en aplat (desktop) : 137 → ~74 px, logo 90 → 56 px,
   centré sur la ligne du menu. Réglable via --armk-logo-h-compact et
   --armk-pad-compact. */
@media (min-width: 981px) {
	#main-header #et-top-navigation,
	#main-header #top-menu > li > a,
	#main-header .centered-inline-logo-wrap {
		transition: padding 0.35s ease, height 0.35s ease, margin 0.35s ease;
	}

	body.armk-menu-solid #main-header #et-top-navigation {
		padding-top: var(--armk-pad-compact, 30px) !important;
	}

	body.armk-menu-solid #main-header #top-menu > li > a {
		padding-bottom: var(--armk-pad-compact, 30px) !important;
	}

	body.armk-menu-solid.et_header_style_split #main-header .centered-inline-logo-wrap {
		height: var(--armk-logo-h-compact, 56px) !important;
		margin-top: -20px !important;
		margin-bottom: -20px !important;
	}

	body.armk-menu-solid #main-header .logo_container {
		max-height: none !important;
	}

	body.armk-menu-solid #main-header #logo {
		height: var(--armk-logo-h-compact, 56px) !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile / tablette (≤ 980 px) : logo à gauche, burger à droite
   --------------------------------------------------------------------------
   Le header « split » de Divi centre le logo et affiche en dessous une barre
   « Sélectionner une page » : on la remplace par une ligne unique, et le
   menu déroulant passe en bleu nuit, liens blancs en capitales. */

@media (max-width: 980px) {
	#main-header .et_menu_container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
	}

	/* Le clearfix de Divi deviendrait un 3e élément flex */
	#main-header .et_menu_container::before,
	#main-header .et_menu_container::after {
		display: none !important;
	}

	#main-header .logo_container {
		position: relative !important;
		width: auto !important;
		height: auto !important;
		padding: 12px 0;
		text-align: left !important;
	}

	#main-header .logo_container .logo_helper {
		display: none;
	}

	body.armk-has-hero #main-header #logo,
	body.armk-menu-fixed #main-header #logo,
	body.armk-menu-solid #main-header #logo,
	#main-header #logo {
		height: var(--armk-logo-h-mobile, 56px) !important;
		max-height: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	#main-header #et-top-navigation {
		position: static;
		float: none;
		width: auto;
		padding: 0 !important;
	}

	#main-header #et_mobile_nav_menu {
		position: static;
		display: block;
		margin: 0 !important;
	}

	#main-header .mobile_nav,
	#main-header .mobile_nav.opened,
	#main-header .mobile_nav.closed {
		position: static;
		padding: 0 !important;
		background: transparent !important;
	}

	#main-header .select_page {
		display: none !important;
	}

	#main-header .mobile_menu_bar {
		position: static;
		display: block;
		padding: 0;
		line-height: 1;
	}

	#main-header .mobile_menu_bar::before {
		position: static;
		font-size: 36px;
		color: #ffffff !important;
	}

	/* Menu ouvert : barre et liste bleu nuit, pleine largeur */
	#main-header:has(.mobile_nav.opened) {
		background: #0e102d !important;
		mix-blend-mode: normal !important;
	}

	/* Aplat blanc + menu ouvert : retour au blanc sur le bleu nuit */
	body.armk-menu-solid #main-header:has(.mobile_nav.opened) .mobile_menu_bar::before {
		color: #ffffff !important;
	}

	body.armk-menu-solid #main-header:has(.mobile_nav.opened) #logo {
		filter: none;
	}

	#main-header #mobile_menu {
		position: absolute;
		top: 100%;
		left: 50%;
		width: 100vw;
		margin: 0;
		padding: 8px 5vw 24px;
		transform: translateX(-50%);
		border-top: 0;
		box-shadow: none;
		background: #0e102d !important;
	}

	#main-header #mobile_menu li a,
	#main-header #mobile_menu li li a {
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		background: transparent !important;
		color: #ffffff !important;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		opacity: 1;
	}

	#main-header #mobile_menu li:last-child > a {
		border-bottom: 0;
	}

	#main-header #mobile_menu li a:hover {
		background: transparent !important;
		opacity: 0.7;
	}
}