/* ============================================================
   VoFact — Mobile Polish (Phase A)
   Approche zero-risk :
   - Visibilité conditionnelle via :has() (CSS pur, aucun JS).
   - Wrap @media (max-width: 768px) → ZERO impact desktop.
   - Aucune règle ne fait pointer-events: none sur un parent
     interactif. Aucune règle ne déplace les contrôles existants.
   ============================================================ */

@media (max-width: 768px) {

    /* ------------------------------------------------------------
       1. FAB CONTEXTUELS — uniquement sur Factures / Devis / Clients
       Visibilité PUREMENT CSS via :has() (Safari 15.4+, Chrome 105+).
       Hors de ces pages, FAB { display:none } → ne peut JAMAIS gêner
       l'input chat ou un autre bouton.
       ------------------------------------------------------------ */
    .vofact-fab {
        position: fixed;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        color: #fff;
        background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
        box-shadow: 0 10px 26px rgba(99, 102, 241, 0.32);
        z-index: 70; /* sous toast(10000) et modals(1000+), au-dessus de mobile-nav */
        display: none; /* défaut : caché partout */
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .vofact-fab:active { transform: scale(0.92); }
    .vofact-fab i { font-size: 28px; line-height: 1; }

    /* Affichage CSS-only via :has() : chacun ne s'affiche que sur SA page */
    body:has(#page-invoices.active) .vofact-fab[data-fab="invoices"] { display: flex; }
    body:has(#page-quotes.active)   .vofact-fab[data-fab="quotes"]   { display: flex; }
    body:has(#page-clients.active)  .vofact-fab[data-fab="clients"]  { display: flex; }

    /* Si un formulaire ou modal est ouvert sur ces pages, on cache le FAB
       pour ne pas gêner la saisie. */
    body:has(#invoice-form-card[style*="display:block"]) .vofact-fab,
    body:has(#invoice-form-card[style*="display: block"]) .vofact-fab,
    body:has(#quote-form-card[style*="display:block"]) .vofact-fab,
    body:has(#quote-form-card[style*="display: block"]) .vofact-fab,
    body:has(#client-form-card[style*="display:block"]) .vofact-fab,
    body:has(#client-form-card[style*="display: block"]) .vofact-fab,
    body:has(.modal-overlay:not([style*="display:none"]):not([style*="display: none"])) .vofact-fab {
        display: none !important;
    }

    /* ------------------------------------------------------------
       2. INPUTS / BOUTONS — tap targets généreux iOS HIG (44x44 mini)
       ------------------------------------------------------------ */
    .auth-form input,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="tel"],
    .form-group input[type="date"],
    .form-group select,
    .form-group textarea {
        min-height: 48px;
        font-size: 16px; /* anti-zoom Safari iOS */
    }
    .auth-form .btn-primary,
    .settings-card .btn-primary {
        min-height: 50px;
    }

    /* ------------------------------------------------------------
       3. BOTTOM TAB BAR — indicateur actif net + spacing
       Surcouche douce sur les règles existantes de styles.css.
       ------------------------------------------------------------ */
    .mobile-nav-item {
        position: relative;
    }
    .mobile-nav-item.active::before {
        content: '';
        position: absolute;
        top: 0; /* indicateur top-bar iOS-style */
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--primary, #6366f1);
        opacity: 0.95;
    }
    .mobile-nav-item i { font-size: 22px; line-height: 1; }
    .mobile-nav-item span { font-size: 10.5px; font-weight: 600; margin-top: 2px; }

    /* ------------------------------------------------------------
       4. CHAT FOOTER — protégé du clavier iOS via dynamic vh
       (déjà partiellement géré par styles.css ; on consolide)
       ------------------------------------------------------------ */
    .chat-input input {
        min-height: 44px;
        font-size: 16px;
    }
    .chat-input button,
    #chat-mic-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* ------------------------------------------------------------
       5. SCROLL DE LISTES — momentum + overscroll contained
       ------------------------------------------------------------ */
    .page-body {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* ------------------------------------------------------------
       6. INVOICE/CLIENT/QUOTE — tap feedback iOS sur les cartes
       (pure CSS, n'intercepte rien)
       ------------------------------------------------------------ */
    .invoice-row, .client-card {
        transition: background-color 0.12s ease, transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .invoice-row:active { background-color: rgba(120, 120, 128, 0.08); }
    .client-card:active { background-color: rgba(120, 120, 128, 0.08); }

    /* ------------------------------------------------------------
       7. VIEW TRANSITIONS API (Chrome 111+, Safari 18+)
       Géré aussi via JS (m-polish.js) qui appelle startViewTransition.
       Si non supporté → comportement normal (gracieux).
       ------------------------------------------------------------ */
    ::view-transition-old(root) {
        animation: vofPageOut 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    ::view-transition-new(root) {
        animation: vofPageIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes vofPageOut { to { opacity: 0; transform: translateX(-6px); } }
    @keyframes vofPageIn  { from { opacity: 0; transform: translateX(8px); } }

    /* ------------------------------------------------------------
       8. EMPTY-STATES & STATS — typo iOS
       ------------------------------------------------------------ */
    .empty-state p {
        font-size: 15px;
        color: #8e8e93;
        font-weight: 500;
    }

    /* ------------------------------------------------------------
       9. REDUCED MOTION
       ------------------------------------------------------------ */
    @media (prefers-reduced-motion: reduce) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none !important;
        }
        .vofact-fab,
        .invoice-row, .client-card {
            transition: none !important;
        }
    }

}