html {
  height: 100vh;
  box-sizing: border-box;
  margin:0px;
  /* overflow:hidden; */
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
@font-face
{
	font-family: 'roboto';
	src: url('Resources/Police/Roboto.ttf');
}
body
{
	margin:0;
	font-family:roboto;
	text-align: center;
	font-size:16px;
	min-height:98vh;
}
header
{
	text-align:left;
	margin:auto;
	font-size:2.8vw;
	font-family:roboto;
	width:max-content;
}
footer
{
	display:block;
	position:fixed;
	bottom:-5px;
	left:50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
a
{
	text-decoration:none;
	color:black;
}
a:visited{
	text-decoration:none;
	color:black;
}
.a
{
	text-decoration:none;
	color:black;
	filter: drop-shadow(1px 1px 2px white);
}
.a:hover
{
	text-decoration:underline;
	color:black;
}
p{
	background-color:white;
	padding:1vw;
	line-height:3vh;
}
input, textarea{
	border: none;
    border-bottom: solid 1px grey;
    padding: 5px;
    margin: 5px;
    font-size: larger;
	background-color:transparent;
	font-family:roboto;
}
input:focus, textarea:focus{
	border: none;
    border-bottom: solid 1px grey;
}
input:hover, textarea:hover{
	border: none;
    border-bottom: solid 1px grey;
	cursor:pointer;
}
h1, h2, h3, h4{
	font-family:roboto;
	font-weight:bold;
	letter-spacing:2px;
	font-size-adjust:0.5;
	text-transform: uppercase;
}
#tool{
	position:fixed;
	width:100%;
	left:50%;
	transform:translate(-50%,0px);
	z-index:999;
}
#barreInput{
	display:inline-block;
	background-color: white;
    padding: 14px;
    padding-top: 14px;
    padding-bottom: 10px;
}
#btnscd{
	background:transparent;
	margin-right:50%;
	float: inline-end;
	border: solid 2px #90dddb;
	box-shadow:none;
	color:white;
	position:absolute;
	bottom:10px;
	left:50%;
	font-size:45px;
	width:76px;
	text-shadow: 0 0 5px black;
}
.top15{
	padding-top:15vh;
}
.largesmart{
	width:100%;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.center{
	text-align:center;
}
.middle{
	vertical-align:middle;
}
.italic{
	font-style:italic;
}
.marge{
	padding-left:10vw;
	padding-right:10vw;
}
.tuile{
	width:auto;
	text-align:left;
	vertical-align:top;
	padding:10px;
	border-radius:25px;
	box-shadow: black 1px 1px 5px;
	opacity: 0;
	animation: apparitionTuile 1s ease-out forwards;
}
@keyframes apparitionTuile {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.large{
	width:-webkit-fill-available;
	width:-moz-fill-available;
	width:-moz-available;
}
.button{
	/* border:solid 1px #da3722; */
	border-radius:100px;
	padding:10px;
	color:#2c388f;
	font-weight:bold;
	background-color:white;
	font-size:14px;
	white-space:nowrap;
	text-align:center;
	box-shadow: black 1px 1px 5px;
	margin:2px;
}
.button:hover{
	color:white;
	background-color:#2c388f;
	cursor:pointer;
}
.placeholderblanc::-ms-input-placeholder{
	color:white;
}
.placeholderblanc{
	color:white;
}
.placeholderblanc::placeholder {
	color:white;
	opacity:1;
}
.immiddle{
	display:inline;
	vertical-align:middle;
}
.immiddlesmart{
	display:inline;
	vertical-align:middle;
}
.immiddlenosmart :not(smart){
	display:inline;
	vertical-align:middle;
}
.souligne{
	text-decoration-line:underline;
	text-decoration-color:#a9efb5;
	text-decoration-thickness:4px;
	text-underline-offset: 10px;
}
.nosouligne:hover{
	text-decoration-line:underline;
	text-decoration-color:#a9efb5;
	text-decoration-thickness:4px;
	text-underline-offset: 10px;
	animation-name:souligne;
	animation-duration:0.5s;
}
@keyframes souligne{
	0%   {text-decoration-thickness:0px;}
	50%   {text-decoration-thickness:4px;}
	100%   {text-decoration-thickness:4px;}
}
.shadow{
	text-shadow: 1px 1px 10px black;
}
.top{
	vertical-align:top;
}
.strong{
	font-weight:bold;
}
.border{
	border:solid 1px black;
}
.hide{
	display:none;
}
.cover {
	/* width: 100%; */
	height: -webkit-fill-available;
	position: absolute;
	top: 0;
	left: 50%;
	transform:translateX(-50%);
	transition: opacity 1s ease-in-out;
	opacity: 0;
}
.cover.active {
	opacity: 1;
	z-index: 1;
}
.chroma{
	writing-mode: vertical-rl; /* alternative à rotate */
	transform: rotate(180deg); /* pour corriger l’orientation naturelle de vertical-rl */
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	/* padding: 10px; */
}
.chroma img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  display: block;
  background-color: #79303F;
  mix-blend-mode: multiply;
}