@media screen and (max-width: 1050px){
    #body{ width: 750px; }
    #header{ width: 750px; }
    #footer { width: 750px; }}
    
@media screen and (max-width: 780px){
    #body{ width: 550px;margin:auto; }
    #header{ width: 550px; }
    #footer { width: 550px; }}
     
@media screen and (max-width: 320px){
    #body{ width:100%; }
    #header{ width: 200%; height: 125px; }
    #footer { width: 100%; height: 125px; }
    #img  { width: 100%; height: 125px; }}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float:left;
    width: 100%;
}
  
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 968px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media  screen and (max-width: 658px){
    .navbar { 
        display: block;
        max-width: 300px;
        margin:1%;
    }
    .nav-link { /*titres seuls*/
        font-size: 17px;
        margin:1%;
    }
    footer {
        display:block;
        font-size: calc(1vmin + 10px);
        margin-bottom: 2%;
        position: relative;
    }
    .panoramafooter{
        display:block;
        font-size: calc(2vmin + 10px);
    }   
 
    .conteneurcarte,  .presentation_carte,  .conteneur_menu,  .conteneurblogentier{
        display: block;
        margin:2% auto;
        text-align: center;
    }
    
/*menus*/
    .menus{display: unset;}  

/*blog*/
.liste_blogs{
        display: flex;
        flex-direction: column;
        align-items: center;
        column-count: 1;
        margin: 0 auto;
    }
/*blogentier*/
  
    .int_content table tr,.int_content table th {
        display: block; 
        text-align: left;
    } 

    .conteneur_contact {
        display:flex;
        flex-direction: column;
    }
    .fleur {order:1;}
    .adressepavsan{order:2;}
    .the   {order:3;}
    .horaires{order:4;}
    .cloche{order:5;}
    .reservation{order:6;}
    .lanterne{order:7;}
    .infos{order:8;}
}

@media only screen and (min-width: 659px) and (max-width:966px){

/*contact*/
  .conteneur_contact {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    }
}
@media  screen and (max-width:967px){
/*apropos*/ 
    .conteneur_fondu img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
    } 
/*menus*/
    .menus{
        display: unset;
    }
/*grille*/
    .conteneur_grille{
        height:auto;
        margin-bottom: 3%;
    }
}