body {
  background-color:lightslategray; 
  min-height:100vh;
  font-family:Arial, sans-serif;
  color:navy;
  font-size:12pt;
  padding:0px;
}

/* ------------------- En-tête ------------------- */
header {
	position:relative;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:50px;
	background-color:white;
	border-bottom:solid navy 1px; 
}
div#entete {
	float:left;
	width:72%;
	min-width:380px;
}
div#titre {
	display:inline-block;
	font-size:120%;
}
div#logo {
	float:left;
	margin-top:2px;
	text-align:right;
	width:28%;
	min-width:150px;
}
@media screen and (max-width:556px) { div#logo { width:100%; } }

/* ---------------- Menu déroulant ---------------- */
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 146px;
	z-index: 1;
	border-top:solid navy 1px;
	box-shadow:3px 3px 3px grey ;
	}
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover  { cursor:pointer; }

.dropdown-content a {
	color:navy;
	font-size:110%;
	padding: 10px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content a:hover { background-color: orange; }


/* --------------- Blocs principaux -------------- */
div#conteneur {
  background-color:#fff;
  position:relative;
  min-width:320px;
  max-width:1024px;
  min-height:100vh;
  margin-left:auto;
  margin-right:auto;
  margin-top:-10px;
  margin-bottom:-10px;
  border:solid navy 1px ;
  padding-top:0px;
}

div#contenu {
  padding:20px 2em 20px 2em;
}

/* ------------ div de la page "jouer" ----------- */

div#jeux {
  float:left;
  width:50%;
  min-width:350px; 
  padding-bottom:2ex;  
}
div#parametres {
  float:left;
  width:50%;
  min-width:350px;
}


/* --------------- Boutons normaux --------------- */
button {
	background:linear-gradient(to bottom, #efefef 30%, #d6d6d6 80%);
	background-color:#efefef;
	border-radius:1px;
	border:0.5px solid #707070;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family:Tahoma, Arial, sans-serif;
	padding:0.5px 1ex;
}
button:hover {
	background:linear-gradient(to bottom, #e4f4fc 30%, #b2e0f9 80%);
	background-color:#e4f4fc;
}
button:active {
	background:linear-gradient(to bottom, #e4f4fc 30%, #86c6e8 80%);
}

/* -------------- Boutons style GR -------------- */
a.gr-btn {
	display:inline-block;
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
	color:black;
	text-decoration:none;
	background-color:#ffff99;
	margin:5px 3px;
	padding: 13px 0px;
	border-radius:4px;
	border:solid orange 1px;
	text-align:center;
}
a.gr-btn:hover {
	background-color:#ffee4c;
	border:solid #ff6400 1px;
	cursor:pointer;
}
a.menu {
	padding: 5px 0px;
}

div.regle {
  padding:1ex 1em;
  margin-top:1ex;
  margin-bottom:1ex;
  background-color:#ffff99;
  border:orange solid 1px;
}

h1 {
  text-align:left;
  font-weight:normal;
  font-size:120%;
  padding-left:1em ;
}

h2 {
  text-align:left;
  font-size:120%;
  margin-top:1.5ex;
  /*background-color:#ffff99;*/
  padding-top:3px;
  padding-bottom:3px;
  margin-right:1em;
}

h3 {
  text-align:left;
  font-size:100%;
  margin-top:2.5ex;
  margin-bottom:1ex;
}

p, ol, ul, li, blockquote {
  margin-top:6px;	
  margin-bottom:6px;
  line-height:2.5ex;
}
blockquote {
  font-style:italic;
}
summary {
  font-size:80%;
  font-style:italic;
  cursor:pointer;
}

span.keycap {
  display:inline-block;
  min-width:1.2em;
  padding:0 1px;
  background: #faf6f6;
  color: navy;
  border:1px solid #edd;
  border-right:2px solid #baa;
  border-bottom:2px solid #baa;
  text-align:center;
}

span.mg {
  color:rgb(255, 110, 0);
  display:inline-block;
  padding-left:2px;
  padding-right:2px;
}
span.ml {
  color:blue; 
  display:inline-block;
  padding-left:2px;
  padding-right:2px;
}
span.grp {
  display:inline-block;
  padding-left:2px;
  padding-right:2px;
}

div#video {
  position:relative;
  min-width:640px;
  max-width:660px;
  margin:0 auto;
}

details, p.intro {
	margin:0.5ex 1em;
}

input {
	margin-left:1em;
	margin-top:0.5ex;
	padding:3px 10px;
	cursor:pointer;
}

i, blockquote {
	color:#00802b;
}


/* Page du jeu */

div#suivante {
  position:relative;
  text-align:right;
  bottom:2em;
}

div#aide {
  position:fixed;
  top:10px;
  right:10px;
  text-align:right
}


/* Orientation paysage */
@media screen and (min-aspect-ratio:5/4) {
  div#blocsvg {
    position:relative;
    top:0;
    width:140vh;
	/*max-height:100vh;*/
    max-width:840px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  button.portable {
    width:40px;
    height:12.5%;
  }
  button#g { position:fixed; bottom:0; left:0; }
  button#r { position:fixed; bottom:12.5%; left:0; }
  button#i { position:fixed; bottom:25%; left:0; }
  button#e { position:fixed; bottom:37.5%; left:0; }
  button#b { position:fixed; bottom:37.5%; right:0; }
  button#s { position:fixed; bottom:25%; right:0%; }
  button#v { position:fixed; bottom:12.5%; right:0; }
  button#h { position:fixed; bottom:0; right:0; }
}

/* Orientation portrait */
@media screen and (max-aspect-ratio:5/4) {
  div#blocsvg {
	margin-bottom:30px;
    max-height:570px;
    max-width:840px;
    margin-left:auto;
    margin-right:auto;
    overflow:visible;
    text-align:center;
  }
  button.portable {
    width:11%;
    height:30px;
  }

  div#boutons {
    position:fixed;
    bottom:0;
    width:100%;
    max-width:840px;
    margin:0 auto;
	margin-left:-1ex;
	text-align:center;
  }
}

/* Taille de la phrase affichable en fonction de la largeur */
@media screen and (max-width:420px) { div#phrase { font-size:10px; max-width:120px; } button { font-size:70%; } div#aide { display:none; } }
@media screen and (min-width:420px) { div#phrase { font-size:11px; max-width:160px;} div#aide { display:none; } }
@media screen and (min-width:525px) { div#phrase { font-size:12px; max-width:200px;}  div#aide { display:none; }}
@media screen and (min-width:630px) { div#phrase { font-size:13px; max-width:240px;}  div#aide { display:block; }}
@media screen and (min-width:735px) { div#phrase { font-size:14px; max-width:280px;} }
@media screen and (min-width:840px) { div#phrase { font-size:15px; max-width:320px;} }


div#phrase {
	position:absolute;
	top:10px;
	left:10px;
	text-align:left;
	font-style:italic;
	color:navy;
}
div#phrase:hover {
	color:white;
	background-color:white;
}