/*
Violet clair : #c4aecf;
Violet logo : #895c9e;
Violet foncé : #442e4f;
Cyan : #4ec2eb;
Cyan clair: #d8eff9;
*/


@media only screen and (min-width: 768px) {

.admin #menuToggle li {
	width: 24%;
	text-align: center;
	padding: 0;
}

}


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

#col_gauche, #col_droite { display: none; }
#logo-valparisis { text-align: center; }
#menuToggle::after { display: none; }
#menuToggle { width: 453px; right: 0; }

}


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

.pourcent_50, .pourcent_33, .pourcent_25 { width: 100%; }
#logo-valparisis { width: 90%; }
#menuToggle::before { display: none; }
#col_centre { width: 100%; }
#home #col_centre { height: auto; }
#compte .rang_2{ height: auto; }
.rang_2 .sous_col_1, .rang_2 .sous_col_2 { width: 100%; height: auto;}
.rang_2 .sous_col_1 .rang_21 { height: 230px; }
.rang_2 .sous_col_1 .rang_22 { height: 150px; }
.sous_col_1 #titre p, .sous_col_1 #titre h1 { color: #ffffff; text-shadow: 0 0 10px #000000; }
.sous_col_1 #titre #une_station p { text-shadow: none; }
/*.sous_col_1 #titre p { font-size: 1.5em; }*/
.sous_col_1 #titre p.space { display: none; }
.sous_col_1 #titre h1 { font-size: 2.5em; }
#une_station p { display: block; }
.sous_col_1 #argu ul { margin-left: -10px; margin-top: 40px; }
.sous_col_1 #argu ul li { display: inline-block; width: 50%; float: left; position: relative; min-height: 45px; }
.sous_col_1 #argu ul li:nth-child(2n) { margin-left: -20px; }
.sous_col_1 #argu ul li:last-child { width: 100%; }
.sous_col_1 #argu ul li::before { content: ''; display: block; position: absolute; width: 10px; height: 10px; background-color: #442e4f; top: 8px; left: -15px; }
.sous_col_2 #local { background-size: 120%; }
/*.rang_2 .sous_col_2 .rang_21 { height: 230px; }*/
.rang_2 .sous_col_2 .rang_21 { width: 100%; }
.rang_2 .sous_col_2 #carte, .rang_2 .sous_col_2 #carte img { height: 150px; width: 150px; }
.rang_2 .sous_col_2 .rang_22 { height: 300px; }
#home .rang_2 .sous_col_2 .rang_22 { height: auto; }
#home #argu { background-color: inherit; width: auto; padding: 0 20px 20px 20px; }
#home #argu .plus .plus_texte::after { right: 0; }
.mobile_oui{ display: block; }
.mobile_non{ display: none; }

.rang_3 .sous_col_2 { min-height: 120px; }

.rang_3 .sous_col_1 { width: 33%; }
.rang_3 .sous_col_2 { width: 67%; }
.rang_3 .sous_col_2 .img1 { width: 15%; margin: 37px 0 0 5%; }
.rang_3 .sous_col_2 .img2 { width: 50%; margin: 39px 5% 0 0; }

.sous_col_2 #local_argu { height: auto; padding: 20px; }

/* Hamburger */

#menuToggle {
  display: block;
  position: absolute;
  width: 33px;
  z-index: 1;
  top: 0;
  right: 0;
  -webkit-user-select: none;
  user-select: none;
  background: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
Violet logo : #895c9e;
Violet foncé : #442e4f;
Cyan : #4ec2eb;
Cyan clair: #d8eff9;
*/
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #895c9e;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
  position: absolute;
  width: 700px;
  background: #d8eff9;
  list-style-type: none;
  top: 0;
  right: 0;
  height: 160px;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menuToggle li{
	display: list-item;
	text-align: center;
	color: #895c9e;
}
#menuToggle li a.active, #menuToggle li a:hover { color: #895c9e; }
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul { transform: none; }

/* Sous-Menu User */
#menu_user { top: 0; }
#menu_user ul { padding: 0; }

/* Contact */
.img_consigne { width: 50%; }




}

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

.sous_col_1 #argu ul li, .sous_col_1 #argu ul li:nth-child(2n) { margin-left: 0; width: 100%; }
.rang_2 .sous_col_1 .rang_22 { height: auto; }

}


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

#logo-valparisis { width: 80%; }

/*.sous_col_1 #argu ul li:nth-child(2n) { margin-left: -25px; width: 57%; }*/
/* .sous_col_1 #argu ul { font-size: 1.3em; line-height: 2em; } */
.rang_2 .sous_col_2 .rang_22 { height: 330px; }
#home .rang_2 .sous_col_2 .rang_22 { height: auto; }
#menu { width: 400px; }

#mentions .rang_2.rang_bleu { height: auto; }

.rang_3 .sous_col_1 { width: 33%; }
.rang_3 .sous_col_2 { width: 67%; }
.rang_3 .sous_col_2 .img1 { width: 20%; margin: 37px 0 0 5%; }
.rang_3 .sous_col_2 .img2 { width: 55%; margin: 39px 5% 0 0; }

.img_consigne { width: 100%; }

#popup_reabo { display: none; position: absolute; height: 5000px;}
#popup_reabo #retrouve_num { width: 75%; }


}

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

#logo-valparisis img { width: 170px; }
#menuToggle { padding-right: 10px; }
#menu { width: 320px; }
#menuToggle span { width: 25px; }

.rang_1{ height: 110px; }
.sous_col_1 #titre h1 { font-size: 2em; }
/*.sous_col_1 #argu ul li, .sous_col_1 #argu ul li:nth-child(2n) { margin-left: 0; width: 100%; }*/
.rang_2 .sous_col_2 .rang_21 { height: 190px; }
.rang_2 .sous_col_2 .rang_22 { height: 330px; }
/*.rang_2 .sous_col_1 .rang_22 { height: 220px; }*/
.rang_2 .sous_col_2 .rang_22 { height: 380px; }
.rang_2 .sous_col_2 #carte, .rang_2 .sous_col_2 #carte img { height: 100px;  width: 100px;  }

.rang_3 .sous_col_1, .rang_3 .sous_col_2 { width: 100%; }
#sign { width: 100%; text-align: center; margin: 20px 0; }

}