form{
    max-width: 500px;
    width: 70%;
    margin: 2% auto 5% auto;
    background-color: lightgray;
    padding: 1%;
}

table{
    width: 100%;
    margin: 0 auto;
}

#submit{
    text-align: center;
}

td{
    text-align: left;
    width: 200px;
}

h1{
    text-align: center;
}


#input_message{
    height: 10%;
}

.affichage_reponse{
    margin: 2% auto;
    width: 60%;
    text-align: center;
}

.erreurs_formulaire{
    background-color: lightcoral;
    padding: 1%;
    width: 500px;
}

.success_formulaire{
    background-color: lightgreen;
    padding: 1%;
    width: 500px;
}

main{
    text-align: center;
}

main>h1{
    text-align: center;
}

#livreor{
    max-width: 500px;
    width: 70%;
    margin: 0 auto;
    padding: 1%;
    background-color: lightgray;
}

#bouton_submit{
    text-align: center;
    width: 80%;
    margin: 0 auto;
    
}

#bouton_submit button{
    margin: 5% auto;
    width: 100%;
}

tr{
    text-align: center;
}

#expo form{
    width: 80%;
    text-align: center;
    border-collapse: collapse;
    border: solid black 2px;
    margin: 0 0 8% 0;
}

.gride{
    display: grid;
    padding: 1%;
    grid-column-gap: 5%;
    
    justify-content: center;
    grid-template-columns: repeat(auto-fill,minmax(40%,1fr));
    align-items: center;
    width: 90%;
    margin: 0 auto 10% auto;
}

.container_gride{
    background-color: lightgray;
    padding: 2%;
    height: 90%;
}

#title_container{
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

.container_img{
    text-align: center;
}

.container_img img{
    margin: 5% 0;
    width: 50%;
}

p{
    margin: 0;
}

.informations{
    margin: 2% 0 0 0;
    width: 80%;
}

.informations > p{
    margin: 5% 0 1% 0;
}

.bloc_info{
    display: flex;
}

.bloc_info p{
    margin: 0 5% 0 0;
}

.bloc_info p:first-child{
    font-weight: bold;
}

@media screen and (max-width: 1200px){

    @media screen and (max-width: 820px){
        form{
            margin: 2% auto 10% auto;
        }
    }

    @media only screen and (max-width: 620px){
        .gride{
            grid-template-columns: 80%;
            grid-gap: 1%;
        }
    }

    @media only screen and (max-width: 500px){
        form{
            margin: 2% auto 15% auto;
        }

        form tr{
            display: block;
            
        }
        form tr td{
            display: block;
            text-align: center;
            width: 100%;
        }
    }
}