/***********************************************************************Menue_Haut************************************************************************************************/


nav {                           /*créer le bandeau horizintale*/
    width: 100%;
    background: #fdabddbe;
    padding: 10px ;
    position: fixed;
    top: 0;
    
}


nav ul {                    /*permet de mettre la liste en ligne et sans les points*/
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    
}

nav a {                         /*sert à choisir la couleur des inglets de l'écriture etc*/
    display: block;
    width: 100px;
    height: 40px;
    background: #5fb983;
    color: white;
    text-align: center;
    line-height: 40px;
    
}


nav a:hover, nav a.active {                /*permet de choisir la couleur lorsque l'on passe sur un onglet du menu ou quand on est dessus*/
    background: #d77cb6;
}






















/*************************************************************************PAGE_CV********************************************************************************************************************/




body {                       /*on choisi la police le fond et les espaces intérieurs*/
    margin: 0;
    padding-top: 60px;
    
    font-family: Arial;
     background-color: #d77cb631;
}


main {                       /*créer le rectangle comme une feuille sur la page avec un fonc blanc pour qu'on puisse délimiter le cv*/
    display: flex;
    max-width: 1000px;
    margin: auto;
   background-color: #f5f5f5;
   
    justify-content: center;
    
}








main > section {               /*permet de prendre les sections qui sont uniquement dans le main */
    width: 60%;
    padding: 40px;
}



main h2 {                      /*permet de gerer le texte dans le bandeau blanc*/
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 2px solid #5fb983;
    padding-bottom: 6px;
}



































/********************************************************************************Page de books/film***************************************************************************************************/




#intro {                    /*on créer un cadre vert pour l'introduction*/
    background: #5fb983;
    color: white;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    
}



#livres h1{            /*aligne les titres des livres et films*/
    text-align: center;
}

#livres img {             /* centre et cadre correctement les images*/
    width: 100%;
    max-width: 200px;
  
     display: block;
    
     margin: auto;

}

#livres p {                   /*creer un cadre où il y a le texte et définie sa taille */
    
    margin: 30px;
    text-align: justify;
    line-height: 1.6;
    background-color: #d77cb675;
    padding: 20px;
    border: 2px solid #d77cb675;
    border-radius: 25px;
}



/***Partie pour les liens cliquables sur la deuxième image de la page books****/

#martin p {                    /*centre le cadre de texte et définis sa couleur*/
   
    max-width: 1000px;
    margin:auto;
    margin-top: 100px;
    background:#d77cb6;
    padding: 40px;
    color:#f5f5f5;
    font-family: Arial;


}

#martin h1 {           /*Centre le titre et définis sa police*/
    font-family: Arial;
    text-align: center;
    color:#5fb983;

}

















/*******************************************************************Pour la page audio***********************************************************/

h1{                      /*aligne le titre et donne sa couleur*/
    text-align: center;
    color: #d77cb6;
}


audio {                      /* centre l'audio et lui donne un fond*/
    display: block;
    width: 80%;
    max-width: 600px;
    margin: 20px auto;
    background: #5fb983; 
    border-radius: 10px;
    padding: 15px;
}



#image1, #image2 {                  /* mets les images  et les textes cote à cote */
    display: inline-block;
    width: 45%;
    margin: 20px 2%;
    vertical-align: top;
}

#image1 img, #image2 img {         /*gère la tailles des images */
    width: 100%;
    height: auto;
    border-radius: 5px;
}


.legende {                       /* on mets en italique la légende le centre aussi*/
    font-style: italic;
    color: #5fb983;
    text-align: center;
    margin-top: 10px;
}






















/**************************************************PAGE 5 avec la vidéo de l'iut vidéo grace à la balise*****************************************/


video {                             /*Permet de cadrer la vidéo correctement*/
    display: block;
    margin: auto;
    
    width: 100%;
    max-width: 800px;
    border: 2px solid #333;
    border-radius: 10px;
    
    margin-top: 100px;
}













/********************************************************Page 4 avec la vidéo importer de youtube**************************************************************/

#Video {                                 /*Ici on régle le cadre de la vidéo avec un ratio adapter au format viéo*/
    width: 100%;
    max-width: 800px;     
    aspect-ratio: 16 / 9;      /*On détaille le format de la vidéo*/
    margin-left: 400px;
    margin-top: 50px;
}





#Video iframe {            /*Permet le "zoom" de la vidéo dans le cadre qu'on a définis au pauravant*/
    width: 100%;          
    height: 100%;
    
}