@charset "UTF-8";
/* CSS */
/* (Version) By sync - Boulette (V5.5.4) */

/* RESET DE BASE */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, sans-serif;
}

/* CORPS PRINCIPAL */
body {
	position: relative;
	background: linear-gradient(to right, #66CC99 20%, #CCFFFF 50%, #66CC99 80%);
	min-height: 100vh;
	height: -moz-fill-available; /* pour Firefox */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	overflow-x: hidden;
	overflow-y: auto;
}

html, body {
	/* Empêche la sélection de texte */
	 -webkit-user-select: none;
	user-select: none;
	user-source: hidden; -ms-user-select: none;
}

html {
	zoom: 100%;
	transform: none;
}

/* Explication :
- to right = le dégradé s’étire de gauche à droite,
- on force la couleur centrale (#CCFFFF) à 50%,
- et on remet la même couleur qu’au début à la fin pour symétriser l’effet. */

.corner-image { position: absolute; width: 150px; height: 150px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);}
.top-left { top: 10px; left: 20px;}
.top-right { top: 10px; right: 20px;}
.bottom-left { bottom: 20px; left: 20px;}
.bottom-right { bottom: 20px; right: 20px;}
.center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 610px; padding: 15px; background-color: rgba(255, 204, 102, 1); border-radius: 12px; box-shadow: 0 6px 12px rgba(0,0,0,0.1);}

.center-text h1 { font-size: 1.7em; margin-bottom: 5px;}
.center-text p { font-size: 15px; line-height: 1.5;}
header, h1 { margin: 1px;}
@media (max-width: 600px) {
	.corner-image { width: 60px; height: 60px;}
	.center-text h1 { font-size: 1.5em;}
	.center-text p { font-size: 1em;}
}

.container { width: 80%; max-width: 850px; margin: auto; background: linear-gradient(145deg, #33CC66, #66CC99); color: #000000; border-radius: 8px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-height: 460px; overflow-y: auto;}

h2 { color: #ffd700; font-size: 17px; text-shadow: 0 0 10px rgba(70, 70, 70, 51.6);}

.cta { display: inline-block; margin-top: 20px; padding: 11px 23px; background-color: #FFCC66; color: #003333; font-size: 1.1em; text-decoration: none; border-radius: 7px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: background-color 0.3s ease;}
.cta:hover { background-color: #e6b800;}

#horloges { transition: opacity 0.4s ease-in-out; font-size: 40px; margin: 8px 0;}
.wrapper { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;}
.version { font-family: "New Century Schoolbook", "TeX Gyre Schola", serif; font-weight: bold; font-size: 9px; color: #003366; text-align: center;}
.version a { color: #003366; text-decoration: none;}

.align-img-text { display: inline-flex; /* Utilisation de flexbox pour aligner */ align-items: center; /* Aligner verticalement l'image et le texte */ text-decoration: none;}
.align-img-text img { margin-left: 6px; /* Espacement entre le texte et l'image */}

img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; /* à ajouter */}

/* FIN CSS */