/**********************************************************************/
/***************************** Login/Account pages **********************/
/**********************************************************************/
/* Design custom repris de la maquette edu-one-login-v5 (2026-07-29) - pas de
   Bootstrap sur ce layout (icônes Bootstrap Icons conservées, chargées en
   local). Polices : pile système pour le texte courant (pas de dépendance
   Google Fonts), sauf le titre de l'illustration (.art-caption p) qui utilise
   Baloo 2 - auto-hébergé en un seul poids (600, celui réellement utilisé,
   fichier dans wwwroot/lib/fonts/baloo2/) plutôt que chargé depuis fonts.googleapis.com,
   pour rester cohérent avec le reste du projet (aucune lib front via CDN).
   Aucun style="" ni <script> inline (CSP script-src/style-src, point 6) - tout
   en classes CSS + JS externe chargé via @section Scripts. */

@font-face {
    font-family: "Baloo 2";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/lib/fonts/baloo2/baloo2-600.woff2") format("woff2");
}

:root {
    --cream: #5B7C93;
    --sage: #29B6D8;
    --mustard: #F2A900;
    --coral: #D93A3A;
    --purple: #A78BFA;
    --green-btn: #1C8A4B;
    --green-btn-hover: #166F3C;
    --ink: #2C3E38;
    --ink-soft: #5B6B64;
    --ink-muted: #8B968F;
    --line: #E4D9C3;
    --white: #FFFFFF;
    --danger: #C6524A;
    --info: #1F7A93;
    --info-bg: #E5F4F8;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.login-body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--white);
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* ---------- Panneau gauche : illustration ---------- */
.art-panel {
    position: relative;
    background: var(--cream);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
}

.blob-1 { width: 180px; height: 180px; top: -40px; left: -40px; background: var(--mustard); }
.blob-2 { width: 110px; height: 110px; top: 60px; right: 60px; background: var(--sage); }
.blob-3 { width: 90px; height: 90px; bottom: 120px; left: 40px; background: var(--coral); opacity: 0.85; }
.blob-4 { width: 150px; height: 150px; bottom: -60px; right: -30px; background: var(--purple); opacity: 0.5; }
.blob-5 { width: 60px; height: 60px; bottom: 220px; right: 120px; background: var(--green-btn); opacity: 0.7; }

.art-illustration {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 280px;
    display: flex;
    justify-content: center;
}

.art-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.15));
}

.art-caption {
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
}

    .art-caption p {
        font-family: "Baloo 2", "Segoe UI Rounded", ui-rounded, var(--font-sans);
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--white);
        margin: 0;
    }

    .art-caption span {
        display: block;
        font-weight: 400;
        font-size: 0.85rem;
        color: #D7E4EC;
        margin-top: 4px;
    }

/* ---------- Panneau droit : formulaire ---------- */
.form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.form-wrap {
    width: 100%;
    max-width: 380px;
}

.brand {
    margin-bottom: 2.75rem;
}

.brand-mark {
    display: inline-flex;
    align-items: baseline;
}

    .brand-mark .edu {
        font-size: 1.7rem;
        font-weight: 600;
        color: var(--ink-soft);
        letter-spacing: -0.01em;
    }

    .brand-mark .one {
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--green-btn);
        letter-spacing: -0.01em;
    }

.welcome {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0 0 2rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.input-shell {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .input-shell:hover,
    .input-shell:focus-within {
        border-color: var(--sage);
    }

    .input-shell:focus-within {
        box-shadow: 0 0 0 3px rgba(41,182,216,.18);
    }

    .input-shell .icon {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-muted);
        flex-shrink: 0;
    }

    .input-shell input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: var(--ink);
        padding: 11px 12px 11px 0;
    }

        .input-shell input::placeholder {
            color: var(--ink-muted);
        }

.toggle-pass {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

    .toggle-pass:hover {
        color: var(--green-btn);
    }

.row-between {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -0.25rem;
    flex-wrap: wrap;
    gap: 8px;
}

.forgot {
    font-size: 0.85rem;
    color: var(--green-btn);
    text-decoration: none;
    font-weight: 500;
}

    .forgot:hover {
        text-decoration: underline;
    }

.btn-login {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
    background: var(--green-btn);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease, transform .1s ease;
}

    .btn-login:hover {
        background: var(--green-btn-hover);
    }

    .btn-login:active {
        transform: scale(0.98);
    }

    .btn-login:focus-visible {
        outline: 2px solid var(--green-btn);
        outline-offset: 2px;
    }

.login-footer {
    margin-top: 3rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
    text-align: center;
}

/* ---------- Messages de validation ---------- */
.validation-summary-valid {
    display: none;
}

.form-wrap .info-message {
    background: var(--info-bg);
    color: var(--info) !important;
    border: 1px solid var(--info);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

.form-wrap .validation-summary-errors {
    background: #FBEAE9;
    color: var(--danger) !important;
    border: 1px solid var(--danger);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

    .form-wrap .validation-summary-errors ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.form-wrap .field-validation-error {
    display: block;
    font-size: 0.78rem;
    color: var(--danger) !important;
    margin-top: 6px;
}

.input-shell:has(input.input-validation-error) {
    border-color: var(--danger);
}

/* ---------- Point TODO 211 (sujet 1) : écran unique Epuration/MonCompte ---------- */
.suspension-banner {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
}

.compte-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compte-stat-label {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.compte-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
}

.compte-block-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 0.5rem;
}

.compte-empty {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin: 0;
}

.compte-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .compte-list li {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
    }

    .compte-list li:last-child {
        border-bottom: none;
    }

/* Créance : un seul chiffre agrégé, jamais de liste - fond distinct pour que la différence de
   traitement avec le bloc "dettes" (nommé, en liste) se lise comme un choix, pas un bug. */
.compte-block-agrege {
    background: #F4F6F5;
    border-radius: 10px;
    padding: 14px;
}

.compte-agrege-montant {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.compte-agrege-note {
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin: 0;
}

.compte-action {
    border: 1px solid var(--sage);
    border-radius: 10px;
    padding: 14px;
}

/* Vert en contour plutôt que transparent/gris (2026-09-08, retour utilisateur sur
   Epuration/MonCompte : bouton trop peu visible) - reste net face au vert plein de .btn-login
   quand une confirmation (surplus/épuration) est aussi affichée au-dessus. */
.btn-logout-plain {
    background: transparent;
    color: var(--green-btn);
    border: 1.5px solid var(--green-btn);
    margin-top: 0.5rem;
}

    .btn-logout-plain:hover {
        background: var(--green-btn);
        color: var(--white);
    }

@media (max-width: 860px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .art-panel {
        display: none;
    }

    .form-panel {
        padding: 2.5rem 1.5rem;
    }
}