/*
 * CSS UNITS FIXES - INOVATIO v3.4
 * Corrections des unités CSS manquantes et optimisations d'affichage
 */

/* ===== CORRECTION UNITÉS CSS ===== */

/* S'assurer que toutes les valeurs de positionnement ont des unités appropriées */
.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;
}

/* Correction spécifique pour les pôles d'expertise */
.expertise-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* S'assurer que l'image de fond s'affiche correctement */
.expertise-bg[style*="background-image"] {
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

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

/* Correction des positionnements sans unités */
[style*="top: 0"],
[style*="left: 0"],
[style*="right: 0"],
[style*="bottom: 0"] {
    /* Ces valeurs sont déjà correctes car 0 n'a pas besoin d'unité */
}

/* Corrections spécifiques pour les éléments avec positionnement négatif */
[style*="top: -"] {
    /* Forcer l'unité px pour les valeurs négatives */
}

.expertise-bg[style*="top: -4"] {
    top: -4px !important;
}

.expertise-bg[style*="left: -4"] {
    left: -4px !important;
}

.expertise-bg[style*="right: -4"] {
    right: -4px !important;
}

.expertise-bg[style*="bottom: -4"] {
    bottom: -4px !important;
}

/* ===== OPTIMISATIONS AFFICHAGE BACKGROUNDS ===== */

/* S'assurer que les images de pôles d'expertise s'affichent */
.expertise-bg {
    min-height: 200px !important;
    width: 100% !important;
}

/* Debug : bordure temporaire pour voir si l'élément existe */
.expertise-bg[style*="img/"] {
    border: 1px solid rgba(255,0,0,0.2) !important; /* À supprimer en production */
}

/* Optimisation des images de fond pour différents pôles */
.expertise-bg[style*="strategie.png"] {
    background-color: rgba(0, 123, 255, 0.1) !important; /* Fallback bleu */
}

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

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

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

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

/* ===== RESPONSIVE IMPROVEMENTS ===== */

@media (max-width: 768px) {
    .expertise-card {
        width: 95% !important;
        margin: 0 auto !important;
    }
    
    .expertise-bg {
        min-height: 150px !important;
    }
}

/* ===== UTF-8 SUPPORT OPTIMIZATION ===== */

/* S'assurer que les emojis et accents s'affichent correctement */
body, 
.expertise-content,
.section-title,
.section-subtitle {
    font-family: 'Sansation', 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', Arial, sans-serif !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Support emoji amélioré */
.expertise-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, sans-serif !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
}

/* ===== DEBUG MODE (à supprimer en production) ===== */

/* Afficher les éléments avec background-image manquant */
.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 manquante" !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;
}