:root{
--sombre: rgb(0,49,79);
--bleu: rgb(57,169,220);
--bleufonce: rgb(98,142,255);
--rouge: rgb(215,128,175);
--rose: rgb(50, 60, 65);
--jaune: rgb(250,192,31);
--blanc: rgba(254,239,217);
--bouton-hover: rgba(30,35,40,1);

--bandeaufond:rgb(57,169,220);
--bandeau:  rgb(250,192,31);
}

body { 
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	background-color: var(--blanc);
	color: var(--sombre); 
}

.container {
  display: flex;
  width: 100%;
 }

h1 {
 	text-align : center; 
 	margin-top:20px;
 	margin-bottom:20px
 	font-size: 1.5em;
 	color: var(--rouge);
 } 

h2 {
 	text-align : center; 
 	margin-top:10px;
 	margin-bottom:10px
 	font-size: 1.1em;
 	color: var(--blanc);
 } 
 
 
 h3 {
 	text-align: center;
 	font-size: 1em;
 	color: var(--blanc);
 }
 
 * {
  box-sizing: border-box;
}

 #textepageaccueil {
	width: 80%; 
	margin: 5% auto; 
	text-align: center; 
	font-size: 0.7em; 
	color: #var(--sombre);
 }


 /* Create four equal columns that floats next to each other */
.column {
  float: left;
}

.row {
   width: 100%;
} 
/* Clear floats after the columns */
.row:after {
  clear: both;
}

#presentation1 {
	  margin : auto;
	  width: 100%;
   }

#presentation2 {
   margin : auto;   
   width: 100%;
   }

 #bandeauHaut {
     position : fixed;
     left : 0px ;
     top : 0px;
     z-index : 99 ;
	  font-size: 0.7em;
	  line-height: 0.7em;
	  padding: 5px 0;
	  background-color: var(--bandeaufond);
	  color: var(--bandeau);
	  text-align:center; 
	  vertical-align: middle;
	  width:100%;
	  clear: both;
 }   
 
 #bandeauBas {
     position : fixed;
     left : 0px ;
     bottom : 0px;
	  font-size: 0.8em;
	  line-height: 0.8em;
	  padding: 10px 0;
	  vertical-align: middle;
	  background-color: var(--bandeaufond);
	  color: var(--bandeau);
	  text-align:center; 
	  vertical-align: middle;
	  width:100%;
 }  
 
  #bandeauBasEnigme {
     position : fixed;
     left : 0px ;
     bottom : 0px;
     z-index : 99 ;
	  font-size: 1em;
	  line-height: 1em;
	  padding: 10px 0;
	  vertical-align: middle;
	  background-color: var(--bandeaufond);
	  color: var(--bandeau);
	  text-align:center; 
	  vertical-align: middle;
	  width:100%;
 }  
 
input[type=button], input[type=submit], input[type=reset], button {
  border-radius: 15px;
  box-shadow: 0 0.7em 1.2em rgba(25, 25, 25, 0.5);
  background-color: var(--bleu);
  border: none;
  color: var(--blanc);
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-weight: bold;
}


 input[type=submit]:hover, button:hover {

  color: black;
  }

 /* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid  var(--jaune);;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background:  var(--jaune);  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background:  var(--sombre);  
}

 /* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid  var(--jaune);;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background:  var(--jaune);  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background:  var(--sombre);  
}

/* ********************************** BOITES ************************************************* */

.imgintro {
	width: 90%;
	margin-left: auto;
   margin-right: auto;
	z-index: 1;
 }
 
.divimage {
	width: 100%;
	margin: 10px auto 10px;
	text-align: center;
	z-index: 1;
 } 
 
 #encart1,#encart2,#encart3, #encart4 {
   position: fixed;
   display: flex;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 50px;
	padding: 10px;
	overflow : auto;
	z-index: 99;
	background-color: var(--sombre);
	color: var(--jaune);
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 80%;
	text-align: center;
	font-size: 0.6em;
	clear: both;
 }
 
/* ********************************** ECRITURES ************************************************* */

 #reseausociaux {
 text-align: left;
 margin-top: 10px;
 margin-left: 30%;
 line-height: 1.2em
 vertical-align: middle;
 }
 
  #reseausociaux a {
  	margin-left:10px;
 	color:var(--blanc);
 }

#txt-pageinfo {
		text-align: justify; 
		font-size: 0.7em;
		line-height: 1em;
 }

#cadretexte {
	width:90%; 
	margin : 20px auto 5px; 
	background-color:var(--rouge);
	padding: 2px 10px 10px; 
 } 

#texte {
	color: var(--sombre);
	font-family: sans-serif;
	text-align: justify; 
	font-size: 0.6em;
	}
	
#txtintrigue {
	width: 80%;
	background: #88ba1c;  
	boder: red dash 1px; 
	margin : 10px auto 10px ; 
	padding: 40px; border-radius: 50% 20% / 10% 40%; 
	text-align:justify; 
	opacity:50%;
}

#bandeauson
 {
     display: block;
     float: right;
     margin-right:10px;
     margin-top:5px; 
   }

/* ********************************** IMAGES ************************************************* */

#imageaccueiltitre {
  display: block;
  margin-top: 1.2em;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
 } 
 
#imageaccueiljeu {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-height: 280px
 }
 
#imageaccueiljeu:hover {
  opacity: 0.5;
 }
 
#imgAudio
 {
     display: block;
     float: right;
     margin-right:10px;
     width: 20px;
     height : 18px;
   }
   
#detec {
 	   visibility: visible;
  		margin-left: auto;
  		margin-right: auto; 
  }

.imagbandeaubas {
	opacity: 100%;
	margin: 0 10px 0;
	}	

/* **************************************************************************************************** */
@media screen and (max-width: 1900px) {
	body {
		font-size: 3em;
		overflow:auto;
	 }
 
  .column {
    width: 50%;
  }
  
  #formulaire {
  		margin-top: 1.5em;
  		line-height: 1.5em;
	  }

  #nomcode {
  		margin-bottom: 1.2em;
  }


 img[usemap]  {
	   width: 60%;
	} 
	
 #txtintrigue {
		margin-top: 70px;	
	}

.divimage {
	margin-top: 70px;	
  }

}

@media screen and (max-width: 1200px) {
	body {
		font-size: 2em;
				overflow:auto;
	 }
 
  .column {
    width: 50%;
  }
 
  #formulaire {
  	   margin-top: 5%;
  		line-height: 1.7em;
	  }

 #txtintrigue {
		margin-top: 70px;	
	}

.divimage {
	margin-top: 70px;	
  }
  
 }

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

	body {
		font-size: 1.5em;
	 }
 
  .column {
    width: 100%;
  }
  
  #formulaire {
  		line-height: 0.9em;
	  }

   #texte { 
  		font-size: 0.6em; }
}