.thermostat-block {
  background: rgba(146, 145, 145, 0.8);
  border-radius: 5px;
  padding: 40px 60px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: background 0.8s ease;
  display: flex;
  flex-direction:row; /* column */
  align-items: center;
  justify-content: center;
}

:root {
  --block-color-thermostat1: radial-gradient(circle at center, #1e293b, #0f172a);
  --block-color-thermostat2: radial-gradient(circle at center, #1e293b, #0f172a);

  --width_toggle_h: 100px;
  --height_toggle_h: 50px;
  --width_toggle_v: 50px;
  --height_toggle_v: 100px;
  --diameter_afficheur: 200px;
  --gap_toggle: 6px;
  --bg_toggle: #fff;
  --active_toggle: #1e293b;
  --label-color_toggle: #4a4f57;
  --label-active_toggle: #fff;
  --radius_toggle: 10px;
  --transition_toggle: 220ms cubic-bezier(.2,.9,.3,1);
}

.afficheur_controls{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Thermostat centré */
.afficheur {
  width: var(--diameter_afficheur);
  height: var(--diameter_afficheur);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: 50%;
  background: rgba(146, 145, 145, 0.8);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6);
  justify-content: center;
  font-size: 2rem;
  user-select: none;
  transform: translateX(20px);
}

#afficheur1 {
  background: var(--block-color-thermostat1);
}

#afficheur2 {
  background: var(--block-color-thermostat2);
}

.afficheurs {
  display: flex;
  flex-direction:row;
  align-items: center;
  position: relative;
}

/* Boutons sous le thermostat */
.controls {
  display: flex;
  justify-content: center;/*space-between;  pousse les boutons sur les bords */
  width: var(--diameter_afficheur);                   /* même largeur que le cercle */
  margin-top: 12px;
  transform: translateX(20px);
}

button {
  width: var(--height_toggle_h);
  height: var(--height_toggle_h);
  border-radius: 50%;
  background: #1e293b;
  color: white;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #334155;
}

button:disabled {
  background: #475569; /* gris bleuté plus clair */
  cursor: not-allowed;
  opacity: 0.6;        /* effet visuel de "désactivé" */
}

.ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: #22d3ee;
  transform: rotate(0deg);
  transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.TemperatureCourante {
  font-size: 2.8rem;
  font-weight: 600;
  margin-top: 4px;
  color: white;
}

.Consigne {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
  color: white;
  transform: translateY(40px);
}


/* commun pour toggle horiz et vert */
.track{
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--bg_toggle);
  border-radius: var(--radius_toggle);
  padding: var(--gap_toggle);
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
  display: block;
}


/****************** toggle horizontal */
.tri-toggle-consigne{
  width: var(--width_toggle_h);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* cacher les radios réels */
.tri-toggle-consigne input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* les étiquettes (labels cliquables) */
.track .pos-label_h{
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* above the knob_h so clicks work */
  color: var(--label-color_toggle);
  font-weight: 600;
  letter-spacing: .2px;
  transition: color var(--transition_toggle);
  cursor: pointer;
  padding: 0 6px;
  box-sizing: border-box;
}

/* position de chaque label */
.track label[for="pos1h"]{ left: 0; }
.track label[for="pos2h"]{ left: calc(100% / 3); }
.track label[for="pos3h"]{ left: calc(2 * 100% / 3); }

/* le curseur (knob) */
.track .knob_h{
  position: absolute;
  top: var(--gap_toggle);
  left: var(--gap_toggle);
  width: calc(100% / 3 - 2 * var(--gap_toggle));
  height: calc(100% - 2 * var(--gap_toggle));
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  border-radius: calc(var(--radius_toggle) - 4px);
  box-shadow: 0 4px 10px rgba(20,30,60,0.12);
  z-index: 2;
  transition: left var(--transition_toggle), background var(--transition_toggle);
  pointer-events: none; /* let clicks pass to labels */
}

/* positions du curseur en fonction de l'état sélectionné */
#pos1h:checked ~ .track .knob_h { left: var(--gap_toggle); background: var(--active_toggle); }
#pos1h:checked ~ .track label[for="pos1h"] { color: var(--label-active_toggle); }

#pos2h:checked ~ .track .knob_h { left: calc(100% / 3 + var(--gap_toggle)); background: var(--active_toggle); }
#pos2h:checked ~ .track label[for="pos2h"] { color: var(--label-active_toggle); }

#pos3h:checked ~ .track .knob_h { left: calc(2 * 100% / 3 + var(--gap_toggle)); background: var(--active_toggle); }
#pos3h:checked ~ .track label[for="pos3h"] { color: var(--label-active_toggle); }

/* couleur et ombre du label actif */
#pos1h:checked ~ .track label[for="pos1h"],
#pos2h:checked ~ .track label[for="pos2h"],
#pos3h:checked ~ .track label[for="pos3h"] { 
  color: var(--label-active_toggle); 
  box-shadow: 0 6px 14px rgba(43,140,255,0.18);
}


/********************* toggle vertical */
.tri-toggle-m_a{
  width: var(--width_toggle_v);
  height: var(--height_toggle_v);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  position: relative;
  transform: translateX(-20px);
}

/* cacher les radios réels */
.tri-toggle-m_a input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* les étiquettes (labels cliquables) */
.track .pos-label_v{
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-color_toggle);
  font-weight: 600;
  transition: color var(--transition_toggle);
  z-index: 3;
  cursor: pointer;
  user-select: none;
}

/* position de chaque label */
.track label[for="pos1v"]{ top: 0; }
.track label[for="pos2v"]{ top: calc(100% / 3); }
.track label[for="pos3v"]{ top: calc(2 * 100% / 3); }

/* le curseur (knob) */
.track .knob_v{
  position: absolute;
  top: var(--gap_toggle);
  left: var(--gap);
  width: calc(100% - 2 * var(--gap_toggle));
  height: calc(100% / 3 - 2 * var(--gap_toggle));
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  border-radius: calc(var(--radius_toggle) - 4px);
  box-shadow: 0 4px 10px rgba(20,30,60,0.12);
  transition: top var(--transition_toggle), background var(--transition_toggle);
  z-index: 2;
  pointer-events: none;
}

/* positions du curseur en fonction de l'état sélectionné */
#pos1v:checked ~ .track .knob_v { top: var(--gap_toggle); background: var(--active_toggle); }
#pos2v:checked ~ .track .knob_v { top: calc(100% / 3 + var(--gap)); background: var(--active); }
#pos3v:checked ~ .track .knob_v { top: calc(2 * 100% / 3 + var(--gap_toggle)); background: var(--active_toggle); }

/* couleur et ombre du label actif */
#pos1v:checked ~ .track label[for="pos1v"],
#pos2v:checked ~ .track label[for="pos2v"],
#pos3v:checked ~ .track label[for="pos3v"] { 
  color: var(--label-active_toggle); 
  box-shadow: 0 6px 14px rgba(43,140,255,0.18);
}

.btAckDef{
  transform: translateX(25px);
  font-size: 0.8rem;
}