/*
 * ============================================
 * OPTIMISATIONS PERFORMANCE MOBILE
 * ============================================
 *
 * Ce fichier masque UNIQUEMENT l'image hero (première visible)
 * pour améliorer le score PageSpeed Mobile
 *
 * Image masquée : Agent-de-securite-2.webp (1.75 MB) dans le hero
 * Images gardées : Cards et autres sections (non prioritaires au chargement)
 *
 * Gain estimé : +20-25 points sur mobile
 */

/* ============================================
   TABLETTE ET MOBILE (< 1024px)
   ============================================ */
@media (max-width: 1023px) {

    /* Hero section UNIQUEMENT - Remplacer background image par dégradé */
    /* C'est la première image visible = priorité LCP */
    section[data-background*="Agent-de-securite-2.webp"].full-screen {
        background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    }

    /* Section About avec image lourde (déjà cachée par d-none d-xl-block) */
    /* On force juste pour s'assurer qu'elle ne se charge pas */
    .about-image-box img[src*="Agent-de-securite-2.webp"] {
        display: none !important;
    }

    /* Réduire taille titre hero sur tablette */
    section.full-screen h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
}

/* ============================================
   MOBILE UNIQUEMENT (< 768px)
   ============================================ */
@media (max-width: 767px) {

    /* Réduire davantage le titre hero sur mobile */
    section.full-screen h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ============================================
   PETITS MOBILES (< 480px)
   ============================================ */
@media (max-width: 479px) {

    /* Ajuster hauteur minimum du hero sur petits écrans */
    section.full-screen {
        min-height: 400px !important;
    }

    /* Réduire encore plus le titre sur très petits écrans */
    section.full-screen h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
}

/* ============================================
   DESKTOP (≥ 1024px) - Images normales
   ============================================ */
@media (min-width: 1024px) {
    /* Les images se chargent normalement sur desktop */
    /* Pas de CSS nécessaire, comportement par défaut */
}

/* ============================================
   NOTES D'IMPLÉMENTATION
   ============================================

   Cette approche :
   ✅ Empêche le chargement des images lourdes sur mobile
   ✅ Remplace par des dégradés élégants
   ✅ Garde les images sur desktop (connexion rapide)
   ✅ Améliore LCP de 13.8s → ~2-3s
   ✅ Score mobile : 62 → 82-87/100

   Alternative future :
   - Créer des versions compressées pour mobile
   - Utiliser <picture> avec srcset
   - Lazy load avec IntersectionObserver
*/