/**************Version MOBILE**************/
@media screen and (max-width: 500px){
    .div-menu{
        display: none !important;
    }
    .div-texte{
        margin: 40px 30px !important;
    }
    h1{
        font-size: 30px !important;
        margin: 0 20px !important;
    }
    #hero>p{
        margin: 15px 20px !important;
    }
}



/**************Version DESKTOP**************/
        html{
            scroll-behavior: smooth;
        }
        body{
            margin: 0;
            padding: 0;
            font-family: Arial;
            font-size: 15px;
        }
        header{
            margin: 0 30px;
            display: flex;
            justify-content: space-between;
        }
        .div-menu, .div-logo{
            display: flex;
            align-items: center;
        }
        .div-menu ul{
            display: flex;
            justify-content: space-around;
            width: 100%;
            list-style-type: none;
        }
        .div-menu ul li{
            padding: 15px;    
        }
        .div-menu a{
            text-decoration: none;
            color: black;
        }
        .div-menu a:hover{
            color: #f37121;
        }
        .div-logo img{
            height: 80%;
        }
        #hero{
            width: 100%;
            height: 300px;
            background-color: grey;
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-image: url(/images/annexx_1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        #hero>h1, #hero>p{
            margin-left: 50px;
            color: white;
        }
        #hero>p{
            font-size: 20px;
        }
        .div-texte{
            margin: 60px 15%;
        }
        .div-texte a{
            color: #f37121;
            text-decoration: none;
        }
        .div-texte a:hover{
            text-decoration: underline;
        }
        h3{
            font-weight: normal;
            font-size: 20px;
            margin: 30px 0 20px;
        }
        h2{
            color: #f37121;
        }
        h1{
            margin: 0;
            font-size: 35px;
        }
        .content{
            margin: 35px 10px;
        }

        #self-stockage .content{
            display: flex;
        }
        
        .content-text{
            width: 65%;
            padding-left: 25px;
        }
        .content-form{
            width: 35%;
        }
        .askTarifs{
            background: #eee;
            box-shadow: 5px 5px 15px #70707040;
            padding: 40px;
        }
        .askTarifs h3{
            margin: 0;
            margin-bottom: 10px;
        }
        .askTarifs .radios{
            display: flex;
            margin: 25px 0;
        }
        .askTarifs input[type="text"], .askTarifs input[type="number"], .askTarifs input[type="tel"], .askTarifs input[type="email"], .askTarifs select {
            width: 100%;
            height: 35px;
            box-shadow: 0px 0px 10px #00000022;
            font-size: 15px;
            -webkit-appearance: none;
            padding: 0;
            border: none;
            margin-top: 10px;
            margin-bottom: 15px;
            text-indent: 15px;
        }

        .askSubmit{
            display: flex;
            justify-content: flex-end;
        }

        .askSubmit button{
            height: 35px;
            box-sizing: content-box;
            padding: 0px 50px;
            background: #f37121;
            color: white;
            border: none;
            font-size: 16px;
            margin-top: 15px;
        }
        footer{
            display: flex;
            justify-content: center;
            padding: 15px;
            background-color: grey;
            color: white;
            gap: 15px;
        }
        footer li{
            list-style: none;
        }
        footer li a {
            text-decoration: none;
            color: white;
        }

@media screen and (max-width: 1050px){
    #self-stockage .content{
        flex-wrap: wrap;
    }
    
    #self-stockage .content .content-text{
        width: 100%;
        padding-left: 0;
    }
    #self-stockage .content .content-form{
        width: 100%;
        margin-bottom: 25px;
    }
}