/* CSS */
/* (Version) By sync - (site ver:9.0.0) */

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; height: 100svh; height: 100dvh;
}
html, body {
	height: 100%;
	user-select: none;
	-webkit-user-select: none;
	-ms-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 15px 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 */