@charset "utf-8";

/*
=========================================================================
	COLONNES
- Pour des divs
=========================================================================
*/

@media only screen and (min-width: 767px) {
	div.colonnes-2,
	div.colonnes-3,
	div.colonnes-4,
	div.colonnes-5 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap : wrap;
		flex-wrap : wrap;
		margin: 0px -10px;
	}
	div.col {
		-webkit-flex: 1;
		flex: 1;
		margin: 5px 0px 15px;
		padding: 0px 10px;
	}
	div.colonnes-2 div.col {
		flex: 0 50%;
	}
	div.colonnes-3 div.col {
		flex: 0 33.3333333333333333%;
	}
	div.colonnes-4 div.col {
		flex: 0 25%;
	}
	div.colonnes-5 div.col {
		flex: 0 20%;
	}
	div.col-80 {
		flex-basis: 80% !important;
	}
	div.col-75 {
		flex-basis: 75% !important;
	}
	div.col-66 {
		flex-basis: 66.6666666666666% !important;
	}
	div.col-60 {
		flex-basis: 60% !important;
	}
	div.col-50 {
		flex-basis: 50% !important;
	}
	div.col-40 {
		flex-basis: 40% !important;
	}
	div.col-33 {
		flex-basis: 33.3333333333333% !important;
	}
	div.col-25 {
		flex-basis: 25% !important;
	}
	div.col-20{
		flex-basis: 20% !important;
	}
	/* Force le contenu après à changer de ligne */
	div.colonnes-2::after,
	div.colonnes-3::after,
	div.colonnes-4::after,
	div.colonnes-5::after {
		clear: both;
	}
}
@media all and (min-width: 767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	div.colonnes-2 div.col {
		max-width: 50%;
	}
	div.colonnes-3 div.col {
		max-width: 33.33333333%
	}
	div.colonnes-4 div.col {
		max-width: 25%;
	}
	div.colonnes-5 div.col {
		max-width: 20%;
	}
}
/*
=========================================================================
	COLONNES UL
	- Pour des listes
=========================================================================
*/
@media only screen and (min-width: 766px) {
	ul.colonnes-2 {
		-webkit-columns: 2;
		-moz-columns: 2;
		columns: 2;
	}
	ul.colonnes-3 {
		-webkit-columns: 3;
		-moz-columns: 3;
		columns: 3;
	}
	ul.colonnes-4 {
		-webkit-columns: 4;
		-moz-columns: 4;
		columns: 4;
	}
	ul.colonnes-2,  ul.colonnes-3,  ul.colonnes-4 {
		-webkit-column-gap: 20px;
		column-gap: 20px;
		margin-left: 0px; /* Efface un style global des puces, à évaluer si on garde. */
	}
	ul.colonnes-2 li, ul.colonnes-3 li, ul.colonnes-4 li {
		padding-left: 0;
		margin-left: 2em; /* Fait en sorte que la puce affiche dans les colonnes suivantes. Évaluer le chiffre. */
		margin-top: 0px;
		margin-bottom: 0.4em;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid; /* Fait en sorte que le LI reste dans la même colonne au complet */
	}
	/* Quand on a un encadré à l'intérieur d'un colonne, la marge est trop grande
		alors on l'enlève */
	div.col > .encadre {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/*
=========================================================================
	COLONNES-ENCADRÉS
- Permet à une colonne d'avoir les styles des encadrés (bordures, couleur, picto)
=========================================================================
*/
@media only screen and (min-width: 766px) {
	.colonnes-2 .col.encadre,
	.colonnes-3 .col.encadre,
	.colonnes-4 .col.encadre {
		border-top: 10px solid white;
		border-right: 10px solid white;
		border-bottom: 15px solid white;
		border-left: 10px solid white;
		margin:0px;
	}


	/* Place le picto avant le contenu*/
	.col.encadre.picto-avant[class*="picto-"] {
		padding: 90px 2.8em 25px 2em;
		position: relative;
	}
	.col.encadre.picto-avant[class*="picto-"]:before {
		width: 60px;
		height: 60px;
		left:25px;
	}
}
@media all and (min-width: 767px)  {
	div.colonnes-2 div.col.encadre {
		max-width: 50%;
	}
	div.colonnes-4 div.col.encadre {
		max-width: 25%;
	}
}
/*
=========================================================================
	Vidéos en deux colonnes
=========================================================================

*/
@media (min-width: 450px) {
	.colonnes-2 .col .lien-video figure {
		max-width: 350px;
	}

	.colonnes-2 .col .lien-video > img,
	.colonnes-2 .col .lien-video > figure > img {
		width: 348.5px;
	}
	/* Dans un tiroir */
	.toggle-container .colonnes-2 .col .lien-video figure {
		max-width: 330px;
	}

	.toggle-container .colonnes-2 .col .lien-video > img,
	.toggle-container .colonnes-2 .col .lien-video > figure > img {
		width: 338.5px;
	}
}

/*
=========================================================================
	Partenaires - colonnes de logos
=========================================================================

*/

.partenaires {margin-top:30px!important}




/*
=========================================================================
	Statistiques - colonnes pourcentage
=========================================================================

*/
.colonnes-stats {
    padding: 8px 40px 20px; 
    margin:0; 
    align-items: center; 
    opacity: 0; 
    transition: opacity .5s;
}
.colonnes-stats.pret { opacity: 1}

.colonnes-stats .col.chiffre {
    font-size: 80px; 
    text-align: center; 
    padding-right: 10px; 
    font-weight: 600; 
    color: #074b98;
}
.colonnes-stats .col.desc p {
    position: relative; 
    color: #074b98;
	margin-top:0px
 
}

ul + div.colonnes-stats {
    padding: 0px 20px 10px;
}
.chiffre span.pourcent {font-size:40px}


@media (min-width: 767px) {
    .colonnes-stats {
        padding: 8px 20px 20px 0; 
    }
    .colonnes-stats .col.chiffre {
        font-size: 70px; 
        text-align: right; 
        padding-right:40px;
    }
    ul + div.colonnes-stats { padding:0px 100px 20px }
    .chiffre span.pourcent {font-size:30px}
}
@media (min-width: 900px) {
    .colonnes-stats .col.chiffre {
        font-size: 95px
    }
    .chiffre span.pourcent {font-size:45px}
}
@media (min-width: 1050px) {
    .colonnes-stats {padding:8px 50px 20px;}
    .colonnes-stats .col.chiffre {font-size :120px;}
    .colonnes-stats .col.desc p { font-size: 18px}
	.colonnes-stats .col.desc p.note { font-size: 14px;}
    .chiffre span.pourcent {font-size:60px}
}