/**
 * Header du blog aligné sur celui du site principal (globalong.com).
 * Chargé après les CSS du site principal dans header.php pour pouvoir les surcharger.
 */

:root {
	--glob-purple: #81014c;
	--glob-pink: #db3056;
}

/*
 * Bandeau fixe : fond violet plein au lieu de transparent.
 * /css/main.css déclare ".default-page #header { background: var(--color-bg-menu) }",
 * variable définie seulement sur le site principal : sur le blog le fond était vide.
 * Même sélecteur, chargé après, pour le remplacer sans toucher aux variables globales.
 */
.default-page #header {
	background: var(--glob-purple);
	border-bottom: 1px solid var(--glob-pink);
	z-index: 20000;
}

/* Barre de contact au-dessus du menu */
#header-top-glob {
	background-color: #fff;
	margin: 0 -15px;
	padding: 10px;
	text-align: right;
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: normal;
}

#header-top-glob span {
	display: inline;
	padding: 0 20px;
	font-size: 18px;
	border-right: 2px solid var(--glob-pink);
}

#header-top-glob span:last-child {
	border-right: 0;
}

#header-top-glob a,
#header-top-glob a:hover,
#header-top-glob a:focus {
	color: var(--glob-pink);
}

/* Icônes Font Awesome 4 (le kit FA5 du site principal ne se charge pas sur le blog) */
#header-top-glob .fa {
	margin-right: 4px;
}

/* Logo */
#header .logo {
	padding: 15px 0;
	border-right: 1px solid #181818;
}

#header .logo img.normal {
	display: inline;
	width: 200px;
	height: auto;
}

#header .logo img.gray-logo {
	display: none;
}

/* Menu principal */
#header .navbar-nav > li {
	padding: 40px 14px 0;
}

#header .navbar-nav > li > a,
#header .navbar-default .navbar-nav > li > a {
	color: #fff;
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 0.7px;
	line-height: 20px;
	text-transform: uppercase;
}

#header .navbar-default .navbar-nav > li > a:hover,
#header .navbar-default .navbar-nav > li > a:focus {
	color: #fff;
	background-color: transparent;
	opacity: 0.8;
}

#header .navbar-nav > li.menu-contact {
	background-color: var(--glob-pink);
}

#header .navbar-nav > li.v-divider {
	padding: 40px 20px 0;
	border-left: 1px solid #2d2d2d;
}

/* Responsive : mêmes paliers que le site principal */
@media only screen and (max-width: 991px) {
	/* Bouton burger : barres blanches sur le fond violet (transparentes sinon) */
	#header .navbar-toggle .icon-bar {
		background-color: #fff;
	}
}

@media screen and (max-width: 850px) {
	/* mobile.css place ces icônes blanches à top:0, sur la barre de contact blanche :
	   on les descend dans la zone violette. !important requis pour surcharger mobile.css. */
	#mobile-member-icon {
		top: 41px !important;
	}
}

@media only screen and (max-width: 837px) {
	#header-top-glob span {
		font-size: 13px;
	}
}

@media only screen and (max-width: 700px) {
	#header-top-glob span {
		font-size: 9px;
	}
}

@media only screen and (max-width: 500px) {
	#header-top-glob .header-top-hide-mobile {
		display: none;
	}

	#header-top-glob span {
		padding: 0 15px;
		font-size: 15px;
	}
}