/* =======================================================
   RESPONSIVE.CSS - QUARTZ PHARMA
   Organisation par points de rupture (Desktop -> Mobile)
   ======================================================= */

/* ---------------------------------------------------
   1. TABLETTES & PETITS ÉCRANS (max-width: 991.98px)
   --------------------------------------------------- */
@media (max-width: 991.98px) {
    /* --- Éléments globaux --- */
    .floating-help-btn { display: none; }

    /* --- Landing & Authentification --- */
    .landing-container, 
    .landing-box {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
        text-align: center;
    }
    .landing-form {
        width: 100%;
        max-width: 400px;
    }
    .landing-form h1 { font-size: 2rem; }
    .landing-form .subtitle { margin-bottom: 1.5rem; }
    
    .login-footer {
        flex-direction: column;
        gap: 10px;
    }
    .login-footer .separator { display: none; }

    /* --- Page V2 & Modale --- */
    .v2-arrow-rocket,
    .v2-arrow-intercom,
    body.modal-active #link-v1::after {
        display: none !important;
    }
    .v2-badge-clean {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
        bottom: 5%;
        right: 5%;
    }

    /* --- Dashboard --- */
    .dashboard-header-grid { grid-template-columns: 1fr; }
    .kpi-card .h4 { font-size: 1.25rem; }
    .coverage-section .h4 { font-size: 1.25rem; }
    .coverage-section .h5 { font-size: 1.1rem; }
    
    .kpi-card .d-flex.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 10px;
    }
    .univers-grid { grid-template-columns: 1fr; }
    
    .timeline-bar {
        left: 0;
        padding: 10px 15px;
    }
    .pilot-panel {
        width: 90%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 15px;
        border-radius: 20px;
        bottom: 80px;
    }
    .panel-divider { display: none; }
}

/* ---------------------------------------------------
   2. MOBILES (max-width: 767.98px)
   --------------------------------------------------- */
@media (max-width: 767.98px) {
    /* --- Éléments globaux --- */
    .hide-on-mobile { display: none !important; }

    /* --- Modale V2 --- */
    #v2WelcomeModal .modal-body { padding: 1.5rem !important; }

    /* --- Page Release Notes (V2) --- */
    .v2-header {
        padding: 40px 15px 30px;
        margin-bottom: 30px;
    }
    .v2-header .display-4 { font-size: 2.2rem; }
    
    .zigzag-section {
        padding: 30px 15px;
        text-align: center;
    }
    .feature-text { margin-bottom: 2rem; }
    .feature-text h2 { font-size: 1.5rem; }
    .feature-text .d-flex.flex-wrap { justify-content: center; }
    
    .mockup-card {
        padding: 20px;
        min-height: 200px;
    }
}

/* ---------------------------------------------------
   3. PETITS MOBILES (max-width: 575.98px)
   --------------------------------------------------- */
@media (max-width: 575.98px) {
    /* --- Notifications / Flash Messages --- */
    div[style*="position: fixed; top: 80px"] {
        min-width: auto !important;
        width: 90% !important;
        left: 5% !important;
        right: 5% !important;
        top: 20px !important; 
    }

    /* --- Landing & Authentification --- */
    .landing-form h1 { font-size: 1.8rem; }
    .landing-form .subtitle { font-size: 0.95rem; }
    .landing-box { gap: 20px; }

    /* --- Dashboard --- */
    .kpi-card .h4 { font-size: 1.1rem; }
    
    .kpi-card .d-flex.justify-content-between.px-2 {
        flex-wrap: wrap;
        gap: 15px;
    }
    .kpi-card .text-left, 
    .kpi-card .text-right {
        text-align: left !important;
        flex: 1 1 45%;
    }
}