/* Header escarcelle : barre commune à l'application (page de connexion et connectée),
   au site (website/) et au manuel (docs/manuel/).
   SOURCE UNIQUE. Ne pas copier : ce fichier est
   - concaténé dans bundlestyle.css (just pdv-bundle-assets),
   - lié dans le site : website/static/css/header.css (lien symbolique),
   - lié dans le manuel : docs/manuel/assets/css/esc-header.css (lien symbolique).
   Les variables --esc-* sont portées par #header : aucune dépendance à la page hôte.
   Spécifique à l'application (barres dev/test/preprod, menu utilisateur) : escarcelle.css.
   Spécifique au manuel (thème hugo-book) : docs/manuel/assets/_custom.scss. */
#header {
	--esc-primary: #1d6489;
	--esc-secondary: #c2cfd6;
	--esc-tertiary: #f0f3f5;
	--esc-dark: #193b4d;
	--esc-blue-900: #2a4365;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #000000;
	background-color: var(--esc-tertiary);
	padding: 8px;
	position: sticky;
	left: 0;
	top: 0;
}

#header .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1500px;
	margin: 0 auto;
}

#header .logo {
	margin: 0;
	color: var(--esc-primary);
	display: flex;
	align-items: center;
}

#header .esc-icon {
	padding: 0.2em;
	margin: 0 0.7rem 0 0;
	background-color: #FFF;
	color: var(--esc-blue-900);
	border: 3px solid var(--esc-primary);
	border-radius: 1em;
	width: initial !important;
}

#header a {
	text-decoration: none;
	color: var(--esc-primary);
}

#header .la {
	font-size: 1.2rem;
	width: 24px;
}

#header #version {
	color: var(--esc-primary);
	font-size: 0.8rem;
	font-weight: 700;
	margin-right: 1rem;
}

#header .links {
	display: flex;
}

#header .links a {
	text-decoration: none;
	color: var(--esc-primary);
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
}

/* Header public (page de connexion, site, manuel) : mêmes éléments que le header
   connecté, avec les liens du site et un bouton de connexion. Même base typographique
   que l'application connectée (html 1em, interligne ~1.2) quelle que soit la police du
   body de la page hôte. min-height : le bloc utilisateur du header connecté fait 40px. */
#header.public {
	font-size: 1rem;
	line-height: 1.2;
}

#header.public .wrapper {
	padding: 0 0.5rem;
	min-height: 2.5rem;
}

#header.public .brand {
	display: flex;
	align-items: center;
	margin-right: 1rem;
}

#header.public .links {
	flex: 1;
	justify-content: center;
}

#header.public .links a:hover {
	color: var(--esc-dark);
}

#header.public .links a.active {
	border-bottom: 1px solid var(--esc-primary);
}

#header.public .btn-login {
	background-color: var(--esc-tertiary);
	border: 1px solid var(--esc-primary);
	border-radius: 0.2rem;
	padding: 0.2rem 0.5rem;
	display: inline-block;
	white-space: nowrap;
}

#header.public .btn-login:hover {
	background-color: var(--esc-dark);
	color: var(--esc-tertiary);
}

#header.public #navswitch,
#header.public .burger {
	display: none;
}

#header.public .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 7 entrées + bouton : le menu tient à plat à partir de ~1200px (page de connexion avec
   le numéro de version : ~1195px) */
@media screen and (max-width: 1240px) {
	#header.public .burger {
		display: flex;
		align-items: center;
		order: -1;
		margin-right: 0.75rem;
		color: var(--esc-primary);
		cursor: pointer;
	}

	#header.public .logo {
		margin-right: auto;
	}

	#header.public .links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		background-color: var(--esc-tertiary);
		border-bottom: 1px solid var(--esc-secondary);
		box-shadow: 0 6px 9px -6px var(--esc-dark);
	}

	#header.public #navswitch:checked ~ .links {
		display: flex;
	}

	#header.public .links a {
		padding: 0.9rem 1.5rem;
		border-top: 1px solid var(--esc-secondary);
	}

	#header.public .sr-only {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
}

@media screen and (max-width: 480px) {
	#header.public {
		font-size: 1rem;
	}

	#header.public .brand {
		margin-right: 0.5rem;
	}
}