/****************************************************/
/****************** MEDIA QUERIES *******************/
/****************************************************/


/*****************************************************/
/******************* GENERALITÉS *********************/

/*** ELEMENTS COMMUNS ***/

/* Changement à partir d'une certaine taille sur ecran */
    @media screen and (max-width: 1060px) {
      header{margin-bottom: 5vh;}
      body{margin-top: 0;}
    }

/* Tablettes */
    @media (min-width: 768px) and (max-width: 1024px){

      /*** TITRES ***/
      #conteneur h1 {font-size: 80px;}
      h2 {font-size: 90px;
          margin-bottom: 5vh;}
      h3 {font-size: 75px;}
      #conteneur_cgv h2{font-size: 65px;}

      /*** HEADER ***/
      header .titre{height: 20vh;}
      #conteneur header{height: 31vh;}
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){

      /*** TITRES ***/
      #conteneur h1 {font-size: 60px;}
      h2 {font-size: 60px;}
      h3 {font-size: 55px;}
      #conteneur_cgv h2{font-size: 45px;}
      header{
        width: 100%;
        height: 9vh;
      }
    }


/*** MENU ***/

/* Changement à partir d'une certaine taille sur ecran */
    @media screen and (min-width: 1060px) {
      .topnav .icon{display: none;}
    }

    @media screen and (min-width: 1030px) {
      .topnav .icon {display: none;}
      .topnav .active{min-width: 8vw;}
    }

    @media screen and (max-width: 1060px) {
      .topnav{display: none;}
      .topnav a.icon {
        display: block;
        float: right;
      }
      #responsive-menu-button{display:block;}
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){
      .topnav .active{
        width: 20vw;
        padding-left: 10vw;
      }
    }

/*** PIED DE PAGE ***/

/* Changement à partir d'une certaine taille sur ecran */
    @media screen and (max-width: 1200px) {
      footer{
        position: relative;
        width: 100%;
        height: auto;
        bottom: 0;
        padding: 0;
        margin: 0;
        padding-bottom: 3vh;
        margin-top: 5vh;
      }

      footer span{font-size: 10px;}

      .pied_gauche{
        float: none;
        width: 100vw;
        height: 5vh;
        text-align: center;
        margin: 0;
        padding: 0;
        padding-top: 2vh;
      }

      .pied_droit{display: none;}

      .pied_milieu{
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .pied{
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }


/*******************************************************/
/******************* ACCUEIL (Index) *******************/

/* Tablettes */
    @media screen and (max-width: 1024px){
      #conteneur header{
        margin-bottom: 0;
        height: auto;
      }
    }

/* Portables */
    @media screen and (max-width: 768px){
      #slideshow{
        width: 96vw;
        margin: auto;
      }

      #slideshow .container{
        width: 96vw;
        margin: 0 auto;
      }

      #slideshow img{width: 96vw;}
    }

    @media screen and (max-width: 600px){

      #conteneur{height: 72vh;}

      #conteneur header{
        margin-bottom: 7vh;
        height: 32vh;
      }

      #slideshow{
        width: 96vw;
        height: 30vh;
        margin: auto;
      }

      #slideshow .container{
        width: 96vw;
        height: 30vh;
        margin: 0 auto;
      }

      #slideshow img{
        width: 96vw;
        height: 30vh;
      }
    }


/******************************************************/
/***************** CHAMBRES ET SUITES *****************/

/* Tablettes */
    @media screen and (max-width: 1024px){
      .corps_chambre{
        width: 90vw;
        margin: 0 auto;
      }

      #conteneur_chambre .contenu{
        display: flex;
        flex-direction: column;
      }

      .corps_chambre .text .un{display: flex;}

      .corps_chambre img{
        width: 90vw;
        height: auto;
      }      

      .corps_chambre section{
        padding-bottom: 5vh;
      }

      .corps_chambre .text{
        width: 90vw;
        margin: 0 auto;
        height: auto;
      }

      .button_reserv{font-size: 2vw;}

      #conteneur_chambre h4{
        font-size: 15px;
        padding-bottom: 0;
      }
    }

/* Portables */
    @media screen and (max-width: 768px){
      #conteneur_chambre header{
        margin-bottom: 13vh;
      }

      .corps_chambre .text{
        width: 90vw;
        height: auto;
      }

      .contenu .un{font-size: 4vw;}

      #conteneur_chambre span{
        font-size: 20px;
        color: #7e4a35;
      }

      .button_reserv{font-size: 2.5vw;}
    }

    @media screen and (max-width: 500px){
      .button_reserv{font-size: 3.5vw;}
    }


/*******************************************************/
/********************* RESTAURANT *********************/

/* Tablettes et Portables */
    @media screen and (max-width: 1024px){
      #corps_restaurant .zero{
        display: flex;
        width: 90vw;
        height: auto;
        flex-direction: column;
      }

      #corps_restaurant img{
        display: flex;
        width: 60vw;
        margin: auto;
        height: auto;
        justify-content: center;
        margin-bottom: 2vh;
      }

      #corps_restaurant .aretirer{display: none;}

      #conteneur_restaurant .specialite{font-size: 45px;}
    }

    @media (min-width: 200px) and (max-width: 768px){
      #corps_restaurant{margin-top: 0;}

      #conteneur_restaurant .titre{display: none;}

      #conteneur_restaurant header{
        padding: 0;
        margin: 0;
      }

      #corps_restaurant h3{font-size: 80px;}
    }


/*******************************************************/
/************************* SPA *************************/

/* Tablettes et Portables */
    @media screen and (max-width: 1024px){
      #conteneur_spa .titre{
        padding-top: 0;
        padding-bottom: 0;
      }

      #conteneur_spa header p{padding-top: 0;}

      #conteneur_spa .text{
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
      }

      #conteneur_spa header{height: auto;}

      .massagescorps{
        display: flex;
        flex-direction: column;
      }

      #conteneur_spa .img, #conteneur_spa .text{
        width: 90vw;
        height: auto;
        text-align: center;
        display: flex;
        display: block;
      }
    }


/*******************************************************/
/********************* RESERVATION *********************/

/* Tablettes */
    @media (min-width: 768px) and (max-width: 1024px){
      #corps_reservation .formulaire{
        margin-top: 5vh;
        margin-bottom: 14vh;
      }

      #conteneur_reservation{
        width: 100%;
        height: auto;
      }
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){
      #corps_reservation .formulaire{
        width: auto;
        height: auto;
        padding-left: 2vh;
        margin-bottom: 2vh;
      }

      #cadre_reservation{width: 100vw;}
    }


/******************************************************/
/************************ AVIS ************************/

/* Tablettes et Portables */
    @media screen and (max-width: 1024px){
      #corps_avis{
        padding-top: 0;
        width: 100vw;
      }

      #section_avis p{width: 60vw;}

      .boutonduform{
        display: flex;
        display: block;
        margin: 0 auto;
      }

      #corps_avis form{
        width: 60vw;
        margin: 0 auto;
        justify-content: center;
      }
    }

    @media screen and (max-width: 768px){
      #corps_avis form{width: 80vw;}
    }


/*******************************************************/
/********************* ACTUALITES *********************/

/* Tablettes */
    @media (min-width: 768px) and (max-width: 1024px){
      #corps_actu{
        width: 90vw;
        margin-top: 0;
      }

      .actucorps{display: flex;}

      #corps_actu img{width: 45vw;}

      #corps_actu .text{
        width: 45vw;
        padding: 2vh;
        padding-top: 0;
      }

      .actu{width: 90vw;}
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){
      #corps_actu{
        width: 100vw;
        margin: 0;
      }

      .actu{
        width: 100vw;
        height: auto;
      }

      #corps_actu img{
        width: 100%;
        display: flex;
        justify-content: center;
      }

      #corps_actu .text{
        text-align: center;
        padding-top: 2vh;
      }
    }


/*******************************************************/
/************************ HOTEL ************************/

/* Tablettes et Portables */
    @media screen and (max-width: 1024px){
      #corps_hotel{
        width: 90vw;
        height: auto;
      }

      #elementpremier{
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        right: 0;
      }

      #maps iframe{
        width: 80vw;
        height: auto;
        margin: auto;
        margin-right: 0;
      }

      #nous_connaitre{width: 80vw;}

      #evenement{
        display: flex;
        flex-direction: column;
      }

      #evenement iframe{
        width: 90vw;
        height: auto;
        margin: auto;
      }

      #evenement2{margin-left: 0;}

      #presse{
        display: flex;
        flex-direction: column;
      }

      #presse .journal{width: 25vw;}

      .guillemet{width: 4vw;}

      #presse div .extrait{font-size: 3vw;}
    }

    /* Portables */
    @media screen and (max-width: 768px){
      #presse .extrait{font-size: 5vw;}
      #nous_connaitre strong{font-size: 10vw;}
    }


/******************************************************/
/*************** CGV / MENTIONS LEGALES **************/

    @media screen and (max-width: 1024px){
      #conteneur_cgv .serapation{
        margin-top: 2vh;
        margin-bottom: 2vh;
      }
    }

/* Tablettes */
    @media (min-width: 768px) and (max-width: 1024px){
      #mentions{margin-top: 0;}
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){
      #mentions{margin-top: 0vh;}

      #mentions h3{
        margin-top: 5vh;
        font-size: 80px;
      }

      #conteneur_cgv .titre{display: none;}

      #conteneur_cgv header{
        margin-bottom: 0;
        height: auto;
      }
    }


/*******************************************************/
/*************** CONTACT et RECRUTEMENT **************/

/* Tablettes et Portables */
    @media screen and (max-width: 1024px){
      .corps_contact .intro{padding-top: 0;}
      .corps_contact #sujet{width: 15vw;}
    }

/* Portables */
    @media (min-width: 200px) and (max-width: 768px){
      .corps_contact .formulaire{width: 80vw;}
      .corps_contact .gauche{width: 40vw;}
      .corps_contact .droite{width: 40vw;}
      .corps_contact #sujet{width: 40vw;}
    }


/*******************************************************/
/******************** PLAN DU SITE ********************/

/* Tablettes et Portables */
    @media (min-width: 768px) and (max-width: 1024px){
      #corps_plan{padding-top: 0;}
    }