html {
	height: 100%;
}
body {
	min-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: radial-gradient(farthest-corner at 50% 50%, #fff 50%, #f8f8f8 95%, #ddd) fixed;
	font-family: Arial, sans-serif;
}
body>*:nth-last-child(2) {
	flex-grow: 1;
}
a {
	padding: 2px 4px;
	border-radius: 3px;
	color: #555;
	text-decoration: none;
	text-shadow: #fff 0 1px 0;
	transition: 0.3s;
}
a:hover {
	background: #0063ca;
	color: #fff;
	text-shadow: none;
}
header {
	text-align: center;
}
header>div {
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	color: #333;
}
h1 {
	max-width: 768px;
	margin: 0 auto;
	padding: 32px 8px 8px;
	font-size: 40px;
	font-weight: normal;
	color: #333;
	text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15);
	text-transform: uppercase;
}
h2, h3, h4, h5 {
	clear: both;
}
section {
	display: flex;
	flex-wrap: wrap;
}
section>div {
	min-width: 480px;
	flex-grow: 1;
	flex-basis: 0;
}
h2 {
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0;
	padding: 8px 32px;
	background: #333;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	font-size: 24px;
	color: #fff;
	text-transform: uppercase;
}
h3 {
	margin: 16px 0 8px 32px;
	border-bottom: solid 2px #333;
	font-size: 18px;
	color: #333;
	text-transform: uppercase;
}
h4 {
	margin: 16px 0 8px 48px;
	padding: 0 8px;
	border-bottom: dotted 1px #446b83;
	font-size: 18px;
	color: #446b83;
}
h5 {
	margin: 4px 0 8px 48px;
	padding: 0 8px;
	font-size: 15px;
	color: #333;
}
h5::before {
	content: '■';
	margin: 0 8px 0 0;
	font-size: 24px;
	line-height: 12px;
}
.h {
	margin: 8px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}
p {
	margin: 0 16px 8px 48px;
	hyphens: auto;
	text-align: justify;
	line-height: 140%;
}
section>p {
	padding: 0 16px 0 48px;
}
ul {
	margin: 0 0 8px 24px;
	padding: 0 16px 0 40px;
	font-size: 90%;
}
li {
	padding: 4px 8px;
	border-radius: 3px;
	line-height: 140%;
}
li:nth-child(odd) {
	background: rgba(0,0,0,0.02);
}
li:hover {
	background: rgba(32,64,96,0.05);
}
dl {
	width: 192px;
	position: absolute;
	font-weight: bold;
	text-shadow: 0 1px 0 #fff; 
}
dl::after {
	content: ' :';
}
dt {
	padding: 0 0 0 192px;
}



.author,
.ref,
.pages,
.size {
	padding: 0 4px;
	border-radius: 2px;
	display: inline-block;
	vertical-align: text-top;
	font-size: 10px;
	line-height: 16px;
}
.author {
	background: linear-gradient(#555, #333);
	color: #fff;
}
.ref {
	background: linear-gradient(#463, #241);
	color: #fff;
}
.pages,
.size {
	margin: 0 -2px 0 4px;
	background: linear-gradient(#fff, #eee);
	color: #444;
	text-shadow: 0 1px 1px #fff;
}
.file::before {
	content: '';
	width: 16px;
	height: 16px;
	margin: 0 6px 0 0;
	display: inline-block;
	background: url('images/files.png');
	vertical-align: text-bottom;
}
.html::before	{ background-position: -32px 0; }
.pdf::before	{ background-position: -32px -32px; }
.xls::before	{ background-position: -16px -48px; }
.odt::before	{ background-position: 0 -64px; }
.ods::before	{ background-position: -16px -64px; }
._7z::before	{ background-position: -32px -80px; }

.intro {
	width: 100%;
	margin: 0 32px;
	padding: 8px 16px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	background: #fff;
}
.warning {
	padding: 2px 8px;
	border-radius: 3px;
	display: inline-block;
	background: #c00;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	color: #fff;
}

.google_drive {
	min-height: 96px;
	padding: 0 0 0 128px;
	position: relative;
}
.google_drive::before {
	content: '';
	width: 96px;
	height: 96px;
	margin: -48px;
	position: absolute;
	top: 50%;
	left: 48px;
	background: url('images/google_drive.svg');
}


/* Trombinoscope */
.trombinoscope {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}
.trombinoscope>li {
	width: 160px;
	margin: 4px;
	padding: 208px 8px 8px;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
.trombinoscope>li::before,
.trombinoscope>li>img {
	width: 160px;
	height: 192px;
	margin: 0 -80px;
	position: absolute;
	top:8px;
	left: 50%;
	text-align: center;
}
.trombinoscope>li::before {
	content: '';
	background: #f4f4f4 url("images/item_chuzhen.svg");
}
.trombinoscope>li>a {
	display: block;
	font-size: 12px;
	white-space: nowrap;
}
.trombinoscope>li>.prenom {
	padding: 0 0 0 4px;
}
.trombinoscope>li>.nom {
	text-transform: uppercase;
}
.trombinoscope>li>.metier {
	padding: 0 8px;
	border-radius: 3px;
	display: block;
	background: #eee;
	font-size: 10px;
}
.trombinoscope>li>.infos {
	padding: 3px 6px;
	border-radius: 2px;
	display: inline-block;
	background: linear-gradient(#999, #888);
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	font-size: 11px;
	line-height: 14px;
	color: #fff;
}
.trombinoscope>li>.tags {
	position: absolute;
	bottom: 5px;
	left: 5px;
}
.trombinoscope>li>.tags>span {
	margin: 2px;
	padding: 3px 6px;
	border-radius: 3px;
	background: #444;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
}
.trombinoscope>li>.tags>.ft_s	{ background: #732; }
.trombinoscope>li>.tags>.ft_w	{ background: #237; }
.trombinoscope>li>.tags>.anat	{ background: #270; }

/*	ÉDITION	/*/
#edit_card {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	margin: 8px 12px;
	padding: 4px;
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	top: 4px;
	right: 0;
	background: rgba(0,0,0,0.9);
	font-size: 10px;
	color: #fff;
	transition: 0.3s;
}
#edit_card:hover {
	width: 152px;
	height: 28px;
}
#edit_card>a {
	padding: 4px;
	position: relative;
	left: 128px;
	display: block;
	opacity: 0;
	font-size: 11px;
	font-weight: bold;
	line-height: 10px;
	color: #aaa;
	text-shadow: none;
}
#edit_card>a::before {
	font-size: 16px;
	vertical-align: middle;
}
#edit_card>a:nth-child(1)		{ transition: color 0.3s, left 0.3s 0.1s; }
#edit_card>a:nth-child(1)::before	{ content: '🃟'; margin: 0 8px 0 0; }
#edit_card>a:nth-child(2)		{ transition: color 0.3s, left 0.3s 0.15s; }
#edit_card>a:nth-child(2)::before	{ content: '☻'; margin: 0 4px 0 -4px; }
#edit_card>a:hover			{ color: #fff;}
#edit_card:hover>a {
	left: 0;
	opacity: 1;
}
#edit_card::after {
	content: '🔧';
	margin: 5px;
	padding: 3px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	background: #000;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	pointer-events: none;
}

/*	UI	*/
#ui {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 7;
}
#ui>div {
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
}
#ui>div.display,
#ui>div.active {
	display: flex;
}
#ui>div.active {
	z-index: 8;
}
#ui>div.active::before {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,0.85);
	cursor: pointer;
}
#ui>div>* {
	box-sizing: border-box;
	max-width: 320px;
	max-height: 90vh;
	margin: 8px;
	padding: 16px;
	border-radius: 4px;
	overflow: auto;
	position: relative;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.2), 0 0 0 8px rgba(0,0,0,0.2);
}
#dialogBox>div {
	max-width: 50%;
	transition: 0.3s;
}
#dialogBox>div::before {
	content: '•';
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: -24px;
	border: solid 6px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 48px;
	font-size: 52px;
	font-weight: bold;
	line-height: 28px;
	text-align: center;
	color: #446;
}
#dialogBox>.good::before {
	content: '✓';
	color: #8c4;
}
#dialogBox>.bad::before {
	content: '×';
	color: #e04;
	line-height: 36px;
}
#dialogBox>div>p {
	margin: 16px 16px 16px 80px;
}
#ui fieldset {
	padding: 0;
	border: 0;
}
#ui label {
	margin: 8px 0 0;
	display: block;
	font-size: 13px;
}
#ui input:hover,
#ui select:hover {
	background: #efc;
}
#ui input[type="text"],
#ui input[type="email"],
#ui select {
	box-sizing: border-box;
	width: 100%;
	padding: 2px 8px;
	border: solid 1px #aaa;
	border-radius: 3px;
	display: block;
	font-size: 18px;
	color: #333;
}
#ui input[readonly] {
	background: #eee;
}
#ui input[type="submit"] {
	width: 100%;
	padding: 16px;
	border: solid 1px #aaa;
	border-radius: 3px;
	background: linear-gradient(#fff, #ddd);
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}
#ui label::after {
	content: ':';
	margin: 0 4px;
}
#ui hr {
	margin: 16px 0;
	border: none;
	border-bottom: dotted 2px #888;
}
#ui label.upload {
	margin: 16px 0;
	padding: 34px 8px;
	border: dashed 2px #aaa;
	border-radius: 8px;
	text-align: center;
	transition: 0.3s;
}
#ui label.upload:hover {
	border-color: #446b83;
	background: #f0f3f4 padding-box;
	box-shadow: inset 0 0 16px 8px #fff;
	color: #446b83;
}
#photo{
	display: none;
}
#ui .upload::after {
	content: none;
}

footer {
	margin: 16px 0 0;
	padding: 16px 0;
	justify-content: center;
	background: rgba(0,0,0,0.8);
	text-align: center;
	color: #fff;
}
footer a {
	padding: 0 4px;
	color: #ccc;
	text-shadow: unset;
}


@keyframes show_log {
	0%, 5%	{ top: -32px; }
	5%, 95%	{ top: 0; }
	100%	{ top: -32px; }
}
@keyframes fade_in {
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
}
.log {
	margin: 0;
	padding: 4px 16px;
	position: fixed;
	top: -32px;
	right: 0;
	z-index: 9;
	border-radius: 0 0 0 8px;
	background: #444;
	color: #fff;
	animation-duration: 4s;
	animation-name: show_log;
}
.log.good	{ background: #8c4; }
.log.bad	{ background: #e04; }

.new::before {
	content: 'Nouveau';
	margin: 0 4px 0 0;
	padding: 2px 4px;
	border: solid 1px #349;
	border-radius: 3px;
	display: inline-block;
	background: #fff;
	font-family: sans-serif;
	font-size: 9px;
	line-height: 100%;
	vertical-align: middle;
	color: #349;
}

ul>li>ul {
	margin: 0;
	padding: 0 0 0 16px;
}
.time {
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.1);
	font-size: 12px;
	padding: 3px 6px;
	color: rgba(0,0,0,0.7);
} 
.time::before {
	content: "🕑";
	padding: 0 4px 0 0;
	font-style: normal;
}


#canvas {
	height: 256px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: #aaa;
	cursor: move;
}
#canvas>* {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#canvas>span {
	z-index: 1;
	font-size: 12px;
	text-align: center;
	line-height: 32px;
	color: #fff;
	pointer-events: none;
}
#canvas>svg {
	height: 100%;
}


#zoom {
	margin: 16px 0;
	padding: 0 16px;
	height: 32px;
	border-radius: 4px;
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
}
#zoom::after {
	content: '';
	height: 2px;
	margin: 0 0 0 16px;
	flex-grow: 1;
	background: #444;
}
#zoom>span {
	box-sizing: border-box;
	width: 48px;
	height: 24px;
	margin: -12px -24px;
	border: solid 1px #0063ca;
	border-radius: 6px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background: linear-gradient(#fff, #ddd);
	box-shadow: 0 0 2px 1px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	color: rgba(0,99,202,0.6);
	text-shadow: 0 1px 0 #fff;
	cursor: w-resize;
}

.dict {
	max-width: 400px;
	margin: 0 auto;
	padding: 8px 24px;
	border-radius: 3px;
	background: linear-gradient(#fafafa, #eee);
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
.dict>strong {
	padding: 4px 8px;
	display: block;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	text-shadow: 0 2px 1px #fff;
}
.dict>textarea {
	min-height: 48px;
	resize: vertical;
}
.dict>input,
.dict>textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 8px auto 0;
	padding: 12px;
	border: solid 1px #e0ced4;
	border-radius: 4px;
	display: block;
	background: #fff;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.1), inset 0 1px 16px rgba(0,0,0,0.1);
	font-size: 16px;
	color: #5c3b46;
	text-shadow: 0 2px 0 #fff;
}
.dict>textarea:hover,
.dict>input:hover {
	border-color: #0063ca;
	color: #0063ca;
}
.dict>p,
.dict>ul {
	min-height: 18px;
	margin: 8px 0;
	padding: 8px 12px;
	border-radius: 3px;
	background: #fff;
}
.dict>ul>li {
	max-height: 240px;
	margin: 0;
	padding: 4px 8px;
	overflow: auto;
	display: block;
	color: #444;
}
.dict>ul>li:nth-child(even) {
	border-radius: 2px;
	background: #eee;
}
.dict>ul>li>ins {
	border-radius: 3px;
	background: #333;
	padding: 1px 4px;
	color: #fff;
	text-decoration: none;
}
.dict em {
	font-size: 14px;
	color: #aaa;
}