/* CSS */
/* (Version) By sync - Boulette (V5.5.4) */

body {
	font-family: Arial, sans-serif;
	background-image: url('clock.jpg'); /* remplace par le bon chemin */
	background-size: cover; /* ajuste l'image à toute la taille de l'écran */
	background-position: center; /* centre l'image */
	background-repeat: no-repeat; /* évite la répétition de l'image */
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	user-select: none;
}
@media (max-width: 500px) {
	calculator {
		width: 95%;
		min-width: unset;
	}
	#button, button, #input, input {
		font-size: 12px;
		width: auto;
	}
}

.back-button { position: absolute; top: 20px; left: 20px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer;}

.calculator { background: #339999; padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); width: 300px;} /* #339999 */
.display {
	background: #111;
	color: #66CC99; /* texte par défaut en vert */
	font-family: monospace;
	font-size: 22px;
	padding: 10px;
	border-radius: 8px;
	min-height: 50px;
	text-align: right;
	white-space: pre-line; /* permet les retours à la ligne */
}


.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}

.buttons button { padding: 20px; font-size: 18px; border: none; background-color: #e0e0e0; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease;}

.buttons button:hover { background-color: #d0d0d0;}

.buttons button.operator { background-color: #ff9800; color: white;}

.buttons button.equal { background-color: #4caf50; color: white; grid-column: span 3;}

.buttons button.clear { background-color: #f44336; color: white;}

#input { border-radius: 55px; /* CSS3 */ -moz-border-radius: 55px; /* pour Mozilla */ -khtml-border-radius: 55px; /* pour Safari et Chrome */ -webkit-border-radius: 55px; /* pour Safari sur Mac */ }

strong { text-align: center; font-size: 10px;}

/* FIN CSS */