/* Couleurs */

.bg-dark { background-color: var(--dark) !important; }
.bg-main { background-color: var(--main); }
.bg-light-main { background-color: var(--light-main); }
.bg-light-grey { background-color: var(--light-grey); }
.bg-construction-light { background-color: var(--construction-light); }
.bg-construction-dark { background-color: var(--construction-dark); }
.bg-professionnels-light { background-color: var(--professionnels-light); }
.bg-professionnels-dark { background-color: var(--professionnels-dark); }
.bg-personnes-light { background-color: var(--personnes-light); }
.bg-personnes-dark { background-color: var(--personnes-dark); }
.bg-trustpilot { background-color: var(--trustpilot); }
.bg-gradient { 
    background-color: #FE7B00;
    background-color: linear-gradient(220deg, rgba(254, 123, 0, 1) 0%, rgba(255, 187, 0, 1) 100%);
}

.border-main { border-color: var(--main) !important; }
.border-light-main { border-color: var(--light-main) !important; }
.border-light-grey { border-color: var(--light-grey) !important; }
.border-construction-dark { border-color: var(--construction-dark) !important; }
.border-construction-light { border-color: var(--construction-light) !important; }
.border-professionnels-dark { border-color: var(--professionnels-dark) !important; }
.border-professionnels-light { border-color: var(--professionnels-light) !important; }
.border-personnes-dark { border-color: var(--personnes-dark) !important; }
.border-personnes-light { border-color: var(--personnes-light) !important; }

.color-main { color: var(--main) !important; }
.color-dark { color: var(--dark) !important; }
.color-white { color: var(--white) !important; }
.color-construction-light { color: var(--construction-light); }
.color-construction-dark { color: var(--construction-dark); }
.color-professionnels-light { color: var(--professionnels-light); }
.color-professionnels-dark { color: var(--professionnels-dark); }
.color-personnes-light { color: var(--personnes-light); }
.color-personnes-dark { color: var(--personnes-dark); }
.color-trustpilot { color: var(--trustpilot); }

.icon-main { --lord-icon-secondary: var(--main); }
.icon-construction { --lord-icon-secondary: var(--construction-light); }
.icon-professionnels { --lord-icon-secondary: var(--professionnels-light); }
.icon-personnes { --lord-icon-secondary: var(--personnes-light); }
.icon-light { --lord-icon-primary: var(--white); }

.light-link { color: var(--white); }
.dark-link { color: var(--dark); }
.main-link { color: var(--main);padding: 0;border: 0;background: transparent;font-weight: 500; }
.main-link:hover { color: black; }

.shadow-construction { text-shadow: 0 0 4px rgba(166, 84, 61, 0.3); }
.shadow-professionnels { text-shadow: 0 0 4px rgba(69, 120, 128, 0.3); }
.shadow-personnes { text-shadow: 0 0 4px rgba(61, 54, 138, 0.3); }
.shadow-main { text-shadow: 0 0 4px rgba(237, 130, 20, 0.3); }

.svg-white { filter: brightness(0) invert(1); }
.svg-dark { filter: invert(30%) sepia(5%) saturate(165%) hue-rotate(21deg) brightness(101%) contrast(87%);}

/* Background image */

.trame-vertical-sm-light {
    background-image: url(../images/trame/vertical-sm-light.webp);
    background-repeat: no-repeat;
}
.trame-vertical-sm-dark {
    background-image: url(../images/trame/vertical-sm-dark.webp);
    background-repeat: no-repeat;
}
.trame-vertical-md-dark {
    background-image: url(../images/trame/vertical-md-dark.webp);
    background-repeat: no-repeat;
}
.trame-e-lg-light {
    background-image: url(../images/trame/e-lg-light.webp);
    background-repeat: no-repeat;
}
.trame-horizontal-md-dark {
    background-image: url(../images/trame/horizontal-md-dark.webp);
    background-repeat: no-repeat;
}

.bg-position-right-top-2 {
    background-position: right .5rem top .5rem;
}
.bg-position-left-bottom-2 {
    background-position: left .5rem bottom .5rem;
}

/* Spacing */

@media (min-width: 1200px) {
    .my-xl-8rem {
        margin: 8rem 0 !important;
    }
    .my-xl-4rem {
        margin: 4rem 0 !important;
    }
} 

.mb-75px { margin-bottom: 75px; }
.mb-60px { margin-bottom: 60px; }
.mt-200px { margin-top: 200px; }
.mt-7rem { margin-top: 7rem; }

.mb-n200px { margin-bottom: -200px;}

.py-2rem { padding-top: 2rem; padding-bottom: 2rem; }
.py-5rem { padding-top: 5rem; padding-bottom: 5rem; }
.pt-8rem { padding-top: 8rem; }
.pt-6rem { padding-top: 6rem; }

.pb-12px { padding-bottom: 12px; }
.py-12px { padding-top: 12px; padding-bottom: 12px; }

.p-075rem { padding: .75rem; }

.list-style-none { list-style: none; padding: 0; }

/* Font */

.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; line-height: 32px; }
.lh-1rem { line-height: 1rem; }
.lh-14 { line-height: 14px; }
.lh-32 { line-height: 32px; }

.fw-200 { font-weight: 200; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

.transform-none { text-transform: none; }

/* Background */

.bg-center { background-position: center;}
.bg-no-repeat { background-repeat: no-repeat;}
.bg-cover { background-size: cover;}
.bg-left { background-position: left; }
.bg-right { background-position: right; }

/* Size */

.w-250px { width: 250px; }
.w-200px { width: 200px; }
.w-150px { width: 150px; }
.w-75px { width: 75px; }
.w-16px { width: 16px; }
.w-fit-content { width: fit-content; }
.w-max-content { width: max-content; }

.mw-95 { max-width: 95%; }
.mw-100vw { max-width: 100vw; }

.mh-none { max-height: none; }
.mh-40vh { max-height: 40vh; }
.maxh-85vh { max-height: 85vh; }
.maxh-400px { max-height: 400px; }

.h-1px { height: 1px; }
.h-16px { height: 16px; }
.h-25px { height: 25px; }
.h-30px { height: 30px; }
.h-75px { height: 75px; }
.h-60px { height: 60px; }
.h-60vh { height: 60vh; }
.max-vh-90 { max-height: 90vh; }
.max-vh-100 { max-height: 100vh; }
.height-vh-35 { height: 35vh; }
.height-vh-40 { height: 40vh; }

.wh-200px { width: 200px; height: 200px; }
.wh-100px { width: 100px; height: 100px; }
.wh-80px { width: 80px; height: 80px; }
.wh-70px { width: 70px; height: 70px; }
.wh-60px { width: 60px; height: 60px; }
.wh-50px { width: 50px; height: 50px; }
.wh-42px { width: 42px; height: 42px; }
.wh-40px { width: 40px; height: 40px; }
.wh-36px { width: 36px; height: 36px; }
.wh-30px { width: 30px; height: 30px; }
.wh-28px { width: 28px; height: 28px; }
.wh-25px { width: 25px; height: 25px; }
.wh-24px { width: 24px; height: 24px; }
.wh-22px { width: 22px; height: 22px; }
.wh-20px { width: 20px; height: 20px; }
.wh-18px { width: 18px; height: 18px; }
.wh-16px { width: 16px; height: 16px; }
.wh-14px { width: 14px; height: 14px; }

.hr-1px { 
    height: 1px;
    opacity: 1;
}

.square-18 {
    width: 18px;
    height: 18px;
}

.square-20 {
    width: 20px;
    height: 20px;
}

.square-34 {
    width: 34px;
    height: 34px;
}

.square-60 {
    width: 60px;
    height: 60px;
}

.square-494-400 {
    width: 494px;
    height: 400px;
}


/* Position */

.top-25 { top: 25%; }
.top-4 { top: 1.5rem !important; }
.top-3 { top: 1rem !important; }
.end-n4 { right: -1.5rem; }

/* Z index */

.z-11 { z-index: 11; }
.z-100 { z-index: 100; }

/* Opacity */

.opacity-10 { opacity: 10%; }
.opacity-60 { opacity: 60%; }

/* ul */

@media (min-width: 500px) {
    .columns-sm-2 { columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 2rem; }
} 

@media (min-width: 768px) {
    .columns-md-3 { columns: 3; -webkit-columns: 3; -moz-columns: 3; column-gap: 2rem; }
} 

@media (min-width: 1200px) {
    .columns-xl-4 { columns: 4; -webkit-columns: 4; -moz-columns: 4; column-gap: 2rem; }
} 
    
/* cursor */

.c-pointer { cursor: pointer;}

/* vertical align */

.align-middle { vertical-align: middle; }

/* Transform */

.rotate-n90 { transform: rotate(-90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }