/*		======		RESET		======*/
:root {
	--Orange:hsl(37,100%,50%);
	--bleu:hsl(195, 100%, 40%);
	--bleuF:hsl(from var(--bleu) h s calc(l - 25));
	--bleuC:hsl(from var(--bleu) h s calc(l + 10));
	--OrangeC:hsl(from var(--Orange) h s 90);
	--GrisC: #eee;
	--GrisF: #333;
	--tp-base-background-color: hsla(230, 5%, 90%, 1.00);
   	--tp-base-shadow-color: hsla(0, 0%, 0%, 0.10);
   	--tp-button-background-color: hsla(230, 7%, 75%, 1.00);
   	--tp-button-background-color-active: hsla(230, 7%, 60%, 1.00);
   	--tp-button-background-color-focus: hsla(230, 7%, 65%, 1.00);
   	--tp-button-background-color-hover: hsla(230, 7%, 70%, 1.00);
   	--tp-button-foreground-color: hsla(230, 10%, 30%, 1.00);
   	--tp-container-background-color: hsla(230, 15%, 30%, 0.20);
   	--tp-container-background-color-active: hsla(230, 15%, 30%, 0.32);
   	--tp-container-background-color-focus: hsla(230, 15%, 30%, 0.28);
   	--tp-container-background-color-hover: hsla(230, 15%, 30%, 0.24);
   	--tp-container-foreground-color: hsla(230, 10%, 30%, 1.00);
   	--tp-groove-foreground-color: hsla(230, 15%, 30%, 0.10);
   	--tp-input-background-color: hsla(230, 15%, 30%, 0.10);
   	--tp-input-background-color-active: hsla(230, 15%, 30%, 0.22);
   	--tp-input-background-color-focus: hsla(230, 15%, 30%, 0.18);
   	--tp-input-background-color-hover: hsla(230, 15%, 30%, 0.14);
   	--tp-input-foreground-color: hsla(230, 10%, 30%, 1.00);
   	--tp-label-foreground-color: hsla(230, 10%, 30%, 0.70);
   	--tp-monitor-background-color: hsla(230, 15%, 30%, 0.10);
   	--tp-monitor-foreground-color: hsla(230, 10%, 30%, 0.50);
}
html{box-sizing:border-box;font-size: calc(0.6rem + .6vw)}
*, *::after, *::before {box-sizing:inherit}
* {margin:0}
body {font-family: system-ui;line-height:1.3;font-weight:300;background:#404040;color:#FFF;}
img,picture,video,canvas,svg{display:block;max-width:100%}
p,h1,h2,h3,h4{overflow-wrap:break-word}	

/*		======		GENERAL		======*/
h1,h2,h3{text-transform:uppercase}
strong{font-weight:500}
a{cursor:pointer;text-decoration:none}
i:not(#copyright *) {padding-right:0.5em}
ol,ul{padding-left:1rem;}
li{font-size:1rem;line-height:1.6rem}	
::marker{color:var(--Orange);font-size:0.8rem}
figure{margin:1rem 0}
.attention{font-size:.85rem;border-radius:5px;padding:12px;margin-top:1rem;background:var(--Orange)}
blockquote{
	display:block;
	border-left:0.5rem solid hsl(from var(--Orange) h s l /.2);
	margin:1rem 0;
	padding: 0 0 0 2rem;
	font-style: italic;
	text-align: justify
}		
blockquote cite{display:block;font-size:0.8rem;padding:0;margin:.5rem 0 0 0;color:var(--bleu);font-style:normal}

/*	=================	RUBAN GITHUB 	===================		*/
/* 		"Fork me on GitHub" CSS ribbon v0.2.3 | MIT License 	*/ 
/*	https://github.com/simonwhitaker/github-fork-ribbon-css  	*/
.github-fork-ribbon{
	width:12.1em;
	height:12.1em;
	position:absolute;
	overflow:hidden;
	top:0;
	right:0;
	z-index:9999;
	pointer-events:none;
	font-size:.8em;
	text-decoration:none;
	text-indent:-999999px;
}
.github-fork-ribbon.fixed {position: fixed;}
.github-fork-ribbon:hover, .github-fork-ribbon:active{background-color:rgba(0,0,0,0.0)}
.github-fork-ribbon:before, .github-fork-ribbon:after{
	position:absolute;
	display:block;
	width:15.38em;
	height: 1.54em;
	top: 3.23em;
	right: -3.23em;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg)
}
.github-fork-ribbon:before {
  content: "";
  padding: .38em 0;
  /* Set the base colour */
  background-color: #09C;
  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  /* Add a drop shadow */
  -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.github-fork-ribbon:after {
  /* Set the text from the data-ribbon attribute */
  content: attr(data-ribbon);
  /* Set the text properties */
  color: #fff;
  font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.54em;
  text-decoration: none;
  text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
  text-align: center;
  text-indent: 0;
  /* Set the layout properties */
  padding: .15em 0;
  margin: .15em 0;
  /* Add "stitching" effect */
  border-width: .08em 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {right: auto;left: 0}
.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {top: auto;bottom: 0}
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {right: auto;left: -3.23em}
.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {top: auto;bottom: 3.23em;}
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/*	====	HEADER	====	*/
header{
	display:flex;
	justify-content:space-around;
	align-items:center;
	width:100%;
	padding:1rem;
	background:var(--Orange);
	border-bottom:.5rem solid #fff
}
header h1 {color:var(--OrangeC);font-weight:lighter;font-size:2rem}

/*	====	BOUTONS	====	*/
.popover-btn{
	padding: 0.5rem 1rem;
	background:var(--tp-button-background-color);
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 5px;
	color:var(--GrisC);
	margin:0.4rem;	
	cursor:pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.popover-btn.active{background:#fff;color:var(--bleuF)}
.popover-btn:not(.active):hover{
	background: rgb(255 255 255 / 0.2);
	border: 1px solid rgb(255 255 255 / 0.6);
	transform: translateY(-2px)
}

/*	====	POPOVER	====	*/
#informations,#explorations{
	width:max(320px,50vw);
	height:fit-content;
	max-height:80vh;
	border: 5px solid #fff;
	border-radius:.6em;
	background:#404040;
	color:#fff;
	margin:auto;
	padding:.5rem;
	inset: 0;
	overflow-y:scroll;		
	overflow-x:auto;	
	text-align:justify;
	box-shadow: 0px 0px 30px 10px var(--GrisF);
	
}
#informations h3,#explorations h3{font-size:1rem;color:var(--Orange);margin:1rem 0}
#informations h4,#explorations h4{font-size:1rem;margin:1rem 0}
#informations a,#explorations a{
/*	color:#51c3fa;*/
	color:var(--bleuC);
	padding:3px;
	border-radius:3px;
	transition:all .3s ease-in-out
}
#informations a:hover,#explorations a:hover{background:#ccc;color:#fff;text-shadow: #fff 0px 0px 10px}
#informations .copyright{
	border-bottom:1px solid #666;
	font-size:.8rem;
	font-variant-caps: all-small-caps;
	display:flex;
	flex-flow:row;
	justify-content:space-between
}
#informations figure,#explorations figure{background:white}
#informations figure img,#explorations figure img{padding:1rem;margin:auto;max-width:75%}
#informations figcaption,#explorations figcaption{
	color:var(--GrisF);
	font-size:.8rem;
	line-height:1.2rem;
	font-style:oblique;
	text-align:center
}


/*	====	SIMULATION	====	*/
#sketch{position:relative}
figure.simu{
	display:flex;
	flex-flow:wrap-reverse;
	justify-content:space-evenly;
	gap:1rem
}
figure.simu > figcaption{
	width: 100vw;
	padding:.5rem;
	text-align: center;
	background:var(--tp-button-background-color);
}
figure.simu .control{
	display:flex;
	flex-direction:column;
	align-items:start;
	gap: 1rem;
	margin:.5rem;
	min-width: 30vw;
}
figure.simu form{
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 0;
}
form label,form output{margin:0.4rem}
form input[type="range"]{
	-webkit-appearance:none;
	overflow:hidden;
	background:var(--GrisC);
	text-align:center;
	font:inherit;
	border-radius:.5rem;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5) inset
}
form input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none;
	background:var(--bleu);
	height:1rem;
	width:1rem;
	border-radius:50%;
	box-shadow: -1px -1px 5px rgba(0,0,0,.5) inset,-1px -1px 4px 3px var(--bleu) inset,1px 1px 3px rgba(0,0,0,.3),-199px 0 0 198px rgba(0, 153, 204, 0.2)
}
form input[type="range"]:in-range {min-width:20vw}
form input[type="radio"] {opacity:0}
form input[type="radio"] + label{
	text-shadow: 1px 1px 0 rgba(0,0,0,0);
	cursor:pointer;
	padding: 0.5rem;
	background:var(--tp-button-background-color);
	border-radius:5px;
	color:var(--GrisC);
	border: 1px solid rgb(255 255 255 / 0.3);
	transition: background-color 0.25s ease, border-color 0.25s ease
}
form input[type="radio"]:checked+label{background:var(--bleu);text-shadow:1px 1px 0 rgba(0,0,0,0.4);color:#fff}
form input[type="button"]{margin:0.4rem}
input[type="text"] {
  padding: .5rem;
  border: 1px solid #fff;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="text"]:focus {
  border-color:var(--bleuC);
  box-shadow: 0 0 5px rgba(0, 119, 204, 0.3);
}
input[type="text"]:optional {
	background:#ccc;
}
kbd {
	border-radius: 4px;
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5), 0 0 2px #fff inset;
	background-color: #404040;
	font-family: monospace
}



	
/*		======		POUR LA BIBLIO		======*/				
#biblio ol{counter-reset:item;list-style-type:none}
#biblio ol li{counter-increment:item}
#biblio ol li::before {
	background:var(--bleuC);
	content:counter(item);
	padding:.1rem .5rem;
	margin-right:.5rem;
	vertical-align:middle; 
	border-radius:.3rem;
	font-size:0.8rem
}
#biblio .author{font-weight:500}
#biblio .author::after {content:", "}
#biblio .article::after {content:"\201D, "}
#biblio .article::before {content:"\201C"}
#biblio .ouvrage,#biblio .book{font-style:italic}
#biblio .ouvrage::after {content:", "}
#biblio .book::after {content:". "}
#biblio .site a{font: normal small-caps normal 1em Arial, sans-serif}	

/*	====	FOOTER	====	*/
footer{clear:both;color:#fff;height:auto;width:100%;margin:none;padding-top:20px;}
footer p{text-align:center;border-top:1px solid #666;font-size:.85rem;margin:0;padding:10px 0;}
footer a{color:#fff;background:transparent;padding:4px 0}
footer a:focus,footer a:hover {box-shadow:0px -2px 0px #fff inset;border-radius:0;text-shadow:none;background:transparent}
		
@media screen and (min-width:784px) {
	body {font-weight:lighter} 
	#copyright::before {content:'sous licence Creative Commons '} 
}