/* ============================================
   PRODUITS - Proctor IQ « Le Réseau »
   Ordv · Jelice, en service
   ============================================ */

/* ---------- En service ---------- */
.en-service { border-block: var(--rule); }

.stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 900px) { .stations { grid-template-columns: 1fr; } }

.station {
  background: var(--tile-raised);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

/* Station nameplate: full-width enamel */
.station__sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 6px #fff;
}

.station__name {
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 800;
  font-stretch: 78%;
  font-variation-settings: 'wdth' 78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.station__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--on-navy);
}

.station__status::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--navy-soft);
}

.station__body { padding: var(--sp-6) var(--sp-8) var(--sp-8); display: grid; gap: var(--sp-6); justify-items: start; }

.station__what { font-size: var(--fs-lg); line-height: 1.5; font-weight: 600; }

.station__facts { display: grid; gap: var(--sp-2); }

.station__facts li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink-soft);
}

.station__facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 3px solid var(--navy);
  background: #fff;
}

.station__measure {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding-top: var(--sp-4);
  border-top: var(--rule);
  width: 100%;
}

.station__measure strong { color: var(--ink); }

/* Illustrative product fragment: set between rules, not boxed */
.demo {
  width: 100%;
  padding-block: var(--sp-5);
  border-block: 1px dashed var(--field-edge);
  display: grid;
  gap: var(--sp-3);
}

.demo__cap {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.demo__url {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.demo__url span { color: var(--ink); font-weight: 800; }

.demo__label { font-size: var(--fs-xs); color: var(--ink-soft); }

.demo__slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.demo__slots li {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--tile);
  border: 1.5px solid var(--field-edge);
  border-radius: var(--r-sm);
}

.demo__slots .is-picked { background: var(--navy); color: #fff; border-color: var(--navy); }

.demo__pay {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--tile-joint);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.demo__pay strong { color: var(--ink); white-space: nowrap; }