:root {
	--background-color: #ffffff;
	--text-color: #000000;
	--input-color: #000000;
	--link-color: #2b56e0;
	--select-text-color: #000000;
	--box-background-color: #f0f0f0;
	--box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
	--box-shadow-active: 0px 0px 20px 0px rgba(255, 255, 0, 1);
	--h1-font-size: 50px;
	--h2-font-size: 30px;
	--h3-font-size: 30px;
	--h4-font-size: 25px;
	--h5-font-size: 20px;
	--main-font-size: 18px;
	--footer-font-size: 14px;
	--margin: 15px;
	--box-border-radius: 20px;
	--section-min-width: 750px;
	--button-background-color: #666666;
	--button-background-color-hover: #808080;
	--button-background-color-focus: #4d4d4d;
	--button-text-color: #ffffff;
	--button-text-color-hover: #f2f2f2;
	--button-text-color-focus: #e6e6e6;
	--button-background-color-red: #e02b2b;
	--button-background-color-hover-red: #ff4343;
	--button-background-color-focus-red: #b31919;
	--button-text-color-red: #ffffff;
	--button-text-color-hover-red: #ffe6e6;
	--button-text-color-focus-red: #ffb3b3;
	--button-background-color-blue: #2b56e0;
	--button-background-color-hover-blue: #4371ff;
	--button-background-color-focus-blue: #1940b3;
	--button-text-color-blue: #ffffff;
	--button-text-color-hover-blue: #e6f0ff;
	--button-text-color-focus-blue: #b3d1ff;
	--button-background-color-green: #4bcd4b;
	--button-background-color-hover-green: #21e521;
	--button-background-color-focus-green: #196b19;
	--button-text-color-green: #ffffff;
	--button-text-color-hover-green: #4e584e;
	--button-text-color-focus-green: #89cc89;
	--picture-select-background-color-red: #e02b2b;
	--picture-select-background-color-hover-red: #ff434337;
	--picture-select-text-color-red: #ffffff;
	--picture-select-text-color-hover-red: #276027;
	--picture-select-background-color-green: #4bcd4b;
	--picture-select-background-color-hover-green: #43a74337;
	--picture-select-text-color-green: #ffffff;
	--picture-select-text-color-hover-green: #50c850;
	/* (lageur complète - margin * 4 - gap * 2 ) / 3 colonnes - padding * 2 */
	--download-pictures-display-gap: 20px;
	--download-pictures-display-width: calc(min((100vw - var(--margin) * 6 - (var(--download-pictures-display-gap) * 2)) / 3 - (10px * 2), 500px));
	--moderation-pictures-display-width: calc(min((100vw - var(--margin) * 6 - (var(--download-pictures-display-gap) * 2)) / 4 * 3 - (10px * 2), 500px, 50vh));
}

/* ---------- DARK MODE ---------- */

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #000000;
		--text-color: #ffffff;
		--input-color: #000000;
		--box-background-color: #3d3d3d;
		--box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
	}
}

@media (max-width: 768px) {
	:root {
		--h1-font-size: 30px;
		--h2-font-size: 20px;
		--h3-font-size: 20px;
		--h4-font-size: 18px;
		--h5-font-size: 16px;
		--main-font-size: 14px;
		--margin: 10px;
		--section-min-width: 100%;
		--download-pictures-display-gap: 10px;
		--download-pictures-display-width: calc(min((100vw - var(--margin) * 6 - (var(--download-pictures-display-gap) * 1)) / 2 - (10px * 2), 500px));
	}
}

* {
	box-sizing: border-box;
	font-size: var(--main-font-size);
}

body {
	font-family: 'Inter', sans-serif;
	margin: 0px;
	height: 100vh;
	width: 100vw;
	overflow: auto;
	overflow-x: hidden;

	background-color: var(--background-color);
	color: var(--text-color);

	header,
	footer {
		background-color: var(--box-background-color);
		color: var(--text-color);
	}

	.container {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--margin);
	}

	header,
	main,
	section,
	footer,
	form,
	.form-group,
	.header-actions,
	h3,
	.file-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		align-content: center;
		gap: var(--margin);
		padding: var(--margin);
	}

	section {
		flex-direction: column;
		align-items: stretch;

		&.actions {
			flex-direction: row;
			align-items: center;
			align-content: center;

			/* position: sticky; */
			top: var(--margin);
			z-index: 10;
			background-color: rgba(255, 255, 255, 0.25);
			backdrop-filter: blur(3px);
			padding: var(--margin);
			margin: var(--margin);
			box-shadow: var(--box-shadow);
			border-radius: var(--box-border-radius);
		}

		&.actions:not(.no-sticky) {
			position: sticky;
		}
	}

	header {
		box-shadow: var(--box-shadow);
		padding: var(--margin);

		h1 {
			margin: 0px;
			font-size: var(--h1-font-size);

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

		h2 {
			margin: 0px;
			font-size: var(--h2-font-size);
		}

		.header-actions {
			padding: 0px;
		}

		#title:hover {
			cursor: pointer;
		}
	}

	.file-list {
		padding: 0px;
		justify-content: flex-start;
		align-items: flex-start;

		.file-item {
			width: 100%;
			/* height: 100px; */
			display: flex;
			flex-direction: row;
			gap: 10px;
			background-color: var(--box-background-color);
			border-radius: var(--box-border-radius);
			padding: 10px;
			margin-bottom: 10px;
			box-shadow: var(--box-shadow);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&.uploading {
				background-color: rgba(0, 123, 255, 0.1);
				border: 2px solid var(--button-background-color-blue);
			}

			&.success {
				background-color: rgba(40, 167, 69, 0.1);
				border: 2px solid var(--button-background-color-green);
			}

			&.error {
				background-color: rgba(220, 53, 69, 0.1);
				border: 2px solid var(--button-background-color-red);
			}

			.image-container {
				position: relative;
				width: 100px;
				height: 100px;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: all 0.3s ease;
				}
			}

			.file-placeholder {
				width: 100px;
				height: 100px;
				background: #f0f0f0;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
			}

			.file-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-width: 0;
			}

			.file-status {
				font-size: 12px;
				font-weight: bold;
				transition: color 0.3s ease;
			}

			.file-name {
				font-size: 12px;
				word-break: break-all;
				opacity: 0.8;
				transition: opacity 0.3s ease;
			}

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			}
		}
	}

	main {
		flex-direction: column;

		h3 {
			width: 100%;
			margin: 0px;
			font-size: var(--h3-font-size);
		}

		h4 {
			width: 100%;
			margin: 0px;
			font-size: var(--h4-font-size);
		}

		h5 {
			width: 100%;
			margin: 0px;
			font-size: var(--h5-font-size);
		}

		section {
			width: min-content;
			/* width: fit-content; */
			min-width: var(--section-min-width);
			max-width: 100%;

			&.fit {
				width: fit-content;
			}

			&.full-width {
				width: 100%;
			}

			p {
				/* width: 100%; */
				margin: 0px;

				button {
					margin: 5px;
				}
			}

			/* p:not(:only-child) {
				flex-basis: 100%;
			} */

			form,
			.form {
				margin: 15px 0px;
				background-color: var(--box-background-color);
				box-shadow: var(--box-shadow);
				border-radius: var(--box-border-radius);
				overflow: hidden;

				.form-group {
					padding: 0px;
					width: 100%;
					align-items: center;
					justify-content: space-between;

					>*:last-child {
						flex-grow: 1;
					}
				}
			}

			iframe {
				border-radius: var(--box-border-radius);
			}

			.table-container {
				width: 100%;
				overflow-x: scroll;
				overflow-y: scroll;
				max-height: 90vh;

				table {
					border-collapse: separate;
					border-spacing: 0;
					width: 100%;
					min-width: max-content;

					thead {
						position: sticky;
						top: 0px;
						/* z-index: 1; */

						tr {
							/* position: relative; */

							th {
								background-color: var(--box-background-color);
								/* position: relative; */
								border-bottom: 1px solid var(--text-color) !important;
							}
						}
					}

					tbody {

						tr:nth-child(even) {
							background-color: var(--box-background-color);
						}
					}


					tr {

						th,
						td {
							padding: 10px;
							min-width: max-content;
							border-right: 1px solid var(--text-color);
							/* white-space: nowrap;
							text-overflow: ellipsis; */
						}

						th:last-child,
						td:last-child {
							border-right: none;
						}
					}
				}

				&#storage-reservation-result {
					tbody {
						td:not(:first-child) {
							text-align: right;
						}
					}
				}
			}

			#pictures-download,
			#pictures-moderation {
				display: flex;
				flex-direction: column;
				gap: 10px;

				#pictures-counter {
					position: sticky;
					top: var(--margin);
					z-index: 1;
					background-color: rgba(255, 255, 255, 0.25);
					backdrop-filter: blur(3px);
					padding: var(--margin);
					margin: var(--margin);
					box-shadow: var(--box-shadow);
					border-radius: var(--box-border-radius);

					&,
					>span {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						gap: 10px;
						justify-content: space-between;
						align-items: center;
						align-content: center;
					}
				}

				#pictures-list {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					gap: var(--download-pictures-display-gap);
					width: 100%;
					justify-content: space-around;
					align-items: stretch;
					padding: var(--margin);

					.picture-container {
						display: flex;
						flex-direction: column;
						gap: 10px;
						background-color: var(--box-background-color);
						box-shadow: var(--box-shadow);
						border-radius: var(--box-border-radius);
						padding: 10px;
						transition: background-color 0.3s ease, color 0.3s ease;
						position: relative;
						overflow: hidden;
						flex-shrink: 0;

						.picture-yours {
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
							position: absolute;
							background-color: rgba(0, 0, 0, 0.25);
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: calc(var(--download-pictures-display-width)/10);
							font-weight: bold;
							color: rgba(255, 255, 255, 0.75);
							text-shadow: var(--box-shadow);
							padding: 20px;
							text-align: center;
						}

						.image-wrapper {
							border-radius: var(--box-border-radius);
							overflow: hidden;
							flex-shrink: 1;

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						.picture-info {
							display: flex;
							flex-direction: column;
							gap: 10px;
							width: var(--download-pictures-display-width);
						}
					}

				}
			}

			#pictures-download {
				#pictures-list {
					.picture-container {
						cursor: pointer;

						&.selected {
							background-color: var(--picture-select-background-color-green);
							color: var(--picture-select-text-color-green);
						}

						&:not(.selected):hover {
							background-color: var(--picture-select-background-color-hover-green);
							color: var(--picture-select-text-color-hover-green);
						}

						.image-wrapper {
							width: var(--download-pictures-display-width);
							height: var(--download-pictures-display-width);
						}

						.picture-info {
							width: var(--download-pictures-display-width);
						}
					}
				}
			}

			#pictures-moderation {
				width: 100%;

				#pictures-list {
					flex-wrap: nowrap;
					overflow-x: scroll;


					.picture-container {
						transition: opacity 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;

						&.active {
							/* background-color: var(--picture-select-background-color-hover-green); */
							/* color: var(--picture-select-text-color-hover-green); */
							box-shadow: var(--box-shadow-active);
						}

						&.validated {
							background-color: var(--picture-select-background-color-green);
							color: var(--picture-select-text-color-green);
						}

						&.refused {
							background-color: var(--picture-select-background-color-red);
							color: var(--picture-select-text-color-red);
						}

						&:not(.active) {
							opacity: 0.5;
						}

						.image-wrapper {
							width: var(--moderation-pictures-display-width);
							height: var(--moderation-pictures-display-width);
						}

						.picture-info {
							width: var(--moderation-pictures-display-width);
						}
					}
				}
			}

			#moderation-mode-buttons {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 10px;
				justify-content: space-around;
				align-items: center;
				align-content: center;

				button {
					padding: 10px;
					border-radius: var(--box-border-radius);
					display: flex;
					flex-direction: column;
					gap: 10px;
					justify-content: flex-start;
					align-items: flex-start;
					align-content: flex-start;

					.separator {
						width: 80%;
						height: 1px;
						background-color: var(--text-color);
						margin: 0px auto;
					}
				}
			}
		}
	}

	.actions {
		justify-content: flex-start;
	}
}

footer {
	box-shadow: var(--box-shadow);
	font-size: var(--footer-font-size);
}


.label-required {
	color: red;
}

input,
button,
select,
textarea {
	border-radius: var(--box-border-radius);
	border: none;
	padding: 10px;
	transition: box-shadow 0.3s ease;
	box-shadow: 0 0 5px 1px rgba(181, 181, 181, 0);
	background-color: white;
	color: var(--input-color);
}

input[type="file"] {
	border-radius: var(--box-border-radius);
	border: 1px dashed var(--text-color);
	padding: 20px 10px;
	transition: box-shadow 0.3s ease;
	box-shadow: 0 0 5px 1px rgba(181, 181, 181, 0);
	width: 100%;
	background-color: var(--box-background-color);
}

button {
	transition: background-color 0.3s ease, color 0.3s ease;
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	cursor: pointer;
}

button:hover {
	background-color: var(--button-background-color-hover);
	color: var(--button-text-color-hover);
}

button:active,
button:focus {
	background-color: var(--button-background-color-focus);
	color: var(--button-text-color-focus);
}


button.blue {
	transition: background-color 0.3s ease, color 0.3s ease;
	background-color: var(--button-background-color-blue);
	color: var(--button-text-color-blue);
}

button.blue:hover {
	background-color: var(--button-background-color-hover-blue);
	color: var(--button-text-color-hover-blue);
}

button.blue:active,
button.blue:focus {
	background-color: var(--button-background-color-focus-blue);
	color: var(--button-text-color-focus-blue);
}

button.red {
	background-color: var(--button-background-color-red);
	color: var(--button-text-color-red);
}

button.red:hover {
	background-color: var(--button-background-color-hover-red);
	color: var(--button-text-color-hover-red);
}

button.red:active,
button.red:focus {
	background-color: var(--button-background-color-focus-red);
	color: var(--button-text-color-focus-red);
}

button.green {
	background-color: var(--button-background-color-green);
	color: var(--button-text-color-green);
}


button.green:hover {
	background-color: var(--button-background-color-hover-green);
	color: var(--button-text-color-hover-green);
}


button.green:active,
button.green:focus {
	background-color: var(--button-background-color-focus-green);
	color: var(--button-text-color-focus-green);
}

input:hover,
button:hover,
select:hover,
textarea:hover {
	box-shadow: 0 0 5px 3px rgba(181, 181, 181, .5);
	outline: none;
}

input:active,
input:focus,
input:focus-visible,
button:active,
button:focus,
button:focus-visible,
select:active,
select:focus,
select:focus-visible,
textarea:active,
textarea:focus,
textarea:focus-visible {
	outline: none;
}

input:focus,
button:focus,
select:focus,
textarea:focus {
	box-shadow: 0 0 5px 3px rgba(181, 181, 181, 1);
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 1em;
	padding-right: 35px !important;
	color: var(--select-text-color);
}

/* ---------- DROPZONE ---------- */
/* Style pour l'input file quand il est dans la dropzone */
.dropzone input[type="file"] {
	margin-top: 15px;
	border: 1px solid var(--text-color);
	background-color: var(--background-color);
}

/* Masquer la dropzone par défaut (sans JS) */
.dropzone {
	display: none;
}

/* Afficher la dropzone seulement avec JavaScript */
.dropzone.js-enabled {
	display: flex;
}

.dropzone {
	border: 2px dashed var(--text-color);
	border-radius: var(--box-border-radius);
	background-color: var(--box-background-color);
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	.dropzone-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.dropzone-icon {
		font-size: 48px;
		opacity: 0.7;
		transition: all 0.3s ease;
	}

	.dropzone-text {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.dropzone-main-text {
		font-size: var(--main-font-size);
		font-weight: 600;
		color: var(--text-color);
	}

	.dropzone-sub-text {
		font-size: calc(var(--main-font-size) - 2px);
		color: var(--text-color);
		opacity: 0.7;
	}
}

.dropzone:hover {
	border-color: var(--button-background-color);
	background-color: rgba(102, 102, 102, 0.1);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dropzone.dragover {
	border-color: var(--button-background-color-blue);
	background-color: rgba(43, 86, 224, 0.1);
	border-style: solid;
	transform: scale(1.02);
}

.dropzone:hover .dropzone-icon {
	opacity: 1;
	transform: scale(1.1);
}

.dropzone.dragover .dropzone-main-text {
	color: var(--button-background-color-blue);
}

.price {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.dropzone {
		padding: 30px 15px;
		min-height: 100px;

		.dropzone-icon {
			font-size: 36px;
		}

		.dropzone-main-text {
			font-size: calc(var(--main-font-size) - 2px);
		}

		.dropzone-sub-text {
			font-size: calc(var(--main-font-size) - 4px);
		}
	}
}

.hidden {
	display: none;
}

.purchases {
	tbody {
		tr {
			td {
				vertical-align: bottom;
			}

			td:not(:nth-child(1)) {
				text-align: right;
			}
		}

		tr:last-child {
			td:nth-child(1) {
				text-align: right;
			}
		}
	}
}

.error {
	color: red;
}

.success {
	color: green;
}

a {
	color: var(--link-color);
	text-decoration: underline;
	font-size: inherit;
	font-weight: inherit;
}

a:hover {
	color: inherit;
}

.only-print {
	display: none;
}

.align-right {
	text-align: right;
	width: 100%;

	>* {
		display: inline-block;
		text-align: left;
		width: fit-content
	}
}

#steps {
	>ul {
		list-style: none;
		padding: 0px;
		margin: 0px;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		gap: 10px;

		>li {
			/* width: calc(100% / 3 - 10px); */
			flex-basis: calc(100% / 3 - 20px);
			flex-grow: 1;
			font-weight: bold;
			padding: 10px;
			border-radius: var(--box-border-radius);
			box-shadow: var(--box-shadow);

			>ul {
				list-style: none;
				padding: 0px;
				margin: 10px 0px 0px 10px;
				font-weight: normal;


				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 10px;

				>li {
					padding: 10px;
					border-radius: var(--box-border-radius);
					box-shadow: var(--box-shadow);
					min-width: 150px;
				}
			}
		}

		.current {
			background-color: rgb(255, 255, 145);

		}

		.done {
			background-color: rgb(172, 255, 172);
		}

		.todo {
			background-color: rgb(248, 195, 142);
		}

		a {
			text-decoration: none;
			color: inherit;

		}
	}
}

/* ---------- DARK MODE ---------- */

@media (prefers-color-scheme: dark) {}

/* ---------- PRINT MODE ---------- */

@media print {

	body {
		width: 100%;
		height: unset;
		overflow: visible;
		margin: 0px;
		padding: 0px;

		.container {
			justify-content: flex-start !important;
		}

		.table-container {
			max-width: 100% !important;
			overflow-x: visible !important;

			table {
				max-width: 100% !important;
				min-width: unset !important;
			}

			th {
				min-width: unset !important;
				word-break: break-word !important;
			}

			td {
				border-top: 1px solid var(--text-color);
				min-width: unset !important;
			}
		}
	}

	.break {
		page-break-before: always;
		page-break-inside: avoid;
	}

	.break:first-child {
		page-break-before: avoid;
	}

	.no-print,
	header,
	footer,
	.actions,
	.header-actions {
		display: none !important;
	}

	.only-print {
		display: unset !important;
		font-size: inherit !important;
	}

	* {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	*::-webkit-scrollbar {
		display: none;
	}
}