/*
===========================================
MAISONS CTL - STYLES RESPONSIVE V1.0
Fichier: /public_html/css/responsive.css
Description: Media queries globales et ajustements responsive.
             Ce fichier centralise tous les breakpoints et modifications
             responsive qui affectent plusieurs composants.
Version: 1.0 - Responsive design complet
Date: Janvier 2025
===========================================
*/

/* ====== DESKTOP LARGE (1400px+) ====== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ====== DESKTOP (1200px - 1399px) ====== */
@media (max-width: 1399px) {
    /* Ajustements si nécessaire */
}

/* ====== LAPTOP (992px - 1199px) ====== */
@media (max-width: 1199px) {
    .py-section {
        padding: 100px 0;
    }
    
    .gallery-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ====== TABLET (768px - 991px) ====== */
@media (max-width: 991px) {
    :root {
        --section-padding-desktop: var(--section-padding-tablet);
    }
    
    .py-section {
        padding: var(--section-padding-tablet) 0;
    }
    
    /* Ajustement des grilles */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Textes */
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }
}

/* ====== MOBILE (768px et moins) ====== */
@media (max-width: 768px) {
    /* Menu mobile */
    #mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-text-primary);
        font-size: 1.5rem;
        cursor: pointer;
    }

    #main-nav {
        display: none;
    }

    /* Bannière de confiance */
    .trust-banner .container {
        gap: 20px;
        font-size: 0.8rem;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 2rem;
    }

    /* WhatsApp */
    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float {
        padding: 15px;
        border-radius: 50%;
    }

    /* Services avec images */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-image {
        height: 180px;
    }
    
    .service-content {
        padding: 20px;
    }

    /* Sections padding */
    .py-section {
        padding: 60px 0;
    }
}

/* ====== MOBILE SMALL (480px et moins) ====== */
@media (max-width: 480px) {
    /* Padding encore réduit */
    .py-section {
        padding: 40px 0;
    }
    
    /* Bannière de confiance en colonne */
    .trust-banner .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .trust-banner span {
        flex: none;
        width: auto;
    }
    
    /* Galerie avec images plus petites */
    .gallery-item {
        height: 180px;
    }
    
    /* Services avec moins de padding */
    .service-content {
        padding: 20px 15px;
    }
    
    .service-image {
        height: 150px;
    }
    
    /* Footer simplifié */
    .footer-content {
        text-align: center;
    }
    
    .footer-nav {
        margin-top: 15px;
    }
    
    .footer-nav a {
        display: block;
        margin: 5px 0;
    }
}

/* ====== TRÈS PETIT MOBILE (360px et moins) ====== */
@media (max-width: 360px) {
    .container {
        padding: 0 10px;
    }
    
    .btn,
    .btn-animated {
        padding: 8px 20px;
        font-size: 0.85rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
    }
}

/* ====== ORIENTATION PAYSAGE MOBILE ====== */
@media (max-height: 600px) and (orientation: landscape) {
    #hero {
        min-height: 100vh;
        padding-top: 60px;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
}

/* ====== PRINT STYLES ====== */
@media print {
    /* Masquer les éléments non nécessaires à l'impression */
    #main-header,
    .trust-banner,
    .whatsapp-float,
    .btn,
    .btn-animated,
    .gallery-overlay,
    video,
    iframe {
        display: none !important;
    }
    
    /* Forcer les couleurs */
    * {
        color: black !important;
        background: white !important;
    }
    
    /* Éviter les coupures de page */
    .service-card,
    .gallery-item {
        page-break-inside: avoid;
    }
    
    /* Ajuster les marges */
    .py-section {
        padding: 20px 0;
    }
}