*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-image: url(img/background/background_105_v3.jpg);
    scroll-behavior: smooth;
}


body {
    font-family: "Montserrat Alternates",Arial, Helvetica, sans-serif;
    
}

h1 {
    font-weight: bold;
    text-align: center;
    font-size: 3em;
    text-shadow: 2px 2px 2px;
}


header :last-child {
    border: 7px solid rgb(0, 0, 0);
    font-weight: bold;
    padding: 3em;
    font-size: 1.3em;
    background-color: rgba(10, 38, 79, 0.749);
    box-shadow: 4px 4px 4px rgba(20, 23, 40, 0.571);
    max-width: 800px;
    margin-right: auto; 
    margin-left: auto;
    margin-bottom: 100px;
    box-sizing: content-box;
    border-radius: 32px;
    text-align: center;

}


a{
    text-decoration: none;
    color: rgb(9, 14, 20);
}

nav {
    text-align: center;
    margin-left: auto;

}


nav ul {
    /* pour qu'il n'ai pas de point avant les éléments de la liste */
    list-style-type: none;     
    font-size: 2em;
    font-weight: bold;
}


.sap {
    margin-bottom: 50px;
    background-position: 300px 50px 40px;
    background-color: rgb(255, 255, 255);
    background-size: 500px ;
    box-shadow: 2px 2px 2px rgba(20, 23, 40, 0.571);
    border-radius: 3px;
    height: 70px;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 1px;
    
}

.sap:hover {
    background-image: url(img/bouton_nav/hikaru_utada.png);
    transition: all 0.3s ease-in-out;
    box-shadow: 6px 6px 6px;
}

.vtth {
    margin-bottom: 50px;
    box-shadow: 2px 2px 2px rgba(20, 23, 40, 0.571);
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: left 65% 35%;
    background-size: 500px ;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 1px;

}

.vtth:hover {
    background-image: url(img/bouton_nav/kh_3582.jpg);
    transition: all 0.3s ease-in-out;
    background-color: rgb(24, 24, 33);
    box-shadow: 6px 6px 6px; 
}

.d {
    margin-bottom: 50px;
    box-shadow: 2px 2px 2px rgba(20, 23, 40, 0.571);
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: 300px 200px 40px;
    background-size: 500px;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    text-shadow: 1px 1px 1px;
}

.d:hover {
    background-image: url(img/bouton_nav/p3_all_out.png);
    transition: all 0.3s ease-in-out ;
    box-shadow: 6px 6px 6px; 
}

.tte {
    margin-bottom: 50px;
    box-shadow: 2px 2px 2px rgba(20, 23, 40, 0.571);
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    height: 70px;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 1px;
}

.tte:hover {
    background-image: url(img/bouton_nav/to_the_edge.png);
    transition: all 0.3s ease-in-out;
    box-shadow: 6px 6px 6px; 
}

.ef {
    margin-bottom: 50px;
    box-shadow: 4px 4px 4px rgba(20, 23, 40, 0.571);
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center 300px 50px 50px;
    background-size: 500px;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 1px;
}

.ef:hover {
    background-image: url(img/bouton_nav/ff14_final.jpg);
    transition: all 0.2s ease-in-out;
    box-shadow: 6px 6px 6px;
}   

.f {
    margin-bottom: 50px;
    box-shadow: 4px 4px 4px rgba(20, 23, 40, 0.571);
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center 300px 50px 50px;
    background-size: 500px;
    padding: 20px;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 1px;
    margin-bottom: 500px;
}

.f:hover {
    background-image: url(img/bouton_nav/mini_background_reel.jpg);
    transition: all 0.2s ease-in-out;
    box-shadow: 6px 6px 6px;
}

a {
    color:rgba(0, 0, 0, 0.872);
}

section h2 {
    margin-top: 290px;
    font-size: 3em;
    margin-right: 500px;
}

section {
    padding: 1.9em;
    background-color: rgb(79, 179, 209);
    margin-top: 500px;
    border-radius: 8px;
    box-shadow: 4px 4px 4px rgba(20, 23, 40, 0.571);
    max-width: 800px;
    margin-right: auto; 
    margin-left: auto;
    margin-bottom: 1px;
    padding-top: 1px;
    position: relative;
}

#preview-section {
    width: 400px;
    transform: translateY(-1050px);
    margin-left: 550px;
}


section p {
    font-size: 1.3em;
    line-height: 1.7em;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

section:hover {
    transition: all 0.3s ease-in-out;
    box-shadow: 5px 5px 5px;
    text-shadow: 1px 1px 1px;
    background-color: rgb(32, 112, 174);
}

.youtube {
    box-shadow: 2px 2px 2px;
    width : 40px; 
    padding : 40px;
    padding-top: 20px;
    padding-left: 30px;
    height : 10px;
    border-radius: 16px;
    margin-left: 600px;
    /* pour donner l'asspect du logo de youtube */
    background-color: rgb(212, 30, 30);
}

.youtube:hover {
    box-shadow: 5px 5px 5px;
    transition: all 0.2s ease-in-out;
}


button {
    border-radius: 2px;
    box-shadow: 2px 2px 2px;
    border-radius: 4px;
    padding: 10px;
    font-weight: bold;
    box-shadow: 1px 1px 1px;
    background-color: rgb(3, 99, 202);
    border: none;
}

button:hover {
    background-color: rgb(32, 67, 128);
    transition: all 0.2s ease-in-out;
    box-shadow: 5px 5px 5px;
}

audio {
    margin-left: 350px;
    /* pour que l'audio soit caché */
    display: none;
}



footer {
    max-width: 4000px;
    height: 950px;
    margin-top : 150px;
    background-color: rgb(56, 176, 219);
    box-shadow: 8px 8px 8px;
    padding: 25px;
    margin-top  : 500px;

}



footer:hover {
    background-color: rgb(37, 153, 173);   
    transition: all ease-in-out 0.3s;

}

summary {
    /* change l'aspect du curseur */
    cursor: pointer;
}

summary:hover {
    text-shadow: 1px 1px 1px;
}


footer ul {
    list-style-type: none;
}


form {
    border : 2px solid;
    border-right: 8px solid;
    width: 800px;
    height: 650px;
    border-radius: 10px;
    padding : 25px;
    background-color: rgb(46, 125, 190);
    margin-left: auto;
    margin-right: auto;
    margin-top: 900px;
    padding-top: 2px;
}

form:hover {
    transition: all 0.3s ease-in-out;
    box-shadow: 8px 8px 8px;
    background-color: rgb(32, 112, 174);
}

input[type="submit"] {
    border-radius: 2px;
    box-shadow: 2px 2px 2px;
    border-radius: 4px;
    padding: 5px;
    font-weight: bold;
}

input[type="submit"]:hover {
    background-color: gray;
    transition: all 0.2s ease-in-out;
}


input[type="text"]:hover {
    box-shadow: 3px 3px 3px;
    transition: all 0.2s ease-in-out;
}

.ensemble {
    font-weight: bold;
    margin-bottom: 40px;
}

textarea {
    width: 200px;
    border-radius: 8px;
    padding: 5px;
}

textarea:hover {
    box-shadow: 3px 3px 3px;
    transition: all 0.2s ease-in-out;
}

head:last-child{
    width : 3rem
}

audio {
    margin-right: 300px;
}



.play, .stop {
    border-radius: 4px;
    box-shadow: 2px 2px 2px;
    margin-left: 20px;
    width: 60px;
    height : 60px;
}

img {
    width : 200px;
    position : absolute;
    top: 150px;
    right: 120px;
}


footer ul {
    font-size: 1.2em;
}

.ouvrir {
    float: right;
}

.fermer {
    background-color: rgb(93, 130, 130);
    margin-left: 320px;
    transform: translateY(-385px);  /* Fait remonter l'élément de 50px */
}

.sum {
    box-shadow: 2px 2px 2px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    width : 100px;
    background-color: rgb(255, 255, 255);
}

.sum:hover {
    transition: all 0.3s ease-in-out ;
    background-color: rgb(129, 176, 184);

}


#helpaudio, #helpimg {
    font-size: 0.7em;
}

alt {
    font-weight: bold;
}