body {
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-family: 'Calibri', sans-sherif;
        }

        .wrapper {
            max-width: 400px;
            width: 100%;
            border: 1px solid yellow;
            display: flex;
            flex-direction: column;
            background-color: #FFD47B;
            align-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            min-height: 100vh;
            height: 100%;
            position: relative;
        }

        .header {
            background: linear-gradient(to bottom, #636363 -6%, black 55%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px 0px;
            color: white;
            margin-top: 20px;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);        }

        .header h1 {
            padding: 0;
            margin: 0;
            font-weight: 500;
            padding: 10px 0;
        }

        .accordion {
            display: flex;
            flex-direction: column;
            width: 80%;
        }

        .accordion-section {
            background: transparent;
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
		
		.accordion-section-form {
            background: transparent;
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .accordation_title_wrapper {
            display: flex;
            background: linear-gradient(to bottom, #636363 -6%, black 55%);
            color: white;
            align-items: center;
        }

        .hexagon {
            width: 50px; /* Reduced hexagon size */
            height: 28.87px; /* Corresponding height */
            background-color: #FEC108; /* Honey color */
            position: absolute;
            transform: rotate(330deg); /* Rotate hexagons by 330 degrees */
            margin-left: -11px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .hexagon:before,
        .hexagon:after {
            content: '';
            width: 0;
            border-left: 25px solid transparent; /* Reduced border size */
            border-right: 25px solid transparent; /* Reduced border size */
            position: absolute;
        }

        .hexagon:before {
            top: -14.44px; /* Adjusted top position */
            border-bottom: 14.44px solid #FEC108; /* Honey color */
        }

        .hexagon:after {
            bottom: -14.44px; /* Adjusted bottom position */
            border-top: 14.44px solid #FEC108; /* Honey color */
        }
		
		.hexagon-number {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%) rotate(30deg);
			color: red; /* Couleur rouge */
			font-weight: bold; /* Texte en gras */
		}
		
        input[type="checkbox" i]{
            transform: scale(1.4);
            margin-right: 12px;
        }
		
        #datePicker{
            /*width: 50%;
            margin-left: 1px;
            text-align: center;
            font-size: 20px; */
            /* margin-top: 5px; */
            /* padding: 6px 0px; */
			display: flex;
		    justify-content: center;   /* centre horizontalement */
		    width: 100%;
        }
		
        .accordion-title {
            padding: 6px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            width: 100%;
        }

        .accordion-content {
            display: none;
            padding: 12px;
            /* background-color: red; */
        }

        /* Show content when the section is active */
        .active .accordion-content {
            display: block;
            width: 100%;
            align-self: flex-end;
        }
		
        .accordion-content ul>li {
            list-style: none;
            background-color: #c0c0c0;
            margin: 5px 0px;
            text-align: center;
            padding: 5px 0px;
            border-radius: 4px;
            font-weight: 600;
			width: 100%;
        }
		
		.li {
            list-style: none;
            background-color: #c0c0c0;
            margin: 5px 0px;
            text-align: center;
            padding: 5px 0px;
            border-radius: 4px;
            font-weight: 600;
            margin: 1px 0px;
            border: 0.5px solid #919191;
			transition: background-color 0.3s ease;				
        }	
		
		.button_list {
			display: block;
			width: 100%;
			text-align: center;
			padding: 5px 0px;
			background-color: #c0c0c0;
			border: 0.5px solid #919191;
			margin: 5px 0px;
			border-radius: 4px;
			font-weight: 600;
			transition: background-color 0.3s ease;
			
		}
		
		/* Ajoutez le style hover */
		.button_list:hover {
			background-color: #a0a0a0;
		}
		
		.li:hover {
			background-color: #FEC108;
		}
		
        .buttons_div {
            display: flex;
            width: 90%;
            flex-direction: row;
            justify-content: space-around;
            padding: 10px 10px;
            align-items: baseline;
            align-items: flex-end;
            color: white;
        }
		
        .buttons_div button {
            border-radius: 6px;
            cursor: pointer;
            /* width: 100px; */
            background: linear-gradient(to bottom, #636363 -6%, black 55%);
            color: white;
            font-size: 19px;
            padding: 5px 20px;
        }
		
        .button_wraper {
            margin-top: 10%; /* This will push the buttons_div to the bottom */
            width: 100%;
        }
		
        .form_data{
            padding-top: 20px;
            width: 75%;
            font-size: 22px;
         /* background-color: red  ; */            
        }
		
		
		.accord_input input{
            padding: 8px 3px;
            border: 2px solid black;			
        }
		
		.long_late{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            
        }
		
        .cordonates{
            padding-top: 20px;
            font-size: 22px;
            text-align: center;
			width: 80%;
        }
		
        .long_late input{
            padding: 8px 3px;
            width: 41%;
            border: 2px solid black;
            font-size: 18px;
            text-align: center;
            color: black;
        }
		
		select {
            margin-left: 20px;
			font-size: 16px;
			width: 95%;
			text-align: center;
			align-items: center;
        }
		
		.centered {
			text-align: center;
			margin: 0 auto;
		}
		
		.popup {
			display: none;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			border: 1px solid #ccc;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

		.popup select {
			margin-bottom: 10px;
		}

		.popup button {
			padding: 8px 12px;
			background-color: #007BFF;
			color: white;
			border: none;
			cursor: pointer;
		}
		
		.floating-buttons {
			position: fixed;
			bottom: 100px;
			right: 20px;
			display: flex;
			flex-direction: column; /* Arrange les boutons verticalement */
			align-items: flex-end; /* Aligne les boutons à droite */
		}

		.floating-button {
			width: 25px; /* Width of the button */
			height: 25px; /* Height of the button */
			margin-bottom: 10px; /* Espace entre les boutons */
			background-color: #FEC108;
			color: white;
			padding: 10px 10px;
			border-radius: 50px;
			text-decoration: none;
			box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s ease;
		}
		
		.floating-button img {
			width: 25px; /* Ajustez la taille de l'image selon vos besoins */
			height: 25px; /* Ajuste la hauteur en fonction de la largeur */
		}

		.floating-button:hover {
			background-color: #DCDCDC;
		}
		
		#taskDate {
			  display: block;
			  width: 100%;
			  max-width: 320px;
			  margin: 0 auto;            /* centre l’input */
		}


		/* Styles pour les appareils mobiles avec une largeur d'écran maximale de 768 pixels */
		/*@media only screen and (max-width: 768px) {
			#taskDate {
				width: 80%; 
				margin-left: 10%;
				margin-right: 10%; 
			}
		}*/
		
		#dataChart {
			max-width: 90%;
			height: 400px; /* Vous pouvez ajuster cette valeur selon vos préférences */
			margin: 20px auto; /* Centrer le graphique */
		}
		
		.wrapper {
			max-width: 600px; /* Augmentez la largeur si nécessaire */
			margin: auto; /* Centre le contenu */
		}

		/* Ajoutez ceci pour espacer les graphiques */
		canvas {
			margin: 20px 0; /* Ajoute de l'espace entre les graphiques */
		}
		
		#perfChart {
		  max-width: 100%;
		  height: 320px;
		}
		
		/* Mise en page de la section Monitoring */
		.monitoring-content {
		  display: flex;
		  flex-direction: column;
		  gap: 8px;
		  height: 420px;          /* hauteur totale de la section */
		  padding: 0 15px;		/* léger padding interne pour éviter toute morsure visuelle */
		}

		/* Le wrapper prend l'espace restant pour le graphe */
		.chart-wrap {
		  flex: 1;
		  position: relative;     /* nécessaire pour canvas en absolu */
		  min-height: 240px;      /* sécurité sur petits écrans */
		}

		/* Le canvas remplit totalement le wrapper */
		#monitoringChart {
		  position: absolute;
		  inset: 0;
		  width: 100%;
		  height: 100%;
		}
		
		.last-reading {
		  display: flex;
		  flex-wrap: nowrap;   /* 👈 plus de retour à la ligne */
		  gap: 8px;            /* espace entre les blocs */
		  margin-bottom: 8px;
		}

		.metric {
		  flex: 1 1 0;         /* les 3 prennent exactement la même largeur */
		  max-width: 33.33%;   /* limite à 1/3 chacune */
		  padding: 10px 12px;
		  border-radius: 12px;
		  background: #f7f8fb;
		  box-shadow: 0 1px 3px rgba(0,0,0,.06);
		  border-left: 4px solid #ddd;
		  text-align: center;  /* 👈 centrer le texte dans la carte */
		}

		.metric-label {
		  font-size: 12px;
		  opacity: .7;
		  margin-bottom: 4px;
		}

		.metric-value {
		  font-size: 20px;
		  font-weight: 600;
		  line-height: 1.1;
		}

		
		
		.metric-icon {
		  font-size: 22px;
		  margin-bottom: 4px;
		  color: inherit;
		}
		.metric.weight .metric-icon { color: #1f77b4; }  /* bleu */
		.metric.hum .metric-icon    { color: #2ca02c; }  /* vert */
		.metric.temp .metric-icon   { color: #d62728; }  /* rouge */
		
		.last-reading-ts {
		  font-size: 12px;
		  opacity: .75;
		  margin: 2px 0 10px 2px;
		}
		
		/* centre le bloc entier */
		.vertical-options {
		  display: flex;
		  flex-direction: column;
		  align-items: center;   /* ← centre chaque ligne (label) horizontalement */
		  /*gap: 8px;*/
		}

		/* aligne la case et le texte au milieu */
		.vertical-options label {
		  display: inline-flex;
		  align-items: center;   /* ← centre verticalement la checkbox avec le texte */
		  /*gap: 8px;*/
		}

		/* optionnel : un peu plus grand et homogène */
		.vertical-options input[type="checkbox"] {
		  transform: translateY(0);  /* évite les petits décalages selon les navigateurs */
		  width: 1.1em;
		  height: 1.1em;
		}
		
		.floating-button.disabled {
		  pointer-events: none;
		  opacity: 0.6;
		}