/* Réinitialisation */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  overflow: hidden;
}

/* En-tête */
header {
  width: 100%;
  background-color: #1E90FF;
  color: #FFF;
  text-align: center;
  padding: 10px 0;
}

/*=========================================================================================*/
/*                                STYLE DES MENUS LATÉRAUX                                 */
/*=========================================================================================*/

/* Style général des menus latéraux */
.sidebar {
  width: 200px; /* Largeur fixe du menu */
  background-color: #f7f7f7; /* Fond gris clair */
  padding: 5px; /* Espace intérieur */
  overflow-y: auto; /* Permet le défilement si le contenu dépasse */
  border: 1px solid #ccc; /* Bordure légère */
}

/* Conteneur principal qui organise la mise en page en flex horizontal */
#container {
  display: flex; /* Alignement des éléments en ligne */
  height: calc(100vh - 60px); /* Hauteur adaptative en fonction de l'écran */
}

/* Bordures spécifiques aux menus gauche et droit */
#sidebar-left {
  border-right: none; /* Pas de bordure à droite */
}

#sidebar-right {
  border-left: none; /* Pas de bordure à gauche */
}

/*=========================================================================================*/
/*                      ORGANISATION DES BOUTONS SELON LEUR NOMBRE PAR LIGNE              */
/*=========================================================================================*/

/* Conteneur pour afficher 1 bouton par ligne */
.container-1 {
  display: flex; /* Alignement en colonne */
  flex-direction: column; /* Affichage vertical */
  gap: 10px; /* Espacement entre les boutons */
}

/* Conteneur pour afficher 2 boutons par ligne */
.container-2 {
  display: grid; /* Utilisation de la grille */
  grid-template-columns: repeat(2, 1fr); /* Deux colonnes égales */
  gap: 10px; /* Espacement entre les boutons */
}

/* Conteneur pour afficher 3 boutons par ligne */
.container-3 {
  display: grid; /* Utilisation de la grille */
  grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
  gap: 10px; /* Espacement entre les boutons */
}

/* Conteneur pour afficher 4 boutons par ligne */
.container-4 {
  display: grid; /* Utilisation de la grille */
  grid-template-columns: repeat(4, 1fr); /* Quatre colonnes égales */
  gap: 10px; /* Espacement entre les boutons */
}

/*=========================================================================================*/
/*                           STYLE DES BOUTONS DU MENU                                     */
/*=========================================================================================*/

/* Style général des boutons */
.sidebar button.pipe-btn {
  padding: 8px; /* Ajout de plus de padding pour un meilleur confort de clic */
  font-size: 14px; /* Taille de la police */
  cursor: pointer; /* Curseur en mode pointer pour indiquer l'interactivité */
  border: 1px solid #7a7777; /* Bordure grise */
  background-color: #eee; /* Fond gris clair */
  border-radius: 4px; /* Coins légèrement arrondis */
  transition: background-color 0.3s ease; /* Animation fluide au survol */
  text-align: center; /* Centrage du texte */
  width: 100%; /* Par défaut, les boutons prennent toute la largeur du conteneur */
  margin-top: 5px; /* Espacement en haut du bouton */
  margin-bottom: 5px; /* Espacement en bas du bouton */
}

/* Style des petits boutons pour les conteneurs de 3 ou 4 colonnes */
.sidebar .small-btn {
  font-size: 12px; /* Réduction de la taille de la police */
  padding: 5px; /* Réduction du padding pour s'adapter à un petit format */
  width: auto; /* Largeur automatique pour éviter l'étirement */
  height: 30px; /* Hauteur fixe */
}

/* Effet au survol des boutons */
.sidebar button.pipe-btn:hover {
  background-color: #5bff29; /* Changement de couleur au survol */
}

/* Style lorsqu'un bouton est déplacé avec la fonctionnalité de drag & drop */
.pipe-btn:active {
  cursor: grabbing; /* Curseur en mode "prise en main" */
  background-color: #ddd; /* Changement temporaire de couleur */
  opacity: 0.7; /* Opacité réduite pour montrer qu'il est en déplacement */
}

/* Style du bouton de personnalisation */
#toggleEditMode {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #007bff;
  color: white;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#toggleEditMode.active {
  background-color: #ff4d4d;
}

/* Ajoute un effet grisé sur les boutons en mode personnalisation */
.sidebar.edit-mode .pipe-btn {
  pointer-events: none; /* Désactive les clics */
  opacity: 0.6;
  cursor: grab;
}

/* Bouton Personnaliser */
#toggleEditMode {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#toggleEditMode.active {
  background-color: #ff4d4d;
}

/* Clignotement progressif pour indiquer le mode déplacement */
@keyframes blink {
  0% { background-color: #ddd; }
  50% { background-color: #d0ff00; }
  100% { background-color: #ddd; }
}


.movable {
  animation: blink 0.5s infinite alternate;
  cursor: grabbing;
}

/* Options de taille */
.size-btn {
  width: 100%;
  padding: 5px;
  margin: 2px 0;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #eee;
}

.size-1 .pipe-btn { font-size: 10px; padding: 3px; }
.size-2 .pipe-btn { font-size: 14px; padding: 6px; }
.size-3 .pipe-btn { font-size: 18px; padding: 8px; }
.size-4 .pipe-btn { font-size: 22px; padding: 10px; }


/*//=========================================================================================*/
/*/                         Style pour les boutons                                 */
/*/=========================================================================================*/



.sidebar button.pipe-btn.active {
  background-color: #1E90FF;
  color: #FFF;
}

.valve-open {
  position: relative;
}

.valve-open::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background-color: rgba(0, 255, 0, 0.3);
  border-radius: 5px;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
      opacity: 0.3;
      transform: scale(1);
  }
  100% {
      opacity: 0.8;
      transform: scale(1.1);
  }
}


/* Zone principale */
#main {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

/* Canevas */
canvas {
  border: 2px solid #000;
  background-color: #fff;
  flex-grow: 1;
  width: 100%;
}

/* Contrôles en bas - barre fixe */
/* Styles pour les boutons de contrôle en bas */
#controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px;
  background-color: #f0f0f0;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2px solid #ccc;
}

/* Style général des boutons de contrôle */
.control-btn {
  padding: 15px 25px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  text-align: center;
}

/* Bouton pour allumer les pompes */
#activatePumps {
  background-color: #28a745; /* Vert */
  color: white;
}

#activatePumps:hover {
  background-color: #218838;
  transform: scale(1.1);
}

/* Bouton pour éteindre les pompes */
#deactivatePumps {
  background-color: #dc3545; /* Rouge */
  color: white;
}

#deactivatePumps:hover {
  background-color: #c82333;
  transform: scale(1.1);
}
/* ######################################################################## */

/* Style pour le lien interactif des mentions légales */
.mentions-legales {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
.mentions-legales a {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
}
.mentions-legales a::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.mentions-legales:hover a {
  visibility: visible;
  opacity: 1;
}