section{
    margin-top: calc(0.5*var(--margesectiontop));
}
.titre_horizontal_gauche{
    padding-left: 0;
}
.intro{
    display: flex;
    justify-content: center;
}
.texte_intro{
    width: 80%;
    box-shadow: var(--ombre2);
    background-color: var(--gris1);
    padding: 3vw;
}
.container_espaces{
    display: flex;
    flex-direction: column;
}
.item_espace{
    display: flex;
    flex-direction: row-reverse;
    margin: 2vw 0;
}
.item_espace:nth-child(2n+1){
    flex-direction: row;
}
.visuel_espace{
    width: 40%;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
}
.visuel_espace img{
    width: 100%;
}
.texte_espace{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
    padding: 3vw;
}
.nom_espace{
    font-family: var(--typo1);
    color: var(--gris3);
    font-size: calc(30*var(--res));
}
.container_restauration{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.item_restauration{
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
}
.visuel_restauration{
    width: 90%;
    overflow: hidden;
    max-height: 50vh;
    padding: 2vw 0;
}
.visuel_restauration img{
    width: 100%;
}
.texte_restauration{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3vw;
    min-height: 45%;
}
.boutons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2vw;
}
.container_contact{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.texte_contact{
    width: 80%;
    background-color: var(--gris1);
    padding: 3vw;
    box-shadow: var(--ombre2);
    margin: 3vw 0;
}
.texte_contact a{
    color: var(--bleu);
}


  /* --------------------------------media--------------------- */
  @media screen and (max-width:840px){
      header img{
          height: 25vh;
      }
      .texte_intro{
          width: 100%;
      }
      .item_espace{
          width: 100%;
          flex-direction: column;
      }
      .item_espace:nth-child(2n+1){
          flex-direction: column;
      }
      .visuel_espace{
          width: 100%;
      }
      .texte_espace{
          width: 100%;
      }
      .lien{
          align-self: center;
          margin: 0.5vw 0;
      }
      .container_restauration{
          flex-direction: column;
      }
      .item_restauration{
          width: 100%;
          margin: 2vw 0;
      }
      .boutons{
          justify-content: space-around;
      }
      .texte_contact{
          width: 100%;
      }
  }
  @media screen and (max-width:499px){
    .nom_espace{
       font-size:  calc(35*var(--res));
    }
  }