@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Playfair+Display+SC&display=swap');


/**
font-family: 'Montserrat', sans-serif;
font-family: 'Playfair Display SC', serif;
**/

html {
    scroll-behavior: smooth;
}

body{
    margin: 0;
    background-color: #191E17;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

h1{
    font-family: 'Playfair Display SC', serif;
    font-size: 40px;
    color: #FFFFFF;
    width: 60%;
    margin-left: 8%;
    margin-bottom: 2%;
    font-weight: initial;
}

h1 div{
    font-size: 32px;
}


.trait_h1{
    margin-left: 8%;
    border-bottom: 4px dashed #F5E6CF ;
    height: 4px;
    width: 20%;
}

h2{
    font-family: 'Playfair Display SC', serif;
    font-size: 24px;
    color: #FFFFFF;
    width: 40%;
    margin-left: 8%;
    font-weight: initial;
}

h3{
    font-family: 'Playfair Display SC', serif;
    font-size: 24px;

}

a{
    text-decoration: none;
}

p{
    color: #FFFFFF;
}

.img_accueil{
    width: 100%;
    margin-top: 4%;
}

.main_accueil p{
    margin-left: 8%;
    margin-right: 8%;
}


.img_agence{
    width: 100%;
}

/**Header**/
header{
    background-color: #191E17;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
}

header a img{
    width: 40%;
}

header svg{
    width: 100%;
}

/** Menu **/
.menu{
    height: 100vh;
    background-color: #AAB1A7;
    display: none;
}

.ouvrir{
    display: block;
}

.fermer{
    display: none;
}

.menu div a {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: center;
    color: black;
}

.menu div a img{
    margin-left: auto;
}

.menu div a span{
    margin-left: 8%;
    font-size: 6vw;
}

.croix_deco_menu{
    margin-left: auto;
    margin-right: 8%;
    padding-top: 8%;
    display: block;
}

/** Formulaire menu**/

form{
    background-color: #DBE1D9;
    width: 86%;
    padding: 4%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 12%;
    margin-top: 4%;
}

.formulaire_border{
    border-style: solid;
    border-width: 1%;
    border-color: #191E17;
    margin: 6%;
    padding: 2%;
    position: relative;
}

.formulaire_border label{
    background-color: #DBE1D9;
    position: absolute;
    top: -20%;
    left: 8%;
    padding-left: 2%;
    padding-right: 2%;
}

form select{
    width: 70vw;
    height: 5vh;
    background-color: #aab1a700;
    border: none;
}

form input{
    width: 64vw;
    height: 4vh;
    background-color: #aab1a700;
    border: none;
}

.button button{
    background-color: #191E17;
    color: white;
    padding: 4%;
    padding-left: 20%;
    padding-right: 20%;
    position: absolute;
    left: 20%;
}



/**Footer**/

.footer_contact{
    width: 60%;
    height: 9vh;
    background-color: #AAB1A7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    margin-left: 20%;
    top: -50%;
}

.footer_contact a{
    width: 60%;
    text-decoration: none;
    text-align: center;
    font-family: 'Playfair Display SC', serif;
    font-size:6vw;
    color: black;
    
}

footer{
    background-color: #DBE1D9;
    padding-top: 8%;
    position: relative;
    z-index: 1;
    margin-top: 16%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 10px;
}

footer img{
    width: 70%;
    display: inline-block;
    margin: auto;
}

footer p{
    margin: 1%;
    color: black;
}

.legal{
    margin-right: 2%;
}

footer div a i{
    color: black;
    margin: 2%;
    font-size: 3vw;
}


/** Pages de sélection des demeures **/
.demeures{
    padding-bottom: 12%;
}

.mason {
    min-height: 100vh;
}

.svg_beige_favoris_demeures{
    background-color: #A0814D;
    padding: 10px;
    border-radius: 100px;
    transform: translate(60px, 120px);
}

.page_caracteristique_svg_beige_favoris_demeures {
    transform: translate(0, 0);
}

.img_demeures{
    width: 100%;
}

.msg_filtre {
    background-color: #A0814D;
    padding: 20px;
    color: white;
    font-size: 13px;
    margin: 0px 0px 0px 30px;
}

.information_demeures{
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    align-items: center;
    margin: auto;
}

.demeures2 {
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr;
}

.information_demeures img{
    margin-left: auto;
    margin-right: 8%;
}

.prix p{
    border: solid;
    border-color: white;
    border-width: 1%;
    width: 70%;
    text-align: center;
    padding: 4%;
}

.caracteristique_demeures{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.caracteristique_demeures div{
    display: flex;
    justify-content: space-around;
    align-items: cneter;
}

.caracteristique_demeures img{
    width: 30%;
}


/** Vue caractéristiques maison **/


.page_caract_icons{
    width: 80%;
    background-color: #AAB1A7;
    margin-left: auto;
    margin-right: auto;
}

.page_caract_icons div{
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: center;
    padding: 4%;
    margin-left: 12%;
}
.page_caract_icons img{
    width: 70%;
}
.page_caract_icons div p{
    color: black;
}

.trait_h2{
    border-bottom: 4px dashed #F5E6CF ;
    height: 4px;
    width: 40%;
}

.page_caract_description{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.page_caract_description h2{
    margin-left: 0;
}

.icon_blanche {
    display: none;
}

/** Map intéractive **/
#map { 
    height: 70vh;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8%;
    margin-bottom: 24%;
 }

 .pop_up_map{
     align-items: center;
 }

 .prix_noir p{
    border: solid;
    border-color: black;
    border-width: 1%;
    text-align: center;
    padding: 4%;
    color: black;
    width: 60px;
    margin-left: 50px;
}

.pop_up_map h2{
    color: black;
    font-size: 14px;
}

.gridmap {
    display: grid;
    grid-template-columns: 60px 100px;
}

.img_map {
    width: 150px;
}

.map_marker_icon{
    width: 30px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
}

/** Page nous contacter **/
.description_contact p{
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
}
.contact_align{
    background-image: url('../img/Contact/Forme_rectangle.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 50vh;
    width: 90%;
    display: grid;
    align-items: center;
    margin: auto;
}

.contact_align .grid_contact{
    display: grid;
    align-items: center;
    grid-template-rows: 25% 25% 50%;
}

.icon_contact_align{
    display: grid;
    align-items: center;
    grid-template-columns: 20% 300px;
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
}
.icon_contact_align img{
    width: 70%;
}

.icon_contact_align > p {
    width: 200px;
}

.icon_contact_align > a {
    width: 200px;
}

.mail_contact{
    color: white;
}

/** Mentions légales **/
.mention p{
    margin-left: 8%;
    margin-right: 8%;
}

.mention h2{
    color: #A0814D;
}

.mention{
    margin-bottom: 20%;
}


.confidentialite{
    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 20%;
}
.confidentialite h3{
    color: #A0814D;
}

.confidentialite p strong{
    color: #AAB1A7;
    font-size: large;
}

.confidentialite a{
    text-decoration: underline;
    color: #A0814D;
}

/* Les favoris  */
.caracteristique_demeures > div:nth-child(1) {
    height: 40px;
}

.caracteristique_demeures > div:nth-child(2) {
    height: 40px;
}

.caracteristique_demeures > div:nth-child(3) {
    height: 40px;
}

.caracteristique_info {
    display: grid;
    grid-template-columns: 80px 50px 1fr 1fr;
}

#top{
    position: fixed;
    bottom: 80px;
    right: 6px;
    z-index: 99;
    background-color: #A0814D;
    cursor: pointer;
    /* display: none; */
}

/* Les belles modifs grâce a la version ordi  */
.gridheader > a {
    display: none;
}

.gridheader > a:nth-child(1) {
    display: initial;
}

.gridcentre {
    display: none;
}

.textPAULINE {
    text-align: justify;
}

.griddubg > img {
    display: none;
}

.contact_accueil {
    display: none;
}

body > main > h2:nth-child(4) {
    display: none;
}

.lelogo{
    margin-left: 8%;
}

.flecheretour {
    position: relative;
   
}

.flecheretour > svg {
    position: absolute;
    top: -260px;
    right: 35px;
    background-color: #A0814D;
    padding: 10px;
    border-radius: 50px;
    width: 30px;
    height: 30px;
}