/* Header  */
h1 {
    font-size: 60px;
    margin: auto;
    text-align: center;
    font-weight: initial;
}

.slogan {
    padding: 30px 0px 30px 0px;
}

.trait_h1 {
    margin: auto;

}

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

#icon_menu {
    display: none;
}

.gridheader {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    margin: 30px;
    gap: 80px;
}

.menu_ordi {
    color: white;
}

.gridheader > a {
    color: white;
    display: initial;
}

.gridheader > a:nth-child(2), .gridheader > a:nth-child(3), .gridheader > a:nth-child(4), .gridheader > a:nth-child(5), .gridheader > a:nth-child(6) {
    margin-top: 20px;
}

.lelogo {
    width: 180px;
    margin-right: 550px;
}

.gridheader > a:nth-child(1) {
    justify-items: start;
}

.img_accueil {
    display: none;
}

/* Fourmulaire  */
form {
    background-color: #464f4300;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 500px;
    background-image: url("../img/Accueil/decor.png");
    background-size: 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    margin-bottom: 50px;
}

#type_maison_select {
    width: 350px;
    color: white;
    transform: translate(-25px, -20px);
}

#localisation_select {
    width: 350px;
    color: white;
    transform: translate(-25px, -20px);
}

#budget_input {
    width: 300px;
    color: white;
    transform: translate(-25px, -15px);
}

.flexeuros {
    display: flex;
}

.grandform {
    display: flex;
    gap: 30px;
    transform: translate(0px, 130px);
}

.formulaire_border {
    border: 2px solid;
    border-color: white;
    color: white;
    width: 300px;
    margin: 0px;
    height: 10px;
}

.formulaire_border label {
    background-color: #464F43;
    font-weight: initial;
}

.button button {
    position: static;
    background-color: #A0814D;
    /* padding: 32px 150px 32px 150px */
    width: 360px;
    height: 82px;
    border: none;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
}

option {
    background-color: #464F43;
}

/* Le contenu accueil  */

.msg_filtre {
    background-color: #A0814D;
    padding: 20px;
    color: white;
    font-size: 20px;
    height: 30px;
    display: inline-block;
    margin: 0px 0px 0px 50px;
}

.boutonbiens {
    color: white; 
    background: #A0814D;
    padding: 40px 70px 40px 70px;
    display: inline-block;
    margin: auto;
}

.gridcentre {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 150px;
}

body > div.gridcentre > div > a {
    color: white;
}

h2 {
    font-weight: initial;
    font-size: 40px;
}

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

.griddubg > img {
    display: initial;
}

.img_agence2 {
    transform: translate(80px, -30px);
    z-index: 2;
}

.img_agence3 {
    z-index: 2;
}

.img_agence1 {
    width: 450px;
    transform: translate(-290px, -100px);
    z-index: 0;
}

.img_agence {
    display: none;
}

.textPAULINE {
    text-align: justify;
}

/* Nous contacter  */
.footer_contact {
    display: none;
}

.contact_accueil {
    background-color: #464F43;
    color: white;
    display: flex;
    gap: 10px;
    padding: 20px;
    margin-top: 30px;
}

.contact_accueil > p {
    width: 600px;
    text-align: justify;
    margin: auto;
}


.oui {
    background-image: url("../img/Accueil/cadre_contact.png");
    background-position: center;
    display: grid;
    grid-template-columns: 86px 300px;
    height: 366px;
    width: 637px;
    margin: auto;
}

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

.oui > img {
    width: 36px;
    margin-left: 170px;
}

.oui > img:nth-child(1) {
    margin-top: 45px;
}

.oui > p {
    margin: 5px;
    margin-left: 170px;
}

.oui > a {
    margin: 5px;
    margin-left: 170px;
}

body > main > div.contact_accueil > div > a{
    margin-top: 45px;
}

/* Footer  */
footer {
    font-size: 15px;
    background: white;
    padding: 0px;
    margin-top: 10%;
    height: 140px;
    align-items: flex-start;
}

footer > .legal > a > i {
    font-size: 15px;
}

body > footer > div.legal > a:nth-child(1) {
    margin-top: 50px;
}

footer > img {
    width: 200px;
    background: white;
    border-radius: 300px;
    transform: translate(0px, -80px);
}

footer > p {
    margin-top: 35px;
}

html {
    scroll-behavior: smooth;
}

/* Les demeures  */
h1 {
    margin-bottom: 20px;
}

.mason {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.demeures {
    width: 500px;
}

.img_demeures {
    width: 360px;
}

.information_demeures > img {
    width: 30px;
    height: auto;
}

.prix {
    width: 130px;
    justify-content: left;
}

.mcarre {
    width: 30px;
    height: 43px;
}

.img_sdb {
    height: 43px;
}

.img_lit {
    height: 43px;
}

.caracteristique_demeures {
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-left: 50px;
}

.svg_beige_favoris_demeures {
    background: #A0814D;
    border-radius: 100px;
    padding: 10px;
    cursor: pointer;
    transform: translate(110px, -270px);
}

/* Map et pop up  */
.img_map {
    width: 150px;
}

.map_marker_icon {
    width: 20px;
    height: 20px;
    margin: auto;
    margin: 10px 0px 10px 10px;
}

.pop_up_map {
    display: initial;
}

.gridmap {
    display: flex;
    
}

#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div.gridmap > h2 {
    width: 100px;
}

/* page contact  */
body > div > div.contact_align > div > div > img {
    width: 40px;
}

.contact_align {
   display: grid;
   grid-template-columns: 1fr;
   margin: auto;
   background-size: 55%;
}

.grid_contact {
    display: grid;
    grid-template-columns:  auto;
    height: 366px;
    width: 637px;
    margin: auto;
}

.description_contact {
    margin: auto;
    width: 600px;
    text-align: justify;
    margin-bottom: 50px;
}

.grid_contact >div > img {
    width: 46px;
    margin-left: 170px;
    justify-content: end;
}


.grid_contact>div > p {
    margin: 5px;
    margin-left: 170px;
    margin-bottom: 0px;
}

.grid_contact >div> a {
    margin: 5px;
    margin-left: 170px;
}

.icon_contact_align {
    margin: auto;
}

/* caractéristiques demeures  */
.page_caract_icons {
    background-color: #464F43;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: white;
    margin: auto;
    width: 1000px;

}

.flecheretour {
    position: relative;
   
}

.flecheretour > svg {
    position: fixed;
    top: 250px;
    left: 50px;
    background-color: #A0814D;
    padding: 10px;
    border-radius: 100px;
}


.page_caract_icons > div > p{
    color: white;
    font-size: 13px;
    margin: auto;
}

.icon_noir {
    display: none;
}

.icon_blanche {
    display: initial;
    width: 50px;
    margin: auto;
}

.img_demeures {
    margin: auto;
}

.information_demeures {
    margin: auto;
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
}

.cara_mason {
    width: 500px;
}

body > div >div> div.page_caract_icons > div:nth-child(2) > img.icon_blanche {
    width: 50px;
}

body >  div >div > div.page_caract_icons > div:nth-child(3) > img.icon_blanche {
    width: 50px;
}

body > div>div> div.page_caract_icons > div:nth-child(1) > img.icon_blanche {
    width: 50px;
}

body > div>div> div.page_caract_icons > div:nth-child(4) > img.icon_blanche {
    width: 50px;
}

.info_mason {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: auto;
}

.page_caracteristique_svg_beige_favoris_demeures {
    background: #A0814D;
    border-radius: 100px;
    padding: 10px;
    transform: translate(0, 0);
}

.demeures2 {
    margin-top: 50px;
}

/* Les favoris  */
.demeure_favoris {
    background: #464F43;
    padding: 10px 10px 60px 10px;
    width: 480px;
    margin-bottom: 80px;;
}

#favori {
    min-height: 100vh;
    margin: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 630px ;
}

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