/* ============================================================
   Page de connexion Neenam — palette dédiée, immersive, animée
   Couleurs inspirées du logo : jaune poussin, orange, rouge braise
   ============================================================ */
:root{
  --nm-yellow:      #FFC93C;
  --nm-yellow-deep: #F5B942;
  --nm-yellow-pale: #FFF3D1;
  --nm-orange:      #F2762E;
  --nm-orange-deep: #E0611C;
  --nm-red:         #C0392B;
  --nm-cream:       #FFFBF2;
  --nm-brown:       #4A3520;
  --nm-brown-soft:  #8A7256;
  --nm-white:       #FFFFFF;
  --nm-shadow:      0 24px 60px rgba(194,110,20,.18);
  --nm-shadow-sm:   0 10px 26px rgba(194,110,20,.14);
  --nm-radius:      26px;
  --nm-radius-sm:   16px;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0;}
body.nm-body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--nm-brown);
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(255,201,60,.55), transparent 55%),
    radial-gradient(760px 560px at 108% 12%, rgba(242,118,46,.35), transparent 55%),
    radial-gradient(1000px 700px at 50% 118%, rgba(255,201,60,.30), transparent 60%),
    linear-gradient(180deg, var(--nm-cream), #FFF6E3 55%, #FFEFD6);
  min-height:100%;
  overflow-x:hidden;
  position:relative;
}

/* ── Décor animé : bulles / plumes / œufs flottants ── */
.nm-decor{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.nm-blob{
  position:absolute; border-radius:50%;
  filter:blur(2px);
  opacity:.55;
  animation: nmFloat 12s ease-in-out infinite;
}
.nm-blob--1{width:120px; height:120px; left:6%; top:14%; background:radial-gradient(circle at 32% 30%, #FFE49A, var(--nm-yellow)); animation-duration:13s;}
.nm-blob--2{width:70px; height:70px; left:85%; top:22%; background:radial-gradient(circle at 32% 30%, #FFD9A8, var(--nm-orange)); animation-duration:9s; animation-delay:-2s;}
.nm-blob--3{width:46px; height:46px; left:18%; top:78%; background:radial-gradient(circle at 32% 30%, #FFE9BC, var(--nm-yellow-deep)); animation-duration:11s; animation-delay:-4s;}
.nm-blob--4{width:90px; height:90px; left:92%; top:76%; background:radial-gradient(circle at 32% 30%, #FFD3B0, var(--nm-red)); opacity:.30; animation-duration:15s; animation-delay:-6s;}
.nm-blob--5{width:34px; height:34px; left:48%; top:6%; background:radial-gradient(circle at 32% 30%, #FFF1C9, var(--nm-yellow)); animation-duration:8s; animation-delay:-1s;}
@keyframes nmFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(1.5%, -4%, 0) scale(1.06);}
}

.nm-emoji{
  position:absolute; font-size:22px; opacity:.5;
  animation: nmDrift 16s linear infinite;
  filter:drop-shadow(0 4px 8px rgba(194,110,20,.15));
}
.nm-emoji--1{left:10%; top:60%; animation-duration:14s;}
.nm-emoji--2{left:80%; top:50%; animation-duration:18s; animation-delay:-4s; font-size:18px;}
.nm-emoji--3{left:60%; top:85%; animation-duration:12s; animation-delay:-7s; font-size:16px;}
.nm-emoji--4{left:30%; top:10%; animation-duration:20s; animation-delay:-2s; font-size:20px;}
@keyframes nmDrift{
  0%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-22px) rotate(8deg);}
  100%{transform:translateY(0) rotate(0deg);}
}

/* ── Layout ── */
.nm-page{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 16px;
}

.nm-wrap{
  width:min(920px, 100%);
  display:grid;
  grid-template-columns:1fr;
  border-radius:var(--nm-radius);
  overflow:hidden;
  box-shadow:var(--nm-shadow);
  animation:nmPop .6s cubic-bezier(.2,.9,.2,1);
  background:var(--nm-white);
}
@media(min-width:760px){ .nm-wrap{grid-template-columns:1fr 1fr;} }
@keyframes nmPop{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* ── Panneau marque (gauche) ── */
.nm-brand{
  display:none;
  position:relative;
  flex-direction:column; justify-content:space-between;
  padding:40px 36px;
  background:
    radial-gradient(420px 320px at 20% 12%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(160deg, var(--nm-yellow) 0%, var(--nm-orange) 62%, var(--nm-orange-deep) 100%);
  color:#4A2A0E;
  overflow:hidden;
}
@media(min-width:760px){ .nm-brand{display:flex;} }
.nm-brand::before{
  content:'';
  position:absolute; right:-60px; bottom:-60px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.16);
}
.nm-brand::after{
  content:'';
  position:absolute; left:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(255,255,255,.14);
}

.nm-logoWrap{
  position:relative; z-index:1;
  width:96px; height:96px;
  border-radius:26px;
  background:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 32px rgba(74,42,14,.28);
  margin-bottom:22px;
  animation:nmBounce 3.4s ease-in-out infinite;
}
.nm-logoWrap img{width:76px; height:76px; object-fit:contain; border-radius:18px;}
@keyframes nmBounce{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-8px) rotate(-3deg);}
}

.nm-brand__title{
  position:relative; z-index:1;
  font-size:26px; font-weight:900; line-height:1.2; letter-spacing:-.4px;
  margin-bottom:10px; color:#3C2409;
}
.nm-brand__sub{
  position:relative; z-index:1;
  font-size:14px; line-height:1.55; color:rgba(60,36,9,.82); margin-bottom:26px; max-width:34ch;
}

.nm-features{position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.nm-feature{display:flex; align-items:flex-start; gap:11px;}
.nm-feature__ic{
  width:30px; height:30px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.5);
  display:grid; place-items:center; font-size:15px;
  backdrop-filter:blur(2px);
}
.nm-feature__txt{font-size:13.5px; line-height:1.45; color:#3C2409;}
.nm-feature__txt strong{font-weight:800;}

.nm-brand__footer{
  position:relative; z-index:1;
  margin-top:24px; padding-top:18px;
  border-top:1px solid rgba(74,42,14,.18);
  font-size:11.5px; font-weight:700; color:rgba(60,36,9,.65);
  letter-spacing:.2px;
}

/* ── Panneau formulaire (droite) ── */
.nm-form-side{
  padding:40px 36px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--nm-white);
}

.nm-badge{
  display:inline-flex; align-items:center; gap:6px;
  width:fit-content;
  font-size:11px; font-weight:800; letter-spacing:.3px;
  color:var(--nm-orange-deep);
  background:rgba(242,118,46,.10);
  border:1px solid rgba(242,118,46,.22);
  padding:5px 11px; border-radius:999px;
  margin-bottom:16px;
}

.nm-form-title{font-size:25px; font-weight:900; letter-spacing:-.4px; margin-bottom:5px; color:var(--nm-brown);}
.nm-form-sub{color:var(--nm-brown-soft); font-size:13.5px; margin-bottom:24px;}

.nm-form{display:flex; flex-direction:column; gap:15px;}

.nm-field{display:flex; flex-direction:column; gap:6px;}
.nm-field__label{color:var(--nm-brown-soft); font-size:11.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;}
.nm-field__wrap{position:relative; display:flex; align-items:center;}
.nm-field__icon{position:absolute; left:15px; font-size:15px; opacity:.55; pointer-events:none;}
.nm-field__input{
  width:100%;
  background:#FFF9EC;
  border:1.5px solid #F3E3C2;
  color:var(--nm-brown);
  padding:12px 14px 12px 40px;
  border-radius:var(--nm-radius-sm);
  outline:none;
  font-size:14.5px;
  font-family:inherit;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
}
.nm-field__input::placeholder{color:#C9B085;}
.nm-field__input:focus{
  border-color:var(--nm-orange);
  background:#fff;
  box-shadow:0 0 0 4px rgba(242,118,46,.14);
}
.nm-field__input[data-has-toggle]{padding-right:64px;}
.nm-field__toggle{
  position:absolute; right:6px;
  background:transparent; border:none; cursor:pointer;
  color:var(--nm-brown-soft); font-size:12px; font-weight:800; letter-spacing:.2px;
  padding:7px 10px; border-radius:8px; font-family:inherit;
}
.nm-field__toggle:hover{color:var(--nm-orange-deep); background:rgba(242,118,46,.08);}

.nm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  border:none; cursor:pointer;
  padding:14px 20px;
  border-radius:var(--nm-radius-sm);
  font-weight:800; font-size:15px; letter-spacing:.1px;
  font-family:inherit;
  text-decoration:none;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.nm-btn:active{transform:translateY(1px) scale(.99);}
.nm-btn--primary{
  background:linear-gradient(135deg, var(--nm-yellow), var(--nm-orange));
  color:#3C2409;
  box-shadow:0 14px 30px rgba(224,97,28,.30);
}
.nm-btn--primary:hover{filter:brightness(1.05); box-shadow:0 18px 36px rgba(224,97,28,.38); transform:translateY(-1px);}
.nm-btn--outline{
  background:#fff;
  border:1.6px solid #F3D9BC;
  color:var(--nm-orange-deep);
}
.nm-btn--outline:hover{background:rgba(242,118,46,.06); border-color:var(--nm-orange); transform:translateY(-1px);}

.nm-divider{
  display:flex; align-items:center; gap:10px;
  color:#C9B085; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.7px;
  margin:6px 0;
}
.nm-divider::before, .nm-divider::after{content:''; flex:1; height:1px; background:#F0E1C3;}

.nm-muted{text-align:center; color:var(--nm-brown-soft); font-size:13px; margin-top:2px;}
.nm-link{color:var(--nm-orange-deep); text-decoration:none; font-weight:800;}
.nm-link:hover{text-decoration:underline;}

.nm-alert{
  padding:12px 14px; border-radius:14px; font-size:13px; font-weight:600;
  margin-bottom:16px;
}
.nm-alert--error{background:rgba(192,57,43,.10); border:1px solid rgba(192,57,43,.28); color:#9C2E22;}
.nm-alert--success{background:rgba(46,160,90,.10); border:1px solid rgba(46,160,90,.28); color:#237A4B;}

.nm-mobileLogo{display:flex; justify-content:center; margin-bottom:18px;}
.nm-mobileLogo img{width:64px; height:64px; border-radius:18px; box-shadow:var(--nm-shadow-sm); animation:nmBounce 3.4s ease-in-out infinite;}
@media(min-width:760px){ .nm-mobileLogo{display:none;} }