/* ==========================================================================
   En-tête et menu principal : charte sombre B2
   Source unique, chargée sur tout le site par mu-plugins/dh-menu-b2.php.
   Maquettes : « Lexique SEO - B2 », « Code HTTP 301 - B2 », « Article - RRF - B2 ».

   Cause du menu blanc : le Customizer GeneratePress règle le fond de l'en-tête
   sur --base-3 (blanc) et le CSS additionnel du thème enfant (post 2662) peignait
   un menu clair. Ce fichier remplace les deux : le HTML et le menu
   (Apparence > Menus) ne changent pas.

   Le préfixe #masthead (ou #generate-slideout-menu) suffit à passer devant les
   règles du thème : aucun !important.
   ========================================================================== */

/* Polices : les mêmes fichiers que les pages B2 (déjà en cache sur celles-ci). */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(../vendor/fonts/ibm-plex-sans-400-600-normal-latin.v2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts-condensed/ibm-plex-sans-condensed-600-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--dhm-fond: #101A1C;
	--dhm-surface: #1A282B;
	--dhm-filet: #1F2E31;
	--dhm-filet-fort: #2C3D40;
	--dhm-texte: #E6EBEA;
	--dhm-discret: #B4C0BE;
	--dhm-accent: #8FC5BE;
	--dhm-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--dhm-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
	--dhm-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--dhm-haut: 68px;
}

html { scroll-padding-top: calc(var(--dhm-haut) + 16px); }

/* ---- Barre : collante, fond sombre, filet bas ---------------------------- */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dhm-fond);
	color: var(--dhm-texte);
	border-bottom: 1px solid var(--dhm-filet);
}
.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead.site-header { top: 46px; } }

#masthead .inside-header {
	box-sizing: border-box;
	max-width: 1520px;
	height: var(--dhm-haut);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
}

/* ---- Logo : nom en condensée + mention en mono (maquette) ---------------- */
#masthead .site-branding { margin: 0; }
#masthead .main-title { margin: 0; font-size: inherit; line-height: 1; }
#masthead .main-title a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	white-space: nowrap;
	font: 600 21px/1.2 var(--dhm-cond);
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--dhm-texte);
	text-decoration: none;
	transition: color .15s;
}
#masthead .main-title a::after {
	content: "SEO\0000B7DATA\0000B7GEO\0000B7IA";
	content: "SEO\0000B7DATA\0000B7GEO\0000B7IA" / "";
	font: 400 11px/1 var(--dhm-mono);
	letter-spacing: 0;
	color: var(--dhm-accent);
}
#masthead .main-title a:hover { color: var(--dhm-accent); }
@media (max-width: 520px) { #masthead .main-title a::after { display: none; } }

/* ---- Monogramme DH (logo blanc et teal, fait pour la barre sombre) ------
   Posé directement sur le fond #101A1C, sans pastille. Marges verticales
   négatives : le monogramme (30 px) ne grandit pas la ligne du nom (25 px),
   le texte reste centré dans la barre comme avant. */
#masthead .main-title a .dhm-monogramme {
	flex: 0 0 auto;
	align-self: center;
	display: block;
	width: 48px;
	height: 30px;
	margin: -3px -2px -3px 0;
}
@media (max-width: 380px) {
	#masthead .main-title a .dhm-monogramme { width: 40px; height: 25px; margin: -1px -2px -1px 0; }
	#masthead .main-title a { gap: 10px; }
}

/* ---- Navigation bureau --------------------------------------------------- */
#masthead #site-navigation {
	background: none;
	width: auto;
	margin-left: auto;
}
#masthead #site-navigation .inside-navigation {
	max-width: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	gap: 8px;
	background: none;
}
#masthead .main-nav ul li > a {
	padding: 0 16px;
	font: 400 14px/44px var(--dhm-sans);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--dhm-discret);
	background: none;
	transition: color .15s;
}
#masthead .main-nav ul li.menu-item > a:hover,
#masthead .main-nav ul li.menu-item.sfHover > a {
	color: var(--dhm-accent);
	background: none;
}
/* Page courante : texte clair + filet teal (la couleur seule ne suffit pas, WCAG 1.4.1) */
#masthead .main-nav ul li.current-menu-item > a,
#masthead .main-nav ul li.current-menu-ancestor > a,
#masthead .main-nav ul li.current_page_item > a {
	color: var(--dhm-texte);
	background: none;
	text-decoration: underline;
	text-decoration-color: var(--dhm-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
#masthead .main-nav ul li.menu-item.current-menu-item > a:hover,
#masthead .main-nav ul li.menu-item.current-menu-ancestor > a:hover { color: var(--dhm-accent); }

/* Flèche du sous-menu */
#masthead .main-nav ul li.menu-item-has-children > a { padding-right: 0; }
#masthead .dropdown-menu-toggle { padding: 0 16px 0 6px; }

/* Bouton « Diagnostic offert » (élément du menu : id 368, ou classe CSS « cta ») */
#masthead .main-nav ul li.menu-item-368,
#masthead .main-nav ul li.cta { display: flex; align-items: center; margin-left: 8px; }
#masthead .main-nav ul li.menu-item-368 > a,
#masthead .main-nav ul li.cta > a {
	padding: 11px 16px;
	font: 600 14px/1.2 var(--dhm-sans);
	color: var(--dhm-fond);
	background: var(--dhm-texte);
	text-decoration: none;
	transition: background .15s;
}
#masthead .main-nav ul li.menu-item-368.menu-item > a:hover,
#masthead .main-nav ul li.cta.menu-item > a:hover {
	color: var(--dhm-fond);
	background: var(--dhm-accent);
}

/* ---- Sous-menu (Blog) ---------------------------------------------------- */
#masthead .main-navigation ul ul {
	width: 230px;
	padding: 0;
	background: var(--dhm-surface);
	border: 1px solid var(--dhm-filet-fort);
	border-radius: 0;
	box-shadow: 0 16px 32px rgb(0 0 0 / .35);
}
#masthead .main-nav ul ul li > a {
	padding: 10px 16px;
	font: 400 14px/1.35 var(--dhm-sans);
	white-space: normal;
	color: var(--dhm-discret);
	background: none;
}
#masthead .main-nav ul ul li.menu-item > a:hover,
#masthead .main-nav ul ul li.menu-item.sfHover > a {
	color: var(--dhm-fond);
	background: var(--dhm-accent);
}
#masthead .main-nav ul ul li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
#masthead .main-nav ul ul .dropdown-menu-toggle { padding: 0 8px; margin: 0; height: auto; float: none; }
#masthead .main-nav ul ul li.current-menu-item > a { color: var(--dhm-accent); background: none; text-decoration: none; }
#masthead .main-nav ul ul li.current-menu-item.menu-item > a:hover { color: var(--dhm-fond); background: var(--dhm-accent); }

/* ---- Recherche et boutons de la barre ------------------------------------ */
#masthead .menu-bar-items,
#masthead .menu-bar-item > a { color: var(--dhm-discret); background: none; }
#masthead .menu-bar-item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	line-height: 1;
	text-decoration: none;
	transition: color .15s;
}
#masthead .menu-bar-item:hover > a,
#masthead .menu-bar-item > a:hover { color: var(--dhm-accent); background: none; }

/* ---- Focus clavier : visible partout ------------------------------------- */
#masthead a:focus-visible,
#masthead button:focus-visible,
#generate-slideout-menu a:focus-visible,
#generate-slideout-menu button:focus-visible,
#gp-search input:focus-visible,
#gp-search button:focus-visible {
	outline: 2px solid var(--dhm-accent);
	outline-offset: 3px;
}

/* ---- Menu mobile (bouton et panneau latéral GeneratePress) ---------------- */
@media (max-width: 768px) {
	#masthead .inside-header { flex-wrap: nowrap; gap: 0; }
	#masthead #site-navigation { flex: 0 0 0; width: 0; margin: 0; overflow: hidden; }
	#masthead #mobile-menu-control-wrapper {
		display: flex;
		flex-wrap: nowrap;
		width: auto;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		background: none;
	}
	#masthead #mobile-menu-control-wrapper .menu-bar-items { font-size: 18px; }
	#masthead #mobile-menu-control-wrapper .menu-toggle {
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font: 400 18px/1 var(--dhm-mono);
		color: var(--dhm-texte);
		background: none;
		border: 1px solid var(--dhm-filet-fort);
		border-radius: 0;
	}
	#masthead #mobile-menu-control-wrapper .menu-toggle:hover { color: var(--dhm-accent); border-color: var(--dhm-accent); background: none; }
}

#generate-slideout-menu.main-navigation {
	background: var(--dhm-fond);
	border-left: 1px solid var(--dhm-filet);
}
#generate-slideout-menu .slideout-exit {
	color: var(--dhm-texte);
	background: none;
}
#generate-slideout-menu .slideout-exit:hover { color: var(--dhm-accent); background: none; }
#generate-slideout-menu.main-navigation .main-nav ul li > a {
	padding: 12px 20px;
	font: 600 26px/1.2 var(--dhm-cond);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dhm-texte);
	background: none;
}
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item:hover > a,
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item.sfHover > a,
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item > a:focus {
	color: var(--dhm-accent);
	background: none;
}
#generate-slideout-menu.main-navigation .main-nav ul li.current-menu-item > a { color: var(--dhm-accent); background: none; }
#generate-slideout-menu.main-navigation ul ul { background: none; }
#generate-slideout-menu.main-navigation .main-nav ul ul li > a {
	padding: 8px 20px 8px 32px;
	font: 400 17px/1.35 var(--dhm-sans);
	color: var(--dhm-discret);
	background: none;
}
#generate-slideout-menu.main-navigation .main-nav ul ul li.menu-item:hover > a,
#generate-slideout-menu.main-navigation .main-nav ul ul li.menu-item > a:focus { color: var(--dhm-accent); background: none; }
#generate-slideout-menu.main-navigation .main-nav ul ul li.current-menu-item > a { color: var(--dhm-accent); background: none; }
#generate-slideout-menu .dropdown-menu-toggle,
#generate-slideout-menu.do-overlay .menu-item-has-children .dropdown-menu-toggle { color: var(--dhm-discret); border-color: var(--dhm-filet-fort); }
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item-368 > a,
#generate-slideout-menu.main-navigation .main-nav ul li.cta > a {
	display: block;
	margin: 20px 20px 0;
	padding: 12px 16px;
	font: 600 16px/1.2 var(--dhm-sans);
	text-align: center;
	color: var(--dhm-fond);
	background: var(--dhm-accent);
}
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item-368.menu-item:hover > a,
#generate-slideout-menu.main-navigation .main-nav ul li.cta.menu-item:hover > a,
#generate-slideout-menu.main-navigation .main-nav ul li.menu-item-368.menu-item > a:focus {
	color: var(--dhm-fond);
	background: var(--dhm-texte);
}

/* ---- Fenêtre de recherche ------------------------------------------------ */
#gp-search .gp-modal__overlay { background: rgb(16 26 28 / .94); }
#gp-search .search-modal-fields { display: flex; background: var(--dhm-surface); border: 1px solid var(--dhm-filet-fort); }
#gp-search .search-modal-fields .search-field {
	flex: 1 1 auto;
	min-width: 0;
	font: 400 18px/1.4 var(--dhm-sans);
	color: var(--dhm-texte);
	background: var(--dhm-surface);
	border: 0;
	border-radius: 0;
}
#gp-search .search-modal-fields .search-field::placeholder { color: var(--dhm-discret); opacity: 1; }
#gp-search .search-modal-fields button { color: var(--dhm-texte); background: var(--dhm-surface); border: 0; }
#gp-search .search-modal-fields button:hover { color: var(--dhm-accent); background: var(--dhm-surface); }

/* ---- Compatibilité : éléments collants des gabarits, décalés sous la barre ---- */
body .fx-progress { z-index: 101; }
body .fx-side { top: calc(var(--dhm-haut) + 24px); max-height: calc(100vh - var(--dhm-haut) - 48px); }
body .lh-side { top: calc(var(--dhm-haut) + 20px); }
@media (min-width: 901px) { body .bs-barre { top: var(--dhm-haut); } }

@media (prefers-reduced-motion: reduce) {
	#masthead *, #generate-slideout-menu * { transition: none; }
}