/*	
::-webkit-scrollbar { width:.8em; height:8px; background-color:transparent; }
::-webkit-scrollbar-thumb { background-color:var(--ugrey) }
/*


/*	contenu article fade */
@keyframes fadein { 0% { opacity:0; transform:scale(1.05,1.05);} 100% {opacity:1; transform:scale(1,1);} }
@keyframes fadeout { 0% { opacity:1; transform:scale(1,1);} 100% {opacity:0; transform:scale(.9,.9);} }
@keyframes focuszoom { 0% { transform:scale(1,1);} 33% { transform:scale(.9,.9);} 66% { transform:scale(1.1,1.1);} 100% { transform:scale(1,1);} }
@keyframes markup { 0% { opacity:0; transform:scale(.95,.95);} 100% {opacity:1; transform:scale(1.0,1.0);} }

*
{	scrollbar-color: var(--achille) transparent;
	scrollbar-width:thin;
}

HTML,BODY
{	margin:0px;
	padding:0px;
	/*font-size:1.0em;*/
	font-family:'Poppins',arial,sans-serif;	
	/* Fix fullScreen */
	background-color:#FFF !important;
}

CANVAS { background-color:#004; }

U	{ text-decoration:none; color:#8A4; }
S	{ text-decoration:none; color:#C32; }
I	{ font-style:normal; color:inherit; }

MARK
{ 	display:block; margin:0; outline:none; border:none; background-color:transparent;
	animation: markup ease .5s; animation-iteration-count:1; animation-fill-mode:forwards;
}

MARK U, MARK S { border-radius:1em; padding:.5em; display:block; text-align:center; }
MARK U { background-color:#8A4; color:#FFF; text-shadow:0px 0px .5em RGBA(0,0,0,.5); }
MARK S { background-color:#C32; color:#FFF; text-shadow:0px 0px .5em RGBA(0,0,0,.5); }

DIV, A, B, A>I { transition:all .3s ease 0s; text-decoration:none; color:inherit; }
A { transition:none .3s ease 0s; transition-property:color,background-color,opacity; }

A { cursor:pointer; font-weight:normal; user-select:none; } /* pour ! href */
HR { border:0px; height:1em; }

B { font-weight:bold; }

I /* icons */
{	vertical-align:middle; font-size:160%;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;	
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	padding-right:.2em;
}

/* --- A ---- */

A { color:inherit; text-decoration:none; }

H1,H2,H3 { margin:0; font-weight:normal; }

MAIN,SECTION,DIV,SPAN,HEADER,FOOTER,A,B,TEXTAREA,ARTICLE,NAV
{	box-sizing:border-box;
}

PRE
{ 	word-break:break-all; overflow-wrap: anywhere; white-space:pre-wrap;
	background-color:RGBA(250,250,250,.1); padding:1em;
}

PRE>H3 { background-color:RGBA(250,250,250,.3); border:none; margin-top:0px !important; }

INPUT { outline:none; }

DATALIST { display:none; }

UL { padding-left:1em; }
LI { list-style:square; font-size:inherit; margin-bottom:.5em; }


SUB { font-size:80%; display:block; color:var(--grey); font-weight:normal; }

SUB>B { font-weight:normal; color:var(--black); }

TABLE TD SUB { font-size:80%; color:var(--grey); display:block; }


/* --- FORM --- */

FORM { margin:0px; }

TEXTAREA,INPUT,SELECT
{ 	width:100%; color:var(--black); background:transparent; border:none;
	padding:.4em; box-sizing:border-box; direction:ltr; outline:none;
	font-size:100%; background-color:var(--input); border-radius:0px; border:1px solid transparent; border-radius:.5em;
} 

OPTION { color:var(--black); background-color:var(--white); }

TEXTAREA { resize:none; font-family:inherit; overflow-y:scroll; margin:0; }

INPUT:focus, TEXTAREA:focus { background-color:var(--white); border:1px solid var(--input); } 

DIV.input { position: relative; margin-top:1em; }
DIV.input>INPUT { padding-left:.75em; }
DIV.input>SPAN
{ 	transition:top,left,font-size .3s ease;

	display:block; margin:0; position:absolute; top:-1.2em; left:0.5em;
	font-size:80%;
	opacity:.5; background: none; pointer-events: none; 
}

/* DIV.input>INPUT:placeholder-shown+SPAN { top:.3em; left:1em; font-size:100%; } */


INPUT[type=range] { width:80%; }

SPAN.range
{ 	display:inline-block; font-size:80%; color:var(--white); border-radius:1em; padding:.5em; 
	background-color:var(--second); vertical-align:super; min-width:2em; text-align:center; 
	position:absolute; z-index:2;
}

SPAN.range.off
{	background-color:#C22;
}


/* DIV.popup { animation: focuszoom ease 1s; } */

/*	V3 - review */

LABEL
{ 	display:block; color:var(--black); font-weight:bold; font-size:125%; margin:1em 0 2em 0;
	font-family:"Roboto Condensed";
}

LABEL>I { background-color:transparent !important; /* label direct, sans lien */ }

ARTICLE H1 { font-size:130%; font-weight:bold; margin:0;font-family:"Roboto Condensed"; }
ARTICLE LI { list-style:square; margin:0; }
ARTICLE LI::marker { color:var(--alpha); }


blockquote
{	font-size:100%; font-style:italic;
	padding:0 2em 0 0 ;
	margin:0 0 1em 0; border-radius:1em;
}

blockquote img
{ 	width:5em; height:5em; margin-right:.5em; object-fit:cover;
	border:1px solid var(--ugrey); border-radius:.2em;
	float:left; 
}

a.outside { color:var(--achille); }
a.outside:hover { color:inherit; }

article.article blockquote
{	padding:.5em 1em .5em 2em; border-radius:0px;
	border-left:3px solid var(--grey);
}

article.article blockquote div
{	margin-top:1em; padding-left:50%;
}

article.article sub
{	display:inline; font-size:inherit; vertical-align:baseline;
}

article.article a.link
{	color:var(--theme);
}

/* compteur coms */
a sub.coms, sub.count
{ 	display:inline-block; color:var(--white);  background-color:var(--achille); vertical-align:baseline; 
	padding:.5em; width:2em; line-height:1em; text-align:center; border-radius:100%;
}