/*  ================= CSS utilisés dans toutes les pages ==========
*
*
*/




*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --noir: #0f0f11;
    --blanc: white;
    --rouge: #c1272f;
    --gris: #e7e0e0;
}

@font-face {
    font-family: muktamlar;
    src: url(/fonts/MuktaMalar-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: muktamalar-bold;
    src: url(/fonts/MuktaMalar-Bold.ttf);
    font-display: swap;
}

@font-face {
    font-family: muktamalar-extra-bold;
    src: url(/fonts/MuktaMalar-ExtraBold.ttf);
    font-display: swap;
}

body {
    font-family: muktamlar;
}

body, html{
    position: relative;
    width: 100%;
    font-size: 16px;
    overflow-x: hidden !important;
}

a {
    display: inline-block;
    text-decoration: none;
    color: var(--noir);
}

a, .btn{
    transition: color 0.4s, background-color 0.4s;
    width: max-content;
}

p{
    color: var(--noir);
}

h1,h2,h3{
   font-family: muktamalar-extra-bold;
   text-transform: uppercase;
}

h1{
    font-size: 1.6em;
    max-width: 782px;
}

h2{
    line-height: 34px;
}

h3{
    font-size: 1.3em;
}

.flex {
    display: flex;
    flex-direction: column; /* -- Se change en row après -- */
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row{
    display: flex;
}

.flex-switch{
    display: flex;
    flex-direction: column;
}

.marge{
    width: 95%;
    margin: 0 auto;
}

.marge-2{
    width: 92%;
    margin: 0 auto;
}

.container-6{
    width: 95%;
    margin: 0 auto;
}

#page-cuisine .pourquoi{
    margin-top: 30px;
}

#page-remplacement .container-3 .row-1 ul li{
    list-style-type: none;
}

.marge-mobile{
    margin-top: 15px;
}


.numero{
    font-size: 1.2em;
}


input[name="name"]{
    display: none;
}

label[for="button-submit"]{
    width: max-content;
}

input[type="submit"]{
    display: none;
}

img {
    width: 100%;
    max-width: max-content;
    height: auto;
    display: block;
}

.img-absolute{
    position: absolute;
    z-index: 1;
}

form #name{
    display: none;
}

.bold{
    font-family: muktamalar-bold;
}

.btn{

}

.btn-1 {
    display: flex;
    align-items: center;
    background-color: var(--rouge);
    color: var(--blanc);
}

.btn-1:hover,.btn-2:hover{
    background-color: #0f0f11;
}

.btn-1:hover .container-fleche,.btn-2:hover .container-fleche{
    background-color: var(--rouge);
}

.btn-1 .text-part{
    padding: 8px 14px;
}

.btn-2 {
    display: flex;
    align-items: center;
    background-color: var(--rouge);
    color: var(--blanc);
    text-transform: uppercase;
}

.btn-2 .text-part {
    width: 246px;
    text-align: center;
}

.btn:hover{
    background-color: ;
    color: ;
}


.screen-only{
    display: none;
}

.container-1{
    padding-top: 10px;
    justify-content: space-evenly;
}

.container-1 h1{
    line-height: 34px;
}

.container-1 .col-1{
    padding-bottom: 20px;
}

.container-1 .col-1 h2{
    margin-top: 36px;
}


.container-1 .col-1 p{
    margin-top: 30px;
}

.container-1 .col-1 .btn{
    margin-top: 39px;
    font-family: muktamalar-bold;
}

.container-2 {
    justify-content: space-evenly;
    padding: 42px 0;
}

#page-salle-bain .container-2{
    padding-top: 10px;
}

.container-2 h2{
    max-width: 90%;
}

.container-2 .souligne{
    margin: 33px 0px;
}

.container-2 .container-img{
    display: flex;
}

.container-2 .container-img picture{
    margin-right: 19px;
}

.container-2 .col-2 h3{
    font-weight: 400;
}

.container-2 .col-2 ul{
    margin-left: 14px;
}

.container-2 .col-2 ul li{
    list-style-type: disc;
}

.container-3 .col-2 .row-1{
    background-color: var(--gris);
}

.container-3 .bloc-txt{
    padding: 10px 0;
}

.container-3 .bloc-txt ul{
    margin-top: 30px;
    margin-bottom: 30px;
} 
.container-3 .row-1 ul{
    margin-left: 14px;
}

.container-3 .row-1 ul li{
    list-style-type: disc;
}

.container-3 .souligne{
    margin: 25px 0 27px 0;
}

.container-3 img{
    max-width: unset;
}

.container-3 .bold{
    margin-bottom: 19px;
}


.container-4 img{
    max-width: unset;
}

.container-5{
    padding-top: 10px;
    margin-bottom: 17px;
    justify-content: space-evenly;
}

.container-5 .col-1{
    padding-bottom: 20px;
}

.container-5 .col-1 .btn{
    margin-top: 39px;
    font-family: muktamalar-bold;
}

.container-5 .souligne{
    margin: 25px 0 27px 0;
}

.container-5 p:nth-child(4){
    margin-top: 21px;
}

.container-5 img{
    max-width: unset;
}

.container-fleche{
    background-color: var(--noir);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s ease-in;
}

.container-fleche:hover{
    background-color: var(--rouge);
}

.section-appel-action{
    margin-top: 80px;
    margin-bottom: 40px;
}

.section-appel-action .flex-switch{
    row-gap: 20px;
}

.section-appel-action .col-1{
    padding-bottom: 40px;
}

.section-appel-action .col-1 h2{
    line-height: 27px;
}

.section-appel-action .col-1 .souligne{
    margin: 25px 0 27px 0;
}

.section-appel-action .souligne{
    margin: 25px 0 27px 0;
}

.section-appel-action .text-container{
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    margin-top: 30px;
} 

.section-appel-action .coordonnees{
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
    align-items: center;
}

.section-appel-action .coordonnees a{
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.section-appel-action .coordonnees a:hover{
    color: var(--rouge);
}

.section-appel-action .coordonnees a span{
    width: 24px;
    display: inline-block;
}

.section-appel-action .coordonnees .email span{
    font-size: 1.6em;
}

.section-appel-action .btn-2{
    margin-top: 40px;
}

.section-appel-action .btn-2 .text-part{
    width: 280px;
}

.section-regions{
    margin-top: 30px;
    margin-bottom: 60px;
}

.section-faq{
    margin-top: 50px;
}

.section-faq .questions{
    margin-top: 20px;
    margin-left: 17px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(346px, 1fr));
    row-gap: 38px;
    column-gap: 16px;
}

.section-faq .questions li{
    list-style-type: number;
}

.section-faq .questions li::marker{
    font-family: "muktamalar-extra-bold";
}

.section-faq .questions li h3{
    font-size: 1em;
    font-weight: 400;
    text-transform: none;
}

#page-agrandissement .container-1 .souligne{
    margin-top: 25px;
}

.swiper{
    margin-top: 93px;
}

input[type="text"],textarea {
    padding: 18px 0px 13px 10px;
}

input[type="text"],textarea{
    width: 100%;
    margin: 4px 0;
}

.checkbox-container label{
    margin: 4px 0;
    font-size: 0.9em;
}

.poly-background{
    clip-path: polygon(96.08% 0, 93.94% 70%, 7.07% 70%, 1.45% 0%);
    background: #c1272f;
    display: flex;
    align-items: center;
    padding: 12px 31px 30px 31px;
}

.poly-background a{
    margin: 0 4px;
}


.g-recaptcha{
    margin-top: 20px;
}

/**************

    MENU MOBILE

***************/


#menu-screen {
    display: none;
}

header{
    position: fixed;
    width: 100%;
    z-index: 2;
}

header a{
    color: var(--blanc);
}

header .logo{
    width: 208px;
    min-width: 208px;
    max-width: max-content;
    transition: width ease 0.6s;
}

.border-animated{
    width: 0;
    background-color: var(--rouge);
    height: 3px;
    transition: ease-in 0.4s;
}

header .forms-link{
    padding-top: 12px;
    margin-right: 22px;
    font-family: muktamalar-extra-bold;
}

header .forms-link a{
    margin-right: 28px;
}

header .forms-link a:hover{
    color: var(--rouge);
}

header li:hover .border-animated{
    width: 100%;
}

#screen-row-1 .poly-background a{
    font-family: muktamlar;
}

#screen-row-1 .poly-background a:hover{
    color: #000;
}

#screen-row-2 a{
    font-family: muktamalar-extra-bold;
}

#mobile-row-1 {
    background-color: #1c1c1ce3;
    z-index: 2;
    padding: 7px 0;
}

#mobile-row-1 > div{
    justify-content: space-between;
    align-items: center;
}

#mobile-row-2 .row-1{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

#mobile-row-2 .row-1 li{
    text-transform: uppercase;
    font-size: 1.2em;
}

#burger span{
    width: 30px;
    display: block;
    height: 2px;
    background-color: white;
    margin: 8px 0;
    transform-origin: 3% 0%;
    transition: transform 0.3s ease, background-color 0.3s ease-in, opacity 0.2s ease;
}

#burger.x-shape span{
    background-color: var(--rouge);
    /*transform: rotate(0deg);*/
}
.x-shape span:nth-child(1){
    transform: rotate(45deg);
}
.x-shape span:nth-child(2){
    opacity: 0;
}
.x-shape span:nth-child(3){
    transform: rotate(-45deg);
}

header .menuToggle{
    display: none;
    transform: translateY(-58%);
}

#mobile-row-2 {
    transition: transform 0.3s ease-in,  background-color 1s ease;
    background-color: #1c1c1ce3;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding-top: 100px;
}

.open-nav #mobile-row-2{
    background-color:  #1c1c1c;
}

#mobile-row-2 .row-2{
    margin-top: 28px;
}

#mobile-row-2 .reseau-social{
    display: inline-block;
}

.hideMenu{
    transform: translateY(-100%);
}

.showMenu{
    display: flex;
    transform: translateY(0);
}


/***********

    MAIN CSS

************/
li {
    list-style: none;
}

.souligne{
    width: 133px;
    height: 9px;
    background-color: var(--rouge);
}

.souligne-2{
    width: 40px;
    height: 4px;
    background-color: var(--rouge);
    margin-bottom: 16px;
}

.container-1 .btn-1{
    margin: 25px 0 27px 0;
}

.banner{
    position: relative;
}

.banner .banner-content{
    position: absolute;
    left: 50%;
}

main .banner .banner-content{
    width: 100%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 1;
}

#page-salle-bain .section-3 li{
    list-style: disc inside;
}

.banner img{
    object-fit: cover;
}
.small-banner img{
    height: 154px;
    max-width: none;
    object-fit: cover;
}

.bloc-txt {

}

.container-content{

}

.pourquoi .souligne{
    margin: 25px 0 27px 0;
}
/*  ================= FOOTER =============== */

footer {
    color: white;
    background-color: #0f0f11;
}

footer .banner-background {
    display: none;
}

footer a:hover{
    color: var(--rouge);
}

footer .col-1{
    margin-top: 16px;
}

footer .col-2{
    margin-top: 26px;
}

footer .col-1 b{
    font-family: muktamalar-bold;
}

footer .col-2 .bloc-txt-2 img{
    margin-right: 10px;
}

footer p{
    color: white;
}

footer a{
    color: white;
}

footer.banner .banner-content {
    position: initial;
}

#footer-row-1{
    justify-content: space-between;
}


footer .bloc-txt{
    max-width: 328px;
    margin-top: 14px;
}

#footer-row-2{
    margin-top: 14px;
    padding-bottom: 10px;
}

#footer-row-2 .col-2{
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

hr{
    color: var(--rouge);
}

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

    .banner-background img{
        max-width: unset;
    }

    .marge-mobile{
        margin-top: unset;
    }

    header{
        background-color: #1c1c1ce3;
    }

    h1{
        font-size: 2.3em;
        max-width: unset;
    }

    h2{
        line-height: normal;
    }

    h2, h3{
        font-size: 1.6em;
    }

    .mobile-only {
        display: none;
    }

    #menu-mobile{
        display: none;
    }

    #menu-screen {
        display: flex;
        padding-bottom: 7px;
        padding-top: 16px;
    }

    header ul a{
        line-height: 17px;
    }

    #screen-row-1 {
        justify-content: flex-end;
    }

    header .logo{
        width: 30%;
    }

    header .cordonnes{
        transition: opacity 0.5s ease;

    }

    .opacity-0{
        opacity: 0;
    }

    .opacity-1{
        opacity: 1;
    }

    .not-move{
        margin-top: 0;
    }

    .move{
        margin-top: -62px;
        z-index:2;
    }

    .reduce{
        width: 14% !important;
    }

    #screen-row-2 {
        align-items: center;
        justify-content: space-between;
        transition: margin-top 0.3s ease;
    }

    #screen-row-2 ul a{
        padding-top: 10px;
        text-transform: uppercase;
    }

    header ul li{
        margin: 0 21px;
    }

    .flex{
        flex-direction: row;
    }

    .flex-switch{
        flex-direction: row;
        justify-content: space-between;
    }

    .container-1{
        padding-top: 105px;
        width: 85%;
        justify-content: space-between;
    }

    .container-3 img{
        min-height: 467px;
        object-fit: cover;
    }

    .container-6{
        width: 85%;
    }

    #page-cuisine .pourquoi{
        margin-top: 90px;
    }

    #page-remplacement .container-3 .row-2{
        margin-top: 40px;
    }

    #page-remplacement .container-3 .row-2 h2{
        font-size: 1.5em;
    }

    #page-remplacement .container-3 .row-2 ul{
        margin-left: 16px;
    }

    #page-remplacement .container-3 .row-2 ul li{
        list-style-type: revert;
    }

    #page-salle-bain .container{
        padding-top: 165px;
    }

    #page-salle-bain .container-2{
        margin-top: 50px;
    }

    #page-salle-bain .section-2{
        padding-top: 165px;
    }

    #page-remplacement .container-2 .col-2 > div ul{
        margin-top: 10px;
    }

    #page-remplacement .container-3 .col-2 .row-2 h2{
        line-height: 34px;
    }

    .section-appel-action{
        width: 85%;
        max-width: 1100px;
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .section-appel-action .flex-switch{
        align-items: center;
        column-gap: 60px;
    }

    .section-appel-action .col-1{
        width: 36%;
        min-width: 440px;
        max-width: 624px;
        padding-right: 25px;
    }

    .section-appel-action .col-1 h2{
        line-height: 34px;
    }

    .section-faq{
        margin-top: 90px;
    }

    .section-faq .questions{
        grid-template-columns: repeat(2, 0.48fr);
        justify-content: space-between;
        margin-top: 70px;
    }

    .section-faq .questions li h3{
        margin-bottom: 10px;
    }

    .section-faq .questions li::marker, .section-faq .questions li h3{
        font-size: 1.1em;
    }

    .section-3{
        align-items: center;
        column-gap: 30px;
    }

    .container-1 .col-1{
        width: 50%;
        max-width: 615px;
        padding-right: 25px;
    }

    .container-1 h1{
        line-height: 52px;
    }
    .container-1 .col-1 h2{
        line-height: 27px;
        margin-top: 0;
    }

    .container-1 .col-1 .btn{
        margin-top: 74px;
    }

    .container-1 .col-2{
        width: 41%;
    }
    .container-2 {
        width: 85%;
        padding: 87px 0 !important;
        justify-content: space-between;
    }

    .container-2 .col-1{
        width: 50%;
        max-width: 620px;
        padding-right: 22px;
    }

    .container-2 .col-2{
        width: 41%;
    }

    .container-2 .col-2 h3{
        font-size: 1.1em;
    }

    #page-patio .container-2 .col-2 ul:nth-child(2){
        margin-top: 20px;
    }

    #page-patio .container-2 .col-2 > div:nth-child(5) ul:nth-child(4){
        margin-top: 10px;
    }

    .container-3 img{
        max-width: max-content;
    }

    .container-3 .col-1 {
        width: 58%;
        max-width: 52%;
    }

    .container-3 .col-2{
        flex: 1;
    }
    .container-3 .col-2 .row-1 {
        height: 100%;
    }

    .container-3 .col-2 h3{
        font-size: 2vw;
        line-height: 32px;
    }

    .container-3 .bloc-txt{
        width: 81%;
        padding: 20px 0;

    }

    .container-3 .ipad-only .bloc-txt{
        width: 85%;
    }

    .container-4 img{
        max-width: max-content;
    }

    .container-5{
        align-items: center;
        padding-top: 105px;
        margin-bottom: 110px;
    }

    .container-5 .col-1{
       /* width: 36%;*/
        max-width: 624px;
        padding-right: 25px;
    }

    .container-5 h1{
        line-height: 52px;
    }

    .container-5 .col-1 h2{
        line-height: 27px;
    }

    .container-5 .col-1 .btn{
        margin-top: 74px;
    }

    .container-5 .col-2{
        width: 41%;
        display: flex;
        justify-content: center;
    }

    .container-5 img{
        max-width: max-content;
    }

    #page-patio .section-2 .col-2 p{
        margin-top: 20px;
    }

    #page-patio .container-2 .col-2 > div ul:last-child{
        margin-top: 10px;
    }

    .swiper img{
        max-width: none;
    }

    .pourquoi{
        display: flex;
        flex-direction: row;
        column-gap: 150px;
        margin-top: 90px;
        margin-bottom: 140px;
    }

    .pourquoi .col-2 li {
        font-size: 1.1em;
        list-style-type: disc;
    }

    footer .banner-background {
        display: block;
    }

    .banner img{
        height: unset;
    }

    footer.banner{
        overflow: hidden;
    }

    footer.banner .banner-content {
        width: 90%;
        transform: translate(-50%,0);
        top: 8%;
        position: absolute;
    }

    #footer-row-1 .col-1{
        width: 47%;
    }

    footer #footer-row-1 > .col-1 b{
        font-size: 1.5em;
    }
    #footer-row-1 > .col-2 {
        justify-content: space-between;
    }

    footer .bloc-txt{
        padding: 0 10px;
    }

    #footer-row-2 {
        margin-top: 130px;
        justify-content: space-between;
    }
}

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

    h1{
        font-size: 3em;
    }

    .ipad-only{
        display: none;
    }

    .screen-only{
        display: block;
    }

    #menu-screen{
        width: 92%;
    }

    header ul li{
        margin: 0 35px;
    }

    .container-1{
        width: 79%;
        justify-content: flex-start;
        column-gap: 160px;
    }

    .container-1 .col-2{
        width: 48%;
    }

    .container-2{
        width: 79%;
    }

    .section-3{
        justify-content: flex-start;
        align-items: flex-start;
        column-gap: 160px;
    }

    .container-3 .col-1 {
        width: 52%;
        max-width: max-content;
    }

    .container-3 .col-2 .row-1 {
        height: unset;
        padding: 58px 0;
    }

    .container-3 .col-2 h3{
        font-size: 1.6em;
    }

    .container-6{
        width: 80%;
    }

    .section-appel-action{
        width: 80%;
        max-width: none;
    }

    .section-appel-action .col-2{
        margin-right: 10%;
    }

    .section-regions{
        width: 80%;
        margin-top: 110px;
    }

    #page-salle-bain .section-2{
        padding-top: 105px;
    }

    #page-agrandissement .container-1 .souligne{
        margin: 25px 0 22px 0;
    }

    .pourquoi .col-1{
        width: 42%;
    }

    #footer-row-1 > .col-2 {
        width: 55%;
    }
}

.algoperfo{
    display: none;
}
@media only screen and (min-width: 1024px) {
    .algoperfo {
        margin-top:30px;
        font-size: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 30px;
    }
    .algoperfo ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 30px;
    }
}