@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');



:root{

    --principal_color: #cb9a78;

    --second_color: #2d180f;

  

    --logo_color: #fcc561;

  

    --grey_color: #b2b4b4;

    --marron_color:#32160c;

    --marron_grey_color: #a7998c;

    --marron_white_color: #dfdcd2;

  

    --beige_smoke_color: #b17f5d;

    --beige_ligth_color: #bd9470;

  

    --searchcolor: black;

}



.table-container {

    margin-top: 80px;

    margin-bottom: 80px;

    position: relative;

    display: flex;

    justify-content: center;

}

  

  table {

    width: 50%;

}



.colonne1, .colonne2{ 

    width: 50%;

    padding: 0;

    margin: 0;

}



.right2, .carre{

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: center; /* Centrer horizontalement */

    align-items: center; /* Centrer verticalement */

}



.left1{

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-start; /* Centrer horizontalement */

    align-items: center; /* Centrer verticalement */

    height: 400px;

}

#txt1{

    color: black;

    text-align: justify;

    font-family: 'Open Sans',sans-serif;

    font-size: 26px;

    font-weight: 300;

    line-height: 30px;

    margin-bottom: 30px;

}



.left2{

    display:flex; /* Utiliser flexbox pour centrer l'image */

    align-items: center;

    justify-content: flex-start;

    height: 400px;

    overflow: hidden;

}

#sdb1{

    margin-left: 0;

    width: 650px;

    height: auto;

}



.left3{

    height: 400px;

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-start; /* Centrer horizontalement */

    align-items: center;

    

}

#txtleft3{

    color: black;

    text-align: justify;

    font-family: 'Open Sans',sans-serif;

    font-size: 26px;

    font-weight: 300;

    line-height: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

}



#pnglogo{

    width: 350px; /* Ajuster la largeur de l'image pour remplir le conteneur */

    height: auto; /* Conserver les proportions d'origine de l'image */

    margin: 0;

    padding: 0;

    margin-left: 100px;

}



.right1{

    height: 400px;

    display: flex; /* Assurer que l'image s'affiche en tant que bloc */

    align-items: center;

    justify-content: end;

    overflow: hidden;

}

#sln1{

    width: 580px; /* Ajuster la largeur de l'image pour remplir le conteneur */

    height: auto; /* Conserver les proportions d'origine de l'image */

    margin-right: 0px;

    padding: 0;

}



.right2{

    height: 400px;

}

#txt2{

    margin-left: 85px;

    margin-right: 10px;

    color: black;

    text-align: justify;

    font-family: 'Open Sans',sans-serif;

    font-size: 26px;

    font-weight: 300;

    line-height: 30px;

}



.right3{

    display:flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-end;

    height: 400px;

}

.carre{

    margin-right: 0px;

    background-color: #bb8e67;

    width: 580px;

    height: 400px;

}

.borderwhite{

    border: 5px solid white;

    width: 85%;

    height: 85%;

    display:flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: center;

    align-items: center;

}



.cit{

    font-size: 28px;

    font-weight: 300;

    color: white;

    font-family: 'Open Sans',sans-serif;

    text-align: center;

    z-index: 0;

    

}



blockquote {

    position: relative;

    background: none;

    padding: 30px;

  }

  blockquote p {

    margin: 0;

  }



#g1{

    width: 8%;

    color: white;

    position: absolute;

    top: 10px;

    left: -68px; 

}



#g2{

    width: 8%;

    color: white;

    position: absolute;

    bottom: 15px;

    right: 25px;

}





.log{

    position: absolute;

    width: 25%;

    height: 500px;

    z-index: 99;

    padding-left: 5px;

    padding-top: 10px;

}

#logo{

    margin-left: 0;

    width: 80%;

}





.page2{

    display: flex;

    justify-content: center;

    width: 100%;

    height: 500px;

}



.pg1{

    width: 50%;

    background-image: url(../image/beaute-spa.jpg);

    background-size: cover;

    background-position: center; 

}



.pg2{

    /*Bouton Info Massada*/



    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-end; /* Centrer horizontalement */

    align-items: flex-end; /* Centrer verticalement */



    /* Image Massada Produits*/

    background-image: url(../image/Massada.jpg);

    background-position: center bottom;

    background-repeat: no-repeat;

    width: 50%;

    background-size: cover;



}

.container-space{

    height: 20px;

}

.wrapper{

    position: absolute;

    

}

#tabl2{

    display: none;

}

#tabl1{

    display: block;

}

#tabl3{

    display: none;

}





.case1{

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-start; /* Centrer horizontalement */

    align-items: center; /* Centrer verticalement */

    height: 400px;

}

.case2{

    background-image: url(../image/salon1.jpg);

    background-size: cover;

    height: 500px;

}

.case3{

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-start; /* Centrer horizontalement */

    align-items: center;    

    height: 400px;

}

.case4{

    background-image: url(../image/sdb1.jpg);

    background-size: cover;

    height: 500px;



}

.case5{

    height: 400px;

    display: flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-start; /* Centrer horizontalement */

    align-items: center;    

}

.case6{

    display:flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: flex-end;

    height: 400px;

}

.carre2{

    background-color: #bb8e67;

    width: 700px;

    height: 400px;

    display:flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: center;

    align-items: center;

}

.borderwhite2{

    border: 5px solid white;

    width: 90%;

    height: 90%;

    display:flex; /* Utiliser flexbox pour centrer l'image */

    justify-content: center;

    align-items: center;

}

.cit2{

    font-size: 32px;

    font-weight: 300;

    color: white;

    font-family: 'Open Sans',sans-serif;

    text-align: center;

    z-index: 0;

    

}

#g3{

    width: 8%;

    color: white;

    position: absolute;

    top: 0px;

    left: -100px; 

}



#g4{

    width: 8%;

    color: white;

    position: absolute;

    bottom: 0px;

    right: -20px;

}



#case p{

    font-size: 20px;

    font-family: 'Popins', sans-serif;

    line-height: 30px;

}



#case{

    width: 700px;

}



@media screen and (max-width: 768px) {

    .table-container {

        margin-top: 0px;

    }    

    #tabl2{

        display: block;

    }

    #tabl1{

        display: none;

    }

    .contenue{

        scale: 100%;

    }

    .pg1{

        display:none;

    }

    .pg2{

        width: 100%;

    }

}

@media screen and (max-width: 480px){

    #case{

        width: 350px;

      }

    #case p{

        font-size: 18px;

        font-family: 'Popins', sans-serif;

        line-height: 30px;

    }

    .case1{

        margin-top: 30px;

        margin-bottom: 30px;

    }

    .case2{

        background-image: url(../image/salon1.jpg);

        background-size: cover;

        height: 300px;

    }

    .case4{

        background-image: url(../image/sdb1.jpg);

        background-size: cover;

        height: 300px;

    

    }

    .carre2{

        background-color: #bb8e67;

        width: 100%;

        height: 350px;

        display:flex; /* Utiliser flexbox pour centrer l'image */

        justify-content: center;

        align-items: center;

    }

    .borderwhite2{

        border: 5px solid white;

        width: 90%;

        height: 90%;

        display:flex; /* Utiliser flexbox pour centrer l'image */

        justify-content: center;

        align-items: center;

    }

    #g3{

        width: 8%;

        color: white;

        position: absolute;

        top: 0px;

        left: -70px; 

    }

    

    #g4{

        width: 8%;

        color: white;

        position: absolute;

        bottom: 0px;

        right: 20px;

    }   

}

@media only screen and (min-device-width: 375px) and (max-device-width: 414px) and (-webkit-device-pixel-ratio: 3) {

    table{

        margin-left: -160px;

    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

    .search{

        padding-top: 15px;



    }

    .ctnhdr{

        margin-top: 0;

    }

    #tabl2{

        display: none;

    }

    #tabl3{

        display: block;

    }

    a {

        text-decoration: none;

        display: inline-block;

        line-height: 1;

    }

    

    /* Pour cibler la balise <B> spécifiquement */

    a b.massada {

        display: inline;

    }

    #tabl1{

        display: none;

    }

    

    #massadabtn{

        display: block;

    }

    table{

        margin-top: -100px;

        margin-left: -750px;

    }

    #title1{

        margin: 100px 0px 0 160px;

        font-size: 5rem;

        letter-spacing: 15px;

      }

    #title2{

        margin: 200px 0px 0 460px;

        font-size: 4rem;

        letter-spacing: 10px;

        word-spacing: -20px;

    }

      #title3{

        line-height: 0.8;

        font-weight: 400;

        color: var(--beige_smoke_color) !important;

        background-color: hsl(0, 0%, 100%, 0.8);

        height: 50px;

        font-family: 'Popins', serif !important;

        font-size: 1.5rem;

        text-align: center;

        margin: 330px 0px 0 0px;

        display: flex;

        align-items: center;

        justify-content: center;

      }

      .wrapper{

        display: none;

      }

    

      #msdblock{

        display: flex; /* Utiliser flexbox pour centrer l'image */

        justify-content: center; /* Centrer horizontalement */

        align-items: center; /* Centrer verticalement */

        margin-bottom: 100px;

      }

      #msdinfo img{

        margin-left: 13%;

      }

      #msdinfo{

        background-color: rgba(191, 191, 191, 0.1);

        border-radius: 20px;

        border: 1px solid #c1bba5;

        display: block;

        width: 650px;

      }

      .footer-col{

        padding-left: 5%;

      }

      .footer-col h4{

        font-size: 20px;

      }

      .footer-text{

        font-size: 18px;

      }

      #map1{

        display: none;

      }

      #map2{

          display: block;

      }

      #map3{

        display: none;

      }

      #map4{

        display: none;

      }  

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

    .case6{

        display:flex; /* Utiliser flexbox pour centrer l'image */

        justify-content: center;

        height: 400px;

    }

    #case{

        width: 750px;

    }

    .table-container {

        margin-top: 0px;

    }    

    #tabl2{

        display: block;

    }

    #tabl1{

        display: none;

    }

    .contenue{

        scale: 100%;

    }

    .pg1{

        display:none;

    }

    .pg2{

        width: 100%;

    }

    table{

        margin-left: -300px;

    }

    #title1{

        margin: 100px 0px 0 130px;

        font-size: 5rem;

        letter-spacing: 15px;

      }

    #title2{

        margin: 180px 0px 0 300px;

        font-size: 4rem;

        letter-spacing: 10px;

        word-spacing: -20px;

    }

    #title3{

        line-height: 0.8;

        font-weight: 400;

        color: var(--beige_smoke_color) !important;

        background-color: hsl(0, 0%, 100%, 0.8);

        height: 50px;

        font-family: 'Popins', serif !important;

        font-size: 1.5rem;

        text-align: center;

        margin: 280px 0px 0 0px;

        display: flex;

        align-items: center;

        justify-content: center;

      }

    .ctnhdr{

        height: 430px;

      }

      .wrapper{

        display: none;

      }

    

      #msdblock{

        display: flex; /* Utiliser flexbox pour centrer l'image */

        justify-content: center; /* Centrer horizontalement */

        align-items: center; /* Centrer verticalement */

        margin-bottom: 100px;

      }

      #msdinfo img{

        margin-left: 13%;

      }

      #msdinfo{

        background-color: rgba(191, 191, 191, 0.1);

        border-radius: 20px;

        border: 1px solid #c1bba5;

        display: block;

        width: 650px;

      }

      .footer-col{

        padding-left: 5%;

      }

      .footer-col h4{

        font-size: 20px;

      }

      .footer-text{

        font-size: 18px;

      }

      #map1{

        display: none;

      }

      #map2{

          display: none;

      }

      #map3{

        display: block;

      }

      #map4{

        display: none;

      }  

}