/* ── Login page ───────────────────────────────────────────────── */

/* Neutralise les paddings globaux de <main> pour cette page */
main:has(#content-connexion) {
    padding: 0;
    min-height: unset;
}

/* Desktop : html/body full height pour que 100dvh fonctionne sans scroll */
@media (min-width: 901px) {
    html, body { height: 100%; overflow: hidden; }
}

#content-connexion {
    height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
#content-connexion::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%);
}

/* Floating card */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: rgba(255,255,255,.97);
    border-radius: 16px;
    padding: 2.5rem 2.8rem;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.14);
    backdrop-filter: blur(4px);
}

/* Logo inside card */
.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.6rem;
}
.login-logo-wrap img {
    display: block;
    max-width: 340px;
    max-height: 136px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Header */
.login-card .login-header {
    margin-bottom: 1.8rem;
    text-align: center;
}
.login-card .login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--text-color-dark);
    letter-spacing: -.3px;
}
.login-card .login-header p {
    font-size: .83rem;
    color: #7a7a8a;
    text-align: center;
    margin: 0;
}

/* Fields */
.login-field { margin-bottom: 1.15rem; }
.login-field label {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: .4rem;
}
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-wrap .field-icon {
    position: absolute;
    left: 1rem;
    color: #c0c5ce;
    font-size: .85rem;
    pointer-events: none;
    width: 1rem;
    text-align: center;
}
.login-input-wrap input {
    width: 100%;
    padding: .76rem 2.8rem .76rem 2.75rem;
    border: 1.5px solid #dde0e6;
    border-radius: 8px;
    font-size: .94rem;
    font-family: var(--my-font), sans-serif;
    color: var(--text-color-dark);
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
    min-width: unset;
    margin: 0;
}
.login-input-wrap input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(240,206,84,.25);
}
.login-input-wrap .toggle-pwd {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: .95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color .15s;
    min-width: unset;
}
.login-input-wrap .toggle-pwd:hover { color: var(--text-color-dark); }

/* Strength bar */
#pwd-strength-wrap { margin-top: .5rem; display: none; }
#pwd-strength-wrap.visible { display: block; }
.strength-bar-track { height: 4px; background: #e9ecef; border-radius: 99px; overflow: hidden; margin-bottom: .3rem; }
.strength-bar-fill  { height: 100%; border-radius: 99px; width: 0%; transition: width .35s, background .35s; }
.strength-label     { font-size: .7rem; font-weight: 600; letter-spacing: .3px; }
.strength-0 { width:   0%; background: transparent; }
.strength-1 { width:  25%; background: #ef4444; }
.strength-2 { width:  50%; background: #f97316; }
.strength-3 { width:  75%; background: #eab308; }
.strength-4 { width: 100%; background: #22c55e; }
.strength-text-0 { color: transparent; }
.strength-text-1 { color: #ef4444; }
.strength-text-2 { color: #f97316; }
.strength-text-3 { color: #eab308; }
.strength-text-4 { color: #22c55e; }

/* Error shake */
@keyframes shake {
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-5px); }
    40%{ transform:translateX(5px); }
    60%{ transform:translateX(-3px); }
    80%{ transform:translateX(3px); }
}
.field-error input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
    animation: shake .35s ease;
}

/* Submit */
#btn_connexion {
    width: 100%;
    padding: .82rem;
    background: var(--primary-color);
    color: var(--text-color-light);
    border: none;
    border-radius: 8px;
    font-size: .97rem;
    font-weight: 600;
    font-family: var(--my-font), sans-serif;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    margin-top: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: unset;
}
#btn_connexion:hover  { opacity: .86; }
#btn_connexion:active { transform: scale(.98); }
#btn_connexion.loading { pointer-events: none; opacity: .7; }
#btn_connexion .spinner {
    display: none;
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
#btn_connexion.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rate limit */
#rate-limit-msg {
    display: none;
    margin-top: .8rem;
    padding: .6rem .85rem;
    border-radius: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: .8rem;
    color: #b91c1c;
    text-align: center;
}

/* Links row */
.login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.2rem;
    font-size: .8rem;
    flex-wrap: wrap;
    gap: .4rem;
}
.login-links a { color: #6b7280; text-decoration: none; transition: color .15s; }
.login-links a:hover { color: var(--text-color-dark); text-decoration: underline; }

/* Divider */
.login-divider {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.3rem 0 1rem;
    color: #c0c4cc;
    font-size: .72rem;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.login-divider::before,
.login-divider::after { content: ''; flex: 1; height: 1px; background: #e9ecef; }

/* Become client */
.btn-become-client {
    width: 100%;
    padding: .75rem;
    background: transparent;
    border: 1.5px solid #dde0e6;
    border-radius: 8px;
    font-family: var(--my-font), sans-serif;
    font-size: .91rem;
    font-weight: 600;
    color: var(--text-color-dark);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    min-width: unset;
}
.btn-become-client:hover {
    border-color: var(--accent-color);
    background: rgba(240,206,84,.08);
}

/* Copyright */
.login-copyright {
    margin-top: 1.4rem;
    font-size: .7rem;
    color: #b0b5c0;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    html, body { height: auto; overflow: auto; }
    main:has(#content-connexion) { padding: 0; min-height: unset; }
    #content-connexion {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 2.5rem 1.5rem;
        align-items: center;
    }
    .login-card { max-height: none; max-width: 480px; padding: 2.2rem 2.4rem; }
    .login-logo-wrap img { max-width: 260px; max-height: 100px; }
}

@media (max-width: 480px) {
    #content-connexion { padding: 1.5rem 1rem; }
    .login-card { max-height: none; padding: 1.8rem 1.2rem; border-radius: 12px; max-width: 100%; }
    .login-logo-wrap img { max-width: 180px; max-height: 72px; }
    .login-links { flex-direction: column; align-items: flex-start; gap: .5rem; }
}