/* Page Accueil */

#accueil{
	background-color: var(--main-bg-color);
}

#accueil0{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex: 1;
	position: relative;
}

/* textes sur accueil */
h1{
	font-size: 6vmin;
	padding-bottom: 1.5vh;
	margin: 0;
}
h2{
	font-size: 4vmin;
	padding-bottom: 1.5vh;
	margin: 0;
}	

#accueil1, #accueil2, #accueil3{
	position: absolute;
	text-align: center;
	font-family: 'Anonymous Pro';
	font-weight: bold;
	height: 100%;
	width: 100%;
}
#accueil1images, #accueil2images, #accueil3images{
	display:flex;
	flex-wrap: nowrap;
	justify-content: center;
	height: 55%;
	width: 100%;
}

/* animation de l'accueil : apparition de la première illustration à partir de 30% de 5s */
/*
.animaccueil{
	animation: animaccueil 5s linear 0s 1;	
}
@keyframes animaccueil{
	0% { background-color: var(--main-bg-color); }
	30% { background-color: var(--main-bg-color); }
}
*/

.accueil1img,.accueil2img,.accueil3img{
	display:flex;
	justify-content: center;
	margin-left: 1vw;
	margin-right: 1vw;
}
.image1,.image2,.image3{
	max-height: 100%;
	max-width: 100%;
}
.image2{ 
	border: 1px solid grey;
}

/* animation première série d'images après 5s la première fois: apparition entre 0 et 11% de 15s et disparition entre 22 et 33% */
/* animation premier texte sur laptop1 après 21s la première fois : apparition entre 0 et 11% de 15s et disparition entre 22 et 33% */
.animaccueil1{
	animation: animaccueil1 15s linear 0s 1;	
}
/* animation première série d'images  après 36s en répétitif: apparition entre 0 et 11% de 15s et disparition entre 22 et 33% */
.animaccueil11{
	animation: animaccueil1 15s linear 0s infinite;	
}
@keyframes animaccueil1{
	0% { opacity: 0; }
	11% { opacity: 1; }
	22% { opacity: 1; }
	33% { opacity: 0; }
	44% { opacity: 0; }
	55% { opacity:0; }
	66% { opacity:0; }
	77% { opacity: 0; }
	88% { opacity: 0; }
	100% { opacity:0; }
}

/* animation deuxième série d'images après 5s la première fois: apparition entre 33 et 44% de 15s et disparition entre 55 et 66% */
/* animation deuxième texte sur laptop1 après 21s la première fois : apparition entre 33 et 44% de 15s et disparition entre 55 et 66% */
.animaccueil2{
	animation: animaccueil2 15s linear 0s 1;	
}
/* animation deuxième série d'images après 36s en répétitif: apparition entre 33 et 44% de 15s et disparition entre 55 et 66% */
.animaccueil22{
	animation: animaccueil2 15s linear 0s infinite;	
}
@keyframes animaccueil2{
	11% { opacity: 0; }
	22% { opacity: 0; }
	33% { opacity: 0; }
	44% { opacity: 1; }
	55% { opacity:1; }
	66% { opacity:0; }
	77% { opacity: 0; }
	88% { opacity: 0; }
	100% { opacity:0; }
}

/* animation troisième série d'images après 5s la première fois: apparition entre 66 et 77% de 15s et disparition entre 88 et 100% */
/* animation troisième texte sur laptop1 après 21s la première fois : apparition entre 66 et 77% de 15s et disparition entre 88 et 100% */
.animaccueil3{
	animation: animaccueil3 15s linear 0s 1;	
}
/* animation troisième série d'images après 36s en répétitif: apparition entre 66 et 77% de 15s et disparition entre 88 et 100% */
.animaccueil33{
	animation: animaccueil3 15s linear 0s infinite;	
}
@keyframes animaccueil3{
	11% { opacity: 0; }
	22% { opacity: 0; }
	33% { opacity: 0; }
	44% { opacity: 0; }
	55% { opacity:0; }
	66% { opacity:0; }
	77% { opacity: 1; }
	88% { opacity: 1; }
	100% { opacity:0; }
}

/* image laptop1 en fond d'écran */
.bgaccueil{
	background-image: url("/img/laptop1.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 50vh;
}
/* div sur laptop1 en fond d'écran */
#accueil4, #accueil5, #accueil6{
	position: absolute;
	top: 33%;
	text-align: center;
	font-family: 'Anonymous Pro';
	font-weight: bold;
	color: var(--main-bg-color);
}
/* textes sur laptop1 */
h3{
	font-size: 2vmin;
}
h4{
	font-size: 1vmin;
}
	
@media screen and (max-width: 576px) 
{
	#accueil1images, #accueil2images, #accueil3images{
		flex-direction: column;
	}
}

@media screen and (min-width: 576px) 
{
 
}

@media screen and (min-width: 768px) 
{

}

@media screen and (min-width: 1024px) 
{

}