/* assets/css/pages/login.css
 * Extrait de templates/core/pages/login.php (règle : pas de CSS dans les templates).
 * Fichier dédié : la page login est un layout plein écran autonome, et le bloc
 * contient un @import de police qui doit rester en tête de feuille.
 *
 * Charte Nataïs : les trois couleurs sont relevées sur assets/img/logo.png
 * (or #F9B500, vert #21A041, anthracite #3C3C3B). Elles sont déclarées une fois
 * sur .login-root — le reste de la feuille n'utilise plus de littéral de couleur
 * de marque, une nouvelle charte se pose donc en modifiant ce seul bloc.
 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

.login-root {
  --na-gold:#F9B500;
  --na-gold-dk:#d99e00;
  --na-green:#21A041;
  --na-ink:#3C3C3B;
  --na-night:#0b0b07;
  font-family:'Outfit',sans-serif; width:100%; min-height:100vh; display:flex;
  background:var(--na-night); position:fixed; top:0; left:0; z-index:9999;
}
.login-root * { box-sizing:border-box; }

/* LEFT */
.login-root .left{width:52%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;}

/* SVG scene — champ de maïs */
.login-root .scene{position:absolute;inset:0;width:100%;height:100%;}

/* Particles canvas */
.login-root #pc{position:absolute;inset:0;width:100%;height:100%;}

/* Overlay gradient bottom */
/* Le pied du panneau reste très sombre : c'est lui qui porte le titre et le descriptif.
   Il conserve juste ce qu'il faut de transparence pour que le rang de maïs de premier
   plan se devine derrière le texte. */
.login-root .left-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,7,.96) 0%,rgba(11,11,7,.8) 26%,rgba(11,11,7,.5) 52%,rgba(11,11,7,.08) 100%);}

/* Grid lines */
.login-root .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(249,181,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(249,181,0,.035) 1px,transparent 1px);background-size:44px 44px;}

.login-root .left-content{position:relative;z-index:4;padding:40px 48px;margin-bottom:8px;}

/* Le mot-symbole Nataïs est anthracite : il est posé sur une plaque claire plutôt que
   recoloré, la charte de la société ne prévoyant pas de version en réserve. */
.login-root .brand-plate{display:flex;width:fit-content;align-items:center;background:#fff;border-radius:12px;padding:12px 20px;margin-bottom:22px;box-shadow:0 8px 26px rgba(0,0,0,.35);}
.login-root .brand-plate img{height:38px;width:auto;display:block;}

/* width:fit-content : sous 768px, .left-content passe en colonne flex et la pastille,
   simple inline-flex, se laissait étirer sur toute la largeur. */
.login-root .badge-design{display:inline-flex;width:fit-content;align-items:center;gap:7px;padding:5px 13px;border-radius:20px;border:1px solid rgba(249,181,0,.28);background:rgba(249,181,0,.07);margin-bottom:16px;}
.login-root .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--na-gold);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.login-root .badge-txt{font-size:10px;color:var(--na-gold);letter-spacing:1.5px;font-weight:500;text-transform:uppercase;}
.login-root .left-title{font-size:32px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px;letter-spacing:-.4px;}
.login-root .left-title em{font-style:normal;color:var(--na-gold);}
.login-root .left-desc{font-size:13px;color:rgba(255,255,255,.38);line-height:1.7;font-weight:300;max-width:340px;margin:0;}
.login-root .feats{display:flex;gap:18px;margin-top:22px;}
.login-root .ft{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.45);}
.login-root .ft-dot{width:5px;height:5px;border-radius:50%;background:var(--na-green);flex-shrink:0;}

/* RIGHT */
.login-root .right{width:48%;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 52px;position:relative;}
.login-root .right-autologin{justify-content:center;text-align:center;}
.login-root .rc{position:absolute;top:0;right:0;width:100px;height:100px;background:var(--na-gold);clip-path:polygon(100% 0,0 0,100% 100%);opacity:.07;}

.login-root .fw{width:100%;max-width:350px;}
.login-root .f-eye{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--na-gold);margin-bottom:10px;}
.login-root .f-title{font-size:24px;font-weight:700;color:var(--na-ink);letter-spacing:-.4px;margin-bottom:4px;}
.login-root .f-sub{font-size:13px;color:#9CA3AF;margin-bottom:32px;}
.login-root .right-autologin .f-title{font-size:28px;margin-bottom:8px;}
.login-root .right-autologin .f-sub{font-size:14px;color:#6B7280;margin-bottom:40px;}
.login-root .right-autologin .f-sub strong{color:var(--na-ink);}
.login-root .right-autologin .fw{animation:fadeIn .4s ease;}
.login-root .autologin-spinner{display:inline-block;position:relative;width:64px;height:64px;margin-bottom:30px;}
.login-root .autologin-spinner div{box-sizing:border-box;display:block;position:absolute;width:48px;height:48px;margin:8px;border:4px solid var(--na-gold);border-radius:50%;border-color:var(--na-gold) transparent transparent transparent;animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite;}
.login-root .autologin-hint{font-size:12px;color:#9CA3AF;letter-spacing:.5px;}

.login-root form{margin-top:28px;}
.login-root .field{margin-bottom:18px;}
.login-root .field label{display:block;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#9CA3AF;margin-bottom:7px;}
.login-root .fi{position:relative;display:flex;align-items:center;}
.login-root .fi input{width:100%;padding:13px 44px 13px 44px;border:1.5px solid #E5E7EB;border-radius:10px;font-family:'Outfit',sans-serif;font-size:14px;color:var(--na-ink);background:#FAFAFA;outline:none;transition:all .2s;margin:0;}
.login-root .fi input:focus{border-color:var(--na-gold);background:#fff;box-shadow:0 0 0 4px rgba(249,181,0,.09);}
.login-root .fi input::placeholder{color:#CBD5E1;}
.login-root .fi svg{position:absolute;left:14px;width:17px;height:17px;stroke:#CBD5E1;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;pointer-events:none;}
.login-root .fi .pass-toggle{position:absolute;right:14px;background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#CBD5E1;transition:color .2s;outline:none;}
.login-root .fi .pass-toggle:hover{color:var(--na-gold);}
.login-root .fi .pass-toggle svg{position:static;width:18px;height:18px;pointer-events:auto;}
.login-root .fi:focus-within svg{stroke:var(--na-gold);}

.login-root .frow{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.login-root .ck{display:flex;align-items:center;gap:7px;}
.login-root .ck input{accent-color:var(--na-gold);margin:0;}
.login-root .ck label{font-size:12px;color:#6B7280;cursor:pointer;margin:0;}
.login-root .fgt{font-size:12px;color:var(--na-gold);text-decoration:none;font-weight:500;}
.login-root .fgt:hover{color:var(--na-gold-dk);}
.login-root .back-row{text-align:center;margin-top:16px;}
/* Le formulaire « mot de passe oublié » n'a pas la ligne « se souvenir de moi » : sans
   ce rattrapage son bouton se colle au champ, là où celui de connexion respire. */
.login-root #forget-form .field{margin-bottom:26px;}

.login-root .btn-submit{width:100%;padding:14px;background:var(--na-gold);border:none;border-radius:10px;color:var(--na-ink);font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.login-root .btn-submit:hover{background:var(--na-gold-dk);transform:translateY(-1px);}
.login-root .btn-submit svg{width:16px;height:16px;stroke:var(--na-ink);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* Retour de « mot de passe oublié » — le JS du noyau pose .success / .danger */
.login-root #forget-message{font-size:12px;line-height:1.5;margin:0 0 14px;}
.login-root #forget-message:empty{display:none;}
.login-root #forget-message.success{color:var(--na-green);}
.login-root #forget-message.danger{color:#dc3545;}

.login-root .strow{display:flex;justify-content:center;gap:20px;margin-top:28px;padding-top:22px;border-top:1px solid #F3F4F6;}
.login-root .st{display:flex;align-items:center;gap:6px;font-size:11px;color:#9CA3AF;}
.login-root .st-d{width:6px;height:6px;border-radius:50%;}
.login-root .st-d.g{background:var(--na-green);}
.login-root .st-d.o{background:var(--na-gold);}
.login-root .st-d.k{background:var(--na-ink);}
.login-root .copy{position:absolute;bottom:16px;font-size:10px;color:#D1D5DB;letter-spacing:.4px;}
.login-root .form-control-feedback-icon{display:none;}
.login-root .invalid-feedback{display:none;color:#dc3545;font-size:11px;margin-top:4px;}
.login-root .is-invalid ~ .invalid-feedback{display:block;}
.login-root .is-invalid{border-color:#dc3545 !important;}

.login-message{margin-top:20px;font-size:13px;}
.hide{display:none !important;}

/* ── TABLETTE (≤1024px) ─────────────────────────────────────── */
@media (max-width:1024px){
  .login-root .left  { width:45%; }
  .login-root .right { width:55%; padding:40px 36px; }
  .login-root .left-title { font-size:26px; }
  .login-root .left-content { padding:32px 32px; }
  .login-root .fw { max-width:100%; }
}

/* ── MOBILE (≤768px) ────────────────────────────────────────── */
@media (max-width:768px){
  /* Libérer le scroll sur mobile — écrase le position:fixed */
  html, body { height:auto !important; overflow:auto !important; }

  .login-root {
    position: relative !important;  /* CRITICAL: overrides fixed */
    top: auto !important;
    left: auto !important;
    flex-direction: column;
    min-height: 100dvh;
    overflow-y: visible;
    width: 100%;
  }

  /* Formulaire PASSE EN PREMIER sur mobile */
  .login-root .right {
    order: 1;
    width: 100% !important;
    min-height: auto;
    padding: 52px 24px 36px;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
  }
  .login-root .fw { max-width: 100%; }
  .login-root .copy { position: relative; bottom: auto; margin-top: 24px; text-align: center; }

  /* Panneau Nataïs en dessous, version compacte */
  .login-root .left {
    order: 2;
    width: 100% !important;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    justify-content: flex-end;
  }
  .login-root .left .scene,
  .login-root .left #pc,
  .login-root .left .grid,
  .login-root .left .left-overlay {
    position: absolute;
  }
  .login-root .left-content {
    padding: 24px 24px 28px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
  }
  .login-root .brand-plate { margin-bottom: 12px; padding: 9px 15px; }
  .login-root .brand-plate img { height: 28px; }
  .login-root .badge-design { margin-bottom: 8px; }
  .login-root .left-title { font-size: 20px; margin-bottom: 4px; }
  .login-root .left-desc { display:none; }
  .login-root .feats { gap: 12px; margin-top: 10px; flex-wrap: wrap; }
  .login-root .ft { font-size: 11px; }

  /* Ajustements form */
  .login-root .f-eye { font-size: 9px; }
  .login-root .f-title { font-size: 22px; }
  .login-root .f-sub { font-size: 12px; margin-bottom: 24px; }
  .login-root .fi input { padding: 13px 44px; font-size: 16px; }
  .login-root .btn-submit { padding: 16px; font-size: 16px; }
  .login-root .frow { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .login-root .ck label { font-size: 13px; }
  .login-root .fgt { font-size: 13px; }
  .login-root .strow { gap: 14px; margin-top: 20px; padding-top: 18px; }
  .login-root .st { font-size: 12px; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}