/* FORM */

textarea { width:100%; height:20em; resize:none; }

input.value  { width:4em; } /* chiffres, pas trop grand... */
input.large  { width:100%; } 

input,textarea,select
{	background-color:RGBA(0,0,0,.2);
	color:white;
	outline:none; border:none;
	padding:.25em; 
	font-family:inherit; font-size:inherit;
	border-radius:.2em;
}

input:focus,textarea:focus { background-color:black; }


/* TABLE */

table { table-layout:fixed; margin-bottom:1em; }

table thead td { color:var(--here); line-height:2em; }

th
{ 	font-weight:normal; font-weight:300; 
	text-align:left; color:LightGray; overflow:hidden;
	padding-right:.5em;
}

td { padding-right:.3em; padding-left:.2em; }

table.specs { border-collapse:collapse; width:100%; margin:.5em 0 .5em 0; }
table.specs td { border:1px solid var(--line); }
table.specs th { border:1px solid var(--line); }

table.auto { table-layout:auto; }

table.large  { width:100%;  } /* note pad ! */

table.list { table-layout:auto; width:100%; border-collapse:collapse; }
/*table.list td, table.list th { border-top:1px solid var(--line); }*/
table.list TR.alt { background-color:var(--line); }
table.list TD, table.list TH { border-top:1px solid var(--line); }

table.fixed { table-layout:fixed; /* pratique pour list+fixed */ }

/* LIENS */

a
{ 	cursor:pointer; white-space:nowrap; transition:opacity .1s;
	border-radius:.2rem;
	background-position:50% 50%; /* pour nav images */
}

a:hover { opacity:.85; }

article a
{	display:inline-block;
	padding:.5em; margin:0 .5em .5em 0;
	background-color:var(--button);
	
	color:black;
	cursor:pointer;
	vertical-align:middle;
	font-size:90%; line-height:2em;
}

a.item
{	display:inline-block; background-color:var(--high); color:white;
	line-height:1em; font-size:90%; padding:.25em; padding-right:.15em;	
	min-width:6em; max-width:9em;
	white-space:normal; overflow:hidden; word-wrap: break-word; border:none; 
	word-break: break-all;
	/* border-left:2px solid transparent; */ /* sorting */ 
}

	a.item.off { opacity:.5;  } 
	a.item.minimal { min-width:auto; width:3em; padding:0; border:none;  }
	a.item.minimal>div { margin:0px; background-color:transparent; border:none; }

a.item>div
{ 	width:3em; height:3em; float:left; margin-right:.4em; 
	background-size:cover; background-position:50% 50%; border:1px solid RGBA(0,0,0,.4);
}

a.loading /* petit effet après clic */
{	animation: loading .5s linear infinite;
}

table a.item { display:block; }

menu>a,nav>a
{	color:inherit;
	text-decoration:none;
	padding:0.3em;	
	margin:.5em;
	line-height:1em; /* carré ? */
	width:1em; height:1.1em; text-align:center;
	font-size:200%;
	display:block;
	border:1px solid var(--inline);		
	background-color:var(--high);
}

menu>a:hover, nav>a:hover { background-color:var(--inline); }

menu>a.here { background-color:var(--dark); }

/* me.u */
nav>a.here { border:1px solid #FFF !important; background-color:var(--dark); }
nav>a.fly { opacity:.65; border:1px solid var(--bad) !important; background-color:var(--theme) !important; }



/* GRAPH */

div.graph { font-size:80%; width:100%; border:1px solid var(--inline); overflow:hidden; margin-bottom:.5em; box-sizing:border-box; }
div.graph.gain { background-color:var(--inline); }
div.g { white-space:nowrap; background-color:var(--inline); height:100%; line-height:1em; overflow:visible; padding:.2em; box-sizing:border-box;}
div.gr { white-space:nowrap; background-color:var(--red); height:100%; line-height:1em; overflow:visible; padding:.2em; box-sizing:border-box;}



/* --- ARTICLES --- */


/* popup article */

article.item, article.room, article.unit
{	/* max-height:var(--auto); */
	transition:max-height .2s ease;
}

article.close { max-height:0px; overflow:hidden; margin:0px; padding:0; /*min-height:0px;*/ }
article.open { max-height:var(--auto); }


article.frame { border-top:1px solid var(--line); border-left:1px solid var(--line); }
article.frame>div { border:1px solid transparent; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }


article.unit, article.room, article.item
{	flex-basis:100%;	
	overflow:hidden;
	/* min-height:1em;	*/ /* pourquoi déjà ? */
	justify-content:stretch; 
	background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
}


article.unit { border:none; }

div.tuto sup { font-size:150%; } /* icone présentée dans le tuto */

article.art { align-items: center; }
article.showcase>DIV { margin:.2em; } /* login & register */


/* ---  DIV --- */ 

article.fit>div { flex-basis:auto; }

article.unit>div { background-color:var(--high); border:none; }
article.room>div { background-color:var(--theme); border:none; }
article.item>div { background-color:none; }
article.urgent>div { background-color:var(--black); /* BMA */ }

article>div.room { background-size:cover; text-shadow:0 0 .5em #000; opacity:.5; }
article>div.room>mark { display:inline-block; background-color:#000; padding:.5em; border-radius:100%; }

article>div.pad { border:none; }
article>div.stock { background-color:transparent; border:1px solid var(--line); }


div.mini { flex-grow:.25; }
div.half { flex-grow:.5; }
div.double { flex-grow:2; }
div.triple { flex-grow:3; }
div.full { flex-basis:100%; }
div.right { text-align:right; }


div.confirm { background-color:green !important; /*text-align:center;*/ }
div.important { background-color:var(--theme) !important; }
div.urgent { background-color:var(--red) !important; /*text-align:center;*/ }




/* metro étapes achevée */ 
div.ready { background-color:var(--here) !important; color:var(--theme) !important; }


/* --- IMAGES --- */

div.image { background-size:cover; background-position:50% 50%;	aspect-ratio:1.77; background-repeat:no-repeat; border:1px solid var(--inline); }

img.logo { width:100%; }

div.wall
{ 	padding:0; margin:0; border:2px solid black; margin:0 .5em 0 .5em; border-radius:.5rem;
	background-color:black; text-align:center; overflow:hidden;
}

div.wall>img { object-fit:cover; width:100%; aspect-ratio:1.77; } 
div.wall>div { padding:1em; }


/* state */

mark
{	font-style:italic; font-size:200%; margin:0; padding:0; 
	background-color:transparent; color:white; display:block;
	display:block;line-height:1em; margin-top:-.3em; margin-bottom:.5em;
}

mark.state { text-align:right; margin:0;}
mark.score { margin-bottom:0; font-size:300%; font-weight:bold; }

/* niveau room */

aside>div>label { text-align:center; } /* titre aside */
label { display:block; font-size:120%; font-weight:bold; margin-bottom:.5em; }
legend { display:block; font-size:110%; color:white; padding:.1em; }
label>mark { float:left; margin-right:.75em; padding-top:.25em; line-height:inherit; }
label>legend { margin:0; padding:0; color:var(--here); font-size:65%; } /* détails sous nom */


article>div.lvl { flex-basis:2em; flex-grow:0; text-align:center; border:1px solid #F0F; }

/* super divers */

div.notepad textarea { height:60vh; }



h1,h2 /* juste sans contenu, gros titre */
{	flex-basis:100%;
	flex-grow:0;
	margin:0;
	font-weight:normal;
}

h1 { font-size:250%; text-transform:uppercase; }
h2 { color:RGBA(255,255,255,.45); font-size:165%; letter-spacing:.2em; }
h2>i { color:white; }