/* ==========================================================================
   CORRECTIONS RESPONSIVE CIBLÉES POUR AUTOPURE
   Corrige uniquement les problèmes de centrage sans affecter les styles existants
   ========================================================================== */

/* ==========================================================================
   1. CORRECTIONS GÉNÉRALES POUR LE CENTRAGE UNIQUEMENT
   ========================================================================== */

/* Empêcher le débordement horizontal */
html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* Box-sizing pour tous les éléments */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. CORRECTIONS SPÉCIFIQUES POUR LE CENTRAGE MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Contenu principal centré sans affecter la sidebar */
    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Correction uniquement pour les conteneurs de page principaux */
    .home-content,
    .services-content,
    .reservation-content,
    .avis-content {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Sections spécifiques nécessitant un centrage */
    .story-section,
    .values-section,
    .cta-section,
    .service-section {
        width: 100% !important;
        max-width: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Grilles responsive sans casser les styles */
    .values-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Cards centrées */
    .value-card,
    .service-card {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Images responsive */
    .main-logo,
    .service-image {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Conteneurs de texte centrés */
    .story-content,
    .service-description {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   3. CORRECTIONS SPÉCIFIQUES POUR LES PAGES DE SERVICES
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Page des services extérieurs */
    .exterior-services,
    .service-unavailable-banner {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Cartes de prix centrées */
    .pricing-cards,
    .service-cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .pricing-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   4. CORRECTIONS POUR LA PAGE D'ACCUEIL SPÉCIFIQUEMENT
   ========================================================================== */

@media (max-width: 768px) {
    
    .home-logo {
        text-align: center !important;
        width: 100% !important;
        padding: 20px 0 !important;
        margin: 0 !important;
    }
    
    .main-logo {
        max-width: 200px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .story-highlight {
        font-size: 1.2rem !important;
        padding: 20px 15px !important;
        margin: 15px 0 !important;
        text-align: center !important;
    }
    
    .cta-button {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 20px auto !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   5. CORRECTIONS POUR LES RÉSERVATIONS
   ========================================================================== */

@media (max-width: 768px) {
    
    .reservation-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .calendar-container {
        width: 100% !important;
        overflow-x: auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   6. CORRECTIONS POUR LES AVIS
   ========================================================================== */

@media (max-width: 768px) {
    
    .reviews-container,
    .review-form-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .review-card {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   7. EXCLUSIONS POUR PRÉSERVER LES STYLES EXISTANTS
   ========================================================================== */

/* Les éléments suivants NE SONT PAS affectés par ces corrections :
   - .sidebar (préservation complète du style)
   - .mobile-menu-toggle (préservation du menu hamburger)
   - .login-container, .register-container, .auth-form (préservation des formulaires d'auth)
   - .form-group input (préservation des border-radius arrondis)
   - Tous les inputs des pages d'authentification gardent leurs styles originaux
*/

/* ==========================================================================
   8. MÉDIA QUERIES POUR TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 480px) {
    
    .main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .story-section,
    .values-section,
    .service-section {
        padding: 15px 10px !important;
    }
    
    h1 {
        font-size: 1.6rem !important;
    }
    
    h2 {
        font-size: 1.4rem !important;
    }
    
    .story-highlight {
        font-size: 1.1rem !important;
        padding: 15px 10px !important;
    }
}

/* ==========================================================================
   9. CORRECTIONS D'URGENCE MINIMALES
   ========================================================================== */

/* Force uniquement la correction des débordements critiques */
@media (max-width: 768px) {
    
    /* Éléments qui causent vraiment des débordements */
    body, html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Conteneurs principaux seulement */
    .main-content,
    .home-content,
    .services-content {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Éviter les débordements sur les conteneurs de contenu */
    .content-wrapper,
    .page-content,
    .section-content {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}