/* /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;
}

/* ---------- 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;
}
.nav-item[b-dl3ctqjtm4]  .nav-link .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.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; }
}
/* /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;
}