/**
 * Header — signature Bitelo : barre de navigation « pilule » flottante
 * (fond gris clair, très arrondie, détachée du bord), appliquée à la
 * structure native d'Extra (#main-header-wrapper > #main-header).
 */

/* ---- Barre supérieure : fine, blanche, bien visible ----
   Contient le menu secondaire (La société, Plan de site) et le
   sélecteur de langue WPML (Français / English). */
.bt-theme #top-header {
	display: block !important;
	background: var(--bt-color-surface) !important;
	border-bottom: 1px solid var(--bt-color-border);
	font-size: var(--bt-font-size-sm);
	box-shadow: none;
	padding: 0;
}

.bt-theme #top-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	max-width: 1720px;
	width: calc(100% - 2rem);
}

.bt-theme #et-secondary-nav {
	display: flex !important;
	align-items: center;
}

.bt-theme #et-secondary-nav li {
	text-transform: none;
}

/* Liens de la barre supérieure : la couleur gris foncé vient de la
   base (option Extra secondary_nav_text_color, voir SQL de migration).
   Ici uniquement l'espacement (resserré) et le survol bleu. */
.bt-theme #et-secondary-menu > li {
	margin: 0 !important;
}

.bt-theme #et-secondary-menu > li > a {
	padding: 0.45rem 0.45rem;
	transition: color var(--bt-transition-fast);
}

body.bt-theme #top-header #et-secondary-menu > li > a:hover,
body.bt-theme #top-header #et-secondary-nav a:hover {
	color: var(--bt-color-accent) !important;
}

.bt-theme #et-info {
	color: var(--bt-color-text-muted);
}

/* Sélecteur de langue WPML : simple et aligné comme les autres liens
   de la barre (drapeau arrondi + libellé + chevron, sans pastille) */
.bt-theme #et-secondary-nav #et-secondary-menu > li.wpml-ls-item > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 0;
	line-height: 1;
}

.bt-theme #et-secondary-nav .sub-menu li a::after {
	content: none !important;
}

.bt-theme #et-secondary-nav #et-secondary-menu > li.wpml-ls-item > a::after {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.55;
}

.bt-theme #et-secondary-nav .wpml-ls-flag {
	width: 18px;
	height: 12px;
	border-radius: 2px;
	margin: 0 !important;
	vertical-align: middle;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

/* Élément English du menu déroulant : drapeau + libellé alignés */
.bt-theme #et-secondary-nav .wpml-ls-item .sub-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bt-theme #et-secondary-nav .sub-menu li a {
	color: var(--bt-color-text);
	padding: 0.55rem 1rem;
	display: block;
	white-space: nowrap;
}

.bt-theme #et-secondary-nav .sub-menu li a:hover {
	color: var(--bt-color-accent);
}

.bt-theme #et-secondary-nav .sub-menu {
	background: var(--bt-color-surface);
	border: 0 !important;
	border-radius: var(--bt-radius-md);
	box-shadow: var(--bt-shadow-lg);
	padding: 6px;
	overflow: hidden;
}

/* Points décoratifs d'Extra sous l'élément survolé : supprimés */
.bt-theme #et-secondary-nav li a::before,
.bt-theme #et-secondary-menu > li > a::before {
	content: none !important;
}

/* Barre « tendance » */
.bt-theme #et-trending-label {
	color: #ffffff !important;
	background: var(--bt-color-accent);
	border-radius: var(--bt-radius-pill);
	padding: 0.25rem 0.8rem;
	font-weight: 600;
}

.bt-theme .et-trending-post a {
	color: var(--bt-color-text-muted);
}

.bt-theme .et-trending-post a:hover {
	color: var(--bt-color-accent);
}

/* ---- Header principal : une seule pilule, comme Bitelo ----
   Logo à gauche à l'intérieur de la pilule, menu à droite.
   Menu fixé au scroll : quand la page défile (classe bt-scrolled posée
   par theme.js), la pilule passe en position: fixed en haut de l'écran —
   méthode insensible aux styles des parents, contrairement à sticky.
   Le fixed-nav JS d'Extra est désactivé (setup.php). */
.bt-theme #main-header-wrapper {
	background: transparent;
	box-shadow: none;
}

.bt-theme #main-header {
	width: calc(100% - 2rem);
	max-width: 1720px;
	margin: 1rem auto;
	background: var(--bt-color-surface-grey) !important;
	border-radius: var(--bt-radius-pill);
	box-shadow: var(--bt-shadow-sm);
	padding: 8px 34px;
	transition: box-shadow var(--bt-transition-normal), background-color var(--bt-transition-normal);
}

/* Entrée au chargement (classe posée puis retirée par theme.js) :
   la pilule descend en fondu, la barre supérieure apparaît en fondu */
@keyframes bt-header-enter {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bt-fade-enter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.bt-theme #main-header.bt-enter {
	animation: bt-header-enter 500ms ease both;
}

.bt-theme #top-header.bt-enter {
	animation: bt-fade-enter 450ms ease both;
}

/* Logo et menu côte à côte sur UNE seule ligne, centrés verticalement.
   Le conteneur utilise toute la largeur de la pilule et ne wrap jamais. */
.bt-theme #main-header .container {
	align-items: center;
	flex-wrap: nowrap;
	max-width: 100%;
	width: 100%;
	gap: 1.5rem;
}

/* Logo : emblème ANEP original (image légère) + texte rendu en CSS,
   séparés par un filet magenta — comme la maquette validée */
.bt-theme #main-header .logo {
	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	height: auto !important;
	margin: 0 !important;
	flex-shrink: 0;
	align-self: center;
	transition: opacity var(--bt-transition-fast);
}

.bt-theme #main-header .logo:hover {
	opacity: 0.85;
}

.bt-theme #logo {
	width: auto;
	height: 44px !important;
	display: block;
}

.bt-theme #main-header .logo::after {
	order: 2; /* Extra donne un order à l'image : le texte doit rester après */
	content: "TÉLÉCOMMUNICATION & MIGRATION NUMÉRIQUE";
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--bt-color-text-muted);
	padding-left: 14px;
	border-left: 2px solid #a8348a;
	line-height: 1.4;
	white-space: nowrap;
}

/* Menu : occupe l'espace restant, items centrés entre le logo et le
   bouton Contact (marges auto de part et d'autre du groupe central) */
.bt-theme #et-navigation {
	align-items: center;
	align-self: center;
	flex: 1;
	min-width: 0;
}

.bt-theme #et-navigation > ul {
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;
}

/* Casse normale (Extra force les majuscules, parfois au niveau du lien
   via le CSS regénéré du customizer — on couvre li ET a) */
.bt-theme #et-navigation > ul > li,
.bt-theme #et-navigation > ul > li > a {
	text-transform: none !important;
	margin: 0 13px;
}

/* Menu groupé à droite, collé au bouton Contact */
.bt-theme ul#et-menu > li:first-child {
	margin-left: auto;
}

.bt-theme ul#et-menu > li:last-child {
	margin-left: 13px !important;
}

.bt-theme #et-navigation > ul > li > a {
	padding: 26px 0 !important;
	white-space: nowrap;
}

/* Dernier élément du menu (Contact) : bouton pilule bleu à droite,
   comme le « Get Started » de Bitelo */
.bt-theme ul#et-menu > li:last-child {
	margin-right: 0;
}

.bt-theme #et-navigation ul#et-menu > li:last-child > a {
	background: var(--bt-color-accent);
	color: #ffffff !important;
	padding: 13px 28px !important;
	border-radius: var(--bt-radius-pill);
	font-weight: 500;
	transition: background-color var(--bt-transition-fast);
}

.bt-theme #et-navigation ul#et-menu > li:last-child > a:hover {
	background: var(--bt-color-accent-hover);
	color: #ffffff !important;
}

/* Écrans intermédiaires : tout doit tenir sur une ligne */
@media (max-width: 1280px) {
	.bt-theme #main-header .logo {
		height: 38px !important;
	}

	.bt-theme #et-navigation > ul > li {
		margin: 0 8px;
	}

	.bt-theme #et-navigation > ul > li > a {
		font-size: 13px;
	}

	.bt-theme ul#et-menu > li:last-child > a {
		padding: 11px 20px !important;
	}
}

/* Suppression de la barre native d'Extra sous les liens du menu
   (survol et élément actif) — l'état est signalé par la couleur bleue */
.bt-theme #et-navigation > ul > li > a::before {
	display: none !important;
}

/* État scrollé : la pilule se détache et se fixe en haut de l'écran,
   en blanc avec ombre portée, avec une petite animation d'entrée */
.bt-theme.bt-scrolled #main-header {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	max-width: 1720px;
	margin: 0;
	z-index: 9999;
	background: var(--bt-color-surface) !important;
	box-shadow: var(--bt-shadow-lg);
	animation: bt-header-drop var(--bt-transition-normal) ease both;
}

@keyframes bt-header-drop {
	from {
		transform: translateX(-50%) translateY(-12px);
		opacity: 0.4;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

/* Sous la barre d'admin WordPress, décaler la pilule fixée */
.bt-theme.admin-bar.bt-scrolled #main-header {
	top: 44px;
}

/* Bouton du menu mobile, discret dans la pilule */
.bt-theme .et_mobile_nav_menu {
	background: transparent;
	align-self: center;
}

/* ---- Recherche ---- */
.bt-theme .et-top-search .et-search-field,
.bt-theme .et-search-form-container .et-search-field {
	background-color: var(--bt-color-surface) !important;
	border: 1px solid var(--bt-color-border-strong);
	border-radius: var(--bt-radius-pill);
	color: var(--bt-color-text) !important;
	caret-color: var(--bt-color-text);
	padding: 0.5rem 1.2rem;
	transition: border-color var(--bt-transition-fast), box-shadow var(--bt-transition-fast);
}

.bt-theme .et-top-search .et-search-field::placeholder,
.bt-theme .et-search-form-container .et-search-field::placeholder {
	color: var(--bt-color-text-muted) !important;
	opacity: 1;
}

.bt-theme .et-top-search .et-search-field:focus,
.bt-theme .et-search-form-container .et-search-field:focus {
	border-color: var(--bt-color-accent);
	box-shadow: var(--bt-shadow-focus);
	outline: none;
}

.bt-theme .et-top-search button,
.bt-theme .et-search-form-container button {
	color: var(--bt-color-text);
	transition: color var(--bt-transition-fast);
}

.bt-theme .et-top-search button:hover,
.bt-theme .et-search-form-container button:hover {
	color: var(--bt-color-accent);
}

/* Icônes sociales de la barre supérieure : couleurs de marque
   (l'option Extra ne permet qu'une couleur unique pour tous) */
.bt-theme #top-header .et-extra-icon-youtube {
	background-color: #c4302b !important;
}

.bt-theme #top-header .et-extra-icon-linkedin {
	background-color: #0a66c2 !important;
}

.bt-theme #top-header .et-extra-icon-youtube:hover,
.bt-theme #top-header .et-extra-icon-linkedin:hover {
	opacity: 0.85;
}

/* Panier header (si WooCommerce actif un jour) */
.bt-theme .et-top-cart-total {
	background: var(--bt-color-accent);
	color: #ffffff;
	border-radius: var(--bt-radius-pill);
	font-size: var(--bt-font-size-xs);
	font-weight: 700;
}