/* Cure thermale : choix plus lisibles et accessibles, surtout sur téléphone. */
.thermal-flow .thermal-header {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 88px !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid #d5e5dd !important;
  background: linear-gradient(135deg, #f8fcfa 0%, #eef8f3 100%) !important;
}

.thermal-flow .thermal-header .thermal-title-image {
  display: none !important;
}

.thermal-flow .thermal-header::before {
  content: "";
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background-color: #e8f7f5;
  background-image: url("../images/go-thermal-water-20260928.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px 52px;
  box-shadow: 0 8px 18px rgba(21, 157, 145, .22);
}

.thermal-flow .thermal-header .sht {
  color: #123e31 !important;
  font-size: 1.24rem !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: .035em !important;
}

.thermal-flow .thermal-header .thermal-header-subtitle {
  margin-top: 5px !important;
  color: #496b60 !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.thermal-flow .thermal-header .shc {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid #c7a742 !important;
  background: #fff !important;
  color: #355c50 !important;
  font-size: 1rem !important;
}

.thermal-flow .thermal-panel[data-step="1"] > .fg:first-child {
  margin: 0 0 18px !important;
  padding: 15px !important;
  border: 1px solid #d4e5dd !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg, #f7fbf9 0%, #eef7f3 100%) !important;
  box-shadow: 0 9px 24px rgba(12, 58, 26, .07) !important;
}

.thermal-flow .thermal-panel[data-step="1"] > .fg:first-child > label {
  display: block !important;
  margin-bottom: 13px !important;
  color: #173f32 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.thermal-flow .thermal-panel[data-step="1"] > .fg:first-child > label::after {
  content: "Choisissez simplement l’option qui vous correspond.";
  display: block;
  margin-top: 5px;
  color: #60756d;
  font-size: .78rem;
  font-weight: 650;
}

.thermal-flow .thermal-choice-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.thermal-flow .thermal-choice {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 13px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 118px !important;
  padding: 16px 14px !important;
  overflow: hidden !important;
  border: 2px solid #cbdcd4 !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: #244a3e !important;
  box-shadow: 0 5px 14px rgba(19, 61, 47, .06) !important;
  text-align: left !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.thermal-flow .thermal-choice::before {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  align-self: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf3f0;
  color: #40665a;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}

.thermal-flow .thermal-choice[data-thermal-type="ponctuel"]::before { content: "1"; }
.thermal-flow .thermal-choice[data-thermal-type="cure"]::before { content: "≡"; font-size: 1.55rem; }

.thermal-flow .thermal-choice strong {
  grid-column: 2;
  grid-row: 1;
  display: block !important;
  align-self: end;
  color: inherit !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.thermal-flow .thermal-choice span {
  grid-column: 2;
  grid-row: 2;
  display: block !important;
  margin-top: 4px !important;
  color: #657a72 !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.thermal-flow .thermal-choice::after {
  content: "Appuyer ici";
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  margin-top: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef3f1;
  color: #5f756c;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.thermal-flow .thermal-choice.is-selected {
  border: 3px solid #08744e !important;
  background: linear-gradient(145deg, #eefbf5 0%, #dcf5e9 100%) !important;
  color: #07583d !important;
  box-shadow: 0 10px 22px rgba(8, 116, 78, .15) !important;
}

.thermal-flow .thermal-choice.is-selected::before {
  background: #08744e;
  color: #fff;
  box-shadow: 0 5px 12px rgba(8, 116, 78, .25);
}

.thermal-flow .thermal-choice.is-selected span { color: #346b58 !important; }
.thermal-flow .thermal-choice.is-selected::after {
  content: "✓ Choisi";
  background: #08744e;
  color: #fff;
}

.thermal-flow .thermal-choice:focus-visible {
  outline: 4px solid rgba(249, 184, 59, .45) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  .thermal-flow .thermal-header {
    grid-template-columns: 54px minmax(0, 1fr) 40px !important;
    gap: 10px !important;
    min-height: 80px !important;
    padding: 11px 12px !important;
  }

  .thermal-flow .thermal-header::before {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-size: 47px 47px;
  }

  .thermal-flow .thermal-header .sht { font-size: 1.08rem !important; }
  .thermal-flow .thermal-header .thermal-header-subtitle { font-size: .72rem !important; }

  .thermal-flow .thermal-panel[data-step="1"] > .fg:first-child {
    padding: 13px !important;
  }

  .thermal-flow .thermal-choice-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .thermal-flow .thermal-choice {
    min-height: 96px !important;
    padding: 13px !important;
  }

  .thermal-flow .thermal-choice strong { font-size: 1rem !important; }
  .thermal-flow .thermal-choice span { font-size: .8rem !important; }
}

@media (max-width: 360px) {
  .thermal-flow .thermal-header {
    grid-template-columns: 48px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
  }

  .thermal-flow .thermal-header::before {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background-size: 41px 41px;
  }

  .thermal-flow .thermal-header .sht { font-size: .98rem !important; }
  .thermal-flow .thermal-header .thermal-header-subtitle { font-size: .66rem !important; }

  .thermal-flow .thermal-choice {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 92px !important;
    padding: 11px !important;
  }

  .thermal-flow .thermal-choice::before {
    width: 42px;
    height: 42px;
  }
}