/* /Components/Layout/LayoutConnexion.razor.rz.scp.css */
/* Page de connexion (rendu statique, sans circuit ni thème MudBlazor) : le thème bleu de la spec §5.9 en CSS simple. */
.barre-connexion[b-yj2vo5bikh] {
    background-color: #0C447C;
    color: #FFFFFF;
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 16px 24px;
}

.page-connexion[b-yj2vo5bikh] {
    background-color: #F4F8FC;
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    min-height: calc(100vh - 61px);
    padding: 48px 16px;
    box-sizing: border-box;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-31dcf2xu2w],
.components-reconnect-repeated-attempt-visible[b-31dcf2xu2w],
.components-reconnect-failed-visible[b-31dcf2xu2w],
.components-pause-visible[b-31dcf2xu2w],
.components-resume-failed-visible[b-31dcf2xu2w],
.components-rejoining-animation[b-31dcf2xu2w] {
    display: none;
}

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


#components-reconnect-modal[b-31dcf2xu2w] {
    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-31dcf2xu2w 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-31dcf2xu2w {
    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/NouvelleFacture/ZonePdf.razor.rz.scp.css */
.zone-pdf:focus-within[b-l1qutjqhv4] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Écran étroit (spec §5.9) : le PDF au-dessus du formulaire, aperçu de hauteur fixe. */
.carte-pdf[b-l1qutjqhv4]  .papier-pdf {
    min-height: 480px;
}

.apercu-pdf[b-l1qutjqhv4] {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
}

/* Écran large (md et plus) : la carte prend la hauteur de la colonne fixe, l'aperçu la place restante. */
@media (min-width: 960px) {
    .carte-pdf[b-l1qutjqhv4] {
        height: 100%;
    }

    .carte-pdf[b-l1qutjqhv4]  .papier-pdf {
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .apercu-pdf[b-l1qutjqhv4] {
        flex: 1;
        min-height: 240px;
        height: auto;
    }
}
/* /Components/Pages/NouvelleFacture.razor.rz.scp.css */
/* Écran large (md et plus, spec §5.9) avec un PDF : les deux colonnes ont la même hauteur fixe, celle de la fenêtre moins 150 px
   (barre 64 px + marge de la page + titre, soit environ 134 px, plus 16 px de marge en bas). La page ne défile plus ; la colonne
   de droite défile dans sa propre hauteur quand son contenu est plus long, et la dernière carte (« Récapitulatif ») s'étire
   quand il est plus court, de sorte que les deux bas restent alignés.
   Sans PDF ou sur écran étroit : flux normal, le PDF au-dessus du formulaire (sans PDF, la colonne du PDF reste collée à 76 px). */
@media (min-width: 960px) {
    .colonne-pdf[b-pf0mbbywna] {
        position: sticky;
        top: 76px;
    }

    .colonne-pdf.avec-pdf[b-pf0mbbywna] {
        height: calc(100vh - 150px);
    }

    .colonne-formulaire.avec-pdf[b-pf0mbbywna] {
        height: calc(100vh - 150px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-right: 4px;
    }

    .colonne-formulaire.avec-pdf[b-pf0mbbywna]  .mud-paper {
        flex-shrink: 0;
    }

    /* Placée après la règle précédente (même spécificité) : la carte grandit sans jamais rétrécir sous son contenu.
       Quand la colonne défile, elle reste épinglée en bas (sticky), les cartes du dessus passant sous elle (ombre en haut). */
    .colonne-formulaire.avec-pdf[b-pf0mbbywna]  .papier-recapitulatif {
        flex: 1 0 auto;
        position: sticky;
        bottom: 0;
        z-index: 1;
        box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, 0.35);
    }

    /* La limite porte sur la liste des constats, pas sur la carte : la carte garde son étirement (contenu court) et, épinglée,
       ne dépasse pas la moitié environ de la colonne (environ 110 px d'en-tête et de boutons + la liste, qui défile dans la
       carte au-delà) ; « Envoyer à Chorus Pro » reste visible sous la liste. */
    .colonne-formulaire.avec-pdf[b-pf0mbbywna]  .constats-recapitulatif {
        max-height: max(120px, calc((100vh - 150px) * 0.5 - 110px));
        overflow-y: auto;
    }
}
/* /Components/Pages/PageConnexion.razor.rz.scp.css */
/* Carte de connexion (spec §5.9, rendu statique : CSS simple, sans MudBlazor). */
.carte-connexion[b-jhq2r0tha3] {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(12, 68, 124, 0.15);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 360px;
    padding: 24px;
}

.carte-connexion h1[b-jhq2r0tha3] {
    color: #0C447C;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 16px;
}

.carte-connexion label[b-jhq2r0tha3] {
    color: #0C447C;
    display: block;
    font-size: 0.875rem;
    margin: 12px 0 4px;
}

/* Les champs sont rendus par InputText (composant enfant) : ::deep. */
.carte-connexion[b-jhq2r0tha3]  input {
    border: 1px solid #85B7EB;
    border-radius: 6px;
    box-sizing: border-box;
    font: inherit;
    padding: 8px 10px;
    width: 100%;
}

.carte-connexion[b-jhq2r0tha3]  input:focus {
    border-color: #185FA5;
    outline: 2px solid #85B7EB;
    outline-offset: 0;
}

.carte-connexion button[b-jhq2r0tha3] {
    background-color: #185FA5;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    margin-top: 20px;
    padding: 10px 16px;
    width: 100%;
}

.carte-connexion button:hover[b-jhq2r0tha3] {
    background-color: #0C447C;
}

.erreur-connexion[b-jhq2r0tha3] {
    background-color: #FCEBEB;
    border-radius: 6px;
    color: #A32D2D;
    margin: 0 0 8px;
    padding: 8px 12px;
}