/* mobile.css — base MOBILE-FIRST partagée (propriété : frontend-2).
   Priorité produit : mobile-first. On pose ici les styles de BASE (cible PWA ≤480px, dégradés
   proprement jusqu'à 640px) puis on les enrichit vers le desktop via des requêtes min-width, en
   restaurant exactement l'habillage desktop existant (components.css / screens.css).
   Couleurs : uniquement via tokens (var(--brand-*), var(--navy)/--red dérivés, var(--ink*),
   var(--surface), var(--line)) — jamais de couleur en dur. Chargé APRÈS screens.css : peut donc
   surcharger ses règles ≤640px pour la nav (c'est le but de ce fichier). */

:root {
    /* Gouttière mobile standard (topnav, dropdown, contenu) — cf. CLAUDE.md PWA ≤480px. */
    --gutter-mobile: 18px;
    /* Hauteur de la bottom-nav fixe (utilisée pour compenser le padding-bottom du body). */
    --bottom-nav-h: 64px;
}

/* ============================================================
   BOTTOM NAV (PWA) — base = visible (mobile-first), masquée en desktop plus bas.
   Cf. design/screens-mobile.jsx (MobBottomNav) pour la structure/dimensions de référence.
   ============================================================ */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    /* Agnostique du nombre d'onglets (V21 : 3 pour un visiteur, 5 pour une session connectée,
       cf. partials/bottom-nav.php $bn_items) — grid-auto-flow répartit chaque item existant en
       colonne égale sans jamais laisser de colonnes vides ni de couplage PHP côté CSS. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px; /* cible tactile */
    padding: 6px 2px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-60);
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    position: relative;
}
.bottom-nav__item .ico { color: inherit; }

.bottom-nav__item--active {
    color: var(--navy-ink);
    font-weight: 600;
}
.bottom-nav__item--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
}
.bottom-nav__label { font-size: 10px; line-height: 1.1; }

/* Badge de comptage (slot `cart` uniquement, partials/bottom-nav.php) — même patron que
   `.cart-fab__badge` (public/css/components.css) : positionné en absolu par rapport à un
   wrapper dédié autour de l'icône (`.bottom-nav__icon-wrap`), pas par rapport à toute la
   colonne `.bottom-nav__item` (sinon le badge dériverait vers le bord de la colonne au lieu de
   coller à l'icône). Toujours dans le DOM, masqué par l'attribut `hidden` — jamais recréé par le
   JS de synchro (public/js/cart-fab.js / screens/menu.js). */
.bottom-nav__icon-wrap {
    position: relative;
    display: inline-flex;
}
.bottom-nav__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--red);
    color: #fff;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    font-size: 9px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
}
/* Même raison que `.cart-fab__badge[hidden]` (components.css) : `display: grid` l'emporterait
   sinon sur le `display: none` par défaut de l'attribut `hidden`. */
.bottom-nav__badge[hidden] { display: none; }

/* Place pour la bottom-nav fixe : base mobile = padding-bottom du document. */
body { padding-bottom: var(--bottom-nav-h); }

/* Panier flottant (FAB, #5) — MASQUÉ sur mobile (V23, spec product-designer) : le panier a
   désormais un onglet NOMMÉ dans la bottom-nav, dans la zone du pouce (`cart`, badgé du même
   compteur, cf. partials/bottom-nav.php) — le FAB flottant par-dessus était un doublon exact de
   cette affordance (même destination, même icône). Le FAB reste le SEUL accès panier en
   desktop, où il n'y a pas de bottom-nav : cf. `display: grid` restauré dans le bloc
   `@media (min-width: 641px)` plus bas — n'y touche pas. */
.cart-fab {
    display: none;
}

/* Tickets snack — FAB flottant SECONDAIRE (partials/topnav.php, Phase 4) : son écran n'a AUCUN
   onglet dans la bottom-nav (pas de doublon), il reste donc le seul accès mobile. Depuis que
   `.cart-fab` est masqué juste au-dessus, `.snack-fab` ne s'empile plus par-dessus lui : il
   reprend ICI la position que `.cart-fab` occupait avant V23 (même formule), au lieu de rester
   calé 70px trop haut (bottom du panier + sa hauteur 56px + 14px) au-dessus d'un FAB qui n'existe
   plus visuellement. Restauré au format desktop (components.css, empilé au-dessus du panier
   desktop) à partir de 641px, cf. bloc @media plus bas — inchangé, .cart-fab y redevient visible. */
.snack-fab {
    right: var(--gutter-mobile);
    bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
    z-index: 65; /* au-dessus de .bottom-nav (60) */
}

/* Filet de sécurité anti-scroll-horizontal (n'affecte pas les zones qui scrollent
   volontairement en interne, ex. .daypicker__grid ou .adm-tx__scroll, qui restent
   overflow-x:auto sur leur propre conteneur). */
body { overflow-x: hidden; }

/* ============================================================
   TOPNAV MOBILE — hamburger + nav en menu déroulant (base mobile-first).
   Restaure/complète partials/topnav.php sur mobile. `.nav` (panneau déroulant) est fermé
   par défaut ici même (display:none + .nav--open) ; screens.css ne masque plus
   `.topnav__left` (fix débordement — cf. commentaire dans screens.css ≤640px), donc le
   logo + le bouton hamburger restent visibles sur mobile comme prévu.
   ============================================================ */
.topnav__left {
    position: relative;
    gap: 12px; /* resserré sur mobile (components.css: 40px en desktop, restauré plus bas) */
    width: 100%; /* header mobile pleine largeur : logo à gauche, solde + burger poussés à droite */
}
/* Solde collé au burger : margin-left:auto pousse la pastille (et le burger qui la suit) à droite. */
.topnav__left .wallet-pill { margin-left: auto; }

.topnav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.topnav__burger .ico { color: inherit; }

/* Nav en panneau déroulant sous le logo, fermé par défaut (mobile-first). */
.nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 70;
    min-width: 220px;
    flex-direction: column;
    gap: 4px;
    padding: var(--gutter-mobile);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: 0 16px 32px -16px rgba(15, 19, 32, 0.28);
}
.nav.nav--open { display: flex; }
.nav__link {
    min-height: 44px; /* cible tactile */
    padding: 0 14px;
    display: flex;
    align-items: center;
}

/* ============================================================
   TOPNAV ACTIONS MOBILE — condense le groupe de droite (école, recherche, notif,
   panier, langue, avatar) pour éviter le débordement horizontal du topnav (base
   mobile-first). Cf. design/screens.jsx (MobileWeekly : header = logo + icône
   recherche + icône panier) pour l'esprit "icônes compactes" en mobile — on ne
   supprime toutefois pas les contrôles multi-école/langue (invariants produit),
   on les borne en largeur. Filet de sécurité : flex-wrap (jamais de scroll
   horizontal, même si tout ne tient pas sur une seule ligne).
   ============================================================ */
.topnav {
    flex-wrap: wrap;
    row-gap: 10px;
}
.topnav__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
/* Barre de recherche décorative (non câblée) : pas de perte fonctionnelle à la masquer
   sur mobile — le mockup PWA la remplace de toute façon par une icône seule. */
.search-fake { display: none; }

/* Avatar (accès Compte) — MASQUÉ sur mobile (V23, spec product-designer) : doublon exact de
   l'onglet « Compte » de la bottom-nav (même destination `account`, même rôle), et une icône
   nue perd en lisibilité face à un onglet LIBELLÉ dans la zone du pouce. `.avatar` n'a qu'un
   seul usage dans tout le dépôt (partials/topnav.php:291, dans `.topnav__actions`) — masquage
   sans risque de collision avec un autre composant. Restauré en desktop (aucune bottom-nav là-bas
   pour porter cet accès), cf. bloc @media plus bas. */
.avatar { display: none; }

/* Sélecteur d'école : nom de l'établissement potentiellement long → largeur bornée +
   troncature (le <select> natif tronque son libellé affiché quand il est plus étroit
   que le texte sélectionné). */
.school-switch {
    max-width: 128px;
    padding: 6px 10px;
}
.school-switch select {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   ENRICHISSEMENT DESKTOP (min-width) — restaure l'habillage desktop existant à l'identique.
   ============================================================ */
@media (min-width: 641px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }

    /* Panier flottant (FAB) : redevient visible — pas de bottom-nav en desktop pour porter
       l'onglet `cart` qui le remplace sur mobile, donc pas de doublon ici. Restaure la position
       par défaut de components.css (`display: grid`, masqué par la base mobile-first ci-dessus). */
    .cart-fab {
        display: grid;
        right: 28px;
        bottom: 28px;
        z-index: 55;
    }

    /* Tickets snack — FAB flottant SECONDAIRE : restaure la position empilée par défaut
       (components.css) au-dessus du panier desktop. */
    .snack-fab {
        right: 28px;
        bottom: calc(28px + 56px + 14px);
        z-index: 54;
    }

    .topnav__burger { display: none; }

    .nav {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 4px;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .nav__link {
        min-height: auto;
        padding: 8px 14px;
    }

    .topnav__left { gap: 40px; width: auto; }
    .topnav__left .wallet-pill { margin-left: 0; } /* desktop : la pastille suit le logo, pas de push */

    /* Restaure l'habillage desktop du groupe d'actions (aucun changement visuel ≥641px). */
    .topnav {
        flex-wrap: nowrap;
    }
    .topnav__actions {
        flex-wrap: nowrap;
        gap: 14px;
    }
    .search-fake { display: flex; }
    /* Avatar : restauré en desktop (aucune bottom-nav là-bas pour porter l'accès Compte —
       masqué uniquement ≤640px, cf. base mobile-first plus haut). */
    .avatar { display: grid; }
    .school-switch {
        max-width: none;
        padding: 6px 12px;
    }
    .school-switch select {
        flex: initial;
        min-width: auto;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}