/*
* ===========================================
* Général
* ===========================================
*/

/* Corps de la page */

body {
	padding:0;
	margin:0;
	background-color: #FAFAFA;
	color: #222;
	/*font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;*/
    font-family: 'compagnonlight_italic';
    font-weight: normal;
    font-style: normal;
	font-size: 24px;
	line-height: 120%;
	width:100%;
	height:100%;
    overflow:hidden;
    
	
}


/* Tous les Liens */
a {
	text-decoration: none;
	color: #222;
}

a:hover, p.menu:hover{
	color:#333;
}

/* Supression des puces et des marges gauche pour toutes les listes */
ul {
	list-style-type:none;
	margin: 0;
	padding: 0;
	
}

div, nav{
	box-sizing:border-box;
}

span.italique{
    font-family: 'akzidenz-grotesk_pro_regulaRg';
    font-weight: normal;
    font-style: normal;
}

/*
* ===========================================
* Dégradé
* ===========================================
* Utiliser : http://colorzilla.com/gradient-editor/
*/

div.degrade{
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,a2cfb0+100 */
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #a2cfb0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#a2cfb0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#a2cfb0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#a2cfb0',GradientType=1 ); /* IE6-9 */
	
	/* À laisser pour fond dégradé */
	background-attachment: fixed;
	position:fixed;
	width:100vw;
	height:100vw;
	z-index:100;
}

div.degrade.fin{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2be30+0,2989d8+26,ed2d59+53,931c8f+77,82f2bc+100 */
	background: #f2be30; /* Old browsers */
	background: -moz-linear-gradient(left, #f2be30 0%, #2989d8 26%, #ed2d59 53%, #931c8f 77%, #82f2bc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f2be30 0%,#2989d8 26%,#ed2d59 53%,#931c8f 77%,#82f2bc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f2be30 0%,#2989d8 26%,#ed2d59 53%,#931c8f 77%,#82f2bc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2be30', endColorstr='#82f2bc',GradientType=1 ); /* IE6-9 */

}

div.degrade-libre{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5084c0+0,cb8cb6+100 */
background: #5084c0; /* Old browsers */
background: -moz-linear-gradient(left, #5084c0 0%, #cb8cb6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #5084c0 0%,#cb8cb6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #5084c0 0%,#cb8cb6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5084c0', endColorstr='#cb8cb6',GradientType=1 ); /* IE6-9 */
}

/*
* ===========================================
* Image de fond
* ===========================================
*/

body, html {
  height: 100%;
}

.navigation { 
  /* The image used */
  background-image: url("../images/fondmenu.png");

    
  /* Full height */
 /* height: 100%; */

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*
* ===========================================
* Navigation et titrage
* ===========================================
*/

h1{
	position:fixed;
	top:40px;
	left:40px;
	z-index:400;
}

p.menu{
	position:fixed;
	top:40px;
	right:40px;
    z-index:200;
	padding:20px;
	border:1px solid #333;
	cursor:pointer;
	z-index:400;
}

p.menu.menu-actif{
	color:#aaa;
	border:1px solid #aaa;
}

h2{
    position: fixed;
    bottom : 50px;
    left: 50px;
    z-index:500;
    color: white;
}

.navigation {
	/*background-color:yellow;*/
	position:absolute;
	top:0;
	right:0;
	width:100vw;
	height:100vw;
	z-index:200;
    
}



.navigation nav{
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	width:100vw;
	position:fixed;
	top:30vh;
	padding-left:20vw;
	padding-right:20vw;
	
}
.navigation  nav a{
	padding:20px;
	border:1px solid #333;
	font-size:36px;
}
.navigation  nav a.rubrique-active{
	color:orange;
}


/*
* ===========================================
* Plateau
* ===========================================
*/

.plateau {
	position:fixed;
	width:100%;
	height:100%;
	padding:40px;
	z-index:300;
	display: flex;
   flex-wrap: wrap;
	color:#fff;
	font-size:18px;
}

.plateau .introduction{
	flex-basis:100%;
	height:15%;
	padding-left:14vw;
	padding-top:2vh;
}
.plateau .grille{
	
	flex-basis:50%;
	height:70%;
	padding-left:14vw;
	padding-top:2vw;
}
.plateau .boutons{
	flex-basis:30%;
	height:70%;
	padding-left:4vw;
	padding-top:2vh;
}
.plateau .explication{
	flex-basis:100%;
	height:15%;
	padding-left:14vw;
	padding-top:2vh;
}

/* boutons */
.plateau .boutons{
	position:relative;
}
.plateau .boutons img{
	width:72px;
	height:auto;
	margin-left:10px;
	cursor:pointer;
}

.plateau .boutons .suivant{
    position:absolute;
    bottom:0;
    left:80px;
    cursor:pointer;
    display:none;
    width:400px;
	height:auto;
}

.couleurs{
	margin-top:10px;
	border: 2px solid #fff;
	border-radius:40px;
	display: flex;
   	flex-direction: row;
	padding:4px;
	width:378px;
	
}
.couleurs p{
	width:75px;
	height:75px;
	margin-left:10px;
	cursor:pointer;
	border: 2px solid #fff;
	border-radius:40px;
}

.vert{
	background-color:#2FAC66;
}
.jaune{
	background-color:#FCEA10;
}
.bleu{
	background-color:#36A9E1;
}
.rouge{
	background-color:#E94E1B;
}

.plateau .grille .tableau-conteneur{
	position:relative;
	background-color:#fff;
	width:28vw;
	height:28vw;
	padding-top:1vw;
	padding-left:1vw;
}

.curseur{
	border:3px solid #F00;
	width:calc((26vw / 3));
	height:calc((26vw / 3) + 1px);
	position:absolute;
	top:calc(1vw);
	left:calc(1vw);
}
.curseur.taille1{
    width:calc((26vw / 2));
	height:calc((26vw / 2) + 1px);
}
.curseur.taille2{
    width:calc((26vw / 6));
	height:calc((26vw / 6) + 1px);
}

.curseur.taille3{
    width:calc((26vw / 4));
	height:calc((26vw / 4) + 1px);
}
.curseur.taille5{
    width:calc((26vw / 8));
	height:calc((26vw / 8) + 1px);
}

.curseur.taille6{
    width:calc((26vw / 5));
	height:calc((26vw / 5) + 1px);
}
.curseur.taille7{
    width:calc((26vw / 6));
	height:calc((26vw / 6) + 1px);
}
.curseur.taille8{
    width:calc((26vw / 7));
	height:calc((26vw / 7) + 1px);
}

/* Couleurs pour test */
.plateau .grille table{
	width:26vw;
	height:26vw;
	
}
.plateau .grille table td{
	border:1px solid #000;
}
.plateau .grille table td.curseur{
	border:1px solid #f00;
}

.plateau .grille table td.couleur.opaque{
	opacity:0.2;
}




/* Couleurs pour test */
/*
.plateau .introduction{
	background-color:aliceblue;
}
.plateau .grille{
	background-color:antiquewhite;
}
.plateau .boutons{
	background-color:beige;
}
.plateau .explication{
	background-color:chocolate;
}*/


/* temporaire */
/*
.bas{
	transform: rotate(180deg); 
}
.gauche{
	transform: rotate(270deg); 
}
.droite{
	transform: rotate(90deg); 
}*/


.reussite{
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    height:100%;
    width:100%;
    text-align:center;
    
}

.reussite img{
    height:100%;
    width:auto;
}