/* ============================================
   RESPONSIVE MOBILE - PHASE 2 (Récapitulatif & Devis)
   ============================================ */

/* Tablettes */
@media (max-width: 1024px) {
    /* Tableau récapitulatif */
    .recap-table {
        font-size: 1rem;
    }

    .recap-table th,
    .recap-table td {
        padding: 14px 8px;
        font-size: 0.95rem;
    }

    /* Zone de remise */
    #discountZone {
        gap: 10px;
    }

    #showDiscountInputBtn {
        padding: 5px 12px;
        font-size: 0.95em;
    }

    #discountInput {
        width: 65px;
        padding: 4px 6px;
        font-size: 0.95em;
    }

    #validateDiscountBtn {
        padding: 5px 14px;
        font-size: 0.95em;
    }

    /* Synoptique */
    #vizeoSynoptic,
    .synoptic-container {
        max-width: 100%;
        height: auto;
        min-height: 400px;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    /* Container principal */
    .recap-table-container,
    div[style*="max-width:900px"] {
        padding: 15px !important;
        max-width: 100% !important;
    }

    /* Titre principal */
    h1 {
        font-size: 1.4rem !important;
        margin: 0 0 1rem 0 !important;
    }

    h2 {
        font-size: 1.2rem !important;
        margin-top: 0 !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Section détail de sélection */
    div[style*="max-width:900px"] > div {
        margin-bottom: 8px !important;
        font-size: 0.95rem !important;
    }

    /* Zone de remise - passage en colonne */
    #discountZone {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        gap: 8px !important;
    }

    #showDiscountInputBtn {
        width: 100% !important;
        margin-bottom: 8px !important;
        padding: 10px 14px !important;
        font-size: 0.95em !important;
        border-radius: 8px !important;
    }

    #discountInputWrapper {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #discountInput {
        width: 80px !important;
        padding: 8px 10px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    #validateDiscountBtn {
        margin-left: 10px !important;
        padding: 8px 18px !important;
        font-size: 0.95em !important;
        border-radius: 8px !important;
        min-height: 44px !important;
    }

    /* Tableau récapitulatif responsive */
    .recap-table {
        font-size: 0.85rem !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
    }

    .recap-table thead,
    .recap-table tbody,
    .recap-table tfoot {
        display: table !important;
        width: 100% !important;
    }

    .recap-table thead tr {
        font-size: 0.85rem !important;
    }

    .recap-table th,
    .recap-table td {
        padding: 10px 6px !important;
        font-size: 0.8rem !important;
    }

    /* Masquer la colonne Prix Unitaire sur mobile pour gagner de l'espace */
    .recap-table th:nth-child(3),
    .recap-table td:nth-child(3) {
        display: none !important;
    }

    /* Titres de catégorie */
    .recap-table tr.category-title-row td {
        font-size: 0.9em !important;
        padding: 8px 6px !important;
    }

    /* Lignes de produits associés */
    .recap-table tr.associated-item-row td:first-child {
        padding-left: 15px !important;
        font-size: 0.75rem !important;
    }

    /* Footer du tableau (totaux) */
    .recap-table tfoot tr {
        font-size: 0.9rem !important;
    }

    .recap-table tfoot td {
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
    }

    /* Indicateurs de disponibilité */
    .availability-fixed {
        font-size: 0.75rem !important;
        display: block !important;
        margin-top: 4px !important;
    }

    /* Synoptique mobile */
    #vizeoSynoptic,
    .synoptic-container {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        margin: 12px 0 !important;
    }

    /* Section synoptique */
    div[style*="synoptique"] {
        max-width: 100% !important;
        margin: 20px 0 0 0 !important;
        padding: 0 10px !important;
    }

    /* Titre synoptique */
    div[style*="synoptique"] h3 {
        font-size: 1rem !important;
        margin: 15px 0 8px 0 !important;
        text-align: center !important;
    }

    /* Note sur les câbles */
    div[style*="Câble CAT6"] {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
    }

    /* Style alternatif : cartes empilées pour petits écrans */
    @supports (display: grid) {
        .recap-table.card-mode {
            display: block !important;
        }

        .recap-table.card-mode thead {
            display: none !important;
        }

        .recap-table.card-mode tbody {
            display: block !important;
        }

        .recap-table.card-mode tbody tr {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 8px !important;
            border: 1px solid #e3e7ee !important;
            margin-bottom: 10px !important;
            padding: 12px !important;
            border-radius: 10px !important;
            background: #fff !important;
        }

        .recap-table.card-mode tbody td {
            display: flex !important;
            flex-direction: column !important;
            padding: 4px 0 !important;
            border: none !important;
            text-align: left !important;
        }

        .recap-table.card-mode tbody td::before {
            content: attr(data-label) !important;
            font-weight: 600 !important;
            color: #64748b !important;
            font-size: 0.7rem !important;
            text-transform: uppercase !important;
            margin-bottom: 4px !important;
        }

        .recap-table.card-mode tbody td:first-child {
            grid-column: 1 / -1 !important;
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: #2956c5 !important;
            border-bottom: 1px solid #e3e7ee !important;
            padding-bottom: 8px !important;
            margin-bottom: 4px !important;
        }

        .recap-table.card-mode tbody td:first-child::before {
            display: none !important;
        }

        .recap-table.card-mode .category-title-row {
            grid-column: 1 / -1 !important;
            display: block !important;
            background: #eef3f9 !important;
            padding: 10px !important;
            margin: 10px 0 !important;
            border-radius: 8px !important;
            font-weight: bold !important;
        }

        .recap-table.card-mode .category-title-row td {
            display: block !important;
        }

        .recap-table.card-mode .category-title-row td::before {
            display: none !important;
        }
    }
}

/* Très petits smartphones */
@media (max-width: 375px) {
    .recap-table-container,
    div[style*="max-width:900px"] {
        padding: 10px !important;
    }

    h1 {
        font-size: 1.2rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    .recap-table {
        font-size: 0.8rem !important;
    }

    .recap-table th,
    .recap-table td {
        padding: 8px 4px !important;
        font-size: 0.75rem !important;
    }

    #discountInput {
        width: 70px !important;
        padding: 6px 8px !important;
    }

    #validateDiscountBtn {
        padding: 8px 14px !important;
        font-size: 0.85em !important;
    }

    #vizeoSynoptic,
    .synoptic-container {
        min-height: 200px !important;
    }

    .recap-table tfoot tr {
        font-size: 0.85rem !important;
    }

    .recap-table tfoot td {
        font-size: 0.8rem !important;
    }
}

/* Tablettes en mode paysage */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .recap-table {
        font-size: 0.95rem;
    }

    #vizeoSynoptic,
    .synoptic-container {
        max-width: 100%;
        min-height: 450px;
    }
}

/* Optimisations tactiles pour Phase 2 */
@media (hover: none) and (pointer: coarse) {
    /* Zones tactiles suffisantes */
    #showDiscountInputBtn,
    #validateDiscountBtn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    #discountInput {
        min-height: 44px !important;
        font-size: 16px !important; /* Évite le zoom auto sur iOS */
    }

    /* Pas d'effet hover sur les lignes du tableau */
    .recap-table tbody tr:hover {
        background: inherit !important;
    }

    /* Effet active pour les boutons */
    #showDiscountInputBtn:active,
    #validateDiscountBtn:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }

    /* Améliorer le scroll tactile du tableau */
    .recap-table {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
}

/* Mode impression - garder le tableau complet */
@media print {
    .recap-table th:nth-child(3),
    .recap-table td:nth-child(3) {
        display: table-cell !important;
    }

    #discountZone {
        display: none !important;
    }

    .recap-table {
        font-size: 10pt !important;
    }
}