body {
	background-color: black;
	margin: 0px;
}

.Roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.conteneur1 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 70px;
	align-items: center;
	 
	display: flex;
}



.mot1 {
	color: white;
	height: 70px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 16px;
	opacity: 49%;
	align-items: center;
	display: flex;
	margin-left: 10px;

}

 
	 

nav {
color: white;
	height: 70px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 16px;
	align-items: center;
	display: flex;
	justify-content: space-evenly;
	margin: -320px;

}

a {
    text-decoration: none; /* Supprimer le soulignement */
    color: inherit; /* Utiliser la couleur par défaut du texte */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    font-size: inherit;
    font-size: 16px;
    font-family: Roboto;
    text-transform: uppercase;
    color: white;
     
    

}

ul {
    list-style-type: none; /* Supprimer les puces */
    display: flex; /* Maintenir le display flex */
     flex: auto;
    justify-content: space-evenly;
    margin: 250px;
    font-size: 16px;
    font-family: Roboto;
    text-transform: uppercase;
     

}

.conteneur2 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
}

.titre1 {
color: white;
	height: 70px;
	flex: auto;
	font-family: Roboto;
	font-size: 70px;
	display: flex;
	justify-content: center;
}


.conteneur3 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
} 

.texte1 {
color: white;
height: 20px;
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

.texte2 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

.conteneur4 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 340px;
	 justify-content: center;
	display: flex;
	align-items: stretch;
}

 .animationArrow {
    display: grid;

}

.m-LR-auto, #skills article {
    margin-left: auto;
    margin-right: auto;
}
.arrow1 {
    animation-delay: 0s;

}
.arrow {
    border: solid white;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 15px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    animation-name: opacite;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.m-top-arrow {
     
}
 
*, *::before, *::after {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
    font-family: 'lufga';
}

  

.m-LR-auto, #skills article {
    margin-left: auto;
    margin-right: auto;
}
.arrow2 {
    animation-delay: 0.1s;
     
}
.arrow {
    border: solid white;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 15px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    animation-name: opacite;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
 
*, *::before, *::after {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
    font-family: 'lufga';
}

 

.m-LR-auto, #skills article {
    margin-left: auto;
    margin-right: auto;
}
.arrow3 {
    animation-delay: 0.2s;
   
}
.arrow {
    border: solid white;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 15px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    animation-name: opacite;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
 
*, *::before, *::after {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
    font-family: 'lufga';
}
 
0% {
    opacity: 10%;
}
100% {
    opacity: 100%;
}


.conteneur6 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
}


.titre2 {
color: white;
	height: 70px;
	flex: auto;
	font-family: Roboto;
	font-size: 70px;
	display: flex;
	justify-content: center;
}


.conteneur7 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
} 


.texte3 {
color: white;
height: 20px;
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

.texte4 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}


.conteneur8 {
width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 130px;
	 justify-content: space-evenly;
	display: flex;
	align-items: stretch;

}


.conteneur9 {
width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 130px;
	 justify-content: space-evenly;
	display: flex;
	align-items: stretch;

}


.conteneur10 {
width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 130px;
	 justify-content: space-evenly;
	display: flex;
	align-items: stretch;

}


.conteneur11 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
}


.titre3 {
color: white;
	height: 70px;
	flex: auto;
	font-family: Roboto;
	font-size: 70px;
	display: flex;
	justify-content: center;
}


.conteneur12 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
} 


.texte5 {
color: white;
height: 20px;
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

.texte6 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}


 .conteneur13 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre1 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur14 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-pixel-art {
	 color: white;
	 
	 
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}

.conteneur15 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre2 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur16 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-affiche-voyage {
	 color: white;
	 
	 
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}



.conteneur17 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre3 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur18 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-affiche-lyres {
	 color: white;
	 
	 
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}



.conteneur19 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre4 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur20 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-creation-ecran {
	 color: white;
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}



.conteneur21 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre5 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur22 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-illustrations {
	 color: white;
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur23 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre6 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur24 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-logotype-personnel {
	 color: white;
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur25 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre7 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur26 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-visuel-menu-dvd {
	 color: white;
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur27 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 100px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.sous-titre8 {
	 color: white;
	height: 100px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 36px;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur28 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 500px;
	align-items: center;
	justify-content: space-evenly;
	 
	display: flex;
}

.texte-maquette-site-vente-dvd {
	 color: white;
	font-family: Roboto;
	font-size: 28px;
	opacity: 80%;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
}


.conteneur29 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 60px;
	
	flex-direction: column;
	 align-items: center;
	display: flex;
}

.texte-sous-image1 {
	 color: white;
	font-family: Roboto;
	font-size: 20px;
	align-items: center;
	display: flex;
	 
	margin-left: 570px; 
	 }

.texte-sous-image2 {
	 color: white;
	font-family: Roboto;
	font-size: 20px;
	 margin-left: 570px;
	display: flex;
}


.conteneur30 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 200px;
	justify-content: center;
	 
	 align-items: center;
	display: flex;
}


.conteneur31 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
} 

.texte7 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

.texte8 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}


.conteneur33 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 300px;
	 
	 display: flex;
 
} 

.adresse1 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 32px;
	display: flex;
	 justify-content: space-evenly;
	align-items: center;
	 
}

.adresse2 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 32px;
	display: flex;
	 justify-content: space-evenly;
	align-items: center;
	margin-right: 130px;
}

 
.conteneur35 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 flex-direction: column;
	display: flex;
	align-items: stretch;
} 

.texte9 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 36px;
	display: flex;
	justify-content: center;
	opacity: 65%;
}

 .conteneur36 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: center;
	 
	display: flex;
	align-items: stretch;


} 

.conteneur37 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	 
	justify-content: center;
	 
	display: flex;
	 
} 


.conteneur38 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 80px;
	 justify-content: space-evenly;
	  
	display: flex;
	align-items: center;
} 

.texte-footer1 {
color: white;
 
	flex: auto;
	font-family: Roboto;
	font-size: 27px;
	display: flex;
	justify-content: center;
	 
}


.conteneur39 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 600px;
	justify-content: center;
	  
	display: flex;
	 
} 


.conteneur40 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 2300px;
	justify-content: center;
	  
	display: flex;
	 
} 


.conteneur41 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 2060px;
	justify-content: center;
	  
	display: flex;
	 
} 


.conteneur42 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 70px;
	align-items: center;
	 
	display: flex;
}



.mot11 {
	color: white;
	height: 70px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 16px;
	opacity: 49%;
	align-items: center;
	display: flex;
	margin-left: 10px;

}


.mot12 {
	color: white;
	height: 70px;
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 16px;
	align-items: center;
	display: flex;
	margin-left: 10px;
	justify-content: space-evenly;
	margin: -320px;
}




.conteneur43 {
	width: 100%;
	border: 2px solid black;
	margin: auto;
	height: 900px;
	justify-content: center;
	flex-direction: column;
	 
	display: flex;
}



.mot13 {
	color: white;
	 
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 40px;
	 justify-content: center;
	 text-decoration: underline;
	 
	display: flex;
	 

}


.mot14 {
	color: white;
	 
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 25px;
	 justify-content: center;
	  
	 
	display: flex;
	 

}


.mot15 {
	color: white;
	 
	flex: auto;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 20px;
	opacity: 70%;
	 justify-content: center;
	  
	 
	display: flex;
	 

}