.liste {     /*pour avoir un encadrement autour de la liste*/
    display: flex;
    gap: 20px;
    margin: 0 auto;
    margin-top: 10px;
    list-style-type: none;
    border: 1px solid #7731D4;
    border-radius: 10px;
    justify-content: center;
}

.liste a { /*pour ne rien avoir sur le texte de la liste et pas de couleur*/
    border: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #ffffff;
}
a:hover{  /*pour que lorsque je passe la souris sur le texte de la liste il la surligne*/
     color:#500093 ;
}

.liste .actuel {  /*pour que ca soit violet quand je suis dans la page*/
    color: #7731D4;
}

body {   /*pour avoir une couleur de fond dans mon site et une police d'écriture*/
    color:white; 
    background-color: #0F0A23;
     margin: 0 5%;
     font-family: Helvetica, sans-serif;
}

img {border-radius: 20px; /*pour que les images soit au centre et ai une bordure arrondie*/
    display: flex;
    justify-content: center;
    align-items: center;
   }

#page{    /*pour avoir une sorte de page en fond de cv*/
    background-color: #2B1D47;
    border-radius: 20px;
    padding: 20px;  
    margin-top: 40px;
}
#one{    /*pour le texte sur one piece*/
    background-color: #2B1D47;
    border: solid 1px #7731D4;
    margin-top: 20px ;
    padding: 5px;
    border-radius:10  ;
    margin-bottom: 50px;
}
#tbate{ /*pour le texte sur the beginning after the end*/
    background-color: #2B1D47;
    border: solid 1px #7731D4;
    margin-top: 20px ;
    padding: 5px;
    border-radius:10 ;
    margin-bottom: 50px;
}
.centre{ /*pour que les images de one piece et the beginning after the end soit au centre*/
 display: flex;
 flex-direction: column;
 align-items: center;
}

#iut{  /*pour que l'image de l'iut soit à gauche et avoir a sa droite un texte*/
    float: left;
  width: auto;
  height: 550px;
margin-right: 50px;
margin-top: 10px;
}

#textiut{  /*pour que le texte soit a droite et l'image à sa gauche*/
background-color: #2B1D47;
border: solid 1px #7731D4;
margin-top: 10px;
padding: 10px;
border-radius: 10px;
margin-left: 780px;
margin-right: 20px;
}
#videoytb{ /*c'est pour la taille de la vidéo sur l'écran et qu'elle soit centrer a droite en bas du texte*/
    width: 560px;
    height:400px;
    margin-top: 50px;
    float:right;
    margin-right: 150px;
}


#carré{     /*pour créer une sorte de zone avec un fond pas trop violet sur la page interet et d'avoir une separation en 4 carré et de même pour les autre carré*/
    display: flex;
    background-color: #2B1D47;
    border-radius: 20px;
    margin-bottom: 450px;
}

#carré1{ 
    height: 950px;
     width: 50%;

}

#carré2{
    height: 950px; 
    width: 50%;
     border-left: 1px
     solid white;
}

.title{ /*mettre un titre au milieu*/
    justify-content: center;
   text-align: center;
}
.barre{ /*mettre une barre horizontale*/
    border: 1px solid white;
    width: 90%;
    position: absolute ;
    bottom: 35%;
    left: 95px;
}

.mma{  /*pour mettre l'image a une certaine position à l'aide de position*/
    width: 700px;
    height: auto;
    position: absolute;
    top: 22%;
    left: 10%;
}
.play{   /*pour mettre l'image a une certaine position à l'aide de position*/
    width: 650px;
    height: auto;
    position: absolute;
    top: 22%;
    right: 10%;
}
.echec{ /*pour mettre l'image a une certaine position à l'aide de position*/
    width: 600px;
    height: auto;
    position: absolute;
    top: 67%;
    left: 13%;
}

.audio{  /*afin de positionner l'audio en bas au milieu*/
    width: 350px;
    height: auto;
    margin-bottom:30% ;
    margin-left: 700px;
}

.passion{ /*pour mettre la vidéo a une certaine position à l'aide de position*/
    width: 650px;
    height: auto;
    position: absolute;
    top: 70%;
    right: 10%;
    border-radius: 10px;
}

.villetitre{  /*mettre le titre de town au centre*/
    text-align: center;
}


.villephoto1{  /*la position de la photo de la mairie*/
    margin-left: 30%;
    margin-bottom: 40px;
}

.villephoto2{   /*la position de la photo de du parc*/
    margin-left: 35%;
    margin-bottom: 5%;
}