/* ###################################################################### */
/* ################### CSS Général à toutes les pages ################### */
/* Variables */
:root {
    /*Size*/
    /*Containers*/
    --width-containers : 1200px;
    --max-width-containers : 1200px;
    /*Navbar*/
    --navbar-height: 90px;
    /*Sommaire*/
    --width-sommaire-left: 250px;
    /*Carrousel*/
    --width-carousel: 640px; /*Utilisez uniquement des multiples de 160*/
    --height-carousel: 360px; /*Utilisez un ratio 16:9*/
    --height-mini-carousel: 100px; /*Ne pas changer*/
    /*Cartes Catalogue*/
    --width-catalogue-carte: 525px;
    /*Carte accueil*/
    --width-accueil-biens-carte: 330px;
    --height-accueil-biens-carte-img: 185px;

    /*Colors*/
    --rouge-courcier : /*Rouge original*/ /*#EF1926*/ /*Rouge Acessibilité*/ #e71824;
    --rouge-courcier-clair : #fb2633;
    --gris-clair: #767676;
    --noir: #1E1E1E;
    --gris-fonce: #333333;
    --padding-all-cointainers: 50px 20px;
    --body-background-color: #ffe6d3;          /*ffd0bb*/
    --body-background-color-clair: #ffd0bb;
    --body-background-color-fonce: #ffba95;
}

/* Style */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    list-style: none;
    color: var(--noir);
    text-decoration: none;
    /*outline: 2px dashed #FF0000;*/
    outline-offset: 0px;
    scroll-behavior: smooth;
    border: none;
}

body {
    padding-top: var(--navbar-height);
    background-color: var(--body-background-color)
}

a {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--gris-fonce);
}

p {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--gris-fonce);
}

h1 {
    margin-bottom: 20px;
    font-weight: 900;
    text-transform: uppercase;
}
h2 {
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 25px;
}
h3 {
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 22px;
}
h4 {
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
}
h5 {
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
}

.scroll-top-btn-visible {
    bottom: 20px;
    opacity: 1;
    position: fixed;
    right: 20px;
    padding: 10px;
    background-color: var(--rouge-courcier);
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    transition: 300ms;
    z-index: 999;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
}

.scroll-top-btn-hide{
    opacity: -20;
    bottom: 0px;
    position: fixed;
    right: 20px;
    padding: 10px;
    background-color: var(--rouge-courcier);
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    transition: 300ms;
}


/* ############################### Navbar ############################### */
.navbar-container{
    top: 0px;
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 998;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
    padding: 0 20px;
}
.navbar-content{
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar-logo-courcier{
    width: 92px;
    top: -25px;
}

.navbar-elements-container{
    display: flex;
    height: var(--navbar-height);
    align-items: center;
}

.navbar-elements{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar-info-ul-elements{
    display: flex;
    align-items: center;
    color: var(--gris-fonce);
    font-weight: bold;
}

.navbar-info-ul-p-res {
    display: flex;
    gap: 5px;
}

.navbar-ul-marches{
    margin-bottom: 5px;
}

.navbar-ul-marches li{
    margin-right: 5px;
    margin-left: 0;
    font-size: 17px;
}

.navbar-ul-tel{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.navbar-ul-tel p{
    color: var(--rouge-courcier);
}

.navbar-ul-liens{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.logo-linkedin-link{
    max-height: 15px;
    margin: auto;
}
.nav-links{
    display: flex;
}
.nav-links li{
    margin-left: 10px;
}
.nav-links a{
    color: var(--rouge-courcier);
    font-weight: bold;
}
.navbar-info-ul-elements a{
    display: flex;
    gap: 5px;
}
.navbar-info-ul-elements a:hover, .nav-links a:hover{
    text-decoration: underline;
    display: flex;
}

/* ############################# Google Map ############################# */
.google-map-div{
    height: 500px;
    width: 100%;
    z-index: 0;
}

/* ############################## ToolTips ############################## */
.propriete-btn-link {
  display: flex;
  align-items: center;
  padding: 10px;
  border: var(--rouge-courcier) 2px solid;
  border-radius: 50px;
  position: relative;
}

.tooltipTxt {
  position: absolute;
  top: -90%;
  left: 50%;
  background-color: var(--rouge-courcier);
  color: #ffffff;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 7px 7px 7px 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#link-in-btn-img-div:hover .tooltipTxt {
  visibility: visible;
  opacity: 1;
}

#link-in-btn-img-div:hover {
    background-color: var(--rouge-courcier);
    color: white;
    transition: 0.2s;
    cursor: pointer;
}

/* ############################## Carousel ############################## */
.carousel-cont-containers{
    display: flex;
    flex-direction: column;
    max-width: var(--width-carousel);
}
.carousel-mini-container {
    width: var(--width-carousel)!important;
    height: var(--height-mini-carousel)!important;
    margin: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.carousel-container {
    width: var(--width-carousel)!important;
    height: var(--height-carousel)!important;
    margin: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.carousel-slide {
    display: flex;
    width: 100%!important;
    height: 100%!important;
    transition: 0.6s cubic-bezier(0.57, 0, 0, 1);
}
.carousel-slide-mini {
    display: flex;
    width: 100%!important;
    height: 100%!important;
    transition: 0.6s cubic-bezier(0.57, 0, 0, 1);
    justify-content: flex-start;
}
.carousel-fleche-l {
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 10px;
    height: 50px;
    cursor: pointer;
    transform: translateY(-25px);
    transition: 0.6s;
}
.carousel-fleche-r {
    position: absolute;
    top: 50%;
    z-index: 10;
    right: 10px;
    height: 50px;
    cursor: pointer;
    transform: translateY(-25px);
    transition: 0.6s;
}
.carousel-black-fade-l {
    position: absolute;
    z-index: 9;
    height: 100%;
    width: 100px;
    left: 0%;
    transition: 0.6s;
    background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,40%) 100%);
}
.carousel-black-fade-r {
    position: absolute;
    z-index: 9;
    height: 100%;
    width: 100px;
    right: 0%;
    transition: 0.6s;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,40%) 100%);
}
.carousel-nav-circle {
    display: flex;
    position: absolute;
    bottom: 0px;
    width: 100%;
    justify-content: center;
    height: 20px;
    align-items: center;
    margin-bottom: 10px;
    z-index: 50;
}
.carousel-nav-div-circle-btn{
    padding: 8px;
}
.carousel-nav-div-circle-btn:hover{
    cursor: pointer;
}
.carousel-nav-circle-btn{
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 1rem;
    background-color: #919191;
    border: 1px solid #919191;
    transition: 0.6s cubic-bezier(0.57, 0, 0, 1);
}
.carousel-image-div {
    width: var(--width-carousel)!important;
    height: var(--height-carousel)!important;
}
.carousel-image {
    width: var(--width-carousel)!important;
    height: var(--height-carousel)!important;
}
.carousel-mini-image-div {
    width: 160px;
    height: 90px;
    padding: 5px;
}
.carousel-mini-image-div:hover {
    cursor: pointer;
}
.carousel-mini-image {
    width: 150px;
    aspect-ratio: 16/9;
}
.car-min-select {
    filter: drop-shadow(2px 4px 6px black);
}

/* #################### Panneau latéral de gauche ###################### */
/* Menu scroll left */
.panneau-lateral-gauche{
    position: fixed;
    z-index: 900;
    top: 90px;
    left: -250px;
    width: 250px;
    height: calc(100vh - var(--navbar-height));
    transition: left 0.3s ease;
}

.panneau-lateral-gauche.open{
    left: 0;
}

.panneau-sommaire-bouton{
    position: absolute;
    top: 0;
    left: 250px;
    width: 55px;
    height: 65px;
    background-color: var(--rouge-courcier);
    cursor: pointer;
    border-bottom-right-radius: 7px;
}

.panneau-sommaire-bouton.selected{
    background-color: var(--rouge-courcier-clair);
}

.image-panneau-sommaire{
    width: 50px;
    transform: translateX(0px) translateY(8px);
}

.sommaire-gauche-container{
    position: fixed;
    width: inherit;
    height: inherit;
    overflow: auto;
    background-color: var(--body-background-color-clair);
}
.sommaire-gauche{
    background-color: var(--body-background-color-clair);
    padding: 20px;
}
/*Titre*/
.titre-sommaire-gauche h3{
    font-weight: 900!important;
    font-size: 18px
}
.sommaire-div-separator{
    width: 100%;
    height: 0;
    border-bottom: 2px solid var(--gris-fonce);
    border-radius: 10px;
    margin-bottom: 30px;
}
.item-sommaire-gauche{
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}
.item-sommaire-gauche h5{
    display: flex;
    justify-content: space-between;
    height: 20px;
}
.img-btn-sommaire-panneau{
    height: 15px;
    transition: all 0.6s cubic-bezier(0.57, 0, 0, 1);
}

.img-btn-sommaire-panneau:hover{
    cursor: pointer;
}

.item-sommaire-gauche-fiches{
    margin-bottom: 10px;
}

.item-sommaire-gauche-fiches h5>a{
    color: #5c5c5c;
    font-weight: 900;
}

.item-sommaire-gauche h5>a{
    color: #5c5c5c;
    font-weight: 900;
    margin-bottom: 15px;
}
.sous-item-sommaire-gauche{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    padding-left: 20px;
    transition: all 0.3s cubic-bezier(0.57, 0, 0, 1);
}
.sous-item-sommaire-gauche a{
    scroll-behavior: smooth;
    color: #5a5a5a;
    margin-bottom: 5px;
}
.sous-item-sommaire-gauche a:hover{
    color: #6c6c6c;
    text-decoration: underline;
}

.titre-rubrique-sommaire-gauche{
    border-bottom: black solid 2px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.titre-rubrique-sommaire-gauche p{
    font-size: 22px;
}


.sous-item-sommaire-gauche p{
    font-size: 18px;
    padding-bottom: 3px;
    text-decoration: underline;
}

.sous-item-sommaire-gauche-hide{
    display: none;
    transition: all 0.3s cubic-bezier(0.57, 0, 0, 1);
}

.rotate-45deg{
    transform: rotate(90deg);
}

/* #################### Panneau latéral de droite ###################### */
/*Panneau lateral de droite globale*/
.panneaux-lateraux-droite{
    position: fixed;
    z-index: 900;
    top: 90px;
    right: -250px;
    width: 250px;
    height: fit-content;
    transition: right 0.3s ease;
}

.panneaux-lateraux-droite.open {
    right: 0;
}

/*Panneau latéral de Contact*/
.panneau-contact-container{
    position: fixed;
    width: inherit;
    height: inherit;
}

.panneau-contact-container.open {
    display: block;
}

.panneau-contact-container.close{
    display: none;
}

.panneau-contact-bouton{
    position: absolute;
    top: 0;
    right: 250px;
    width: 55px;
    height: 65px;
    background-color: var(--rouge-courcier);
    cursor: pointer;
    border-bottom-left-radius: 7px;
}

.panneau-contact-bouton.selected{
    background-color: var(--rouge-courcier-clair);
}

.panneau-contact-contenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    height: inherit;
    background-color: var(--body-background-color-clair);
    overflow: auto;
}

.image-panneau-contact{
    width: 36px;
    transform: translateX(11px) translateY(13px);
}

/*Formulaire de Contact du panneau latéral*/
.panneau-titre-formulaire{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.formulaire-contact-lateral{
    height: 100%;
}

.formulaire-lateral-bloc-unique{
    margin-bottom: 5px;
}

.formulaire-lateral-titre-input{
    margin-bottom: 2px;
}

.formulaire-inputs-textarea{
    padding: 10px;
    border: 2px solid #d3d3d3;
    background-color: #f9f9f9;
    border-radius: 7px;
}

.formulaire-contact-lateral textarea{
    max-width: 173px;
    min-width: 173px;
    max-height: 170px;
    min-height: 100px;
}

.formulaire-lateral-submit-btn{
    padding: 10px;
    border: 2px solid var(--rouge-courcier);
    background-color: #f9f9f9;
    border-radius: 7px;
    cursor: pointer;
    width: 100%;
}

/*Panneau latéral des Actualités*/
.panneau-actus-container{
    position: fixed;
    width: inherit;
    height: inherit;
}

.panneau-actus-container.open{
    display: block;
}

.panneau-actus-container.close{
    display: none;
}

.panneau-actus-bouton{
    position: absolute;
    top: 70px;
    right: 250px;
    width: 55px;
    height: 65px;
    background-color: var(--rouge-courcier);
    cursor: pointer;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.panneau-actus-bouton.selected{
    background-color: var(--rouge-courcier-clair);
}

.panneau-actus-contenu{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    height: inherit;
    background-color: var(--body-background-color-clair);
    overflow: auto;
}

.panneau-titre-actus{
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
}

.panneau-actus-actualites{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: fit-content;
    border: var(--rouge-courcier) 2px solid;
    margin-top: 10px;
}

.panneau-actus-une-actu{
    padding: 15px 10px;
    font-size: 16px;
    font-style: italic;
    width: 100%;
    height: 100%;
}

.panneau-actus-une-actu p{
    text-align: center;
}

.panneau-actus-une-actu-fond{
    background-color: var(--body-background-color);
}

.contact-formualire-textarea{
    min-height: 70px;
    height: 70px;
    max-height: 110px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    background-color: #EEEEEE;
    border: 1px solid #B9B9B9;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.panneau-contact-bouton,
.panneau-actus-bouton,
.panneau-sommaire-bouton {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.low-opacity{
    opacity: 0.5!important;
}

/* ############################## Accueil ############################## */
/* Accueil pres */
.accueil-info-container{
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.accueil-info-content{
    position: absolute;
    height: calc(100vh - var(--navbar-height));
    width: 100%;
    max-width: var(--max-width-containers);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    z-index: 801;
    padding: var(--padding-all-cointainers);
}
.accueil_video_player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accueil-info-titreh1{
    color: white;
    text-shadow: #000000 0 0 25px;
}
.accueil-info-titreh3{
    color: white;
    text-shadow: #000000 0 0 25px;
    margin-bottom: 20px;
}
.accueil-info-btn{
    width: 190px;
    color: white;
    box-shadow: #00000078 0 0 15px;
    text-align: center;
    align-items: center;
    background-color: var(--rouge-courcier);
    padding: 15px;
    border-radius: 10px;
}
.accueil-info-btn:hover{
    color: white;
    background-color: var(--rouge-courcier-clair);
}
/* Accueil pres entreprise */
.accueil-pres-entreprise-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: var(--padding-all-cointainers);
}
.accueil-pres-entreprise-content{
    height: 500px;
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: row;
    align-items: center;
}
.iframe-pres-agence{
    height: 289px;
    width: 2365px!important;
}
.accueil-pres-entreprise-content-txt{
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}
.accueil-pres-entreprise-titreh1{
    font-weight: 900;
}
.accueil-pres-btn{
    width: 190px;
    color: #FFFFFF;
    box-shadow: #0000003d 0 0 15px;
    text-align: center;
    align-items: center;
    background-color: var(--rouge-courcier);
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
}
.separator-pres-w{
    width: 100%;
    height: 0;
    border-bottom: 3px solid #FFFFFF;
    margin: 20px 0;
    border-radius: 10px;
}
/* Accueil pres valeurs */
.accueil-presntation-valeurs{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.accueil-pres-valeurs-content{
    height: 100%;
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    align-items: center;
    flex-direction: column;
}
.separator-pres-r{
    width: 100%;
    height: 0;
    border-bottom: 3px solid var(--rouge-courcier);
    margin: 20px 0;
    border-radius: 10px;
}
.accueil-pres-valeurs-titres{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.accueil-pres-entreprise-images {
    display: inline-flex;
    width: 100%;
    justify-items: stretch;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 50px;
    gap: 30px;
    flex-wrap: wrap;
}
.promoteur-infrastructures-image {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 350px;
    text-align: center;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
    background-color: var(--rouge-courcier);
    border-radius: 10px;
    padding: 15px;
}
.promoteur-infrastructures-image:hover {
    cursor: pointer;
    transform: scale(1.01);
    transition: 0.2s;
}
.img_pres_valeurs{
    width: 90px;
    margin-bottom: 20px;
    transition: 300ms;
}
.img_pres_valeurs:hover{
    transition: transform 500ms ease-in-out;
    transform: perspective(150px) rotateY(360deg);
}
.acueil-pres-val-txt h3, .acueil-pres-val-txt p{
    display: flex;
    flex-direction: column;
    color: white;
}
/* Selection biens */
.accueil-selection {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.accueil-selection-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    background-color: var(--body-background-color-clair);
    border-radius: 10px;
    padding: 30px 0;
}
.accueil-selection-titres{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.accueil-selection-sous-titres{
    color: white;
    display: flex;
}
.accueil-selections-biens{
    width: 100%;
    height: auto;
    display: flex;
    padding: 50px;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.accueil-selection-bien-container{
    display: flex;
    flex-direction: column;
    width: var(--width-accueil-biens-carte);
    height: 100%;
    min-height: 262px;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.25);
    border-bottom: 3px solid var(--rouge-courcier);
}
.accueil-selection-bien-container:hover{
    cursor: pointer;
    transform: scale(1.02);
    transition: 300ms;
}
.accueil-selection-type-bien{
    position: absolute;
    width: var(--width-accueil-biens-carte);
    height: var(--height-accueil-biens-carte-img);
    z-index: 499;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    overflow: hidden;
}
.accueil-info-bien-bandeau{
    background-color: var(--rouge-courcier);
    width: 200px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg) translateX(60px) translateY(-45px);
    box-shadow: 0px 0px 10px 4px rgb(0 0 0 / 30%);
}
.accueil-info-bien-bandeau p {
    color: white;
    font-weight: 600;
    font-size: 12px;
}
.accueil-bien-img-bg{
    width: var(--width-accueil-biens-carte);
    height: var(--height-accueil-biens-carte-img);
    background-size: cover;
    background-position: center center;
    object-fit: cover;
}
.accueil-bien-infos-container{
    display: flex;
    height: 100%;
    padding: 10px 15px;
    background-color: #FFFFFF;
    flex-direction: row;
    justify-content: space-between;
}
.accueil-bien-info-titres{
    display: flex;
    flex-direction: column;
}
.accueil-bien-titre-ville{
    font-weight: 900;
    color: var(--gris-clair);
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 5px;
}
.accueil-bien-titre-annonce{
    font-weight: bold;
    font-size: 13px;
}
.accueil-bien-tarif-prix{
    font-weight: 800;
    font-size: 18px;
    color: var(--rouge-courcier);
}
.accueil-pres-more-btn{
    margin-top: 30px;
}
.accueil-pres-btn:hover{
    color: white;
    background-color: var(--rouge-courcier-clair);
    z-index: 699;
    transform: scale(1.01);
    transition: 0.2s;
}

/* ############################# Estimation ############################# */
/* Header */
.estimation-header-pres {
    text-align: center;
    background:url("../images/test_banniere_1.png") no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    align-items: center;
    display: flex;
    justify-content: center;
}
/* Containers */
.formulaire-container-estimation{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.formulaire-content{
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
}
/* Barre rouge */
.titre-page-estimation{
    display: flex;
    padding: var(--padding-all-cointainers);
    flex-direction: column;
    align-items: center;
}
/* Formulaire */
.formulaire-inputs{
    width: 100%;
    min-height: 510px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    z-index: 300;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--rouge-courcier);
    transition: all 0.6s cubic-bezier(0.57, 0, 0, 1);
}
/* Inputs */
.estimation-formulaire-inputs{
    display: flex;
    flex-direction: column;
    padding: 30px;
    width: 100%;
    height: auto;
    transition: all 1s cubic-bezier(0.57, 0, 0, 1);
}
.formulaire-input-etape{
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: all 0.6s cubic-bezier(0.57, 0, 0, 1);
}
.formulaire-input-etape-half{
    display: flex;
    flex-direction: column;
    padding: 20px;
    filter: opacity(0.5);
}
.formulaire-input-etape-hide{
    display: none;
}
.formulaire-input-etape h4, .formulaire-input-etape-half h4{
    font-weight: 900;
    margin: 0;
}
.separator-pres-r-short{
    width: 200px;
    height: 0;
    border-bottom: 3px solid var(--rouge-courcier);
    margin: 20px 0;
    border-radius: 10px;
}
.estimation-input-choix-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.estimation-input-carte{
    padding: 10px;
    border-radius: 3px;
    background-color: var(--rouge-courcier);
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    transition: 0.1s;
}
.estimation-input-carte:hover{
    cursor: pointer;
    transform: scale(1.04);
}
.estimation-input-selected{
    outline: 3px solid var(--rouge-courcier);
    outline-offset: 3px;
}
.estimation-input-unselected{
    filter: opacity(0.6);
}
.estimation-input-carte img{
    margin-bottom: 10px;
    width: 60px;
}
.estimation-input-carte p{
    text-transform: uppercase;
    font-weight: 900;
    color: white;
    font-size: 14px;
}
/*Input number ou txt*/
.estimation-input-container{
    padding: 10px;
    border-radius: 3px;
    background-color: var(--rouge-courcier);
    min-width: 265px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: 0.1s;
    gap: 10px;
    min-height: 80px;
}
.estimation-input-input{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.esti-input-content{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.estimation-counter-div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimation-input-container:hover{
    cursor: pointer;
    transform: scale(1.04);
}
.estimation-input-container img{
    width: 40px;
}
.estimation-input-container p{
    text-transform: uppercase;
    font-weight: 900;
    color: white;
    font-size: 14px;
}
.estimation-p-spacer{
    margin-right: 20px;
}
.estimation-input-container input{
    height: 30px;
    border-radius: 3px;
    padding: 5px 10px;
    border-radius: 3px;
    width: 100%;
}
.estimation-input-textarea{
    width: auto!important;
    height: auto!important;
    padding: 10px;
    border-radius: 3px;
    background-color: var(--rouge-courcier);
    display: flex;
    justify-content: center;
    transition: 0.1s;
    gap: 15px;
    min-height: 80px;
    min-width: 570px;
    flex-direction: column;
    align-items: flex-start;
}
.estimation-input-textarea p{
    text-transform: uppercase;
    font-weight: 900;
    color: white;
    font-size: 14px;
}
.estimation-input-textarea img{
    width: 25px;
}
.estimation-input-textarea textarea{
    min-height: 42px;
    max-height: 106px;
    width: 550px;
    max-width: 550px;
    border-radius: 3px;
    padding: 5px 10px;
    border-radius: 3px;
    resize: none;
}

.file-input-container {
    position: relative;
}

.file-input-container input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.file-input-container .selected-files {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.file-input-container .selected-files .file {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f0f0f0;
    padding: 5px 5px 5px 10px;
    border-radius: 5px;
    justify-content: space-between;
    width: 100%;
}

.file-input-container .selected-files .file .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-input-container .selected-files .file .remove-file {
    color: white;
    cursor: pointer;
    background-color: red;
    padding: 4px 10px;
    border-radius: 3px;
    margin-left: 10px;
}
/* Nav progression */
.estimation-form-nav-rail{
    height: 100%;
    width: 290px;
    background-color: var(--rouge-courcier);
    padding: 20px;
}
.estimation-form-nav-rail h4{
    color: white;
    font-weight: 900;
    margin: 0;
}
.estimation-form-nav-wagon{
    height: auto;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 130px;
}
.estimation-progress-imgs{
    left: 0;
    display: flex;
    flex-direction: column;
}
.estimation-progress-img-container{
    display: flex;
    align-items: center;
}
.estimation-progress-img-container img{
    width: 30px;
}
.estimation-progress-img-container-txt {
    color: white;
    font-weight: 600;
    margin-left: 10px;
    height: 30px;
}
.estimation-progress-img-container-txt-half {
    color: #ffc8c8;
    font-weight: 600;
    margin-left: 10px;
    height: 30px;
}
.estimation-progress-img-container-txt-selected {
  height: 30px;
  text-align: center;
  background: linear-gradient(to left, #ffffff 33%, #ff8f8f 66%, #ffffff 99%);
  background-size: 200% auto;

  font-weight: 900!important;
  margin-left: 10px;
  
  color: #FFFFFF;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 1s linear infinite;

}
@keyframes shine {
    to {
        background-position: 200% center;
    }
}
.estimation-progress-info{
    display: flex;
    justify-content: space-between;
}
.estimation-progress-percent{
    color: white;
    font-weight: 600;
}
.estimation-progress-submit{
    padding: 10px;
    background-color: #ffcbcb;
    color: #ff6d6d;
    cursor: not-allowed;
    border-radius: 3px;
    width: 100%;
    height: 40px;
    font-weight: 900;
}
.estimation-progress-submit-ok{
    background-color: #ffffff;
    color: var(--rouge-courcier);
    cursor: pointer;
}
/*Formulaire entete titre*/
.formulaire-entete {
    background-color: var(--rouge-courcier);
    color: white;
    border-radius: 7px;
    padding: 5px 20px 20px 20px;
    width: auto;
    transform: translateY(-27px);
    z-index: 299;
    position: absolute;
}
.formulaire-texte-entete{
    color: #FFFFFF;
    font-weight: bold;
}

/* Estimation paragraphe */
.estimation-immobiliere-container{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
    background-color: var(--body-background-color-clair);
}
.estimation-immobiliere-content{
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    align-content: center;
}
.texte-pres-estimation{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.separator-pres-b{
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--gris-clair);
    margin: 20px 0;
    border-radius: 10px;
}
.paragraphe-estimation{
    margin-bottom: 20px;
}
.paragraphe-estimation a:hover{
    text-decoration: underline;
}

/* ############################## Contact ############################## */
/*  */
.contact-container{
    display: flex;
    width: 100%;
    min-height: calc(100vh - var(--navbar-height));
    height: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--padding-all-cointainers);
}
.contact-content{
    width: var(--width-containers);
    max-width: calc(var(--max-width-containers) - 493px);
    display: flex;
    flex-direction: row;
    height: 690px;
    align-items: center;
    background-color: #ffffff;
    justify-content: space-evenly;
}

.video-header-pres{
    display: flex;
    text-align: center;
    height: 300px;
    width: 100%;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}

.img-contact{
    height: 500px;
    width: 750px;
}
.contact-infos-form{
    display: flex;
    padding: 30px 0;
    background-color: #FFFFFF;
}

.contact-titre-visite{
    margin-top: 70px;
    margin-bottom: 20px;
}

.contact-informations{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-informations-2{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    max-width: 493px;
    width: 100%;
    max-height: 690px;
    background: url(../images/contact_n&b.png) no-repeat;
    background-size: cover;
    background-position: center;
}
.texte-contact-container-2{
    display: flex;
    justify-content: center;
    max-width: 493px;
    height: 690px;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    backdrop-filter: blur(4px);
}
.texte-contact-container{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 50px;
    height: 100%;
    flex-direction: column;
}
.texte-contact-container-titre-w{
    margin-bottom: 15px;
    color: #ffffff;
}
.texte-contact-container-titre-r{
    margin-bottom: 15px;
    color: var(--rouge-courcier);
}

.contact-agences{
    display: flex;
    font-weight: 600;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.renseignements p, .renseignements a{
    font-size: 17px!important;
}

.contact-infos-form h3 {
    margin: 0;
}
.Contact-adresse-ou{
    margin: 5px 0 5px 10px;
    color: #979797;
    font-weight: bold;
}
.contact-liens{
    display: inline-flex;
}
.contact-liens img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.renseignements{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.renseignements p{
    color: #ffffff;
    font-size: 16px;
}

.renseignements-ou{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.separator-vertical-b{
    width: 0;
    border-right: 1px solid #000000;
    margin: 0;
}
.contact-formulaire-titre-input {
    margin-left: 5px;
    font-weight: bold;
    color: var(--gris-fonce);
}

/* ############################# Catalogue ############################# */
/* Formulaire */
.catalogue-recherche-bar{
    display: flex;
    justify-content: center;
}
.formulaire-container{
    width: 100%;
    height: 87px;
    display: flex;
    justify-content: center;
    max-width: var(--max-width-containers);
}
.catalogue-formulaire-content{
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    position: absolute;
    transform: translateY(-13px);
    z-index: 850;
}
.catalogue-formulaire-content-index{
    transform: translateY(64vh)!important;
    max-width: calc(var(--max-width-containers) - 40px);
}

.catalogue-formulaire-form{
    width: 100%;
}
.catalogue-formulaire-inputs {
    text-align: center;
    background-color: white;
    padding: 15px 25px 15px 25px;
    display: flex;
    border-radius: 7px;
    flex-direction: column;
    width: 100%;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
    z-index: 299;
    position: absolute;
}
.catalogue-formulaire-inputs-bloc-de-2 {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.catalogue-formualire-bloc-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.catalogue-formulaire-titre-input{
    margin-left: 2px;
    font-weight: bold;
    color: var(--gris-fonce);;
}
.catalogue-envoyer{
    display: flex;
    align-items: center;
}
.catalogue-formulaire-submit-btn{
    color: white;
    box-shadow: #00000030 0 0 15px;
    text-align: center;
    background-color: var(--rouge-courcier)!important;
    padding: 15px;
    border-radius: 7px;
    cursor: pointer;
}
.catalogue-formulaire-submit-btn:hover{
    background-color: #ff404c;
}
.catalogue-formualire-bloc-input input, .catalogue-formulaire-content select, .catalogue-formulaire-content textarea{
    background-color: #EEEEEE;
    border: 1px solid #B9B9B9;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
}
.formulaire-select{
    background-color: #EEEEEE;
    border: 1px solid #B9B9B9;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}
.minwidth100{
    min-width: 100%;
}
.formualire-bloc-input-unique{
    width: 100%;
}
.catalogue textarea, .catalogue-formualire-bloc-input textarea{
    min-width: 100%;
    min-height: 70px;
    width: 100%;
    max-height: 400px;
}
.catalogue-formulaire-inputs ::placeholder {
    color: #B9B9B9;
}

/* Items */
.catalogue-biens{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.formated-a-under{
    display: flex;
    flex-direction: column;
}
.catalogue-biens-container{
    height: auto;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.catalogue-biens-content{
    width: var(--width-containers);
    max-width: var(--width-containers);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}
.link-propriete{
    margin-bottom: 30px;
}
.link-propriete:hover{
    text-decoration: none!important;
}
.catalogue-bien-container {
    display: flex;
    flex-direction: column;
    width: var(--width-catalogue-carte);
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.25);
    border-bottom: 3px solid var(--rouge-courcier);
}
.cata-bien-vendus-border {
    border-bottom: 3px solid #474747!important;
}
.catalogue-bien-container:hover{
    cursor: pointer;
    transform: scale(1.02);
    transition: 300ms;
}
.catalogue-infos-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px 15px;
    background-color: #FFFFFF;
}

/* Infos type de bien */
.catalogue-info-type-bien{
    position: absolute;
    width: var(--width-catalogue-carte);
    height: 280px;
    z-index: 499;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    overflow: hidden;
}
.cata-bien-etiqu-2{
    margin: 10px 15px!important;
}
.catalogue-info-bandeau-bien{
    background-color: var(--rouge-courcier);
    width: 200px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg) translateX(55px) translateY(-30px);
    box-shadow: 0px 0px 10px 4px rgb(0 0 0 / 30%);
}
.catalogue-info-bandeau-bien-vendus{
    background-color: #474747;
    width: 200px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg) translateX(55px) translateY(-30px);
    box-shadow: 0px 0px 10px 4px rgb(0 0 0 / 30%);
}
.catalogue-info-bandeau-bien p, .catalogue-info-bandeau-bien-vendus p{
    color: white;
    font-weight: 600;
    font-size: 17px;
    text-transform: uppercase;
}

/* Image */
.catalogue-image-bien-bg {
    width: var(--width-catalogue-carte);
    height: 280px;
    background-size: cover;
    background-position: center center;
    object-fit: cover;
}
/* Titres */
.catalogue-bien-titre{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.catalogue-titre-ville{
    font-weight: bold;
    color: var(--gris-clair);
    text-transform: uppercase;
}
.catalogue-titre-separator{
    font-weight: bold;
    margin: 0 5px;
}
.catalogue-titre-annonce{
    font-weight: bold;
}
/* Infos */
.catalogue-bien-description{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 42px;
}
.catalogue-bien-tarifs{
    min-width: 94px;
}
.catalogue-bien-tarif{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Étiquettes */
.catalogue-bien-etiquettes{
    display: flex;
}
.catalogue-bien-tarif-prix{
    font-weight: 800;
    font-size: 25px;
    color: var(--rouge-courcier);
}
.vendus-color-prix{
    color: #474747!important;
}
.catalogue-bien-tarif-recurence{
    font-weight: bold;
}
.catalogue-bien-tarif-fai{
    font-size: 10px;
    color: var(--gris-fonce);
    display: flex;
    justify-content: flex-end;
}
.catalogue-bien-etiquette{
    background-color: var(--rouge-courcier);
    border-radius: 3px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    margin-right: 10px;
    max-height: 25px;
}
.vendus-bg-color{
    background-color: #474747!important;
}
.catalogue-bien-etiquette p{
    color: white;
    font-weight: 600;
    font-size: 13px;
}
.catalogue-bien-etiquette-img{
    height: 16px;
    margin-left: 8px;
}

/* ########################## Page Fiches Immo ########################## */
/* Header */
.fiches-header {
    padding-bottom: 20px;
}

/*Sommaire*/
.sommaire-container {
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: #FFEFE3 ;
    text-decoration: underline;
    padding-bottom: 40px;
}

.sommaire-elements{
    padding-left: 30px;
    font-size: 20px;
    font-weight: 500;
}

/*Les titres*/
.titre-sommaire-fiches{
    margin-bottom: 10px;
}

.titre-rubrique{
    font-size: 30px;
    color: black;
}

.titre-fiches {
    display: flex;
    justify-content: flex-start;
    text-align: center;
    padding-left: 30px;
}


/*Les Rubriques*/
.rubrique {
    padding-top: 30px;
}

/* ########################## Page Actualités ########################## */
/* Conteneurs section */
.actualite-container{
    width: 100%;
    min-height: calc(100vh - var(--navbar-height) - 300px);
    height: auto;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-all-cointainers);
}
.actualite-content{
    height: 100%;
    width: 100%;
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Header */
.actualite-header {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.separator-pres-b-big{
    width: 100%;
    height: 0;
    /*border-bottom: 3px solid #1E1E1E;*/
    border-bottom: 3px solid #c90000;
    margin: 20px 0 50px 0;
    border-radius: 10px;
}

/* Actualite item */
.actualite-elements{
    margin: 30px 0;
}

.actualite-actu{
    display: flex;
    justify-content: flex-start;
    padding: 30px 30px;
    width: 100%;
    max-height: 240px;
    height: 240px;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #ffdac9;
}
.actualite-fond-actu{
    background-color: var(--body-background-color-clair);
}
.actualite-image{
    height: 100%;
    max-height: 180px;
    max-width: 190px;
}
.actualite-texte-actu{
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.actualite-textes{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.actualite-paragraphe-actu{
    padding-top: 20px;
}
.actualite-btn-a{
    width: 100%;
    max-width: 200px;
}
.actualite-btn{
    border-radius: 5px;
    /*border: 2px solid #000000;*/
    border: 2px solid #c90000;
    font-size: 16px;
    font-weight: bold;
    /*color: #000000;*/
    color: #c90000;
    width: 90%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.actualite-btn:hover{
    border: none;
    background-color: var(--rouge-courcier);
    color: #FFFFFF;
    transition: 0.1s;
}

.actualite-btn:active{
    background-color: var(--rouge-courcier-clair);
}

/*Barres de séparation*/

.barre-sous-titre {
    border: solid #c90000 2px;
    margin: 0 60% 15px 30px;
    background-color: #c90000;
}

.barre-actu-rouge {
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background-color: var(--rouge-courcier);
    margin-bottom: 30px;
}

/* ########################### actualite-fiche ########################## */
.actualite-fiche-header{
    align-items: center;
    margin-bottom: 50px;
}
.actualite-fiche-image{
    max-width: 500px;
    max-height: 400px;
}

.actualite-fiche-texte{
    margin-bottom: 50px;
}

.actualite-fiche-texte p{
    font-size: 16px;
}

.retour {
    border: 4px solid red;
    padding: 10px;
    color: red;
}

/* ############################# Entreprise ############################# */
.entreprise-header-banniere{
    background: url("../images/test_banniere_2.png") no-repeat center;
    background-size: cover;
}

/* Containers */
.entreprise-main-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.entreprise-main-content{
    min-height: calc(100vh - var(--navbar-height));
    width: calc(var(--width-containers));
    max-width: var(--max-width-containers);
    display: flex;
}
.entreprise-container-textes{
    width: 100%;
}
/*Titres*/
.titre {
    text-align: center;
    padding-top: 20px;
}

/*Titres*/
.titre-entreprise {
    text-align: center;
}

.titre-entreprise h1{
    font-weight: bold;
    font-size: 40px;
    color: black;
    padding-bottom: 40px;
}

.titre-entreprise h2{
    font-weight: bold;
    font-size: 22px;
    color: white;
    padding: 8px 15px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin: 0px;
    background-color: var(--rouge-courcier);
}

.sous-titre-entreprise h3{
    color: var(--gris-fonce);
    font-weight: bold;
    font-size: 26px;
}

.barre_rouge {
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background-color: var(--rouge-courcier);
}

.entete-entreprise{
    padding-bottom: 20px;
}

/*Style page*/
.page{
    display: flex;
}

.zone-titre{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

/*Images*/
.image-entreprise-container{

}
.image-entreprise-gauche{
    max-height: 350px;
    border-radius: 3px;
    margin-left: 30px;
    max-width: 500px;
}
.image-entreprise-droit{
    max-height: 350px;
    border-radius: 3px;
    margin-right: 30px;
    max-width: 500px;
}

/*Style général des rubriques de la page Entreprise*/
.corps-rubrique-entreprise{
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    padding: var(--padding-all-cointainers);
}

.paragraphe-rubrique-entreprise{
    max-width: 582px;
}


/*Styles paragraphes*/
.paragraphe-gauche{
    margin-top: 15px;
    font-size: 16px;
}

.paragraphe-droite{
    margin-top: 15px;
    font-size: 16px;
}

/* ############################# Propriété ############################# */
/*Containers*/
.propriete-container{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}
.propriete-content{
    height: 100%;
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 5px;
}
/* File ariane */
.propriete-file-ariane {
    display: flex;
    width: 100%;
    gap: 5px;
}
.propriete-file-ariane a {
    color: var(--rouge-courcier);
    font-size: 15px;
    font-weight: 600;
}
.propriete-file-ariane a:hover {
    text-decoration: underline;
    color: var(--rouge-courcier-clair);
}
.propriete-file-sep{
    color: var(--rouge-courcier);
}

/* Entete */
.propriete-entete{
    display: flex;
    width: 100%;
    margin: 50px 0;
}
.propriete-entete-short-pres{
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    justify-content: space-between;
}

.etiquettes{
    display: flex;
    margin-bottom: 10px;
}

.etiquettes .catalogue-bien-etiquette{
    padding: 14px;
}

.etiquettes .catalogue-bien-etiquette p{
    font-size: 15px;
}

.etiquettes .catalogue-bien-etiquette-img{
    height: 20px;
}

.propriete-liens{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.propriete-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--rouge-courcier);
    font-size: 16px;
    font-weight: bold;
    border: var(--rouge-courcier) 2px solid;
    border-radius: 5px;
    width: 100%;
}

.propriete-btn:hover{
    background-color: var(--rouge-courcier);
    color: white;
    transition: 0.2s;
}

.link-in-btn-img{
    height: 20px;
}

.propriete-entete-info-txt{
    margin-bottom: 20px;
}

.image-deroulante {
    width: 100%;
}
.droite {
    padding-left: 27px
}
.produit {
    display: flex;
    justify-content: space-evenly;
}
.information {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.prix {
    padding-bottom: 20px;
    font-size: 28px;
    color: red;
}
.type {
    font-weight: bold;
    font-size: 28px;
    margin-right: 12px;
}
.localisation {
    font-size: 24px;
}
.ref {
    margin-left: 15px;
    color: red;
    font-size: 16px;
}
.parti-gauche {
    padding-left: 30px;
    width: 100%;
}
.texte-titre {
    display: flex;
    align-items: start;
    font-size: 18px;
    color: red;
    margin-bottom: 15px;
}
.texte-presentation {
    display: flex;
    align-items: start;
}
.image-deroulante {
    width: 100%;
}
.propriete-info-complementaire {
    display: flex;
    flex-direction: column;
    margin: 40px 0;
    width: 100%;
}
.propriete-container-infos-supp{
    display: flex;
    gap: 20px;
    height: auto;
    flex-wrap: wrap;
}
.propriete-info-complementaire-element{
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-width: 365px;
    min-width: 160px;
    border-radius: 5px;
    border: solid 2px #dfdfdf;
    background-color: #ffecec;
}
.gauche {
    display: flex;
    justify-content: flex-start;
}
.image-complementaire {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 20px;
    width: 100%;
    padding-bottom: 50px;
}
.propriete-titre-info-supp{
    margin-bottom: 15px;
    color: var(--rouge-courcier);
    font-weight: 600;
    text-transform: uppercase;
}
.texte-plan {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}
.div-image-plan {
    text-align: center;
}
.image-plan {
    width: 100%;
    aspect-ratio: 16/9;
}
.photos {
    padding-bottom: 50px;
}
.texte-photos {
    display: flex;
    justify-content: center;
}
.div-image-photos {
    text-align: center;
}
.image-photos {
    width: 100%;
}
.visite-virtuelle {
    padding-bottom: 50px;
    width: 100%;
}
.texte-visite {
    display: flex;
    justify-content: center;
}

.propriete-iframe {
    width: 100%;
    aspect-ratio: 16/9;
}
.person {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ############################# References ############################# */

.reference-container{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}

.reference-content{
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.references-biens-container{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--padding-all-cointainers);
}

.references-entete-rubrique{
    width: var(--width-containers);
    max-width: var(--width-containers);
    margin: 20px 0;
}

.references-biens-content{
    padding: 30px 20px;
}

/*Les Titres*/

.error-aucun-bien-trouvé{
    margin: 50px 0;
}

.titre-reference {
    text-align: center;
}

.titre-reference h1{
    font-weight: bold;
    font-size: 40px;
    color: black;
}

.titre-reference h2{
    font-weight: bold;
    font-size: 34px;
    color: black;
}

.barre_rouge-reference {
    border: solid #CD0000 1px;
    background-color: #CD0000;
}

/*Entete de la page*/
.entete-references{
    display: flex;
    flex-direction: column;
    margin: 30px 0 10px 0;
    align-items: center;
}

/*Boutons de choix de page*/
.sommaire {
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
}

.sommaire button{
    background-color: #CD0000;
    color: white;
    border-radius: 10px;
    padding: 20px;
}

.sommaire .bouton-milieu{
    margin-left: 3%;
    margin-right: 3%;
}

.sommaire button:active{
    font-weight: bold;
    /*font-size: 20px;*/
}

/*Formulaire de recherche de bien*/
.champ {
    padding: 20px;
}

.contenant-formulaire {
    display: flex;
    justify-content: center;
}

.formulaire {
    display: flex;
    text-align: center;
    padding-right: 15px;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
}

.type-immobilier {
    padding: 10px;
}

/*Style Rubriques*/

/*CSS pour Afficher/Cacher des rubriques*/
.rubrique-affiche{
    display: block;
}

.rubrique-cache{
    display: none;
}

/*Entete des Rubriques*/
.container-elements{
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    padding-bottom: 20px;
}

.container-elements h2{
    padding-bottom: 20px;
}


.bouton-affichage{
    /*background-color: #CD0000;*/
    background-color: inherit;
    font-size: 20px;
    color: #CD0000;
    border-radius: 10px;
    border: 0;
    padding: 10px;
    margin: 10px;
}

.bouton-affichage :active{
    border: #CD0000 1px dashed;
}

/*Biens des rubriques*/
.biens-rubriques{
    padding: 20px 17%;
    display: flex;
    flex-direction: column;
}

.ligne-biens{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 20px 0;
}

.bien{
    width: fit-content;
    height: fit-content;
    margin: 0 30px;
    padding: 10px 10px 40px 10px;
    background-color: #6c6c6c;
}

.image-bien img{
    width: 450px;
    height: 250px;
}

.image-bien{
    width: fit-content;
    height: fit-content;
}

/* ############################### Footer ############################### */
/*  */
.footer-container{
    height: auto;
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
}
.footer-container-containers{
    width: var(--width-containers);
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer-container-containers a:hover{
    color: #6c6c6c;
    text-decoration: underline;
}
.footer-content-container{
    padding: 50px 20px;
    display: flex;
    justify-content: space-between;
}
.footer-container-double{
    display: flex;
    gap: 25px;
}

.footer-content{
    display: flex;
    width: 150px;
}
.footer-content-contact{
    display: flex;
    max-width: 270px;
}
.footer-ul-elements{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.foot-bloc-title{
    font-weight: bold;
    margin-bottom: 15px;
    font-weight: 900;
    color: var(--gris-fonce);
}
.foot-contact-element{
    margin-bottom: 15px;
}
.separator{
    width: 100%;
    height: 0;
    border-bottom: 1px solid #1e1e1e52;
}
.separator-titres{
    width: 100%;
    height: 0;
    border-bottom: 1px solid #1e1e1e52;
    margin-bottom: 10px;
}
.footer-bottom-links{
    display: flex;
    justify-content: center;
    padding: 0 20px;
}
.footer-bottom-links li {
    margin: 10px 10px 15px 10px;
}

.contact3-container{
    width: 100%;
}

/* ############################## Cookies ############################## */


#tarteaucitronIcon{
    left:0!important;
    max-width: 70px!important;
}
/* ############################# Honoraires ############################# */

.honoraires-container{
    width: 100%;
    padding: var(--padding-all-cointainers);
    display: flex;
    justify-content: center;
}

.honoraires-content{
    max-width: var(--max-width-containers);
    height: auto;
    display: flex;
    justify-content: center;
}

.honoraire {
    background-color: #ffffff;
}

.honoraires-img {
    max-height: 100%;
    max-width: 100%;
    height: 150%;
    width: 150%;
}

/* ############################# Mention Légales ############################# */

.texte-mention {
    padding-bottom: 30px;
}

.mention-legale-h2 {
    padding-top: 30px;
}
.editeur-hebergeur {
    display: flex;
    justify-content: space-around;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.editor, .publisher {
    padding-bottom: 30px;
}

.RGPD {
    display: block;
    box-sizing: border-box;
}

.rgpd {
    padding-bottom: 30px;
}

.cookie {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 70px;
    -moz-column-gap: 70px;
    column-gap: 70px;
    padding: 20px;
    background: #f1f1f1;
    padding-bottom: 30px;
}

.cookies {
    padding-bottom: 30px;
}

.demarchage {
    display: block;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-top: 30px;
}

.editeur-hebergeur, .demarchage, .cookies, .RGPD {
    color: #191919;
    font-family: 'Lato',Helvetica,Arial,Tahoma,sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    -moz-osx-font-smoothing: grayscale;
}


.mention-container {
    width: 100%;
    min-height: calc(100vh - var(--navbar-height) - 300px);
    height: auto;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-all-cointainers);
}

.mention-content{
    height: 100%;
    width: 100%;
    max-width: var(--max-width-containers);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ################################ 404 ################################# */

.erreur404-div-container{
    padding: var(--padding-all-cointainers);
    height: 100vh;
    width: var(--width-containers);
}

.erreur404-div-content{
    display: flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#retour-btn-404 {
    padding: 10px 20px;
    background-color: var(--rouge-courcier);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
}

#retour-btn-404:hover {
    background-color: var(--rouge-courcier-clair)!important;
    cursor: pointer!important;
}


/* ###################################################################### */
/* ############################# RESPONSIVE ############################# */

@media only screen and (max-width: 1200px) {
    /*Acceuil*/
    /*Pres valeurs*/
    .accueil-pres-entreprise-images {
        display: inline-flex;
        width: 100%;
        justify-items: stretch;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }
    /*Recherche*/
    .recherche-responsiv-disp-none{
        display: none;
    }
    /**/
    .panneau-lateral-gauche, .panneaux-lateraux-droite{
        top: 70px;
    }

    /*Propriete*/
    .propriete-entete{
        flex-direction: column;
        align-items: center;
    }
    .propriete-entete-short-pres{
        margin: 30px 0 0 0;
        width: 100%;
        max-width: 640px;
    }

    /*Catalogue*/
    /*Recherche*/
    .catalogue-recherche-bar{
        padding: 0 20px;
    }
    .catalogue-formulaire-content {
        width: var(--width-containers);
        max-width: var(--max-width-containers);
        display: flex;
        flex-direction: unset;
        align-items: flex-start;
        align-content: unset;
        flex-wrap: wrap;
        position: inherit;
        transform: none;
        z-index: 850;
    }
    .catalogue-formulaire-inputs-bloc-de-2{
        flex-direction: column;
        gap: 5px;
    }
    .catalogue-formulaire-inputs {
        width: 100%;
        position: inherit;
    }
    .catalogue-formualire-bloc-input, .catalogue-champ{
        width: 100%;
    }
    .catalogue-envoyer{
        margin-top: 20px;
    }
    .formulaire-container{
        height: auto;
    }
    .formulaire-entete {
        border-radius: 7px 7px 0 0;
        padding: 5px 20px 6px 20px;
    }
    .catalogue-formulaire-inputs{
        border-radius: 0 7px 7px 7px;
    }
}

@media only screen and (max-width: 1000px) {
    .estimation-input-textarea textarea{
        width: 100%;
    }
    .estimation-input-textarea {
        min-width: 0;
    }
}

@media only screen and (max-width: 992px) {
    /*Titres*/
    h1 {
        font-size: 25px;
    }
    h3 {
        font-size: 18px;
    }
    /*Navbar*/
    .navbar-container{
        height: 70px;
    }
    :root{
        --navbar-height: 70px;
    }
    .navbar-content{
        padding: 0;
    }
    .navbar-logo-courcier{
        width: 72px;
    }
    .navbar-elements-container{
        width: 100%;
        justify-content: center;
    }
    /*Entreprise*/
    .entete-rubrique{
        margin: 50px 0 30px 0;
    }
    .corps-rubrique-entreprise{
        flex-direction: column-reverse;
        flex-wrap: wrap;
        align-items: center;
    }
    .corps-rubrique-entreprise{
        padding: 0;
    }
    .titre-entreprise h2{
        font-size: 20px;
    }
    .image-entreprise-gauche{
        width: auto;
        height: auto;
        margin: 20px 0 0 0;
        margin-bottom: 20px;
        max-height: 100%;
        max-width: 100%;
    }
    .image-entreprise-droit{
        width: auto;
        height: auto;
        margin: 20px 0 0 0;
        margin-bottom: 20px;
        max-height: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 810px) {
    /*Navbar*/
    .navbar-responsiv-disp-none{
        display: none;
    }
    /*Footer*/
    /*Mentions & copy*/
    .footer-bottom-links{
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
    }
    .footer-bottom-links li{
        margin: 0 0 10px 0;
    }
    /*Contact*/
    .contact-container{
        flex-direction: column;
    }
    .contact-content{
        width: 100%;
    }
    .contact-informations-2{
        max-width: none;
    }
    .texte-contact-container-2{
        max-width: none;
    }
    /*Actualités*/
    .actualite-actu, .actualite-fond-actu{
        flex-direction: column;
        max-height: none;
        height: auto;
        align-items: center;
    }
    .actualite-texte-actu{
        padding: 0;
    }
    .actualite-textes{
        margin: 30px 0;
    }
}

@media only screen and (max-width: 750px) {
    /*Footer*/
    /*Container coordonnes agance*/
    .footer-content-container{
        flex-direction: column;
        gap: 50px;
    }
    /*Honoraires*/
    .editeur-hebergeur{
        flex-direction: column;
    }
    .cookie{
        display: flex;
    }
    /*Reference*/
    .carousel-cont-containers{
        scale: 0.8;
    }
    .propriete-entete{
        max-width: 512px;
    }
    /*Estimation*/
    .estimation-formulaire-inputs{
        padding: 0;
    }
    .estimation-input-choix-container{
        flex-direction: column;
    }
    .estimation-form-nav-rail, .estimation-form-nav-rail {
        min-width: 180px;
    }
    .formulaire-content{
        min-width: 100%;
    }
    .formulaire-container-estimation{
        min-width: 465px;
    }
    .estimation-input-textarea{
        width: 100%!important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /*Carte propriete*/
    :root{
        --width-catalogue-carte: 400px;
    }
    /*Reference*/
    .carousel-cont-containers{
        scale: 0.7;
    }
    .propriete-entete{
        max-width: 448px;
    }
}

/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 500px) {
    /*Reference*/
    .carousel-cont-containers{
        scale: 0.5;
    }
    .propriete-entete{
        max-width: 320px;
    }
    .propriete-liens{
        flex-wrap: wrap;
    }
    .etiquettes{
        flex-wrap: wrap;
        gap: 5px;
    }
    .formulaire-inputs{
        flex-direction: column;
    }
    .estimation-form-nav-rail{
        width: 100%;
    }
    .estimation-input-container{
        width: 100%;
    }
    .estimation-input-choix-container{
        flex-direction: row;
    }
    .formulaire-container-estimation{
        min-width: 367px;
    }
}