body,
html {
    font-family: var(--text-font);
}
.bg-4 {
    background: url(../../img/motif.svg), #252528;
}
.bold {
    font-weight: 700;
}
.border-1 {
    border-bottom: 1px solid var(--color-1);
}
hr {
    display: block;
    color  : var(--color-1);
    width  : 188px;
    height : 2px !important;
    opacity: 1;
}
h2 {
    font-weight   : 900;
    font-size     : 24px;
    text-transform: uppercase;
}
h3 {
    font-size     : 16px;
    font-weight   : 800;
    text-transform: uppercase;
}
.card-footer {
    padding         : 0.5rem 1rem;
    background-color: #fff;
    border-top      : 1px solid transparent;
}
.accroche {
    text-align    : center;
    padding-top   : 50px;
    margin-bottom : 50px;
    text-transform: uppercase;
    font-weight   : 600;
}
.accroche div {
    display   : inline-block;
    background: var(--color-1);
    transform : skew(-35deg);
    position  : relative;
}
.accroche div:after {
    content      : '';
    position     : absolute;
    /* background: var(--color-4); */
    bottom       : -4px;
    right        : -8px;
    width        : 31px;
    height       : 80%;
    z-index      : 0;
    border-right : 8px solid var(--color-4);
    border-bottom: 4px solid var(--color-4);
}
.accroche span {
    display  : inline-block;
    padding  : 1rem 4rem;
    transform: skew(35deg);
}
.img-max {
    padding: 0 3vw;
}
@media (max-width:992px) {
    .img-max {
        max-width: 520px;
    }
}
@media (max-width:768px) {
    .accroche div {
        transform: skew(0deg);
    }
    .accroche span {
        transform: skew(0deg);
    }
    .accroche div:after {
        display: none;
    }
}
section {
    position: relative;
}
section ul.list {
    list-style : square;
    padding    : 0 32px;
    font-weight: 700;
}
section ul.list li::marker {
    color    : var(--color-1);
    font-size: 1.5em;
}
section .triangle-gris {
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 120%;
    background: var(--light);
    clip-path : polygon(0% 100%, 99% 100%, 0 -35%);
    z-index   : -1;
}
/*-----------------------mur 3d --------------------------*/
.p-relative {
    position: relative;
}
#mur {
    position  : absolute;
    top       : 0;
    /* left    : -25%; */
    width     : 50vw;
    height    : 40vw;
    z-index   : 50;
    margin-top: -140px;
}
#mur:hover {
    cursor: move;
}
@media (max-width:2000px) {
    #mur {
        margin-top: -20px;
    }
}
@media (max-width:1100px) {
    #mur {
        margin-top: 0;
    }
}
@media (max-width:992px) {
    #mur {
        display: none;
    }
}
/*-----------------------Accueil--------------------------*/
section.header-accueil {
    color   : var(--white);
    height  : 560px;
    position: relative;
}
section.header-accueil h1 {
    font-weight: 700;
    font-size  : 32px;
}
section.header-accueil p {
    font-weight: 400;
    font-size  : 25px;
}
section.header-accueil:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : calc(100% - var(--topbar-height));
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--topbar-background);
}
section.header-accueil:before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 50%;
    width     : calc(var(--container-out-margin) / 2);
    clip-path : polygon(0 1%, 0 100%, 100% 0);
    background: var(--color-1);
}
@media (max-width:992px) {
    section.header-accueil:after,
    section.header-accueil:before {
        display: none;
    }
}
/*-----------------------section concept--------------------------*/
section.concept:after {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
section.concept:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-4);
}
section.concept .triangle-gris {
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 120%;
    background: var(--light);
    clip-path : polygon(0% 100%, 99% 100%, 0 20%);
    z-index   : -1;
}
@media (max-width:992px) {
    section.concept:after,
    section.concept:before {
        display: none;
    }
}
/*-----------------------LES PANNEAUX--------------------------*/
section.panneaux img {
    max-width: 70%;
}
section.panneaux:after {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 0, 0 100%, 100% 0);
    background: var(--color-1);
}
section.panneaux:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--topbar-background);
}
section.panneaux svg {
    cursor: pointer;
}
section.panneaux .modal .modal-header {
    background: var(--color-2);
    color     : #fff;
}
section.panneaux .modal a {
    color: #fff;
}
/*-----------------------detail-panneaux--------------------------*/
section.detail-panneaux .svg-img {
    width      : 100%;
    margin-left: auto;
}
section.detail-panneaux:before {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
section.detail-panneaux:after {
    content   : '';
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : var(--container-out-margin);
    height    : 120%;
    background: var(--light);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
}
#infos-1:hover,
#infos-2:hover,
#infos-3:hover,
#infos-4:hover,
#infos-5:hover {
    fill: var(--color-1);
}
section.detail-panneaux svg {
    stroke: transparent;
    fill  : rgb(24,24,33);
}
section.detail-panneaux .infos .card-title {
    background     : var(--color-1);
    padding        : 1rem;
    text-transform : uppercase;
    font-weight    : 700;
    display        : flex;
    align-items    : center;
    justify-content: center;
    min-height     : 80px;
}
section.detail-panneaux .infos .card-body img {
    max-height: 200px;
    min-height: 74px;
}
section.detail-panneaux .infos .card-body p {
    text-align: left;
}
section.detail-panneaux .infos.active {
    opacity   : 1;
    display   : block;
    transition: all 1s;
}
section.detail-panneaux svg .active {
    fill: var(--color-1);
}
section.detail-panneaux .carousel {
    /* min-height:458px; */
}
.carousel-control-prev,
section.detail-panneaux .carousel-control-next {
    color      : var(--color-2);
    opacity    : 1;
    font-size  : 3rem;
    align-items: flex-start;
}
section.detail-panneaux .carousel-control-prev {
    left: -50px;
}
section.detail-panneaux .carousel-control-next {
    right: -50px;
}
section.detail-panneaux .card-text {
    font-size: 12px;
}
section.detail-panneaux .card-text p {
    margin-top: 1rem;
}
@media (max-width:992px) {
    section.detail-panneaux:after,
    section.detail-panneaux:before,
    section.panneaux:after,
    section.panneaux:before {
        display: none;
    }
    section.detail-panneaux .carousel {
        /* min-height:408px; */
    }
}
@media (max-width:768px) {
    .carousel-control-prev,
    section.detail-panneaux .carousel-control-next {
        display: none;
    }
}
/*-----------------------temoignages--------------------------*/
.temoignages-widgets .card {
    margin: 0 2rem;
}
.swiper-container-rtl .swiper-button-next,
.temoignages-widgets .swiper-button-prev {
    left : -30px;
    right: auto;
}
.swiper-container-rtl .swiper-button-prev,
.temoignages-widgets .swiper-button-next {
    right: 30px;
    left : auto;
}
.temoignages-widgets .swiper-button-next:after {
    content   : '';
    width     : 30px;
    height    : 30px;
    position  : absolute;
    background: var(--color-1);
    right     : -30px;
    clip-path : polygon(100% 50%, 0 0, 0 100%);
}
.temoignages-widgets .swiper-button-prev:after {
    content   : '';
    width     : 30px;
    height    : 30px;
    position  : absolute;
    background: var(--color-1);
    right     : -30px;
    clip-path : polygon(0 50%, 100% 0, 100% 100%);
}
.temoignages-widgets .body {
    text-align: center;
    margin    : 30px 0;
}
.temoignages-widgets .body div {
    display   : inline-block;
    background: var(--color-2);
    transform : skew(-35deg);
    position  : relative;
    margin    : 0 4rem;
}
.temoignages-widgets .body .content {
    color    : #fff;
    display  : inline-block;
    padding  : 1rem 4rem;
    transform: skew(35deg);
}
@media (max-width:992px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
    .temoignages-widgets .body .content,
    .temoignages-widgets .body div {
        transform: skew(0deg);
        margin   : 0;
    }
}
/*---------------------section  societe--------------------------*/
section.societe .clip-img {
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
section.societe:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : calc(100% - 48px);
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--light);
}
section.la-societe {
    position: relative;
}
section.la-societe .bg-img {
    /* position:absolute; */
    top   : 0;
    bottom: 0;
    width : 100%;
}
section.la-societe .bg-img img {
    position  : absolute;
    right     : 0;
    top       : 0;
    bottom    : 0;
    width     : 35%;
    height    : 100%;
    clip-path : polygon(0% 0, 100% 0, 100% 100%, 35% 100%, 0 35%);
    object-fit: cover;
    z-index   : -1;
}
section.la-societe:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : calc(100% - 48px);
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-4);
}
section.la-societe:before {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
section.la-societe .triangle-gris {
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 120%;
    background: var(--light);
    clip-path : polygon(0% 100%, 99% 100%, 0 -35%);
    z-index   : -1;
}
@media (max-width:992px) {
    section.la-societe .triangle-gris,
    section.la-societe:after,
    section.la-societe:before {
        display: none;
    }
}
@media (max-width:768px) {
    section.la-societe .bg-img {
        display: none;
    }
}
/*-----------------------devenir-partenaire--------------------------*/
section.devenir-partenaire:before {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-2);
}
section.devenir-partenaire:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-1);
}
section.devenir-partenaire .card-dark {
    background: var(--color-2);
    color     : var(--white);
    padding   : 1rem;
}
section.devenir-partenaire h3 {
    color         : var(--color-1);
    text-transform: uppercase;
}
section.devenir-partenaire i {
    color    : var(--color-1);
    font-size: 38px;
}
section.devenir-partenaire p {
    font-weight: lighter;
}
@media (max-width:992px) {
    section.devenir-partenaire:after,
    section.devenir-partenaire:before {
        display: none;
    }
}
/*-----------------------pages--------------------------*/
section.page-header {
    position  : relative;
    padding   : 7rem 0 2rem;
    background: url(../../img/motif.svg), #2b2b2f;
}
section.page-header h1 {
    text-transform: uppercase;
    font-weight   : 600;
}
section.page-header:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : calc(100% - var(--topbar-height));
    width     : calc(var(--container-out-margin) / 2);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--color-2);
}
section.page-header:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : 100%;
    width     : calc(var(--container-out-margin) / 2);
    clip-path : polygon(0 0, 0 100%, 100% 0);
    background: var(--color-1);
}
/*-----------------------section concept-maison--------------------------*/
section.concept-maison:before {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 100%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
@media (max-width:992px) {
    section.concept-maison:before {
        display: none;
    }
}
/*-----------------------section finition--------------------------*/
section.finitions img {
    max-width: 226px;
    width    : 100%;
}
section.finitions:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : 100%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-2);
}
section.finitions:after {
    content   : '';
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 200%;
    background: var(--light);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    z-index   : -1;
}
@media (max-width:992px) {
    section.finitions:after,
    section.finitions:before {
        display: none;
    }
}
/*-----------------------section autre applications--------------------------*/
section.autre-applications img.mini {
    max-width: 310px;
    width    : 100%;
}
section.autre-applications:before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 0, 0 100%, 100% 0);
    background: var(--color-1);
}
section.autre-applications:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--color-2);
}
@media (max-width:992px) {
    section.autre-applications:after,
    section.autre-applications:before {
        display: none;
    }
}
/*-----------------------section formulation--------------------------*/
section.formulation img {
    filter: drop-shadow(0px 6px 20px rgba(0, 0, 0, 0.19)) drop-shadow(0px 8px 17px rgba(0, 0, 0, 0.2));
}
section.formulation:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : 100%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
section.formulation:before {
    content        : '';
    position       : absolute;
    bottom         : 0;
    left           : 0;
    height         : 100%;
    width          : 50%;
    clip-path      : polygon(50% 0%, 73% 0, 100% 100%, 0 100%, 0 0);
    background     : url(../../../../uploads/pages/03f3dc50b0b6dcf0fcf8d6d0b9b255f0_L.webp?1630334054)no-repeat;
    background-size: cover;
    z-index        : -1;
}
@media (max-width:992px) {
    section.formulation:after {
        display: none;
    }
}
@media (max-width:992px) {
    section.formulation:before {
        display: none;
    }
}
/*-----------------------section dirigeant--------------------------*/
section.dirigeant {
    padding: 9rem 0 0;
}
section.dirigeant img {
    z-index: 5;
}
section.dirigeant p {
    position: relative;
}
section.dirigeant p.quote i {
    position : absolute;
    left     : -16px;
    top      : -25px;
    color    : var(--color-1);
    font-size: 50px;
    z-index  : -1;
}
@media (max-width:768px) {
    section.dirigeant {
        padding: 7rem 0 0;
    }
    section.dirigeant p.quote i {
        position: relative;
        top     : 0;
        left    : 0;
    }
}
/*-----------------------section l equipe--------------------------*/
section.equipes:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 100%, 100% 100%);
    background: var(--color-2);
}
section.equipes:after {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 0, 0 100%, 100% 0);
    background: var(--color-1);
}
section.equipes .triangle-gris {
    position  : absolute;
    left      : 0;
    top       : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 100%;
    background: var(--light);
    clip-path : polygon(0% 0%, 0 100%, 100% 0%);
    z-index   : -1;
}
@media (max-width:992px) {
    section.equipes .triangle-gris,
    section.equipes:after,
    section.equipes:before {
        display: none;
    }
}
/*-----------------------Contact--------------------------*/
section.contact:after {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 100%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-2);
}
section.contact .triangle-gris {
    position  : absolute;
    left      : 0;
    top       : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 100%;
    background: var(--light);
    clip-path : polygon(0% 100%, 99% 100%, 0 -75%);
    z-index   : -1;
}
section.contact .carte-iframe iframe {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 0);
}
@media (max-width:992px) {
    section.contact .triangle-gris,
    section.contact:after,
    section.contact:before {
        display: none;
    }
}
@media (max-width:768px) {
    section.contact iframe {
        clip-path : none;
        min-height: 300px;
    }
}
/*-----------------------PAGE CHANTIER--------------------------*/
span.chiffre {
    display     : inline-block;
    margin-right: 1rem;
    background  : var(--color-1);
    padding     : 0 1rem;
    transform   : skew(-35deg);
}
span.chiffre span {
    display  : inline-block;
    transform: skew(35deg);
}
section.chantier.citation-block svg {
    margin-bottom: -6rem;
    max-width    : 40%;
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.16));
}
section.chantier.first-block,
section.chantier.second-block {
    position: relative;
}
section.chantier.first-block:after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 100%, 100% 100%, 0 0);
    background: var(--color-2);
}
section.chantier.first-block:before {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-1);
}
section.chantier.first-block .triangle-gris {
    position  : absolute;
    left      : 0;
    top       : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 100%;
    background: var(--light);
    clip-path : polygon(0% 100%, 100% 100%, 0 0);
    z-index   : -1;
}
section.chantier.first-block .bg-img {
    /* position:absolute; */
    top   : 0;
    bottom: 0;
    width : 100%;
}
section.chantier.first-block .bg-img img {
    position  : absolute;
    right     : 0;
    top       : 0;
    bottom    : 0;
    width     : calc(50% - var(--container-out-margin));
    height    : 100%;
    clip-path : polygon(0% 0, 100% 0, 100% 100%, 50% 100%, 0 35%);
    object-fit: cover;
    z-index   : -1;
}
section.chantier.second-block .bg-img img {
    position  : absolute;
    right     : 0;
    top       : 165px;
    bottom    : 0;
    width     : calc(50% - var(--container-out-margin));
    height    : calc(100% - 165px);
    clip-path : polygon(50% 0, 100% 0, 100% 100%, 35% 100%, 0 100%);
    object-fit: cover;
    z-index   : -1;
}
section.chantier.second-block:before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 50%;
    width     : var(--container-out-margin);
    clip-path : polygon(0 0, 0 100%, 100% 0);
    background: var(--color-1);
}
section.chantier.second-block .triangle-gris {
    position  : absolute;
    left      : 0;
    top       : 0;
    width     : calc(var(--container-out-margin) * 2);
    height    : 100%;
    background: var(--light);
    clip-path : polygon(0% 0%, 0 100%, 100% 0%);
    z-index   : -1;
}
@media (max-width:992px) {
    section.chantier.citation-block img {
        margin-bottom: 3rem;
    }
    section.chantier .triangle-gris,
    section.chantier:after,
    section.chantier:before {
        display: none;
    }
}
@media (max-width:768px) {
    section.chantier.first-block .bg-img,
    section.chantier.second-block .bg-img {
        position: relative;
    }
    section.chantier.first-block .bg-img img,
    section.chantier.second-block .bg-img img {
        position  : relative;
        top       : 0;
        width     : 100%;
        clip-path : none;
        max-height: 300px;
    }
    section.chantier.citation-block svg {
        margin-bottom: 2rem;
    }
}
/*-----------------------PAGE CATALOGUES--------------------------*/
section.catalogues-index .card-title a {
    font-size     : 20px;
    font-weight   : 900;
    color         : #000;
    padding-bottom: 0.5rem;
}
section.catalogues-index i {
    font-size: 1.5rem;
}
section.detail-header h1 {
    font-weight   : 900;
    font-size     : 28px;
    text-transform: uppercase;
}
.modules .content-datas ul {
    list-style : square;
    padding    : 0 32px;
    font-weight: 700;
}
.modules .content-datas ul li::marker {
    color    : var(--color-1);
    font-size: 1.5em;
}
.list-mini a {
    color      : #000;
    font-weight: 700;
    font-size  : 18px;
}
.list-mini li:hover {
    box-shadow: var(--shadow-1);
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    box-shadow: var(--shadow-1);
}
.swiper-slide img {
    background: #fff;
    box-shadow: var(--shadow-1);
}
/*big screen*/
@media screen {
    @media(min-width:2100px) {
        body {
            zoom: 1.1;
        }
    }
    @media(min-width:2200px) {
        body {
            zoom: 1.15;
        }
    }
    @media(min-width:2300px) {
        body {
            zoom: 1.20;
        }
    }
    @media(min-width:2400px) {
        body {
            zoom: 1.25;
        }
    }
}