/* ==========================================================================
   GYMOUV — SYSTÈME UNIFIÉ DE HERO (5 VARIANTES)
   Master Design System 2026
   Variantes :
   - .hero-immersive   : Vitrine immersive plein fond image (Homepage)
   - .hero-editorial   : Split layout asymétrique haut de gamme (Pages Piliers)
   - .hero-panoramic   : Bandeau visuel panoramique + contenu centré (Pages Pro)
   - .hero-accent      : Format direct avec pastille visuelle dynamique (Programmes / Formations)
   - .hero-compact     : Chapeau institutionnel et épuré avec liseré bicolore (Pages Utilitaires)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ANIMATIONS & TRANSITIONS DU SYSTÈME DE HERO
   -------------------------------------------------------------------------- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateX(-50%) translateY(6px);
    opacity: 1;
  }
}

.hero-immersive__content,
.hero-editorial__content,
.hero-editorial__media,
.hero-professional__content,
.hero-professional__media,
.hero-feature__content,
.hero-feature__media,
.hero-panoramic__content,
.hero-accent__content,
.hero-compact__content {
  animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Global Configuration & Scroll Alignment --- */
:root {
  --header-height: 85px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#point-entree,
#programmes-liste,
#liste-programmes,
#territoires-liste,
#catalogue-formations,
#notre-mission,
.section-anchor,
.stitch-entry-section {
  scroll-margin-top: calc(var(--header-height, 67px) + 8px);
}

/* ==========================================================================
   1. VARIANTE A : .hero-immersive (HOMEPAGE)
   Vitrine immersive, chaleureuse, lisible et orientée conversion.
   Plein viewport desktop sous navbar (zéro bande blanche).
   ========================================================================== */
.hero-immersive {
  position: relative;
  min-height: calc(100svh - var(--header-height, 67px));
  min-height: calc(100vh - var(--header-height, 67px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0f172a;
  color: #ffffff;
  padding: 2.25rem 1.5rem 3.5rem;
  box-sizing: border-box;
}

@media (min-width: 993px) {
  .hero-immersive {
    min-height: calc(100svh - var(--header-height, 67px));
    min-height: calc(100vh - var(--header-height, 67px));
    height: auto;
    padding: 2rem 1.5rem 3.75rem;
  }
  .hero-immersive .container {
    margin: auto 0;
    width: 100%;
  }
}

/* Image de fond plein écran */
.hero-immersive__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-immersive__bg picture,
.hero-immersive__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal, center 22%);
  display: block;
}

/* Voile d'ombrage gradient subtil pour lisibilité maximale */
.hero-immersive__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.42) 0%,
    rgba(15, 23, 42, 0.58) 45%,
    rgba(15, 23, 42, 0.75) 80%,
    rgba(15, 23, 42, 0.85) 100%
  );
  pointer-events: none;
}

/* Contenu centré */
.hero-immersive__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo Gymouv' officiel intégré dans le Hero */
.hero-immersive__logo-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.15rem !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.hero-immersive__logo-wrap:hover {
  transform: translateY(-2px);
}

.hero-immersive__logo {
  height: auto !important;
  width: 190px !important;
  max-width: 190px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Badges universels pour fonds clairs (Professional, Feature, Editorial, etc.) */
.stitch-badges-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.95rem;
}

.stitch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gymouv-turquoise-light, #e6fafb);
  color: var(--gymouv-turquoise-dark, #00696c);
  border: 1px solid rgba(37, 209, 214, 0.4);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  line-height: 1.3;
}

.stitch-badge--highlight {
  background: #fdf0f6;
  border-color: rgba(234, 27, 126, 0.3);
  color: var(--gymouv-pink, #EA1B7E);
}

/* Badges de réassurance sur fond sombre (Hero Immersive) */
.hero-immersive .stitch-badges-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.hero-immersive .stitch-badge {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.hero-immersive .stitch-badge--highlight {
  background: rgba(37, 209, 214, 0.32);
  border-color: rgba(37, 209, 214, 0.65);
  color: #ffffff;
}

/* Titre H1 */
.hero-immersive__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 0.85rem;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hero-immersive__title .text-rose {
  color: #ff3b9a;
  text-shadow: 0 2px 14px rgba(234, 27, 126, 0.5);
}

.hero-immersive__title .text-turquoise {
  color: #25D1D6;
  text-shadow: 0 2px 14px rgba(37, 209, 214, 0.5);
}

.hero-immersive__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
  list-style: none;
  padding: 0;
}

.hero-immersive__breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.hero-immersive__breadcrumb a:hover {
  color: #25D1D6;
}

.hero-immersive__breadcrumb .breadcrumb-separator {
  opacity: 0.5;
}

.hero-immersive__breadcrumb .breadcrumb-current {
  color: #25D1D6;
  font-weight: 600;
}

/* Fil d'Ariane Universel pour variantes claires */
.hero-editorial .breadcrumb-trail,
.hero-professional .breadcrumb-trail,
.hero-feature .breadcrumb-trail,
.hero-panoramic .breadcrumb-trail,
.hero-accent .breadcrumb-trail,
.hero-compact .breadcrumb-trail,
.hero-breadcrumb,
.hero-editorial ol.breadcrumb-trail,
.hero-professional ol.breadcrumb-trail,
.hero-feature ol.breadcrumb-trail,
.hero-panoramic ol.breadcrumb-trail,
.hero-accent ol.breadcrumb-trail,
.hero-compact ol.breadcrumb-trail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 0.75rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.hero-editorial .breadcrumb-trail a,
.hero-professional .breadcrumb-trail a,
.hero-feature .breadcrumb-trail a,
.hero-panoramic .breadcrumb-trail a,
.hero-accent .breadcrumb-trail a,
.hero-compact .breadcrumb-trail a,
.hero-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-editorial .breadcrumb-trail a:hover,
.hero-professional .breadcrumb-trail a:hover,
.hero-feature .breadcrumb-trail a:hover,
.hero-panoramic .breadcrumb-trail a:hover,
.hero-accent .breadcrumb-trail a:hover,
.hero-compact .breadcrumb-trail a:hover,
.hero-breadcrumb a:hover {
  color: var(--gymouv-turquoise-dark, #00696c);
}

.hero-editorial .breadcrumb-trail .breadcrumb-separator,
.hero-professional .breadcrumb-trail .breadcrumb-separator,
.hero-feature .breadcrumb-trail .breadcrumb-separator,
.hero-panoramic .breadcrumb-trail .breadcrumb-separator,
.hero-accent .breadcrumb-trail .breadcrumb-separator,
.hero-compact .breadcrumb-trail .breadcrumb-separator,
.hero-breadcrumb .breadcrumb-separator {
  color: #94a3b8;
  padding: 0 0.15rem;
}

.hero-editorial .breadcrumb-trail .breadcrumb-current,
.hero-professional .breadcrumb-trail .breadcrumb-current,
.hero-feature .breadcrumb-trail .breadcrumb-current,
.hero-panoramic .breadcrumb-trail .breadcrumb-current,
.hero-accent .breadcrumb-trail .breadcrumb-current,
.hero-compact .breadcrumb-trail .breadcrumb-current,
.hero-breadcrumb .breadcrumb-current {
  color: var(--gymouv-turquoise-dark, #00696c);
  font-weight: 600;
}

/* Lead introductif */
.hero-immersive__lead {
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 auto 1.35rem;
  max-width: 660px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Actions CTAs */
.hero-immersive__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.75rem;
  width: 100%;
}

/* Boutons Stitch / Hero Autonomes */
.hero-immersive .btn-stitch-pink,
.btn-stitch-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--gymouv-pink, #EA1B7E);
  color: #ffffff !important;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.65rem;
  border-radius: 9999px;
  border: 2px solid var(--gymouv-pink, #EA1B7E);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 24px rgba(234, 27, 126, 0.45);
}

.hero-immersive .btn-stitch-pink:hover,
.btn-stitch-pink:hover {
  background-color: var(--gymouv-pink-hover, #d0106d);
  border-color: var(--gymouv-pink-hover, #d0106d);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(234, 27, 126, 0.55);
}

.hero-immersive .btn-stitch-turquoise,
.btn-stitch-turquoise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--gymouv-turquoise-dark, #00696c) !important;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.65rem;
  border-radius: 9999px;
  border: 2px solid var(--gymouv-turquoise, #25D1D6);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-immersive .btn-stitch-turquoise--glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.hero-immersive .btn-stitch-turquoise--glass:hover {
  background: var(--gymouv-turquoise, #25D1D6);
  border-color: var(--gymouv-turquoise, #25D1D6);
  color: #003638 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 209, 214, 0.4);
}

/* Lien Pro B2B */
.hero-immersive__pro-wrap {
  margin-top: 0.25rem;
}

.hero-immersive__pro-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease, gap 0.2s ease;
  line-height: 1.4;
}

.hero-immersive__pro-link:hover {
  color: #25D1D6;
  gap: 0.65rem;
}

/* Indicateur discret et interactif de scroll */
.hero-immersive__scroll-hint {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border-radius: 9999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: heroScrollBounce 2.4s ease-in-out infinite;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.hero-immersive__scroll-hint:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) translateY(3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.hero-immersive__scroll-hint:focus-visible {
  outline: 3px solid var(--gymouv-turquoise, #25D1D6);
  outline-offset: 3px;
}

/* Tablette (max-width: 992px) */
@media (max-width: 992px) {
  .hero-immersive {
    min-height: calc(84svh - 66px);
    padding: 2.25rem 1.25rem 2.75rem;
  }
  .hero-immersive__title {
    font-size: clamp(1.85rem, 4.5vw, 2.4rem);
  }
  .hero-immersive__brand-pill {
    padding: 6px 16px;
    margin-bottom: 0.95rem;
  }
  .hero-immersive__logo {
    height: 32px;
  }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  .hero-immersive {
    min-height: auto;
    padding: 1.25rem 0.9rem 1.85rem;
  }
  .hero-immersive__logo-wrap {
    margin-bottom: 0.65rem !important;
  }
  .hero-immersive__logo {
    width: 145px !important;
    max-width: 145px !important;
  }
  .hero-immersive .stitch-badges-group {
    gap: 0.35rem;
    margin-bottom: 0.65rem;
  }
  .hero-immersive .stitch-badge {
    font-size: 0.68rem;
    padding: 0.25rem 0.65rem;
  }
  .hero-immersive__title {
    font-size: clamp(1.45rem, 5.8vw, 1.85rem);
    margin-bottom: 0.55rem;
    line-height: 1.18;
  }
  .hero-immersive__lead {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.95rem;
    max-width: 95%;
  }
  .hero-immersive__actions {
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    margin-bottom: 0.55rem;
  }
  .hero-immersive .btn-stitch-pink,
  .hero-immersive .btn-stitch-turquoise--glass {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    font-size: 0.8rem;
  }
  .hero-immersive__pro-wrap {
    margin-top: 0.15rem;
    padding: 0 10px;
  }
  .hero-immersive__pro-link {
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
  }
  .hero-immersive__scroll-hint {
    display: none;
  }
}

/* Petit mobile (max-width: 380px) */
@media (max-width: 380px) {
  .hero-immersive {
    padding: 1rem 0.75rem 1.5rem;
  }
  .hero-immersive__title {
    font-size: 1.4rem;
  }
  .hero-immersive__logo {
    width: 130px !important;
  }
}

/* ==========================================================================
   2. VARIANTE B : .hero-editorial (PAGES PILIERS)
   Split layout asymétrique haut de gamme pour APA, Handicap, Maladies chroniques, Seniors.
   ========================================================================== */
.hero-editorial {
  position: relative;
  padding: 2.25rem 0 2.75rem;
  background: linear-gradient(175deg, #ffffff 0%, #f6fcfc 55%, #fdf9fb 100%);
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.hero-editorial__grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 2.5rem 2.25rem;
  align-items: start;
}

.hero-editorial__content {
  max-width: 620px;
}

.hero-editorial__media {
  position: relative;
  border-radius: 26px 14px 26px 14px;
  overflow: hidden;
  max-height: 400px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background-color: #ffffff;
}

.hero-editorial__media img {
  width: 100%;
  height: 380px;
  max-height: 400px;
  object-fit: cover;
  object-position: var(--hero-focal, center 35%);
  display: block;
}

.hero-editorial h1,
.hero-editorial__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: clamp(1.85rem, 2.7vw, 2.45rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--gymouv-black, #111111);
  margin-bottom: 0.65rem;
  letter-spacing: -0.025em;
}

.hero-editorial h1 .text-rose,
.hero-editorial__title .text-rose {
  color: var(--gymouv-pink, #EA1B7E);
}

.hero-editorial__lead {
  font-size: 1.025rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 1.25rem;
}

.hero-editorial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.hero-editorial__sublink-wrap {
  margin-top: 0.85rem;
}

@media (max-width: 992px) {
  .hero-editorial {
    padding: 1.75rem 0 2rem;
  }
  .hero-editorial__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-editorial__media {
    max-height: 280px;
  }
  .hero-editorial__media img {
    height: 280px;
  }
}

@media (max-width: 640px) {
  .hero-editorial {
    padding: 1.35rem 0 1.6rem;
  }
  .hero-editorial h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .hero-editorial__media {
    max-height: 220px;
  }
  .hero-editorial__media img {
    height: 220px;
  }
}

/* ==========================================================================
   3. VARIANTE C : .hero-professional (ESPACE PROFESSIONNELS & PRESCRIPTEURS)
   Composition éditoriale institutionnelle, texte immédiatement visible à gauche,
   vraie photo rectangulaire intégrée à droite, badges et CTAs above-the-fold.
   ========================================================================== */
.hero-professional {
  position: relative;
  padding: 2.25rem 0 2.5rem;
  background: linear-gradient(175deg, #ffffff 0%, #f6fcfc 55%, #fdf9fb 100%);
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.hero-professional__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem 2.25rem;
  align-items: center;
}

.hero-professional__content {
  max-width: 620px;
}

.hero-professional__media {
  position: relative;
  border-radius: 24px 14px 24px 14px;
  overflow: hidden;
  max-height: 380px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background-color: #ffffff;
}

.hero-professional__media img {
  width: 100%;
  height: 350px;
  max-height: 380px;
  object-fit: cover;
  object-position: var(--hero-focal, center 35%);
  display: block;
}

.hero-professional h1,
.hero-professional__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: clamp(1.85rem, 2.7vw, 2.45rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--gymouv-black, #111111);
  margin-bottom: 0.65rem;
  letter-spacing: -0.025em;
}

.hero-professional h1 .text-rose,
.hero-professional__title .text-rose {
  color: var(--gymouv-pink, #EA1B7E);
}

.hero-professional h1 .text-turquoise,
.hero-professional__title .text-turquoise {
  color: var(--gymouv-turquoise-dark, #00696c);
}

.hero-professional__lead {
  font-size: 1.025rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 1.25rem;
}

.hero-professional__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.hero-professional__sublink-wrap {
  margin-top: 0.65rem;
}

.hero-professional__sublink {
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-professional__sublink:hover {
  color: var(--gymouv-pink, #EA1B7E);
}

@media (max-width: 992px) {
  .hero-professional {
    padding: 1.75rem 0 2rem;
  }
  .hero-professional__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-professional__media {
    max-height: 280px;
  }
  .hero-professional__media img {
    height: 280px;
  }
}

@media (max-width: 640px) {
  .hero-professional {
    padding: 1.25rem 0 1.5rem;
  }
  .hero-professional h1 {
    font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  }
  .hero-professional__media {
    max-height: 200px;
    border-radius: 16px;
  }
  .hero-professional__media img {
    height: 200px;
  }
  .hero-professional__actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-professional__actions .btn-stitch-pink,
  .hero-professional__actions .btn-stitch-turquoise {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   4. VARIANTE D : .hero-feature (PROGRAMMES / FORMATIONS / ACTIONS / LOCAL)
   Hero opérationnel haut de gamme avec photo rectangulaire nette,
   disponible en 2 orientations maîtrisées (Feature A: texte gauche,
   Feature B: image gauche) pour un rythme visuel naturel.
   ========================================================================== */
.hero-feature {
  position: relative;
  padding: 2.15rem 0 2.5rem;
  background: linear-gradient(175deg, #ffffff 0%, #f6fcfc 55%, #fdf9fb 100%);
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.hero-feature__grid {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: 2.5rem 2rem;
  align-items: center;
}

/* Feature B : Image à gauche sur desktop */
.hero-feature--media-left .hero-feature__grid {
  grid-template-columns: 0.78fr 1.22fr;
}

.hero-feature--media-left .hero-feature__media {
  order: -1;
}

.hero-feature__content {
  max-width: 620px;
}

.hero-feature__media {
  position: relative;
  border-radius: 20px 10px 20px 10px;
  overflow: hidden;
  max-height: 350px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background-color: #ffffff;
}

.hero-feature__media img {
  width: 100%;
  height: 320px;
  max-height: 350px;
  object-fit: cover;
  object-position: var(--hero-focal, center 35%);
  display: block;
}

.hero-feature h1,
.hero-feature__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: clamp(1.75rem, 2.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--gymouv-black, #111111);
  margin-bottom: 0.65rem;
  letter-spacing: -0.02em;
}

.hero-feature h1 .text-rose,
.hero-feature__title .text-rose {
  color: var(--gymouv-pink, #EA1B7E);
}

.hero-feature h1 .text-turquoise,
.hero-feature__title .text-turquoise {
  color: var(--gymouv-turquoise-dark, #00696c);
}

.hero-feature__lead {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 1.25rem;
}

.hero-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

@media (max-width: 992px) {
  .hero-feature {
    padding: 1.75rem 0 2rem;
  }
  .hero-feature__grid,
  .hero-feature--media-left .hero-feature__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-feature--media-left .hero-feature__media {
    order: 2;
  }
  .hero-feature__media {
    max-height: 260px;
  }
  .hero-feature__media img {
    height: 260px;
  }
}

@media (max-width: 640px) {
  .hero-feature {
    padding: 1.25rem 0 1.5rem;
  }
  .hero-feature h1 {
    font-size: clamp(1.45rem, 5.2vw, 1.8rem);
  }
  .hero-feature__media {
    max-height: 190px;
    border-radius: 14px;
    order: 2;
  }
  .hero-feature__media img {
    height: 190px;
  }
  .hero-feature__actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-feature__actions .btn-stitch-pink,
  .hero-feature__actions .btn-stitch-turquoise {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   5. VARIANTE E : .hero-compact (PAGES UTILITAIRES & TERRITOIRES)
   Chapeau institutionnel, centré, sobre avec signature visuelle Gymouv'.
   ========================================================================== */
.hero-compact {
  position: relative;
  padding: 2.35rem 0 2.5rem;
  background: linear-gradient(150deg, #f0fbfc 0%, #ffffff 55%, #fdf2f7 100%);
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.hero-compact::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--gymouv-turquoise, #25D1D6) 0%,
    var(--gymouv-turquoise, #25D1D6) 50%,
    var(--gymouv-pink, #EA1B7E) 50%,
    var(--gymouv-pink, #EA1B7E) 100%
  );
}

.hero-compact__content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-compact h1 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: clamp(1.8rem, 2.7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--gymouv-black, #111111);
  margin-bottom: 0.65rem;
}

.hero-compact__lead {
  font-size: 1.025rem;
  line-height: 1.62;
  color: #4b5563;
  max-width: 660px;
  margin: 0 auto 1.35rem;
}

@media (max-width: 640px) {
  .hero-compact {
    padding: 1.5rem 0 1.6rem;
  }
  .hero-compact h1 {
    font-size: clamp(1.5rem, 5.5vw, 1.85rem);
  }
}

/* ==========================================================================
   6. ACCESSIBILITÉ WCAG & PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-immersive__content,
  .hero-editorial__content,
  .hero-editorial__media,
  .hero-panoramic__content,
  .hero-accent__content,
  .hero-compact__content,
  .hero-immersive__scroll-hint {
    animation: none !important;
    transform: none !important;
  }
}

/* Homepage : photo réelle du studio (cadrage sur les participantes, loin du texte central) */
.hero-immersive--studio { --hero-focal: 50% 88%; }
@media (max-width: 760px) {
  .hero-immersive--studio { --hero-focal: 82% 80%; }
}

.hero-immersive--studio .hero-immersive__bg picture { display: block; }