footer{
    background-color: white;
    box-shadow: 0px -5px 10px #000000c2;
    border-top: solid 1px #000;
    grid-area: foot;
}
.som{
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
.contact{
    padding: 10px 0 10px 0;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: auto;
    gap: 2em;
    grid-auto-flow: row;
    justify-content: center;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    ". reseaux .";
}
.reseaux{
    height: auto;
    grid-area: reseaux;
}
.reseaux h1{
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.lien, .lien_2{
    display: flex;
    justify-content: center;
    height: 100px;
}
.linkedin, .github, .insta, .x, .twitch, .yt{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
}
.lien a, .lien_2 a{
    display: inline-block;
    padding: 0 20px;
    transform: all 0.5s ease;
    transition: 0.3s;
}
.lien a p, .lien_2 a p{
    display: none;
    text-align: center;
}
.lien img, .lien_2 img{
    width: 50px;
}
.lien a img:hover, .lien_2 a img:hover{
    transform: translateY(-12%);
}
.lien a img:hover .lien a p, .lien_2 a img:hover .lien a p{display: block;}

/*.email{
    border: solid 1px black;
    border-radius: 10px;
    grid-area: email;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50px 50px auto;
    gap: 0;
    grid-auto-flow: row;
    justify-content: center;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "nom_pre"
    "sujet"
    "message";
}
.nom_pre{
    grid-area: nom_pre;
    display: grid;
    grid-template-columns: 49% 49%;
    grid-template-rows: auto;
    gap: 0;
    grid-auto-flow: row;
    justify-content: space-around;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "prenom nom";
}
.nom_pre .nom{
    grid-area: nom;
}
.nom_pre .prenom{
    grid-area: prenom;
}
.sujet{
    grid-area: sujet;
    text-align: center;
}
.sujet input, .nom_pre .nom input, .nom_pre .prenom input{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    border: solid 1px #000;
    border-radius: 10px;
}
.sujet input{
    width: 99%;
}
.nom_pre .nom input, .nom_pre .prenom input{
    width: 100%;
}
.message{
    grid-area: message;
    text-align: center;
    padding: 10px 0;
}
.message input{
    height: 100%;
    width: 99%;
    border: solid 1px #000;
    border-radius: 10px;
}
.sujet input::placeholder, .nom_pre .nom input::placeholder, .nom_pre .prenom input::placeholder, .message input::placeholder{
    font-size: 18px;
    padding-left: 10px;
    position: relative;
    color: rgb(0, 132, 255);
}
.sujet input::placeholder, .nom_pre .nom input::placeholder, .nom_pre .prenom input::placeholder{
    top: 50%;
    transform: translateY(-50%);
}
.message input::placeholder{
    top: 0;
}*/