/**
 * Styles pour le bloc d'accroche
 * Design marketing avec effets visuels avancés
 */

.accroche-block {
    position: relative;
    font-family: inherit;
}

/* Conteneur principal avec position relative pour les éléments absolus */
.accroche-block .relative {
    position: relative;
}

/* Effets hover sur le bouton */
.accroche-block a[class*="bg-white"]:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Animation d'entrée pour les images */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.accroche-block .order-1 {
    animation: slideInFromRight 0.8s ease-out;
}

.accroche-block .order-2 {
    animation: slideInFromLeft 0.6s ease-out;
}

/* Effet de parallaxe subtil sur l'image de fond */
.accroche-block .absolute.bottom-0 {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateX(-50%) translateY(50%);
    }
    50% {
        transform: translateX(-50%) translateY(45%);
    }
}

/* Effets hover sur les images */
.accroche-block img:hover {
    filter: brightness(1.05) saturate(1.1);
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 1023px) {
    .accroche-block .order-1 {
        text-align: center;
    }
    
    .accroche-block .order-2 {
        text-align: center;
    }
    
    /* Ajustement des espacements sur mobile */
    .accroche-block .space-y-6 {
        @apply space-y-4;
    }
    
    /* Réduction de la taille des éléments décoratifs sur mobile */
    .accroche-block .w-20 {
        @apply w-12 h-12;
    }
    
    .accroche-block .w-12 {
        @apply w-8 h-8;
    }
}

@media (max-width: 767px) {
    /* Padding réduit sur très petit écran */
    .accroche-block .p-12 {
        @apply p-6;
    }
    
    /* Masquer l'image décorative sur mobile pour les performances */
    .accroche-block .absolute.bottom-0 {
        display: none;
    }
    
    /* Réduction de l'effet de profondeur sur mobile */
    .accroche-block .absolute.-top-6.-left-6 {
        @apply -top-3 -left-3 opacity-30;
    }
}

/* Amélioration des transitions */
.accroche-block * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de survol sur l'ensemble du bloc */
.accroche-block:hover .transform {
    transform: scale(1.02);
}

/* Optimisation des z-index pour éviter les conflits */
.accroche-block .z-5 {
    z-index: 5;
}

.accroche-block .z-10 {
    z-index: 10;
}

.accroche-block .z-20 {
    z-index: 20;
}

/* Amélioration de l'accessibilité */
.accroche-block a:focus {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Animation pour les éléments décoratifs */
.accroche-block .absolute.top-8 {
    animation: pulse 4s ease-in-out infinite;
}

.accroche-block .absolute.bottom-8 {
    animation: pulse 4s ease-in-out infinite 2s;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(1.1);
    }
}

/* Gradient overlay amélioré */
.accroche-block .bg-gradient-to-br {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* Effet de profondeur pour le conteneur principal */
.accroche-block .container > div {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Responsive pour les grandes images */
@media (min-width: 1024px) {
    .accroche-block .max-w-none img {
        max-width: 450px;
    }
}

@media (min-width: 1280px) {
    .accroche-block .max-w-none img {
        max-width: 500px;
    }
}

@media (min-width: 1536px) {
    .accroche-block .max-w-none img {
        max-width: 550px;
    }
}

/* Animation d'apparition progressive */
.accroche-block {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Amélioration du contraste pour l'accessibilité */
.accroche-block .opacity-90 {
    filter: contrast(1.1);
}

/* Effet de lueur subtile sur le bouton */
.accroche-block a[class*="bg-white"] {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.accroche-block a[class*="bg-white"]:hover {
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
}