/*!
Theme Name: studies-learning
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: studies-learning
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

studies-learning is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --primary-blue: #0047ff;
  --bg-white: #ffffff;
  --text-dark: #121826;
  --text-muted: #64748b;
  --indigo-dark: #2c3fb9;
  --orange-brand: #ff222d;
}

/* ── Global Link Overrides ─────────────────────────── */
.site-header a,
.logo a,
.logo-text,
.word-studies,
.word-learning,
.highlight,
.hero-premium a,
.hero-title-v2 a,
.path-card,
.eduma-course-card a {
  text-decoration: none !important;
}

.site-header a:hover,
.logo a:hover,
.path-card:hover {
  text-decoration: none !important;
}

/* ── Premium Page Loader ───────────────────────────── */
.studies-loader {
  position: fixed;
  inset: 0;
  background: #ffffff !important;
  z-index: 10000; /* Above everything */
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    visibility 0.4s;
  pointer-events: all;
}

.studies-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(0, 71, 255, 0.05);
  border-top: 3px solid var(--primary-blue);
  border-radius: 50%;
  animation: loader-spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.loader-text {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  animation: loader-pulse 2s ease-in-out infinite;
}

.loader-text span {
  color: var(--primary-blue);
}

@keyframes loader-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  overflow-x: hidden;
}

body {
  font-family: "Outfit", sans-serif;
  color: var(--text-dark);
  background: #f8fbff url("./assets/img/hero/studies_bg_hero.png") no-repeat top
    center;
  background-size: 100% auto;
  line-height: 1.6;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

/* Navbar Premium */
header#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
}

.navbar-premium {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 1000;
  width: 95%;
  max-width: 1300px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  padding: 0.2rem 3.2rem; /* Slimmer header */
  display: flex;
  margin: 15px auto;
  justify-content: space-between;
  align-items: center;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
  opacity: 0;
  animation: revealNavMisty 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.navbar-premium.scrolled {
  padding: 0.5rem 2.5rem; /* Extra slim on scroll */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.navbar-premium.scrolled .logo-img {
  transform: scale(0.9);
}

.navbar-premium.scrolled .logo {
  gap: 0.6rem;
}

@keyframes revealNavMisty {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 1.4rem;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none !important;
  line-height: 1;
}

.logo-img {
  width: 42px;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
  vertical-align: middle;
}

.logo-text {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  line-height: 1;
  margin-top: 2px;
}

.logo-text .highlight {
  color: var(--primary-blue);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1rem; /* Tighter gap for better pill effect */
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  padding: 0.4rem;
  border-radius: 100px;
}

/* Sliding Indicator Pill */
.nav-indicator-pill {
  position: absolute;
  height: calc(100% - 0.8rem);
  background: #ffffff;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 1;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  top: 0.4rem;
  pointer-events: none;
  display: block;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  display: block;
}

.nav-links a:hover {
  color: var(--primary-blue);
}

/* Base style for active links - colors handled by the sliding pill background usually,
   but we keep the text color high for contrast */
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--primary-blue);
}

.btn-campus {
  background: var(--primary-blue);
  color: white;
  padding: 0.7rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 71, 255, 0.2);
}

.btn-campus:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 71, 255, 0.3);
}

.hero-premium {
  height: auto;
  min-height: 88vh; /* Reduced from 95vh to show next section */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  scroll-snap-align: start;
  padding-top: 4.5rem; /* Increased to clear the header */
}

@media (max-width: 768px) {
  .hero-premium {
    padding-top: 3rem;
  }
}

.hero-content {
  text-align: center;
  margin-bottom: 2.5rem; /* Reduced from 2.5rem to save space */
  position: relative;
  z-index: 50; /* Ensure text stays above the banner glass effect */
}

.manuscript-text-v2 {
  font-family: "Caveat", cursive;
  font-size: 2.2rem;
  color: var(--indigo-dark);
  display: block;
  margin-bottom: -1.2rem; /* Reduced margin to pull lines closer */
  opacity: 0;
  /* Misty Start */
  animation: revealMisty 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: 0.4s;
}

.hero-title-v2 {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.word-studies,
.word-learning {
  display: inline-block;
  opacity: 0;
  /* Misty Start */
  animation: revealMisty 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.word-studies {
  color: var(--indigo-dark);
  animation-delay: 0.6s;
}

.word-learning {
  color: var(--orange-brand);
  animation-delay: 0.8s;
}

/* Modern Banner Container */
.modern-banner-container {
  width: 80vw;
  max-width: 1300px;
  height: 60vh; /* Reduced from 60vh */
  margin: -2.5rem auto 1.5rem; /* Tightened margins */
  padding: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  display: flex;
  justify-content: center;
}

.modern-banner-container.revealed {
  opacity: 1;
  transform: translateY(0);
}

.banner-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 71, 255, 0.06);
  padding: 2.5rem;
  display: flex;
  align-items: center;
}

.split-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  z-index: 1;
}

.split-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.626) 30%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Cloud Layer Animation ─────────────────── */
@keyframes cloudDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -15px) scale(1.05); }
  50% { transform: translate(80px, 5px) scale(0.98); }
  75% { transform: translate(40px, -10px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes cloudDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 10px) scale(1.06); }
  66% { transform: translate(-20px, -20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes cloudDrift3 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  50% { transform: translate(30px, -25px) scale(1.1); opacity: 0.25; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
}

.banner-clouds {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 40px;
}

.banner-clouds::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -5%;
  width: 70%;
  height: 60%;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(167, 139, 250, 0.2) 0%,
    rgba(139, 92, 246, 0.08) 30%,
    transparent 60%
  );
  filter: blur(60px);
  animation: cloudDrift1 35s ease-in-out infinite;
}

.banner-clouds::after {
  content: "";
  position: absolute;
  bottom: -15%;
  right: -8%;
  width: 60%;
  height: 50%;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(96, 165, 250, 0.15) 0%,
    rgba(59, 130, 246, 0.06) 35%,
    transparent 60%
  );
  filter: blur(70px);
  animation: cloudDrift2 45s ease-in-out infinite;
}

.banner-clouds .cloud-puff {
  position: absolute;
  top: 20%;
  right: 15%;
  width: 45%;
  height: 40%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(216, 180, 254, 0.06) 25%,
    transparent 55%
  );
  filter: blur(80px);
  animation: cloudDrift3 55s ease-in-out infinite;
}

.banner-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1.2fr;
  gap: 1.5rem;
  width: 100%;
  height: auto;
  align-items: center;
  z-index: 10;
}

/* Left Side Styles - Pushed to Extreme Left */
.banner-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: 0.5rem;
  position: relative;
  /* For glow blob positioning */
}

.text-glow-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.35) 0%,
    rgba(59, 130, 246, 0.15) 30%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 100%
  );
  filter: blur(80px);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
}

.banner-main-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.05;
  color: #383535;
  margin-bottom: 0.8rem;
  letter-spacing: -0.03em;
}

.banner-main-title span {
  font-weight: 900;
  font-size: 2.4rem;
  color: #2563eb;
  background: linear-gradient(
    135deg,
    #4749d1 0%,
    #4749d1 40%,
    #3c34d5 75%,
    #4749d1 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 20000;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(37, 99, 235, 0.3));
}

.banner-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.btn-primary-modern {
  background: linear-gradient(135deg, var(--primary-blue), #4f46e5);
  color: white;
  border: none;
  padding: 0.9rem 2.2rem;
  border-radius: 100px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 20px rgba(0, 71, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.btn-primary-modern:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 71, 255, 0.25);
}

.banner-features-slider-wrapper {
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* Vertical light beams across the feature slider */
.banner-light-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}

.banner-light-beam.beam-1 {
  left: 2%;
  background: linear-gradient(to bottom, transparent 0%, rgba(139, 92, 246, 0.45) 20%, rgba(99, 102, 241, 0.35) 50%, rgba(59, 130, 246, 0.2) 80%, transparent 100%);
  animation: beamSway 6s ease-in-out infinite;
}

.banner-light-beam.beam-2 {
  left: 25%;
  width: 60px;
  background: linear-gradient(to bottom, transparent 10%, rgba(59, 130, 246, 0.4) 30%, rgba(147, 51, 234, 0.3) 70%, transparent 90%);
  filter: blur(35px);
  animation: beamSway 7s ease-in-out infinite 1.5s;
}

.banner-light-beam.beam-3 {
  right: 25%;
  width: 70px;
  background: linear-gradient(to bottom, transparent 5%, rgba(236, 72, 153, 0.3) 25%, rgba(99, 102, 241, 0.35) 60%, rgba(139, 92, 246, 0.2) 85%, transparent 100%);
  filter: blur(32px);
  animation: beamSway 8s ease-in-out infinite 0.8s;
}

.banner-light-beam.beam-4 {
  right: 2%;
  width: 90px;
  background: linear-gradient(to bottom, transparent 0%, rgba(168, 85, 247, 0.4) 15%, rgba(59, 130, 246, 0.3) 45%, rgba(99, 102, 241, 0.35) 75%, transparent 100%);
  filter: blur(28px);
  animation: beamSway 5.5s ease-in-out infinite 2.5s;
}

@keyframes beamSway {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  33% { transform: translateX(6px); opacity: 0.9; }
  66% { transform: translateX(-4px); opacity: 0.75; }
}

.banner-features-mini {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: bannerMarquee 15s linear infinite;
}

.feature-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.feature-item span,
.feature-item h1 {
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  margin: 0;
  line-height: inherit;
}

.feature-item i {
  color: #2563eb;
  font-size: 1rem;
}

/* Center Area - Empty to show the Assistant */
.banner-center {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 2rem;
  pointer-events: none;
  overflow: visible;
}

.robot-image {
  width: 500px;
  height: 300px;
  max-width: none;
  animation: floatRobot 3.5s ease-in-out infinite;
  z-index: 5;
  margin-left: -10rem;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
}

@keyframes floatRobot {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

.speech-bubble-modern {
  background: white;
  padding: 0.8rem 1.4rem;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  position: absolute;
  top: 30px;
  right: 20px;
  width: 170px;
  line-height: 1.4;
  text-align: center;
  animation: floatSpeech 3s ease-in-out infinite;
  pointer-events: auto;
  z-index: 15;
  border: 1px solid rgba(0, 71, 255, 0.05);
}

.speech-bubble-modern::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 98%;
  border-width: 8px 6px 0 6px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

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

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

/* Right Side - Path Cards Pushed to Extreme Right */
.banner-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
  position: relative;
  /* For glow blob positioning */
}

.path-cards-container {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  padding: 1.1rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01);
  width: 100%;
  max-width: 250px;
  position: relative;
}

.path-title {
  font-size: 0.85rem;
  font-weight: 750;
  margin-bottom: 1rem;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

.path-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: white;
  padding: 0.6rem 0.9rem;
  border-radius: 15px;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.01);
}

.path-card:last-child {
  margin-bottom: 0;
}

.path-card:hover {
  transform: translateX(5px) scale(1.01);
  border-color: var(--primary-blue);
  box-shadow: 0 6px 15px rgba(0, 71, 255, 0.04);
}

.path-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.path-icon.web {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  /* Indigo */
}

.path-icon.data {
  background: rgba(0, 71, 255, 0.1);
  color: #0047ff;
  /* Blue */
}

.path-icon.design {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
  /* Red */
}

/* Semantic Icon Colors */
.path-icon.icon-red {
  background: rgba(255, 68, 68, 0.1) !important;
  color: #ff4444 !important;
}

.path-icon.icon-indigo {
  background: rgba(111, 66, 193, 0.1) !important;
  color: #6f42c1 !important;
}

.path-icon.icon-blue {
  background: rgba(0, 71, 255, 0.1) !important;
  color: #0047ff !important;
}

.path-info h4 {
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--text-dark);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-info p {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-card i.ph-caret-right {
  margin-left: auto;
  color: #cbd5e1;
  font-size: 0.9rem;
}

/* Path Cards Slider */
.path-cards-slider {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 240px;
  overflow: hidden;
}

.path-cards-slider .path-card {
  opacity: 0;
  transform: translateY(40px);
  animation: slideUpPath 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.path-cards-slider .path-card:nth-child(1) {
  animation-delay: 0.1s;
}

.path-cards-slider .path-card:nth-child(2) {
  animation-delay: 0.25s;
}

.path-cards-slider .path-card:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes slideUpPath {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Additional path icons */
.path-icon.agriculture {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
  /* Red */
}

.path-icon.compta {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  /* Indigo */
}

.path-icon.elevage {
  background: rgba(0, 71, 255, 0.1);
  color: #0047ff;
  /* Blue */
}

.social-proof-modern {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: white;
  padding: 0.6rem 1.2rem;
  border-radius: 40px;
  width: 95%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
  margin-top: 0.2rem;
}

.avatar-group img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -3px;
}

.proof-text {
  font-size: 0.75rem;
  color: var(--text-dark);
  font-weight: 600;
}

/* Soap Bubble Iridescent Look */
/* Soap Bubble Iridescent Look (from legacy_2) */
.floating-sphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  z-index: 3;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 200, 255, 0.1) 40%,
    rgba(200, 255, 255, 0.1) 60%,
    rgba(255, 255, 200, 0.15) 80%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset -10px -10px 25px rgba(0, 0, 0, 0.15),
    0 20px 45px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
  will-change: transform;
}

/* ── Responsive Overhaul: Hero & Banner ────────────────────── */

@media (max-width: 1200px) {
  .banner-inner {
    height: auto;
    padding: 3rem 2rem;
  }

  .banner-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .banner-center {
    display: none;
  }

  .banner-main-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 992px) {
  .hero-title-v2 {
    font-size: 3rem;
  }

  .modern-banner-container {
    width: 92vw;
  }
}

@media (max-width: 768px) {
  .hero-premium {
    padding-top: 3.5rem; /* Further reduced from 4.5rem */
    min-height: auto;
  }

  .hero-content {
    margin-bottom: 0.8rem; /* Almost stuck to the banner */
  }

  .hero-title-v2 {
    font-size: 2rem; /* Slightly smaller to save space */
    line-height: 1;
  }

  .manuscript-text-v2 {
    font-size: 1.2rem;
    margin-bottom: -0.2rem;
  }

  .modern-banner-container {
    margin-top: 0; /* Stuck to the content above */
    width: 98vw;
    height: auto;
    transform: none !important;
  }

  .banner-inner {
    padding: 2rem 1.5rem; /* Increased to give robot a track */
    border-radius: 24px;
    background-image: none !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    overflow: hidden; /* Ensure robot doesn't go out of bounds */
  }

  .banner-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    width: 90%; /* Leave space for robot on sides */
    margin: 0 auto;
    padding: 0;
  }

  .banner-left {
    padding-right: 0;
    align-items: center;
    text-align: center;
  }

  .banner-main-title {
    font-size: 1.6rem; /* Slightly smaller */
    margin: 0.5rem 0 1rem; /* Tight margins */
    line-height: 1.1;
  }

  .banner-main-title span {
    font-size: 1.7rem;
  }

  .banner-actions {
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .btn-primary-modern {
    width: 100%;
    justify-content: center;
    padding: 1.1rem;
  }

  /* REPLACEMENT FOR HORRIBLE MARQUEE ON MOBILE */
  .banner-features-slider-wrapper {
    max-width: 100%;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .banner-features-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    animation: none;
    width: 100%;
    margin-top: 1.5rem;
  }

  .feature-item {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    z-index: 1;
  }

  .feature-item h1,
  .feature-item span {
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
  }

  /* ── Mobile Responsive Clean-up ────────────────────────────── */

  @media (max-width: 768px) {
    /* Robot Intelligent Roaming Animation (4 Sides Lap) */
    .banner-center {
      display: flex !important;
      position: absolute;
      bottom: -5px; /* Lowered to align with social proof line */
      right: 5px;
      width: 160px; /* Slightly larger */
      height: auto;
      z-index: 100; /* Extremely high to ensure clickability */
      pointer-events: auto; /* Enable clicks */
      animation: intelligentLap 20s ease-in-out infinite;
      cursor: pointer;
    }

    .robot-image {
      width: 160px;
      height: auto;
      margin-left: 0;
      filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.18));
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: auto;
    }

    .robot-image:hover {
      transform: scale(1.05);
    }

    .robot-image:active {
      transform: scale(0.95);
    }

    @keyframes intelligentLap {
      /* 0-25%: Pulse at starting position (Bottom-Right) */
      0%,
      25% {
        transform: translate(0, 0) scale(1);
      }
      12% {
        transform: translate(0, -5px) scale(1.05);
      }

      /* 25-40%: Move to Bottom-Left */
      40% {
        transform: translate(-60vw, 0) rotate(-5deg);
      }

      /* 40-55%: Move to Top-Left */
      55% {
        transform: translate(-60vw, -200px) rotate(-10deg);
      }

      /* 55-75%: Move to Top-Right */
      75% {
        transform: translate(0, -200px) rotate(5deg);
      }

      /* 75-100%: Move back to Start */
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
    }

    .speech-bubble-modern {
      display: none;
    }

    .floating-sphere {
      display: none !important;
    }

    .banner-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem; /* Reduced from 2.5rem */
      text-align: center;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .banner-left,
    .banner-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0;
      width: 100%;
    }

    .banner-main-title {
      font-size: 1.8rem;
      text-align: center;
      margin: 0 auto 0.8rem; /* Marges réduites */
      width: 100%;
    }

    .banner-actions {
      justify-content: center;
      width: 100%;
      margin-bottom: 0.3rem; /* Marges réduites */
    }

    /* Rétablissement du MARQUEE HORIZONTAL INFINI - ESPACES RÉDUITS */
    .banner-features-slider-wrapper {
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      overflow: hidden;
      mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
      );
      -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
      );
      margin-bottom: -2rem; /* Moins d'espace en bas */
      margin-top: -1rem; /* Moins d'espace en haut */
    }

    .banner-features-mini {
      display: flex;
      flex-wrap: nowrap;
      gap: 3rem;
      width: max-content;
      animation: professionalMarquee 15s linear infinite;
    }

    .feature-item {
      flex-shrink: 0;
      white-space: nowrap;
    }

    .feature-item h1,
    .feature-item span {
      font-size: 1.15rem;
      font-weight: 400;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0;
    }

    /* Centrage de la bannière sans décalage */
    .banner-right {
      display: flex;
      flex-direction: column;
      align-items: center; /* On centre le bloc vertical */
      text-align: center;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
    }

    .path-cards-container {
      width: 100%;
      max-width: 300px; /* More compact */
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      padding: 0.8rem; /* Reduced padding */
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      text-align: left;
    }

    /* Rétablissement de la div EXACTEMENT comme sur Desktop */
    .path-cards-slider {
      display: flex !important;
      flex-direction: column !important; /* Retour au vertical */
      gap: 0.6rem;
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .path-card {
      display: flex;
      flex-direction: row !important;
      align-items: center;
      gap: 0.8rem;
      background: white !important;
      padding: 0.6rem 0.9rem !important;
      border-radius: 15px !important;
      margin-bottom: 0.6rem !important;
      width: 100% !important;
      flex: none !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01) !important;
      border: 1px solid rgba(0, 0, 0, 0.01) !important;
      animation: slideUpPath 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .path-icon {
      width: 34px !important;
      height: 34px !important;
      border-radius: 10px !important;
      font-size: 1rem !important;
      margin-bottom: 0 !important;
    }

    .path-info h4 {
      font-size: 0.85rem !important;
      font-weight: 750 !important;
      margin-bottom: 1px !important;
    }

    .path-info p {
      font-size: 0.7rem !important;
    }

    .path-card i.ph-caret-right {
      display: block !important; /* Flèche desktop */
      margin-left: auto;
      color: #cbd5e1;
      font-size: 0.9rem;
    }
  }

  @keyframes professionalMarquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .floating-sphere {
    display: none; /* Clean up UI on small screens */
  }
}

@media (max-width: 480px) {
  .banner-main-title {
    font-size: 1.6rem;
  }
  .banner-main-title span {
    font-size: 1.7rem;
  }
}

@keyframes bannerMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Animations */
@keyframes floatRobotModern {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-30px) rotate(2deg);
  }
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  33% {
    transform: translateY(-15px) translateX(10px);
  }

  66% {
    transform: translateY(10px) translateX(-5px);
  }
}

@keyframes pulseGlow {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }

  to {
    transform: scale(1.2);
    opacity: 0.9;
  }
}

@keyframes revealMisty {
  from {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Courses Section Premium (Eduma Style) */
.courses-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
}

.section-header-v2 {
  text-align: center;
  margin-bottom: 3.5rem;
  /* More space */
}

.section-title-premium {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--indigo-dark);
  /* Using brand color */
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.section-title-premium::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--orange-brand);
  /* Brand accent */
  border-radius: 10px;
}

/* Scroll reveal helper */
.courses-section {
  scroll-snap-align: start;
  padding: 8rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.courses-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Currency Switcher */
.currency-switcher {
  margin-right: 1.5rem;
  position: relative;
}

#currency-select {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 71, 255, 0.1);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230047ff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px;
}

#currency-select:hover {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: var(--primary-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .currency-switcher {
    margin-right: 0.8rem;
  }
  #currency-select,
  .js-currency-select {
    padding: 0.4rem 0.7rem;
    padding-right: 1.8rem;
    font-size: 0.75rem;
  }
}

/* Contextual Section Filters */
.section-contextual-filter {
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
}

.section-filter-select {
  background: white;
  border: 1px solid rgba(0, 71, 255, 0.15);
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
  padding-right: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230047ff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px;
}

.section-filter-select:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 71, 255, 0.08);
}

.currency-filter-group {
  margin-left: 0.5rem;
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
}

/* ──────────────────────────────────────────────────────────
   GLOBAL COMPONENTS — Formations Card (Shared)
   ────────────────────────────────────────────────────────── */

.formations-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.formations-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.formations-card-media {
  display: block;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
}

.formations-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.formations-card:hover .formations-card-image {
  transform: scale(1.05);
}

.formations-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.formations-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.formations-card-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-blue);
  background: rgba(0, 71, 255, 0.05);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.formations-card-level {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.formations-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.formations-card-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.formations-card-title a:hover {
  color: var(--primary-blue);
}

.formations-card-excerpt {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.formations-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formations-card-duration {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.formations-card-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-blue);
}

/* ── Global Precision Adjustments ── */
body, p, li, input, textarea, select {
  font-size: 1rem !important; /* Minimum 1rem body font-size */
}

/* Titles */
h1, h2, h3, .cat-main-title, .eduma-title, .sp-mindmap-title {
  font-family: "Outfit", sans-serif !important;
}

/* Global button overrides */
.btn-campus,
.btn-primary-modern,
.view-more-global,
.metamorph-cta-btn,
.sp-eclat-btn,
.sp-course-start-btn,
.sp-instructor-btn,
.sp-business-btn-outline,
.sp-zone-btn {
  border-radius: 30px !important; /* Min 30px for pills */
}

/* Global badge and bubble overrides */
.cat-eyebrow,
.sp-instructor-eyebrow,
.sp-pepite-feature-badge,
.sp-zone-eyebrow,
.sp-card-badge,
.sp-category-bubble,
.metamorph-pill-face {
  border-radius: 40px !important; /* Min 40px for bubbles */
  font-size: 0.85rem !important; /* Min 0.85rem for labels/badges */
}

/* Card border-radius */
.eduma-course-card,
.sp-magnetic-card,
.sp-pepite-feature,
.sp-partner-hub__card,
.sp-auction-card,
.sp-mini-float-card,
.sp-virtuous-zone {
  border-radius: 20px !important; /* 20px for cards */
}