/* ============================================================================
   WINK EXPRESS — Espace Marchand
   Design system dédié (login + tableau de bord marchand).

   Port fidèle du design system Flutter `wink_manager` :
   couleurs, HubOrderCard, AnimatedBottomNav et écran de connexion à code PIN.

   Écrit MOBILE FIRST : la base cible ~375-420px (le cas d'usage réel des
   marchands à Yaoundé), les media queries `min-width` enrichissent ensuite
   pour tablette et bureau. Aucune dépendance CSS externe.
   ========================================================================= */

/* Les poids doivent correspondre EXACTEMENT à ceux déclarés dans wink_manager
   (pubspec.yaml, la police de marque officielle) : Light 300, Regular 400, Bold 700,
   Heavy 800, Black 900. Le web utilisait par erreur "Book" au lieu de "Regular" pour le
   texte courant — Book et Regular sont deux graisses distinctes dans la famille Nexa, pas
   des synonymes, d'où le rendu perçu comme "pas la même police" que wink_manager. */
@font-face { font-family: 'Nexa'; src: url('../fonts/Nexa/Nexa-Light.otf')   format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('../fonts/Nexa/Nexa-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('../fonts/Nexa/Nexa-Bold.otf')   format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('../fonts/Nexa/Nexa-Heavy.otf')  format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('../fonts/Nexa/Nexa-Black.otf')  format('opentype'); font-weight: 900; font-display: swap; }

:root {
    /* — Marque (identiques à lib/utils/app_theme.dart) — */
    --primary:        #F76D2F;
    --primary-dark:   #DE5A1F;
    --primary-deep:   #C24A14;
    --primary-light:  #FCE3D6;  /* AppTheme.primaryLight */
    --primary-soft:   #FFF3ED;
    --primary-rgb:    247, 109, 47;

    --navy:           #0D1B2A;
    --navy-2:         #16263A;
    --navy-3:         #223851;
    --navy-rgb:       13, 27, 42;

    /* — Neutres — */
    --canvas:         #F7F7F8;  /* AppTheme.background */
    --surface:        #FFFFFF;
    --surface-alt:    #FAFBFD;
    --ink:            #101C2C;
    --ink-2:          #37475C;
    --muted:          #667A91;
    --muted-2:        #93A3B5;
    --border:         #E6EBF1;
    --border-strong:  #D5DEE8;

    /* — Sémantique (app_theme.dart) — */
    --success: #2BA84A;
    --danger:  #E23D3D;
    --info:    #17A2B8;
    --warning: #F4A712;

    --ok:      #12854B;  --ok-soft:   #E6F6ED;  --ok-border:   #BFE7D2;
    --warn:    #B45309;  --warn-soft: #FEF3E4;  --warn-border: #F6DDB6;
    --bad:     #C42B2B;  --bad-soft:  #FDECEC;  --bad-border:  #F5CFCF;
    --inf:     #1D4E7A;  --info-soft: #EAF2F9;  --info-border: #C9DCEC;

    /* — Typo — */
    --font: 'Nexa', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    /* — Rayons / ombres — */
    --radius-xs:   8px;
    --radius-sm:   12px;
    --radius-md:   18px;
    --radius-lg:   26px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(13,27,42,.05);
    --shadow-sm: 0 2px 10px rgba(13,27,42,.055), 0 1px 2px rgba(13,27,42,.04);
    --shadow-md: 0 10px 28px rgba(13,27,42,.09), 0 2px 6px rgba(13,27,42,.04);
    --shadow-lg: 0 24px 60px rgba(13,27,42,.16);
    --shadow-primary: 0 10px 24px rgba(var(--primary-rgb),.32);

    /* — Rythme d'espacement (échelle 4) — */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px;

    --t-fast: 140ms;
    --t-base: 260ms;
    --ease: cubic-bezier(.4, 0, .2, 1);
    /* Équivalent CSS de Curves.easeOutCubic (Flutter) */
    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

    /* Hauteur réservée sous le contenu pour la barre de navigation flottante */
    --bottomnav-space: calc(60px + 12px + 22px);
}

/* ============================ Mode sombre ================================
   Un vrai thème sombre, pas juste un filtre : on ne redéfinit QUE les tokens
   neutres/sémantiques (fond, surfaces, textes, bordures, teintes de badges) — tout le
   reste de la feuille de style les consomme déjà via var(), donc chaque composant suit
   automatiquement. Les surfaces déjà sombres par construction (app bar, tiroir, cartes
   bento foncées, dégradés marque) restent inchangées : elles sont déjà "en mode sombre".
   Activé en posant data-theme="dark" sur <html> (voir le script anti-flash dans le
   <head> de chaque page, et le bouton dans le tiroir, marchand-shell.js). */
:root[data-theme="dark"] {
    --canvas:         #0A121C;
    --surface:        #131F2E;
    --surface-alt:    #0E1826;
    --ink:            #F2F5F9;
    --ink-2:          #C2CEDC;
    --muted:          #8898AC;
    --muted-2:        #62748A;
    --border:         #23334A;
    --border-strong:  #324661;

    --primary-light:  rgba(247,109,47,.22);
    --primary-soft:   rgba(247,109,47,.14);

    --ok-soft:   rgba(43,168,74,.18);   --ok-border:   rgba(43,168,74,.4);
    --warn-soft: rgba(244,167,18,.18);  --warn-border: rgba(244,167,18,.4);
    --bad-soft:  rgba(196,43,43,.2);    --bad-border:  rgba(196,43,43,.45);
    --info-soft: rgba(23,162,184,.18);  --info-border: rgba(23,162,184,.4);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.28);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24);
    --shadow-md: 0 10px 28px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.24);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}
/* Avant le premier choix explicite du marchand, on part de la préférence système —
   ensuite le bouton du tiroir écrit data-theme dans localStorage et prend le dessus
   (voir applyTheme() dans marchand-shell.js). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --canvas:         #0A121C;
        --surface:        #131F2E;
        --surface-alt:    #0E1826;
        --ink:            #F2F5F9;
        --ink-2:          #C2CEDC;
        --muted:          #8898AC;
        --muted-2:        #62748A;
        --border:         #23334A;
        --border-strong:  #324661;
        --primary-light:  rgba(247,109,47,.22);
        --primary-soft:   rgba(247,109,47,.14);
        --ok-soft:   rgba(43,168,74,.18);   --ok-border:   rgba(43,168,74,.4);
        --warn-soft: rgba(244,167,18,.18);  --warn-border: rgba(244,167,18,.4);
        --bad-soft:  rgba(196,43,43,.2);    --bad-border:  rgba(196,43,43,.45);
        --info-soft: rgba(23,162,184,.18);  --info-border: rgba(23,162,184,.4);
        --shadow-xs: 0 1px 2px rgba(0,0,0,.28);
        --shadow-sm: 0 2px 10px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24);
        --shadow-md: 0 10px 28px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.24);
        --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
    }
}

/* ============================ Base ====================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 900; color: var(--ink); line-height: 1.18; letter-spacing: -.01em; }
p  { margin: 0; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), .45);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

/* Icônes SVG inline (sprite local, zéro requête réseau) */
.ic { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ============================ Boutons =================================== */
.wk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 20px;
    border: 1.5px solid transparent; border-radius: var(--radius-pill);
    font-weight: 700; font-size: .9rem; letter-spacing: .005em;
    white-space: nowrap; text-decoration: none;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.wk-btn .ic { width: 1.15em; height: 1.15em; }
.wk-btn:active { transform: scale(.97); }
.wk-btn[disabled], .wk-btn.is-busy { opacity: .62; pointer-events: none; }

.wk-btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.wk-btn--dark { background: var(--navy); color: #fff; }
.wk-btn--outline { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.wk-btn--ghost-light { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }

@media (hover: hover) {
    .wk-btn--primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--primary-rgb), .38); }
    .wk-btn--dark:hover { background: var(--navy-3); transform: translateY(-1px); }
    .wk-btn--outline:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
    .wk-btn--ghost-light:hover { background: rgba(255,255,255,.2); }
}

.wk-btn--sm  { min-height: 42px; padding: 0 15px; font-size: .84rem; gap: 7px; }
.wk-btn--lg  { min-height: 54px; padding: 0 24px; font-size: .96rem; }
.wk-btn--block { width: 100%; }
/* Bouton « carré » à coins doux, comme les ElevatedButton de wink_manager */
.wk-btn--square { border-radius: 10px; }

@media (min-width: 768px) {
    .wk-btn--lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
}

/* Spinner intégré aux boutons */
.wk-spin {
    width: 1.05em; height: 1.05em; border-radius: 50%; flex-shrink: 0;
    border: 2.2px solid currentColor; border-top-color: transparent;
    animation: wk-rotate .7s linear infinite;
}
@keyframes wk-rotate { to { transform: rotate(360deg); } }

/* ============================ Carte ===================================== */
.wk-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ============================ App bar ===================================
   Port fidèle de la barre des LIVREURS (public/js/rider-shell.js + la
   règle .navbar de rider-common.css) : blanche, fixe, ombre discrète,
   hamburger à gauche (tiroir, futures fonctionnalités) + titre centré +
   icône d'action à droite (chat/cloche, avec badge).
   ===================================================================== */
.wk-appbar {
    position: sticky; top: 0; z-index: 60;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 2px 4px rgba(13,27,42,.05);
    padding-top: env(safe-area-inset-top, 0px);
}
.wk-appbar__inner {
    max-width: 1180px; margin: 0 auto; padding: 12px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    position: relative;
}
.wk-appbar__title {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: 60%;
    font-weight: 900; font-size: 1rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.wk-appbar__icon-btn {
    position: relative; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: transparent; color: var(--ink-2); border: none;
    transition: background var(--t-fast) var(--ease);
}
.wk-appbar__icon-btn .ic { width: 21px; height: 21px; }
@media (hover: hover) { .wk-appbar__icon-btn:hover { background: var(--canvas); } }
.wk-appbar__badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
    background: var(--danger); color: #fff;
    font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}

@media (min-width: 561px) { .wk-appbar__inner { padding: 14px 18px; } }

/* — Tiroir latéral (hamburger) — port de app_drawer.dart (wink_manager) : en-tête
   profil dégradé, liste de liens à badge d'icône teinté, section "Compte", déconnexion
   en rouge tout en bas. Navigation par vrais liens <a href> (pages séparées). */
.wk-drawer-scrim {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(13,27,42,.42);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.wk-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.wk-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 151;
    width: min(300px, 82vw);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    padding: 0 0 var(--s-5);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease-out-cubic);
    overflow-y: auto;
}
.wk-drawer-scrim.is-open .wk-drawer { transform: translateX(0); }

.wk-drawer__profile {
    display: flex; align-items: center; gap: 13px;
    padding: calc(var(--s-6) + env(safe-area-inset-top, 0px)) var(--s-4) var(--s-5);
    background: linear-gradient(135deg, var(--navy) 0%, #1E3550 100%);
    margin-bottom: var(--s-2);
}
.wk-drawer__avatar {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--primary);
    font-weight: 900; font-size: 1.15rem;
}
.wk-drawer__profile-id { min-width: 0; }
.wk-drawer__shop {
    font-weight: 900; font-size: .98rem; color: #fff; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-drawer__phone { font-size: .78rem; color: rgba(255,255,255,.62); margin: 2px 0 0; }
.wk-drawer__role-pill {
    display: inline-block; margin-top: 7px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(var(--primary-rgb), .9); color: #fff;
    font-size: .62rem; font-weight: 800; letter-spacing: .04em;
}
.wk-drawer__role-pill.is-staff { background: rgba(255,255,255,.16); }

.wk-drawer__section {
    margin: var(--s-3) 0 var(--s-1) var(--s-4);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-2);
}
.wk-drawer__nav { display: flex; flex-direction: column; padding: 0 var(--s-2); gap: 2px; }
.wk-drawer__link {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 9px var(--s-2);
    border-radius: var(--radius-sm);
    border: none; background: transparent;
    color: var(--ink-2); text-decoration: none; text-align: left;
    font-size: .92rem; font-weight: 600; font-family: inherit;
    transition: background var(--t-fast) var(--ease);
}
.wk-drawer__link-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(var(--primary-rgb), .1); color: var(--primary-dark);
}
.wk-drawer__link-icon .ic { width: 18px; height: 18px; }
.wk-drawer__link.is-active { background: var(--primary-soft); color: var(--primary-deep); font-weight: 800; }
.wk-drawer__link.is-active .wk-drawer__link-icon { background: var(--primary); color: #fff; }
@media (hover: hover) { .wk-drawer__link:not(.is-active):hover { background: var(--canvas); } }

/* Déconnexion : même ligne que les liens de nav (pas un gros bouton bloc), en rouge. */
.wk-drawer__link--danger { color: var(--bad); margin: var(--s-2) var(--s-2) 0; width: calc(100% - var(--s-4)); }
.wk-drawer__link-icon--danger { background: var(--bad-soft); color: var(--bad); }
@media (hover: hover) { .wk-drawer__link--danger:hover { background: var(--bad-soft); } }

.wk-drawer__spacer { flex: 1 1 auto; }

/* Ligne de réglage (mode sombre) : même gabarit que .wk-drawer__link mais pas un lien —
   un interrupteur à droite. */
.wk-drawer__row {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 9px var(--s-2);
    color: var(--ink-2); font-size: .92rem; font-weight: 600;
}
.wk-drawer__row-label { flex: 1 1 auto; }

.wk-switch {
    flex-shrink: 0; width: 44px; height: 26px; padding: 3px;
    border-radius: 999px; border: none; background: var(--border-strong);
    display: flex; align-items: center;
    transition: background var(--t-fast) var(--ease);
}
.wk-switch__thumb {
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--t-fast) var(--ease-out-cubic);
}
.wk-switch[aria-checked="true"] { background: var(--primary); }
.wk-switch[aria-checked="true"] .wk-switch__thumb { transform: translateX(18px); }

/* ============================ Salutation ================================= */
.wk-greeting { font-size: .92rem; color: var(--muted); margin: var(--s-4) 0 var(--s-3); }
.wk-greeting b { color: var(--ink); font-weight: 900; }

/* ============================ Bento (résumé du jour) =====================
   Port du style "iteliya" demandé : deux cartes pleine couleur, chiffre
   en évidence + mini-répartition + bouton flèche — plus utile et plus vif
   que 5 petites cartes neutres. */
.wk-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk-bento-card {
    border-radius: var(--radius-md);
    padding: var(--s-4);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 150px;
    box-shadow: var(--shadow-sm);
}
.wk-bento-card--dark { background: linear-gradient(150deg, var(--navy) 0%, #1E3550 100%); color: #fff; }
.wk-bento-card--accent { background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; }
.wk-bento-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wk-bento-card__big { font-size: 2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-bento-card__mini { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.72); }
.wk-bento-card__mini b { color: #fff; font-weight: 800; }
.wk-bento-card__label { font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.78); margin: 0; }
.wk-bento-card__label--dark { color: rgba(13,27,42,.68); }
.wk-bento-card__amount { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: nowrap; }
.wk-bento-card__amount--lg { font-size: clamp(1.5rem, 7vw, 1.9rem); color: var(--ink); margin-top: -2px; }
/* La devise ne doit jamais rivaliser avec le chiffre : sur une carte étroite (moitié du
   bento en mobile), "FCFA" à la même taille que le montant provoquait un débordement/retour
   à la ligne moche. Même traitement qu'ailleurs (.wk-hero__value .cur, .wk-fin-tile__value
   .cur...) : la devise passe nettement en retrait. */
.wk-bento-card__amount .cur { font-size: .5em; font-weight: 700; margin-left: .22em; opacity: .78; }
.wk-bento-card__amount--lg .cur { color: rgba(13,27,42,.55); }
.wk-bento-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.wk-bento-card__meta { font-size: .72rem; font-weight: 600; color: rgba(13,27,42,.6); }
.wk-bento-card__arrow {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.16); color: #fff; border: none;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wk-bento-card__arrow--dark { background: rgba(13,27,42,.14); color: var(--ink); }
.wk-bento-card__arrow .ic { width: 15px; height: 15px; }
.wk-bento-card__arrow:active { transform: scale(.9); }
@media (hover: hover) { .wk-bento-card__arrow:hover { background: rgba(255,255,255,.28); } .wk-bento-card__arrow--dark:hover { background: rgba(13,27,42,.22); } }

.wk-panel__head--flat { padding: 0; border: none; background: transparent; margin-top: var(--s-5); }
@media (min-width: 621px) { .wk-bento-card { min-height: 168px; } .wk-bento-card__big { font-size: 2.3rem; } }

/* ============================ Layout ==================================== */
.wk-main {
    max-width: 1180px; margin: 0 auto;
    padding: var(--s-5) 14px var(--bottomnav-space);
}
@media (min-width: 561px) { .wk-main { padding: var(--s-6) 18px var(--bottomnav-space); } }

/* Panneaux : une seule vue visible à la fois (pilotés par la barre du bas) */
.wk-panel-view { display: none; }
.wk-panel-view.is-active { display: block; animation: wk-panel-in 260ms var(--ease-out-cubic); }
@keyframes wk-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wk-section__head { margin-bottom: var(--s-4); }
.wk-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary-dark);
}
.wk-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.wk-section__title { font-size: 1.28rem; margin-top: 6px; }
.wk-section__sub { font-size: .86rem; color: var(--muted); margin-top: 4px; }
.wk-section__actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.wk-section__actions .wk-btn--primary { flex: 1 1 200px; }

@media (min-width: 768px) {
    .wk-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
    .wk-section__title { font-size: 1.5rem; }
    .wk-section__actions { margin-top: 0; }
    .wk-section__actions .wk-btn--primary { flex: 0 0 auto; }
}

/* ============================ Barre de filtres ========================== */
.wk-filters {
    display: flex; align-items: flex-end; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
    padding: var(--s-3); margin-bottom: var(--s-4);
}
.wk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 130px; }
.wk-field__label {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.wk-input {
    height: 48px; padding: 0 14px;
    background: var(--surface-alt);
    border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
    font-weight: 700; font-size: .95rem; color: var(--ink);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    width: 100%; min-width: 0;
}
.wk-input:focus {
    outline: none; background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14);
}
input[type="date"].wk-input { appearance: none; -webkit-appearance: none; }
input[type="date"].wk-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.wk-filters .wk-btn { flex: 1 1 100%; }
.wk-filters__spacer { display: none; }
.wk-quick { display: flex; gap: 6px; width: 100%; }
.wk-chip {
    min-height: 38px; padding: 0 14px;
    background: var(--surface-alt); border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: .82rem; font-weight: 700; color: var(--ink-2);
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast) var(--ease);
}
@media (hover: hover) { .wk-chip:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); } }
.wk-chip:active { transform: scale(.96); }
.wk-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (hover: hover) { .wk-chip.is-active:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } }

@media (min-width: 768px) {
    .wk-filters { padding: var(--s-4); gap: var(--s-3); }
    .wk-field { flex: 0 1 180px; }
    .wk-filters .wk-btn { flex: 0 0 auto; }
    .wk-filters__spacer { display: block; flex: 1 1 auto; }
    .wk-quick { width: auto; }
    .wk-chip { flex: 0 0 auto; }
}

/* ============================ Héros « Montant à verser » ================
   Port du "Bento Card" wink_express (_buildBentoCard) : carte BLANCHE avec
   une pastille d'icône teintée en haut, une grosse valeur, un libellé — pas
   un bloc sombre en dégradé. Le bouton d'export n'est plus ici : c'est
   désormais le FAB flottant (voir .wk-fab), comme le "+" de wink_express. */
.wk-hero {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-3);
}
.wk-hero__icon {
    width: 40px; height: 40px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-dark);
    border: 1px solid var(--primary-light);
}
.wk-hero__icon .ic { width: 19px; height: 19px; }
.wk-hero__body { position: relative; min-width: 0; }
.wk-hero__label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.wk-hero__value {
    font-weight: 900; letter-spacing: -.025em; line-height: 1.02;
    font-size: clamp(1.9rem, 7.5vw, 2.7rem);
    margin: var(--s-2) 0 0;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.wk-hero__value .cur { font-size: .42em; font-weight: 700; color: var(--muted-2); margin-left: .28em; letter-spacing: .02em; }
.wk-hero__meta {
    margin-top: var(--s-2); font-size: .85rem; color: var(--muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wk-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

@media (min-width: 900px) {
    .wk-hero { padding: var(--s-6) var(--s-8); flex-direction: row; align-items: center; gap: var(--s-6); }
    .wk-hero__icon { width: 52px; height: 52px; }
    .wk-hero__icon .ic { width: 24px; height: 24px; }
}

/* ============================ Bouton flottant (FAB) ======================
   Port du FloatingActionButton wink_express (dashboard_screen.dart) : cercle
   plein, couleur primaire, ombre portée — flotte au-dessus de la barre du
   bas. Une seule instance réutilisée : icône/action changent avec l'onglet
   actif (export du rapport du jour vs. export de l'historique). */
.wk-fab {
    position: fixed; z-index: 92;
    right: max(16px, calc(50vw - 194px));
    bottom: calc(60px + 12px + 14px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary); color: #fff;
    border: none; box-shadow: 0 10px 24px rgba(var(--primary-rgb), .4), 0 2px 6px rgba(13,27,42,.12);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.wk-fab .ic { width: 24px; height: 24px; }
.wk-fab:active { transform: scale(.93); }
.wk-fab[disabled] { opacity: .6; pointer-events: none; }
@media (hover: hover) { .wk-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(var(--primary-rgb), .45); } }

/* ============================ Cartes statistiques ======================= */
.wk-stats {
    display: grid; gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--s-4);
}
@media (min-width: 621px)  { .wk-stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
@media (min-width: 1021px) { .wk-stats { grid-template-columns: repeat(5, 1fr); } }

.wk-stat {
    position: relative; overflow: hidden;
    padding: var(--s-3) var(--s-3) var(--s-4);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) { .wk-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }

.wk-stat__icon {
    width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-dark);
    border: 1px solid var(--primary-light);
}
.wk-stat__icon .ic { width: 17px; height: 17px; }
.wk-stat--neutral .wk-stat__icon { background: var(--info-soft); color: var(--inf); border-color: var(--info-border); }
.wk-stat--minus  .wk-stat__icon { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }

.wk-stat__value {
    font-size: 1.16rem; font-weight: 900; color: var(--ink);
    letter-spacing: -.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.wk-stat__value .cur { font-size: .62em; font-weight: 700; color: var(--muted-2); margin-left: .22em; }
.wk-stat__label {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--muted); margin-top: 3px;
}
@media (min-width: 621px) {
    .wk-stat { padding: var(--s-4) var(--s-4) var(--s-5); gap: var(--s-3); }
    .wk-stat__value { font-size: 1.42rem; }
    .wk-stat__label { font-size: .72rem; }
}

/* ============================ Panneau de liste ========================== */
.wk-panel { overflow: hidden; }
.wk-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
.wk-panel__title { font-size: .95rem; font-weight: 900; color: var(--ink); }
.wk-count {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
    background: var(--primary-soft); color: var(--primary-dark);
    border: 1px solid var(--primary-light);
    font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (min-width: 768px) { .wk-panel__head { padding: var(--s-4) var(--s-5); } }

/* ========================================================================
   Carte de commande — port fidèle de MerchantOrderCard
   (wink_express : lib/widgets/merchant_order_card.dart), l'app Flutter
   DU MARCHAND lui-même (contrairement à HubOrderCard, qui est un outil de
   dispatching pour le staff). Carte blanche flottante, trajet ramassage →
   livraison façon timeline, barre de progression par statut, et une vraie
   action (toute la carte + un bouton chevron ouvrent le détail complet).
   Couleur du statut injectée via --st / --st-soft sur la carte.
   ===================================================================== */
.wk-order-list {
    padding: 10px;
    background: var(--canvas);
    display: block;
}
@media (min-width: 768px) { .wk-order-list { padding: var(--s-3); } }

.wk-order-card {
    --st: #757575;
    --st-soft: #F1F1F1;
    display: block; width: 100%; text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    /* Même rayon que .wk-bento-card (var(--radius-md)) — c'était 20px en dur ici contre
       18px pour le bento juste au-dessus sur le Tableau de bord, un écart de coin arrondi
       assez visible entre les deux familles de cartes empilées sur la même page. */
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(13,27,42,.05), 0 1px 2px rgba(13,27,42,.03);
    padding: var(--s-4);
    margin: 10px 0;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    animation: wk-card-in 220ms var(--ease-out-cubic) both;
}
.wk-order-card:first-child { margin-top: 0; }
.wk-order-card:last-child  { margin-bottom: 0; }
.wk-order-card:active { transform: scale(.985); }
@media (hover: hover) {
    .wk-order-card:hover { border-color: var(--st); box-shadow: 0 10px 26px rgba(13,27,42,.09), 0 2px 6px rgba(13,27,42,.05); }
}
@keyframes wk-card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* — Ligne 1 : nom du premier article + n° commande / pastille prix — */
.wk-oc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.wk-oc__title { min-width: 0; flex: 1 1 auto; }
.wk-oc__name-row { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.wk-oc__name {
    font-weight: 700; font-size: 15px; color: var(--ink); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-oc__extra { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.wk-oc__id { font-size: 12px; font-weight: 600; color: var(--muted-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.wk-oc__price {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--primary-soft); color: var(--primary-dark);
    font-size: 13px; font-weight: 800; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wk-oc__divider { height: 1px; background: var(--border); margin: var(--s-3) 0; border: none; }

/* — Ligne 2 : trajet ramassage → livraison, façon timeline verticale — */
.wk-oc__route { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.wk-oc__route-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 2px; }
.wk-oc__route-rail .ic { width: 13px; height: 13px; color: var(--muted-2); flex-shrink: 0; }
.wk-oc__route-rail .ic--to { color: var(--primary); }
.wk-oc__route-line { width: 1.5px; flex: 1 1 auto; min-height: 18px; background: var(--border-strong); margin: 3px 0; border-radius: 1px; }
.wk-oc__route-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.wk-oc__route-from, .wk-oc__route-to {
    font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-oc__route-from { color: var(--muted); font-weight: 600; }
.wk-oc__route-to { color: var(--ink); font-weight: 700; margin-top: 16px; }

/* — Ligne 3 : barre de progression teintée par statut — */
.wk-oc__progress {
    margin-top: var(--s-3);
    height: 6px; border-radius: 10px;
    background: var(--st-soft);
    overflow: hidden;
}
.wk-oc__progress-fill { height: 100%; border-radius: 10px; background: var(--st); transition: width var(--t-base) var(--ease); }

/* — Ligne 4 : badge de statut + chevron (la carte entière ouvre le détail complet,
   qui porte lui-même les actions Appeler/WhatsApp — voir .wk-sheet__actions plus bas). */
.wk-oc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--s-3); min-width: 0; }
.wk-oc__status {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    padding: 5px 10px; border-radius: 8px;
    background: var(--st-soft); border: 1px solid color-mix(in srgb, var(--st) 22%, transparent);
    font-size: 11px; font-weight: 700; color: var(--st);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-oc__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st); flex-shrink: 0; }
.wk-oc__chevron { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted-2); }
.wk-oc__chevron .ic { width: 16px; height: 16px; }

/* — Puce « articles » réutilisée par le détail (voir modale) — */
.wk-oc__items {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    background: var(--canvas);
    border-radius: 9px;
    min-width: 0;
}
.wk-oc__items .ic { width: 14px; height: 14px; color: #757575; flex-shrink: 0; }
.wk-oc__items-text {
    flex: 1 1 auto; min-width: 0;
    font-size: 12.5px; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-oc__items-text.is-empty { font-style: italic; color: var(--muted-2); }
.wk-oc__amount {
    flex-shrink: 0;
    font-size: 12.5px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================ États vide / erreur / chargement ========== */
.wk-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--s-8) var(--s-4);
    gap: var(--s-3);
}
.wk-empty__icon {
    width: 62px; height: 62px; border-radius: 20px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    border: 1px solid var(--primary-light);
}
.wk-empty__icon .ic { width: 27px; height: 27px; }
.wk-empty--neutral .wk-empty__icon { background: #F1F4F8; color: var(--muted); border-color: var(--border); }
.wk-empty--error .wk-empty__icon { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }
.wk-empty__title { font-size: 1rem; font-weight: 900; color: var(--ink); }
.wk-empty__text { font-size: .87rem; color: var(--muted); max-width: 380px; line-height: 1.55; }
.wk-empty .wk-btn { margin-top: var(--s-2); }
@media (min-width: 768px) { .wk-empty { padding: var(--s-10) var(--s-6); } }

/* Squelettes de chargement : même gabarit que la carte, pour éviter tout saut */
.wk-skel-card {
    background: var(--surface);
    border: 3px solid #E4E8EE;
    border-radius: 12px;
    padding: 9px 10px;
    margin: 5px 0;
    display: flex; flex-direction: column; gap: 8px;
}
.wk-skel-card:first-child { margin-top: 0; }
.wk-skel-row { display: flex; align-items: center; gap: 8px; }
.wk-skel {
    height: 12px; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #EDF1F6 25%, #F7F9FC 37%, #EDF1F6 63%);
    background-size: 420px 100%;
    animation: wk-shimmer 1.25s linear infinite;
}
@keyframes wk-shimmer { 0% { background-position: -210px 0; } 100% { background-position: 210px 0; } }
.wk-skel--avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.wk-skel--pill { height: 18px; width: 62px; border-radius: 6px; flex-shrink: 0; }
.wk-skel--grow { flex: 1; }
.wk-skel--bar  { height: 30px; border-radius: 9px; width: 100%; }

.wk-stat.is-loading .wk-stat__value,
.wk-hero.is-loading .wk-hero__value { color: transparent; position: relative; }
.wk-stat.is-loading .wk-stat__value::after,
.wk-hero.is-loading .wk-hero__value::after {
    content: ''; position: absolute; left: 0; top: 18%; height: 62%; width: 78%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(125,145,170,.16) 25%, rgba(125,145,170,.30) 37%, rgba(125,145,170,.16) 63%);
    background-size: 420px 100%;
    animation: wk-shimmer 1.25s linear infinite;
}
.wk-hero.is-loading .wk-hero__value::after { background: linear-gradient(90deg, rgba(255,255,255,.10) 25%, rgba(255,255,255,.22) 37%, rgba(255,255,255,.10) 63%); background-size: 420px 100%; }
.wk-hero.is-loading .wk-hero__value .cur,
.wk-stat.is-loading .wk-stat__value .cur { visibility: hidden; }

/* ========================================================================
   AnimatedBottomNav — port de lib/widgets/animated_bottom_nav.dart
   Barre flottante, icônes seules, pastille unique qui GLISSE.
   ===================================================================== */
.wk-bottomnav {
    position: fixed; z-index: 90;
    left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 32px));
    height: 60px;
    background: var(--surface);
    border-radius: 26px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    display: flex; align-items: stretch;
    overflow: hidden;
}
.wk-bottomnav__indicator {
    position: absolute; top: 8px; left: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary-light);
    opacity: 1;
    transition: transform 320ms var(--ease-out-cubic), opacity 160ms var(--ease);
    pointer-events: none;
    will-change: transform;
}
.wk-bottomnav__item {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: grid; place-items: center;
    background: transparent; border: none; padding: 0;
    color: #9E9E9E;
    transition: color 200ms var(--ease);
}
.wk-bottomnav__item .ic { width: 24px; height: 24px; transition: transform 380ms var(--ease-out-cubic), width 200ms var(--ease), height 200ms var(--ease); }
.wk-bottomnav__item.is-active { color: var(--primary); }
.wk-bottomnav__item.is-active .ic { width: 26px; height: 26px; stroke-width: 2.1; animation: wk-nav-pop 380ms var(--ease-out-cubic); }
@keyframes wk-nav-pop {
    0%   { transform: scale(.55); }
    55%  { transform: scale(1.12); }
    78%  { transform: scale(.96); }
    100% { transform: scale(1); }
}

/* ============================ Toasts ==================================== */
.wk-toasts {
    position: fixed; z-index: 200;
    left: 14px; right: 14px; bottom: calc(var(--bottomnav-space) + 8px);
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
@media (min-width: 561px) {
    .wk-toasts { top: 14px; right: 14px; left: auto; bottom: auto; width: min(360px, calc(100vw - 28px)); }
}

.wk-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--muted-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: .87rem; font-weight: 700; color: var(--ink);
    animation: wk-toast-in var(--t-base) var(--ease);
}
@keyframes wk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wk-toast--success { border-left-color: var(--success); }
.wk-toast--success .wk-toast__icon { color: var(--success); }
.wk-toast--danger  { border-left-color: var(--danger); }
.wk-toast--danger  .wk-toast__icon { color: var(--danger); }
.wk-toast__icon { flex-shrink: 0; margin-top: 1px; }
.wk-toast__icon .ic { width: 18px; height: 18px; }
.wk-toast__msg { flex: 1; min-width: 0; font-weight: 400; color: var(--ink-2); }
.wk-toast__close {
    flex-shrink: 0; width: 26px; height: 26px; border: none; background: transparent;
    color: var(--muted-2); border-radius: 50%; display: grid; place-items: center;
}
@media (hover: hover) { .wk-toast__close:hover { background: #F1F4F8; color: var(--ink); } }
.wk-toast__close .ic { width: 15px; height: 15px; }

/* ============================ Pied de page ============================== */
.wk-foot {
    margin-top: var(--s-8); padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
    font-size: .76rem; color: var(--muted-2);
}
.wk-foot strong { color: var(--muted); font-weight: 700; }
@media (min-width: 768px) {
    .wk-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: .78rem; }
}

/* ========================================================================
   MODALE DE DÉTAIL — l'action de la carte (tap sur la carte ou sur le
   bouton chevron) ouvre le détail complet : téléphone entier (appelable),
   adresse complète, liste des articles non tronquée, répartition des
   montants. En feuille glissée depuis le bas sur mobile (mobile-first).
   ===================================================================== */
.wk-sheet-scrim {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(13,27,42,.42);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.wk-sheet-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 621px) { .wk-sheet-scrim { align-items: center; padding: var(--s-5); } }

.wk-sheet {
    width: 100%; max-width: 480px; max-height: min(88vh, 720px);
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    transform: translateY(24px);
    transition: transform var(--t-base) var(--ease-out-cubic);
    overflow: hidden;
}
.wk-sheet-scrim.is-open .wk-sheet { transform: translateY(0); }
@media (min-width: 621px) { .wk-sheet { border-radius: 24px; max-height: min(84vh, 640px); } }

.wk-sheet__grip { width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong); margin: 10px auto 0; flex-shrink: 0; }
@media (min-width: 621px) { .wk-sheet__grip { display: none; } }

.wk-sheet__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-4) var(--s-3);
    flex-shrink: 0;
}
.wk-sheet__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wk-sheet__title { font-size: 1.05rem; margin-top: 3px; }
.wk-sheet__close {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--canvas); color: var(--muted); border: none;
}
.wk-sheet__close .ic { width: 16px; height: 16px; }

.wk-sheet__body { padding: 0 var(--s-4) var(--s-5); overflow-y: auto; }

.wk-sheet__status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 9px;
    background: var(--st-soft, var(--canvas)); color: var(--st, var(--muted));
    font-size: 12px; font-weight: 700;
    margin-bottom: var(--s-4);
}
.wk-sheet__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st, var(--muted)); }

.wk-sheet__row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.wk-sheet__row:last-child { border-bottom: none; }
.wk-sheet__row .ic { width: 17px; height: 17px; color: var(--muted-2); flex-shrink: 0; margin-top: 1px; }
.wk-sheet__row-body { min-width: 0; flex: 1 1 auto; }
.wk-sheet__row-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.wk-sheet__row-value { font-size: .92rem; font-weight: 600; color: var(--ink); margin-top: 3px; word-break: break-word; }
.wk-sheet__row-value a { color: var(--primary-dark); text-decoration: none; font-weight: 700; }
.wk-sheet__items-list { margin: 3px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.wk-sheet__items-list li { font-size: .92rem; font-weight: 600; color: var(--ink); }
.wk-sheet__items-list li span { color: var(--muted); font-weight: 400; }

.wk-sheet__amounts { margin-top: var(--s-2); display: grid; gap: 8px; }
.wk-sheet__amount-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; }
.wk-sheet__amount-row span:first-child { color: var(--muted); }
.wk-sheet__amount-row span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-sheet__amount-row.is-total { padding-top: 8px; border-top: 1px dashed var(--border-strong); font-size: .98rem; }
.wk-sheet__amount-row.is-total span:last-child { color: var(--primary-dark); font-weight: 900; }

/* — Actions de la feuille de détail : Appeler / WhatsApp, déplacées ici depuis la
   carte (une seule fois, en bas, bien visibles — pas un menu caché). — */
/* — Bandeau d'activation des notifications push — */
.wk-push-banner {
    position: fixed; z-index: 140;
    left: 14px; right: 14px; bottom: calc(60px + 12px + 14px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    font-size: .82rem;
    animation: wk-toast-in var(--t-base) var(--ease);
}
.wk-push-banner > svg.ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary); }
.wk-push-banner span { flex: 1 1 auto; min-width: 0; }
.wk-push-banner__close { flex-shrink: 0; width: 24px; height: 24px; border: none; background: transparent; color: rgba(255,255,255,.6); display: grid; place-items: center; }
.wk-push-banner__close .ic { width: 13px; height: 13px; }
@media (min-width: 561px) { .wk-push-banner { left: auto; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 40px)); } }

.wk-suivi-section {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); margin: var(--s-4) 4px var(--s-2);
}
.wk-suivi-section:first-child { margin-top: 0; }
.wk-suivi-section span { color: var(--primary-dark); font-variant-numeric: tabular-nums; }

/* — Frise d'historique (page Suivi) — réutilise order_history, déjà en base. — */
.wk-sheet__timeline { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; }
.wk-sheet__timeline li { display: flex; gap: 10px; padding: 7px 0; position: relative; }
.wk-sheet__timeline li:not(:last-child)::before {
    content: ''; position: absolute; left: 3px; top: 20px; bottom: -3px; width: 1.5px; background: var(--border-strong);
}
.wk-sheet__timeline-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 5px; }
.wk-sheet__timeline-action { font-size: .88rem; font-weight: 700; color: var(--ink); margin: 0; }
.wk-sheet__timeline-meta { font-size: .74rem; color: var(--muted); margin: 2px 0 0; }

.wk-sheet__actions { display: flex; gap: 10px; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
/* flex-basis 0 + min-width:0 : sans min-width:0, un bouton flex ne rétrécit jamais sous
   la largeur de son contenu (piège flexbox classique) — "WhatsApp" étant plus long
   qu'"Appeler", les deux boutons finissaient à des tailles différentes malgré flex:1. */
.wk-sheet__action-btn { flex: 1 1 0; min-width: 0; text-decoration: none; }
.wk-sheet__action-btn--whatsapp { background: #1DA851; color: #fff; border-color: #1DA851; }
@media (hover: hover) { .wk-sheet__action-btn--whatsapp:hover { background: #17913F; } }

.wk-copy-btn {
    display: inline-flex; vertical-align: middle; margin-left: 4px;
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--canvas); color: var(--muted);
    align-items: center; justify-content: center;
}
.wk-copy-btn .ic { width: 12px; height: 12px; }
@media (hover: hover) { .wk-copy-btn:hover { background: var(--primary-soft); color: var(--primary-dark); } }

/* ========================================================================
   PAGE DE CONNEXION — port de lib/screens/login_screen.dart
   Dégradé pêche → blanc, logo, carte flottante, PIN en 4 cases de 60px.
   Mobile first : une seule colonne, centrée, à toutes les tailles.
   ===================================================================== */
.auth-body {
    min-height: 100vh; min-height: 100dvh;
    /* #FFFFFF en dur ici gardait tout l'écran de connexion éclatant de blanc même en mode
       sombre (seule la carte respectait le thème) — remplacé par --canvas, qui bascule
       correctement en fond sombre comme --primary-light le fait déjà juste à côté. */
    background: linear-gradient(to bottom, var(--primary-light) 0%, var(--canvas) 45%);
    background-attachment: fixed;
}

.auth {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-6);
    padding: var(--s-8) 18px calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}

.auth__logo {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-decoration: none;
}
.auth__logo img { width: 74px; height: auto; }
.auth__logo span {
    font-weight: 900; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--primary-deep);
}

.auth__card {
    width: 100%; max-width: 400px;
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    padding: 32px 22px 26px;
}
@media (min-width: 421px) { .auth__card { padding: 32px 28px 28px; } }

.auth__title { font-size: 1.28rem; text-align: center; }
.auth__sub { color: var(--muted); font-size: .88rem; margin-top: 8px; text-align: center; line-height: 1.55; }
@media (min-width: 421px) { .auth__title { font-size: 1.42rem; } }

.auth__fields { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.auth-field { display: grid; gap: 8px; }
.auth-field > label {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap .lead {
    position: absolute; left: 15px; color: var(--muted-2); pointer-events: none;
    display: grid; place-items: center;
}
.auth-input-wrap .lead .ic { width: 19px; height: 19px; }
.auth-input {
    width: 100%; height: 56px;
    padding: 0 16px 0 46px;
    background: var(--surface-alt);
    border: 1.5px solid transparent; border-radius: var(--radius-sm);
    font-size: 1rem; font-weight: 700; color: var(--ink);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.auth-input::placeholder { color: var(--muted-2); font-weight: 400; letter-spacing: normal; }
.auth-input:focus {
    outline: none; background: var(--surface); border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14);
}
.auth-hint { font-size: .75rem; color: var(--muted-2); }

/* — Code PIN : 4 cases de 60×60, comme buildPinInput() dans login_screen.dart — */
.auth-pin {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    margin-top: 2px;
}
.auth-pin__box {
    width: 60px; height: 60px; flex: 0 1 60px; min-width: 0;
    text-align: center;
    background: var(--surface-alt);
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-size: 1.4rem; font-weight: 900; color: var(--ink);
    caret-color: var(--primary);
    padding: 0;
    transition: background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
    /* Masque les chiffres comme un vrai champ mot de passe (type="tel" plutôt que "password" —
       voir marchand-login.html : un type="password" faisait reconnaître ces 4 cases comme un
       formulaire de connexion par les gestionnaires de mots de passe du navigateur, qui les
       auto-remplissaient avec un ancien PIN enregistré et soumettaient le formulaire tout
       seuls). Non supporté par Firefox — dégrade sans casser : les chiffres restent juste
       visibles là où le masquage n'existe pas. */
    -webkit-text-security: disc;
    text-security: disc;
}
.auth-pin__box::-webkit-outer-spin-button,
.auth-pin__box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auth-pin__box:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .16);
}
.auth-pin__box.is-filled {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: 0 3px 8px rgba(var(--primary-rgb), .15);
}
.auth-pin.is-error .auth-pin__box {
    border-color: var(--danger);
    background: var(--bad-soft);
    box-shadow: 0 3px 8px rgba(226, 61, 61, .15);
}
.auth-pin.is-error { animation: wk-shake .4s var(--ease); }
@media (max-width: 359px) { .auth-pin { gap: 8px; } .auth-pin__box { height: 56px; } }

.auth__submit { margin-top: var(--s-6); text-transform: uppercase; letter-spacing: .06em; }
.auth__help { margin-top: var(--s-5); font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.6; }

.auth__error {
    display: none;
    align-items: flex-start; gap: 10px;
    margin-top: var(--s-5); padding: 12px 14px;
    background: var(--bad-soft); border: 1px solid var(--bad-border); border-left: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 700; color: var(--bad);
    animation: wk-shake .4s var(--ease);
}
.auth__error.is-shown { display: flex; }
.auth__error .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
@keyframes wk-shake {
    0%,100% { transform: translateX(0); }
    22% { transform: translateX(-5px); }
    46% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
}

.auth__legal { font-size: .74rem; color: var(--muted-2); text-align: center; }

/* ========================================================================
   PAGE "MES COURSES" — en-tête de stats + barre de progression (port du
   pattern Livrées/En Cours/Annulées + LinearProgressIndicator de
   admin_dashboard_screen.dart, wink_manager), filtre en popover.
   ===================================================================== */
.wk-course-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: var(--s-4);
}
.wk-course-stat { text-align: center; padding: 6px 2px; }
.wk-course-stat__value { font-size: 1.28rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-course-stat__label { font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); margin-top: 2px; text-transform: uppercase; }

.wk-progress-bar { height: 6px; border-radius: 10px; background: var(--border); overflow: hidden; margin-top: var(--s-3); }
.wk-progress-bar__fill { display: block; height: 100%; border-radius: 10px; background: var(--success); transition: width var(--t-base) var(--ease); }
.wk-progress-caption { font-size: .76rem; color: var(--muted); margin-top: 7px; }
.wk-progress-caption b { color: var(--ink); font-weight: 800; }

/* — Barre de recherche — port du TextField de _buildFilterBar (admin_orders_screen.dart) — */
.wk-search-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 0 14px; height: 48px;
    margin-top: var(--s-5);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.wk-search-bar .ic { width: 17px; height: 17px; color: var(--muted-2); flex-shrink: 0; }
.wk-search-bar input {
    flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none;
    font: inherit; font-size: .92rem; color: var(--ink);
}
.wk-search-bar input::placeholder { color: var(--muted-2); }
.wk-search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); }

.wk-toolbar { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); margin-bottom: var(--s-2); }
.wk-toolbar__spacer { flex: 1 1 auto; }
.wk-filter-anchor { position: relative; }
.wk-filter-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 15px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1.5px solid var(--border);
    font-size: .84rem; font-weight: 700; color: var(--ink-2);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wk-filter-pill .ic:first-child { width: 16px; height: 16px; color: var(--primary); }
.wk-filter-pill .ic:last-child { width: 11px; height: 11px; color: var(--muted-2); transition: transform var(--t-fast) var(--ease); }
.wk-filter-pill[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-deep); }
.wk-filter-pill[aria-expanded="true"] .ic:last-child { transform: rotate(90deg); }
@media (hover: hover) { .wk-filter-pill:hover { border-color: var(--primary-light); } }

.wk-filter-popover {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 45;
    width: min(300px, 86vw);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--s-4);
    display: flex; flex-direction: column; gap: var(--s-3);
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transform-origin: top left;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wk-filter-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Le popover "Exporter" de Comptabilité est ancré à un bouton collé au bord DROIT de sa
   rangée (space-between) : suspendu depuis la gauche (comportement par défaut, pensé pour
   le filtre de Mes courses, ancré à gauche), il débordait hors de l'écran sur mobile. */
.wk-filter-popover--right { left: auto; right: 0; transform-origin: top right; }
/* `.wk-field` porte `flex: 1 1 130px` pensé pour un PARENT EN LIGNE (.wk-filters, où 130px
   est une largeur de départ). Réutilisé tel quel ici, dans un popover en COLONNE, ce même
   flex-basis s'applique à la HAUTEUR — chaque champ Du/Au se retrouvait étiré à ~130px de
   haut, d'où l'immense vide repéré au-dessus du bouton "Appliquer". Un champ garde sa
   hauteur de contenu dans ce contexte. */
.wk-filter-popover .wk-field { flex: 0 0 auto; }
/* Grille régulière plutôt qu'un flex-wrap qui étirait "Aujourd'hui" en pleine largeur et
   reléguait les deux autres raccourcis sur une ligne à part — trois tailles égales, plus net. */
.wk-quick--block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wk-quick--block .wk-chip { min-height: 34px; padding: 0 6px; font-size: .76rem; }

/* Plage personnalisée repliée par défaut (Mes courses) : les trois raccourcis couvrent
   l'usage courant, la plage Du/Au ne s'affiche qu'à la demande — popover nettement plus
   court et moins "brut" pour le cas le plus fréquent. */
.wk-filter-custom-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 2px; margin: 0; border: none; background: transparent;
    color: var(--muted); font-size: .8rem; font-weight: 700; font-family: inherit;
}
.wk-filter-custom-toggle .ic:first-child { width: 14px; height: 14px; }
.wk-filter-custom-toggle .ic:last-child { width: 10px; height: 10px; color: var(--muted-2); margin-left: auto; transition: transform var(--t-fast) var(--ease); }
.wk-filter-custom-toggle[aria-expanded="true"] .ic:last-child { transform: rotate(90deg); }
.wk-filter-custom {
    display: flex; flex-direction: column; gap: var(--s-3);
    padding-top: var(--s-3); border-top: 1px solid var(--border);
}
/* `display: flex` ci-dessus l'emporte sur la règle UA `[hidden]{display:none}` (une
   déclaration d'auteur bat toujours le style par défaut du navigateur, même sans
   `!important`) — sans ce correctif, l'attribut `hidden` posé/retiré en JS n'avait aucun
   effet visuel et la plage personnalisée restait affichée en permanence. */
.wk-filter-custom[hidden] { display: none; }

.wk-icon-btn { width: 40px; padding: 0 !important; flex-shrink: 0; }

/* Panneau de commandes déjà stylé par .wk-order-list — pas de bloc `.wk-card` autour
   sur cette page (moins de cadres imbriqués, plus proche du bento de la page d'accueil). */

/* ========================================================================
   PAGE "COMPTABILITÉ" — bandeau de jours tapotable, résumé, grille financière.
   ===================================================================== */
.wk-day-strip {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding: var(--s-4) 2px var(--s-2);
    margin: 0 -2px;
}
.wk-day-strip::-webkit-scrollbar { display: none; }
.wk-day-pill {
    position: relative; flex: 0 0 auto;
    width: 46px; height: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 14px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-2);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wk-day-pill__dow { font-size: .62rem; font-weight: 700; text-transform: uppercase; opacity: .7; }
.wk-day-pill__num { font-size: 1.05rem; font-weight: 900; }
.wk-day-pill__dot { position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.wk-day-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wk-day-pill.is-active .wk-day-pill__dot { background: #fff; opacity: .9; }
@media (hover: hover) { .wk-day-pill:not(.is-active):hover { border-color: var(--primary-light); background: var(--primary-soft); } }

.wk-acct-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--s-3) var(--s-2);
    margin-bottom: var(--s-4);
}
.wk-acct-summary > div { text-align: center; }
.wk-acct-summary__value { font-size: 1rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-acct-summary__value--accent { color: var(--primary-dark); }
.wk-acct-summary__label { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

.wk-fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk-fin-tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--s-3);
    box-shadow: var(--shadow-xs);
}
.wk-fin-tile__icon {
    width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center; margin-bottom: 8px;
    background: var(--primary-soft); color: var(--primary-dark);
}
.wk-fin-tile__icon .ic { width: 16px; height: 16px; }
.wk-fin-tile--minus .wk-fin-tile__icon { background: var(--warn-soft); color: var(--warn); }
.wk-fin-tile--danger .wk-fin-tile__icon { background: var(--bad-soft); color: var(--bad); }
.wk-fin-tile--main { grid-column: span 2; background: linear-gradient(135deg, var(--navy) 0%, #1E3550 100%); border-color: transparent; }
.wk-fin-tile--main .wk-fin-tile__icon { background: rgba(255,255,255,.14); color: #fff; }
.wk-fin-tile--main .wk-fin-tile__value { color: #fff; font-size: 1.35rem; }
.wk-fin-tile--main .wk-fin-tile__label { color: rgba(255,255,255,.7); }
.wk-fin-tile__value { font-size: 1.05rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-fin-tile__value .cur { font-size: .6em; font-weight: 700; margin-left: .2em; opacity: .7; }
.wk-fin-tile__label { font-size: .72rem; font-weight: 700; color: var(--muted); margin-top: 3px; }

.wk-acct-hint { font-size: .8rem; color: var(--muted); margin-top: var(--s-5); text-align: center; }
.wk-acct-hint a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }

/* — Détail financier en liste (dans la feuille), pas en tuiles imposées : plus de place
   pour le détail complet (encaissé, chaque frais séparé, créances, net à verser). — */
.wk-fin-list { display: flex; flex-direction: column; }
.wk-fin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
    font-size: .88rem; color: var(--ink-2);
}
.wk-fin-row span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-fin-row.is-danger span:last-child { color: var(--bad); }
.wk-fin-row.is-main {
    border-bottom: none; margin-top: 6px; padding-top: 13px;
    border-top: 2px solid var(--border-strong);
    font-size: .98rem; font-weight: 800; color: var(--ink);
}
.wk-fin-row.is-main span:last-child { color: var(--primary-dark); font-weight: 900; font-size: 1.05rem; }

.wk-sheet__section-title {
    font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted); margin: var(--s-5) 0 var(--s-2);
}

/* — Historique des versements — */
.wk-remit-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
}
.wk-remit-row__date { font-size: .84rem; font-weight: 700; color: var(--ink); margin: 0; }
.wk-remit-row__amount { font-size: .78rem; color: var(--muted); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.wk-remit-row__status {
    flex-shrink: 0; padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--st) 14%, transparent);
    color: var(--st); font-size: .7rem; font-weight: 800;
}

/* Le titre "Historique des versements" vit maintenant directement sur la page (plus dans
   la feuille) : un peu plus d'air au-dessus, comme n'importe quel titre de section de page. */
.wk-section-title--page { margin-top: var(--s-6); }

/* — Rapport détaillé des livraisons — ouvert depuis un bouton au bas du détail financier.
   Inspiré des "points de livraison" que WINK envoyait par le passé (récap chiffré + liste
   commande par commande avec statut et observation), mais dans le langage visuel de
   l'appli plutôt qu'un tableau brut. — */
.wk-report-open-btn { margin-top: var(--s-5); }
.wk-report-open-btn .ic { width: 16px; height: 16px; }
.wk-sheet--tall { max-height: min(94vh, 820px); }
@media (min-width: 621px) { .wk-sheet--tall { max-height: min(90vh, 760px); } }

.wk-report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s-3); }
.wk-report-stat {
    text-align: center; padding: 10px 4px; border-radius: var(--radius-sm);
    background: var(--canvas); border: 1px solid var(--border);
}
.wk-report-stat__num { display: block; font-size: 1.15rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-report-stat.is-good .wk-report-stat__num { color: var(--success); }
.wk-report-stat.is-bad .wk-report-stat__num { color: var(--bad); }
.wk-report-stat__label { display: block; font-size: .66rem; font-weight: 700; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .02em; }

.wk-report-list { display: flex; flex-direction: column; gap: 8px; }
.wk-report-row {
    border: 1px solid var(--border); border-left: 3px solid var(--st, var(--border-strong));
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.wk-report-row__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-report-row__phone { font-size: .86rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-report-row__pill {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800;
    background: color-mix(in srgb, var(--st) 14%, transparent); color: var(--st);
}
.wk-report-row__loc { font-size: .78rem; color: var(--muted); margin: 3px 0 8px; }
.wk-report-row__amounts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--muted); }
.wk-report-row__amounts b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-report-row__amounts .is-total b { color: var(--primary-dark); }
.wk-report-row__amounts .is-debt b { color: var(--bad); }
.wk-report-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: var(--s-4) 0; }

/* Bouton qui ouvre le détail financier complet — port de _showStatsModal
   (admin_users_screen.dart, wink_manager) : le détail vit derrière un bouton, pas imposé
   à l'écran en permanence. */
.wk-acct-cta {
    display: flex; align-items: center; gap: 13px; width: 100%;
    background: linear-gradient(135deg, var(--navy) 0%, #1E3550 100%);
    border: none; border-radius: var(--radius-lg);
    padding: var(--s-4) var(--s-4);
    margin-top: var(--s-4);
    box-shadow: var(--shadow-md);
}
.wk-acct-cta__icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
    display: grid; place-items: center;
    background: rgba(var(--primary-rgb), .22); color: var(--primary);
}
.wk-acct-cta__icon .ic { width: 21px; height: 21px; }
.wk-acct-cta__text { flex: 1 1 auto; min-width: 0; text-align: left; }
.wk-acct-cta__label { display: block; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.6); }
.wk-acct-cta__value { display: block; font-size: 1.25rem; font-weight: 900; color: #fff; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-acct-cta__value .cur { font-size: .55em; font-weight: 700; color: rgba(255,255,255,.6); margin-left: .2em; }
.wk-acct-cta__arrow {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff;
}
.wk-acct-cta__arrow .ic { width: 15px; height: 15px; }

/* ========================================================================
   PAGE "PROFIL & ÉQUIPE"
   ===================================================================== */
.wk-profile-card {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, var(--navy) 0%, #1E3550 100%);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
    margin-top: var(--s-4);
}
.wk-profile-card__avatar {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--primary);
    font-weight: 900; font-size: 1.3rem;
}
.wk-profile-card__name { font-weight: 900; font-size: 1.05rem; color: #fff; margin: 0; }
.wk-profile-card__phone { font-size: .82rem; color: rgba(255,255,255,.62); margin: 2px 0 0; }
.wk-profile-card__role {
    display: inline-block; margin-top: 8px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(var(--primary-rgb), .9); color: #fff;
    font-size: .65rem; font-weight: 800; letter-spacing: .04em;
}

.wk-staff-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--s-3);
    margin-bottom: 8px;
    cursor: pointer;
}
.wk-staff-card__avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-dark);
    font-weight: 800; font-size: .95rem;
}
.wk-staff-card__avatar--stock_clerk { background: var(--info-soft); color: var(--inf); }
.wk-staff-card__avatar--sales { background: #F1F4F8; color: var(--muted); }
.wk-staff-card__id { flex: 1 1 auto; min-width: 0; }
.wk-staff-card__name { font-weight: 700; font-size: .92rem; color: var(--ink); margin: 0; }
.wk-staff-card__phone { font-size: .76rem; color: var(--muted); margin: 2px 0 0; }
.wk-staff-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.wk-staff-card__role {
    font-size: .64rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-dark);
}
.wk-staff-card__role--stock_clerk { background: var(--info-soft); color: var(--inf); }
.wk-staff-card__role--sales { background: #F1F4F8; color: var(--muted); }
.wk-staff-card__toggle {
    width: 26px; height: 26px; border-radius: 50%; border: none;
    display: grid; place-items: center;
    background: var(--ok-soft); color: var(--ok);
}
.wk-staff-card__toggle .ic { width: 13px; height: 13px; }
.wk-staff-card__toggle.is-off { background: var(--bad-soft); color: var(--bad); }

/* ====================== Écran d'installation obligatoire =================
   Tant que l'app n'est pas lancée en mode "installé" (standalone), la classe
   wk-needs-install (posée en synchrone, tout en haut du <head> — voir le
   script inline dans chaque page marchand.*.html) masque tout le contenu réel
   de la page pour ne laisser paraître que l'écran d'installation ci-dessous
   (voir public/js/marchand-pwa-gate.js pour la logique de détection/plateforme). */
html.wk-needs-install body > *:not(#wk-install-gate) { display: none !important; }

#wk-install-gate {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-6) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--canvas) 55%);
    text-align: center;
}
.wk-gate-logo { width: 84px; height: 84px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.wk-gate-title { font-family: var(--font); font-weight: 800; font-size: 1.3rem; color: var(--ink); margin: 0; }
.wk-gate-text { font-size: .92rem; color: var(--ink-2); max-width: 360px; line-height: 1.5; margin: 0; }
.wk-gate-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 14px 28px; border: none; border-radius: var(--radius-pill);
    background: var(--primary); color: #fff; font-family: var(--font);
    font-weight: 800; font-size: .98rem; box-shadow: var(--shadow-primary);
    cursor: pointer;
}
.wk-gate-cta:active { transform: scale(.97); }
.wk-gate-steps {
    display: flex; flex-direction: column; gap: var(--s-3); max-width: 340px; width: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--s-5); box-shadow: var(--shadow-sm); text-align: left;
}
.wk-gate-step { display: flex; align-items: flex-start; gap: var(--s-3); font-size: .86rem; color: var(--ink-2); }
.wk-gate-step b { color: var(--ink); }
.wk-gate-step__num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-dark);
    display: grid; place-items: center; font-weight: 800; font-size: .76rem;
}
.wk-gate-hint { font-size: .78rem; color: var(--muted); }

.wk-staff-form { display: grid; gap: var(--s-4); }

/* ====================== Bandeau de mise à jour PWA ========================
   Voir public/js/pwa-update-banner.js. Fixe en bas, au-dessus de la barre de navigation
   flottante (donc z-index élevé) mais laisse le reste de l'interface utilisable pendant que
   le marchand décide — contrairement à l'écran d'installation (#wk-install-gate), ce n'est
   jamais bloquant. */
#wk-update-banner {
    position: fixed; left: var(--s-4); right: var(--s-4);
    bottom: calc(var(--bottomnav-space) + var(--s-3));
    z-index: 100000;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    background: var(--navy); color: #fff;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    animation: wk-update-banner-in var(--t-base) var(--ease-out-cubic);
}
@keyframes wk-update-banner-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.wk-update-banner__text { font-size: .84rem; font-weight: 600; line-height: 1.35; }
.wk-update-banner__btn {
    flex-shrink: 0; border: none; border-radius: var(--radius-pill);
    padding: 9px 16px; background: var(--primary); color: #fff;
    font-family: var(--font); font-weight: 800; font-size: .82rem; cursor: pointer;
}
.wk-update-banner__btn:disabled { opacity: .7; }
@media (min-width: 720px) {
    #wk-update-banner { left: auto; right: var(--s-6); bottom: var(--s-6); max-width: 380px; }
}