/* balise */

html {
	width:					100%;
	min-height:				100%;
}

body {
	margin:					0;
	padding:				0;
	width:					100%;
	min-height:				100%;
	font-family:			Arial;
	background-color:		#eeef;
}

* {
	transition:				1s ease all;
}


:root {
	color-scheme:			light dark;
}

@media(orientation: landscape){
	html{
		zoom:				100% !important;
	}
}

/* styles par balise */



/* couleurs des liens hypertext */

a {
	transition:				unset;
}

a:link {
	text-decoration:		underline dotted;
}

a:visited {
	text-decoration:		underline dotted;
}

a:active {
	color:					orange;
	text-decoration:		underline;
}

a:hover {
	text-decoration:		underline;
}

a img {
	-webkit-tap-highlight-color:transparent;
}



/* ids */

#titletop {
	display:				flex;
	align-items:			center;
	justify-content:		center;
	gap:					0px 20px;
	flex-wrap:				wrap;
	anchor-name:				--topfixed;
	position:				sticky;
	top:						0px;
	left:					0px;
	z-index:				900;
	background:				linear-gradient(to right,orange,#00fec7) no-repeat;
	background-position:	center;
	width:					100%;
	background-size:		100%;
	text-align:				center;
	padding:				20px 0px;
	text-decoration:		underline;
}

#menu {
	position:				fixed;
	top:					0px;
	left:					0px;
	z-index:				900;
	anchor-name:			--topfixed;
	background:				linear-gradient(to right,orange,#00fec7) repeat-y;
	background-position:	center;
	height:					35px;
	width:					100%;
	text-align:				center;
	background-size:		100%;
	padding-top:			5px;
}

#menuunder {
	height:					50px;
}

#btnuser {
	position:				fixed;
	top:					5px;
	right:					5px;
	z-index:				900;
	cursor:					pointer;
}

#menuuser {
	position:				fixed;
	z-index:				901;
	top:					45px;
	right:					5px;
	min-width:				200px;
	box-shadow:				0px 0px 10px #aaa;
	background-color:		#fff5;
	border-radius:			10px;
	border:					black 1px solid;
	padding:				0px;
	backdrop-filter:		blur(10px);
	-webkit-backdrop-filter:blur(10px);
	pointer-events:			none;
	opacity:				0;
	transition:				all 0.6s ease;
}

#menuuser span {
	background-color:		black;
	display:				block;
	height:					1px;
	width:					100%;
}

#grismenunav {
	position:				fixed;
	z-index:				909;
	top:					0px;
	left:					0px;
	height:					100%;
	width:					100%;
	background-color:		#0008;
	opacity:				0;
	pointer-events:			none;
	backdrop-filter:		blur(10px);
	-webkit-backdrop-filter:blur(10px);
	transition:				all 1s ease;
}

#menunav {
	position:				fixed;
	z-index:				910;
	top:					0px;
	left:					0px;
	height:					100%;
	width:					400px;
	max-width:				calc(100% - 100px);
	transform:				translate(-100%,0%);
	/* box-shadow:				5px 0px 5px #aaa; */
	background-color:		orange;
	background:				linear-gradient(to bottom,orange,#00fec7) no-repeat,
							linear-gradient(to bottom,#ffa50040,#00fec740) no-repeat,
							white;
	background-size:		10px 100%,
							100% 100%,
							100% 100%;
	background-position:	right;
	padding:				45px 15px 5px 5px;
	transition:				all 1s ease;
}

#menunav .button{
	padding:				1px;
	margin:					10px 0px;
	color:					black;
}

#menuuser a{
	display:				block;
	padding:				10px	!important;
	margin:					0px;
	text-align:				center;
	cursor:					pointer;
	color:					black;
	text-decoration:		none;
}

#btnmenu{
	position:				fixed;
	top:					5px;
	left:					5px;
	z-index:				912;
	cursor:					pointer;
	transition:				all 1s ease;
}

#closemenu{
	position:				fixed;
	top:					7px;
	left:					7px;
	z-index:				913;
	cursor:					pointer;
	transition:				all 1s ease;
	pointer-events:			none;
	opacity:				0;
}

#gradblur{
	position-anchor:			--topfixed;
	position:				fixed;
	top:					anchor(bottom);
	z-index:					900;
	width:					100%;
	background:				linear-gradient(to right, orange, #00fec7);
	mask-image:				linear-gradient(to bottom, black, transparent);
	-webkit-mask-image:		linear-gradient(to bottom, black, transparent);
	height:					10px;
}

#gradmenu{
	position:				fixed;
	top:					40px;
	width:					100%;
	background:				linear-gradient(to right, orange, #00fec7);
	mask-image:				linear-gradient(to bottom, black, transparent);
	-webkit-mask-image:		linear-gradient(to bottom, black, transparent);
	height:					10px;
}

#gradtitle{
	position:				sticky;
	top:					0px;
	width:					100%;
	background:				linear-gradient(to bottom, #0000, #fff);
	height:					10px;
	mask-image:				linear-gradient(to bottom, black, transparent);
	-webkit-mask-image:		linear-gradient(to bottom, black, transparent);
}

#mg {
	text-align:				left;
	
}

#end {
	background:				linear-gradient(to right, orange,#00fec7) repeat-y;
	background-position:	center;
	height:					300;
	width:					100%;
	background-size:		100%;
}

#cookie {
	display:				block;
	position:				fixed;
	z-index:				109;
	padding:				10px 10px 10px 10px;
	background:				#fff;
	box-shadow:				0px 0px 10px #888;
	left:					0px;
	right:					0px;
	bottom:					0px;
	text-align:				center;
	
}

#cookie .button {
	display:				block;
	margin:					10px auto;
}

#iframecookie {
	border:					none;
	margin:					0px;
	padding:				0px;
	height:					100%;
	width:					100%;
}

#goback {
	position-anchor:		--topfixed;
	position:				fixed;
	left:					10px;
	top:					calc(anchor(bottom) + 10px);
	height:					40px;
	width:					40px;
	box-shadow:				0px 0px 10px #888;
	border-radius:			100%;
	background:				#fff;
	z-index:					901;
}

#goback a {
	color:					black;
	text-decoration:		none !important;
	-webkit-tap-highlight-color: transparent;
}

#goback img {
	height:					40px;
	width:					40px;
}

#undergoback {
	height:					50px;
}



/* class */

.p {
	background:				white;
	border-radius:			10px;
	margin:					10px 20px;
	padding:				10px;
	text-align:			 	center;
}

.invalid {
	background-color:		#f005;
	background-size:		310px;
	border-radius:			5px;
	border-color:			#f00;
	border-style:			solide;
	padding:				5px;
	width:					300px;
	margin:					0 auto;
}

.text {
	padding:				5px;
}

.nobottom {
	margin-bottom:			0px ;
}

.redtx {
	color:					#f00;
}

.greentx{
	color:					#0b0;
}

iframe.noborder {
	border:					none;
	margin:					0px;
	padding:				0px;
	height:					100%;
	width:					100%;
}

.centerhv {
	top:					50%;
	left:					50%;
	width:					100%;
	text-align:				center;
	transform:				translate(-50%, -50%); 
	position:				absolute;
}

.center {
	text-align:				center;
}

.title {
	font-size:				2em;
	text-decoration:			underline;
	font-weight:				bold;
	text-align:				center;
	margin:					5px auto 15px auto;
}

.button {
	border-style:			none;
	border-width:			0px;
	border-radius:			5px 5px 0px 0px;
	background:				linear-gradient(to right, #ffa50070,#00fec770) no-repeat,
							linear-gradient(to right, orange,#00fec7) no-repeat,
							linear-gradient(to right, orange,#00fec7) no-repeat;
	background-size:		100% 100%,100% 2px, 100% 0%;
	background-position:	bottom;
	min-height:				25px;
	text-decoration:		none !important;
	text-align:				center;
	-webkit-tap-highlight-color: transparent;
	transition:				all 0.6s ease;
	cursor:					pointer;
}

.button:hover {
	background-size:		100% 100%, 100% 25px, 100% 100%;
}

a.button {
	display:				flex;
	align-items:			center;
	justify-content:		center;
}

input.button {
	display:				inline-block;
}

.button.option{ 
	
}

/* .co */

.form {
	position:				relative;
	text-align:				center;
	display:				block;
	padding:				5px;
}

.form input {
	padding:				5px;
	width:					300px;
	height:					25px;
	color:					black;
	
	border-style:			none none solid none;
	border-color:			black;
	border-width:			1px;
	outline:				none;
	
	z-index:				9;
	position:				relative;
	
	background:				transparent;
	transition:				border 0.5s ease;

}

.form input:focus{
	border-color:			orange;
	border-width:			2px;
}

.form input:read-only {
	background:				#aaa;
}

.form input:autofill {
	z-index:				1;
	background:				radial-gradient(#88f, #0000) !important;
}

.form span{
	position:				absolute;
	z-index:				10;
	left:					50%;
	top:					50%;
	transform:				translate(-50%, -50%); 
	color:					#777;
	background:				none;
	pointer-events:			none;
	transition:				all 0.3s ease-in-out;
}

/*.form::after{
	content:				"";
	position:				absolute;
	z-index:				2;
	bottom:					23px;
	left:					50%;
	transform:				translate(-50%, 0%); 
	width:					312px;
	height:					4px;
	transition:				all 0.3s ease-in-out;
	background:				#0000;
	box-shadow:				0px 19px 7px transparent;
}*/

.form:has(input:focus)::after{
	box-shadow:				0px 19px 7px orange;
}

.form:has(input:focus) span,
.form:has(input:not(:placeholder-shown)) span{
	top:					0;
	transform:				translate(-50%, -75%);
	font-size:				12px;
	color:					#333;
}

input.sub{
	width:					300px;/*
	background-color:		transparent;
	border:					2px solid transparent;
	border-radius:			50px;
	border-left-color:		orange;
	border-left-radius:		50px;
	border-right-color:		#00fec7;
	border-right-radius:		50px;
	/*border-width:			1px;
	border-style:			solid;
	border-color:			black;
	border-radius:			50px;
	box-shadow:				0px 0px 10px #aaa;*/
	/*cursor:					pointer;*/
}

/* dark theme */

@media (prefers-color-scheme: dark){
	body {
		background-color:	#111;
		color:				#fff;
	}
}