/**
 * MyVisard Pro — App CSS (minimal — uniquement responsive + masquage thème WP)
 *
 * Tout le styling est inline dans les templates. Ce fichier contient seulement :
 *   1. Le masquage du thème WP en arrière (le shortcode prend tout l'écran)
 *   2. Le drawer mobile (sidebar qui slide depuis la gauche < 1024px)
 *   3. La barre d'admin WP (offset top)
 */

/* ──────────────────────────────────────────────────────────────────────────
   1. Cacher le scroll vertical du body quand .mv-app est présent
   ────────────────────────────────────────────────────────────────────────── */

body:has(.mv-app) {
    overflow: hidden !important;
}

/* Décale .mv-app sous la barre d'admin WP si présente */
body.admin-bar .mv-app {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .mv-app {
        top: 46px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. Responsive : sidebar en drawer sur mobile/tablette (<1024px)
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {

    .mv-mobile-header {
        display: flex !important;
    }

    .mv-app .mv-content {
        left: 0 !important;
        top: 60px !important;
    }

    .mv-app .mv-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        top: 60px !important;
    }

    body.admin-bar .mv-app .mv-sidebar {
        top: 60px !important;
    }

    .mv-app .mv-sidebar.mv-open {
        transform: translateX(0);
    }

    .mv-app .mv-sidebar-backdrop {
        top: 60px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   3. Inputs focus — accessibilité (override du browser default)
   ────────────────────────────────────────────────────────────────────────── */

.mv-app input:focus,
.mv-app textarea:focus,
.mv-app select:focus {
    outline: none;
    border-color: #003366 !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

/* ──────────────────────────────────────────────────────────────────────────
   4. Hover sur les cartes interactives
   ────────────────────────────────────────────────────────────────────────── */

.mv-app a[href]:not(.mv-nav-item):not([class]) {
    transition: opacity .15s;
}
.mv-app a[href]:not(.mv-nav-item):hover {
    opacity: 0.92;
}

/* Boutons de mode paiement */
.mv-app button[onclick^="selectMode"]:hover {
    border-color: #C9A84C !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}