/*
 * CSS pour les images de background des pôles d'expertise - INOVATIO
 * Optimisation de l'affichage des images de fond
 */

/* ===== EXPERTISE CARDS - BACKGROUNDS ===== */

.expertise-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    min-height: 300px !important;
}

.expertise-bg {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.expertise-card:hover .expertise-bg {
    opacity: 0.9 !important;
}

.expertise-content {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(1px) !important;
}

/* ===== FALLBACKS COLORÉS PAR PÔLE ===== */

/* Si l'image ne charge pas, afficher une couleur de fallback */
.expertise-bg[style*="strategie.png"] {
    background-color: rgba(27, 58, 111, 0.1) !important; /* Bleu Stratégie */
}

.expertise-bg[style*="branding.png"] {
    background-color: rgba(194, 59, 34, 0.1) !important; /* Rouge Branding */
}

.expertise-bg[style*="conception.png"] {
    background-color: rgba(126, 87, 194, 0.1) !important; /* Violet Conception */
}

.expertise-bg[style*="realisation.png"] {
    background-color: rgba(78, 125, 90, 0.1) !important; /* Vert Réalisation */
}

.expertise-bg[style*="activation.png"] {
    background-color: rgba(230, 126, 34, 0.1) !important; /* Orange Activation */
}

/* ===== DEBUG MODE (peut être retiré en production) ===== */

/* Indicateur visuel si l'image ne charge pas */
.expertise-bg:not([style*="background-image"]) {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}

.expertise-bg:not([style*="background-image"])::before {
    content: "⚠️ Image en cours de chargement..." !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #666 !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.9) !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    z-index: 10 !important;
    text-align: center !important;
}

/* ===== RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
    .expertise-card {
        width: 95% !important;
        margin: 0 auto !important;
        min-height: 250px !important;
    }
    
    .expertise-bg {
        min-height: 200px !important;
    }
    
    .expertise-content {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .expertise-card {
        min-height: 200px !important;
    }
    
    .expertise-bg {
        min-height: 150px !important;
    }
}

/* ===== AMÉLIORATION PERFORMANCE ===== */

/* Optimiser le rendu des images */
.expertise-bg {
    will-change: opacity !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important; /* Force GPU acceleration */
}

/* Pre-loading hint pour les images critiques */
.expertise-bg[style*="img/"] {
    image-rendering: auto !important;
    image-rendering: crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* ===== ACCESSIBILITÉ ===== */

/* S'assurer que le contenu reste lisible */
.expertise-content {
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Contraste amélioré au hover */
.expertise-card:hover .expertise-content {
    background: rgba(255, 255, 255, 0.98) !important;
}

/* ===== ANIMATIONS SUBTILES ===== */

@keyframes backgroundFadeIn {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

.expertise-bg {
    animation: backgroundFadeIn 0.5s ease-in-out !important;
}

/* Hover effect pour desktop */
@media (hover: hover) {
    .expertise-card:hover {
        transform: translateY(-2px) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    }
}