:root{
	--carre: 18vh;
	--carrem: 5vh;
	--vert: rgb(0,255,0);
}




html{
     background-color:blue;
}
body{
    position: center; 
    width: 100vw; 
    /* height: 70vh;*/
	 margin: 0;
	 /* overflow: hidden; */
	 overflow-x: hidden;
    /*background-color:red;*/
} /**/
br{
	width: 100vw;
	height: 5vh;
}
.classBody{
    position: center; 
    width: 60vw;
    height: 100vh;
	margin: auto;
	 /* overflow: hidden; */
    /* background-color:blue; */
}
body:hover {
	/* overflow: scroll; */
}
.sliderp01{
     width: 100vw; 
    /* min-height: 60vh;*/
    box-sizing: border-box;
	max-height: 80vh;
	overflow: hidden;
}

.grille {
    position: center;  
	display: block;
	max-width: 140vh;
	min-width: 50vh;
	margin-left: auto;
	margin-right: auto;
	grid-template-columns: --carre --carre --carre --carre;
	justify-content: space-around;
}


/* .carre {
	box-sizing: border-box;
    position: center;  
    float: left;
	margin: 5vh 5vh 5vh 5vh;
    width: 25vh;
    height: 25vh;

    background-color:var(--vert);
}
.carre img{
		margin: 0vh 0vh 0vh 0vh;
		/*border: 1vh var(--vert);*/
/*}
.carre:hover img{
		/*border: 10px var(--vert);*/
/*}
.carre:hover{
		/*border: 10px var(--vert);*/
		/*	padding: 1vh;
			outline-width: 1vh;
			outline-color: var(--vert);
} */

.textMenu {
	display : block;
	color: var(--vert);
	font-size: 2vw;
	/* margin: 1vw 2vh;*/
	/* position: absolute; */
	/* bottom: 9vh; */
	/* left: 12vw;  */
	text-align: left;
	font-family: "Caviar Dreams";
	font-weight: bold;
	text-wrap-mode: wrap;
	overflow-wrap: break-word;
}
#menu a {
	color: var(--vert);	
	list-style: none;
	text-decoration: none;
}

#menu ul{
	color: var(--vert);	
	list-style: none;
}
#menu li{
  display: inline;
}
	
#disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

#menu:visited {
	color: var(--vert);
	text-decoration: none;
}
#menu:link {
	color: var(--vert);
	text-decoration: none;
}
#menu a:hover {
	color: red;
	text-decoration: underline;
}

.textNews{
	position: center;
    color: white;
    top: 20px;
	left: 1px;
	font-size: 4vh; 
	text-align: left;
	vertical-align: text-top;
	transform: rotate(-90deg);

}
.grilleBox{

  width: 70vw;
/*	margin: 5vw; */
/* 	height: 50vw; */
	margin: auto;
	background-color:yellow;
}
.greyBox{
	box-sizing: border-box;
    position: relative;  
    float: left;
	margin: 2.5vw 2.5vw 2.5vw 2.5vw;
    width: 10vw;
	height: 10vw;
	background-color:white;

}
.grey{
	box-sizing: border-box;
    position: relative;  
    float: left;
    width: 100%;
	/*height: 100%;*/
	max-height: 80vw;
	/* margin: 5vw 5vw 5vw 5vw; */
    background-color:white;
}
.grey img{
	width: 100%;
}
.greyBox img{
	opacity: 1;
}
.greyBox:hover img{
	opacity: 0.5;
}
.txHover{
	width: min(10vw, 10vw);
	opacity: 0;
	z-index: 10;
	position: absolute;
    color: var(--vert);
	font-size: 3vh;
	font-weight: bold;
	margin: 1vw 0.5vw 1vw 0.5vw;
	font-family: "Caviar Dreams";
	text-anchor: end;
	writing-mode: vertical-lr;
	text-wrap-mode: wrap;
	overflow-wrap: break-word;
}
.txHover:hover{
	opacity: 1;
}

.textNews2{
	position: absolute;
    color: var(--vert);
    width: 100%;
	height: 100%;
/* 	// min-width: 5vw;
	// min-height: 5vw; */
/* 	padding: 5vh 5vh 5vh 5vh; */
    top: 5vh;/*15px;*/
	/* left: 1vh; */
	bottom: 10vh;/*30px;*/
	font-size: 4vh;
	text-align: left;
	vertical-align: text-top;
	transform: rotate(-90deg);
	text-transform: uppercase;

}

/* lineup class and keyframes */
.lineUp{
	
  opacity: 0;
}
.lineUp:hover{
	opacity: 1;
  
}

/* Title text */
.T1 {
  color: blue;
  font-size: 6vw;
  /* padding: 1vw 2vh; */
  position: absolute;
  top: 25vw;
  width: 100%;
  text-align: center;
  font-family: "Caviar Dreams";
  font-weight: bold;
}

.T2 {
  color: blue;
  font-size: 3vw;
  /* padding: 1vw 2vh; */
  position: absolute;
  top: 33vw;
  width: 100%;
  text-align: center;
  font-family: "Caviar Dreams";
  font-weight: bold;
}
.txDescription{
  color: white;
  font-size: 1vw;
  /* padding: 1vw 2vh; */
  position: absolute;
  top: 0vw;
  width: 100%;
  margin: 1vw;
  text-align: left;
  font-family: "Caviar Dreams";
  /* font-weight: bold; */
}
.botMenu {
	display : block;
	/*margin : 1vw 1vh;*/
	margin : auto;
	position: center;  
	width: 95vw;
	bottom: 2vh;
	text-align: center;

}
.textFoot2 {
	display : block;
  color: var(--vert);
  font-size: 1.7vw;
  /* padding: 1vw 2vh; */
  /* position: absolute; */
  /* top: 5vh; */
  /* width: 100vh; */
  text-align: center;
  font-family: "Caviar Dreams";
  font-weight: bold;
}
.textBox{
margin: 2.5vw 2.5vw 2.5vw 2.5vw;
}
.boxText {
	/*position: absolute;*/
    position: center; 
    width: 60vw; 
	margin: 1vh 1vw;
	overflow: hidden;
	
	/*background-color: black;
    /*background-color: red;/**/
	/*bottom: 15vh;*/
}

/* Caption text */
.text{
	
/* z-index: 10;*/
  color: var(--vert);
  padding: 1.5vh 0vw;
  margin: auto;
  font-size: 1vw;
  text-align: justify;
  text-justify: auto;
  /*position: absolute;*/
  font-family: "Caviar Dreams";
  font-weight: bold;
}
.textT2{
  font-size: 1.5vw;
  text-align: center;
}
.back{
	padding: 5vw 5vh;
 }

.back a{
	display: block;
	z-index: 10;
	width: 2vw;
	padding: 5vw 5vh;
	background-image: url(logo/back.png);
	display: block;
/*  margin: 0 auto;*/
/*	text-indent: -9999px;*/
	border: solid black;
}



hr {
	width: 30vw;
	height: 5vh;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--vert);
    }
	
.fondVert{
	/* width: 60vw; */
	/* height: 1.5vw; */
	background-color: var(--vert);
	/*margin: 2.5vh 2.5vw;
	margin-top: 5vw;*/
	width: 40vw;
    left: 37.5vw;
    top: 3.25vw;
    height: 1.1vw;
    /* background-color: yellow; */
    /* margin: 2.5vh 2.5vw; */
    /* margin-top: 5vw; */
    position: absolute;
    z-index: -1;
}
.back2{
	padding: 2vw 2vw 2vw 0vw;
	font-size: 2vw;
	color: var(--vert);
	text-decoration: none;
	font-family: "Caviar Dreams";
	font-weight: bold;
	background-color: blue;
/* 	vertical-align: middle;*/
 }

.title{
	/* width: 60vw; */
	/* z-index: 10;*/
	color: var(--vert);
	padding: 1.5vw 1vw;
	/* margin: 19vw; */
	font-size: 1.5vw;
	/*   text-align: left;*/
	text-justify: auto; 
	/*position: absolute;*/
	text-align: left;
	font-family: "Caviar Dreams";
	font-weight: bold;
	background-color: blue;
	text-wrap-mode: nowrap;
/* 	vertical-align: middle; */
}

 h4 {
    display: flex;
    flex-direction: row;
    }
          
 h4:before,
 h4:after {
    content: "";
    flex: 1 1;
    border-bottom: 0.8vw solid var(--vert);
    margin-left: 1vw;
    margin-right: 1vw;
    }
          
h3 {
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -30px;
    
    @include transform(rotate(270deg));
    @include transform-origin(0 0);
  }

	/* margin: 5vh 5vh 5vh 5vh;  */
	
	/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	/* img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */
/*
	img {
		height: auto;
	} */
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {
		display: block;
		display: revert !important; /* affichage des éléments */        
	}        
	.u-no-mobile {
		display: none !important; /* masquage des éléments */        
	}
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: left;
		font-style: italic;
		color: #777;
	}
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
  	body:before {
		content: "Version mobile paysage du site";
		/* content: vh x vw; */
		display: block;
		text-align: left;
		font-style: italic;
		color: #777;
	}
}
@media screen and (max-width: 1200px) {
 	
	html {
		/* background-color:yellow; */
	}
	body {
    /* position: center;  */
	width: 100%; 
	height: 100%; 
 	/* margin: 15vh 15vw; */
	overflow: visible;
	overflow-x: hidden;
	}
	
	.classBody{
    width: 100%;
    height: 100%;
	}
	
	.T1 {
	font-size: 6vw;
	/* top: 15vh; */
	}
	.T2 {
	font-size: 3vw;
	/* top: 22vh; */
	}
	
	.txDescription{
	font-size: 1.8vw;
	}
	/*
	.textMenu{
	font-size: 6vw
	}
	.textFoot2{
	font-size: 3vw
	}
	.sliderp01{
	/* width: 800px;  *//*  BUG LARGEUR DEFILLEMENT TELEPHONE */
	/* height: 600px; */
	/* max-height: 80vh; */
	 /*overflow: hidden;
	}/**/
	.back a{
	width: 2vw;
	}
	.grilleBox{
	width: 100vw;
	margin: 0vw 10vw 0vw 10vw; 
	}
	.greyBox{
    width: 30vw;
	height: 30vw;
	margin: 5vw 5vw 5vw 5vw;
	}
	.fondVert{
	margin: 0vw 15vw 0vw 15vw;
	width: 30vw;
    left: 40vw;
    top: 2.5vw;
    height: 2.6vw;
	}	
	.title{
	/* margin: 22vw; */
	font-size: 3vw;
	}
	.back2{
	margin: 0vw;
	margin-left: 1vw;
	font-size: 3vw;
	}
	.txHover{
	width: min(30vw, 30vw);
	font-size: 5vw;
	}
	.text{
	/* width: 75vw; */
	font-size: 2vw;
	font-weight: normal;
	margin: 0vw;
	margin-top: 2vw;
	padding: 0;
	}
	.textFoot2{
	/* width: 75vw; */
	/* margin: auto; */
	font-size: 3vw;
	/* font-weight: normal; */
	white-space: wrap;
	}
	.textMenu{
	font-size: 3.5vw;
	}
	.grey{
	height: 60vh;
	max-height: 100vh;
	width: auto;
	}
	.textBox{
	top: 60vw;
	/* margin: 5vw 5vw 5vw 5vw; */
	margin: auto;
	margin-top: 2vh;
    width: 70vw;
	}
}
@media screen and (min-width: 2000px) {
	.T1 {
	font-size: 8vh;
	top: 15vh;
	}
	.T2 {
	font-size: 4vh;
	top: 45vh;
	}
}