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

html, body {
	font-family: "FreeMono", monospace;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	/* Dégradé de fond */
	background: linear-gradient(135deg, #66CC99, #66CC85);
	background-repeat: repeat;
	background-size: cover;
	/* Couleur du texte */
	color: #66CC99;
	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;}
/* 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: 1px; 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;}

/* Pour garantir que l'image et le texte sont bien centrés */
#entete_sem th {
	text-align: center;
}

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

#blocks{ margin-top: 10px;}
table { font-family: Verdana, sans-serif; /* Ajout de "sans-serif" pour une meilleure compatibilité */ font-size: 10px; color: #003366; padding: 0 0 5px; margin-bottom: 5px; text-align: center; border-radius: 5px;}

th { font-family: "FreeMono", monospace; /* Utilisation des guillemets pour les polices */ font-size: 14px; 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;}

#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;}

#entete_sem {
	width: 525px; /* ou une largeur en pourcentage comme 100% */
	margin: 0 auto; /* Centre le tableau horizontalement */
	border-collapse: collapse; /* Optionnel : pour supprimer les espaces entre les cellules */
}

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

@supports (-webkit-touch-callout: none) { #Lundi, #Mardi, #Mercredi, #Jeudi, #Vendredi, #Samedi, #Dimanche {
	/* Styles spécifiques pour Safari iOS */ margin-left: 8px; font-size: 14px;}}

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: 3px;}
.info { font-size: 13px;}
.info_1 { font-size: 14px;}
.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;}
/* .version */
.version { font-family: "New Century Schoolbook", "TeX Gyre Schola", serif; font-weight: bold; font-size: 10px; color: #003366; bottom: 0; /* bas de la page */  justify-content: center; align-items: center; /* au milieu */ transform: translateX(-50%); /* recentre parfaitement */ text-align: center;}
/* .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 { 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 3px; /* Un peu d'espace autour du texte */
	background: linear-gradient(to right, #FFB84D, #FFCC66); /* Dégradé jaune clair vers un jaune */
}

.image img, #image img{ /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée de 0.2 seconde. */
-webkit-transition: all 0.1s ease; /* Safari et Chrome */
-moz-transition: all 0.1s ease; /* Firefox */
-ms-transition: all 0.1s ease; /* Internet Explorer 9 */
-o-transition: all 0.1s ease; /* Opera */
transition: all 0.1s ease;}

.image:hover img, #image:hover img{ /* L'image est grossie de 10% */
-webkit-transform:scale(1.3); /* Safari et Chrome */
-moz-transform:scale(1.3); /* Firefox */
-ms-transform:scale(1.3); /* Internet Explorer 9 */
-o-transform:scale(1.3); /* Opera */
transform:scale(1.3);}

.image2, #image2{ width: 40%; height: auto;}

#image2 img, .image2 img{ /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée de 0.2 seconde. */
-webkit-transition: all 0.2s ease; /* Safari et Chrome */
-moz-transition: all 0.1s ease; /* Firefox */
-ms-transition: all 0.1s ease; /* Internet Explorer 9 */
-o-transition: all 0.1s ease; /* Opera */
transition: all 0.1s ease;}

#image2:hover img, .image2:hover img{ /* L'image est grossie de 10% */
-webkit-transform:scale(2.1); /* Safari et Chrome */
-moz-transform:scale(2.1); /* Firefox */
-ms-transform:scale(2.1); /* Internet Explorer 9 */
-o-transform:scale(2.1); /* Opera */
transform:scale(2.1);}

/* 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 */}

.flottant:hover { transform: scale(1.2); /* Augmenter la taille de l'image au survol */}

/* Information : container avec un fond d'image */
.container-class {
	background-image: url('parchemin.png');
	background-repeat: repeat;
	background-position: center;
	width: 500px;
	padding: 10px;
	border: 0px solid #333333;
	border-radius: 25px; /* CSS3 */

	/* Clipping de l'image à l'intérieur des coins arrondis */
	overflow: hidden;

	/* Préfixes pour compatibilité avec vieux navigateurs */
	-webkit-border-radius: 25px; /* Chrome, Safari */
	-moz-border-radius: 25px; /* Firefox */
}

/* FIN CSS */