/* SERVICES 16 - CARROUSEL IMMERSIF
   Grandes cartes-images glissables (souris et doigt) sur fond de marque.
   Le defilement est NATIF (scroll-snap) : inertie tactile, clavier et
   lecteurs d'ecran viennent du navigateur ; le JS n'ajoute que le glisser
   a la souris, les fleches, le compteur et la carte active agrandie. */

.services-16 {
  --services-16-carte: clamp(260px, 30vw, 420px);
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--on-primary);
  padding: clamp(4rem, 9vw, 8rem) 0;
}

.services-16__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: content-box;
}

/* ── En-tete ─────────────────────────────────────────────────────────── */
.services-16__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.services-16__surtitre {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-primary);
  opacity: 0.75;
}

.services-16__titre {
  margin: 14px 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--on-primary);
}

.services-16__titre:hover {
  color: var(--on-primary);
}

.services-16__titre .mcl-accent {
  font-style: italic;
  color: var(--on-primary);
}

/* ── Controles ───────────────────────────────────────────────────────── */
.services-16__controles {
  display: flex;
  align-items: center;
  gap: 18px;
}

.services-16__nav {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-primary) 40%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--on-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.services-16__nav:hover,
.services-16__nav:focus-visible {
  border-color: var(--on-primary);
  background: var(--on-primary);
  color: var(--primary);
}

.services-16__nav:focus-visible {
  outline: 2px solid var(--on-primary);
  outline-offset: 3px;
}

.services-16__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.services-16__nav:disabled:hover {
  border-color: color-mix(in srgb, var(--on-primary) 40%, transparent);
  background: none;
  color: var(--on-primary);
}

.services-16__nav-svg {
  width: 20px;
  height: 20px;
}

.services-16__compteur {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 5.5ch;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--on-primary);
}

.services-16__courant {
  font-size: 1.6rem;
  color: var(--on-primary);
}

.services-16__separateur,
.services-16__total {
  color: var(--on-primary);
  opacity: 0.6;
}

/* ── Bande des metiers (multi-metiers seulement) ─────────────────────────
   LA COULEUR : la section est posee sur --primary. Une rampe partant de
   --primary rendrait le premier metier invisible : elle va donc de
   --on-primary a --secondary, les deux couleurs lisibles sur ce fond (§4.17).
   Le texte du bouton actif suit la rampe appariee --primary -> --on-secondary. */
.services-16__metiers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.services-16__metier,
.services-16__carte[data-metier] {
  --m-couleur: color-mix(in oklab, var(--on-primary), var(--secondary) var(--m-melange, 0%));
  --m-texte: color-mix(in oklab, var(--primary), var(--on-secondary) var(--m-melange, 0%));
}

.services-16__metier {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--m-couleur);
  border-radius: 999px;
  background: none;
  color: var(--on-primary);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.services-16__metier-nom {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

.services-16__metier-nb {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

.services-16__metier:hover,
.services-16__metier:focus-visible,
.services-16__metier.is-active {
  background: var(--m-couleur);
  color: var(--m-texte);
}

.services-16__metier:focus-visible {
  outline: 2px solid var(--on-primary);
  outline-offset: 3px;
}

/* ── Piste ───────────────────────────────────────────────────────────── */
.services-16__piste {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  margin: 0;
  /* La premiere et la derniere carte peuvent venir au centre. */
  padding: 12px max(5vw, calc(50% - var(--services-16-carte) / 2));
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.services-16__piste::-webkit-scrollbar {
  display: none;
}

.services-16__piste:focus-visible {
  outline: 2px solid var(--on-primary);
  outline-offset: -2px;
}

.services-16--glisse {
  cursor: grabbing;
}

.services-16--glisse .services-16__piste {
  scroll-snap-type: none;
  user-select: none;
}

.services-16--js .services-16__piste {
  cursor: grab;
}

.services-16__carte {
  position: relative;
  flex: 0 0 var(--services-16-carte);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--primary);
  color: var(--white);
  scroll-snap-align: center;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.services-16__carte[hidden] {
  display: none;
}

/* La carte au centre est un peu plus grande que ses voisines. Le reglage
   n'existe qu'avec le JS : sans lui, toutes les cartes sont a pleine taille. */
.services-16--js .services-16__carte {
  transform: scale(0.9);
  opacity: 0.7;
}

.services-16--js .services-16__carte.is-active {
  transform: scale(1);
  opacity: 1;
}

.services-16__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: brightness(0.72);
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-16__carte:hover .services-16__image {
  transform: scale(1.04);
}

/* Le fond REEL du texte est la photo : on l'assombrit, puis on ecrit en
   blanc (§4.14). */
.services-16__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.82) 100%);
}

.services-16__corps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 32px);
}

.services-16__nom {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--white);
}

.services-16__nom:hover {
  color: var(--white);
}

.services-16__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--white);
  opacity: 0.88;
}

.services-16__lien {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
}

.services-16__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.services-16__lien-texte {
  color: inherit;
}

.services-16__lien-svg {
  width: 18px;
  height: 18px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-16__lien:hover,
.services-16__lien:focus-visible {
  color: var(--white);
}

.services-16__carte:hover .services-16__lien-svg,
.services-16__lien:focus-visible .services-16__lien-svg {
  transform: translateX(6px);
}

.services-16__lien:focus-visible {
  outline: none;
}

.services-16__lien:focus-visible::after {
  outline: 2px solid var(--white);
  outline-offset: -6px;
  border-radius: 1.25rem;
}

/* ── Pied : progression + bouton de section ──────────────────────────── */
.services-16__pied {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
}

.services-16__progression {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--on-primary) 20%, transparent);
}

.services-16__progression-barre {
  position: absolute;
  inset: 0;
  background: var(--on-primary);
  transform-origin: left center;
  transform: scaleX(var(--services-16-progression, 0.1));
  transition: transform 0.25s linear;
}

.services-16__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--on-secondary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.services-16__cta:hover,
.services-16__cta:focus-visible {
  background: var(--on-primary);
  color: var(--primary);
}

.services-16__cta:focus-visible {
  outline: 2px solid var(--on-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .services-16__carte,
  .services-16__image,
  .services-16__lien-svg,
  .services-16__progression-barre {
    transition: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .services-16 {
    --services-16-carte: 78vw;
  }

  .services-16__head {
    align-items: flex-start;
  }

  .services-16__controles {
    width: 100%;
    justify-content: space-between;
  }

  .services-16__nav {
    width: 46px;
    height: 46px;
  }

  .services-16__pied {
    flex-direction: column;
    align-items: stretch;
  }

  .services-16__cta {
    width: 100%;
  }
}