@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

body{
    overflow-x:hidden;
}

h1{
    text-align:center;
    margin:auto;
    padding: 40px 0;
}

h2{
    font-family:lulo-clean-w01-one-bold,lulo-clean-w05-one-bold,sans-serif;
    color:#000000;
    font-size:39px;
    letter-spacing:-0.05em;
    font-size:39px; 
    line-height:normal; 
    text-align:center;
    margin:auto;
    padding: 40px 0;
}

.bg-green{
    background-color:rgb(180, 217, 195)
}

.baskerville24{
    font-family: libre baskerville,serif;
    font-size:24px
}

/*** NAVBAR **/
.navbar-nav a{
    color:black;
    text-decoration:none!important
}
.navbar-nav a:hover{
    color:#495561 ;
    text-decoration:none
}

.fa-brands{
    font-size: 24px;
    color:white;
    background-color: #000000;
    object-fit: cover;
    object-position: 50% 50%;
}

.text-vertical{
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

input, textarea{
    width: 100%;
}

/* MOBILE FIRST */


/***** NAVBAR ****/ 
.navbar li{
    text-align: center;
}


.collection-title{
    font-size:27px;
    font-family:'Libre Baskerville', serif;
    text-transform : uppercase
}

.collections{
    width: 100%;
    margin: auto;
    text-align: center;
}

.collection{
    margin-bottom: 10px;
}

.collection-text{
    display:none
}

.bloc-collection:hover .collection-text{
    display:flex;
    position: absolute; 
    top:15px; ; 
    left:20px;
    z-index:10
}

.bloc-collection:hover .collection{
    opacity:0.3;
}

.index-image_top{
    max-width: 100%;
}

.index-description{
    font-size:15px;
    padding:12px;
    padding-bottom: 0px;
}

.index-button{background: #FFFFFF;
    border: 1px solid #2F2F2E;
    margin-left:12px;
    margin-bottom:12px;
    width: 141px ;
} 

.index-button:hover{
    background: #2F2F2E;
    border: 1px solid #FFF;
    color:#FFF;
} 

img, .map, iframe{
    max-width: 100%;
}



/******** SPECIALISATIONS **********/
.spe .bottom-image-para-reverse{
    display:flex;
    flex-direction: column-reverse;
}

.spe .spe-1, .spe .spe-2, .spe .spe-3{
    background-color:#eaeae8;
    padding: 10px 10%;
    margin-bottom:20px;
}
 


/***** FOOTER *****/

footer{
    padding: 15px 0;
}

.footer-info{
    text-align: center;
}

footer .rs{
    margin: auto;
    gap:20px;
    display:flex
}

footer .fa-brands{
    font-size: 50px
}

.table_opening_hours{
    margin: 15px auto;
}

footer table td, footer table th{
    padding-left: 10px;
    padding-right: 10px;
}


/**********   SKILLS *************/

.skill_citation{
   font-weight: bold;
   text-align: center;
   margin: 0 7% 20px 7%;
}

.skill_text_1_1, .skill_text_1_2, .skill_text_2_0, .skill_text_2_1, .skill_text_2_2,
.skill_text_3_1, .skill_text_3_2, .skill_text_4_1, .skill_text_4_2, .skill_text_4_3{
    margin: 7%;
}

.skill_text_1_1, .skill_text_3_1{
    margin: 0 7%;
}

/******** ACTUS ***********/

.actus a{
    text-decoration:none;
    color:black
}

.post-article{
    margin-bottom: 30px;
}

.post-article img{
    margin:0 ;
    width: 100%;
}

.post-article{
    background-color:#eaeae8; 
}

.post-article .content{
    height:98px;
    overflow: hidden;
}

.post-article button{
    margin-bottom: 20px
}


 


/* TABLETTE */
@media(min-width:768px){

    

    /**** INDEX  ****/

    .index-description{
        width: 90%!important;
        margin: auto;
    }

    
    .div-index-image-left {
        text-align: center;
        margin:auto
    }

    .index-tablette-para-2{
        display: flex;
        flex-direction: row-reverse;
    }

    .index-tablette-para-2{
        margin: 0 10%;
    }

    .index-description, .div-index-image-right{
        width: 50%;
    }

    .index-button{
        visibility: hidden;
    }


    /*******   COLLECTIONS ****/

    .collections{
        
        width: 800px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        
    }

    .collections>div{
        width: 260px;
    }

    /**** FOOTER ****/

    .infos-opening-hours{
        display: flex;
        flex-direction: row!important;
    }

    .footer-info{
        width: 50%!important;
    }

    .opening_hours{
        width: 50%!important;
    }

    iframe{
        max-width: 100%;
        margin:auto;
        text-align: center;
    }

    /************** SKILLS ***********/
    .skill_1, .skill_2, .skill_3{
        margin: auto;
        text-align: center;
    }


    /******* ACTUS  *************/ 

    .post-article img {
        margin: auto;
        width: auto;
    }
    
}


@media only screen and (min-width : 1024px) {

    /* ***** NAVBAR *****/
    .navbar-homemade{
        justify-content: center;
    }

    .navbar-nav{
        width: 100%;
        justify-content: space-around;
        list-style: none;
    }

    .link-rdv{
        background-color:#eaeae8;
        padding:10px 20px
    }

    



    .big-column-desktop{
        display: flex;
        flex-direction: row;
        margin: auto;
        text-align: center;
        justify-content: center;
    }

    .small-column-desktop{
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        width: 526px;
    }

    .index-description{
        max-width: 526px;
        display: flex;
        flex-direction: column-reverse;
    }

    .small-column-desktop-inverse{
        display: flex;
        flex-direction: column-reverse;
        margin-left: 10px;
        width: 377px;
        justify-content: flex-end;
    }

    .index-image-right{
        max-width: 377px;
    }

    .index-image-left{
        max-width: 526px;
    }

    .index-button{
        margin-top: 20px;
        visibility: visible;
    }

    .div-index-image-right{
        width: 100%;
    }

    .index-description{
        width: 90%!important;
        margin: auto;
    }

        .index-tablette-para-2{
            display: flex;
            flex-direction: column-reverse;
            margin:0
        }



    /*****   
    }

    
    .div-index-image-left {
        text-align: center;
        margin:auto
    }

    .index-tablette-para-2{
        display: flex;
        flex-direction: row-reverse;
    }

    .index-tablette-para-2{
        margin: 0 10%;
    }

    .index-description, .div-index-image-right{
        width: 50%;
    }

    .index-button{
        visibility: hidden;
    }


    */


    /******** FOOTER   /*********

    .footer-content{
        display: flex;
        flex-direction: row;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 15px;
        overflow-x: hidden;
    }

    .infos-opening-hours{
        width: 66%!important;
    }

    .footer-info{
        text-align:left
    }

    footer .rs{
        margin:0;
        gap:10px;
        padding-top:10px
    }

    footer .fa-brands{
        font-size: 30px;
        margin-left: 10px;
    }

    .opening_hours{
        text-align:left
    }

    .table_opening_hours{
        margin: 0;
    }
    
    .map{
        width: 33%!important;
        max-height:200px!important
    }

    /**** POSt **********/ 

    .post-article{
        display: flex;
        flex-direction: row;
        margin-bottom: 30px;
        height:250px
    }

    .post-article > img{
        max-width: 20%;
    }

    .post-article .content{
        height:70px;
        overflow: hidden;
    }

    .post-text{
        max-width: 80%;
        display: flex;
        flex-direction: column;
        margin-left: 15px;
    }


    .bg-dark{
        padding-top:50px;
        padding-bottom:50px;
    }
    .container-desktop{
        margin:auto;
        text-align: center;
    }

    /**** SKILL ***/
    .skill_text_1_1, .skill_text_1_2, .skill_text_2_0, .skill_text_2_1, .skill_text_2_2,
    .skill_text_3_1, .skill_text_3_2{
        margin-top: 15px;
        margin-bottom:15px
    }

    .skill_1, .skill_2, .skill_3{
        margin:0
    }


    .skill_text_4_1, .skill_text_4_2, .skill_text_4_3{
        margin-top: 5px;
        margin-bottom: 25px;
    }

    .skill_1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap:40px
    }

    .skill_1_bloc{
        display: flex;
        flex-direction: column;
        max-width: 430px;
        
    }

    .skill_2-3{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap:40px
    }
    
    .skill_2{
        display: flex;
        flex-direction: column;
        max-width: 430px;
        
    }

    .skill_3{
        display: flex;
        flex-direction: column;
        max-width: 430px;
        margin-top: -300px;
    }

    .bottom-image-para{
        display:flex;
        margin-top: 15px;
    }


    /**  ACTUS **/

    .actus h2{
        padding: 20px;
    }

    .actus .post-article{
        padding:15px
    }

    .post-article h2{
        margin: 0 auto;
    }

    .post-article button{
        margin-top: 20px;
    }

    .actus .div-img{
        align-items:center;
        width:260px
    }

    .actus .post-text{
        padding: 0px 40px; 
    }


    /***   SPECIALISATIONS ***/

    .spe .div-img{
        min-width:50%;
    }

    .spe .spe-1{
        padding:15px; 
        margin-bottom:20px;
    }

    .spe .spe-2{
        
        padding:15px; 
        margin-bottom:20px; 
    }

    .spe .spe-3{
        
        padding:15px;
    }

    .specialition-bottom{
        width:50%; padding-left:40px
    }

    .bottom-image-para{
        gap:40px
    }

    .spe .bottom-image-para-reverse{
        flex-direction: row;
    }


    
    
}