/* ============================================
   CMA OMBESSA - Header & Navigation Responsive
   ============================================

   Ce fichier ne redéfinit QUE ce qui change avec la largeur. Il était écrit
   « mobile d'abord » — hauteur, rembourrages et tailles de boutons redonnés à
   chaque palier — et comme il se charge APRÈS header.css, il gagnait les
   égalités : la barre repassait à 44 px de recherche et 42 px de cloche dès
   768 px, quelles que soient les valeurs du composant. Les paliers sont
   désormais des `max-width` : header.css décrit la barre, ce fichier décrit ce
   qu'on lui retire quand l'écran rétrécit.

   La hauteur, elle, ne bouge plus du tout. `--header-height` sert d'origine aux
   éléments collants (`top: calc(var(--header-height) + …)`) ; la faire varier
   par palier décalait silencieusement le panier de la caisse. */

/* ============================================
   TIROIR (≤ 1023px) — le seuil de ui.js
   ============================================ */
@media (max-width: 1023px) {
    /* Le bouton hamburger est en position fixe, hors du <header> : on lui
       réserve sa place plutôt que de superposer la recherche par-dessus. */
    .main-header {
        padding-left: 70px;
    }

    .sidebar-overlay.visible {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

/* ============================================
   MOBILE (≤ 767px)
   ============================================ */
@media (max-width: 767px) {
    .main-header {
        padding-left: 66px;
        padding-right: 16px;
        gap: 12px;
    }

    .sidebar-toggle {
        left: 14px;
    }

    /* La recherche prend ce qui reste : c'est le seul élément élastique. */
    .header-search {
        max-width: none;
    }

    .header-actions {
        gap: 8px;
    }

    /* Nom et rôle disparaissent avant la pastille de synchronisation : savoir
       si l'argent est parti compte plus, à la caisse, que relire son propre
       nom. L'avatar garde l'initiale, donc l'identité reste lisible. */
    .header-user-info,
    .header-divider {
        display: none;
    }
}

/* ============================================
   PETIT MOBILE (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
    .main-header {
        padding-left: 58px;
        padding-right: 12px;
    }

    .sidebar-toggle {
        left: 10px;
        top: 14px;
        width: 36px;
        height: 36px;
    }

    .sidebar-toggle svg {
        width: 19px;
        height: 19px;
    }

    /* La réserve suit le bouton, qui a rétréci et s'est rapproché du bord. */
    .sidebar-header {
        padding-left: 54px;
    }

    /* 16 px : en dessous, iOS zoome sur le champ au focus et laisse la page
       décadrée. */
    .header-search-input {
        font-size: 16px;
    }

    .header-icon-btn {
        width: 36px;
        height: 36px;
    }

    .header-user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12.5px;
    }

    .sync-pill {
        height: 28px;
        padding: 0 9px 0 8px;
        font-size: 11.5px;
    }
}

/* ============================================
   MOBILE PAYSAGE
   ============================================
   Peu de hauteur : la carte d'installation, qui n'est de toute façon visible
   que si le navigateur a proposé l'installation, cède la place au menu. */
@media (max-width: 767px) and (orientation: landscape) {
    .sidebar-app-card {
        display: none;
    }
}

/* ============================================
   APPAREILS TACTILES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Pas d'effet de survol là où il n'y a pas de curseur : sur tablette, un
       état « hover » reste collé après le doigt et fait croire à une sélection. */
    .sidebar-toggle:hover {
        background: white;
        border-color: var(--gray-300);
    }

    .header-icon-btn:hover {
        background: transparent;
        border-color: var(--gray-300);
    }

    /* Cible tactile minimale. */
    .sidebar-link {
        min-height: 44px;
    }
}

/* ============================================
   ACCESSIBILITÉ - MOUVEMENT RÉDUIT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-overlay,
    .sidebar-toggle,
    .header-icon-btn,
    .sync-pill {
        transition: none;
    }
}