#prestations.services {
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#f7faff 0%,#fff 62%)
}

#prestations.services::before {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-190px;
  top:-180px;
  background:rgba(245,130,31,.08);
  pointer-events:none
}

#prestations .services-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  position:relative;
  z-index:1
}

#prestations .services-intro h2 {
  margin-bottom:0
}

#prestations .services-intro>p {
  max-width:430px;
  margin:0 0 8px;
  color:var(--muted);
  font-size:1.08rem
}

.prestations-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
  margin-top:45px;
  position:relative;
  z-index:1
}

.prestation-card {
  grid-column:span 4;
  min-height:285px;
  border-radius:24px;
  padding:28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 12px 35px rgba(11,35,79,.08);
  transition:transform .25s ease,box-shadow .25s ease
}

.prestation-card::after {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-55px;
  bottom:-62px;
  background:currentColor;
  opacity:.07;
  z-index:-1;
  transition:transform .3s ease
}

.prestation-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 55px rgba(11,35,79,.18)
}

.prestation-card:hover::after {
  transform:scale(1.35)
}

.prestation-card.featured {
  grid-column:span 4
}

.prestation-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px
}

.prestation-icon {
  width:58px;
  height:58px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.17);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}

.prestation-icon svg {
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.prestation-number {
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.16em;
  opacity:.72
}

.prestation-card h3 {
  font-size:1.45rem;
  line-height:1.15;
  margin:0 0 10px;
  color:inherit
}

.prestation-card p {
  margin:0 0 22px;
  line-height:1.55;
  color:inherit;
  opacity:.83;
  max-width:590px
}

.prestation-card a {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  width:max-content;
  border-bottom:2px solid currentColor
}

.prestation-card a span {
  transition:transform .2s ease
}

.prestation-card:hover a span {
  transform:translateX(5px)
}

.prestation-card.navy {
  background:linear-gradient(135deg,#0b234f,#183875);
  color:#fff
}

.prestation-card.orange {
  background:linear-gradient(135deg,#f5821f,#f59d52);
  color:#fff
}

.prestation-card.sky,.prestation-card.blue {
  background:linear-gradient(135deg,#0b234f,#183875);
  color:#fff
}

.prestation-card.sand,.prestation-card.ice {
  background:linear-gradient(135deg,#f5821f,#f59d52);
  color:#fff
}

.prestation-card.sky .prestation-icon,.prestation-card.sand .prestation-icon,.prestation-card.blue .prestation-icon,.prestation-card.ice .prestation-icon {
  background:rgba(255,255,255,.17);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}

@media(max-width:900px) {
  #prestations .services-intro {
    align-items:start;
    flex-direction:column;
    gap:12px
  }
  .prestation-card,.prestation-card.featured {
    grid-column:span 6
  }
}

@media(max-width:580px) {
  .prestations-grid {
    grid-template-columns:1fr
  }
  .prestation-card,.prestation-card.featured {
    grid-column:auto;
    min-height:235px
  }
  .prestation-card {
    padding:24px
  }
  .prestation-icon {
    width:52px;
    height:52px
  }
  .prestation-card h3 {
    font-size:1.32rem
  }
}