/* Le code CSS de la démo */

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

/*GENERAL*/

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

:root {
    --ColorPrincipale: #00748D;
    --ColorSecondaire: #CB8606;
}

body {
    font-size: 1.8rem;
    color: #414141;
    background-color: #fff;
    /*max-width: 1500px;*/
}

.container: {
    max-width: 1500px;
    font-family: 'Nunito', sans-serif;
    margin: 0 auto;
}

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

/*HEADER*/

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

.wrapper {
    background-color: var(--ColorPrincipale);
    display: flex;
    justify-content: space-around;
    font-family: 'Fjalla One', sans-serif;
    /*flex-wrap:nowrap;*/
    background-image: url("../instructions/images/path.png");
    background-repeat: repeat-x;
    background-position: bottom;
}

.wrapper div {
    width: 50%;
    display: flex;
    /*justify-content: center;*/
    /*flex-wrap:nowrap;*/
    /*padding-top: 10px;*/
}

.wrapper div a {
    color: #fff;
    font-size: 2rem;
    margin: 10px;
    /*white-space: nowrap;*/
    text-decoration: none;

}

.logo strong {
    margin-left: .5em;
    font-weight: normal;

}

.wrapper nav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

    list-style: none;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

.wrapper li {
    /*width: 50%;*/
    padding: 10px;
    margin: 10px;
    /*display: inline-block;*/
    /*text-align: center*/
    white-space: nowrap;
}

.wrapper li a {
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.wrapper li a:hover {
    color: var(--ColorPrincipale);
    background-color: #fff;
    text-decoration: none;

}

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

/*MAIN*/

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

.titre {
    margin-left: auto;
    margin-right: auto;
    background-image: url("../instructions/images/bg-header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    /*height:500px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5em 0;


}

.titre h1 {
    color: #fff;
    background-color: var(--ColorSecondaire);
    /*text-align: center;*/
    /*width: 450px;*/
    /*margin: 0px;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*white-space: nowrap;*/
    /*padding: 0.5%;*/
    font-size: 3rem;
    /*overflow: auto;*/
    /*margin-bottom: 25px;*/
    padding: 0.3em;

}

.titre p {
    background-color: #fff;
    color: var(--ColorPrincipale);
    /*width: 650px;*/
    /*margin: 10px;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*font-size: 2rem;*/
    padding: 0.5%;
    /*overflow: auto;*/
}

h2 {
    color: var(--ColorPrincipale);
    font-size: 2.5rem;
    text-align: center;
    justify-content: space-around;
    flex-basis: 100%;
}

h2 span {
    color: var(--ColorSecondaire);
}

h3 {
    color: var(--ColorSecondaire);
    font-size: 2.5rem;
    text-align: center;
    justify-content: space-around;
    flex-basis: 100%;
    text-transform: uppercase;
    /*letter-spacing : 1px;*/
}

h3 span {
    color: var(--ColorPrincipale);
}

.presta {
    display: flex;
    text-align: center;
    margin: 10px;
    max-width: 1500px;
    flex-wrap: wrap;
}

.presta article {
    /*margin: 10px;*/
    width: 25%;

}

.presta h3 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 2rem;

}

.presta i {

    background-color: var(--ColorSecondaire);
    color: #fff;
    padding: 10px;
    font-size: 3rem;
}

.presta p {
    font-size: 1.5rem;
    text-align: justify;
}

.savoir {
    background-color: var(--ColorPrincipale);
    color: #fff;
    text-decoration: none;
    /*width : 10000%;*/
    padding: 10px 20%;
}

.savoir:hover {
    background-color: #fff;
    color: var(--ColorPrincipale);
    text-decoration: none
}

/*.prestataires {*/

/*    display: flex;*/

/*    justify-content: space-around;*/

/*    text-align: center;*/

/*    margin: 10px;*/

/*}*/

/*.prestataires a {*/

/*    margin: 20px;*/

/*}*/

.prestataires img {
    width: 24%;
    padding: 0;
    border: 5px solid var(--ColorPrincipale);

}


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

/*FOOTER*/

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

.footer {
    padding: 0;
    width: 100%;


}

.footer div:first-child {
    background-color: var(--ColorPrincipale);
    display: flex;
    justify-content: space-around;
    font-family: 'Fjalla One', sans-serif;
    /*flex-wrap:nowrap;*/
    background-image: url("../instructions/images/path.png");
    background-repeat: repeat-x;
    background-position: bottom;
    padding: 10px;

}

.RS {

    width: 30%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;

    list-style: none;
    font-size: 2rem;
    margin-right: 10px;

}

.RS i {
    padding: 3px;
    font-size: 3rem;
    margin: 0;
}

.RS a {
    margin: 1px;
}

/*.footer div {*/

/*    width: 50%;*/

/*    display: flex;*/

/*    justify-content: center;*/

/*    padding-top: 10px;*/

/*}*/

.footer div a {
    color: #fff;
    font-size: 2rem;
    margin: 10px;
    white-space: nowrap;
    text-decoration: none;

}

/*realisation*/

.real {
    display: flex;
    /*flex-direction:column;*/
}

.real aside {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.real article img {
    width: 100%;
    border: 4px solid var(--ColorPrincipale);
    /*margin:2%*/
}

.portrait {
    grid-row: span 2
}

.real article {
    display: grid;
    /*flex-direction:column;*/
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    align-self: stretch;
    object-fit: cover;

}

.real article div {
    display: flex;
    flex-direction: column;
    margin: 0.5%;
}

.bedroom1 {
    order: 1;
}

.bedroom2 {
    order: 9;
}

.lamp-1 {
    order: 2;
}

.lamp-2 {
    order: 5;
}

.deco-1 {
    order: 4;
}

.deco-2 {
    order: 3;
}

.deco-3 {
    order: 11;
}

.room-1 {
    order: 6;
}

.room-2 {
    order: 13;
}

.room-3 {
    order: 15;
}

.room-4 {
    order: 12;
}

.office-1 {
    order: 16;
}

.office-2 {
    order: 14;
}

.kitchen-1 {
    order: 7;
}

.kitchen-2 {
    order: 10;
}

.kitchen-3 {
    order: 8;
}


/*.aside{*/

/*    height:50%;*/

/*}*/

.commentaire div {
    border-bottom: 1px solid var(--ColorSecondaire);
    border-width: 50%;
}

.commentaire blockquote {
    text-align: justify;

}

.commentaire img {
    float: left;
}

.commentaire {
    overflow: auto;
    height: 500px;
}



.commentaire q:before {
    content: url(../instructions/images/client.png);
    padding-right: 11px;
}

.commentaire q {
    color: blue;
    font-style: italic;
    color: var(--ColorPrincipale);

}
.tweet {
	padding: 2rem;
}
.tweet li {
    margin: 2rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    list-style: none;
    overflow: hidden;
    cursor: help;
}

.tweet li::before {
	content: url(../instructions/images/circle.png);
	margin-right: 1rem;
}


/*tablette*/

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

    header div {

        flex-direction: column;
        justify-content: space-around;

    }


    .wrapper ul {
        width: 100%;
        display: flex;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        padding-top: 10px;
        flex-wrap: nowrap;
    }

    .wrapper a {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .wrapper strong {
        margin-left: 0;
        margin-top: 10px;
    }




    .presta {

        justify-content: space-between;

        flex-wrap: wrap;
        /*max-width: 1100px;*/
    }

    .presta article {
        margin: 10px;
        width: 45%;
    }
    .presta p {
        font-size: 1.5rem;
        text-align: justify;
        /*color: red;*/
    }
    .prestataires {
        display: flex;
        justify-content: space-around;

        flex-wrap: wrap;

    }
    .prestataires a {
        width: 50%;
        display: flex;
        justify-content: center;
    }
    .prestataires img {
        width: 40%;
        margin: 10px;


    }

    /*mobile*/
    @media screen and (max-width:780px) {



        .presta article {

            width: 100%;
        }
        .prestataires a {
            width: 100%;

        }

        .footer div:first-child {
            flex-direction: column-reverse;
            align-items: center;

        }
        .footer div:first-child a {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .footer strong {
            margin-left: 0;
            margin-top: 10px;
        }

        .RS i {
            font-size: 2.5rem;
        }

        .wa {
            font-size: 1rem;
        }
    }

    /*petit mobile*/
    @media screen and (max-width:630px) {
        .wrapper nav ul {
            flex-wrap: wrap;
            flex-direction: column;
        }

        .wrapper li {
            /*width: 50%;*/
            padding: 0 10px;
            margin: 0;
            /*display: inline-block;*/
            /*text-align: center*/
        }
        .titre {
            background-position: left;
            background-size: cover;
            width: 100%;
        }
        .container {
            width: 100%;
        }
    }