/* =====================================================================
   eLIS — Page de connexion
   Toutes les règles sont préfixées .lg- pour ne pas entrer en conflit
   avec SiteAdone.css ni avec les autres pages.
   ===================================================================== */

:root {
    --lg-accent: #0d9488;          /* teal médical */
    --lg-accent-dark: #0f766e;
    --lg-accent-soft: rgba(13, 148, 136, .12);
    --lg-text: #1e293b;
    --lg-muted: #64748b;
    --lg-border: #dbe3ea;
    --lg-card-bg: rgba(255, 255, 255, .88);
    --lg-radius: 1rem;
}

/* ---------- Mise en page ---------- */
.lg-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--lg-text);
}

.lg-card {
    width: 100%;
    max-width: 420px;
    background: var(--lg-card-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--lg-radius);
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .06);
    padding: 2.25rem 2rem 1.75rem;
    animation: lg-rise .45s ease-out both;
}

@keyframes lg-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-card { animation: none; }
}

/* ---------- En-tête ---------- */
.lg-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.lg-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 1.75rem;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, var(--lg-accent-dark));
    box-shadow: 0 10px 20px -8px rgba(13, 148, 136, .6);
}

.lg-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    letter-spacing: -.01em;
}

.lg-subtitle {
    color: var(--lg-muted);
    font-size: .95rem;
    margin: 0;
}

/* ---------- Champs ---------- */
.lg-page .form-floating > .form-control {
    height: 3.4rem;
    border: 1px solid var(--lg-border);
    border-radius: .65rem;
    background-color: #fff;
    color: var(--lg-text);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.lg-page .form-floating > label {
    color: var(--lg-muted);
}

.lg-page .form-floating > label i {
    width: 1.1rem;
    margin-right: .35rem;
    opacity: .8;
}

.lg-page .form-floating > .form-control:focus {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 .25rem var(--lg-accent-soft);
}

.lg-page .form-floating > .form-control.is-invalid {
    border-color: #dc3545;
}

/* Remplissage automatique du navigateur : on garde un fond blanc */
.lg-page input:-webkit-autofill,
.lg-page input:-webkit-autofill:hover,
.lg-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s;
}
.lg-page input:autofill {
    background-color: #fff !important;
    filter: none;
}

/* Mot de passe + bouton afficher/masquer */
.lg-password {
    position: relative;
}

.lg-password .form-control {
    padding-right: 3rem;
}

.lg-toggle-pwd {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
}

.lg-toggle-pwd:hover,
.lg-toggle-pwd:focus-visible {
    color: var(--lg-accent);
    background: var(--lg-accent-soft);
    outline: none;
}

.lg-capslock {
    display: none;
    font-size: .82rem;
    color: #b45309;
    margin-top: .35rem;
}

.lg-capslock.show { display: block; }

/* ---------- Bouton principal ---------- */
.lg-btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 3.1rem;
    border: 0;
    border-radius: .65rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(135deg, #14b8a6, var(--lg-accent-dark));
    box-shadow: 0 8px 18px -8px rgba(13, 148, 136, .7);
    transition: transform .12s, box-shadow .12s, filter .12s;
}

.lg-btn-login:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 22px -10px rgba(13, 148, 136, .8);
}

.lg-btn-login:active { transform: translateY(1px); }

.lg-btn-login:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem var(--lg-accent-soft), 0 8px 18px -8px rgba(13, 148, 136, .7);
}

/* État "connexion en cours" */
.lg-btn-login .lg-spinner { display: none; }
.lg-btn-login.is-loading { pointer-events: none; opacity: .85; }
.lg-btn-login.is-loading .lg-spinner { display: inline-block; }
.lg-btn-login.is-loading .lg-btn-icon { display: none; }

/* ---------- Actions secondaires ---------- */
.lg-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 1rem;
    color: var(--lg-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lg-divider::before,
.lg-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-border);
}

.lg-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
}

.lg-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem .75rem;
    border: 1px solid var(--lg-border);
    border-radius: .65rem;
    background: #fff;
    color: var(--lg-text) !important;
    font-weight: 500;
    font-size: .92rem;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.lg-btn-secondary i { color: var(--lg-accent); }

.lg-btn-secondary:hover,
.lg-btn-secondary:focus-visible {
    border-color: var(--lg-accent);
    background: var(--lg-accent-soft);
    color: var(--lg-accent-dark) !important;
    outline: none;
}

/* ---------- Pied de page ---------- */
.lg-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.25rem;
    font-size: .85rem;
}

.lg-footer a {
    color: var(--lg-muted);
    text-decoration: none;
}

.lg-footer a:hover,
.lg-footer a:focus-visible {
    color: var(--lg-accent-dark);
    text-decoration: underline;
}

.lg-footer a i { margin-right: .3rem; }

/* ---------- Modales ---------- */
.lg-modal .modal-content {
    border: 0;
    border-radius: var(--lg-radius);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35);
}

.lg-modal .modal-header {
    border-bottom: 1px solid #eef2f6;
    padding: 1.1rem 1.5rem;
}

.lg-modal .modal-title {
    font-weight: 600;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.lg-modal .modal-title i { color: var(--lg-accent); }

.lg-modal .modal-body { padding: 1.5rem; }

.lg-modal .modal-footer {
    border-top: 1px solid #eef2f6;
    padding: 1rem 1.5rem;
}

.lg-modal .form-label {
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .3rem;
}

.lg-modal .form-control:focus {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 .25rem var(--lg-accent-soft);
}

.lg-modal .lg-required::after {
    content: " *";
    color: #dc3545;
}

.lg-modal .btn-accent {
    color: #fff;
    background: var(--lg-accent);
    border-color: var(--lg-accent);
}

.lg-modal .btn-accent:hover {
    background: var(--lg-accent-dark);
    border-color: var(--lg-accent-dark);
    color: #fff;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    .lg-card { padding: 1.75rem 1.25rem 1.5rem; }
    .lg-title { font-size: 1.3rem; }
}

/* ---------- Lien "Identifiants oubliés ?" ---------- */
.lg-forgot {
    margin-top: .5rem;
    text-align: right;
    font-size: .85rem;
}

.lg-forgot a {
    color: var(--lg-accent-dark);
    text-decoration: none;
    font-weight: 500;
}

.lg-forgot a:hover,
.lg-forgot a:focus-visible {
    text-decoration: underline;
}

/* ---------- Messages d'erreur des validateurs ASP.NET ----------
   ASP.NET les masque/affiche lui-même via style="display:none" : on ne doit
   PAS utiliser .d-block (display:block !important), qui les rendrait toujours visibles. */
.invalid-feedback.lg-error {
    display: block;
}

/* ---------- Choix du type de contact (Patient / Partenaire) ---------- */
.lg-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.lg-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 1.4rem 1rem 1.2rem;
    border: 1px solid var(--lg-border);
    border-radius: .85rem;
    background: #fff;
    color: var(--lg-text);
    transition: border-color .15s, background-color .15s, transform .12s, box-shadow .15s;
}

.lg-choice-card:hover,
.lg-choice-card:focus-visible {
    border-color: var(--lg-accent);
    background: var(--lg-accent-soft);
    box-shadow: 0 8px 18px -12px rgba(13, 148, 136, .6);
    transform: translateY(-1px);
    outline: none;
}

.lg-choice-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
    border-radius: 14px;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, var(--lg-accent-dark));
}

.lg-choice-title {
    font-weight: 600;
    font-size: 1.02rem;
}

.lg-choice-text {
    font-size: .84rem;
    color: var(--lg-muted);
    line-height: 1.35;
}

@media (max-width: 480px) {
    .lg-choice { grid-template-columns: 1fr; }
}

/* ---------- Formulaire partenaire ---------- */
.lg-section {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lg-muted);
    margin: 1.5rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eef2f6;
}

.lg-modal .modal-body > .lg-section:first-child { margin-top: 0; }

.lg-modal .form-select:focus {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 .25rem var(--lg-accent-soft);
}

/* Bouton "retour" dans l'en-tête de la modale */
.lg-back {
    width: 34px;
    height: 34px;
    margin-right: .5rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--lg-muted);
}

.lg-back:hover,
.lg-back:focus-visible {
    background: var(--lg-accent-soft);
    color: var(--lg-accent-dark);
    outline: none;
}
/* Logo de l'application (web.config : Pwa_Logo) à la place de l'icône */
.el-brand-logo.has-img {
    background: #fff;
    border: 1px solid var(--el-border);
    box-shadow: none;
    overflow: hidden;
    padding: 3px;
}

.el-brand-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}