/* ces lignes de codes introduise la police Caviar Dream dans le code utiliser par toutes les pages */
@font-face {
    font-family: "Caviar Dreams";
    src: url("/font/CaviarDreams.ttf") format("truetype");
}

@font-face {
    font-family: "Caviar Dreams bold";
    src: url("/font/CaviarDreams_Bold.ttf") format("truetype");
}

/* configuration de notre body : image d'arrière plan, couleur de fond */
body {
    background-color: #ffedc6;
    color : white;
    
}

/* Ceci sert a modifier les dimensions et les marges du logo */
#Logo img {
    height: 100px;
    margin: 30px; 
    left : 0px;
    top:0px;     
}
/* Toutes cette partie sert a modifier le visuel et le positionnement de la barre de navigation */
    nav ul {
        list-style-type: none;
        margin : 0;
        padding: 15px;
        height: 35px;
        position:fixed;
        left: 1100px ;
        top:0px;
        width: auto;
        overflow: hidden;
        text-decoration: none;
    }

    nav li {
        float : left;  
        text-decoration: none;
        
    }

    nav li a {
        display : block;
        color : rgb(255, 255, 255);
        text-align: center;
        padding: 10px 15px;
        text-decoration: none;
        font-family:Caviar Dreams;
    
        
    }
    li a:hover {
        background-color: #7d58b8;
        color: white;
        transition-duration: 0.5s;

    }
/* Fin de la partie sur la barre de navigation */


/* cette partie est la partie sur le footer et ces diférentes listes qui ont chacunes été placé a un endroit différent */
    #footer {
        border-radius : 5px;
        font-family: Caviar Dreams;
        position:relative;
        top :700px;
        left:0px;
        background:rgba(196, 140, 140, 0.6);
        width:100%;
        margin-left:0;
        height:auto;
        display:inline-block;
        z-index: 1;
    
    }
    #footer #site ul {
        position:relative;
        list-style-type: none;
        text-align: left;
        left: 120px;
    }

    #footer #site ul p {
        font-size:30px;
        position: relative;
        left: 7px;
    }
    footer a {
        text-decoration : none;
        color: black;
    }

    #footer #site ul li {
        position: relative;
        bottom : 15px;
        left: 3px;
    }

    #footer #gp ul {
        position:absolute;
        list-style-type: none;
        text-align: left;
        left: 600px;
        bottom: 60px;
    }

    #footer #gp ul p {
        font-size:30px;
        position: relative;
        
        
    }

    #footer #gp ul li {
        position: relative;
        bottom : 15px;
        left: 60px;
    }

    #footer #autre ul {
        position:absolute;
        list-style-type: none;
        text-align: left;
        left: 1200px;
        bottom: 60px;
    }

    #footer #autre ul p {
        font-size:30px;
        position: relative;
        left: 35px;
    }

    #footer #autre ul li {
        position: relative;
        bottom : 15px;
        left: 3px;
    }
/* fin de la partie sur le footer */


/* style et position de la div qui contient les moyens de communication de la marque*/
#contact {
    position: absolute;
    left: 500px;
    width: 600px;
    height:450px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    
}


/* ces lignes de code servent à positionner les éléments dans la div contact*/ 
    .instagram img{
        position: absolute;
        width:150px;
        left: 10%;
        top:200px;
    }

    .Twitter img{
        width:150px;
        position:absolute;
        left: 65%;
        top:200px;  
    }

    #mail p {
        font-family: Caviar Dreams;
        position: absolute;
        top:85%;
        left:12%;
        font-size : 25px;
        font-family: helvetica;
        width : 1000px;
    }
    #contact h4 {
        position: absolute;
        font-family: Caviar Dreams;
        font-size: 30px;
        text-align: center;
        padding: 0px;

    }
  
    
/*Ce code css, sert a mettre en arrière plan la vidéo*/
video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}


/* positionnement du formulaire*/
form {
    position: relative;
    width: 100px;
    top: 500px;
    left: 40%;

}
/* Positionnement des éléments dans le formulaire*/
form input, textarea {
    background : white;
    border : 0.5px solid white;
    border-radius : 4px;
}

input, textarea, select, button {
    left : 50px;

}

#email {
    position: absolute;
    bottom : 140px;
}

#Prénom {
    position: absolute;
    bottom: 170px;
}

#Nom {
    position: absolute;
    bottom: 200px;
}

#submit {
    position: absolute;
    bottom : 200px;
    left: 10000px;
}

#Problème {
    position: absolute;
    bottom: 110px;
}

button {
    position: absolute;
    bottom : 30%;
    left : 20%;
    border : 0.5px solid white;
    border-radius: 4px;
    background-color: white;
    
}

#myForm  {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    width: 350px;
    height: 250px;
}

#button2 {
    position: absolute;
    left:60%;
    bottom:30%;
}

#boite {
    position: absolute;
    bottom : 0%;
    left : 5%;
}

/* fin du css pour positionner et styliser les éléments dans le formulaire*/