/* Pages d'entrée du back-office (connexion, code, activation, codes de secours, erreurs).
   Reprise de la maquette validée le 10/10 : secondbrain/01_projects/portail-client/maquette/connexion/. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
/* ---------- Jetons ---------- */
:root{
  --page:#eef1f6;
  --blob-a:rgba(252,92,1,.30);
  --blob-b:rgba(0,78,226,.30);
  --ink:#0c1424; --ink-2:#4b5569; --ink-3:#7d8698;
  --glass:rgba(255,255,255,.50);
  --glass-border:rgba(255,255,255,.80);
  --glass-hi:rgba(255,255,255,.95);
  --glass-shadow:0 30px 70px -28px rgba(15,25,55,.35), 0 2px 6px rgba(15,25,55,.04);
  --field:rgba(255,255,255,.70); --field-border:rgba(12,20,36,.12); --field-hover:rgba(12,20,36,.22);
  --focus:#004ee2; --focus-ring:rgba(0,78,226,.18);
  --accent:#004ee2; --accent-hover:#0042c2; --accent-ink:#ffffff;
  --sso:rgba(255,255,255,.62); --sso-border:rgba(12,20,36,.12);
  --sep:rgba(12,20,36,.12);

  --otp-card:rgba(255,255,255,.92); --otp-border:#e6e7eb; --otp-glow:rgba(196,199,207,.55);
  --box-bg:#fbfbfc; --box-border:#ebebef; --box-filled:#ffffff;
  --box-active-border:#1a1d24; --box-active-bg:#f1f1f3; --digit:#0b0d12;
  --box-glow:rgba(16,24,40,.06);
  --ok:#10b981; --ok-ink:#0e9f6e; --ok-soft:#eafbf3; --ok-border:#45d39c; --ok-badge:rgba(16,185,129,.16);
  --err:#e5484d; --err-soft:#fdeeee; --err-ink:#b42318; --err-line:rgba(229,72,77,.25);
  --switch-off:rgba(120,120,128,.20);
  --orb-disc:#f7f7f8; --orb-ring:#dfe0e4; --orb-dash:#b4b7bf; --orb-halo:rgba(0,0,0,.025);
  --p-orange:#f0763a; --p-blue:#3b78f0; --p-green:#45c389;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#060b18;
    --blob-a:rgba(252,92,1,.22);
    --blob-b:rgba(0,78,226,.40);
    --ink:#f2f5fb; --ink-2:#a9b3c7; --ink-3:#77839c;
    --glass:rgba(20,29,52,.46);
    --glass-border:rgba(255,255,255,.12);
    --glass-hi:rgba(255,255,255,.20);
    --glass-shadow:0 30px 80px -24px rgba(0,0,0,.65);
    --field:rgba(255,255,255,.06); --field-border:rgba(255,255,255,.14); --field-hover:rgba(255,255,255,.26);
    --focus:#5b93ff; --focus-ring:rgba(91,147,255,.25);
    --accent:#1f5ff0; --accent-hover:#3a74ff; --accent-ink:#ffffff;
    --sso:rgba(255,255,255,.06); --sso-border:rgba(255,255,255,.14);
    --sep:rgba(255,255,255,.12);
    --otp-card:rgba(14,21,39,.90); --otp-border:rgba(255,255,255,.08); --otp-glow:rgba(92,108,146,.30);
    --box-bg:rgba(255,255,255,.03); --box-border:rgba(255,255,255,.09); --box-filled:rgba(255,255,255,.05);
    --box-active-border:#e8ecf5; --box-active-bg:rgba(255,255,255,.08); --digit:#f4f6fb;
    --box-glow:rgba(255,255,255,.05);
    --ok:#34d399; --ok-ink:#4ade9f; --ok-soft:rgba(52,211,153,.12); --ok-border:rgba(52,211,153,.55); --ok-badge:rgba(52,211,153,.16);
    --err:#ff6369; --err-soft:rgba(255,99,105,.12); --err-ink:#ffa3a6; --err-line:rgba(255,99,105,.30);
    --switch-off:rgba(120,120,128,.36);
    --orb-disc:rgba(255,255,255,.03); --orb-ring:rgba(255,255,255,.13); --orb-dash:rgba(255,255,255,.28); --orb-halo:rgba(255,255,255,.025);
    --p-orange:#ff8a4c; --p-blue:#6a9bff; --p-green:#4ade9f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#060b18;
  --blob-a:rgba(252,92,1,.22);
  --blob-b:rgba(0,78,226,.40);
  --ink:#f2f5fb; --ink-2:#a9b3c7; --ink-3:#77839c;
  --glass:rgba(20,29,52,.46);
  --glass-border:rgba(255,255,255,.12);
  --glass-hi:rgba(255,255,255,.20);
  --glass-shadow:0 30px 80px -24px rgba(0,0,0,.65);
  --field:rgba(255,255,255,.06); --field-border:rgba(255,255,255,.14); --field-hover:rgba(255,255,255,.26);
  --focus:#5b93ff; --focus-ring:rgba(91,147,255,.25);
  --accent:#1f5ff0; --accent-hover:#3a74ff; --accent-ink:#ffffff;
  --sso:rgba(255,255,255,.06); --sso-border:rgba(255,255,255,.14);
  --sep:rgba(255,255,255,.12);
  --otp-card:rgba(14,21,39,.90); --otp-border:rgba(255,255,255,.08); --otp-glow:rgba(92,108,146,.30);
  --box-bg:rgba(255,255,255,.03); --box-border:rgba(255,255,255,.09); --box-filled:rgba(255,255,255,.05);
  --box-active-border:#e8ecf5; --box-active-bg:rgba(255,255,255,.08); --digit:#f4f6fb;
  --box-glow:rgba(255,255,255,.05);
  --ok:#34d399; --ok-ink:#4ade9f; --ok-soft:rgba(52,211,153,.12); --ok-border:rgba(52,211,153,.55); --ok-badge:rgba(52,211,153,.16);
  --err:#ff6369; --err-soft:rgba(255,99,105,.12); --err-ink:#ffa3a6; --err-line:rgba(255,99,105,.30);
    --switch-off:rgba(120,120,128,.36);
  --orb-disc:rgba(255,255,255,.03); --orb-ring:rgba(255,255,255,.13); --orb-dash:rgba(255,255,255,.28); --orb-halo:rgba(255,255,255,.025);
  --p-orange:#ff8a4c; --p-blue:#6a9bff; --p-green:#4ade9f;
  color-scheme:dark;
}

/* ---------- Socle ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .35s}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.split{position:relative;overflow:hidden;min-height:100%;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr)}

/* ---------- Volet marque (toujours sombre) ---------- */
.brand{position:relative;overflow:hidden;color:#f2f5fb;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.brand-bg{position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(0,78,226,.45),transparent 70%),
             radial-gradient(45% 40% at 30% 85%,rgba(252,92,1,.22),transparent 70%),
             #01133d}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark svg{width:30px;height:auto;display:block;flex:none}
.mark span{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em}
.mark b{font-weight:600;background:linear-gradient(90deg,#22d3ee,#3b82f6 38%,#a855f7 68%,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Empilement des trois dalles */
.hero{position:relative;flex:1;display:grid;place-items:center;min-height:300px}
.hero .glow{position:absolute;width:min(70%,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.28),rgba(59,130,246,.12) 45%,transparent 70%);filter:blur(10px);opacity:.6}
.hero svg{position:relative;width:min(56%,330px);height:auto;overflow:visible;cursor:pointer}
.hero .slab{transform-box:fill-box;transform-origin:50% 100%}
.hero .float{animation:lev 6s ease-in-out infinite}
@keyframes lev{50%{transform:translateY(-8px)}}
.hero .shock{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.hero .spark{opacity:0}
.hero .floor{transform-box:fill-box;transform-origin:50% 50%}
.brand h2{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;max-width:14ch}
.brand p{margin:0;color:rgba(242,245,251,.72);max-width:38ch;font-size:15.5px}
.brand small{display:block;margin-top:28px;color:rgba(242,245,251,.45);font-size:12.5px}

/* ---------- Volet formulaire ---------- */
.side{position:relative;overflow:hidden;display:grid;place-items:center;padding:48px 24px;isolation:isolate}
.side::before,.side::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
.side::before{width:420px;height:420px;background:var(--blob-b);top:8%;right:-90px;animation:flotte 18s ease-in-out infinite alternate}
.side::after{width:340px;height:340px;background:var(--blob-a);bottom:4%;left:-60px;animation:flotte 22s ease-in-out infinite alternate-reverse}
@keyframes flotte{to{transform:translate(-40px,30px) scale(1.08)}}
.mobile-mark{display:none}

.stage{width:100%;max-width:440px}
.view{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.view[hidden]{display:block;opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px);pointer-events:none;visibility:hidden}

/* Carte verre (connexion) */
.glass{position:relative;border-radius:28px;padding:36px 34px 30px;background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 38%);mix-blend-mode:soft-light}
.glass h1{margin:0;font-size:26px;font-weight:650;letter-spacing:-.025em;line-height:1.2}
.glass .lead{margin:6px 0 26px;color:var(--ink-2);font-size:14.5px}
.field{display:block;margin-bottom:16px}
.field > span{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:550;margin-bottom:7px;color:var(--ink)}
.field > span a{font-weight:500;color:var(--ink-2);text-decoration:none}
.field > span a:hover{color:var(--ink);text-decoration:underline}
.input{position:relative}
.input input{width:100%;height:46px;border-radius:12px;padding:0 14px;background:var(--field);border:1px solid var(--field-border);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;font-size:15px}
.input input::placeholder{color:var(--ink-3)}
.input input:hover{border-color:var(--field-hover)}
.input input:focus{border-color:var(--focus);box-shadow:0 0 0 4px var(--focus-ring)}
.input .eye{position:absolute;right:6px;top:6px;width:34px;height:34px;border:0;background:none;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);cursor:pointer}
.input .eye:hover{color:var(--ink);background:var(--field)}
.input input[type=password],.input input.pw{padding-right:46px}
/* Interrupteur façon iPhone */
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink);margin:6px 0 22px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.switch small{display:block;color:var(--ink-3);font-size:12.5px}
.ios{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;border-radius:999px;background:var(--switch-off);cursor:pointer;transition:background .25s ease}
.ios::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .32s cubic-bezier(.3,1.35,.5,1),width .18s ease}
.ios:active::before{width:33px}
.ios:checked{background:var(--accent)}
.ios:checked::before{transform:translateX(20px)}
.ios:checked:active::before{transform:translateX(14px)}
.ios:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Messages (refus, blocage) */
.alert{display:none;gap:10px;align-items:flex-start;margin:-8px 0 20px;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.45;
  background:var(--err-soft);color:var(--err-ink);border:1px solid var(--err-line)}
.alert.on{display:flex;animation:entre .3s ease}
.alert svg{flex:none;margin-top:1px}
.alert b{font-variant-numeric:tabular-nums}
@keyframes entre{from{opacity:0;transform:translateY(-4px)}}
form.locked .input input,form.locked .ios{opacity:.55;pointer-events:none}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn{width:100%;height:48px;border-radius:13px;border:0;font-weight:600;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .1s,border-color .15s}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 22px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:tourne .7s linear infinite;display:none}
.btn-primary.busy .spin{display:block}
@keyframes tourne{to{transform:rotate(360deg)}}
.or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--ink-3);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--sep)}
.btn-sso{background:var(--sso);border:1px solid var(--sso-border);color:var(--ink)}
.btn-sso:hover{border-color:var(--field-hover)}
.btn-sso svg{color:var(--ink-2)}
.foot{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* ---------- Carte OTP (reprise de la vidéo) ---------- */
.otp{position:relative;overflow:hidden;border-radius:22px;background:var(--otp-card);border:1px solid var(--otp-border);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:32px 28px 34px;text-align:center;box-shadow:0 24px 60px -30px rgba(15,25,55,.30)}
.otp::before,.otp::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(30px)}
.otp::before{width:260px;height:260px;right:-120px;top:-120px;background:var(--otp-glow)}
.otp::after{width:220px;height:220px;left:-120px;bottom:-120px;background:var(--otp-glow);opacity:.7}
.otp > *{position:relative;z-index:1}

.orb{position:relative;width:176px;height:176px;margin:0 auto 22px}
.orb-halo{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,var(--orb-halo) 60%,transparent 72%);transition:background .7s}
.orb svg.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .7s}
.orb .dash{fill:none;stroke:var(--orb-dash);stroke-width:1;stroke-dasharray:3 3.2;transform-origin:88px 88px;animation:tourne 60s linear infinite;transition:stroke .7s}
.orb .ring{fill:var(--orb-disc);stroke:var(--orb-ring);stroke-width:1.4;transition:stroke .7s}
.orb canvas{position:absolute;left:50%;top:50%;width:144px;height:144px;transform:translate(-50%,-50%);border-radius:50%;transition:filter .8s ease,opacity .8s ease}
.orb-glow{position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.20),rgba(16,185,129,.06) 55%,transparent 72%);opacity:0;transition:opacity .7s}
.orb-badge{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-badge);border:1px solid var(--ok-border);color:var(--ok);opacity:0;transform:scale(.4);
  transition:opacity .35s ease .25s,transform .55s cubic-bezier(.34,1.56,.64,1) .25s}
.otp.ok .orb canvas{filter:blur(2.6px);opacity:.45}
.otp.ok .orb-glow{opacity:1}
.otp.ok .orb svg.rings{opacity:.45}
.otp.ok .orb .dash,.otp.ok .orb .ring{stroke:var(--ok-border)}
.otp.ok .orb-badge{opacity:1;transform:scale(1)}

.otp h1{margin:0 0 8px;font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;line-height:1.3}
.otp .sub{margin:0 auto 28px;max-width:34ch;color:var(--ink-2);font-size:13.5px;line-height:1.6;min-height:3.2em}
.swap{transition:opacity .25s}
.swap.out{opacity:0}

.cells{position:relative;display:flex;justify-content:center;gap:10px;margin-bottom:28px}
.cells input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent;cursor:text;z-index:2;letter-spacing:0}
.cell{position:relative;width:48px;height:56px;border-radius:12px;background:var(--box-bg);border:1px solid var(--box-border);display:grid;place-items:center;
  font-size:20px;font-weight:600;color:var(--digit);transition:border-color .18s,background .18s,box-shadow .3s,color .3s}
.cell.filled{background:var(--box-filled)}
.cell.active{border-color:var(--box-active-border);border-width:1.5px;background:var(--box-active-bg)}
.cell.active::after{content:"";width:1.5px;height:24px;background:var(--box-active-border);border-radius:2px;animation:clignote 1s steps(1) infinite}
.cell.pulse{box-shadow:0 0 0 6px var(--box-glow)}
.cell .d{display:block;animation:pop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{opacity:0;transform:scale(.45) translateY(4px)}to{opacity:1;transform:none}}
@keyframes clignote{50%{opacity:0}}
.otp.ok .cell{border-color:var(--ok-border);background:var(--ok-soft);color:var(--ok-ink)}
.otp.err .cell{border-color:var(--err);background:var(--err-soft);color:var(--err)}
.otp.err .cells{animation:secoue .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cells-off .cell.active::after{display:none}

.status{margin:0;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.otp.err .status{color:var(--err)}
.back{display:block;margin:16px auto 0;border:0;background:none;color:var(--ink-2);font-size:13.5px;cursor:pointer;padding:6px 10px;border-radius:8px}
.back:hover{color:var(--ink);text-decoration:underline}


/* ---------- Activation, codes de secours ---------- */
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 6px;margin-top:12px}
.links .back{margin:0}
.qr-frame{position:relative;width:176px;height:176px;margin:0 auto 22px;display:grid;place-items:center}
.qr-frame svg.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .7s}
.qr-frame .qdash{fill:none;stroke:var(--orb-dash);stroke-width:1;stroke-dasharray:3 3.2;animation:defile 3s linear infinite;transition:stroke .7s}
.qr-frame .qring{fill:var(--orb-disc);stroke:var(--orb-ring);stroke-width:1.4;transition:stroke .7s}
@keyframes defile{to{stroke-dashoffset:-25}}
.qr-box{position:relative;width:146px;height:146px;border-radius:14px;background:#fff;padding:8px;box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:filter .8s,opacity .8s}
.qr-box > div, .qr-box canvas, .qr-box img{width:130px!important;height:130px!important;display:block;image-rendering:pixelated}
.otp.ok .qr-box{filter:blur(2.4px);opacity:.35}
.otp.ok .qr-frame svg.rings{opacity:.5}
.otp.ok .qdash,.otp.ok .qring{stroke:var(--ok-border)}
.secret{margin:-12px auto 22px;font-size:13px;color:var(--ink-2)}
.secret summary{cursor:pointer;list-style:none;display:inline-block;padding:4px 8px;border-radius:8px}
.secret summary::-webkit-details-marker{display:none}
.secret summary:hover{color:var(--ink);text-decoration:underline}
.key{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.key code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px;line-height:1.7;letter-spacing:.08em;padding:8px 12px;border-radius:10px;background:var(--box-bg);border:1px solid var(--box-border);color:var(--ink)}
.mini-btn{height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--box-border);background:var(--box-filled);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.mini-btn:hover{border-color:var(--field-hover)}
.badge-top{width:58px;height:58px;margin:4px auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--box-active-bg);border:1px solid var(--box-border);color:var(--ink);transition:background .4s,border-color .4s,color .4s}
.otp.ok .badge-top{background:var(--ok-badge);border-color:var(--ok-border);color:var(--ok)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--box-bg);border:1px solid var(--box-border);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;letter-spacing:.06em;color:var(--ink)}
.codes li{list-style:none;padding:3px 0}
.codes-actions{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.otp .switch{text-align:left;margin:0 0 18px}
.rc{width:100%;max-width:260px;height:52px;margin:0 auto 22px;display:block;border-radius:12px;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:18px;letter-spacing:.18em;
  background:var(--box-bg);border:1px solid var(--box-border);color:var(--digit);outline:none;transition:border-color .18s,background .18s}
.rc::placeholder{color:var(--ink-3);letter-spacing:.18em}
.rc:focus{border-color:var(--box-active-border);background:var(--box-active-bg)}
.otp.err .rc{border-color:var(--err);background:var(--err-soft);color:var(--err);animation:secoue .42s cubic-bezier(.36,.07,.19,.97)}
.otp.ok .rc{border-color:var(--ok-border);background:var(--ok-soft);color:var(--ok-ink)}
.otp .btn-primary{margin-top:0}

.toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-20px);opacity:0;z-index:60;padding:10px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);font-size:14px;box-shadow:var(--glass-shadow);transition:.3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .brand{display:none}
  .side{min-height:100vh;min-height:100dvh;align-content:start;padding:28px 16px 110px}
  .mobile-mark{display:flex;justify-content:center;margin:8px 0 28px}
  .mobile-mark .mark span{color:var(--ink)}
  .glass{padding:30px 22px 24px;border-radius:24px}
  .otp{padding:28px 16px 30px}
  .cells{gap:8px}
  .cell{width:44px;height:54px}
  .hero{display:none}
}
@media (max-width:360px){.cell{width:40px;height:50px}.cells{gap:6px}}
@media (prefers-reduced-motion:reduce){
  .side::before,.side::after,.orb .dash{animation:none}
  .view,.cell,.orb canvas,.orb-badge{transition-duration:.01s}
}

/* ---------- Ajouts de l'application ---------- */
.alert.info{background:var(--box-bg);color:var(--ink);border-color:var(--box-border)}
.stage > .alert{margin:0 0 16px}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset:disabled .input input,fieldset:disabled .ios{opacity:.55}
.otp .btn-primary{margin-top:0}
.otp form{margin:0}
a.btn{text-decoration:none}
a.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;box-shadow:none}
.nojs-envoi{margin:0 auto 22px}
.lead-petit{margin:-8px 0 20px;color:var(--ink-2);font-size:14px}
a.back{text-decoration:none;display:inline-block}
a.back:hover{text-decoration:underline}