/* 
 * CSS personnalisé pour Job Platform RDC
 * Ajustements visuels et améliorations
 */

/* ==========================================
   SECTION HERO / WELCOME-AREA
   ========================================== */

/* Options de filtre pour l'image de fond - vous pouvez ajuster l'opacité selon vos préférences */
.welcome-area.filter-light::before {
  background: rgba(0, 0, 0, 0.2); /* Filtre léger */
}

.welcome-area.filter-medium::before {
  background: rgba(0, 0, 0, 0.4); /* Filtre moyen (actuel) */
}

.welcome-area.filter-dark::before {
  background: rgba(0, 0, 0, 0.6); /* Filtre foncé */
}

.welcome-area.filter-very-dark::before {
  background: rgba(0, 0, 0, 0.8); /* Filtre très foncé */
}

/* ==========================================
   SECTION WORK PROCESS / MINI
   ========================================== */

/* Options de filtre pour la section "Comment ça marche" */
.mini.filter-light::after {
  background: rgba(0, 0, 0, 0.3); /* Filtre léger */
}

.mini.filter-medium::after {
  background: rgba(0, 0, 0, 0.5); /* Filtre moyen (actuel) */
}

.mini.filter-dark::after {
  background: rgba(0, 0, 0, 0.7); /* Filtre foncé */
}

.mini.filter-very-dark::after {
  background: rgba(0, 0, 0, 0.9); /* Filtre très foncé */
}

/* Pas de filtre pour la section mini */
.mini.no-filter::after {
  display: none;
}

/* Améliorer la lisibilité du texte sur la section work process */
.mini .info h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #ffffff !important;
}

.mini .info p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  color: #f8f9fa !important;
}

/* Améliorer la visibilité des mini-box */
.mini .mini-box {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.mini .mini-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background-color: rgba(255, 255, 255, 1) !important;
}

/* Filtre avec dégradé pour un effet plus sophistiqué */
.welcome-area.gradient-overlay::before {
  background: linear-gradient(
    135deg, 
    rgba(0, 0, 0, 0.6) 0%, 
    rgba(0, 0, 0, 0.3) 50%, 
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* Filtre avec couleur teintée */
.welcome-area.blue-overlay::before {
  background: rgba(30, 58, 138, 0.4); /* Teinte bleue semi-transparente */
}

.welcome-area.teal-overlay::before {
  background: rgba(13, 148, 136, 0.4); /* Teinte teal semi-transparente */
}

/* ==========================================
   AMÉLIORATION DU CONTRASTE DU TEXTE
   ========================================== */

/* Améliorer la lisibilité du texte sur l'image de fond */
.welcome-area .header-text h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #ffffff !important;
}

.welcome-area .header-text p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  color: #f8f9fa !important;
}

/* Améliorer les boutons avec un fond plus visible */
.welcome-area .header-text .btn {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.welcome-area .header-text .btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   CLASSES UTILITAIRES
   ========================================== */

/* Pour changer rapidement l'intensité du filtre via HTML */
.overlay-none::before { background: transparent !important; }
.overlay-light::before { background: rgba(0, 0, 0, 0.2) !important; }
.overlay-medium::before { background: rgba(0, 0, 0, 0.4) !important; }
.overlay-dark::before { background: rgba(0, 0, 0, 0.6) !important; }
.overlay-very-dark::before { background: rgba(0, 0, 0, 0.8) !important; }

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
  /* Sur mobile, on peut réduire légèrement le filtre pour plus de luminosité */
  .welcome-area::before {
    background: rgba(0, 0, 0, 0.3);
  }
  
  .welcome-area .header-text h1 {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
  }
}

/* ==========================================
   ANIMATION OPTIONNELLE
   ========================================== */

/* Animation du filtre au chargement de la page */
.welcome-area::before {
  animation: fadeInOverlay 1s ease-in-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================
   COMMENTAIRES D'UTILISATION
   ========================================== */

/*
COMMENT UTILISER CE FICHIER :

1. Pour changer l'intensité du filtre, ajoutez une classe à .welcome-area :
   - .filter-light (20% d'opacité)
   - .filter-medium (40% d'opacité - par défaut)
   - .filter-dark (60% d'opacité)
   - .filter-very-dark (80% d'opacité)

2. Pour un effet de dégradé : ajoutez .gradient-overlay

3. Pour une teinte colorée : ajoutez .blue-overlay ou .teal-overlay

4. Pour désactiver complètement le filtre : ajoutez .overlay-none

Exemple HTML :
<div class="welcome-area filter-dark gradient-overlay">
  <!-- contenu -->
</div>
*/