/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */
 
html {
	scroll-behavior: smooth;
}

@font-face {
  font-family: "Raleway";
  src: url("font/Raleway-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("font/Raleway-ExtraBold.ttf") format("truetype");
  font-display: swap;
  font-weight: bold;
}


body
{
  margin: 0;
  padding: 0;
  width:100%;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;  
  /* make it look decent enough */
	background: url('img/fond.png') no-repeat;
	background-size: 100vw;
	background-position: 0% 50%;
	 background-attachment:fixed; 
  background-color: #fff;
  color: #cdcdcd;
  font-family: "Raleway",  sans-serif;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none; /* prevent text sizes to be a mess on mobiles*/
}

header {
	display:none;
}

header > div > a{
	color: #F39200;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	margin-top: 9vh;
	font-size: 1.5em;
}

header > img {
	grid-area: l;
	align-self: center;
	justify-self: center;
}

nav {
	position:fixed;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 1fr;
	grid-template-areas: "a b c d";
	background: #312757;
	width:100%;
	padding-top: 25px;
	bottom:0px;
}

nav a {
	text-decoration: none;
	color: #F39200;
	font-size: 2.5vw;
	font-weight: bold;
}

#menu a {
	font-size: 7vw;
}

#menuToggle
{
  grid-area: a;
  display: block;
  position: relative;
  padding-top: 1.2vh;
  left: 5vw;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #fff;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


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

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 10vw;
  height: 1vw;
  margin-bottom: 2vw;
  position: relative;
  
  background: #f39200;
  border-radius: 3px;
  
  z-index: 1;
  

}


/* mettre au milieu*/
#menuToggle input:checked
{
	margin-left:40vw;
}
/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
	margin-left:40vw;
}


/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0px;
  left: 0px;
  padding-top: 0;
  
  background: #312757;
  color: white;
  list-style-type: none;
  -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);
  
  display:grid;
  grid-template-rows: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr;
  grid-template-areas:
  "l"
  "m1"
  "m2"
  "m3"
  "m4"
  "m5"
  "m6";
  font-weight: bold;
  font-size: 4em;

}

#menu hr {
    border: 0;
    height: 3px;
    background: #f39200;
	width: 20vw;
}

#menu > img {
	grid-area:l; 
	justify-self: center;
	padding-top: 50px;
	width: 20vh;
}

#menu li
{
  padding: 10px 0;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


nav > a > img {
	width : 10vw;
	margin-right: 2vw;
}
#pictos {
	padding : 20px;
	
}

.intro {
	background-size: 100vw !important;
	background-color:#312757;
	background-position:bottom;
	color:white;
	padding: 10px;
	font-size: 4vw;
	text-align: center;
	min-height: 57vw;
}

#index.intro {
	background: url('img/realite_virtuelle_casque.webp') no-repeat;
}

.intro h1 {
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	margin: 0;
}
.intro h2 {
	text-align: center;
	font-weight: lighter;
	margin-top:0px;
	font-size: 1.8rem;
}

.intro hr {
    border: 0;
    height: 5px;
    background: #f39200;
	width:30vw;
	margin-bottom: 3px;
	margin-top: 3px;
}

#corps {
	color : #312757;
	text-align: center;
	font-size: 2vw;
	margin-bottom: 15vw;
}

p {
	padding-left: 10px;
	padding-right: 10px;
}

#corps h3 {
	color: #f39200;
	font-size: 1.5rem;
	margin-bottom: 1px;
}

#corps hr {
    border: 0;
    height: 3px;
    background: #f39200;
	width:15vw;
	margin-bottom: 3px;
	margin-top: 3px;
}

#corps h2 {
	font-size: 3rem;
	font-weight: bold;
	margin: 0;
}

#virus {
	width:100vw;
	background-color: #f27c00;
	color: #312757;
	padding-top: 25px;
	padding-bottom: 1px;
}

#virus > img {
	width:25vw;
}

#contact {
	background-color: #312757;
	padding-top: 1vh;
	padding-bottom: 10vh;
	text-align: center;
	height:13vh;
}


#contact > #ppd {
	color:#fff;
	font-size: 2.5rem;
}

#contact > #rens {
	color:#F39200;
	font-size: 2.5rem;
}
#contact > #cn {
	color:#fff;
	border-radius: 5vw;
	background-color: #F39200;
	width: 35vw;
	margin-top: 5vh;
	margin-bottom: 10vh;
	margin-right:auto;
	margin-left:auto;
	padding: 20px;
	font-size: 2rem;
}
#contact > #cn > a {
	color:#fff;
	text-decoration: none;
}
.arrondi {
	border-radius: 5vw;
	background-color: #F39200;
	width: 40vw;
	margin: auto;
	padding: 3vw 2vw;
	font-size: 2vw;

}

.arrondi a {
	color:#fff;
	text-decoration: none;
}

#contact > #coord {
	background-color: #1e1947;
	color: #fff;
	padding: 3vw 0;
	margin-top: 3vw;
}

#contact > #coord > #tel {
	color: #F39200;
}

#contact > #coord img {
	width: 7vw;
	padding: 2vw;
}

#contact > #coord > #ml {
	font-size: 1rem;
}

#titresjeux {
  display: grid;
  grid: repeat(4, 14vw) / auto-flow;	
  padding-bottom: 2vh;
  letter-spacing: -0.02em; 
}

.jeu {
	max-width: 100vw;
}

.jeu p {
	margin-top: 0rem;
}

.galgame {
	width: 100vw;
	overflow-x: scroll;
}

.galgame figure {
	position: relative;
	display: grid;
	grid-template-areas: 
	"video photo3 photo4 photo6"
	"photo2 photo3 photo5 photo6";
	grid-gap: 2vh;
}

.galgame div.long {
	width:70vw;
	height: 12vh;
}

.galgame .video {
	grid-area: video;
}
.galgame .photo2 {
	grid-area: photo2;
}
.galgame .photo3 {
	grid-area: photo3;
}
.galgame .photo4 {
	grid-area: photo4;
}
.galgame .photo5 {
	grid-area: photo5;
}
.galgame .photo6 {
	grid-area: photo6;
}

video {
	width: 70vw;
    height: 12vh;
	object-fit: fill;
}

.gotop {
	width: 100vw;
	text-align: center;
}

.gotop img {
	width: 6vw;
	position: relative;
	top: 3vw;
}

#prive.intro {
	background: url('img/privatisation.webp') no-repeat #312757;
}


#prive h2 {
	margin-top:6vh;
	margin-bottom:0;
	font-size:1.5rem;
}

#prive hr {
	height: 2px;
	width: 12vw;
}

#prive {
	font-size:1.5rem;
}

#corps .maliste {
	color:#312757;
	text-align: left;
	font-size:2.5rem;
	font-weight:bold;
	margin-left: 3vw;
	padding-bottom: 0vh;
	padding-top: 5vh;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 3vw;
	min-width: 20vw;
}

#corps .nume {
	color:#f39200;
	font-size: 5rem;
	font-weight:bold;
}

#corps ol>div {
	font-weight:normal;
	font-size:1.6rem;
	text-align: left;
	border-bottom: solid 2px #312757;
	width: 90vw;
	margin-left: 2vw;
	padding-bottom: 3vh;
	margin-bottom: 2vh;	
}

#corps li>div {
	margin-top: 0.5vh;
	position: absolute;}

#anniv.intro {
	background: url('img/canapo.webp') no-repeat #ccc;
}

#anniv hr {
	height: 3px;
	width: 15vw;
}
#anniv h2 {
	margin-top:6vh;
	font-size:1.5rem;
	margin-bottom:0;
}
#anniv h1 {
	font-size: 2.1rem;
	margin-bottom: 2vh;
	margin-top: 2vh;
}
#corpsanniv>div{
	color:#fff;
	width:50vw;
	border-radius: 4vh;
	margin: 5vh auto;
	padding: 1vh 0;
}
#corpsanniv h1 {
	margin-bottom: -0.3vh;
	margin-top: 1vh;
}

#corpsanniv>div>div {
	padding: 3vh;
	font-size: 4vw;
}

#corpsanniv>div:nth-child(odd) {
	background-color:#f39200;
}
#corpsanniv>div:nth-child(odd) h1, #corpsanniv>div:nth-child(odd) h2{
	color:#312757;
}

#corpsanniv>div:nth-child(even) {
	background-color:#312757;
}
#corpsanniv>div:nth-child(even) h1, #corpsanniv>div:nth-child(even) h2{
	color:#f39200;
}

#corpsanniv #gratuit {
	font-size:1.2rem;
	padding-bottom: 2vh;
}

#corpscontact h1{
	color:#312757;
	font-size:3rem;
}

#corpscontact a {
	font-size: 1.5rem;
	padding-left:10vw;
	padding-right: 10vw;
	display: table-cell;
	color:#F39200;
	text-decoration: none;
	padding-bottom: 1vw;
}

#corpscontact iframe {
	margin-top:2vh;
	width: 80vw;
	height: 40vh;
}
#corpscontact>div>a:nth-child(2){
	background:url('img/ml.png') no-repeat;
	background-size: 6vw;
}

#corpscontact>div>a:nth-child(3){
	background:url('img/tel.png') no-repeat;
	background-size: 6vw;
	padding-left: 8vw;
	float: left;
}
#corpscontact{
	margin-left:10vw;
	display: grid;
	grid-template-areas: "pics"  "form" "map";
}
#corpscontact form {
	background-color: #f2f2f5;
	width: 80vw;
	margin-top: 5vh;
	padding: 1vh 0;
}
#corpscontact form input  {
	width: 70vw;
	margin: 1vh 5vw;
	height: 3vh;
	border: none;
	padding-left: 4vw;
}
#corpscontact form input[type=submit]  {
	width: 20vw;
	margin: 1vh 5vw;
	height: 3vh;
	border: none;
	border-radius: 30px;
	background-color: #f39200;
	color: #fff;
	font-size: 2.5vw;
	position: relative;
	left: 50vw;
	padding-left: 1vw;
}
#corpscontact form textarea {
	width: 70vw;
	margin: 1vh 5vw;
	height: 10vh;
	border: none;
	font-size: 1.5rem;
	font-family: "Raleway", sans-serif;
	padding-top: 1vh;
	padding-left: 4vw;

}
#corpscontact form input::placeholder {
	font-size: 1.5rem;
}

.ghost {
	visibility: hidden;
}
.pitch .ghost {
	display:none;
}
#ppd a.ghost {
	display:none;
}

#block3 img {
	width:100vw;
}

.imgjeu {
	width:70vw; 
	height:12vh;
}

.imgjeucarre {
	width:70vw; 
	height:26vh;
}

.grillejeu {
	display:grid;
	grid-template-rows: auto auto;
}
#liste {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: min-content;
	grid-template-areas:
	". ."
	"t1 t1"
	"hr1 hr1"
	". ."
	"t2 t2"
	"hr2 hr2"
	". ."
	"t3 t3"
	"hr3 hr3"
	". ."
	"t4 t4"
	"hr4 hr4"
	". ."
	"t5 t5";
	font-size: 1.5rem;
	text-align: left;
	margin-right: 5vw;
	margin-left: 5vw;
}
#liste hr {
	width: 90vw;
	background: #ccc;
	height: 3px;
}
#liste div{
	margin-top: auto;
	margin-bottom: auto;
	padding-top: 3vh;
	padding-bottom: 3vh;
}
#liste div.nume {
	padding-bottom: 0;
}

#liste .hr1 {
	grid-area: hr1;
}
#liste .hr2 {
	grid-area: hr2;
}
#liste .hr3 {
	grid-area: hr3;
}
#liste .hr4 {
	grid-area: hr4;
}
#liste .t1 {
	grid-area: t1;
}
#liste .t2 {
	grid-area: t2;
}
#liste .t3 {
	grid-area: t3;
}
#liste .t4 {
	grid-area: t4;
}
#liste .t5 {
	grid-area: t5;
}
.pitch {
	padding-top:3vh;
}
#formulaire.result{
	padding-left:2vw;
	color: #312757;
}
#lnkp {
	color: #f39200;
	text-decoration: none;
}

.jeu {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". ."; 
}

.jeu img {
	width: 50vw;
}

#corps.pagejeux h3 {
	padding-bottom: 5vh;
}

#corps.pagejeux h1 {
	margin-bottom: 1vh;
}

@media (min-width: 70em) {
	nav{
		display:none;
	}
	header{
	background: url('img/logo36.svg') no-repeat center 1vh;
	background-color: #312757 ;
	display: grid;
	grid-template-columns: 5vw 15vw 20vw 20vw 20vw 15vw 5vw;
	grid-template-areas: ". . . l . . .";
	border-bottom: solid 3px #635b7f;
		border: 0;
		background-size: auto 8vh;
		height:15vh;
	}
	header div {
		display:block;
		margin: auto;
/*		border-radius: 5vw;
		background-color: rgb(255,255,255,.75);
		padding: 15px;
*/
	}
	header>a {
		text-decoration: none;
		color: #fff;
		font-size: 1rem;
		font-weight: bold;
		margin-top: auto;
		margin-bottom: auto;
	}
	.alignleft {
		text-align: left;
	}
	.alignright {
		text-align: right;
	}
	.aligncenter {
		text-align: center;
	}
	.intro {
		font-size: 1.5rem;
		min-height: 45vw;
	}
	.intro h1 {
		margin-top:25%;
	}
	.intro h2 {
		margin-bottom:5%;
	}
	#index.intro {
		background-position-y: -20vh;
		padding-left: 20vw;
		padding-right: 20vw;
	}
	#corps.pageindex {
	display: grid;
	grid-template-columns: 15vw 2fr 2fr 2fr 15vw;
	column-gap: 5vw;
	font-size: 0.8rem;
	text-align: left;
	}
	#corps.pageindex h2 {
		font-size: 1.6rem;
		text-align:left;
	}
	#corps.pageindex h3 {
		font-size: 1.2rem;
		text-align:left;
	}
	#corps.pageindex hr {
		width: 6.6vw;
		margin-left: 0;
	} 
	#corps.pageindex p {
		padding-left: 0;
		padding-right: 0;
	}
	.ghost{
		visibility:visible;
	}
	.pitch .ghost {
		display:block;
	}
	#block3 img {
		width:100%;
	}
	#block3 h2{
		font-size: 1.5rem;
	}
	#virus {
		width:auto;
		background-color: #fff;
		padding-top: 15px;
	}
	#virus > img {
    width: 30%;
	padding-right: 30%;
	padding-left: 30%;
	padding-top: 2vh;
	padding-bottom: 2vh;
	background-color: #f27c00;
	}
	.antighost {
		display: none;
	}
	#corps.pageindex {
		margin-bottom: 10vh;
		margin-top: 10vh;
	}
	#contact > #ppd, #contact > #cn, #contact > #rens {
		display: inline-table;
		padding-right: 1vw;
		font-size: 1.8rem;
	}
	#contact > #ppd, #contact > #rens {
		position: relative;
		top: 20px;
	}
	#contact > #cn {
		font-size: 1rem;
		float: right;
		width: auto;
		margin-right: 7vw;
		margin-top: 1vw;
	}
	#contact>#ppd {
		margin-left: 6vw;
	}
	#contact>#coord {
		margin-top:4vw
	}
	#contact>#ppd img{
		width: 2vw;
		padding: 1vw;
		padding-bottom: 2vw;
		padding-left: 0vw;
	}
	#contact > #coord > #tel {
		color: #fff;
		margin: auto;
		width: 7rem;
		position: relative;
		top: -4rem;
		font-size:1rem;
	}
	#contact>#coord>#addr {
		margin: auto;
		width:21rem;
		position: relative;
		top: -4rem;
		font-size:1rem;
	}
	#contact>#coord>#ml {
		float:right;
		top:-5rem;
		position: relative;
		font-size: 0.7rem;
		right: 7vw;
	}
	#contact>#coord {
		padding-bottom: 0vw;
		text-align: left;
		padding-left: 5vw;
	}
	#corps.pagejeux hr {
		width: 5vw;
	}
	#corps.pagejeux {
		font-size: 1rem;
	}
	#corps.pagejeux div.introrps {
		padding-top: 10vh;
		background: url('img/bgrps.webp') no-repeat center top;
		background-size: 100vw !important;
	}
	#corps.pagejeux>div>p {
		padding-left: 10vw;
		padding-right: 10vw;
	}
	#corps.pagejeux .arrondi{
		width: 14vw;
		padding: 15px 0;
		font-size: 1rem;
	}
	#corps.pagejeux #titresjeux {
		grid: repeat(2, 4vw) / auto-flow;
		padding: 5vh 16vh 2vh 17vh;
		grid-gap: 1vw;
	}
	.grillejeu {
		grid-template-columns: auto auto;
		grid-template-rows:none;
		margin-left: 5vw;
		margin-top: 10vh;
		margin-bottom: 4vw;
	}
	.galgame div.long, video, .imgjeu, .long {
		width: 20vw;
		height: 15vh;
	}
	.imgjeucarre {
		height: 32vh;
		width: auto;
	}
	.galgame {
		width:auto;
	}
	.pitch img {
		max-width: 15vw;
	}
	.pitch {
		text-align: left;
		font-size: 0.8rem;
		width: 20vw;
	}
	.gotop img {
		width: 2vw;
		top: 1vw;
	}
	#corpscontact {
		grid-template-areas: "pics form" "map form";
		margin-right: 5vw;
	}
	#corpscontact iframe {
		width: 35vw;
	}
	#corpscontact a {
		font-size: 1rem;
		padding-left: 5vw;
		padding-right: 5vw;
	}
	#corpscontact > div > a {
		background-size: 3vw !important;
	}
	#corpscontact > div > a:nth-child(3) {
		padding-left: 5vw;
	}
	#corpscontact form {
		width: 35vw;
		padding-top: 7vh;	
		padding-bottom: 10vh;
	}
	#corpscontact form input, #corpscontact form textarea {
		width: 25vw;	
		padding-left: 0vw;
	}
	#corpscontact form input {
		height: 5vh
	}
	#corpscontact form textarea {
		height: 30vh;	
	}
	#corpscontact form input[type="submit"] 
	{
		left: 16vw;
		width: 9vw;
		height: 5vh;	
		font-size: 1.2rem;	
		margin-top: 3vh;		
	}
	.nobg {
		background-color: initial !important;
	}
	#corpsanniv {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr auto;
		grid-template-areas: ". . . ." "g g g g";
		padding-left: 10vw;
		padding-right: 10vw;
		grid-gap: 2vw;
	}
	#corpsanniv>div {
		width: 18vw;
		margin: 5vh auto 0 auto;
	}
	#anniv.intro, #prive.intro {
		padding-top: 5vh;
		background-position-y: -25vh;
		min-height: 50vh;
		padding-left: 10vw;
		padding-right: 10vw;
	}
	#corpsanniv h1 {
		font-size: 2.5rem;
	}
	#corpsanniv h2 {
		font-size: 1.5rem;
	}
	#corpsanniv >div >div {
		font-size: 1.2rem;
	}
	#gratuit {
		grid-area: g;
	}
	#corps {
		margin-bottom: 0vw;
	}
	#contact {
		padding-bottom: 0vw;
		padding-top: 2vh;
		text-align: left;
	}
	#prive h1 {
		margin-top: 0vh !important;
		margin-bottom: 2vw;
	}
	#liste {
		grid-template-columns: 1fr 3fr auto;
		grid-template-rows: 1fr 3px 1fr 3px 1fr 3px 1fr 3px 1fr;
		grid-template-areas:
		". . t1"
		"hr1 hr1 hr1"
		". . t2"
		"hr2 hr2 hr2"
		". . t3"
		"hr3 hr3 hr3"
		". . t4"
		"hr4 hr4 hr4"
		". . t5";
		font-size: 1rem;
		margin-top: 5vh;
		margin-right: 10vw;
		margin-left: 10vw;
	}
	#liste hr {
		width: 80vw;
	}
	#corps .maliste {
		margin-left: 2vw;
		font-size: 2rem;
		padding-bottom: 5vh;
	}
	#liste div.nume {
		padding-bottom: 3vh;
	}

}