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

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

/*
====================================================
    // Variables CSS
====================================================
*/
:root {
    /* Couleurs */
    --red-main: #C8102E;
    --red-dark: #b30b27;
    --red-x-dark: #700029;
    --red-light: #F57991;
    --red-x-light: #fde1e8;
    --red-2x-light: #FFECF0;

    --blue-main: #250E62;
    --blue-dark: #0C3279;
    --blue-x-dark: #051E4B;
    --blue-md: #250E62/*#295BB8*/;
    --blue-light: #E1E8EE;
    --blue-x-light: #F2F5F8;

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

    /* Font */
    --font-main: 'Metropolis Regular', sans-serif, Verdana, Arial, Helvetica;
    --font-bold: 'Metropolis Bold', sans-serif, Verdana, Arial, Helvetica;

    /*--font-main: 'Gotham Book', "Gill Sans", sans-serif;
    --font-bold: 'Gotham Bold', "Gill Sans", sans-serif;*/

    /* 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(--blue-main);
    color: #FFF;
}

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

body {
    font-family: var(--font-main) !important;
    letter-spacing: .5px;
    font-size:1rem;
    line-height: 1.6;
    color:var(--neutral-black);
    position: relative;
    background: url("/template/img/triangle-neutral-2x-light.svg") no-repeat right top,
    url("/template/img/corner-neutral-2x-light.svg") no-repeat -20vmin 300px #FFF;
    background-size: 20% !important;
}

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

b,
strong,
.strong {
    font-family: var(--font-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(--font-main);
    position: relative;
    display: inline-block;
    width: 100%;
    color:var(--neutral-black);
    text-transform: uppercase;
}

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

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

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

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

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

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

/* 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(--font-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(--red-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;
}

/* ===============================
 *  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(--neutral-x-light) ;
    border-top: 1px solid var(--neutral-main);
    border-bottom: 1px solid var(--neutral-main);
}

.footerTop a {
    display: inline-block;
    font-size: .813rem;
    text-transform: uppercase;
    color:var(--neutral-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(--red-main);
    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;
}

/* ===============================
 *  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;
}

}/*/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(--red-main);
}

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

/* FOOTER BOTTOM BAR */

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

/* ===============================
 *  SCROLL TO TOP
=============================== */
#btn-back-to-top:hover {
    background: var(--neutral-md);
    color:#000;
    transform: scale(1.05);
}

}/*/mediaquery*/

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


}/*/mediaquery*/