/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. polices personnalisées ...........................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

@font-face {
  font-family: 'louis_george_caferegular';
  src: url('polices/louis_george_cafe-webfont.eot');
  src: url('polices/louis_george_cafe-webfont.eot?#iefix') format('embedded-opentype'),
       url('polices/louis_george_cafe-webfont.woff2') format('woff2'),
       url('polices/louis_george_cafe-webfont.woff') format('woff'),
       url('polices/louis_george_cafe-webfont.ttf') format('truetype'),
       url('polices/louis_george_cafe-webfont.svg#louis_george_caferegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cagliostroregular';
  src: url('polices/cagliostro-regular-webfont.eot');
  src: url('polices/cagliostro-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('polices/cagliostro-regular-webfont.woff2') format('woff2'),
       url('polices/cagliostro-regular-webfont.woff') format('woff'),
       url('polices/cagliostro-regular-webfont.ttf') format('truetype'),
       url('polices/cagliostro-regular-webfont.svg#cagliostroregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. éléments principaux ..............................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#bloc_page
{
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 1024px) and (max-width: 1280px)
{
    #bloc_page
  {
    width: 1024px;
  }
}
@media all and (max-width: 1024px)
{
    #bloc_page
  {
    width: 100%;
  }
}

body
{ 
  animation: fadeInAnimation ease 2s; 
  animation-fill-mode: forwards; 
  animation-iteration-count: 1; 
}

@keyframes fadeInAnimation
{ 
  0% { 
  opacity: 0; 
  } 
  100% { 
  opacity: 1; 
  } 
}

body
{
  background-color: #F2F0E6;
  font-family: 'louis_george_caferegular','Trebuchet MS', Arial, sans-serif;
  font-size: 1.1em;
  letter-spacing: normal;
  word-spacing: normal;
  color: #282F38;
}

h1, h2, h3, nav a, header p, .bouton_nav, .bouton_nav_long, #boutonhautpage, #contenubaspage, #banniere_titre, #menumobile, #formulaire
{
  	font-family: 'cagliostroregular','Trebuchet MS', Arial, sans-serif;
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. entête + menu navigation .........................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#bloc_entete, #bloc_pied
{
  width: 100%;
}
#menu_nav, #logo, #contenubaspage
{
  margin: auto;
  width: 1280px;
}
@media all and (min-width: 1024px) and (max-width: 1280px)
{
  #menu_nav, #logo, #contenubaspage
  {
    width: 1024px;
  }
}

header
{
  background-color: #282F38;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  margin-top: -5px;
}
#logo
{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 45px;
  letter-spacing: 3px;
  word-spacing: 3px;
  margin-top: -15px;
}
@media all and (max-width: 1024px)
{
  #logo
  {
    margin-left: -30px;
  }
}
#logo img
{
  padding-right: 10px;
}
header p
{
  font-size: 1.4em;
  color: #EBEBEB;
  margin-left: 5px;
}
@media all and (max-width: 400px)
{
  header p
  {
    font-size: 1.1em;
  }
}
header p strong
{
  font-weight: normal;
}
nav ul
{
  display: flex;
  justify-content: space-between;
  margin-top: -3px;
  margin-bottom: 6px;
}
nav li
{
  margin-right: 25px;
}
nav a
{
  font-size: 1em;
  color: #EBEBEB;
  padding-bottom: 3px;
  text-decoration: none;
}
nav a:hover
{
  color: #00A1B3;
  border-bottom: 1px solid #00A1B3;
}
#logo a
{
  text-decoration: none;
}
.page_active, .sidebar .page_active
{
  color: #00A1B3;
}

#menumobile
{
  display: none;
}

/*//////////////// menu mobile ///////////////////////*/
@media all and (max-width: 1024px)
{
  #menu_nav
  {
    display: none;
  }
  #menumobile
  {
    display: flex;
    margin-top: 10px;
  }
  header
  {
    display: flex;
    flex-direction: row;
  }

  /* Menu button - starts */
  #checkbox               /* cache la checkbox, remplacée par l'icône menu */
  {
    display: none;
  }
  .btn
  {
    display: block;
    background-color: #282F38;
    color: #EBEBEB;
    width: 50px;
    height: 50px;
    line-height: 55px;
    padding: 6px 10px;
    cursor: pointer;
    transition: width .3s ease-in-out;
  }
  /* Menu button - ends */

  /* Sidebar - starts */
  .sidebar
  {
    background-color: #282F38;
    position: fixed;
    top: 90px;
    width: 250px;
    height: 100%;
    z-index: 1111;
    transition: transform .3s ease-in-out;
    transform: translateX(250px);
    }
  .sidebar ul
  {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .sidebar ul a
  {
    position: relative;
    text-decoration: none;
    display: block;
    background-color: transparent;
    color: #BAB5BD;
    padding: 15px 20px;
    font-size: 16px;
  }
  .sidebar ul a:hover            /*fond foncé en survol*/
  {
    background-color: #161920;
  }
  .sidebar ul a:hover::before     /*liseret bleu en survol*/
  {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: #00A1B3;
    width: 4px;
    height: 100%;
  }
  /* Sidebar - ends */

  /* Effet d'apparition du menu */
  #checkbox:checked ~ .sidebar
  {
    transform: translateX(-180px);
    width: 250px;
  }
  /* Effet d'apparition du menu - fin */
}

#retourhautpage
{
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 3em;
  height: 3em;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 100%;
  background-color: #282F38;
  opacity: 0.5;
  z-index: 3;
  color: #EBEBEB;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. pied de page .....................................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

footer
{
  background-color: #282F38;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}
footer p, footer .pied a
{
  font-size: 1em;
  font-weight: lighter;
  color: #EBEBEB;
  text-decoration: none;
}
footer .pied a:hover
{
  color: #00A1B3;
  /*font-size: 1em;
  font-weight: lighter;
  color: #EBEBEB;*/
}
#boutonhautpage
{
  font-size: 1em;
  margin: auto;
  margin-bottom: 5px;
  color: #EBEBEB;
  border-radius: 10px;
  border: 1px solid #EBEBEB;
  text-decoration: none;
  padding: 7px 10px 7px 10px;
}
#boutonhautpage:hover
{
  color: #00A1B3; 
}
#contenubaspage
{
  letter-spacing: initial;
  word-spacing: initial;
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.reseaux 
  {
    display: flex;
    justify-content: space-around;
  }  
.reseaux img
  {
    padding-top: 10px;
    width: 60%;
  }

@media all and (min-width: 535px) and (max-width: 1024px)
{
  #contenubaspage
  {
    width: 100%;
    flex-direction: column;
  }
  #boutonhautpage
  {
  margin-bottom: 5px;
  }
  .pied
  {
  	display: flex;
  	margin: auto;
  }
}
@media all and (max-width: 535px)
{
  #contenubaspage
  {
    width: 100%;
    flex-direction: column;
    text-align: center;
    color: #282F38;
  }
    .pied
  {
  	display: flex;
  	margin: auto;
  }
}
/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. corps commun .....................................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

h1, h2
{
	font-weight: bold;
	letter-spacing: 5px;
	word-spacing: 5px;
	color: #282F38;
	text-align: center;
}

h1
{
	font-size: 1.7em;
}
@media all and (max-width: 535px)
{
	h1
	{
		font-size: 1.3em;
	}
}

h2
{
  font-size: 1.5em;
}

h3
{
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: 3px;
  word-spacing: 3px;
  color: #282F38;
  text-align: center;
}

#colonne2 h3
{
  font-size: 1.5em;
  letter-spacing: 5px;
  word-spacing: 5px;
}

.titreencadrepage
{
	width: 70%;
	display: flex;
	margin: auto;
	justify-content: center;
	border: 2px #282F38 solid;
	padding: 5px;
}
@media all and (max-width: 1024px)
{
  .titreencadrepage
  {
    width: 100%;
    margin: auto;
    border: none;
  }
}
.titreencadrepage h1
{
	margin: 0;
}

p
{
  text-align: justify;
  white-space: pre-line;
  line-height: 1.5em;
}

li
{
  line-height: 1.5em;
}

.italique
{
  font-style: italic;
}

.gras
{
  font-weight: bold;
}

#centrer
{
  text-align: center;
}

.souligner
{
  text-decoration: underline;
}

.centpourcent
{
  width: 100%;
}
.quatrevingtdixpourcent
{
  width: 90%;
}
.exp  /* Pour gérer les exposants avec une police standard*/
{
  font-family: 'Trebuchet MS', Arial, sans-serif;
}

.bouton_nav
{
  border-radius: 10px;
  box-shadow: 5px 5px 5px #282F38;
  background-color: #282F38;
  width:120px;
  margin: auto;
  color: #EBEBEB;
  text-decoration: none;
  padding: 7px 10px 7px 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}

.bouton_nav:hover
{
  color: #00A1B3;
}

.bouton_nav_long
{
  border-radius: 10px;
  box-shadow: 5px 5px 5px #282F38;
  background-color: #282F38;
  width:200px;
  margin: auto;
  margin-bottom: 10px;
  color: #EBEBEB;
  text-decoration: none;
  padding: 7px 10px 7px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bouton_nav_long:hover
{
  color: #00A1B3;
}

/* ................... popup media .............*/
.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}
.bouton {
  text-decoration: none;
  font-size: 0.8em;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 1.5em;
  background-color: #EBEBEB;
  color: #00A1B3;
  padding: 1em 1em 0em 1em;
  font-weight: bold;
  box-shadow: 5px 5px 5px #282F38;
}
.bouton p
{
  text-align: center;
}
 .openpopup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: .64s ease-in-out;
}
.popup-inner
{
  position: relative;
  bottom: -100vw;
  right: -100vh;
  display: flex;
  align-items: center;
  transform: rotate(32deg);
  transition: .64s ease-in-out;
}
.mediapopup
{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mediapopup video, .mediapopup img
{
  margin: auto;
  width: 90%;
  height: 90%;
}

.openpopup:target
{
  visibility: visible;
  opacity: 1;
}
.openpopup:target .popup-inner
{
  bottom: 0;
  right: 0;
  transform: rotate(0);
}
.closepopup
{
  position: absolute;
  right: 5%;
  top: 50%;
  width: 3em;
  height: 3em;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 100%;
  background-color: #00A1B3;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
/*....................fin  popup media .........*/

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page accueil - index .............................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#banniere_image
{
    position:relative;
    z-index: 1;
}

#banniere_titre
{
    width: 50%;
    height: 20%;
    position: absolute;
    left: 25%;
    top: 30%;
    z-index: 2;
    font-size: 3.5em;
    letter-spacing: 7px;
    word-spacing: 10px;
    line-height: 60px;
    background-color: #EBEBEB;
    opacity: 0.9;
    color: #282F38;
    text-align: center;
    padding-top: 40px;
}

@media all and (min-width: 1024px) and (max-width: 1280px)
{
  #banniere_titre
  {
    width: 55%;
    height: 25%;
    font-size: 3em;
    padding-top: 40px;
    top: 25%;
  }
}

aside
{
  width: 45%;
  text-align: justify;
}
@media all and (max-width: 1024px)
{
  aside
  {
    width: 100%
  }
  #banniere_titre
  {
    display: none;
  }
}

#colonne2
{
  display: flex;
  justify-content: space-between;
}
@media all and (max-width: 1024px)
{
  #colonne2
  {
    flex-direction: column;
  }
}

#colonne2 aside h2   /*titre 2 encadré*/
{
  font-weight: bold;
  font-size: 1.7em;
  border: 2px #282F38 solid;
  padding: 5px;
  margin-right: 90px;
  margin-left: 90px;
}

#colonne2 aside h3
{
  font-weight: bold;
}

@media all and (max-width: 1024px)
{
  #colonne2 aside h2
  {
    width: 100%;
    margin: auto;
	border: none;
  }
}
@media all and (max-width: 535px)
{
   #colonne2 aside h2, #colonne2 aside h3
  {
  	font-size: 1.3em;
  }
}

#imagerondepanneau
{
  background: url('images/201-65-VALNEA-panneau.png') no-repeat;
  border-radius:100px;
  width:200px;
  height:200px;
  margin: auto;
  margin-bottom: 10px;
  border: 2px #282F38 solid;
}

#imagerondestation
{
  background: url('images/stationimronde.jpg') no-repeat;
  border-radius:100px;
  width:200px;
  height:200px;
  margin: auto;
  margin-bottom: 10px;
  border: 2px #282F38 solid;
}


#bonne_adresse
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
#img_bonne_adresse
{
  max-width: 20%;
  max-height: 20%;
}
@media all and (max-width: 535px)
{
  #img_bonne_adresse
  {
    max-width: 50%;
    max-height: 50%;
  }
}

#logos_accueil
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
#logos_accueil img
{
  width: 50%;
  margin-left: 20px;
  margin-right: 20px;
}
@media all and (max-width: 1024px)
{
  #logos_accueil
  {
  flex-wrap: wrap;
  }
}
/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page 1 - descriptif appartement ..................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#banniere_appart
{
  display: flex;
  background-color: #282F38;
  position: relative;
}

#banniere_appart_texte
{
  margin: auto;
  padding-left: 10px;
  padding-right: 30px;
  color: #EBEBEB;
}

#banniere_appart_texte h1
{
  font-weight: bold;
  font-size: 3em;
  letter-spacing: 5px;
  word-spacing: 5px;
  margin: auto;
  color: #EBEBEB;
  padding-bottom: 10px;
}

#banniere_appart_texte h2
{
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: 5px;
  word-spacing: 5px;
  margin: auto;
  color: #EBEBEB;
}

@media all and (max-width: 535px)
{
	#banniere_appart_texte h1, #banniere_appart_texte h2
	{
		font-size: 1.3em;
	}
}
/* Visionneuse photo ////////////////////////////*/
#visionneuse
{
  width: 900px;
  height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#visionneuse #flechegauche
{
  position: absolute;
  top: 47%;
  left: 25px;
}
#visionneuse #flechedroite
{
  position: absolute;
  top: 47%;
  right: 25px;
}
#img_diapo
{
  max-width: 860px;
  max-height: 860px;
}
@media all and (min-width: 1024px) and (max-width: 1280px)
{
  #visionneuse
  {
    width: 700px;
    height: 700px;
  }
  #img_diapo
  {
    max-width: 660px;
    max-height: 660px;
  }
}
@media all and (max-width: 1024px)
{
  #banniere_appart
  {
    flex-direction: column;
  }
  #visionneuse
  {
    width: 100%;
    height: 100%;
  }
  #img_diapo
  {
    max-width: 100%;
    max-height: 100%;
  }
  #visionneuse #flechegauche
  {
    top: 30vw;
    left: 5px;
  }
  #visionneuse #flechedroite
  {
    top: 30vw;
    right: 5px;
  }
}
/* Fin visionneuse photo ////////////////////////////*/
.cybevasion-widgetAvisGen-65097_3
{
    text-align:center;
    margin-bottom: 10px;
}

#logos_resume
{
  display: flex;
  width: 99.5%;
  border: 3px #282F38 solid;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.logo_resume
{
  display: flex;
  flex-direction: column;

}

.logo_resume h3
{
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: center;
  line-height: 0px;
}

.logo_resume h3 + p
{
  text-align: center;
  line-height: 0px;
}

.logo_resume img {
  width: 60px;
  height: 60px;
  margin: auto;
  margin-bottom: 5px;
}

#plan
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#plan img
{
  width: 40%;
  margin: auto;
}
@media all and (min-width: 1024px) and (max-width: 1280px)
{
  #plan img
  {
    width: 50%;
    margin: auto;
  }
 }
@media all and (min-width: 410px) and (max-width: 1024px)
{
  #plan
  {
    margin-top: -5px;
  }
  #plan img
  {
    width: 60%;
    margin: auto;
  }
}
@media all and (max-width: 410px)
{
  #plan
  {
    margin-top: -5px;
  }
  #plan img
  {
    width: 100%;
    margin: auto;
  }
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page 2 - descriptif station ......................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#banniere_station
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
@media all and (max-width: 1024px)
{
  #banniere_station
  {
    flex-direction: column;
    margin-top: 10px;
  }
}
#banniere_station_texte
{
  text-align: justify;
  padding: 0px 20px 0px 25px;
}
@media all and (max-width: 1024px)
{
  #banniere_station_texte
  {
    margin-top: 10px;
  }
}
#banniere_station_texte h1
{
  font-size: 2.2em;
  letter-spacing: 5px;
  word-spacing: 5px;
  margin: auto;
  padding-bottom: 10px;
}
#banniere_station_texte h2
{
  font-weight: bold;
}
@media all and (max-width: 535px)
{
  #banniere_station_texte h1, #banniere_station_texte h2
  {
  	font-size: 1.3em;
  }
}

#colonne3
{
  display: flex;
  text-align: justify;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: -0.5%;
  margin-left: -0.5%;
}
#colonne3 article
{
  width: 32.3%;
  padding: 15px 15px 15px 15px;
  border: 3px solid #282F38;
  border-radius: 40px;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
#colonne3 h2
{
  font-weight: bold;
}
#colonne3 li
{
  margin-left: -35px;
  list-style-position: inside;
  line-height: 1.5em;
}

.images_station img
{
  width: 100%;
  border: 2px solid #282F38;
  border-radius: 40px;
  box-shadow: 0px 10px 10px #282F38;
  margin-bottom: 5px;
}

@media all and (max-width: 1024px)
{
  #colonne3
  {
    flex-direction: column;
    margin-right: 3%;
    margin-left: 0%;
  }
  #colonne3 article
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 97%;
    padding: 5px 8px 5px 5px;
    margin: 0px 0px 5px 0px;
  }
  .images_station img
  {
    width: 60%;
    margin-left: 20%;
  }
  #colonne3 h2
  {
  	font-size: 1.3em;
  }
}

.videopopup img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page 3 - tarifs et dispo .........................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#negatif
{
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  background-color: #282F38;
  color: #EBEBEB;
  text-align: center;
  padding: 20px 20px 0px 20px;
}
@media all and (max-width: 458px)
{
  #negatif
  {
    margin-top: 35px;
  }
}

#negatif h2
{
  color: #EBEBEB;
  margin: 0;
  padding: 0;
}
@media all and (max-width: 535px)
{
  .cadrenon h2
  {
  	font-size: 1.3em;
  }
}
.cadrenon h2
{
  font-weight: bold;
  border: none;
}
@media all and (max-width: 535px)
{
  .cadrenon h2, #negatif h2
  {
  	font-size: 1.3em;
  }
}

#negatif p 
{
  margin-bottom: 0;
  padding-bottom: 0;
}

#cybevasion iframe
{
  border : 2px #282F38 solid;
  margin-bottom: 10px;
}

#widgetopenpro
{
  position: relative;
  border : 2px #282F38 solid;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#widgetopenpro  .bouton_nav_long
{
  margin-top: 10px;
}
#cache
{
  background-color: #F2F0E6;
  width:250px;
  height: 115px;
  position: absolute;
  right: 10px;
  top: 102px;
}
#redim
{
	display: none;
}
@media all and (min-width: 540px) and (max-width: 1024px)
{
	#cache
	{
	width: 25%;
	right: 3px;
	}
}
@media all and (min-width: 532px) and (max-width: 540px)
{
	#widget
	{
	display: none;
	}
	#redim
	{
	display: inline;
	margin: auto;
	color: red;
	}
	#redim p
	{
		text-align: center;
	}
	#cache
	{
		display: none;
	}
}

@media all and (max-width: 532px)
{
  #cache
  {
    right: 0px;
    width: 40%;
    height: 135px;
    top: 300px;
    z-index: 1;
  }
  #widgetopenpro
  {
    border : none;
  }
    #widgetopenpro .bouton_nav_long
  {
    position: relative;
    z-index: 2;
  }
  #bloc_pied
  {
  	position: relative;
	  z-index: 2;
  }
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page 4 - contact et réservation ..................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

.alert_error
{
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: #E36F68;
}
.alert_success
{
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: #ADCC85;
}
form
{
  font-size: 1em;
  padding-bottom: 10px;
}
#formulaire
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: 250px;
}
legend
{
  font-size: 1.2em;
}
#fieldset_message
{
  width: 60%;
  padding-right: 28px;
  min-height: 300px;
}
@media all and (max-width: 440px)
{
  #fieldset_message
  {
    width: 100%;
  }
}

.champ
{
  margin-bottom: 10px;
}
#subject
{
  display: none;
}
#message
{
  width: 100%;
  height: 78%;
  margin-bottom: 5px;
}
#nom, #prenom, #telephone, #email, #message
{
  border-radius: 5px;
}
#nom, #prenom, #telephone, #email
{
  height: 30px;
  padding-left: 5px;
}
#message
{
  padding: 5px;
}
form .bouton_nav
{
  font-size: 1.1em;
  border: none;
  margin-top: 2px;
}
form .bouton_nav:active
{
    color: #00A1B3;
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. page 5 - accès ...................................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#acces
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

#acces iframe
{
  border: none;
}

#ecran_moyen, #ecran_petit
{
  display: none;
}

@media all and (min-width: 1024px) and (max-width: 1280px)
{
  #ecran_grand, #ecran_petit
  {
    display: none;
  }
  #ecran_moyen
  {
    display: flex;
  }
}

#coordonnees
{
  margin: auto;
  text-align: center;
}
#coordonnees h2
{
  font-size: 1.8em;
  font-weight: bold;
}

@media all and (max-width: 1024px)
{
  #ecran_grand, #ecran_moyen
  {
    display: none;
  }
  #ecran_petit
  {
    display: flex;
  }
  #acces
  {
    flex-direction: column;
    margin-top: 0;
  }
  #coordonnees
  {
    margin-top: 10px;
  }
}

#coordonnees *
{
  text-align: center;
}

#coordonnees p, #accesstation p
{
  line-height: 1.5em;
  white-space: normal;
}

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

#accesstation h3
{
  text-align: left;
  margin-bottom: -10px
}
#accesstation h2
{
  font-size: 1.8em;
  font-weight: bold;
  padding-top: 15px;
  margin-bottom: -15px;
}

@media all and (max-width: 1024px)
{
	#coordonnees h2, #coordonnees h3, #accesstation h2
	{
		font-size: 1.3em;
	}
	#accesstation h3
	{
		font-size: 1.1em;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. AVIS..............................................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#depot_avis
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#depot_avis div
{
  margin: 2px 5px 2px 5px;
}

#widget_cybevasion_p_avis
{
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

#ecran_tel
{
  display: none;
}

@media all and (max-width: 1024px)
{
  #ecran_ordi
  {
    display: none;
  }
  #ecran_tel
  {
    display: flex;
    margin-bottom: 5px;
  }
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*................. FIN ..............................................................*/
/*////////////////////////////////////////////////////////////////////////////////////*/