/* =========================
   Page Nos services
   ========================= */

.services-page {
  background: #0a0c0c;
}

.services-list-section {
  padding: 20px max(24px, calc((100% - 1120px) / 2)) 64px;
}

.services-list-section .section-heading {
  margin-bottom: 32px;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Toute la carte est cliquable : le lien du titre la couvre entièrement (voir h3 a::after) */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid rgba(215,163,38,.35);
  background: #111616;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold-light);
  background-color: #151b1b;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.service-card h3 a {
  color: inherit;
  text-decoration: none;
}

.service-card h3 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.service-card h3 a:focus-visible {
  outline: none;
}

.service-card:focus-within {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* Libellé « Découvrir le service » : visuel seulement, le lien est sur le titre */
.service-card__more {
  margin-top: auto;
  padding-top: 18px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-card__more span {
  display: inline-block;
  margin-left: 4px;
  transition: transform .25s ease;
}

.service-card:hover .service-card__more span,
.service-card:focus-within .service-card__more span {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__more span {
    transition: none;
  }

  .service-card:hover,
  .service-card:focus-within {
    transform: none;
  }
}

.service-card img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.service-card h3 {
  margin: 16px 0 10px;
  color: var(--gold-light);
  font: 500 16px / 1.35 "Cinzel", "Times New Roman", serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.service-card p {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.7;
}

.service-card a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le plan d'aménagement, premier service, est mis en valeur */
.service-card--featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(215,163,38,.14), #111616 60%);
}

.services-more {
  margin: 36px 0 0;
  text-align: center;
}