/* Page de connexion SCI JIREH — néomorphisme, couleurs du logo (bleu JIREH #1558C0) */
:root{
  --bg:#e8edf4;
  --dark:rgba(150,166,190,.45);
  --light:rgba(255,255,255,.85);
  --text:#1c2a44;
  --muted:#66758c;
  --accent:#1558C0;
  --accent2:#3B7DD8;
  --accent-soft:rgba(21,88,192,.30);
}
*{padding:0;margin:0;box-sizing:border-box;font-family:"Poppins","Segoe UI",Arial,sans-serif}
html,body{min-height:100vh}
body{
  min-height:100vh;display:flex;justify-content:center;align-items:center;
  background:var(--bg);color:var(--text);overflow:hidden;padding:20px;
}

/* ---------- Bulles décoratives flottantes ---------- */
.bg{
  position:fixed;border-radius:50%;background:var(--bg);z-index:-1;
  box-shadow:8px 8px 18px var(--dark),-8px -8px 18px var(--light);
}
.bg1{width:190px;height:190px;top:7%;left:7%}
.bg2{width:130px;height:130px;bottom:6%;right:12%;animation-delay:-2s}
.bg3{width:46px;height:46px;top:24%;right:26%;animation-delay:-4s}
.bg3::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--accent);opacity:.85}
@keyframes floating{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

/* ---------- Carte 3D ---------- */
.auth-wrapper{width:400px;max-width:100%;height:640px;perspective:1600px}
.auth-card{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform 1s cubic-bezier(.68,-.2,.27,1.2);
}
.auth-card.flipped{transform:rotateY(180deg)}
.auth-card.no-anim{transition:none}

.panel{
  position:absolute;inset:0;padding:34px 32px 28px;
  background:var(--bg);border-radius:35px;
  box-shadow:20px 20px 40px var(--dark),-20px -20px 40px var(--light);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;
}
.signup-panel{transform:rotateY(180deg)}
form.panel-form{display:flex;flex-direction:column;flex:1}

/* ---------- Logo ---------- */
.logo{
  width:96px;height:96px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);color:var(--accent);
  box-shadow:8px 8px 16px var(--dark),-8px -8px 16px var(--light);
  transition:.4s ease;
}
.logo img{width:70px;height:auto;display:block}
.logo svg{width:30px;height:30px;fill:currentColor}
.logo:hover{transform:translateY(-5px) rotate(0deg)}

h1{text-align:center;font-size:27px;font-weight:700;color:var(--text);margin-bottom:6px}
h1 span{color:var(--accent)}
.subtitle{text-align:center;font-size:13px;color:var(--muted);margin-bottom:24px}

/* ---------- Champs (effet enfoncé) ---------- */
.input-group{position:relative;margin-bottom:18px}
.input-group input{
  width:100%;height:54px;padding:0 48px 0 18px;border:none;outline:none;
  background:transparent;color:var(--text);font-size:15px;border-radius:16px;
  box-shadow:inset 6px 6px 12px var(--dark),inset -6px -6px 12px var(--light);
  transition:box-shadow .3s ease;
}
.input-group input::placeholder{color:#9aa3ad}
.input-group input:focus{
  box-shadow:inset 3px 3px 7px var(--dark),inset -3px -3px 7px var(--light),0 0 0 2px var(--accent-soft);
}
.input-group input[readonly]{color:var(--muted)}
.input-group.error input{box-shadow:inset 6px 6px 12px var(--dark),inset -6px -6px 12px var(--light),0 0 0 2px rgba(220,60,60,.55)}
.password-toggle{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:30px;height:30px;border:none;background:transparent;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;transition:.3s ease;border-radius:50%;
}
.password-toggle svg{width:19px;height:19px;fill:currentColor}
.password-toggle:hover{color:var(--accent);transform:translateY(-50%) scale(1.1)}

/* ---------- Options ---------- */
.options{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:2px 0 22px}
.options label{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
.options input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.options a{color:var(--accent);text-decoration:none;font-weight:500}
.options a:hover{text-decoration:underline}

/* ---------- Messages ---------- */
.notice{
  font-size:12.5px;line-height:1.45;padding:10px 14px;border-radius:14px;margin:-6px 0 16px;
  box-shadow:inset 4px 4px 8px var(--dark),inset -4px -4px 8px var(--light);
}
.notice.error{color:#c0182b}
.notice.ok{color:#1d7a46}

/* ---------- Bouton principal ---------- */
.main-btn{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:55px;border:none;border-radius:17px;
  background:var(--bg);color:var(--accent);font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:8px 8px 16px var(--dark),-8px -8px 16px var(--light);
  transition:transform .35s ease,box-shadow .35s ease,color .35s ease;
}
.main-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,var(--accent),var(--accent2),var(--accent));
  background-size:200% 100%;
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s ease;
}
.main-btn:hover,.main-btn.loading{color:#fff;transform:translateY(-2px)}
.main-btn:hover::before,.main-btn.loading::before{transform:scaleY(1);animation:shine 2.4s linear infinite}
.main-btn:active{transform:scale(.98);box-shadow:inset 5px 5px 10px rgba(0,0,0,.2)}
@keyframes shine{to{background-position:-200% 0}}
.main-btn.signup{text-transform:uppercase;letter-spacing:.5px;font-size:14px}

/* ---------- Étapes (face « première connexion ») ---------- */
.steps{list-style:none;margin:0 0 20px;padding:14px 16px;border-radius:16px;font-size:12.5px;color:var(--muted);
  box-shadow:inset 5px 5px 10px var(--dark),inset -5px -5px 10px var(--light)}
.steps li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.steps li+li{margin-top:8px}
.steps b{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--accent)}

/* ---------- Bascule connexion / première connexion ---------- */
.switch{
  margin-top:auto;display:flex;justify-content:center;align-items:center;gap:22px;
  font-size:12.5px;color:var(--muted);padding-top:16px;
}
.switch-circle{
  width:40px;height:40px;border:none;border-radius:50%;background:var(--bg);color:var(--accent);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:7px 7px 14px var(--dark),-7px -7px 14px var(--light);
  transition:.35s ease;text-decoration:none;
}
.switch-circle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.switch-circle:hover{color:#fff;background:var(--accent);transform:rotate(180deg) scale(1.08);box-shadow:0 8px 25px var(--accent-soft)}
.switch-circle:active{transform:scale(.9)}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;pointer-events:none;
  padding:12px 22px;border-radius:14px;background:var(--bg);color:var(--text);font-size:14px;max-width:92vw;text-align:center;
  box-shadow:8px 8px 16px var(--dark),-8px -8px 16px var(--light);transition:.4s ease;z-index:10;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.site-link{
  position:fixed;top:18px;right:20px;font-size:12.5px;color:var(--muted);text-decoration:none;
  padding:9px 16px;border-radius:14px;background:var(--bg);
  box-shadow:5px 5px 10px var(--dark),-5px -5px 10px var(--light);transition:.3s ease;
}
.site-link:hover{color:var(--accent)}
.brand-foot{position:fixed;left:0;right:0;bottom:8px;text-align:center;font-size:11px;color:#9aa3ad;z-index:-1}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:440px){.panel{padding:28px 22px 22px}.bg1{width:120px;height:120px}.site-link{top:10px;right:10px}}
@media (max-height:700px){body{overflow:auto;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}