/* eb-action-sheet — règle générale : sur mobile, les menus d'action « kebab »
 * (3 points / menus contextuels) s'affichent en bottom-sheet plein écran plutôt
 * qu'en dropdown absolu (qui débordait des cartes et se superposait mal).
 *
 * Pattern réutilisable : il suffit d'ajouter la classe `eb-action-sheet` au
 * conteneur du menu. Quand ce conteneur reçoit `.show` (mécanisme d'ouverture
 * existant de chaque menu), il devient un bottom-sheet. Un backdrop séparé
 * (eb-action-sheet.js) est posé DERRIÈRE le sheet — d'où un panneau net (pas de
 * teinte grise sur le menu lui-même, contrairement à un ::before en z-index négatif).
 *
 * Géré globalement par js/eb-action-sheet.js (backdrop + fermeture).
 * Desktop : aucune règle ici n'est active (tout est sous @media <768px).
 *
 * #11430 — seuil à 767.98px (breakpoint Bootstrap `md`), aligné sur la
 * visibilité du bouton kebab (`d-md-none`) et sur MQ de eb-action-sheet.js.
 * Avant (576px), sur 577-767px le kebab s'affichait mais ne passait pas en
 * bottom-sheet → dropdown clippé/hors écran.
 */

@media (max-width: 767.98px) {
    .eb-action-sheet.show {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        /* respiration sous l'encoche / barre gestuelle iOS */
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        z-index: 100001 !important;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.25) !important;
        transform: none !important;
        /* couvre les menus basés sur visibility/opacity (ex: quick-add) */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: eb-sheet-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes eb-sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Backdrop : élément DOM dédié posé sous le sheet (z-index < sheet) → le
       panneau reste blanc et net, seul le contenu derrière est assombri. */
    .eb-action-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 100000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }
    .eb-action-sheet-backdrop.show {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }

    /* Verrouille le scroll de la page tant qu'un sheet est ouvert. */
    body.eb-sheet-lock {
        overflow: hidden;
    }

    /* Cibles tactiles confortables pour les items connus de menus d'action. */
    .eb-action-sheet.show .gdrive-dropdown-item,
    .eb-action-sheet.show .dropdown-item,
    .eb-action-sheet.show .eb-quickadd-grid a {
        padding: 14px 22px;
        font-size: 15px;
    }
    .eb-action-sheet.show .gdrive-dropdown-item i {
        font-size: 16px;
    }
}

/* Accessibilité : pas d'animation de glissement si l'utilisateur a demandé la
   réduction des animations (et évite tout risque de frame de départ figée). */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .eb-action-sheet.show { animation: none !important; }
    .eb-action-sheet-backdrop { transition: none !important; }
}