:root {
  --primary-color: #140460;
  --secondary-color: #2B463C;
  --black-color: #1B1B1B;
  --white-color: #fefefe;

  --primary-font: 'Sniglet', Arial, sans-serif;
  --secondary-font: 'Poppins', Arial, sans-serif;
  --tertiary-font: 'Roboto', Arial, sans-serif;
}

*, 
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*************COMMUNS*************/
/*éléments communs*/
html {
  scroll-behavior: smooth;
}

h1{
margin: 0.75rem;
text-align: center;
color: var(--primary-color);
font-family: var(--primary-font);
font-size: 3rem;
}

ul {
  list-style: none inside none;
}

p{
  font-family: var(--tertiary-font);
}

.button {
  color: var(--white-color);
  background-color: var(--secondary-color);
  border: none;
  border-radius: 2rem;
  font-family: var(--secondary-font);
  cursor: pointer;
  padding: .5rem 2.5rem;
}

body {
  font-family: var(--secondary-font);
}



/*structure*/ 

.row {
  display: flex;
  flex-direction: row;   
  max-width: 80rem; 
  margin-left: auto;
  margin-right: auto;
}

.around {
  display: flex;
  justify-content: space-around;
}

.space {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.column {
  display: flex; 
  flex-direction: column;
}
.align-around {
  display: flex;
  align-content: space-around;
}

.align-center {
    align-items: center;
}
/*menu*/
.bandeau{
    background-color: var(--primary-color);
}

.header-logo{
 height: 3.5rem;
 width: auto;
 padding-top: .5rem;
}

.bandeau ul{
  display: flex;
  flex-direction: row;
}

.bandeau ul li{
  margin-right: 1.5rem;
}

.bandeau a {
  text-decoration: none;
  color: var(--white-color);
  padding: .5rem 1rem;
  font-family: var(--primary-font);
}

.bandeau a:hover {
  text-decoration: underline 2px solid var(--secondary-color);
}


/*favoris*/
.image-favoris{

}

/*footer*/
footer{
  background-color: var(--primary-color);
  padding: 2.5rem 0rem;

}

#logo-footer{
  width: 20rem;
}

.footer-social{

  color: var(--white-color);
  text-align: center;
}

.footer-social p{
  margin-bottom: 1rem;
 font-family: var(--primary-font);
}
.footer-social a{
  padding: 2rem 1rem;
}

/*************PAGE RECHERCHE FORMULAIRE*************/
.section-recherche {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 0rem;
background: transparent url(images/photo-bandeau.png) center no-repeat;
background-size: cover;
background-position: 60% 10%;
}

.form-search {
  padding: .5rem 1rem;
  margin: 1.5rem 0rem;
  border-radius: 2rem;
  border: none;
  background-color: var(--white-color);
}


.form-legend {
padding-top: 1rem;
text-align: center;
font-family: var(--primary-font);
font-size: 2rem;
color: var(--primary-color);
}

.form-bottom-line {
  padding: 1.5rem;
}

.form-input {
  padding: .5rem 0.75rem;
  margin-left: .5rem;
  border-radius: 2rem;
  border: .5px solid var(--secondary-color); 
  text-align: center;
  background-color: var(--white-color);
}
  
.small {
  width: 5rem;
}
.med {
  width: 13rem;
}
.big {
 width : 15rem;
 padding: 0.75rem;
}

.form-item {
  padding: .5rem 1.5rem;
  font-family: var(--secondary-font);
  text-align: center;
}

.line {
  margin-top: 1rem;
}


/*************ZONE RESULTATS SUR PAGE INDEX et PAGE MES FAVORIS*************/

.resultats-titre{
  margin-left: auto;
  margin-right: auto;
}

.resultats{
  margin: 5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex:80% 0 0 ;
  justify-content: space-around;
}

.conteneur-maison{
  margin: 1rem;
  display: flex;
  justify-content: center;
  flex: 40% 0 0;
  align-items: center;
  padding: 1rem;
  /*border: 1px solid #140460;*/
  border-radius: 2rem;
  background-color: rgb(242, 242, 242);
}

.img-maison{
  border-radius: 2rem;
  max-width: 30vw;
  margin: 1rem;
  margin-right: 2rem;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

.conteneur-infos-maison{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.span-ville{
  font-weight: bolder;
  color: var(--black-color);
}

.span-categorie{
  font-style: italic;
}

.span-surface{
  font-weight: bold;
  font-family: var(--primary-font);
  color: var(--primary-color);
}

.span-prix{
  color: var(--secondary-color);
}

/*************PAGE MES FAVORIS*************/
.column{
  flex-direction: column;
}



/*************PAGE INSCRIPTION & POST-INSCRIPTION*************/

.section-inscription{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 background: transparent url(images/photo-bandeau.png) center no-repeat;
 background-size: cover;
 background-position: 60% 10%;
  padding: 2rem 0rem;
}

/*formulaire*/
form{
  background-color: var(--white-color);
  border-radius: 2rem;
  padding: 2rem 4rem;
  margin: 3.5rem 0rem;
}

fieldset{
  border: none;
  margin-bottom: 1rem;
}

::placeholder{
  color:var(--primary-color);
  font-size: .7rem;
  opacity: .6;
}
.inscription-form-legend{
  text-align: center;
  font-family: var(--primary-font);
  font-size: 2rem;
  color: var(--primary-color);
}

.inscription-form-item{
  padding: .5rem 2rem;
  font-family: var(--secondary-font);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.inscription-form-input{
  border-radius: 2rem;
  border: .5px solid var(--secondary-color);
  padding: .5rem 2rem;
  text-align: center;
}

.mentions-legales{
  padding: 1.5rem 0rem;
  font-style: italic;
  background-color: var(--secondary-color);
}

.mentions-legales p{
color: var(--white-color);
font-family: var(--tertiary-font);
font-size: .7rem;
text-align: center;
}

.compte-existant {
  text-align: center;
  font-family: var(--secondary-font);
  font-size: .6rem;
}

.inscription-effective{
  font-family: var(--secondary-font);
  text-align: center;
  margin: 4rem 0rem 1rem 0rem;
}

.illustration-page-connect{
  width: 20rem;
}

.message-inscription-connexion{
  text-align: center;
  margin-bottom: 3rem;
}

.bouton-deconnexion{
   border-radius: 2rem;
  color: var(--white-color);
  background-color: var(--secondary-color);
  text-decoration: none;
  font-family: var(--secondary-font) ;
  padding: .5rem 2rem;
  margin-bottom: 3rem;
}


/*post-inscription*/

.inscription-erreur{
  text-align: center;
  margin: 1rem 0rem .5rem 0rem;
}

.bienvenue{
  text-align: center;
  margin: 5rem 0rem 2rem 0rem;
}

.bienvenue p{
  font-family: var(--secondary-font);
  margin-bottom: 1.5rem;
}

.bienvenue a {
  font-family: var(--tertiary-font);
  text-decoration: none;
  font-weight: bold;
  color: var(--secondary-color);
}

.illustration-bienvenue{
  width: 20rem;
}

/* Page connect
********************************/

.h2-connect {
  font-family: var(--secondary-font);
  color: var(--white-color);
}

.background-connexion {
  height: 75vh;
}

.white-background {
  background-color: var(--white-color);
  border-radius: 2rem;
  padding: 3rem;
  margin-bottom: 2rem;
}