/* TOKYO GYM - SAMURAI RED EDITORIAL DARK MODE STYLESHEET */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;700;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg-main: #060608;
  --bg-card: rgba(14, 15, 20, 0.8);
  --bg-card-solid: #0d0e14;
  --bg-card-hover: rgba(22, 23, 32, 0.95);
  --accent-red: #ff1744;
  --accent-crimson: #e60026;
  --accent-red-glow: rgba(255, 23, 68, 0.4);
  --accent-gold: #d4af37;
  --accent-gold-glow: rgba(212, 175, 55, 0.3);
  --text-white: #ffffff;
  --text-body: #a3a8b8;
  --text-muted: #646877;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-red: rgba(255, 23, 68, 0.4);
  --font-display: 'Inter', sans-serif;
  --font-editorial: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
}


/* RESET & BASE */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color-scheme: dark;
}

body {
  background-color: var(--bg-main);
  color: var(--text-white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(230, 0, 38, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(230, 0, 38, 0.05) 0%, transparent 45%);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* EDITORIAL TYPOGRAPHY STYLES */
.sans-word {
  font-family: var(--font-body);
  font-weight: 300;
}

.editorial-word {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
}

/* REMOVE ITALIC EDITORIAL FONT MIX IN ALL SECTION TITLES (BOLD SANS-SERIF ONLY, EXCEPT HERO) */
h2 .editorial-word,
.section-header h2 .editorial-word,
.gallery-header h2 .editorial-word,
.pricing-header h2 .editorial-word,
.partners-title .editorial-word,
.find-us-title .editorial-word,
.trial-banner-content h2 .editorial-word {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

.text-gradient-red {
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fff7d6 0%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kanji-watermark {
  position: absolute;
  font-family: var(--font-jp);
  font-weight: 900;
  color: rgba(255, 23, 68, 0.03);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* BUTTONS & BADGES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary,
.btn-crimson {
  background: linear-gradient(135deg, var(--accent-crimson) 0%, #b3001b 100%);
  color: var(--text-white);
  box-shadow: 0 0 22px var(--accent-red-glow);
  border: 1px solid rgba(255, 23, 68, 0.6);
}

.btn-primary:hover,
.btn-crimson:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 23, 68, 0.7);
  border-color: #ff5252;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-red);
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #997a15 100%);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 20px var(--accent-gold-glow);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid var(--border-red);
  color: var(--accent-red);
}

/* SECTION TITLES */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px auto;
  position: relative;
  z-index: 1;
}

.section-header h2 {
  font-family: var(--font-body);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 12px 0 16px 0;
  text-transform: none;
  line-height: 1.05;
}

.section-header p {
  color: var(--text-body);
  font-size: 1.05rem;
}

/* KATANA DIVIDER */
.katana-divider {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
  margin: 18px auto;
  position: relative;
}

.katana-divider::after {
  content: '❖';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-red);
  font-size: 10px;
  background: var(--bg-main);
  padding: 0 6px;
}

/* TOP ANNOUNCEMENT BAR (FLOATING GLASSMORPHISM WITH BACKDROP BLUR) */
.top-announcement-bar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  background: rgba(6, 6, 8, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.announcement-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.counter-chrono {
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  padding: 3px 12px;
  border-radius: 29px;
  border: 1px solid #ff5252;
  font-family: 'Space Grotesk', var(--font-body);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.9), 0 0 28px rgba(255, 23, 68, 0.5);
}

.chrono-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  padding: 4px 12px;
  border-radius: 29px;
  letter-spacing: 0.8px;
  border: 1px solid #ff5252;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.9), 0 0 28px rgba(255, 23, 68, 0.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.chrono-badge svg {
  width: 12px;
  height: 12px;
  color: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

/* NAVBAR (MODERN FROSTED GLASS BLUR BACKGROUND) */
.gym-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 3px 48px;
  background: rgba(8, 8, 12, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease;
}

.navbar-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gym-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo-img {
  height: clamp(42px, 4.5vw, 62px);
  width: auto;
  max-width: 78%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255, 23, 68, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gym-logo:hover .brand-logo-img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 20px rgba(255, 23, 68, 0.8));
}

.gym-navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.gym-navbar .nav-links a {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease, text-shadow 0.2s ease;
  position: relative;
}

.gym-navbar .nav-links a:hover,
.gym-navbar .nav-links a.active {
  color: var(--accent-red);
  text-shadow: 0 0 12px var(--accent-red-glow);
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-store-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.header-icon-btn:hover {
  background: var(--accent-crimson);
  border-color: var(--accent-red);
  box-shadow: 0 0 16px var(--accent-red-glow);
  transform: scale(1.08);
}

.header-store-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.auth-btn.sign-in {
  color: rgba(255, 255, 255, 0.70);
}

.auth-btn.sign-in:hover {
  color: #ffffff;
}

.auth-btn.sign-up {
  color: #ffffff;
  border: 1px solid var(--border-red);
  background: rgba(255, 23, 68, 0.1);
  padding: 7px 18px;
  border-radius: 20px;
  box-shadow: 0 0 12px var(--accent-red-glow);
}

.auth-btn.sign-up:hover {
  border-color: var(--accent-red);
  background: var(--accent-crimson);
  box-shadow: 0 0 20px var(--accent-red-glow);
}

/* GYM HERO SECTION */
.gym-hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-athlete-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
}

/* UNMASKED BASE LAYER (BOTTOM) */
.hero-unmasked-layer {
  z-index: 1;
}

/* MASKED TOP LAYER (REVEALED VIA VERTICAL SPLIT SLIDER LINE) */
.hero-masked-layer {
  z-index: 2;
  opacity: 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  pointer-events: none;
  transition: clip-path 0.05s ease-out, -webkit-clip-path 0.05s ease-out;
}

/* VERTICAL SPLIT SLIDER LINE & DRAG HANDLE */
.hero-split-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 23, 68, 0.4) 0%, #ff1744 50%, rgba(255, 23, 68, 0.4) 100%);
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.9), 0 0 35px rgba(255, 23, 68, 0.6);
  z-index: 10;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 0.05s ease-out;
}

.split-line-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0a0b0f;
  border: 2px solid var(--accent-red);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(255, 23, 68, 0.8), inset 0 0 10px rgba(255, 23, 68, 0.4);
}

.split-line-handle svg {
  width: 20px;
  height: 20px;
  color: var(--accent-red);
}

/* LEFT DARK GRADIENT: transparent -> rgba(12,5,8,0.96) */
.hero-left-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(10, 5, 8, 0.98) 0%,
      rgba(10, 5, 8, 0.92) 35%,
      rgba(10, 5, 8, 0.65) 55%,
      rgba(10, 5, 8, 0.15) 75%,
      transparent 100%);
  z-index: 2;
}

/* SEAMLESS BOTTOM GRADIENT CONNECTING TO SECTION 2 */
.hero-bottom-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg,
      var(--bg-main) 0%,
      rgba(6, 6, 8, 0.96) 35%,
      rgba(6, 6, 8, 0.6) 70%,
      transparent 100%);
  z-index: 2;
}

/* SUBTLE RED ATMOSPHERE GLOW */
.hero-atmosphere-glow {
  position: absolute;
  top: 25%;
  left: 5vw;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(230, 0, 38, 0.25) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 2;
  pointer-events: none;
}

/* HERO CONTENT POSITION */
.hero-content-wrapper {
  position: relative;
  z-index: 10;
  left: 7.5vw;
  top: 2vh;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* HERO BADGES (SLEEK FROSTED GLASS CARDS) */
.hero-badges-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}

.hero-badge-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.hero-badge-card:hover {
  border-color: rgba(255, 23, 68, 0.55);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 25px rgba(255, 23, 68, 0.25);
  transform: translateY(-2px);
}

.rating-stars-gold {
  color: #ffb703;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(255, 183, 3, 0.6);
}

.badge-bold-val {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-body);
}

.badge-sub-text {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.2px;
}

.badge-icon-arrow {
  width: 12px;
  height: 12px;
  color: var(--accent-red);
  margin-left: 2px;
}

.metric-highlight-tag {
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  padding: 2px 8px;
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
  letter-spacing: 0.5px;
}

.badge-icon-trend {
  width: 13px;
  height: 13px;
  color: #ff1744;
}

/* MAIN HEADLINE (INTER SANS-SERIF BOLD) */
.hero-headline {
  font-family: var(--font-body);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 22px;
  text-transform: none;
  letter-spacing: -1px;
}

.headline-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.headline-line .sans-word,
.headline-line .editorial-word {
  font-family: var(--font-body);
  font-weight: 800;
  font-style: normal;
  color: #ffffff;
}

.text-red-neon {
  color: #ff1744;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(255, 23, 68, 0.95), 0 0 38px rgba(255, 23, 68, 0.7);
  display: inline-block;
  margin-left: 6px;
}

/* INLINE CIRCULAR ICON BADGE */
.inline-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid var(--border-red);
  backdrop-filter: blur(8px);
  color: var(--accent-red);
  flex-shrink: 0;
  box-shadow: 0 0 15px var(--accent-red-glow);
}

.inline-icon-badge svg {
  width: 16px;
  height: 16px;
}

/* DESCRIPTION */
.hero-description {
  max-width: 410px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 32px;
}

/* HERO MANUAL 2-IMAGE CAROUSEL STYLES */
.hero-carousel-slides {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-2-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.65) contrast(1.1);
}

/* Hero Carousel Controls (Positioned bottom-right of hero) */
.hero-carousel-controls {
  position: absolute;
  bottom: 36px;
  right: 48px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(10, 11, 15, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 23, 68, 0.35);
  padding: 8px 18px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.hero-dots-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.hero-dot.active {
  width: 22px;
  border-radius: 10px;
  background: var(--accent-red);
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.9);
}

.hero-carousel-next-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 4px 6px;
}

.hero-carousel-next-btn .btn-arrow-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-crimson);
  border: 1px solid rgba(255, 23, 68, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.5);
  transition: transform 0.25s ease;
}

.hero-carousel-next-btn:hover .btn-arrow-badge {
  transform: translateX(3px) scale(1.08);
}

@media (max-width: 768px) {
  .hero-carousel-controls {
    right: 50%;
    transform: translateX(50%);
    bottom: 20px;
    padding: 6px 14px;
  }

  /* HIDE NEXT IMAGE BUTTON ON MOBILE */
  .hero-carousel-next-btn {
    display: none !important;
  }

  /* MOBILE HORIZONTAL SPLIT LINE (TOP-TO-BOTTOM) */
  .hero-masked-layer {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transition: clip-path 0.05s ease-out, -webkit-clip-path 0.05s ease-out;
  }

  .hero-split-line {
    width: 100%;
    height: 3px;
    top: 50%;
    left: 0 !important;
    background: linear-gradient(90deg, rgba(255, 23, 68, 0.4) 0%, #ff1744 50%, rgba(255, 23, 68, 0.4) 100%);
    transform: translateY(-50%);
    transition: top 0.05s ease-out;
  }

  /* REMOVE HERO LEFT GRADIENT ON MOBILE FOR FULL IMAGE VISIBILITY */
  .hero-left-gradient {
    background: none !important;
    display: none !important;
  }
}

/* PRIMARY CTA BUTTON (CRIMSON RED) */
.hero-primary-cta.btn-crimson,
.hero-primary-cta.btn-lime {
  width: 160px;
  height: 42px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-crimson) 0%, #b3001b 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 25px var(--accent-red-glow);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  text-transform: none;
  border: 1px solid rgba(255, 23, 68, 0.6);
}

.hero-primary-cta.btn-crimson:hover,
.hero-primary-cta.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(255, 23, 68, 0.7);
  border-color: #ff5252;
}

.hero-primary-cta .cta-arrow {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.hero-primary-cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* WAVY SCROLL INDICATOR (TRIPLE NEON RED CHEVRONS - NO CIRCLE, NO BACKGROUND) */
.hero-scroll-indicator {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.wavy-arrow-wrapper {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wavyBounce 2s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wavyBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.neon-triple-chevrons {
  width: 56px;
  height: 66px;
  filter: drop-shadow(0 0 8px #ff1744) drop-shadow(0 0 20px rgba(255, 23, 68, 0.9));
}

/* ENTRANCE ANIMATIONS FOR HERO */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImgScale {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-athlete-img {
  animation: heroImgScale 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gym-navbar {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-rating {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.hero-metrics {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.hero-headline {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.hero-description {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.hero-cta-group {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

/* FACILITIES / ADS SECTION WITH SEAMLESS GRADIENT CONNECTOR */
/* SECTION: ATOUTS (POURQUOI NOUS CHOISIR - 6 CARTE GRILLE) */
.atouts-section {
  padding: 100px 0;
  position: relative;
  background: #08080a;
}

.atouts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.atout-card {
  background: rgba(14, 14, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.atout-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 23, 68, 0.6);
  box-shadow: 0 15px 35px rgba(255, 23, 68, 0.2);
  background: rgba(18, 18, 24, 0.95);
}

/* Première carte mise en avant avec bordure rouge fine */
.atout-card.featured-atout {
  border-color: rgba(255, 23, 68, 0.5);
  box-shadow: 0 10px 30px rgba(255, 23, 68, 0.15);
}

.atout-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid rgba(255, 23, 68, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.atout-icon-box svg {
  width: 24px;
  height: 24px;
  color: var(--accent-red);
}

.atout-card:hover .atout-icon-box {
  transform: scale(1.08);
  background: rgba(255, 23, 68, 0.2);
  border-color: rgba(255, 23, 68, 0.7);
}

.atout-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.atout-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .atouts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .atouts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .atout-card {
    padding: 24px 20px;
  }
}

.facility-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
}

.facility-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-red);
  box-shadow: 0 15px 35px rgba(255, 23, 68, 0.2);
}

.facility-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.facility-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.facility-card:hover .facility-img img {
  transform: scale(1.08);
}

.facility-img-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(6, 6, 8, 0.85);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-red);
  border: 1px solid var(--border-red);
}

.facility-body {
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.facility-body h3 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-white);
}

.facility-body p {
  color: var(--text-body);
  font-size: 0.95rem;
  margin-bottom: 20px;
  flex: 1;
}

.facility-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facility-features span {
  font-size: 0.78rem;
  background: rgba(255, 23, 68, 0.08);
  border: 1px solid rgba(255, 23, 68, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text-body);
}

/* GALLERY / PORTFOLIO CAROUSEL SECTION (NOTRE UNIVERS) */
.gallery-section {
  padding: 110px 0 130px 0;
  position: relative;
  background: #050507;
  overflow: hidden;
}

/* Subtle Red Atmospheric Background Glow */
.gallery-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 75vw;
  max-width: 950px;
  height: 480px;
  background: radial-gradient(
    circle at center,
    rgba(229, 9, 20, 0.22) 0%,
    rgba(90, 8, 13, 0.1) 42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 1;
}

.gallery-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}

.gallery-header .badge-tag {
  margin-bottom: 12px;
}

.gallery-header h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-body);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 16px 0;
}

.gallery-header p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  font-family: var(--font-body);
}

/* FIXED 3D CARD SHOWCASE CAROUSEL */
.gallery-carousel-viewport {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 5;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  position: relative;
  width: 100%;
  transform: none !important; /* TRACK REMAINS 100% FIXED IN PLACE */
  padding: 20px 0;
}

/* FIXED CARD SPECIFICATIONS */
.gallery-card {
  flex-shrink: 0;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  transition: all 400ms ease;
  cursor: pointer;
}

/* SLOT 0 & 4 (FAR OUTER CARDS - FIXED POSITION) */
.gallery-card.slot-far-left,
.gallery-card.slot-far-right {
  width: 175px;
  height: 270px;
  opacity: 0.45;
  filter: brightness(0.45);
  transform: scale(0.74);
  z-index: 2;
}

/* SLOT 1 & 3 (INNER ADJACENT CARDS - FIXED POSITION) */
.gallery-card.slot-left,
.gallery-card.slot-right {
  width: 230px;
  height: 340px;
  opacity: 0.82;
  filter: brightness(0.75);
  transform: scale(0.85);
  z-index: 5;
  border-color: rgba(255, 255, 255, 0.18);
}

/* SLOT 2 (DEAD CENTER HERO CARD - FIXED DEAD CENTER IN MIDDLE OF SCREEN) */
.gallery-card.slot-center,
.gallery-card.active-center {
  width: 340px;
  height: 460px;
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 50px rgba(229, 9, 20, 0.45), 0 25px 70px rgba(0, 0, 0, 0.85);
}

.card-img-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.6s ease;
}

.gallery-card.slot-center:hover .slot-img {
  transform: scale(1.06);
}

.card-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.95) 100%);
}

.card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-red);
  font-family: var(--font-body);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-body);
  margin: 2px 0 4px 0;
  line-height: 1.25;
}

.gallery-card.active-center .card-title {
  font-size: 22px;
}

.card-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin: 0 0 8px 0;
  display: none;
  font-family: var(--font-body);
}

.gallery-card.active-center .card-desc {
  display: block;
}

.card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 23, 68, 0.18);
  border: 1px solid rgba(255, 23, 68, 0.4);
  color: var(--accent-red);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

/* FLOATING SIDE NAVIGATION ARROWS (LEFT & RIGHT OF GALLERY) */
.gallery-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(12, 12, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-side-btn.side-prev {
  left: 28px;
}

.gallery-side-btn.side-next {
  right: 28px;
}

.gallery-side-btn:hover {
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  border-color: rgba(255, 23, 68, 0.8);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(255, 23, 68, 0.6), 0 12px 35px rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.12);
}

.gallery-side-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

/* CONTROLS & PAGINATION */
.gallery-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
  position: relative;
  z-index: 10;
}

.gallery-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 200ms ease;
}

.gallery-nav-btn:hover {
  background: var(--accent-crimson);
  border-color: var(--accent-red);
  box-shadow: 0 0 20px var(--accent-red-glow);
  transform: scale(1.08);
}

.gallery-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-dot {
  height: 4px;
  width: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 300ms ease;
  cursor: pointer;
}

.pagination-dot.active {
  width: 28px;
  background: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red-glow);
}

/* PLANNING & SCHEDULE SECTION */
.schedule-section {
  padding: 110px 0;
  background: rgba(10, 11, 16, 0.7);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

/* DIRECT PLANNING IMAGE SHOWCASE */
.planning-image-container {
  max-width: 960px;
  margin: 40px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.planning-card-frame {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #0c0c12;
  border: 1px solid rgba(255, 23, 68, 0.45);
  box-shadow: 0 0 50px rgba(255, 23, 68, 0.25), 0 25px 60px rgba(0, 0, 0, 0.85);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.planning-card-frame:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 23, 68, 0.85);
  box-shadow: 0 0 70px rgba(255, 23, 68, 0.45), 0 30px 80px rgba(0, 0, 0, 0.9);
}

.planning-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.planning-download-bar {
  display: flex;
  justify-content: center;
}

.schedule-table th,
.schedule-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light);
}

.schedule-table th {
  background: rgba(255, 23, 68, 0.05);
  font-family: var(--font-body);
  color: var(--accent-red);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.schedule-table tr:last-child td {
  border-bottom: none;
}

.schedule-table tr:hover td {
  background: rgba(255, 23, 68, 0.06);
}

.time-slot {
  font-weight: 700;
  color: var(--accent-red);
  white-space: nowrap;
}

.class-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-white);
}

.class-coach {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.class-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.cat-combat {
  background: rgba(255, 23, 68, 0.18);
  color: #ff5252;
}

.cat-force {
  background: rgba(212, 175, 55, 0.18);
  color: #ffd700;
}

.cat-zen {
  background: rgba(0, 230, 118, 0.18);
  color: #00e676;
}

/* MODAL FOR HIGH-RES PLANNING IMAGE */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 4, 6, 0.94);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.open {
  display: flex;
  opacity: 1;
}

.modal-content {
  position: relative;
  max-width: 1000px;
  width: 100%;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(255, 23, 68, 0.25);
}

.modal-header {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-white);
}

.close-modal {
  color: var(--text-muted);
  font-size: 1.8rem;
  line-height: 1;
  transition: var(--transition-fast);
}

.close-modal:hover {
  color: var(--accent-red);
}

.modal-body {
  padding: 20px;
  text-align: center;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-body img {
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}

/* REDESIGNED PRICING SECTION (PURE CRIMSON RED THEME) */
.pricing-section {
  padding: 120px 0 140px 0;
  position: relative;
  background: #080808;
  overflow: hidden;
}

/* Atmospheric Crimson Red Bottom Radial Glow */
.pricing-bg-gradient {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 75%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 23, 68, 0.65) 0%,
    rgba(180, 0, 30, 0.35) 35%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 1;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 54px;
  position: relative;
  z-index: 2;
}

.pricing-header .badge-tag {
  margin-bottom: 12px;
}

.pricing-header h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: #FFFFFF;
  font-family: var(--font-body);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 16px 0;
}

.pricing-header .katana-divider {
  margin: 14px auto 16px auto;
}

.pricing-header p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 520px;
  font-family: var(--font-body);
}

.pricing-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}

@media (max-width: 992px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* PRICING CARD STYLING */
.pricing-card {
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 23, 68, 0.45);
  border-radius: 30px;
  padding: 38px 24px 28px 24px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  transform: translateY(0);
}

.pricing-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 23, 68, 0.8);
  box-shadow: 0 20px 60px rgba(255, 23, 68, 0.3);
}

/* FEATURED / RECOMMENDED CARD (MIDDLE CARD) */
.pricing-card.featured {
  background: linear-gradient(
    180deg,
    rgba(255, 23, 68, 0.95) 0%,
    rgba(180, 0, 30, 0.65) 18%,
    rgba(15, 15, 15, 0.95) 42%,
    rgba(12, 12, 12, 1) 100%
  );
  transform: translateY(-20px);
}

.pricing-card.featured:hover {
  transform: translateY(-26px);
  box-shadow: 0 24px 70px rgba(255, 23, 68, 0.5);
}

.plan-name {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.plan-name .editorial-word {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-red);
}

.plan-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin-bottom: 20px;
  min-height: 40px;
  font-family: var(--font-body);
}

/* Pricing Badges */
.pricing-badge-popular {
  position: absolute;
  top: 18px;
  right: 20px;
  background: linear-gradient(90deg, #ff1744, #d50000);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.7);
  z-index: 2;
}

.pricing-badge-value {
  position: absolute;
  top: 18px;
  right: 20px;
  background: linear-gradient(90deg, #d4af37, #b8860b);
  color: #000000;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  z-index: 2;
}

.pricing-badge-offpeak {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 23, 68, 0.15);
  border: 1px solid rgba(255, 23, 68, 0.4);
  color: var(--accent-red);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* Pricing Display Box (Headline & Bottom Encadré) */
.plan-price {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  line-height: 1.1;
}

.price-period {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

.old-strikethrough-price {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
  letter-spacing: 0.3px;
}

/* Encadré séparé bas de carte (Bouton d'Action Interactif) */
.pricing-payment-box {
  width: 100%;
  background: linear-gradient(135deg, rgba(30, 32, 42, 0.7) 0%, rgba(18, 19, 26, 0.95) 100%);
  border: 1px solid rgba(255, 23, 68, 0.35);
  border-radius: 18px;
  padding: 14px 20px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  text-align: left;
}

.pricing-payment-box:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.2) 0%, rgba(180, 0, 30, 0.45) 100%);
  border-color: var(--accent-red);
  box-shadow: 0 0 28px rgba(255, 23, 68, 0.5);
}

.pricing-card.featured .pricing-payment-box {
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.35) 0%, rgba(110, 0, 20, 0.75) 100%);
  border-color: rgba(255, 23, 68, 0.6);
}

.pricing-card.featured .pricing-payment-box:hover {
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.55) 0%, rgba(190, 0, 35, 0.9) 100%);
  border-color: #ff5252;
  box-shadow: 0 0 35px rgba(255, 23, 68, 0.75);
}

.payment-final-price {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-arrow-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  transition: transform 0.25s ease, background 0.25s ease;
}

.pricing-payment-box:hover .payment-arrow-badge {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.35);
  border-color: #ffffff;
}

.promo-badge-pill {
  font-size: 10px;
  font-weight: 800;
  color: #ff1744;
  background: rgba(255, 23, 68, 0.15);
  border: 1px solid rgba(255, 23, 68, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.monthly-equivalent {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 14px;
  margin-top: 6px;
}

.highlight-monthly {
  color: #ff1744;
  font-weight: 700;
}

.price-period {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

.card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 20px 0;
}

.features-header {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
  font-family: var(--font-body);
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
}

.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 23, 68, 0.2);
  border: 1px solid rgba(255, 23, 68, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.check-icon.cross-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.disabled-feature {
  color: rgba(255, 255, 255, 0.45) !important;
}

.text-muted-feature {
  color: rgba(255, 255, 255, 0.45);
}

/* HORIZONTAL PRICING CARD (4TH PASS OFF-PEAK CARD OPTIMIZED FOR HIGH VISIBILITY) */
.pricing-horizontal-card {
  width: 100%;
  margin-top: 36px;
  background: rgba(24, 26, 36, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 23, 68, 0.65);
  border-radius: 24px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 23, 68, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.pricing-horizontal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 23, 68, 0.9);
  background: rgba(28, 30, 42, 0.98);
  box-shadow: 0 20px 60px rgba(255, 23, 68, 0.4);
}

.horizontal-card-left {
  flex: 1;
  max-width: 320px;
}

.horizontal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #ff1744;
  background: rgba(255, 23, 68, 0.18);
  border: 1px solid rgba(255, 23, 68, 0.45);
  padding: 4px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.horizontal-badge svg, .horizontal-badge i {
  width: 13px;
  height: 13px;
  color: #ff1744;
}

.horizontal-card-middle {
  flex: 1.5;
  border-left: 1px solid rgba(255, 23, 68, 0.25);
  border-right: 1px solid rgba(255, 23, 68, 0.25);
  padding: 0 32px;
}

.horizontal-features-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}

.horizontal-features-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
}

.horizontal-card-right {
  flex-shrink: 0;
}

.horizontal-pay-btn {
  height: 52px;
  padding: 0 8px 0 24px;
}

.pay-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
}

.pay-btn-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pay-btn-sub {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .pricing-horizontal-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }

  .horizontal-card-left {
    max-width: 100%;
  }

  .horizontal-card-middle {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    width: 100%;
  }

  .horizontal-features-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .horizontal-card-right {
    width: 100%;
  }

  .horizontal-card-right .horizontal-pay-btn {
    width: 100%;
  }
}

/* BOTTOM CONSULTATION CTA AREA */
.pricing-bottom-cta {
  margin-top: 110px;
  text-align: center;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-cta-title {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  font-family: var(--font-body);
  letter-spacing: -0.5px;
}

.bottom-cta-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 28px;
  font-family: var(--font-body);
}

.bottom-coach-btn {
  height: 48px;
  padding: 0 32px;
  border-radius: 25px;
  background: #FFFFFF;
  color: #000000;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(255, 23, 68, 0.4);
  transition: transform 200ms ease, box-shadow 200ms ease;
  font-family: var(--font-body);
}

.bottom-coach-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 23, 68, 0.6);
}

.bottom-coach-btn .btn-arrow {
  transition: transform 200ms ease;
}

.bottom-coach-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* DOWNLOAD APP SECTION (REDESIGNED FROM REFERENCE IMAGE) */
.app-download-section {
  padding: 100px 0 120px 0;
  min-height: 750px;
  position: relative;
  background: #050507;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Crimson Atmospheric Radial Background Glow */
.app-bg-glow {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1000px;
  height: 500px;
  background: radial-gradient(
    ellipse at center 40% 45%,
    rgba(210, 20, 30, 0.35) 0%,
    rgba(120, 10, 15, 0.18) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* Vertical Soft Light Beams */
.light-beams-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 60%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}

.light-beam {
  width: 70px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(229, 9, 20, 0.45) 40%, rgba(180, 0, 30, 0.25) 75%, transparent 100%);
  filter: blur(25px);
}

/* 3D SMARTPHONE SHOWCASE COMPOSITION */
.phone-showcase-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  height: 440px;
}

.phone-mockup {
  position: absolute;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease;
  will-change: transform;
}

/* CENTER PHONE (MAIN FOCAL POINT) */
.phone-mockup.phone-center {
  width: 210px;
  height: 430px;
  z-index: 3;
  transform: scale(1) translateY(0);
  animation: phoneFloatCenter 4s ease-in-out infinite alternate;
}

/* LEFT PHONE */
.phone-mockup.phone-left {
  width: 175px;
  height: 360px;
  z-index: 2;
  transform: translateX(-150px) scale(0.86) rotate(-8deg);
  animation: phoneFloatLeft 4.5s ease-in-out infinite alternate;
}

/* RIGHT PHONE */
.phone-mockup.phone-right {
  width: 175px;
  height: 360px;
  z-index: 2;
  transform: translateX(150px) scale(0.86) rotate(8deg);
  animation: phoneFloatRight 4.2s ease-in-out infinite alternate;
}

/* PHONE FRAME & SCREEN */
.phone-frame {
  width: 100%;
  height: 100%;
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
  position: relative;
  overflow: hidden;
}


.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 14px;
  background: #000000;
  border-radius: 10px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #08080c;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.screen-overlay-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.screen-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.65);
}

.screen-badge.red-badge {
  color: var(--accent-red);
}

.screen-overlay-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* FLOAT ANIMATIONS */
@keyframes phoneFloatCenter {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(-8px); }
}

@keyframes phoneFloatLeft {
  0% { transform: translateX(-150px) scale(0.86) rotate(-8deg) translateY(0); }
  100% { transform: translateX(-150px) scale(0.86) rotate(-8deg) translateY(-10px); }
}

@keyframes phoneFloatRight {
  0% { transform: translateX(150px) scale(0.86) rotate(8deg) translateY(0); }
  100% { transform: translateX(150px) scale(0.86) rotate(8deg) translateY(-10px); }
}

/* CENTERED CONTENT AREA */
.app-content-centered {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-headline {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 16px 0;
  font-family: var(--font-body);
}

.text-red {
  color: #E50914;
}

.app-description {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  max-width: 520px;
  margin: 0 0 32px 0;
  font-family: var(--font-body);
}

/* DOWNLOAD BUTTONS GROUP */
.download-buttons-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.store-card-btn {
  width: 170px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  transition: all 250ms ease;
}

.store-card-btn:hover {
  border-color: rgba(229, 9, 20, 0.65);
  box-shadow: 0 8px 25px rgba(229, 9, 20, 0.22);
  transform: translateY(-2px);
}

.store-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.store-label-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

.store-main {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.qr-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.qr-code-pill svg {
  width: 14px;
  height: 14px;
  color: var(--accent-red);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* CONTACT, HOURS & MAP SECTION */
.contact-section {
  padding: 110px 0;
  position: relative;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}

.info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-group {
  margin-bottom: 28px;
}

.info-group:last-child {
  margin-bottom: 0;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-red);
  margin-bottom: 12px;
}

.info-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent-red);
}

.info-text p {
  color: var(--text-body);
  font-size: 0.95rem;
}

.hours-badge {
  display: inline-block;
  background: rgba(255, 23, 68, 0.15);
  border: 1px solid var(--border-red);
  color: var(--accent-red);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.contact-form-wrapper {
  background: rgba(18, 18, 26, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 23, 68, 0.35);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.contact-form-title {
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.contact-form-title svg, .contact-form-title i {
  width: 22px;
  height: 22px;
  color: #ff1744;
  background: rgba(255, 23, 68, 0.15);
  border: 1px solid rgba(255, 23, 68, 0.35);
  padding: 6px;
  border-radius: 10px;
  box-sizing: content-box;
}

.contact-form-wrapper .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.contact-form-wrapper .form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-form-wrapper .form-group label svg,
.contact-form-wrapper .form-group label i {
  width: 14px;
  height: 14px;
  color: var(--accent-red);
}

.contact-form-wrapper .form-group input,
.contact-form-wrapper .form-group select,
.contact-form-wrapper .form-group textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(10, 11, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.contact-form-wrapper .form-group input:hover,
.contact-form-wrapper .form-group select:hover,
.contact-form-wrapper .form-group textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.contact-form-wrapper .form-group input:focus,
.contact-form-wrapper .form-group select:focus,
.contact-form-wrapper .form-group textarea:focus {
  outline: none;
  border-color: rgba(255, 23, 68, 0.85);
  background: rgba(14, 15, 22, 0.95);
  box-shadow: 0 0 25px rgba(255, 23, 68, 0.25), inset 0 0 10px rgba(255, 23, 68, 0.08);
}

.contact-form-wrapper .form-group select option {
  background: #0f1016;
  color: #ffffff;
  padding: 10px;
}

/* STYLIZED DARK MAP CARD */
.map-card {
  margin-top: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 320px;
  position: relative;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d0e14 0%, #060608 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 23, 68, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
}

.map-pin {
  position: relative;
  z-index: 2;
  text-align: center;
}

.map-pin-pulse {
  width: 50px;
  height: 50px;
  background: rgba(255, 23, 68, 0.2);
  border: 2px solid var(--accent-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  box-shadow: 0 0 20px var(--accent-red-glow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 15px rgba(255, 23, 68, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0);
  }
}

.map-pin-pulse svg {
  width: 24px;
  height: 24px;
  color: var(--accent-red);
}

.map-card-info {
  background: rgba(7, 7, 9, 0.9);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-red);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
}

/* FOOTER */
.footer {
  background: #040405;
  border-top: 1px solid var(--border-light);
  padding: 80px 0 30px 0;
  position: relative;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-about p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 16px 0 24px 0;
  max-width: 320px;
}

.footer-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-red);
  padding-left: 4px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  transition: var(--transition-fast);
}

.social-icon:hover {
  background: var(--accent-crimson);
  color: var(--text-white);
  border-color: var(--accent-red);
  transform: translateY(-3px);
  box-shadow: 0 0 15px var(--accent-red-glow);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.samurai-quote {
  font-family: var(--font-jp);
  color: var(--accent-red);
  font-style: italic;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .app-wrapper {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-card.featured {
    transform: translateY(0);
  }

  .pricing-card.featured:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 768px) {
  .gym-navbar {
    padding: 16px 20px;
  }

  .brand-logo-img {
    height: 52px;
  }

  .gym-navbar .nav-links {
    display: none;
  }

  .nav-auth {
    display: none;
  }

  .hero-content-wrapper {
    left: 5vw;
    top: 5vh;
    max-width: 90vw;
  }

  .hero-headline {
    font-size: 38px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: translateY(0);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .brand-logo-img {
    height: 42px;
  }
}

/* PARTNERS SECTION (NOS PARTENAIRES) */
.partners-section {
  padding: 90px 0;
  background: linear-gradient(180deg, #050507 0%, #0c0c12 50%, #050507 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.partners-title {
  font-family: var(--font-body);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 16px 0;
}

.partners-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 580px;
  margin: 0 auto 45px auto;
  font-family: var(--font-body);
}

.partners-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.partner-card {
  background: rgba(18, 18, 24, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 24px 44px;
  min-width: 240px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  transition: all 0.35s ease;
}

.partner-card:hover {
  border-color: rgba(255, 23, 68, 0.65);
  background: rgba(24, 24, 32, 0.9);
  box-shadow: 0 15px 45px rgba(255, 23, 68, 0.3);
  transform: translateY(-5px);
}

.partner-logo-img {
  max-height: 75px;
  max-width: 190px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(1) contrast(1.05);
  transition: all 0.35s ease;
}

.partner-logo-gsn {
  transform: scale(2.2);
}

.partner-card:hover .partner-logo-img {
  filter: brightness(1.15) contrast(1.1) drop-shadow(0 0 20px rgba(255, 23, 68, 0.6));
  transform: scale(1.06);
}

.partner-card:hover .partner-logo-gsn {
  filter: brightness(1.15) contrast(1.1) drop-shadow(0 0 20px rgba(255, 23, 68, 0.6));
  transform: scale(2.35);
}

@media (max-width: 600px) {
  .partners-grid {
    gap: 16px;
  }
  
  .partner-card {
    min-width: 140px;
    padding: 16px 20px;
    min-height: 90px;
  }
  
  .partner-logo-img {
    max-height: 50px;
    max-width: 140px;
  }
}

/* ==========================================================================
/* ==========================================================================
   PREMIUM FULL-WIDTH FOOTER SECTION
   ========================================================================== */
.premium-footer-section {
  padding: 0;
  background: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.footer-outer-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
}

/* FULL-WIDTH PANEL CONTAINER */
.footer-card-panel {
  background: #050505;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  padding: 35px 40px 0 40px;
  max-width: 1350px;
  margin: 0 auto;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* TOP LIGHT & ATMOSPHERIC GLOW */
.footer-top-glow-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 23, 68, 0.25) 50%, transparent 100%);
  pointer-events: none;
}

.footer-ambient-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 280px;
  background: radial-gradient(ellipse at center bottom, rgba(229, 9, 20, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* 1. TOP MULTI-COLUMN CONTENT ROW */
.footer-top-content {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 36px;
  position: relative;
  z-index: 5;
  margin-bottom: 30px;
}

/* BRAND COLUMN */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-logo-img {
  height: clamp(40px, 4vw, 56px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 23, 68, 0.4));
}

.footer-brand-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 250px;
  margin: 0;
}

.footer-cta-wrapper {
  margin-top: 6px;
}

.footer-sub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E50914;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
  transition: all 0.3s ease;
}

.footer-sub-cta:hover {
  background: #ff1744;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 23, 68, 0.6);
}

.footer-sub-cta svg {
  width: 13px;
  height: 13px;
}

/* NAVIGATION COLUMNS */
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
  text-transform: capitalize;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list a {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  transition: color 200ms ease;
  line-height: 1.4;
}

.footer-links-list a:hover {
  color: #E50914;
}

.social-link-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.social-link-item svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 200ms ease;
}

.social-link-item:hover svg {
  color: #E50914;
}

/* DEDICATED BOTTOM STRIP BANNER (BANDE EN BAS AFTER FOOTER) */
.footer-bottom-strip-banner {
  width: 100%;
  background: #020204;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  position: relative;
  z-index: 10;
}

.footer-bottom-banner-container {
  max-width: 1350px;
  width: calc(100% - 80px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copyright-left,
.copyright-right {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
}

/* 3. MASSIVE CROPPED BRAND WORDMARK (THE HERO ELEMENT) */
.footer-wordmark-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-bottom: -0.22em; /* Partially cropped at bottom like CONVERTO reference */
  user-select: none;
  pointer-events: none;
}

.footer-giant-wordmark {
  font-family: var(--font-body);
  font-size: clamp(80px, 15vw, 195px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.05em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-transform: uppercase;
  
  /* RED GRADIENT TEXT TREATMENT */
  background: linear-gradient(
    90deg,
    rgba(80, 5, 8, 0.3) 0%,
    #E50914 30%,
    #FF3038 50%,
    #E50914 70%,
    rgba(80, 5, 8, 0.3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  opacity: 0.8;
  filter: drop-shadow(0 0 35px rgba(229, 9, 20, 0.22));
  transition: opacity 0.5s ease;
}

/* RESPONSIVE MOBILE */
@media (max-width: 992px) {
  .footer-card-panel {
    padding: 40px 30px 0 30px;
  }

  .footer-top-content {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-col-brand {
    grid-column: span 2;
  }

  .footer-giant-wordmark {
    font-size: clamp(65px, 16vw, 120px);
  }
}

@media (max-width: 600px) {
  .footer-outer-wrapper {
    width: calc(100% - 24px);
  }

  .footer-card-panel {
    padding: 30px 20px 0 20px;
    border-radius: 20px;
  }

  .footer-top-content {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .footer-col-brand {
    grid-column: span 2;
    margin-bottom: 10px;
  }

  .footer-copyright-row {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .footer-giant-wordmark {
    font-size: clamp(50px, 17vw, 90px);
    letter-spacing: -0.03em;
  }
}

/* ==========================================================================
   NOUS TROUVER / INTERACTIVE DARK MAP SECTION (LEAFLET + CARTODB DARK MATTER)
   ========================================================================== */
.find-us-section {
  padding: 90px 0 100px 0;
  background: #050507;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.find-us-title {
  font-family: var(--font-body);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 16px 0;
}

.find-us-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 580px;
  margin: 0 auto 40px auto;
  font-family: var(--font-body);
}

.interactive-map-wrapper {
  max-width: 1300px;
  width: calc(100% - 48px);
  margin: 0 auto;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 23, 68, 0.35);
  box-shadow: 0 0 50px rgba(255, 23, 68, 0.2), 0 30px 80px rgba(0, 0, 0, 0.85);
}

.clickable-map-container {
  display: block;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 23, 68, 0.4);
  box-shadow: 0 0 50px rgba(255, 23, 68, 0.2), 0 30px 80px rgba(0, 0, 0, 0.85);
  transition: all 0.35s ease;
  text-decoration: none;
}

.clickable-map-container:hover {
  border-color: rgba(255, 23, 68, 0.8);
  box-shadow: 0 0 60px rgba(255, 23, 68, 0.4), 0 35px 90px rgba(0, 0, 0, 0.9);
  transform: translateY(-4px);
}

.map-open-banner {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(10, 11, 15, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 23, 68, 0.45);
  padding: 18px 28px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.map-open-info {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #ffffff;
  text-align: left;
}

.map-open-info .map-pin-icon {
  width: 28px;
  height: 28px;
  color: var(--accent-red);
}

.map-open-info strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.map-open-info span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 768px) {
  .map-open-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 16px;
  }

  .map-open-info {
    justify-content: center;
    text-align: center;
  }
}

.tokyo-dark-map {
  width: 100%;
  height: 650px;
  background: #09090d;
}

/* MAP SEAMLESS BLACK GRADIENT OVERLAYS (TOP & BOTTOM BLEND) */
.map-top-blend-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, #050507 0%, transparent 100%);
  pointer-events: none;
  z-index: 500;
}

.map-bottom-blend-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to top, #050507 0%, transparent 100%);
  pointer-events: none;
  z-index: 500;
}

/* FLOATING BOTTOM-LEFT INFO CARD OVERLAY */
.map-floating-info-card {
  position: absolute;
  bottom: 28px;
  left: 28px;
  z-index: 1000;
  background: rgba(12, 12, 18, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 23, 68, 0.4);
  border-radius: 22px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 230px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 23, 68, 0.15);
  transition: all 0.3s ease;
}

.map-floating-info-card:hover {
  border-color: rgba(255, 23, 68, 0.7);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 23, 68, 0.3);
  transform: translateY(-3px);
}

.card-brand-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-gym-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.8px;
  margin: 0;
  text-transform: uppercase;
}

.card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.card-location svg {
  width: 13px;
  height: 13px;
  color: #ff1744;
}

.card-hours-status {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 10px #00e676;
  flex-shrink: 0;
}

.hours-info {
  display: flex;
  flex-direction: column;
}

.status-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hours-time {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.map-direction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(255, 23, 68, 0.4);
  transition: all 0.3s ease;
}

.map-direction-btn:hover {
  background: linear-gradient(135deg, #ff3038 0%, #e50914 100%);
  box-shadow: 0 6px 22px rgba(255, 23, 68, 0.6);
  transform: translateY(-2px);
}

.map-direction-btn svg {
  width: 14px;
  height: 14px;
}

/* MAP ROUTE INFOBOX OVERLAY */
.map-route-infobox {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1000;
  background: rgba(12, 12, 18, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.route-eta-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.5);
}

.route-eta-badge svg {
  width: 14px;
  height: 14px;
}

.route-dist {
  opacity: 0.85;
  font-weight: 500;
}

.route-dest-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.route-dest-text strong {
  font-size: 13px;
  color: #ffffff;
}

.route-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* CUSTOM MAP MARKERS & POPUP */
.custom-gym-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gym-pin-pulse {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff1744 0%, #900015 100%);
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 25px rgba(255, 23, 68, 0.8);
  animation: mapPinPulse 2s infinite ease-in-out;
}

@keyframes mapPinPulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 23, 68, 0.7); }
  50% { transform: scale(1.15); box-shadow: 0 0 40px rgba(255, 23, 68, 0.95); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 23, 68, 0.7); }
}

.custom-start-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-arrow-pulse {
  color: #ffffff;
  background: #ff1744;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.8);
}

.leaflet-popup-content-wrapper {
  background: rgba(12, 12, 18, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 23, 68, 0.5) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

.leaflet-popup-tip {
  background: rgba(12, 12, 18, 0.95) !important;
}

.map-popup-card {
  padding: 4px 6px;
  font-family: var(--font-body);
}

.map-popup-card strong {
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

.map-popup-card p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px 0;
}

.popup-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #ff1744;
  background: rgba(255, 23, 68, 0.15);
  padding: 3px 8px;
  border-radius: 10px;
}

/* LEAFLET CONTROLS DARK OVERRIDE */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background-color: rgba(18, 18, 24, 0.9) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background-color: #ff1744 !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .tokyo-dark-map {
    height: 500px;
  }
  
  .interactive-map-wrapper {
    width: calc(100% - 24px);
  }
  
  .map-route-infobox {
    top: 14px;
    left: 14px;
    padding: 10px 14px;
  }
}

/* ==========================================================================
   TRIAL SESSION SECTION & POPUP MODAL STYLES
   ========================================================================== */

/* Trial Banner Section */
.trial-banner-section {
  padding: 40px 0;
  position: relative;
  z-index: 10;
}

.trial-banner-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 21, 28, 0.95) 0%, rgba(10, 11, 15, 0.98) 100%);
  border: 1px solid rgba(255, 23, 68, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.trial-banner-card:hover {
  border-color: rgba(255, 23, 68, 0.6);
  box-shadow: 0 15px 50px rgba(255, 23, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.trial-banner-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 23, 68, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.trial-banner-content {
  flex: 1;
  max-width: 720px;
}

.trial-banner-content h2 {
  font-family: var(--font-body);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 12px 0 12px 0;
}

.trial-banner-content p {
  color: var(--text-body);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.trial-banner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #e0e2ec;
}

.pill-feature svg, .pill-feature i {
  width: 14px;
  height: 14px;
  color: var(--accent-red);
}

.trial-banner-cta {
  flex-shrink: 0;
}

.trial-banner-cta button {
  padding: 16px 28px;
  font-size: 1rem;
}

@media (max-width: 992px) {
  .trial-banner-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .trial-banner-badges {
    justify-content: center;
  }
  .trial-banner-cta {
    width: 100%;
  }
  .trial-banner-cta button {
    width: 100%;
    justify-content: center;
  }
}

/* Modal Overlay & Dialog */
.trial-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(4, 4, 6, 0.85);
  backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.trial-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.trial-modal-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0e14;
  border: 1px solid rgba(255, 23, 68, 0.35);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 23, 68, 0.2);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.trial-modal-overlay.active .trial-modal-card {
  transform: scale(1) translateY(0);
}

.trial-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.trial-modal-close:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
}

.trial-modal-header {
  margin-bottom: 24px;
}

.trial-modal-header h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 10px 0 6px 0;
}

.trial-modal-header p {
  color: var(--text-body);
  font-size: 0.9rem;
}

/* Modal Form Controls */
.trial-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #cfd3e0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group label svg, .form-group label i {
  width: 14px;
  height: 14px;
  color: var(--accent-red);
}

.required-star {
  color: var(--accent-red);
  font-weight: bold;
}

.trial-form input[type="text"],
.trial-form input[type="email"],
.trial-form input[type="date"],
.trial-form input[type="tel"],
.trial-form select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.trial-form input:focus,
.trial-form select:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.trial-form select option {
  background-color: #12131a;
  color: #ffffff;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Payment Method Radio Cards */
.payment-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 540px) {
  .payment-options-grid {
    grid-template-columns: 1fr;
  }
}

.payment-option {
  cursor: pointer;
}

.payment-option input {
  display: none;
}

.payment-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-body);
  transition: all var(--transition-fast);
}

.payment-box svg, .payment-box i {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.payment-option input:checked + .payment-box {
  background: rgba(255, 23, 68, 0.12);
  border-color: var(--accent-red);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.25);
}

.payment-option input:checked + .payment-box svg,
.payment-option input:checked + .payment-box i {
  color: var(--accent-red);
}

.btn-full-width {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  padding: 14px;
}

/* Success State Box */
.trial-success-box {
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.success-icon-pulse {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px auto;
  border-radius: 50%;
  background: rgba(255, 23, 68, 0.15);
  border: 1px solid var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(255, 23, 68, 0.4);
}

.success-icon-pulse svg, .success-icon-pulse i {
  width: 36px;
  height: 36px;
  color: var(--accent-red);
}

.trial-success-box h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.trial-success-box .success-desc {
  color: var(--text-body);
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.success-alert-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 23, 68, 0.08);
  border: 1px dashed rgba(255, 23, 68, 0.4);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-align: left;
  margin-bottom: 24px;
}

.success-alert-card svg, .success-alert-card i {
  width: 22px;
  height: 22px;
  color: var(--accent-red);
  flex-shrink: 0;
  margin-top: 2px;
}

.success-alert-card span {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #ffffff;
}

/* ==========================================================================
   TOKYO GYM SIGNATURE PRIMARY BUTTON STYLE (.btn-tokyo-primary)
   ========================================================================== */
.btn-tokyo-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  padding: 0 8px 0 24px;
  border-radius: 25px;
  background: linear-gradient(90deg, #7C1018 0%, #e60026 50%, #ff1744 100%);
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 23, 68, 0.65);
  box-shadow: 0 0 25px rgba(255, 23, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

.btn-tokyo-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #96131d 0%, #ff002b 50%, #ff2e58 100%);
  box-shadow: 0 0 35px rgba(255, 23, 68, 0.75), 0 8px 24px rgba(0, 0, 0, 0.5);
  border-color: #ff5252;
}

.btn-tokyo-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.4);
}

.btn-tokyo-primary .btn-arrow-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.btn-tokyo-primary .btn-arrow-badge svg,
.btn-tokyo-primary .btn-arrow-badge i {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

.btn-tokyo-primary:hover .btn-arrow-badge {
  transform: translateX(3px) scale(1.05);
  background: rgba(255, 255, 255, 0.3);
  border-color: #ffffff;
}

/* Full Width Variant */
.btn-full-width.btn-tokyo-primary {
  width: 100%;
  margin-top: 8px;
}
/* ── Message d'erreur d'envoi de formulaire (essai / abonnement / contact) ──
   Affiché par wireLeadForm() dans js/main.js quand l'API refuse la demande :
   le formulaire reste rempli pour que le visiteur puisse retenter. */
.form-error-message {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(220, 38, 38, 0.55);
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.09);
  color: #fca5a5;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── Consigne de paiement de l'écran de confirmation ──────────────────────
   La consigne saisie dans l'admin (adresse du club, coordonnées bancaires…)
   n'apparaît QU'APRÈS l'envoi, sur l'écran de confirmation — plus à côté des
   boutons de paiement, où elle allongeait le formulaire.
   `pre-line` : le texte est multi-ligne (une adresse), et sans cette règle le
   HTML écrasait les retours à la ligne en une seule phrase. */
#sub-success-message {
  white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL — contenu centré, titre au fil du texte, séparateur incliné
   ═══════════════════════════════════════════════════════════════════════ */

/* Le bloc titre + description + bouton était collé à gauche (left: 7.5vw).
   On le recentre horizontalement dans la section. */
.hero-content-wrapper {
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
  padding-left: 24px;
  padding-right: 24px;
  align-items: center;
  text-align: center;
}

.hero-badges-wrapper {
  align-items: center;
}

.hero-description {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Le titre redevient du texte qui coule. En flex, `gap: 12px` s'ajoutait à
   l'espace déjà présent dans le texte entre la phrase et le mot en rouge —
   d'où le gros blanc visible dès qu'on changeait le titre depuis l'admin.
   `flex-wrap: nowrap` faisait en plus déborder un titre un peu long. */
.headline-line {
  display: block;
  gap: 0;
}

.headline-line .text-red-neon {
  /* L'espace vient du texte lui-même ; pas de marge qui le doublerait. */
  margin: 0;
}

@media (max-width: 768px) {
  .hero-content-wrapper {
    left: 0;
    max-width: 100%;
  }
}

/* Séparateur HORIZONTAL (desktop). Auparavant vertical puis incliné : la barre
   traverse désormais la largeur, et la découpe révèle la photo du dessus par le
   haut — même géométrie que sur mobile, où le balayage est automatique. */
@media (min-width: 769px) {
  .hero-split-line {
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(255, 23, 68, 0.4) 0%,
        #ff1744 50%,
        rgba(255, 23, 68, 0.4) 100%);
  }

  .split-line-handle {
    transform: translate(-50%, -50%);
  }

  /* Découpe par défaut avant tout mouvement de souris. */
  .hero-masked-layer {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
}

/* Le voile noir qui assombrissait la moitié gauche de l'accueil est retiré :
   la photo est visible en entier. Le texte n'a plus ce fond sombre pour
   ressortir, on lui donne donc une ombre portée — sans quoi il devient
   illisible sur les zones claires de l'image. */
.hero-left-gradient {
  display: none;
}

.hero-content-wrapper {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* La flèche animée était collée au bouton rouge : on la descend pour dégager
   un peu d'air entre les deux.
   Elle est aussi RECENTRÉE autrement : le centrage d'origine reposait sur
   `left: 50%` + `translateX(-50%)`, or l'animation `heroFadeUp` se termine sur
   `transform: translateY(0)` et, en `forwards`, écrase définitivement ce
   `translateX`. La flèche démarrait donc AU centre au lieu d'être centrée
   dessus, décalée vers la droite de la moitié de sa largeur (28 px sur mobile).
   On ne peut pas corriger les images-clés : elles servent aussi au titre, à la
   description et au bouton, qui ne sont pas centrés en absolu. D'où un centrage
   purement géométrique, insensible au `transform`. */
.hero-scroll-indicator {
  bottom: 42px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  /* On neutralise le `translateX(-50%)` de la règle d'origine : le centrage est
     désormais géométrique. Le garder faisait cohabiter DEUX centrages, et la
     flèche sautait de 28 px selon que l'animation écrasait ou non `transform`
     — décalée à gauche pendant l'attente, correcte une fois l'animation finie. */
  transform: none;
}

/* Les éléments de l'accueil s'animaient en `forwards` avec un délai. Or
   `forwards` ne remplit QUE l'après-animation : pendant le délai (0,1 s à
   0,8 s), l'élément restait affiché dans son état final, puis basculait d'un
   coup sur l'image-clé 0 % (invisible, décalé de 18 px) pour se rejouer.
   D'où le « la page s'affiche bien, puis un autre style s'applique » — très
   visible sur la flèche, qui a le plus long délai.
   `both` remplit aussi l'AVANT : l'élément part de l'état initial et ne fait
   plus qu'entrer, sans clignotement ni saut. */
.gym-navbar,
.hero-rating,
.hero-metrics,
.hero-headline,
.hero-description,
.hero-cta-group,
.hero-badges-wrapper,
.hero-scroll-indicator {
  animation-fill-mode: both;
}

/* ═══════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE DATE DE NAISSANCE (année → mois → jour) — js/tokyo-dob.js
   ═══════════════════════════════════════════════════════════════════════ */

.dob-picker {
  position: relative;
}

/* Invisible mais TOUJOURS rendu : un champ `required` en display:none
   bloquerait l'envoi du formulaire sans message visible. */
.dob-native-input {
  position: absolute;
  left: 14px;
  bottom: 6px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.dob-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dob-trigger:hover {
  border-color: rgba(255, 23, 68, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.dob-picker.open .dob-trigger {
  border-color: #ff1744;
  box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.12);
}

.dob-picker.has-value .dob-trigger {
  color: #ffffff;
  border-color: rgba(255, 23, 68, 0.45);
}

.dob-trigger-icon {
  display: flex;
  color: #ff1744;
  flex-shrink: 0;
}

.dob-trigger-icon svg {
  width: 18px;
  height: 18px;
}

.dob-panel {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #101015;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  animation: dobPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dobPanelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dob-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.dob-back,
.dob-close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dob-back:hover,
.dob-close:hover {
  color: #ffffff;
  border-color: #ff1744;
}

.dob-close {
  margin-left: auto;
}

.dob-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dob-step {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease;
}

.dob-step + .dob-step::before {
  content: '›';
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.2);
}

.dob-step.done { color: rgba(255, 255, 255, 0.55); }
.dob-step.active { color: #ff1744; font-weight: 700; }

.dob-stage {
  position: relative;
  overflow: hidden;
}

.dob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px;
  max-height: 230px;
  overflow-y: auto;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glissement : vers la gauche en avançant, vers la droite en revenant. */
.dob-enter-right { opacity: 0; transform: translateX(18px); }
.dob-enter-left  { opacity: 0; transform: translateX(-18px); }
.dob-grid.dob-enter-active { opacity: 1; transform: translateX(0); }

.dob-cell {
  padding: 9px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dob-cell:hover {
  background: rgba(255, 23, 68, 0.14);
  border-color: rgba(255, 23, 68, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

.dob-cell.selected {
  background: #ff1744;
  border-color: #ff1744;
  color: #ffffff;
  font-weight: 700;
}

/* Les mois tiennent mal sur 4 colonnes : on passe à 3. */
.dob-grid:has(.dob-cell-month) { grid-template-columns: repeat(3, 1fr); }
/* Les jours sont courts : 7 colonnes, comme un calendrier. */
.dob-grid:has(.dob-cell-day) { grid-template-columns: repeat(7, 1fr); }

@media (max-width: 480px) {
  .dob-grid { grid-template-columns: repeat(3, 1fr); }
  .dob-grid:has(.dob-cell-day) { grid-template-columns: repeat(6, 1fr); }
}

/* ── Mobile : balayage automatique du séparateur ──────────────────────────
   Sur mobile il n'y a pas de survol, et personne ne devine qu'il faut faire
   glisser le doigt : la comparaison des deux photos restait invisible. La
   barre descend donc toute seule de haut en bas puis remonte, en boucle.
   Une animation CSS l'emporte sur les styles en ligne posés par main.js —
   c'est voulu ici, le balayage n'attend aucune interaction. */
@media (max-width: 768px) {
  .hero-masked-layer {
    animation: heroSweepReveal 7s ease-in-out infinite;
  }

  /* La vraie barre est inutilisable ici : `.hero-slide` a une `opacity`, donc
     un contexte d'empilement — son `z-index: 10` reste PRISONNIER de la
     diapositive (z-index 1) et les voiles dégradés (z-index 2) la recouvrent.
     Sur mobile le voile est quasi opaque : on ne voyait rien bouger. */
  .hero-split-line {
    display: none;
  }

  /* On redessine donc la barre en pseudo-élément du fond, au-dessus des
     voiles, animée par les mêmes images-clés que la découpe de la photo. */
  .hero-background::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255, 23, 68, 0.4) 0%,
        #ff1744 50%,
        rgba(255, 23, 68, 0.4) 100%);
    box-shadow: 0 0 16px rgba(255, 23, 68, 0.9), 0 0 35px rgba(255, 23, 68, 0.6);
    z-index: 3;
    pointer-events: none;
    animation: heroSweepLine 7s ease-in-out infinite;
  }
}

@keyframes heroSweepReveal {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 6%, 0 6%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 6%, 0 6%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 94%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 94%);
  }
}

@keyframes heroSweepLine {
  0%, 100% { top: 6%; }
  50% { top: 94%; }
}

/* Mouvement réduit demandé par le système : on fige la comparaison au milieu. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero-masked-layer,
  .hero-background::after {
    animation: none;
  }

  .hero-background::after {
    top: 50%;
  }
}

/* ── Carte Google en mode sombre ──────────────────────────────────────────
   L'API « Maps Embed » (l'iframe /maps/embed?pb=…) n'expose aucun paramètre
   de style : impossible de lui demander un fond sombre. On inverse donc la
   luminosité côté navigateur et on remet les teintes d'aplomb d'un demi-tour
   de roue chromatique — recette classique qui donne une carte sombre
   cohérente avec le reste du site, sans clé d'API.
   (Un vrai thème sombre natif demanderait l'API JavaScript Maps + une clé
   facturée ; à faire si le rendu filtré ne suffit pas.) */
.interactive-map-wrapper iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) saturate(0.75) contrast(0.92) brightness(0.95);
}

@media (max-width: 768px) {
  .interactive-map-wrapper iframe {
    height: 320px;
  }
}