/* SERVICES VILLES TEXT 3 - ULTRA MODERNE CARTES 3D + BULLES */

.services-villes-text-3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 8rem) 5%;
  background: color-mix(in srgb, var(--black) 92%, var(--primary));
  color: var(--white);
}

/* ---------- Fond : orbes flottantes ---------- */
.services-villes-text-3__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.services-villes-text-3__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}

.services-villes-text-3__orb--1 {
  top: -8%;
  left: -6%;
  width: clamp(220px, 30vw, 440px);
  height: clamp(220px, 30vw, 440px);
  background: color-mix(in srgb, var(--primary) 65%, transparent);
  animation: svt3Float 14s ease-in-out infinite;
}

.services-villes-text-3__orb--2 {
  bottom: -12%;
  right: -8%;
  width: clamp(260px, 34vw, 520px);
  height: clamp(260px, 34vw, 520px);
  background: color-mix(in srgb, var(--secondary) 60%, transparent);
  animation: svt3Float 18s ease-in-out infinite reverse;
}

.services-villes-text-3__orb--3 {
  top: 40%;
  left: 55%;
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  background: color-mix(in srgb, var(--secondary) 45%, var(--primary));
  animation: svt3Float 22s ease-in-out infinite;
}

/* ---------- Structure ---------- */
.services-villes-text-3__inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* ---------- Titre ÉNORME + glow ---------- */
.services-villes-text-3__head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.services-villes-text-3__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 55%, transparent),
    0 0 48px color-mix(in srgb, var(--secondary) 35%, transparent);
  animation: svt3TitleIn 1s cubic-bezier(0.16, 1, 0.3, 1) both,
    svt3Glow 4.5s ease-in-out 1s infinite;
}

/* ---------- Intro ---------- */
.services-villes-text-3__intro {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  animation: svt3TitleIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ---------- Cartes 3D ---------- */
.services-villes-text-3__deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
  perspective: 1400px;
}

.services-villes-text-3__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: 20px;
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease, border-color 0.5s ease;
  animation: svt3CardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.2s + var(--svt3-i, 0) * 0.12s);
}

.services-villes-text-3__card:hover,
.services-villes-text-3__card:focus-within {
  transform: translateY(-10px) rotateX(6deg) rotateY(-6deg);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.6),
    0 0 30px color-mix(in srgb, var(--primary) 30%, transparent);
}

.services-villes-text-3__card-glow {
  position: absolute;
  top: -55%;
  right: -35%;

  /* Ronde, et non plus une ellipse étirée : 70% de large pour 120% de haut
     donnait une lueur ovale, dont l'axe se voyait au survol. */
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--secondary) 45%, transparent),
    transparent 65%
  );

  /* Le même fondu que les orbes du fond : sans lui, le dégradé s'arrêtait net
     et laissait un bord visible sur le verre de la carte. */
  filter: blur(60px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.services-villes-text-3__card:hover .services-villes-text-3__card-glow,
.services-villes-text-3__card:focus-within .services-villes-text-3__card-glow {
  opacity: 1;
}

.services-villes-text-3__card-index {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-numeric);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--primary) 70%, transparent);
  transform: translateZ(30px);
}

.services-villes-text-3__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--white) 88%, transparent);
  transform: translateZ(20px);
}

/* ---------- Marquee bulles ---------- */
.services-villes-text-3__marquee {
  position: relative;
  overflow: hidden;
  padding: 0.5rem 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    var(--black) 8%,
    var(--black) 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    var(--black) 8%,
    var(--black) 92%,
    transparent
  );
}

.services-villes-text-3__track {
  display: flex;
  width: max-content;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  animation: svt3BubbleMarquee 32s linear infinite;
  will-change: transform;
}

.services-villes-text-3__marquee:hover .services-villes-text-3__track {
  animation-play-state: paused;
}

.services-villes-text-3__bubble {
  flex: 0 0 auto;
  padding: 0.7rem clamp(1.1rem, 2.2vw, 1.6rem);
  border-radius: 999px;
  font-family: var(--font-modern);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 600;
  white-space: nowrap;
  color: var(--white);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--secondary) 18%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---------- Animations ---------- */
@keyframes svt3TitleIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes svt3Glow {
  0%,
  100% {
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 55%, transparent),
      0 0 48px color-mix(in srgb, var(--secondary) 35%, transparent);
  }
  50% {
    text-shadow:
      0 0 28px color-mix(in srgb, var(--primary) 75%, transparent),
      0 0 70px color-mix(in srgb, var(--secondary) 50%, transparent);
  }
}

@keyframes svt3CardIn {
  from {
    opacity: 0;
    transform: translateY(30px) rotateX(-8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

@keyframes svt3Float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(4%, -6%) scale(1.08);
  }
  66% {
    transform: translate(-5%, 5%) scale(0.94);
  }
}

@keyframes svt3BubbleMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-villes-text-3__card:hover,
  .services-villes-text-3__card:focus-within {
    transform: translateY(-8px);
  }
}

@media (max-width: 768px) {
  .services-villes-text-3__deck {
    grid-template-columns: 1fr;
  }
  .services-villes-text-3__track {
    animation-duration: 24s;
  }
}

@media (max-width: 480px) {
  .services-villes-text-3 {
    padding: 3.5rem 5%;
  }
  .services-villes-text-3__card {
    padding: 1.5rem;
  }
}

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .services-villes-text-3__title,
  .services-villes-text-3__intro,
  .services-villes-text-3__card,
  .services-villes-text-3__orb,
  .services-villes-text-3__track {
    animation: none;
  }
  .services-villes-text-3__card:hover,
  .services-villes-text-3__card:focus-within {
    transform: translateY(-6px);
  }
}

/* ── 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-villes-text-3__title:hover {
  color: var(--white);
}