/* ============================================================
   ONIFY LOGIN - Premium Modern Design
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --login-primary: #1e3a5f;
    --login-primary-light: #2a5a8f;
    --login-accent: #3b82f6;
    --login-accent-hover: #2563eb;
    --login-bg: #f8fafc;
    --login-card-bg: #ffffff;
    --login-text: #1e293b;
    --login-text-secondary: #64748b;
    --login-text-muted: #94a3b8;
    --login-border: #e2e8f0;
    --login-border-focus: #3b82f6;
    --login-input-bg: #f8fafc;
    --login-success: #10b981;
    --login-error: #ef4444;
    --login-warning: #f59e0b;
    --login-radius: 12px;
    --login-radius-sm: 8px;
    --login-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --login-shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
    --login-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Page Layout --- */
.login-page {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    background: var(--login-bg);
}

/* --- Brand Panel (Left) --- */
.brand-panel {
    flex: 0 0 480px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #1e40af 100%);
    color: #fff;
}

.brand-panel-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 3rem 2.5rem;
}

/* Decorative shapes */
.brand-decor {
    position: absolute;
    border-radius: 50%;
    opacity: 0.07;
    background: #fff;
    pointer-events: none;
}
.brand-decor-1 {
    width: 400px;
    height: 400px;
    top: -120px;
    right: -100px;
}
.brand-decor-2 {
    width: 250px;
    height: 250px;
    bottom: -60px;
    left: -80px;
}
.brand-decor-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 60%;
    opacity: 0.04;
}

.brand-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 3;
}

.brand-logo .logo-img.is-company-logo {
    filter: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    height: 56px;
}

.brand-logo .logo-img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
}

.brand-text h1 {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.brand-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
    max-width: 380px;
}

/* Features */
.brand-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.feature-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.feature-text span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
}

/* Brand Footer */
.brand-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--login-transition);
}
.contact-phone:hover {
    color: #fff;
}
.contact-phone i {
    font-size: 0.85rem;
}

.brand-social {
    display: flex;
    gap: 0.5rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: var(--login-transition);
    font-size: 0.85rem;
}
.social-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    transform: translateY(-1px);
}

/* --- Form Panel (Right) --- */
.form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
    background: var(--login-bg);
}

.form-panel-inner {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Returning user card : avatar + prenom, a la Gmail/iOS */
.returning-user-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
    margin-bottom: 1.75rem;
    animation: fadeInDown 0.5s ease-out;
}

.returning-user-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--login-accent), var(--login-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    border: 3px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.returning-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.returning-user-initials {
    text-transform: uppercase;
}

.returning-user-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0.25rem 0 0;
    letter-spacing: -0.01em;
}

.returning-user-email {
    font-size: 0.875rem;
    color: var(--login-muted, #64748b);
    margin: 0;
}

.returning-user-switch {
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* --- Form Container --- */
.form-container {
    width: 100%;
}

/* Auth Form */
.auth-form {
    display: none;
    position: relative; /* ancre la croix de fermeture (.auth-form-close) */
    background: var(--login-card-bg);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: var(--login-shadow-lg);
    border: 1px solid var(--login-border);
    animation: formAppear 0.35s ease-out;
}

.auth-form.active {
    display: block;
}

/* Croix de sortie de l'ecran de creation de compte.
   Ancree sur la carte (position: relative ci-dessus) plutot que dans le flux :
   elle ne pousse aucun champ et reste a sa place quelle que soit la hauteur du
   formulaire. Rotation au survol : meme geste que les fermetures du reste de
   l'app (close-button-animation.css), rejoue ici car cette page autonome ne
   charge pas partials/head-css. */
.auth-form-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--login-text-muted);
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--login-transition);
    z-index: 2;
}

.auth-form-close:hover {
    background: var(--login-input-bg, rgba(15, 23, 42, 0.04));
    border-color: var(--login-border);
    color: var(--login-text);
    transform: rotate(90deg);
}

.auth-form-close:focus-visible {
    outline: 2px solid var(--login-accent);
    outline-offset: 2px;
}

@keyframes formAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Form Header */
.form-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.form-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--login-accent), var(--login-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #fff;
    font-size: 1.1rem;
}

.form-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}

.form-header p {
    font-size: 0.9rem;
    color: var(--login-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Form Group */
.form-group {
    position: relative; /* ancre le panneau de criteres du mot de passe, pose a droite */
    margin-bottom: 1.125rem;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--login-text);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-text-muted);
    font-size: 0.9rem;
    transition: var(--login-transition);
    pointer-events: none;
    z-index: 2;
}

.form-input {
    width: 100%;
    padding: 0.75rem 0.875rem 0.75rem 2.6rem;
    font-size: 0.925rem;
    font-family: inherit;
    color: var(--login-text);
    background: var(--login-input-bg);
    border: 1.5px solid var(--login-border);
    border-radius: var(--login-radius-sm);
    outline: none;
    transition: var(--login-transition);
}

.form-input::placeholder {
    color: var(--login-text-muted);
}

.form-input:hover {
    border-color: #cbd5e1;
}

.form-input:focus {
    border-color: var(--login-border-focus);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-input:focus ~ .input-icon {
    color: var(--login-accent);
}

/* Autofill fix */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--login-input-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password Toggle */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--login-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--login-transition);
    z-index: 3;
    font-size: 0.9rem;
}
.toggle-password:hover {
    color: var(--login-text-secondary);
    background: rgba(0,0,0,0.04);
}

/* Password Strength Hint Icon */
.password-strength-hint {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    z-index: 3;
    transition: var(--login-transition);
}
.password-strength-hint:hover {
    color: var(--login-text-secondary);
}
.password-strength-hint.text-success { color: var(--login-success) !important; }
.password-strength-hint.text-warning { color: var(--login-warning) !important; }
.password-strength-hint.text-danger { color: var(--login-error) !important; }

/* Form Options */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Custom Checkbox */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 28px;
}

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--login-border);
    border-radius: 4px;
    background: #fff;
    transition: var(--login-transition);
}

.checkbox-wrapper input:checked ~ .checkbox-custom {
    background: var(--login-accent);
    border-color: var(--login-accent);
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    display: none;
    left: 5.5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-wrapper input:checked ~ .checkbox-custom::after {
    display: block;
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--login-text-secondary);
}

.checkbox-label a {
    color: var(--login-accent);
    text-decoration: none;
    font-weight: 500;
}
.checkbox-label a:hover {
    text-decoration: underline;
}

.terms-check {
    margin-bottom: 1.25rem;
}

/* Link Button */
.link-btn {
    background: none;
    border: none;
    color: var(--login-accent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: var(--login-transition);
    font-family: inherit;
}
.link-btn:hover {
    color: var(--login-accent-hover);
    text-decoration: underline;
}

/* Primary Button */
.btn-primary-login {
    width: 100%;
    padding: 0.8rem 1.25rem;
    background: linear-gradient(135deg, var(--login-primary), var(--login-primary-light));
    color: #fff;
    border: none;
    border-radius: var(--login-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--login-transition);
    position: relative;
    overflow: hidden;
}

.btn-primary-login:hover {
    background: linear-gradient(135deg, var(--login-primary-light), var(--login-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3);
}

.btn-primary-login:active {
    transform: translateY(0);
}

.btn-primary-login.loading {
    pointer-events: none;
    color: transparent;
}

.btn-primary-login.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: btnSpin 0.7s linear infinite;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* Secondary Button */
/* "Creer un compte" : etat accentue en permanence (bordure et texte a la couleur
   d'accent, fond legerement teinte). En gris neutre, le bouton se fondait dans le
   formulaire et se voyait a peine ; c'est pourtant la seule porte d'entree des
   nouveaux clients. Le survol reste distinct - fond plus dense et leger relief -
   pour que le bouton continue de repondre sous la souris. */
.btn-secondary-login {
    width: 100%;
    padding: 0.7rem 1.25rem;
    background: rgba(59, 130, 246, 0.06);
    color: var(--login-accent);
    border: 1.5px solid var(--login-accent);
    border-radius: var(--login-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--login-transition);
}

.btn-secondary-login:hover {
    background: rgba(59, 130, 246, 0.14);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
    transform: translateY(-1px);
}

.btn-secondary-login:active {
    transform: translateY(0);
    box-shadow: none;
}

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

/* Form Divider */
.form-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

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

.form-divider span {
    font-size: 0.8rem;
    color: var(--login-text-muted);
    white-space: nowrap;
}

/* Form Nav */
.form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Error Message */
.error-message {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--login-radius-sm);
    color: var(--login-error);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1rem;
}

/* Legal Links */
.legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--login-border);
    flex-wrap: wrap;
}

.legal-links a {
    font-size: 0.75rem;
    color: var(--login-text-muted);
    text-decoration: none;
    transition: var(--login-transition);
}
.legal-links a:hover {
    color: var(--login-accent);
}

.legal-links .sep {
    color: var(--login-text-muted);
    font-size: 0.6rem;
}

/* Half Row */
.form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ============================================================
   PASSWORD CRITERIA (Register form)
   ============================================================ */

/* Criteres du mot de passe : PANNEAU FLOTTANT A DROITE du formulaire.
   Dans le flux, ce bloc de cinq lignes plus la barre de force poussait le
   formulaire de creation vers le bas et donnait l'impression qu'on demandait
   beaucoup. Sorti sur le cote, il accompagne la saisie sans deplacer un seul
   champ : la carte garde exactement la meme hauteur, que le panneau soit
   ouvert ou non. */
.password-criteria {
    position: absolute;
    top: 0;
    left: calc(100% + 1.25rem);
    width: 250px;
    z-index: 5;
    padding: 1rem;
    background: var(--login-card-bg, #fff);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius-sm);
    box-shadow: var(--login-shadow-lg);
    animation: criteriaSlide 0.25s ease-out;
}

/* Fleche vers le champ : rattache visuellement le panneau a la saisie. */
.password-criteria::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--login-card-bg, #fff);
    border-left: 1px solid var(--login-border);
    border-bottom: 1px solid var(--login-border);
    transform: rotate(45deg);
}

@keyframes criteriaSlide {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Pas la place a droite (fenetre etroite, mobile) : retour dans le flux, sous
   le champ. Mieux vaut pousser les champs que rendre le panneau illisible ou
   le laisser sortir de l'ecran. */
@media (max-width: 1280px) {
    .password-criteria {
        position: static;
        width: auto;
        margin-top: 0.75rem;
        box-shadow: none;
        background: #f8fafc;
        animation-name: criteriaSlideDown;
    }
    .password-criteria::before { display: none; }
}

@keyframes criteriaSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.criteria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--login-border);
}

.criteria-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--login-text);
}

.criteria-score {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--login-text-muted);
    transition: var(--login-transition);
}
.criteria-score.strong {
    background: #dcfce7;
    color: var(--login-success);
}

.criteria-list {
    margin-bottom: 0.625rem;
}

.criteria-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: var(--login-text-secondary);
    transition: var(--login-transition);
}

.criteria-item i {
    width: 14px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--login-error);
    transition: var(--login-transition);
}

.criteria-item.valid {
    color: var(--login-success);
    animation: criteriaValid 0.4s ease-out forwards;
}

.criteria-item.valid i {
    color: var(--login-success) !important;
}

.criteria-item.valid i::before {
    content: "\f00c";
}

.criteria-item.invalid i::before {
    content: "\f00d";
}

.criteria-item.hidden {
    display: none !important;
}

@keyframes criteriaValid {
    0% { opacity: 1; transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

.criteria-item.success-message {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.625rem;
    justify-content: center;
    font-weight: 500;
    color: var(--login-success);
}

/* Strength Bar */
.password-strength-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.strength-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.4s ease, background-color 0.3s ease;
}
.strength-fill.weak { width: 20%; background: var(--login-error); }
.strength-fill.medium { width: 50%; background: var(--login-warning); }
.strength-fill.strong { width: 80%; background: var(--login-success); }
.strength-fill.excellent { width: 100%; background: linear-gradient(90deg, #10b981, #059669); }

.strength-text {
    font-size: 0.75rem;
    text-align: center;
    color: var(--login-text-muted);
    font-weight: 500;
}
.strength-text.weak { color: var(--login-error); }
.strength-text.medium { color: var(--login-warning); }
.strength-text.strong { color: var(--login-success); }
.strength-text.excellent { color: var(--login-success); }

/* Password confirm feedback */
.password-confirm-feedback {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    display: none;
    transition: var(--login-transition);
}

/* ============================================================
   NOTIFICATIONS (toast)
   ============================================================ */
.notification {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--login-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 360px;
}
.notification.show {
    transform: translateX(0);
    opacity: 1;
}
.notification.success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.notification.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ============================================================
   RESPONSIVE - Tablet
   ============================================================ */
@media (max-width: 1100px) {
    .brand-panel {
        flex: 0 0 400px;
    }
    .brand-text h1 {
        font-size: 1.55rem;
    }
    .auth-form {
        padding: 2rem;
    }
}

/* ============================================================
   RESPONSIVE - Mobile
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto;
        height: auto;
    }

    .login-page {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    /* Brand panel hidden on mobile - inutile, prend de la place */
    .brand-panel {
        display: none;
    }

    /* Form panel */
    .form-panel {
        padding: 1.25rem;
        overflow-y: visible;
    }

    .form-panel-inner {
        max-width: 100%;
    }

    .auth-form {
        padding: 1.5rem;
        border-radius: 14px;
    }

    .form-row-half {
        grid-template-columns: 1fr;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .form-nav {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .legal-links {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

@media (max-width: 480px) {
    .form-panel {
        padding: 0.75rem;
    }

    .auth-form {
        padding: 1.25rem;
    }

    .form-header h2 {
        font-size: 1.3rem;
    }

    .btn-primary-login {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
.form-panel::-webkit-scrollbar {
    width: 5px;
}
.form-panel::-webkit-scrollbar-track {
    background: transparent;
}
.form-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.form-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================================
   VALIDATION STATES
   ============================================================ */
.form-input.is-valid {
    border-color: var(--login-success);
}
.form-input.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.form-input.is-invalid {
    border-color: var(--login-error);
}
.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ============================================================
   OAUTH LOGIN BUTTONS
   ============================================================ */
/* Separateur avant les boutons Google / Microsoft.
   Le libelle est conserve mais l'ensemble est resserre : l'ancienne version
   respirait sur pres de 3 rem au milieu du formulaire, ce qui repoussait les
   boutons hors de vue sur les petits ecrans. */
.oauth-separator {
    position: relative;
    text-align: center;
    margin: 0.9rem 0;
}

.oauth-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--login-border);
}

.oauth-separator span {
    position: relative;
    padding: 0 0.75rem;
    background: var(--login-card-bg);
    font-size: 0.78rem;
    color: var(--login-text-muted);
    white-space: nowrap;
}

.oauth-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.oauth-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: var(--login-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--login-border);
    background: var(--login-card-bg);
    color: var(--login-text);
    transition: var(--login-transition);
}

.oauth-btn svg {
    flex-shrink: 0;
}

.oauth-btn span {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Google */
.oauth-google:hover {
    background: rgba(66, 133, 244, 0.06);
    border-color: rgba(66, 133, 244, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.12);
}

/* Microsoft */
.oauth-microsoft:hover {
    background: rgba(0, 164, 239, 0.06);
    border-color: rgba(0, 164, 239, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 164, 239, 0.12);
}

@media (max-width: 480px) {
    .oauth-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ============================================================
   BADGES STORES (panneau de marque)
   Reproduits en HTML/CSS : net sur ecran haute densite, aucun fichier distant
   a maintenir. Gabarit officiel respecte : icone a gauche, "Disponible sur"
   en petit, nom du store en gros dessous.
   ============================================================ */
.brand-stores {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 12px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
    backdrop-filter: none;
    transition: all 0.2s ease;
}

.store-badge:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
    color: #fff;
}

.store-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.store-badge__ico {
    font-size: 1.45rem;
    line-height: 1;
}

.store-badge__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.store-badge__top {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.store-badge__name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

@media (max-width: 420px) {
    .brand-stores { gap: 8px; }
    .store-badge { padding: 6px 11px 6px 10px; }
    .store-badge__name { font-size: 0.85rem; }
}

/* Les badges stores passent SOUS la ligne telephone + reseaux, cote a cote.
   flex-basis: 100% les envoie a la ligne dans .brand-footer, qui doit donc
   autoriser le retour a la ligne. */
.brand-footer { flex-wrap: wrap; }
.brand-stores { flex: 0 0 100%; margin-top: 14px; }
.store-badge__ico { width: 22px; height: 22px; flex: 0 0 auto; }
svg.store-badge__ico { display: block; }

/* Badges stores : centres sous la ligne telephone + reseaux.
   Colles a gauche, ils paraissaient poses la par accident ; centres, ils
   equilibrent le pied du panneau, dont les deux autres elements tirent
   chacun vers un bord. Un filet discret les separe de la ligne du dessus. */
.brand-stores {
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Aucun filet horizontal dans le pied du panneau : ni au-dessus du telephone,
   ni entre les reseaux et les badges. Sur un fond degrade sombre, ces traits
   decoupaient le bloc sans rien apporter. Lespace suffit a separer. */
.brand-footer { border-top: none; padding-top: 1.75rem; }
.brand-stores { border-top: none; padding-top: 0; margin-top: 18px; }