header h1 {
    color: #333;
    text-transform: uppercase;
    font-family: "Zain"; 
    font-size: 4vh;
    text-align: center ;
}

body {
    background-color: #ced4da;
    margin: 0px; 
    padding: 0px;

}

.hautdepage{
    max-width: 50px;
    max-height: 50px;
    bottom: 10px;
    right: 10px;
    position: fixed;
    background-color: white;

}
/*-------------------Page index-------------------*/


.grandconteneur { /*Le conteneur qui crée la marge */
    width: 90%;
    height: 90%;
    margin: 10px auto ;
    padding: 20px;
    background-color: #f4f4f9 ;
    border-radius: 20px;
    box-shadow: 0 10px 10px 5px #33415c;
    box-sizing: border-box;

}


.conteneurcase { /*Le conteneur a l'interieur du grand conteneur qui va nous permettre d'obtenir les petites cases */
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 50px;

}

.case {   /*On applique les propriétés au cases */
    background-color: #e2eafc;
    border: 2px solid lightgray;
    border-radius: 30px;
    text-decoration: none; 
    color: #333; 
    display: grid;
    grid-template-rows: 3fr 1fr;
    min-height: 35vh;
    min-width: 45vh;
    
    overflow: hidden; 
    transition: transform 0.3s ease;
}


.case:hover {  /*Nous permet de mettre des effets quand on passe la souris sur les cases */
    transform: translateY(-10px); 
    box-shadow: 0 8px 15px rgba(112, 169, 255, 0.445);
}

.caseimage {   /*Une sous case qui contient l'image */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 10px;
    min-height: 25vh;
    border-radius: 20px;
}

.casetexte {   /*Une sous case qui contient le texte */
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 10px 0;
    font-size: 2.4em;
    font-weight: bold;
    font-family: "Zain"; 

}

.caseimage1 { background-image: url('image/cv.png'); } /*On mets les images dans les sous cases images */
.caseimage2 { background-image: url('image/interet.png'); } 
.caseimage3 { background-image: url('image/livre-ouvert.png')}
.caseimage4 { background-image: url('image/trappes.png')} 
.caseimage5 { background-image: url('image/IUT-image.PNG') } 
.caseimage6 { background-image: url('image/cinema.png') } 


/*-------------------Fin Page index-------------------*/



/*-------------------Menu de navigation-------------------*/
nav { /* Applique les propriétés a notre menu de navigation */

    margin:15px auto;
    font-family: "Zain";
    width: 95%;
    

}

.menuhome{ /* Gere la case pour revenir a la page index */

    flex-grow: 0;
}

.pageact{ /* Applique des propriétés a la case qui correpsond a la page sur laquelle nous sommes */

    background-color: #184e77;
    transform: translateY(-2px);


}

nav ul{  /* Gère la liste définies pour le menu de nav */

    display:flex;
    list-style: none;
    margin: 0; 
    padding: 0;
    width: 100%;
}

nav li a { /* Gère les différents liens du menu de nav */

    text-decoration:none;
    color: black;
    font-size:25px;
    padding: 20px 20px;
    display:block;
    text-align: center;

}

nav li{ /* Gère les éléments de la liste du menu de nav */
    flex: 1 1 0;
    border: 2px solid black;
    box-shadow: 0 10px 10px 1px #33415c;
    transition: transform 0.3s ease;
    background-color: #168aad;

}

nav li:hover { /*Crée un effet sur les cases du menu de naviguation quand on passe la souris dessus */
    transform: translateY(-10px); 
    box-shadow: 0 8px 15px rgba(112, 169, 255, 0.445);
    background-color: #1e6091;

}

/*-------------------Fin Menu de navigation-------------------*/


/*-------------------Début CV-------------------*/

.marge1 { /*Crée un conteneur avec une marge au milieu de la page pour le cv */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin: 50px auto;
    background-color: #e9ecef;
    padding: 30px;
    box-shadow: 0 10px 10px 5px #33415c;
    background-size: contain;
}

.marge1 h1{ 

    text-align: center;
    margin-top: 0;
    font-family: Arial, Helvetica, sans-serif;

}

.marge1 p{ 

    margin-bottom: 20px;
    font-family: "sans-serif";
    font-size: 1em;

}

.conteneurcv{ /*On crée une marge dans le conteneur de maniere a ce que l'ensemble des éléments ai une marge par rapport au conteneur marge1 */

    display: flex;
    gap: 30px;
}


.marge1 hr { 
    border-color: grey;
}


.marge1 h2{
    margin-bottom: 30px;
    font-family: arial;

}


.marge1 li{
    margin-bottom: 20px;
    font-family: "sans-serif";
    font-size: 1em;
}

.marge1 img{
    border-radius: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cvgauche{ /*Crée un conteneur pour les éléments sur la parie gauche du cv */
    flex: 1;
    padding: 15px;
    margin: 15px;
}

.cvdroite {
    flex: 2;
    padding: 15px;
}


/*-------------------Fin CV-------------------*/

/*-------------------Debut Page: My interest,My town et My IUT  -------------------*/
.marge2 { /*On crée un conteneur pour toutes les pages */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin: 50px auto;
    border: 2px solid;
    border-radius: 10px;
    background-color: #e9ecef;
    padding: 30px;
    box-shadow: 0 10px 10px 5px #33415c;
    background-size: contain;

    text-align: center;
}

.marge2 p {
    font-size: 23px;
    font-family: "sans-serif;";
}

.marge2 h2 {
    font-size: 30px;
    font-family: arial;
}


/*-------------------Fin Page: My interest,My town et My IUT  -------------------*/