@media only screen and (max-width:550px) {
    body {
        background-color: #fff;
    }
    header {
        margin-top: 0;
        border-radius: 0;
            padding: 35px 20px 10px 20px;
    }
    .bandeau_top h1 {
     width: 140px;
    }
    .bandeau_top h2 {
        font-size: 1.0rem;
    }
    .band_compte {
        position: absolute;;
        text-align: right;
        display: flex;
        justify-content: right;
        top: 10px;
    }
    #middle {
        border-radius: 0;
        padding: 20px 30px;
    }

    #menutop {
        display: none;
               
    position: absolute;
    right: 20px;
    top: 110px;
    z-index: 10;
    border-radius: 15px;
    padding: 10px 10px;
    background-color: var(--color-fonce2);
    border-top-right-radius: 0;
}

   
#menutop li a {
    color: #FFF;
}
#menutop li{
   color: #FFF; 
}
#menutop li{
   color: #FFF; 
}
#menutop #m_formule:before {
    background-image: url(/medias/spirale_b.svg);
}
#menutop li:first-child {
    margin-bottom: 5px;
}

    
    #connection {
            font-size: 1.8rem;
            padding-top: 15px;
    }
    .menu_burger {
        display: flex;
    }
    
    .lang_menu {
        padding-top: 15px;
    }
    footer{
        background-color: var(--color-fonce2);
    }
}
@media only screen and (max-width:500px) {
    #bandeau_top {
        
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .connected  #bandeau_top {
        flex-direction: row;
        align-items: end;
    }
    #bandeau_top h2 {
        
        text-align: center;
            font-size: 1.1rem;
    }
}

@media only screen and (max-width:460px) {
    #middle {
            padding: 25px 15px;
    }
    .global_ins {
        padding: 20px 0px;
    }
}

@media only screen and (max-width:390px) {
    #middle {
        padding: 25px 20px;
    }
    .bandeau_top h2 {
        font-size: 0.9rem;
    }
    
}