@import url('https://fonts.googleapis.com/css2?family=Abel&family=Barlow+Semi+Condensed:wght@100&family=Kanit:ital,wght@0,100;0,500;1,100;1,300&display=swap');

body{
    margin: 0;
}
#domaines {
    width: 100%;
    margin: 0px;
}
#aerien {
    background: url('../images/aerien.jpg') center no-repeat;
    background-size: cover;
    background-position: top;
    width: 100%;
    height: 600px;
    
}
#acrobatique {
    background: url('../images/acrobatique.jpg') center no-repeat;
    background-size: cover;
    background-position-x: -150px;
    width: 100%;
    height: 600px;
}

#equilibrisme {
    background: url('../images/equilibrisme.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 600px;
}
#jonglerie {
    background: url('../images/jonglerie.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 600px;
}
#aerien p, #acrobatique p, #equilibrisme p, #jonglerie p{
    border: 0px;
    color: black;
    width: 95%;
    background-color: rgba(144, 222, 255, 0.862);
 }
#discentiera h5, #discentierb h5, #discentierc h5, #discentierd h5{
    color: rgb(0, 0, 0);
    margin: 5px 0px 5px 7px;
 }
 
#discentiera img, #discentierb img, #discentierc img, #discentierd img {
    width: 95%;
    margin: 10px 5px 10px 5px;
    border: 3px solid rgb(0, 134, 191);
 }
#disca p, #discb p, #discc p, #discd p {
    margin: 1%;
}
a{
   text-decoration: none;
}
h1{
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    color: rgb(0, 134, 191);
    padding: 5px;
    transition: 0.3s;
}
h2{
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-style: italic;
    background-color: rgb(179, 232, 255);
    width: 270px;
    padding: 5px;
}

h4{
    font-family: 'Kanit', sans-serif;
    font-weight: 100;
    font-style: bold;
    padding: 5px;
}
h5{
    font-family: 'Kanit', sans-serif;
    font-weight: 100;
    font-style: italic bold;
    font-size: 18px;
    margin: 2px;
    color: rgb(0, 134, 191);
}

    
p{
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-style: bold;
    text-align: left;
    padding: 10px;
    border: 3px solid rgb(0, 134, 191);
    width: 90%;
  
}

#nav{
    font-family: 'Abel', sans-serif;
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
}
.lien{
    font-size: 24px;
    padding: 10px;
    color: rgb(179, 232, 255);
    text-decoration: none;
    transition: 1s;
}
#titre{
    padding: 10px 0px 0px 0px;
    font-size: 52px;
    margin: 0px;
    color: rgb(0, 134, 191);
    border: 0px;
    transition: 1s;
}  
footer p{
    background-color: rgb(179, 232, 255);
    width: 95%;
    border: 0px;
    margin: 0px;
    font-size: 21px;
    text-align: center;
}
#histoire p{
    margin: 0px 0px 5px 5px;
}
#histoire img{
    margin: 0px 0px 0px 8px;
    width: 95%;
}
#compagnie img{
    width: 95%;
    margin: 0px 0px 0px 5px;
}
#compagnie p{
    margin: 0px 0px 5px 5px;
}
footer{
    margin: 10px 0px 0px 0px;
}

img{
    transition: 0.5s;
}

@media screen and (min-width: 640px) {
    #nav{
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        align-items: center;
        justify-content: space-around;
    }
    #domaines {
        width: 100%;
        display: flex;
    }
    #aerien {
        width: 25%;
        height: 600px;
        
    }
    #acrobatique {
        width: 25%;
        height: 600px;
    }
    #equilibrisme {
        width: 25%;
        height: 600px;
    }
    #jonglerie {
        width: 25%;
        height: 600px;
    }
    #aerien p, #acrobatique p, #equilibrisme p, #jonglerie p{
        border: 0px;
        color: black;
        width: 95%;
        background-color: rgba(144, 222, 255, 0.862);
    }
    #aerien h2, #acrobatique h2, #equilibrisme h2, #jonglerie h2{
        width: 97.4%; 
    }
    #lignea, #ligneb {
        display: flex;
        flex-direction: row;
        align-content: center;
     }
     
     #discentiera, #discentierb, #discentierc, #discentierd {
        display: flex;
        flex-direction: row;
        width: 48%;
        border: 3px solid rgb(0, 134, 191);
        padding: 5px;
        margin: 3px;
     }
     #discentiera p, #discentierb p, #discentierc p, #discentierd p{
        border: 0px;
    }
     #discentiera img, #discentierb img, #discentierc img, #discentierd img {
        width: 400px;
        margin: 10px 30px 10px 10px;
        border: 3px solid rgb(0, 134, 191);
    }
     #imga, #imgb, #imgc, #imgd {
         display: flex;
         align-items: center; 
    }
    footer p{
        width: 98%;
    }
    #histoire{
        display: flex;
        flex-direction: column;
        align-content: center;
    }
    #debut, #moyen, #moderne{
        display: flex;
        flex-direction: row;
    }

    #debutt, #moyent, #modernet{
        display: flex;
        flex-direction: column;
    }

    #debut img, #moyen img, #moderne img{
        width: 400px;
        margin: 5px 10px 5px 10px;
    }
    #histoire{
        width: 75%;
        max-width: 1000px;
        margin: 0 auto;
    }
    #compagnie{
        display: flex;
        flex-direction: column;
        align-content: center;
    }
    #soleil{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    #arlette, #knie{
        display: flex;
        flex-direction: row;
        align-items: last baseline;
    }
    
    #soleilt,  #arlettet, #kniet{
        display: flex;
        flex-direction: column;
    }
   
    #soleil img, #arlette img, #knie img{
        max-width: 30%;
        height: 20%;
        margin: 5px 10px 5px 10px;
    }
    #compagnie{
        width: 75%;
        max-width: 1000px;
        margin: 0 auto;
    }

    #titre:hover{
        background-color: rgba(179, 232, 255, 0.655);
        color: rgb(0, 134, 191);
        font-size: 64px;
    }
    
    .lien:hover{
        background-color:rgba(0, 134, 191, 0.604);
        color: rgb(179, 232, 255);
        font-size: 32px;
    }
    h1:hover{
        background-color: rgba(179, 232, 255, 0.655);
        font-size: 35px;
    }
    img:hover{
        scale: 1.1;
    }
    
}

/*
- j'ai enlevé toutes les erreurs de ton css qui était en rouge
- je t'ai déplacé tes hovers dans la version pc parce qu'en mobile il y'a pas de hover
- j'ai optimisé ton code pour une meilleur semantique
- je t'ai rajouté quelques caractères oublié dans ton css

Pour le footer et le slide horizontal jsp pk ca fait ca dsl

J pas pu tout corriger mais je pense t déja pas mal la.
*/