/* Login ERP 2026 — Les Épices Curieuses */
:root{
  --login-bg:#f2f0ec;
  --login-surface:#ffffff;
  --login-ink:#19212d;
  --login-muted:#6b7280;
  --login-border:#e3e0da;
  --login-night:#0f172a;
  --login-night-2:#162238;
  --login-accent:#f97316;
  --login-accent-hover:#e96812;
  --login-warm:#f6eee7;
  --login-radius:28px;
  --login-shadow:0 30px 80px rgba(15,23,42,.14);
}

*{box-sizing:border-box}

html,body{min-height:100%}

body.erp-login-page{
  margin:0;
  min-height:100vh;
  color:var(--login-ink);
  background:
    radial-gradient(circle at 8% 10%,rgba(249,115,22,.08),transparent 28rem),
    radial-gradient(circle at 92% 90%,rgba(15,23,42,.06),transparent 30rem),
    var(--login-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
}

.login-shell{
  width:min(1180px,100%);
  min-height:min(760px,calc(100vh - 64px));
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
  border-radius:var(--login-radius);
  background:var(--login-surface);
  box-shadow:var(--login-shadow);
}

.login-brand{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding:52px 56px 46px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 18%,rgba(249,115,22,.28),transparent 18rem),
    radial-gradient(circle at 82% 74%,rgba(175,138,113,.18),transparent 22rem),
    linear-gradient(145deg,var(--login-night) 0%,var(--login-night-2) 100%);
}

.login-brand::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.26;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.7) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 20%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 54% 70%,rgba(255,255,255,.5) 0 1px,transparent 1.5px);
  background-size:54px 54px,72px 72px,94px 94px;
}

.login-brand::after{
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  right:-220px;
  bottom:-190px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(255,255,255,.022),
    0 0 0 96px rgba(255,255,255,.018);
  pointer-events:none;
}

.brand-top,
.brand-content,
.brand-foot{
  position:relative;
  z-index:1;
}

.brand-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.brand-logo{
  display:block;
  width:min(360px,78%);
  max-height:116px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));
}

.erp-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.84);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.erp-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--login-accent);
  box-shadow:0 0 0 4px rgba(249,115,22,.14);
}

.brand-content{
  max-width:570px;
  margin:72px 0 auto;
}

.brand-kicker{
  margin:0 0 18px;
  color:#f7a46c;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.brand-title{
  max-width:540px;
  margin:0;
  font-size:clamp(2.45rem,4.1vw,4.35rem);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:780;
}

.brand-copy{
  max-width:500px;
  margin:24px 0 0;
  color:rgba(255,255,255,.68);
  font-size:1.02rem;
  line-height:1.68;
}

.brand-modules{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}

.brand-module{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.78);
  font-size:.82rem;
  font-weight:650;
}

.brand-module::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#f6a36b;
}

.brand-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-top:50px;
  color:rgba(255,255,255,.5);
  font-size:.76rem;
  line-height:1.5;
}

.brand-foot strong{
  display:block;
  margin-bottom:2px;
  color:rgba(255,255,255,.78);
  font-size:.8rem;
}

.login-form-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:56px 64px;
  background:#fff;
}

.login-form-wrap{
  width:min(100%,420px);
}

.login-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  color:#7c8290;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.login-eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:99px;
  background:var(--login-accent);
}

.login-title{
  margin:0;
  color:#141b25;
  font-size:clamp(2rem,3vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:780;
}

.login-subtitle{
  margin:14px 0 30px;
  color:var(--login-muted);
  font-size:.96rem;
  line-height:1.62;
}

.login-alert{
  margin:0 0 20px;
  padding:13px 15px;
  border:1px solid #fecaca;
  border-radius:14px;
  background:#fff5f5;
  color:#991b1b;
  font-size:.9rem;
  font-weight:650;
}

.field-group{margin-bottom:18px}

.field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  color:#303846;
  font-size:.86rem;
  font-weight:750;
}

.field-control{
  position:relative;
}

.login-input{
  width:100%;
  height:52px;
  padding:0 15px;
  border:1px solid #dadde2;
  border-radius:13px;
  outline:none;
  background:#fff;
  color:#171d27;
  font:inherit;
  font-size:.96rem;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.login-input:hover{border-color:#c5c9d1}

.login-input:focus{
  border-color:var(--login-accent);
  box-shadow:0 0 0 4px rgba(249,115,22,.11);
}

.password-control .login-input{
  padding-right:53px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:10px;
  background:transparent;
  color:#687181;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

.password-toggle:hover{
  background:#f3f4f6;
  color:#222a36;
}

.password-toggle svg{
  width:19px;
  height:19px;
  stroke:currentColor;
}

.remember-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:start;
  margin:7px 0 22px;
  padding:15px 16px;
  border:1px solid var(--login-border);
  border-radius:15px;
  background:#faf9f7;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}

.remember-card:hover{
  border-color:#d4cfc6;
  background:#f8f6f3;
}

.remember-card input{
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:var(--login-accent);
  cursor:pointer;
}

.remember-title{
  display:block;
  margin:0;
  color:#252d39;
  font-size:.9rem;
  font-weight:780;
  line-height:1.35;
}

.remember-hint{
  display:block;
  margin-top:4px;
  color:#7a818d;
  font-size:.79rem;
  line-height:1.45;
}

.login-submit{
  width:100%;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:13px;
  background:var(--login-accent);
  color:#fff;
  font:inherit;
  font-size:.94rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(249,115,22,.22);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.login-submit:hover{
  background:var(--login-accent-hover);
  box-shadow:0 12px 28px rgba(249,115,22,.28);
  transform:translateY(-1px);
}

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

.login-submit svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}

.login-security{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #ece9e4;
  color:#858b95;
  font-size:.77rem;
  line-height:1.52;
}

.login-security svg{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:1px;
  stroke:#9aa0aa;
}

.login-footer{
  position:absolute;
  right:28px;
  bottom:22px;
  left:28px;
  text-align:center;
  color:#a0a4ac;
  font-size:.7rem;
}

@media(max-width:1000px){
  .login-page{padding:18px}
  .login-shell{
    min-height:calc(100vh - 36px);
    grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr);
  }
  .login-brand{padding:40px 38px 36px}
  .brand-logo{width:min(300px,82%)}
  .brand-content{margin-top:64px}
  .brand-title{font-size:clamp(2.2rem,5vw,3.4rem)}
  .login-form-panel{padding:48px 42px}
}

@media(max-width:760px){
  body.erp-login-page{background:#fff}
  .login-page{
    display:block;
    min-height:100vh;
    padding:0;
  }
  .login-shell{
    min-height:100vh;
    display:block;
    overflow:visible;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .login-brand{
    min-height:235px;
    padding:28px 24px 30px;
    border-radius:0 0 26px 26px;
  }
  .brand-top{align-items:center}
  .brand-logo{
    width:min(250px,72%);
    max-height:88px;
  }
  .erp-pill{
    padding:7px 9px;
    font-size:.65rem;
  }
  .brand-content{
    margin:34px 0 0;
  }
  .brand-kicker{display:none}
  .brand-title{
    max-width:310px;
    font-size:2.05rem;
    line-height:1.02;
  }
  .brand-copy,
  .brand-modules,
  .brand-foot{
    display:none;
  }
  .login-form-panel{
    display:block;
    padding:38px 24px 76px;
  }
  .login-form-wrap{
    width:100%;
    max-width:460px;
    margin:0 auto;
  }
  .login-eyebrow{margin-bottom:15px}
  .login-title{font-size:2rem}
  .login-subtitle{margin-bottom:26px}
  .login-footer{
    position:static;
    margin-top:32px;
  }
}

@media(max-width:390px){
  .login-brand{min-height:215px;padding:24px 20px 26px}
  .brand-logo{width:min(220px,70%)}
  .brand-title{font-size:1.8rem}
  .login-form-panel{padding:32px 20px 64px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* Mobile rebuild */
@media(max-width:760px){
 html,body.erp-login-page{min-height:100%;height:auto;overflow:auto;background:#fff}
 body.erp-login-page{min-height:100dvh}
 .login-page{display:block;min-height:100dvh;height:auto;padding:0;overflow:visible}
 .login-shell{display:block;width:100%;min-height:100dvh;height:auto;border:0;border-radius:0;box-shadow:none;overflow:visible}
 .login-brand{min-height:auto;padding:18px 20px 22px;border-radius:0 0 22px 22px}
 .brand-top{justify-content:flex-end}
 .erp-pill{font-size:.62rem;padding:6px 9px}
 .brand-content{margin:18px 0 0}
 .brand-kicker,.brand-copy,.brand-modules,.brand-foot{display:none}
 .brand-title{max-width:280px;font-size:1.65rem;line-height:1.05;letter-spacing:-.04em}
 .login-form-panel{display:block;min-height:0;padding:24px 20px 28px;background:#fff}
 .login-form-wrap{width:100%;max-width:440px;margin:0 auto}
 .login-form-brand{display:flex;align-items:center;min-height:44px;margin:0 0 10px}
 .login-form-logo{display:block;width:min(230px,72%);max-height:54px;object-fit:contain;object-position:left center}
 .login-eyebrow{margin-bottom:8px;font-size:.68rem}
 .login-title{font-size:1.75rem}
 .login-subtitle{margin:8px 0 20px;font-size:.88rem;line-height:1.45}
 .login-alert{margin-bottom:14px}
 .field-group{margin-bottom:14px}
 .field-label{margin-bottom:6px}
 .login-input{height:50px;font-size:16px}
 .password-toggle{width:42px;height:42px}
 .remember-card{margin:2px 0 16px;padding:12px 13px;gap:11px}
 .remember-title{font-size:.86rem}
 .remember-hint{font-size:.73rem;line-height:1.4}
 .login-submit{height:50px}
 .login-security{margin-top:16px;padding-top:14px;font-size:.72rem}
 .login-footer{position:static;margin:22px 0 0;text-align:center;font-size:.67rem}
}
@media(max-width:360px){
 .login-brand{padding:15px 16px 18px}
 .brand-title{font-size:1.45rem}
 .login-form-panel{padding:20px 16px 24px}
 .login-form-brand{min-height:38px}
 .login-form-logo{max-height:46px}
 .login-title{font-size:1.55rem}
 .remember-hint{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}