/* ==========================================================================
   RESPONSIVE TABLET - 768px à 992px
   ========================================================================== */

/* HERO SECTIONS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .hero, .energy-hero, .astro-hero, .product-hero, .methodology-hero,
    .vintage-hero, .matrix-hero, .esphome-hero, .domotique-hero, 
    .rpi-hero, .ha-hero, .megohm-hero {
        height: 40vh;
        min-height: 240px;
    }

    .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: 2.4rem;
    }
    
    .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.2rem;
    }

    .astro-hero {
        height: 45vh;
        min-height: 270px;
    }
}

/* NAVIGATION - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .secondary-buttons {
        margin-top: 0;
    }
    
    .tab-navigation {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        justify-content: flex-start;
    }

    .tab-btn {
        min-width: auto;
        white-space: nowrap;
        padding: 9px 14px;
        font-size: 0.9rem;
    }
}

/* GRILLES ET LAYOUTS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-grid, .device-grid, .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-vignettes-grid, .budget-vignettes-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .steps-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .innovation-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .photo-gallery, .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* PRODUITS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .product-grid {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
    }
    
    .product-grid .product-image {
        flex: 0 0 40%;
        max-width: 40%;
    }
    
    .product-grid .product-info {
        flex: 1;
    }
    
    .product-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }
    
    .product-container .product-image {
        flex: 0 0 auto;
        width: 45%;
    }
    
    .product-container .product-info {
        flex: 1;
    }

    .product-item {
        min-height: 480px;
    }
    
    .product-item .product-img {
        height: 220px;
    }
    
    .product-item-content {
        height: calc(100% - 220px);
        padding: 22px;
    }
    
    .product-item-content h3 {
        font-size: 1.25rem;
        min-height: 48px;
    }
}

/* CONNEXIONS ET ARCHITECTURE - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .connection-layout {
        flex-direction: row;
        gap: 25px;
    }
    
    .connection-diagram {
        flex: 2;
    }
    
    .connection-details {
        flex: 1;
        padding-left: 20px;
    }
    
    .architecture-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pcb-features {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
}

/* PROCESS ET ÉTAPES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .solution-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .flow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .timeline-year {
        margin-bottom: 15px;
        align-self: flex-start;
    }
}

/* SPÉCIFICATIONS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .pcb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .diagrams-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .performance-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .warranty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PRICING - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .discount-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CONTACT - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-info, .contact-form {
        padding: 30px;
    }
}

/* GALERIES ET VUES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .project-view-grid {
        grid-template-columns: 1fr;
    }
    
    .exploded-view-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .exploded-view-item.reverse {
        direction: ltr;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .image-zoom-area {
        min-height: 180px;
    }
}

/* ANNOTATIONS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .annotation-tooltip {
        width: 220px;
        font-size: 0.9rem;
    }
    
    .annotation-legend {
        padding: 22px;
    }
    
    .annotation-legend li {
        font-size: 0.92rem;
        padding: 9px;
    }
}

/* DASHBOARD ET INTÉGRATIONS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .dashboard-example {
        flex-direction: row;
    }
    
    .dashboard-image {
        flex: 2;
    }
    
    .dashboard-description {
        flex: 1;
    }
    
    .integration-cta {
        flex-direction: row;
        gap: 15px;
    }
}

/* TABLEAUX - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .comparison-table {
        font-size: 0.95rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 10px;
    }
    
    .rpi-comparison-table {
        font-size: 0.9rem;
    }
    
    .rpi-comparison-table th,
    .rpi-comparison-table td {
        padding: 12px;
    }
}

/* SERVICES ET WARRANTY - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .warranty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CTA ET BOUTONS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }
    
    .hero-buttons {
        flex-direction: row;
        gap: 20px;
    }
    
    .btn-group {
        flex-direction: row;
        gap: 15px;
    }
}

/* SECTIONS SPÉCIALISÉES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .tech-pros-cons {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .tech-recommendation {
        flex-direction: row;
        text-align: left;
        gap: 20px;
    }
    
    .recommendation-icon {
        font-size: 2.8rem;
    }
    
    .pro-options-tabs {
        margin: 18px 0;
    }
    
    .pro-option-tab {
        padding: 18px;
    }
}

/* BLOG ET ARTICLES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .blog-stats {
        flex-direction: row;
        gap: 30px;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .featured-article {
        grid-template-columns: 1fr 1fr;
    }
    
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* COMMENTAIRES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .comment-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .comment-helpful {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .comments-container {
        padding: 0 15px;
    }
    
    .comment-form, .comment-item {
        padding: 25px;
    }
}

/* STATUS ET DOCUMENTS - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .document-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .connector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* RESPONSIVE FIXES - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .btn-back {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 15px;
        display: inline-flex;
    }
    
    .methodology-step h2 {
        font-size: 1.8rem;
    }
    
    .process-detail h3 {
        font-size: 1.4rem;
    }
    
    .section-header h2 {
        font-size: 2.2rem;
    }
}


/* ===== TABLET (À ajouter dans tablet.css) ===== */
@media (min-width: 768px) and (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .comparison-table {
        font-size: 0.9rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 10px;
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .discount-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cta-highlight > div[style*="display: grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}