@charset "utf-8";
/* CSS Document */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	margin: 0;
	padding: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
@font-face {
	font-family: 'proxima-nova';
	src: url("font/proximanova-regular.woff2") format("woff2"), url("font/proximanova-regular.woff") format("woff");
	font-style: normal;
	font-weight: 200;
}
@font-face {
	font-family: 'proxima-nova-medium';
	src: url("font/proximanova-medium.woff2") format("woff2"), url("font/proximanova-medium.woff") format("woff");
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'proxima-nova-semibold';
	src: url("font/proximanova-semibold.woff2") format("woff2"), url("font/proximanova-semibold.woff") format("woff");
	font-style: normal;
	font-weight: 600;
}
@font-face {
	font-family: 'proxima-nova-bold';
	src: url("font/proximanova-bold.woff2") format("woff2"), url("font/proximanova-bold.woff") format("woff");
	font-style: normal;
	font-weight: 800;
}
/*
=========================================================================
   ACCESSIBILITÉ
=========================================================================
*/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
/*
=========================================================================
    DÉFINITION DES BASES
    - TYPOGRAPHIE
    - LARGEUR maximale de la page
    - MARGES pour centrer dans l'├®cran
=========================================================================
*/
body {
	font-size: 14px;
	font-family: 'proxima-nova', sans-serif !important;
	font-style: normal;
	margin: 0 auto;
}

@media (min-width: 767px) {
body {
	font-size: 15px;
}
}

@media (min-width: 1100px) {
body {
	font-size: 15px;
}
}
/*
=========================================================================
    TITRES ET TEXTES
=========================================================================
*/
h1 {
	color: #e5155e;
	text-transform: uppercase;
	padding:40px 0px
}

h2 {
	font-size:150%;font-family: 'proxima-nova-bold';
	margin: 36px 0 16px 0;}
p {
	font-size: 18px;
	line-height: 1.35em;
	margin-bottom: 12px;
}
a {
	color: #e5155e
}
a:hover {
	text-decoration: none
}
/* Liens avec picto */
.lien[class*="picto-"] {
	padding-left: 20px;
	position: relative;
}
a.lien[class*="picto-"]:before, span.lien[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: top left;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	top: 1px;
	left: -4.5px;
	position: absolute;
}

ul, ol {
	font-size: 18px;
	margin-top: 0.8em;
	margin-bottom: 1.6em;
	margin-left: 2em;
}
ul li, ol li {
	line-height: 1.3em;
}
li {
	margin-top: 0.4em;
}
ul ul, ol ul, ul ol, ol ol {
	margin-top: 0;
	margin-bottom: 0;
}
.centre {
	text-align:center
}
/*
=========================================================================
    FOOTER
=========================================================================
*/
footer {
	margin-top: 40px
}
/* Médias sociaux */
footer nav {
	text-align: center;
	margin: auto
}
footer #btn-medias-sociaux ul {
	margin-left: 0;
	
}
footer #btn-medias-sociaux li {
	margin: 10px 5px;
	width: 35px;
	height: 35px;
	display: inline-block;
}
footer #btn-medias-sociaux a[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	position: absolute;
	text-align: center;
}
footer #btn-medias-sociaux .picto-facebook:before {
	background-image: url("../images/picto_facebook_e5155e.svg")
}
footer #btn-medias-sociaux .picto-facebook:hover:before {
	background-image: url("../images/picto_facebook_f1667c.svg")
}
footer #btn-medias-sociaux .picto-youtube:before {
	background-image: url("../images/picto_youtube_e5155e.svg")
}
footer #btn-medias-sociaux .picto-youtube:hover:before {
	background-image: url("../images/picto_youtube_f1667c.svg")
}
footer #btn-medias-sociaux .picto-twitter:before {
	background-image: url("../images/picto_twitter_e5155e.svg")
}
footer #btn-medias-sociaux .picto-twitter:hover:before {
	background-image: url("../images/picto_twitter_f1667c.svg")
}
/* Tags #snaptoipas */
#tag {
	color: #e5155e;
	text-align: center;
	font-size: 180%;
	font-family: "proxima-nova-bold"
}
/* Logos VDQ et SPVQ */
#logos {
	text-align: center;
}
#logos img {
	margin: 30px;
}
#logos img#vdq {
	height: 80px;
}
#logos img#spvq {
	height: 120px;
}
/**Picto**/
.picto-coeur:before {
	background-image: url("../images/picto-coeur-brise.svg")
}


/*
=========================================================================
    MENU PRINCIPAL
=========================================================================
*/
/* Add a black background color to the top navigation */
header {

	background-color:#666666;
	text-align: center;
	position: relative;
	z-index: 10
}

@media screen and (min-width: 600px) {
header {
	background-color: rgba(0, 0, 0, 0.6);
	height: 66px;
	z-index: 2;
	
}
}
header .contenu {
	max-width: 1160px;
	margin: auto;
}
header h1 {
	position: absolute;
	margin-top: 20px;margin-left:20px;
	width: 208px;
	height: 40px;
	background-image: url(../images/snap-toi-pas-logo.svg);
	background-repeat: no-repeat
}

.menu-principal {
	overflow: hidden;
}

@media screen and (min-width: 600px) {
.menu-principal {
	float: right;margin-right:20px

}
}
.menu-principal a {
	float: left;
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 18px 16px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 130%;
}

@media screen and (max-width: 600px) {
.menu-principal div a {
	padding: 3px 16px;
}
}

@media screen and (min-width: 600px) {
.menu-principal div a:before {
	content: "|";
	margin: 0px 10px;
}
.menu-principal div a {
	padding: 18px 0px;
}
.menu-principal div a:first-child:before {
	content: "";
	margin: 0px;
}
}
/* Change the color of links on hover */
.menu-principal a:hover {
	color: #fce52d
}
/* Add an active class to highlight the current page */
.menu-principal a.actif {
	color: #fce52d
}

/* Hide the link that should open and close the topnav on small screens */
.menu-principal .icon {
	display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.menu-principal div {
	margin-top: 60px
}
.menu-principal a {
	display: none;
}
.menu-principal a.icon {
	float: right;
	display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.menu-principal.responsive {
	position: relative;
}
.menu-principal.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}
.menu-principal.responsive a {
	float: none;
	display: block;
	text-align: left;
}
}
/*
=========================================================================
    ACCUEIL
=========================================================================
*/
#accueil {
    text-align: center;
}

#accueil{}
/*
=========================================================================
Bandeau défilant (image) (#carrousel)
 -
=========================================================================
*/
#carrousel {
    text-align: center;
}
#carrousel-wrapper {
   
    opacity: 0;
    overflow: hidden;
    position: relative;
	width: 100%;
	z-index: 0;
 
}
@media (min-width: 1200px) {
    #carrousel-wrapper {}
}
#carrousel-fond {
    opacity: 0.15;
    position: absolute;
    width: 75%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* Cache le fond dans IE11 */
@media (min-width: 10px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #carrousel-fond {
        opacity: 0
    }
}
#carrousel .image-noune {
    background-color: #f1667c;
}
#carrousel .image-craque {
    background-color: #7accc8;
}
#carrousel .image-graine {
    background-color: #f3873d;
}
#carrousel a {
    text-decoration: none;
    color: inherit;    width: 100%;

}

#carrousel .image > img {
    filter: drop-shadow(0px 0px 10px #555555);
    -webkit-filter: drop-shadow(0px 0px 10px #555555);
    -moz-filter: drop-shadow(0px 0px 10px #555555);
    margin-top: 100px;
    margin-bottom: 40px;
}
#carrousel .image > img + img {
    margin-top: 0px;
    width: 50%;
}
@media screen and (min-width: 450px) {
    #carrousel .image > img {
        width: 50%;
        margin: 100px 0px
    }
    #carrousel .image > img + img {
        width: 30%;
        margin: 100px 0px 100px 50px;
    }
}
@media screen and (min-width: 1160px) {
    #carrousel .image > img {
        width: 45%;
        margin: 100px 0px 50px 0px;
    }
    #carrousel .image > img + img {
        width: 25%;
        margin: 100px 0px 60px 100px;
    }
}
#carrousel .btn {
    margin-top: 20px;
}
@media (min-width: 767px) and (max-width: 911px) {
    #carrousel .btn {
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* Carrousel : Navigation */
#carrousel #nav, #carrousel #prev, #carrousel #next {
    position: absolute;
    margin: 0;
}
#carrousel #nav {
    width: 100%;
    bottom: 0;
    color: white;
    z-index: 150;        margin: auto;

}
#carrousel #prev, #carrousel #next {
    display: none;
}

@media (min-width: 960px) {
    #carrousel #nav {
        bottom: 1em;
    }
}
@media (min-width: 1220px) {
    #carrousel #nav {
        left: 0;
    }
}
@media (min-width: 1340px) {
    #carrousel #prev, #carrousel #next {
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #carrousel #prev {
        left: -4.8em
    }
    #carrousel #next {
        right: -4.8em
    }
}
@media (min-width: 1425px) {
    #carrousel #prev {
        left: -6em
    }
    #carrousel #next {
        right: -6em
    }
}
@media (min-width: 1200px) {
    #carrousel #prev {
        left: 8em
    }
    #carrousel #next {
        right: 8em
    }
}
/* ancien */
#carrousel #nav > span {
    font-size: 3em;
    cursor: pointer;
    position: relative;
    top: 0;
    right: 0;
    margin: 1px;
    padding: 3px 1px;
}
#carrousel #nav > span.cycle-pager-active {
    color: #108848;
}
/* -- */
#carrousel #nav button {
    font-size: 2.5em;
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: transparent;
    border: none;
    color: white;
    width: 25px;
    z-index: 3;
}
#carrousel #nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#carrousel #nav .cycle-pager-active {
    color: #2b2b2b;
}
#carrousel a.cycle-slide-active:focus {
    outline: 2px dashed rgba(255, 255, 255, 0.5);
}
/* BOUTONS */
.btn {
    background-color: #108848;
    border: 0;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font: 600 1em 'proxima-nova-bold', sans-serif;
    padding: 8px 30px 10px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    -webkit-appearance: none;
}
.btn:hover, .btn:focus {
    background-color: #007236;
    color: white;
}
.btn:active {
    background-color: #007236;
    color: rgba(255, 255, 255, 0.5);
}
.btn[class*="picto-"]:before {
    position: absolute;
    width: 25px;
    height: 100%;
    max-height: 25px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: opacity 0.2s;
}
.picto-fleche-droite:before {
    background-image: url("../images/picto-fleche-droite-blanc.svg")
}
.picto-fleche-gauche:before {
    background-image: url("../images/picto-fleche-gauche-blanc.svg")
}
/* Texte */
#accueil #texte {
    max-width: 900px;
    margin: auto
}
/* Navigation centrale */
#accueil nav {
    background-color: #7accc8;
    padding: 40px;
    margin-top: 40px
}
#accueil nav ul {
    max-width: 1160px;
    margin: auto;
    list-style: none
}
#accueil nav li {
    line-height: 2em;
}
@media (min-width: 767px) {
    #accueil nav li {
        width: 33%;
        display: inline-block;
    }
}
#accueil nav a {
    text-transform: uppercase;
    color: #2b2b2b;
    text-decoration: none;
    font-family: 'proxima-nova-semibold';
    font-size: 140%;
    padding-top: 220px;
    position: relative;
}
#accueil nav a:before {
    content: " ";
    width: 220px;
    height: 220px;
    display: block;
    margin: auto;
}
#accueil nav a.jeune:before {
    background-image: url(../images/nav-jeune.png);
    background-repeat: no-repeat;
}
#accueil nav a.parent:before {
    background-image: url(../images/nav-parent.png);
    background-repeat: no-repeat
}
#accueil nav a.ecole:before {
    background-image: url(../images/nav-ecole.png);
    background-repeat: no-repeat
}
#accueil nav a.jeune:hover:before {
    background-image: url(../images/nav-jeune-rl.png);
}
#accueil nav a.parent:hover:before {
    background-image: url(../images/nav-parent-rl.png);
}
#accueil nav a.ecole:hover:before {
    background-image: url(../images/nav-ecole-rl.png);
}
#accueil nav a:hover {
    color: #000000
}
#accueil nav a span {
    font-family: 'proxima-nova-bold';
    font-size: 220%
}


/* AUTRES PAGES */
main{text-align:center}
/* PHOTO */
main #photo div{margin:auto;background-size:cover;height:500px;}
main  section:first-child{margin-top:-66px;position:relative; z-index: -2}


/* Jeune */
main#jeune #photo div{background:url(../images/photo_jeune.jpg)  no-repeat; background-size:cover; background-position: center center} 
	main#parent #photo div{background:url(../images/photo_parents.jpg)  no-repeat; background-size:cover; background-position:top center}
	main#ecole #photo div{background:url(../images/photo_ecole.jpg)  no-repeat;background-size:cover;}
/* main#jeune #photo {background-color: red}
	 */

#texte {text-align:left;max-width:900px;margin:auto;	font-size: 1.05em;
	letter-spacing: 0.1px; padding: 0 3em}

#texte h1{text-align:center;}

#texte .question{border-top:1px solid #e5155e;padding:10px 0px}
#texte div:first-child{border-top:0px none;}
#texte div.question:last-child{border-bottom:1px solid #e5155e;}

#ressources{background-color:#bbe5e3;padding:40px;margin-top:60px;}

/*
=========================================================================
	Tiroirs
=========================================================================
*/

.toggle-container {
	display: none;
}
h2.trigger{
	margin: 0;
	min-height: 49px;
	padding: 0;
	margin-bottom: 6px;
	visibility: hidden;
	
}
.trigger > button {
	background-color: transparent;
	border: none;

	cursor: pointer;
	display: block;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 18px;
	margin-bottom: 6px;
	padding: 15px 35px 15px 15px;
	position:relative;
	text-align: left;
	width: 100%;
}
@media (min-width: 766px) {
	.trigger > button {
		padding: 15px 40px 16px 30px;
	}
}

/* Tiroir fermé (+) */
.trigger > button:after{
	position: absolute;
	background-color:#e5155e;
	width: 40px;
	height: 100%;
	max-height: 40px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	right: 0;
	top: 0;
	background-image: url('../images/picto-plus.svg');
	background-size:40%;
	border-radius:40px
}
@media (min-width: 1280px) {
	.trigger > button:after {
		transition: background-image 0.350s;
	}
}

/* Tiroir ouvert (-) */
.trigger.active > button:after {
	background-image: url('../images/picto-moins.svg');
}
/*
  Contenu des tiroirs
*/
.toggle_container,
.toggle-container{
	margin: 0 8px 8px;
	overflow: hidden;
}
@media (min-width: 766px) {
	.toggle_container,
	.toggle-container{
		margin: 0 15px 15px 30px;
	}
}

.toggle-container > *:first-child:not(.col):not(.encadre),
.toggle_container > *:first-child:not(.col):not(.encadre) {
	padding-top: 8px;
}
@media (min-width: 766px) {
	.toggle-container > *:first-child:not(.col):not(.encadre),
	.toggle_container > *:first-child:not(.col):not(.encadre) {
		padding-top: 15px;
	}
}
/* Listes à puce dans les tiroirs*/
.toggle_container>ul:first-child, .toggle-container>ul:first-child {
	margin-top: 0;
}


/* Encadrés */
.encadre {
	background-color: #f8b3bd;
	display: block;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 1em;
	color: inherit;
	text-decoration: inherit;
	clear:both
}

@media (min-width: 766px) {
	.encadre{
		padding: 25px 2em 25px 2em;
	}
}

/*colonnes*/
@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%;
	}
}