/* 2025-04-22 */


/* ======================================== *\
	ANIMATIONS
\* ======================================== */

@keyframes rotate {
	100%	{ transform: rotate(360deg); }
}
@keyframes scroll {
	100%	{ background-position: 0 0; }
}
@keyframes popup_open {
	0% 	{ opacity: 0; transform: perspective(400px) translate3D(0,100px,-40px) rotate3D(1,0,0,-30deg); }
	50% 	{ opacity: 1; }
	100%	{ transform: perspective(400px); }
}


/* ======================================== *\
	PRÉ-CHARGEMENT
\* ======================================== */

body::before {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content:url('images/checker.svg') url('images/wave.svg') url('images/arc_arrow.svg');
}


/* ======================================= *\
	GÉNÉRAL
\* ======================================= */

/*	=============== */
/*	GÉNÉRAL > Bases */
/*	--------------- */

html {
	height: 100%;
	font-family: sans-serif;
}
body {
	min-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}
body.drag::before {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	background: rgba(0,0,0,0.8);
}
main {
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

/*	===================== */
/*	GÉNÉRAL > Formulaires */
/*	--------------------- */

fieldset {
	margin: 0;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
a.button,
input[type=submit] {
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	background: linear-gradient(#ffffff, #edeeef);
	font-size: 16px;
	text-align: center;
	color: rgba(0,0,0,0.75);
	cursor: pointer;
}
a.button {
	box-sizing: border-box;
	width: fit-content;
	min-width: 128px;
	margin: 0 auto;
	padding: 12px;
	display: block;
	text-align: center;
	user-select: none;
}
a.button:hover,
input[type=submit]:hover {
	background: linear-gradient(#edeeef, #ffffff);
}
a.button>* {
	pointer-events: none;
}
/*	---------------------------------- */
/*	GÉNÉRAL > Formulaires > Conteneurs */
/*	---------------------------------- */

.container {
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	position: relative;
	display: flex;
}
.container>label {
	margin: -6px 0 0 8px;
	padding: 0 4px;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(#ffffff 50%, rgba(0,0,0,0));
	font-size: 10px;
	color: rgba(0,0,0,0.5);
}
.container>input,
.container>textarea {
	padding: 8px;
	border: none;
	flex: 1 0 0;
	font-size: 16px;
}
.container>textarea {
	min-height: 32px;
	max-height: 50vh;
	resize: vertical;
}

/*	---------------------------------- */
/*	GÉNÉRAL > Formulaires > Checkboxes */
/*	---------------------------------- */

.checkbox {
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	position: relative;
}
.checkbox>label {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px 40px 12px 16px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.checkbox>label:hover {
	background: rgba(0,125,255,0.1);
}
.checkbox>input {
	width: 16px;
	height: 16px;
	margin: -8px;
	position: absolute;
	top: 50%;
	right: 20px;
	text-align: center;
	pointer-events: none;
}
.double {
	display: flex;
	gap: 8px;
}
.double>* {
	flex: 1 0 0;
}


/* ======================================= *\
	ENTÊTE
\* ======================================= */

header {
	padding: 0 80px 0 64px;
	position: relative;
	background: #303030;
	color: #ffffff;
}

/*	============== */
/*	ENTÊTE > Titre */
/*	-------------- */

header>h1 {
	box-sizing: border-box;
	width: fit-content;
	min-height: 80px;
	margin: 0 auto;
	padding: 16px 0 16px 72px;
	position: relative;
	display: flex;
	align-items: center;
	font-size: 24px;
	line-height: 1;
	text-align: center;
}
header>h1::before {
	content: '';
	width: 64px;
	height: 64px;
	margin: -32px;
	position: absolute;
	top: 50%;
	left: 32px;
	background: url('../icons/icon.svg');
}

/*	=============== */
/*	ENTÊTE > Profil */
/*	--------------- */

#profile {
	width: 80px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	color: #ffffff;
}
#profile::before {
	content: '';
	width: 40px;
	height: 40px;
	margin: -21px;
	border: solid 1px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 50%;
	background: url('images/profile.svg');
}
#profile>a {
	width: fit-content;
	max-width: 100%;
	margin: 30px auto 0;
	padding: 4px 8px;
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: none;
	background: #0080ff;
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
}
#profile:hover>a {
	display: block;
}
#profile>a:hover {
	text-decoration: underline;
}


/* ======================================= *\
	PAGE
\* ======================================= */

/*	================= */
/*	PAGE > Formulaire */
/*	----------------- */

main>form {
	max-width: 960px;
	margin: 0;
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
main>form>fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

/*	==================== */
/*	FORMULAIRE > Canevas */
/*	-------------------- */

#canvas {
	margin: 0 auto;
	padding: 8px;
	width: fit-content;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#canvas>label {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	font-size: 0;
	color: rgba(0,0,0,0);
	cursor: pointer;
	user-select: none;
}
#canvas>label:hover {
	background: linear-gradient(20deg, rgba(0,64,128,0.25), rgba(255,255,255,0.25));
}
body.drag #canvas>label {
	z-index: 6;
}
body.drag #canvas>label::after {
	content: '';
	width: 100%;
	height: 100%;
	border: dashed 1px #ffffff;
	border-radius: 8px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../icons/mask.svg') 50%/192px no-repeat;
	pointer-events: none;
}
body.drag #canvas>label.hover::after {
	border: solid 1px #ffffff;
}

/*	---------------------------- */
/*	FORMULAIRE > Canevas > Image */
/*	---------------------------- */

#canvas>picture {
	min-width: 256px;
	height: 50vh;
	min-height: 256px;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#canvas>picture.free {
	width: 256px;
	height: 256px;
}
#canvas>picture::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: #404040 url('images/checker.svg');
}
#canvas>picture.free::after {
	content: '';
	width: 256px;
	height: 256px;
	background: url('../icons/mask.svg') 50%/192px no-repeat;
	filter: brightness(0.5);
}
#canvas>picture>img {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	pointer-events: none;
}

/*	------------------------------ */
/*	FORMULAIRE > Canevas > Valider */
/*	------------------------------ */

main>form>fieldset>input[type="submit"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
	padding: 24px;
	border: none;
	border-radius: 4px;
	display: block;	
	background: #0080ff linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0), rgba(0,0,0,0.2));
	font-size: 18px;
	color: #ffffff;
	cursor: pointer;
}
main>form>fieldset>input[type="submit"]:hover {
	background: #0080ff linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
}


/* ======================================= *\
	UI
\* ======================================= */

#ui {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 16px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba(0,0,0,0.8);
	backdrop-filter: blur(3px);
	cursor: pointer;
}
#ui>* {
	box-sizing: border-box;
	max-width: 480px;
	padding: 8px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #ffffff;
	cursor: default;
}

/*	=============== */
/*	UI > Formulaire */
/*	--------------- */

#ui_form>fieldset>picture {
	box-sizing: border-box;
	width: 256px;
	max-height: 128px;
	margin: 0 auto;
	padding: 8px;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
#ui_form>fieldset>picture>img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 3px;
}
#ui_form>fieldset>input[type=file] {
	display: none;
}

/*	====================== */
/*	UI > Formulaire > RGPD */
/*	---------------------- */

#rgpd {
	max-height: 96px;
	padding: 8px 16px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	overflow: auto;
}
#rgpd>h2 {
	margin: 8px 0;
	padding: 0 0 8px;
	border-bottom: dotted 1px rgba(0,0,0,0.5);
	font-size: 16px;
	color: #0080ff;
}
#rgpd>h3 {
	margin: 8px 0;
	font-size: 14px;
	color: #0080ff;
}
#rgpd>p {
	margin: 8px 0;
	font-size: 12px;
}

/*	=============== */
/*	UI > Chargement */
/*	--------------- */

#ui_loading {
	padding: 4px;
	border-radius: 50%;
}
#ui_loading::before {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}
#ui_loading>div {
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	margin: 0;
	padding: 0;
	border: solid 2px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	user-select: none;
	pointer-events: none;
}
#ui_loading>div:before {
	content: '';
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: solid 6px #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#ui_loading>div:after {
	content: '';
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	margin: -44px;
	border: dashed 1px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	animation: rotate 16s linear infinite;
}
#ui_loading>div>.bar {
	content: '';
	width: 100%;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(rgba(0,0,0,0) 8px, #000000), url('images/wave.svg') 384px 0;
	transition: 0.5s;
	animation: scroll 2s linear infinite;
}

/*	============ */
/*	UI > Message */
/*	------------ */

#ui_message {
	animation: popup_open 0.4s cubic-bezier(.5,1.5,.5,1);
}
#ui_message>div {
	position: relative;
}
#ui_message>div>p {
	margin: 16px 0;
}
#ui_message>.success,
#ui_message>.warning,
#ui_message>.error {
	min-height: 64px;
	padding-left: 96px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#ui_message>.success::before,
#ui_message>.warning::before,
#ui_message>.error::before {
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	margin: -32px;
	border: solid 3px;
	border-radius: 50%;
	position: absolute;
	left: 44px;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: bold;
}
#ui_message>.success::before {
	content: '✓';
	color: #60c000;
}
#ui_message>.warning::before {
	content: '!';
	color: #ff8000;
}
#ui_message>.error::before {
	content: '×';
	color: #e00000;
}


/* ======================================= *\
	PIED DE PAGE
\* ======================================= */

footer {
	padding: 32px;
	background: #000000;
	text-align: center;
	font-size: 13px;
	color: rgba(255,255,255,0.75);
}


/* ======================================= *\
	PAGE IMAGE
\* ======================================= */

#my_file {
	
}
#my_file>picture {
	box-sizing: border-box;
	max-width: 800px;
	height: 70vh;
	margin: 8px auto;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#my_file>picture>img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
	pointer-events: none;
}
#my_file>time {
	width: fit-content;
	margin: 0 auto;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	display: block;
}