@charset "UTF-8";

/* CSS */
/* (Version) By sync - (site ver:9.0.0) */
html, body {
	font-family: "FreeMono", monospace; margin: 0; padding: 0; width: 100%;
	 /* garde le fond sur toute la hauteur visible */
	background: linear-gradient(135deg, #66CC99, #66CC85); background-repeat: repeat; background-size: cover; color: #66CC99; text-align: center;
}
/*** dézoom forcé
@media (max-width: 768px) {
	body {
		transform: scale(0.8); transform-origin: top left; width: 130%; /* compense le scale * /
	}
}
***/

html, body {
	/* désactiver le menu contextuel qui apparaît lorsqu'un utilisateur effectue un appui long */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.titre1 { font-family: "New Century Schoolbook", "TeX Gyre Schola", serif; font-weight: bold; font-size: 23px; color: #003366; text-align: center; height: 25px; vertical-align: middle; padding-top: 0px; text-shadow: 0px 1px 6px #003366; margin-top: 2px;}
/* Alignement de l'image et du texte dans le titre */
.titre1 h2 { display: flex; justify-content: center; align-items: center;}
.titre1 h2 img { margin-right: 5px; margin-left: 5px;}

.titre2 { font-family: "New Century Schoolbook", "TeX Gyre Schola", serif; font-size: 18px; color: #003366; text-align: center; vertical-align: middle; height: 10px; padding-top: 0px; text-shadow: 0px 1px 6px #003366;}

a:link{ text-decoration: none; text-align: left; border: 0px none;}
a:visited{ text-align: left; text-decoration: none; border: 0px none;}
a:active{ text-align: left; text-decoration: none; border: 0px none;}
a:hover{ text-align: left; color: #CC6666; border: 0px none;} /* font-weight: bolder; */
a{ text-decoration: none; color: inherit;}

.table-cell { width: 525px; height: 22px;}

#blocks{ margin-top: 10px;}

table { font-family: Verdana, sans-serif; font-size: 10px; color: #003366; padding: 0 0 5px; margin-bottom: 3px; text-align: center; border-radius: 8px;}

table { max-width: 100%; box-sizing: border-box;}

th { font-family: "FreeMono", monospace; /* Utilisation des guillemets pour les polices */ font-size: 13px; padding: 3px 5px; text-align: center;}
td { font-family: "Arial Narrow", sans-serif; /* Ajout des guillemets pour la police */ font-size: 14px; color: #003366; vertical-align: top; text-align: left; padding: 3px;}
/* Si ce sont spécifiquement les jours dans un tableau */
th, td { -webkit-text-size-adjust: 100%;}

#reset { font-family: Verdana, sans-serif; /* Ajout de "sans-serif" pour cohérence */ font-size: 12px; padding: 3px 5px; text-align: center; font-weight: bold; font-style: italic;}
#sel_jour { background: transparent; position: fixed; top: 50%; left: 50%; z-index: 10; width: 250px; height: 360px; margin-left: -125px; margin-top: -180px;}

/* Pour garantir que l'image et le texte sont bien centrés */
#entete_sem th { text-align: center;}
#entete_sem {
	width: 100%;
	max-width: 525px; /* ou une largeur en pourcentage comme 100% */
	margin: auto; /* Centre le tableau horizontalement */
	/* border-collapse: collapse; /* Optionnel : pour supprimer les espaces entre les cellules */
	/* margin: 2px auto 2px auto;marge haut 3px, bas 2px, centré horizontalement */
}

html {
	/* Empêche iOS d'agrandir le texte automatiquement */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#Lundi, #Mardi, #Mercredi, #Jeudi, #Vendredi, #Samedi, #Dimanche { font-size: 13px; margin-left: 20px;}

/* Cibler Safari sur iOS */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#Lundi, #Mardi, #Mercredi, #Jeudi, #Vendredi, #Samedi, #Dimanche {
		font-size: 14px;
		margin-left: 18px; /* Optionnel : correction du rendu du texte pour iOS */
		-webkit-text-size-adjust: none;}
}

hr{ color: #000000; background-color: #339999; height: 1px; border: none;}

/* Styles généraux pour input */
input { border: 1px solid; cursor: pointer; color: #003366; text-align: center; -moz-border-radius: 57px; /* pour Mozilla */ -khtml-border-radius: 57px; /* pour Safari et Chrome */ -webkit-border-radius: 57px; /* pour Safari sur Mac */ border-radius: 0; /* CSS3 standard */}

/* Pour masquer les boutons de spin sur les input de type number */
input::-webkit-inner-spin-button { -webkit-appearance: none;}

.info, .info_1 { font-family: "Arial Narrow", sans-serif; color: #003366; vertical-align: top; padding: 2px;}
.info { font-size: 12px;}
.info_1 { font-size: 12px;}
.Total_time, .tempsNormal, .Totals_times { height: 15px; width: 70px; font-family: "Verdana", Arial, Helvetica, sans-serif; font-size: 14px; color: #003366; border: 1px solid #003366; text-align: right; vertical-align: middle; padding-right: 2px;}
.Totals_times { border-color: #CC0000; background-color: #CCCCCC;}
/* .heure */
.heure { height: 15px; width: 21px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #003366; border: 1px solid #003366; text-align: right; vertical-align: middle; padding-right: 2px;}
/* .Total_result */
.Total_result { height: 15px; width: 70px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #003366; border: 1px solid #003366; text-align: right; vertical-align: middle; padding-right: 2px;}
/* .complementaire */
.complementaire { font-size: 11px; vertical-align: middle;}
/* .reinitialise */
.reinitialise { font-family: Verdana; font-size: 11px; color: #003366; width: 60px; text-align: center; vertical-align: top;}
/* .Ajoute_ligne */
.Ajoute_ligne { font-family: Verdana; font-size: 11px; color: #003366; width: 30px; text-align: center; vertical-align: top;}
/* .taille_table */
.taille_table { width: 100%; max-width: 525px; margin: auto; box-shadow: 0 0 15px #aaa;}
/* .yann */
.yann { box-shadow: 0 0 15px #aaa; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
/* .zoom : pour les éléments de petite taille */
.zoom { width: 18px; height: 18px; object-fit: cover; display: inline-block; /* Permet de remplir l'élément sans déformer l'image */}
/* .image : pour les images qui prennent 50% de leur conteneur */
.image { width: 50%; height: auto; /* Ajuste la hauteur automatiquement pour garder le ratio */ object-fit: cover; /* Permet de couvrir l'élément tout en respectant les proportions */ cursor: pointer;}

.selsemjour { /* block séléction jour semaine */
	border: 1px solid transparent; /* Bordure transparente par défaut */
	border-radius: 4px; /* CSS3 */
	-moz-border-radius: 4px; /* pour Mozilla */
	-khtml-border-radius: 4px; /* pour Safari et Chrome */
	-webkit-border-radius: 4px; /* pour Safari sur Mac */
	/* Arrondi des coins */
	padding: 2px 2px; /* Un peu d'espace autour du texte */
	background: linear-gradient(to right, #FFB84D, #FFCC66); /* Dégradé jaune clair vers un jaune */
}

/* Images générales avec transition */
.image img, #image img, .image2 img, #image2 img {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

/* Zoom au hover pour .image */
.image:hover img, #image:hover img {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}

/* Images .image2 : taille par défaut responsive */
.image2, #image2 {
	width: 40%;
	height: auto;
}
/* Zoom au hover pour .image2 */
.image2:hover img, #image2:hover img {
	-webkit-transform: scale(2.1);
	-moz-transform: scale(2.1);
	-ms-transform: scale(2.1);
	-o-transform: scale(2.1);
	transform: scale(2.1);
}
/* Responsive : réduire taille des images sur petits écrans */
@media (max-width: 480px) {
	.image2, #image2 { width: 60%;}
}
/* Responsive : réduire taille des images sur petits écrans */
@media (max-width: 480px) {
	.image2, #image2 { width: 60%;}
}
/* Afficher une image au survol (ajouter un effet hover) */
.flottant { display: block; /* Utilisation de "block" pour centrer l'image */ margin: 0 auto; /* Centrer l'image horizontalement */ width: 22px; height: 22px; text-align: center; cursor: pointer; border-radius: 8px; transition: transform 0.3s ease; /* Ajout d'un effet de survol */}

/* .version */ /* bas de la page */
.version { font-family: "New Century Schoolbook", "TeX Gyre Schola", serif; font-weight: bold; font-size: 11px; color: #003366; justify-content: center; align-items: center; /* au milieu */ transform: translateX(0%); /* recentre parfaitement */
text-align: center;}

/* .footer */
/* Footer principal */
/* Footer responsive */
/* Footer responsive universel */
/* Wrapper pour flex */
.table_cell_footer { width: 525px; height: 22px; font-size: 10.5px;}
/* Pour garantir que l'image et le texte sont bien centrés */

#sem_footer {
	width: 100%; text-align: center;
	max-width: 525px; /* ou une largeur en pourcentage comme 100% */
	margin: auto; /* Centre le tableau horizontalement */
	/* border-collapse: collapse;/* Optionnel : pour supprimer les espaces entre les cellules */
	/* margin: 2px auto 2px auto;marge haut 3px, bas 2px, centré horizontalement */
	font-size: 10.5px;
	margin-block: 0%;
	padding: 8px;
}

#table_cell_footer_S {
	font-family: "New Century Schoolbook", "TeX Gyre Schola", serif;
	font-style: italic;
	font-size: 10.5px;
	width: 100%;
	text-align: center;
	align-items: center;
	color: #003366; /***** /!\ si j'enleve la couleur l'écriture par dans tous les sens...? *****/
	max-width: 525px; /* ou une largeur en pourcentage comme 100% */
	margin: auto; /* Centre le tableau horizontalement */
	/* border-collapse: collapse;/* Optionnel : pour supprimer les espaces entre les cellules */
	/* margin: 2px auto 2px auto;marge haut 3px, bas 2px, centré horizontalement */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px;
	box-sizing: border-box; user-select: none;
}
/* CSS uniquement pour iOS Safari (iPhone / iPad) */
@supports (-webkit-touch-callout: none) {
	#table_cell_footer_S {
		font-family: "New Century Schoolbook", "TeX Gyre Schola", serif;
		font-style: italic; font-size: 10.5px; width: 100%; max-width: 525px; margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		text-align: center; color: #003366; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 10px; box-sizing: border-box; /* iOS */ -webkit-user-select: none; user-select: none; /* évite les décalages horizontaux iOS */ -webkit-transform: translateZ(0);
	}
}
/* FIN CSS */