/* ArcLOCK — design system v4
   Crème + encre, accents dégradé Arc BLEU ACIER (deep navy→steel→sky), titres
   display serrés, labels mono. Polices libres : Clash Display / General Sans / Space Mono. */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600&f[]=general-sans@400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#f5f3ef; --panel:#fff; --ink:#201f24; --muted:#4d4851;
  --line:#e4e1da; --line-dark:#d7d3ca;
  --arc1:#2f5f89; --arc2:#5a89b2; --arc3:#9bc2e0;
  --steel-dark:#12314c; --steel-panel:#1c3e5c;
  --grad:linear-gradient(120deg,var(--arc1) 0%,var(--arc2) 55%,var(--arc3) 100%);
  --font:'General Sans',sans-serif;
  --font-display:'Clash Display',sans-serif;
  --font-mono:'Space Mono',monospace;
  --clip:26px;
}
html{ scroll-behavior:smooth; }
html,body{ background:var(--bg); font-family:var(--font); color:var(--ink); }
body{ padding:14px; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--arc1); color:#fff; }

.frame{ position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--line);
  background:var(--bg); }

/* ---- nav ---- */
nav{ position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px; border-bottom:1px solid var(--line); background:var(--bg); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{ height:72px; width:auto; display:block; }
.brand b{ font-family:var(--font-display); font-size:21px; font-weight:500; letter-spacing:.2px; }
.brand b em{ font-style:normal; font-weight:600; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* wordmark VAULTIX — chrome métallique */
.brand b.wm{ font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  background:linear-gradient(180deg,#7c8a99 0%,#c3ced8 18%,#2d353f 52%,#8b98a6 78%,#c9d3dc 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.menu{ display:flex; gap:30px; }
.menu a{ font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); transition:color .2s; }
.menu a:hover,.menu a.active{ color:var(--ink); }
.actions{ display:flex; align-items:center; gap:18px; }
.login{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); cursor:pointer; }
.btn-primary{ padding:11px 22px; border-radius:40px; cursor:pointer; font-weight:600; font-size:14px;
  border:none; background:var(--ink); color:#fff; font-family:var(--font); transition:.25s; }
.btn-primary:hover{ background:var(--arc1); transform:translateY(-1px); }

/* ---- typo ---- */
h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(44px,7vw,96px);
  line-height:.92; letter-spacing:-.02em; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }
.mono-label{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); }
.mono-label .dot{ display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--grad); margin-right:8px; vertical-align:1px; }

.pill{ display:inline-flex; align-items:center; gap:12px; padding:6px 16px 6px 6px; border-radius:40px;
  background:#fff; border:1px solid var(--line); font-size:13px; color:var(--muted); }
.pill .tag{ background:var(--grad); color:#fff; padding:5px 13px; border-radius:30px;
  font-weight:600; font-size:11px; font-family:var(--font-mono); text-transform:uppercase; }

/* ---- cards / forms ---- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; }
.card.clip{ border-radius:18px 0 18px 18px;
  clip-path:polygon(0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, 0 100%); }
.card h3{ font-family:var(--font-display); font-size:19px; font-weight:500; margin-bottom:4px; }
.card .sub{ color:var(--muted); font-size:13.5px; margin-bottom:18px; }

label{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--muted);
  margin:14px 0 7px; text-transform:uppercase; letter-spacing:.1em; }
input,select{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-dark);
  background:#fbfaf8; color:var(--ink); font-size:14px; font-family:var(--font); }
input:focus,select:focus{ outline:none; border-color:var(--arc1); }
.btn-block{ width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer;
  font-family:var(--font); font-weight:600; font-size:15px; color:#fff; background:var(--ink); transition:.25s; }
.btn-block:hover{ background:var(--arc1); transform:translateY(-1px); }
.hidden{ display:none !important; }

/* ---- animations partagées ---- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.6,.2,1) var(--d,0s),
  transform .8s cubic-bezier(.2,.6,.2,1) var(--d,0s); }
.rv.in{ opacity:1; transform:none; }

/* curseur point dégradé */
#cursor{ position:fixed; z-index:99; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--grad); pointer-events:none; transform:translate(-50%,-50%); }
@media (hover:none){ #cursor{ display:none; } }