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

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float:left;
    width: 100%;
}
 
@media only screen and (min-width: 968px) {
    .col-6 {width: 50%;}
    .col-12 {width: 100%;}
}

@media  screen and (max-width: 658px){
    .imgext{
        width:400px ;
    }
    .conteneurcarte{
        display: block;
        margin:2% auto;
        text-align: center;
    }

    .menus{display: unset;}  
    .int_content table tr,.int_content table th {
        display: block; 
        place-items: center;
    } 
    .conteneur_fondu{
        top:0;
        left:0;
    }
    .img_fondu, .image_intermediaire,.image_de_dessus{
        width: 320px;
    }
    .conteneur_contact {
        display:flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        place-items: center;
    }
    .fleur {order:1;}
    .adressepavsan{order:2;}
    .the   {order:3;}
    .horaires{order:4;}
    .cloche{order:5;}
    .reservation{order:6;}
    .lanterne{order:7;}
    .infos{order:8;}

    .liste_blogs{
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(1, 1fr) !important;
        place-items: center;
}
}
@media  screen and (max-width:800px){
    .navbar { 
        display: block;
        padding-left: 15%;
    }
    .mentions{
        flex-direction: column;
    }
}
@media  screen and (max-width:967px){

    .intro, .conteneur_header,  .carte{
        flex-direction: column;
        place-items: center;
    }
    .retour{
        margin-left: 15%;
    }
    .menus{
        display: unset;
    }
   .containergrille{
        grid: unset;
        display: block;
    }
   .imgpav{
        width:340px;
        height: 330px;
    }
    .conteneur_fondu img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


@media  screen and (max-width:1100px){
    .apropos,  .tri_blog{
        flex-direction: column;
        place-items: center;
    }
    .conteneur_contact {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .liste_blogs{
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr); 
                place-items: center;
        gap:0;
    }
}