/* ═══════════════════════════════════════════════════════════════════
   arpe-2fa.css — Arpentiq · vérification en deux étapes
   Namespace .aqf-* · aucune règle body/html/:root.
   ═══════════════════════════════════════════════════════════════════ */
.aqf,[data-theme="light"] .aqf{
  --bg:#f7f8fa;--surface:#ffffff;--s2:#f1f3f7;--s3:#e7ebf2;
  --border:#e4e7ee;--border-hi:#d3d8e3;
  --text:#14161f;--text-dim:#4a5169;--muted:#8a93ab;
  --accent:#6b5cf5;--accent-dim:rgba(107,92,245,.09);
  --chaud:#d64560;--green:#22a06b;
  --r:8px;--r-lg:12px;--r-xl:16px;
  --scrim:rgba(20,22,31,.42);
  --sh:0 1px 2px rgba(20,22,31,.05),0 24px 60px -14px rgba(20,22,31,.30);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="noir"] .aqf,[data-theme="donna"] .aqf,[data-theme="ardoise"] .aqf{
  --bg:#0f1115;--surface:#16181d;--s2:#1c1e24;--s3:#23262d;
  --border:#23262d;--border-hi:#2f333c;
  --text:#f2f3f7;--text-dim:#a8adbd;--muted:#5f6578;
  --accent:#8b7bff;--accent-dim:rgba(139,123,255,.12);
  --chaud:#ff6680;--green:#4fd49a;
  --r:6px;--r-lg:10px;--r-xl:14px;
  --scrim:rgba(0,0,0,.62);
  --sh:0 1px 2px rgba(0,0,0,.5),0 28px 68px -14px rgba(0,0,0,.8);
}
.aqf{font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased}
.aqf *{box-sizing:border-box}
.aqf button{font-family:inherit;cursor:pointer}

.aqf-scrim{position:fixed;inset:0;z-index:var(--aqf-z-scrim,690);background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity .2s}
.aqf-scrim.aqf-on{opacity:1;pointer-events:auto}

.aqf-box{position:fixed;left:50%;top:50%;z-index:var(--aqf-z-box,700);
  width:404px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-xl);
  box-shadow:var(--sh);padding:26px 26px 20px;
  transform:translate(-50%,-50%) translateY(10px) scale(.985);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .24s cubic-bezier(.2,.75,.2,1)}
.aqf-box.aqf-on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.aqf-box.aqf-shake{animation:aqf-shake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes aqf-shake{10%,90%{transform:translate(-50%,-50%) translateX(-3px)}
  30%,70%{transform:translate(-50%,-50%) translateX(5px)}
  50%{transform:translate(-50%,-50%) translateX(-5px)}}

/* en-tête */
.aqf-ic{width:42px;height:42px;border-radius:var(--r-lg);background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center;margin-bottom:16px}
.aqf-ic svg{width:21px;height:21px}
.aqf-t{font-size:19px;font-weight:700;letter-spacing:-.026em;line-height:1.2}
.aqf-d{font-size:13.5px;line-height:1.5;color:var(--text-dim);margin-top:7px}
.aqf-d b{color:var(--text);font-weight:600}

/* six cases : chaque chiffre est visible, aucun ne se perd */
.aqf-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:20px 0 4px}
.aqf-cell{height:54px;width:100%;text-align:center;
  font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text);
  background:var(--s2);border:1px solid transparent;border-radius:var(--r-lg);
  outline:none;transition:border-color .14s,background .14s,box-shadow .14s;
  -moz-appearance:textfield;padding:0}
.aqf-cell::-webkit-outer-spin-button,.aqf-cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.aqf-cell:hover{background:var(--s3)}
.aqf-cell:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.aqf-cell.aqf-filled{background:var(--surface);border-color:var(--border-hi)}
.aqf-err .aqf-cell{border-color:color-mix(in srgb,var(--chaud) 42%,transparent)}

/* message d'erreur : réserve sa place, la boîte ne saute pas */
.aqf-msg{min-height:18px;font-size:12.5px;line-height:1.4;color:var(--chaud);
  display:flex;align-items:center;gap:7px;opacity:0;transition:opacity .16s}
.aqf-msg.aqf-on{opacity:1}
.aqf-msg svg{width:14px;height:14px;flex-shrink:0}

/* actions */
.aqf-go{width:100%;height:44px;margin-top:12px;border:0;border-radius:var(--r-lg);
  background:var(--text);color:var(--surface);
  font-size:14px;font-weight:600;letter-spacing:-.012em;
  display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:.35;transition:opacity .18s,background .15s}
.aqf-go.aqf-ready{opacity:1}
.aqf-go.aqf-ready:hover{background:var(--text-dim)}
.aqf-go:disabled{cursor:default}
.aqf-spin{width:15px;height:15px;border-radius:50%;border:2px solid color-mix(in srgb,var(--surface) 35%,transparent);
  border-top-color:var(--surface);animation:aqf-spin .7s linear infinite}
@keyframes aqf-spin{to{transform:rotate(360deg)}}
.aqf-ok{width:17px;height:17px}

.aqf-alt{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.aqf-lk{border:0;background:transparent;font-size:12.5px;font-weight:500;color:var(--muted);
  padding:6px 4px;transition:color .15s}
.aqf-lk:hover{color:var(--text-dim)}
.aqf-lk.aqf-dgr:hover{color:var(--chaud)}
.aqf-sep{width:1px;height:12px;background:var(--border)}

@media(max-width:400px){
  .aqf-box{padding:22px 18px 16px}
  .aqf-code{gap:6px}
  .aqf-cell{height:48px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .aqf-scrim,.aqf-box,.aqf-cell,.aqf-go,.aqf-msg{transition:none!important}
  .aqf-box.aqf-shake{animation:none}
  .aqf-spin{animation:none}
}