* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
:root{
    --bleuFonce : #124076;
    --bleuClair : #DDF2FF;
    --orangeFonce: #eb8546;
    --orangeClair : #f4b691;
    --rouge: #eb4242;
    --vert: #04bc00;
    --anthracite: #303030;
    --gris: #d9d9d9;
    --degradeOrange: linear-gradient(to bottom right, #f4b691, #eb8546);
    --white: #ffffff;
    --black: #000000;
    --box-shadow: #00000025;
}
.black-font{
    color: var(--anthracite);
}
@font-face {
    font-family: 'Open sans';
    src: url(/assets/fonts/OpenSans-VariableFont_wdth\,wght.ttf);
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
/**** CLASSES FONCTIONNELLES ****/
.cont1200{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.cont1400{
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.flexwrap{
    display: flex;
    flex-wrap: wrap;
}
.flexcolumn{
    flex-direction: column;
}
.spacebetween{
    justify-content: space-between;
}
.spacearound{
    justify-content: space-around;
}
.spaceevenly{
    justify-content: space-evenly;
}
.juststart{
    justify-content: start;
}
.justend{
    justify-content: end;
}
.justcenter{
    justify-content: center;
}
.align-center{
    align-items: center;
}
.align-start{
    align-items: start;
}
.align-end{
    align-items: end;
}
.textcenter{
    text-align: center;
}
.textend{
    text-align: end;
}
.responsive-img{
    width: 100%;
    height: auto;
    display: block;
}
.img-bien{
    object-fit: cover;
    object-position: center;
    height: 100%;
}
.pos-rel{
    position: relative;
}
.pos-abs{
    position: absolute;
}
.pos-fixed{
    position: fixed;
}
.pos-sticky{
    position: sticky;
}
.d-none{
    display: none;
}
.mlra{
    margin-left: auto;
    margin-right: auto;
}
.hfit{
    height: fit-content;
}
.hmin-main{
    min-height: 74vh;
}
.bolder-text{
    font-size: 18px;
    font-weight: 600;
}
.b-radius16{
    border-radius: 16px;
}
.box-shadow{
    box-shadow: 4px 4px 10px 4px var(--box-shadow);
}
/**** WIDTH ****/
.w20{
    width: 20%;
}
.w23{
    width: 23%;
}
.w27{
    width: 27%;
}
.w30{
    width: 30%;
}
.w35{
    width: 35%;
}
.w40{
    width: 40%;
}
.w45{
    width: 45%;
}
.w50{
    width: 50%;
}
.w60{
    width: 60%;
}
.w65{
    width: 65%;
}
.w80{
    width: 80%;
}
.w100{
    width: 100%;
}
.wfit{
    width: fit-content;
}
/**** GAPS ****/
.g8{
    gap: 8px;
}
.g16{
    gap: 16px;
}
.g24{
    gap: 24px;
}
.g32{
    gap: 32px;
}
.g64{
    gap: 64px;
}
/**** MARGINS ****/
.mb16{
    margin-bottom: 16px;
}
.mb64{
    margin-bottom: 64px;
}
/**** PADDINGS ****/
.p16{
    padding: 16px;
}
.p64{
    padding: 64px;
}
/**** TITRES ****/
h2 {
    color: var(--anthracite);
    font-size: 42px;
    font-weight: 600;
}
h3{
    font-size: 32px;
    font-weight: 600;
}
h4{
    font-size: 20px;
    font-weight: 600;
}
/**** LIENS ****/
a{
    color: var(--white);
}
/**** FORMULAIRES ****/
#register-form div{
    margin-bottom: 16px;
}
#registration_form_genre{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
label{
    font-weight: 600;
}
textarea{
    padding: 5px;
}
.personalised-label{
    display:block;
    width: 100%;
    margin-bottom: 16px;
}
.connexion{
    height: 74vh;
    background: var(--degradeOrange);
}
.base-form{
    background-color: var(--bleuClair);
    color: var(--anthracite);
    padding: 20px 72px;
    border-radius: 16px;
}
.personalised-input{
    height: 40px;
    border: solid var(--black) 1px;
    border-radius: 8px;
    box-shadow: none;
    padding-left: 8px;
}
.forgot-password{
    color: var(--bleuFonce);
}
.banner-form{
    width: 100%;
    background-color: transparent;
    color: var(--white);
}
.search-input{
    width:65%;
    height: 40px;
    border: solid var(--black) 1px;
    border-radius: 8px;
    box-shadow: none;
    padding-left: 8px;
}
input[type="radio"]{
    width: fit-content;
}
/**** FORMULAIRE DE CANDIDATURE ****/
.info-selected{
    color: var(--orangeFonce);
}
#candidature_form_typeLogement label{
    font-size: 14px;
    cursor: pointer;
    margin-right: 16px;
}
#candidature_form_typeLogement input{
    cursor: pointer;
    margin-right: 5px;
}
#candidature_form_nombrePiece label{
    cursor: pointer;
    margin-right: 16px;
}
#candidature_form_nombrePiece input{
    cursor: pointer;
    margin-right: 5px;
}
#candidature_form_nombreChambre label{
    cursor: pointer;
    margin-right: 16px;
}
#candidature_form_nombreChambre input{
    cursor: pointer;
    margin-right: 5px;
}
#candidature_form_equipements {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    align-items: center;
}
#candidature_form_equipements input[type="checkbox"] {
    margin-left:auto;
    width: fit-content;
    cursor: pointer;
}
#candidature_form_equipements label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
}
#candidature_form_revenu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    align-items: center;
}
#candidature_form_revenu input[type="radio"] {
    cursor: pointer;
    margin-right: 5px;
    vertical-align: middle;
}
#candidature_form_revenu label {
    font-size: 14px;
    cursor: pointer;
    display: inline;
    margin-bottom: 5px;
}
/**** FORMULAIRE DE MODIF INFOS LOCATAIRE ****/
#registration_form_dateNaissance_day{
    height: 40px;
    border: solid var(--black) 1px;
    border-radius: 8px;
    box-shadow: none;
    padding-left: 8px;
}
#registration_form_dateNaissance_month{
    height: 40px;
    border: solid var(--black) 1px;
    border-radius: 8px;
    box-shadow: none;
    padding-left: 8px;
}
#registration_form_dateNaissance_year{
    height: 40px;
    border: solid var(--black) 1px;
    border-radius: 8px;
    box-shadow: none;
    padding-left: 8px;
}
/**** FORMULAIRE DES BIENS ****/
#bien_form_typeLogement label {
    font-size: 14px;
    cursor: pointer;
    margin-right: 16px;
}
#bien_form_equipements {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    align-items: center;
}
#bien_form_equipements input[type="checkbox"] {
    margin-left:auto;
    width: fit-content;
    cursor: pointer;
}
#bien_form_equipements label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
}
#bien_form_dep label{
    cursor: pointer;
    margin-right: 16px;
}
#bien_form_ges label{
    cursor: pointer;
    margin-right: 16px;
}
/**** CHOIX DES VILLES ****/
.error-ville{
    color: var(--rouge);
}
.propositions-villes{
    border: solid var(--bleuFonce) 1px;
}
.proposition{
    padding: 5px;
    background-color: var(--white);
    color: var(--anthracite);
}
.proposition:hover{
    cursor: pointer;
    background-color: var(--bleuClair);
}
/**** BUTTONS ****/
.prim-button{
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--white);
    background-color: var(--bleuFonce);
    border: none;
    cursor: pointer;
}
.sec-button{
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--white);
    background-color: var(--anthracite);
    border: none;
    cursor: pointer;
}
.supp-button{
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--white);
    background-color: var(--rouge);
    border: none;
    cursor: pointer;
}
/**** HEADER ****/
.navbar {
    width: 100%;
    height: 13vh;
    background-color: var(--bleuFonce);
    /*position: fixed;*/
    padding: 0 20px 0 20px;
}
.navbar .nav-links ul {
    display: flex;
}
.navbar .nav-links ul li {
    margin: 0 25px;
}

header a{
    font-size: 18px;
    font-weight: 600;
}
a:hover {
    color: var(--orangeFonce);
}

/**** BANNIERE ****/

.banner {
    width: 100%;
    height: 87vh;
    background: var(--degradeOrange);
    overflow:hidden;
    margin-bottom: 64px;
}
.banner-img{
    transform: translate(-50%,-50%);
    width: 75%;
    top: 50%;
    left: 10%;
}
.banner-text{
    margin-right: 10vw;
}
.titre {
    font-size: 2.5rem;
}
.titre span {
    color: var(--bleuFonce);
}

/**** APPARTEMENTS ****/

.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
.card-bien:hover{
    cursor: pointer;
    scale: 1.05;
    transition: scale 0.3s linear;
}
.card-bien-img img{
    z-index: -1;
    border-radius: 16px 16px 0 0;
}
.card-tags{
    top: 0;
}
.card-tag{
    background: var(--degradeOrange);
    padding: 8px 16px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 8px;
    width: fit-content;
}
.card-bien-text{
    color: var(--anthracite) !important;
}
.equipement-icon{
    width: 32px;
}
.card-lien{
    color: var(--bleuFonce);
}

/**** PRESENTATION ****/

.presentation {
    background-color: var(--bleuFonce);
    padding: 64px 0;
}
.presentation h2 {
    color: var(--white);
}
.presentation span {
    color: var(--orangeFonce);
}

/**** FOOTER ****/

footer {
    height: 13vh;
}
.navfooter {
    width: 100%;
    background-color: #303030;
    padding: 0 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navfooter .navfooter-links ul {
    display: flex;
}
.navfooter .navfooter-links ul li {
    margin: 0 25px;
}
.navfooter .navfooter-links ul li .active a {
    font-weight: 600;
}

/*VISITEUR RECHERCHE*/
.search-content{
    height: 87vh;
    overflow-y: scroll;
}
.search-label{
    color: var(--anthracite);
}
#leaflet-map{
    height: 74vh;
    position: fixed;
    top: calc(13vh + 64px);
    right: 64px;
}
#leaflet-mini-map{
    height: 350px;
}
/* DASHBOARD LOCATAIRE*/
.nav-lat{
    width: 15%;
    height: 87vh;
    background-color: var(--gris);
    color: var(--anthracite);
    padding: 20px;
}
.nav-lat-img{
    width: 80px;
}
.nav-lat-icon{
    width: 32px;
}
.nav-lat-liens{
    font-size: 18px;
    font-weight: 600;
}
.nav-lat-lien{
    padding-left: 8px;
}
.nav-lat-lien:hover{
    cursor: pointer;
}
.border-active-liens{
    border-left: solid 5px var(--orangeFonce);
}
.onglet{
    padding: 64px;
    width: 85%;
    height: 87vh;
}
.new-candidature{
    background-color: var(--bleuFonce);
    padding: 32px;
}
.new-candidaure-add-button{
    width: 12%;
}
.candidature-card{
    padding: 32px;
}
.candidature-equipement{
    width: 24px;
}
.infos-perso{
    color: var(--anthracite);
}
.form-modif-infos{
    padding: 64px;
    color: var(--anthracite);
}
.devenir-proprio-content{
    height: 74vh;
}
.devenir-proprio-card{
    background-color: var(--bleuFonce);
    padding: 32px;
}
.devenir-proprio-img,
.rester-locataire-img{
    width: 50%;
}
.rester-locataire-card{
    background-color: var(--rouge);
    padding: 32px;
}
/*ADMIN DASHBOARD*/
.dashboard-admin{
    height: 74vh;
}
.admin-feature{
    background-color: var(--bleuFonce);
}
.admin-feature:hover{
    scale: 1.05;
    transition: scale 0.3s linear;
}
.admin-dashboard-icon{
    width: 48px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid black;
}
th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid black;
    color: var(--anthracite);
}
th {
    background-color: var(--anthracite);
    color: var(--white);
    font-weight: bold;
}
tr:nth-child(odd) {
    background-color: var(--white);
}
tr:nth-child(even) {
    background-color: var(--bleuClair);
}
.grey-tag{
    width: 80px;
    height: 40px;
    background-color: var(--gris);
}
.grey-tag-img{
    width: 32px;
}
.grey-tag-top{
    top: 0;
    border-radius: 16px 0 16px 0;
}
.grey-tag-bottom{
    bottom: 0;
    right: 0;
    border-radius: 16px 0 0 0;
    color: var(--anthracite);
    font-weight: 600;
}
.energie-icon{
    width: 32px;
}
.classe-energetique{
    font-weight: 700;
    color: var(--anthracite);
}
.bail-card{
    color: var(--anthracite);
}
.bail-card-img{
    background-color: var(--gris);
    padding: 32px;
    border-radius: 50%;
}
.dates-bail{
    font-size: 18px;
    font-weight: 600;
}
.infos-utilisateur{
    color: var(--anthracite);
}
.admin-cards-container h3{
    color: var(--anthracite);
}
.admin-supp-container{
    height: 74vh;
}
/**** PROPRIETAIRE DASHBOARD ****/
.bloc-candidature{
    background-color: var(--bleuClair);
}
.bien-candidature{
    background-color: var(--white);
}
.bien-candidature img{
    border-radius: 16px 0 0 16px
}
.candidat-card{
    background-color: var(--white);
}
.candidat-avatar{
    width: 26px;
}
.barre-indice{
    height: 10px;
}
.green-indice .barre-indice{
    background-color: var(--vert);
}
.green-indice .text-indice{
    color: var(--vert);
}
.orange-indice .barre-indice{
    background-color: var(--orangeFonce);
}
.orange-indice .text-indice{
    color: var(--orangeFonce);
}
.red-indice .barre-indice{
    background-color: var(--rouge);
}
.red-indice .text-indice{
    color: var(--rouge);
}
.candidature-separateur{
    height: 10px;
    background: var(--degradeOrange);
    border-radius: 5px;
}
.liste-revenus{
    padding: 42px;
}
.revenu-total{
    padding: 8px 16px;
    background: var(--degradeOrange);
    border-radius: 8px;
    color: var(--white);
}
.bail-detail-locataire,
.detail-periode-bail{
    color: var(--anthracite);
}
.bien-img-container{
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background: var(--degradeOrange);
}
.image-bien-1 { grid-area: 1 / 1 / 3 / 3; }
.image-bien-2 { grid-area: 1 / 3 / 2 / 4; }
.image-bien-3 { grid-area: 1 / 4 / 2 / 5; }
.image-bien-4 { grid-area: 2 / 3 / 3 / 4; }
.image-bien-5 { grid-area: 2 / 4 / 3 / 5; }
.bien-left-infos,
.bien-right-infos{
    color: var(--anthracite);
}
.leaflet-mini-map{
    height: 300px;
}
.detail-caution{
    font-size: 20px;
    font-weight: 600;
}

/**** Message de confirmation symfony ****/
.flash-notice{
    font-size: 24px;
    font-weight: bold;
    width:fit-content;
    background-color: var(--vert);
    padding: 32px;
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.slide-out-left {
	-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
	        animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}
@-webkit-keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }

/**** AFFICHAGE DES ERREURS SERVEURS ****/
.error-container{
    height: 74vh;
}

/******* RESET PASWORD *******/
.reset-password-request{
    background-color: var(--bleuClair);
    color: var(--anthracite);
    border-radius: 16px;
    padding: 20px 72px;
}
#retryEmail{
    color: var(--orangeFonce) !important;
}
#retryEmail:visited{
    color: var(--orangeFonce) !important;
}




#bien_form_spImages .form-group {
    width:100px;
    height:100px;
    background: var(--gris);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-right:16px; /* si besoin */
    margin-bottom:16px; /* si besoin */
}
#bien_form_spImages input[type=file].image-input {
    position:absolute;
    top:0; 
    left:0; 
    opacity:0;
    cursor:pointer;
}
#image-previews {
    display:flex;
    gap:16px;
    flex-wrap: wrap;
}
#image-previews .image-slot {
    width:100px; height:100px; background:var(--gris);
    border-radius:8px;
    position:relative;
    overflow:hidden;
}
#image-previews img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.remove-image {
    position:absolute;
    top:0; right:0;
    background: var(--rouge);
    color: var(--white);
    border:none;
    border-radius:50%;
    width:24px;
    height:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    line-height:1;
}