@media (min-width: 600px) and (min-height: 800px) {
    #header  { /*min-*/height: 8em; }
}

/* pas terrible avec Google Chrome :-(  */
@media (min-width: 500px) and (max-height: 500px), (max-width: 650px) {
    #header  { 
        height: 5em; 
    }
    #header h1 { font-size: 1.35em; font-size: 1.5rem; }
    #header h2 { font-size: 1.15em; font-size: 1.2rem; }
    #header h3 { font-size: 1.05em; font-size: 1.1rem; }
    #header h1, #header h3, #header h3 { 
        margin: 1px 0 1px 0; 
    /*  transition: margin    0.5s linear,
                    font-size 0.5s linear;  */
    }   
}   

@media (min-width: 750px) and (max-width: 1000px) {
/*  #primary-menu > li { font-size: 1.25rem; } 
    .menulevel1   > li { font-size: 1.25rem; } */
    div.menu           { font-size: 1.15em; font-size: 1.20rem; }
}
@media (min-width: 1000px) {
/*  #primary-menu > li { font-size: 1.45rem; } 
    .menulevel1   > li { font-size: 1.45rem; } */
    div.menu           { font-size: 1.25em; font-size: 1.35rem; }
}
@media (min-width: 500px) and (max-width: 720px) {
/*  #primary-menu > li     ,
    .menulevel1   > li     { font-size: 1.1rem;  margin-right: 0.5em; }
    #primary-menu > li li  ,
    .menulevel1   > li li  { font-size: 1.0rem;   } */
    div.menu               { font-size: 1.0em; font-size: 1.0rem;   }
    #primary-menu > li     { margin-right: 0.5em; }
    .menulevel1   > li     { margin-right: 0.5em; }
/*  #primary-menu > li li  { font-size: 0.95em;   } 
    .menulevel1   > li li  { font-size: 0.95em;   } */
}

@media (min-width: 500px) and (max-width: 680px) {
    #main               { padding: 0.5em 0.5em; }
/*  .contenu, #contact0 { padding: 0.5em 0.5em; } */
    
/*  #primary-menu   li { font-size: 1.1rem;   }   
    .menulevel1     li { font-size: 1.1rem;   }   */
    #primary-menu > li ,
    .menulevel1   > li { margin-right: 0.3em; }        
    #primary-menu > li ,
    .menulevel1   > li a#menu-home,
    #primary-menu > li ,
    .menulevel1   > li a#menu-contact {
        max-width: 38px;
        color: transparent;
        background-position: 50% 50%;
        background-size: 24px auto; /*contain*/
        background-repeat: no-repeat;
    }
    #primary-menu > li a#menu-home    ,
    .menulevel1   > li a#menu-home    { background-image: url(./img/homeBR.png); }
    #primary-menu > li a#menu-contact ,
    .menulevel1   > li a#menu-contact { background-image: url(./img/contactBR.png); }
}

@media (min-width: 500px) and (max-width: 570px) {
    #primary-menu   li ,
    .menulevel1     li { font-size: 1.0em; font-size: 1.0rem;  margin-right: 0.0em; }
}
/*
@media (min-width: 550px) and (max-width: 650px) {
    #primary-menu > li ,
    .menulevel1   > li { font-size:    0.8rem; } 
    #primary-menu > li ,
    .menulevel1   > li { margin-right: 0.5em;  }        
}
@media (min-width: 500px) and (max-width: 550px) {
    #primary-menu > li ,
    .menulevel1   > li { font-size:    0.85rem; }
    #primary-menu > li ,
    .menulevel1   > li { margin-right: 0.25em;  }
}   */

/*    @supports (position: sticky) {  */
/* @media (min-width: 500px) and (min-height: 800px) { 
    #header { 
        position: -webkit-sticky; 
        position: -moz-sticky; 
        position: -ms-sticky; 
        position: -o-sticky;
        position: sticky; 
        top: 0px; 
  } 
}  */ 
@media (min-width: 850px) and (min-height: 550px) /*and (max-height: 800px)*/ { 
    .rotable { 
        width: 105%;
        padding-right: calc(3% + 2em);
        transform: rotate(-5deg) translate(-1%, -2em);  
    }   
    #header { 
        padding-top: 0.5em;
    }
    .search-box {  right: 5%;  }    /* Si #site-navigation, #header OU  #header0  -> transform*/
/*  #header0 {
        transform: rotate(-5deg) translate(-1%, 0em);
        margin-bottom: 1em;
    }   */
}

@media (min-width: 500px) and (min-height: 300px) and (max-width: 850px) { 
    #site-navigation { 
        position: -webkit-sticky; 
        position: -moz-sticky; 
        position: -ms-sticky; 
        position: -o-sticky;
        position: sticky; 
        top: 3px; 
    } 
}