:root {
	--title_haut: 40px;
	--blanc: #fefefe;
	--noir: #010101;
	--jaune: #f0ec03;
	--orange: #e79a00;
	--rouge: #b80909;
	--vert: #00ef00;
	--glace_tres_claire: #e2eeee;
	--glace_claire: #d3dede;
	--glace_moins_claire: #c3cece;
	--glace: #b6d9db;
	--glace_pas_sombre: #b3bebe;
	--glace_sombre: #5b797d;
	--glace_noire: #243a3d;
	--glace_tres_noire: #00151c;
	--loader_size: 30px;
}

.fenetre,
.fenetre_reduce,
.fenetre_focus,
.fenetre_reduced {
	box-sizing: border-box;
	position: fixed;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	font-size: 14px;
	animation-name: enlarge_window;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	/*	animation-timing-function: cubic-bezier(.65,0,1,.84);	*/
	animation-fill-mode: forwards;
	overflow: hidden;
	outline: 1px outset rgba(255, 255, 255, 0.3);
}

.fenetre_reduce {
	animation-name: reduce_window;
}

.fenetre_reduced {
	animation-name: none;
	transform: scale(0);
}

@keyframes enlarge_window {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes reduce_window {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0);
	}
}

.fen_barre {
	box-sizing: border-box;
	display: flex;
	color: var(--blanc);
	border-bottom: 1px #888 solid;
	cursor: move;
	height: var(--title_haut);
	backdrop-filter: blur(3px);
	background-color: #002d5d80;
}

.fenetre_focus .fen_barre {
	background-color: #00abb380;
}

.fen_title {
	height: var(--title_haut);
	line-height: var(--title_haut);
	padding: 0 10px;
	width: calc(100% - 20px);
	box-sizing: border-box;
	overflow: hidden;
	text-transform: uppercase;
	font-weight: bold;
}

.fen_onglet {
	display: inline-block;
	font-size: 13px;
	font-weight: 100;
	padding: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	cursor: pointer;
	text-transform: uppercase;
	/* text-shadow: 1px 1px 1px black; */
}

.fen_div {
	overflow: auto;
	box-sizing: border-box;
	background-color: var(--blanc);
	color: var(--noir);
	line-height: 0;
}

.fen_close {
	width: calc(var(--title_haut) - 10px);
	height: calc(var(--title_haut) - 10px);
	mask-image: url(img/close.svg);
	display: inline-block;
	mask-size: 100% 100%;
	background-color: var(--blanc);
	cursor: pointer;
	margin: 5px;
	transition: 300ms;
}

.fen_close:hover {
	transform: scale(1.4) rotate(90deg);
}

.fen_size {
	cursor: se-resize;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.fen_icon {
	width: var(--title_haut);
	height: var(--title_haut);
	display: inline-block;
	mask-size: 100% 100%;
	background-color: var(--blanc);
	margin: 0;
}

#fen_mask {
	position: absolute;
}