@font-face {
    font-family: "Sofia";
    src: url("Sofia-Regular.ttf");
}

body{
    margin:0;
    box-sizing: border-box;
    --primary: #bf2604;
    --secondary : #921b00;
    font-family: "Raleway",sans-serif;
    text-align: center;

}
a{
    text-decoration: none;
    color:black;
    box-sizing: border-box;
    transition: all 0.3s;

}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
nav{
    position: fixed;
    background: white;
    width: 100%;
    z-index: 100;
}
button {
    border:none;
    background-color: inherit;
    transition: all 0.2s;
    cursor: pointer;
}
.icon {
    display: inline-block;
    width: 2em;
    height: 2.25em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    transition: all 0.2s;

}

nav .icon:hover{
    color: var(--primary)
}
/************************************************* BUTTON *********************************/

.search{
    display: none;
}
.btn{
    display: inline-block;
    text-align: center;
    font-size: 1.25em;
    width: 294px;
    padding:0.75em 0;
}
.btn-discover{
    color:white;
    background: rgba(0,0,0,0);
    border: 2px white solid;
    cursor: pointer;
}

.btn-discover:hover{
    background: rgba(255,255,255,0.30);
}

.btn-info{

    background: white;
    color:var(--primary);
    border: 2px var(--primary) solid;
}

.btn-info:hover{
    color:white;
    background: var(--primary);
}

.btn-action{
    background: var(--primary);
    color:white;
    border: 2px var(--primary) solid;
}

.btn-action:hover{
    background: var(--secondary);
}

/***********************************************HEADER *******************************/

.brand{
    font-family: "Sofia",sans-serif;
    color: var(--primary);
    position: absolute;
    right:50%;
    transform: translateX(50%);
    font-size: 2em;
}
.navbar{
    display: flex;
    align-items: center;

}
.navbar-up{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.navbar-up,.navbar-down{
    padding: 1em 0;
}

.nav-mobile{
    padding: 1em 0;
    background: rgba(0,0,0,0.2);
}
.burger{
    position: absolute;
    left:16px;
    top:50%;
    transform: translateY(-50%);
}
.navbar-down{
    display: none;
}

.mobile{
    display: none;
}
.burger:focus ~ .navbar-down{
    display: block;
}

.cart{
    position:relative;
}
.cart span{
    background: var(--primary);
    color:white;
    width: 15px;
    height: 15px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top:5px;
    right:-2px;
}
.cart-link p{
    display: none;
    margin-left: 1em;
}
.nav-item{
    margin:0 0.75em
}
.promotion{
    color: var(--primary)
}
.promotion:hover{
    color:var(--secondary)
}
.nav-link svg:hover{
    color:var(--primary)
}
.navbar-up .nav-link:hover{
    color: var(--primary);
}
.navbar-down .nav-link{
    position: relative;
}
.navbar-down .nav-link:before{
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;left:0;
    width: 0;
    height: 1px;
    background: black;
    transition: all 0.4s;


}
.navbar-down .nav-link:hover:before{
    width: 100%;
}
header{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.carousel{
    flex:1;
    padding: 0;
}

.discover{
    height:100%;
    color:white;
    position: relative;

}
.discover:before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("images/mobile/home.png") no-repeat center center;
    background-size: cover;
    filter: contrast(75%) brightness(70%);
}
.discover-inside{
    position: relative;
    width: 100%;height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
h2{
    font-size: 2em;
}
.discover p {
    font-size: 1.5em;
}

.your-project{
    position: absolute;
    bottom:10px;right:10px;
    background: white;
    border-radius: 90px;
    padding:0.5em;
}

.your-project a{
    color: var(--primary);

}

/********************************** SELECTION ****************************************/

h3{
    font-family: "Sofia",sans-serif;
    font-size: 2.25em;
    color: var(--primary);
    text-align: center;
    line-height: 1;
}
.selection-group{
    margin: 2.5em 0;
}
.selection{
    display: flex;
    margin-bottom: 1.25em ;
    text-align: left;
}

.selection h5{
    font-size: 1.25em;
    font-weight: normal;
    margin:0;
}
.selection p{
    font-size: 1.5em;
    font-weight: 500;
    margin:0;
}

/**************************Conception ***********************************************/
.conception{
    margin-bottom: 4em;
    text-align: center;

}
.conception .meubles{
    background: url('images/mobile/meubles.png') no-repeat center center;
    background-size: cover;

}

.conception .baignoires{
    background: url('images/mobile/baignoires.png') no-repeat center center;
    background-size: cover;
}

.conception .douches{
    background: url('images/mobile/douches.png') no-repeat center center;
    background-size: cover;
}
.conception-type-group{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.conception-type{

    max-width:450px ;
    width: 100%;
    min-height:487px;
    margin-bottom: 1.25em;
}

.conception h4{
    font-size: 1.75em;
    color:white;
    margin: 0;
}

.conception-inside{
    height:100%;
    background: rgba(0,0,0,0.35);
    box-sizing: border-box;
    display: flex;
    padding: 3em 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/********************************** 3D *****************************/
.outil3D{
    margin-bottom: 4em;

}
.outil3D img{
    width: 100%;

}

/************************************************** ARTICLE **************************************/
.blog{
    margin-bottom: 4em;

}

.articles{
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.article img{
    width: 100%;
}
.article{
    min-width: 300px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.22);
    margin:0 0.5em;
    margin-bottom: 1.25em;
}
.article h5{
    margin-top: 0;
}
.article .description{
    padding: 1em;
    text-align: left;
}
.article h5{
    font-size: 1.25em;
    font-weight: 600;
}

.article a{
    color: var(--primary);

}

/******************************* About *****************************************/


.about {
    text-align: center;
    margin-bottom: 4em;
}
.about img{
    width: 100%;
}

h6{
    font-size: 1.5em;
    font-weight: 400;
    margin:0;
}


/************************************************** SHOWROOM *************************************************************/

.showrooms{
    text-align: center;
    background : var(--primary);
    color:white;
    padding: 3em 0;
}

.showrooms p{margin: 0}
.showrooms h4{
    font-size: 1.75em;
}


/*************************************** VALUES ******************************************/
.values{
    padding:2.5em 0;
}
.value svg{
    width: 50px;
}
.value{
    display: flex;
    align-items: center;
    font-family: "Sofia",sans-serif;
    font-size: 1.25em;
}

.value svg{
    margin: 1.25em 1em;
}


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

footer{
    background: #222;
    color:white
}
.newsletter{
    padding: 2em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.join{
    margin:2em 0;
}
.social-group{
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-group a{
    margin:0 0.75em;

}

.newsletter-form{
    display: flex;
    margin-top: 1em;
}
.newsletter input{
    border: none;
    padding: 1em;
}

::placeholder{
    font-family: "Raleway",sans-serif;
}
.newsletter button{
    color:white;
    background: black;
    padding: 1em;
    font-family: "Raleway",sans-serif;

}
footer h4{
    font-weight: 400;
    font-size: 1.5em;
    margin-top: 0;
}

.newsletter p{
    font-size: 0.75em;
}

.footer-link a{
    color:white;
    font-size: 0.75em;
}

.footer-link{
    margin-top: 2em;
}

.footer-link a:hover{
    color:var(--primary)
}
footer h6{
    font-size:16px;
    padding: 1em;
}


@media (min-width: 481px) {
    .container{
        padding:0 2em;
    }

    .values{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 2em 5em;

    }
    .selection-group{
        display: flex;
        justify-content: center;
    }
    .selection{
        width: 196px;
        margin: 0 0.5em;
        flex-direction: column;
    }
    .articles{
        justify-content: center;
    }

}

@media (min-width: 769px) {
    .discover:before{
        background: url("images/desktop/home.webp") no-repeat center center;
        background-size: cover;

    }
    .burger{
        display: none;
    }

    .navbar-up{
        justify-content: space-between;
    }
    .mobile{
        display: flex;
    }
    .nav-mobile,.navbar-down .promotion{
        display: none;
    }
    .navbar-down{
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        box-shadow: 0 3px 6px rgba(0,0,0,0.2);

    }
    .conception-type-group {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
    }

}
@media (min-width: 1201px) {
    .search{
        display: block;
    }
    .cart-link{
        display: flex;
        align-items: center;
    }
    .cart span{
    }
    .cart-link p{
        display: block;
    }
    .container{
        padding:0 132px;
    }
    .about .btn-info,.outil3D .btn-action{
        width: 244px;
    }
    .conception-type-group {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        justify-items: center;
    }
    .meubles{
        justify-self: start;
        background: url('images/desktop/meubles.webp') no-repeat center center;
        background-size: cover;
    }
    .baignoires{
        background: url('images/desktop/baignoires.webp') no-repeat center center;
        background-size: cover;
    }

    .douches{
        justify-self: end;
        background: url('images/desktop/douches.webp') no-repeat center center;
        background-size: cover;
    }
    .outil3D {
        position: relative;
        height: 600px;
        overflow: hidden;
    }
    .outil3D h3{
        margin-top: 0;
        text-align: left;
    }
    .outil3D .description {
        position: absolute;
        top:50px;
        left:50%;
        background: white;
        padding: 3em 2em;
        text-align: left;
    }
    .selection-group{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        justify-items: center;
        grid-gap:50px;
    }
    .selection img,.selection{
        width: 100%;
    }
    .articles{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 60px;
        justify-items: center;
    }
    .about{
        display: flex;
    }
    .about img{
        flex: 1;
        width: 50%;
    }
    .about,.about h3{
        text-align: left;
    }

    .about .description{
        padding: 0 2em;
        flex:1;
    }
}