/* ========================================
   SERVICES 8 — CAROUSEL 3D
   ======================================== */
.services-8 {
  /* Dimensions de reference de la carte, et facteur d'agrandissement.
     Avant, la carte active etait posee a translateZ(+rayon) : la perspective
     l'agrandissait de x1.538 « gratuitement ». Elle est desormais a z = 0 pour
     que sa boite de mise en page corresponde a ce qu'on voit (hit-test iOS), et
     cet agrandissement est donc repris ICI, en espace de mise en page. Tout
     l'interieur de la carte suit la meme echelle, sinon le texte resterait
     petit dans une carte devenue grande. */
  --s8-largeur: 280px;
  --s8-hauteur: 350px;
  --s8-echelle: 1.54;

  padding: 100px 5% 80px;
  background: var(--primary);
  overflow: hidden;
}

/* ── En-tête ── */
.services-8__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1300px;
  margin: 0 auto 125px;
  flex-wrap: wrap;
  gap: 24px;
}
.services-8__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.services-8__header-left h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  line-height: 1.1;
}
.services-8__header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Navigation flèches */
.services-8__nav {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--white);
}
.services-8__nav:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  transform: scale(1.1);
}
.services-8__nav:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}
.services-8__nav svg {
  width: 20px;
  height: 20px;
}

/* Compteur */
.services-8__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: color-mix(in srgb, var(--white) 40%, transparent);
  font-size: 0.9rem;
}
.services-8__counter-current {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
  transition: all 0.3s;
}

/* ── Scène 3D ──────────────────────────────────────────────────────────────
   Le cylindre est recule d'un rayon par le JS (translateZ(-r) ... translateZ(r)) :
   la carte ACTIVE retombe exactement a z = 0, donc sans grossissement de
   perspective. Sa boite de mise en page coincide alors avec ce qu'on voit —
   c'est ce qui rend le bouton reellement tapable sur iOS, ou WebKit teste les
   touches sur la boite NON transformee. */
.services-8__scene {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  max-width: 1300px;
  margin: 0 auto;
  height: calc(var(--s8-hauteur) * var(--s8-echelle));
  position: relative;
}
.services-8__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Slide ─────────────────────────────────────────────────────────────────
   Centrage par marges auto : une largeur et une marge negative en dur avaient
   fini par diverger (280px pour -125px), decalant tout le carrousel. */
.services-8__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: calc(var(--s8-largeur) * var(--s8-echelle));
  height: 100%;
  cursor: pointer;
  transition:
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease,
    visibility 0s;
}
.services-8__slide.is-center {
  cursor: default;
}

/* Au-dela de deux crans, la carte sort du champ : masquee pour de bon, sinon
   elle reste peinte, focusable et cliquable malgre son opacite nulle. */
.services-8__slide.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* `visibility` bascule tout de suite a l'apparition, et n'attend la fin du
     fondu qu'a la disparition : sans ce delai la carte s'escamote d'un coup. */
  transition:
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

/* iOS / Safari : toutes les cartes partagent la MEME boite de mise en page
   (left/right: 0 + marges auto). Le hit-test s'y faisant sur la boite non
   transformee, une carte laterale intercepterait le tap destine a la carte
   active. On ne laisse donc que l'active tapable sur ecran tactile ; les
   fleches et le swipe assurent la navigation, et le clic desktop sur une carte
   laterale reste actif. */
@media (hover: none) and (pointer: coarse) {
  .services-8__slide:not(.is-center) {
    pointer-events: none;
  }
  .services-8__slide.is-center {
    pointer-events: auto;
  }
}

/* ── Face unique (pas de flip) ── */
.services-8__face {
  position: absolute;
  inset: 0;
  border-radius: calc(8px * var(--s8-echelle));
  overflow: hidden;
  background: var(--primary);
}

/* Assombrissement des cartes laterales.
   Le filtre est porte par la FACE, jamais par la slide : un `filter` non nul
   force `transform-style: flat` et cree un contexte d'empilement. Applique a la
   slide, il la sortait du tri de profondeur du cylindre et faisait passer les
   bords des voisines devant la carte active. La face, elle, n'a aucun enfant
   transforme en 3D : le filtre n'y coute rien. */
.services-8__face {
  transition: filter 0.5s ease;
}
.services-8__slide:not(.is-center) .services-8__face {
  filter: brightness(0.5) saturate(0.4);
}

/* Image fond */
.services-8__face-bg {
  position: absolute;
  inset: 0;
}
.services-8__face-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  transition:
    opacity 0.4s,
    transform 0.6s;
}
.services-8__slide.is-center .services-8__face-bg img {
  opacity: 0.5;
  transform: scale(1.04);
}

/* Overlay */
.services-8__face-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 100%
  );
}

/* Contenu */
.services-8__face-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(28px * var(--s8-echelle)) calc(24px * var(--s8-echelle));
}

/* Icône */
.services-8__face-icon {
  width: calc(40px * var(--s8-echelle));
  height: calc(40px * var(--s8-echelle));
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(14px * var(--s8-echelle));
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.services-8__slide.is-center .services-8__face-icon {
  transform: scale(1.1);
}
.services-8__face-icon svg {
  width: calc(20px * var(--s8-echelle));
  height: calc(20px * var(--s8-echelle));
  color: var(--primary);
}

.services-8__face-content h3 {
  font-family: var(--font-display);
  font-size: calc(1.25rem * var(--s8-echelle));
  color: var(--white);
  margin-bottom: calc(8px * var(--s8-echelle));
  line-height: 1.2;
}
.services-8__face-content p {
  font-size: calc(0.7rem * var(--s8-echelle));
  color: color-mix(in srgb, var(--white) 55%, transparent);
  line-height: 1.6;
  /* Masquée sur les slides non-actives */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease;
}
.services-8__slide.is-center .services-8__face-content p {
  max-height: calc(80px * var(--s8-echelle));
  opacity: 1;
}

/* Sous-services */
.services-8__subs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--s8-echelle));
  margin-bottom: calc(18px * var(--s8-echelle));
  margin-top: calc(10px * var(--s8-echelle));
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
}
.services-8__slide.is-center .services-8__subs {
  max-height: calc(200px * var(--s8-echelle));
  opacity: 1;
}
.services-8__subs li {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--s8-echelle));
  font-size: calc(0.7rem * var(--s8-echelle));
  color: color-mix(in srgb, var(--white) 60%, transparent);
}
.services-8__subs svg {
  width: calc(14px * var(--s8-echelle));
  height: calc(14px * var(--s8-echelle));
  color: var(--secondary);
  flex-shrink: 0;
}

/* Bouton slide */
.services-8__slide-btn-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.services-8__slide-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--s8-echelle));
  padding: calc(10px * var(--s8-echelle)) calc(20px * var(--s8-echelle));
  background: var(--secondary);
  color: var(--on-secondary);
  font-weight: 700;
  font-size: calc(0.7rem * var(--s8-echelle));
  text-decoration: none;
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background 0.3s;
  pointer-events: none;
}
.services-8__slide.is-center .services-8__slide-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.services-8__slide-btn:hover {
  background: var(--primary);
  color: var(--on-primary);
}
.services-8__slide-btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}
.services-8__slide-btn svg {
  width: calc(14px * var(--s8-echelle));
  height: calc(14px * var(--s8-echelle));
}

/* ── Footer ── */
.services-8__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  margin: 125px auto 0;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  gap: 20px;
  flex-wrap: wrap;
}
.services-8__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s;
}
.services-8__phone:hover {
  color: var(--secondary);
}
.services-8__phone:focus-visible,
.services-8__devis:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}
.services-8__phone svg {
  width: 18px;
  height: 18px;
  color: var(--secondary);
}

/* Progress track */
.services-8__track {
  flex: 1;
  max-width: 300px;
  height: 2px;
  background: color-mix(in srgb, var(--white) 10%, transparent);
  border-radius: 1px;
  overflow: hidden;
}
.services-8__track-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: 1px;
  transition: width 0.5s ease;
  width: 0%;
}

.services-8__devis {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--secondary);
  color: var(--on-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.3s;
}
.services-8__devis:hover {
  background: var(--white);
  color: var(--black);
}
.services-8__devis svg {
  width: 16px;
  height: 16px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .services-8 {
    --s8-largeur: 240px;
    --s8-hauteur: 280px;
    --s8-echelle: 1.43;
  }

  .services-8__subs {
    display: none;
  }
  .services-8__slide.is-center .services-8__face-content p {
    max-height: none;
  }
}

/* ── REGROUPEMENT PAR METIER ──────────────────────────────────────────
   Un carrousel ne montre qu'une carte : un titre de groupe n'aurait rien a
   coiffer. Le regroupement passe donc par les deux reperes deja presents —
   le compteur, qui nomme desormais le metier, et la piste, decoupee en
   segments proportionnels. Sur une offre longue et melangee, on sait ou l'on
   est et ce qu'il reste.

   MONO-METIER : `--multi` est absent, ni nom ni segments ne sont emis, et la
   piste garde exactement son remplissage d'origine.

   LA COULEUR — pas la rampe habituelle : la section est posee SUR --primary.
   La rampe va de --secondary a --on-primary, les deux couleurs que le theme
   garantit lisibles sur ce fond. `--m-melange` est pose sur la SECTION par le
   JS a chaque rotation, ce qui teinte le remplissage de la piste au metier de
   la carte affichee. */
.services-8 {
  --m-couleur: color-mix(in oklab, var(--secondary), var(--on-primary) var(--m-melange, 0%));
}
/* Aucun `--m-couleur` local ici : la valeur calculee sur `.services-8` — que
   le JS repositionne a chaque rotation — descend par heritage. La redeclarer
   la figerait sur le `--m-melange` de l'element. */
.services-8__counter-metier {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-couleur);
  transition: color 0.3s;
}
/* La pastille d'icone porte la couleur de SON metier. Chaque diapositive
   redeclare `--m-couleur` : contrairement au compteur, elle ne doit pas suivre
   la carte affichee mais la sienne — c'est ce qui fait defiler les couleurs
   quand le cylindre tourne.

   Meme specificite que la regle d'origine, placee apres : l'ordre tranche. En
   mono-metier `--m-melange` vaut 0 %, donc --m-couleur EST --secondary. */
.services-8__slide {
  --m-couleur: color-mix(in oklab, var(--secondary), var(--on-primary) var(--m-melange, 0%));
}
.services-8__face-icon {
  background: var(--m-couleur);
}
/* Le glyphe reste sur --primary : il est deja la couleur d'origine sur
   --secondary, et le contraste ne fait que croitre a mesure que la rampe
   s'eclaircit vers --on-primary. Rien a redeclarer. */
.services-8--multi .services-8__track {
  position: relative;
}
.services-8__track-parts {
  position: absolute;
  inset: 0;
  display: flex;
}
.services-8__track-part {
  --m-couleur: color-mix(in oklab, var(--secondary), var(--on-primary) var(--m-melange, 0%));
  flex: 1 1 0;
  background: color-mix(in srgb, var(--m-couleur) 34%, transparent);
}
.services-8--multi .services-8__track-fill {
  position: absolute;
  inset: 0 auto 0 0;
}
/* Le remplissage suit le metier de la carte affichee. Meme specificite que la
   regle d'origine, placee apres : c'est l'ordre qui tranche. */
.services-8__track-fill {
  background: var(--m-couleur);
}

@media (max-width: 768px) {
  .services-8 {
    --s8-largeur: 220px;
  }
  .services-8__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .services-8__track {
    display: none;
  }
}
@media (max-width: 480px) {
  .services-8__header {
    margin-bottom: 80px;
  }
  .services-8__footer {
    margin-top: 80px;
    flex-direction: column;
  }

  .services-8 {
    --s8-largeur: 200px;
    --s8-hauteur: 300px;
    --s8-echelle: 1.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-8__carousel,
  .services-8__slide,
  .services-8__face,
  .services-8__face-bg img,
  .services-8__face-icon,
  .services-8__slide-btn {
    transition: none;
  }
}

/* ── TITRES : couleur de survol explicite (CLAUDE.md §4.13) ──────────
   Le main.css des themes stylise les balises Hn, hover compris. Chaque
   titre reprend ici sa couleur de base pour neutraliser cet heritage. */
.services-8__face-content h3:hover,
.services-8__header-left h2:hover {
  color: var(--white);
}

/* Accent ((…)) d'une description de l'offre : gras, dans la couleur du
   texte qui le porte (la description déclare la sienne, fond réel compris). */
.services-8__face-content p .mcl-accent {
  color: inherit;
  font-weight: 700;
}

/* D-42 : l'accent ((…)) d'un titre de l'offre (service, sous-service,
   atout, étape) garde la couleur du texte qui le porte et passe en italique. */
.services-8__face-content h3 .mcl-accent,
.services-8__subs li .mcl-accent {
  color: inherit;
  font-style: italic;
}

/* Enveloppe du titre de l'offre dans un parent flex : texte et accent ((…))
   forment UN seul élément flex (sinon le gap remplace l'espace, ou les mots
   se collent). Couleur : celle du parent, déclarée ici (§4.13). */
.services-8__subs li .services-8__sub-texte {
  color: inherit;
}