/* ==========================================
   CSS RESPONSIVE MOBILE - LES BUREAUX DE BRUNO
   À ajouter APRÈS le style.css principal
   ========================================== */

/* === MEDIA QUERIES MOBILE === */

/* Tablettes et petits écrans (max 992px) */
@media (max-width: 992px) {
    
    /* Container */
    .container-fluid {
        padding: 0 20px;
    }
    
    /* Header - Les styles sont gérés par menu-hamburger.css */
    
    /* Hero */
    .hero-modern,
    .hero-content-modern {
        min-height: 560px;
        height: auto;
    }
    
    .hero-content-modern h1 {
        font-size: clamp(2rem, 7vw, 2.75rem);
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-content-modern {
        padding: 56px 0;
    }

    .hero-content-modern .hero-ctas {
        gap: 12px;
    }
    
    /* Grilles 3 colonnes -> 2 colonnes */
    .services-grid,
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Product grid */
    .products-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Product detail */
    .product-layout-modern {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "heading" "gallery" "purchase" "context";
        grid-template-rows: auto auto auto auto;
        gap: 0;
    }
    
    .product-gallery-modern {
        position: static;
    }
    
    .main-image-modern {
        height: 400px;
    }
}

/* Smartphones (max 768px) */
@media (max-width: 768px) {
    
    /* Typographie */
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Hero */
    .hero-modern,
    .hero-content-modern {
        min-height: 480px;
        height: auto;
    }
    
    .hero-content-modern h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .hero-content-modern .hero-ctas {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 360px;
    }
    
    .btn-hero,
    .hero-content-modern .btn-secondary {
        padding: 12px 25px;
        font-size: 0.9rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Sections */
    section {
        padding: 40px 0;
    }
    
    /* Grilles 2 colonnes -> 1 colonne */
    .services-grid,
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid-modern {
        grid-template-columns: 1fr;
    }
    
    /* Cards */
    .service-card,
    .category-card {
        padding: 30px 20px;
    }
    
    .service-icon {
        font-size: 2.5rem;
    }
    
    /* Product cards */
    .product-card {
        max-width: 100%;
    }
    
    .product-image-container {
        height: 250px;
    }
    
    /* Product detail */
    .product-heading-modern h1, .product-info-modern h1 {
        font-size: 1.75rem;
    }
    
    .product-price-modern {
        font-size: 2.2rem;
    }
    
    .main-image-modern {
        height: 350px;
    }
    
    .thumbnail-gallery-modern {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .thumbnail {
        height: 80px;
    }

    .thumbnail-button {
        height: 80px;
    }
    
    /* About */
    .about-box {
        padding: 30px 20px;
    }
    
    .about-icon {
        font-size: 2.5rem;
    }
    
    /* Contact */
    .contact-modern {
        padding: 40px 0;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .contact-item {
        padding: 25px;
    }
}

/* Petits smartphones (max 576px) */
@media (max-width: 576px) {
    
    /* Container */
    .container {
        padding: 0 15px;
    }
    
    .container-fluid {
        padding: 0 15px;
    }
    
    /* Header */
    header {
        padding: 10px 0;
    }
    
    .header-content {
        padding: 10px 0;
    }
    
    .logo {
        gap: 8px;
    }
    
    .logo-icon {
        width: 40px;
        height: 40px;
    }
    
    .logo-text strong {
        font-size: 0.95rem;
    }
    
    .logo-text span {
        font-size: 0.75rem;
    }
    
    .btn-devis-header {
        font-size: 0.8rem;
        padding: 10px 15px;
    }

    .header-phone,
    .btn-devis-header,
    .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    
    nav a {
        font-size: 0.9rem;
        padding: 12px 10px;
    }
    
    /* Hero */
    .hero-modern,
    .hero-content-modern {
        min-height: 430px;
        height: auto;
    }
    
    .hero-content-modern h1 {
        font-size: clamp(1.4rem, 8vw, 1.8rem);
        line-height: 1.14;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
        max-width: 34rem;
    }
    
    /* Section title */
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    /* Sections */
    section {
        padding: 30px 0;
    }
    
    /* Categories */
    .categories-grid {
        gap: 15px;
    }
    
    .category-card {
        padding: 40px 20px;
    }
    
    .category-card h3 {
        font-size: 1.2rem;
    }
    
    /* Service cards */
    .service-card {
        padding: 25px 15px;
    }
    
    .service-icon {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .service-card h3 {
        font-size: 1.1rem;
    }
    
    .service-card p {
        font-size: 0.9rem;
    }
    
    /* Products */
    .products-grid-modern {
        gap: 20px;
    }
    
    .product-card {
        border-radius: 6px;
    }
    
    .product-image-container {
        height: 220px;
    }
    
    .product-details {
        padding: 15px;
    }
    
    .product-details h3 {
        font-size: 1.1rem;
    }
    
    .price {
        font-size: 1.4rem;
    }
    
    .description {
        font-size: 0.85rem;
    }
    
    /* Catalog filters */
    .catalog-categories-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    
    .category-filter-block {
        min-height: 84px;
        padding: 15px;
    }

    .category-filter-block:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    
    .category-filter-block h3 {
        font-size: 1rem;
    }
    
    .catalog-header-simple {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .products-count,
    .products-sort {
        width: 100%;
    }
    
    .products-sort select {
        width: 100%;
        padding: 12px;
    }
    
    /* Product detail */
    .breadcrumb-modern {
        font-size: 0.8rem;
        padding: 12px 0;
    }
    
    .product-detail-modern {
        padding: 30px 0;
    }
    
    .product-heading-modern h1, .product-info-modern h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .product-stock-badge {
        font-size: 0.85rem;
        padding: 6px 12px;
        margin-bottom: 15px;
    }
    
    .product-price-modern {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .product-description-modern {
        margin-bottom: 20px;
    }
    
    .product-description-modern p {
        font-size: 0.95rem;
    }
    
    .main-image-modern {
        height: 280px;
        min-height: 0;
        margin-bottom: 15px;
        overflow: hidden;
    }
    
    .thumbnail-gallery-modern {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 6px;
    }
    
    .thumbnail {
        height: 100%;
        object-fit: contain;
    }

    .thumbnail-button {
        height: 52px;
    }
    
    .product-specifications > div { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
    
    .btn-devis-product {
        padding: 15px 20px;
        font-size: 0.95rem;
    }
    
    /* About */
    .about-section {
        padding: 30px 0;
    }
    
    .about-box {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
    }
    
    .about-icon {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .about-content h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .about-content p {
        font-size: 0.9rem;
    }
    
    /* Contact */
    .contact-modern {
        padding: 30px 0;
    }
    
    .contact-grid {
        gap: 20px;
    }
    
    .contact-item {
        padding: 20px;
    }
    
    .contact-item strong {
        font-size: 1rem;
    }
    
    .contact-item p {
        font-size: 0.9rem;
    }
    
    /* Contact page */
    .page-header-modern h1 {
        font-size: 1.5rem;
    }
    
    .contact-section-page {
        padding: 30px 0;
    }
    
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-detail {
        gap: 15px;
    }
    
    .contact-icon {
        font-size: 1.5rem;
    }
    
    .contact-text strong {
        font-size: 1rem;
    }
    
    .contact-form-box {
        padding: 25px 15px;
    }
    
    .contact-form-box h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 12px;
        font-size: 1rem;
    }
    
    .btn-submit-contact {
        padding: 14px;
        font-size: 0.95rem;
    }
    
    /* Footer */
    .footer-modern {
        padding: 30px 0;
    }
    
    .footer-content {
        text-align: center;
    }
    
    .footer-left strong {
        font-size: 1rem;
    }
    
    .footer-left p {
        font-size: 0.9rem;
    }

    .analytics-consent {
        right: 12px;
        bottom: 12px;
        left: 12px;
        display: block;
        padding: 18px;
    }

    .analytics-consent__actions {
        margin-top: 16px;
    }
    
    /* Buttons généraux */
    .btn-voir-plus,
    .btn-primary,
    .btn-secondary {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    
    /* Admin */
    .admin-container {
        padding: 20px 15px;
    }
    
    .admin-container h1 {
        font-size: 1.5rem;
    }
    
    .form-group label {
        font-size: 0.95rem;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 1rem;
        padding: 12px;
    }
    
    .btn-submit {
        padding: 14px;
        font-size: 1rem;
    }
    
    .image-preview {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Très petits écrans (max 400px) */
@media (max-width: 400px) {
    
    .hero-modern,
    .hero-content-modern {
        min-height: 400px;
        height: auto;
    }
    
    .hero-content-modern h1 {
        font-size: clamp(1.2rem, 8vw, 1.5rem);
    }
    
    .hero-subtitle {
        font-size: 0.8rem;
    }
    
    .btn-hero {
        font-size: 0.85rem;
        padding: 10px 20px;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    .category-card {
        padding: 30px 15px;
    }
    
    .product-image-container {
        height: 200px;
    }
    
    .main-image-modern {
        height: 260px;
    }
    
    .thumbnail-gallery-modern {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    }
    
    .product-heading-modern h1, .product-info-modern h1 {
        font-size: 1.3rem;
    }
    
    .product-price-modern {
        font-size: 1.8rem;
    }
}

/* === FIX POUR LES IMAGES === */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .product-image {
        object-fit: cover;
        width: 100%;
    }

    .main-image-modern img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        display: block;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .products-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === FIX POUR LE TEXTE === */
@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
    
    p {
        line-height: 1.5;
    }
}

/* === VIEWPORT ET ZOOM === */
/* Ces règles empêchent le zoom automatique sur mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Empêche le zoom sur iOS */
    }
}