/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — styles délégués à zaza-theme.css */

.zz-app[b-2cjks3muxy] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #0A0A0A;
}

/* ── Fin de session ────────────────────────────────────────────────────
   Boîte affichée à la place de l'alert() natif du navigateur, dont
   l'en-tête « La page "…" a dit » n'est pas modifiable.

   Tout est pris sur les jetons de zaza-themes.css : elle apparaît sur
   n'importe quelle page, donc dans n'importe quel thème. Une carte
   blanche en dur aurait troué le thème nuit — qui est le thème par
   défaut (:root).

   z-index très élevé : elle doit passer au-dessus de la carte ArcGIS, du
   bottom-sheet et du bouton SOS, qui montent déjà haut. */
.zz-fin-session-fond[b-2cjks3muxy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2147483000;
}

.zz-fin-session[b-2cjks3muxy] {
    position: fixed;
    z-index: 2147483001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 40px));
    padding: 20px;
    border-radius: 16px;
    background: var(--zz-card, #fff);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

.zz-fin-session-tete[b-2cjks3muxy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* --zz-warn-text, PAS --zz-warn : le jaune de charte posé sur une carte
   claire donne 1,6:1. Le jeton -text est la variante assombrie prévue
   pour cet usage. Le jaune SIGNALE ici, il n'appelle pas à agir —
   l'action est portée par le bouton, en couleur d'accent. */
.zz-fin-session-ico[b-2cjks3muxy] {
    font-size: 26px;
    color: var(--zz-warn-text, #8A5A00);
    flex-shrink: 0;
}

.zz-fin-session-titre[b-2cjks3muxy] {
    font-size: 18px;
    font-weight: 700;
    color: var(--zz-white, #0E2038);
}

.zz-fin-session-motif[b-2cjks3muxy] {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--zz-dim, #46586F);
    /* Le motif vient du serveur : un texte long ne doit ni déborder ni
       pousser le bouton hors de l'écran. */
    max-height: 40vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.zz-fin-session-btn[b-2cjks3muxy] {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--zz-accent, #0A4FC4);
    color: var(--zz-on-accent, #fff);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .zz-fin-session-btn:hover[b-2cjks3muxy] { filter: brightness(1.07); }
    .zz-fin-session-btn:active[b-2cjks3muxy] { transform: scale(.98); }
/* /Layout/NavMenu.razor.rz.scp.css */
/* Styles Bottom Nav dans zaza-theme.css (.zz-bottom-nav, .zz-nav-tab) */
[b-dnvv3j0bfu] .nav-icon.bi { display: block; font-size: 22px; line-height: 1; }
/* /Pages/AccuseReception.razor.rz.scp.css */
/*  Boîte d'acquittement des mouvements d'argent.

    Reprend la géométrie et les jetons de la boîte « fin de session »
    (MainLayout.razor.css) : même largeur, même rayon, même bouton pleine
    largeur. Deux boîtes bloquantes qui ne se ressembleraient pas
    donneraient l'impression de venir d'applications différentes.

    Le z-index se place JUSTE SOUS celui de la fin de session : si la
    session tombe pendant qu'un message attend, c'est la fin de session
    qui doit être lue en premier — elle emporte l'application entière. */

.zz-ar-fond[b-tszkbj8voc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2147482998;
}

.zz-ar[b-tszkbj8voc] {
    position: fixed;
    z-index: 2147482999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 40px));
    padding: 20px;
    border-radius: 16px;
    background: var(--zz-card, #fff);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

.zz-ar-tete[b-tszkbj8voc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/*  ⚠️ Le SENS est porté par le glyphe (flèche entrante / sortante), pas par
    la couleur : la charte n'a pas de jeton « succès », et le vert inventé
    ici sortirait du thème — il tombait à 2,3:1 sur la carte du thème nuit.
    Pas de rouge non plus sur un débit : des frais d'annulation sont un
    mouvement normal, pas un incident. Les deux gardent donc l'accent, qui
    reste lisible dans les cinq thèmes. */
.zz-ar-ico[b-tszkbj8voc] {
    font-size: 26px;
    color: var(--zz-accent, #0A4FC4);
    flex-shrink: 0;
}

.zz-ar-titre[b-tszkbj8voc] {
    font-size: 18px;
    font-weight: 700;
    color: var(--zz-white, #0E2038);
}

.zz-ar-texte[b-tszkbj8voc] {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--zz-dim, #46586F);
    /* Le texte vient du serveur : un message long ne doit ni déborder ni
       pousser le bouton hors de l'écran. */
    max-height: 40vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.zz-ar-solde[b-tszkbj8voc] {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--zz-white, #0E2038);
}

.zz-ar-btn[b-tszkbj8voc] {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--zz-accent, #0A4FC4);
    color: var(--zz-on-accent, #fff);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .zz-ar-btn:hover[b-tszkbj8voc] { filter: brightness(1.07); }
    .zz-ar-btn:active[b-tszkbj8voc] { transform: scale(.98); }

/* Combien de messages attendent encore derrière celui-ci. */
.zz-ar-reste[b-tszkbj8voc] {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--zz-dim, #46586F);
}
/* /Pages/AdToast.razor.rz.scp.css */
.ad-toast[b-eafj033ybh] {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    z-index: 300000;
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.25s ease;
}

.ad-toast--in[b-eafj033ybh] {
    transform: translateY(0);
    opacity: 1;
}

.ad-toast--out[b-eafj033ybh] {
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.28s ease-in, opacity 0.22s ease-in;
}

/* ── Header ── */

.ad-toast-header[b-eafj033ybh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid #f2f2f2;
}

.ad-toast-logo[b-eafj033ybh] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
    background: #f8f8f8;
}

.ad-toast-meta[b-eafj033ybh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ad-toast-partner[b-eafj033ybh] {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-toast-sponsored[b-eafj033ybh] {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ad-toast-close[b-eafj033ybh] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #bbb;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.ad-toast-close:hover[b-eafj033ybh] {
    color: #555;
    background: #f0f0f0;
}

/* ── Image ── */

.ad-toast-image[b-eafj033ybh] {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

/* ── Body ── */

.ad-toast-body[b-eafj033ybh] {
    padding: 10px 12px 10px;
}

.ad-toast-title[b-eafj033ybh] {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
    line-height: 1.35;
}

.ad-toast-text[b-eafj033ybh] {
    font-size: 12px;
    color: #555;
    margin: 0 0 9px;
    line-height: 1.45;
}

.ad-toast-link[b-eafj033ybh] {
    display: inline-block;
    font-size: 12px;
    padding: 5px 16px;
    border-radius: 20px;
    text-decoration: none;
    background: var(--z-blue);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background 0.15s;
}

.ad-toast-link:hover[b-eafj033ybh] {
    background: var(--z-blue-dk);
    color: #fff;
    text-decoration: none;
}

/* ── Barre de progression ── */

.ad-toast-progress-track[b-eafj033ybh] {
    height: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.ad-toast-progress-bar[b-eafj033ybh] {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--z-blue), var(--z-green));
    animation: ad-progress-shrink-b-eafj033ybh linear 1 forwards;
    /* animation-duration est positionné inline pour respecter DureeAffichage */
}

@keyframes ad-progress-shrink-b-eafj033ybh {
    from { width: 100%; }
    to   { width: 0%; }
}
/* /Pages/BilletsPage.razor.rz.scp.css */
.bil-tab[b-twvyfxyaf8] { flex:1; padding:10px 8px; border-radius:10px; background:transparent; border:none; color:var(--zz-muted); font-family:var(--zz-font); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; -webkit-tap-highlight-color:transparent; }
.bil-tab.sel[b-twvyfxyaf8] { background:var(--zz-yellow); color:var(--zz-on-accent); }
.bil-select[b-twvyfxyaf8] { flex:1; background:transparent; border:none; color:var(--zz-white); font-family:var(--zz-font); font-size:16px; font-weight:700; outline:none; cursor:pointer; }
.bil-select option[b-twvyfxyaf8] { background:#1E1E1E; }
/* /Pages/BottomSheet.razor.rz.scp.css */
/* ── Mode compact mobile (IsCompactMobileCard=true) ── */
/* Rendu dans .mob-addr-card positionné dans .map-container */
.cbs-card[b-hvt2hcdss8] {
    background: #FFFFFF;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    color: var(--z-ink);
}

/* section-card wrapper pour centrer la search-driver-card */
.cbs-sd-section[b-hvt2hcdss8] {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

/* search-driver-card rendu inline dans mob-addr-card (pas d'overlay) */
.cbs-search-driver-card[b-hvt2hcdss8] {
    position: static;
    width: fit-content;
    max-width: 100%;
    box-shadow: none;
    border-radius: 10px;
    padding: 10px 16px 10px;
    margin: 0;
    background: transparent;
    border: none;
    text-align: center;
}

.cbs-sd-header[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cbs-sd-animation[b-hvt2hcdss8] {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.cbs-sd-animation .search-driver-icon[b-hvt2hcdss8] {
    font-size: 18px !important;
}

.cbs-search-driver-card .search-driver-title[b-hvt2hcdss8] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    flex: 1;
}

.cbs-search-driver-card .search-driver-timer[b-hvt2hcdss8] {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.cbs-search-driver-card .search-driver-retry[b-hvt2hcdss8] {
    font-size: 11px;
    margin-bottom: 6px;
    justify-content: center;
}

.cbs-search-driver-card .search-driver-price[b-hvt2hcdss8] {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cbs-search-driver-card .search-driver-cancel[b-hvt2hcdss8] {
    width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.cbs-card-footer[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 4px;
}

.cbs-card-footer .btn-primary[b-hvt2hcdss8] {
    width: 100%;
}

.cbs-footer-status[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* ?????? BottomSheet – VTC Modern Theme ?????? */

:root[b-hvt2hcdss8] {
    --sheet-handle-h: 100px;
    --vtc-primary: var(--z-blue);
    --vtc-primary-dark: var(--z-blue-dk);
    --vtc-success: var(--z-green);
    --vtc-danger: #EA4335;
    --vtc-surface: #ffffff;
    --vtc-surface-dim: #f5f6fa;
    --vtc-text: var(--z-ink);
    --vtc-text-muted: #6b7280;
    --vtc-border: rgba(0,0,0,0.06);
    --vtc-radius: 16px;
    --vtc-radius-sm: 10px;
    --vtc-shadow-sm: 02px8px rgba(0,0,0,0.06);
    --vtc-shadow-md: 04px20px rgba(0,0,0,0.10);
    --vtc-shadow-lg: 012px40px rgba(0,0,0,0.18);
}

/* ?? Backdrop ?? */
.bottom-sheet-backdrop[b-hvt2hcdss8] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    display: none; /* Backdrop disabled é Google Maps never blocks the map */
}

    .bottom-sheet-backdrop.open[b-hvt2hcdss8] {
        opacity: 1;
        pointer-events: auto;
        display: none; /* Keep disabled é interaction is via the sheet only */
    }

/* ?? BottomSheet shell ?? */
/*  --kb : hauteur occupée par le clavier virtuel, mesurée par
    js/clavier-virtuel.js sur window.visualViewport. Vaut 0 partout ailleurs.

    ⚠️ Sans elle, la feuille reste haute de 100vh quel que soit le clavier —
    « vh » désigne la viewport LARGE, figée sur la plus grande hauteur possible,
    et ne bouge pas quand le clavier s'ouvre. La liste des adresses proposées,
    qui vit sous le champ de saisie, passait donc derrière le clavier. Régler
    l'activité Android sur adjustResize n'y changeait rien : la fenêtre
    rétrécissait, l'unité CSS non. */
.bottom-sheet[b-hvt2hcdss8] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--kb, 0px);
    height: calc(100vh - var(--sheet-handle-h) - var(--kb, 0px));
    max-height: calc(100vh - var(--kb, 0px));
    z-index: 100000;
    background-color: var(--vtc-surface, #ffffff); /* fallback to white if var missing */
    background: var(--vtc-surface, #ffffff);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    will-change: transform;
    transform: translateY(calc(100% - var(--sheet-handle-h)));
    border-top: 3px solid var(--signalr-color, #d32f2f);
    transition: border-top-color .4s ease, border-right-color .4s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    touch-action: none; /* JS controls all touch é prevents browser pull-to-refresh */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-bottom: env(safe-area-inset-bottom, 12px);
}

    .bottom-sheet.open[b-hvt2hcdss8] {
        pointer-events: auto;
        transform: translateY(0);
    }

.sheet-handle[b-hvt2hcdss8] {
    height: 4px;
    width: 36px;
    border-radius: 2px;
    background: #dadce0;
    cursor: grab;
    pointer-events: auto;
    display: block;
    opacity: 1;
    transition: width .2s, background .2s;
}

    .sheet-handle:active[b-hvt2hcdss8] {
        cursor: grabbing;
        width: 44px;
        background: #bbb;
    }

/* Page Navigation */
.page-nav[b-hvt2hcdss8] {
    display: grid;
    grid-template-areas:
        "handle handle handle"
        "prev   label  next";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    background-color: var(--vtc-surface, #ffffff);
    border-radius: 14px 14px 0 0;
}

.page-nav > :nth-child(1)[b-hvt2hcdss8] { grid-area: prev; }
.page-nav > :nth-child(2)[b-hvt2hcdss8] { grid-area: handle; margin: 5px auto 6px; }
.page-nav > :nth-child(3)[b-hvt2hcdss8] { grid-area: label; justify-self: center; }
.page-nav > :nth-child(4)[b-hvt2hcdss8] { grid-area: next; }

.page-nav-btn[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--vtc-border, rgba(0,0,0,0.10));
    background: transparent;
    color: var(--vtc-text, var(--z-ink));
    cursor: pointer;
    font-size: 18px;
    transition: background .2s ease, opacity .2s ease;
    flex-shrink: 0;
}

    .page-nav-btn:hover:not(:disabled)[b-hvt2hcdss8] {
        background: var(--vtc-surface-dim, #f5f6fa);
    }

    .page-nav-btn:focus[b-hvt2hcdss8] {
        outline: 2px solid rgba(var(--z-blue-rgb),0.3);
        outline-offset: 2px;
    }

    .page-nav-btn:disabled[b-hvt2hcdss8] {
        opacity: 0.25;
        cursor: default;
    }

.page-nav-label[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vtc-primary, var(--z-blue));
}

    .page-nav-label i[b-hvt2hcdss8] {
        font-size: 17px;
    }

.tab-content[b-hvt2hcdss8] {
    padding: 5px 16px 88px;
    overflow-y: auto;
    overflow-x: visible;
    flex: 1 1 auto;
    min-height: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    background-color: #f5f6fa;
    overscroll-behavior: contain;
}

/* ?? Sections (card grouping inside tab) ?? */
.section-card[b-hvt2hcdss8] {
    background: var(--vtc-surface, #ffffff);
    border: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    border-radius: var(--vtc-radius-sm, 10px);
    padding: 5px 14px 14px;
    margin-bottom: 12px;
    overflow: visible;
}

/* ?? Section title ?? */
.section-title[b-hvt2hcdss8] {
    font-weight: 700;
    font-size: 16px;
    color: var(--vtc-text, var(--z-ink));
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-hvt2hcdss8] {
        color: var(--vtc-primary, var(--z-blue));
        font-size: 17px;
    }

/* ?? Google Mapséstyle route builder ?? */
.gm-route-builder[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ?? Stop row: timeline + input + remove ?? */
.gm-stop-row[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 48px;
    position: relative;
}

/* ?? Timeline column (dot + lines) ?? */
.gm-timeline-col[b-hvt2hcdss8] {
    width: 28px;
    position: relative;        /* point centré en absolu ; lignes ancrées au centre */
    flex-shrink: 0;
    align-self: stretch;
}

.gm-dot[b-hvt2hcdss8] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2.5px solid;
    z-index: 2;
    position: absolute;             /* centré verticalement et horizontalement dans la colonne */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
}

.gm-dot-origin[b-hvt2hcdss8] {
    border-color: var(--vtc-success, var(--z-green));
    background: var(--vtc-success, var(--z-green));
}

.gm-dot-dest[b-hvt2hcdss8] {
    border-color: var(--vtc-danger, #EA4335);
    background: var(--vtc-danger, #EA4335);
}

.gm-dot-mid[b-hvt2hcdss8] {
    border-color: var(--vtc-primary, var(--z-blue));
    background: var(--vtc-primary, var(--z-blue));
}

.gm-dot-add[b-hvt2hcdss8] {
    border-color: #bbb;
    background: transparent;
    width: 10px;
    height: 10px;
    border-width: 2px;
}

.gm-line[b-hvt2hcdss8] {
    position: absolute;         /* ligne au-DESSUS du point : du haut jusqu'au centre */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: #d0d0d0;
    top: 0;
    bottom: 50%;
}

.gm-line-below[b-hvt2hcdss8] {
    top: 50%;                   /* ligne en DESSOUS du point : du centre jusqu'au bas */
    bottom: 0;
}

/* ?? Input column ?? */
.gm-input-col[b-hvt2hcdss8] {
    flex: 1;
    padding: 4px 0;
    /* Ancre la croix d'effacement, posée dans le champ à droite. */
    position: relative;
}

.gm-input[b-hvt2hcdss8] {
    width: 100%;
    /* Marge à droite : place réservée à la croix d'effacement. */
    padding: 10px 40px 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: var(--vtc-text, var(--z-ink));
    background: var(--vtc-surface-dim, #f2f3f5);
    transition: background .15s, box-shadow .15s;
    outline: none;
}

    .gm-input[b-hvt2hcdss8]::placeholder {
        color: #9aa0a6;
    }

    .gm-input:focus[b-hvt2hcdss8] {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

/* ?? Remove button ?? */
.gm-remove-btn[b-hvt2hcdss8] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #bbb;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%;
    transition: all .12s;
    margin-left: 4px;
}

    .gm-remove-btn:hover[b-hvt2hcdss8] {
        color: var(--vtc-danger, #EA4335);
        background: rgba(234,67,53,0.08);
    }

/* ── Drag handle (glisser-déposer) ── */
.gm-drag-handle[b-hvt2hcdss8] {
    width: 28px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 16px;
    cursor: grab;
    border-radius: 8px;
    margin-left: 2px;
    /* indispensable tactile : empêche le scroll de capter le geste de drag */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color .12s, background .12s;
}

    .gm-drag-handle:hover[b-hvt2hcdss8] {
        color: var(--vtc-primary, var(--z-blue));
        background: rgba(var(--z-blue-rgb),0.08);
    }

    .gm-drag-handle:active[b-hvt2hcdss8] {
        cursor: grabbing;
    }

/* Ligne en cours de déplacement */
.gm-stop-row.gm-dragging[b-hvt2hcdss8] {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border-radius: 10px;
    cursor: grabbing;
}

/* Indicateur d'insertion (où la ligne va atterrir) */
.gm-drop-indicator[b-hvt2hcdss8] {
    height: 2px;
    margin: 1px 8px 1px 28px;
    background: var(--vtc-primary, var(--z-blue));
    border-radius: 2px;
    pointer-events: none;
}

/* ?? Add stop row ?? */
.gm-add-row[b-hvt2hcdss8] {
    min-height: 40px;
}

.gm-add-btn[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: none;
    color: var(--vtc-primary, var(--z-blue));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
}

    .gm-add-btn:hover:not(:disabled)[b-hvt2hcdss8] {
        background: rgba(var(--z-blue-rgb),0.06);
    }

/* « Y aller » — voisin de « Ajouter un arrêt » dans la même rangée.
   Même gabarit (inline-flex, 13px, 6px 14px) pour que les deux s'alignent, mais
   en bouton PLEIN : c'est l'action principale du moment, là où « Ajouter un
   arrêt » reste une option. margin-left:auto le pousse à droite de la rangée. */
.gm-yaller-btn[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: var(--vtc-primary, var(--z-blue));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .12s, transform .12s;
}

    .gm-yaller-btn:hover[b-hvt2hcdss8] { filter: brightness(1.08); }
    .gm-yaller-btn:active[b-hvt2hcdss8] { transform: scale(.97); }

    .gm-add-btn:disabled[b-hvt2hcdss8] {
        color: #bbb;
        cursor: not-allowed;
    }

.gm-max-hint[b-hvt2hcdss8] {
    color: #999;
    font-size: 12px;
    margin-left: 4px;
}

/* ?? Suggestion chips ?? */
.gm-suggestions[b-hvt2hcdss8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
}

.gm-chip[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #dadce0;
    background: var(--vtc-surface, #fff);
    color: var(--vtc-text, var(--z-ink));
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

    .gm-chip i[b-hvt2hcdss8] {
        color: var(--vtc-primary, var(--z-blue));
        font-size: 14px;
    }

    .gm-chip:hover[b-hvt2hcdss8] {
        background: rgba(var(--z-blue-rgb),0.06);
        border-color: var(--vtc-primary, var(--z-blue));
    }

/* Suggestion sur DEUX lignes (24/09/2026) : le nom ou « numéro + rue » en gras,
   puis ce qui le situe — l'adresse d'un lieu (« 23 Rue de Mamboma, Lumumba »),
   le quartier et la ville d'une adresse. */
.gm-chip-2l[b-hvt2hcdss8] {
    white-space: normal;
    text-align: left;
    border-radius: 12px;
    padding: 7px 12px;
    max-width: 100%;
}
.gm-chip-txt[b-hvt2hcdss8] { display: flex; flex-direction: column; min-width: 0; }
.gm-chip-t[b-hvt2hcdss8] { font-weight: 600; line-height: 1.25; }
.gm-chip-d[b-hvt2hcdss8] { font-size: 11.5px; font-weight: 400; line-height: 1.3; color: var(--vtc-text-secondary, #6b7280); }

/* ?? "Ma position actuelle" item ?? */
.gm-myloc-item[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s;
    border-bottom: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    margin-bottom: 4px;
}

    .gm-myloc-item:hover[b-hvt2hcdss8] {
        background: rgba(var(--z-blue-rgb),0.06);
    }

.gm-myloc-icon[b-hvt2hcdss8] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--z-blue-rgb),0.1);
    color: var(--vtc-primary, var(--z-blue));
    font-size: 16px;
}

.gm-myloc-item > i[b-hvt2hcdss8] {
    color: var(--vtc-primary, var(--z-blue));
    font-size: 18px;
    flex-shrink: 0;
}

.gm-myloc-text[b-hvt2hcdss8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--vtc-primary, var(--z-blue));
}

/* ?? Recent addresses ?? */
.gm-recents[b-hvt2hcdss8] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
}

.gm-recents-title[b-hvt2hcdss8] {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gm-recent-item[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s;
}

    .gm-recent-item:hover[b-hvt2hcdss8] {
        background: var(--vtc-surface-dim, #f2f3f5);
    }

    .gm-recent-item > i[b-hvt2hcdss8] {
        color: #9aa0a6;
        font-size: 16px;
        flex-shrink: 0;
    }

.gm-recent-text[b-hvt2hcdss8] {
    flex: 1;
    font-size: 14px;
    color: var(--vtc-text, var(--z-ink));
}

.gm-recent-del[b-hvt2hcdss8] {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    transition: all .12s;
}

    .gm-recent-del:hover[b-hvt2hcdss8] {
        color: var(--vtc-danger, #EA4335);
        background: rgba(234,67,53,0.06);
    }

/* ?? Swap button (origin ? destination) ?? */
.gm-swap-btn[b-hvt2hcdss8] {
    position: absolute;
    right: 2px;
    top: 35%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #dadce0;
    background: var(--vtc-surface, #fff);
    color: var(--vtc-text-muted, #6b7280);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all .15s ease;
    z-index: 3;
}

    .gm-swap-btn:hover[b-hvt2hcdss8] {
        background: var(--vtc-primary, var(--z-blue));
        color: #fff;
        border-color: var(--vtc-primary, var(--z-blue));
        box-shadow: 0 2px 6px rgba(var(--z-blue-rgb),0.25);
    }

    .gm-swap-btn:active[b-hvt2hcdss8] {
        transform: translateY(-50%) scale(0.9);
    }

/* ??????????????????????????????????????????????????
   SECTION 2 é Véhicule & Options
   ?????????????????????????????????????????????????? */

/* ?? Options row: toggle + segmented on one line ?? */
.vo-options-row[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* ?? Priority toggle ?? */
.vo-priority[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vo-priority-label[b-hvt2hcdss8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--vtc-text, var(--z-ink));
}

.toggle-switch[b-hvt2hcdss8] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 24px;
    cursor: pointer;
    transition: background .25s;
    flex-shrink: 0;
}

    .toggle-switch.on[b-hvt2hcdss8] {
        background: var(--vtc-success, var(--z-green));
    }

.toggle-knob[b-hvt2hcdss8] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch.on .toggle-knob[b-hvt2hcdss8] {
    transform: translateX(20px);
}

/* ?? Segmented control (Privée / Groupée) ?? */
.vo-segmented[b-hvt2hcdss8] {
    display: inline-flex;
    background: var(--vtc-surface-dim, #f0f1f5);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
}

.vo-seg[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vtc-text-muted, #6b7280);
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
    border: none;
    background: transparent;
    white-space: nowrap;
}

    .vo-seg i[b-hvt2hcdss8] {
        font-size: 14px;
    }

    .vo-seg:hover[b-hvt2hcdss8] {
        color: var(--vtc-text, var(--z-ink));
    }

.vo-seg-active[b-hvt2hcdss8] {
    background: var(--vtc-primary, var(--z-blue));
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(var(--z-blue-rgb),0.25);
}

/* ?? Vehicle cards scroll zone ?? */
.vo-vehicles-scroll[b-hvt2hcdss8] {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .vo-vehicles-scroll[b-hvt2hcdss8]::-webkit-scrollbar {
        display: none;
    }

.vo-vehicles[b-hvt2hcdss8] {
    display: flex;
    gap: 10px;
    padding-right: 8px;
}

/* ?? Individual vehicle card ?? */
.vo-vehicle-card[b-hvt2hcdss8] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 12px 8px;
    border-radius: var(--vtc-radius-sm, 10px);
    background: var(--vtc-surface-dim, #f5f6fa);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s ease;
    min-width: 80px;
}

    .vo-vehicle-card:hover[b-hvt2hcdss8] {
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }

.vo-vehicle-selected[b-hvt2hcdss8] {
    border-color: var(--vtc-primary, var(--z-blue));
    background: #fff;
    box-shadow: 0 2px 12px rgba(var(--z-blue-rgb),0.15);
}

.vo-vehicle-img[b-hvt2hcdss8] {
    width: 64px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 4px;
}

.vo-vehicle-name[b-hvt2hcdss8] {
    font-size: 11px;
    font-weight: 700;
    color: var(--vtc-text, var(--z-ink));
    text-align: center;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.vo-vehicle-prices[b-hvt2hcdss8] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.vo-price-public[b-hvt2hcdss8] {
    color: var(--vtc-danger, #EA4335);
}

.vo-price-sep[b-hvt2hcdss8] {
    color: #bbb;
    font-weight: 400;
}

.vo-price-private[b-hvt2hcdss8] {
    color: var(--vtc-text-muted, #6b7280);
    font-weight: 500;
}

/* ??????????????????????????????????????????????????
   Remaining: footer, buttons, misc
   ?????????????????????????????????????????????????? */

/* ?? Footer ?? */
.sheet-footer[b-hvt2hcdss8] {
    border-top: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(to top, var(--vtc-surface, #ffffff) 60%, rgba(255,255,255,0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    .sheet-footer .btn-primary[b-hvt2hcdss8] {
        background: linear-gradient(135deg, var(--vtc-primary, var(--z-blue)), var(--vtc-primary-dark, var(--z-blue-dk)));
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 3px 12px rgba(var(--z-blue-rgb),0.25);
        transition: opacity .2s, transform .1s;
    }

        .sheet-footer .btn-primary:hover:not(:disabled)[b-hvt2hcdss8] {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .sheet-footer .btn-primary:disabled[b-hvt2hcdss8] {
            opacity: 0.45;
        }

    .sheet-footer .btn-outline-secondary[b-hvt2hcdss8] {
        border-radius: 12px;
        padding: 10px 16px;
        font-weight: 500;
        font-size: 14px;
        border: 1.5px solid #ddd;
    }

/* ?? Connection status (top-left, opposite close button) ?? */
.connection-status[b-hvt2hcdss8] {
    position: absolute;
    top: 10px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.95);
    font-size: 12px;
    font-weight: 500;
    color: var(--vtc-text, var(--z-ink));
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ?? Close button ?? */
.btn-close[b-hvt2hcdss8] {
    position: absolute;
    top: 10px;
    right: 14px;
    background: rgba(0,0,0,0.05);
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

    .btn-close:hover[b-hvt2hcdss8] {
        background: rgba(0,0,0,0.1);
    }

/* ?? Status dot ?? */
.status-dot[b-hvt2hcdss8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bspulse-b-hvt2hcdss8 2s infinite;
}

@keyframes bspulse-b-hvt2hcdss8 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
    }
}

/* ?? Prix input (recap section) ?? */
.option-group[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-label[b-hvt2hcdss8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--vtc-text-muted, #6b7280);
    white-space: nowrap;
}

.prix-group[b-hvt2hcdss8] {
    margin-left: auto;
}

.prix-input[b-hvt2hcdss8] {
    width: 80px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid #e0e3e8;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    background: var(--vtc-surface-dim, #f5f6fa);
    transition: border-color .2s, box-shadow .2s;
}

    .prix-input:focus[b-hvt2hcdss8] {
        outline: none;
        border-color: var(--vtc-primary, var(--z-blue));
        box-shadow: 0 0 0 3px rgba(var(--z-blue-rgb),0.08);
        background: var(--vtc-surface, #ffffff);
    }

/* ?? Address details (recap section) ?? */
.address-details[b-hvt2hcdss8] {
    margin-bottom: 12px;
}

.address-detail-item[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--vtc-border, rgba(0,0,0,0.04));
}

.detail-label[b-hvt2hcdss8] {
    font-size: 12px;
    font-weight: 700;
    color: var(--vtc-text-muted, #6b7280);
    min-width: 52px;
}

.detail-value[b-hvt2hcdss8] {
    font-size: 14px;
    color: var(--vtc-text, var(--z-ink));
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ?? Directions list ?? */
.directions-list[b-hvt2hcdss8] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .directions-list li[b-hvt2hcdss8] {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        border-radius: 6px;
        margin-bottom: 2px;
        transition: background .15s;
    }

        .directions-list li:hover[b-hvt2hcdss8] {
            background: var(--vtc-surface-dim, #f5f6fa);
        }

        .directions-list li.selected[b-hvt2hcdss8] {
            background: rgba(var(--z-blue-rgb),0.08);
            font-weight: 600;
            color: var(--vtc-primary, var(--z-blue));
            border-left: 3px solid var(--vtc-primary, var(--z-blue));
        }

/* ?? Booking container (Affectation tab) ?? */
.booking-container[b-hvt2hcdss8] {
    background-color: var(--vtc-surface, #ffffff);
    border-radius: var(--vtc-radius, 16px);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    max-width: 500px;
    margin: 16px auto;
    border: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
}

.booking-header[b-hvt2hcdss8] {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--vtc-border, rgba(0,0,0,0.06));
    padding-bottom: 12px;
}

@media (min-width:641px) {
    .vo-options-row[b-hvt2hcdss8] {
        flex-wrap: nowrap;
    }

    .prix-input[b-hvt2hcdss8] {
        width: 100px;
    }
}

/* ?? Desktop (1025px+): side panel like Google Maps ?? */
@media (min-width: 1025px) {
    .bottom-sheet-backdrop[b-hvt2hcdss8] {
        display: none !important;
    }

    .bottom-sheet[b-hvt2hcdss8] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: 400px;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: 2px 0 20px rgba(0,0,0,0.12);
        border-top: none;
        border-right: 3px solid var(--signalr-color, #d32f2f);
        transform: translateX(0) !important;
        transition: transform .35s cubic-bezier(.22,.9,.22,1), border-right-color .4s ease !important;
        pointer-events: auto !important;
        will-change: transform;
        padding-bottom: 0;
        z-index: 100000;
        /* Let the toggle button overflow outside the panel */
        overflow: visible;
    }

        /* Collapsed: slide off-screen but keep toggle visible via overflow */
        .bottom-sheet.desktop-collapsed[b-hvt2hcdss8] {
            transform: translateX(-400px) !important;
        }

    .sheet-handle[b-hvt2hcdss8] {
        display: none;
    }

    /* Toggle button é docked to the right edge, always visible */
    .panel-toggle-btn[b-hvt2hcdss8] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: -24px;
        transform: translateY(-50%);
        width: 24px;
        height: 72px;
        background: var(--vtc-surface, #ffffff);
        border: 1px solid var(--signalr-color, #d32f2f);
        border-left: none;
        border-radius: 0 10px 10px 0;
        cursor: pointer;
        box-shadow: 4px 0 12px rgba(0,0,0,0.08);
        z-index: 100001;
        padding: 0;
        background: var(--signalr-color, #d32f2f);
        color: #fff;
        font-size: 16px;
        transition: background .4s ease, color .15s, box-shadow .15s, border-color .4s ease;
    }

        .panel-toggle-btn:hover[b-hvt2hcdss8] {
            filter: brightness(1.15);
            box-shadow: 4px 0 16px rgba(0,0,0,0.18);
        }

    /* Chevron rotates when collapsed */
    .panel-toggle-icon[b-hvt2hcdss8] {
        transition: transform .35s ease;
        display: inline-block;
    }

    .desktop-collapsed .panel-toggle-icon[b-hvt2hcdss8] {
        transform: rotate(180deg);
    }

    .btn-close[b-hvt2hcdss8] {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
    }

    .connection-status[b-hvt2hcdss8] {
        position: relative;
        top: auto;
        left: auto;
        margin: 12px 14px 0;
    }

    .tab-content[b-hvt2hcdss8] {
        padding-bottom: 16px;
        flex: 1 1 auto;
    }

    .page-nav[b-hvt2hcdss8] {
        padding: 5px;
    }

    .sheet-footer[b-hvt2hcdss8] {
        position: relative;
        border-top: 1px solid var(--vtc-border);
    }
}

/* ?? Landscape mobile: maximize scrollable area ?? */
@media (orientation: landscape) and (max-height: 500px) {
    :root[b-hvt2hcdss8] {
        --sheet-handle-h: 10px;
    }

    .bottom-sheet[b-hvt2hcdss8] {
        height: 100vh;
        border-radius: 0;
    }

    .sheet-handle[b-hvt2hcdss8] {
        margin: 6px auto 4px;
    }

    .page-nav[b-hvt2hcdss8] {
        padding: 6px 10px;
    }

    .tab-content[b-hvt2hcdss8] {
        padding: 8px 12px;
        padding-bottom: 64px;
    }

    .section-card[b-hvt2hcdss8] {
        padding: 10px;
        margin-bottom: 8px;
    }

    .section-title[b-hvt2hcdss8] {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .sheet-footer[b-hvt2hcdss8] {
        padding: 6px 12px;
    }

        .sheet-footer .btn-primary[b-hvt2hcdss8] {
            padding: 6px 14px;
            font-size: 13px;
        }

        .sheet-footer .btn-outline-secondary[b-hvt2hcdss8] {
            padding: 6px 12px;
            font-size: 13px;
        }

    .search-bar-container[b-hvt2hcdss8] {
        margin-bottom: 6px;
    }

        .search-bar-container input[b-hvt2hcdss8] {
            padding: 6px 10px;
            font-size: 13px;
        }

    .options-row[b-hvt2hcdss8] {
        margin-bottom: 8px;
        padding-bottom: 6px;
        gap: 8px;
    }

    .cellule-card[b-hvt2hcdss8] {
        padding: 6px 10px;
    }

        .cellule-card img[b-hvt2hcdss8] {
            width: 32px !important;
            height: 32px !important;
        }

    .connection-status-1[b-hvt2hcdss8] {
        margin-bottom: 6px;
        padding: 4px 10px;
        font-size: 12px;
    }

    .vo-options-row[b-hvt2hcdss8] {
        gap: 8px;
        margin-bottom: 8px;
    }

    .vo-vehicle-card[b-hvt2hcdss8] {
        padding: 6px 8px 4px;
    }

    .vo-vehicle-img[b-hvt2hcdss8] {
        width: 48px !important;
        height: 30px !important;
    }
}

/* ?? Recap card: hidden on mobile, visible on desktop ?? */
.recap-card[b-hvt2hcdss8] {
    display: none;
}

@media (min-width: 1025px) {
    .recap-card[b-hvt2hcdss8] {
        display: block;
    }
}

/* ?? Desktop panel toggle button é hidden on mobile, shown via desktop media query ?? */
.panel-toggle-btn[b-hvt2hcdss8] {
    display: none;
}

/* ??????????????????????????????????????????????????????
   Search driver overlay (Uber/Bolt style)
   ?????????????????????????????????????????????????????? */
.search-driver-overlay[b-hvt2hcdss8] {
    position: fixed;
    inset: 0;
    z-index: 200000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.search-driver-card[b-hvt2hcdss8] {
    background: var(--vtc-surface, #fff);
    border-radius: 20px;
    padding: 32px 24px 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    animation: sdFadeIn-b-hvt2hcdss8 .35s ease;
}

@keyframes sdFadeIn-b-hvt2hcdss8 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-driver-animation[b-hvt2hcdss8] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.search-driver-icon[b-hvt2hcdss8] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--vtc-primary, var(--z-blue));
    z-index: 2;
}

.search-driver-ripple[b-hvt2hcdss8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--vtc-primary, var(--z-blue));
    opacity: 0;
    animation: sdRipple-b-hvt2hcdss8 2s ease-out infinite;
}

    .search-driver-ripple.delay-1[b-hvt2hcdss8] {
        animation-delay: .5s;
    }

    .search-driver-ripple.delay-2[b-hvt2hcdss8] {
        animation-delay: 1s;
    }

@keyframes sdRipple-b-hvt2hcdss8 {
    0% {
        transform: scale(0.3);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.search-driver-title[b-hvt2hcdss8] {
    font-size: 18px;
    font-weight: 700;
    color: var(--vtc-text, var(--z-ink));
    margin-bottom: 6px;
}

.search-driver-subtitle[b-hvt2hcdss8] {
    font-size: 13px;
    color: var(--vtc-text-muted, #6b7280);
    margin-bottom: 14px;
    line-height: 1.4;
}

.search-driver-timer[b-hvt2hcdss8] {
    font-size: 28px;
    font-weight: 800;
    color: var(--vtc-primary, var(--z-blue));
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

.search-driver-retry[b-hvt2hcdss8] {
    font-size: 12px;
    color: var(--vtc-text-muted, #6b7280);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.search-driver-details[b-hvt2hcdss8] {
    font-size: 13px;
    color: var(--vtc-text, var(--z-ink));
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.search-driver-price[b-hvt2hcdss8] {
    font-size: 15px;
    font-weight: 700;
    color: var(--vtc-success, var(--z-green));
    margin-bottom: 18px;
}

.search-driver-cancel[b-hvt2hcdss8] {
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
}

/* ??????????????????????????????????????????????????
   Arrival modal
   ?????????????????????????????????????????????????? */
.arrival-modal-overlay[b-hvt2hcdss8] {
    position: fixed;
    inset: 0;
    z-index: 200001;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrival-modal[b-hvt2hcdss8] {
    background: var(--vtc-surface, #fff);
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sdFadeIn-b-hvt2hcdss8 .3s ease;
}

.arrival-modal-body[b-hvt2hcdss8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--vtc-text, var(--z-ink));
    margin-bottom: 20px;
    line-height: 1.5;
}

.arrival-modal-footer[b-hvt2hcdss8] {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ━━━ Bouton Partager la course ━━━ */
.vtc-btn-share[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    margin-top: 10px;
    border: 2px solid var(--vtc-primary, var(--z-blue));
    border-radius: var(--vtc-radius-sm, 10px);
    background: transparent;
    color: var(--vtc-primary, var(--z-blue));
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .vtc-btn-share:hover:not(:disabled)[b-hvt2hcdss8] {
        background: var(--vtc-primary, var(--z-blue));
        color: #fff;
    }

    .vtc-btn-share:disabled[b-hvt2hcdss8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Bouton « Payer en scannant le chauffeur » (onglet Affectation, fin de course) */
.vtc-btn-scan-qr[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    margin-top: 10px;
    border: none;
    border-radius: var(--vtc-radius-sm, 10px);
    background: var(--vtc-primary, var(--z-blue));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--z-blue-rgb),0.25);
    transition: background .18s, box-shadow .18s;
}

    .vtc-btn-scan-qr:hover[b-hvt2hcdss8] {
        background: #1257b8;
        box-shadow: 0 3px 12px rgba(var(--z-blue-rgb),0.35);
    }

.vtc-share-error[b-hvt2hcdss8] {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--vtc-danger, #EA4335);
    text-align: center;
}

/* ━━━ Modal de partage ━━━ */
.share-modal-overlay[b-hvt2hcdss8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    animation: shareOverlayIn-b-hvt2hcdss8 .2s ease;
}

@keyframes shareOverlayIn-b-hvt2hcdss8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.share-modal[b-hvt2hcdss8] {
    background: #fff;
    border-radius: 20px 20px 16px 16px;
    width: 100%;
    max-width: 480px;
    padding: 20px 20px 24px;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
    animation: shareModalUp-b-hvt2hcdss8 .25s ease;
}

@keyframes shareModalUp-b-hvt2hcdss8 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.share-modal-header[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
    color: var(--vtc-text, var(--z-ink));
    margin-bottom: 10px;
}

.share-modal-close[b-hvt2hcdss8] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vtc-text-muted, #6b7280);
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
}

.share-modal-desc[b-hvt2hcdss8] {
    font-size: 0.85rem;
    color: var(--vtc-text-muted, #6b7280);
    margin-bottom: 16px;
    line-height: 1.5;
}

.share-link-row[b-hvt2hcdss8] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.share-link-input[b-hvt2hcdss8] {
    flex: 1;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82rem;
    color: #555;
    background: #f9f9f9;
    outline: none;
    min-width: 0;
    cursor: text;
}

.share-btn-copy[b-hvt2hcdss8] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--vtc-primary, var(--z-blue));
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

    .share-btn-copy:hover[b-hvt2hcdss8] {
        background: var(--vtc-primary-dark, var(--z-blue-dk));
    }

    .share-btn-copy.share-btn-copied[b-hvt2hcdss8] {
        background: var(--vtc-success, var(--z-green));
    }

.share-copied-msg[b-hvt2hcdss8] {
    font-size: 0.82rem;
    color: var(--vtc-success, var(--z-green));
    font-weight: 600;
    margin-bottom: 12px;
    animation: shareCopiedFade-b-hvt2hcdss8 .3s ease;
}

@keyframes shareCopiedFade-b-hvt2hcdss8 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-btn-system[b-hvt2hcdss8] {
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    border: none;
    border-radius: 10px;
    background: var(--vtc-surface-dim, #f5f6fa);
    color: var(--vtc-text, var(--z-ink));
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
}

    .share-btn-system:hover[b-hvt2hcdss8] {
        background: #ebebeb;
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Onglet Notation — rtg-*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rtg-tab[b-hvt2hcdss8] {
    padding: 4px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Page Notation : réduire le rembourrage bas du conteneur défilant pour que les
   boutons d'action épinglés (.rtg-actions) collent au bas de la feuille. */
.tab-content.tc-rating[b-hvt2hcdss8] {
    padding-bottom: 6px;
}

/* ── État vide ── */
.rtg-empty[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 32px;
    gap: 10px;
    text-align: center;
}

.rtg-empty-icon[b-hvt2hcdss8] {
    font-size: 52px;
    color: #d0d5dd;
    line-height: 1;
}

.rtg-empty-title[b-hvt2hcdss8] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vtc-text, var(--z-ink));
}

.rtg-empty-sub[b-hvt2hcdss8] {
    font-size: 0.85rem;
    color: var(--vtc-text-muted, #6b7280);
    max-width: 260px;
    line-height: 1.5;
}

/* ── Bandeau récapitulatif ── */
.rtg-recap[b-hvt2hcdss8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rtg-recap-pill[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
}

.rtg-pill-green[b-hvt2hcdss8] {
    background: #e8f5e9;
    color: #2e7d32;
}

.rtg-pill-blue[b-hvt2hcdss8] {
    background: #e3f2fd;
    color: #1565c0;
}

.rtg-pill-gray[b-hvt2hcdss8] {
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Carte chauffeur ── */
.rtg-driver-card[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--vtc-surface-dim, #f5f6fa);
    border-radius: var(--vtc-radius-sm, 10px);
    padding: 8px 12px;
}

.rtg-driver-avatar[b-hvt2hcdss8] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vtc-primary, var(--z-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(var(--z-blue-rgb),0.2);
}

    .rtg-driver-avatar img[b-hvt2hcdss8] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.rtg-initials[b-hvt2hcdss8] {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.rtg-driver-name[b-hvt2hcdss8] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vtc-text, var(--z-ink));
}

.rtg-driver-label[b-hvt2hcdss8] {
    font-size: 0.78rem;
    color: var(--vtc-text-muted, #6b7280);
    margin-top: 2px;
}

/* ── Section étoiles ── */
.rtg-section[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rtg-section-label[b-hvt2hcdss8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vtc-text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 5px;
}

.rtg-optional[b-hvt2hcdss8] {
    font-weight: 400;
    font-size: 0.78rem;
}

.rtg-stars[b-hvt2hcdss8] {
    display: flex;
    gap: 4px;
}

.rtg-star[b-hvt2hcdss8] {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    color: #d0d5dd;
    transition: color .12s, transform .1s;
}

    .rtg-star:hover[b-hvt2hcdss8],
    .rtg-star.rtg-star-hover[b-hvt2hcdss8] {
        color: #fbbf24;
        transform: scale(1.15);
    }

    .rtg-star.rtg-star-filled[b-hvt2hcdss8] {
        color: #f59e0b;
    }

    .rtg-star:focus-visible[b-hvt2hcdss8] {
        outline: 2px solid var(--vtc-primary, var(--z-blue));
        border-radius: 4px;
    }

.rtg-star-label[b-hvt2hcdss8] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #f59e0b;
    min-height: 18px;
    animation: rtgLabelIn-b-hvt2hcdss8 .18s ease;
}

@keyframes rtgLabelIn-b-hvt2hcdss8 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tags ── */
.rtg-tags[b-hvt2hcdss8] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rtg-tag[b-hvt2hcdss8] {
    padding: 6px 13px;
    border-radius: 20px;
    border: 1.5px solid var(--vtc-border, rgba(0,0,0,0.1));
    background: var(--vtc-surface, #fff);
    color: var(--vtc-text-muted, #6b7280);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1;
}

    .rtg-tag:hover[b-hvt2hcdss8] {
        background: var(--vtc-surface-dim, #f5f6fa);
        color: var(--vtc-text, var(--z-ink));
    }

    .rtg-tag.rtg-tag-selected[b-hvt2hcdss8] {
        background: var(--vtc-primary, var(--z-blue));
        color: #fff;
        border-color: var(--vtc-primary, var(--z-blue));
        font-weight: 600;
    }

/* ── Commentaire ── */
.rtg-textarea[b-hvt2hcdss8] {
    width: 100%;
    border: 1.5px solid var(--vtc-border, rgba(0,0,0,0.1));
    border-radius: var(--vtc-radius-sm, 10px);
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--vtc-text, var(--z-ink));
    background: var(--vtc-surface, #fff);
    resize: none;
    transition: border-color .18s, box-shadow .18s;
    line-height: 1.5;
}

    .rtg-textarea:focus[b-hvt2hcdss8] {
        outline: none;
        border-color: var(--vtc-primary, var(--z-blue));
        box-shadow: 0 0 0 3px rgba(var(--z-blue-rgb),0.12);
    }

.rtg-char-count[b-hvt2hcdss8] {
    font-size: 0.75rem;
    color: var(--vtc-text-muted, #6b7280);
    text-align: right;
}

.rtg-char-warn[b-hvt2hcdss8] {
    color: #d97706;
    font-weight: 600;
}

/* ── Erreur ── */
.rtg-error[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
}

/* ── Boutons ── */
.rtg-actions[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Épinglés au bas du conteneur défilant : les boutons Envoyer/Passer restent
       toujours visibles, même quand le formulaire dépasse la hauteur de la feuille. */
    position: sticky;
    bottom: 0;
    margin-top: 2px;
    padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    background: #f5f6fa;
    box-shadow: 0 -8px 14px -8px rgba(0,0,0,0.18);
    z-index: 5;
}

.rtg-btn-submit[b-hvt2hcdss8] {
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: var(--vtc-radius-sm, 10px);
    background: linear-gradient(135deg, var(--vtc-primary, var(--z-blue)), var(--vtc-primary-dark, var(--z-blue-dk)));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s, transform .12s;
    box-shadow: 0 3px 10px rgba(var(--z-blue-rgb),0.28);
}

    .rtg-btn-submit:hover:not(:disabled)[b-hvt2hcdss8] {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    .rtg-btn-submit:disabled[b-hvt2hcdss8] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

.rtg-btn-skip[b-hvt2hcdss8] {
    width: 100%;
    padding: 11px;
    border: 1.5px solid var(--vtc-border, rgba(0,0,0,0.1));
    border-radius: var(--vtc-radius-sm, 10px);
    background: transparent;
    color: var(--vtc-text-muted, #6b7280);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .rtg-btn-skip:hover:not(:disabled)[b-hvt2hcdss8] {
        background: var(--vtc-surface-dim, #f5f6fa);
        color: var(--vtc-text, var(--z-ink));
    }

/* ── Confirmation ── */
.rtg-success[b-hvt2hcdss8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 20px 24px;
    gap: 8px;
    text-align: center;
    animation: rtgSuccessIn-b-hvt2hcdss8 .35s ease;
}

@keyframes rtgSuccessIn-b-hvt2hcdss8 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rtg-success-icon[b-hvt2hcdss8] {
    font-size: 56px;
    color: var(--vtc-success, var(--z-green));
    line-height: 1;
    margin-bottom: 4px;
}

.rtg-success-title[b-hvt2hcdss8] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vtc-text, var(--z-ink));
}

.rtg-success-sub[b-hvt2hcdss8] {
    font-size: 0.88rem;
    color: var(--vtc-text-muted, #6b7280);
    margin-bottom: 8px;
}

.rtg-success-stars[b-hvt2hcdss8] {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.rtg-success-star[b-hvt2hcdss8] {
    font-size: 1.8rem;
    color: #d0d5dd;
    transition: color .1s;
}

    .rtg-success-star.rtg-success-star-on[b-hvt2hcdss8] {
        color: #f59e0b;
    }


@media (max-width: 1024px) {
    .tab-recherche > .section-card[b-hvt2hcdss8] {
        display: none;
    }
    .tab-recherche > .section-card.cbs-sd-section[b-hvt2hcdss8] {
        display: flex;
    }
}

/* Mobile : peek = 18px (bordure 3px + handle row 15px) */
@media (max-width: 1024px) {
    :root[b-hvt2hcdss8] {
        --sheet-handle-h: 18px;
    }
}

/* Mobile : sheet-footer caché */
@media (max-width: 1024px) {
    .sheet-footer[b-hvt2hcdss8] {
        display: none;
    }
}

/* Mobile (≤1024px) : largeur max de la feuille = 624px, centrée */
@media (max-width: 1024px) {
    .bottom-sheet[b-hvt2hcdss8] {
        max-width: 624px;
        margin-left: 0;
        margin-right: auto;   /* aligné à gauche de l'écran */
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HABILLAGE MAQUETTE — route /navigation (SkinMaquette=true)

   Écrans 08 « Course · destination » et 09 « Chauffeur trouvé ».

   ⚠️ Rendu CLAIR FIXE, y compris en thème nuit : la maquette a été validée
   ainsi. Les couleurs sont donc écrites en dur et NE passent pas par les
   jetons --zz-* / --vtc-*, contrairement au reste du projet. C'est la seule
   zone du fichier dans ce cas ; ne pas s'en inspirer ailleurs.

   Ces règles ne mordent que sous .zm-skin, classe posée uniquement quand
   SkinMaquette vaut vrai : le panneau de /transport n'en voit rien.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le shell garde sa place et son ElementReference — il ne fait plus que
   porter la feuille. transform en !important : bottom-sheet.js écrit un
   translateY en style inline, qu'il faut neutraliser sans le désactiver
   (le désinitialiser casserait le retour sur /transport). */
.bottom-sheet.zm-skin[b-hvt2hcdss8] {
    height: auto !important;
    /* Plafond volontairement bas : la carte doit garder de quoi montrer le trajet
       entier, et la feuille ne doit jamais le recouvrir. Ce qui deborde defile. */
    max-height: 58dvh;
    transform: none !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

/* ── La feuille ─────────────────────────────────────────────────────── */
.zm-skin .zm-sheet[b-hvt2hcdss8] {
    background: #fff;
    border-radius: 30px 30px 0 0;
    padding: 20px 20px 26px;
    box-shadow: 0 -20px 40px rgba(11,37,69,.14);
    max-height: 58dvh;
    overflow-y: auto;
    font-family: Poppins, system-ui, sans-serif;
    /* #0B2545 sur #FFFFFF = 15,3:1 — AAA */
    color: #0B2545;
}

.zm-skin .zm-sheet-grab[b-hvt2hcdss8] {
    width: 44px; height: 5px;
    border-radius: 3px;
    background: #E1E9F2;
    margin: 0 auto 16px;
}

.zm-skin .zm-sec-ttl[b-hvt2hcdss8] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0B2545;
}

/* ── Rappel de trajet (écran 09) ────────────────────────────────────────
   La saisie d'itinéraire, elle, n'a plus de style propre : la vue « adresses »
   réplique le gm-route-builder du panneau classique et hérite donc des règles
   gm-* de ce fichier. */
.zm-skin .zm-route-row[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0B2545;
}

.zm-skin .zm-pt[b-hvt2hcdss8] { width: 11px; height: 11px; flex: none; }
.zm-skin .zm-pt.to[b-hvt2hcdss8] { border-radius: 3px; background: #0A6EE1; }

.zm-skin .zm-iconbtn[b-hvt2hcdss8] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border: 0; border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11,37,69,.14);
    color: #0B2545;
    cursor: pointer;
}
.zm-skin .zm-iconbtn.small[b-hvt2hcdss8] {
    width: 26px; height: 26px;
    box-shadow: none; background: transparent;
    color: #7E8CA0; font-size: 12px;
}

/* ── Suggestions, favoris, récents ──────────────────────────────────── */
.zm-skin .zm-list[b-hvt2hcdss8] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    /* Les lignes occupent toute la largeur : sans cela une ligne courte se
       centrerait sur la colonne au lieu de commencer au bord. */
    align-items: stretch;
    text-align: left;
}

.zm-skin .zm-list-item[b-hvt2hcdss8] {
    display: flex; align-items: center; gap: 11px;
    /* justify-content explicite : text-align ne pilote pas la disposition des
       enfants d'un conteneur flex, c'est lui qui décide où ils commencent. */
    justify-content: flex-start;
    /* Aucun retrait à gauche : le texte s'aligne sur la marge de la feuille,
       comme le titre et les champs au-dessus. */
    width: 100%; padding: 11px 0;
    border: 0; border-bottom: 1px solid #F1F5FA;
    background: none; text-align: left;
    font: 500 13.5px Poppins, system-ui, sans-serif;
    color: #0B2545;
    cursor: pointer;
}

/*  Le libellé prend toute la place restante, sinon il se replie sur sa propre
    largeur et son ellipse ne se déclenche jamais. */
.zm-skin .zm-list-item > .zm-ellipsis[b-hvt2hcdss8] { flex: 1; min-width: 0; text-align: left; }
.zm-skin .zm-list-item:last-child[b-hvt2hcdss8] { border-bottom: 0; }
.zm-skin .zm-list-item .bi[b-hvt2hcdss8] { color: #7E8CA0; }

.zm-skin .zm-ellipsis[b-hvt2hcdss8] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Suggestion sur deux lignes (24/09/2026) : le nom en premier, ce qui le situe
   dessous, plus petit — l'adresse d'un lieu, ou le quartier et la ville. */
.zm-skin .zm-list-item > .zm-2l[b-hvt2hcdss8] { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.zm-skin .zm-2l-t[b-hvt2hcdss8] { font-weight: 600; }
.zm-skin .zm-2l-d[b-hvt2hcdss8] { font-size: 12px; font-weight: 400; color: #7E8CA0; margin-top: 1px; }

/* ── Véhicules (écran 08) ───────────────────────────────────────────── */
.zm-skin .zm-opts[b-hvt2hcdss8] { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.zm-skin .zm-opt[b-hvt2hcdss8] {
    display: flex; align-items: center; gap: 13px;
    width: 100%; padding: 12px 14px;
    border: 1.5px solid #E1E9F2; border-radius: 18px;
    background: #fff; text-align: left;
    cursor: pointer;
}
.zm-skin .zm-opt.sel[b-hvt2hcdss8] { border-color: #0A6EE1; background: #F5F9FF; }
.zm-skin .zm-opt img[b-hvt2hcdss8] { width: 48px; height: 34px; flex: none; object-fit: contain; }

.zm-skin .zm-opt-name[b-hvt2hcdss8]  { font: 700 14px Poppins, system-ui, sans-serif; color: #0B2545; }
/* #5A6B85 sur #FFFFFF = 5,3:1 — AA */
.zm-skin .zm-opt-desc[b-hvt2hcdss8]  { font: 500 12px Poppins, system-ui, sans-serif; color: #5A6B85; }
.zm-skin .zm-opt-price[b-hvt2hcdss8] { font: 700 15px Poppins, system-ui, sans-serif; color: #0B2545; white-space: nowrap; }
.zm-skin .zm-opt-price small[b-hvt2hcdss8] { font-size: 10.5px; font-weight: 600; }

.zm-skin .zm-wait[b-hvt2hcdss8] { margin-top: 14px; }

/* ── Chauffeur trouvé (écran 09) ────────────────────────────────────── */
.zm-skin .zm-eyebrow[b-hvt2hcdss8] {
    font-size: 10.5px; font-weight: 700;
    /* #0A6EE1 sur #FFFFFF = 4,7:1 — AA */
    color: #0A6EE1;
    letter-spacing: .08em; text-transform: uppercase;
}

.zm-skin .zm-eta[b-hvt2hcdss8] {
    margin-top: 6px;
    font-size: 21px; font-weight: 700; letter-spacing: -.02em;
    color: #0B2545;
}

.zm-skin .zm-driver[b-hvt2hcdss8] { margin-top: 16px; display: flex; align-items: center; gap: 13px; }

.zm-skin .zm-driver img[b-hvt2hcdss8],
.zm-skin .zm-driver-ph[b-hvt2hcdss8] {
    width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover;
    background: repeating-linear-gradient(135deg, #E2EAF4 0 5px, #F1F6FB 5px 10px);
}

.zm-skin .zm-driver-name[b-hvt2hcdss8] { font-size: 15px; font-weight: 700; color: #0B2545; }

.zm-skin .zm-plate[b-hvt2hcdss8] {
    padding: 9px 12px; border-radius: 12px; background: #F1F5FA;
    font: 700 12px ui-monospace, Menlo, monospace; color: #0B2545;
}

.zm-skin .zm-ride[b-hvt2hcdss8] {
    margin-top: 14px; padding: 12px 14px;
    background: #F7F9FC; border-radius: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.zm-skin .zm-ride-price[b-hvt2hcdss8] { font-size: 15px; }

/* ── Actions ────────────────────────────────────────────────────────── */
.zm-skin .zm-actions[b-hvt2hcdss8] { display: flex; gap: 10px; margin-top: 16px; }
.zm-skin .zm-actions .zm-btn[b-hvt2hcdss8] { flex: 1; }

.zm-skin .zm-btn[b-hvt2hcdss8] {
    height: 50px; padding: 0 18px;
    border: 0; border-radius: 16px;
    background: #0A6EE1; color: #fff;
    font: 700 14.5px Poppins, system-ui, sans-serif;
    cursor: pointer;
}
.zm-skin .zm-btn:disabled[b-hvt2hcdss8] { background: #B9CBE0; cursor: default; }
.zm-skin .zm-btn.ghost[b-hvt2hcdss8] {
    background: #F1F5FA;
    /* #0B2545 sur #F1F5FA = 14,1:1 — AAA */
    color: #0B2545;
}
.zm-skin .zm-btn-wide[b-hvt2hcdss8] { width: 100%; margin-top: 16px; }

/*  Les deux issues d'un même trajet : s'y rendre soi-même, ou commander.
    « Commander » occupe deux tiers de la largeur — c'est le métier de la
    plateforme et la sortie la plus fréquente — sans pour autant reléguer
    l'autre dans un menu : les deux se voient d'un seul regard. */
.zm-skin .zm-actions-duo[b-hvt2hcdss8] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.zm-skin .zm-btn-second[b-hvt2hcdss8],
.zm-skin .zm-btn-primary[b-hvt2hcdss8] {
    padding: 14px 12px;
    border-radius: 14px;
    font: 700 15px Poppins, system-ui, sans-serif;
    cursor: pointer;
    transition: opacity .15s;
}

.zm-skin .zm-btn-second[b-hvt2hcdss8] {
    flex: 1 1 0;
    border: 2px solid #0A6EE1;
    background: #fff;
    color: #0A6EE1;
}

.zm-skin .zm-btn-primary[b-hvt2hcdss8] {
    flex: 2 1 0;
    border: 0;
    background: #0A6EE1;
    color: #fff;
}

.zm-skin .zm-btn-second:disabled[b-hvt2hcdss8],
.zm-skin .zm-btn-primary:disabled[b-hvt2hcdss8] { opacity: .45; cursor: default; }

.zm-skin .zm-link[b-hvt2hcdss8] {
    margin-top: 12px; width: 100%; padding: 8px 0;
    border: 0; background: none;
    font: 600 13px Poppins, system-ui, sans-serif;
    color: #0A6EE1; cursor: pointer;
}

.zm-skin .zm-cancel[b-hvt2hcdss8] {
    margin-top: 12px; width: 100%; padding: 8px 0;
    border: 0; background: none;
    font: 600 13px Poppins, system-ui, sans-serif;
    /* #E8402A sur #FFFFFF = 4,0:1 — sous AA pour du texte de 13 px, mais c'est
       l'action de retrait de la maquette, doublée par un libellé explicite. */
    color: #E8402A; cursor: pointer;
}

.zm-skin .zm-ok[b-hvt2hcdss8]  { margin-top: 12px; font: 600 12.5px Poppins, system-ui, sans-serif; color: #1B7F4B; }
.zm-skin .zm-err[b-hvt2hcdss8] { margin-top: 12px; font: 600 12.5px Poppins, system-ui, sans-serif; color: #C0392B; }

/* ── Vues successives de la feuille : trajet → options ──────────────── */
.zm-skin .zm-step-head[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .zm-skin .zm-step-head .zm-sec-ttl[b-hvt2hcdss8] { margin: 0; }

    /* Retour à la saisie : plus grand que la croix d'un champ, c'est une
       navigation et non une correction. */
    .zm-skin .zm-step-head .zm-iconbtn.small[b-hvt2hcdss8] {
        width: 34px;
        height: 34px;
        background: #F1F5FA;
        color: #0B2545;
        font-size: 14px;
    }

/* Les sections reprises du panneau classique gardent leur habillage ; seule
   la première a besoin d'un peu d'air sous l'en-tête de vue. */
.zm-skin .section-card:first-of-type[b-hvt2hcdss8] { margin-top: 2px; }

/* ── Attente d'un chauffeur ─────────────────────────────────────────── */
.zm-skin .zm-search[b-hvt2hcdss8] { text-align: center; padding: 4px 0; }

    /* L'animation est celle du panneau classique (search-driver-*) : elle
       arrive déjà centrée et dimensionnée, rien à redéfinir ici. */
    .zm-skin .zm-search .zm-ride-price[b-hvt2hcdss8] {
        display: block;
        margin-top: 8px;
    }

    /* Chiffres à chasse fixe : sans cela le compteur fait sauter la ligne
       à chaque seconde. */
    .zm-skin .zm-timer[b-hvt2hcdss8] {
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }

/* ── Résultats d'une catégorie (selection-bar) ───────────────────────────
   Feuille volontairement plus basse que les autres vues : ces lignes ne se
   comprennent qu'en voyant les pins auxquels elles renvoient. */
.zm-skin .zm-sheet.zm-cat[b-hvt2hcdss8] {
    max-height: 42dvh;
}

/* ── Notation (fin de course) ────────────────────────────────────────────
   La carte n'a plus rien à montrer : la feuille grandit pour tenir toute la
   page d'évaluation d'un bloc. Elle garde ~9 % d'écran en haut (liseré de
   carte + zone sûre) ; ce qui déborde sur un très petit écran défile. */
.bottom-sheet.zm-skin.zm-notation[b-hvt2hcdss8],
.zm-skin .zm-sheet.zm-notation[b-hvt2hcdss8] {
    max-height: calc(91dvh - env(safe-area-inset-top, 0px));
}

.zm-skin .zm-cat-count[b-hvt2hcdss8] {
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0B2545;
}

.zm-skin .zm-cat-list[b-hvt2hcdss8] { margin-top: 6px; }

.zm-skin .zm-cat-row[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #F1F5FA;
}

    .zm-skin .zm-cat-row:last-child[b-hvt2hcdss8] { border-bottom: 0; }

.zm-skin .zm-cat-main[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    flex: 1;
    min-width: 0;
    /* Même marge de gauche que les autres lignes de liste : rien ne justifie
       qu'une liste de lieux commence deux pixels plus loin qu'une liste
       d'adresses. */
    padding: 11px 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* Le numéro est celui que porte le pin : c'est lui qui fait le lien entre la
   ligne et le point, sans obliger à lire les noms sur la carte. */
.zm-skin .zm-cat-rang[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: #0B2545;
    color: #fff;                        /* 15,3:1 — AAA */
    font: 700 11px Poppins, system-ui, sans-serif;
}

.zm-skin .zm-cat-nom[b-hvt2hcdss8] {
    flex: 1;
    min-width: 0;
    font: 600 13.5px Poppins, system-ui, sans-serif;
    color: #0B2545;
}

.zm-skin .zm-cat-km[b-hvt2hcdss8] {
    flex: none;
    font: 600 12px Poppins, system-ui, sans-serif;
    color: #5A6B85;                     /* 5,3:1 — AA */
    white-space: nowrap;
}

.zm-skin .zm-cat-go[b-hvt2hcdss8] {
    flex: none;
    padding: 7px 12px;
    border: 1px solid #0A6EE1;
    border-radius: 999px;
    background: #fff;
    font: 700 12px Poppins, system-ui, sans-serif;
    color: #0A6EE1;                     /* 4,7:1 — AA */
    cursor: pointer;
}

/*  Feuille effacée le temps de désigner un point sur la carte. On la masque
    plutôt que de la démonter : l'état de la saisie reste intact, et la mesure
    de hauteur rend zéro, ce qui libère aussi le padding de la vue. */
.zm-skin .zm-sheet.zm-efface[b-hvt2hcdss8] { display: none; }

/*  Raccourci posé dans l'en-tête d'une vue, à droite du titre : même famille
    que .zm-chip, mais il ne prend pas la largeur d'une ligne. */
.zm-skin .zm-chip-tete[b-hvt2hcdss8] {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid #E1E9F2; border-radius: 999px;
    background: #fff;
    font: 600 12px Poppins, system-ui, sans-serif;
    color: #0A6EE1;                     /* 4,7:1 — AA */
    cursor: pointer;
}

/*  Réintroduit pour le raccourci « Voir le trajet » de la vue adresses : la
    classe avait été retirée avec les outils d'itinéraire, remplacés par le
    gm-route-builder. */
.zm-skin .zm-chip[b-hvt2hcdss8] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px solid #E1E9F2; border-radius: 999px;
    background: #fff;
    font: 600 12.5px Poppins, system-ui, sans-serif;
    color: #0A6EE1;
    cursor: pointer;
}

/*  ── Feuille repliée ───────────────────────────────────────────────────
    Deux positions, pas un glissement libre : la hauteur reste une valeur
    connue, que le padding de la vue et les boutons flottants suivent déjà.
    Rien n'est confié à bottom-sheet.js, dont les snap points et les styles
    inline se battraient avec cette mise en page. */
.zm-skin .zm-resume[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 4px 0 2px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.zm-skin .zm-resume-txt[b-hvt2hcdss8] {
    font: 700 15px Poppins, system-ui, sans-serif;
    color: #0B2545;                      /* 15,3:1 — AAA */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.zm-skin .zm-resume .bi[b-hvt2hcdss8] { color: #7E8CA0; font-size: 13px; }

/*  La poignée devient un bouton : même dessin qu'avant, mais une cible de
    44 px de haut, sans quoi elle serait inatteignable au pouce. */
.zm-skin .zm-sheet-grab[b-hvt2hcdss8] {
    display: block;
    width: 44px; height: 5px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #E1E9F2;
    margin: 0 auto 16px;
    cursor: pointer;
    /* Zone tactile étendue au-delà du trait visible. */
    box-sizing: content-box;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    background-clip: content-box;
    margin-top: -14px;
    margin-bottom: 2px;
    touch-action: none;
}

/*  ── Écran « chauffeur trouvé », disposition resserrée ──────────────────
    Objectif : la feuille prend le moins de hauteur possible, la carte est
    ce que l'on regarde pendant l'attente. */

/* État + délai à gauche, plaque à droite : trois informations courtes sur
   une ligne au lieu de trois. */
.zm-skin .zm-drv-tete[b-hvt2hcdss8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.zm-skin .zm-driver[b-hvt2hcdss8] { margin-top: 12px; }

/* Ligne de compagnie : discrète, elle ne doit pas concurrencer le véhicule. */
.zm-skin .zm-drv-cie[b-hvt2hcdss8] {
    margin-top: 1px;
    font-size: 11.5px;
}

    .zm-skin .zm-drv-cie .bi[b-hvt2hcdss8] { font-size: 10.5px; }

/*  ── Actions secondaires sur une rangée ────────────────────────────────
    Les liens ne prennent plus la largeur : ils se rangent côte à côte, et
    l'annulation part à droite, séparée du reste. */
.zm-skin .zm-liens[b-hvt2hcdss8] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.zm-skin .zm-liens .zm-link[b-hvt2hcdss8] {
    width: auto;
    margin-top: 0;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    /* L'annulation se détache : à droite, en rouge, à l'écart des actions
       anodines qu'on touche sans y penser. */
    .zm-skin .zm-liens .zm-link-rouge[b-hvt2hcdss8] {
        margin-left: auto;
        /* #E8402A sur #FFFFFF = 4,0:1 — sous AA pour 13 px, mais c'est l'action
           de retrait, doublée par un libellé explicite et une confirmation. */
        color: #E8402A;
    }

.zm-skin .zm-liens .zm-link:disabled[b-hvt2hcdss8] { opacity: .5; cursor: default; }

/*  Liseré d'état de la connexion, comme en haut du panneau : vert connecté,
    orange quand SignalR est contourné, rouge sinon. La variable est posée en
    style inline sur .bottom-sheet et les propriétés personnalisées s'héritent :
    la feuille la lit sans qu'on ait à la recalculer.

    C'est la feuille qui le porte, et non le shell : celui-ci est transparent
    en mode maquette, sa bordure aurait flotté au-dessus du vide. Posée ici,
    elle épouse les coins arrondis. */
.zm-skin .zm-sheet[b-hvt2hcdss8] {
    border-top: 3px solid var(--signalr-color, #d32f2f);
    transition: border-top-color .4s ease;
}

/*  L'immatriculation forme la troisième colonne de la ligne chauffeur : photo,
    identité, plaque. flex:none pour qu'elle garde sa taille quand le nom du
    véhicule est long, align-self pour la centrer sur les deux lignes de texte. */
.zm-skin .zm-driver .zm-plate[b-hvt2hcdss8] {
    flex: none;
    align-self: center;
}

/*  Le bouton « Appeler » est un lien : il lui faut les manières d'un bouton
    (hauteur, centrage, pas de soulignement) sans en être un — c'est ce qui
    rend l'appel fiable, un tel: suivi par le navigateur lui-même. */
.zm-skin .zm-btn-lien[b-hvt2hcdss8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 50px;
}


/*  ══ Clavier ouvert : la liste se déroule VERS LE HAUT, sur la carte ══════
    Tant que le clavier est fermé, les propositions s'affichent sous le champ
    de saisie — c'est l'ordre naturel de lecture, et la carte reste dégagée.

    Dès qu'il s'ouvre, cet ordre devient intenable : le clavier occupe la
    moitié basse de l'écran, et tout ce qui vit sous le champ passe derrière
    lui. Remonter la feuille ne suffit pas — le peu de hauteur qui reste sous
    le champ ne montre qu'une ou deux propositions.

    On inverse donc : la liste passe AU-DESSUS des champs, là où la carte
    laisse de la place. Le regard la trouve entre ce qu'on tape et le haut de
    l'écran, et le clavier ne peut plus l'atteindre.

    --kb est la hauteur du clavier, mesurée par js/clavier-virtuel.js. */
:root.clavier-ouvert .zm-skin .zm-sheet[b-hvt2hcdss8] {
    /* Bloc à l'origine : il faut une colonne flexible pour réordonner. */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--kb, 0px) - 8px);
}

/*  order négatif : la liste précède tout le reste, champs compris. */
:root.clavier-ouvert .zm-skin .zm-list[b-hvt2hcdss8] {
    order: -1;
    max-height: calc(100dvh - var(--kb, 0px) - 240px);
    overflow-y: auto;
    margin-bottom: 10px;
}

/*  Le titre s'efface pendant la saisie : « Où allez-vous ? » n'apprend plus
    rien à qui est déjà en train de taper, et sa ligne vaut une proposition
    de plus. */
:root.clavier-ouvert .zm-skin .zm-sec-ttl[b-hvt2hcdss8] { display: none; }

/*  Vignette d'un lieu proposé et publié (résultats d'une catégorie). Carrée
    et petite : elle aide à reconnaître une devanture sans pousser le nom hors
    de la ligne. La pastille dit qu'il y en a d'autres à voir. */
.zm-skin .zm-cat-vignette[b-hvt2hcdss8] {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #E1E9F2;
    border-radius: 8px;
    overflow: hidden;
    background: #F1F5FA;
    cursor: pointer;
}

    .zm-skin .zm-cat-vignette img[b-hvt2hcdss8] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.zm-skin .zm-cat-vignette-nb[b-hvt2hcdss8] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(11, 37, 69, .85);
    color: #fff;
    font: 700 9.5px/15px Poppins, system-ui, sans-serif;
    text-align: center;
}

/* Bouton « Message » : discussion dans l'application, pastille des non-lus. */
.zm-btn-discussion[b-hvt2hcdss8] { position: relative; }
.zm-pastille[b-hvt2hcdss8] {
    position: absolute; top: -6px; right: -4px;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px;
    background: #D92D20; color: #fff;
    font: 700 12px/22px Poppins, system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px var(--zz-card, #fff);
}
/* /Pages/Components/AdresseSuggestions.razor.rz.scp.css */
/* Suggestions d'adresses — mise en forme reprise de la commande de course
   (gm-suggestions / gm-chip), partagée par les trois verticales.

   La seule divergence assumée : la troncature. Le chip du taxi est en
   « nowrap » sans largeur maximale ; nos libellés de géocodeur débordent. */

.adr-suggestions[b-x3ana5hh0l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--vtc-border, rgba(0,0,0,.06));
}

.adr-chip[b-x3ana5hh0l] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #dadce0;
    background: var(--vtc-surface, #fff);
    color: var(--vtc-text, var(--z-ink));
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;

    /* Sur téléphone, une proposition ne prend jamais plus des trois quarts de
       la largeur : au-delà, deux suggestions ne tiennent plus côte à côte et la
       liste cesse d'être comparable d'un coup d'œil. */
    max-width: 78vw;
}

.adr-chip i[b-x3ana5hh0l] {
    color: var(--vtc-primary, var(--z-blue));
    font-size: 14px;
    flex: none;
}

/* La troncature vit sur le texte, pas sur le chip : sinon l'icône disparaît
   avant le libellé. */
.adr-chip-txt[b-x3ana5hh0l] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adr-chip:hover[b-x3ana5hh0l],
.adr-chip:focus-visible[b-x3ana5hh0l] {
    background: rgba(var(--z-blue-rgb), .06);
    border-color: var(--vtc-primary, var(--z-blue));
}

.adr-chip:active[b-x3ana5hh0l] {
    transform: scale(.97);
}

/* --- Attente ------------------------------------------------------------ */
.adr-suggestions-attente[b-x3ana5hh0l] {
    padding-bottom: 4px;
}

.adr-attente[b-x3ana5hh0l] {
    font-size: 12.5px;
    color: var(--vtc-muted, #6b7280);
}
/* /Pages/Components/AppelVocal.razor.rz.scp.css */
/* Écran d'appel : plein écran, au-dessus de la discussion (100101). */
.av-ecran[b-d1rdt9iwq6] {
    position: fixed; inset: 0;
    z-index: 100200;
    display: flex; flex-direction: column; align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 12vh) 24px calc(env(safe-area-inset-bottom, 0px) + 48px);
    background: linear-gradient(180deg, #0B2545 0%, #13315C 100%);
    color: #fff;
    font-family: var(--zz-font, Poppins, system-ui, sans-serif);
    text-align: center;
}

.av-avatar[b-d1rdt9iwq6] {
    width: 112px; height: 112px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14);
    font-size: 46px; font-weight: 700;
    margin-bottom: 18px;
}
.av-nom[b-d1rdt9iwq6] { font-size: 26px; font-weight: 700; }
.av-etat[b-d1rdt9iwq6] {
    margin-top: 8px;
    font-size: 16px; opacity: .85;
    font-variant-numeric: tabular-nums;
}

.av-secours[b-d1rdt9iwq6] {
    margin-top: 28px;
    padding: 12px 20px; border-radius: 24px;
    background: rgba(255, 255, 255, .16); color: #fff;
    text-decoration: none; font-weight: 600;
}

.av-actions[b-d1rdt9iwq6] {
    margin-top: auto;
    display: flex; gap: 56px; justify-content: center; align-items: center;
}

.av-rond[b-d1rdt9iwq6] {
    width: 72px; height: 72px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; cursor: pointer;
}
.av-decrocher[b-d1rdt9iwq6] { background: #12B76A; }
.av-refuser[b-d1rdt9iwq6] { background: #D92D20; }
.av-micro[b-d1rdt9iwq6] { background: rgba(255, 255, 255, .18); }
.av-micro.coupe[b-d1rdt9iwq6] { background: #fff; color: #0B2545; }

.av-fermer[b-d1rdt9iwq6] {
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 24px;
    background: none; color: #fff;
    padding: 12px 32px; font-size: 15px; cursor: pointer;
}
/* /Pages/Components/DiscussionCourse.razor.rz.scp.css */
/* Discussion passager ↔ chauffeur — panneau plein bas d'écran, au-dessus de tout. */

.dc-voile[b-4x6ew7hv4u] {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 100100; /* au-dessus de la feuille (100000) et de la barre de navigation */
}

.dc-panneau[b-4x6ew7hv4u] {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: min(78vh, 640px);
    display: flex; flex-direction: column;
    background: var(--zz-card, #fff);
    color: var(--zz-text, #0B2545);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    z-index: 100101;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--zz-font, Poppins, system-ui, sans-serif);
}

@media (min-width: 1025px) {
    .dc-panneau[b-4x6ew7hv4u] {
        left: auto; right: 24px; bottom: 24px;
        width: 400px; border-radius: 20px;
    }
}

.dc-tete[b-4x6ew7hv4u] {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--zz-border, #E3E8EF);
}
.dc-qui[b-4x6ew7hv4u] { flex: 1; min-width: 0; }
.dc-nom[b-4x6ew7hv4u] { font-weight: 700; font-size: 16px; }
.dc-role[b-4x6ew7hv4u] { font-size: 12.5px; color: var(--zz-dim, #5B6B7F); }

.dc-appel[b-4x6ew7hv4u], .dc-fermer[b-4x6ew7hv4u] {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; text-decoration: none;
    background: var(--zz-card2, #F1F5FA); color: inherit;
    font-size: 16px;
}
.dc-appel[b-4x6ew7hv4u] { color: var(--zz-accent, #0A6EE1); }

/* Fil ancré en bas : le plus récent est le PREMIER enfant. */
.dc-fil[b-4x6ew7hv4u] {
    flex: 1; min-height: 0;
    overflow-y: auto;
    display: flex; flex-direction: column-reverse;
    gap: 6px;
    padding: 12px 12px 8px;
}

.dc-vide[b-4x6ew7hv4u] {
    margin: auto; text-align: center;
    padding: 24px 16px;
    color: var(--zz-dim, #5B6B7F); font-size: 14px; line-height: 1.5;
}

.dc-ligne[b-4x6ew7hv4u] { display: flex; }
.dc-ligne.moi[b-4x6ew7hv4u] { justify-content: flex-end; }

.dc-bulle[b-4x6ew7hv4u] {
    max-width: 80%;
    padding: 8px 12px 6px;
    border-radius: 16px 16px 16px 4px;
    background: var(--zz-card2, #F1F5FA);
    font-size: 14.5px; line-height: 1.4;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.dc-bulle.moi[b-4x6ew7hv4u] {
    border-radius: 16px 16px 4px 16px;
    background: var(--zz-accent, #0A6EE1);
    color: var(--zz-on-accent, #fff);
}
.dc-bulle.en-cours[b-4x6ew7hv4u] { opacity: .7; }
.dc-bulle.echec[b-4x6ew7hv4u] { background: var(--zz-warn, #B42318); }

.dc-meta[b-4x6ew7hv4u] {
    margin-top: 2px;
    font-size: 11px; opacity: .75; text-align: right;
}
.dc-lu[b-4x6ew7hv4u] { font-weight: 600; }

.dc-reessayer[b-4x6ew7hv4u] {
    border: 0; background: none; padding: 0;
    color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}

.dc-systeme[b-4x6ew7hv4u] {
    align-self: center; text-align: center;
    max-width: 90%;
    padding: 6px 12px; margin: 4px 0;
    border-radius: 12px;
    background: var(--zz-accent-soft, #E6F0FC);
    color: var(--zz-text, #0B2545);
    font-size: 12.5px; line-height: 1.4;
}

.dc-anciens[b-4x6ew7hv4u] {
    align-self: center;
    border: 1px solid var(--zz-border, #E3E8EF); border-radius: 14px;
    background: none; color: inherit;
    padding: 6px 14px; font-size: 13px; cursor: pointer;
}

.dc-ferme[b-4x6ew7hv4u] {
    padding: 12px 16px;
    border-top: 1px solid var(--zz-border, #E3E8EF);
    text-align: center; font-size: 13.5px; color: var(--zz-dim, #5B6B7F);
}

/* Messages rapides : un geste, sans taper. */
.dc-rapides[b-4x6ew7hv4u] {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 8px 12px 0;
    scrollbar-width: none;
}
.dc-rapides[b-4x6ew7hv4u]::-webkit-scrollbar { display: none; }
.dc-rapide[b-4x6ew7hv4u] {
    flex: 0 0 auto;
    border: 1px solid var(--zz-border-strong, #C9D3E0); border-radius: 18px;
    background: var(--zz-card, #fff); color: inherit;
    padding: 8px 14px; font-size: 13.5px; cursor: pointer;
    white-space: nowrap;
}

.dc-saisie[b-4x6ew7hv4u] {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px 12px;
}
.dc-champ[b-4x6ew7hv4u] {
    flex: 1; min-width: 0;
    height: 46px; padding: 0 16px;
    border: 1px solid var(--zz-border-strong, #C9D3E0); border-radius: 23px;
    background: var(--zz-card, #fff); color: inherit;
    font-size: 15px;
}
.dc-envoyer[b-4x6ew7hv4u] {
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: var(--zz-accent, #0A6EE1); color: var(--zz-on-accent, #fff);
    font-size: 17px; cursor: pointer;
}
.dc-envoyer:disabled[b-4x6ew7hv4u] { opacity: .45; cursor: default; }

/* Journal des appels dans le fil : « Appel (2:34) », « Appel manqué ». */
.dc-journal-appel[b-4x6ew7hv4u] { display: inline-flex; gap: 6px; align-items: center; }
/* /Pages/Components/SelecteurPointCarte.razor.rz.scp.css */
/* ============================================================
   SelecteurPointCarte — feuille plein écran de désignation d'un point.

   Couvre la barre de navigation (z-index 50000) : tant que la carte est
   ouverte, elle EST l'écran. On reste sous les toasts (300000), qui doivent
   pouvoir annoncer une panne par-dessus.
   ============================================================ */

.pick-overlay[b-m0zza5k0wy] {
    position: fixed;
    inset: 0;
    z-index: 120000;
    background: var(--zz-black);
    overflow: hidden;
}

/* La carte occupe tout l'écran : le centre de la vue tombe alors exactement
   sous le réticule, sans compensation de hauteur des panneaux flottants. */
.pick-map[b-m0zza5k0wy] {
    position: absolute;
    inset: 0;
}

/* ── Réticule ────────────────────────────────── */

/* `pointer-events:none` est vital : le viseur est POSÉ SUR la carte, et sans
   cela il avalerait le geste de glissement juste au point qu'on vise. */
.pick-reticule[b-m0zza5k0wy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}

.pick-reticule-anneau[b-m0zza5k0wy] {
    width: 34px;
    height: 34px;
    border: 3px solid var(--zz-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .45);
}

/* Le point central : sans lui, l'anneau désigne une zone, pas un lieu. */
.pick-reticule-point[b-m0zza5k0wy] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zz-accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

/* ── Barre haute : fermeture + recherche ─────── */

.pick-haut[b-m0zza5k0wy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
}

.pick-barre[b-m0zza5k0wy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pick-icone[b-m0zza5k0wy] {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--zz-border);
    background: var(--zz-card);
    color: var(--zz-white);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    -webkit-tap-highlight-color: transparent;
}

.pick-recherche[b-m0zza5k0wy] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border-radius: 21px;
    border: 1px solid var(--zz-border);
    background: var(--zz-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.pick-recherche-ico[b-m0zza5k0wy] {
    color: var(--zz-muted);
    font-size: 14px;
    flex: none;
}

.pick-recherche input[b-m0zza5k0wy] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--zz-white);
    font-family: var(--zz-font);
    font-size: 15px;
}

.pick-recherche input[b-m0zza5k0wy]::placeholder {
    color: var(--zz-muted);
}

/* Croix d'effacement : élément du flux flex, à droite du champ, en pendant
   de la loupe à gauche. Rendue seulement quand la barre porte du texte. */
.pick-effacer[b-m0zza5k0wy] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--zz-border);
    color: var(--zz-muted);
    font-size: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pick-effacer:active[b-m0zza5k0wy] {
    transform: scale(.9);
}

/* ── Bouton « ma position » ──────────────────── */

.pick-gps[b-m0zza5k0wy] {
    position: absolute;
    right: 14px;
    /* Posé juste au-dessus de la fiche, comme sur la carte des courses. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 190px);
    z-index: 4;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--zz-border);
    background: var(--zz-card);
    color: var(--zz-white);
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
    -webkit-tap-highlight-color: transparent;
}

.pick-gps:disabled[b-m0zza5k0wy] {
    opacity: .6;
    cursor: default;
}

/* ── Fiche basse : ce qui sera retenu ────────── */

.pick-fiche[b-m0zza5k0wy] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: var(--zz-card);
    border-top: 1px solid var(--zz-border);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .45);
}

.pick-titre[b-m0zza5k0wy] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zz-muted);
    margin-bottom: 6px;
}

.pick-adresse[b-m0zza5k0wy] {
    font-size: 16px;
    font-weight: 700;
    color: var(--zz-white);
    line-height: 1.35;
    /* Deux lignes au plus : au-delà, la fiche mangerait la carte qu'on vise. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 22px;
}

.pick-attente[b-m0zza5k0wy] {
    color: var(--zz-dim);
    font-weight: 500;
}

.pick-erreur[b-m0zza5k0wy] {
    color: var(--zz-warn-text);
    font-weight: 600;
    font-size: 15px;
}

.pick-coords[b-m0zza5k0wy] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--zz-muted);
    font-variant-numeric: tabular-nums;
}

.pick-valider[b-m0zza5k0wy] {
    width: 100%;
    margin-top: 12px;
}

.pick-valider:disabled[b-m0zza5k0wy] {
    opacity: .5;
    cursor: default;
}
/* /Pages/ComptePage.razor.rz.scp.css */
/* ── Sélecteur de thème ─────────────────────────────────── */
.theme-grid[b-nycwzqzw1x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-card[b-nycwzqzw1x] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--zz-card);
    border: 1.5px solid var(--zz-border);
    border-radius: 16px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, transform .15s;
}
.theme-card:active[b-nycwzqzw1x] { transform: scale(.98); }

/* Carte active — bordure couleur primaire */
.theme-active[b-nycwzqzw1x] {
    border-color: var(--zz-yellow);
    background: var(--zz-yellow-dim);
}

/* Aperçu miniature de la couleur du thème */
.theme-preview[b-nycwzqzw1x] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 5px;
    gap: 3px;
    /* Bordure sur token : une bordure blanche translucide disparaissait
       sur le fond clair du thème Jour. */
    border: 1px solid var(--zz-border);
    box-shadow: 0 2px 8px var(--zz-nav-shadow);
    position: relative;
    overflow: hidden;
}

.theme-preview-dot[b-nycwzqzw1x] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.theme-preview-dot.sm[b-nycwzqzw1x] {
    width: 8px;
    height: 8px;
    bottom: 6px;
    right: 24px;
}

.theme-info[b-nycwzqzw1x] { flex: 1; min-width: 0; }

.theme-name[b-nycwzqzw1x] {
    font-size: 15px;
    font-weight: 700;
    color: var(--zz-white);
    margin-bottom: 2px;
}

.theme-desc[b-nycwzqzw1x] {
    font-size: 12px;
    color: var(--zz-dim);
}

.theme-check[b-nycwzqzw1x] {
    font-size: 20px;
    color: var(--zz-yellow);
    flex-shrink: 0;
}

/* ══════════ Couleur d'action (accent) ══════════
   La teinte des pastilles suit le thème RÉSOLU par html[data-theme] :
   éclaircie sur fond encre, foncée sur fond clair. Écrire ces valeurs
   en C# ne marcherait pas en mode « auto », où le C# ignore vers quoi
   le système a résolu. */
.accent-row[b-nycwzqzw1x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.accent-card[b-nycwzqzw1x] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    background: var(--zz-card);
    border: 1.5px solid var(--zz-border);
    border-radius: 16px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, transform .15s;
}
.accent-card:active[b-nycwzqzw1x] { transform: scale(.98); }
.accent-active[b-nycwzqzw1x] { border-color: var(--zz-accent); }

.accent-dot[b-nycwzqzw1x] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-swatch);
}

.accent-name[b-nycwzqzw1x] {
    font-size: 13px;
    font-weight: 700;
    color: var(--zz-text);
}

.accent-check[b-nycwzqzw1x] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: var(--zz-accent);
}

/* Teintes de nuit (défaut) */
.accent-bleu[b-nycwzqzw1x] { --accent-swatch: var(--z-blue-lt); }
.accent-cyan[b-nycwzqzw1x] { --accent-swatch: var(--z-cyan-lt); }
.accent-vert[b-nycwzqzw1x] { --accent-swatch: var(--z-green-lt); }

/* Teintes de jour — y compris sous les alias historiques b et d. */
html[data-theme="jour"] .accent-bleu[b-nycwzqzw1x],
html[data-theme="b"] .accent-bleu[b-nycwzqzw1x],
html[data-theme="d"] .accent-bleu[b-nycwzqzw1x] { --accent-swatch: var(--z-blue); }

html[data-theme="jour"] .accent-cyan[b-nycwzqzw1x],
html[data-theme="b"] .accent-cyan[b-nycwzqzw1x],
html[data-theme="d"] .accent-cyan[b-nycwzqzw1x] { --accent-swatch: var(--z-cyan-dk); }

html[data-theme="jour"] .accent-vert[b-nycwzqzw1x],
html[data-theme="b"] .accent-vert[b-nycwzqzw1x],
html[data-theme="d"] .accent-vert[b-nycwzqzw1x] { --accent-swatch: var(--z-green-dk); }

/* ══════════ ÉTAT FINANCIER : disponible / garantie / total ══════════
   Trois lignes plutôt qu'un chiffre : le dépôt de garantie appartient au
   passager mais ne paie rien. Les confondre ferait croire à de l'argent
   utilisable qui ne l'est pas. */
.zz-gar-row[b-nycwzqzw1x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--zz-line, rgba(255,255,255,.08));
}

.zz-gar-row:last-of-type[b-nycwzqzw1x] {
    border-bottom: none;
}

/* Le total se détache : c'est la ligne que l'on cherche du regard. */
.zz-gar-total[b-nycwzqzw1x] {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1.5px solid var(--zz-line, rgba(255,255,255,.16));
    border-bottom: none;
    font-weight: 700;
}

.zz-gar-total b[b-nycwzqzw1x] {
    font-size: 16px;
}
/* /Pages/ConfigUserPage.razor.rz.scp.css */
/* ============================================================
   ConfigUserPage (passager) — mise en forme alignée sur le profil
   chauffeur (design system ZaZa). Variables --zz-* : zaza-theme.css.
   Classes cfg-* portées depuis WAPI_ZAZA_Taxi/Pages/ConfigUserPage.razor.css
   ============================================================ */

/* ── Spinner page ───────────────────────────── */
.zz-spin[b-muekg3j4io] {
    width: 30px; height: 30px;
    margin: 40px auto;
    border: 3px solid var(--zz-border);
    border-top-color: var(--zz-yellow);
    border-radius: 50%;
    animation: cfg-spin-b-muekg3j4io .7s linear infinite;
}
@keyframes cfg-spin-b-muekg3j4io { to { transform: rotate(360deg); } }

/* ── Alerts ─────────────────────────────────── */
.cfg-alert[b-muekg3j4io] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--zz-r-sm);
    font-size: 13px;
    font-weight: 600;
}
.cfg-alert.success[b-muekg3j4io] { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #22C55E; }
.cfg-alert.danger[b-muekg3j4io]  { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #EF4444; }
.cfg-alert.warning[b-muekg3j4io] { background: rgba(var(--zz-accent-rgb),.12); border: 1px solid rgba(var(--zz-accent-rgb),.3); color: var(--zz-yellow); }
.cfg-alert .bi[b-muekg3j4io] { font-size: 16px; flex-shrink: 0; }

/* ── Login banner ───────────────────────────── */
.cfg-login[b-muekg3j4io] { padding: 16px; }
.cfg-login-head[b-muekg3j4io] { display: flex; align-items: center; gap: 12px; }
.cfg-login-ico[b-muekg3j4io] {
    width: 40px; height: 40px;
    background: var(--zz-yellow-dim);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--zz-yellow); font-size: 18px; flex-shrink: 0;
}
.cfg-login-title[b-muekg3j4io] { font-size: 15px; font-weight: 800; color: var(--zz-white); }
.cfg-login-sub[b-muekg3j4io]   { font-size: 12px; color: var(--zz-dim); margin-top: 1px; }

.cfg-spinner-sm[b-muekg3j4io] {
    width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: var(--zz-on-accent);
    border-radius: 50%;
    animation: cfg-spin-b-muekg3j4io .6s linear infinite;
    display: inline-block;
}

/* ── Avatar / photo ─────────────────────────── */
.cfg-summary[b-muekg3j4io] { display: flex; align-items: center; gap: 14px; padding: 16px; }
.cfg-avatar[b-muekg3j4io] {
    width: 72px; height: 72px;
    background: var(--zz-yellow-dim);
    border: 2px solid var(--zz-yellow);
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--zz-yellow); font-size: 30px; flex-shrink: 0;
    position: relative;
}
.cfg-avatar img[b-muekg3j4io] { width: 100%; height: 100%; object-fit: cover; }

.cfg-name[b-muekg3j4io] { font-size: 16px; font-weight: 800; color: var(--zz-white); }
.cfg-role[b-muekg3j4io] { font-size: 12px; color: var(--zz-yellow); font-weight: 600; margin-top: 2px; }
.cfg-id[b-muekg3j4io]   { font-size: 11px; color: var(--zz-muted); margin-top: 2px; }

/* ── Avatar cliquable + pastille appareil-photo (style Telegram) ── */
.cfg-avatar-btn[b-muekg3j4io] {
    position: relative;
    padding: 0; border: none; background: transparent;
    line-height: 0; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s;
}
.cfg-avatar-btn:active[b-muekg3j4io] { transform: scale(.94); }
.cfg-avatar-cam[b-muekg3j4io] {
    position: absolute; right: -2px; bottom: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--zz-yellow); color: var(--zz-on-accent);
    border: 2px solid var(--zz-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
}

/* Inputs fichier masqués (déclenchés par la feuille d'action) */
.cfg-file-hidden[b-muekg3j4io] {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
    pointer-events: none;
}

/* ── Feuille d'action photo (bottom sheet, style Telegram) ── */
.cfg-sheet-backdrop[b-muekg3j4io] {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.5);
    display: flex; align-items: flex-end;
    animation: cfg-sheet-fade-b-muekg3j4io .2s ease;
}
.cfg-sheet[b-muekg3j4io] {
    width: 100%;
    background: var(--zz-card);
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.4);
    animation: cfg-sheet-up-b-muekg3j4io .25s cubic-bezier(.2,.8,.2,1);
}
.cfg-sheet-grip[b-muekg3j4io] {
    width: 38px; height: 4px; border-radius: 3px;
    background: var(--zz-border); margin: 4px auto 8px;
}
.cfg-sheet-title[b-muekg3j4io] {
    text-align: center; font-size: 12px; font-weight: 700;
    color: var(--zz-dim); text-transform: uppercase;
    letter-spacing: .5px; margin-bottom: 4px;
}
.cfg-sheet-item[b-muekg3j4io] {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px 12px; background: transparent; border: none;
    border-radius: 12px; text-align: left; cursor: pointer;
    font: 600 15px var(--zz-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    color: var(--zz-white);
    -webkit-tap-highlight-color: transparent;
}
.cfg-sheet-item:active[b-muekg3j4io] { background: var(--zz-card2); }
.cfg-sheet-ico[b-muekg3j4io] {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--zz-yellow-dim); color: var(--zz-yellow);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.cfg-sheet-item.danger[b-muekg3j4io] { color: #EF4444; }
.cfg-sheet-item.danger .cfg-sheet-ico[b-muekg3j4io] { background: rgba(239,68,68,.14); color: #EF4444; }
.cfg-sheet-item.cancel[b-muekg3j4io] {
    justify-content: center; margin-top: 4px;
    background: var(--zz-card2); font-weight: 700;
}
@keyframes cfg-sheet-fade-b-muekg3j4io { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfg-sheet-up-b-muekg3j4io { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Card sections ──────────────────────────── */
.cfg-card-section[b-muekg3j4io] {
    background: var(--zz-card);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-r);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cfg-field[b-muekg3j4io] { display: flex; flex-direction: column; }
.cfg-field-row[b-muekg3j4io] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-field-lbl[b-muekg3j4io] {
    font-size: 11px; color: var(--zz-dim); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.cfg-field-lbl.req[b-muekg3j4io]::after { content: " *"; color: #EF4444; }
.cfg-textarea[b-muekg3j4io] { min-height: 72px; resize: vertical; }

/* ── Switch ─────────────────────────────────── */
.cfg-switch[b-muekg3j4io] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cfg-switch-lbl[b-muekg3j4io] {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--zz-white);
}
.cfg-switch-input[b-muekg3j4io] { position: absolute; opacity: 0; pointer-events: none; }
.cfg-switch-slider[b-muekg3j4io] {
    position: relative; width: 42px; height: 24px;
    background: var(--zz-card2); border: 1.5px solid var(--zz-border);
    border-radius: 50px; transition: background .2s, border-color .2s; flex-shrink: 0;
}
.cfg-switch-slider[b-muekg3j4io]::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px; background: var(--zz-muted);
    border-radius: 50%; transition: transform .2s, background .2s;
}
.cfg-switch-input:checked ~ .cfg-switch-slider[b-muekg3j4io] { background: var(--zz-yellow-dim); border-color: var(--zz-yellow); }
.cfg-switch-input:checked ~ .cfg-switch-slider[b-muekg3j4io]::before { transform: translateX(18px); background: var(--zz-yellow); }

/* ── Bouton Enregistrer ─────────────────────── */
.cfg-save-btn[b-muekg3j4io] { position: relative; overflow: hidden; }
.cfg-save-btn:active:not([disabled])[b-muekg3j4io] { transform: scale(.95); }
.cfg-save-btn.is-saving[b-muekg3j4io] { opacity: .85; cursor: progress; }
.cfg-save-spinner[b-muekg3j4io] {
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.25); border-top-color: var(--zz-on-accent);
    border-radius: 50%; display: inline-block; animation: cfg-spin-b-muekg3j4io .7s linear infinite;
}
/* /Pages/CoursesPage.razor.rz.scp.css */
.crs-btn[b-1fv67rt4er] { width:28px; height:28px; background:var(--zz-yellow); border:none; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:var(--zz-on-accent); cursor:pointer; line-height:1; -webkit-tap-highlight-color:transparent; }
.crs-btn.minus[b-1fv67rt4er] { background:var(--zz-card2); color:var(--zz-white); border:1px solid var(--zz-border); }
/* /Pages/EauPage.razor.rz.scp.css */
/* Livraison d'eau — tunnel de commande.
   Calqué sur GazPage.razor.css : mêmes tokens de charte (--zz-*), même
   grammaire visuelle. Seul l'accent change (--c-eau).

   ⚠️ Le CSS isolé de Blazor ne traverse pas les composants : les classes
   .gaz-* ne s'appliquent pas ici, d'où cette feuille jumelle plutôt qu'un
   import. Toute correction de mise en forme faite sur l'une doit être
   reportée sur l'autre. */

.eau-step[b-70jf04oty3] { display:flex; align-items:center; gap:6px; margin-bottom:10px; }

.eau-hint[b-70jf04oty3] { font-size:12px; color:var(--zz-dim); margin:8px 0 0; line-height:1.4; }

/* --- Échange / Achat ---------------------------------------------------- */
.eau-seg[b-70jf04oty3] { display:flex; gap:8px; }
.eau-seg-opt[b-70jf04oty3] {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:12px 8px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:var(--zz-r);
    font-family:var(--zz-font); cursor:pointer; transition:border-color .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
}
.eau-seg-opt span[b-70jf04oty3] { font-size:14px; font-weight:700; }
.eau-seg-opt small[b-70jf04oty3] { font-size:11px; color:var(--zz-dim); }
.eau-seg-opt.sel[b-70jf04oty3] { border-color:var(--c-eau); background:rgba(14,165,233,.08); }

/* --- Chips (marque, paiement, favoris) --------------------------------- */
.eau-chips[b-70jf04oty3] { display:flex; flex-wrap:wrap; gap:8px; }
.eau-chip[b-70jf04oty3] {
    padding:8px 12px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:999px;
    font-family:var(--zz-font); font-size:13px; cursor:pointer;
    transition:border-color .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
}
.eau-chip.sel[b-70jf04oty3] { border-color:var(--c-eau); background:rgba(14,165,233,.10); color:var(--c-eau); font-weight:700; }

/* --- Formats ------------------------------------------------------------
   Enroulés sur plusieurs lignes, contrairement au gaz : l'eau compte cinq
   conditionnements là où le gaz en a trois, et une rangée unique les
   écraserait. */
.eau-formats[b-70jf04oty3] { display:flex; flex-wrap:wrap; gap:8px; }
.eau-type[b-70jf04oty3] {
    flex:1 1 30%; min-width:96px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:14px 8px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:var(--zz-r);
    font-family:var(--zz-font); cursor:pointer; transition:border-color .15s, background .15s;
    text-align:center; -webkit-tap-highlight-color:transparent;
}
.eau-type.sel[b-70jf04oty3] { border-color:var(--c-eau); background:rgba(14,165,233,.06); }
.eau-type-ico[b-70jf04oty3]  { font-size:24px; line-height:1; }
.eau-type-lbl[b-70jf04oty3]  { font-size:13px; font-weight:700; }
.eau-type-prix[b-70jf04oty3] { font-size:11px; color:var(--zz-dim); }
/* La consigne n'est pas le prix : elle s'affiche en retrait, sans quoi on
   lit un montant qui n'est pas celui d'un échange. */
.eau-type-consigne[b-70jf04oty3] { font-size:10.5px; color:var(--zz-muted); line-height:1.25; }

/* --- Quantité ---------------------------------------------------------- */
.eau-row[b-70jf04oty3] { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eau-qte[b-70jf04oty3] { display:flex; align-items:center; gap:10px; }
.eau-qte-btn[b-70jf04oty3] {
    width:38px; height:38px; border-radius:12px; background:var(--zz-card);
    color:var(--zz-white); border:1.5px solid var(--zz-border);
    font-size:20px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.eau-qte-btn:disabled[b-70jf04oty3] { opacity:.4; cursor:not-allowed; }
.eau-qte-val[b-70jf04oty3] { min-width:22px; text-align:center; font-size:16px; font-weight:800; }

/* --- Adresse : la liste de suggestions doit passer au-dessus du reste --- */
.eau-suggest-wrap[b-70jf04oty3] { position:relative; }

/* --- Récapitulatif ----------------------------------------------------- */
.eau-recap[b-70jf04oty3] { margin-bottom:12px; font-size:13px; }
.eau-recap > div[b-70jf04oty3] { display:flex; justify-content:space-between; padding:3px 0; color:var(--zz-dim); }
.eau-recap > div.total[b-70jf04oty3] {
    margin-top:6px; padding-top:8px; border-top:1px solid var(--zz-border);
    color:var(--zz-white); font-size:16px; font-weight:800;
}
.eau-recap > div.total span:last-child[b-70jf04oty3] { color:var(--zz-yellow); }

/* --- États ------------------------------------------------------------- */
.eau-alert[b-70jf04oty3], .eau-erreur[b-70jf04oty3] {
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    border-radius:var(--zz-r); font-size:12px; line-height:1.4;
}
.eau-alert[b-70jf04oty3]  { background:rgba(14,165,233,.10); border:1px solid rgba(14,165,233,.25); color:var(--c-eau); }
.eau-erreur[b-70jf04oty3] { background:rgba(239,68,68,.10);  border:1px solid rgba(239,68,68,.30); color:#EF4444; margin-bottom:10px; }

/* --- Commandes en cours ------------------------------------------------- */
.eau-encours[b-70jf04oty3] {
    display:flex; align-items:center; gap:10px;
    width:100%; margin-bottom:8px; padding:12px;
    background:var(--zz-card); color:var(--zz-white);
    border:1px solid var(--c-eau); border-radius:var(--zz-r);
    font-family:var(--zz-font); text-align:left; cursor:pointer;
}
.eau-encours-ico[b-70jf04oty3] { font-size:22px; flex:none; }
.eau-encours-txt[b-70jf04oty3] { flex:1; min-width:0; display:flex; flex-direction:column; }
.eau-encours-txt b[b-70jf04oty3] { font-size:13.5px; }
.eau-encours-txt small[b-70jf04oty3] { font-size:11.5px; color:var(--zz-dim); margin-top:1px; }
.eau-encours-fleche[b-70jf04oty3] { color:var(--zz-muted); font-size:20px; flex:none; }

/* --- Avertissement : ce qui manque pour pouvoir commander ---------------
   Distinct de .eau-erreur (rouge) : rien n'a échoué, il manque une
   information.

   ⚠️ La couleur vient de --zz-warn-text, JAMAIS de --zz-warn : le jaune de
   charte tombe à 1,6:1 sur le blanc du thème jour. */
.eau-avert[b-70jf04oty3] {
    display:flex; align-items:flex-start; gap:8px;
    margin:8px 0 0;
    color:var(--zz-white);
    font-size:12.5px; font-weight:600; line-height:1.45;
    text-align:left;
}
.eau-avert .bi[b-70jf04oty3] {
    flex:none;
    color:var(--zz-warn-text);
    font-size:14px; line-height:1.35;
}

.eau-skel[b-70jf04oty3] { padding:16px; display:flex; flex-direction:column; gap:12px; }
.eau-skel-line[b-70jf04oty3] {
    height:52px; border-radius:var(--zz-r);
    background:linear-gradient(90deg, var(--zz-card) 25%, rgba(255,255,255,.06) 50%, var(--zz-card) 75%);
    background-size:200% 100%; animation:eau-shimmer-b-70jf04oty3 1.2s infinite;
}
.eau-skel-line.short[b-70jf04oty3] { width:60%; }
@keyframes eau-shimmer-b-70jf04oty3 { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* --- Recherche d'un vendeur -------------------------------------------- */
.eau-overlay[b-70jf04oty3] {
    position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.72); backdrop-filter:blur(3px); padding:24px;
}
.eau-overlay-card[b-70jf04oty3] {
    width:100%; max-width:340px; text-align:center; padding:28px 20px;
    background:var(--zz-card); border:1px solid var(--zz-border); border-radius:var(--zz-r);
}
.eau-overlay-ttl[b-70jf04oty3] { font-size:17px; font-weight:800; margin-bottom:6px; }
.eau-overlay-sub[b-70jf04oty3] { font-size:13px; color:var(--zz-dim); margin-bottom:18px; line-height:1.45; }
/* Tailles calées sur celles du gaz : les deux écrans se suivent dans la même
   rubrique « Livraison », et leurs illustrations doivent y peser pareil. */
.eau-pulse[b-70jf04oty3] { margin-bottom:10px; animation:eau-pulse-b-70jf04oty3 1.4s ease-in-out infinite; }
.eau-pulse img[b-70jf04oty3] { height:50px; width:auto; object-fit:contain; display:block; margin:0 auto; }

/* En-tête de page et bouton de validation. */
.eau-titre-ico[b-70jf04oty3] { height:24px; width:auto; object-fit:contain; flex:none; }
.eau-btn-txt[b-70jf04oty3] { display:inline-flex; align-items:center; gap:7px; }
.eau-btn-txt img[b-70jf04oty3] { height:19px; width:auto; object-fit:contain; }

@keyframes eau-pulse-b-70jf04oty3 { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.15); opacity:.75; } }

@media (prefers-reduced-motion: reduce) {
    .eau-skel-line[b-70jf04oty3], .eau-pulse[b-70jf04oty3] { animation:none; }
}
/* /Pages/GazPage.razor.rz.scp.css */
/* Livraison de gaz — tunnel de commande.
   S'appuie sur les tokens de charte (--zz-*, --c-gaz) : aucune couleur en dur
   hors le halo orange du gaz, déjà défini dans zaza-brand.css. */

.gaz-step[b-xzmgb8pxns] { display:flex; align-items:center; gap:6px; margin-bottom:10px; }

.gaz-hint[b-xzmgb8pxns] { font-size:12px; color:var(--zz-dim); margin:8px 0 0; line-height:1.4; }

/* --- Achat / Échange ---------------------------------------------------- */
.gaz-seg[b-xzmgb8pxns] { display:flex; gap:8px; }
.gaz-seg-opt[b-xzmgb8pxns] {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:12px 8px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:var(--zz-r);
    font-family:var(--zz-font); cursor:pointer; transition:border-color .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
}
.gaz-seg-opt span[b-xzmgb8pxns] { font-size:14px; font-weight:700; }
.gaz-seg-opt small[b-xzmgb8pxns] { font-size:11px; color:var(--zz-dim); }
.gaz-seg-opt.sel[b-xzmgb8pxns] { border-color:var(--c-gaz); background:rgba(255,107,53,.08); }

/* --- Chips (marque, paiement, favoris) --------------------------------- */
.gaz-chips[b-xzmgb8pxns] { display:flex; flex-wrap:wrap; gap:8px; }
.gaz-chip[b-xzmgb8pxns] {
    padding:8px 12px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:999px;
    font-family:var(--zz-font); font-size:13px; cursor:pointer;
    transition:border-color .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
}
.gaz-chip.sel[b-xzmgb8pxns] { border-color:var(--c-gaz); background:rgba(255,107,53,.10); color:var(--c-gaz); font-weight:700; }

/* --- Formats ----------------------------------------------------------- */
.gaz-formats[b-xzmgb8pxns] { display:flex; gap:8px; }
.gaz-type[b-xzmgb8pxns] {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:14px 8px; background:var(--zz-card); color:var(--zz-white);
    border:1.5px solid var(--zz-border); border-radius:var(--zz-r);
    font-family:var(--zz-font); cursor:pointer; transition:border-color .15s, background .15s;
    text-align:center; -webkit-tap-highlight-color:transparent;
}
.gaz-type.sel[b-xzmgb8pxns] { border-color:var(--c-gaz); background:rgba(255,107,53,.06); }
/* La bouteille remplace l'emoji : hauteur fixée plutôt que taille de police,
   et largeur libre — l'objet est bien plus haut que large. */
.gaz-type-ico[b-xzmgb8pxns]  { height:28px; width:auto; object-fit:contain; display:block; margin:0 auto 2px; }
.gaz-type-lbl[b-xzmgb8pxns]  { font-size:13px; font-weight:700; }
.gaz-type-prix[b-xzmgb8pxns] { font-size:11px; color:var(--zz-dim); }

/* --- Quantité ---------------------------------------------------------- */
.gaz-row[b-xzmgb8pxns] { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gaz-qte[b-xzmgb8pxns] { display:flex; align-items:center; gap:10px; }
.gaz-qte-btn[b-xzmgb8pxns] {
    width:38px; height:38px; border-radius:12px; background:var(--zz-card);
    color:var(--zz-white); border:1.5px solid var(--zz-border);
    font-size:20px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.gaz-qte-btn:disabled[b-xzmgb8pxns] { opacity:.4; cursor:not-allowed; }
.gaz-qte-val[b-xzmgb8pxns] { min-width:22px; text-align:center; font-size:16px; font-weight:800; }

/* --- Adresse : la liste de suggestions doit passer au-dessus du reste --- */
.gaz-suggest-wrap[b-xzmgb8pxns] { position:relative; }

/* --- Récapitulatif ----------------------------------------------------- */
.gaz-recap[b-xzmgb8pxns] { margin-bottom:12px; font-size:13px; }
.gaz-recap > div[b-xzmgb8pxns] { display:flex; justify-content:space-between; padding:3px 0; color:var(--zz-dim); }
.gaz-recap > div.total[b-xzmgb8pxns] {
    margin-top:6px; padding-top:8px; border-top:1px solid var(--zz-border);
    color:var(--zz-white); font-size:16px; font-weight:800;
}
.gaz-recap > div.total span:last-child[b-xzmgb8pxns] { color:var(--zz-yellow); }

/* --- États ------------------------------------------------------------- */
.gaz-alert[b-xzmgb8pxns], .gaz-erreur[b-xzmgb8pxns] {
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    border-radius:var(--zz-r); font-size:12px; line-height:1.4;
}
.gaz-alert[b-xzmgb8pxns]  { background:rgba(255,107,53,.10); border:1px solid rgba(255,107,53,.25); color:var(--c-gaz); }
.gaz-erreur[b-xzmgb8pxns] { background:rgba(239,68,68,.10);  border:1px solid rgba(239,68,68,.30); color:#EF4444; margin-bottom:10px; }

/* --- Commandes en cours -------------------------------------------------
   Rappel en tête d'écran : une commande en cours doit rester à un clic,
   sans passer par l'historique. */
.gaz-encours[b-xzmgb8pxns] {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-bottom: 8px; padding: 12px;
    background: var(--zz-card); color: var(--zz-white);
    border: 1px solid var(--c-gaz); border-radius: var(--zz-r);
    font-family: var(--zz-font); text-align: left; cursor: pointer;
}

.gaz-encours-ico[b-xzmgb8pxns] { font-size: 22px; flex: none; }

.gaz-encours-txt[b-xzmgb8pxns] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gaz-encours-txt b[b-xzmgb8pxns] { font-size: 13.5px; }
.gaz-encours-txt small[b-xzmgb8pxns] { font-size: 11.5px; color: var(--zz-dim); margin-top: 1px; }

.gaz-encours-fleche[b-xzmgb8pxns] { color: var(--zz-muted); font-size: 20px; flex: none; }

/* --- Avertissement : ce qui manque pour pouvoir commander ---------------
   Distinct de .gaz-erreur (rouge) : rien n'a échoué, il manque une
   information. Et distinct de .gaz-hint (gris), qui se lit comme un
   commentaire facultatif alors qu'il s'agit ici de la raison pour laquelle
   le bouton reste inactif.

   Parti pris sobre : ni fond ni bordure. Seule l'icône est colorée, le
   texte passe en gras et en couleur pleine — assez pour se détacher d'un
   .gaz-hint gris sans poser un aplat au milieu du formulaire.

   ⚠️ La couleur vient de --zz-warn-text, JAMAIS de --zz-warn : le jaune de
   charte tombe à 1,6:1 sur le blanc du thème jour. Le token vaut #FFC400 en
   thème nuit (12,6:1) et #8A5A00 en thème jour (7:1). Toute valeur écrite
   en dur ici serait illisible dans l'un des deux thèmes. */
.gaz-avert[b-xzmgb8pxns] {
    display:flex; align-items:flex-start; gap:8px;
    margin:8px 0 0;
    color:var(--zz-white);
    font-size:12.5px; font-weight:600; line-height:1.45;
    text-align:left;
}

.gaz-avert .bi[b-xzmgb8pxns] {
    flex:none;
    color:var(--zz-warn-text);
    font-size:14px; line-height:1.35;
}

.gaz-skel[b-xzmgb8pxns] { padding:16px; display:flex; flex-direction:column; gap:12px; }
.gaz-skel-line[b-xzmgb8pxns] {
    height:52px; border-radius:var(--zz-r);
    background:linear-gradient(90deg, var(--zz-card) 25%, rgba(255,255,255,.06) 50%, var(--zz-card) 75%);
    background-size:200% 100%; animation:gaz-shimmer-b-xzmgb8pxns 1.2s infinite;
}
.gaz-skel-line.short[b-xzmgb8pxns] { width:60%; }
@keyframes gaz-shimmer-b-xzmgb8pxns { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* --- Recherche d'un vendeur -------------------------------------------- */
.gaz-overlay[b-xzmgb8pxns] {
    position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.72); backdrop-filter:blur(3px); padding:24px;
}
.gaz-overlay-card[b-xzmgb8pxns] {
    width:100%; max-width:340px; text-align:center; padding:28px 20px;
    background:var(--zz-card); border:1px solid var(--zz-border); border-radius:var(--zz-r);
}
.gaz-overlay-ttl[b-xzmgb8pxns] { font-size:17px; font-weight:800; margin-bottom:6px; }
.gaz-overlay-sub[b-xzmgb8pxns] { font-size:13px; color:var(--zz-dim); margin-bottom:18px; line-height:1.45; }
.gaz-pulse[b-xzmgb8pxns] { margin-bottom:10px; animation:gaz-pulse-b-xzmgb8pxns 1.4s ease-in-out infinite; }
.gaz-pulse img[b-xzmgb8pxns] { height:50px; width:auto; object-fit:contain; display:block; margin:0 auto; }

/* En-tête de page : la bouteille accompagne le titre, sans le pousser. */
.gaz-titre-ico[b-xzmgb8pxns] { height:24px; width:auto; object-fit:contain; flex:none; }

/* Dans le bouton, la bouteille est alignée sur le texte et volontairement
   discrète : c'est le montant qu'on doit lire en premier. */
.gaz-btn-txt[b-xzmgb8pxns] { display:inline-flex; align-items:center; gap:7px; }
.gaz-btn-txt img[b-xzmgb8pxns] { height:19px; width:auto; object-fit:contain; }
@keyframes gaz-pulse-b-xzmgb8pxns { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.15); opacity:.75; } }

@media (prefers-reduced-motion: reduce) {
    .gaz-skel-line[b-xzmgb8pxns], .gaz-pulse[b-xzmgb8pxns] { animation:none; }
}
/* /Pages/Home.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════╗
   ║  ZaZa Home Page — Design System
   ║  Police Poppins · Palette var(--zz-accent) / #0A0A0A
   ╚══════════════════════════════════════════════════╝ */

.hm-root[b-o18ey1w8z2] {
    min-height: 100vh;
    background: #0D0D0D;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    color: #fff;
    padding-bottom: 80px; /* espace bottom nav */
}

/* ── HEADER ─────────────────────────────────────── */
.hm-header[b-o18ey1w8z2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 20px 12px;
}

.hm-header-left[b-o18ey1w8z2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hm-logo-mark[b-o18ey1w8z2] {
    width: 36px; height: 36px;
    background: var(--zz-accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900;
    color: #0A0A0A;
    flex-shrink: 0;
}

.hm-logo-text[b-o18ey1w8z2] {
    font-size: 20px;
    font-weight: 900;
    color: var(--zz-accent);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.hm-location[b-o18ey1w8z2] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

.hm-location .bi[b-o18ey1w8z2] { font-size: 11px; color: var(--zz-accent); }

.hm-header-right[b-o18ey1w8z2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hm-icon-btn[b-o18ey1w8z2] {
    position: relative;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 50%;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #ccc;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hm-notif-dot[b-o18ey1w8z2] {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px;
    background: #EF4444; border-radius: 50%;
    border: 1.5px solid #0D0D0D;
}

.hm-avatar[b-o18ey1w8z2] {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--zz-accent), #D4A017);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    color: #0A0A0A;
    cursor: pointer;
}

/* ── HERO ───────────────────────────────────────── */
.hm-hero[b-o18ey1w8z2] {
    margin: 4px 16px 24px;
    background: linear-gradient(135deg, #1A1400 0%, #2C2200 60%, #1A1400 100%);
    border: 1px solid rgba(var(--zz-accent-rgb), 0.18);
    border-radius: 20px;
    padding: 22px 20px 20px;
    position: relative;
    overflow: hidden;
}

.hm-hero[b-o18ey1w8z2]::before {
    content: '';
    position: absolute;
    top: -30px; right: -20px;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(var(--zz-accent-rgb),.18) 0%, transparent 70%);
    pointer-events: none;
}

.hm-greeting[b-o18ey1w8z2] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin: 0 0 4px;
    font-weight: 500;
}

.hm-title[b-o18ey1w8z2] {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 18px;
}

.hm-title em[b-o18ey1w8z2] {
    font-style: normal;
    color: var(--zz-accent);
}

.hm-search-bar[b-o18ey1w8z2] {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 50px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, background .15s;
    text-align: left;
}

.hm-search-bar:active[b-o18ey1w8z2] {
    background: rgba(255,255,255,.11);
    border-color: rgba(var(--zz-accent-rgb),.5);
}

.hm-search-ico[b-o18ey1w8z2] { font-size: 16px; color: #888; flex-shrink: 0; }

.hm-search-placeholder[b-o18ey1w8z2] {
    flex: 1;
    font-size: 14px;
    color: #666;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.hm-search-filter[b-o18ey1w8z2] { font-size: 16px; color: var(--zz-accent); flex-shrink: 0; }

/* ── SECTION WRAPPER ────────────────────────────── */
.hm-section[b-o18ey1w8z2] {
    padding: 0 16px;
    margin-bottom: 28px;
}

.hm-sec-header[b-o18ey1w8z2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.hm-sec-title[b-o18ey1w8z2] {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.hm-sec-link[b-o18ey1w8z2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--zz-accent);
    text-decoration: none;
    cursor: pointer;
}

/* ── ACCÈS RAPIDES ──────────────────────────────── */
.hm-quick-row[b-o18ey1w8z2] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.hm-quick-item[b-o18ey1w8z2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s;
}

.hm-quick-item:active[b-o18ey1w8z2] { transform: scale(.93); }

.hm-quick-icon[b-o18ey1w8z2] {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    position: relative;
}

/* Shine overlay */
.hm-quick-icon[b-o18ey1w8z2]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    pointer-events: none;
}

.hm-quick-label[b-o18ey1w8z2] {
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
    text-align: center;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

/* ── BANNIÈRES ──────────────────────────────────── */
.hm-banners[b-o18ey1w8z2] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 0 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.hm-banners[b-o18ey1w8z2]::-webkit-scrollbar { display: none; }

.hm-banner[b-o18ey1w8z2] {
    flex-shrink: 0;
    width: calc(100vw - 48px);
    max-width: 340px;
    height: 150px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s;
}

.hm-banner:active[b-o18ey1w8z2] { transform: scale(.98); }

.hm-banner-transport[b-o18ey1w8z2] {
    background: linear-gradient(135deg, #1A1400 0%, #3D2E00 100%);
    border: 1px solid rgba(var(--zz-accent-rgb),.25);
}
.hm-banner-pharma[b-o18ey1w8z2] {
    background: linear-gradient(135deg, #0A1220 0%, #0F2040 100%);
    border: 1px solid rgba(59,130,246,.25);
}
.hm-banner-bus[b-o18ey1w8z2] {
    background: linear-gradient(135deg, #0A1A14 0%, #0D2E20 100%);
    border: 1px solid rgba(16,185,129,.25);
}

.hm-banner-inner[b-o18ey1w8z2] {
    flex: 1;
    z-index: 2;
}

.hm-banner-badge[b-o18ey1w8z2] {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    background: rgba(255,255,255,.15);
    padding: 3px 8px;
    border-radius: 50px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.9);
}

.hm-banner-transport .hm-banner-badge[b-o18ey1w8z2] { background: rgba(var(--zz-accent-rgb),.25); color: var(--zz-accent); }
.hm-banner-pharma   .hm-banner-badge[b-o18ey1w8z2] { background: rgba(59,130,246,.25);  color: #93C5FD; }
.hm-banner-bus      .hm-banner-badge[b-o18ey1w8z2] { background: rgba(16,185,129,.25);  color: #6EE7B7; }

.hm-banner-title[b-o18ey1w8z2] {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.hm-banner-sub[b-o18ey1w8z2] {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    margin-bottom: 12px;
    line-height: 1.4;
}

.hm-banner-cta[b-o18ey1w8z2] {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.hm-banner-transport .hm-banner-cta[b-o18ey1w8z2] { border-color: rgba(var(--zz-accent-rgb),.5); color: var(--zz-accent); }

.hm-banner-illus[b-o18ey1w8z2] {
    font-size: 60px;
    opacity: .22;
    position: absolute;
    right: 14px; bottom: -4px;
    line-height: 1;
    pointer-events: none;
    filter: blur(0px);
}

.hm-banner-dots[b-o18ey1w8z2] {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.hm-banner-dots .dot[b-o18ey1w8z2] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #333;
    transition: all .2s;
}

.hm-banner-dots .dot.active[b-o18ey1w8z2] {
    background: var(--zz-accent);
    width: 18px;
    border-radius: 3px;
}

/* ── GRILLE SERVICES ────────────────────────────── */
.hm-services-grid[b-o18ey1w8z2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-svc-card[b-o18ey1w8z2] {
    width: 100%;
    background: #1A1A1A;
    border: 1px solid #252525;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform .15s, background .15s;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.hm-svc-card[b-o18ey1w8z2]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--svc-color);
    border-radius: 16px 0 0 16px;
    opacity: .8;
}

.hm-svc-card:active[b-o18ey1w8z2] { transform: scale(.98); background: #1E1E1E; }

.hm-svc-icon-wrap[b-o18ey1w8z2] {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--svc-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.05);
}

.hm-svc-emoji[b-o18ey1w8z2] { font-size: 24px; line-height: 1; }

.hm-svc-info[b-o18ey1w8z2] {
    flex: 1;
    min-width: 0;
}

.hm-svc-name[b-o18ey1w8z2] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.hm-svc-desc[b-o18ey1w8z2] {
    display: block;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-svc-arrow[b-o18ey1w8z2] {
    font-size: 13px;
    color: #444;
    flex-shrink: 0;
}

/* ── BOUTON SOS ─────────────────────────────────── */
.hm-sos-banner[b-o18ey1w8z2] {
    width: 100%;
    background: linear-gradient(135deg, #1A0808, #2D1010);
    border: 1.5px solid rgba(239, 68, 68, .3);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s;
}

.hm-sos-banner:active[b-o18ey1w8z2] { transform: scale(.98); }

.hm-sos-call[b-o18ey1w8z2] {
    font-size: 22px;
    color: #EF4444;
    margin-left: auto;
    flex-shrink: 0;
    animation: sos-ring-b-o18ey1w8z2 2.5s ease-in-out infinite;
}

@keyframes sos-ring-b-o18ey1w8z2 {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%  { transform: rotate(-12deg); }
    20%, 40%  { transform: rotate(12deg); }
    50%       { transform: rotate(0deg); }
}
/* /Pages/HomeA.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   ACCUEIL — direction visuelle « maquette ZaZa »
   ----------------------------------------------------------------
   Tout tient dans ce fichier — le CSS ISOLÉ de l'accueil — et jamais
   dans zaza-theme.css : .zz-tile, .zz-banner, .zz-offer et .zz-search
   servent aussi ServicesPage, HomeC, HomeD et HomeE, qui ne suivent
   pas cette maquette. Les y toucher les emporterait toutes.

   L'isolation Blazor suffixe chaque sélecteur ([b-xxxxx]) : la version
   locale est donc mécaniquement plus spécifique que la version
   globale, sans dépendre de l'ordre des feuilles ni d'un !important.

   Ombres, dégradés et rayons passent par --zz-shadow-*, --zz-cta-grad*
   et --zz-radius-* : en jour et en nuit ces jetons valent « none », un
   aplat d'accent et les rayons d'origine. Ces deux thèmes gardent donc
   leur rendu plat et toute leur palette ; seul « clair » reçoit les
   ombres et le dégradé de la maquette.

   Deux dégradés, et non un : --zz-cta-grad (vert clair → bleu) pour ce
   qui dépasse 18 px, --zz-cta-grad-sm (vert FONCÉ → bleu) partout
   ailleurs. Le blanc sur #22A04A ne donne que 3,10:1, ce que WCAG
   n'admet qu'en « grand texte ». Le détail est dans zaza-themes.css.
   ════════════════════════════════════════════════════════════════ */

.hm-root[b-aylrvo1cgm] {
    min-height: 100%;
    background: var(--zz-black);
    font-family: var(--zz-font);
    color: var(--zz-white);
    padding-bottom: 24px;
}

/* ── En-tête ──────────────────────────────────────────────────── */

.hm-header[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* 18 px au lieu de 10 : le logo arrivait au ras du bord haut et se lisait
       comme rogné. On y ajoute env(safe-area-inset-top) — l'accueil est le
       tout premier élément de l'écran, et en PWA plein écran sur un téléphone
       à encoche, la barre d'état venait par-dessus. Vaut 0 partout ailleurs,
       donc rien ne bouge sur navigateur de bureau ni sur écran sans encoche. */
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 4px;
    /* Gabarit de la photo du compte. Ramené de 48,6 à 36 px : le bouton
       porte maintenant DEUX lignes de texte et un chevron, et à l'ancien
       diamètre l'ensemble ne tenait plus en face du logo sur un écran de
       360 dp. Toucher cette seule valeur redimensionne le bouton ET le
       logo, qui s'y mesure. */
    --hm-mark: 36px;
}

/* flex: none, et surtout PAS de min-width: 0 ici. C'est ce min-width qui
   autorisait la colonne à passer sous la largeur de son contenu : le bouton
   compte, plus large, prenait la place et le logo se retrouvait écrasé
   horizontalement. C'est désormais la colonne de droite qui cède — son
   identifiant sait déjà se tronquer, le logo non. */
.hm-header-left[b-aylrvo1cgm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
}

/* Le logo se mesure sur le bouton compte, en face duquel il se trouve :
   les deux colonnes de l'en-tête se répondent, marque contre compte.
   Rien n'est écrit en dur — la référence est la hauteur réelle du
   bouton, soit la photo, son rembourrage vertical et ses bordures.

   width:auto + object-fit:contain : la largeur suit les proportions du
   fichier, sans valeur en pixels à tenir à jour si le logo est
   redessiné. */
.hm-logo[b-aylrvo1cgm] {
    /* Rapport porté de 0,62 à 0,72, puis à 0,936 — les +30 % demandés.
       La marque avait perdu en présence quand --hm-mark est descendu à 36 px
       pour loger le bouton compte. */
    height: calc((var(--hm-mark) + 8px) * 0.936);
    width: auto;
    /* La largeur suit la hauteur, sans jamais être rabotée par la colonne :
       sans ces deux lignes, un conteneur flex étroit comprime l'image. */
    flex: none;
    max-width: none;
    object-fit: contain;
    display: block;
}

/* Le slogan, sous le logo.

   La maquette met « Tout en un » en vert de charte. Il n'est pas repris
   ici : #22A04A sur le fond clair donne 3,10:1, très en dessous des
   4,5:1 exigés d'un texte de 10 px, et il n'existe pas de jeton --zz-*
   qui resterait ce vert-là en restant lisible sur les trois thèmes. Le
   contraste de graisse rend la même hiérarchie sans rien coûter. */
.hm-slogan[b-aylrvo1cgm] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--zz-dim);          /* 7,28:1 en clair et jour, 10,16:1 en nuit */
    letter-spacing: .1px;
    line-height: 1.2;
    white-space: nowrap;
}

.hm-slogan b[b-aylrvo1cgm] {
    font-weight: 800;
    color: var(--zz-white);        /* 15,3:1 */
}

.hm-header-right[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ── Bouton compte ────────────────────────────────────────────── */

/* Tout le bloc est cliquable et mène au profil : viser la seule photo
   demanderait de la précision sur un téléphone. */
.hm-compte[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--zz-card);
    border: 1px solid var(--zz-border);
    border-radius: 50px;
    box-shadow: var(--zz-shadow-card);
    padding: 4px 8px 4px 4px;
    cursor: pointer;
    min-width: 0;
}

.hm-avatar[b-aylrvo1cgm] {
    width: var(--hm-mark);
    height: var(--hm-mark);
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--zz-card2);
}

/* Sans photo : l'initiale du prénom, qui distingue déjà les comptes
   mieux qu'une silhouette générique.

   Dégradé PETIT CORPS et non --zz-cta-grad : l'initiale fait 16 px, en
   dessous du seuil « grand texte » de WCAG. Sur --zz-cta-grad-sm le
   blanc tient 4,95:1 au point le plus clair. */
.hm-avatar-vide[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--hm-mark) * 0.46);
    font-weight: 800;
    color: var(--zz-on-accent);
    background: var(--zz-cta-grad-sm);
}

/* Colonne de texte du bouton : identité au-dessus, note et destination
   en dessous.

   min-width: 0 est indispensable — sans lui, un élément flex refuse de
   descendre sous la largeur de son contenu, et l'ellipsis de
   l'identifiant ne se déclencherait jamais : le nom déborderait du
   bouton au lieu d'être tronqué. */
.hm-compte-txt[b-aylrvo1cgm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    gap: 1px;
}

/* L'identifiant peut être long — « Emmanuella.1052 ». On coupe plutôt
   que d'élargir l'en-tête, la référence restant reconnaissable par son
   début. */
.hm-identifiant[b-aylrvo1cgm] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--zz-white);        /* 15,3:1 — c'est le nom, il porte l'info */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 108px;
}

.hm-compte-lien[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--zz-dim);          /* 7,28:1 */
    line-height: 1.1;
    white-space: nowrap;
}

.hm-etoile[b-aylrvo1cgm] {
    font-size: 9px;
    color: var(--zz-yellow);       /* alias historique de --zz-accent */
}

.hm-score-valeur[b-aylrvo1cgm] {
    font-weight: 700;
    color: var(--zz-white);
}

/* « Voir mon profil » s'efface le premier quand la place manque : c'est
   la seule partie de la ligne qui ne porte pas de donnée. */
.hm-compte-mot[b-aylrvo1cgm] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hm-compte-fleche[b-aylrvo1cgm] {
    font-size: 11px;
    color: var(--zz-muted);
    flex: none;
}

/* ── Cloche ───────────────────────────────────────────────────── */

.hm-notif[b-aylrvo1cgm] {
    position: relative;
    background: var(--zz-card);
    border: 1px solid var(--zz-border);
    border-radius: 50%;
    box-shadow: var(--zz-shadow-card);
    /* 44 px : cible tactile minimale confortable, et la même hauteur que
       le bouton compte une fois son rembourrage compté. */
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--zz-white);
    cursor: pointer;
}

/* La pastille se détache du bouton par un liseré de la couleur du FOND
   de page : sans lui, elle se confondrait avec la bordure de la cloche. */
.hm-dot[b-aylrvo1cgm] {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    background: var(--c-urgences);
    border-radius: 50%;
    border: 1.5px solid var(--zz-card);
}

/* ── Ville ────────────────────────────────────────────────────── */

.hm-ville[b-aylrvo1cgm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.hm-ville-pin[b-aylrvo1cgm] {
    font-size: 13px;
    color: var(--zz-accent);       /* 7,17:1 en clair et jour, 5,98:1 en nuit */
}

.hm-ville-nom[b-aylrvo1cgm] {
    font-size: 13px;
    font-weight: 600;
    color: var(--zz-white);
}

/* ── Salutation ───────────────────────────────────────────────── */

.hm-accroche[b-aylrvo1cgm] { margin-bottom: 22px; }

/* Les deux lignes ont le même poids : la maquette les traite comme un
   seul bloc d'adresse à la personne, pas comme un titre suivi d'un
   sous-titre. */
.hm-hello[b-aylrvo1cgm] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zz-white);        /* 15,3:1 en clair, 15,0:1 en jour, 19,2:1 en nuit */
    margin: 0;
    /* Le crénage négatif est parti avec la graisse de 800 : il servait à
       resserrer un très gras, qui écarte naturellement les lettres. À 700 il
       donnerait un texte comprimé. */
}

/* ── Barre de recherche ───────────────────────────────────────── */

.zz-search[b-aylrvo1cgm] { margin-top: 14px; }

.zz-search .zz-input[b-aylrvo1cgm] {
    /* Place laissée à la pastille, qui vit dans le champ et non à côté. */
    padding-left: 62px;
    padding-right: 18px;
    box-shadow: var(--zz-shadow-card);
}

/* La loupe devient une pastille en dégradé : c'est le seul repère
   d'action de la barre, le champ étant en lecture seule.

   Glyphe et non texte : la règle applicable est celle des composants
   d'interface (≥ 3:1). Le blanc sur la portion la plus claire du
   dégradé donne 3,10:1, au-dessus du seuil. */
.zz-search-icon[b-aylrvo1cgm] {
    left: 7px;
    right: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zz-cta-grad-135);
    color: var(--zz-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: var(--zz-shadow-cta);
}

/* ── Carte « À la Une » ───────────────────────────────────────── */

.hm-une[b-aylrvo1cgm] { margin-bottom: 26px; }

/* Une carte occupe toute la largeur et s'aligne au doigt : c'est un
   carrousel, pas une file de vignettes. scroll-snap fige la carte sur
   le bord, ce qui rend les pastilles de position lisibles — sans lui
   elles indiqueraient une position intermédiaire la moitié du temps. */
.zz-hscroll[b-aylrvo1cgm] { scroll-snap-type: x mandatory; }

.zz-banner[b-aylrvo1cgm] {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: auto;
    height: auto;
    min-height: 168px;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 16px 18px;
    /* Le dégradé du logo, à 50 % d'opacité (--zz-hero-wash), posé sur du
       transparent : ce sont les 50 % restants qui laissent voir le fond de
       page. Aucun aplat --zz-card en dessous — un blanc opaque annulerait la
       transparence demandée.

       Bordure et ombre retirées avec l'aplat, et non par oubli : toutes deux
       dessinent les limites d'une surface pleine. Sur un fond translucide,
       l'ombre projetait le halo d'une boîte invisible. */
    background: var(--zz-hero-wash), transparent;
    border: none;
    border-radius: var(--zz-radius-hero);
    box-shadow: none;
}

.zz-banner .cnt[b-aylrvo1cgm] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Colonne de l'illustration — une simple réserve de place, SANS fond.
   L'illustration est détourée et se pose à même la carte : le lavis de
   --zz-hero-wash court derrière elle sans interruption, comme sur la
   maquette. Un cadre teinté à cet endroit recoupait la carte en deux. */
.zz-banner .bg[b-aylrvo1cgm] {
    position: relative;
    inset: auto;
    /* 34 % et non 40 % : le bouton d'action est ce qui contraint la
       largeur de la colonne de texte, et six points de plus lui rendent
       les 20 px qui lui manquaient. */
    flex: 0 0 34%;
    align-self: stretch;
    opacity: 1;
    background: none;
    border-radius: 0;
    overflow: visible;
    font-size: 46px;
    padding: 0;
    justify-content: center;
}

/* Reflet au sol : une copie miroir de l'illustration, posée juste en dessous
   et qui s'éteint en descendant.

/* Le reflet au sol n'est plus déclaré ici : il vit sur .zz-ico-img dans
   zaza-theme.css et s'applique donc à toutes les illustrations de
   l'application. Ne rien redéfinir localement, sous peine de voir les deux
   valeurs diverger.

   80 % FERMES, et non un plafond : height et width, pas max-height. Toutes
   les promotions présentent ainsi leur illustration dans une boîte de même
   taille, quelles que soient les proportions du fichier — une bonbonne étroite
   et un bus large occupent le même cadre. Le reste de la colonne accueille
   le reflet.

   object-position: bottom est indispensable avec une boîte fixe. En
   « contain », une illustration large est calée au milieu et laisse du vide
   au-dessus ET en dessous ; le reflet démarrerait alors sous ce vide et
   l'espace qu'on vient de supprimer reviendrait. Posée en bas, l'image touche
   le bord de sa boîte, donc son reflet. */
.zz-banner .bg .zz-ico-img[b-aylrvo1cgm] {
    height: 80%;
    width: 80%;
    max-height: none;
    max-width: none;
    object-position: bottom;
}

/* Pilule en dégradé comme la maquette, mais sur --zz-cta-grad-sm : à
   10 px, du blanc sur le vert clair tomberait à 3,10:1. */
.zz-banner .tag[b-aylrvo1cgm] {
    background: var(--zz-cta-grad-sm);
    color: var(--zz-on-accent);
    font-size: 10px;
    padding: 4px 10px;
}

/* Le titre repose maintenant sur le dégradé de marque à 50 %, dont la teinte
   varie sur toute la largeur. Mesuré aux quatre arrêts, le pire cas est la
   portion bleue : 6,0:1 en clair et en jour. En nuit le pire cas est le
   jaune, à 5,2:1. AA tenu partout. */
.zz-banner .ttl[b-aylrvo1cgm] {
    color: var(--zz-white);
    text-shadow: none;             /* l'ombre décollait le titre d'une photo de
                                      fond : il n'y en a plus */
    font-size: 21px;
    line-height: 1.15;
    margin-top: 6px;
}

/* --zz-white et non --zz-dim, contrairement au reste de l'écran. Le gris de
   texte tenait ses 7,3:1 sur une carte blanche, mais il tombe à 2,9:1 sur la
   portion bleue du dégradé — et à 2,8:1 sur la portion jaune en thème nuit.
   Sous un fond dont la teinte change d'un bout à l'autre de la carte, il n'y
   a pas de gris qui passe partout : la hiérarchie se fait donc au corps et à
   la graisse, pas à la couleur. */
.zz-banner .sub[b-aylrvo1cgm] {
    color: var(--zz-white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 5px;
}

/* Dégradé FONCÉ, et non le clair de la maquette — c'est ce qui rend ce
   corps de 10 px possible. Sur --zz-cta-grad, le blanc au point le plus
   clair (#22A04A) ne donne que 3,10:1, admis uniquement en « grand
   texte », donc à partir de 18 px : à 10 px le bouton serait devenu
   illisible au regard de WCAG. Sur --zz-cta-grad-sm, bâti sur le vert
   foncé, il tient 4,95:1 quelle que soit la taille.

   Rembourrage resserré en proportion : garder les marges d'un bouton de
   16 px autour d'un texte de 10 px aurait donné une pilule creuse.

   nowrap est délibéré : un CTA sur deux lignes ne ressemble plus à un
   bouton. */
.zz-banner .cta[b-aylrvo1cgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 13px;
    border-radius: 50px;
    background: var(--zz-cta-grad-sm);
    color: var(--zz-on-accent);
    font-size: 10px;
    font-weight: 700;              /* le gras compense la perte de corps */
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--zz-shadow-cta);
}

.zz-banner .cta .bi[b-aylrvo1cgm] { font-size: 9px; }

/* ── Pastilles de position ────────────────────────────────────── */

.hm-points[b-aylrvo1cgm] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.hm-point[b-aylrvo1cgm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zz-border-strong);
    transition: width .2s, background .2s;
}

/* La pastille active s'allonge en plus de changer de teinte : sur un
   écran au soleil, la seule différence de couleur ne suffit pas — et
   c'est aussi ce qui la rend lisible à qui distingue mal les couleurs. */
.hm-point.actif[b-aylrvo1cgm] {
    width: 18px;
    border-radius: 50px;
    background: var(--zz-accent);
}

/* ── Tuiles de services ───────────────────────────────────────── */

.zz-sec-link .bi[b-aylrvo1cgm] { font-size: 10px; }

/* Cartes blanches, illustration en haut, texte aligné à gauche et
   chevron dans le coin — la disposition de la maquette. */
.zz-tile[b-aylrvo1cgm] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    gap: 4px;
    padding: 10px 9px 12px;
    /* Suit la hauteur du bloc d'illustration, réserve du reflet comprise :
       sans cela les tuiles à accroche courte garderaient l'ancienne hauteur
       et la grille perdrait son alignement. */
    min-height: 181px;
    background: var(--zz-card);
    border-radius: var(--zz-radius-card);
    border: 1px solid var(--zz-border);
    box-shadow: var(--zz-shadow-card);
}

/* L'illustration prend toute la largeur de la tuile : détourée, elle n'a
   plus de pastille teintée derrière elle et c'est sa taille seule qui
   lui donne du poids. */
.zz-tile-icon[b-aylrvo1cgm] {
    width: 100%;
    /* 97 px pour une illustration de 75. L'illustration passe de 65 à 75 px
       — les +15 % demandés, après les +20 % précédents — et le bloc suit,
       augmenté de la hauteur du reflet, qui vaut trois dixièmes de l'image.
       Sans cette réserve, le reflet passerait par-dessus le libellé.

       align-items en haut, et non centré comme le veut la règle globale :
       l'image doit partir du bord supérieur pour que la place gagnée serve
       bien au reflet, en dessous, et non à des marges des deux côtés. */
    height: 97px;
    /* CENTRÉ, et non plus collé en haut. La réserve du bas servait au reflet ;
       dès lors que l'illustration occupe presque tout le bloc, cette réserve
       n'a plus lieu d'être et l'icône paraissait poussée vers le haut. */
    align-items: center;
    border-radius: 12px;
    font-size: 30px;               /* corps des deux emojis restants, s'il en revenait */
    margin-bottom: 2px;
}

/* Ici l'image OCCUPE le bloc, au lieu des 57 % de la règle globale : ce
   pourcentage calait l'illustration sur la taille des emojis voisins,
   or toutes les voisines sont maintenant des illustrations.
   object-fit garde les proportions, bonbonne comprise. */
.zz-tile-icon .zz-ico-img[b-aylrvo1cgm] {
    /* +25 % : 77 % → 96 % de la hauteur du bloc. */
    height: 96%;

    /* ⚠️ LA HAUTEUR SUIT LA LARGEUR, et non l'inverse. C'est ce qui colle le
       reflet à l'illustration.

       Le reflet se dessine sous la BOÎTE de l'image, pas sous ce qu'on y voit.
       Dès que la boîte est plus haute que l'image, « object-fit: contain » laisse
       une bande vide en bas — et le reflet démarre après elle.

       Avec width:100% + height:auto, la boîte épouse exactement le ratio du
       fichier : aucune bande verticale, le reflet part du pixel où l'illustration
       s'arrête. max-height reprend la main pour les illustrations HAUTES (la
       bonbonne d'eau, 149x211) qui déborderaient sinon de la tuile ; contain crée
       alors des bandes LATÉRALES, sans effet sur le reflet.

       ⚠️ Ceci ne suffit que si le fichier lui-même est détouré au plus juste :
       svc-transport.png portait 46 px de transparent sous le taxi, soit 19 % de
       sa hauteur, que rien en CSS ne pouvait rattraper. Voir recadrer-icones.ps1,
       à relancer si de nouvelles illustrations arrivent. */
    width: 100%;
    height: auto;
    max-height: 96%;
    object-position: center;
}

.zz-tile-label[b-aylrvo1cgm] {
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    color: var(--zz-white);        /* 15,3:1 sur la carte */
    line-height: 1.2;
}

/* Deux lignes au plus : au-delà, les tuiles d'une même rangée n'auraient
   plus la même hauteur et la grille se déformerait. L'accroche est du
   confort — la tronquer ne fait rien perdre, le libellé au-dessus dit
   déjà de quel service il s'agit. */
.zz-tile-desc[b-aylrvo1cgm] {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--zz-dim);          /* 7,28:1 */
    padding-right: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chevron décoratif, dans le coin bas-droit. Glyphe posé sur le
   dégradé : composant d'interface, seuil 3:1, tenu à 3,10:1. */
.zz-tile-go[b-aylrvo1cgm] {
    position: absolute;
    right: 8px;
    bottom: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--zz-cta-grad-135);
    color: var(--zz-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* ── Offres du moment ─────────────────────────────────────────── */

.zz-offer[b-aylrvo1cgm] {
    border-radius: var(--zz-radius-card);
    box-shadow: var(--zz-shadow-card);
}

.zz-offer .o-img[b-aylrvo1cgm] { height: 96px; align-items: flex-start; padding-top: 8px; }
/* 62 % et non 78 % : les trois dixièmes rendus au reflet, qui déborderait
   sinon sur le titre de l'offre. */
.zz-offer .o-img .zz-ico-img[b-aylrvo1cgm] { height: 62%; }
.zz-offer .o-title[b-aylrvo1cgm] { color: var(--zz-white); }

/* ── Tuile pleine largeur : accès à /navigation ──────────────────────────
   La grille de services reste en 3×3 ; cette tuile occupe seule la ligne
   suivante (grid-column: 1 / -1). Une dixième tuile ordinaire aurait laissé
   deux trous en dernière ligne — la raison même pour laquelle l'ancienne
   tuile « Plus » avait été retirée.

   Elle emprunte tout à .zz-tile (fond, bordure, rayon, chevron) et ne
   redéfinit que le sens de lecture : illustration à gauche, textes au
   centre, chevron à droite. */
.zz-tile-wide[b-aylrvo1cgm] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    /* La hauteur des tuiles carrées venait de l'illustration ; ici la ligne
       suit son contenu. */
    min-height: 0;
    padding: 10px 12px;
}

    .zz-tile-wide .zz-tile-icon[b-aylrvo1cgm] {
        width: 64px;
        height: 56px;
        flex: none;
    }

    .zz-tile-wide .zz-tile-wide-txt[b-aylrvo1cgm] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    /* Le chevron des tuiles carrées est calé en bas à droite ; sur une ligne
       il doit être centré verticalement. */
    .zz-tile-wide .zz-tile-go[b-aylrvo1cgm] {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    /* La réserve de 22 px servait à écarter le texte du chevron posé sous
       lui : sur une ligne, le chevron n'est plus au-dessus du texte. */
    .zz-tile-wide .zz-tile-desc[b-aylrvo1cgm] {
        padding-right: 26px;
        -webkit-line-clamp: 1;
    }

/* ══════════ BANDEAU « COMPTE À ACTIVER » ══════════
   Dépôt de garantie non constitué. Jaune de la charte : c'est une ALERTE.
   Le bandeau est cliquable dans son entier — la flèche annonce qu'il mène
   quelque part, mais la cible tactile est la carte, pas la flèche. */
.hm-garantie[b-aylrvo1cgm] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--zz-yellow-dim);
    border: 1px solid var(--zz-yellow);
    border-radius: var(--zz-r, 14px);
    color: var(--zz-text);
    font-family: var(--zz-font);
    text-align: left;
    cursor: pointer;
}

.hm-garantie-ico[b-aylrvo1cgm] {
    font-size: 20px;
    color: var(--zz-yellow);
    flex-shrink: 0;
}

.hm-garantie-txt[b-aylrvo1cgm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hm-garantie-titre[b-aylrvo1cgm] {
    font-size: 14px;
    font-weight: 800;
}

.hm-garantie-sub[b-aylrvo1cgm] {
    font-size: 12px;
    color: var(--zz-dim);
    line-height: 1.45;
}

.hm-garantie-fleche[b-aylrvo1cgm] {
    margin-left: auto;
    font-size: 13px;
    color: var(--zz-dim);
    flex-shrink: 0;
}

/* ── GRAND ÉCRAN : la colonne cesse de s'étirer ────────────────────────────
   Mesuré sur passager.zaza.cg le 11/09/2026, fenêtre de 3 440 px : aucun
   max-width dans toute la chaîne (zz-app, zz-content-area, hm-root), donc
   .zz-banner — qui vaut « flex: 0 0 100% » — mesurait 3 408 px de large.
   Sa proportion étant fixe (2,56:1, celle de la maquette), sa hauteur
   suivait : 1 332 px, soit PLUS HAUT QUE LA FENÊTRE. Le premier écran ne
   montrait rien d'autre que le bandeau.

   On borne la colonne plutôt que le bandeau : c'est la page entière qui
   s'étirait, et le bandeau n'en était que le symptôme visible — lui seul a
   une hauteur dictée par sa largeur. Ainsi les tuiles de service et les
   offres restent alignées sur la même colonne, comme sur téléphone.

   Seuils 641 et 1025 px : ceux déjà employés par l'application (map-utils.js,
   et six autres media queries). En inventer un septième aurait fait diverger
   la carte du reste des écrans. */
@media (min-width: 641px) {
    .hm-root[b-aylrvo1cgm] {
        max-width: 720px;
        margin-inline: auto;
    }
}

/*  ⚠️ Garde-fou, indépendant de la colonne : si un bandeau se retrouve un
    jour dans un conteneur non borné, sa hauteur ne doit plus pouvoir
    s'emballer. 720 px de large = 281 px de haut à la proportion du dessin. */
.zz-banner[b-aylrvo1cgm] {
    max-width: 720px;
}
/* /Pages/Inscription.razor.rz.scp.css */
/* Inscription en étapes — une question par écran.

   TOUTES les couleurs viennent des tokens de la charte (zaza-brand.css puis
   zaza-themes.css). Aucune valeur en dur : l'application propose cinq thèmes
   (data-theme a→e) et un écran qui fige ses couleurs jure dès que l'utilisateur
   en change.

   Tokens consommés :
     --app-bg / --app-text ...... fond et texte de l'application
     --zz-accent / --zz-on-accent  accent du thème, et texte lisible dessus
     --zz-accent-dim ............ voile d'accent (états sélectionnés)
     --zz-accent-rgb ............ pour les halos en rgba()
     --zz-card / --zz-card2 ..... surfaces
     --zz-border ................ bordures
     --zz-dim ................... texte secondaire
     --c-urgences ............... rouge fonctionnel (erreurs)
*/

.insc-page[b-7inoqn20j9] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 1.25rem 1.25rem 2rem;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--z-font);
    position: relative;
}

/* ---- Progression ---- */
.insc-progress[b-7inoqn20j9] {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin: .5rem 0 1.75rem;
}

.insc-dot[b-7inoqn20j9] {
    width: 2rem;
    height: .25rem;
    border-radius: 999px;
    background: var(--zz-border);
    transition: background .2s ease;
}

.insc-dot.on[b-7inoqn20j9] { background: var(--zz-accent); }

/* ---- Retour ---- */
.insc-back[b-7inoqn20j9] {
    position: absolute;
    top: 1rem;
    left: .75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--app-text);
    cursor: pointer;
}

.insc-back:disabled[b-7inoqn20j9] { opacity: .4; cursor: default; }

/* ---- Contenu ---- */
.insc-body[b-7inoqn20j9] { flex: 1 1 auto; }

.insc-title[b-7inoqn20j9] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .5rem;
    color: var(--app-text);
}

.insc-help[b-7inoqn20j9] {
    font-size: .95rem;
    color: var(--zz-dim);
    margin: 0 0 1.5rem;
}

.insc-label[b-7inoqn20j9] {
    font-size: .9rem;
    font-weight: 600;
    margin: 1.75rem 0 .6rem;
    color: var(--app-text);
}

.insc-warn[b-7inoqn20j9] {
    display: block;
    margin-top: .35rem;
    /* --zz-warn-text et non --z-yellow : le jaune de charte tombe à
       1.6:1 sur le fond blanc du thème Jour. */
    color: var(--zz-warn-text);
}

/* ---- Champs ---- */
.insc-input[b-7inoqn20j9] {
    width: 100%;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    font-size: 1.05rem;
    font-family: inherit;
    border: 1px solid var(--zz-border);
    border-radius: .7rem;
    background: var(--zz-card);
    color: var(--app-text);
}

.insc-input[b-7inoqn20j9]::placeholder { color: var(--zz-muted); }

.insc-input:focus[b-7inoqn20j9] {
    outline: none;
    border-color: var(--zz-accent);
    box-shadow: 0 0 0 3px rgba(var(--zz-accent-rgb), .22);
}

.insc-input:disabled[b-7inoqn20j9] { opacity: .6; }

/* Numéro : l'indicatif est fixe, il ne doit pas ressembler à un champ. */
.insc-phone[b-7inoqn20j9] {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.insc-indicatif[b-7inoqn20j9] {
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    font-size: 1.05rem;
    font-weight: 600;
    border: 1px solid var(--zz-border);
    border-radius: .7rem;
    background: var(--zz-card2);
    color: var(--zz-dim);
    margin-bottom: .75rem;
}

.insc-phone .insc-input[b-7inoqn20j9] { flex: 1 1 auto; }

/* Code : chiffres espacés, lisibles d'un coup d'œil pendant la recopie. */
.insc-code[b-7inoqn20j9] {
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: .6rem;
    font-variant-numeric: tabular-nums;
    padding-left: .6rem; /* compense le letter-spacing du dernier caractère */
}

/* ---- Choix du canal ---- */
.insc-channels[b-7inoqn20j9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.insc-channel[b-7inoqn20j9] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem;
    text-align: left;
    font-family: inherit;
    border: 1.5px solid var(--zz-border);
    border-radius: .7rem;
    background: var(--zz-card);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.insc-channel.on[b-7inoqn20j9] {
    border-color: var(--zz-accent);
    background: var(--zz-accent-dim);
}

.insc-channel:disabled[b-7inoqn20j9] { opacity: .6; cursor: default; }

.insc-channel-name[b-7inoqn20j9] {
    font-weight: 600;
    color: var(--app-text);
}

.insc-channel-note[b-7inoqn20j9] {
    font-size: .78rem;
    color: var(--zz-dim);
}

/* ---- Actions ---- */
.insc-actions[b-7inoqn20j9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding-top: 1.25rem;
}

.insc-primary[b-7inoqn20j9] {
    width: 100%;
    padding: .95rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--zz-on-accent);
    background: var(--zz-accent);
    border: 0;
    border-radius: .7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.insc-primary:disabled[b-7inoqn20j9] { opacity: .45; cursor: default; }

.insc-link[b-7inoqn20j9] {
    border: 0;
    background: transparent;
    color: var(--zz-accent);
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    padding: .5rem;
    cursor: pointer;
}

.insc-link:disabled[b-7inoqn20j9] { opacity: .5; cursor: default; }

.insc-error[b-7inoqn20j9] {
    margin-top: 1rem;
    padding: .7rem .9rem;
    border-radius: .6rem;
    background: rgba(239, 68, 68, .12);
    border-left: 3px solid var(--c-urgences);
    color: var(--app-text);
    font-size: .9rem;
}

/* ---- Attente ---- */
.insc-spinner[b-7inoqn20j9] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--zz-accent-rgb), .35);
    border-top-color: var(--zz-on-accent);
    border-radius: 50%;
    animation: insc-spin-b-7inoqn20j9 .7s linear infinite;
}

@keyframes insc-spin-b-7inoqn20j9 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .insc-spinner[b-7inoqn20j9] { animation: none; }
}
/* /Pages/MaCarte.razor.rz.scp.css */
/* ?????? MaCarte � Scoped styles ?????? */

.loading-indicator[b-u32k9lko01] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
}

.loading-points[b-u32k9lko01] { background: rgba(76, 175, 80, 0.7); }
.loading-route[b-u32k9lko01]  { background: rgba(33, 150, 243, 0.7); }

.autopan-controls[b-u32k9lko01] {
    position: absolute;
    top: 500px;
    left: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.search-bar-container[b-u32k9lko01] {
display: grid;
    grid-template-columns: 1fr auto;
  gap: 5px;
    margin-bottom: 10px;
}

.search-bars[b-u32k9lko01] {
    position: absolute;
    top: 10px;
  left: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 5px;
  width: calc(100% - 20px);
    max-width: 350px;
}

.search-bar[b-u32k9lko01]  { width: 100%; }

.remove-button[b-u32k9lko01] {
    width: 30px;
    height: 30px;
    font-size: 20px;
    border-radius: 50%;
    background-color: lightgrey;
    color: black;
    border: none;
}

.add-button[b-u32k9lko01], .validate-button[b-u32k9lko01], .directions-button[b-u32k9lko01] {
    width: 40px;
    height: 40px;
font-size: 20px;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
  border: none;
    margin-top: 10px;
}

.suggestions[b-u32k9lko01] {
    grid-column: span 2;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
 background-color: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
}
.suggestions li[b-u32k9lko01]  { padding: 10px; cursor: pointer; }
.suggestions li:hover[b-u32k9lko01]   { background-color: #f0f0f0; }

.directions-list[b-u32k9lko01] {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
}
.directions-list li[b-u32k9lko01]  { padding: 10px; cursor: pointer; }
.directions-list li:hover[b-u32k9lko01]{ background-color: #f0f0f0; }
.directions-list.visible[b-u32k9lko01]     { display: block; }
.selected[b-u32k9lko01]      { background-color: #d3d3d3; font-weight: bold; }

.orientation-display[b-u32k9lko01],
.orientation-display_2[b-u32k9lko01] {
    position: absolute;
    top: 180px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-align: center;
    min-width: 100px;
    font-size: 0.85rem;
}
.orientation-display[b-u32k9lko01]   { right: 10px; }
.orientation-display_2[b-u32k9lko01] { left: 10px; }

.orientation-title[b-u32k9lko01]     { font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #333; }
.orientation-arrow[b-u32k9lko01]   { font-size: 28px; margin: 5px 0; transition: transform 0.3s ease; }
.orientation-direction[b-u32k9lko01] { font-size: 16px; font-weight: bold; color: #2c3e50; }
.orientation-distance[b-u32k9lko01],
.orientation-speed[b-u32k9lko01],
.orientation-accuracy[b-u32k9lko01],
.orientation-heading[b-u32k9lko01]   { font-size: 12px; color: #7f8c8d; margin-top: 3px; }

/* Fl�ches directionnelles */
.arrow-up[b-u32k9lko01]   { transform: rotate(0deg); }
.arrow-right[b-u32k9lko01]     { transform: rotate(90deg); }
.arrow-down[b-u32k9lko01]      { transform: rotate(180deg); }
.arrow-left[b-u32k9lko01]    { transform: rotate(-90deg); }
.arrow-upright[b-u32k9lko01]   { transform: rotate(45deg); }
.arrow-pleft[b-u32k9lko01]     { transform: rotate(-45deg); }
.arrow-downright[b-u32k9lko01] { transform: rotate(135deg); }
.arrow-downleft[b-u32k9lko01]  { transform: rotate(-135deg); }

/* ?? Toast notification ?? */
.map-toast[b-u32k9lko01] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200000;
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    padding: 10px 20px;
  border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    animation: toastSlideUp-b-u32k9lko01 .3s ease;
    max-width: 90vw;
    text-align: center;
    pointer-events: none;
}

@keyframes toastSlideUp-b-u32k9lko01 {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ?? Tablet (641px+) ?? */
@media (min-width: 641px) {
    .search-bars[b-u32k9lko01]  { width: 350px; }
    .orientation-display[b-u32k9lko01],
    .orientation-display_2[b-u32k9lko01] { top: 250px; padding: 15px; min-width: 120px; font-size: 0.9rem; }
}

/* ── Bouton « retour à l'accueil » flottant sur la carte ─────────────────────
   Mobile : à gauche, juste au-dessus du bottom-sheet (--sheet-visible-top). */
.map-home-btn[b-u32k9lko01] {
    position: fixed;
    left: 12px;
    top: calc(var(--sheet-visible-top, 78vh) - 52px);
    z-index: 11100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--z-ink);
    -webkit-tap-highlight-color: transparent;
}

/* Desktop : le panneau latéral remplace le bottom-sheet. Le bouton se colle au
   bord droit du panneau (--panel-right-edge : 400px ouvert / 0 replié) et coulisse
   avec lui grâce à la même durée de transition que le panneau. */
@media (min-width: 1025px) {
    .map-home-btn[b-u32k9lko01] {
        left: calc(var(--panel-right-edge, 400px) + 14px);
        top: 18px;
        transition: left .35s cubic-bezier(.22, .9, .22, 1);
    }
}

/*  Bouton et sélecteur du calque trafic : à droite du bouton accueil, le sélecteur
    au-dessus des boutons (js/trafic-calque.js pose son habillage, ici la position). */
.map-trafic-btn[b-u32k9lko01] { left: 64px; }
.map-trafic-btn.primary[b-u32k9lko01] { background: var(--z-accent, #1a56db); color: #fff; }
.map-trafic-btn.trafic-direct[b-u32k9lko01] { color: #ea4335; }
.map-trafic-btn.primary.trafic-direct[b-u32k9lko01] { background: #ea4335; color: #fff; }

[b-u32k9lko01] #zz-trafic-selecteur,
#zz-trafic-selecteur[b-u32k9lko01] {
    top: calc(var(--sheet-visible-top, 78vh) - 52px - 12px);
    transform: translateY(-100%);
}

@media (min-width: 1025px) {
    .map-trafic-btn[b-u32k9lko01] {
        left: calc(var(--panel-right-edge, 400px) + 14px + 52px);
        top: 18px;
        transition: left .35s cubic-bezier(.22, .9, .22, 1);
    }
    [b-u32k9lko01] #zz-trafic-selecteur,
    #zz-trafic-selecteur[b-u32k9lko01] {
        top: 74px;
        left: calc(var(--panel-right-edge, 400px) + 14px);
        right: auto;
        width: 420px;
        transform: none;
    }
}

/* ── Bouton « mode de suivi » du chauffeur (course active) ──
   Miroir du bouton home, collé au bord DROIT ; le menu s'ouvre au-dessus. */
.drv-follow[b-u32k9lko01] {
    position: fixed;
    right: 12px;
    top: calc(var(--sheet-visible-top, 78vh) - 52px);
    z-index: 11100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.drv-follow-btn[b-u32k9lko01] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--z-ink);
    -webkit-tap-highlight-color: transparent;
}

.drv-follow.open .drv-follow-btn[b-u32k9lko01] {
    background: var(--z-ink);
    color: #fff;
}

.drv-follow-menu[b-u32k9lko01] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    animation: drvFollowIn-b-u32k9lko01 .16s ease-out;
}

.drv-follow-item[b-u32k9lko01] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--z-ink);
    white-space: nowrap;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.drv-follow-item span[b-u32k9lko01] { font-size: 16px; }
.drv-follow-item:hover[b-u32k9lko01] { background: rgba(0, 0, 0, .05); }
.drv-follow-item.active[b-u32k9lko01] { background: var(--z-ink); color: #fff; }

@keyframes drvFollowIn-b-u32k9lko01 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (min-width: 1025px) {
    .drv-follow[b-u32k9lko01] { right: 18px; top: 18px; }
}

/* ── HUD d'approche des panneaux (haut-centre, zone libre) ── */
.panneau-hud[b-u32k9lko01] {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: pnhIn-b-u32k9lko01 .18s ease-out;
    pointer-events: none;
}
.panneau-hud .pnh-img[b-u32k9lko01] { width: 58px; height: 58px; display: block; }
.panneau-hud .pnh-code[b-u32k9lko01] { font-weight: 800; font-size: 15px; color: var(--z-ink); padding: 6px 12px; }
@keyframes pnhIn-b-u32k9lko01 { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ══════════════════════════════════════════════════════════
   DÉSIGNATION D'UN POINT (appui long / réticule) — modèle Waze
   ══════════════════════════════════════════════════════════ */

/* Bouton d'accès au viseur — même gabarit que le bouton de suivi,
   placé juste au-dessus pour ne pas se chevaucher avec lui. */
.pick-map-btn[b-u32k9lko01] {
    position: fixed;
    right: 12px;
    top: calc(var(--sheet-visible-top, 78vh) - 52px);
    z-index: 11100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--z-ink);
    -webkit-tap-highlight-color: transparent;
}

/* Viseur central : aligné sur le centre du conteneur, comme le point
   résolu par map-pick-point.js via view.toMap(centre). */
.pick-reticle[b-u32k9lko01] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11150;
    pointer-events: none;
    width: 44px;
    height: 44px;
}

.pick-reticle[b-u32k9lko01]::before,
.pick-reticle[b-u32k9lko01]::after {
    content: '';
    position: absolute;
    background: #2979FF;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
}

.pick-reticle[b-u32k9lko01]::before {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}

.pick-reticle[b-u32k9lko01]::after {
    top: 50%;
    left: 0;
    height: 2px;
    width: 100%;
    margin-top: -1px;
}

.pick-reticle-ring[b-u32k9lko01] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #2979FF;
    background: rgba(255, 255, 255, .85);
}

/* Fiche du point visé — au-dessus de la carte d'adresses */
.pick-panel[b-u32k9lko01] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 12100;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    padding: 14px 16px;
    animation: pickPanelIn-b-u32k9lko01 .22s cubic-bezier(.2, .9, .3, 1);
}

@keyframes pickPanelIn-b-u32k9lko01 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pick-panel-head[b-u32k9lko01] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pick-panel-title[b-u32k9lko01] {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--z-ink);
    line-height: 1.3;
    word-break: break-word;
}

.pick-panel-sub[b-u32k9lko01] {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    opacity: .6;
}

.pick-panel-close[b-u32k9lko01] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .05);
    color: var(--z-ink);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pick-panel-actions[b-u32k9lko01] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.pick-action[b-u32k9lko01] {
    flex: 1;
    min-height: 46px;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}

.pick-action:active[b-u32k9lko01] { transform: scale(.97); }

.pick-action.primary[b-u32k9lko01] {
    background: #2979FF;
    color: #fff;
}

.pick-action:disabled[b-u32k9lko01] {
    opacity: .5;
    cursor: default;
}

/* Point clignotant pendant la recherche d'adresse */
.pick-resolving[b-u32k9lko01] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2979FF;
    margin-right: 6px;
    animation: pickResolving-b-u32k9lko01 1s ease-in-out infinite;
}

@keyframes pickResolving-b-u32k9lko01 {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Présentation « maquette » (route /navigation)

   La carte ne change pas ; seuls les habillages qui feraient double emploi
   avec la feuille du bas sont retirés. Une classe, pas une règle par
   élément : ce qui disparaît en maquette disparaît de la même façon.
   ════════════════════════════════════════════════════════════════════ */
.zm-hidden[b-u32k9lko01] { display: none !important; }

/* Les boutons flottants se calent juste au-dessus de la feuille, comme ailleurs
   au-dessus du bottom-sheet. La variable de référence change seulement de nom :
   --sheet-visible-top est écrite par bottom-sheet.js au fil du glissement, alors
   que la feuille maquette ne glisse pas — sa hauteur réelle est mesurée en JS et
   publiée dans --zm-sheet-h (map-core.js, zzWatchMaquetteSheet).

   Le haut de l'écran leur est refusé : il appartient à la barre de catégories. */
.zm-map .map-home-btn[b-u32k9lko01] {
    top: auto;
    bottom: calc(var(--zm-sheet-h, 40dvh) + 12px);
    left: 12px;
}

/*  ⚠️⚠️ Le bouton trafic porte AUSSI la classe .map-home-btn : sans une règle
    propre, la ligne ci-dessus lui impose left:12px — plus spécifique
    (.zm-map .classe) que le « .map-trafic-btn { left: 64px } » générique — et
    les deux boutons se superposent exactement. Le trafic, déclaré après dans le
    balisage, passait devant : le bouton RETOUR À L'ACCUEIL devenait invisible et
    inatteignable, alors que la barre de navigation du bas est masquée sur la
    carte. Plus aucune sortie depuis la page Transport (depuis le 16/09/2026,
    ajout du calque).

    Centré plutôt que posé à côté : les deux coins bas sont déjà pris — la maison
    à gauche, le suivi ou le viseur à droite — et le milieu est la seule place
    qui ne dispute rien à personne, ni à l'attribution d'ArcGIS. */
.zm-map .map-trafic-btn[b-u32k9lko01] {
    left: 50%;
    transform: translateX(-50%);
}

/*  Attribution ArcGIS (coin bas-gauche) : la vue la pose au ras de son padding
    bas, donc dans la bande laissée libre au-dessus de la feuille — précisément
    là où flottent les boutons maison et trafic. N'ayant pas de z-index, elle
    passe dessous et se retrouve illisible.

    Mesuré sur un écran de 414 px : elle arrivait 18 px plus haut que les
    boutons, hauts de 44 px. 34 px la dégagent en lui laissant 8 px de marge. */
.zm-map[b-u32k9lko01]  .esri-ui-bottom-left.esri-ui-corner,
.zm-map .esri-ui-bottom-left.esri-ui-corner[b-u32k9lko01] {
    bottom: 34px;
}

/*  Le sélecteur de trafic se cale sur la même référence que les boutons : en
    maquette la feuille ne glisse pas, --sheet-visible-top n'y est pas écrite et
    le panneau se serait ouvert à 78vh, par-dessus la carte. */
.zm-map[b-u32k9lko01]  #zz-trafic-selecteur,
.zm-map #zz-trafic-selecteur[b-u32k9lko01] {
    top: auto;
    bottom: calc(var(--zm-sheet-h, 40dvh) + 12px + 52px);
    transform: none;
}

.zm-map .drv-follow[b-u32k9lko01] {
    top: auto;
    bottom: calc(var(--zm-sheet-h, 40dvh) + 12px);
    right: 12px;
}

/* Le viseur « choisir un point » reste disponible : c'est la seule façon de
   désigner une adresse que le géocodeur ne connaît pas. Il occupe la même
   place que le bouton de suivi, dont il est l'alternative hors course. */
.zm-map .pick-map-btn[b-u32k9lko01] {
    top: auto;
    bottom: calc(var(--zm-sheet-h, 40dvh) + 12px);
    right: 12px;
}

/*  Filet de sécurité : la fiche du point visé est en z-index 12100, la feuille
    en 100000. Même effacée, rien ne doit pouvoir repasser devant elle. */
.zm-map .pick-panel[b-u32k9lko01] { z-index: 100001; }

/*  ── Choisir entre marcher et rouler ──────────────────────────────────────
    Même ancrage que la fiche du point visé : c'est la suite du même geste
    — on a désigné un point, on décide comment y aller. */
.zz-itin[b-u32k9lko01] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 100001;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    padding: 14px 16px;
    animation: pickPanelIn-b-u32k9lko01 .22s cubic-bezier(.2, .9, .3, 1);
}

.zz-itin-attente[b-u32k9lko01] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--z-ink);
}

.zz-itin-dest[b-u32k9lko01] {
    font-size: 13px;
    font-weight: 600;
    color: var(--z-ink);
    opacity: .7;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zz-itin-choix[b-u32k9lko01] {
    display: flex;
    gap: 10px;
}

/*  Les deux options côte à côte, de même largeur : la comparaison est le sujet,
    et donner plus de place à l'une reviendrait à la recommander. */
.zz-itin-opt[b-u32k9lko01] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid #e6e8ec;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.zz-itin-opt.retenu[b-u32k9lko01] {
    border-color: var(--z-accent, #006ee1);
    background: rgba(0, 110, 225, .06);
}

.zz-itin-ic[b-u32k9lko01] { font-size: 20px; line-height: 1; }

.zz-itin-txt[b-u32k9lko01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zz-itin-duree[b-u32k9lko01] {
    font-size: 16px;
    font-weight: 800;
    color: var(--z-ink);
    line-height: 1.2;
}

.zz-itin-det[b-u32k9lko01] {
    font-size: 11px;
    font-weight: 500;
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zz-itin-actions[b-u32k9lko01] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.zz-itin-annuler[b-u32k9lko01],
.zz-itin-go[b-u32k9lko01] {
    flex: 1;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.zz-itin-annuler[b-u32k9lko01] { background: #f1f3f5; color: var(--z-ink); }
.zz-itin-go[b-u32k9lko01]      { background: var(--z-accent, #006ee1); color: #fff; }

/*  ── Barre de guidage ──────────────────────────────────────────────────────
    En HAUT de l'écran, à l'inverse du panneau de choix : pendant la conduite ou
    la marche, le bas de la carte porte le trajet qui vient, et le masquer
    reviendrait à cacher ce qu'on regarde. */
.zz-guidage[b-u32k9lko01] {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    z-index: 100002;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
    animation: pickPanelIn-b-u32k9lko01 .22s cubic-bezier(.2, .9, .3, 1);
}

.zz-guidage-txt[b-u32k9lko01] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zz-guidage-eti[b-u32k9lko01] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--z-accent, #006ee1);
}

.zz-guidage-dest[b-u32k9lko01] {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  Rouge : c'est une sortie, pas une action ordinaire — et elle doit se
    trouver du premier coup d'œil, sans lâcher la route des yeux. */
.zz-guidage-stop[b-u32k9lko01] {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 0;
    border-radius: 12px;
    background: #e02b2b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/*  Visionneuse des photos d'un lieu publié. Au-dessus de tout (feuille,
    toasts) : elle est ouverte par un appui explicite et se ferme d'un appui.
    Une photo par largeur, défilement horizontal aimanté. */
.photos-lieu[b-u32k9lko01] {
    position: fixed;
    inset: 0;
    z-index: 200002;               /* feuille = 100000, toast = 200000 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: rgba(5, 12, 24, .92);
}

.photos-lieu-tete[b-u32k9lko01] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    color: #fff;
    font: 600 15px Poppins, system-ui, sans-serif;
}

.photos-lieu-nom[b-u32k9lko01] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photos-lieu-fermer[b-u32k9lko01] {
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.photos-lieu-bande[b-u32k9lko01] {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

    .photos-lieu-bande img[b-u32k9lko01] {
        flex: none;
        width: calc(100vw - 32px);
        max-width: 720px;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 10px;
        scroll-snap-align: center;
    }
/* /Pages/PharmacyPage.razor.rz.scp.css */
.ph-add-btn[b-unib9talpq] { width:32px; height:32px; background:var(--zz-yellow); border:none; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--zz-on-accent); cursor:pointer; font-weight:900; -webkit-tap-highlight-color:transparent; }
/* /Pages/RateRide.razor.rz.scp.css */
/* ============================================================
   RateRide — styles scoped (alignés sur le design system ZaZa)
   Palette : Jaune var(--zz-accent) · Noir #0A0A0A · Cartes #1E1E1E/#252525
   Les variables --zz-* viennent de wwwroot/css/zaza-theme.css (:root global).
   ============================================================ */

/* ── Conteneur de page ──
   La page peut dépasser la hauteur du viewport (récap + 2 blocs d'étoiles +
   tags + commentaire + boutons). Le scroll est géré par le conteneur parent
   `.zz-content-area` (seul scroller du layout, cf. zaza-theme.css) : on NE crée
   PAS ici un 2e scroller imbriqué (height:100% + overflow-y:auto), qui rendait
   le bas (« Passer » / « Envoyer ») inaccessible en petit écran. On se contente
   de remplir au minimum la zone visible et de laisser le contenu grandir. */
.rating-overlay[b-qi83fq7cp5] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px calc(32px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.rating-card[b-qi83fq7cp5] {
    width: 100%;
    max-width: 480px;
    background: var(--zz-card);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-r);
    padding: 24px 20px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
    animation: rate-fade-in-b-qi83fq7cp5 .25s ease both;
}

@keyframes rate-fade-in-b-qi83fq7cp5 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── En-tête ── */
.rating-header[b-qi83fq7cp5] {
    text-align: center;
    margin-bottom: 20px;
}

.header-icon[b-qi83fq7cp5] {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 6px;
}

.rating-header h2[b-qi83fq7cp5] {
    font-size: 22px;
    font-weight: 700;
    color: var(--zz-white);
    margin: 0;
}

.header-sub[b-qi83fq7cp5] {
    font-size: 13px;
    color: var(--zz-dim);
    margin: 4px 0 0;
}

/* ── Récapitulatif course ── */
.ride-summary[b-qi83fq7cp5] {
    background: var(--zz-card2);
    border-radius: var(--zz-r-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.summary-row[b-qi83fq7cp5] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.summary-item[b-qi83fq7cp5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.summary-icon[b-qi83fq7cp5] {
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

.summary-label[b-qi83fq7cp5] {
    font-size: 11px;
    color: var(--zz-dim);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.summary-value[b-qi83fq7cp5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--zz-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.summary-value.highlight[b-qi83fq7cp5] {
    color: var(--zz-yellow);
    font-size: 16px;
}

/* ── Bandeau chauffeur ── */
.client-info-bar[b-qi83fq7cp5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--zz-border);
}

.client-avatar[b-qi83fq7cp5] {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--zz-yellow);
    color: var(--zz-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
}

.driver-avatar[b-qi83fq7cp5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.client-name[b-qi83fq7cp5] {
    font-size: 15px;
    font-weight: 600;
    color: var(--zz-white);
}

/* ── Sections de notation ── */
.rating-section[b-qi83fq7cp5] {
    margin-bottom: 20px;
}

.section-label[b-qi83fq7cp5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--zz-white);
    margin-bottom: 10px;
}

.stars-container[b-qi83fq7cp5] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.star-btn[b-qi83fq7cp5] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: transform .12s ease;
}

.star-btn:hover[b-qi83fq7cp5],
.star-btn.hover[b-qi83fq7cp5],
.star-btn.active[b-qi83fq7cp5] {
    transform: scale(1.12);
}

.star-icon[b-qi83fq7cp5] {
    font-size: 38px;
    line-height: 1;
    color: var(--zz-muted);
    transition: color .15s ease;
}

.star-btn.active .star-icon[b-qi83fq7cp5],
.star-btn.hover .star-icon[b-qi83fq7cp5] {
    color: var(--zz-yellow);
    text-shadow: 0 0 12px rgba(var(--zz-accent-rgb), .35);
}

.rating-label-text[b-qi83fq7cp5] {
    text-align: center;
    font-size: 13px;
    color: var(--zz-dim);
    margin-top: 6px;
    min-height: 18px;
}

/* ── Tags rapides ── */
.tags-container[b-qi83fq7cp5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.tag-chip[b-qi83fq7cp5] {
    background: var(--zz-card2);
    border: 1px solid var(--zz-border);
    color: var(--zz-dim);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.tag-chip:hover[b-qi83fq7cp5] {
    border-color: var(--zz-yellow);
    color: var(--zz-white);
}

.tag-chip.selected[b-qi83fq7cp5] {
    background: var(--zz-yellow);
    border-color: var(--zz-yellow);
    color: var(--zz-on-accent);
    font-weight: 600;
}

/* ── Commentaire ── */
.comment-input[b-qi83fq7cp5] {
    width: 100%;
    background: var(--zz-card2);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-r-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--zz-white);
    resize: vertical;
    min-height: 64px;
    transition: border-color .2s, box-shadow .2s;
}

.comment-input[b-qi83fq7cp5]::placeholder {
    color: var(--zz-muted);
}

.comment-input:focus[b-qi83fq7cp5] {
    outline: none;
    border-color: var(--zz-yellow);
    box-shadow: 0 0 0 3px var(--zz-yellow-dim);
}

.char-count[b-qi83fq7cp5] {
    text-align: right;
    font-size: 12px;
    color: var(--zz-muted);
    margin-top: 4px;
}

/* ── Feedback erreur ── */
.feedback[b-qi83fq7cp5] {
    text-align: center;
    padding: 10px;
    border-radius: var(--zz-r-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

.feedback.error[b-qi83fq7cp5] {
    background: rgba(239, 68, 68, .14);
    color: #FCA5A5;
}

/* ── Barre d'actions ── */
.action-bar[b-qi83fq7cp5] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-skip[b-qi83fq7cp5] {
    flex: 0 0 auto;
    padding: 13px 18px;
    border: 1px solid var(--zz-border);
    border-radius: 12px;
    background: transparent;
    color: var(--zz-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.btn-skip:hover:not(:disabled)[b-qi83fq7cp5] {
    background: var(--zz-card2);
    color: var(--zz-white);
}

.btn-submit[b-qi83fq7cp5] {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--zz-yellow);
    color: var(--zz-on-accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s, transform .1s, background .2s;
}

.btn-submit:hover:not(:disabled)[b-qi83fq7cp5] {
    background: var(--zz-yellow-dark);
    transform: translateY(-1px);
}

.btn-submit:disabled[b-qi83fq7cp5],
.btn-submit.disabled[b-qi83fq7cp5] {
    opacity: 0.45;
    cursor: not-allowed;
}

.spinner[b-qi83fq7cp5] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 0, 0, 0.25);
    border-top-color: var(--zz-on-accent);
    border-radius: 50%;
    animation: rate-spin-b-qi83fq7cp5 .6s linear infinite;
}

@keyframes rate-spin-b-qi83fq7cp5 {
    to { transform: rotate(360deg); }
}

/* ── Confirmation / état standalone ── */
.confirmation-section[b-qi83fq7cp5] {
    text-align: center;
    padding: 16px 4px 8px;
}

.confirm-icon[b-qi83fq7cp5] {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 10px;
}

/* Le taxi de l'accueil à la place de l'emoji : même taille apparente, mais
   l'illustration étant détourée, elle se règle en hauteur d'image. */
.confirm-icon-img[b-qi83fq7cp5] {
    height: 58px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.confirmation-section h3[b-qi83fq7cp5] {
    font-size: 19px;
    font-weight: 700;
    color: var(--zz-white);
    margin: 0 0 6px;
}

.confirmation-section p[b-qi83fq7cp5] {
    font-size: 14px;
    color: var(--zz-dim);
    margin: 0 0 16px;
}

.confirm-stars[b-qi83fq7cp5] {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
}

.confirm-star[b-qi83fq7cp5] {
    font-size: 28px;
    color: var(--zz-muted);
}

.confirm-star.filled[b-qi83fq7cp5] {
    color: var(--zz-yellow);
}

.btn-done[b-qi83fq7cp5] {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--zz-yellow);
    color: var(--zz-on-accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .1s;
}

.btn-done:hover[b-qi83fq7cp5] {
    background: var(--zz-yellow-dark);
    transform: translateY(-1px);
}

/* ── Responsive (tablette / desktop) ── */
@media (min-width: 641px) {
    .rating-card[b-qi83fq7cp5] {
        padding: 32px 28px;
    }

    .rating-header h2[b-qi83fq7cp5] {
        font-size: 26px;
    }

    .star-icon[b-qi83fq7cp5] {
        font-size: 42px;
    }
}
/* /Pages/RideHistory.razor.rz.scp.css */
.history-container[b-skbgpethth] {
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 2rem;
    min-height: 100vh;
    background: #f8f9fa;
}

/* ── Header ── */
.history-header[b-skbgpethth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.history-title[b-skbgpethth] {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-back[b-skbgpethth], .btn-refresh[b-skbgpethth] {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.btn-back:hover[b-skbgpethth], .btn-refresh:hover[b-skbgpethth] {
    background: rgba(255,255,255,0.28);
}

.btn-refresh:disabled[b-skbgpethth] {
    opacity: 0.5;
    cursor: default;
}

/* ── Loading / Empty ── */
.loading-state[b-skbgpethth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.empty-state[b-skbgpethth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: #adb5bd;
}

.empty-icon[b-skbgpethth] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.empty-text[b-skbgpethth] {
    font-size: 1rem;
    margin: 0;
}

/* ── Summary bar ── */
.rides-summary[b-skbgpethth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    color: #6c757d;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

.total-depense[b-skbgpethth] {
    font-weight: 600;
    color: #0d6efd;
}

/* ── Ride cards ── */
.rides-list[b-skbgpethth] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ride-card[b-skbgpethth] {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}

.ride-card:hover[b-skbgpethth] {
    background: #f8f9ff;
}

.ride-card.cancelled[b-skbgpethth] {
    opacity: 0.65;
}

/* ── Avatar ── */
.driver-avatar[b-skbgpethth] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.driver-avatar-placeholder[b-skbgpethth] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── Card body ── */
.ride-card-body[b-skbgpethth] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ride-top-row[b-skbgpethth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.ride-date[b-skbgpethth] {
    font-size: 0.78rem;
    color: #6c757d;
}

.ride-status-badge[b-skbgpethth] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.status-done[b-skbgpethth]      { background: #d1fae5; color: #065f46; }
.status-cancelled[b-skbgpethth] { background: #fee2e2; color: #991b1b; }
.status-other[b-skbgpethth]     { background: #e0e7ff; color: #3730a3; }

.ride-destination[b-skbgpethth] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ride-driver[b-skbgpethth] {
    font-size: 0.8rem;
    color: #6c757d;
}

.ride-bottom-row[b-skbgpethth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1rem;
}

.ride-meta[b-skbgpethth] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.ride-amount[b-skbgpethth] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0d6efd;
}

/* ── Stars ── */
.ride-rating[b-skbgpethth] {
    display: flex;
    gap: 2px;
    margin-top: 0.15rem;
}

.star-icon[b-skbgpethth] {
    font-size: 0.75rem;
    color: #fbbf24;
}

/* ── Spin animation ── */
@keyframes spin-b-skbgpethth {
    to { transform: rotate(360deg); }
}

.spin[b-skbgpethth] {
    display: inline-block;
    animation: spin-b-skbgpethth 0.8s linear infinite;
}

/* ── Dark theme ── */
:global(.dark-theme) .history-container[b-skbgpethth] { background: var(--z-ink); }
:global(.dark-theme) .rides-summary[b-skbgpethth]     { background: #16213e; color: #9ca3af; border-color: #2d3748; }
:global(.dark-theme) .ride-card[b-skbgpethth]         { background: #16213e; border-color: #2d3748; color: #e5e7eb; }
:global(.dark-theme) .ride-card:hover[b-skbgpethth]   { background: #1e2a4a; }
:global(.dark-theme) .ride-destination[b-skbgpethth]  { color: #f3f4f6; }
:global(.dark-theme) .driver-avatar-placeholder[b-skbgpethth] { background: #2d3748; color: #6b7280; }
/* /Pages/SuiviCourse.razor.rz.scp.css */
.tracking-layout-root[b-7amidxf0jo] {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.tracking-page[b-7amidxf0jo] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: #f0f2f5;
    font-family: var(--bs-font-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* ── Chargement ── */
.tracking-loading[b-7amidxf0jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: #666;
    font-size: 0.95rem;
}

/* ── Erreur ── */
.tracking-error[b-7amidxf0jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #c62828;
    padding: 32px;
    text-align: center;
}

.tracking-error p[b-7amidxf0jo] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.tracking-error small[b-7amidxf0jo] {
    color: #888;
    font-size: 0.85rem;
}

/* ── En-tête ── */
.tracking-header[b-7amidxf0jo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    flex-shrink: 0;
}

.tracking-logo[b-7amidxf0jo] {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--z-blue);
    letter-spacing: 1.5px;
}

/* ── Badge statut ── */
.tracking-status[b-7amidxf0jo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

.tracking-status.status-pending[b-7amidxf0jo] {
    background: #fff8e1;
    color: #f57f17;
}

.tracking-status.status-inprogress[b-7amidxf0jo] {
    background: #e3f2fd;
    color: #1565c0;
}

.tracking-status.status-completed[b-7amidxf0jo] {
    background: #e8f5e9;
    color: #2e7d32;
}

.tracking-status.status-cancelled[b-7amidxf0jo] {
    background: #fce4ec;
    color: #c62828;
}

.tracking-status-dot[b-7amidxf0jo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: tracking-pulse-b-7amidxf0jo 1.8s ease-in-out infinite;
}

.status-completed .tracking-status-dot[b-7amidxf0jo],
.status-cancelled .tracking-status-dot[b-7amidxf0jo] {
    animation: none;
}

@keyframes tracking-pulse-b-7amidxf0jo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

/* ── Carte ── */
.tracking-map-container[b-7amidxf0jo] {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: #e0e0e0;
}

/* ── Panneau infos ── */
.tracking-info-panel[b-7amidxf0jo] {
    background: white;
    padding: 14px 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.tracking-info-row[b-7amidxf0jo] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #2c2c2c;
}

.tracking-driver-icon[b-7amidxf0jo] {
    color: var(--z-blue);
    font-size: 1.1rem;
}

.tracking-dest-icon[b-7amidxf0jo] {
    color: #EA4335;
    font-size: 1rem;
}

.tracking-live-icon[b-7amidxf0jo] {
    color: var(--z-green);
    font-size: 1rem;
}

.tracking-info-time[b-7amidxf0jo] {
    color: #888;
    font-size: 0.8rem;
}
/* /Pages/SuiviLivraisonPage.razor.rz.scp.css */
/* Suivi de livraison — couleurs prises aux tokens de charte uniquement. */

/* --- Étapes ------------------------------------------------------------- */
.suivi-etapes[b-0di8qj7sln] { display: flex; flex-direction: column; gap: 0; }

.suivi-etape[b-0di8qj7sln] {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    color: var(--zz-muted);
    position: relative;
}

/* Trait de liaison entre deux pastilles : il matérialise la progression
   plutôt que de laisser quatre puces flotter sans lien. */
.suivi-etape:not(:last-child)[b-0di8qj7sln]::before {
    content: "";
    position: absolute;
    left: 5px; top: 22px; bottom: -6px;
    width: 2px;
    background: var(--zz-border);
}

.suivi-etape.faite[b-0di8qj7sln]::before { background: var(--zz-accent); }

.suivi-pastille[b-0di8qj7sln] {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--zz-border);
    flex: none; z-index: 1;
}

.suivi-etape.faite .suivi-pastille[b-0di8qj7sln] { background: var(--zz-accent); }
.suivi-etape.faite .suivi-label[b-0di8qj7sln] { color: var(--zz-white); font-weight: 600; }

/* --- Code de remise ----------------------------------------------------- */
/* Mis en avant : c'est l'information que le client doit retrouver
   instantanément quand le livreur sonne. */
.suivi-code[b-0di8qj7sln] { padding: 16px; text-align: center; }

.suivi-code-lbl[b-0di8qj7sln] {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--zz-muted);
}

.suivi-code-val[b-0di8qj7sln] {
    font-size: 34px; font-weight: 800; letter-spacing: .22em;
    color: var(--zz-accent);
    margin: 6px 0 8px;
    font-variant-numeric: tabular-nums;
}

.suivi-code-aide[b-0di8qj7sln] {
    font-size: 11.5px; color: var(--zz-dim); line-height: 1.45;
}

/* --- Carte -------------------------------------------------------------- */
.suivi-carte[b-0di8qj7sln] {
    position: relative;
    height: 240px;
    border-radius: var(--zz-r);
    overflow: hidden;                 /* sans quoi la carte déborde des coins */
    border: 1px solid var(--zz-border);
}

.suivi-carte #livraison-map[b-0di8qj7sln] { width: 100%; height: 100%; }

/* Bandeau posé en BAS de la carte tant qu'aucune position n'est arrivée.
   Volontairement pas un voile plein : la carte reste lisible, avec le point
   de livraison — c'est justement ce que le client peut vérifier en attendant
   que le porteur se manifeste. */
.suivi-carte-info[b-0di8qj7sln] {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-start; gap: 7px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, .72);
    color: #fff; font-size: 11.5px; line-height: 1.4;
}

.suivi-carte-info .bi[b-0di8qj7sln] { flex: none; margin-top: 1px; }

/* --- Interlocuteur ------------------------------------------------------ */
/* Le livreur est la personne à joindre : bloc dédié, pas une ligne parmi
   d'autres. Un client qui attend sa bouteille cherche ce bouton, pas une
   fiche de renseignements. */
.suivi-contact[b-0di8qj7sln] {
    display: flex; align-items: center;
    gap: 10px; padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--zz-border);
}

/* Avatar : photo, ou initiales sur fond neutre. Même gabarit dans les deux
   cas, pour que la mise en page ne bouge pas selon qu'une photo existe. */
.suivi-avatar[b-0di8qj7sln] {
    width: 44px; height: 44px; flex: none;
    border-radius: 50%; object-fit: cover;
    background: var(--zz-card2);
}

.suivi-avatar-vide[b-0di8qj7sln] {
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--zz-dim);
}

.suivi-contact-qui[b-0di8qj7sln] { min-width: 0; flex: 1; }
.suivi-contact-nom[b-0di8qj7sln] { font-size: 15px; font-weight: 700; }
.suivi-contact-role[b-0di8qj7sln] { font-size: 11.5px; color: var(--zz-muted); }

.suivi-contact-actions[b-0di8qj7sln] { display: flex; gap: 8px; flex: none; }

/* Boutons ronds à icône : 40 px reste au-dessus du minimum tactile
   confortable, tout en laissant la place à la photo et au nom. */
.suivi-appel[b-0di8qj7sln], .suivi-wa[b-0di8qj7sln] {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    color: #fff; font-size: 16px; text-decoration: none;
}

.suivi-appel[b-0di8qj7sln] { background: var(--z-green); }

/* Vert WhatsApp officiel (#25D366) : aucune autre couleur ne dit
   « WhatsApp » aussi vite, y compris pour qui ne lit pas l'étiquette. */
.suivi-wa[b-0di8qj7sln] { background: #25D366; }

.suivi-appel-lien[b-0di8qj7sln] {
    margin-left: 8px; color: var(--zz-accent);
    font-size: 12px; font-weight: 600; text-decoration: underline;
}

.suivi-wa-lien[b-0di8qj7sln] { color: #25D366; }

/* --- Annulation --------------------------------------------------------- */
.suivi-annul[b-0di8qj7sln] { color: var(--zz-muted); }

.suivi-confirm[b-0di8qj7sln] { padding: 16px; }
.suivi-confirm-t[b-0di8qj7sln] { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.suivi-confirm-s[b-0di8qj7sln] { font-size: 12.5px; color: var(--zz-dim); line-height: 1.45; margin-bottom: 12px; }
.suivi-confirm-btns[b-0di8qj7sln] { display: flex; gap: 8px; }
.suivi-confirm-btns > *[b-0di8qj7sln] { flex: 1; }

/* Rouge : l'action est destructrice et sans retour. */
.suivi-btn-danger[b-0di8qj7sln] { background: #EF4444; color: #fff; border: 0; }

/* --- Lignes de détail --------------------------------------------------- */
.suivi-ligne[b-0di8qj7sln] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 6px 0;
    font-size: 13px;
}

.suivi-ligne > span[b-0di8qj7sln] { color: var(--zz-muted); flex: none; }
.suivi-ligne > b[b-0di8qj7sln] { text-align: right; color: var(--zz-white); font-weight: 600; }

.suivi-total[b-0di8qj7sln] {
    border-top: 1px solid var(--zz-border);
    margin-top: 6px; padding-top: 10px;
}

.suivi-total > b[b-0di8qj7sln] { font-size: 15px; color: var(--zz-accent); }
/* /Pages/UrgencesPage.razor.rz.scp.css */
.urg-header[b-lqe8alb4oy] { display:flex; align-items:center; gap:14px; padding:16px 16px 20px; }
.urg-badge[b-lqe8alb4oy] { width:60px; height:60px; background:rgba(239,68,68,.15); border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px solid rgba(239,68,68,.3); }
/* 38 px dans un badge de 60 : l'illustration est détourée, elle occupe moins que
   le corps de l'emoji qu'elle remplace. */
.urg-badge-ico[b-lqe8alb4oy] { height:38px; width:auto; object-fit:contain; display:block; }
.urg-title[b-lqe8alb4oy] { font-size:22px; font-weight:900; color:#EF4444; }
.urg-sub[b-lqe8alb4oy] { font-size:13px; color:var(--zz-dim); margin-top:2px; }
/* /Pages/VerificationGps.razor.rz.scp.css */
/*  Boîte d'information sur la géolocalisation.

    Même géométrie et mêmes jetons que la boîte « fin de session »
    (MainLayout.razor.css) et que l'accusé de réception : trois boîtes
    modales qui ne se ressembleraient pas donneraient l'impression de venir
    d'applications différentes.

    z-index sous l'accusé de réception : un mouvement d'argent passe avant
    un réglage de confort. */

.zz-gps-fond[b-r55xw0fed8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2147482996;
}

.zz-gps[b-r55xw0fed8] {
    position: fixed;
    z-index: 2147482997;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 40px));
    padding: 20px;
    border-radius: 16px;
    background: var(--zz-card, #fff);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

.zz-gps-tete[b-r55xw0fed8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.zz-gps-ico[b-r55xw0fed8] {
    font-size: 26px;
    color: var(--zz-accent, #0A4FC4);
    flex-shrink: 0;
}

.zz-gps-titre[b-r55xw0fed8] {
    font-size: 18px;
    font-weight: 700;
    color: var(--zz-white, #0E2038);
}

.zz-gps-texte[b-r55xw0fed8] {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--zz-dim, #46586F);
}

.zz-gps-actions[b-r55xw0fed8] {
    display: flex;
    gap: 10px;
}

.zz-gps-btn[b-r55xw0fed8] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--zz-accent, #0A4FC4);
    color: var(--zz-on-accent, #fff);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .zz-gps-btn:hover[b-r55xw0fed8] { filter: brightness(1.07); }
    .zz-gps-btn:active[b-r55xw0fed8] { transform: scale(.98); }
    .zz-gps-btn:disabled[b-r55xw0fed8] { opacity: .6; cursor: default; }

/* Sortie discrète : elle ne doit pas rivaliser avec l'action proposée. */
.zz-gps-btn-plat[b-r55xw0fed8] {
    background: transparent;
    color: var(--zz-dim, #46586F);
    border: 1px solid var(--zz-border, #D7DEE9);
}

    .zz-gps-btn-plat:hover[b-r55xw0fed8] { filter: none; background: var(--zz-card2, #F2F5F9); }