/* 1. S'assurer que tout le texte a un contraste suffisant */
body, p, h1, h2, h3, h4, h5, h6, span, div {
  color: #333333; /* Texte foncé par défaut pour assurer la lisibilité */
}
.text-blanc{
  color: #FFFFFF;
  font-weight: bold;
}
a, button{
  color: #FFFFFF; /* Texte foncé par défaut pour assurer la lisibilité */
}

.button-text{
  color:#FFFFFF;
}

/* 2. Pour les sections avec fond clair */
.bg-white, .bg-gray-50, .bg-gray-100, section {
  color: #333333;
}

/* 3. Pour les sections avec fond sombre ou coloré - forcer le texte en blanc */
.bg-primary, .bg-accent-1, .bg-accent-2, .bg-gradient-to-r, .bg-gradient-to-b, .bg-primary, [class*="from-"], [class*="to-"] {
  color: #FFFFFF !important; /* Forcer le texte en blanc */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Ajouter une ombre pour augmenter la lisibilité */
}

/* 4. Assurer que les placeholders d'images sont visibles */
.placeholder-img {
  background-color: #f0f0f0 !important; /* Fond gris clair */
  border: 1px dashed #888888 !important; /* Bordure pointillée */
  color: #666666 !important; /* Texte gris foncé */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* 5. Améliorer la visibilité des cartes */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 6. Assurer la visibilité des boutons */
.btn {
  font-weight: bold !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
} */

 .btn-primary, .btn-accent {
  color: white !important;
}

/* 7. Correction pour la section de citation */
.textC-accent-1 {
  color: #3498DB !important; /* S'assurer que le fond est bleu */
}




.bg-accent-2 p, .bg-accent-2 h2, .bg-accent-2 span {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}


.bg-gradient-to-r p, .bg-gradient-to-r h2, .bg-gradient-to-r span {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
} */

/* 9. Assurer que les icônes sont visibles */
 svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* 10. Correction pour les images manquantes */
img[alt]:not([src]), img:not([src]) {
  position: relative;
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background-color: #f0f0f0;
  border: 1px dashed #888888;
}

img[alt]:not([src])::after, img:not([src])::after {
  content: attr(alt) " (image non disponible)";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 14px;
  padding: 10px;
  text-align: center;
}
.btn-s-bg{
  color: #E30613;
  border: 2px solid #E30613;
}
/* 8. Correction pour la section CTA avec dégradé */
.bg-gradient-to-r, .bg-primary {
  background: linear-gradient(to right, #E30613, #9b1414) !important;
}
/* Styles CSS pour le bouton moderne */
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #E30613;
  color: white;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.btn-modern:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-modern .shine-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}

.btn-modern:hover .shine-effect {
  transform: translateX(100%);
}

.btn-modern .button-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.btn-modern .button-icon {
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.btn-modern:hover .button-icon {
  transform: scale(1.1);
}

.btn-modern .button-text {
  transition: all 0.3s ease;
}

.btn-modern:hover .button-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.btn-modern .arrow-icon {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.btn-modern:hover .arrow-icon {
  transform: translateX(4px);
}

/* Variante verte pour les boutons secondaires */
.btn-modern.btn-accent {
  background-color: #27AE60;
}

/* Variante plus petite */
.btn-modern.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* Variante plus grande */
.btn-modern.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

/* Conteneur pour garder l'effet dans les limites de l'image */
.image-hover-container {
  position: relative;
  overflow: hidden;
}

/* Effet de base pour l'image */
.image-hover-effect {
  transform-origin: center;
  transition: all 0.5s ease-in-out;
}

/* Animation au survol */
.image-hover-container:hover .image-hover-effect {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.1);
}

/* Overlay au survol */
.image-hover-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(227, 6, 19, 0), rgba(227, 6, 19, 0.2));
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.image-hover-container:hover::after {
  opacity: 1;
}