@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère L'ASPECT TEMPLATING
 */

/*
====================================================
    // Variables CSS
====================================================
*/
:root {
    /* Couleurs */
    --primary-main:#A5C715;
    --primary-dark:#889B18;
    --primary-x-dark:#2C300B;
    --primary-light:#E5F299;
    --primary-x-light:#F2F7D5;

    --secondary-main:#75756E;
    --secondary-dark:#0B0B0B;
    --secondary-x-dark:#000000;
    --secondary-light:#AFB2AB;
    --secondary-x-light:#EDEFEA;

    --focus-main:#d60073;
    --focus-dark:#b7086c;
    --focus-x-dark:#3d182d;
    --focus-light:#ff78c5;
    --focus-x-light: #fbe6f2;

    /*
    --focus-main:#F3E0BE;
    --focus-dark:#FBD38C;
    --focus-x-dark:#FFC55E;
    --focus-light:#F6F0E5;
    --focus-x-light:#F9F4EB;
     */

    --neutral-main: #B2B2B2;
    --neutral-dark: #707070;
    --neutral-black: #000;
    --neutral-light: #F3F3F3;
    --neutral-x-light: #FAFAFA;

    /* Font Family */
    --ff-body: 'Onest', sans-serif, Verdana, Arial, Helvetica;
    --ff-headline: 'Onest', sans-serif, Verdana, Arial, Helvetica;

    /* Font Weight */
    --fw-normal:200;
    --fw-bold:700;
    --fw-bolder:900;

    /* Radius */
    --radius-xs: .15rem;
    --radius-sm: .3rem;
    --radius-md: .5rem;
    --radius-lg: 3rem;
    --radius-xl: 50%;

    /* Z INDEX */
    --zindex-header: 1021; /* GABARIT */ /* BOOTSTRAP STICKY = 1020 */
    --zindex-topBar: 1022; /* GABARIT */
    --zindex-carousel-thumb:103; /* PAGE LISTING : carousel sur les vignettes */
    --zindex-invisibleLink: 102; /* PAGE LISTING : bouton favori sur chaque vignette du listing */
    --zindex-favori: 102; /* PAGE LISTING : bouton favori sur chaque vignette du listing */
    --zindex-modal-backdrop: 1022; /* PAGE DÉTAIL : modal négociateur */
    --zindex-modal-content: 1051; /* PAGE DÉTAIL : modal négociateur */
    --block-contact-form: 1010; /* PAGE DÉTAIL : block du formulaire de contact sous la galerie */
    --zindex-logo-mobile:1020; /* GABARIT : lorsqu'on scroll vers le haut, le logo réapparait momentanément*/
    --zindex-content-block-filtre: 999; /* PAGE LISTING : section filtre collé en haut lors du scroll */
}

/* OVERRIDE BOOTSTRAP */
.offcanvas {
    --bs-offcanvas-width: calc(100% - 25px) !important;
}



/*
==================================================
    BREAKPOINT BOOTSTRAP 5.2
==================================================
    #X-Small devices (portrait phones, less than 576px)         // 320px
    #Small devices (landscape phones, 576px and up)             // 576px
    #Medium devices (tablets, 768px and up)                     // 768px
    #Large devices (desktops, 992px and up)                     // 992px
    #X-Large devices (large desktops, 1200px and up)            // 1200px+ > 1250 avec scrollbar
    #XX-Large devices (larger desktops, 1400px and up)          // 1400px+
*/


/*
===================================================================
    X-Small devices (portrait phones, less than 576px)   // 320px
===================================================================
    Pas besoin de déclarer de média queries
*/

/* ===============================
 *  NATIVE
=============================== */
* {
    /* Désactivé car ralentit la carte
    transition: all .2s ease; */
    outline: none !important;
}

::selection {
    background: var(--primary-main);
    color: #000;
}

html, body {
    background-color: #FFF;
    padding-top: 0;
}

body {
    font-family: var(--ff-body) !important;
    letter-spacing: .5px;
    font-size:1rem;
    line-height: 1.6;
    color:var(--neutral-black);
    position: relative;
    background:#FFF;
    background-size: 20% !important;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color:var(--primary-main);
    transition: all .2s ease;
}

b,
strong,
.strong {
    font-family: var(--fw-bold) !important;
}

hr {
    border-top: 1px solid rgba(0, 0, 0, .25);
    width: 100%;
}

/* ===============================
 *  TRICK
=============================== */

.custom-file-label:lang(fr)::after {/* Texte PARCOURIR sur les champs file */
    content: "Parcourir";
}

html {/* utile pr scroll to top */
    scroll-behavior: smooth;
}

img { /* Conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
    height: auto;
    max-width:100%; /*Commenter pour régler le pb rencontré sur Google Map*/
    object-fit: contain;
}

/* ===============================
 *  HEADLINES
=============================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6  {
    font-family: var(--ff-headline);
    position: relative;
    display: inline-block;
    width: 100%;
    color:var(--neutral-black);
    text-transform: uppercase;
    text-wrap-style: balance;
}

/* HEADLINES SIZE */
h1,.h1 {
    font-size: clamp(32px, 2.5vw, 48px);
}

h2, .h2 {
    font-size: clamp(30px, 2.25vw, 36px);
}

h3, .h3 {
    font-size: clamp(24px, 2vw, 28px);
}

h4, .h4 {
    font-size: clamp(21px, 1.78vw, 24px);
}

h5, .h5 {
    font-size: clamp(16px, 1.5vw, 21px);
}

h6, .h6 {
    font-size: clamp(14px, 1vw, 16px);
}

/* STRONG HEADLINES */
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h1 strong,
.h2 strong,
.h3 strong,
.h4 strong,
.h5 strong,
.h6 strong {
    font-family: var(--ff-headline);
    font-weight: var(--fw-bold);
}

/* BICOLOR HEADLINES */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
.h1 span,
.h2 span,
.h3 span,
.h4 span,
.h5 span,
.h6 span {
    color: var(--primary-main);
}

/* HEADLINES ALIGNMENT, MARGIN... */
h1,.h1 {
    margin-bottom: 2vmax;
}

h1 {
    text-align: center;
}

/* ===============================
 *  HEADER MOBILE
=============================== */
#logo-mobile.ON {
    position: fixed;
    top: 0;
    margin-top:0!important;
    z-index: var(--zindex-logo-mobile);
    width: 100% !important;
    padding: 10px 0;
    background: #FFF;
    opacity:0;
    animation-name: logo-mobile-disappear;
    animation-duration: 4s;
    animation-delay: .05s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

#logo-mobile img {
    max-width:320px;
    margin: 0 auto;
}

#logo-mobile.ON img {
    height:30px;
    margin: 0 auto;
}

@keyframes logo-mobile-disappear {
    from {
        opacity:0;
    }

    10% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

/* ===============================
 *  SECTION
=============================== */
section.row.mb-BIG {
    margin-bottom: 10vmax;
}

.bg-cp {
    background: url("/template/img/bg-cp.svg") no-repeat calc(100vw - 250px) center;
    background-size: calc(50vw + 200px);
}

/* ===============================
 *  CONTENT
=============================== */
.text-w480 {
    max-width: 480px !important;
}

.text-w760 {
    max-width: 760px !important;
}

/**
* DISPLAY INFO
*/
.displayInfo {
    cursor: pointer;
}

.displayBTN,
.hiddenInfo.ON {
    display: inline-block;
}

.displayBTN.OFF,
.hiddenInfo {
    display: none;
}

/* ===============================
 *  FOOTER
=============================== */

/* FOOTER TOP BAR */
.footerTop {
    padding-top: 4vmax;
    padding-bottom: 4vmax;
    background-color:var(--primary-x-light) ;
    border-top: 1px solid var(--primary-main);
    border-bottom: 1px solid var(--primary-main);
}

.footerTop a {
    display: inline-block;
    font-size: .813rem;
    text-transform: uppercase;
    color:var(--secondary-dark);
    text-align: center;
    line-height: 1.2;
}

.footerTop a img {
    display: block;
    margin: 0 auto 1vmax;
}

/* FOOTER MAIN CONTENT */
.footerMain {
    padding-top: 4vmax;
    padding-bottom: 4vmax;
}

.footerMain .logo {
    width: 250px !important;
}

.footerMain .footerLinks a {
    color:#000;
    padding-bottom: .5vmax;
    line-height: 1.2;
}

/* FOOTER BOTTOM BAR */
.footerBottom {
    background: var(--secondary-dark);
    padding-top: 2vmax;
    padding-bottom: calc(2vmax + 80px);
    color:#FFF;
    text-align: center;
    font-size: .813rem;
    line-height: 1.2;
}

.footerBottom a {
    color:#FFF;
    display: block;
    padding-top: .5vmax;
    padding-bottom: .5vmax;
}

/* ===============================
 *  SCROLL TO TOP
=============================== */
#btn-back-to-top {
    display:block;
    margin: 3vmax auto;
    font-size: 2rem;
    color: var(--neutral-dark);
}

#btn-back-to-top img {
    height: 42px;
}



/*
===================================================================
===================================================================
===================================================================
    #Small devices (landscape phones, 576px and up)     // 576px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 576px) {
}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Medium devices (tablets, 768px and up)             // 768px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 768px) {

/* ===============================
 *  HEADLINES
=============================== */

/* HEADLINES ALIGNMENT */
h1,.h1 {
    margin-bottom: 2vmin;
}

h1 {
    text-align: left;
}


    /* ===============================
     *  CONTENT
    =============================== */
.text-intro {
    text-align: left;
}


/* ===============================
 *  FOOTER
=============================== */

/* FOOTER TOP BAR */
.footerTop {
    padding-top: 1vmax;
    padding-bottom: 1vmax;
}

.footerTop a {
    padding-top: 1vmax;
    padding-bottom: 1vmax;
}

/* FOOTER BOTTOM BAR */
.footerBottom {
    text-align: left;
}

.footerBottom a {
    display: inline;
    padding-right: 1vmax;
}

/* ===============================
 *  SCROLL TO TOP
=============================== */
#btn-back-to-top {
    position: fixed;
    bottom: 13vmax;
    right: 2vmin;
    display:none;
    background-color: var(--neutral-light);
    margin: 0;
    padding: 6px;
}

/* ===============================
 *  BOUTONS CONTACT SCROLL FIXE
=============================== */
.contactAbsolu {
    position: fixed;
    right: 0;
    bottom:calc(50% - 100px);
    display: flex !important;
    flex-direction: column;
    z-index: 1010;
}

.contactAbsolu .btn {
    border-radius: .15rem 0 0 .15rem;
    margin-bottom: 1vmax;
    padding: 1vmax;
}

.contactAbsolu .btn img {
    width:32px;
}

}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 992px) {

/* ===============================
 *  SECTION
=============================== */
section.row.mb-BIG {
    margin-bottom: 10vmin;
}

.bg-cp {
    background-position-x: 50vw;
}
.bg-cp.left {
    background-position-x: -10vw;
}

/* ===============================
 *  FOOTER
=============================== */

/* FOOTER TOP BAR */
.footerTop a {
    text-align: left;
    display:flex;
}

.footerTop a img,
.footerTop a span {
    display: inline-block;
    margin: 0;
}

.footerTop a span {
    padding-left: 1vmax;
}

/* FOOTER MAIN CONTENT */
.footerMain .footerLinks a:hover {
    transform:translateX(5px) ;
}

/* FOOTER BOTTOM BAR */
.footerBottom {
    padding-bottom: 2vmax;
}

/* ===============================
 *  BOUTONS CONTACT SCROLL FIXE
=============================== */
.contactAbsolu {
    bottom:calc(2vmin + 100px);
}

.contactAbsolu .btn:hover {
    transform:translateX(-10px);
    margin-right: -10px;
    transition:all ease .2s;
}

/* ===============================
 *  SCROLL TO TOP
=============================== */
#btn-back-to-top {
    bottom: 2vmin;
    transition: all ease .15s;
}

}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    X-Large devices (large desktops, 1200px and up)    // 1200px+
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 1200px) {
/* ===============================
 *  FOOTER
=============================== */

/* FOOTER TOP BAR */
.footerTop a {
    font-size: 1rem;
    justify-content: center;
}

.footerTop a:hover {
    transform: scale(1.05);
}

.footerTop a:hover span {
    color: var(--focus-main);
}

/* FOOTER MAIN CONTENT */
.footerMain .footerLinks a:hover {
    color:var(--focus-main);
}

/* FOOTER BOTTOM BAR */

.footerBottom a:hover {
    text-decoration: underline;
}

/* ===============================
 *  SCROLL TO TOP
=============================== */
#btn-back-to-top:hover {
    background: #FFF;
    color:#000;
    transform: scale(1.05);
    bottom:2.5vmin;
}

}/*/mediaquery*/

/*
===================================================================
===================================================================
===================================================================
    XX-Large devices (larger desktops, 1400px and up)  // 1400px+
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 1400px) {


}/*/mediaquery*/