/* Services */
#services .card{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  overflow:visible;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#services .card ul + p{color:var(--accent)}

#services .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);
}

#services .card .service-bg.bg-inspiration{background-image:url('../assets/services-packs/inspiration/pack-inspiration.jpg')}
#services .card .service-bg.bg-harmonie{background-image:url('../assets/services-packs/harmonie/pack-harmonie.jpg')}
#services .card .service-bg.bg-signature{background-image:url('../assets/services-packs/signature/pack-signature.jpg')}
#services .card .service-bg.bg-ecrin-pro{background-image:url('../assets/services-packs/ecrin-pro/pack-ecrin-pro.jpg')}
#services .card .service-bg.bg-liberte{background-image:url('../assets/services-packs/liberty-mode/pack-liberty-mode.jpg')}

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

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

#services .flip-card-front,
#services .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;
}

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

#services .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%);
}

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

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

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

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

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

#services .flip-card-front ul{
  margin:8px 0 12px;
  padding-left:18px;
  color:var(--accent);
}

#services .flip-card-front li{margin:0 0 4px}

#services .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;
}

#services .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;
}

#services .flip-card-back h3{
  margin:0 0 16px;
  max-width:none;
}

#services .flip-card-back p{
  margin:0 0 24px;
  color:var(--muted);
}

#services .servicesCarousel,
#services .servicesHead{display:block}

#services .servicesHead{margin-bottom:12px}
#services .servicesIntro{min-width:0}

#services .servicesTitleRow,
#services .servicesNav{
  display:flex;
  align-items:center;
}

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

#services .servicesIntro h2{margin:0}
#services .servicesIntro p{margin:8px 0 0}

#services .servicesNav{gap:8px}
#services .servicesViewport{overflow:hidden}

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

#services .servicesTrack::-webkit-scrollbar{display:none}

#services .servicesTrack .card{
  flex:0 0 clamp(260px, 70%, 460px);
  min-height:560px;
  scroll-snap-align:start;
}

.servicesCtrl{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:var(--warm-btn-border);
  background:var(--accent2);
  background-image:var(--warm-btn-gradient);
  box-shadow:var(--warm-btn-shadow);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

.servicesCtrl[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

#services .serviceMobileBtn{display:none}

@media (max-width:1040px){
  #services .servicesTrack .card{
    flex-basis:min(84vw, 420px);
    min-height:480px;
  }

  #services .servicesTitleRow{align-items:flex-start}

  #services .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;
  }
}

/* Mobile/tactile: afficher un bouton d'ouverture de l'image sur le recto */
@media (hover:none) and (pointer:coarse){
  #services .servicesTrack{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(92vw, 520px);
    align-items:stretch;
  }

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

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

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

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

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

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

  #services .servicesCtrl{
    width:40px;
    height:40px;
    font-size:1.4rem;
  }
}

@media (max-height:900px) and (min-width:681px){
  #services.section{padding:56px 0}
  #services .servicesHead{margin-bottom:8px}
  #services .servicesTrack .card{min-height:480px}

  #services .flip-card-front,
  #services .flip-card-back{padding:16px}

  #services .flip-card-back{
    padding:22px;
  }

  #services .flip-card-front .icon{
    top:14px;
    right:14px;
  }

  #services .flip-card-front h3{font-size:1.5rem}

  #services .flip-card-front .serviceBody{
    font-size:1.12rem;
    line-height:1.55;
  }

  #services .flip-card-back h3{margin:0 0 12px}
  #services .flip-card-back p{margin:0 0 18px}
}

@media (max-height:820px) and (min-width:681px){
  #services.section{padding:44px 0}
  #services .servicesTrack .card{min-height:440px}
  #services .flip-card-front h3{font-size:1.5rem}
  #services .flip-card-front .serviceBody{font-size:1.06rem}
}