/* /Components/Layout/LayoutConnexion.razor.rz.scp.css */
/* =========================================================================
   Page de connexion dans le style de l'accueil BELENOS : fond #333, halo
   orange diffus, marque DATIS, nom en capitales espacees, filet orange,
   slogan, puis une carte de saisie translucide posee sur l'ensemble.
   Les pages du dossier Compte ne changent pas : leurs champs Bootstrap sont
   restyles ici (::deep) pour ressembler aux champs de BELENOS.
   ========================================================================= */

.vitrine[b-utb48dsas3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
}

.accueil[b-utb48dsas3] {
    position: relative;
    width: 100%;
    max-width: 30rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Halo : une lueur orange tres diffuse derriere la marque, sans image. */
.accueil-halo[b-utb48dsas3] {
    position: absolute;
    top: -9rem;
    left: 50%;
    width: 38rem;
    height: 38rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 126, 0, .20) 0%, rgba(253, 126, 0, .07) 38%, rgba(253, 126, 0, 0) 68%);
    pointer-events: none;
    z-index: 0;
}

.accueil > *:not(.accueil-halo)[b-utb48dsas3] { position: relative; z-index: 1; }

.accueil-marque[b-utb48dsas3] {
    width: 4.25rem;
    height: 4.25rem;
    color: var(--datis-orange, #FD7E00);
    margin-bottom: 1rem;
}

.accueil-nom[b-utb48dsas3] {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: .28em;
    /* l'espacement ajoute un blanc apres la derniere lettre : on le compense */
    margin-right: -.28em;
    line-height: 1.1;
    color: #F2F2F2;
}

.accueil-filet[b-utb48dsas3] {
    width: 3.5rem;
    height: 2px;
    margin: 1rem auto .9rem;
    border-radius: 2px;
    background: var(--datis-orange, #FD7E00);
}

.accueil-slogan[b-utb48dsas3] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--datis-orange, #FD7E00);
    letter-spacing: .02em;
}

.accueil-baseline[b-utb48dsas3] {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: #9A9A9A;
}

/* --- carte de saisie (reprise de BELENOS) --- */
.carte-connexion[b-utb48dsas3] {
    width: 100%;
    max-width: 23rem;
    margin: 1.75rem auto 0;
    padding: 1.35rem 1.4rem 1.5rem;
    border-radius: .75rem;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(20, 20, 20, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    text-align: left;
}

.carte-connexion[b-utb48dsas3]  h1 {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B8B8B8;
}

.carte-connexion[b-utb48dsas3]  .form-label {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #B8B8B8;
    margin-bottom: .3rem;
}

.carte-connexion[b-utb48dsas3]  .form-control {
    padding: .55rem .7rem;
    border-radius: .45rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #F2F2F2;
    font-size: 1rem;
    line-height: 1.3;
}

.carte-connexion[b-utb48dsas3]  .form-control:focus {
    border-color: #FD7E00;
    box-shadow: 0 0 0 .18rem rgba(253, 126, 0, .25);
    background: rgba(255, 255, 255, .08);
}

.carte-connexion[b-utb48dsas3]  .btn-primary {
    padding: .58rem 1rem;
    border-radius: .45rem;
    font-size: 1rem;
}

.carte-connexion[b-utb48dsas3]  .alert-danger {
    background: rgba(192, 57, 43, .16);
    border: 1px solid rgba(192, 57, 43, .5);
    color: #FFC9C2;
}

.carte-connexion[b-utb48dsas3]  .alert-success {
    background: rgba(46, 125, 79, .16);
    border: 1px solid rgba(46, 125, 79, .5);
    color: #BFE8CE;
}

.carte-connexion[b-utb48dsas3]  .validation-message {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: #FFC9C2;
}

.accueil-deconnexion[b-utb48dsas3] { margin-top: .9rem; }

.accueil-signature[b-utb48dsas3] {
    width: 11rem;
    max-width: 60%;
    height: auto;
    margin-top: 2rem;
    opacity: .85;
}

.accueil-version[b-utb48dsas3] {
    margin-top: .6rem;
    font-size: .72rem;
    color: #7A7A7A;
}

/* Sous 480 px la carte prend toute la largeur : jamais de defilement lateral. */
@media (max-width: 480px) {
    .vitrine[b-utb48dsas3] { padding: 1.25rem .75rem; }
    .accueil-nom[b-utb48dsas3] { font-size: 1.9rem; }
    .accueil-halo[b-utb48dsas3] { width: 26rem; height: 26rem; top: -6rem; }
    .carte-connexion[b-utb48dsas3] { padding: 1.1rem 1rem 1.25rem; }
}

/* =========================================================================
   Livraison 20 : theme CLAIR. Tout ce qui precede est pense pour le fond
   #333 (texte clair, carte translucide sombre) : sur fond clair, la carte
   devenait une plaque grise et le nom disparaissait. Ici : nom en gris
   anthracite, carte blanche, champs blancs bordes, texte fonce ; l'orange
   reste la marque (logo, filet, bouton), le texte orange passe au --lien
   plus fonce pour rester lisible.
   ========================================================================= */
:root[data-theme="clair"] .accueil-halo[b-utb48dsas3] {
    background: radial-gradient(circle, rgba(253, 126, 0, .13) 0%, rgba(253, 126, 0, .05) 38%, rgba(253, 126, 0, 0) 68%);
}

:root[data-theme="clair"] .accueil-nom[b-utb48dsas3] { color: #4A4F57; }

:root[data-theme="clair"] .accueil-slogan[b-utb48dsas3] { color: var(--lien, #B35800); }

:root[data-theme="clair"] .accueil-baseline[b-utb48dsas3] { color: #5F6670; }

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3] {
    border: 1px solid #DCE1E8;
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .10);
}

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  h1,
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .form-label { color: #5F6670; }

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .form-control {
    border: 1px solid #BFC7D1;
    background: #FFFFFF;
    color: #1E2329;
}

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .form-control:focus {
    border-color: #FD7E00;
    box-shadow: 0 0 0 .18rem rgba(253, 126, 0, .22);
    background: #FFFFFF;
}

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  a { color: var(--lien, #B35800); }
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  a:hover { color: var(--lien-survol, #8A4300); }
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .texte-faible,
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .text-muted { color: #5F6670 !important; }

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .alert-danger {
    background: #FDECEA;
    border: 1px solid #F3B8B1;
    color: #8C1D13;
}

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .alert-success {
    background: #E8F5EC;
    border: 1px solid #A8D5B7;
    color: #1B5E34;
}

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .validation-message { color: #B3261E; }

:root[data-theme="clair"] .accueil-signature[b-utb48dsas3] { opacity: 1; }

:root[data-theme="clair"] .accueil-version[b-utb48dsas3] { color: #6B7280; }

/* Livraison 21 : cases "Rester connecte" / "Ne plus demander le code". */
.carte-connexion[b-utb48dsas3]  .case-rester .form-check-label { color: #E6E6E6; font-size: .92rem; }
.carte-connexion[b-utb48dsas3]  .case-rester .texte-faible { color: #9A9A9A; margin-top: .15rem; line-height: 1.35; }
.carte-connexion[b-utb48dsas3]  .case-rester .form-check-input {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .3);
}
.carte-connexion[b-utb48dsas3]  .case-rester .form-check-input:checked { background-color: #FD7E00; border-color: #FD7E00; }
.carte-connexion[b-utb48dsas3]  .case-rester .form-check-input:focus { box-shadow: 0 0 0 .18rem rgba(253, 126, 0, .25); border-color: #FD7E00; }

:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .case-rester .form-check-label { color: #1E2329; }
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .case-rester .form-check-input { background-color: #FFFFFF; border-color: #BFC7D1; }
:root[data-theme="clair"] .carte-connexion[b-utb48dsas3]  .case-rester .form-check-input:checked { background-color: #FD7E00; border-color: #FD7E00; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Disposition : colonne de navigation FIXE a gauche (elle ne defile pas avec
   la page), barre du haut collee en haut, contenu a droite.
   Sous 992 px la colonne devient un tiroir, ouvert par la case a cocher
   (aucun javascript) et referme par le voile ou par un choix de menu. */
.page[b-q7jisx3uq8] { position: relative; min-height: 100vh; }

main[b-q7jisx3uq8] { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; margin-left: 250px; }

.menu-bascule[b-q7jisx3uq8] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.sidebar[b-q7jisx3uq8] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: 250px;
    background: var(--barre, #2A2A2A);
    border-right: 1px solid var(--bordure, #4A4A4A);
    overflow-y: auto;
}

.menu-voile[b-q7jisx3uq8] { display: none; }

.barre-haut[b-q7jisx3uq8] {
    background-color: var(--surface, #3C3C3C);
    border-bottom: 1px solid var(--bordure, #4A4A4A);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.content[b-q7jisx3uq8] { flex: 1; }

/* La bulle du compte est un composant enfant : ::deep pour l'atteindre. */
.barre-haut[b-q7jisx3uq8]  .bulle { margin-left: auto; }

@media (max-width: 991.98px) {
    main[b-q7jisx3uq8] { margin-left: 0; }

    .sidebar[b-q7jisx3uq8] {
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--ombre, 0 10px 30px rgba(0, 0, 0, .35));
    }

    .menu-bascule:checked ~ .sidebar[b-q7jisx3uq8] { transform: translateX(0); }

    .menu-bascule:checked ~ .menu-voile[b-q7jisx3uq8] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(0, 0, 0, .5);
    }

    /* Clavier : la case a cocher garde le focus visible sur le bouton menu. */
    .menu-bascule:focus-visible ~ main .barre-haut[b-q7jisx3uq8]  .burger {
        outline: 2px solid var(--datis-orange, #FD7E00);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-q7jisx3uq8] { transition: none; }
}

#blazor-error-ui[b-q7jisx3uq8] {
    background: var(--alerte-fond, rgba(255, 138, 138, .14));
    border-top: 2px solid var(--alerte, #FF8A8A);
    color: var(--texte, #EDEDED);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1300;
}

#blazor-error-ui .dismiss[b-q7jisx3uq8] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.marque[b-i5dzpky2q5] {
    display: flex;
    align-items: center;
    gap: .7rem;
    height: 3.5rem;
    border-bottom: 1px solid var(--bordure, #4A4A4A);
    margin-bottom: .75rem;
}

.marque-logo[b-i5dzpky2q5] { height: 26px; width: auto; }

.marque-produit[b-i5dzpky2q5] {
    color: var(--lien, #FD7E00);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
}

.marque-version[b-i5dzpky2q5] { font-size: .7rem; color: var(--texte-3, #8A8A8A); }

.nav-item[b-i5dzpky2q5] { font-size: .92rem; padding-bottom: .15rem; }

/* Le tiroir se referme des qu'on choisit une entree (case a cocher decochee
   par la navigation : la page est reconstruite). */

.nav-item[b-i5dzpky2q5]  .nav-link {
    color: var(--texte-2, #ADADAD);
    border-radius: 4px;
    height: 2.6rem;
    display: flex;
    align-items: center;
    line-height: 2.6rem;
    padding: 0 .75rem;
}

.nav-item[b-i5dzpky2q5]  .nav-link:hover {
    color: var(--lien, #FD7E00);
    background-color: var(--survol, #3C3C3C);
    text-decoration: none;
}

.nav-item[b-i5dzpky2q5]  a.active {
    color: var(--lien, #FD7E00);
    background-color: var(--surface-2, #454545);
}

/* Intertitre du menu (livraison 09) : "Impression en masse", "Administration". */
.nav-titre[b-i5dzpky2q5] {
    margin: 1rem 0 .35rem;
    padding-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texte-3, #8A8A8A);
}