/* ── Services — Grille desktop / Swiper mobile (sans vidéo) ── */
.services-section {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--black);
}

.services-header {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

/* ── Desktop large (≥ 1200px) : 4 colonnes ── */
@media (min-width: 1200px) {
  .services-grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5px;
    background: var(--border);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* ── Desktop standard (768px – 1199px) : grille 2x2 ── */
@media (min-width: 901px) and (max-width: 1199px) {
  .services-grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5px;
    background: var(--border);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* ── Mobile (≤ 900px) : swiper horizontal scroll-snap ── */
@media (max-width: 900px) {
  .services-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding-inline: var(--container-pad);
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--container-pad);
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
}

/* ── Carte ── */
.service-card {
  position: relative;
  background: var(--surface);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: background 300ms;
  overflow: hidden;
}
.service-card:hover { background: var(--surface-2); }

@media (max-width: 900px) {
  .service-card {
    flex: 0 0 calc(100vw - (var(--container-pad) * 2) - 2rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
  }
}

/* ── Badge dynamique ── */
.service-card__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Corps ── */
.card-body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }

/* Icône de service — grande, sobre */
.card-service-icon {
  color: var(--orange);
  opacity: 0.85;
  margin-bottom: 0.25rem;
  transition: opacity 300ms;
}
.service-card:hover .card-service-icon { opacity: 1; }

.card-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.card-desc  { font-size: 0.875rem; line-height: 1.65; color: rgba(245,244,240,0.55); }

.card-features { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; flex: 1; }
.card-features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: rgba(245,244,240,0.7); }
.card-features li svg { color: var(--orange); flex-shrink: 0; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.card-price  { display: flex; flex-direction: column; gap: 0.1rem; }
.price-from  { font-size: 0.7rem; color: var(--grey-400); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.price-amount{ font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }

/* ── Contrôles swiper (flèches + points) — mobile only ── */
.services-controls { display: none; }

@media (max-width: 900px) {
  .services-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-inline: var(--container-pad);
  }

  .services-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    color: rgba(245,244,240,0.6);
    cursor: pointer;
    transition: border-color 200ms, color 200ms, background 200ms;
    flex-shrink: 0;
  }
  .services-arrow:hover  { border-color: var(--orange); color: var(--orange); }
  .services-arrow:active { background: rgba(234,91,19,0.1); }
  .services-arrow:disabled { opacity: 0.25; pointer-events: none; }

  .services-dots { display: flex; align-items: center; gap: 0.5rem; }
  .services-dot {
    width: 6px; height: 6px;
    border-radius: 9999px;
    background: var(--border);
    border: none; padding: 0;
    cursor: pointer;
    transition: background 250ms, width 250ms;
  }
  .services-dot.is-active { background: var(--orange); width: 20px; }
}