/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-hiusqgin5l] {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.sidebar[b-hiusqgin5l] {
    width: var(--sidebar-w, 268px);
    flex: 0 0 var(--sidebar-w, 268px);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border-right: 1px solid var(--border, #e6ebf1);
    z-index: 20;
    transition: width .26s cubic-bezier(.4, 0, .2, 1), flex-basis .26s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

/* LA CHAÎNE DE HAUTEUR, QUI MANQUAIT.
   Sans elle, aucun descendant ne peut demander « le reste de la fenêtre » : .main n'avait pas
   de hauteur définie, .content non plus, et les grilles étaient donc figées en pixels — 600 px
   pour la plupart. Mesuré sur /projects le 02/08/2026 : 258 px de vide sous la grille.
   .main devient une colonne de la hauteur exacte de la fenêtre ; .content prend ce qui reste et
   porte désormais le défilement. Le min-height: 0 est indispensable : sans lui, un enfant flex
   refuse de descendre sous sa taille de contenu et déborde au lieu de défiler. */
.main[b-hiusqgin5l] {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg, #f3f6f9);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content[b-hiusqgin5l] {
    max-width: none;
    margin: 0;
    padding: 1.6rem 1.75rem 2.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* RTL: flip the sidebar border */
[dir="rtl"] .sidebar[b-hiusqgin5l] {
    border-right: 0;
    border-left: 1px solid var(--border, #e6ebf1);
}

@media (max-width: 900px) {
    .page[b-hiusqgin5l] { flex-direction: column; }
    .sidebar[b-hiusqgin5l] {
        width: 100%;
        flex-basis: auto;
        height: auto;
        position: sticky;
        top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border, #e6ebf1);
    }
    .content[b-hiusqgin5l] { padding: 1.25rem 1rem 2rem; }
}

#blazor-error-ui[b-hiusqgin5l] {
    color-scheme: light only;
    background: #fff8e1;
    border-top: 1px solid #f0e0a8;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(16, 33, 60, .12);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #6b5209;
}

    #blazor-error-ui .dismiss[b-hiusqgin5l] {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
    }
    #blazor-error-ui .reload[b-hiusqgin5l] { color: var(--brand, #0f6cbd); margin-left: .4rem; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ---------- Brand ---------- */
.brand[b-dl3ctqjtm4] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--border, #e6ebf1);
    flex: 0 0 auto;
}
.brand-mark[b-dl3ctqjtm4] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #1782d6 0%, #0f6cbd 55%, #0c528f 100%);
    box-shadow: 0 4px 12px rgba(15, 108, 189, .35);
    letter-spacing: -0.02em;
}
.brand-text[b-dl3ctqjtm4] { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title[b-dl3ctqjtm4] { font-weight: 750; font-size: 1.05rem; color: var(--text, #1f2b3d); letter-spacing: -0.02em; }
.brand-sub[b-dl3ctqjtm4] { font-size: .72rem; color: var(--text-muted, #7c8aa0); font-weight: 550; letter-spacing: .02em; }

/* Desktop collapse hamburger */
.sb-hamburger[b-dl3ctqjtm4] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 8px;
    color: var(--text-muted, #7c8aa0);
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease;
}
.sb-hamburger:hover[b-dl3ctqjtm4] { background: var(--surface-2, #f8fafc); color: var(--text, #1f2b3d); }
[dir="rtl"] .sb-hamburger[b-dl3ctqjtm4] { margin-left: 0; margin-right: auto; }

/* ---------- Scroll area ---------- */
.nav-scroll[b-dl3ctqjtm4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem .7rem 1rem;
}

/* ---------- Groups ---------- */
.nav-group[b-dl3ctqjtm4] { margin-bottom: .5rem; }
.nav-group-label[b-dl3ctqjtm4] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted, #7c8aa0);
    padding: .85rem .75rem .35rem;
}

/* LA COUPURE ENTRE LE QUOTIDIEN ET L'OCCASIONNEL. Six groupes de meme poids visuel se lisent
   comme une liste plate : le classement par frequence existe alors dans le balisage, mais pas
   a l'oeil. Ce trait le rend visible sans ajouter un niveau de titre. */
.nav-separator[b-dl3ctqjtm4] {
    height: 1px;
    margin: .9rem .75rem .5rem;
    background: var(--border, #e3e8ef);
}

/* ---------- Items ---------- */
.nav-item[b-dl3ctqjtm4] { margin: 1px 0; }

.nav-item[b-dl3ctqjtm4]  .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .75rem;
    border-radius: 9px;
    color: var(--text-soft, #46556b);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .13s ease, color .13s ease;
}
.nav-item[b-dl3ctqjtm4]  .nav-link .nav-ico {
    flex: 0 0 18px;
    color: var(--text-muted, #7c8aa0);
    transition: color .13s ease;
}
/* LES LIBELLES LONGS PASSENT A LA LIGNE, ILS NE SONT PLUS COUPES. La barre fait 218 px, dont
   environ 150 pour le texte : « Rapprochement des versements » et « Rapprochement des
   remboursements » sortaient « Rapprochement des versem… » et « Rapprochement des rembou… », donc
   IDENTIQUES A L'OEIL. Deux entrees qu'on ne peut pas distinguer ne sont pas deux entrees. Cinq
   libelles passent ainsi sur deux lignes ; c'est le prix, et il est plus faible que celui d'un
   menu qu'on lit en survolant pour deviner la fin des mots. */
.nav-item[b-dl3ctqjtm4]  .nav-link .nav-text {
    white-space: normal;
    line-height: 1.25;
}

/* L'icone reste alignee sur la PREMIERE ligne du libelle, et non centree sur les deux : centree,
   elle flottait a mi-hauteur et ne designait plus rien. */
.nav-item[b-dl3ctqjtm4]  .nav-link { align-items: flex-start; }
.nav-item[b-dl3ctqjtm4]  .nav-link .nav-ico { margin-top: 1px; }
.nav-item[b-dl3ctqjtm4]  .nav-link:hover {
    background: var(--surface-2, #f8fafc);
    color: var(--text, #1f2b3d);
}
.nav-item[b-dl3ctqjtm4]  .nav-link:hover .nav-ico { color: var(--text-soft, #46556b); }

.nav-item[b-dl3ctqjtm4]  .nav-link.active {
    background: var(--brand-tint, #eef5fc);
    color: var(--brand, #0f6cbd);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--brand, #0f6cbd);
}
.nav-item[b-dl3ctqjtm4]  .nav-link.active .nav-ico { color: var(--brand, #0f6cbd); }

/* ---------- Selecteur de langue ---------- */
/* Le pied du menu porte desormais trois elements (langue, compte, deconnexion) : il empile
   plutot qu'il n'aligne, sinon le nom d'utilisateur se retrouve ecrase sur un menu etroit. */
/* Bande PROPRE, au-dessus du pied : glisse dans .nav-footer, qui est une rangee flex, le
   selecteur ecrasait le nom d'utilisateur (« alifroot@gm... »). */
.nav-lang[b-dl3ctqjtm4] {
    flex: 0 0 auto; display: flex; gap: .25rem;
    padding: .5rem .9rem; border-top: 1px solid var(--border, #e6ebf1);
    background: var(--surface, #fff);
}

.bo-lang-opt[b-dl3ctqjtm4] {
    flex: 1 1 0; padding: .25rem 0; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
    color: var(--text-muted, #6b7280); background: transparent; cursor: pointer;
    border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius-sm, 6px);
}

.bo-lang-opt:hover[b-dl3ctqjtm4] { background: rgba(0,0,0,.04); }

/* La langue courante est donnee par la COULEUR ET par aria-pressed : un contraste seul ne dit
   rien a un lecteur d'ecran, et c'est l'attribut qui porte l'information pour lui. */
.bo-lang-opt.is-active[b-dl3ctqjtm4] {
    color: #fff; background: var(--brand, #1749a3); border-color: var(--brand, #1749a3);
}

/* Menu reduit : les codes de langue restent lisibles, la ligne passe en colonne. */
.sb-toggle:checked ~ .page .nav-lang[b-dl3ctqjtm4] { flex-direction: column; }

/* ---------- Footer (user + logout) ---------- */
.nav-footer[b-dl3ctqjtm4] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .9rem;
    border-top: 1px solid var(--border, #e6ebf1);
    background: var(--surface, #fff);
}
.nav-user[b-dl3ctqjtm4] { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.nav-avatar[b-dl3ctqjtm4] {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-tint-strong, #dcebf9);
    color: var(--brand-active, #0c3b5e);
    font-weight: 700; font-size: .8rem;
}
.nav-user-name[b-dl3ctqjtm4] {
    font-size: .82rem; font-weight: 600; color: var(--text, #1f2b3d);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-logout-form[b-dl3ctqjtm4] { margin: 0; }
.nav-logout[b-dl3ctqjtm4] {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border, #e6ebf1);
    border-radius: 9px;
    background: var(--surface, #fff);
    color: var(--text-muted, #7c8aa0);
    cursor: pointer;
    transition: all .13s ease;
}
.nav-logout:hover[b-dl3ctqjtm4] { color: var(--danger, #c8342e); border-color: #f2cecb; background: var(--danger-tint, #fbeceb); }

/* ---------- Mobile toggle ---------- */
.nav-toggle-cb[b-dl3ctqjtm4] { display: none; }
.nav-toggle[b-dl3ctqjtm4] {
    display: none;
    position: absolute;
    top: 1.15rem; right: 1rem;
    width: 40px; height: 40px;
    border: 1px solid var(--border, #e6ebf1);
    border-radius: 9px;
    place-items: center;
    color: var(--text-soft, #46556b);
    cursor: pointer;
    background: var(--surface, #fff);
}

@media (max-width: 900px) {
    .nav-toggle[b-dl3ctqjtm4] { display: grid; }
    .sb-hamburger[b-dl3ctqjtm4] { display: none; }
    .nav-scroll[b-dl3ctqjtm4], .nav-footer[b-dl3ctqjtm4] { display: none; }
    .nav-toggle-cb:checked ~ .nav-scroll[b-dl3ctqjtm4] { display: block; max-height: 70vh; }
    .nav-toggle-cb:checked ~ .nav-footer[b-dl3ctqjtm4] { display: flex; }
    [dir="rtl"] .nav-toggle[b-dl3ctqjtm4] { right: auto; left: 1rem; }
}

/* Le vrai logo, aux dimensions du carre qu'il remplace : la barre laterale garde sa hauteur et
   son alignement, seul le dessin change. object-fit evite la deformation si le fichier change
   de proportions. */
.brand-mark-img[b-dl3ctqjtm4] {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-d11tv22pk6],
.components-reconnect-repeated-attempt-visible[b-d11tv22pk6],
.components-reconnect-failed-visible[b-d11tv22pk6],
.components-pause-visible[b-d11tv22pk6],
.components-resume-failed-visible[b-d11tv22pk6],
.components-rejoining-animation[b-d11tv22pk6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-retrying[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-failed[b-d11tv22pk6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-d11tv22pk6] {
    display: block;
}


#components-reconnect-modal[b-d11tv22pk6] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-d11tv22pk6 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-d11tv22pk6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-d11tv22pk6 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-d11tv22pk6]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-d11tv22pk6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-d11tv22pk6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-d11tv22pk6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-d11tv22pk6 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-d11tv22pk6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-d11tv22pk6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-d11tv22pk6] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-d11tv22pk6] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-d11tv22pk6] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-d11tv22pk6] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-d11tv22pk6] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-d11tv22pk6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-d11tv22pk6] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-d11tv22pk6 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Modules/Projects/ProjectWorkflowDiagram.razor.rz.scp.css */
/* Diagramme du circuit de validation.
   Le tracé est décoratif ; tout ce qui porte du sens est du texte ordinaire, donc stylé
   sobrement et jamais masqué visuellement (pas de .sr-only ici : l'équivalent textuel est
   destiné à TOUT LE MONDE, pas seulement aux lecteurs d'écran). */

.wf[b-ejcz0rj3zb] {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
}

.wf-heading[b-ejcz0rj3zb] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .6rem;
}

.wf-current[b-ejcz0rj3zb] {
    margin: 0 0 .5rem;
    font-size: .95rem;
}

.wf-current-unknown[b-ejcz0rj3zb] {
    color: #842029;
    font-weight: 600;
}

.wf-next-title[b-ejcz0rj3zb] {
    margin: 0 0 .25rem;
    font-weight: 600;
    font-size: .9rem;
}

.wf-next[b-ejcz0rj3zb] {
    margin: 0 0 .75rem;
    padding-inline-start: 1.25rem;   /* logique : suit dir=rtl sans règle dédiée */
    font-size: .9rem;
}

.wf-next-empty[b-ejcz0rj3zb] {
    margin: 0 0 .75rem;
    font-size: .9rem;
    font-style: italic;
}

.wf-details > summary[b-ejcz0rj3zb] {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .5rem;
}

/* Le tracé garde ses proportions et défile horizontalement sur écran étroit plutôt que de
   rétrécir jusqu'à l'illisible. */
.wf-canvas[b-ejcz0rj3zb] {
    overflow-x: auto;
    margin: .5rem 0;
}

/* max-width bornée à la largeur du viewBox : sans elle, « width: 100% » étirait un tracé
   conçu en 760x650 sur toute la largeur disponible — 1591 px sur un écran de bureau, donc
   1361 px de HAUT une fois le rapport conservé. Le schéma était juste, mais il fallait
   parcourir la page entière pour le lire. Il s'affiche désormais à sa taille de dessin et
   ne grandit plus au-delà ; min-width et le défilement horizontal du conteneur continuent
   de le protéger dans l'autre sens, sur écran étroit. */
.wf-svg[b-ejcz0rj3zb] {
    display: block;
    width: 100%;
    max-width: 760px;
    min-width: 640px;
    height: auto;
}

.wf-legend[b-ejcz0rj3zb] {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .85rem;
}

.wf-swatch[b-ejcz0rj3zb] {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    margin-inline-end: .4rem;
    vertical-align: -2px;
}

.wf-swatch-current[b-ejcz0rj3zb] { background: #51ff9f; border: 2px solid #0f5132; }
.wf-swatch-other[b-ejcz0rj3zb]   { background: #c1e6ff; border: 1px solid #7fa8c4; }

.wf-note[b-ejcz0rj3zb], .wf-out-title[b-ejcz0rj3zb] {
    font-size: .85rem;
    margin: .5rem 0 .35rem;
}

.wf-out[b-ejcz0rj3zb] {
    font-size: .85rem;
    padding-inline-start: 1.25rem;
    margin: 0 0 .75rem;
}

.wf-table[b-ejcz0rj3zb] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.wf-table caption[b-ejcz0rj3zb] {
    text-align: start;
    padding-bottom: .35rem;
    color: #495057;
}

.wf-table th[b-ejcz0rj3zb], .wf-table td[b-ejcz0rj3zb] {
    border: 1px solid #dee2e6;
    padding: .35rem .5rem;
    text-align: start;
    vertical-align: top;
}

.wf-table thead th[b-ejcz0rj3zb] { background: #f1f5f9; }

.wf-table td ul[b-ejcz0rj3zb] {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.wf-row-current[b-ejcz0rj3zb] { background: #eafff3; }

.wf-row-mark[b-ejcz0rj3zb] {
    font-weight: 400;
    font-style: italic;
    margin-inline-start: .3rem;
}