@charset "utf-8";
/*
=========================================================================
    #bc_zone_capsules
    ZONE DES BOUTONS "À consulter également"
=========================================================================
*/

#bc_zone_capsules {
	background-color: #f2f2f2;
	padding: 20px 0;
}
#bc_zone_capsules h2 {
	color: #074b98;
	font-size: 18px;
	margin: 20px 0 8px 0;
	text-transform: uppercase;
}
/*
=========================================================================
	Boutons Consulter

    Documentation : Confluence > Nouveau site > Boutons Consulter
=========================================================================
*/

/*
    .centrer
    Centre tous les boutons dans leur conteneur.
    Pratique pour centrer dans un encadré.

*/
.btns-consulter.centrer {
	justify-content: center
}
/*  Liste des boutons

    Le conteneur UL est un flexbox et
    les balises LI dont les enfants flex qui servent au positionnement.

*/
.btns-consulter {
	list-style: none;
	margin: 0 auto;
	position: relative;
	width: 100%;
	max-width: 760px;
}
@media (min-width: 840px) {
	.btns-consulter {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		max-width: 824px;
	}
}
/*
    Toute la partie des media queries devra être adaptée à la largeur
    du conteneur (la zone de texte) dans le nouveau site, pour que les
    boutons change de position au bon moment.
 */
.btns-consulter>li {
	max-width: 400px;
}

@media (min-width: 840px) {
	.btns-consulter>li {
		border: 20px solid transparent;
		border-bottom-width: 15px;
		border-top-width: 8px;
		-webkit-flex-basis: 50%;
		flex-basis: 50%;
		margin-top: 0;
		max-width: inherit;
		padding: 0 10px;
	}
}

/*
	Bogue de flex dans IE10 & IE11 + box-sizing
  	Solution : https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box
*/
@media (min-width: 0px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.btns-consulter>li {
		flex-basis: auto;
		width: 100%
	}
}

@media (min-width: 840px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.btns-consulter>li {
		flex-basis: auto;
		width: 50%
	}
}
/* Le bouton est placé sur la balise <a> */
.btns-consulter>li>a {
	background-color: white;
	border: 1px solid rgba(200, 200, 200,0.1);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	color: #074b98;
	display: block;
	font-size: 15px;
	padding: 1.4em 0.2em 1.5em 1.4em;
	position: relative;
	text-transform: uppercase;
	text-decoration: none;
	left: 0;
	top: 0;
	transition: background-color .2s linear 0.05s;
}

@media (min-width: 580px) {
	.btns-consulter>li>a {
		/*padding: 1.8em 0.2em 1.9em 1.8em;*/
	}
}
.btns-consulter>li>a {
	min-height: 60px;
}
@media (min-width: 840px) {
	.btns-consulter>li>a {
		min-height: 72px;
	}
}
.btns-consulter>li>a>div {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-right: 3em;
}

.btns-consulter>li>a[class*="picto-"] {
	padding-left: 24%;
}
.btns-consulter>li>a:hover, .btns-consulter>li>a:focus {
	background-color: #e6e6e6;
}
.btns-consulter>li>a:active {
	background-color: #ffffff;
	box-shadow: none;
}
/* <span> pour grossir des mots */
.btns-consulter>li>a span {
	color: #107CC0;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 16px;
}
/* Le pictogramme */
.btns-consulter>li>a:before {
	position: absolute;
	width: 23%;
	height: 100%;
	max-height: 65px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.btns-consulter.style3>li>a {
	color: white;
	background: #074b98;
	background: linear-gradient(to bottom, #074b98 0%, #186db7 100%);
}
.btns-consulter.style3>li>a:after {
	background: rgba(255,255,255,0.1);
	opacity: 0;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 0.2s linear 0.05s;
}
.btns-consulter.style3>li>a span {
	color: white
}
.btns-consulter.style3>li>a:before {
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}
.btns-consulter.style3>li>a:hover span, .btns-consulter.style3>li>a:focus span {
	color: white;
}
.btns-consulter.style3>li>a:hover:after, .btns-consulter.style3>li>a:focus:after {
	opacity: 1;
}
.btns-consulter.btns-consulter-fleche>li>a:before {
	position: absolute;
	width: 25px;
	height: 100%;
	max-height: 22px;
	background-repeat: no-repeat;
	left: 85%;
	background-image: url("../img/pictos/picto-fleche-droite.svg");
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.btns-consulter.btns-consulter-fleche.style3>li>a:before {
		background-image: url('../img/pictos/picto-fleche-droite-blanc.svg')
	}
}
/*
=========================================================================
    BOUTONS Promos
- Ce sont des boutons placés sous la zone consulter aussi. Des logos d'autres sites web à consulter.
=========================================================================

*/
.btns-promo {margin-bottom:20px;
}
.btns-promo .col {
	margin-top: 20px;
}
.btns-promo .col a {
	display: block;
	position: relative;
	height: 60px;
	margin-left: 10px;
}
.btns-promo .col a span {
	display: none;
}
.btns-promo .col a:before {
	position: absolute;
	width: 93%;
	max-height: 60px;
	height: 100%;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: opacity 0.3s;
}


@media (min-width: 767px) {
	.btns-promo .col {
		border-left: 1px solid #cccccc;
	}
	.btns-promo .col:first-child {
		border-left: 0 none;
	}
}
/* Logos actuellement utilisés */
.img-biblio-quebec:before {
	background-image: url(../img/logos/bibliotheque-quebec.svg)
}
.img-otq:before {
	background-image: url(../img/logos/otq.svg)
}
.img-rtc:before {
	background-image: url(../img/logos/rtc.svg)
}
/*
=========================================================================
	Boutons Consulter Medias sociaux
    .btns-medias-sociaux
    Documentation : Confluence > Nouveau site > Boutons Consulter
=========================================================================
*/

/* Les boutons pour les médias sociaux est basé sur les styles de .btns-consulter.style3 */

.btns-medias-sociaux {
	display: block;
	margin-left: -10px;
	list-style: none;
	margin: 0 auto 1em;
	position: relative;
	width: 100%;
	max-width: 760px;
}

@media (min-width: 840px) {
	.btns-medias-sociaux {
		max-width: 824px;
		width: calc(100% + 20px);
	    margin-left: -10px;
		margin-bottom: 1em;
	}
    .btns-medias-sociaux:not(.seul) {
		display: flex;
		flex-flow: row wrap;
	}
}
.btns-medias-sociaux>li {
	border: 0;
	border-top: 5px solid transparent;
}
@media (min-width: 840px) {
	.btns-medias-sociaux>li {
		flex-basis: 50%;
	    margin-top: 0;
	    max-width: inherit;
		border: 10px solid transparent;
	}
}
.btns-medias-sociaux>li>a {
	background: #074b98;
    background: linear-gradient(to bottom, #074b98 0%, #186db7 100%);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.0);
	color: white !important;
	display: block;
    padding: 1.1em 0;
	position: relative;
	text-decoration: none;
	font: normal 16px/1.2em "proxima-nova-bold", sans-serif;
	transition: box-shadow 0.3s;
}
.btns-medias-sociaux>li>a:after {
	background: rgba(255,255,255,0.1);
	opacity: 0;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 0.3s linear 0.05s;
}
.btns-medias-sociaux.seul>li>a {
    display: inline-block;
    padding-right: 40px;
}

.btns-medias-sociaux>li>a:hover,
.btns-medias-sociaux>li>a:focus {
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	transition: color 0.3s, box-shadow 0.3s;
}
.btns-medias-sociaux>li>a:hover:after, 
.btns-medias-sociaux>li>a:focus:after {
	opacity: 1;
}
.btns-medias-sociaux>li>a:active {
	box-shadow: 2px 2px 4px rgba(0,0,0,0);
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	transition: color 0.3s, box-shadow 0.3s;
}
.btns-medias-sociaux>li>a[class*="picto-"] {
	padding-left: 80px;
}
.btns-medias-sociaux>li>a:before {
	position: absolute;
	width: 90px;
	height: 32px;
	max-height: 65px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	filter: invert(50%) brightness(200%);
	transition: opacity 0.3s;
}
.btns-medias-sociaux>li>a:active:before {
	opacity: 0.5;
}