/*!
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: #ff222de0;
}

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

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

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 {
  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: 1rem 3.5rem;
  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.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@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-img {
  width: 42px;
  height: auto;
}

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

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
  opacity: 0.8;
}

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

.nav-links a.active {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
}

.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: 5rem; /* Lifted slightly more */
}

@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;
}

.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,
    var(--indigo-dark) 0%,
    rgba(31, 43, 212, 0.45) 30%,
    rgba(255, 255, 255, 0.25) 75%,
    transparent 100%
  );
  filter: blur(80px);
  /* Heavy blur for soft glow */
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.85;
}

.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
  );
}

.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;
}

.feature-item span {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.feature-item i {
  color: var(--primary-blue);
  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;
}

@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.8rem;
  }
}

@media (max-width: 768px) {
  .modern-banner-container {
    width: 94vw;
  }

  .banner-inner {
    padding: 2.5rem 1.5rem;
    border-radius: 30px;
  }

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

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

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

  .banner-subtitle {
    font-size: 1rem;
    max-width: 100%;
  }

  .banner-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

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

  .banner-features-mini {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }

  .path-cards-container {
    padding: 1.2rem;
  }

  .social-proof-modern {
    align-self: center;
    width: 100%;
    justify-content: center;
  }
}

@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);
}