/* Couleurs */
:root {
	--color-primary: #ff879a; /* couleur rose */
	--color-background: #FFCCD4; /* couleur du fond de page */
	--color-button-text: white;
}

/* Style global de la page */
body {
	background-color: var(--color-background);
	font-family: Arial, sans-serif;
}

/* Style des boutons oblongs */
.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-button-text);
	border: none;
	padding: 12px 36px; /* plus large pour effet oblong */
	font-size: 16px;
	border-radius: 50px; /* bord arrondi complet = oblong */
	cursor: pointer;
	text-align: center;
	transition: opacity 0.2s;
}

	.btn-primary:hover {
		opacity: 0.9;
	}
.btn-small {
	padding: 1.0rem 1.0rem; /* réduit l’espace interne */
	font-size: 1.0rem; /* texte plus petit */
}

.loading-progress circle {
	stroke: #ff879a; /* couleur rose, comme ton bouton */
	stroke-width: 8;
	fill: none;
	stroke-linecap: round;
	animation: rotate 1s linear infinite;
}

/* Animation rotation si pas déjà dans app.css */
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.loading-progress circle:last-child {
	stroke: #ff879a !important; /* rose comme tes boutons */
	stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
	transition: stroke-dasharray 0.05s ease-in-out;
}


/* Style flat pour les inputs */
.input-flat {
	background-color: transparent;
	border: none;
	border-bottom: 2px solid #190649; /* ligne noire */
	padding: 8px 4px;
	font-size: 16px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

	/* couleur au focus */
	.input-flat:focus {
		border-bottom-color: #190649; /* rose au focus */
	}

		/* empêche le navigateur de changer la couleur quand l'input est invalide */
		.input-flat:invalid,
		.input-flat:focus:invalid {
			border-bottom-color: #190649; /* toujours noir */
		}
.btn-start {
	background-color: #28a745; /* vert */
	color: white;
	font-weight: bold;
	padding: 12px 30px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.2s;
	max-width: 200px; /* limite largeur */
	width: 100%; /* prend la place dispo jusqu'à 200px */
	text-align: center;
}

	.btn-start:hover {
		opacity: 0.9;
	}

.image-grid {
	display: grid;
	gap: 10px;
	justify-content: center;
	align-items: center;
	grid-auto-rows: max-content; /* chaque ligne s'adapte à l'image */
}

.image-container {
	border: 3px solid transparent;
	cursor: pointer;
	display: flex; /* flex pour centrer l'image */
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s;
	padding: 0;
}

	.image-container img {
		display: block;
		max-width: 100%;
		max-height: 200px;
		border-radius: 4px;
		pointer-events: none;
	}

	.image-container.selected img {
		border: 3px solid green; /* cadre autour de l'image */
		box-shadow: 0 0 10px green;
		border-radius: 4px;
	}

.input-line {
	background: transparent;
	border: none;
	border-bottom: 2px solid #333; /* ligne en bas */
	padding: 0.2rem 0.4rem;
	font-size: 1rem;
	outline: none; /* supprime le contour bleu */
	width: 3rem; /* largeur fixe pour quantité */
	text-align: center;
}

	/* effet focus */
	.input-line:focus {
		border-bottom: 2px solid #0071c1; /* couleur différente quand actif */
	}

	/* 🔹 supprime les flèches dans Chrome, Edge, Safari */
	.input-line::-webkit-outer-spin-button,
	.input-line::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* 🔹 supprime les flèches dans Firefox */
	.input-line[type=number] {
		-moz-appearance: textfield;
	}

.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.4); /* semi-transparent */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999; /* au-dessus de tout */
}

.spinner {
	border: 8px solid #f3f3f3; /* gris clair */
	border-top: 8px solid #3498db; /* bleu */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

.loading-text {
	margin-top: 10px;
	color: white;
	font-size: 1.2rem;
	text-align: center;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}