/* /Components/IdleLock.razor.rz.scp.css */
/* Préavis de verrouillage : discret mais visible, en bas à droite pour ne rien recouvrir de la
   zone de travail. Ton d'avertissement plutôt que d'erreur — rien n'est encore perdu, un geste
   suffit à repousser l'échéance. */
.idle-warning[b-aajes7248i] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 20rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--w-warn-300);
    background: var(--w-warn-50);
    box-shadow: 0 8px 24px rgba(27, 36, 54, .16);
}

    .idle-warning strong[b-aajes7248i] {
        display: block;
        color: var(--w-warn-850);
        font-variant-numeric: tabular-nums;
    }

    .idle-warning span[b-aajes7248i] {
        font-size: 0.82rem;
        color: #78350f;
    }
/* /Components/Pager.razor.rz.scp.css */
.pager[b-yzebik7biy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

    .pager .pager-status[b-yzebik7biy] {
        font-size: 0.88rem;
        color: var(--n-580);
        white-space: nowrap;
    }

    .pager .pager-count[b-yzebik7biy] {
        color: var(--text-muted);
    }
/* /Components/VersionWatcher.razor.rz.scp.css */
/* Bandeau « nouvelle version » : en bas à GAUCHE, pour ne jamais recouvrir le préavis de
   verrouillage, qui occupe le coin bas droit. Ton neutre (rail encre) : ce n'est ni une alerte ni
   une erreur, seulement une information avec un geste possible. */
.version-banner[b-gxckgzg7qn] {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 24rem;
    padding: 0.6rem 0.7rem 0.6rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: var(--ink);
    color: #e8edf6;
    font-size: 0.85rem;
    box-shadow: 0 8px 24px rgba(27, 36, 54, .28);
}

    .version-banner button[b-gxckgzg7qn] {
        flex: 0 0 auto;
        padding: 0.32rem 0.7rem;
        border: 0;
        border-radius: 6px;
        background: linear-gradient(145deg, #e0a54a, #c2761c);
        color: var(--n-900);
        font-size: 0.82rem;
        font-weight: 600;
    }

        .version-banner button:hover[b-gxckgzg7qn] {
            background: linear-gradient(145deg, #e8b463, #d18420);
        }
/* /Layout/AppearancePicker.razor.rz.scp.css */
/* Panneau d'apparence : ancré sous la barre du haut, ouvert à la demande.
   Aucune commande n'est masquée au repos (règle « rien ne dépend du survol »). */
.appearance[b-hv8pdbv6fd] {
    position: relative;
    display: inline-flex;
}

/* Le CSS scopé ne franchit pas la frontière d'un composant : la définition de
   `.top-row-link` qui vit dans MainLayout.razor.css ne s'applique PAS à ce bouton,
   rendu par un autre composant. Sans cette reprise, le bouton garde la bordure par
   défaut du navigateur — ce que `e2e/tests/card-borders.spec.ts` a refusé, à raison. */
.top-row-link[b-hv8pdbv6fd] {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--n-550);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

    .top-row-link:hover[b-hv8pdbv6fd] {
        color: var(--brass-strong, #b9721a);
    }

.appearance-panel[b-hv8pdbv6fd] {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 1200;
    min-width: 17rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    text-align: left;
}

.appearance-group[b-hv8pdbv6fd] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.appearance-label[b-hv8pdbv6fd] {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.appearance-choices[b-hv8pdbv6fd] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.appearance-choice[b-hv8pdbv6fd] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .25rem .7rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

    .appearance-choice:hover[b-hv8pdbv6fd] {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .appearance-choice.is-on[b-hv8pdbv6fd] {
        border-color: var(--accent);
        background: var(--accent-soft);
        font-weight: 600;
    }

.appearance-swatch[b-hv8pdbv6fd] {
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    border: 1px solid rgba(27, 36, 54, .18);
    flex: none;
}

.appearance-note[b-hv8pdbv6fd] {
    margin: 0;
    font-size: .76rem;
    color: var(--text-muted);
}
/* /Layout/BareLayout.razor.rz.scp.css */
/* Écrans hors session (connexion, changement de mot de passe imposé). Reprend le fond commun de
   l'application, sans le rail de navigation. */
.bare-page[b-33p7yytmo9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background-color: color-mix(in srgb, #1f6f7a 25%, var(--surface));
    /* Mêmes halos et même trame de points que `.content` : l'écran de connexion et l'application
       partagent un seul et même papier peint. */
    background-image:
        radial-gradient(70rem 34rem at 108% -8%, color-mix(in srgb, #1f6f7a 30%, transparent), transparent 66%),
        radial-gradient(58rem 36rem at -14% 110%, color-mix(in srgb, #1f6f7a 22%, transparent), transparent 64%),
        radial-gradient(circle at 1px 1px, rgba(27, 36, 54, .05) 1px, transparent 0);
    background-size: auto, auto, 24px 24px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: fixed;
}

.bare-shell[b-33p7yytmo9] {
    width: 100%;
    max-width: 56rem;
    display: grid;
    grid-template-columns: 20rem 1fr;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
    overflow: hidden;
}

/* --- Vitrine (rail encre) --- */
.bare-aside[b-33p7yytmo9] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2.25rem 1.9rem;
    color: #dfe6f2;
    background-color: var(--ink);
    background-image: linear-gradient(180deg, var(--ink) 0%, #141b29 100%);
}

.bare-points[b-33p7yytmo9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #c2ccdb;
}

    .bare-points li[b-33p7yytmo9] {
        position: relative;
        padding-left: 1.4rem;
    }

        .bare-points li[b-33p7yytmo9]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.32em;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            background: rgba(217, 138, 43, .2);
            box-shadow: inset 0 0 0 2px #d98a2b;
        }

.bare-foot[b-33p7yytmo9] {
    margin: auto 0 0;
    font-size: 0.75rem;
    color: #8d99ad;
}

/* --- Panneau du formulaire --- */
.bare-main[b-33p7yytmo9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

/* --- Bloc de marque (vitrine, et bandeau compact en écran étroit) --- */
.bare-brand[b-33p7yytmo9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .bare-brand strong[b-33p7yytmo9] {
        display: block;
        font-size: 1.2rem;
        letter-spacing: -0.01em;
        color: #fff;
    }

    .bare-brand span[b-33p7yytmo9] {
        font-size: 0.78rem;
        color: #9aa6ba;
    }

.bare-mark[b-33p7yytmo9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bare-brand-compact[b-33p7yytmo9] {
    display: none;
    padding-bottom: 1.1rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--line, var(--n-190));
}

    .bare-brand-compact strong[b-33p7yytmo9] {
        font-size: 1.05rem;
        color: var(--n-900);
    }

    .bare-brand-compact span[b-33p7yytmo9] {
        color: var(--text-muted);
    }

/* En écran étroit, la vitrine cède la place : elle n'apporte rien qu'un formulaire n'apporte
   déjà, et elle repousserait le champ de saisie sous la ligne de flottaison. */
@media (max-width: 47.99em) {
    .bare-shell[b-33p7yytmo9] {
        grid-template-columns: 1fr;
        max-width: 27rem;
        border-radius: 14px;
    }

    .bare-aside[b-33p7yytmo9] {
        display: none;
    }

    .bare-brand-compact[b-33p7yytmo9] {
        display: flex;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-bigwpi1l0l] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-bigwpi1l0l] {
    flex: 1;
}

.sidebar[b-bigwpi1l0l] {
    background-color: var(--rail-bg);
    background-image: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-bg-2) 100%);
}

.top-row[b-bigwpi1l0l] {
    background-color: var(--topbar-bg);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--n-190);
    justify-content: flex-end;
    gap: .75rem;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
}

    .top-row .top-row-context[b-bigwpi1l0l] {
        color: var(--text-muted);
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .top-row .top-row-context strong[b-bigwpi1l0l] {
        color: var(--text);
    }

@media (max-width: 640.98px) {
    .top-row[b-bigwpi1l0l] {
        justify-content: space-between;
    }

    .top-row[b-bigwpi1l0l]  a, .top-row[b-bigwpi1l0l]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-bigwpi1l0l] {
        flex-direction: row;
    }

    .sidebar[b-bigwpi1l0l] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-bigwpi1l0l] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-bigwpi1l0l]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-bigwpi1l0l], article[b-bigwpi1l0l] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* --- Identité et déconnexion (barre supérieure) --- */
.top-row-user[b-bigwpi1l0l] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--n-900);
    white-space: nowrap;
}

/* Bouton de déconnexion et lien « Mot de passe » présentés à l'identique : ce sont deux actions
   de même rang, l'une navigue, l'autre poste. */
.top-row-link[b-bigwpi1l0l] {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--n-550);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

    .top-row-link:hover[b-bigwpi1l0l] {
        color: var(--brass-strong, #b9721a);
    }
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-gajhbrg0kx] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-gajhbrg0kx] {
    /* Même hauteur que la barre supérieure de la zone principale (variable partagée --topbar-height)
       pour que les deux lignes de séparation coïncident (« CHRONOS » ↔ barre du haut). */
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Marque --- */
.navbar-brand[b-gajhbrg0kx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.brand-mark[b-gajhbrg0kx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
    color: var(--brand-mark-fg);
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.brand-text[b-gajhbrg0kx] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-fg);
    letter-spacing: -0.01em;
}

    .brand-text small[b-gajhbrg0kx] {
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        color: var(--brand-sub);
        text-transform: uppercase;
        margin-top: 2px;
    }

/* --- Icônes (glyphes SVG épurés, injectés en arrière-plan) --- */
.bi[b-gajhbrg0kx] {
    display: inline-block;
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bi-house-door-fill-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l6-5 6 5'/%3E%3Cpath d='M4 6.5V13h8V6.5'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Cpath d='M2.5 13c0-2 1.6-3.2 3.5-3.2S9.5 11 9.5 13'/%3E%3Ccircle cx='11' cy='6.5' r='1.6'/%3E%3Cpath d='M11 9.8c1.6 0 2.7 1.1 2.7 3'/%3E%3C/svg%3E");
}

.bi-building-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='2.5' width='9' height='11' rx='1'/%3E%3Cpath d='M6 5h1M9 5h1M6 8h1M9 8h1M6.5 13v-2h3v2'/%3E%3C/svg%3E");
}

.bi-kanban-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='3' height='10' rx='.6'/%3E%3Crect x='6.5' y='3' width='3' height='6' rx='.6'/%3E%3Crect x='10.5' y='3' width='3' height='8' rx='.6'/%3E%3C/svg%3E");
}

.bi-clock-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M8 5v3l2 1.5'/%3E%3C/svg%3E");
}

.bi-calendar-x-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M5 2.5v2M11 2.5v2M6.3 9l3.4 3M9.7 9l-3.4 3'/%3E%3C/svg%3E");
}

.bi-check2-square-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='2'/%3E%3Cpath d='M5.5 8.2l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
}

.bi-bar-chart-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.5h11'/%3E%3Crect x='4' y='8' width='2' height='4'/%3E%3Crect x='7.5' y='5.5' width='2' height='6.5'/%3E%3Crect x='11' y='9.5' width='2' height='2.5'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1'/%3E%3Cpath d='M5.5 7V5.5a2.5 2.5 0 0 1 5 0V7'/%3E%3C/svg%3E");
}

.bi-list-task-nav-menu[b-gajhbrg0kx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2ccdb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='2.5' height='2.5' rx='.5'/%3E%3Cpath d='M7 4.2h6.5'/%3E%3Crect x='2.5' y='6.8' width='2.5' height='2.5' rx='.5'/%3E%3Cpath d='M7 8h6.5'/%3E%3Crect x='2.5' y='10.6' width='2.5' height='2.5' rx='.5'/%3E%3Cpath d='M7 11.8h6.5'/%3E%3C/svg%3E");
}

/* --- Liens de navigation --- */
.nav-item[b-gajhbrg0kx] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

    .nav-item:first-of-type[b-gajhbrg0kx] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-gajhbrg0kx] {
        padding-bottom: 1rem;
    }

    .nav-item[b-gajhbrg0kx]  a {
        color: var(--rail-text);
        border-radius: 8px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 2.75rem;
        padding-left: 0.85rem;
        transition: background-color .12s ease, color .12s ease;
    }

/* Entrée active : le liseré laiton a été retiré (v2.131.0, « plus de barres verticales nulle part »).
   Le fond est donc renforcé pour que l'écran courant reste identifiable d'un coup d'œil. */
.nav-item[b-gajhbrg0kx]  a.active {
    background-color: var(--rail-active-bg);
    color: var(--rail-text-strong);
    font-weight: 600;
}

.nav-item[b-gajhbrg0kx]  a:hover {
    background-color: var(--rail-hover-bg);
    color: var(--rail-text-strong);
}

@media (min-width: 641px) {
    .navbar-toggler[b-gajhbrg0kx] {
        display: none;
    }

    .collapse[b-gajhbrg0kx] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-gajhbrg0kx] {
        /* Allow sidebar to scroll for tall menus (viewport moins la hauteur du bloc marque = 3.5rem) */
        height: calc(100vh - var(--topbar-height));
        overflow-y: auto;
    }
}
/* /Layout/NotificationBell.razor.rz.scp.css */
.notif[b-p3m0m9g739] {
    position: relative;
}

.notif-btn[b-p3m0m9g739] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--n-700);
    cursor: pointer;
}

    .notif-btn:hover[b-p3m0m9g739] {
        background-color: rgba(0, 0, 0, .06);
    }

    .notif-btn svg[b-p3m0m9g739] {
        width: 1.15rem;
        height: 1.15rem;
    }

.notif-badge[b-p3m0m9g739] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .28rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.notif-panel[b-p3m0m9g739] {
    position: absolute;
    top: 2.5rem;
    right: 0;
    width: 22rem;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    z-index: 1000;
}

.notif-head[b-p3m0m9g739] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.notif-mark-all[b-p3m0m9g739] {
    border: 0;
    background: none;
    color: #2563eb;
    font-size: .78rem;
    cursor: pointer;
}

.notif-empty[b-p3m0m9g739] {
    margin: 0;
    padding: 1rem .8rem;
    color: var(--text-muted);
    font-style: italic;
}

.notif-list[b-p3m0m9g739] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item[b-p3m0m9g739] {
    display: flex;
    gap: .55rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    cursor: pointer;
}

    .notif-item:hover[b-p3m0m9g739] {
        background-color: rgba(0, 0, 0, .03);
    }

    .notif-item.unread[b-p3m0m9g739] {
        background-color: rgba(37, 99, 235, .06);
    }

.notif-dot[b-p3m0m9g739] {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-top: .35rem;
    border-radius: 999px;
    background: var(--n-480);
}

    .notif-dot.ok[b-p3m0m9g739] {
        background: #15803d;
    }

    .notif-dot.warn[b-p3m0m9g739] {
        background: #dc2626;
    }

.notif-title[b-p3m0m9g739] {
    font-weight: 600;
    font-size: .86rem;
}

.notif-text[b-p3m0m9g739] {
    font-size: .82rem;
    color: var(--n-650);
}

.notif-when[b-p3m0m9g739] {
    font-size: .72rem;
    color: var(--n-480);
    margin-top: .1rem;
}

.notif-item:focus-visible[b-p3m0m9g739] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* Fermeture au clic extérieur : couche transparente sous le panneau */
.notif-backdrop[b-p3m0m9g739] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* Le focus du panneau est géré au clavier ; pas de contour disgracieux sur tout le panneau */
.notif-panel:focus[b-p3m0m9g739] {
    outline: none;
}
/* /Pages/Absences.razor.rz.scp.css */
.ab-comment[b-srl4q8kxuz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.icon-btn[b-srl4q8kxuz] {
    border: 0;
    background: transparent;
    color: var(--n-450);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    /* Visible au repos, discret : masqué derrière un survol, il est introuvable — et
       inatteignable sur écran tactile, où le survol n'existe pas (v2.127). */
    opacity: .55;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

tr:hover .icon-btn[b-srl4q8kxuz],
.icon-btn:focus-visible[b-srl4q8kxuz] {
    opacity: 1;
}

.icon-btn:hover[b-srl4q8kxuz] {
    color: var(--brass-strong);
    background: var(--w-warn-100);
}

.icon-btn:disabled[b-srl4q8kxuz] {
    opacity: .2;
    cursor: default;
}

.ab-rename[b-srl4q8kxuz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .ab-rename input[b-srl4q8kxuz] {
        max-width: 260px;
    }

/* ============================================================
   Soldes de congés — jauges dynamiques (élément signature)
   ============================================================ */
@property --pct {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

.balance-strip[b-srl4q8kxuz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.balance-tile[b-srl4q8kxuz] {
    --ring-track: var(--n-140);
    flex: 1 1 12rem;
    max-width: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--n-140);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 30, 45, 0.04);
    animation: bt-in-b-srl4q8kxuz 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .balance-tile:hover[b-srl4q8kxuz] {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(20, 30, 45, 0.1);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--n-140));
    }

.bt-title[b-srl4q8kxuz] {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    color: var(--text);
}

.bt-gauge[b-srl4q8kxuz] {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
}

.bt-ring[b-srl4q8kxuz] {
    grid-area: 1 / 1;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--ring-track) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 11px), #000 calc(100% - 10px));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 11px), #000 calc(100% - 10px));
    animation: bt-fill-b-srl4q8kxuz 0.9s ease-out both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.bt-center[b-srl4q8kxuz] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.bt-num[b-srl4q8kxuz] {
    font-size: 1.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.bt-unit[b-srl4q8kxuz] {
    margin-top: 0.15rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--n-450);
}

.bt-meta[b-srl4q8kxuz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--n-600);
}

    .bt-meta strong[b-srl4q8kxuz] {
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

.bt-sep[b-srl4q8kxuz] {
    color: #c7ccd3;
}

.bt-carry[b-srl4q8kxuz] {
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 85%, var(--text));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-radius: 999px;
    padding: 0.1em 0.6em;
}

/* Solde négatif (dépassement) : jauge et chiffre en rouge. */
.balance-tile.is-over[b-srl4q8kxuz] {
    --accent: #c0392b;
}

.balance-hint[b-srl4q8kxuz] {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    color: var(--n-450);
}

@keyframes bt-in-b-srl4q8kxuz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes bt-fill-b-srl4q8kxuz {
    from {
        --pct: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .balance-tile[b-srl4q8kxuz],
    .bt-ring[b-srl4q8kxuz] {
        animation: none;
    }
}

/* ============================================================
   Dynamisme du reste de l'écran Absences
   ============================================================ */

/* Entrée douce des cartes au chargement. */
.card[b-srl4q8kxuz] {
    animation: ab-card-in-b-srl4q8kxuz 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ab-card-in-b-srl4q8kxuz {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* En-tête de carte : teinte discrète, cohérente avec la section. Le liseré d'accent qui le précédait
   était dessiné par un ::before (v2.131.0 ne l'avait donc pas vu : un pseudo-élément n'est pas un
   élément du DOM). Retiré comme toutes les autres barres verticales. */
.card-header[b-srl4q8kxuz] {
    background: color-mix(in srgb, var(--accent, var(--w-warn-700)) 6%, var(--surface));
}

/* « Mes absences » : surlignage de ligne au survol (le bord gauche coloré par type a été retiré en
   v2.131.0 — le type figure en toutes lettres dans la première colonne). */
#my-absences tbody tr[b-srl4q8kxuz] {
    transition: background 0.13s ease;
}

    #my-absences tbody tr:hover[b-srl4q8kxuz] {
        background: color-mix(in srgb, var(--accent, var(--w-warn-700)) 5%, var(--surface));
    }

/* Aperçu en direct du nombre de jours dans le formulaire de déclaration. */
.ab-days[b-srl4q8kxuz] {
    font-weight: 700;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--accent, var(--w-warn-700)) 85%, var(--text));
    background: color-mix(in srgb, var(--accent, var(--w-warn-700)) 12%, var(--surface));
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ab-days-invalid[b-srl4q8kxuz] {
    font-size: 0.85rem;
    color: #c0392b;
}

/* État vide accueillant. */
.ab-empty[b-srl4q8kxuz] {
    text-align: center;
    padding: 2.4rem 1rem;
    color: var(--text-muted);
}

.ab-empty-glyph[b-srl4q8kxuz] {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent, var(--w-warn-700));
    opacity: 0.75;
    margin-bottom: 0.5rem;
}

.ab-empty p[b-srl4q8kxuz] {
    max-width: 34rem;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .card[b-srl4q8kxuz] {
        animation: none;
    }
}

/* Solde d'un employé (vue gestionnaire) dans la carte d'allocation. */
.emp-balance[b-srl4q8kxuz] {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px dashed #e6e9ee;
}

.emp-balance-head[b-srl4q8kxuz] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.7rem;
    color: var(--text);
}

/* Pastille « solde restant » par ligne dans « Absences de l'équipe ». */
.rem-chip[b-srl4q8kxuz] {
    display: inline-block;
    font-weight: 700;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #2f6b53;
    background: #e7f4ee;
    border-radius: 999px;
    padding: 0.1em 0.55em;
}

    .rem-chip.is-over[b-srl4q8kxuz] {
        color: #b02a1a;
        background: var(--w-danger-150);
    }

/* Un tableau plus large que sa carte défile DANS son conteneur, et ne pousse donc jamais ses
   boutons de décision hors du cadre (v2.165.0). Règle redéfinie ici : un CSS scopé ne franchit
   pas la frontière du composant. */
.table-scroll[b-srl4q8kxuz] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* /Pages/Approvals.razor.rz.scp.css */
/* Approbations — cartes de feuilles de temps. */

.ts-card[b-a2pbbyi5qu] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
}

.ts-main[b-a2pbbyi5qu] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.avatar[b-a2pbbyi5qu] {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-140);
    color: var(--n-700);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.ts-info[b-a2pbbyi5qu] {
    flex: 1 1 220px;
    min-width: 200px;
}

    .ts-info .ts-name[b-a2pbbyi5qu] {
        font-weight: 700;
        color: var(--text);
    }

    .ts-info .ts-email[b-a2pbbyi5qu] {
        color: var(--text-muted);
        font-weight: 400;
        font-size: 0.85rem;
        margin-left: 0.35rem;
    }

    .ts-info .ts-meta[b-a2pbbyi5qu] {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-top: 0.1rem;
    }

.ts-hours[b-a2pbbyi5qu] {
    text-align: right;
    min-width: 4rem;
}

    .ts-hours .h-value[b-a2pbbyi5qu] {
        font-size: 1.4rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
        display: block;
        line-height: 1;
    }

    .ts-hours .h-label[b-a2pbbyi5qu] {
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

.ts-decision[b-a2pbbyi5qu] {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--n-150);
}

.approved-title[b-a2pbbyi5qu],
.rejected-title[b-a2pbbyi5qu] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.75rem 0 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--n-190);
}

/* Compartiment « Rejetées » : fond rouge très pâle (plus de liseré — v2.131.0). Le statut
   lui-même est porté par la pastille de la carte. */
.ts-card.rejected[b-a2pbbyi5qu] {
    background: var(--w-danger-50);
}

.reject-comment[b-a2pbbyi5qu] {
    font-size: 0.9rem;
    color: var(--w-danger-900);
    background: var(--w-danger-200);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
}

    .reject-comment-label[b-a2pbbyi5qu] {
        font-weight: 600;
    }

/* Badge de signalement dans le sous-titre. */
.reject-badge[b-a2pbbyi5qu] {
    background: var(--w-danger-200);
    color: var(--w-danger-700);
    text-decoration: none;
    font-weight: 600;
}

    .reject-badge:hover[b-a2pbbyi5qu] {
        background: var(--w-danger-300);
        color: var(--w-danger-900);
    }

/* --- Actions en lot (file d'attente) --- */
.bulk-bar[b-a2pbbyi5qu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    background: var(--n-60);
    border: 1px solid var(--n-190);
    border-radius: 10px;
}

    .bulk-bar .bulk-all[b-a2pbbyi5qu] {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    .bulk-bar .bulk-count[b-a2pbbyi5qu] {
        font-size: 0.9rem;
        color: var(--text-muted);
    }

    .bulk-bar .bulk-comment[b-a2pbbyi5qu] {
        flex: 1 1 16rem;
        max-width: 30rem;
    }

.ts-card .ts-main .ts-select[b-a2pbbyi5qu] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.2rem;
    cursor: pointer;
}

.ts-card.selected[b-a2pbbyi5qu] {
    box-shadow: 0 0 0 2px var(--accent-soft);
}
/* /Pages/Clients.razor.rz.scp.css */
/* Clients — présentation en cartes. */

.client-list[b-diiwakq1al] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.client-card[b-diiwakq1al] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.client-head[b-diiwakq1al] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.client-id[b-diiwakq1al] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.avatar[b-diiwakq1al] {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--w-warn-100);
    color: var(--brass-strong);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.client-name[b-diiwakq1al] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.2;
}

.icon-btn[b-diiwakq1al] {
    border: 0;
    background: transparent;
    color: var(--n-450);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    /* Visible au repos, discret : masqué derrière un survol, il est introuvable — et
       inatteignable sur écran tactile, où le survol n'existe pas (v2.127). */
    opacity: .55;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

.client-card:hover .icon-btn[b-diiwakq1al],
.icon-btn:focus-visible[b-diiwakq1al] {
    opacity: 1;
}

.icon-btn:hover[b-diiwakq1al] {
    color: var(--brass-strong);
    background: var(--w-warn-100);
}

.icon-btn:disabled[b-diiwakq1al] {
    opacity: .2;
    cursor: default;
}

.client-rename[b-diiwakq1al] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.client-rename input[b-diiwakq1al] {
    max-width: 240px;
}

.code-chip[b-diiwakq1al] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--n-140);
    border-radius: 6px;
    padding: 0.08em 0.5em;
    letter-spacing: 0.03em;
    margin-top: 0.15rem;
}

.lead-box[b-diiwakq1al] {
    text-align: right;
}

    .lead-box .lead-label[b-diiwakq1al] {
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .lead-box .lead-value[b-diiwakq1al] {
        font-weight: 600;
        color: var(--text);
    }

    .lead-box .lead-value.none[b-diiwakq1al] {
        color: #9aa2ad;
        font-weight: 500;
        font-style: italic;
    }

.client-controls[b-diiwakq1al] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--n-150);
}

.projects-panel[b-diiwakq1al] {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--n-150);
}

    .projects-panel h6[b-diiwakq1al] {
        font-weight: 600;
        margin-bottom: 0.6rem;
    }
/* /Pages/Groups.razor.rz.scp.css */
/* Groupes — trombinoscope d'équipe : cartes à liseré d'accent, avatars à initiales,
   administrateurs mis en avant (avatar cerclé + couronne). Thème « Chronomètre ». */

/* --- Barre de création --- */
.new-group[b-aro1j0bf36] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.ng-field[b-aro1j0bf36] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 16rem;
}

    .ng-field label[b-aro1j0bf36] {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .ng-field input[b-aro1j0bf36] {
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 0.95rem;
        background: var(--surface);
    }

    .ng-field input:focus[b-aro1j0bf36] {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

/* --- État vide --- */
.groups-empty[b-aro1j0bf36] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 1.2rem;
    color: var(--text-muted);
    background: var(--accent-soft);
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius);
}

.ge-glyph[b-aro1j0bf36] {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--accent);
}

.groups-empty p[b-aro1j0bf36] { margin: 0; }

/* --- Grille de cartes --- */
.group-grid[b-aro1j0bf36] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

.group-card[b-aro1j0bf36] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

    .group-card:hover[b-aro1j0bf36] { box-shadow: var(--shadow); }

/* En-tête */
.gc-head[b-aro1j0bf36] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
}

.gc-title[b-aro1j0bf36] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.gc-mark[b-aro1j0bf36] {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gc-name[b-aro1j0bf36] {
    font-weight: 700;
    color: var(--n-900);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-count[b-aro1j0bf36] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.gc-rename[b-aro1j0bf36] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

    .gc-rename input[b-aro1j0bf36] {
        max-width: 200px;
    }

.gc-tools[b-aro1j0bf36] { display: flex; gap: 0.3rem; flex: 0 0 auto; }

.icon-btn[b-aro1j0bf36] {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: all 0.12s ease;
}

    .icon-btn:hover[b-aro1j0bf36] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .icon-btn.danger:hover[b-aro1j0bf36] { border-color: #dc2626; color: #dc2626; background: var(--w-danger-100); }
    .icon-btn:disabled[b-aro1j0bf36] { opacity: 0.5; cursor: default; }

/* Corps */
.gc-body[b-aro1j0bf36] { padding: 0.75rem 1rem 0.4rem; }

.gc-none[b-aro1j0bf36] {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0.3rem 0 0.6rem;
}

.gc-label[b-aro1j0bf36] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0.5rem 0 0.35rem;
}

.gc-list[b-aro1j0bf36] { list-style: none; margin: 0 0 0.5rem; padding: 0; }

.gc-member[b-aro1j0bf36] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.35rem;
    border-radius: 8px;
}

    .gc-member:hover[b-aro1j0bf36] { background: var(--n-90); }
    .gc-member.is-admin[b-aro1j0bf36] { background: var(--accent-soft); }
    .gc-member.is-admin:hover[b-aro1j0bf36] { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }

.gc-avatar[b-aro1j0bf36] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-140);
    color: var(--n-700);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.is-admin .gc-avatar[b-aro1j0bf36] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.gc-mname[b-aro1j0bf36] {
    font-weight: 500;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-crown[b-aro1j0bf36] { color: var(--accent); font-size: 0.85rem; flex: 0 0 auto; }

.gc-actions[b-aro1j0bf36] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    /* Visibles au repos (v2.136.0) : masquées, elles étaient introuvables — et inatteignables sur
       écran tactile, où le survol n'existe pas. Elles s'affirment au survol et au clavier. */
    opacity: .55;
    transition: opacity 0.12s ease;
}

.gc-member:hover .gc-actions[b-aro1j0bf36],
.gc-member:focus-within .gc-actions[b-aro1j0bf36] { opacity: 1; }

.link-btn[b-aro1j0bf36] {
    border: none;
    background: none;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    white-space: nowrap;
}

    .link-btn:hover[b-aro1j0bf36] { background: var(--accent-soft); }
    .link-btn:disabled[b-aro1j0bf36] { opacity: 0.5; cursor: default; }

.x-btn[b-aro1j0bf36] {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.35rem;
    border-radius: 6px;
}

    .x-btn:hover[b-aro1j0bf36] { color: #dc2626; background: var(--w-danger-100); }
    .x-btn:disabled[b-aro1j0bf36] { opacity: 0.4; cursor: default; }

/* Pied : ajout de membre */
.gc-add[b-aro1j0bf36] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--n-60);
}

    .gc-add .form-select[b-aro1j0bf36] { flex: 1 1 auto; min-width: 0; }

.gc-asadmin[b-aro1j0bf36] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin: 0;
    cursor: pointer;
}

/* Pied en lecture seule : l'utilisateur est membre de l'équipe sans pouvoir la modifier. */
.gc-readonly[b-aro1j0bf36] {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--n-60);
    font-size: 0.82rem;
    color: var(--text-muted);
}
/* /Pages/Home.razor.rz.scp.css */
/* Accueil — hero « chronomètre » + grille de cartes de navigation. */

/* Le hero reprend les jetons du RAIL, pas des valeurs à lui : c'est la même identité, en
   grand. Sans cela, il restait encre et laiton quelle que soit la palette choisie — défaut
   signalé sur « Apparence », corrigé en v2.153.0. */
.hero[b-zcq68n1tmx] {
    background: linear-gradient(135deg, var(--rail-bg) 0%, var(--rail-bg-2) 100%);
    border-radius: 14px;
    color: var(--rail-text-strong);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}

    .hero h1[b-zcq68n1tmx] {
        color: var(--rail-text-strong);
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
    }

    .hero .tagline[b-zcq68n1tmx] {
        color: var(--brand-mark-from);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
    }

    .hero .lead[b-zcq68n1tmx] {
        color: var(--rail-text);
        max-width: 46rem;
        margin: 0.5rem 0 0;
    }

.hero-meta[b-zcq68n1tmx] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

    .hero-meta .meta-label[b-zcq68n1tmx] {
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--brand-sub);
    }

    .hero-meta .meta-value[b-zcq68n1tmx] {
        font-size: 1.05rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--rail-text-strong);
    }

/* --- Grille de cartes --- */
.nav-grid[b-zcq68n1tmx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.nav-card[b-zcq68n1tmx] {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    /* Liseré neutre. La couleur par destination a été retirée : sept teintes côte à côte
       saturaient l'accueil, et le titre de chaque carte identifie déjà la section. */

    .nav-card:hover[b-zcq68n1tmx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
        text-decoration: none;
        color: inherit;
    }

    .nav-card .icon[b-zcq68n1tmx] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 10px;
        background: var(--accent-soft);
        color: var(--accent);
        margin-bottom: 0.7rem;
    }

        .nav-card .icon svg[b-zcq68n1tmx] {
            width: 1.3rem;
            height: 1.3rem;
        }

    .nav-card .title[b-zcq68n1tmx] {
        font-weight: 700;
        color: var(--text);
    }

    .nav-card .desc[b-zcq68n1tmx] {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-top: 0.15rem;
    }

/* --- Tableau de bord (KPI) --- */
.dash-title[b-zcq68n1tmx] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 0.75rem;
}

.kpi-grid[b-zcq68n1tmx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.kpi-tile[b-zcq68n1tmx] {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .kpi-tile:hover[b-zcq68n1tmx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
        text-decoration: none;
        color: inherit;
    }

    .kpi-tile .kpi-value[b-zcq68n1tmx] {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

    .kpi-tile .kpi-label[b-zcq68n1tmx] {
        margin-top: 0.35rem;
        font-size: 0.82rem;
        color: var(--text-muted);
    }

/* Tuile « à traiter » : fond rouge très pâle quand des éléments attendent une action. */
.kpi-tile.kpi-warn[b-zcq68n1tmx] {
    background: var(--w-danger-50);
}

    .kpi-tile.kpi-warn .kpi-value[b-zcq68n1tmx] {
        color: var(--w-danger-700);
    }

/* Widgets « À faire » (listes actionnables) */
.todo-empty[b-zcq68n1tmx] {
    color: #15803d;
    font-weight: 600;
}

.todo-grid[b-zcq68n1tmx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

.todo-card[b-zcq68n1tmx] {
    background: var(--surface);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

    .todo-card.todo-warn[b-zcq68n1tmx] {
        /* Plus de barre (v2.131.0) : un fond très pâle, et la pastille du compteur, suffisent. */
        background: var(--w-warn-50);
    }

.todo-head[b-zcq68n1tmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.todo-title[b-zcq68n1tmx] {
    font-weight: 700;
    color: var(--text);
}

.todo-badge[b-zcq68n1tmx] {
    min-width: 1.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--surface);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .todo-badge.warn[b-zcq68n1tmx] {
        background: #d97706;
    }

.todo-list[b-zcq68n1tmx] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .todo-list li[b-zcq68n1tmx] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0;
        border-top: 1px solid var(--line);
    }

    .todo-list li:first-child[b-zcq68n1tmx] {
        border-top: none;
    }

.todo-main[b-zcq68n1tmx] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.todo-sub[b-zcq68n1tmx] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-list li .btn[b-zcq68n1tmx] {
    flex: 0 0 auto;
    margin-left: auto;
}

.todo-more[b-zcq68n1tmx] {
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}
/* /Pages/PeriodLock.razor.rz.scp.css */
/* Verrouillage de période — encadré d'avertissement et bloc de résultat. */

.danger-note[b-wspixlvbty] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--w-warn-60);
    border: 1px solid var(--w-warn-310);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: var(--w-warn-900);
    max-width: 720px;
    margin-bottom: 1.25rem;
}

    .danger-note .note-icon[b-wspixlvbty] {
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 1px;
    }

.quick-ranges[b-wspixlvbty] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* --- Bloc de résultat de prévisualisation --- */
.lock-result[b-wspixlvbty] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--n-190);
    border-radius: 10px;
    background: var(--n-60);
}

    .lock-result.has-target[b-wspixlvbty] {
        border-color: var(--w-warn-310);
        background: var(--w-warn-60);
    }

    .lock-result .lock-icon[b-wspixlvbty] {
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 auto;
        color: var(--brass-strong);
    }

    .lock-result .count[b-wspixlvbty] {
        font-size: 2rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        color: var(--text);
    }

    .lock-result .count-label[b-wspixlvbty] {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

.lock-actions[b-wspixlvbty] {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* /Pages/ProjectDetail.razor.rz.scp.css */
/* Fiche projet — en-tête, tuiles de métriques, titres de section. */

.detail-title[b-916jplpiyr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

    .detail-title h1[b-916jplpiyr] {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0;
    }

.detail-sub[b-916jplpiyr] {
    color: var(--text-muted);
    margin: 0.25rem 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .detail-sub .code-chip[b-916jplpiyr] {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        background: var(--n-140);
        border-radius: 6px;
        padding: 0.08em 0.5em;
        letter-spacing: 0.03em;
    }

/* --- Tuiles de métriques --- */
.metric-grid[b-916jplpiyr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.metric-tile[b-916jplpiyr] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .metric-tile .m-value[b-916jplpiyr] {
        font-size: 1.45rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--text);
    }

    .metric-tile .m-value .u[b-916jplpiyr] {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-left: 0.1rem;
    }

    .metric-tile .m-label[b-916jplpiyr] {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        font-weight: 600;
        margin-top: 0.15rem;
    }

/* Liste clé/valeur des informations restantes */
.detail-facts[b-916jplpiyr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0;
}

    .detail-facts .fact[b-916jplpiyr] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.35rem 0;
        border-bottom: 1px solid var(--n-150);
    }

    .detail-facts .fact .k[b-916jplpiyr] { color: var(--text-muted); }
    .detail-facts .fact .v[b-916jplpiyr] { font-weight: 600; color: var(--text); text-align: right; }

@media (max-width: 640px) {
    .detail-facts[b-916jplpiyr] { grid-template-columns: 1fr; }
}

/* --- Cartes de tâches --- */
.task-grid[b-916jplpiyr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    /* Chaque carte prend SA hauteur (voir .user-grid) : renommer une tache ne doit pas faire
       grandir les taches voisines. */
    align-items: start;
}

.task-card[b-916jplpiyr] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.task-card-head[b-916jplpiyr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

    .task-card-head .task-name[b-916jplpiyr] {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-weight: 600;
        color: var(--text);
        line-height: 1.25;
    }

    .task-card-head .star[b-916jplpiyr] {
        color: #d98a2b;
        margin-right: 0.25rem;
    }

    .task-card-head .icon-btn[b-916jplpiyr] {
        border: 0;
        background: transparent;
        color: var(--n-450);
        font-size: 0.8rem;
        line-height: 1;
        padding: 0.1rem 0.2rem;
        border-radius: 6px;
        cursor: pointer;
        /* Visible au repos (v2.136.0) : voir la leçon des v2.127/v2.128. */
        opacity: .55;
        transition: color 0.15s, background 0.15s, opacity 0.15s;
    }

    .task-card:hover .task-card-head .icon-btn[b-916jplpiyr],
    .task-card-head .icon-btn:focus-visible[b-916jplpiyr] {
        opacity: 1;
    }

        .task-card-head .icon-btn:hover[b-916jplpiyr] {
            color: var(--brass-strong);
            background: var(--w-warn-100);
        }

    .task-rename[b-916jplpiyr] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
    }

        .task-rename input[b-916jplpiyr] {
            flex: 1 1 auto;
            min-width: 0;
        }

.task-assignees[b-916jplpiyr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

    .task-assignees .chip[b-916jplpiyr] {
        background: var(--n-140);
        color: var(--n-700);
        border-radius: 999px;
        padding: 0.12em 0.6em;
        font-size: 0.78rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
    }

    .task-assignees .chip .x[b-916jplpiyr] {
        border: none;
        background: none;
        cursor: pointer;
        color: var(--n-500);
        font-size: 1em;
        line-height: 1;
        padding: 0;
    }

        .task-assignees .chip .x:hover[b-916jplpiyr] { color: var(--w-danger-700); }

    .task-assignees .none[b-916jplpiyr] { color: #9aa2ad; font-size: 0.82rem; }

.task-actions[b-916jplpiyr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding-top: 0.55rem;
    border-top: 1px solid var(--n-150);
}

    .task-actions .assign-row[b-916jplpiyr] {
        display: flex;
        gap: 0.3rem;
        flex: 1 1 auto;
    }

/* --- Titres de section --- */
.section-title[b-916jplpiyr] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.75rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--n-190);
}

/* En-tête d'une section repliable (historique, affectations) : le titre EST le bouton, précédé d'un
   chevron qui dit l'état. Motif partagé — ne pas le redéfinir par section. */
.section-collapse-head[b-916jplpiyr] {
    margin-bottom: .5rem;
}

.section-collapse-toggle[b-916jplpiyr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

    .section-collapse-toggle .chevron[b-916jplpiyr] {
        color: var(--accent);
        font-size: .85rem;
    }

.history-scroll[b-916jplpiyr] {
    max-height: 18rem;      /* hauteur par défaut : au-delà, on défile */
    min-height: 4rem;
    overflow-y: auto;
    resize: vertical;       /* poignée native : glisser pour agrandir / réduire */
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .375rem;
}

.history-hint[b-916jplpiyr] {
    font-size: .78rem;
    margin: .35rem 0 0;
}

/* Budget vs réel (barre « bullet » + repère calendrier) */
.budget-vs[b-916jplpiyr] {
    margin: 0.85rem 0 1rem;
}

    .budget-vs h6[b-916jplpiyr] {
        margin: 0 0 0.4rem;
    }

.bv-bar[b-916jplpiyr] {
    position: relative;
    height: 1.4rem;
    background: #eef0f3;
    border-radius: 7px;
    overflow: hidden;
}

.bv-fill[b-916jplpiyr] {
    height: 100%;
    background: #1f6f7a;
    border-radius: 7px 0 0 7px;
    transition: width 0.25s ease;
}

    .bv-fill.near[b-916jplpiyr] {
        background: #d97706;
    }

    .bv-fill.over[b-916jplpiyr] {
        background: #dc2626;
    }

/* Repère du calendrier écoulé : trait vertical sombre par-dessus la barre. */
.bv-marker[b-916jplpiyr] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #1f2733;
    transform: translateX(-1px);
}

    .bv-marker[b-916jplpiyr]::after {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        border: 4px solid transparent;
        border-top-color: #1f2733;
    }

.bv-legend[b-916jplpiyr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.bv-k[b-916jplpiyr] {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.bv-over[b-916jplpiyr] {
    color: #dc2626;
    font-weight: 600;
}

.bv-pace[b-916jplpiyr] {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Frise des tâches (mini-Gantt sur axe de dates réelles) */
.gantt[b-916jplpiyr] {
    margin: 0.5rem 0 1rem;
    font-size: 0.85rem;
}

.gantt-axis[b-916jplpiyr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding: 0 0 0.35rem;
    border-bottom: 1px solid var(--n-200);
    margin-bottom: 0.4rem;
}

.gantt-axis-span[b-916jplpiyr] {
    font-size: 0.72rem;
}

.gantt-row[b-916jplpiyr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.18rem 0;
}

.gantt-label[b-916jplpiyr] {
    flex: 0 0 34%;
    max-width: 34%;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.gantt-name[b-916jplpiyr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .gantt-name.closed[b-916jplpiyr] {
        color: var(--n-480);
        text-decoration: line-through;
    }

.gantt-dep[b-916jplpiyr] {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: help;
}

.gantt-track[b-916jplpiyr] {
    position: relative;
    flex: 1 1 auto;
    height: 1.15rem;
    background: #f2f4f7;
    border-radius: 6px;
}

.gantt-bar[b-916jplpiyr] {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 3px;
    border-radius: 6px;
    background: #1f6f7a;
    overflow: hidden;
}

    .gantt-bar.closed[b-916jplpiyr] {
        background: #64748b;
    }

    .gantt-bar.conflict[b-916jplpiyr] {
        outline: 2px solid #dc2626;
        outline-offset: 1px;
    }

.gantt-fill[b-916jplpiyr] {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(255, 255, 255, 0.28);
}

.gantt-bar-label[b-916jplpiyr] {
    position: relative;
    z-index: 1;
    padding: 0 0.3rem;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.gantt-nostart[b-916jplpiyr] {
    color: var(--n-480);
    font-style: italic;
    font-size: 0.78rem;
}

.gantt-warn[b-916jplpiyr] {
    margin: 0.1rem 0 0.3rem 34%;
    color: #dc2626;
    font-size: 0.76rem;
    font-weight: 600;
}

.gantt-hint[b-916jplpiyr] {
    margin: 0.5rem 0 0;
    font-size: 0.74rem;
}
/* /Pages/Projects.razor.rz.scp.css */
/* Projets — grille de cartes. */

.project-grid[b-joskjelecc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
    /* Chaque carte prend SA hauteur : sans cela, renommer un projet etire ses voisines de rangee,
       qui semblent alors s ouvrir elles aussi. Meme regle que .user-grid et .group-grid. */
    align-items: start;
}

.project-card[b-joskjelecc] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .project-card:hover[b-joskjelecc] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
        border-color: var(--accent);
    }

    .project-card.selected[b-joskjelecc] {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent-soft);
    }

.pc-head[b-joskjelecc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

    .pc-head .pc-name[b-joskjelecc] {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.2;
        font-size: 0.98rem;
    }

    .pc-head .icon-btn[b-joskjelecc] {
        border: 0;
        background: transparent;
        color: var(--n-450);
        font-size: 0.85rem;
        line-height: 1;
        padding: 0.1rem 0.2rem;
        border-radius: 6px;
        cursor: pointer;
        /* Visible au repos (v2.136.0) : voir la leçon des v2.127/v2.128. */
        opacity: .55;
        transition: color 0.15s, background 0.15s, opacity 0.15s;
    }

    .project-card:hover .pc-head .icon-btn[b-joskjelecc],
    .pc-head .icon-btn:focus-visible[b-joskjelecc] {
        opacity: 1;
    }

        .pc-head .icon-btn:hover[b-joskjelecc] {
            color: var(--brass-strong);
            background: var(--w-warn-100);
        }

    .pc-rename[b-joskjelecc] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .pc-rename input[b-joskjelecc] {
            max-width: 200px;
        }

    .pc-head .code-chip[b-joskjelecc] {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        background: var(--n-140);
        border-radius: 6px;
        padding: 0.06em 0.5em;
        margin-top: 0.25rem;
        letter-spacing: 0.03em;
    }

    .pc-head input[type=checkbox][b-joskjelecc] {
        width: 1.05rem;
        height: 1.05rem;
        flex: 0 0 auto;
    }

.pc-progress[b-joskjelecc] {
    height: 6px;
    border-radius: 999px;
    background: var(--n-150);
    overflow: hidden;
    margin-top: 0.7rem;
}

    .pc-progress > span[b-joskjelecc] {
        display: block;
        height: 100%;
        background: var(--gauge-fill);
    }

.pc-metrics[b-joskjelecc] {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.7rem;
}

    .pc-metric .v[b-joskjelecc] {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .pc-metric .l[b-joskjelecc] {
        display: block;
        font-size: 0.64rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

.pc-foot[b-joskjelecc] {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--n-150);
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.project-card:focus-visible[b-joskjelecc] {
    outline: 2px solid #1f6f7a;
    outline-offset: 2px;
}
/* /Pages/Reports.razor.rz.scp.css */
/* Rapports — tuiles KPI, jauges et mini-barres (thème Chronomètre). */

.report-head[b-z3oc3u9u5z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .report-head .project-name[b-z3oc3u9u5z] {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text);
    }

    .report-head .project-code[b-z3oc3u9u5z] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

/* --- Tuiles KPI --- */
.stat-grid[b-z3oc3u9u5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-tile[b-z3oc3u9u5z] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .stat-tile .stat-label[b-z3oc3u9u5z] {
        color: var(--text-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
    }

    .stat-tile .stat-value[b-z3oc3u9u5z] {
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.1;
        margin-top: 0.15rem;
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .stat-tile .stat-value .unit[b-z3oc3u9u5z] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-left: 0.15rem;
    }

    /* Plus de barre : le dépassement de budget est dit par la pastille « Dépassé » (v2.131.0). */
    .stat-tile.over[b-z3oc3u9u5z] { background: var(--w-danger-50); }

/* --- Jauges --- */
.meter-block[b-z3oc3u9u5z] {
    margin-bottom: 1.25rem;
}

    .meter-block .meter-caption[b-z3oc3u9u5z] {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-bottom: 0.35rem;
    }

.meter[b-z3oc3u9u5z] {
    height: 14px;
    border-radius: 999px;
    background: #eceef2;
    overflow: hidden;
    display: flex;
}

    .meter .seg-billable[b-z3oc3u9u5z] {
        background: var(--gauge-fill-strong);
        height: 100%;
    }

    .meter .seg-fill[b-z3oc3u9u5z] {
        background: var(--n-700);
        height: 100%;
    }

    .meter .seg-fill.over[b-z3oc3u9u5z] {
        background: var(--w-danger-700);
    }

.meter-legend[b-z3oc3u9u5z] {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--n-580);
}

    .meter-legend .key[b-z3oc3u9u5z] {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
    }

    .meter-legend .swatch[b-z3oc3u9u5z] {
        width: 0.7em;
        height: 0.7em;
        border-radius: 3px;
        display: inline-block;
    }

    .meter-legend .swatch.billable[b-z3oc3u9u5z] { background: var(--gauge-fill-strong); }
    .meter-legend .swatch.nonbillable[b-z3oc3u9u5z] { background: #c3c9d2; }

/* --- Mini-barre de magnitude dans les tableaux --- */
.magnitude[b-z3oc3u9u5z] {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--gauge-fill);
    min-width: 2px;
}

.magnitude-track[b-z3oc3u9u5z] {
    background: var(--n-150);
    border-radius: 999px;
    width: 90px;
}

/* Sélecteur multi-projets (rapport combiné) */
.project-picker[b-z3oc3u9u5z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.35rem 1rem;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--n-190);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
}

    .project-picker .pick[b-z3oc3u9u5z] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        cursor: pointer;
    }

/* --- Préréglages de période --- */
.period-presets[b-z3oc3u9u5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

    .period-presets .pp-label[b-z3oc3u9u5z] {
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 600;
        margin-right: 0.15rem;
    }

/* --- Barre des modèles de rapport ---------------------------------------------------------
   Une pastille est une COMMANDE, pas une étiquette : elle doit se voir au repos (jamais
   d'opacité nulle en attente d'un survol, cf. v2.127) et dire en un coup d'œil sur quelle
   période elle porte. */
.favorite-bar[b-z3oc3u9u5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

    .favorite-bar .fav-label[b-z3oc3u9u5z] {
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 600;
        margin-right: 0.15rem;
    }

    .favorite-bar .fav-empty[b-z3oc3u9u5z] {
        font-size: 0.85rem;
        font-style: italic;
    }

.fav-chip[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    max-width: 30rem;
    padding: 0.18rem 0.45rem 0.18rem 0.6rem;
    border: 1px solid var(--accent-soft-solid, #e8c79a);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text, var(--n-900));
    font-size: 0.85rem;
}

    .fav-chip.confirming[b-z3oc3u9u5z] {
        border-color: var(--w-danger-700);
        gap: 0.4rem;
        padding-right: 0.6rem;
    }

    /* Le geste principal (appliquer) occupe toute la pastille sauf les deux icônes. */
    .fav-chip .fav-apply[b-z3oc3u9u5z] {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        max-width: 22rem;
        padding: 0.1rem 0.25rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
    }

        .fav-chip .fav-apply:hover[b-z3oc3u9u5z],
        .fav-chip .fav-apply:focus-visible[b-z3oc3u9u5z] {
            background: var(--accent-soft, rgba(185, 114, 26, .12));
        }

    .fav-chip .fav-star[b-z3oc3u9u5z] {
        color: var(--accent, #b9721a);
        font-size: 0.8rem;
    }

    .fav-chip .fav-name[b-z3oc3u9u5z] {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fav-chip .fav-rename[b-z3oc3u9u5z] {
        width: 13rem;
        height: 1.7rem;
        font-size: 0.85rem;
    }

    /* Discret, jamais invisible : une opacité nulle au repos rend la commande introuvable et
       inatteignable au doigt (v2.127, v2.128, v2.136). */
    .fav-chip .icon-btn[b-z3oc3u9u5z] {
        border: 0;
        background: transparent;
        color: var(--text-muted);
        opacity: .55;
        padding: 0.1rem 0.25rem;
        line-height: 1;
        cursor: pointer;
        border-radius: 4px;
    }

        .fav-chip .icon-btn:hover[b-z3oc3u9u5z],
        .fav-chip .icon-btn:focus-visible[b-z3oc3u9u5z] {
            opacity: 1;
            background: rgba(0, 0, 0, .05);
        }

        .fav-chip .icon-btn.danger:hover[b-z3oc3u9u5z],
        .fav-chip .icon-btn.danger:focus-visible[b-z3oc3u9u5z] {
            color: var(--w-danger-700);
        }

    /* La période est le second mot de la pastille : sans elle, deux modèles voisins se
       ressemblent trop pour qu'on sache lequel cliquer. */
    .fav-chip .fav-period[b-z3oc3u9u5z] {
        color: var(--text-muted);
        font-size: 0.78rem;
        white-space: nowrap;
    }

.favorite-bar .fav-form[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .favorite-bar .fav-form .form-control[b-z3oc3u9u5z] {
        width: 15rem;
    }

/* --- Graphique en barres horizontales (une seule teinte = accent de section) --- */
.bar-chart[b-z3oc3u9u5z] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bar-row[b-z3oc3u9u5z] {
    display: grid;
    grid-template-columns: minmax(6rem, 14rem) 1fr auto auto;
    align-items: center;
    gap: 0.7rem;
}

    .bar-row .bar-label[b-z3oc3u9u5z] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
        color: var(--text);
    }

    .bar-row .bar-track[b-z3oc3u9u5z] {
        background: #eef1f4;
        border-radius: 999px;
        height: 0.9rem;
        overflow: hidden;
    }

        /* La barre entière vaut le total ; le segment foncé qu'elle contient, la part facturable.
           Deux tons du même accent plutôt que deux couleurs : la lecture reste vraie une fois
           imprimée en noir et blanc, comme dans le PDF. */
        .bar-row .bar-track .bar-fill[b-z3oc3u9u5z] {
            display: block;
            height: 100%;
            min-width: 2px;
            background: var(--accent-soft-solid, #e8c79a);
            border-radius: 999px;
            transition: width .2s ease;
            overflow: hidden;
        }

            .bar-row .bar-track .bar-fill .bar-billable[b-z3oc3u9u5z] {
                display: block;
                height: 100%;
                background: var(--accent);
                border-radius: 999px 0 0 999px;
            }

            /* Tout facturable : l'arrondi de droite revient au segment, sinon la barre paraît coupée. */
            .bar-row .bar-track .bar-fill .bar-billable[style*="width:100%"][b-z3oc3u9u5z] {
                border-radius: 999px;
            }

    .bar-row .bar-pct[b-z3oc3u9u5z] {
        font-variant-numeric: tabular-nums;
        font-size: 0.8rem;
        color: var(--text-muted);
        white-space: nowrap;
        min-width: 2.6rem;
        text-align: right;
    }

/* Légende du graphique : reprend les pastilles des jauges, pour une seule grammaire visuelle. */
.bar-legend[b-z3oc3u9u5z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

    .bar-legend .key[b-z3oc3u9u5z] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .bar-legend .swatch[b-z3oc3u9u5z] {
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 3px;
        display: inline-block;
    }

    .bar-legend .swatch.billable[b-z3oc3u9u5z] { background: var(--accent); }
    .bar-legend .swatch.nonbillable[b-z3oc3u9u5z] { background: #e8c79a; }

    .bar-row .bar-val[b-z3oc3u9u5z] {
        font-variant-numeric: tabular-nums;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
    }

/* Comparaison de périodes */
.cmp-controls[b-z3oc3u9u5z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cmp-toggle[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.cmp-field[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .cmp-field .form-control[b-z3oc3u9u5z] {
        width: auto;
    }

.cmp-k[b-z3oc3u9u5z] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.cmp-caption[b-z3oc3u9u5z] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.stat-delta[b-z3oc3u9u5z] {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .stat-delta.up[b-z3oc3u9u5z] {
        color: #1f6f7a;
    }

    .stat-delta.down[b-z3oc3u9u5z] {
        color: #64748b;
    }

    .stat-delta.flat[b-z3oc3u9u5z] {
        color: var(--n-480);
    }

/* Drill-down par employé (répartition par tâche) */
.emp-row[b-z3oc3u9u5z] {
    cursor: pointer;
}

    .emp-row:hover[b-z3oc3u9u5z] {
        background: rgba(31, 111, 122, 0.06);
    }

    .emp-row.expanded[b-z3oc3u9u5z] {
        background: rgba(31, 111, 122, 0.09);
    }

.drill-caret[b-z3oc3u9u5z] {
    display: inline-block;
    width: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.drill-row > td[b-z3oc3u9u5z] {
    background: var(--n-80);
    padding: 0.5rem 0.75rem;
}

.drill-title[b-z3oc3u9u5z] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--n-650);
    margin-bottom: 0.35rem;
}

.drill-table[b-z3oc3u9u5z] {
    background: var(--surface);
    font-size: 0.85rem;
}

.emp-row:focus-visible[b-z3oc3u9u5z] {
    outline: 2px solid #1f6f7a;
    outline-offset: -2px;
}

/* Formulaire de planification en ligne (historique des rapports) */
.sched-form-row > td[b-z3oc3u9u5z] {
    background: var(--n-80);
}

.sched-form[b-z3oc3u9u5z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sched-form-label[b-z3oc3u9u5z] {
    font-weight: 600;
}

.sched-paused td[b-z3oc3u9u5z] {
    opacity: 0.6;
}

/* Renommage en place d'un rapport enregistré */
.snap-name[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.icon-btn[b-z3oc3u9u5z] {
    border: 0;
    background: transparent;
    color: var(--n-450);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    /* Visible au repos, discret : masqué derrière un survol, il est introuvable — et
       inatteignable sur écran tactile, où le survol n'existe pas (v2.127). */
    opacity: .55;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

tr:hover .icon-btn[b-z3oc3u9u5z],
.icon-btn:focus-visible[b-z3oc3u9u5z] {
    opacity: 1;
}

.icon-btn:hover[b-z3oc3u9u5z] {
    color: var(--brass-strong);
    background: var(--w-warn-100);
}

.icon-btn:disabled[b-z3oc3u9u5z] {
    opacity: .2;
    cursor: default;
}

.snap-rename[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .snap-rename input[b-z3oc3u9u5z] {
        max-width: 240px;
    }

/* --- Réglages du PDF, à côté des boutons de téléchargement --- */
.pdf-options[b-z3oc3u9u5z] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .35rem;
    color: var(--text-muted);
    font-size: .85rem;
    white-space: nowrap;
}

    .pdf-options select[b-z3oc3u9u5z] {
        width: auto;
        min-width: 6.5rem;
    }

/* --- Rangée de graphiques : deux côte à côte, empilés sur écran étroit --- */
.chart-row[b-z3oc3u9u5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
    align-items: start;   /* une carte qui compte plus de barres n'étire pas sa voisine */
}

    .chart-row > .card[b-z3oc3u9u5z] {
        margin-bottom: 0;
    }

/* Un tableau plus large que sa carte défile DANS son conteneur, et ne pousse donc jamais son
   contenu — boutons d'action compris — hors du cadre (v2.165.0). */
.table-scroll[b-z3oc3u9u5z] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* /Pages/Tasks.razor.rz.scp.css */
/* Mise en page : colonne de sélection des projets à gauche, tâches à droite. */
.tasks-layout[b-qb9ns0vum2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.tasks-projects[b-qb9ns0vum2] {
    flex: 0 0 15rem;
    max-width: 15rem;
    padding: .5rem 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.tp-head[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .8rem .5rem;
    border-bottom: 1px solid var(--accent-soft);
    margin-bottom: .3rem;
}

.tp-title[b-qb9ns0vum2] {
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .8rem;
}

.tp-actions[b-qb9ns0vum2] {
    display: flex;
    gap: .5rem;
}

/* Avancement moyen global (tous projets), en tête de la colonne. */
.tp-global[b-qb9ns0vum2] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .1rem .8rem .6rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--accent-soft);
}

.tp-global-top[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tp-global-label[b-qb9ns0vum2] {
    font-weight: 600;
    font-size: .78rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.tp-global-pct[b-qb9ns0vum2] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .tp-global .tp-avg-bar[b-qb9ns0vum2] {
        height: .45rem;
    }

.tp-list[b-qb9ns0vum2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-item[b-qb9ns0vum2] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    padding: .35rem .8rem;
    margin: 0;
    cursor: pointer;
    border-radius: .3rem;
}

    .tp-item:hover[b-qb9ns0vum2] {
        background-color: var(--accent-soft);
    }

.tp-row[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tp-name[b-qb9ns0vum2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-count[b-qb9ns0vum2] {
    color: var(--text-muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* Décompte des tâches ouvertes (point bleu) vs fermées (point vert) par projet. */
.tp-counts[b-qb9ns0vum2] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.tp-c-open[b-qb9ns0vum2],
.tp-c-closed[b-qb9ns0vum2] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--n-620);
}

    .tp-c-open[b-qb9ns0vum2]::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 999px;
        background: #2563eb;
    }

    .tp-c-closed[b-qb9ns0vum2]::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 999px;
        background: #15803d;
    }

/* Avancement moyen du projet : mini-barre colorée (même rampe que les cartes) + %. */
.tp-avg-row[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: 1.35rem;
}

.tp-avg-bar[b-qb9ns0vum2] {
    flex: 1 1 auto;
    height: .35rem;
    background: var(--accent-soft);
    border-radius: 999px;
    overflow: hidden;
}

.tp-avg-fill[b-qb9ns0vum2] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    min-width: 2px;
}

    .tp-avg-fill.low[b-qb9ns0vum2] {
        background: #dc2626;
    }

    .tp-avg-fill.mid[b-qb9ns0vum2] {
        background: #f59e0b;
    }

    .tp-avg-fill.high[b-qb9ns0vum2] {
        background: #84cc16;
    }

    .tp-avg-fill.full[b-qb9ns0vum2] {
        background: #15803d;
    }

    .tp-avg-fill.none[b-qb9ns0vum2] {
        background: transparent;
        min-width: 0;
    }

.tp-avg-pct[b-qb9ns0vum2] {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.4rem;
    text-align: right;
    color: var(--n-620);
}

/* Zone principale : min-width 0 pour que la grille s'adapte sans déborder. */
.tasks-main[b-qb9ns0vum2] {
    flex: 1 1 auto;
    min-width: 0;
}

.task-group-head[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--accent-soft);
}

.tg-title[b-qb9ns0vum2] {
    font-weight: 600;
}

/* Les deux fenêtres (« Tâches ouvertes » / « Tâches fermées ») côte à côte et équilibrées (colonnes
   égales) ; empilées sur écran étroit. */
.task-groups[b-qb9ns0vum2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

    .task-groups > .task-group[b-qb9ns0vum2] {
        margin-bottom: 0 !important;
    }

@media (max-width: 1200px) {
    .task-groups[b-qb9ns0vum2] {
        grid-template-columns: 1fr;
    }
}

/* Grille de cartes d'avancement. `auto-fit` : les cartes remplissent la largeur de la fenêtre (pas de
   grande zone vide à droite quand peu de projets sont sélectionnés). `align-items: start` : chaque carte
   prend la hauteur de son contenu. */
.task-cards[b-qb9ns0vum2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: start;
    gap: .55rem;
    padding: .7rem;
}

.task-card[b-qb9ns0vum2] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .55rem .7rem;
    border: 1px solid var(--accent-soft);
    border-radius: .5rem;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: box-shadow .15s ease, transform .15s ease;
}

    .task-card:hover[b-qb9ns0vum2] {
        box-shadow: 0 4px 12px rgba(15, 23, 42, .1);
        transform: translateY(-1px);
    }

    .task-card[data-status="closed"][b-qb9ns0vum2] {
        background: var(--n-50);
    }

.tc-head[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tc-dot[b-qb9ns0vum2] {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

    .tc-dot.open[b-qb9ns0vum2] {
        background: #2563eb;
    }

    .tc-dot.closed[b-qb9ns0vum2] {
        background: #15803d;
    }

.tc-status-label[b-qb9ns0vum2] {
    font-size: .75rem;
    color: var(--text-muted);
}

/* Pied de carte : dépliage de la semaine à gauche, actions à droite, sur leur propre ligne.
   Dans l'en-tête, « Supprimer » partageait la ligne du code projet et du statut : il s'y trouvait
   collé au bord, et « Forcer » n'avait nulle part où s'ajouter quand la suppression est refusée. */
.tc-foot[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .15rem;
    padding-top: .45rem;
    border-top: 1px solid var(--line, var(--n-190));
}

    /* Replié, le dépliage occupe la place laissée par les boutons, à leur gauche. */
    .tc-foot .tc-week[b-qb9ns0vum2] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Déplié, il prend toute la largeur : la ventilation des sept jours serait illisible
       dans l'espace restant. Les boutons passent alors à la ligne suivante. */
    .tc-foot .tc-week[open][b-qb9ns0vum2] {
        flex: 1 1 100%;
    }

.tc-actions[b-qb9ns0vum2] {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.tc-name[b-qb9ns0vum2] {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    /* deux lignes max avec ellipse */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-progress[b-qb9ns0vum2] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tc-bar[b-qb9ns0vum2] {
    flex: 1 1 auto;
    height: .5rem;
    background: var(--accent-soft);
    border-radius: 999px;
    overflow: hidden;
}

.tc-bar-fill[b-qb9ns0vum2] {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    min-width: 2px;
    transition: width .2s ease, background-color .2s ease;
}

    /* Couleur selon le taux d'avancement : rouge (faible) → ambre → citron → vert (terminé). */
    .tc-bar-fill.low[b-qb9ns0vum2] {
        background: #dc2626;
    }

    .tc-bar-fill.mid[b-qb9ns0vum2] {
        background: #f59e0b;
    }

    .tc-bar-fill.high[b-qb9ns0vum2] {
        background: #84cc16;
    }

    .tc-bar-fill.full[b-qb9ns0vum2] {
        background: #15803d;
    }

    .tc-bar-fill.none[b-qb9ns0vum2] {
        background: transparent;
        min-width: 0;
    }

.tc-pct[b-qb9ns0vum2] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .85rem;
    min-width: 2.6rem;
    text-align: right;
}

.tc-facts[b-qb9ns0vum2] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .82rem;
    color: var(--n-620);
}

    .tc-facts .k[b-qb9ns0vum2] {
        color: var(--text-muted);
        margin-right: .3rem;
    }

.tc-week[b-qb9ns0vum2] {
    font-size: .8rem;
}

    .tc-week > summary[b-qb9ns0vum2] {
        cursor: pointer;
        color: var(--accent);
        list-style: none;
    }

        .tc-week > summary[b-qb9ns0vum2]::-webkit-details-marker {
            display: none;
        }

        .tc-week > summary[b-qb9ns0vum2]::before {
            content: "▸ ";
        }

    .tc-week[open] > summary[b-qb9ns0vum2]::before {
        content: "▾ ";
    }

.tc-days[b-qb9ns0vum2] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .2rem;
    margin-top: .4rem;
}

.tc-day[b-qb9ns0vum2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem 0;
    border-radius: .25rem;
    background: var(--n-100);
}

    .tc-day.has[b-qb9ns0vum2] {
        background: var(--accent-soft);
    }

    .tc-day .d[b-qb9ns0vum2] {
        font-size: .66rem;
        color: var(--accent);
        text-transform: uppercase;
    }

    .tc-day .v[b-qb9ns0vum2] {
        font-size: .76rem;
        font-variant-numeric: tabular-nums;
    }

/* Empilement sur petits écrans : la colonne des projets passe au-dessus, en pleine largeur. */
@media (max-width: 768px) {
    .tasks-layout[b-qb9ns0vum2] {
        flex-direction: column;
    }

    .tasks-projects[b-qb9ns0vum2] {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        position: static;
        max-height: 14rem;
    }
}
/* /Pages/Timesheets.razor.rz.scp.css */
/* Feuilles de temps — liste en cartes-accordéon. */

/* Champ Description :
   - s'étire de haut en bas au fur et à mesure de la saisie (field-sizing: content),
     de min-height jusqu'à max-height, puis défilement vertical ;
   - les lignes longues défilent horizontalement (wrap="off").
   Repli pour les navigateurs sans field-sizing : hauteur fixe (rows="2") + défilement. */
.ts-desc[b-6pemq63q5x] {
    field-sizing: content;
    white-space: pre;
    overflow: auto;
    resize: vertical;
    min-height: 2.4rem;
    max-height: 12rem;
    line-height: 1.35;
}

.ts-list[b-6pemq63q5x] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ts-row-card[b-6pemq63q5x] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

    .ts-row-card.open[b-6pemq63q5x] {
        border-color: var(--accent);
    }

.ts-row-head[b-6pemq63q5x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.95rem;
    cursor: pointer;
}

    .ts-row-head:hover[b-6pemq63q5x] {
        background: #fbf7ef;
    }

    .ts-row-head .ts-period[b-6pemq63q5x] {
        font-weight: 600;
        color: var(--text);
        flex: 1 1 auto;
        font-variant-numeric: tabular-nums;
    }

    .ts-row-head .ts-id[b-6pemq63q5x] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ts-row-head .ts-label[b-6pemq63q5x] {
        font-weight: 700;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ts-row-head .ts-period-sub[b-6pemq63q5x] {
        flex: 0 0 auto;
        font-weight: 400;
        color: var(--n-450);
        font-size: 0.82rem;
    }

    .ts-row-head .icon-btn[b-6pemq63q5x] {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        color: var(--n-450);
        font-size: 0.85rem;
        line-height: 1;
        padding: 0.1rem 0.25rem;
        border-radius: 6px;
        cursor: pointer;
        /* Visible au repos (v2.136.0) : voir la leçon des v2.127/v2.128. */
        opacity: .55;
        transition: color 0.15s, background 0.15s, opacity 0.15s;
    }

    .ts-row-card:hover .ts-row-head .icon-btn[b-6pemq63q5x],
    .ts-row-head .icon-btn:focus-visible[b-6pemq63q5x] {
        opacity: 1;
    }

        .ts-row-head .icon-btn:hover[b-6pemq63q5x] {
            color: var(--brass-strong);
            background: var(--w-warn-100);
        }

    .ts-row-head .ts-rename[b-6pemq63q5x] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex: 1 1 auto;
    }

        .ts-row-head .ts-rename input[b-6pemq63q5x] {
            max-width: 280px;
        }

    .ts-row-head .ts-badges[b-6pemq63q5x] {
        display: flex;
        gap: 0.35rem;
    }

    .ts-row-head .ts-total[b-6pemq63q5x] {
        text-align: right;
        min-width: 3.5rem;
    }

        .ts-row-head .ts-total .v[b-6pemq63q5x] {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text);
            display: block;
            line-height: 1;
        }

        .ts-row-head .ts-total .l[b-6pemq63q5x] {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
        }

.ts-row-detail[b-6pemq63q5x] {
    padding: 0.75rem 0.95rem 1rem;
    border-top: 1px solid var(--n-150);
    background: var(--n-60);
}

/* Récapitulatif des totaux par jour (+ alerte de dépassement) */
.day-totals[b-6pemq63q5x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}

.day-chip[b-6pemq63q5x] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--n-200);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.78rem;
}

    .day-chip .d[b-6pemq63q5x] {
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .day-chip .h[b-6pemq63q5x] {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .day-chip.over[b-6pemq63q5x] {
        border-color: #f0b429;
        background: var(--w-warn-70);
    }

        .day-chip.over .h[b-6pemq63q5x] {
            color: var(--w-warn-700);
        }

    .day-chip .warn[b-6pemq63q5x] {
        color: var(--w-warn-700);
    }

.day-alert[b-6pemq63q5x] {
    margin: 0 0 0.85rem;
    color: var(--w-warn-700);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Copier la semaine précédente */
.copy-week[b-6pemq63q5x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.copy-hint[b-6pemq63q5x] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.copy-info[b-6pemq63q5x] {
    margin: 0 0 0.85rem;
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Bascule Tableau / Grille */
.view-toggle[b-6pemq63q5x] {
    display: inline-flex;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}

/* Grille hebdomadaire (tâches × jours) */
.ts-grid-wrap[b-6pemq63q5x] {
    margin: 0 0 1rem;
}

.grid-nav[b-6pemq63q5x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
}

.grid-nav-label[b-6pemq63q5x] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.grid-scroll[b-6pemq63q5x] {
    overflow-x: auto;
}

.ts-grid[b-6pemq63q5x] {
    border-collapse: collapse;
    width: 100%;
    background: var(--surface);
    font-size: 0.85rem;
}

    .ts-grid th[b-6pemq63q5x],
    .ts-grid td[b-6pemq63q5x] {
        border: 1px solid var(--n-200);
        padding: 0.3rem 0.4rem;
        text-align: center;
    }

    .ts-grid thead th[b-6pemq63q5x] {
        background: var(--n-90);
        font-weight: 600;
    }

.grid-day-col .dow[b-6pemq63q5x] {
    display: block;
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.grid-day-col .dnum[b-6pemq63q5x] {
    font-variant-numeric: tabular-nums;
}

.grid-task-col[b-6pemq63q5x] {
    text-align: left !important;
    min-width: 10rem;
    position: sticky;
    left: 0;
    background: var(--surface);
}

.ts-grid thead .grid-task-col[b-6pemq63q5x] {
    background: var(--n-90);
}

.grid-total-col[b-6pemq63q5x] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--n-70);
}

.grid-cell-td[b-6pemq63q5x] {
    padding: 0.15rem !important;
}

.grid-cell[b-6pemq63q5x] {
    width: 3.4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 0.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
}

    .grid-cell:hover[b-6pemq63q5x] {
        border-color: #d5d9e0;
    }

    .grid-cell:focus[b-6pemq63q5x] {
        outline: none;
        border-color: #1f6f7a;
        box-shadow: 0 0 0 2px rgba(31, 111, 122, 0.18);
    }

.cell-multi[b-6pemq63q5x] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-style: italic;
}

.ts-grid tfoot td[b-6pemq63q5x] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--n-70);
}

.ts-grid tfoot .grid-foot.over[b-6pemq63q5x] {
    color: var(--w-warn-700);
    background: var(--w-warn-70);
}

.ts-grid tfoot .warn[b-6pemq63q5x] {
    color: var(--w-warn-700);
}

.grid-add[b-6pemq63q5x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.35rem;
}

.grid-add-label[b-6pemq63q5x] {
    font-weight: 600;
}

.grid-add .form-select[b-6pemq63q5x] {
    width: auto;
    min-width: 12rem;
}

.grid-hint[b-6pemq63q5x] {
    font-size: 0.78rem;
    margin: 0;
}

/* Avertissement live du formulaire d'ajout (dépassement projeté) */
.add-warn[b-6pemq63q5x] {
    margin-top: 0.75rem;
}

/* Total d'heures par employé (vue équipe) : bandeau de pastilles. */
.team-totals[b-6pemq63q5x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}

.team-totals .tt-label[b-6pemq63q5x] {
    color: var(--text-muted);
    font-size: .85rem;
    margin-right: .1rem;
}

.team-totals .tt-pill[b-6pemq63q5x] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border: 1px solid var(--accent-soft);
    border-radius: 999px;
    background: var(--surface);
    font-size: .85rem;
}

.team-totals .tt-h[b-6pemq63q5x] {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 600;
}

.team-totals .tt-b[b-6pemq63q5x] {
    color: var(--text-muted);
    font-size: .8rem;
}

/* Résumé global de l'équipe (total + part facturable globale). */
.team-global[b-6pemq63q5x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .8rem;
    font-size: .9rem;
}

.team-global .tg-total[b-6pemq63q5x] {
    color: var(--accent);
}

/* Totaux de l'équipe (heures + facturable) : bandeau KPI en haut de page (gestionnaire/admin). */
.page-team-total[b-6pemq63q5x] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    padding: .4rem 1rem;
    margin-bottom: 1rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid var(--accent-soft);
}

    .page-team-total .ptt-item[b-6pemq63q5x] {
        display: inline-flex;
        align-items: baseline;
        gap: .45rem;
    }

        /* Séparateur discret entre le total et le facturable. */
        .page-team-total .ptt-item + .ptt-item[b-6pemq63q5x] {
            border-left: 1px solid var(--accent-soft);
            padding-left: 1.4rem;
        }

.page-team-total .ptt-label[b-6pemq63q5x] {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .82rem;
}

.page-team-total .ptt-value[b-6pemq63q5x] {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.page-team-total .ptt-sub[b-6pemq63q5x] {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.team-global .tg-bill[b-6pemq63q5x] {
    color: var(--n-620);
}

.team-global .tg-pct[b-6pemq63q5x] {
    padding: .1rem .6rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.team-global .tg-avg[b-6pemq63q5x],
.team-global .tg-avgh[b-6pemq63q5x] {
    padding: .1rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Regroupement par état dans « Mes feuilles » (v2.130.0). L'en-tête du groupe porte le badge d'état :
   la couleur reste sur ce qui informe, et chaque carte n'a plus à répéter son statut. */
.ts-group[b-6pemq63q5x] {
    margin-bottom: 1.5rem;
}

.ts-group-head[b-6pemq63q5x] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line, var(--n-190));
}

.ts-group-count[b-6pemq63q5x] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ts-group-hours[b-6pemq63q5x] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Colonne « Projet » du tableau de saisie (v2.133.0) : le projet situe la tâche, mais c'est la
   tâche qui porte la saisie — le projet reste donc en retrait. */
.ts-project[b-6pemq63q5x] {
    color: var(--text-muted);
    font-size: 0.9em;
}
/* /Pages/Users.razor.rz.scp.css */
/* Utilisateurs — avatar à initiales, cellule identité, badges de rôle. */

.user-cell[b-wa5r8ie590] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.avatar[b-wa5r8ie590] {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-140);
    color: var(--n-700);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.user-name[b-wa5r8ie590] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
}

.icon-btn[b-wa5r8ie590] {
    border: 0;
    background: transparent;
    color: var(--n-450);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    /* Visible au repos, discret : caché derrière un survol (opacity 0), il était introuvable —
       et carrément inatteignable sur écran tactile, où le survol n'existe pas. */
    opacity: .55;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

.user-card:hover .icon-btn[b-wa5r8ie590],
.icon-btn:hover[b-wa5r8ie590],
.icon-btn:focus-visible[b-wa5r8ie590] {
    opacity: 1;
}

.icon-btn:hover[b-wa5r8ie590] {
    color: var(--brass-strong);
    background: var(--w-warn-100);
}

.icon-btn:disabled[b-wa5r8ie590] {
    opacity: .2;
    cursor: default;
}

.user-rename[b-wa5r8ie590] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .user-rename input[b-wa5r8ie590] {
        max-width: 200px;
    }

.user-email[b-wa5r8ie590] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* --- Grille de cartes --- */
.user-grid[b-wa5r8ie590] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
    /* Chaque carte prend SA hauteur, pas celle de la plus haute de sa rangee.
       Par defaut, une grille etire ses elements (`align-items: stretch`) : ouvrir le panneau des
       roles ou du mot de passe sur une carte faisait donc grandir ses voisines d'autant, ce qui
       donnait a croire que les fiches des autres utilisateurs s'ouvraient elles aussi. Les cartes
       sont independantes : leur hauteur doit l'etre aussi. */
    align-items: start;
}

.user-card[b-wa5r8ie590] {
    background: var(--surface);
    border: 1px solid var(--n-190);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

    .user-card .uc-head[b-wa5r8ie590] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .user-card .uc-roles[b-wa5r8ie590] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        min-height: 1.4rem;
    }

    .user-card .uc-roles-edit label[b-wa5r8ie590] {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin-right: 0.6rem;
        font-size: 0.85rem;
    }

/* --- Onglets d'une fiche ---
   Les quatre actions deviennent trois sections d'une meme fiche. Quatre boutons encadres ne
   tenaient pas sur la largeur d'une carte, et supprimer un compte n'a pas a porter le meme poids
   visuel que consulter ses roles : la difference se lit maintenant a la place (onglet « Acces ») et
   a la consequence ecrite a cote, plus a la couleur. */
.uc-tabs[b-wa5r8ie590] {
    display: flex;
    gap: 0.1rem;
    margin-top: 0.6rem;
    border-bottom: 1px solid var(--n-190);
}

.uc-tab[b-wa5r8ie590] {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0.42rem 0.6rem;
    margin-bottom: -1px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .uc-tab:hover:not(:disabled)[b-wa5r8ie590] {
        color: var(--n-900);
        background: #f4f6f8;
    }

    .uc-tab.is-active[b-wa5r8ie590] {
        color: var(--accent, #1f6f7a);
        border-bottom-color: var(--accent, #1f6f7a);
    }

    .uc-tab:disabled[b-wa5r8ie590] {
        color: #b6bdc7;
        cursor: default;
    }

.uc-panel[b-wa5r8ie590] {
    padding: 0.8rem 0.1rem 0.2rem;
}

.uc-panel-intro[b-wa5r8ie590] {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    color: #4a5462;
}

.uc-panel-actions[b-wa5r8ie590] {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

/* Chaque choix de l'onglet « Acces » porte sa consequence a cote : c'est elle qui distingue les
   deux gestes, pas une couleur d'alerte. */
.uc-access-choice[b-wa5r8ie590] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.uc-access-hint[b-wa5r8ie590] {
    font-size: 0.76rem;
    color: var(--n-500);
}

/* La seule action irreversible de la fiche : la seule qui porte du rouge, et seulement ici. */
.uc-delete[b-wa5r8ie590] {
    border: 1px solid #e3b4b0;
    background: var(--surface);
    color: #b3261e;
}

    .uc-delete:hover:not(:disabled)[b-wa5r8ie590] {
        background: var(--w-danger-150);
        border-color: #d08b85;
        color: #8d2019;
    }

/* --- Badges de rôle --- */
.role-badge[b-wa5r8ie590] {
    display: inline-block;
    padding: 0.12em 0.55em;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    margin-right: 0.25rem;
    border: 1px solid transparent;
}

.role-admin[b-wa5r8ie590] { color: var(--w-warn-800); background: var(--w-warn-160); border-color: var(--w-warn-310); }
.role-approver[b-wa5r8ie590] { color: var(--w-warn-850); background: var(--w-warn-150); border-color: var(--w-warn-300); }
.role-manager[b-wa5r8ie590] { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.role-employee[b-wa5r8ie590] { color: var(--n-650); background: var(--n-140); border-color: #e2e8f0; }

/* --- Cartes repliables (« Nouvel utilisateur », « Ajouter depuis EntraID ») --- */
/* Même motif que .section-collapse-toggle de ProjectDetail : le bouton occupe tout l'en-tête de carte,
   pour que la zone cliquable couvre le titre entier et pas seulement le chevron. */
.panel-toggle[b-wa5r8ie590] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

    .panel-toggle .chevron[b-wa5r8ie590] {
        color: var(--accent);
        font-size: 0.85rem;
    }

    .panel-toggle:focus-visible[b-wa5r8ie590] {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 0.25rem;
    }

/* Replié, la carte se réduit à son en-tête : le liseré du bas n'aurait plus rien à séparer. */
.collapsible-card.is-collapsed .card-header[b-wa5r8ie590] {
    border-bottom: 0;
}

/* --- Réinitialisation de mot de passe (carte utilisateur) --- */
.uc-password[b-wa5r8ie590] {
    margin-top: 0.6rem;
    padding: 0.7rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 0.375rem;
    background: var(--n-60);
}

.up-intro[b-wa5r8ie590] {
    font-size: 0.82rem;
    color: var(--n-650);
    margin: 0 0 0.5rem;
}

.up-actions[b-wa5r8ie590] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* Le mot de passe provisoire est fait pour être lu et recopié : chiffres tabulaires et
   interlettrage, comme les durées du thème. */
.up-issued[b-wa5r8ie590] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    background: var(--surface);
}

/* Rappel de la politique de mot de passe, sous le champ de saisie du panneau de reinitialisation. */
.up-policy[b-wa5r8ie590] {
    margin: 0.3rem 0 0.6rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Case de role verrouillee : le role d'administrateur sur sa propre fiche. Le serveur refuse ce
   retrait ; on le montre au lieu de le laisser decouvrir a l'enregistrement. */
.uc-roles-edit label.is-locked[b-wa5r8ie590] {
    color: var(--n-500);
    cursor: not-allowed;
}

.uc-self-note[b-wa5r8ie590] {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    color: var(--n-500);
}

/* Renommage : panneau pleine largeur sous l'en-tete. Le champ etait glisse a cote de l'avatar,
   entre le nom et deux boutons : il n'y restait que 48 pixels, soit trois lettres. */
.uc-rename label[b-wa5r8ie590] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.uc-panel-hint[b-wa5r8ie590] {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: var(--n-500);
}

/* Regroupement par responsabilité (v2.134.0) : l'en-tête porte la pastille du rôle et le nombre de
   comptes. Un compte qui cumule des rôles figure dans le groupe du plus étendu, une seule fois. */
.user-group[b-wa5r8ie590] {
    margin-bottom: 1.6rem;
}

.user-group-head[b-wa5r8ie590] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line, var(--n-190));
}

.user-group-count[b-wa5r8ie590] {
    color: var(--text-muted);
    font-size: 0.85rem;
}