/* =============================================================================
   LOGiTEC — Page de connexion v2 (identité "command center" du site vitrine :
   encre profonde + halos cyan/magenta, bleu de marque --itec).
   Feuille dédiée, aucune dépendance Tailwind/purge. Responsive 320px → 4K.
   ============================================================================= */
:root{
    --lg-itec:#329cf1;
    --lg-itec-2:#2f6fe0;
    --lg-cyan:rgb(34 199 251);
    --lg-magenta:rgb(226 63 146);
    --lg-ink:#05070c;
    --lg-text:#eef2f7;
    --lg-muted:#8b98ab;
    --lg-field:#0d1420;
    --lg-field-border:#233046;
    --lg-error:#f87171;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* ---------- Scène plein écran ---------- */
.lg-login{
    position:relative; min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px calc(24px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 12% 12%, rgb(34 199 251 / .16), transparent 42%),
        radial-gradient(circle at 90% 8%,  rgb(226 63 146 / .13), transparent 40%),
        radial-gradient(circle at 80% 95%, rgb(50 156 241 / .10), transparent 45%),
        var(--lg-ink);
    overflow:hidden;
}
/* trame de points très discrète */
.lg-login::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1.5px);
    background-size:26px 26px;
    mask-image:radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 75%);
}
/* aurores animées (2 nappes floutées qui dérivent lentement) */
.lg-aurora{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; }
.lg-aurora--1{ width:52vmax; height:52vmax; left:-18vmax; top:-20vmax; background:radial-gradient(circle, rgb(34 199 251 / .32), transparent 62%); animation:lgDrift1 26s ease-in-out infinite alternate; }
.lg-aurora--2{ width:46vmax; height:46vmax; right:-16vmax; bottom:-22vmax; background:radial-gradient(circle, rgb(226 63 146 / .22), transparent 62%); animation:lgDrift2 32s ease-in-out infinite alternate; }
@keyframes lgDrift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(9vmax,6vmax) scale(1.12); } }
@keyframes lgDrift2{ from{ transform:translate(0,0) scale(1.08); } to{ transform:translate(-8vmax,-5vmax) scale(1); } }
@media (prefers-reduced-motion:reduce){
    .lg-aurora{ animation:none; }
    .lg-card, .lg-brand{ animation:none !important; }
}

/* ---------- Carte ---------- */
.lg-card{
    position:relative; z-index:1; width:100%; max-width:430px;
    background:rgb(13 18 28 / .74);
    border:1px solid rgb(255 255 255 / .09);
    border-radius:22px;
    box-shadow:0 30px 80px -20px rgb(0 0 0 / .75), 0 0 0 1px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .06);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:38px 38px 30px;
    animation:lgCardIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lgCardIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
/* liseré lumineux en tête de carte */
.lg-card::before{
    content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
    background:linear-gradient(90deg, transparent, rgb(34 199 251 / .75), rgb(226 63 146 / .55), transparent);
}

/* ---------- Marque ---------- */
.lg-brand{ text-align:center; margin-bottom:26px; animation:lgCardIn .55s .08s cubic-bezier(.22,1,.36,1) both; }
.lg-brand img{ height:44px; width:auto; max-width:100%; filter:drop-shadow(0 6px 18px rgb(50 156 241 / .35)); }
.lg-brand h1{ margin:16px 0 4px; font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--lg-text); }
.lg-brand p{ margin:0; font-size:.83rem; color:var(--lg-muted); }

/* ---------- Champs ---------- */
.lg-field{ position:relative; margin-bottom:14px; }
.lg-field .ico{
    position:absolute; left:15px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; color:var(--lg-muted); pointer-events:none; transition:color .18s;
}
.lg-field input{
    width:100%; height:52px; padding:0 48px 0 45px;
    background:var(--lg-field);
    border:1px solid var(--lg-field-border); border-radius:13px;
    color:var(--lg-text); font-size:15px; font-family:inherit;
    outline:none; transition:border-color .18s, box-shadow .18s, background-color .18s;
    -webkit-appearance:none; appearance:none;
}
.lg-field input::placeholder{ color:#5b6778; font-size:14px; }
.lg-field input:focus{
    border-color:var(--lg-itec);
    box-shadow:0 0 0 4px rgb(50 156 241 / .16);
    background:#0f1726;
}
.lg-field input:focus ~ .ico, .lg-field:focus-within .ico{ color:var(--lg-itec); }
/* autofill navigateur : rester sombre */
.lg-field input:-webkit-autofill{
    -webkit-text-fill-color:var(--lg-text);
    -webkit-box-shadow:0 0 0 1000px #0f1726 inset;
    caret-color:var(--lg-text);
    transition:background-color 9999s ease-out;
}
/* œil afficher/masquer */
.lg-eye{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:38px; height:38px; display:grid; place-items:center;
    background:none; border:none; cursor:pointer; color:var(--lg-muted);
    border-radius:10px; transition:color .15s, background-color .15s;
}
.lg-eye:hover{ color:var(--lg-text); background:rgb(255 255 255 / .06); }
.lg-eye svg{ width:19px; height:19px; }
.lg-eye .eye-off{ display:none; }
.lg-eye.is-visible .eye-on{ display:none; }
.lg-eye.is-visible .eye-off{ display:block; }

/* avertissement Caps Lock */
.lg-caps{
    display:none; align-items:center; gap:7px; margin:-6px 2px 12px;
    font-size:.76rem; font-weight:600; color:#fbbf24;
}
.lg-caps.is-on{ display:flex; }
.lg-caps svg{ width:14px; height:14px; flex:none; }

/* ---------- Ligne options ---------- */
.lg-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 2px 18px; }
.lg-remember{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:.85rem; color:var(--lg-muted); }
.lg-remember input{ position:absolute; opacity:0; width:0; height:0; }
.lg-remember .track{
    width:38px; height:21px; border-radius:999px; position:relative; flex:none;
    background:#1b2536; border:1px solid var(--lg-field-border); transition:background-color .18s, border-color .18s;
}
.lg-remember .track::after{
    content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
    background:#8b98ab; transition:transform .18s cubic-bezier(.22,1,.36,1), background-color .18s;
}
.lg-remember input:checked + .track{ background:rgb(50 156 241 / .35); border-color:var(--lg-itec); }
.lg-remember input:checked + .track::after{ transform:translateX(17px); background:var(--lg-itec); }
.lg-remember input:focus-visible + .track{ box-shadow:0 0 0 3px rgb(50 156 241 / .25); }

/* ---------- Erreurs ---------- */
.lg-error{
    display:flex; align-items:flex-start; gap:9px;
    background:rgb(248 113 113 / .10); border:1px solid rgb(248 113 113 / .35);
    color:var(--lg-error); border-radius:12px; padding:11px 13px; margin-bottom:16px;
    font-size:.83rem; font-weight:600; line-height:1.4;
    animation:lgShake .4s cubic-bezier(.36,.07,.19,.97) both;
}
.lg-error svg{ width:16px; height:16px; flex:none; margin-top:1px; }
@keyframes lgShake{
    10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-3px); } 40%,60%{ transform:translateX(3px); }
}

/* ---------- Bouton ---------- */
.lg-submit{
    width:100%; height:52px; border:none; border-radius:13px; cursor:pointer;
    background:linear-gradient(135deg,#3aa3f5 0%,var(--lg-itec-2) 100%);
    color:#fff; font-size:15.5px; font-weight:700; font-family:inherit; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 10px 26px -8px rgb(50 156 241 / .55), inset 0 1px 0 rgb(255 255 255 / .22);
    transition:transform .15s, box-shadow .15s, filter .15s;
}
.lg-submit:hover{ transform:translateY(-1px); box-shadow:0 14px 32px -8px rgb(50 156 241 / .7), inset 0 1px 0 rgb(255 255 255 / .22); filter:brightness(1.05); }
.lg-submit:active{ transform:translateY(0) scale(.985); }
.lg-submit:focus-visible{ outline:none; box-shadow:0 0 0 4px rgb(50 156 241 / .35); }
.lg-submit svg{ width:18px; height:18px; }
.lg-submit .spin{ display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgb(255 255 255 / .35); border-top-color:#fff; animation:lgSpin .7s linear infinite; }
.lg-submit.is-loading{ pointer-events:none; filter:saturate(.8) brightness(.95); }
.lg-submit.is-loading .spin{ display:inline-block; }
.lg-submit.is-loading .arrow{ display:none; }
@keyframes lgSpin{ to{ transform:rotate(360deg); } }

/* ---------- Pied ---------- */
.lg-foot{ margin-top:22px; text-align:center; font-size:.74rem; color:#5b6778; }
.lg-foot b{ color:#7f8ea3; font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width:480px){
    .lg-card{ padding:30px 22px 24px; border-radius:18px; }
    .lg-brand img{ height:38px; }
    .lg-field input{ height:50px; font-size:16px; } /* 16px = pas de zoom iOS */
}
@media (max-height:620px){
    .lg-login{ align-items:flex-start; padding-top:18px; }
    .lg-brand{ margin-bottom:16px; }
    .lg-brand h1{ margin-top:10px; }
}