img{
  margin-bottom: 5px;
  margin-top: 15px;
}

@font-face {
  font-family: "AkkuratPro-Regular";
  src: url("../0_POLICE/Akkurat-Regular/AkkRg_Pro_1.otf");
}

@font-face {
  font-family: "AkkuratPro-Light";
  src: url("../0_POLICE/Akkurat-Light/Akkurat-Light.ttf");
}

@font-face {
  font-family: "AkkuratPro-Bold";
  src: url("../0_POLICE/Akkurat-Bold/Akkurat-Bold.otf");
}

#navbar{
  background-color: #f7c9c9; /* couleur du bandeau sur le coté, valeur en hexadécimal */
}

h4 {  

	padding-left: 500px;
		    position: absolute;
 }


.subdiv{
	width: 1000px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	overflow: hidden;
	margin: 0px;
}

.subdiv img{
	width: 1000px;
	margin: 0px;
	
}

.columns{
	width: 1000px;
	-webkit-columns:auto;
    -moz-columns:auto;
    columns:auto;
    column-width: 200px;
    column-count: 3;
    padding: 10px;
    position: relative;
    column-gap: auto;
    column-rule-style: solid;
    column-rule-width: 0px;
    border: 0px solid red;
}

#columns2{
	width: 1000px;
    -webkit-columns:auto;
    -moz-columns:auto;
    columns:auto;
    column-width: 200px;
    column-count: 3;
    padding: 10px;
    position: relative;
    column-gap: auto;
    column-rule-style: solid;
    column-rule-width: 0px;

    border: 0px solid red;
}



/* format général du diaporama */
.diaporama {
max-width:800px; /* largeur maximale du diaporama */
padding-left: 100px;
position:relative;
}

	/* format des images */
	img.slides {
	margin-left:auto;
	margin-right:auto;
	width:100%;
	display:none;
	}
	/* flèche gauche pour aller à l'image précédente */
	.left {
	  color:#020202; /* couleur de base de la flèche, en hexadécimal */
  	font-size:15px!important; /* taille de la flèche */
	float:left!important;
	padding-left:10px!important; /* place de la flèche par rapport à la bordure de gauche */
  	cursor:pointer;
	}

	.left:hover {
  	color:#964f4d!important; /* couleur de la flèche lorsque l'on clique et passe la souris dessus, en hexadécimal */
	}



	/* flèche droite pour passer à l'image suivante */
	.right {
  	color:#020202; /* couleur de base de la flèche, en hexadécimal */
  	font-size:15px!important; /* taille de la flèche */
  	float:right!important;
  	padding-right:10px!important; /* place de la flèche par rapport à la bordure de droite */
  	cursor:pointer;
	}



	.right:hover {
  	color:#964f4d!important; /* couleur de la flèche lorsque l'on clique et passe la souris dessus, en hexadécimal */
	}

	.scennettes{
	height: 1050px;
	width: 1000px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border: 0px solid red;
	padding-left: 00px;
	padding-right: 00px;
}

#subdiv_quotidien{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	
}

.subdiv_quotidien{
	position: relative;
	
}




	/*Pour plus d'explication, cf le schéma eplicatif*/

#interaction1 {
	position: relative;
	height: 1300px;
}


.fond {
	position: absolute;
	z-index: 2;
}


#element1 {
	position: absolute;
	margin-left: 0px;/*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:-100px;/*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 1;
	opacity: 0;
}
#element1:hover{
	opacity: 1;
}


#element2 {
	position: absolute;
	margin-left: 450px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-bottom: 250px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 2;
	opacity: 0;
}
#element2:hover{
	opacity: 1;
}

	 /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/

/*Répeter s'il ya plusieurs elements, copier/coller en remplacant element2 par element3*/



#interaction2 {
	position: relative;
	height: 1300px;/*Mettre ici la hauteur de l'image de fond*/
	border: 0px ;
}	

.fond {
	position: absolute;
	z-index: 0;
}


#element1 {
	position: absolute;
	margin-left:15px;/*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:330px;/*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 1;
	opacity: 0;
}
#element1:hover{
	opacity: 1;
}


#element2 {
	position: absolute;
	margin-left:20px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:480px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 2;
	opacity: 0;
}
#element2:hover{
	opacity: 1;
}

#element3 {
	position: absolute;
	margin-left:20px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:615px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 3;
	opacity: 0;
}
#element3:hover{
	opacity: 1;
}

#element4 {
	position: absolute;
	margin-left:20px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:640px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 4;
	opacity: 0;
}
#element4:hover{
	opacity: 1;
}

#element5 {
	position: absolute;
	margin-left:455px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:343px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 5;
	opacity: 0;
}
#element5:hover{
	opacity: 1;
}

#element6 {
	position: absolute;
	margin-left:460px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:455px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 6;
	opacity: 0;
}
#element6:hover{
	opacity: 1;
}

#element7 {
	position: absolute;
	margin-left:605px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:605px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 7;
	opacity: 0;
}
#element7:hover{
	opacity: 1;
}

#element8 {
	position: absolute;
	margin-left:420px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
	margin-top:615px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
	z-index: 8;
	opacity: 0;
}
#element8:hover{
	opacity: 1;
}
	position: absolute;
	margin-left:433px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/


li a{
	text-decoration: none;
}





/* Partie à copier dans votre *.css pour vos onglets */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #ffffff;  /* Ici, mettre la couleur des onglets (la couleur de votre groupe très éclaircie) */
}

ul.tab li {float: left;}

ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
/* Ici, mettre la couleur de l'onglet quand la souris passe dessus (la couleur de votre groupe légerement éclaircie) */
ul.tab li a:hover {background-color: #edc7c6;}

/* Ici, mettre la couleur de l'onglet actif (la couleur de votre groupe) */
ul.tab li a:focus, .active {background-color: #e47d7e;}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Ici, le temps d'affichage du contenu de l'onglet */
}


@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}


/* Si vous avez une deuxième série d'onglets, il faut copier cette partie, en prenant bien soin de remplacer 'tabcontent'
par le nom auquel vous faites référence dans le fichier html (je vous recommande 'tabcontent2') */

.tabcontent2 {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent2 {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 0s; /* Ici, le temps d'affichage du contenu de l'onglet */
}