/* DT-ENERDIAG — 18S : page publique de zone d'intervention */
.service-area-detail { gap: 16px; }
.service-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.service-area-grid__wide { grid-column: 1 / -1; }
.service-area-services {
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(59,130,246,.018)), rgba(8,27,49,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 32px rgba(0,8,20,.15);
}
.service-area-services h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: .96rem;
}
.service-area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.service-area-links a {
  padding: 7px 10px;
  border: 1px solid rgba(191,219,254,.24);
  border-radius: 999px;
  color: rgba(239,246,255,.98);
  font-size: .78rem;
  font-weight: 780;
  text-decoration: none;
  background: rgba(59,130,246,.1);
}
.service-area-links a:hover,
.service-area-links a:focus-visible { border-color: rgba(191,219,254,.52); background: rgba(59,130,246,.18); }
.service-area-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(147,197,253,.25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18,60,101,.62), rgba(8,31,56,.54));
}
.service-area-cta > div { display: grid; gap: 4px; }
.service-area-cta__eyebrow { color: rgba(191,219,254,.82); font-size: .69rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.service-area-cta strong { color: #fff; font-size: .95rem; }
.service-area-cta > a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(191,219,254,.34);
  border-radius: 12px;
  color: #fff;
  font-size: .82rem;
  font-weight: 820;
  text-decoration: none;
  background: rgba(59,130,246,.2);
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .service-area-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-area-grid__wide { grid-column: auto; }
  .service-area-services { padding: 15px; box-shadow: none; }
  .service-area-cta { align-items: stretch; flex-direction: column; padding: 15px; }
  .service-area-cta > a { text-align: center; }
}