/**
 * Plan du document (document outline)
 *
 * Classes universelles qui séparent le niveau sémantique d'un titre (h1 à h6)
 * de son apparence. On peut ainsi corriger la hiérarchie des titres sans
 * changer le visuel : <h2 class="as-h1"> s'affiche exactement comme un <h1>.
 *
 * Chargé après assets/css/style.css (voir functions.php).
 */

/**
 * Masqué visuellement
 * Reste lu par les lecteurs d'écran et les moteurs de recherche.
 */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/**
 * Apparence d'un niveau de titre, peu importe la balise
 * Reprend la typographie des titres h1 à h4 de style.less et neutralise le
 * trait :before propre au <h2>. Les marges et le padding ne sont pas touchés :
 * ils sont déjà identiques pour h1 à h6, et les classes utilitaires
 * (.col-12, .m-b--1, ...) doivent continuer de s'appliquer.
 */
.as-h1,
.as-h2,
.as-h3,
.as-h4 {
	font-weight: 700;
	font-family: "Spartan", sans-serif;
	line-height: 1.25em;
	text-transform: none;
	color: #06179a;
}
.as-h1:before,
.as-h1:after,
.as-h2:before,
.as-h2:after,
.as-h3:before,
.as-h3:after,
.as-h4:before,
.as-h4:after {
	content: none;
}
.as-h1 {
	font-size: 48px;
}
.as-h2 {
	font-size: 36px;
}
.as-h3 {
	font-size: 24px;
}
.as-h4 {
	font-size: 20px;
}
@media only screen and (max-width: 992px) {
	.as-h1 {
		font-size: 36px;
	}
	.as-h2 {
		font-size: 24px;
	}
	.as-h3 {
		font-size: 20px;
	}
}

/**
 * Stack spécialistes (accueil)
 * L'ancien <h1> est maintenant un <h2 class="as-h1">.
 */
.stack-specialistes .stack-specialistes__titre {
	margin-bottom: 45px;
}
@media only screen and (max-width: 992px) {
	.stack-specialistes .stack-specialistes__titre {
		margin-bottom: 0;
	}
}