body { 
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	 /*position: static; */
	background-color: white;
}

.container {
  display: flex;
  width: 100%;
 }
 
h1 {
 	text-align : center; 
 	margin-top:20px;
 	margin-bottom:20px
 	font-size: 1.5em;
 	color: white;
 } 

h2 {
 	text-align : center; 
 	margin-top:10px;
 	margin-bottom:10px
 	font-size: 1.1em;
 	color: white;
 } 
 
 
 h3 {
 	text-align: center;
 	font-size: 1em;
 	color: white;
 }
 
 * {
  box-sizing: border-box;
}
 /* 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;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

#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: #fee9e1;
	  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: #fee9e1;
	  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: #fee9e1;
	  text-align:center; 
	  vertical-align: middle;
	  width:100%;
 }  
 input[type=submit], button {
  --b: 3px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #BD5532;
  
  padding: calc(.05em + var(--s)) calc(.3em + var(--s));
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}
input[type=submit]:hover, button:hover,button:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .05em;
}
input[type=submit]:active, button:active {
  background: var(--c);
  color: #fff;
}

input[type=submit],button {
   font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  cursor: pointer;
  border: none;
  margin: .1em;
}
 /* 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 yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

/* ********************************** 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: grey;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 80%;
	text-align: center;
	font-size: 0.6em;
	clear: both;
 }
 
/* ********************************** ECRITURES ************************************************* */



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

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

#texte {
	color: black;
	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 ************************************************* */

#imgtitre {
  display: block;
  height: 2em;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
 } 
 
#imgaccueil {
  display: block;
  height: 9%;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
 }
 
#imgAudio
 {
     display: block;
     float: right;
     margin-right:10px;
     width: 20px;
     height : 18px;
   }
   
#detec {
 	   visibility: visible;
  		margin-left: auto;
  		margin-right: auto; 
  }
  
 img[usemap]  {
	   height: auto;
	   max-width: 90%;
	   width: 70%;
      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 {
  		line-height: 1.5em;
	  }

 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 {
  		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; }
}