/* Stratenzer : ecran de connexion pense pour le telephone (25/10/2026).
 * Charge uniquement quand le produit est Stratenzer (templates/auth/login.html) ; Serenzer n'est pas touche.
 * Plein ecran ivoire (pas de carte flottante), grandes zones tactiles (52 px), texte de saisie a 16 px (en
 * dessous, iOS zoome la page), zones sures de l'iPhone. Jetons : brand.css. */

body.login-st {
    display: block; padding: 0; min-height: 100vh; min-height: 100dvh;
    background: var(--brand-ivory); color: var(--brand-grey-900); font-family: var(--brand-font-text);
    -webkit-text-size-adjust: 100%;
}
.login-st .login-card {
    background: transparent; box-shadow: none; border-radius: 0; max-width: 440px; width: 100%; margin: 0 auto;
    min-height: 100vh; min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 44px) max(24px, env(safe-area-inset-right, 0px))
             calc(env(safe-area-inset-bottom, 0px) + 28px) max(24px, env(safe-area-inset-left, 0px));
}

/* langue : discrete, sans drapeaux */
.login-st .language-selector { top: calc(env(safe-area-inset-top, 0px) + 8px); right: max(14px, env(safe-area-inset-right, 0px)); }
.login-st .language-selector select {
    height: 40px; border: 0; background-color: transparent; color: var(--brand-grey-500);
    font-family: var(--brand-font-text); font-size: 15px; box-shadow: none;
}

/* identite */
.login-st .login-header { margin-bottom: 26px; }
.login-st .st-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-st .st-brand__symbol { width: 64px; height: auto; }
.login-st .st-brand__name { font-size: 21px; }
.login-st .st-brand__tag { margin: 0; max-width: 300px; text-align: center; color: var(--brand-grey-500); font-size: 16px; line-height: 1.4; }
.login-st .login-title { font-family: var(--brand-font-title); font-size: 22px; font-weight: 600; color: var(--brand-night); margin-bottom: 4px; }
.login-st .login-subtitle { color: var(--brand-grey-500); font-size: 15px; opacity: 1; }

/* Apple en premier (recommandation d'Apple), puis Google */
.login-st .oauth-section { margin-bottom: 20px; }
.login-st .oauth-buttons { gap: 12px; }
.login-st #appleSignInBtn { order: -1; }
.login-st .btn-oauth {
    min-height: 52px; border-radius: 14px; font-family: var(--brand-font-text); font-size: 17px; font-weight: 600;
    color: var(--brand-night); background: #fff; border: 1.5px solid var(--brand-grey-200); gap: 12px;
    transform: none; box-shadow: none; -webkit-tap-highlight-color: transparent;
}
.login-st .btn-oauth:hover { background: #fff; border-color: var(--brand-light); transform: none; box-shadow: none; }
.login-st .btn-oauth:active { background: var(--brand-pale); }
.login-st .oauth-icon { width: 22px; height: 22px; }
.login-st .oauth-divider { margin: 20px 0; }
.login-st .oauth-divider:before { background: var(--brand-grey-200); }
.login-st .oauth-divider span { background: var(--brand-ivory); color: var(--brand-grey-500); font-size: 14px; }

/* champs */
.login-st .login-form { gap: 16px; }
.login-st .form-label { font-size: 14px; font-weight: 600; color: var(--brand-night); }
.login-st .form-input {
    height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--brand-grey-200);
    font-family: var(--brand-font-text); font-size: 16px; color: var(--brand-night); background: #fff;
}
.login-st .form-input::placeholder { color: var(--brand-grey-500); opacity: .8; }
.login-st .form-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-pale); background: #fff; }
.login-st .st-pass { position: relative; }
.login-st .st-pass .form-input { width: 100%; padding-right: 52px; }
.login-st .st-eye {
    position: absolute; top: 0; right: 2px; width: 48px; height: 52px; border: 0; background: none;
    color: var(--brand-grey-500); display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.login-st .st-eye .st-eye__off { display: none; }
.login-st .st-eye.is-on { color: var(--brand-primary); }
.login-st .st-eye.is-on .st-eye__off { display: inline; }

.login-st .form-options { font-size: 15px; min-height: 44px; }
.login-st .form-options label { gap: 10px; min-height: 44px; color: var(--brand-grey-900); }
.login-st .form-options label input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-primary); }
.login-st .form-options a { color: var(--brand-primary); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* bouton principal + chargeur */
.login-st .btn-primary {
    height: 54px; padding: 0 16px; border-radius: 27px; background: var(--brand-primary); color: #fff;
    font-family: var(--brand-font-text); font-size: 17px; font-weight: 600; letter-spacing: 0; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.login-st .btn-primary:hover { background: var(--brand-night); }
.login-st .btn-primary:active { background: var(--brand-night); transform: none; }
.login-st .btn-primary.is-loading { color: transparent; pointer-events: none; }
.login-st .btn-primary.is-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
    animation: st-login-spin .7s linear infinite;
}
@keyframes st-login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-st .btn-primary.is-loading::after { animation-duration: 1.6s; } }

/* creer un compte : action secondaire, en bas */
.login-st .register-link__box {
    margin-top: 24px; padding: 14px 16px; background: transparent; border: 1.5px solid var(--brand-grey-200);
    border-radius: 27px; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 6px; font-size: 15px; color: var(--brand-grey-900);
}
.login-st .register-link__box a { color: var(--brand-primary); font-size: 16px; font-weight: 700; }
.login-st .flash-message { border-radius: 14px; font-size: 15px; }