/* Taille de référence : 14px au maximum sur un grand écran, environ 12px sur un portable 1366×768 pour que la page tienne en hauteur */
html {
    font-size: clamp(10px, min(0.9vw, 1.6vh), 14px);
}

/* customer-care3 — styles propres à la page de connexion (le reste vient de Tailwind) */

/* ---------- panneau gauche ---------- */
.hero {
    background: linear-gradient(160deg, #0b44ff 0%, #0a38e6 45%, #0a2fc4 100%);
}

/* grands arcs translucides en arrière-plan */
.ring {
    position: absolute;
    border-radius: 624.9375rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.ring-a {
    width: 68.75rem;
    height: 68.75rem;
    right: -35rem;
    top: -8.75rem;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 65%);
}
.ring-b {
    width: 47.5rem;
    height: 47.5rem;
    right: -20.625rem;
    top: 5.625rem;
}
.ring-c {
    width: 93.75rem;
    height: 93.75rem;
    left: -48.75rem;
    bottom: -61.25rem;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 20, 120, 0.12);
}

/* carte « verre » de la conversation */
.chat {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1.5rem 3.75rem rgba(0, 20, 120, 0.25);
}
.msg {
    position: relative;
    display: flex;
    gap: 1.125rem;
    padding: 1rem 1.125rem;
}
/* trait vertical entre deux avatars */
.msg + .msg::before {
    content: "";
    position: absolute;
    left: 2.6875rem;
    top: -1rem;
    height: 2rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.28);
}
.avatar {
    position: relative;
    z-index: 1;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 624.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: #7f8dff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.06);
}

/* ---------- panneau droit ---------- */
.field-input {
    width: 100%;
    height: 4rem;
    border: 1px solid #dfe3ee;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0 3.75rem 0 3.875rem;
    font: 500 1.125rem "Inter", sans-serif;
    color: #0b1230;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input::placeholder {
    color: #9aa1bd;
    font-weight: 400;
}
.field-input:focus {
    border-color: #0a3cf0;
    box-shadow: 0 0 0 0.25rem rgba(10, 60, 240, 0.12);
}

/* ligne « Secure access… » avec traits de chaque côté */
.secure::before,
.secure::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dfe3ee;
}

/* séparateur « or » entre « Sign in » et « Continue with Google » */
.or::before,
.or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dfe3ee;
}

/* messages d'erreur / de succès */
.alert {
    display: none;
    margin: -0.375rem 0 1.375rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
}
.alert.err {
    display: block;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.alert.ok {
    display: block;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* petit cercle de chargement du bouton */
.spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 624.9375rem;
    animation: kp-spin 0.7s linear infinite;
}
@keyframes kp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- téléphone / tablette ---------- */
@media (max-width: 63.9375rem) {
    .ring-a { width: 43.75rem; height: 43.75rem; right: -23.75rem; top: -12.5rem; }
    .ring-b { display: none; }
    .ring-c { width: 56.25rem; height: 56.25rem; left: -35rem; bottom: -40rem; }
    .field-input { height: 3.625rem; }
}