@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Slabo+27px&display=swap');
	/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 6, 2024 */
	@font-face {
    font-family: 'retro_vintageregular';
    src: url('font/retrovintage-regular-webfont.woff2') format('woff2'),
         url('font/retrovintage-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'league_spartanextralight';
    src: url('leaguespartan-vf-webfont.woff2') format('woff2'),
         url('leaguespartan-vf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root{
  --hauteur-menu: 60px;
}



#noir{
	background-color:black;
	color:white;
	display: flex;
   
    align-items: right;
    gap: 0;
	padding: 32px 16px;
    display: grid;
    
    gap: 48px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: auto;
    font-size: 14px;	
    line-height: 1.4em;
	border-radius: 0px;
	
}
* {
  margin: 0px;
  padding: 0px;
  
}

nav {
  width: 150%;
  font-size: 25px;
  margin-top:50px;
  margin-left:-200px;
  top: 0;
  color:black;
  border-radius: 5px;

  padding:15px;
  padding-bottom:0px;  
  font-family: 'league_spartanextralight';

}



nav > ul {
  display: flex;


  height: var(--hauteur-menu);
  color:black;
  font-family: 'league_spartanextralight';
  
 
}

nav ul {
  list-style-type: none;
}

nav > ul > li {
  
  position: relative;
  height: 100%;
  flex: 1;
}

nav > ul > li:hover > a{
  color: black;
  
  
}

nav > ul > li > a {  
	
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:black;
}

.exp{
		background-color:black;
		font-size:53px;
		border-radius: 17px;
		padding-top:0px;
		padding-bottom:0px;
		padding-right:0px;
		margin-top:-130px;
		text-align: center;
		
	 font-family: 'league_spartanextralight';

}

li a {
  text-decoration: none;
  color: black;
  
  padding-bottom:0px;
  background: rgba(255, 255, 255, 1);
  font-family: 'league_spartanextralight';
}

.menu-deroulant1 > a:after{
  content: '❯';
  font-size: 25px;
  margin-left: 9px;
  margin-top:30px;
  display: inline-block; 
  font-family: 'league_spartanextralight';
}



.menu-deroulant1:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;

}

.menu-deroulant1:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}

.menu-deroulant2 > a:after{
  content: '❯';
  font-size: 25px;
  margin-left: 9px;
  margin-top:100px;
  display: inline-block;
  font-family: 'league_spartanextralight';
 
  
 
  
}

.menu-deroulant2:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
 
}

.menu-deroulant2:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}

.menu-deroulant3 > a:after{
  content: '❯';
  font-size: 25px;
  margin-left: 9px;
  margin-top:100px;
  display: inline-block;

  
 
  
}

.menu-deroulant3:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
  
}

.menu-deroulant3:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(90deg);
  }
}

.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 100%;
  text-align: left;
  overflow: hidden;
  max-height: 0;
 margin-top:0px;
  color:black;
  font-family: 'league_spartanextralight';
  

}


@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid green;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 35em;
    border-top: 3px solid black;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.sous-menu > li:hover {
  background-color: red;
  background: rgba(0, 255, 0, 0.15);
  font-family: 'league_spartanextralight';
}

.sous-menu > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
  width: 100%;
  font-family: 'league_spartanextralight';
}

.sous-menu > li:hover > a {
  color: black;
 font-family: 'league_spartanextralight';
}

body {
    
    line-height: 1.6;
}


.header{
    
    background-image: url("https://cdn.discordapp.com/attachments/1156972609355907072/1239683940361441340/image.png?ex=6643d123&is=66427fa3&hm=644c322dfe26cd9ccece78137ef47fa1124117decb4dee4452e1771aff7695a7&");
    
    color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
	padding:250px;
	font-family: 'league_spartanextralight';
	}
	

.mn{
	position: relative;
top: 80px; left: 0px;
text-align: center;
font-family: 'league_spartanextralight';
}

section {
    padding: 50px;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px;
	
}

section h2 {
    color: #009688;
	
}

section h3 {
    color: #009688;
	margin-left:-350px;
}

section p {
    color: #546e7a;
    font-size: 16px;
}

footer {
    background: linear-gradient(to bottom, #004d40, #009688);
    color: #ffffff;
    text-align: center;
    padding: 20px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

footer p {
    margin: 0;
    bottom: 0px;
}

        footer {
            background-color: #F3EFDB;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        footer p {
            margin: 0;
        }

        .flotte {
            overflow: hidden; /* Ajout pour clearfix */
        }

        .flotte img {
            float: right;
            margin: 0 0 20px 20px; /* Ajustez selon vos besoins */
        }
		
		

.img{
	width:30%;
	height:15%; 
}


.box {
	margin:0px;
	width:200px;
	height:60px;
	background:white;
	position:absolute;
	top:400px;
	left:40px;
	border-radius:10px;
}

.box2 {
	margin:0px;
	width:200px;
	height:60px;
	background:white;
	position:absolute;
	top:400px;
	left:380px;
	border-radius:10px;
}

.box3 {
	margin:0px;
	width:200px;
	height:60px;
	background:white;
	position:absolute;
	top:400px;
	left:700px;
	border-radius:10px;
}
.box4 {
	margin:0px;
	width:200px;
	height:60px;
	background:white;
	position:absolute;
	top:400px;
	right:40px;
	border-radius:10px;
	
}

.trait {
	margin:0px;
	width:1000px;
	height:1px;
	background:green;
	position:absolute;
	top:300px;
	left:110px;
	border-radius:10px;
	
}

.menu-deroulant1{
	position:relative;
	top:110px;
	left:8px;
	font-family: 'league_spartanextralight';
	
	
}
.menu-deroulant2{
	position:relative;
	top:40px;
	left:-8px;
}
.md3{
	position:relative;
	top:140px;
	left:305px;
}
.menu-deroulant3{
	position:relative;
	margin-top:40px;
	left:-108px;
}
		
@media (max-width: 1260px) {
.nav {
	
	font-family: 'league_spartanextralight';
}

.header{
	position:relative;
	height:150px;
	
	left:0px;
	
}


	
nav > ul{
	
	font-size: 0.8em;}
	
li{
	
	font-size: 0.9em;}
	
.box{
	position:absolute;
	top:400px;
	left:40px;
	width:110px;
	height:30px;
	font-family: 'league_spartanextralight';
}
.box2{
	position:absolute;
	top:500px;
	left:40px;
	width:100px;
	height:30px;
	font-family: 'league_spartanextralight';
}
.box3{
	position:absolute;
	top:500px;
	left:260px;
	width:100px;
	height:30px;
	font-family: 'league_spartanextralight';
}
.box4{
	position:absolute;
	top:400px;
	left:260px;
	width:100px;
	height:30px;
	font-family: 'league_spartanextralight';
}
.exp{
		background-color:black;
		font-size:23px;
		border-radius: 17px;
		position:absolute;
		left:60px;
		
	 font-family: 'league_spartanextralight';

}

.trait{
	position:relative;
	top:40px;
	left:-250px;
	width:400px;
}
.menu-deroulant1{
	position:relative;
	top:87px;
	left:-15px;
	font-family: 'league_spartanextralight';
}

.menu-deroulant2{
	position:relative;
	top:87px;
	left:95px;
	font-family: 'league_spartanextralight';
}

.menu-deroulant3{
	position:relative;
	top:145px;
	left:-260px;
	font-family: 'league_spartanextralight';
}

.md3{
	position:relative;
	top:185px;
	left:30px;
	font-family: 'league_spartanextralight';
}

.menu-deroulant1 > a:after{
position:absolute;
top:-35px;
left:75px;
}



.menu-deroulant1:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;

}

.menu-deroulant1:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}

.menu-deroulant2 > a:after{
	position:absolute;
	top:-105px;
	left:60px;
	font-family: 'league_spartanextralight';
 
  
 
  
}

.menu-deroulant2:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
 
}

.menu-deroulant2:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}

.menu-deroulant3 > a:after{
position:absolute;
top:-105px;
left:65px;

  
 
  
}

.menu-deroulant3:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
  
}

.menu-deroulant3:hover > .sous-menu {
  animation: apparitionSousMenu 0.5s forwards;
  
}
.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 100%;
  text-align: left;
  overflow: hidden;
  max-height: 0;
 margin-top:0px;
  color:black;
  font-family: 'league_spartanextralight';
  

}


@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid green;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 35em;
    border-top: 3px solid black;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.sous-menu > li:hover {
  background-color: red;
  background: rgba(0, 255, 0, 0.15);
  font-family: 'league_spartanextralight';
}

.sous-menu > li > a {
  align-items: center;
  display: flex;
  height: 20px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  font-family: 'league_spartanextralight';
}

.sous-menu > li:hover > a {
  color: black;
 font-family: 'league_spartanextralight';
}


}