/* Importation de la famille d'écriture LATO */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&display=swap');

/* Reset de mes éléments pour enlever le style par défaut. */
/* Pour récupérer tous les éléments, j'utilise l'étoile */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none; /* permet d'enlever par exemple le surlignage des liens */
    list-style-type: none; /* permet d'enlever les puces de mes 'li' */
}

body{
    font-family: 'Lato', sans-serif;
}


/* Gestion de la navigation principale */
nav{
    background-color: #2C3E50;
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
    font-size: 20px;
    text-transform: uppercase;
    position: fixed;
    width: 100%;
    z-index: 100;
}

nav a{
    color: white;
} 

nav ul{
    display: flex;
}

nav li{
    margin: 0 10px;
}

nav > a{
    font-size: 25px;
}

.hamb{
    display: none;
}

/* Gestion de zone de présentation */
header{
    background-color: #18BC9C;
    min-height: calc(100vh - 70px); /* vh => view height. Correspond à la hauteur de le fenêtre
    */
    position: relative;
    top: 70px;
}

header > div {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

header img{
    display: block;
    margin: 0 auto;
}

h1{
    text-align: center;
    font-size:80px;
    color: white;
    padding-top: 50px;
    /* margin-top: 50px; */
}

.ligne{
    display: block;
    width: 20%;
    height: 2px;
    background-color: white;
    margin: 20px auto;
}

header h2{
    text-align: center;
    color: white;
    letter-spacing: 5px;
}


/* MAIN CONTENU */
main section {
    min-height: 100vh;
    padding: 90px 0;
}

main section h2 {
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
}

/* Section Portfolio */

.ligneBlack{
    display: block;
    width: 20%;
    height: 2px;
    background-color: #2C3E50;
    margin: 20px auto;
}

#portfolio{
    /* padding: 0 20px; */
    /* padding-right: 20px;
    padding-left: 20px; */
    padding: inherit 20px;
    /* inherit me permet de garder la valeur définit précédement. (ne change pas la valeur) */
}

#portfolio div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
    /* column-gap: 20px; */
    /* row-gap: 20px; */
}

#portfolio div a{
    width: 400px;
}

#portfolio div img{
    width: 100%;
}

/* Gestion de la zone A Propos */
#aPropos{
    background-color: #18BC9C;
    min-height: 100vh;
    color: white;
}

#aPropos div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 50px;
}

#aPropos article{
    width: 300px;
    font-size: 20px;
}

#aPropos h3{
    text-align: center;
    margin-bottom: 15px;
    color: #2C3E50;
    font-weight: 400;
}

#aPropos a{
    color: white;
    display: block;
    margin: 50px auto;
    border: 1px solid white;
    width: 10%;
    text-align: center;
    padding: 15px 10px;
}

#aPropos i{
    margin: 0 10px;
}
/* Utilisation de la pseudo classe ":hover" qui permet de définir un style particulier au moment du survol */
#aPropos a:hover{ 
    background-color: white;
    color: #2C3E50;
    border-color: #2C3E50;
    border-style: dashed;
}

/* Gestion de la section Contact */
#contact form {
    color: #2C3E50;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

#contact form div{
    width: 50%;
    margin: auto;
    min-width: 300px;
}

#contact form label{
    font-size: 20px;
}

#contact form input, #contact form textarea{
    margin: 20px auto;
    border: 1px dashed #2C3E50;
    width: 100%;
    border-radius: 10px;
    padding-left: 10px;
}

#contact form input{
    height: 30px;
}

#contact form button{
    width: 125px;
    padding: 20px;
    border-radius: 10px;
    border: none;
    background-color: #18BC9C;
    color: white;
    font-size: 20px;
    margin: 15px auto 0 auto;
}

/* Exercice : Changer la couleur du bouton au survol et mettre la couleur #128F76 */
#contact form button:hover{
    background-color: #128F76;
}

/* Exercice 2 : Changer le Background des input et textarea lorsque l'on écrit à l'interieur. Mettre la couleur #18bc9b47 */
#contact form input:focus, #contact form textarea:focus{
    background-color: #18bc9b47;
}


/* Effet de Parallax */
#parallax{
    height: 50vh;
    background: url(../img/code.jpg);
    background-size: cover; /* la valeur "cover" permet à mon image de prendre toute la largeur de son parent. 
    Il y a l'option "contain" qui elle permet de prendre toute la hauteur de son parent.*/
    background-attachment: fixed;
}


/* Gestion de la section Témoignages */
#temoignages{
    background-color: #18BC9C;
    min-height: auto;
}

#temoignages h2{
    color: white;
}

#temoignages .conteneur{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 50px;
    padding-top: 80px;
}

#temoignages .conteneur .card{
    max-width: 300px;
    background-color: white;
    border-radius: 30px;
    margin-bottom: 30px;
}

#temoignages .conteneur .img-div, #temoignages .etoile-div{
    text-align: center;
}

#temoignages .contenu-div{
    padding: 10px 40px;
}

#temoignages .etoile-div{
    color: #c7ab0d;
    padding-top: 10px;
}


#temoignages .conteneur img{
    margin-top: -50px;
    /* border-radius: 100vmax; permet de faire un cercle également pour les images rectangle */
    border-radius: 50%; /* fonctionne pour les images carré */
    /* transform: translateY(-50%); Permet de changer la position du point d'origine. Par défaut il se trouver en haut à gauche. */
}


/* Gestion du FOOTER */

footer{
    background-color: #2C3E50;
    color: white;
    text-align: center;
}

footer h4{
    font-size: 20px;
    margin-bottom: 10px;
}

footer > div:first-child{
    display: flex;
    justify-content: space-around;
    padding: 30px 0;
}

footer ul {
    display: flex;
    justify-content: space-between;
}

footer ul a {
    color: white;
}

footer ul a:hover{
    color: #18BC9C;
}

footer ul i {
    font-size: 35px;
}

footer > div:last-child{
    background-color: #1A252F;
    padding: 20px 0;
}

/* Création d'un breakpoint en dessous de 720px le code sera executé */
@media screen and (max-width: 720px) {

    /* body{
        background-color: aqua;
    } */

    nav ul{
        display: none;
        padding-top: 50px; 
    }

    .hamb{
        display: flex;
    }

    .fa-window-close{
        display: none;
    }

    #slide{
        width: 50%;
        text-align: right;
    }

}