/**
 * SecGram — header.css
 * En-tête / navigation : polish de l'en-tête Divi standard.
 *
 * Si l'en-tête est reconstruit dans le Theme Builder, ces règles
 * restent inertes (sélecteurs de l'en-tête classique Divi) et les
 * utilitaires .sg-* de components.css prennent le relais.
 *
 * !important documentés (2) : Divi applique la couleur et le padding
 * des liens de menu via des réglages inline très spécifiques ; le CTA
 * de navigation doit pouvoir les surcharger. Voir docs/DIVI.md.
 */

/* Ombre discrète quand l'en-tête devient fixe (repère de position,
   sans transition de hauteur coûteuse en CLS). */
.et-fixed-header#main-header {
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* ---- État actif de la navigation ------------------------------------ */
/* Soulignement : repère visible, robuste, sans layout shift. */
#top-menu :is(li.current-menu-item, li.current-menu-ancestor) > a {
	color: var(--sg-color-primary-strong);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Transition douce sur les liens du menu. */
#top-menu a {
	transition: color var(--sg-transition-fast), opacity var(--sg-transition-fast);
}

/* ---- CTA de navigation ---------------------------------------------- */
/* Ajouter la classe CSS « sg-nav-cta » à l'élément de menu
   (Apparence → Menus → Classes CSS) — ex. « Parler de votre projet ». */
#top-menu li.sg-nav-cta > a {
	background: var(--sg-color-accent);
	color: var(--sg-color-ink) !important; /* !important : Divi force la couleur des liens de menu en inline */
	padding: 0.6em 1.3em !important;       /* !important : Divi force un padding-bottom inline sur #top-menu li a */
	border-radius: var(--sg-radius-sm);
	font-weight: 700;
	transition: background-color var(--sg-transition-fast);
}

#top-menu li.sg-nav-cta > a::after {
	content: "\2192";
	margin-inline-start: 0.45em;
}

#top-menu li.sg-nav-cta > a:hover {
	background: var(--sg-color-accent-hover);
	opacity: 1;
}

#top-menu li.sg-nav-cta > a:focus-visible {
	outline: 3px solid var(--sg-color-focus);
	outline-offset: 3px;
}

/* ---- Menu mobile Divi ------------------------------------------------ */
/* Panneau : lisible, net, sans transparence hasardeuse. */
.et_mobile_menu {
	border-top: 3px solid var(--sg-color-primary);
	box-shadow: var(--sg-shadow-md);
	padding-block: var(--sg-space-xs);
}

.et_mobile_menu li a {
	color: var(--sg-color-ink);
	border-color: var(--sg-color-border);
	font-size: 1rem;
}

.et_mobile_menu li a:hover {
	background: var(--sg-color-surface-alt);
	opacity: 1;
}

/* État actif dans le menu mobile. */
.et_mobile_menu :is(li.current-menu-item, li.current-menu-ancestor) > a {
	color: var(--sg-color-primary-strong);
	font-weight: 600;
}

/* Hamburger : curseur + focus (le focus-visible renforcé est dans
   divi-overrides.css). */
.mobile_menu_bar {
	cursor: pointer;
}

/* ---- Variante en-tête sombre (identité SecGram) ---------------------- */
/* Activée par défaut via la classe body « sg-dark-header » (bascule
   Customizer → SecGram). Les réglages de couleurs de Divi (Theme
   Options), générés après nos feuilles, gardent le dernier mot. */
body.sg-dark-header #main-header,
body.sg-dark-header #top-header {
	background-color: var(--sg-color-dark);
	box-shadow: none;
	border-bottom: 1px solid var(--sg-color-dark-border);
}

body.sg-dark-header.et-fixed-header #main-header {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.sg-dark-header #top-menu > li > a {
	color: var(--sg-color-on-dark);
}

body.sg-dark-header #top-menu :is(li.current-menu-item, li.current-menu-ancestor) > a {
	color: var(--sg-color-accent);
	text-decoration-color: var(--sg-color-accent);
}

/* Logo texte Divi (si aucun logo image n'est défini). */
body.sg-dark-header #logo,
body.sg-dark-header #et-top-navigation .logo_container {
	color: var(--sg-color-on-dark);
}

/* Hamburger et panneau mobile en sombre. */
body.sg-dark-header .mobile_menu_bar::before,
body.sg-dark-header .mobile_menu_bar {
	color: var(--sg-color-on-dark);
}

body.sg-dark-header .et_mobile_menu {
	background-color: var(--sg-color-dark-panel);
	border-top-color: var(--sg-color-accent);
}

body.sg-dark-header .et_mobile_menu li a {
	color: var(--sg-color-on-dark);
	border-color: var(--sg-color-dark-border);
}

body.sg-dark-header .et_mobile_menu li a:hover {
	background: var(--sg-color-dark);
}

body.sg-dark-header .et_mobile_menu :is(li.current-menu-item, li.current-menu-ancestor) > a {
	color: var(--sg-color-accent);
}