/* Pages non connectées (Connexion, Code de validation) - habillage PayTime 2026, maquette "B2 - Formulaire en carte" */

body {
    margin: 0;
    background: #EEF3F9;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #13253A;
}

.dx-widget,
.dx-widget input {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.login-page {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    min-height: 100dvh; /* iPhone : hauteur réelle sans la barre d'adresse (ignoré par les navigateurs plus anciens, qui gardent 100vh) */
}

/* ---------- Panneau marque (gauche) : pellicule animée ---------- */

.login-brand {
    flex: 1 1 560px;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 56px;
    box-sizing: border-box;
    background-color: #0F2D4E;
}

.login-film {
    position: absolute;
    top: -20%;
    height: 140%;
    transform: rotate(10deg);
    overflow: hidden;
    background-color: #0A2240;
    pointer-events: none;
}

.login-film-1 {
    left: 18%;
    width: 230px;
}

.login-film-2 {
    left: 58%;
    width: 150px;
    opacity: 0.45;
}

    /* Perforations */
    .login-film::before,
    .login-film::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 16px;
        border-radius: 3px;
        background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 12px, transparent 12px 26px);
    }

    .login-film::before {
        left: 8px;
    }

    .login-film::after {
        right: 8px;
    }

.login-film-2::before,
.login-film-2::after {
    width: 11px;
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 9px, transparent 9px 20px);
}

.login-film-2::before {
    left: 6px;
}

.login-film-2::after {
    right: 6px;
}

/* Images de la pellicule (défilement continu) */
.login-film-frames {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 34px;
    right: 34px;
    background-image: repeating-linear-gradient(180deg,
        #1E5C9F 0 150px, #0A2240 150px 164px,
        #174A85 164px 314px, #0A2240 314px 328px,
        #2F75B5 328px 478px, #0A2240 478px 492px,
        #14406F 492px 642px, #0A2240 642px 656px);
    background-size: 100% 656px;
    animation: ptFilmUp 26s linear infinite;
}

.login-film-2 .login-film-frames {
    left: 24px;
    right: 24px;
    background-image: repeating-linear-gradient(180deg,
        #2366B0 0 96px, #0A2240 96px 106px,
        #1A5290 106px 202px, #0A2240 202px 212px,
        #3A84C6 212px 308px, #0A2240 308px 318px,
        #123B66 318px 414px, #0A2240 414px 424px);
    background-size: 100% 424px;
    animation: ptFilmDown 38s linear infinite;
}

@keyframes ptFilmUp {
    from { background-position: 0 0; }
    to { background-position: 0 -656px; }
}

@keyframes ptFilmDown {
    from { background-position: 0 0; }
    to { background-position: 0 424px; }
}

/* Dégradé bas pour la lisibilité du logo */
.login-brand-shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(15, 45, 78, 0.95) 0%, rgba(15, 45, 78, 0.2) 45%, rgba(15, 45, 78, 0) 70%);
}

.login-brand-logo {
    position: relative;
    z-index: 1;
    width: 320px;
    max-width: 80%;
    height: auto;
}

/* ---------- Panneau formulaire (droite) ---------- */

.login-panel {
    flex: 1 1 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    box-sizing: border-box;
    background-color: #EEF3F9;
    background-image: radial-gradient(rgba(35, 102, 176, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

.login-card {
    width: 100%;
    max-width: 410px;
    box-sizing: border-box;
    padding: 36px 34px 34px;
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 45, 78, 0.06), 0 18px 44px rgba(15, 45, 78, 0.14);
    animation: ptRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ptRise {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.login-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: #E7F0FA;
    color: #12325A;
}

.login-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #13253A;
}

/* Champs avec icône */

.login-field {
    position: relative;
    margin-bottom: 14px;
}

    .login-field > svg {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        color: #8A99AB;
        pointer-events: none;
        transition: color 0.15s;
    }

    .login-field:focus-within > svg {
        color: #12325A;
    }

.login-card .dx-texteditor {
    width: 100% !important;
}

.login-card .dx-texteditor.dx-editor-outlined {
    border: 1.5px solid #D5DEE9;
    border-radius: 12px;
    background-color: #FFFFFF;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .login-card .dx-texteditor.dx-editor-outlined.dx-state-hover {
        border-color: #0F3152;
    }

    .login-card .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: #0F3152;
        box-shadow: 0 0 0 4px rgba(35, 102, 176, 0.14);
    }

.login-card .dx-texteditor-input {
    min-height: 47px;
    padding: 0 14px 0 45px;
    font-size: 15px;
}

.login-card .dx-placeholder::before {
    padding: 14px 14px 14px 45px;
    font-size: 15px;
}

/* Boutons */

.login-actions {
    margin-top: 24px;
}

    .login-actions > div + div {
        margin-top: 14px;
    }

.connection-button {
    width: 100% !important;
    height: 50px !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px !important;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

    .connection-button.dx-button-mode-contained.dx-button-default {
        background-color: #0F3152;
    }

        .connection-button.dx-button-mode-contained.dx-button-default.dx-state-hover {
            background-color: #1D4473;
            box-shadow: 0 10px 22px rgba(35, 102, 176, 0.35);
            transform: translateY(-1px);
        }

    .connection-button.dx-button-mode-outlined.dx-button-default {
        border: 1.5px solid #D5DEE9;
        color: #12325A;
        background-color: #FFFFFF;
    }

        .connection-button.dx-button-mode-outlined.dx-button-default.dx-state-hover {
            background-color: #EEF4FB;
        }

/* Message d'erreur */

.error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #FDE8E6;
    color: #A8261B;
    font-size: 13.5px;
}

    .error-message::before {
        content: "!";
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid currentColor;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

/* Bouton flottant Aide */

.dx-fa-button.dx-fa-button-main {
    background-color: #0F3152;
}

/* Accessibilité : pas d'animation si l'utilisateur l'a demandé */

@media (prefers-reduced-motion: reduce) {
    .login-film-frames,
    .login-card {
        animation: none;
    }
}