.proPacks .servicesHead{margin-bottom:12px}
.proPacks .servicesTitleRow{
  display:flex;
  align-items:center;
}

.proPacks .servicesTitleRow{
  justify-content:space-between;
  gap:14px;
}

.proPacks .servicesIntro h2{margin:0}
.proPacks .servicesIntro p{margin:8px 0 0}
.proPacks .servicesViewport{overflow:hidden}

.proPacks .servicesTrack{
  display:flex;
  justify-content:center;
  gap:18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.proPacks .servicesTrack::-webkit-scrollbar{display:none}

.proPacks .card{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  overflow:visible;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.proPacks .servicesTrack .card{
  flex:0 0 clamp(300px, 42%, 480px);
  min-height:560px;
  scroll-snap-align:start;
}

.proPacks .card .service-bg{
  position:absolute;
  inset:0;
  z-index:3;
  background-position:center;
  background-size:cover;
  opacity:.3;
  pointer-events:none;
  border-radius:var(--radius-sm);
}

.proPacks .card .service-bg.bg-ecrin-pro{background-image:url('../assets/services-packs/ecrin-pro/pack-ecrin-pro.jpg')}
.proPacks .card .service-bg.bg-horizon{background-image:url('../assets/services-packs/horizon-immobilier/pack-horizon-immobilier.png')}

.proPacks .card .icon,
.proPacks .card h3,
.proPacks .card .serviceBody,
.proPacks .flip-card-back .btn{
  position:relative;
  z-index:4;
}

.proPacks .flip-card-inner{
  position:relative;
  width:100%;
  height:100%;
  isolation:isolate;
}

.proPacks .flip-card-front,
.proPacks .flip-card-back{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--paper);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  transition:opacity .4s ease, visibility .4s ease;
}

.proPacks .flip-card-front{
  padding:18px;
  opacity:1;
  visibility:visible;
}

.proPacks .flip-card-back{
  z-index:1;
  align-items:center;
  justify-content:center;
  padding:30px;
  opacity:0;
  visibility:hidden;
  text-align:center;
  background-image:linear-gradient(180deg, rgba(213,115,75,.08) 0%, rgba(172,73,40,.04) 100%);
}

.proPacks .card.is-flipped .flip-card-front{
  opacity:0;
  visibility:hidden;
}

.proPacks .card.is-flipped .flip-card-back{
  opacity:1;
  visibility:visible;
}

@media (hover:hover){
  .proPacks .card:hover .flip-card-front,
  .proPacks .card:focus-within .flip-card-front{
    opacity:0;
    visibility:hidden;
  }

  .proPacks .card:hover .flip-card-back,
  .proPacks .card:focus-within .flip-card-back{
    opacity:1;
    visibility:visible;
  }
}

.proPacks .flip-card-front .icon{
  position:absolute;
  top:18px;
  right:18px;
  margin:0;
}

.proPacks .flip-card-front h3{
  width:100%;
  max-width:calc(100% - 56px);
  margin:0 auto;
  font-size:1.5rem;
  line-height:1.2;
  text-align:center;
}

.proPacks .flip-card-front .serviceBody{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:1;
  color:var(--ink);
  font:700 1.22rem/1.65 var(--font-base);
  text-align:center;
}

.proPacks .serviceMobileBtn{display:none}

@media (max-width:1040px){
  .proPacks .servicesTrack{
    justify-content:flex-start;
  }

  .proPacks .servicesTrack .card{
    flex-basis:min(84vw, 420px);
    min-height:480px;
  }

  .proPacks .servicesTitleRow{align-items:flex-start}

  .proPacks .flip-card-front h3{
    width:auto;
    max-width:none;
    min-height:42px;
    margin:0 0 10px;
    padding-right:56px;
    display:flex;
    align-items:center;
    text-align:left;
  }
}

@media (hover:none) and (pointer:coarse){
  .proPacks .servicesTrack{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(92vw, 520px);
    align-items:stretch;
  }

  .proPacks .servicesTrack .card,
  .proPacks .flip-card-inner,
  .proPacks .flip-card-front{
    height:100%;
  }

  .proPacks .servicesTrack .card{min-height:520px}
  .proPacks .flip-card-back{display:none}

  .proPacks .flip-card-front{
    position:relative;
    inset:auto;
    gap:14px;
  }

  .proPacks .serviceMobileBtn{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin-top:auto;
  }
}

@media (max-width:680px){
  .proPacks .servicesTrack{gap:12px}
  .proPacks .servicesTrack .card{flex-basis:92vw}
  .proPacks .flip-card-front h3{font-size:1.5rem}
  .proPacks .servicesTitleRow{gap:10px}
}

@media (max-width:480px){
  .proPacks .flip-card-front .serviceBody{
    font-size:1.08rem;
    line-height:1.55;
  }
}