/* ===== DISPLAY FLEX ===== */
.flex {
  display: flex;
}

/* ===== JUSTIFY-CONTENT ===== */
.justify-center {
  justify-content: center;
}

/* ===== ALIGN-ITEMS ===== */
.items-center {
  align-items: center;
}

/* ===== GRID COLUMNS ===== */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ===== MARGINS TOP MANQUANTS ===== */
.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

/* ===== PADDING HORIZONTAL ===== */
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ===== COLORS GRAY MANQUANTES ===== */
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

/* ===== OPACITÉ TRANSLATE ===== */
.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-8 {
  --tw-translate-y: 2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ===== DURÉES DE TRANSITION ===== */
.duration-700 {
  transition-duration: 700ms;
}

/* ===== RESPONSIVE MD ===== */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
}

/* ===== RESPONSIVE LG ===== */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ==========================================
   CLASSES MANQUANTES POUR SECTION "PROCHAINES ÉTAPES"
   ========================================== */

/* ===== BACKGROUND COLORS MANQUANTS ===== */
.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-purple-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.bg-pink-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(190 24 93 / var(--tw-bg-opacity, 1));
}

.bg-orange-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}

/* ===== GRADIENTS TO DARK VARIANTS ===== */
.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-purple-700 {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-pink-700 {
  --tw-gradient-to: #be185d var(--tw-gradient-to-position);
}

.to-orange-700 {
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}

/* ===== TEXT COLORS LIGHT VARIANTS ===== */
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}

.text-pink-100 {
  --tw-text-opacity: 1;
  color: rgb(252 231 243 / var(--tw-text-opacity, 1));
}

.text-orange-100 {
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}

/* ===== OPACITY VARIANTS POUR BG ===== */
.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}

/* ===== Z-INDEX ===== */
.z-10 {
  z-index: 10;
}

/* ===== TAILLE DE TEXTE 9XL ===== */
.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

/* ===== TAILLE DE TEXTE 3XL ===== */
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

/* ===== RELATIVE ET ABSOLUTE POSITIONING ===== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/* ===== OVERFLOW ===== */
.overflow-hidden {
  overflow: hidden;
}

/* ===== RESPONSIVE MD GRID-COLS-2 ===== */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}