/* =============================================================================
   SCOTERS MISSIONS PREMIUM
   Fichier : /wp-content/themes/mon-theme-enfant/assets/css/scoters-missions.css
   Encapsulé sous .scoters-missions-premium — ne pollue pas le reste du thème.
   ============================================================================= */


/* ─────────────────────────────────────────────
   1. VARIABLES
───────────────────────────────────────────── */
.scoters-missions-premium {
  --sm-bg-deep    : #F0F6FA;
  --sm-bg-mid     : #E2EEF5;
  --sm-blue       : #0A6684;
  --sm-cyan       : #0A6684;
  --sm-cyan-dim   : rgba(10, 102, 132, 0.10);
  --sm-cyan-mid   : rgba(10, 102, 132, 0.30);
  --sm-green      : #1A7A52;
  --sm-green-dim  : rgba(26, 122, 82, 0.10);
  --sm-green-mid  : rgba(26, 122, 82, 0.30);
  --sm-white      : #1A2E3B;
  --sm-text       : #1E3545;
  --sm-text-muted : rgba(30, 53, 69, 0.62);
  --sm-card-bg    : rgba(255, 255, 255, 0.82);
  --sm-border     : rgba(10, 102, 132, 0.12);
  --sm-border-h   : rgba(10, 102, 132, 0.38);
  --sm-num        : rgba(10, 102, 132, 0.18);
  --sm-radius     : 18px;
  --sm-gap        : 18px;
  --sm-ease       : cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ─────────────────────────────────────────────
   2. RESET INTERNE
───────────────────────────────────────────── */
.scoters-missions-premium *,
.scoters-missions-premium *::before,
.scoters-missions-premium *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ─────────────────────────────────────────────
   3. SECTION WRAPPER — full-bleed Avada
───────────────────────────────────────────── */
.scoters-missions-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg,
    #F4F9FC 0%,
    #EBF4F9 45%,
    #E6F1F7 100%
  );
  padding: 80px 0 96px;
  isolation: isolate;

  /* ── Casse le conteneur Avada pour pleine largeur ── */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* ─────────────────────────────────────────────
   4. FOND — ORBES + GRILLE POINTS
───────────────────────────────────────────── */
.sm-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sm-dot-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.sm-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.sm-orb-1 {
  width: 700px; height: 700px;
  top: -200px; left: -200px;
  background: radial-gradient(circle at 40% 40%, rgba(10, 102, 132, 0.28) 0%, transparent 65%);
  filter: blur(90px);
  animation: sm-drift-a 26s ease-in-out infinite;
}

.sm-orb-2 {
  width: 600px; height: 600px;
  bottom: -150px; right: -150px;
  background: radial-gradient(circle at 60% 60%, rgba(10, 102, 132, 0.22) 0%, transparent 65%);
  filter: blur(80px);
  animation: sm-drift-b 33s ease-in-out infinite;
}

.sm-orb-3 {
  width: 400px; height: 400px;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26, 122, 82, 0.18) 0%, transparent 70%);
  filter: blur(70px);
  animation: sm-drift-c 40s ease-in-out infinite;
}

@keyframes sm-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%       { transform: translate(70px, 50px) scale(1.06); }
  65%       { transform: translate(-30px, 80px) scale(0.97); }
}
@keyframes sm-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-60px, -40px) scale(1.09); }
  72%       { transform: translate(35px, -60px) scale(0.94); }
}
@keyframes sm-drift-c {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%       { transform: translate(-50%, -50%) scale(1.35); opacity: 0.4; }
}


/* ─────────────────────────────────────────────
   5. CONTENEUR INTERNE
───────────────────────────────────────────── */
.sm-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 36px;
}


/* ─────────────────────────────────────────────
   6. EN-TÊTE
───────────────────────────────────────────── */
.sm-header {
  text-align: center;
  margin-bottom: 68px;

  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--sm-ease), transform 0.9s var(--sm-ease);
}
.sm-header.sm-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow */
.sm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0A6684;
  margin-bottom: 22px;
}

.sm-eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sm-cyan));
  flex-shrink: 0;
}
.sm-eyebrow-line--right {
  background: linear-gradient(90deg, var(--sm-cyan), transparent);
}

/* Titre */
.scoters-missions-premium .sm-title {
  font-size: clamp(2rem, 3.8vw, 3rem) !important;
  font-weight: 300 !important;
  color: #1A2E3B !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 18px !important;
}

.scoters-missions-premium .sm-title em {
  font-style: normal !important;
  font-weight: 800 !important;
  background: linear-gradient(130deg, #7DD3FC 20%, #22A06B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Sous-titre */
.scoters-missions-premium .sm-subtitle {
  font-size: 1.06rem !important;
  color: rgba(30, 53, 69, 0.62) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.72 !important;
}


/* ─────────────────────────────────────────────
   7. WRAPPER GRILLE (position parent SVG + cards)
───────────────────────────────────────────── */
.sm-grid-wrapper {
  position: relative;
}


/* ─────────────────────────────────────────────
   8. RÉSEAU SVG
───────────────────────────────────────────── */
.sm-network {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Chemins — état initial masqué */
.sm-net-path {
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 0s linear;
}

.sm-net-path--h {
  stroke: #0A6684;
  stroke-width: 1;
  opacity: 0.14;
}
.sm-net-path--v {
  stroke: #0A6684;
  stroke-width: 1;
  opacity: 0.10;
}
.sm-net-path--d {
  stroke: #1A7A52;
  stroke-width: 0.8;
  opacity: 0.08;
  stroke-dasharray: 5 8;
}

/* Hub central */
.sm-net-hub-ring {
  stroke: #0A6684;
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sm-net-hub-ring--inner {
  stroke: #1A7A52;
  stroke-width: 1;
}
.sm-net-hub-ring.sm-visible { opacity: 0.18; }

.sm-net-hub-dot {
  fill: #0A6684;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sm-net-hub-dot.sm-visible { opacity: 0.45; }

/* Points d'ancrage coins */
.sm-net-dot {
  fill: #0A6684;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sm-net-dot.sm-visible { opacity: 0.28; }


/* ─────────────────────────────────────────────
   9. GRILLE
───────────────────────────────────────────── */
.sm-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sm-gap);
}


/* ─────────────────────────────────────────────
   10. CARTE
───────────────────────────────────────────── */
.sm-card {
  position: relative;
  overflow: hidden;
  background: var(--sm-card-bg);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 22px 22px 20px;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  box-shadow: 0 2px 12px rgba(10, 102, 132, 0.06);
  cursor: default;

  /* État initial scroll */
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity    0.75s var(--sm-ease),
    transform  0.75s var(--sm-ease),
    border-color 0.4s var(--sm-ease),
    box-shadow   0.4s var(--sm-ease);
}

.sm-card.sm-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover ── */
.sm-card:hover {
  border-color: var(--sm-border-h);
  box-shadow:
    0 0 0 1px rgba(10, 102, 132, 0.18),
    0 16px 40px rgba(10, 102, 132, 0.12),
    0  0  32px rgba(10, 102, 132, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-5px);
}

/* ── Ligne haute lumineuse ── */
.sm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(10, 102, 132, 0.55) 30%,
    rgba(26, 122, 82, 0.55) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s var(--sm-ease);
  border-radius: 0;
}
.sm-card:hover::before { opacity: 1; }

/* ── Liseré bas ── */
.sm-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 28px; right: 28px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(26, 122, 82, 0.25),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s var(--sm-ease);
}
.sm-card:hover::after { opacity: 1; }


/* ─────────────────────────────────────────────
   11. NUMÉRO EN FILIGRANE
───────────────────────────────────────────── */
.sm-card-num {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 110px;
  height: 110px;
  color: var(--sm-num);
  pointer-events: none;
  user-select: none;
  transition:
    color     0.5s var(--sm-ease),
    transform 0.5s var(--sm-ease),
    opacity   0.5s var(--sm-ease);
  opacity: 1;
}
.sm-card-num svg {
  width: 100%;
  height: 100%;
}
.sm-card:hover .sm-card-num {
  color: rgba(10, 102, 132, 0.30);
  transform: scale(1.12) rotate(-6deg);
}



/* ─────────────────────────────────────────────
   13. KEYWORD TAG
───────────────────────────────────────────── */
.sm-card-keyword {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sm-green);
  background: var(--sm-green-dim);
  border: 1px solid rgba(26, 122, 82, 0.22);
  border-radius: 100px;
  padding: 2px 9px;
  margin-bottom: 9px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.sm-card:hover .sm-card-keyword {
  background: rgba(34, 160, 107, 0.18);
  border-color: rgba(34, 160, 107, 0.38);
}


/* ─────────────────────────────────────────────
   14. TITRE + TEXTE
   !important nécessaire pour passer au-dessus
   des styles globaux Avada/Fusion.
───────────────────────────────────────────── */
.scoters-missions-premium .sm-card-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #1A2E3B !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

.scoters-missions-premium .sm-card-text {
  font-size: 0.89rem !important;
  color: rgba(30, 53, 69, 0.68) !important;
  line-height: 1.68 !important;
}


/* ─────────────────────────────────────────────
   15. EFFET SPOTLIGHT (suit le curseur)
───────────────────────────────────────────── */
.sm-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px at var(--sx, 50%) var(--sy, 50%),
    rgba(10, 102, 132, 0.06) 0%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.sm-card:hover .sm-spotlight { opacity: 1; }

/* S'assurer que le contenu passe au-dessus du spotlight */
.sm-card-keyword,
.sm-card-title,
.sm-card-text {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────
   16. RESPONSIVE — TABLETTE
───────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sm-inner {
    max-width: 720px;
    padding: 0 28px;
  }

  .sm-card {
    padding: 26px 24px 22px;
  }

  .sm-card-num {
    width: 96px;
    height: 96px;
  }
}


/* ─────────────────────────────────────────────
   17. RESPONSIVE — MOBILE
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .scoters-missions-premium {
    padding: 68px 0 84px;
  }

  .sm-inner {
    padding: 0 20px;
  }

  .sm-header {
    margin-bottom: 44px;
  }

  .sm-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .sm-subtitle {
    font-size: 0.96rem;
  }

  /* Grille 1 colonne sur mobile */
  .sm-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Réseau SVG masqué sur mobile */
  .sm-network {
    display: none;
  }

  /* Carte mobile : conserver le style premium */
  .sm-card {
    padding: 22px 20px 20px;
    border-left: 2px solid rgba(10, 102, 132, 0.15);
  }

  .sm-card[data-sm-card="1"] { border-left-color: rgba(26, 122, 82, 0.18); }
  .sm-card[data-sm-card="2"] { border-left-color: rgba(10, 102, 132, 0.15); }
  .sm-card[data-sm-card="3"] { border-left-color: rgba(26, 122, 82, 0.18); }

  .sm-card-num {
    width: 88px;
    height: 88px;
  }

  .sm-card:hover {
    transform: translateY(-4px);
  }

  .sm-orb-1 { width: 380px; height: 380px; }
  .sm-orb-2 { width: 320px; height: 320px; }
  .sm-orb-3 { width: 220px; height: 220px; }
}

@media (max-width: 420px) {
  .sm-card-title { font-size: 1.18rem; }
  .sm-card-text  { font-size: 0.88rem; }
}


/* ─────────────────────────────────────────────
   18. RÉDUCTION DE MOUVEMENT
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .sm-orb {
    animation: none !important;
  }

  .sm-header,
  .sm-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sm-net-path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .sm-net-dot,
  .sm-net-hub-ring,
  .sm-net-hub-dot {
    opacity: 0.3 !important;
    transition: none !important;
  }

  .sm-card:hover {
    transform: none !important;
  }

  .sm-card-num,
  .sm-card:hover .sm-card-num {
    transform: none !important;
    transition: none !important;
  }

  .sm-spotlight {
    display: none !important;
  }
}