.body2 {
    display: block;

    margin: 0;
    font-family: sans-serif;
    background-color: rgb(54, 54, 54);
}

a:visited {
    color: #0000cc;
}

.logo_login {
    display: flex;
}

header {
    height: 170px;
    background-color: whitesmoke;
}

header p {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 50%);
    text-align: center;
    color: white;
    width: 100%;
    border-radius: 50% 50% 0px 0px;
    font-style: italic;
    font-size: 1.5em;
    height: 50px;
    margin-top: -16px;
}

.logo {
    display: flex;
    justify-content: flex-start;
    width: 70%;
}

#login_space {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    overflow: visible;
}

.btn {
    text-align: center;
    background-color: rgb(36, 131, 255);
    color: whitesmoke;
    font-weight: bold;
    font-size: 1em;
    border-radius: 20px;
    width: 140px;
    height: 45px;
    border-style: none;
    margin-right: 15px;
    transition: background-color 0.5s;
    border: solid 1px rgb(36, 131, 255);
}

.btn:hover {
    background-color: rgb(54, 54, 54);
    cursor: pointer;
}

svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /*border: solid blue;*/
}

.container {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    /*border: solid green;*/
}

.deux {
    background-color: rgba(0, 0, 0, 0%);
    top: -60px;
    z-index:1;
    /*border: solid black;*/

}

.conteneur_images{
    display: flex;
    z-index: 1;
}

.test_text {
    background-color: rgba(0, 0, 0, 50%);
    display: flex;
    align-items: center;
    width:fit-content;
    max-width: 500px;
    height: fit-content;
    position: relative;
    left: 10%;
    font-size: 1.8em;
    text-align: center;
    top: 30%;
    border-radius: 10px;
    padding: 10px;
}

#image_bassiste {
    width: 1024px;
    margin: 0;
    padding: 0;
    /*border: solid green;*/
}

#test {
    display: flex;
    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    z-index: 1;
    /*border: solid red;*/
}

.container2 {
    background-color: rgb(54, 54, 54);
    height: 600px;
    /*border: solid yellow;*/
    position: relative;
    top: -60px;
}

.main {
    width: 80%;
    margin: auto;
}

.diapo {
    position: relative;
    overflow: hidden;

}

.elements {
    display: flex;

}

.element {
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}


.caption {
    width: 700px;
    height: auto;
    background-color: rgba(255,255,255, 0.4);
    font-size: 1.4em;
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
    border : solid whitesmoke;
}

.caption h2 {
    padding: 10px;
    margin-top: 0px;;
    background-color: whitesmoke;
    font-size: 1.7em;
}

.caption p {
    padding: 30px;
    text-align: justify;
}

#nav-gauche, #nav-droite {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    cursor: pointer;

}

#nav-droite {
    right: 0;
}

#nav-gauche img, #nav-droite img {
    width: 100px;
}

#nav-gauche img:hover, #nav-droite img:hover {
    border: solid black 1px;
    border-radius: 50%;
    background-color: rgba(254,254,254, 50%);

}

.container3 {
    display: flex;
    justify-content: center;

}

.boxcol {
    display: flex;
    justify-content: center;
    width: 80%;
}

.textecol {
    margin: 30px;
    width: 700px;
    background-color: rgb(54, 54, 54);
    color: whitesmoke;
    border: solid black;
}

.textecol h2 {
    text-align: center;
    padding: 10px;
    margin-top: 0px;;
    background-color: black;
    font-size: 1.5em;
}

.textecol p {

    padding: 30px;
    text-align: justify;
    font-size: 1.2em;
}

.textecol .asterisque {
    text-align: left;
    font-size:0.7em;
}

.contact {
    height: 200px;
    background-color: rgb(54, 54, 54);
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid black;
    height: 110px;
    padding: 0 0 15px 0;
}

.contact h2 {
    background-color: black;
    color: whitesmoke;
    margin: 0 0 15px 0;
    padding: 15px;
    
}

.contact div a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(36, 131, 255);
    color: whitesmoke;
    font-weight: bold;
    font-size: 1em;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.5s;
    width: 130px;
    height: 45px;
}

.contact div a:hover {
    background-color: whitesmoke;
    color: rgb(54, 54, 54)
}

.page-compte {
    display: flex;
    flex-direction: column;
    background-color: rgb(54, 54, 54);
    color: whitesmoke;
    Padding: 30px;
    justify-content: center;
    align-items: center;
}

.menu {
    width: 100%;
    height: 50px;
    background-color: rgb(54, 54, 54);
    border-bottom: 0.5px solid black ;
}

.menu a {
    text-decoration: none;
    color: whitesmoke;
}

.menu ul{
    margin: 0;
    display: flex;
    justify-content: center;
    list-style-type: none;
    height: 100%;
    line-height: 50px;
    font-size: 1.2em;
}

.menu_deroulant {
    text-align: center;
    width: 200px;
    cursor: pointer;
    margin: 0;
    flex-shrink:  0;
    border-left: 0.5px solid black;
}

.menu_deroulant:last-child {
    border-right: 0.5px solid black;
}

.menu_deroulant:hover {
box-shadow: 0px 0px 3px black;
}

.menu_deroulant ul {
    padding: 0;
    height: auto;
}

.menu_deroulant span {
    font-size: 0.8em;
}

.sous_menu {
    display: flex;
    flex-direction: column;
}

.sous_menu li {
    display: none;
    font-size: 0.8em;
}

.sous_menu li ul{
    position: relative;
    display: none;
}

.menu_deroulant:hover .sous_menu li {
    display: block;
    z-index: 2;
}

.sous_menu li {
    list-style-type: none;
    text-align: center;
    height: 50px;
    padding: 0 10px;
    background-color: black;
    border-bottom: 0.5px solid rgb(54, 54, 54);
}

.sous_menu li:hover {
    background-color: rgb(36, 131, 255);
}

.sous_menu li:hover .sous_sous_menu{
    display: block;
}

.sous_sous_menu {
    display: none;
    position: relative;
    top: -50px;
    left: 190px;
    list-style-type: none;
}

.tuto_sections {
    display: flex;
    flex-direction: row;
}

.box_section {
    display: block;
    border:whitesmoke solid;
    width: 400px;
    margin: 15px;
}

.titre_section {

    text-align: center;
    font-size: 0.7em;
    padding: 5px;
    background-color: rgba(255,255,255, 0.4);
}

.titre_section img {
    border: dotted black 3px;
    padding: 5px;
    border-radius: 5px;
    height: 70px;
}

.text_section {
    padding: 10px;
    text-align: justify;
}

.box_infos {
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgb(54, 54, 54);
    padding: 20px;
    text-align: left;
}

.box_infos div {
    background-color: rgba(255,255,255, 0.4);
    border-radius: 5px;
    padding: 15px;
    height : fit-content;
}

#change_mdp div{
    margin: 10px;
}

#change_mdp{
    
    flex-direction: column;
    justify-content: center;
}

#change_mdp button {
    align-self: center;
}

#change_mdp input {
    width: 100%;
}

.centrer_self {
    align-self: center;
}

.message_cadena {
    font-style: italic;
}

.burger {
    display: none;
}

#avance_immediate {
    display: none;
    width:fit-content;
}


footer {
    padding: 20px;
    display: flex;
    justify-content: center;
    background-color: black;
    color: whitesmoke ;
}

.page-cours{
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.contenu-box-cours{
    height:fit-content;
    margin : 60px;
    padding: 20px;
    width: 700px;
    color: whitesmoke;
    border: solid whitesmoke 2px;
    border-radius: 20px;
}

.contenu-box-cours h1 {
    text-align: center;
}

.contenu-box-cours p {
    text-align: justify;
}

.box-btns {
    display: flex;
}

.box-btn {
    display: flex;
    justify-content: center;
    width:233px;
}

#anatomie_partition {
    width: 700px;
    display: block;
}

#anatomie_interact {
    position: relative;
}

#anatomie_clef {
    width: 20px;
    height : 52px;
    position: absolute;
    top: 40px;
    left: 9px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_clef p {
    position: absolute;
    display: none;
    color: red;
    bottom : -45px;
    left:-5px;
}

#anatomie_clef:hover p {
    display:block;
}

#anatomie_clef:hover {
    border: solid red 2px;
    cursor: pointer;
}

#anatomie_signature {
    width: 12px;
    height : 32px;
    position: absolute;
    top: 47px;
    left: 31px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_signature p {
    position: absolute;
    display: none;
    color: blue;
    bottom : -60px;
    left:-20px;
}

#anatomie_signature:hover p {
    display:block;
}

#anatomie_signature:hover {
    border: solid blue 2px;
    cursor: pointer;
}

#anatomie_notes {
    width: 52px;
    height : 35px;
    position: absolute;
    top: 45px;
    left: 90px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_notes p {
    position: absolute;
    display: none;
    color: green;
    bottom : -50px;
    left: 5px;
}

#anatomie_notes:hover p {
    display:block;
}

#anatomie_notes:hover {
    border: solid green 2px;
    cursor: pointer;
}

#anatomie_accord {
    width: 22px;
    height : 40px;
    position: absolute;
    top: 43px;
    left: 214px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_accord p {
    position: absolute;
    display: none;
    color: darkgreen;
    bottom : -48px;
    left: -15px;
}

#anatomie_accord:hover p {
    display:block;
}

#anatomie_accord:hover {
    border: solid darkgreen 2px;
    cursor: pointer;
}

#anatomie_barre_mesure {
    width: 10px;
    height : 40px;
    position: absolute;
    top: 43px;
    left: 267px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_barre_mesure p {
    position: absolute;
    display: none;
    color: palevioletred;
    bottom : -48px;
    left: -55px;
    width: 250px;
}

#anatomie_barre_mesure:hover p {
    display:block;
}

#anatomie_barre_mesure:hover {
    border: solid palevioletred 2px;
    cursor: pointer;
}

#anatomie_alteration {
    width: 10px;
    height : 20px;
    position: absolute;
    top: 55px;
    left: 347px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_alteration p {
    position: absolute;
    display: none;
    color: orange;
    bottom : -48px;
    left: -25px;
    width: 250px;
}

#anatomie_alteration:hover p {
    display:block;
}

#anatomie_alteration:hover {
    border: solid orange 2px;
    cursor: pointer;
}

#anatomie_silence {
    width: 11px;
    height : 23px;
    position: absolute;
    top: 52px;
    left: 443px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_silence p {
    position: absolute;
    display: none;
    color: black;
    bottom : -48px;
    left: -20px;
    width: 250px;
}

#anatomie_silence:hover p {
    display:block;
}

#anatomie_silence:hover {
    border: solid black 2px;
    cursor: pointer;
}

#anatomie_liaison {
    width: 62px;
    height : 10px;
    position: absolute;
    top: 55px;
    left: 506px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_liaison p {
    position: absolute;
    display: none;
    color: cornflowerblue;
    bottom : -48px;
    left: 5px;
    width: 250px;
}

#anatomie_liaison:hover p {
    display:block;
}

#anatomie_liaison:hover {
    border: solid cornflowerblue 2px;
    cursor: pointer;
}

#anatomie_lignes_portee {
    width: 12px;
    height : 20px;
    position: absolute;
    top: 53px;
    left: 618px;
    border: dotted 1px rgba(0,0,0, 0.4);
}

#anatomie_lignes_portee p {
    position: absolute;
    display: none;
    color: blueviolet;
    bottom : -48px;
    left: -57px;
    width: 250px;
}

#anatomie_lignes_portee:hover p {
    display:block;
}


#anatomie_lignes_portee img {
    height: 22px;
    position: relative;
    top:-1px;
    display:none;
}

#anatomie_lignes_portee:hover img {
    cursor: pointer;
    display: block;
}

.question {
    margin: 15px;
    margin-bottom: 20px;
    color:rgb(54, 54, 54)
}

.titre_question {
    display: flex;
    align-items: center;
    border-radius: 50px;
    background-color: rgb(245, 190, 145);
    width:fit-content;
    padding: 10px;
    font-size: 1.2em;
    position: relative;
    top : 35px;
    left : -15px;
}

.point_interrogation {
    display: flex;
    justify-content: center;
    align-items: center;
    border:rgb(54, 54, 54) solid 2px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.texte_question {
    background-color: rgb(245, 190, 145);
    padding: 15px;
    padding-top: 20px;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

.information {
    margin: 15px;
    margin-bottom: 20px;
    color:rgb(54, 54, 54)
}

.titre_information {
    display: flex;
    align-items: center;
    border-radius: 50px;
    background-color: rgb(115, 174, 252);
    width:fit-content;
    padding: 10px;
    font-size: 1.2em;
    position: relative;
    top : 35px;
    left : -15px;
}

.point_exclamation {
    display: flex;
    justify-content: center;
    align-items: center;
    border:rgb(54, 54, 54) solid 2px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.texte_information {
    background-color: rgb(115, 174, 252);
    padding: 15px;
    padding-top: 20px;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}
.portee_interactive_1 {
    position: relative;
    display:flex;
}

.portee_colonne {
    width: 20px;
    height : 90px;
    position: absolute;
    top: 47px;
}

.portee_colonne p {
    position: relative;
    color: black;
    text-align: center;
    vertical-align: middle;
    font-size: 4rem;
    top:-116px;
    left:-2px;
}

.portee_colonne_1 {
    left: 120px;
}

.portee_colonne_2 {
    left: 170px;
}

.portee_colonne_3 {
    left: 220px;
}

.portee_colonne_4 {
    left: 270px;
}

.portee_colonne_5 {
    left: 320px;
}
.portee_colonne_6 {
    left: 370px;
}

.portee_colonne_7 {
    left: 420px;
}

.portee_colonne_8 {
    left: 470px;
}

.portee_colonne_9 {
    left: 520px;
}

.portee_colonne_10 {
    left: 570px;
}

.re {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: -8px;
}

.re:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.fa {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 8px;
}

.fa:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.mi {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 0px;
}

.mi:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.sol {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 16px;
}

.sol:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.la {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 25px;
}

.la:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.si {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 33px;
}

.si:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.do1 {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 41px;
}

.do1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.re1 {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 50px;
}

.re1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.mi1 {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 58px;
}

.mi1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.fa1 {
    position: absolute;
    width:20px;
    height: 20px;
    bottom: 66px;
}

.fa1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.sol1 {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 74px;
}

.sol1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.fa-1 img {
    position: absolute;
    bottom: -2px;
    width: 120%;
    height: 300%;
}

.fa-1 p {
    position: absolute;
    left: -1px;
}

.fa-1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    bottom: -50px;
}

.fa-1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.sol-1 img {
    position: absolute;
    bottom: 8px;
    width: 120%;
    height: 210%;
}

.sol-1 p {
    position: absolute;
    left: -1px;
}

.sol-1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    bottom: -42px;
}

.sol-1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.la-1 img {
    position: absolute;
    bottom: 0px;
    width: 120%;
    height: 210%;
}

.la-1 p {
    position: absolute;
    left: -1px;
}

.la-1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    bottom: -34px;
}

.la-1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.si-1 img {
    position: absolute;
    bottom: 6px;
    width: 120%;
    height: 135%;
}

.si-1 p {
    position: absolute;
    left: -1px;
}

.si-1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    bottom: -25px;
}

.si-1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.do img {
    position: absolute;
    bottom: -2px;
    width: 120%;
    height: 135%;
}

.do p {
    position: absolute;
    left: -1px;
}

.do {
    position: absolute;
    width: 20px;
    height: 20px; 
    bottom: -17px;
}

.do:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.la1 img {
    position: absolute;
    top: -5px;
    width: 120%;
    height: 135%;
}

.la1 p {
    position: absolute;
    left: -1px;
}

.la1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    top: -10px;
}

.la1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.si1 img {
    position: absolute;
    top: 3px;
    width: 120%;
    height: 135%;
}

.si1 p {
    position: absolute;
    left: -1px;
}

.si1 {
    position: absolute;
    width: 20px;
    height: 20px; 
    top: -18px;
}

.si1:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.do2 img {
    position: absolute;
    top: -5px;
    width: 120%;
    height: 210%;
}

.do2 p {
    position: absolute;
    left: -1px;
}

.do2 {
    position: absolute;
    width: 20px;
    height: 20px; 
    top: -26px;
}

.do2:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.re2 img {
    position: absolute;
    top: 3px;
    width: 120%;
    height: 210%;
}

.re2 p {
    position: absolute;
    left: -1px;
}

.re2 {
    position: absolute;
    width: 20px;
    height: 20px; 
    top: -34px;
}

.re2:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer; 
}

.illustration {
    display: flex;
    justify-content: center;
}

#fa_et_sol_img {
    width: 700px;
}

@media (max-width: 1300px) {
    .boxcol{
        flex-direction: column;
        align-items: center;
    }
    .diapo {
        display: block;
    }
    .test_text {
       width: 300px;
       font-size: 1.4em;
       left: 15%;
    }
    #nav-gauche, #nav-droite {
        display: none;
    }
    .deux svg {
        display: none;
    }
    #test {
        background-color: rgb(54, 54, 54);
    }

    .navbar__links {
        display: flex;
        flex-direction: column;
        width: 8px;
        height: 45px;
        position: fixed;
        top: 0px;
        background-color: black;
    }

    .show-nav .navbar__links {
        width: 200px;
    }

    .show-nav .navbar__links li {
        display: inline;
    }

    .show-nav .sous_menu {
        display: none;
    }

    .show-nav .bar {
        width: 0;
        background: transparent;
    }

    .show-nav .bar::before {
        transform: rotate(45deg);
    }

    .show-nav .bar::after {
        transform: rotate(-45deg);
    }

    .navbar__links li {
        display: none;
        height: 50px;
    }

    .sous_menu {
        display: none;
    }

    .navbar__links li:hover .sous_menu {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 200px;
        top: -50px;
        left: 200px;
    }
    
    /* toggle menu */

    .burger {
        display: block;
        position: fixed;
        padding: 0;
        width: 45px;
        height: 45px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .bar {
        display: block;
        width: 45px;
        height: 4px;
        background-color: whitesmoke;
        border-radius: 3px;
        transition: all .5s ease-in-out;
    }

    .bar::before, .bar::after {
        content: "";
        width: 45px;
        height: 4px;
        position: absolute;
        left:0;
        background-color: whitesmoke;
        border-radius: 3px;
        transition: all .5s ease-in-out;
    }

    .bar::before {
        transform: translateY(-12px);
    }

    .bar::after {
        transform: translateY(12px);
    }

    .menu {
        width: 0;
        height: 0;
    }

    .tuto_sections {
        flex-direction: column;
    }
}