/* 🌈 Palette personnalisée */
.bg-brand {
  background-color: #4c51bf;
}

/* 🔄 Carte Flip */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flipped {
  transform: rotateY(180deg);
}
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-weight: 500;
}
.flip-front {
  background-color: #1f2937; /* gray-800 */
}
.flip-back {
  background-color: #4f46e5; /* indigo-600 */
  transform: rotateY(180deg);
}

/* 📜 Scroll personnalisés */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}
.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* 🔠 Typo */
body {
  font-family: 'Aldrich', sans-serif;
}

/* 🎬 Animation 3D */
.perspective {
  perspective: 1000px;
}
.transform-style-preserve-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

/* 🔃 Smooth Scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 128px; /* hauteur exacte de ta navbar */
}

/* 🖼️ Parallax Background */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  /* Désactive l'effet parallax sur mobile (meilleure perf & compatibilité) */
  .parallax-bg {
    background-attachment: scroll;
  }
}


/* 🎨 Thème clair */
body {
  background-color: white;
  color: #1a1a1a; /* noir doux */
}

/* 🌈 Couleurs typographiques */
.text-violet {
  color: #7c3aed; /* violet-600 */
}

.text-gray-dark {
  color: #4b5563; /* gris foncé */
}

.text-black {
  color: #000000;
}

/* 🔤 Titres */
.heading-violet {
  color: #7c3aed;
  font-weight: bold;
}

.heading-black {
  color: #000;
  font-weight: bold;
}

.heading-gray-dark {
  color: #4b5563;
  font-weight: bold;
}

/* 🖼️ Sections sur fond blanc */
.section-white {
  background-color: white;
}

/* 🟣 Boutons en violet */
.btn-violet {
  background-color: #7c3aed;
  color: white;
}
.btn-violet:hover {
  background-color: #6d28d9;
}

/* 🧾 FAQ etc. bordures claires */
.border-light-gray {
  border-color: #d1d5db; /* gray-300 */
}