/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* La phrase sous le bouton dit à qui s'adresser ; elle se détache du formulaire
   par la même respiration que ses actions (.actions, app.css). */
.connexion__aide[b-sya63kawsl] {
    margin-block: var(--ot-e6) 0;
}
/* /Components/Layout/AppFrame.razor.rz.scp.css */
/* ==========================================================================
   Le cadre
   ==========================================================================

   Une grille à deux zones, comme Compta. Les enfants viennent de NavMenu, qui
   déclare leurs zones dans sa propre feuille scopée.
   ========================================================================== */

.cadre[b-zylbd935lu] {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-areas: "rail contenu";
    min-block-size: 100dvh;
    background: var(--ot-glace);
}

.contenu[b-zylbd935lu] {
    grid-area: contenu;
    padding: var(--ot-e8) var(--ot-e6) var(--ot-e12);
    min-inline-size: 0;
    max-inline-size: var(--ot-largeur-page);
}

@media (max-width: 900px) {
    /* Le rail passe en position fixe : il quitte le flux, la grille n'a plus
       qu'une colonne, et la barre haute prend la première ligne. */
    .cadre[b-zylbd935lu] {
        grid-template-columns: minmax(0, 1fr);
        /* La barre à sa hauteur, le contenu prend le reste. Sans cette ligne,
           les deux rangées sont « auto » et la hauteur minimale de la grille
           (100dvh) se partage entre elles : sur une page courte, la barre
           occupait 158 px d'un écran de 812 (mesuré le 05.10.2026). Compta
           porte la même grille sans cette ligne. */
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "barre"
            "contenu";
    }

    .contenu[b-zylbd935lu] {
        padding: var(--ot-e6) var(--ot-e4) var(--ot-e8);
    }
}

/* --- L'erreur non gérée du circuit ---------------------------------------- */

#blazor-error-ui[b-zylbd935lu] {
    background: var(--ot-attention-voile);
    color: var(--ot-roche);
    border-block-start: 1px solid var(--ot-attention);
    bottom: 0;
    box-shadow: var(--ot-ombre);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zylbd935lu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* La page de connexion, sur le fond glacier de la charte : une fiche de neige
   posée sur la glace, le nom composé en tête — la même application que derrière
   la porte, pas un formulaire Bootstrap sur fond blanc. */
.login-page[b-qdyqo268ly] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ot-e6);
    background: var(--ot-glace);
}

.login-card[b-qdyqo268ly] {
    width: 100%;
    max-width: 26rem;
    padding: var(--ot-e8);
    border: 1px solid var(--ot-filet);
    border-radius: var(--ot-rayon);
    background-color: var(--ot-neige);
    box-shadow: var(--ot-ombre);
}

/* Le nom composé de Design/README.md §8, comme dans le rail : deux moitiés,
   même corps et même encre, deux graisses. */
.marque[b-qdyqo268ly] {
    font-family: var(--ot-police-titre);
    font-size: var(--ot-taille-section);
    letter-spacing: 0.02em;
    color: var(--ot-roche);
    display: flex;
    gap: 0.3em;
    align-items: baseline;
    margin: 0 0 var(--ot-e6);
}

.marque__suite[b-qdyqo268ly] {
    font-weight: 600;
}

.marque__module[b-qdyqo268ly] {
    font-weight: 400;
}

/* align-items: center vertically centres a short form, but a long one - the validation
   summary can add several lines - would then overflow off both ends of the viewport with
   no way to scroll to the button. */
@media (max-height: 640px) {
    .login-page[b-qdyqo268ly] {
        align-items: flex-start;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   Le rail de navigation
   ==========================================================================

   Colonne fixe au-delà de 900 px, tiroir en dessous. Aucune couleur en dur :
   tout passe par les variables de tokens.css, sans quoi le thème sombre
   fonctionnerait tant que personne n'utilise la bascule manuelle.

   Reprise de la feuille du rail de Compta (Design/navigation.html), pour que
   les deux modules soient identiques au nom près. Propres à PmBudget : le
   groupe du projet (trigramme, nom, pastille « Archivé »), le compte qui est
   un lien vers « Mon compte », et la déconnexion qui est un bouton (un POST,
   protégé contre la falsification). La bascule de thème est celle de Compta
   (OTEMMAPMB-48).
   ========================================================================== */

.rail[b-25gxurbysv] {
    grid-area: rail;
    background: var(--ot-neige);
    border-inline-end: 1px solid var(--ot-filet);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.rail__tete[b-25gxurbysv] {
    padding: var(--ot-e4);
    border-block-end: 1px solid var(--ot-filet);
    display: flex;
    flex-direction: column;
    gap: var(--ot-e1);
}

/* --- La marque composée --------------------------------------------------- */

/* Deux moitiés, même corps et même encre, deux graisses. La typographie porte
   la différence pour qu'aucun séparateur n'ait à le faire. */
.marque[b-25gxurbysv] {
    font-family: var(--ot-police-titre);
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    color: var(--ot-roche);
    display: inline-flex;
    gap: 0.3em;
    align-items: baseline;
}

.marque__suite[b-25gxurbysv] {
    font-weight: 600;
}

/* 400, pas une teinte plus pâle : un module grisé se lit comme désactivé, et
   c'est là que la personne se trouve. */
.marque__module[b-25gxurbysv] {
    font-weight: 400;
}

.marque__version[b-25gxurbysv] {
    font-family: var(--ot-police-mono);
    font-size: var(--ot-taille-etiquette);
    color: var(--ot-moraine-clair);
    font-variant-numeric: tabular-nums;
}

/* --- Les liens ------------------------------------------------------------ */

.rail__corps[b-25gxurbysv] {
    padding: var(--ot-e3) var(--ot-e3) var(--ot-e4);
    overflow-y: auto;
    flex: 1;
}

.groupe[b-25gxurbysv] {
    margin-block-start: var(--ot-e4);
}

.groupe__titre[b-25gxurbysv] {
    font-size: var(--ot-taille-etiquette);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ot-moraine-clair);
    font-weight: 600;
    padding: var(--ot-e2) var(--ot-e3);
    margin: 0;
}

.liens[b-25gxurbysv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lien[b-25gxurbysv] {
    display: flex;
    align-items: center;
    gap: var(--ot-e3);
    padding: 0.4375rem var(--ot-e3);
    border-radius: var(--ot-rayon);
    color: var(--ot-moraine);
    text-decoration: none;
    font-size: var(--ot-taille-petit);

    /* Le filet d'état prend sa place tout de suite, transparent au repos :
       sinon l'élément se décale de 3 px au survol et la liste tressaute. */
    border-inline-start: 3px solid transparent;
    padding-inline-start: calc(var(--ot-e3) - 3px + var(--ot-e1));
}

.lien:hover[b-25gxurbysv] {
    background: var(--ot-gentiane-voile);
    color: var(--ot-roche);
}

.lien:focus-visible[b-25gxurbysv] {
    outline: 2px solid var(--ot-gentiane);
    outline-offset: -2px;
}

/* L'élément courant : LA dépense d'accent que la charte autorise. La forme
   double la couleur — filet plus graisse — parce que la couleur seule échoue
   pour environ un homme sur douze. */
.lien[aria-current="page"][b-25gxurbysv] {
    background: var(--ot-gentiane-voile);
    border-inline-start-color: var(--ot-gentiane);
    color: var(--ot-roche);
    font-weight: 600;
}

/* --- Le pied -------------------------------------------------------------- */

.rail__pied[b-25gxurbysv] {
    border-block-start: 1px solid var(--ot-filet);
    padding: var(--ot-e3);
    display: flex;
    flex-direction: column;
    gap: var(--ot-e3);
}

.compte[b-25gxurbysv] {
    display: flex;
    flex-direction: column;
    padding: var(--ot-e1) var(--ot-e3);
    min-inline-size: 0;
    border-radius: var(--ot-rayon);
    text-decoration: none;
}

.compte:hover[b-25gxurbysv] {
    background: var(--ot-gentiane-voile);
}

.compte__nom[b-25gxurbysv] {
    font-size: var(--ot-taille-petit);
    color: var(--ot-roche);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compte__role[b-25gxurbysv] {
    font-size: var(--ot-taille-etiquette);
    color: var(--ot-moraine-clair);
}

/* --- La bascule de thème -------------------------------------------------- */

/* Carrée à 3 px et non en pilule : la charte dit qu'un registre est réglé, pas
   arrondi, et l'interrupteur n'a pas de raison d'être l'exception. */
.bascule[b-25gxurbysv] {
    display: inline-flex;
    align-items: center;
    gap: var(--ot-e2);
    font-size: var(--ot-taille-petit);
    color: var(--ot-moraine-clair);
    cursor: pointer;
    user-select: none;
    padding-inline: var(--ot-e3);
}

.bascule__case[b-25gxurbysv] {
    appearance: none;
    margin: 0;
    inline-size: 2.25rem;
    block-size: 1.25rem;
    border: 1px solid var(--ot-filet);
    border-radius: var(--ot-rayon);
    background: var(--ot-glace);
    position: relative;
    cursor: pointer;
    flex: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.bascule__case[b-25gxurbysv]::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 2px;
    background: var(--ot-moraine-clair);
    transition: transform 140ms ease, background-color 140ms ease;
}

.bascule__case:checked[b-25gxurbysv] {
    background: var(--ot-gentiane-voile);
    border-color: var(--ot-gentiane);
}

.bascule__case:checked[b-25gxurbysv]::after {
    transform: translateX(1rem);
    background: var(--ot-gentiane);
}

/* --- Le groupe du projet -------------------------------------------------- */

/* Le titre du groupe nomme le projet : trigramme, nom, et l'état s'il est
   archivé. Pas en capitales comme les autres titres de groupe — c'est un nom
   propre, pas une rubrique. */
.groupe__titre--projet[b-25gxurbysv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ot-e2);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--ot-taille-petit);
    color: var(--ot-roche);
}

/* Le trigramme est la clé de l'URL : il se lit comme un identifiant, en chasse
   fixe, pas comme de la prose. */
.trigramme[b-25gxurbysv] {
    font-family: var(--ot-police-mono);
    font-weight: 600;
    font-size: var(--ot-taille-etiquette);
    letter-spacing: 0.06em;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--ot-filet);
    border-radius: var(--ot-rayon);
    background: var(--ot-glace);
    color: var(--ot-moraine);
}

.projet__nom[b-25gxurbysv] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.pastille[b-25gxurbysv] {
    font-size: var(--ot-taille-etiquette);
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: var(--ot-rayon);
    background: var(--ot-meleze-voile);
    color: var(--ot-roche);
}

/* --- La déconnexion ------------------------------------------------------- */

/* Un bouton (le formulaire POST) qui a l'air d'un lien du rail. */
.lien--bouton[b-25gxurbysv] {
    inline-size: 100%;
    background: none;
    border-block: 0;
    border-inline-end: 0;
    font: inherit;
    font-size: var(--ot-taille-petit);
    text-align: start;
    cursor: pointer;
}

/* --- La barre haute, petit écran seulement -------------------------------- */

.barre[b-25gxurbysv] {
    grid-area: barre;
    display: none;
    align-items: center;
    gap: var(--ot-e3);
    padding: var(--ot-e3) var(--ot-e4);
    background: var(--ot-neige);
    border-block-end: 1px solid var(--ot-filet);
}

.hamburger[b-25gxurbysv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--ot-filet);
    border-radius: var(--ot-rayon);
    color: var(--ot-moraine);
    cursor: pointer;
    flex: none;
}

.hamburger:hover[b-25gxurbysv] {
    border-color: var(--ot-gentiane);
    color: var(--ot-roche);
}

/* Masquée à l'œil, PAS à la navigation : display:none la retirerait de l'ordre
   de tabulation et le tiroir deviendrait inatteignable au clavier. */
.tiroir__case[b-25gxurbysv] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Le focus clavier vit sur la case ; c'est le hamburger qui doit le montrer. */
.tiroir__case:focus-visible ~ .barre .hamburger[b-25gxurbysv] {
    outline: 2px solid var(--ot-gentiane);
    outline-offset: 2px;
}

.voile[b-25gxurbysv] {
    display: none;
}

/* --- Petit écran ---------------------------------------------------------- */

@media (max-width: 900px) {
    .barre[b-25gxurbysv] {
        display: flex;
    }

    .rail[b-25gxurbysv] {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(17rem, 82vw);
        z-index: 2;
        box-shadow: var(--ot-ombre);
        transform: translateX(-101%);
        transition: transform 180ms ease;
    }

    .tiroir__case:checked ~ .rail[b-25gxurbysv] {
        transform: none;
    }

    .tiroir__case:checked ~ .voile[b-25gxurbysv] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgb(0 0 0 / 32%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rail[b-25gxurbysv] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l24tedsnjg],
.components-reconnect-repeated-attempt-visible[b-l24tedsnjg],
.components-reconnect-failed-visible[b-l24tedsnjg],
.components-pause-visible[b-l24tedsnjg],
.components-resume-failed-visible[b-l24tedsnjg],
.components-rejoining-animation[b-l24tedsnjg] {
    display: none;
}

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


#components-reconnect-modal[b-l24tedsnjg] {
    background-color: var(--ot-neige);
    color: var(--ot-moraine);
    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-l24tedsnjg 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

/* font and cursor stated here: Bootstrap's Reboot used to give every button both, and it left
   with OTEMMAPMB-49 - without them the dialog's buttons fall back to the browser's own font. */
#components-reconnect-modal button[b-l24tedsnjg] {
    font: inherit;
    cursor: pointer;
    border: 0;
    background-color: var(--ot-gentiane-fonce);
    color: var(--ot-neige);
    padding: 4px 24px;
    border-radius: var(--ot-rayon);
}

    #components-reconnect-modal button:hover[b-l24tedsnjg] {
        background-color: var(--ot-roche);
    }

    #components-reconnect-modal button:active[b-l24tedsnjg] {
        background-color: var(--ot-gentiane-fonce);
    }

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

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

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

@keyframes components-rejoining-animation-b-l24tedsnjg {
    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/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   L'accueil
   ========================================================================== */

/* Copie de la feuille de l'accueil de Compta (OTEMMAPMB-49) : les deux modules
   ont la même porte d'entrée. Un seul écart, sous 900 px, dit en fin de fichier.

   L'horizon déborde le rembourrage du gabarit pour toucher les bords, comme
   dans la maquette. Les marges négatives reprennent volontairement les valeurs
   de .contenu (AppFrame.razor.css) : c'est le prix d'un débordement, et il
   est écrit ici pour que la prochaine personne qui change ce rembourrage
   trouve les deux endroits. */
.horizon[b-9fue5r0zdv] {
    position: relative;
    margin-block: calc(var(--ot-e8) * -1) var(--ot-e12);
    margin-inline: calc(var(--ot-e6) * -1);
}

.horizon__ciel[b-9fue5r0zdv] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    background: linear-gradient(to bottom, var(--ot-ciel-haut), var(--ot-ciel-bas));
}

.horizon__texte[b-9fue5r0zdv] {
    position: absolute;
    inset-block-start: var(--ot-e8);
    inset-inline: 0;
    padding-inline: var(--ot-e6);
}

.salutation[b-9fue5r0zdv] {
    margin: 0;
}

.date[b-9fue5r0zdv] {
    margin: var(--ot-e1) 0 0;
    color: var(--ot-moraine-clair);
    font-size: var(--ot-taille-petit);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .horizon[b-9fue5r0zdv] {
        margin-block: calc(var(--ot-e6) * -1) var(--ot-e8);
        margin-inline: calc(var(--ot-e4) * -1);
    }

    /* UN ÉCART avec la feuille de Compta, voulu : sous 900 px, le texte passe
       SOUS la bande du ciel au lieu d'y être posé. L'horizon n'y fait plus
       qu'une soixantaine de pixels, et la salutation porte l'adresse de la
       personne — une adresse longue passait sur deux lignes, débordait de
       l'horizon et venait toucher le paragraphe suivant (captures de
       OTEMMAPMB-49, 375 px). Le titre de Compta est court et tient. */
    .horizon__texte[b-9fue5r0zdv] {
        position: static;
        padding: var(--ot-e4) var(--ot-e4) 0;
    }
}
/* /Components/Pages/Projects/MonthPage.razor.rz.scp.css */
/* Wraps on a phone: arrows, a 12rem title and the "current month" link make a
   row of about 390 px, wider than a 375 px screen once the gutters are counted
   (measured by the end-to-end width check, OTEMMAPMB-49). */
.month-header[b-jovj75dls8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ot-e3);
    margin-block-end: var(--ot-e4);
}

.month-header h1[b-jovj75dls8] {
    margin: 0;
    min-inline-size: 12rem;
    text-align: center;
}

.month-lines select[b-jovj75dls8] {
    min-inline-size: 12rem;
}

/* The empty state is centred, so are the two ways into the month. */
.month-empty > p[b-jovj75dls8] {
    margin-inline: auto;
}

.month-empty__actions[b-jovj75dls8] {
    justify-content: center;
}

.month-note[b-jovj75dls8] {
    margin-block: var(--ot-e6) 0;
}

.month-delete-confirm[b-jovj75dls8] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ot-e2);
}