/* SyntaX — styles de la page de connexion (connexion.html) */

:root{
    --ink:#0f1115;
    --ink-soft:#4a4f57;
    --line:#e7e8eb;
    --bg:#ffffff;
    --bg-soft:#f7f7f8;
    --radius:16px;
    --shadow: 0 10px 30px rgba(15,17,21,0.06);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink);
    background:var(--bg-soft);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  a{text-decoration:none; color:inherit;}
  header{
    padding:22px 0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1160px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; gap:9px;
  }
  .logo-badge{
    width:30px; height:30px; border-radius:8px;
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px; flex-shrink:0;
  }
  .logo-text{font-weight:800; font-size:17px; letter-spacing:-0.02em;}

  main{
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:48px 24px;
  }
  .auth-card{
    width:100%; max-width:400px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:36px 32px;
  }
  .auth-eyebrow{
    font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:8px;
  }
  .auth-card h1{font-size:23px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px;}
  .auth-sub{font-size:14px; color:var(--ink-soft); margin-bottom:26px;}

  .tabs{
    display:flex; background:var(--bg-soft); border-radius:10px; padding:4px; margin-bottom:24px;
  }
  .tab{
    flex:1; text-align:center; padding:9px 0; border-radius:7px;
    font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
    transition:all .15s;
  }
  .tab.active{background:var(--ink); color:#fff;}

  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
  .field input{
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px;
    font-size:14.5px; font-family:inherit; color:var(--ink);
    transition:border-color .15s;
  }
  .field input:focus{outline:none; border-color:var(--ink);}
  .field-hint{font-size:12px; color:var(--ink-soft); margin-top:5px;}

  .remember-row{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    margin:-4px 0 16px;
  }
  .remember-line{
    display:flex; align-items:center; gap:9px;
    font-size:13px; color:var(--ink-soft);
    cursor:pointer; user-select:none;
  }
  .remember-line input{
    width:16px; height:16px; accent-color:var(--ink); cursor:pointer; flex-shrink:0;
  }
  .forgot-link{
    font-size:12.5px; font-weight:600; color:var(--ink-soft);
    border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
  }
  .forgot-link:hover{color:var(--ink); border-color:var(--ink);}

  .btn{
    width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 20px; border-radius:10px; font-weight:600; font-size:14.5px;
    cursor:pointer; border:1px solid transparent; transition:all .2s ease;
    background:var(--ink); color:#fff; margin-top:6px;
  }
  .btn:hover{background:#fff; color:var(--ink); border-color:var(--ink);}
  .btn:disabled{opacity:.5; cursor:not-allowed;}
  .btn:disabled:hover{background:var(--ink); color:#fff;}

  .switch-line{text-align:center; font-size:13.5px; color:var(--ink-soft); margin-top:20px;}
  .switch-line a{font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink);}

  .step{display:none;}
  .step.active{display:block;}

  .code-inputs{display:flex; gap:9px; margin-bottom:6px;}
  .code-inputs input{
    width:100%; text-align:center; font-size:20px; font-weight:700;
    padding:12px 0; border:1px solid var(--line); border-radius:9px; font-family:inherit;
  }
  .code-inputs input:focus{outline:none; border-color:var(--ink);}

  .back-link{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft);
    margin-bottom:18px; cursor:pointer;
  }
  .back-link:hover{color:var(--ink);}

  .resend{font-size:13px; color:var(--ink-soft); text-align:center; margin-top:16px;}
  .resend a{font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink);}
  .resend a.disabled{opacity:.45; pointer-events:none;}

  .err{
    font-size:12.5px; color:#b3261e; margin-top:8px; display:none;
  }
  .err.show{display:block;}

  .demo-note{
    margin-top:22px; padding:11px 13px; background:var(--bg-soft); border-radius:9px;
    font-size:11.5px; color:var(--ink-soft); line-height:1.5;
  }