/* Feuille de style pour les sections du site www.moovin-appart.com */
/*--------------------------------------------*/
/*---------------CSS DU block_blue----------------*/

#header
{
  position: relative;  /* pour permettre la position absolute de ses blocs enfants */
  height: 650px; /* hauteur de la section accueil */
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
}

#block_blue
{
  height: 600px; /* hauteur de la section accueil */
  width: 100%;
  background: linear-gradient(0.45turn, rgb(0, 174, 255), rgb(173, 229, 255));
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
  justify-content: center;/* centre les éléments verticalement sur la page */
}

/*-------s'inscrire / se connecter -------*/

#block_blue #connection
{
  position: absolute;
  top: 25px;
  right:50px;
}

#block_blue #connection a
{
  cursor: pointer; /* changer le pointer */
  font-family: 'Open Sans', sans-serif;  /* type de police */
  font-size: small; /* taille de police */
  font-weight:600; /* taille de police */
  color:white;
  margin: 10px;
} 

/*-------Ensemble du contenu "Logo + accroche" ET "Shémas des maisons"  -------*/

#block_blue #logo_text_drawings
{
  display:flex;  /* met en place flexbox */
  flex-direction: row;  /* éléments en ligne */
  align-items: center;  /* centre les éléments dans le bloc */
}

/*------- Logo + accroche -------*/

#block_blue #block_logo_text
{
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
}

#block_blue #block_logo_text img
{
  width: 300px; /* largeur du logo  */
  margin-bottom: 10px;
  max-width: 100%; /* pour que les images ne sortent jamais de la page */
}

#block_blue #block_logo_text h1
{
  margin-top: 10px;
  font-weight: normal;  /* pour supprimer la graisse de base de h1  */
}


/*------- Schémas des maisons -------*/

#block_blue #logo_text_drawings #drawings
{
  display: flex;
  flex-direction: row;
  margin-left:100px;
}

#block_blue #logo_text_drawings #drawings .drawing_legend
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#block_blue #logo_text_drawings #drawings .schema_maisons
{
  width: 250px;  
  margin: 0px 50px 0px 50px; /* haut droite bas gauche */
  max-width: 100%; /* pour que les images ne sortent jamais de la page */
  
}

#block_blue #drawings .drawing_legend p
{
  margin-top: 10px;
}

#header .main_cta
{
  bottom: 84px;  /* on doit rajouter les 50px de décallage de la section click_down */
}

/*------ bloc du chevron + Avantages --------*/

#section_click_down
{
  height: 50px; /* hauteur de la section accueil */
  width: 30%;
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
  justify-content: center;/* centre les éléments verticalement sur la page */
}

#section_click_down #click_down
{
  width: 100%;
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
}

#section_click_down #click_down .fa-chevron-down
{
  cursor: pointer; /* changer le pointer */
  font-size: 30px; /* taille du chevron */
  color:#4FC3F7;  /* couleur du chevron*/
}


/*--------------------------------------------*/
/*--------------CSS DE AVANTAGES--------------*/

#avantages
{
  position: relative;  /* pour permettre la position absolute de ses blocs enfants */
  height: 530px;
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
}

#avantages #block_two_images
{
  display:flex;  /* met en place flexbox */
  flex-direction: row;  /* éléments en ligne */
}

#avantages #block_two_images .block_image_and_legend_solo
{
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
  max-width: 400px;
}


#avantages #block_two_images .block_image_and_legend_solo figcaption
{
  text-align:center; /* centre le texte */
  margin-top:10px;
}

#avantages #block_two_images .block_image_and_legend_solo h3
{
  text-align:center;
}

/*------------------------------------------------*/
/*---------------CSS DE WALKTHROUGH---------------*/


#walkthrough
{
  position: relative;  /* pour permettre la position absolute de ses blocs enfants */
  background-color: #4FC3F7;
  height: 400px;
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  align-items: center; /* centre les éléments horitontalement sur la page */
}

#walkthrough h2
{
  margin-top:34px;
  margin-bottom:20px;
}

#walkthrough ul, li
{
  margin: 0px;   /* supprime les marges de base */
  padding: 0px; /* supprimer le padding de base */
}

#walkthrough #block_three_images
{
  display:flex;  /* met en place flexbox */
  flex-direction: row;  /* éléments en ligne */
  justify-content: center; /* centre les éléments horitontalement sur la page */
}

#walkthrough #block_three_images .block_image_and_legend_solo
{
  display:flex;  /* met en place flexbox */
  flex-direction: column-reverse;  /* éléments en colonne */
  align-items: center; /* centre les éléments verticalement dans leur bloc */
  justify-content: flex-end;  /* pour aligner sur la partie haute (comme column reverse) */
  max-width: 25%;
  margin: 0px 20px 0px 20px; /* haut droite bas gauche */
}

#walkthrough #block_three_images .block_image_and_legend_solo img
{
  width: 130px;
}

#walkthrough #block_three_images .block_image_and_legend_solo p
{
  text-align:center; /* centre le texte */
}

#walkthrough a
{
  position: absolute;
  bottom:10px;
  font-family: 'Open Sans', sans-serif;  /* type de police */
}

#walkthrough a:hover
{
text-decoration: underline;
}



/*--------------------------------------------*/
/*---------------CSS DE TEAM------------------*/


#team
{
  background-color: white;
  height: 350px;
  display:flex;  /* met en place flexbox */
  flex-direction: row;  /* éléments en ligne */
  justify-content: center;  /*centre les éléments en horizontal */
  align-items: center; /*centre les éléments en vertical */
}

#team #text_team
{
  display:flex;  /* met en place flexbox */
  flex-direction: column;  /* éléments en colonne */
  width: 30%;
}

#team #text_team h2
{
  margin-bottom: 34px;
}

#team #photos_team
{
  display:flex;  /* met en place flexbox */
  flex-direction: row;  /* éléments en colonne */
  margin-left:30px;
}

#team #photos_team .block_photo_solo
{
  display:flex;  /* met en place flexbox */
  flex-direction: column-reverse;  /* éléments en colonne */
  align-items: center; /* centre les éléments verticalement dans leur bloc */
  margin:auto 15px auto 15px;
}

#team #photos_team .block_photo_solo .name_and_role
{
  text-align:center; /* centre le texte */
  margin-bottom: 10px;
}

#team #photos_team .block_photo_solo img 
{
  width: 180px;
  border-radius: 50%;
}

#team #photos_team .block_photo_solo .remi
{
  transform: rotate(-10deg);
}

#team #photos_team .block_photo_solo .jennifer
{
  transform: rotate(5deg);
}

#team #photos_team .block_photo_solo .mory
{
  transform: rotate(-5deg);
}


/*--------------------------------------------*/
/*---------------CSS DE FOOTER------------------*/