/* =========================================================
 * Boutons animation énergie – style harmonisé
 * ======================================================= */

.energy-container .energy-btn {
  display: inline-block;
  min-width: 160px;
  text-align: center;

  padding: 6px 10px;
  margin: 4px;

  font-family: Arial, sans-serif;
  font-size: 11pt;
  font-weight: bold;

  color: #fff;
  background-color: #F6EDB5;

  border: none;
  border-left: 4px solid transparent;
  border-radius: 3px;

  cursor: pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.energy-container .energy-btn:hover,
.energy-container .energy-btn.active {
  background: #1e7e99;
  border-left: 4px solid #8ebfcc;
  color: #fff;
}

.energy-container .energy-btn.active {
  box-shadow: 0 3px 12px rgba(0,168,232,0.25);
  transform: translateX(3px);
}

.energy-container .energy-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,168,232,0.4);
}