body {
  font-family: 'Calibri Light', sans-serif;
  font-size: 11pt;
  margin: 20px;
}

.wrapper-central {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin-left: 20px;
}

.zone-titre-et-infos {
  width: 100%;              /* prend la largeur de wrapper-central */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  width: 100%;
}

.header,
#tableau-vannes {
  width: 100%;
  max-width: 1000px;
}

.bloc-infos {
  position: relative;  /* Pour que le bouton se place relativement au cadre */
  padding: 0;
  margin-top: 4px;
  width: 100%;              /* permet à .grid3lignes de s’étendre */
  display: flex;
}
.title-zone {
  display: flex;
  align-items: baseline;
  gap: 10px;
}


.header h1 {
  font-size: 14pt;
  margin: 0;           /* supprime toute marge */
  padding: 0;          /* supprime tout éventuel espacement interne */
  line-height: 1.2;    /* réduit l'espacement vertical */
}

h1 {
  font-size: 14pt;
  font-family: 'Calibri Light', sans-serif;
  margin-top: 4px;
  margin-bottom: 4px
}





#btn_reinit:hover {
  background-color: #f0f0f0;
}

.version {
  font-size: 10pt;
  margin-left: 12px;  /* espacement horizontal entre le titre et la version */
  color: #555;        /* facultatif : un gris doux pour l’esthétique */
  font-style: italic;
}



label {
  text-align: right;
  white-space: nowrap;
}

input[type="text"],
input[type="number"],
input[type="time"] {
  width: 80px;
  font-family: 'Calibri Light', sans-serif;
  font-size: 11pt;
  padding: 2px 4px;
}


.grid3lignes {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-auto-rows: min-content;
  gap: 4px 24px;
  align-items: center;

  font-family: 'Calibri Light', sans-serif;
  font-size: 11pt;
  /* Cadre fin ajouté */
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fdfdfd; /* optionnel : fond léger */
  padding: 8px 16px;
  max-width: 1000px;
  box-sizing: border-box;
  position: relative;
}


.grid3lignes label {
  text-align: right;
  white-space: nowrap;
}

.grid3lignes input {
  height: 20px;        /* ajoute cette hauteur fixe */
  padding: 2px 5px;    /* réduit le padding */
  font-size: 10pt;     /* optionnel pour compacter davantage */
}

.grid3lignes span {
  display: inline-block;
  width: 100px;
  height: 16px;
  padding: 2px;
  border: none;
  background-color: white;
  font-family: 'Calibri Light', sans-serif;
  font-size: 11pt;
}

.btn_reinit-aligne {
  grid-column: 7;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  
  font-size: 10pt;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #999;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn_reinit-aligne:hover {
  background-color: #f0f0f0;
}

/* ⛔ Arrêt d'urgence (col 7, ligne 2) */
.btn_stop {
  grid-column: 7;
  grid-row: 2;
  justify-self: start;
  align-self: start;

  font-size: 10pt;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #999;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn_stop:hover {
  /* léger accent rouge au survol pour différencier */
  background-color: #f8e6e6;
  border-color: #c66;
}

.btn_maintenant {
  grid-column: 7;
  grid-row: 3;
  justify-self: end;
  align-self: start;
  justify-self: start;
  font-size: 10pt;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #999;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn_maintenant:hover {
  background-color: #f0f0f0;
}

#heure_debut_cycle {
  grid-column-start: 2; /* champ input en colonne 2 */
}

label[for="heure_debut_cycle"] {
  grid-column-start: 1; /* label à gauche */
}

#derniere_maj {
  display: inline-block;
  min-width: 160px;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  /* width: 100%; */  /* désactivé si tu veux éviter l'étirement */
  font-family: 'Calibri Light', sans-serif;
  font-size: 11pt;
  margin-top: 10px;
}

table th,
table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}

th:first-child {
  text-align: left;
}

/* Colonnes des jours (Lun à Dim) */
#tableau-vannes th:nth-child(3),
#tableau-vannes th:nth-child(4),
#tableau-vannes th:nth-child(5),
#tableau-vannes th:nth-child(6),
#tableau-vannes th:nth-child(7),
#tableau-vannes th:nth-child(8),
#tableau-vannes th:nth-child(9),
#tableau-vannes td:nth-child(3),
#tableau-vannes td:nth-child(4),
#tableau-vannes td:nth-child(5),
#tableau-vannes td:nth-child(6),
#tableau-vannes td:nth-child(7),
#tableau-vannes td:nth-child(8),
#tableau-vannes td:nth-child(9) {
  width: 40px;
}

#tableau-vannes td input[type="number"] {
  width: 35px;
  padding: 2px;
  font-size: 10pt;
}

/* Colonne Nom (2x plus large) */
#tableau-vannes th:nth-child(2),
#tableau-vannes td:nth-child(2) {
  width: 250px;
}

#tableau-vannes td input[type="text"] {
  width: 240px;
  font-size: 11pt;
}

/* Case à cocher */
table input[type="checkbox"] {
  transform: scale(1.2);
}

/* Pastille colorée */
.etat-indicateur {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: gray; /* valeur par défaut */
  margin: 0 auto;
}

/* États possibles */
.etat-indicateur.on {
  background-color: green;
}
.etat-indicateur.off {
  background-color: red;
}
.etat-indicateur.inconnu {
  background-color: gray;
}

/* Supprime tout effet encadré */
.etat-cellule {
  padding: 0;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  height: 28px;
  width: 36px;
  background-color: transparent;
}

/* Cellule qui contient la pastille (État) */


/* Style par défaut pour le tableau */
table th, table td {
  border: 1px solid #ccc;
  padding: 4px 6px;
  text-align: center;
  height: 18px;
}


#tableau-vannes th:nth-child(1),
#tableau-vannes td:nth-child(1),
#tableau-vannes th:nth-child(2),
#tableau-vannes td:nth-child(2),
#tableau-vannes th:nth-child(10),
#tableau-vannes td:nth-child(10),
#tableau-vannes th:nth-child(11),
#tableau-vannes td:nth-child(11),
#tableau-vannes th:nth-child(12),
#tableau-vannes td:nth-child(12) {
  border-left: none;
  border-right: none;
}

/* Supprimer toutes les bordures horizontales sauf ligne d’en-tête */
#tableau-vannes td {
  border-top: none;
  border-bottom: none;
}

/* Ne garder que la bordure basse sur les titres */
#tableau-vannes thead th { border-bottom: 1px solid #ccc; }

/* Supprimer toute bordure restante sur la première colonne (même en cas d’héritage) */
#tableau-vannes td:nth-child(1) {
  border-top: none !important;
  border-bottom: none !important;
}

/* Éventuellement, adoucir les bordures résiduelles */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


#tableau-vannes thead th { border-bottom: 1px solid #ccc; }

h3 {
  margin-top: 10px;
  margin-bottom: 4px;
}

#seuil_humidite_air,
#seuil_humidite_sol {
  width: 6ch;
}

/* Bordure claire sous les titres */
#tableau-vannes thead th { border-bottom: 1px solid #ccc; }

/* Espacement réduit entre N° et Nom */
#tableau-vannes th:nth-child(1),
#tableau-vannes td:nth-child(1) {
  width: 20px;
  padding: 2px 4px;
  text-align: left;
}

/* Colonnes des jours + recopier alignées */
#tableau-vannes th:nth-child(n+5):nth-child(-n+12),
#tableau-vannes td:nth-child(n+5):nth-child(-n+12) {
  width: 60px;
  padding: 2px;
  text-align: center;
}

/* Supprime toutes les bordures verticales */
#tableau-vannes th,
#tableau-vannes td {
  border-left: none;
  border-right: none;
}

.btn_reinit-aligne,
.btn_stop,
.btn_maintenant {
  grid-column: 7;
  justify-self: start;
  align-self: start;
  font-size: 10pt;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #999;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;

  width: 110px;   /* largeur fixe identique */
  height: 28px;   /* hauteur fixe identique */
  text-align: left;   /* 🔹 alignement du texte à gauche */
}

/* STOP actif : fond rouge, texte blanc */
.btn_stop--active {
  background-color: #dc3545 !important;
  color: #fff !important;
  border-color: #dc3545;
}