/* ==========================================================================
   Move&Shine — WordPress + Elementor glue overrides
   Loaded AFTER colors_and_type.css. Targets Hello Elementor's defaults
   and Elementor's container/widget classes.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Body — canvas global
   Force nos tokens sur Hello Elementor qui injecte ses propres valeurs.
   ------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--ink) !important;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sélection de texte aux couleurs de la marque */
::selection {
  background: var(--gold-500);
  color: var(--ink);
}

/* Scrollbar WebKit — fine ligne or sur fond noir */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--ink); }
::-webkit-scrollbar-thumb  { background: var(--gold-700); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* Focus ring accessible — remplace l'outline navigateur par le halo or */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Images et médias */
img, video, svg, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Système typographique des boutons ──────────────────────────────────────
   CTA fort    : 12px / 700 / UPPERCASE / tracking 0.14em — hero, ghost, summary
   CTA secondaire : 12px / 600 / UPPERCASE / tracking 0.08em — nav, toggle langue
   Utilitaire  : 11.5px / 400 / normal / tracking 0.06em — filtres
   ────────────────────────────────────────────────────────────────────────── */

/* ── #hero — courants d'étoiles dorées ─────────────────────────────────── */

/* Vers haut-droite */
@keyframes ms-stars-a {
  from { transform: translate(0, 0); }
  to   { transform: translate(240px, -240px); }
}
/* Vers bas-gauche */
@keyframes ms-stars-b {
  from { transform: translate(0, 0); }
  to   { transform: translate(-180px, 180px); }
}

#hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Courant 1 — haut-gauche → bas-droite, lent */
#hero::before {
  content: '';
  position: absolute;
  inset: -100%;
  z-index: 0;
  pointer-events: none;
  animation: ms-stars-a 5s linear infinite;
  background-image:
    radial-gradient(circle at  7% 14%, rgba(255,255,255,0.90) 0px, rgba(255,255,255,0.90) 1px,   transparent 2px),
    radial-gradient(circle at 22% 38%, rgba(232,203,138,0.95) 0px, rgba(232,203,138,0.95) 1.5px, transparent 2.5px),
    radial-gradient(circle at 43%  9%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 0.8px, transparent 1.5px),
    radial-gradient(circle at 61% 27%, rgba(201,162,74,0.90)  0px, rgba(201,162,74,0.90)  2px,   transparent 3px),
    radial-gradient(circle at 78% 51%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 2px),
    radial-gradient(circle at 91% 18%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 63%, rgba(212,175,90,0.85)  0px, rgba(212,175,90,0.85)  1px,   transparent 1.8px),
    radial-gradient(circle at 36% 78%, rgba(255,255,255,0.70) 0px, rgba(255,255,255,0.70) 0.8px, transparent 1.5px),
    radial-gradient(circle at 55% 88%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 1.5px, transparent 2.5px),
    radial-gradient(circle at 83% 74%, rgba(201,162,74,0.75)  0px, rgba(201,162,74,0.75)  1px,   transparent 2px),
    radial-gradient(circle at  3% 92%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 1.5px),
    radial-gradient(circle at 68% 95%, rgba(232,203,138,0.70) 0px, rgba(232,203,138,0.70) 1.5px, transparent 2px);
  background-size: 240px 240px;
}

/* Courant 2 — haut-droite → bas-gauche + courant montant, plus rapide */
#hero::after {
  content: '';
  position: absolute;
  inset: -100%;
  z-index: 0;
  pointer-events: none;
  animation: ms-stars-b 20s linear infinite;
  background-image:
    radial-gradient(circle at 11% 22%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 31%  6%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 1.8px),
    radial-gradient(circle at 53% 41%, rgba(201,162,74,0.90)  0px, rgba(201,162,74,0.90)  2px,   transparent 3px),
    radial-gradient(circle at 74% 19%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 0.8px, transparent 1.5px),
    radial-gradient(circle at 88% 67%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1.5px, transparent 2.5px),
    radial-gradient(circle at 19% 55%, rgba(212,175,90,0.85)  0px, rgba(212,175,90,0.85)  1px,   transparent 2px),
    radial-gradient(circle at 46% 73%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 1px,   transparent 1.5px),
    radial-gradient(circle at 65% 89%, rgba(232,203,138,0.70) 0px, rgba(232,203,138,0.70) 1.5px, transparent 2px),
    radial-gradient(circle at  4% 80%, rgba(201,162,74,0.80)  0px, rgba(201,162,74,0.80)  1px,   transparent 1.8px),
    radial-gradient(circle at 94% 44%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1.5px, transparent 2.5px);
  background-size: 180px 180px;
}

/* Étoiles filantes — injectées par ms-hero-shooting-stars.js */
@keyframes ms-shoot {
  0%   { opacity: 0;   transform: rotate(-30deg) translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0;   transform: rotate(-30deg) translateX(220px); }
}

.ms-shooting-star {
  position: absolute;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9) 30%, rgba(232,203,138,0.8) 70%, transparent);
  pointer-events: none;
  z-index: 1;
  animation: ms-shoot 0.8s ease-out forwards;
}

/* CTA fort — tous les boutons dans #hero */
#hero .elementor-button,
#hero .elementor-button *,
#hero .elementor-button-text,
#hero .elementor-button-content-wrapper {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

/* Bouton doré (par défaut dans #hero) */
#hero .elementor-button:not(#bouton-noir) {
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500)) !important;
  color: var(--ink) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 40px !important;
  box-shadow: var(--halo-gold) !important;
  transform: translateY(0) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}
#hero .elementor-button:not(#bouton-noir):hover {
  background: linear-gradient(to bottom, var(--gold-400), var(--gold-600)) !important;
  box-shadow: var(--halo-gold-strong), 0 12px 32px rgba(201,162,74,0.35) !important;
  transform: translateY(-3px) !important;
}
#hero .elementor-button:not(#bouton-noir):active {
  transform: translateY(0px) scale(0.97) !important;
  box-shadow: var(--halo-gold) !important;
}

/* Bouton #bouton-noir — fond noir, bordure blanche, texte blanc */
#bouton-noir,
#bouton-noir * {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
#bouton-noir {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 40px !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease !important;
}
#bouton-noir:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--paper) !important;
  box-shadow: 0 0 28px rgba(255,255,255,0.1), 0 12px 32px rgba(255,255,255,0.06) !important;
  transform: translateY(-3px) !important;
}
#bouton-noir:active {
  transform: translateY(0px) scale(0.97) !important;
  box-shadow: none !important;
}

/* Section section rule — useful when an Elementor section has class "ms-rule-top". */
.ms-rule-top { border-top: 1px solid var(--rule); }

/* Split CTA (shortcode) */
.ms-split-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 24px auto;
}
.ms-btn-split { /* mirror of design system definition for safety */
  text-decoration: none;
  display: grid;
  place-items: center;
  height: 88px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--ink);
}
.ms-btn-split--dark {
  background: linear-gradient(135deg, var(--gold-700), var(--ink));
  color: var(--gold-300);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

/* Pillar card (shortcode) */
.ms-pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ms-pillar-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-300), var(--gold-700) 80%, #000);
  box-shadow: 0 0 24px rgba(201,162,74,.18);
  border: 1px solid rgba(232,203,138,.4);
}

/* Reset the logo tile box defined in colors_and_type.css */
.ms-logo-tile {
  height: auto;
  width: auto;
  border: none;
  padding: var(--sp-6) 0;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
}

/* ── Paragraphes globaux ────────────────────────────────────────────────── */

#hero p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #b8ad97;
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

p {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #b8ad97;
  margin-bottom: 32px;
}

p:last-child {
  margin-bottom: 0;
}

/* Paragraphes centrés dans le widget accueil */
.liste-accueil p {
  text-align: center;
}

.liste-accueil p:last-child {
  margin-bottom: 0;
}

h1 span {
  color: var(--gold-500);
  font-weight: 500;
  font-style: italic;
}

.liste-accueil p span {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--gold-500);
  font-style: italic;
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
  margin-right: 0.6em; /* compense le tracking du texte normal pour un rendu plus homogène */
}


/* ── Padding zéro sur sections à effets décoratifs (Elementor default = 10px visible) */

#a-propos-de-nous,
#a-propos-de-nous.e-con,
.e-con:has(> .elementor-widget-container > .ms-sport-picker),
.elementor-section:has(.ms-sport-picker) > .elementor-container {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

#a-propos-de-nous .e-con-inner,
#a-propos-de-nous.elementor-section > .elementor-container {
  padding-block: 40px !important;
  margin-block: 0 !important;
}

/* ── Décoration section #a-propos-de-nous ───────────────────────────────── */

#a-propos-de-nous {
  position: relative;
  overflow: hidden;
  /* Paillettes dorées sur les bords gauche et droit */
  background-image:
    radial-gradient(circle at  6% 20%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 1.5px, transparent 2.5px),
    radial-gradient(circle at  3% 55%, rgba(201,162,74,0.75)  0px, rgba(201,162,74,0.75)  1px,   transparent 2px),
    radial-gradient(circle at 10% 78%, rgba(212,175,90,0.80)  0px, rgba(212,175,90,0.80)  2px,   transparent 3.5px),
    radial-gradient(circle at  2% 38%, rgba(232,203,138,0.60) 0px, rgba(232,203,138,0.60) 1px,   transparent 1.5px),
    radial-gradient(circle at 15%  8%, rgba(201,162,74,0.70)  0px, rgba(201,162,74,0.70)  1.5px, transparent 2.5px),
    radial-gradient(circle at  7% 90%, rgba(212,175,90,0.55)  0px, rgba(212,175,90,0.55)  1px,   transparent 2px),
    radial-gradient(circle at 94% 25%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 97% 60%, rgba(201,162,74,0.70)  0px, rgba(201,162,74,0.70)  1px,   transparent 2px),
    radial-gradient(circle at 90% 82%, rgba(212,175,90,0.80)  0px, rgba(212,175,90,0.80)  2px,   transparent 3.5px),
    radial-gradient(circle at 98% 42%, rgba(232,203,138,0.55) 0px, rgba(232,203,138,0.55) 1px,   transparent 1.5px),
    radial-gradient(circle at 85% 12%, rgba(201,162,74,0.65)  0px, rgba(201,162,74,0.65)  1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 95%, rgba(212,175,90,0.60)  0px, rgba(212,175,90,0.60)  1px,   transparent 2px);
}

/* Brouillard doré gauche */
#a-propos-de-nous::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 0%  30%, rgba(201,162,74,0.22) 0%, transparent 70%),
    radial-gradient(ellipse  80% 60% at 0% 100%, rgba(212,175,90,0.14) 0%, transparent 65%),
    radial-gradient(ellipse  60% 50% at 0%  65%, rgba(201,162,74,0.10) 0%, transparent 60%);
}

/* Brouillard doré droit */
#a-propos-de-nous::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 100%  70%, rgba(201,162,74,0.22) 0%, transparent 70%),
    radial-gradient(ellipse  80% 60% at 100%   0%, rgba(212,175,90,0.14) 0%, transparent 65%),
    radial-gradient(ellipse  60% 50% at 100%  40%, rgba(201,162,74,0.10) 0%, transparent 60%);
}

/* ── Carte À propos [ms_apropos] ────────────────────────────────────────── */

.ms-apropos-card {
  background: var(--surface-card);
  border: 1px solid rgba(201,162,74,0.2);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-7);
  max-width: 85%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.ms-apropos-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}

.ms-apropos-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 var(--sp-4);
}

.ms-apropos-card__eyebrow span {
  margin-left: var(--sp-2);
  font-size: 9px;
  vertical-align: middle;
}

.ms-apropos-card__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  font-style: italic;
  color: #f6f1e6;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-5);
}

.ms-apropos-card__rule {
  margin: 0 0 var(--sp-6);
  border-color: rgba(201,162,74,0.3);
}

.ms-apropos-card p {
  font-size: 15px;
  line-height: 1.75;
}

.ms-apropos-card__highlight {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--gold-300);
  line-height: var(--lh-snug);
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold-500);
}

@media (max-width: 640px) {
  .ms-apropos-card {
    padding: var(--sp-6) var(--sp-5);
  }
}

/* ── Ticker défilant [ms_ticker] ────────────────────────────────────────── */

.bandeau,
.bandeau.e-con,
.bandeau .e-con-inner,
.bandeau.elementor-section > .elementor-container {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

.ms-ticker {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-6) 0;
  background: var(--ink);
}

.ms-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ms-ticker-scroll 24s linear infinite;
}

.ms-ticker:hover .ms-ticker__track {
  animation-play-state: paused;
}

.ms-ticker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 40px);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 36px);
  color: #b8ad97;
  white-space: nowrap;
  position: relative;
}

/* Séparateur ✦ entre chaque item, centré sur la bordure droite */
.ms-ticker__item::after {
  content: '✦';
  position: absolute;
  right: 0;
  transform: translateX(50%);
  color: var(--gold-500);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}

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

/* Mobile : moins de largeur disponible → on affiche un item sur deux
   (le loop reste cohérent car les deux moitiés dupliquées sont réduites
   de façon symétrique). */
@media (max-width: 640px) {
  .ms-ticker__item:nth-child(even) {
    display: none;
  }
  .ms-ticker__item {
    padding: 0 28px;
  }
}

/* ── Décoration section #a-propos ───────────────────────────────────────── */

#a-propos {
  position: relative;
  overflow: hidden;
}

/* Halos or atmosphériques */
#a-propos::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 65% at  0% 10%,  rgba(201,162,74,0.32) 0%, transparent 70%),
    radial-gradient(ellipse 70% 70% at 100% 95%,  rgba(201,162,74,0.26) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at  50% 50%,  rgba(201,162,74,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at  80% 15%,  rgba(212,175,90,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at  15% 80%,  rgba(212,175,90,0.15) 0%, transparent 65%);
}

/* Paillettes — petits points dorés dispersés */
#a-propos::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 18%, rgba(212,175,90,0.75)  0px, rgba(212,175,90,0.75)  1px,   transparent 2px),
    radial-gradient(circle at 35% 72%, rgba(201,162,74,0.85)  0px, rgba(201,162,74,0.85)  2px,   transparent 3.5px),
    radial-gradient(circle at 88% 55%, rgba(232,203,138,0.65) 0px, rgba(232,203,138,0.65) 1px,   transparent 2px),
    radial-gradient(circle at 55% 88%, rgba(212,175,90,0.80)  0px, rgba(212,175,90,0.80)  1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 48%, rgba(201,162,74,0.65)  0px, rgba(201,162,74,0.65)  1px,   transparent 1.5px),
    radial-gradient(circle at 68% 35%, rgba(232,203,138,0.75) 0px, rgba(232,203,138,0.75) 1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 78%, rgba(212,175,90,0.60)  0px, rgba(212,175,90,0.60)  1px,   transparent 2px),
    radial-gradient(circle at 48% 10%, rgba(201,162,74,0.85)  0px, rgba(201,162,74,0.85)  2px,   transparent 3px),
    radial-gradient(circle at  8% 85%, rgba(232,203,138,0.65) 0px, rgba(232,203,138,0.65) 1px,   transparent 1.5px),
    radial-gradient(circle at 62% 62%, rgba(212,175,90,0.60)  0px, rgba(212,175,90,0.60)  1px,   transparent 2px),
    radial-gradient(circle at 30% 95%, rgba(232,203,138,0.55) 0px, rgba(232,203,138,0.55) 1.5px, transparent 2px),
    radial-gradient(circle at 72% 92%, rgba(201,162,74,0.70)  0px, rgba(201,162,74,0.70)  1px,   transparent 2px),
    radial-gradient(circle at 18%  5%, rgba(212,175,90,0.80)  0px, rgba(212,175,90,0.80)  2px,   transparent 3px);
}

/* ── [ms_sport_picker] ──────────────────────────────────────────────────── */

.ms-sport-picker {
  padding: 32px 40px 60px;
  text-align: center;
  background: transparent;
  color: #f6f1e6;
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
}
.ms-sport-picker__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 14px;
}
.ms-sport-picker__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 auto 56px;
  max-width: 18ch;
  color: #f6f1e6;
}
.ms-sport-picker__title em {
  font-style: italic;
  color: var(--gold-500);
}
.ms-sport-picker__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ms-sport-picker__grid--3 {
  max-width: 1200px;
  grid-template-columns: repeat(3, 1fr);
}
.ms-sport-picker__grid--4 {
  max-width: 1280px;
  grid-template-columns: repeat(4, 1fr);
}

.ms-sport-card {
  position: relative;
  border: 2px solid var(--gold-500);
  border-radius: 6px;
  padding: 28px 16px 16px;
  text-align: left;
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(201,162,74,0.22), transparent 65%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(201,162,74,0.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%),
    #121110;
  box-shadow: 0 0 40px rgba(201,162,74,0.25), inset 0 0 0 1px rgba(201,162,74,0.35);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 250ms var(--ease), background 250ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
  overflow: hidden;
  display: block;
}
.ms-sport-card:hover {
  border-color: var(--gold-300);
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(201,162,74,0.32), transparent 65%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(201,162,74,0.30), transparent 70%),
    linear-gradient(180deg, rgba(212,175,90,0.08), transparent 60%),
    #121110;
  transform: translateY(-4px);
  box-shadow: var(--halo-gold-strong), inset 0 0 0 1px rgba(201,162,74,0.5);
  text-decoration: none;
  color: inherit;
}
.ms-sport-card__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
.ms-sport-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-500);
  font-weight: 700;
}
.ms-sport-card__icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(214,178,96,0.18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-500);
  transition: border-color 250ms var(--ease);
}
.ms-sport-card:hover .ms-sport-card__icon {
  border-color: rgba(214,178,96,0.5);
}
.ms-sport-card__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: #f6f1e6;
}
.ms-sport-card__sub {
  font-size: 13px;
  color: #b8ad97;
  margin: 0 0 22px;
  max-width: 36ch;
}
.ms-sport-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid rgba(246,241,230,0.08);
  border-radius: 999px;
  color: #b8ad97;
  transition: border-color 250ms var(--ease), color 250ms var(--ease);
}
.ms-sport-card:hover .ms-chip {
  border-color: rgba(214,178,96,0.25);
  color: #f6f1e6;
}

.ms-sport-card__img {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
  mask-image: linear-gradient(to right, transparent 0%, black 55%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 250ms var(--ease);
}

.ms-sport-card:hover .ms-sport-card__img {
  opacity: 0.75;
}

@media (max-width: 900px) {
  .ms-sport-picker__grid--3 { grid-template-columns: 1fr 1fr; }
  .ms-sport-picker__grid--3 .ms-sport-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 20px);
    margin-inline: auto;
  }
  .ms-sport-picker__grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ms-sport-picker { padding: 60px 20px 40px; }
  .ms-sport-picker__grid,
  .ms-sport-picker__grid--4,
  .ms-sport-picker__grid--3 { grid-template-columns: 1fr; }
  .ms-sport-card { padding: 24px 24px 28px; }
  .ms-sport-card__top { margin-bottom: 48px; }
  .ms-sport-card__title { font-size: clamp(26px, 8vw, 32px); }
  .ms-sport-card__sub { max-width: 100%; }
  /* La grille est repassée en 1 colonne : on annule le recentrage à demi-largeur
     hérité du breakpoint 900px, sinon la dernière carte impaire (ex: "Danse sur
     glace") reste coincée à calc(50% - 20px) au lieu de prendre toute la largeur. */
  .ms-sport-picker__grid--3 .ms-sport-card:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* ── Bandeau réseaux sociaux [ms_social_bar] ────────────────────────────── */

.ms-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
  background: var(--ink);
  flex-wrap: wrap;
}

.ms-social-bar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b8ad97;
}

.ms-social-bar__sep {
  color: var(--gold-500);
  font-size: 11px;
  line-height: 1;
}

.ms-social-bar__icons {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.ms-social-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-circle);
  border: 1px solid rgba(201,162,74,0.35);
  color: var(--gold-300);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.ms-social-bar__link:hover {
  border-color: var(--gold-500);
  color: var(--paper);
  box-shadow: var(--halo-gold);
  transform: translateY(-2px);
  text-decoration: none;
}

.ms-social-bar__link:active {
  transform: translateY(0) scale(0.95);
  box-shadow: none;
}

.ms-social-bar__link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* ── Carte teaser Masterclasses [ms_masterclass_teaser] ─────────────────── */

.ms-mc-teaser {
  background: var(--surface-card);
  border: 1px solid rgba(201,162,74,0.2);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-7);
  max-width: 85%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.ms-mc-teaser::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}




.ms-mc-teaser__note {
  font-size: 14px;
  color: var(--fg-2);
  font-style: italic;
  border-left: 2px solid var(--gold-700);
  padding-left: var(--sp-4);
  margin: var(--sp-6) 0;
}

.ms-mc-teaser__cta {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: center;
}

@media (max-width: 600px) {
  .ms-mc-teaser {
    padding: var(--sp-6) var(--sp-5);
    max-width: 100%;
  }
  .ms-mc-teaser__grid {
    grid-template-columns: 1fr;
  }
  .ms-mc-teaser__cta .ms-btn {
    font-size: 12px;
    letter-spacing: 0.03em;
    padding: 12px 20px;
    white-space: normal;
    text-align: center;
  }
}

/* ── #seances — rayons lumineux dorés ──────────────────────────────────── */

@keyframes ms-rays-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

#seances,
#seances.e-con,
#seances .e-con-inner,
#seances.elementor-section > .elementor-container {
  padding-block: 0 !important;
}

#seances.e-con,
#seances .e-con-inner {
  justify-content: center !important;
  align-items: center !important;
}

/* Neutralise le margin-top généré par Elementor (var CSS --margin-top) sur ce widget précis,
   qui décale la section #seances vers le bas et casse l'alignement du fond rayons lumineux.
   Spécificité renforcée (html body ...) : le CSS de page Elementor est inline dans le head
   et peut se charger après notre feuille de style, donc un simple match à spécificité égale
   ne suffit pas à gagner le conflit. */
html body .elementor-413 .elementor-element.elementor-element-536e4dc {
  --margin-top: 0px !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

#seances {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#seances::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  animation: ms-rays-pulse 10s ease-in-out infinite;
  background:
    /* source lumineuse au sommet */
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(201,162,74,0.55) 0%, transparent 65%),
    /* rayons */
    conic-gradient(
      from -6deg at 50% -6%,
      transparent            0deg,
      rgba(232,203,138,0.28)  4deg,
      transparent           10deg,
      transparent           17deg,
      rgba(201,162,74,0.18) 21deg,
      transparent           27deg,
      transparent           34deg,
      rgba(232,203,138,0.32) 38deg,
      transparent           44deg,
      transparent           52deg,
      rgba(201,162,74,0.22) 56deg,
      transparent           62deg,
      transparent           71deg,
      rgba(232,203,138,0.26) 75deg,
      transparent           81deg,
      transparent           90deg,
      rgba(201,162,74,0.16) 94deg,
      transparent          100deg,
      transparent          109deg,
      rgba(232,203,138,0.24) 113deg,
      transparent          119deg,
      transparent          128deg,
      rgba(201,162,74,0.18) 132deg,
      transparent          138deg,
      transparent          360deg
    );
}

/* ── Onglets Elementor #onglet (portail-client) — style doré DA ─────────── */

#onglet .e-n-tabs-heading,
#onglet .elementor-tabs-wrapper {
  display: flex !important;
  gap: var(--sp-3) !important;
  flex-wrap: wrap !important;
  border: none !important;
  background: transparent !important;
}

#onglet .e-n-tab-title,
#onglet .elementor-tab-title {
  background: transparent !important;
  border: 1px solid var(--gold-700) !important;
  border-radius: var(--r-pill) !important;
  padding: var(--sp-2) var(--sp-6) !important;
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mute) !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

#onglet .e-n-tab-title:hover,
#onglet .elementor-tab-title:hover {
  color: var(--gold-300) !important;
  border-color: var(--gold-500) !important;
  background: rgba(201,162,74,0.08) !important;
}

#onglet .e-n-tab-title.e-active,
#onglet .e-n-tab-title[aria-selected="true"],
#onglet .elementor-tab-title.elementor-active {
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500)) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow: var(--halo-gold) !important;
  font-weight: 700 !important;
}

#onglet .e-n-tab-title-text,
#onglet .elementor-tab-desktop-title,
#onglet .elementor-tab-mobile-title {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* ── Portail athlète — masque l'onglet Amelia "Mot de passe" (gestion du mot
   de passe déjà assurée côté WP, pas besoin du doublon Amelia). N'existe que
   sur le panneau client Amelia, pas besoin de scoper par page. Masqué en CSS
   uniquement — laissé dans le DOM/formulaire Vue pour ne pas casser le
   composant. Le panneau associé est masqué aussi, au cas où il deviendrait
   actif autrement qu'en cliquant sur le bouton d'onglet (lien profond, etc.). */
#tab-second[aria-controls="pane-second"],
#pane-second {
  display: none !important;
}

/* ── #onglet — brume dorée gauche/droite ───────────────────────────────── */

/* ── #onglet — rayons lumineux dorés ───────────────────────────────────── */

#onglet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#onglet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Étoiles gauche */
    radial-gradient(circle at  3% 12%, rgba(255,255,255,0.90) 0px, rgba(255,255,255,0.90) 1px,   transparent 2px),
    radial-gradient(circle at  7% 28%, rgba(232,203,138,0.95) 0px, rgba(232,203,138,0.95) 1.5px, transparent 2.5px),
    radial-gradient(circle at  2% 45%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1px,   transparent 1.5px),
    radial-gradient(circle at 11% 58%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 2px,   transparent 3px),
    radial-gradient(circle at  5% 74%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 2px),
    radial-gradient(circle at  9% 88%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 38%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 1px,   transparent 1.5px),
    radial-gradient(circle at  6% 65%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 2px),
    /* Étoiles droite */
    radial-gradient(circle at 97% 12%, rgba(255,255,255,0.90) 0px, rgba(255,255,255,0.90) 1px,   transparent 2px),
    radial-gradient(circle at 93% 28%, rgba(232,203,138,0.95) 0px, rgba(232,203,138,0.95) 1.5px, transparent 2.5px),
    radial-gradient(circle at 98% 45%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1px,   transparent 1.5px),
    radial-gradient(circle at 89% 58%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 2px,   transparent 3px),
    radial-gradient(circle at 95% 74%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 2px),
    radial-gradient(circle at 91% 88%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 38%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 1px,   transparent 1.5px),
    radial-gradient(circle at 94% 65%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 2px),
    /* Brume lumineuse gauche */
    radial-gradient(ellipse 55% 100% at 0%   30%, rgba(255,255,255,0.08) 0%, rgba(201,162,74,0.20) 30%, transparent 70%),
    radial-gradient(ellipse 55% 100% at 0%   70%, rgba(255,255,255,0.05) 0%, rgba(212,175,90,0.14) 30%, transparent 65%),
    /* Brume lumineuse droite */
    radial-gradient(ellipse 55% 100% at 100% 30%, rgba(255,255,255,0.08) 0%, rgba(201,162,74,0.20) 30%, transparent 70%),
    radial-gradient(ellipse 55% 100% at 100% 70%, rgba(255,255,255,0.05) 0%, rgba(212,175,90,0.14) 30%, transparent 65%);
}

#onglet .e-con,
#onglet .e-con-inner,
#onglet .e-n-tabs,
#onglet .e-n-tabs-content,
#onglet .e-n-tab-content,
#onglet [role="tabpanel"],
#onglet .elementor-tabs-content-wrapper,
#onglet .elementor-tab-content {
  background: transparent !important;
}

/* ── #masterclasses — brume dorée ───────────────────────────────────────── */

#masterclasses {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#masterclasses::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(201,162,74,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 75%, rgba(201,162,74,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(201,162,74,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 30% 35% at 80% 15%, rgba(212,175,90,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 10% 80%, rgba(212,175,90,0.12) 0%, transparent 60%);
}

/* ── Bouton doré réutilisable — classe CSS Elementor : bouton-dore ─────── */

.bouton-dore .elementor-button,
.bouton-dore .elementor-button *,
.bouton-dore .elementor-button-text,
.bouton-dore .elementor-button-content-wrapper {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

.bouton-dore .elementor-button {
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500)) !important;
  color: var(--ink) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 40px !important;
  box-shadow: var(--halo-gold) !important;
  transform: translateY(0) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}

.bouton-dore .elementor-button:hover {
  background: linear-gradient(to bottom, var(--gold-400), var(--gold-600)) !important;
  box-shadow: var(--halo-gold-strong), 0 12px 32px rgba(201,162,74,0.35) !important;
  transform: translateY(-3px) !important;
}

.bouton-dore .elementor-button:active {
  transform: translateY(0px) scale(0.97) !important;
  box-shadow: var(--halo-gold) !important;
}

/* ── #fiche-coach — rayons dorés statiques ──────────────────────────────── */

#fiche-coach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#fiche-coach::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 25% at 50% 0%, rgba(201,162,74,0.45) 0%, transparent 65%),
    conic-gradient(
      from -8deg at 50% -4%,
      transparent             0deg,
      rgba(232,203,138,0.22)  5deg,
      transparent            11deg,
      transparent            19deg,
      rgba(201,162,74,0.16)  23deg,
      transparent            29deg,
      transparent            37deg,
      rgba(232,203,138,0.26) 41deg,
      transparent            47deg,
      transparent            56deg,
      rgba(201,162,74,0.18)  60deg,
      transparent            66deg,
      transparent            75deg,
      rgba(232,203,138,0.20) 79deg,
      transparent            85deg,
      transparent            94deg,
      rgba(201,162,74,0.14)  98deg,
      transparent           104deg,
      transparent           113deg,
      rgba(232,203,138,0.18) 117deg,
      transparent           123deg,
      transparent           360deg
    );
}

/* ── Hide Hello Elementor's native header & footer — replaced by MS custom components */
#site-header.site-header { display: none !important; }
#site-footer.site-footer { display: none !important; }

/* Hello Elementor's site logo — give it some breathing room. */
.site-header .site-branding img { max-height: 80px; width: auto; }

/* Admin bar & login — keep gold accents. */
#wpadminbar { background: #000; }