/* ==========================================================================
   RESPONSIVE MOBILE - < 768px
   ========================================================================== */

/* HERO SECTIONS - Mobile */
@media (max-width: 768px) {
    .hero, .energy-hero, .astro-hero, .product-hero, .methodology-hero,
    .vintage-hero, .matrix-hero, .esphome-hero, .domotique-hero, 
    .rpi-hero, .ha-hero, .megohm-hero {
        height: 50vh;
        min-height: 240px;
        padding: 20px 15px;
    }
    
    .hero h1, .energy-hero h1, .vintage-hero h1, .matrix-hero h1,
    .esphome-hero h1, .domotique-hero h1, .rpi-hero h1, .ha-hero h1 {
        font-size: 1.9rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .hero p, .energy-hero p, .vintage-hero p, .matrix-hero p,
    .esphome-hero p, .domotique-hero p, .rpi-hero p, .ha-hero p {
        font-size: 1.1rem;
        max-width: 90%;
        margin-bottom: 25px;
        line-height: 1.4;
    }

    /* Hero spécifiques */
    .blog-hero h1, .products-hero h1, .contact-hero h1, .about-hero h1 {
        font-size: 2rem;
    }
    
    .blog-hero p, .products-hero p, .contact-hero p, .about-hero p {
        font-size: 1.1rem;
    }
    
    .astro-hero {
        height: 70vh;
        min-height: 300px;
        padding: 40px 15px;
    }
    
    .astro-title {
        font-size: 2.4rem;
        line-height: 1.1;
        margin-bottom: 15px;
    }
    
    .astro-subtitle {
        font-size: 1.3rem;
    }
    
    .astro-description {
        font-size: 1.1rem;
        max-width: 95%;
        margin-bottom: 30px;
    }

    .matrix-hero h1 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .matrix-hero p {
        font-size: 1.1rem;
        max-width: 90%;
        margin-bottom: 25px;
        line-height: 1.4;
    }
}

/* NAVIGATION - Mobile */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    
    .tab-navigation {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        justify-content: flex-start;
        padding: 10px 15px;
    }

    .tab-btn {
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
        border-radius: 8px;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
    
    .tab-btn-primary {
        order: -1;
        flex: 1 1 100%;
    }
    
    .categories-filter {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .category-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* GRILLES ET LAYOUTS - Mobile */
@media (max-width: 768px) {
    
    .feature-grid, .device-grid, .flow-steps, .advantages-grid,
    .comparison-grid, .benefits-grid, .related-grid, .tech-vignettes-grid,
    .budget-vignettes-grid, .steps-cards-grid, .innovation-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .photo-gallery, .gallery-grid, .model-3d-grid, .project-view-grid {
        grid-template-columns: 1fr;
    }
    
    .exploded-view-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .exploded-view-item.reverse {
        direction: ltr;
    }
    
    .pcb-features {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .services-grid, .warranty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CARTES ET CONTENUS - Mobile */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
    }
    
    .product-image {
        height: auto;
        min-height: 250px;
    }
    
    .product-item {
        min-height: 450px;
    }
    
    .product-item .product-img {
        height: 200px;
    }
    
    .product-item-content h3 {
        font-size: 1.2rem;
        min-height: 45px;
    }
    
    .connection-layout {
        flex-direction: row;
    }
}

/* PROCESS ET ÉTAPES - Mobile */
@media (max-width: 768px) {
    .process-step::after {
        content: '↓';
        right: 50%;
        top: auto;
        bottom: -30px;
        transform: translateX(50%);
    }

    .process-step:last-child::after {
        display: none;
    }
    
    .steps-nav {
        justify-content: flex-start;
    }
    
    .methodology-step h2 {
        font-size: 1.7rem;
    }
    
    .process-detail h3 {
        font-size: 1.3rem;
    }
}

/* ONGLETS - Mobile */
@media (max-width: 768px) {
    .tab-btn.active {
        border: 1px solid var(--primary);
    }
}

/* CONNEXIONS ET DIAGRAMMES - Mobile */
@media (max-width: 768px) {
    .connection-diagram object {
        height: 400px;
    }
    
    .diagram {
        display: block;
    }
    
    .diagram-block {
        margin-bottom: 20px;
    }
    
    .diagram-arrow {
        display: none;
    }
    
    .compatibility-item {
        flex-direction: column;
    }
    
    .compatibility-logo {
        height: 80px;
        width: 100%;
    }
}

/* ALERTES ET WARNINGS - Mobile */
@media (max-width: 768px) {
    .safety-warning {
        flex-direction: column;
    }
    
    .warning-icon {
        font-size: 32px;
        margin-right: 0;
        margin-bottom: 15px;
        text-align: center;
    }
}

/* TABLEAUX - Mobile */
@media (max-width: 768px) {
    .power-table {
        display: block;
        overflow-x: auto;
    }
    
    .comparison-table {
        font-size: 0.9rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 8px;
    }
    
    .rpi-comparison-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .rpi-comparison-table th,
    .rpi-comparison-table td {
        min-width: 120px;
        font-size: 0.8rem;
    }
}



/* INTÉGRATIONS - Mobile */
@media (max-width: 768px) {
    .integration-cta {
        flex-direction: column;
        gap: 15px;
    }
    
    .integration-cta .btn {
        width: 100%;
    }
    
    .dashboard-example {
        flex-direction: row;
    }
    
    .dashboard-image {
        flex: 3;
    }
    
    .dashboard-description {
        flex: 2;
    }
}

/* CTA ET BOUTONS - Mobile */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .secondary-buttons {
        margin-top: 0;
    }
}

/* SPÉCIFICATIONS - Mobile */
@media (max-width: 768px) {
    .specs-grid, .pcb-grid, .diagrams-grid, .enclosure-grid {
        grid-template-columns: 1fr;
    }
    
    .discount-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-overview {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .warranty-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* PRICING - Mobile */
@media (max-width: 768px) {
    .pricing-card.recommended {
        transform: none;
    }
    
    .examples-grid {
        grid-template-columns: 1fr;
    }
    
    .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* GALERIES ET VUES - Mobile */
@media (max-width: 768px) {
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .image-zoom-area {
        min-height: 150px;
    }
}

/* SECTIONS SPÉCIALISÉES - Mobile */
@media (max-width: 768px) {
    .tech-intro-card, .budget-intro-card, .steps-intro-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .tech-intro-icon, .budget-intro-icon, .steps-intro-icon {
        font-size: 2.5rem;
    }
    
    .tech-pros-cons {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tech-recommendation {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .recommendation-icon {
        font-size: 2.5rem;
    }
}

/* CONTACT - Mobile */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-hero h1 {
        font-size: 2.2rem;
    }
    
    .contact-hero p {
        font-size: 1.1rem;
    }
    
    .contact-info, .contact-form {
        padding: 25px;
    }
    
    .info-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .info-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* COMMENTAIRES - Mobile */
@media (max-width: 768px) {
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .comment-helpful {
        flex-wrap: wrap;
    }
    
    .comments-container {
        padding: 0 10px;
    }
    
    .comment-form, .comment-item {
        padding: 20px;
    }
}

/* OVERLAYS ET TESTS - Mobile */
@media (max-width: 768px) {
    .overlay-image {
        width: 120px !important;
        height: 80px !important;
    }
    
    .overlay-text {
        font-size: 10px;
        padding: 10px 5px 5px;
    }
}

/* STATUS ET DOCUMENTS - Mobile */
@media (max-width: 768px) {
    .status-grid, .document-grid, .connector-grid {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVE FIXES - Mobile */
@media (max-width: 768px) {
    .btn-back {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 20px;
        display: inline-flex;
    }
    
    .response-box {
        padding: 15px;
    }
}
/* ===== MOBILE (À ajouter dans mobile.css) ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .comparison-table {
        font-size: 0.85rem;
        overflow-x: auto;
        display: block;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 10px 8px;
        min-width: 120px;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pricing-card {
        padding: 20px;
    }
    
    .unit-price {
        font-size: 1.8rem;
    }
    
    .discount-grid {
        grid-template-columns: 1fr;
    }
    
    .examples-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-highlight {
        padding: 20px;
        margin: 30px 0;
    }
    
    .cta-highlight h3 {
        font-size: 1.3rem;
    }
    
    .cta-highlight > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .quote-form {
        padding: 25px;
        margin: 30px 0;
    }
    
    .checkbox-group {
        gap: 8px;
    }
}