/* =====================================================
   FIX COMPATIBILITÉ ARRIÈRE-PLANS
   Compatible avec TOUS les navigateurs et appareils
   ===================================================== */

/* =====================================================
   RÈGLES UNIVERSELLES POUR TOUS LES APPAREILS
   ===================================================== */

/* Fix pour les navigateurs anciens */
* {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* =====================================================
   FIX SPÉCIFIQUE POUR LES PAGES
   ===================================================== */

/* Page d'accueil - Index */
body.index-page,
body[data-page="index"] {
    background-image: url('../images/index.jpg') !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
}

/* Page réservation */
body.reservation-page,
body[data-page="reservation"] {
    background-image: url('../images/reservation.jpg') !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
}

/* Page services */
body.services-page,
body[data-page="services"] {
    background-image: url('../images/services.jpg') !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
}

/* Page contact */
body.contact-page,
body[data-page="contact"] {
    background-image: url('../images/contact.jpg') !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
}

/* Page secteur */
body.secteur-page,
body[data-page="secteur"] {
    background-image: url('../images/secteur.jpg') !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
}

/* =====================================================
   FIX POUR TABLETTES ET MOBILES
   ===================================================== */

/* Tablettes (portrait et paysage) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* Fix spécifique pour tablettes */
    body {
        background-attachment: scroll !important; /* Fix pour iOS */
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        min-height: 100vh !important;
    }
    
    /* Page d'accueil sur tablette */
    body.index-page,
    body[data-page="index"] {
        background-image: url('../images/index.jpg') !important;
    }
    
    /* Page réservation sur tablette */
    body.reservation-page,
    body[data-page="reservation"] {
        background-image: url('../images/reservation.jpg') !important;
    }
    
    /* Page services sur tablette */
    body.services-page,
    body[data-page="services"] {
        background-image: url('../images/services.jpg') !important;
    }
    
    /* Page contact sur tablette */
    body.contact-page,
    body[data-page="contact"] {
        background-image: url('../images/contact.jpg') !important;
    }
    
    /* Page secteur sur tablette */
    body.secteur-page,
    body[data-page="secteur"] {
        background-image: url('../images/secteur.jpg') !important;
    }
}

/* =====================================================
   FIX POUR MOBILES
   ===================================================== */

@media only screen and (max-width: 767px) {
    
    /* Fix spécifique pour mobiles */
    body {
        background-attachment: scroll !important; /* Fix pour iOS */
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        min-height: 100vh !important;
    }
    
    /* Page d'accueil sur mobile */
    body.index-page,
    body[data-page="index"] {
        background-image: url('../imagesmobile/index.jpg') !important;
    }
    
    /* Page réservation sur mobile */
    body.reservation-page,
    body[data-page="reservation"] {
        background-image: url('../imagesmobile/reservation.jpg') !important;
    }
    
    /* Page services sur mobile */
    body.services-page,
    body[data-page="services"] {
        background-image: url('../imagesmobile/services.jpg') !important;
    }
    
    /* Page contact sur mobile */
    body.contact-page,
    body[data-page="contact"] {
        background-image: url('../imagesmobile/contact.jpg') !important;
    }
    
    /* Page secteur sur mobile */
    body.secteur-page,
    body[data-page="secteur"] {
        background-image: url('../imagesmobile/secteur.jpg') !important;
    }
}

/* =====================================================
   FIX POUR NAVIGATEURS ANCIENS
   ===================================================== */

/* Internet Explorer 9 et moins */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    body {
        background-attachment: scroll !important;
        background-size: 100% auto !important;
    }
}

/* Safari ancien */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body {
        background-attachment: scroll !important;
    }
}

/* =====================================================
   FIX POUR FIREFOX
   ===================================================== */

@-moz-document url-prefix() {
    body {
        background-attachment: scroll !important;
    }
}

/* =====================================================
   FALLBACK POUR NAVIGATEURS NON SUPPORTÉS
   ===================================================== */

/* Si l'image ne charge pas, utiliser une couleur de fond */
body {
    background-color: #f0f0f0 !important; /* Couleur de fallback */
}

/* =====================================================
   VÉRIFICATION ET DEBUG
   ===================================================== */

/* Classe de debug pour vérifier que le CSS est chargé */
.bg-debug::before {
    content: "CSS de compatibilité chargé";
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 9999;
    display: none; /* Cacher par défaut */
}

/* Afficher en mode debug */
.debug-mode .bg-debug::before {
    display: block;
}