@media only screen and (min-width: 641px) and (max-width: 768px) {
   
    #titre {
        top:30px;
        font-size:30px;
    }
    #ecrire {
        position:fixed;
        top:26px;right:140px;
        width:50px;height:50px;
    }
    

    a:link, a:visited { text-decoration: underline; }
    a:hover, a:active { text-decoration: underline; }


    #apropos {
        left:-100%;
        width:100%;
     }
     #connexion, #inscription, #contribution {
        right:-100%;
        width:100%;
     }

     #poeme { width:100%; }

     #poeme #liste_poemes { display:table; }
     #poeme #liste_poemes_resp { display:none; }
    


}


@media only screen and (max-width: 640px) {
   
    #titre {
        width:100%;
        top:15px;left:0;
        font-size:24px;
        text-align:center;
    }
    #bandeau {
        font-size:36px;height:215px;
    }
    #ecrire {
        position:fixed;
        top:55px;right:60%;
        width:40px;height:40px;
    }
    #membres {
        top:50px;right:0;
        width:50%;
        font-size:18px;
        text-align:center;
    }
    nav { margin-top:30px; }
    nav .nav_item {
        display:block;
    }
    #menu-hamburger {
        top:-28px;
    }
    

    a:link, a:visited { text-decoration: underline; }
    a:hover, a:active { text-decoration: underline; }


    #apropos {
        left:-100%;
        width:100%;
        padding: 6rem 15px 3rem 15px;
     }
     #connexion, #inscription, #contribution {
        right:-100%;
        width:100%;
     }

     #poeme { width:100%; }
     #poeme-fermer { top:1rem;right:1rem;width:30px;height:30px; }

     #poeme #liste_poemes { display:none; }
     #poeme #liste_poemes_resp { display:block; }


}