/* Application des jeux de couleur selon le système et le choix utilisateur */

:root {
	--couleur_clair_fond: #f6f5f4;
	--couleur_clair_texte: #3d3846;
	--couleur_clair_erreur_fond: #f07382;
	--couleur_clair_erreur_texte: #FFFFFF;
	--couleur_clair_accent: #3a55e8;
	--couleur_clair_texte_accent: #241f31;
	--couleur_clair_champ_fond: #FFFFFF;
	--couleur_clair_champ_texte: #000000;

	--couleur_sombre_fond: #3d3846;
	--couleur_sombre_texte: #c0bfbc;
	--couleur_sombre_erreur_fond: #4F0204;
	--couleur_sombre_erreur_texte: #FFFFFF;
	--couleur_sombre_accent: #7ee600;
	--couleur_sombre_texte_accent: #e6e3e3;
	--couleur_sombre_champ_fond: #5e5c64;
	--couleur_sombre_champ_texte: #ffffff;
}

body, .theme-clair {
	--couleur_fond: var(--couleur_clair_fond);
	--couleur_texte: var(--couleur_clair_texte);
	--couleur_erreur_fond: var(--couleur_clair_erreur_fond);
	--couleur_erreur_texte: var(--couleur_clair_erreur_texte);
	--couleur_accent: var(--couleur_clair_accent);
	--couleur_texte_accent: var(--couleur_clair_texte_accent);
	--couleur_champ_fond: var(--couleur_clair_champ_fond);
	--couleur_champ_texte: var(--couleur_clair_champ_texte);
}

.theme-sombre {
	--couleur_fond: var(--couleur_sombre_fond);
	--couleur_texte: var(--couleur_sombre_texte);
	--couleur_erreur_fond: var(--couleur_sombre_erreur_fond);
	--couleur_erreur_texte: var(--couleur_sombre_erreur_texte);
	--couleur_accent: var(--couleur_sombre_accent);
	--couleur_texte_accent: var(--couleur_sombre_texte_accent);
	--couleur_champ_fond: var(--couleur_sombre_champ_fond);
	--couleur_champ_texte: var(--couleur_sombre_champ_texte);
}

@media(prefers-color-scheme:dark) {
	body {
		--couleur_fond: var(--couleur_sombre_fond);
		--couleur_texte: var(--couleur_sombre_texte);
		--couleur_erreur_fond: var(--couleur_sombre_erreur_fond);
		--couleur_erreur_texte: var(--couleur_sombre_erreur_texte);
		--couleur_accent: var(--couleur_sombre_accent);
		--couleur_texte_accent: var(--couleur_sombre_texte_accent);
		--couleur_champ_fond: var(--couleur_sombre_champ_fond);
		--couleur_champ_texte: var(--couleur_sombre_champ_texte);
	}
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), url(/fonts/OpenSans-Regular.woff) format('woff');
}

@keyframes tourne {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}
@keyframes arrive {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.arrive {
	animation-name: arrive ;
	animation-timing-function: ease;
	animation-duration: .7s;
	animation-iteration-count: 1;
}

* {
	box-sizing: border-box;
}

html,
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	padding: 0;
	margin: 0;
	height: 100%;
	color: var(--couleur_texte);
	background-color: var(--couleur_fond);
}

header {
	font-weight: bold;
	font-size: 1.5rem;
	margin: 1rem 0;
	color: var(--couleur_accent);
}

footer {
	margin: 1rem 0;
	text-align: right;
}

.pre {
	white-space: pre-line;
}

.champ-saisie {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.2;
	padding: .3rem 1rem;
	color: var(--couleur_champ_texte);
	background: var(--couleur_champ_fond);
	border-color: var(--couleur_fond);
	outline: none;
	border-width: 1px;
	border-style: solid;
	border-radius: .5rem;
	&:focus {
		outline: 2px solid var(--couleur_accent);
	}
	&:hover {
		border-color: var(--couleur_texte);
	}
}

input[type=text],
input[type=number],
input[type=password],
input[type=date],
.ouinon button,
select {
	height: 1.9rem;
}

textarea {
	resize: vertical;
}

input[type=text],
input[type=password],
select,
textarea {
	width: 100%;
}

input[type=date] {
	width: min(100%, 11em);
}

button,
.button {
	font-family: inherit;
	font-size: 90%;
	border-radius: 10px;
	cursor: pointer;
	padding: .5em 1em;
	text-align: left;
	color: var(--couleur_texte_accent);
	background-color: color-mix(in srgb, var(--couleur_accent) 30%, var(--couleur_fond));
	border: solid color-mix(in srgb, var(--couleur_accent) 20%, var(--couleur_fond)) 1px;
	text-decoration: none;
	display: inline-block;
	vertical-align: baseline;
	&[disabled] {
		background-color: var(--couleur_fond);
	}
	&:not([disabled]):hover {
		background-color: color-mix(in srgb, var(--couleur_accent) 40%, var(--couleur_fond));
	}
	&:not([disabled]):active {
		background-color: color-mix(in srgb, var(--couleur_accent) 50%, var(--couleur_fond));
	}
}
.button.actif, button.actif {
	background-color: color-mix(in srgb, var(--couleur_accent) 50%, var(--couleur_fond));
}
.button-group {
	display: inline-flex;
	> .button:first-of-type:not(:last-of-type) {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	> .button:last-of-type:not(:first-of-type) {
		border-top-left-radius: 0px;
		border-bottom-left-radius: 00px;
	}
	> .button:not(:last-of-type):not(:first-of-type) {
		border-radius: 0;
	}
}

.erreur {
	color: var(--couleur_erreur_texte);
	background-color: var(--couleur_erreur_fond);
}

.form-grid {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: min-content auto;
	grid-gap: 10px .5rem;
	align-items: start;
	line-height: 1.2;
	> label,
	> section > label {
		grid-column-start: 1;
		grid-column-end: 2;
		padding-top: .4rem;
		white-space: pre;
		text-align: right;
		&::after {
			content: " :";
		}
	}
	> p,
	> section > p,
	> section > header,
	> .large,
	> section > .large {
		grid-column-start: 1;
		grid-column-end: 3;
	}
	> section {
		margin: 0;
		grid-column-start: 1;
		grid-column-end: 3;
		display: grid;
		grid-template-columns: subgrid;
		row-gap: .5rem;
	}
	span.erreur {
		padding: .1rem 1rem .3rem 1rem;
		border-radius: 0 0 .5rem .5rem;
		display: inline-block;
		margin: 0 .5rem 0 .5rem;
	}
}

.ecran {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 10;
	background: rgba(0,0,0,.5);
	backdrop-filter: blur(3px);
	overflow: auto;
	& > * {
		margin: auto;
	}
}

.loaded::before ,
.loading::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	background: black;
	content: " ";
}
.loaded::before {
	z-index: -1;
	opacity: 0;
	transition: opacity linear .25s, z-index .01s linear .25s;
}
.loading::before {
	z-index: 98;
	opacity: .5;
	transition: opacity linear 1s;
}
.loading::after {
	position: absolute;
	top: calc( (100% - 128px) / 2 );
	left: calc( (100% - 128px) / 2 );
	height: 128px;
	width: 128px;
	display: block;
	z-index: 99;
	background: transparent;
	content: url("/img/roue.png");
	animation-name: tourne ;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


table.listing {
	line-height: 1.2rem;
	background-color: var(--couleur_fond);
	border-collapse: collapse;
	width: 100%;
	&.id {
		thead th:first-child { visibility: hidden; }
		tbody tr th:first-of-type {
			text-align: right;
			padding: 0 1rem;
			white-space: nowrap;
			width: 0;
		}
		tfoot th:first-child { visibility: hidden; }
	}
	&.actions {
		thead th:last-child {
			visibility: hidden;
			width: 0;
		}
		tbody td:last-child {
			text-align: left;
			white-space: nowrap;
			width: 0;
		}
		tfoot td:last-child {
			visibility: hidden;
			width: 0;
		}
	}
	th {
		font-weight: bold;
		font-size: .6rem;
		text-transform: uppercase;
		text-align: left;
		color: var(--couleur_accent);
		vertical-align: middle;
		padding: .2rem .5rem;
	}
	tbody {
		tr:nth-child(odd) > * {
			background-color: color-mix(in srgb, var(--couleur_accent) 10%, var(--couleur_fond));
		}
		tr:nth-child(even) > * {
			background-color: color-mix(in srgb, var(--couleur_accent) 5%, var(--couleur_fond));
		}
		td {
			padding: 5px;
			color: var(--couleur_texte);
			button {
				padding: 5px 1rem;
			}
			&.max {
				width: max-content;
			}
		}
	}

}