/* Page de connexion, servie sans session. Écran partagé comme le CRM : le message à
   gauche sur marine, le formulaire à droite sur fond clair. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root { --tick-blue: #18A0FB; --it-teal: #00D2B4; --crm-navy: #152C4A; --bg: #F4F7F6; --muted: #6C7A8C; --line: rgba(21, 44, 74, 0.12); --red: #DC2626; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; color: var(--crm-navy); background: var(--bg); -webkit-font-smoothing: antialiased; }
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* Volet gauche : logo en haut, globe au milieu, message et badges en bas. */
.hero {
    background: radial-gradient(1200px 600px at 20% 100%, rgba(0, 210, 180, 0.25), transparent 60%),
                radial-gradient(900px 500px at 90% 0%, rgba(24, 160, 251, 0.35), transparent 60%),
                var(--crm-navy);
    color: #fff; position: relative; overflow: hidden; min-height: 100vh;
}
.brand-content {
    position: relative; z-index: 1; height: 100vh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 56px 48px; pointer-events: none;
}
.brand-content a, .brand-content button { pointer-events: auto; }
/* Le globe occupe la bande médiane : le script cadre la caméra sur la taille de ce
   conteneur, c'est donc ici que se règle sa taille. */
/* Conteneur plus haut que large : le script cadre alors sur la largeur et garde de la
   marge en hauteur pour le halo et le relèvement du globe qu'il applique lui-même.
   C'est la configuration d'origine (volet plein), qui ne coupait rien. */
.brand-globe {
    position: absolute; z-index: 0; opacity: 0.92;
    top: 9%; height: 64%;
    /* Rapport figé plus haut que large, quelle que soit la largeur de l'écran : la
       largeur découle de la hauteur, et max-width ne peut que la réduire encore. */
    aspect-ratio: 0.82; width: auto; max-width: 84%;
    left: 50%; transform: translateX(-50%);
}
.brand-globe canvas { width: 100% !important; height: 100% !important; display: block; }
.hero .brand { font-weight: 700; font-size: 22px; }
.hero .brand img { height: 40px; display: block; filter: brightness(0) invert(1); }
.hero-foot { max-width: 520px; }
.hero h1 { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; }
.hero p { font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0 0 24px; }
.hero .badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .tagline { display: inline-block; padding: 8px 16px; border-radius: 50px; background: rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.hero .version { display: inline-block; padding: 6px 12px; border-radius: 50px; border: 1px solid rgba(0, 210, 180, 0.5); color: var(--it-teal); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }

.panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 40px 40px 30px; box-shadow: 0 10px 40px rgba(21, 44, 74, 0.08); }
h2 { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.sub { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--crm-navy);
    border: 1px solid var(--line); background: var(--bg); border-radius: 8px; margin-bottom: 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
input:focus { outline: none; border-color: var(--tick-blue); background: #fff; box-shadow: 0 0 0 3px rgba(24, 160, 251, 0.15); }
input::placeholder { color: #B5BEC9; }
button {
    width: 100%; padding: 13px; font: inherit; font-size: 15px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, var(--tick-blue), var(--it-teal)); border: 0; border-radius: 8px; cursor: pointer; margin-top: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 210, 180, 0.3); }
button[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }
button:focus-visible { outline: 3px solid rgba(24, 160, 251, 0.35); outline-offset: 2px; }
.err { margin-top: 14px; font-size: 14px; color: var(--red); min-height: 20px; }
.foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.foot .lock { width: 8px; height: 8px; border-radius: 50%; background: var(--it-teal); }

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; }
    .brand-globe { display: none; }
    .hero { min-height: 0; }
    .brand-content { height: auto; padding: 32px 28px; gap: 24px; }
    .hero h1 { font-size: 24px; }
    .card { padding: 30px 26px 24px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }