/*border: 5px solid #addc2c;*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #111812;
}

/* BODY, corp du site */

body{
    font-family: Arial, sans-serif;
    /*background color*/
    background: #9FA0A8;  /* fallback for old browsers */
    height: 100%;
    width: 100%;
}

/* -----------------------------------HEADER --------------------------------------*/
header{
    position: fixed;

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 50px;
    background: linear-gradient(#ffffff, #fdfdfca8);

    box-shadow: 10 2px 10px rgba(0,0,0,0.3);

    z-index: 900;
}

/* LOGO ou pernom Nom*/

.logo{
    padding-left: 50px;
    display: flex;
}

.logo a{
    color: brown;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.1s;
}

.logo a:hover{
    text-decoration: none;
    font-size: 24.5px;
    color: #969170;
    transition: 0.3s;
}

/* Case de rangement menu */

nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

nav ul{
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li{
    position: relative;
    padding-bottom: 1px;
    display: flex;
}

/* Texte du menu */

nav ul li a{
    text-decoration: none;
    color: brown;
    font-size: 16px;
    padding-top: 10px;
    display: flex;
    transition: 0.1s;    
}

nav ul li a:hover{
    color: #EFEEEF;
    transition: 0.3s;
}

/* MENU DEROULANT */

.dropdown-menu{
    position: absolute;

    top: 100%;
    left: 0;

    display: none;
    flex-direction: column;


    background-color: #111812;

    min-width: max-content;

    border-radius: 8px;

    padding: 5px;

    overflow: hidden;
    gap: 0px;
}


/* texte DU SOUS MENU */

.dropdown-menu li{
    width: 100%;
}

.dropdown-menu a{
    display: block;

    padding: 12px 25px;

    white-space: nowrap;

    text-decoration: none;
    color: #EFEEEF;
}

.dropdown-menu a:hover{
    background-color: #EFEEEF;
    border-radius: 8px;
    color: #111812;
}

.dropdown:hover .dropdown-menu{
    display: flex;
}

/* CONTENU globale c'est la que je met toute la page du site et j'ecrit pour bien voir la limite.*/

main{
    padding-top: 0px;

    text-align: center;
}

h2{
    font-size: 230%;
    text-decoration: none;
    color: #111812;
}

/*image principale*/

.imageContainer{
    width: 100%;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
}

.imageContainer img{
    width: 100%;
    display: block;
}

.imageContainer .mainGroupImg{
    width: 100%;    
}

.imageContainer::after{
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 250px;

   background: linear-gradient(
        to bottom,
        #7d785800 0%,
        #9fa0a871 80%,
        #9FA0A8 100%
    );
    pointer-events: none;
}


/*on passe aux parties specifique les blocs avec les devantures de pages*/
/* ----------------------------------------------- PARTIE STUDENT------------------------------------------------------- */

#onglet-student{
    display: flex;
    align-items: center;
    background-color: #E2DFD9;
    border-radius: 20px;
    margin-right: 3%;
    margin-left: 3%;
    box-shadow: 10 2px 10px black;
    flex-wrap: wrap;
    justify-content: space-around;
}

#onglet-student img{
 size: 100%;
}

.books{
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    margin-bottom: 5%;
}

.book img{
    width: 100%;
    height: auto;
    display: block;
}

.book{
    transition: 0.5s;
    width: 100%;
    max-width: 600px;
    min-width: 120px ;
    height: auto;
}

.book:hover{
    transform: translateX(10px);
    transition: 0.5s;
    rotate: -2deg;
}

.book:last-child{
    margin-left: 40px
}

.student-text{
  color: #111812;
}

/* --------------------------------------------------partie carousel!------------------------------------------------- */

/*container pour l'affichage*/

.container {
    overflow: hidden;
    background-color: white;
    border-radius: 20px;
    /* cache les elements du container*/
    display: flex;
    gap: 5vw;
    margin-right: 3%;
    margin-left: 3%;
    padding: 3vw 0vw;
    box-shadow: 10 2px 10px black;
    justify-content: space-around;
    align-items: center;
}

/*definition du carousel*/
#OngletPWorks .carousel{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    margin-right: 20px;
    margin-left: 20px;
    position: relative;
    /*poser delativement a son parent (container)*/
    border: 2px solid black;
}

/*definition de léelement contenant les diapo*/
#OngletPWorks .carousel-inner{
    display: flex;
    /*affiche les elements en ligne*/
    overflow: hidden;
    height: 100%;
    width: 100%;    
    /*hauteuer egale a 100% de la hauteur de la vue*/
    flex-wrap: nowrap;
    /*Empeche les elements de se placer sur plusieurs lignes*/
}

/*def des diapo*/
#OngletPWorks .slide{

    flex: 0 0 100%;
    /*largeur de chaque diapo est de 100% */
    /*hauteur de chaque diapo est a 100% */
    transition: .5s ease-in-out;
    /* animation douce entre les diapo*/

    aspect-ratio: 16 / 9;
}

/*definition de l'affichage de l'image de chaque diapo */
#OngletPWorks .slide img{
    width: 100%;
    /*Largeur de l'immage a 100% */
    height: 100%;
    object-fit: cover;
    /*Couvre tout l'espace dispo */
    display: block;

}

/* definition des bouton de controle du carousel */
#OngletPWorks .carousel-controls{
    position: absolute;
    /*les boutons sont absoluments placer*/
    z-index: 5;
    /*Ils sont placer au dessu des autres elements */
    left: 10%;
    /*la distance a gauche est de 10%*/
    right: 10%;
    bottom: 10%;
    display: flex;
    /* affiche les boutons en ligne */
    justify-content: space-between;
    /*espacement egale entre les boutons */
    
}

/*style des boutons de controle */
#OngletPWorks .carousel-controls button{
    padding: 10px;
    /*ajout de padding pour un meilleur controle*/
    background-color: #C5C69D;
    transition: 0.1s;
}

#OngletPWorks .carousel-controls button:hover {
    color: #C5C69D;
    background-color: #7d7858;
}

#OngletPWorks .carousel-controls button:active{
    transform: scale(0.95);
}


/*definition des points du carousel */
#OngletPWorks .carousel-dots{
    position: absolute;
    /*les points sont absoluements positionés */
    z-index: 5;
    left: 50%;
    right: 50%;
    bottom: 10%;
    display: flex;
    justify-content: center;
    /*centrage des points*/
}

/*style des points de controle*/
#OngletPWorks .carousel-dots .dot{
    border-radius: 50%;
    /*les points sont en forme de cercle*/
    margin: 5px;
    /*ajoute une marge pour un meilleur controle*/
    cursor: pointer;
    /*curseur en forme de main pour un meilleur controle */
}

#OngletPWorks .carousel-dots .active{
    border: 10px solid #7d7858;
    /*bord de 10 px quand le points est actif*/
}

#OngletPWorks .carousel-dots .inactive{
    border: 10px solid #111812;
}

#OngletPWorks .texte-side-carousel{
    justify-content: space-around;
    margin-left: 70px;
}

@media screen and (max-width: 768px){

    .container{
        flex-direction: column;
        gap: 30px;
    }

    #OngletPWorks .texte-side-carousel{
        margin-left: 0;
        text-align: center;
    }

    #OngletPWorks .carousel{
        width: 95%;
    }

}
    


/*--------------------------------------PARTIE  ABOUTE---------------------------------------------------------------------*/

#OngletAbout .aboutP{
    display: flex;
    align-items: center;
    gap: 5vw;
    background-color: white;
    border-radius: 20px;
    margin-right: 3%;
    margin-left: 3%;
    padding: 3vw 0vw;
    box-shadow: 10 2px 10px black;
    flex-wrap: wrap;
    justify-content: space-around;
}

#OngletAbout .image-profile{
    display: flex;
    width: 300px;
    height: 300px;
    margin-left: 50px;
}

#OngletAbout .image-profile img{
    border-radius: 50%;
}

#OngletAbout .texte{
    width: 70vw;
    text-decoration: none;
}



/*--------------------------------------PARTIE  CONTACT---------------------------------------------------------------------*/

#OngletContact{
    height: 100%;
    width: 100%;
}

#OngletContact .contactP{
    display: flex;
    align-items: center;
    gap: 5vw;
    background-color: white;
    border-radius: 20px;
    margin-right: 3%;
    margin-left: 3%;
    padding: 3vw 0vw;
    box-shadow: 10 2px 10px black;
    justify-content: space-around;
    
}

#OngletContact .contact-logos{
    display: flex;
    width: 70vw;
    justify-content: space-around;
}

#OngletContact img{
    height: 100px;
}

#OngletContact .contact-me{
    display: flex;
    height: 100px;
    align-items: center;
    margin-left: 150px;
}