/* Dock de navigation mobile SecuFlow — voir secuflow/mobile_dock.py (contenu par rôle)
   et templates/secuflow/partials/mobile_dock.html (balisage). Mobile/tablette
   uniquement (< 992px) : sur desktop, le menu classique reste seul. */

:root {
    --sf-dock-green: var(--sf-brand-800, #1B6535);
    --sf-dock-green-2: var(--sf-brand-700, #2d8659);
    --sf-dock-green-soft: var(--sf-brand-100, #e3f1e8);
    --sf-dock-gold: var(--sf-accent-500, #D4AF37);
    --sf-dock-gold-2: var(--sf-accent-300, #f0cf5a);
    --sf-dock-ink: var(--sf-brand-900, #12301f);
    --sf-dock-muted: #7b8a81;
    --sf-dock-h: 68px;
    --sf-dock-gap: 10px;
    --sf-dock-safe: env(safe-area-inset-bottom, 0px);
    --sf-dock-space: calc(var(--sf-dock-h) + var(--sf-dock-gap) + var(--sf-dock-safe) + 18px);
}

.sf-dock, .sf-sheet, .sf-appbar { display: none; }

@media (max-width: 991.98px) {

    /* ---- Place réservée en bas de page + boutons flottants remontés ---------- */
    body.has-sf-dock { padding-bottom: var(--sf-dock-space) !important; }
    body.has-sf-dock #fab-refresh,
    body.has-sf-dock #fab-sos {
        bottom: calc(var(--sf-dock-space) + 6px) !important;
        transition: bottom .35s cubic-bezier(.2, .8, .2, 1), transform .18s;
    }
    body.has-sf-dock.sf-dock-away #fab-refresh,
    body.has-sf-dock.sf-dock-away #fab-sos { bottom: calc(1.5rem + var(--sf-dock-safe)) !important; }
    /* Barre d'appli des visiteurs (non connectés) : recherche d'agence et Connexion. */
    .sf-appbar-public { flex-wrap: wrap; }
    .sf-appbar-login { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px;
        font-weight: 800; font-size: .86rem; text-decoration: none; color: #fff !important;
        background: linear-gradient(135deg, var(--sf-brand-800, #1b6535), var(--sf-brand-700, #2d8659)); box-shadow: 0 6px 14px -8px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .9); }
    .sf-appbar-search { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 14px; border-radius: 16px;
        background: #f1f5f2; border: 1px solid var(--sf-brand-100, #e8f5e9); }
    .sf-appbar-search[hidden] { display: none; }
    .sf-appbar-search i { color: var(--sf-brand-700, #2d8659); }
    .sf-appbar-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; outline: none; padding: 6px 0; }
    .sf-appbar-search button { border: 0; border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: .84rem; color: #fff;
        background: var(--sf-brand-800, #1b6535); }

    /* Bandeau « alerte SOS active » : sous la barre d'appli, dans le flux (mobile-dock.js). */
    .sf-appbar ~ #sos-banner.active, .sf-appbar + #sos-banner.active {
        position: sticky; top: var(--sf-appbar-h, 64px); z-index: 1034; display: flex; align-items: center; gap: 10px;
        margin: 0; padding: 9px 12px 9px 14px; text-align: left; font-size: .86rem; font-weight: 700; cursor: pointer;
        background: linear-gradient(135deg, #dc2626, #991b1b); box-shadow: 0 8px 18px -10px rgba(153, 27, 27, .9);
    }
    .sf-appbar + #sos-banner.active > i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin: 0 !important;
        background: rgba(255, 255, 255, .18); animation: sf-sos-dot 1.4s ease-out infinite; }
    .sf-appbar + #sos-banner.active #sos-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sf-appbar + #sos-banner.active a { flex: 0 0 auto; margin: 0; padding: 6px 12px; border-radius: 999px; background: #fff; color: #b91c1c !important;
        text-decoration: none; font-weight: 900; font-size: .8rem; }
    @keyframes sf-sos-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }

    /* SOS : dans la barre d'appli (pastille à appui maintenu), plus en bouton flottant. */
    .sf-appbar ~ * #fab-sos, body:has(.sf-appbar) #fab-sos { display: none !important; }
    .sf-appbar-sos {
        position: relative; flex: 0 0 auto; height: 40px; min-width: 58px; padding: 0 12px; border: 0; border-radius: 999px;
        display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
        -webkit-touch-callout: none; color: #fff; font-weight: 900; font-size: .86rem; letter-spacing: .06em;
        background: linear-gradient(135deg, #e53935, #b71c1c); box-shadow: 0 6px 14px -6px rgba(183, 28, 28, .8);
    }
    body:not(:has(#sos-confirm-overlay)) .sf-appbar-sos { display: none; }  /* page sans le script SOS */
    .sf-appbar-sos-label { position: relative; z-index: 1; }
    .sf-appbar-sos-ring { position: absolute; inset: 0; border-radius: inherit;
        background: conic-gradient(#fff3 calc(var(--sos-p, 0) * 1%), transparent 0); }
    .sf-appbar-sos::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(229, 57, 53, .55);
        animation: sf-sos-soft 2.4s ease-out infinite; pointer-events: none; }
    .sf-appbar-sos.is-holding { transform: scale(1.06); }
    .sf-appbar-sos.is-holding .sf-appbar-sos-ring { background: conic-gradient(#ffffffaa calc(var(--sos-p, 0) * 1%), #0000 0); }
    .sf-sos-hint { position: fixed; z-index: 2600; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 12px; max-width: 240px;
        padding: 9px 12px; border-radius: 12px; background: #1f2937; color: #fff; font-size: .82rem; font-weight: 700;
        box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; pointer-events: none; }
    .sf-sos-hint.is-on { opacity: 1; transform: none; }
    @keyframes sf-sos-soft { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); } }
    @media (prefers-reduced-motion: reduce) { .sf-appbar-sos::after { animation: none; } }

    /* « Mon espace » / « Administration » du menu hamburger : remplacés par le dock. */
    body.has-sf-dock li:has(> #clientPortalMenu, > #agentPortalMenu, > #supervisorMenu,
        > #gestionnaireMenu, > #abonneMenu, > #adminMenu),
    body.has-sf-dock #clientPortalMenu, body.has-sf-dock #agentPortalMenu,
    body.has-sf-dock #supervisorMenu, body.has-sf-dock #gestionnaireMenu,
    body.has-sf-dock #abonneMenu, body.has-sf-dock #adminMenu { display: none !important; }

    /* ---- Barre d'appli (partials/mobile_appbar.html) --------------------------- */
    /* Les trois bandeaux historiques (≈ 600 px sur un iPhone) laissent la place à une
       seule barre compacte. Masqués en CSS pur (sélecteur de frère suivant) : aucun
       clignotement au chargement, et leur JS continue de tourner en coulisse. */
    .sf-appbar ~ .top-info-bar,
    .sf-appbar ~ .brand-section,
    .sf-appbar ~ .main-navbar { display: none !important; }
    .sf-appbar {
        position: sticky;
        top: 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        backdrop-filter: blur(18px) saturate(1.6);
        border-bottom: 1px solid rgba(var(--sf-brand-900-rgb, 15, 61, 32), .08);
        box-shadow: 0 6px 20px -14px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .5);
        transition: transform .38s cubic-bezier(.2, .8, .2, 1);
    }
    body.sf-dock-away .sf-appbar { transform: translateY(-110%); }
    /* Sous la barre compacte, les marges empilées du haut de page (prévues pour l'ancien
       en-tête) laissaient ~70 px vides : resserrées sur mobile uniquement. */
    .sf-appbar ~ .sf-main > .sf-content { padding-top: 12px; }
    .sf-appbar ~ .sf-main > .sf-content > .mt-4:first-child { margin-top: 0 !important; }
    .sf-appbar-brand {
        flex: 0 0 auto;
        width: 40px; height: 40px; border-radius: 13px;
        display: grid; place-items: center;
        background: linear-gradient(145deg, #e9f5ec, #fff);
        box-shadow: inset 0 0 0 1px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .12);
    }
    .sf-appbar-brand img { width: 30px; height: 30px; object-fit: contain; }
    .sf-appbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; padding-left: 4px; }
    .sf-appbar-hello { font-size: .72rem; font-weight: 700; color: var(--sf-dock-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-appbar-page { font-size: 1.06rem; font-weight: 800; color: var(--sf-dock-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-appbar-btn {
        position: relative;
        flex: 0 0 auto;
        width: 40px; height: 40px; border-radius: 50%;
        display: grid; place-items: center;
        border: 0;
        background: #f1f5f2;
        color: var(--sf-dock-ink) !important;
        font-size: 1rem;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s, background .2s;
    }
    .sf-appbar-btn:active { transform: scale(.9); background: var(--sf-dock-green-soft); }
    .sf-appbar-badge {
        position: absolute; top: -3px; right: -4px;
        min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
        background: #e5354b; color: #fff; border: 2px solid #fff;
        font-size: .62rem; font-weight: 800; line-height: 15px; text-align: center;
        animation: sf-dock-badge-pop .5s cubic-bezier(.3, 1.8, .5, 1) both;
    }
    .sf-appbar-badge[hidden] { display: none; }
    .sf-appbar-badge.is-inline { position: static; border: 0; margin-right: 6px; line-height: 19px; }
    .sf-appbar-avatar {
        flex: 0 0 auto;
        width: 40px; height: 40px; border-radius: 50%;
        border: 0;
        display: grid; place-items: center;
        font-weight: 800; font-size: .86rem; color: var(--sf-accent-ink, #3a2c00);
        background: radial-gradient(circle at 30% 25%, var(--sf-accent-100, #fff3b8), var(--sf-dock-gold-2) 40%, var(--sf-dock-gold));
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .35), 0 6px 14px -6px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .8);
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s;
    }
    .sf-appbar-avatar:active, .sf-appbar-avatar.is-open { transform: scale(.92); }

    /* ---- Feuille « Mon compte » -------------------------------------------------- */
    .sf-account-card {
        position: relative;
        display: flex; align-items: center; gap: 14px;
        margin-bottom: 18px; padding: 18px 16px;
        border-radius: 24px;
        color: #fff;
        background:
            radial-gradient(circle at 100% 0%, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .38), transparent 55%),
            linear-gradient(135deg, var(--sf-brand-900, #0f3d20), var(--sf-dock-green) 55%, var(--sf-dock-green-2));
        box-shadow: 0 16px 34px -16px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .75);
        overflow: hidden;
    }
    .sf-account-card::after {
        content: "";
        position: absolute; right: -40px; bottom: -60px;
        width: 160px; height: 160px; border-radius: 50%;
        border: 22px solid rgba(255, 255, 255, .06);
    }
    .sf-account-avatar {
        flex: 0 0 auto;
        width: 60px; height: 60px; border-radius: 20px;
        display: grid; place-items: center;
        font-weight: 800; font-size: 1.3rem; color: var(--sf-accent-ink, #3a2c00);
        background: radial-gradient(circle at 30% 25%, var(--sf-accent-100, #fff3b8), var(--sf-dock-gold-2) 35%, var(--sf-dock-gold));
        box-shadow: 0 10px 22px -8px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .9);
    }
    .sf-account-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
    .sf-account-name { font-weight: 800; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-account-email { font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-account-role {
        align-self: flex-start;
        display: inline-flex; align-items: center; gap: 6px;
        margin-top: 3px; padding: 3px 10px; border-radius: 999px;
        font-size: .72rem; font-weight: 800;
        background: rgba(255, 255, 255, .16);
    }
    .sf-account-role i { font-size: .42rem; color: #6fe3a0; }
    .sf-account-card .sf-sheet-close { position: relative; z-index: 1; background: rgba(255, 255, 255, .16); color: #fff; align-self: flex-start; }
    .sf-account-sheet .sf-menu-quick-head { margin: 18px 2px 9px; }
    .sf-account-sheet .sf-menu-hits + .sf-menu-quick-head { margin-top: 20px; }
    .sf-menu-hit[hidden] { display: none; }
    button.sf-menu-hit { width: 100%; border: 0; background: none; text-align: left; font: inherit; }
    .sf-account-chevron { color: #b6c4ba; font-size: .8rem; }
    .sf-menu-hit-icon.is-gold { color: var(--sf-accent-700, #9a7410); background: var(--sf-accent-100, #fbf1d3); }
    .sf-menu-hit-icon.is-blue { color: #2563eb; background: #e3ecfd; }
    .sf-menu-hit-icon.is-teal { color: #0d9488; background: #ddf4f1; }
    .sf-menu-hit-icon.is-slate { color: #475569; background: #e8edf3; }
    .sf-switch {
        flex: 0 0 auto;
        position: relative;
        width: 48px; height: 28px; border-radius: 999px;
        background: #d5ddd8;
        transition: background .25s;
    }
    .sf-switch::after {
        content: "";
        position: absolute; top: 3px; left: 3px;
        width: 22px; height: 22px; border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
        transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
    }
    .sf-account-push.is-on .sf-switch { background: var(--sf-dock-green-2); }
    .sf-account-push.is-on .sf-switch::after { transform: translateX(20px); }
    .sf-account-logout {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        margin-top: 20px; padding: 14px;
        border-radius: 18px;
        font-weight: 800; font-size: .95rem;
        color: #c62839 !important; text-decoration: none !important;
        background: #fdecee;
        border: 1px solid #f8d3d8;
        transition: background .25s, color .25s, transform .15s;
    }
    .sf-account-logout:active { transform: scale(.97); }
    .sf-account-logout.is-armed {
        color: #fff !important;
        background: linear-gradient(135deg, #e5354b, #b3001b);
        border-color: transparent;
        animation: sf-dock-nudge 1.4s ease-in-out infinite;
    }


    /* ---- La barre ------------------------------------------------------------ */
    .sf-dock {
        display: block;
        position: fixed;
        left: var(--sf-dock-gap);
        right: var(--sf-dock-gap);
        bottom: calc(var(--sf-dock-gap) + var(--sf-dock-safe));
        z-index: 1040;
        transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s;
    }
    .sf-dock.is-away { transform: translateY(calc(100% + var(--sf-dock-gap) + var(--sf-dock-safe) + 30px)); opacity: 0; }

    .sf-dock-bar {
        position: relative;
        display: flex;
        align-items: stretch;
        height: var(--sf-dock-h);
        max-width: 560px;
        margin: 0 auto;
        padding: 0 6px;
        border-radius: 26px;
        background: rgba(255, 255, 255, .84);
        -webkit-backdrop-filter: blur(20px) saturate(1.7);
        backdrop-filter: blur(20px) saturate(1.7);
        border: 1px solid rgba(255, 255, 255, .9);
        box-shadow:
            0 18px 40px -12px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .35),
            0 4px 14px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .10),
            inset 0 1px 0 rgba(255, 255, 255, .8);
    }
    /* Entrée animée une seule fois par session (classe posée par le partial), pas à
       chaque page : sinon la barre « sauterait » à chaque navigation. */
    .sf-dock.is-entering .sf-dock-bar { animation: sf-dock-rise .6s cubic-bezier(.2, .9, .25, 1.15) both; }

    .sf-dock-side { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; }

    /* ---- Onglets --------------------------------------------------------------- */
    .sf-dock-tab {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--sf-dock-muted) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        position: relative;
    }
    .sf-dock-icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 46px;
        height: 30px;
        border-radius: 999px;
        font-size: 1.12rem;
        transition: background .3s, color .3s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
    }
    .sf-dock-label {
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sf-dock-tab:active .sf-dock-icon { transform: scale(.86); }

    .sf-dock-tab.is-active { color: var(--sf-dock-green) !important; }
    .sf-dock-tab.is-active .sf-dock-icon {
        background: var(--sf-dock-green-soft);
        animation: sf-dock-pill .45s cubic-bezier(.3, 1.5, .5, 1) both;
    }
    .sf-dock-tab.is-active .sf-dock-label { font-weight: 800; }

    /* ---- Bouton central ---------------------------------------------------------- */
    .sf-dock-fab-slot { flex: 0 0 78px; position: relative; display: flex; justify-content: center; }
    .sf-dock-fab {
        position: absolute;
        top: -26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--sf-dock-ink) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .sf-dock-fab .sf-dock-label { font-weight: 800; }
    .sf-dock-fab-circle {
        position: relative;
        display: grid;
        place-items: center;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        font-size: 1.45rem;
        color: var(--sf-accent-ink, #3a2c00);
        background: radial-gradient(circle at 30% 25%, var(--sf-accent-100, #fff3b8) 0%, var(--sf-dock-gold-2) 28%, var(--sf-dock-gold) 70%, var(--sf-accent-700, #b8921f) 100%);
        border: 4px solid #fff;
        box-shadow:
            0 12px 26px -6px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .75),
            0 4px 10px rgba(0, 0, 0, .12);
        transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .22s;
    }
    .sf-dock-fab-circle i { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
    .sf-dock-fab:active .sf-dock-fab-circle { transform: scale(.9); }
    .sf-dock-fab.is-open .sf-dock-fab-circle { transform: rotate(0) scale(1.04); }
    .sf-dock-fab.is-plus.is-open .sf-dock-fab-circle i { transform: rotate(135deg); }
    .sf-dock-fab.is-active .sf-dock-fab-circle { box-shadow: 0 0 0 4px var(--sf-dock-green-soft), 0 12px 26px -6px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .75); }

    /* Halo qui « respire » pour attirer l'œil sans gêner. */
    .sf-dock-fab-circle::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(var(--sf-accent-500-rgb, 212, 175, 55), .55);
        animation: sf-dock-breathe 2.8s ease-in-out infinite;
        pointer-events: none;
    }

    /* Variante « En direct » (client, superviseur) : vert + ondes radar + point rouge. */
    .sf-dock-fab.is-live .sf-dock-fab-circle {
        color: #fff;
        background: radial-gradient(circle at 30% 25%, var(--sf-brand-500, #6fd39a) 0%, var(--sf-dock-green-2) 40%, var(--sf-dock-green) 100%);
        box-shadow: 0 12px 26px -6px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .7), 0 4px 10px rgba(0, 0, 0, .12);
    }
    .sf-dock-fab.is-live .sf-dock-fab-circle::before,
    .sf-dock-fab.is-live .sf-dock-fab-circle::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(var(--sf-brand-700-rgb, 45, 134, 89), .6);
        animation: sf-dock-radar 2.4s ease-out infinite;
        pointer-events: none;
    }
    .sf-dock-fab.is-live .sf-dock-fab-circle::after { animation-delay: 1.2s; }
    .sf-dock-live-dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ff3b4e;
        border: 2px solid #fff;
        animation: sf-dock-blink 1.4s ease-in-out infinite;
    }

    /* ---- Pastilles (alertes, SOS, messages) ------------------------------------ */
    .sf-dock-badge {
        position: absolute;
        top: -5px;
        right: 2px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e5354b;
        color: #fff;
        font-size: .62rem;
        font-weight: 800;
        line-height: 15px;
        text-align: center;
        border: 2px solid #fff;
        box-shadow: 0 4px 10px -2px rgba(229, 53, 75, .6);
        animation: sf-dock-badge-pop .5s cubic-bezier(.3, 1.8, .5, 1) both;
        font-variant-numeric: tabular-nums;
    }
    .sf-dock-badge[hidden] { display: none; }
    .sf-dock-badge.is-sos {
        background: linear-gradient(135deg, #ff2d44, #b3001b);
        letter-spacing: .04em;
        animation: sf-dock-badge-pop .5s cubic-bezier(.3, 1.8, .5, 1) both, sf-dock-sos 1s ease-in-out .5s infinite;
    }
    .sf-dock-fab-circle .sf-dock-badge { top: -4px; right: -6px; }

    /* ---- Bouton central contextuel de l'agent ---------------------------------- */
    /* « Pointer » : vacation du jour pas encore pointée — impossible à rater. */
    .sf-dock-fab.is-urgent .sf-dock-fab-circle { animation: sf-dock-nudge 2.6s ease-in-out infinite; }
    .sf-dock-fab.is-urgent .sf-dock-fab-circle::before,
    .sf-dock-fab.is-urgent .sf-dock-fab-circle::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 3px solid rgba(var(--sf-accent-500-rgb, 212, 175, 55), .75);
        animation: sf-dock-radar 1.8s ease-out infinite;
        pointer-events: none;
    }
    .sf-dock-fab.is-urgent .sf-dock-fab-circle::after { animation-delay: .9s; }
    .sf-dock-fab.is-urgent .sf-dock-label { color: var(--sf-accent-700, #9a7410); }

    /* « En service » : anneau lumineux qui tourne autour du bouton + chrono. */
    .sf-dock-fab.is-on-duty .sf-dock-fab-circle {
        color: #fff;
        background: radial-gradient(circle at 30% 25%, var(--sf-brand-500, #6fd39a) 0%, var(--sf-dock-green-2) 40%, var(--sf-dock-green) 100%);
        box-shadow: 0 12px 26px -6px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .7), 0 4px 10px rgba(0, 0, 0, .12);
    }
    .sf-dock-fab.is-on-duty .sf-dock-fab-circle::before {
        inset: -8px;
        border: 0;
        background: conic-gradient(from 0deg, transparent 0 55%, rgba(var(--sf-brand-700-rgb, 45, 134, 89), .15) 62%, #4cd28a 92%, #c9ffe0 100%);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
        animation: sf-dock-spin 2.2s linear infinite;
        opacity: 1;
    }
    .sf-dock-duty { color: var(--sf-dock-green) !important; font-variant-numeric: tabular-nums; }

    /* ---- Feuilles (actions rapides, recherche) --------------------------------- */
    .sf-sheet { display: block; position: fixed; inset: 0; z-index: 1085; }
    .sf-sheet[hidden] { display: none; }
    .sf-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(8, 28, 17, .42);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        opacity: 0;
        transition: opacity .3s;
    }
    .sf-sheet-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 620px;
        margin: 0 auto;
        padding: 10px 18px calc(22px + var(--sf-dock-safe));
        border-radius: 30px 30px 0 0;
        background: linear-gradient(180deg, #ffffff 0%, var(--sf-brand-50, #f6faf7) 100%);
        box-shadow: 0 -20px 50px rgba(8, 28, 17, .25);
        transform: translateY(105%);
        transition: transform .42s cubic-bezier(.2, .9, .25, 1.05);
        max-height: 86vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sf-sheet.is-open .sf-sheet-backdrop { opacity: 1; }
    .sf-sheet.is-open .sf-sheet-panel { transform: none; }

    .sf-sheet-handle { width: 42px; height: 5px; border-radius: 99px; background: #d5ddd8; margin: 0 auto 14px; }
    .sf-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .sf-sheet-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-dock-gold); }
    .sf-sheet-title { font-size: 1.25rem; font-weight: 800; color: var(--sf-dock-ink); line-height: 1.2; }
    .sf-sheet-close {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 0;
        background: #edf2ee;
        color: var(--sf-dock-ink);
        display: grid;
        place-items: center;
    }

    .sf-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .sf-sheet-grid.is-two { grid-template-columns: repeat(2, 1fr); }
    .sf-sheet-tile {
        --tone: var(--sf-dock-green);
        --tone-soft: var(--sf-dock-green-soft);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 12px 13px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #e6ede8;
        box-shadow: 0 6px 18px -10px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .35);
        color: var(--sf-dock-ink) !important;
        text-decoration: none !important;
        overflow: hidden;
        opacity: 0;
        transform: translateY(18px) scale(.96);
        -webkit-tap-highlight-color: transparent;
    }
    .sf-sheet.is-open .sf-sheet-tile {
        animation: sf-dock-tile .5s cubic-bezier(.2, .9, .25, 1.15) both;
        animation-delay: calc(60ms + var(--i, 0) * 45ms);
    }
    .sf-sheet-tile::after {
        content: "";
        position: absolute;
        right: -22px;
        bottom: -22px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--tone-soft);
        opacity: .7;
    }
    .sf-sheet-tile:active { transform: scale(.96); }
    .sf-sheet-tile-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 1.1rem;
        color: #fff;
        background: var(--tone);
        background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 70%, #000));
        box-shadow: 0 8px 16px -6px var(--tone);
        position: relative;
        z-index: 1;
    }
    .sf-sheet-tile-label { font-weight: 800; font-size: .95rem; position: relative; z-index: 1; }
    .sf-sheet-tile-hint { font-size: .72rem; color: var(--sf-dock-muted); line-height: 1.25; position: relative; z-index: 1; }

    .tone-green  { --tone: var(--sf-brand-800, #1B6535); --tone-soft: var(--sf-brand-100, #e3f1e8); }
    .tone-gold   { --tone: var(--sf-accent-700, #c79a1c); --tone-soft: var(--sf-accent-100, #fbf1d3); }
    .tone-blue   { --tone: #2563eb; --tone-soft: #e3ecfd; }
    .tone-purple { --tone: #7c3aed; --tone-soft: #efe7fd; }
    .tone-teal   { --tone: #0d9488; --tone-soft: #ddf4f1; }
    .tone-red    { --tone: #dc2626; --tone-soft: #fde4e4; }

    .sf-sheet-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 6px 6px 16px;
        border-radius: 18px;
        background: #fff;
        border: 2px solid var(--sf-dock-green-soft);
        box-shadow: 0 8px 22px -12px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .4);
    }
    .sf-sheet-search > i { color: var(--sf-dock-muted); }
    .sf-sheet-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 1rem; padding: 10px 0; background: transparent; }
    .sf-sheet-search button {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--sf-dock-green-2), var(--sf-dock-green));
    }

    /* ---- Feuille « Menu » (construite depuis « Mon espace », voir mobile-dock.js) ---- */
    .sf-dock-tab.is-open { color: var(--sf-dock-green) !important; }
    .sf-dock-tab.is-open .sf-dock-icon { background: var(--sf-dock-green-soft); transform: rotate(90deg); }

    .sf-menu-sheet .sf-sheet-panel { padding-top: 0; max-height: 90vh; height: 90vh; }
    .sf-menu-top {
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 -18px;
        padding: 10px 18px 12px;
        background: linear-gradient(180deg, #ffffff 82%, rgba(255, 255, 255, .92));
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #eef3ef;
    }
    .sf-menu-top .sf-sheet-head { margin-bottom: 12px; }
    .sf-menu-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0 14px;
        height: 46px;
        border-radius: 15px;
        background: #f1f5f2;
        border: 1.5px solid transparent;
        transition: border-color .2s, background .2s, box-shadow .2s;
    }
    .sf-menu-search:focus-within { background: #fff; border-color: var(--sf-dock-green-2); box-shadow: 0 0 0 4px rgba(var(--sf-brand-700-rgb, 45, 134, 89), .12); }
    .sf-menu-search i { color: var(--sf-dock-muted); }
    .sf-menu-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--sf-dock-ink); }
    .sf-menu-jump {
        display: flex;
        gap: 8px;
        margin: 12px -18px 0;
        padding: 0 18px 2px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .sf-menu-jump::-webkit-scrollbar { display: none; }
    .sf-menu-jump[hidden], .sf-menu-sheet.is-searching .sf-menu-jump { display: none; }
    .sf-menu-chip {
        flex: 0 0 auto;
        scroll-snap-align: center;
        padding: 7px 14px;
        border-radius: 999px;
        border: 1px solid #e1e9e3;
        background: #fff;
        color: var(--sf-dock-ink);
        font-size: .8rem;
        font-weight: 700;
        white-space: nowrap;
        transition: background .25s, color .25s, border-color .25s;
    }
    .sf-menu-chip[hidden] { display: none; }
    .sf-menu-chip.has-todo::after {
        content: "";
        display: inline-block;
        width: 7px; height: 7px; margin-left: 7px; border-radius: 50%;
        background: var(--sf-dock-gold);
        vertical-align: middle;
        box-shadow: 0 0 0 2px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .25);
    }
    .sf-menu-chip.is-todo {
        display: inline-flex; align-items: center; gap: 7px;
        color: #6b5000;
        background: linear-gradient(135deg, #fff6d6, #fde9a6);
        border-color: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .7);
        animation: sf-dock-badge-pop .45s cubic-bezier(.3, 1.8, .5, 1) both;
    }
    .sf-menu-chip.is-todo i { color: var(--sf-accent-700, #c79a1c); }
    .sf-menu-chip.is-todo.is-active {
        color: var(--sf-accent-ink, #3a2c00);
        background: radial-gradient(circle at 30% 25%, var(--sf-accent-100, #fff3b8), var(--sf-dock-gold-2) 40%, var(--sf-dock-gold));
        border-color: var(--sf-dock-gold);
        box-shadow: 0 8px 16px -8px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .9);
    }
    .sf-menu-chip-count {
        min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
        background: var(--sf-accent-700, #c79a1c); color: #fff; font-size: .7rem; line-height: 20px; text-align: center;
    }
    .sf-menu-chip.is-todo.is-active .sf-menu-chip-count { background: var(--sf-accent-ink, #3a2c00); }
    .sf-menu-sheet.is-todo-only .sf-menu-quick { display: none; }
    .sf-menu-section.has-todo .sf-menu-section-title::after {
        content: "";
        display: inline-block;
        width: 8px; height: 8px; margin-left: 8px; border-radius: 50%;
        background: var(--sf-dock-gold);
        vertical-align: middle;
    }
    .sf-menu-badge.is-todo {
        background: linear-gradient(135deg, var(--sf-accent-300, #f0cf5a), var(--sf-accent-700, #c79a1c));
        color: var(--sf-accent-ink, #3a2c00);
        box-shadow: 0 4px 10px -3px rgba(var(--sf-accent-700-rgb, 199, 154, 28), .8);
        animation: sf-dock-badge-pop .5s cubic-bezier(.3, 1.8, .5, 1) both;
    }
    .sf-menu-link[data-todo] { border-color: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .55); }
    .sf-menu-chip.is-active { background: var(--sf-dock-green); border-color: var(--sf-dock-green); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .7); }

    .sf-menu-body { padding: 4px 0 8px; }
    .sf-menu-section { margin-top: 18px; scroll-margin-top: 200px; }
    .sf-menu-section[hidden], .sf-menu-group[hidden], .sf-menu-link[hidden] { display: none; }
    .sf-menu-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .sf-menu-section-icon {
        width: 32px; height: 32px; border-radius: 11px;
        display: grid; place-items: center; font-size: .9rem; color: #fff;
        background: var(--tone);
        box-shadow: 0 6px 12px -6px var(--tone);
    }
    .sf-menu-section-title { flex: 1; font-weight: 800; font-size: 1.02rem; color: var(--sf-dock-ink); }
    .sf-menu-section-count {
        min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
        background: #eef3ef; color: var(--sf-dock-muted); font-size: .72rem; font-weight: 800;
        display: grid; place-items: center;
    }
    .sf-menu-group + .sf-menu-group { margin-top: 12px; }
    .sf-menu-group-label {
        font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
        color: var(--sf-dock-muted); margin: 0 0 7px 2px;
    }
    .sf-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .sf-menu-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 9px 10px;
        border-radius: 17px;
        background: #fff;
        border: 1px solid #e8eee9;
        box-shadow: 0 4px 12px -8px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .3);
        color: var(--sf-dock-ink) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s, box-shadow .2s, border-color .2s;
    }
    .sf-menu-link:active { transform: scale(.96); box-shadow: none; }
    .sf-menu-link-icon {
        flex: 0 0 auto;
        width: 38px; height: 38px; border-radius: 13px;
        display: grid; place-items: center;
        font-size: .98rem;
        color: var(--tone);
        background: var(--tone-soft);
    }
    .sf-menu-link-label {
        font-size: .83rem; font-weight: 700; line-height: 1.22;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sf-menu-link.is-current { border-color: var(--sf-dock-green-2); background: linear-gradient(135deg, var(--sf-brand-50, #f3faf5), #fff); }
    .sf-menu-link.is-current::after {
        content: "";
        position: absolute; top: 9px; right: 9px;
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--sf-dock-green-2);
        box-shadow: 0 0 0 3px rgba(var(--sf-brand-700-rgb, 45, 134, 89), .18);
    }
    .sf-menu-sheet.is-open .sf-menu-link {
        animation: sf-dock-tile .45s cubic-bezier(.2, .9, .25, 1.1) both;
        animation-delay: calc(80ms + var(--i, 0) * 28ms);
    }
    .sf-menu-sheet.is-searching .sf-menu-link { animation: none; }
    .sf-menu-empty { padding: 34px 10px; text-align: center; color: var(--sf-dock-muted); font-weight: 600; }
    .sf-menu-empty i { display: block; font-size: 1.8rem; margin-bottom: 10px; opacity: .45; }
    .sf-menu-empty[hidden] { display: none; }

    /* Tuiles : pas de sélection de texte ni d'aperçu de lien iOS sur appui long
       (l'appui long sert à épingler). */
    .sf-menu-link, .sf-menu-app { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

    /* Appui long : la tuile se creuse et un anneau se remplit jusqu'à l'épinglage. */
    .sf-menu-link.is-pressing, .sf-menu-app.is-pressing { transform: scale(.95); }
    .sf-menu-link.is-pressing .sf-menu-link-icon,
    .sf-menu-app.is-pressing .sf-menu-app-icon { position: relative; }
    .sf-menu-link.is-pressing .sf-menu-link-icon::after,
    .sf-menu-app.is-pressing .sf-menu-app-icon::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: inherit;
        background: conic-gradient(var(--sf-dock-gold) var(--sf-press, 0%), transparent 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        padding: 3px;
        animation: sf-dock-press .48s linear forwards;
    }

    .sf-menu-link.is-pinned::before {
        content: "\f005";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        top: 6px;
        right: 9px;
        font-size: .62rem;
        color: var(--sf-dock-gold);
    }
    .sf-menu-link.is-current.is-pinned::after { right: 24px; }
    .sf-menu-link-icon { position: relative; }
    .sf-menu-badge {
        position: absolute; top: -6px; right: -7px;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: #e5354b; color: #fff; border: 2px solid #fff;
        font-size: .6rem; font-weight: 800; line-height: 14px; text-align: center;
        font-family: inherit;
    }
    .sf-menu-badge.is-sos { animation: sf-dock-sos 1s ease-in-out infinite; }
    .sf-menu-link mark { padding: 0 1px; border-radius: 4px; background: #fdeeb4; color: inherit; }
    .sf-menu-link.is-first { border-color: var(--sf-dock-green-2); box-shadow: 0 0 0 3px rgba(var(--sf-brand-700-rgb, 45, 134, 89), .14); }

    /* ---- Accès rapide : épinglés et pages fréquentes -------------------------- */
    .sf-menu-quick { padding-top: 6px; }
    .sf-menu-sheet.is-searching .sf-menu-quick { display: none; }
    .sf-menu-quick-row { margin-top: 16px; }
    .sf-menu-quick-head {
        display: flex; align-items: center; gap: 8px; margin: 0 2px 10px;
        font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-dock-muted);
    }
    .sf-menu-quick-head i { color: var(--sf-dock-gold); font-size: .8rem; }
    .sf-menu-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
    .sf-menu-app {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        text-decoration: none !important; color: var(--sf-dock-ink) !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s;
    }
    .sf-menu-app:active { transform: scale(.92); }
    .sf-menu-app-icon {
        position: relative;
        width: 58px; height: 58px; border-radius: 19px;
        display: grid; place-items: center;
        font-size: 1.35rem; color: #fff;
        background: var(--tone);
        background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone) 55%, color-mix(in srgb, var(--tone) 75%, #000));
        box-shadow: 0 10px 18px -10px var(--tone), inset 0 1px 0 rgba(255, 255, 255, .35);
    }
    .sf-menu-app.is-current .sf-menu-app-icon { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sf-dock-green-2); }
    .sf-menu-app-label {
        max-width: 100%;
        font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sf-menu-sheet.is-open .sf-menu-app { animation: sf-dock-app .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
    .sf-menu-hint {
        display: flex; align-items: center; gap: 10px;
        margin-top: 14px; padding: 11px 14px; border-radius: 15px;
        background: linear-gradient(135deg, #fffaf0, #fdf3d8);
        border: 1px dashed rgba(var(--sf-accent-500-rgb, 212, 175, 55), .6);
        color: #7a5d0b; font-size: .8rem; font-weight: 600;
    }
    .sf-menu-hint i { color: var(--sf-dock-gold); animation: sf-dock-tap 2.2s ease-in-out infinite; }

    .sf-menu-toast {
        position: sticky;
        bottom: 10px;
        z-index: 4;
        width: max-content;
        max-width: 92%;
        margin: 0 auto;
        display: flex; align-items: center; gap: 9px;
        padding: 11px 16px;
        border-radius: 999px;
        background: var(--sf-brand-900, #12301f);
        color: #fff;
        font-size: .84rem; font-weight: 700;
        box-shadow: 0 14px 30px -10px rgba(8, 28, 17, .55);
        opacity: 0;
        transform: translateY(14px) scale(.96);
        pointer-events: none;
        transition: opacity .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
    }
    .sf-menu-toast i { color: var(--sf-dock-gold-2); }
    .sf-menu-toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-menu-toast.is-on { opacity: 1; transform: none; }

    /* ---- Recherche universelle & fiches récentes : lignes de résultat ---------- */
    .sf-menu-search.is-loading::after {
        content: "";
        width: 18px; height: 18px; flex: 0 0 auto;
        border-radius: 50%;
        border: 2.5px solid #d7e3da;
        border-top-color: var(--sf-dock-green-2);
        animation: sf-dock-spin .7s linear infinite;
    }
    .sf-menu-live { padding-top: 14px; }
    .sf-menu-live[hidden] { display: none; }
    .sf-menu-live-count {
        margin-left: 4px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
        background: var(--sf-dock-green-soft); color: var(--sf-dock-green); font-size: .66rem; line-height: 18px; text-align: center;
    }
    .sf-menu-pages-head { margin-top: 18px; }
    .sf-menu-pages-head[hidden] { display: none; }
    .sf-menu-hits {
        display: flex; flex-direction: column;
        border-radius: 18px; overflow: hidden;
        background: #fff; border: 1px solid #e8eee9;
        box-shadow: 0 4px 12px -8px rgba(var(--sf-brand-900-rgb, 15, 61, 32), .3);
    }
    .sf-menu-hit {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 12px;
        color: var(--sf-dock-ink) !important; text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    .sf-menu-hit + .sf-menu-hit { border-top: 1px solid #eef3ef; }
    .sf-menu-hit:active { background: #f3f8f4; }
    .sf-menu-sheet.is-open .sf-menu-hit { animation: sf-dock-tile .4s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc(30ms + var(--i, 0) * 35ms); }
    .sf-menu-hit-icon {
        flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
        display: grid; place-items: center; font-size: .95rem;
        color: var(--sf-dock-green); background: var(--sf-dock-green-soft);
    }
    .sf-menu-hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .sf-menu-hit-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-menu-hit-sub { font-size: .74rem; color: var(--sf-dock-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-menu-hit-kind {
        flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
        font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
        color: var(--sf-dock-muted); background: #f1f5f2;
    }
    .sf-menu-hit mark { padding: 0 1px; border-radius: 4px; background: #fdeeb4; color: inherit; }
    .sf-menu-all {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin-top: 10px; padding: 11px; border-radius: 15px;
        font-size: .84rem; font-weight: 800;
        color: var(--sf-dock-green) !important; text-decoration: none !important;
        background: var(--sf-dock-green-soft);
    }

    .tone-orange { --tone: #ea580c; --tone-soft: #ffedd5; }
    .tone-slate  { --tone: #475569; --tone-soft: #e8edf3; }

    /* ---- Fenêtres « Mon espace » existantes, ouvertes en feuille depuis le dock ---- */
    body.has-sf-dock #abonneMenuModal .modal-dialog,
    body.has-sf-dock #clientPortalModal .modal-dialog,
    body.has-sf-dock #agentPortalModal .modal-dialog,
    body.has-sf-dock #supervisorMenuModal .modal-dialog,
    body.has-sf-dock #gestionnaireMenuModal .modal-dialog,
    body.has-sf-dock #adminMenuModal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        max-width: 620px;
        min-height: 0;
        height: auto;
        max-height: 88vh;
        transform: translateY(100%);
        transition: transform .4s cubic-bezier(.2, .9, .25, 1.05);
    }
    body.has-sf-dock #abonneMenuModal.show .modal-dialog,
    body.has-sf-dock #clientPortalModal.show .modal-dialog,
    body.has-sf-dock #agentPortalModal.show .modal-dialog,
    body.has-sf-dock #supervisorMenuModal.show .modal-dialog,
    body.has-sf-dock #gestionnaireMenuModal.show .modal-dialog,
    body.has-sf-dock #adminMenuModal.show .modal-dialog { transform: none; }
    body.has-sf-dock #abonneMenuModal .modal-content,
    body.has-sf-dock #clientPortalModal .modal-content,
    body.has-sf-dock #agentPortalModal .modal-content,
    body.has-sf-dock #supervisorMenuModal .modal-content,
    body.has-sf-dock #gestionnaireMenuModal .modal-content,
    body.has-sf-dock #adminMenuModal .modal-content {
        min-height: 0 !important;
        height: auto !important;
        max-height: 88vh;
        border: 0;
        border-radius: 30px 30px 0 0;
        padding-bottom: var(--sf-dock-safe);
        box-shadow: 0 -20px 50px rgba(8, 28, 17, .25);
    }
    body.has-sf-dock #abonneMenuModal .modal-content::before,
    body.has-sf-dock #clientPortalModal .modal-content::before,
    body.has-sf-dock #agentPortalModal .modal-content::before,
    body.has-sf-dock #supervisorMenuModal .modal-content::before,
    body.has-sf-dock #gestionnaireMenuModal .modal-content::before,
    body.has-sf-dock #adminMenuModal .modal-content::before {
        content: "";
        display: block;
        width: 42px;
        height: 5px;
        border-radius: 99px;
        background: #d5ddd8;
        margin: 10px auto 0;
    }
}

/* Transitions de page façon application native (navigateurs compatibles : Chrome /
   WebView Android récents, Safari 18.2+ ; ignoré ailleurs) : le dock reste immobile
   pendant que la page change en fondu, et la pastille de l'onglet actif GLISSE de
   l'ancien onglet vers le nouveau. */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .sf-dock-bar { view-transition-name: sf-dock; }
    .sf-dock-tab.is-active .sf-dock-icon { view-transition-name: sf-dock-pill; }
    .sf-dock-fab-circle { view-transition-name: sf-dock-fab; }
    ::view-transition-group(sf-dock-pill) { animation-duration: .42s; animation-timing-function: cubic-bezier(.3, 1.25, .5, 1); }
    ::view-transition-old(root) { animation: .2s ease both sf-vt-out; }
    ::view-transition-new(root) { animation: .28s cubic-bezier(.2, .8, .2, 1) both sf-vt-in; }
    @supports (view-transition-name: none) {
        .sf-dock-tab.is-active .sf-dock-icon { animation: none; }
    }
}

/* Navigation en cours (mobile-dock.js) : barre de chargement en haut d'écran et page
   estompée, dès le toucher d'un lien. */
.sf-nav-progress {
    position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none;
    background: linear-gradient(90deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cf5a));
    box-shadow: 0 0 8px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .7);
    transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
html.sf-navigating .sf-nav-progress { opacity: 1; animation: sf-nav-progress 9s cubic-bezier(.08, .75, .2, 1) forwards; }
html.sf-navigating :is(.sf-content, body > main) { opacity: .6; transition: opacity .2s ease .12s; }
@keyframes sf-nav-progress { 0% { transform: scaleX(0); } 8% { transform: scaleX(.3); } 35% { transform: scaleX(.65); } 100% { transform: scaleX(.94); } }

@media print { .sf-dock, .sf-sheet { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .sf-dock, .sf-dock *, .sf-sheet, .sf-sheet * { animation: none !important; transition: none !important; }
    .sf-sheet-tile { opacity: 1; transform: none; }
}

@keyframes sf-dock-rise { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sf-dock-pill { from { transform: scale(.6); background: transparent; } to { transform: none; } }
@keyframes sf-dock-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 0; } }
@keyframes sf-dock-radar { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
@keyframes sf-dock-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sf-dock-badge-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes sf-dock-sos { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 68, .7); } 50% { box-shadow: 0 0 0 7px rgba(255, 45, 68, 0); } }
@keyframes sf-dock-nudge { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-5px) scale(1.04); } 84% { transform: none; } 90% { transform: translateY(-2px); } }
@keyframes sf-dock-spin { to { transform: rotate(360deg); } }
@keyframes sf-dock-app { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sf-dock-tap { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(2px) scale(.9); } 80% { transform: none; } }
@property --sf-press { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes sf-dock-press { to { --sf-press: 100%; } }
@keyframes sf-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes sf-vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sf-dock-tile { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }