/* =========================================================
   Pages de connexion VEMD : écran partagé (inspiré de C La Classe)
   Panneau visuel vert VEMD à gauche, formulaire à droite.
   S'appuie sur les jetons du template (admin.css + admin-vemd.css).
   ========================================================= */
body.auth-split{display:block;padding:0;background:var(--surface)}
.as-wrap{display:flex;width:100%;min-height:100dvh}

/* ---------- Panneau visuel ---------- */
.as-visual{
  --as-deep:#0F5C4C;--as-mid:#177A66;--as-light:#A8EBDB;
  position:relative;flex:0 0 45%;display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:48px 64px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 0% 100%,#28BA9C 0%,transparent 55%),linear-gradient(160deg,var(--as-mid) 0%,var(--as-deep) 100%);
}
.as-visual::before,.as-visual::after{content:"";position:absolute;pointer-events:none}
.as-visual::before{bottom:-120px;left:-90px;width:340px;height:340px;border-radius:50%;background:var(--as-light);opacity:.14}
.as-visual::after{top:-160px;right:-140px;width:460px;height:440px;border-radius:47% 53% 58% 42%/55% 46% 54% 45%;background:#fff;opacity:.07}
.as-visual>*{position:relative;z-index:1}
.as-pill{display:inline-flex;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;font-size:13.5px;letter-spacing:.01em}
.as-title{margin:22px 0 14px;font-size:clamp(28px,2.6vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.02em}
.as-accent{color:var(--as-light)}
.as-tagline{max-width:24rem;margin:0;color:#D9F3EC;font-size:15.5px;line-height:1.6}
.as-stage{position:relative;align-self:center;width:440px;max-width:100%;aspect-ratio:440/380}
.as-thumb{position:absolute;overflow:hidden;border:3px solid #fff;box-shadow:0 18px 40px rgba(6,40,33,.35)}
.as-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.as-thumb:hover img{transform:scale(1.06)}
.as-thumb-main{top:0;left:2%;width:62%;height:78%;border-radius:50% 50% 48% 52%/52% 50% 50% 48%;
  animation:as-in .8s ease-out both,as-float 6s ease-in-out .8s infinite}
.as-thumb-small{right:4%;bottom:0;width:40%;height:46%;border-radius:52% 48% 50% 50%/48% 52% 48% 52%;background:#fff;
  animation:as-in .8s ease-out .25s both,as-float 5s ease-in-out 1.05s infinite reverse}
.as-thumb-small img{object-fit:contain;padding:14%}
.as-caption{align-self:center;margin:0;font-size:12.5px;font-weight:500;letter-spacing:.02em;opacity:.85}
@keyframes as-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes as-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.as-thumb-main,.as-thumb-small{animation:none}.as-thumb img{transition:none}}

/* ---------- Panneau formulaire ---------- */
.as-form{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:var(--surface)}
.as-form:focus{outline:none}
.as-box{width:100%;max-width:400px;display:flex;flex-direction:column;gap:22px}
.as-brand{display:flex;justify-content:center}
.as-brand img{width:96px;height:auto}
.as-head{text-align:center}
.as-head h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em}
.as-sub{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.as-fields{display:flex;flex-direction:column;gap:16px}
.as-fields .inp{height:48px;border-radius:14px;font-size:15px}
.as-fields .btn.lg{margin-top:6px;border-radius:999px;min-height:50px;font-size:15.5px}
.as-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.as-label-row .link{font-size:13px;font-weight:600}
.as-pass .inp{padding-right:48px}
.as-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.as-eye:hover{color:var(--ink);background:var(--surface-2)}
.as-eye[aria-pressed="true"]{color:var(--primary-text)}
.as-eye:focus-visible{outline:none;box-shadow:var(--ring)}
.as-back{margin:4px 0 0;text-align:center}
.as-back .link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.as-copy{margin:8px 0 0;text-align:center;color:var(--muted);font-size:12.5px}

@media (max-width:991.98px){
  .as-visual{display:none}
  body.auth-split{background:var(--bg)}
  .as-form{background:var(--bg)}
  .as-box{padding:28px 24px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card)}
}
.as-fields .inp-wrap>.ico{left:15px}
.as-fields .inp-wrap>.ico~.inp{padding-left:44px}