*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══════════════════════════════════════════
   TOKENS LIGHT
═══════════════════════════════════════════ */
:root{
  --navy:#0d1f3c;--navy-2:#152a4e;--navy-3:#1e3a64;
  --blue:#1a6ed4;--blue-2:#2478e8;--blue-glow:rgba(26,110,212,0.28);
  --gold:#c9a84c;--gold-2:#dbb96a;--gold-glow:rgba(201,168,76,0.2);
  --green:#16a34a;--red:#dc2626;
  --ease:cubic-bezier(0.4,0,0.2,1);--spring:cubic-bezier(0.34,1.56,0.64,1);
  --radius:16px;--radius-sm:10px;--touch:54px;
  --bg:#f7f9fc;--card:#fff;--card-border:rgba(0,0,0,0.06);
  --shadow:0 8px 48px rgba(12,26,46,0.11),0 2px 8px rgba(12,26,46,0.05);
  --text:#0c1a2e;--text-2:#2d3f5c;--text-3:#6b7a99;--text-4:#b0bcd4;
  --s1:#eef1f7;--s2:#dde3ed;--s3:#b0bcd4;
  --inp-bg:#fff;--inp-border:#dde3ed;
  --nav-bg:#f7f9fc;
  --tog-bg:rgba(255,255,255,0.08);--tog-bd:rgba(255,255,255,0.12);--tog-ic:rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════
   TOKENS DARK PREMIUM
═══════════════════════════════════════════ */
[data-theme=dark]{
  --bg:#070d18;--card:#0d1628;--card-border:rgba(201,168,76,0.13);
  --shadow:0 16px 64px rgba(0,0,0,0.7),0 2px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(201,168,76,0.07);
  --text:#e8eef8;--text-2:#b8c8e0;--text-3:#6a80a0;--text-4:#2a3d5c;
  --s1:#0f1d32;--s2:#162440;--s3:#2a3d5c;
  --inp-bg:#0a1526;--inp-border:#1e304d;
  --nav-bg:#070d18;
  --blue:#3b82f6;--blue-2:#60a5fa;--blue-glow:rgba(59,130,246,0.28);
  --gold:#dbb96a;--gold-2:#f0ce8a;--gold-glow:rgba(219,185,106,0.28);
  --green:#22c55e;--navy-2:#162440;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#070d18;--card:#0d1628;--card-border:rgba(201,168,76,0.13);
  --shadow:0 16px 64px rgba(0,0,0,0.7),0 2px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(201,168,76,0.07);
  --text:#e8eef8;--text-2:#b8c8e0;--text-3:#6a80a0;--text-4:#2a3d5c;
  --s1:#0f1d32;--s2:#162440;--s3:#2a3d5c;
  --inp-bg:#0a1526;--inp-border:#1e304d;
  --nav-bg:#070d18;
  --blue:#3b82f6;--blue-2:#60a5fa;--blue-glow:rgba(59,130,246,0.28);
  --gold:#dbb96a;--gold-2:#f0ce8a;--gold-glow:rgba(219,185,106,0.28);
  --green:#22c55e;--navy-2:#162440;
}}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;transition:background 0.4s,color 0.3s;position:relative}
.dark-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 0.5s;
  background:radial-gradient(ellipse 70% 45% at 15% -5%,rgba(59,130,246,0.1) 0%,transparent 60%),
             radial-gradient(ellipse 50% 35% at 85% 105%,rgba(219,185,106,0.09) 0%,transparent 55%)}
[data-theme=dark] .dark-ambient{opacity:1}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .dark-ambient{opacity:1}}
body>*:not(.dark-ambient){position:relative;z-index:1}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
header{background:var(--navy);height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;position:sticky;top:0;z-index:100}
header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.55),transparent)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:16px;color:var(--navy);box-shadow:0 2px 10px var(--gold-glow);flex-shrink:0}
.logo-name{font-family:'DM Serif Display',serif;font-size:20px;color:#fff}
.logo-name span{color:var(--gold)}
.hdr-right{display:flex;align-items:center;gap:10px}
.secure-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:5px 12px;font-size:11.5px;color:rgba(255,255,255,0.55)}
.sdot{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:blink 2.5s ease infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.5)}60%{opacity:0.7;box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.theme-btn{width:34px;height:34px;border:1px solid var(--tog-bd);background:var(--tog-bg);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.theme-btn:hover{background:rgba(255,255,255,0.14)}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:var(--tog-ic);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.icon-sun{display:none}.icon-moon{display:block}
[data-theme=dark] .icon-sun{display:block}[data-theme=dark] .icon-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .icon-sun{display:block}:root:not([data-theme=light]) .icon-moon{display:none}}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero{background:var(--navy);padding:36px 24px 64px;text-align:center;position:relative;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.orb1{width:500px;height:300px;background:radial-gradient(ellipse,rgba(26,110,212,0.45),transparent 70%);top:-100px;left:50%;transform:translateX(-50%)}
.orb2{width:240px;height:240px;background:radial-gradient(ellipse,rgba(201,168,76,0.22),transparent 70%);bottom:-60px;right:-40px}
.orb3{width:180px;height:180px;background:radial-gradient(ellipse,rgba(201,168,76,0.14),transparent 70%);bottom:-30px;left:-20px}
.hero-content{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.28);border-radius:20px;padding:5px 16px;font-size:11px;font-weight:500;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;animation:fadeD .6s var(--ease) both}
.hero-badge svg{width:12px;height:12px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(22px,5.5vw,40px);color:#fff;line-height:1.22;margin-bottom:8px;font-weight:400;animation:fadeD .6s var(--ease) .08s both}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:13.5px;color:rgba(255,255,255,0.4);max-width:340px;margin:0 auto 6px;line-height:1.75;font-weight:300;animation:fadeD .6s var(--ease) .14s both}
.hero-reassure{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,0.5);margin-top:8px;animation:fadeD .6s var(--ease) .2s both}
.hero-reassure svg{width:13px;height:13px;stroke:#22c55e;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
@keyframes fadeD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.stepper-wrap{margin-top:24px;animation:fadeD .6s var(--ease) .28s both}
.stepper{display:inline-flex;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:50px;padding:6px 8px}
.step{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:40px;transition:all .35s var(--ease)}
.step.active{background:rgba(255,255,255,0.11)}
.snum{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;transition:all .35s var(--ease)}
.step.todo .snum{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3)}
.step.active .snum{background:var(--blue);color:#fff;box-shadow:0 0 0 3px rgba(26,86,219,0.4)}
.step.done .snum{background:var(--green);color:#fff}
.slabel{font-size:12px;font-weight:500;color:rgba(255,255,255,0.38);transition:color .3s;white-space:nowrap}
.step.active .slabel{color:rgba(255,255,255,0.9)}
.step.done .slabel{color:rgba(255,255,255,0.45)}
.step-sep{width:20px;height:1px;background:rgba(255,255,255,0.1);flex-shrink:0}

/* ═══════════════════════════════════════════
   CONNEXION LENTE
═══════════════════════════════════════════ */
.slow-banner{display:none;background:linear-gradient(135deg,rgba(251,191,36,0.1),rgba(251,191,36,0.04));border:1px solid rgba(251,191,36,0.28);border-radius:10px;padding:11px 14px;margin-bottom:16px;gap:9px;align-items:flex-start}
.slow-banner.show{display:flex}
.slow-banner svg{width:15px;height:15px;stroke:#f59e0b;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;margin-top:1px}
.slow-banner span{font-size:12.5px;color:#b45309;line-height:1.5}
[data-theme=dark] .slow-banner span{color:#fbbf24}

/* ═══════════════════════════════════════════
   DRAFT BANNER (localStorage recovery)
═══════════════════════════════════════════ */
.draft-banner{display:none;background:linear-gradient(135deg,rgba(26,86,219,0.08),rgba(26,86,219,0.03));border:1px solid rgba(26,86,219,0.2);border-radius:10px;padding:12px 14px;margin-bottom:16px;gap:10px;align-items:center}
.draft-banner.show{display:flex}
.draft-banner svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
.draft-info{flex:1;min-width:0}
.draft-info strong{font-size:13px;font-weight:600;color:var(--text);display:block}
.draft-info span{font-size:11.5px;color:var(--text-3)}
.draft-btn{font-size:12px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.draft-btn:hover{background:rgba(26,86,219,0.08)}
.draft-dismiss{background:none;border:none;cursor:pointer;color:var(--text-3);padding:4px;display:flex;align-items:center}
.draft-dismiss svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ═══════════════════════════════════════════
   MAIN CARD
═══════════════════════════════════════════ */
main{flex:1;max-width:600px;width:100%;margin:-28px auto 40px;padding:0 16px;position:relative;z-index:10}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--card-border);animation:cardUp .5s var(--ease) .3s both;transition:background .4s,border-color .3s,box-shadow .4s}
[data-theme=dark] .card{background:linear-gradient(160deg,#0f1e35 0%,#0b1525 60%,#080f1e 100%)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .card{background:linear-gradient(160deg,#0f1e35 0%,#0b1525 60%,#080f1e 100%)}}
@keyframes cardUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   STEP PANELS
═══════════════════════════════════════════ */
.step-panel{display:none}
.step-panel.active{display:block;animation:pfwd .3s var(--ease) both}
.step-panel.back{animation:pbwd .3s var(--ease) both}
@keyframes pfwd{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes pbwd{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}

/* ═══════════════════════════════════════════
   PANEL HEADER
═══════════════════════════════════════════ */
.panel-header{padding:20px 22px 15px;border-bottom:1px solid var(--s2)}
[data-theme=dark] .panel-header{border-bottom-color:rgba(59,130,246,0.12)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .panel-header{border-bottom-color:rgba(59,130,246,0.12)}}
.panel-title{display:flex;align-items:center;gap:12px}
.pico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pico.blue{background:linear-gradient(135deg,rgba(26,86,219,0.13),rgba(59,130,246,0.05))}
.pico.gold{background:linear-gradient(135deg,rgba(201,168,76,0.15),rgba(219,185,106,0.05))}
.pico.green{background:linear-gradient(135deg,rgba(22,163,74,0.13),rgba(21,128,61,0.05))}
.pico.purple{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(109,40,217,0.05))}
[data-theme=dark] .pico.blue{background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(59,130,246,0.08));box-shadow:0 0 16px rgba(59,130,246,0.18)}
[data-theme=dark] .pico.gold{background:linear-gradient(135deg,rgba(219,185,106,0.22),rgba(219,185,106,0.08));box-shadow:0 0 16px rgba(219,185,106,0.15)}
[data-theme=dark] .pico.green{background:linear-gradient(135deg,rgba(34,197,94,0.22),rgba(34,197,94,0.08));box-shadow:0 0 16px rgba(34,197,94,0.15)}
[data-theme=dark] .pico.purple{background:linear-gradient(135deg,rgba(139,92,246,0.22),rgba(139,92,246,0.08));box-shadow:0 0 16px rgba(139,92,246,0.15)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .pico.blue{background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(59,130,246,0.08));box-shadow:0 0 16px rgba(59,130,246,0.18)}
  :root:not([data-theme=light]) .pico.gold{background:linear-gradient(135deg,rgba(219,185,106,0.22),rgba(219,185,106,0.08));box-shadow:0 0 16px rgba(219,185,106,0.15)}
  :root:not([data-theme=light]) .pico.green{background:linear-gradient(135deg,rgba(34,197,94,0.22),rgba(34,197,94,0.08));box-shadow:0 0 16px rgba(34,197,94,0.15)}
  :root:not([data-theme=light]) .pico.purple{background:linear-gradient(135deg,rgba(139,92,246,0.22),rgba(139,92,246,0.08));box-shadow:0 0 16px rgba(139,92,246,0.15)}}
.pico svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pico.blue svg{stroke:var(--blue)}.pico.gold svg{stroke:var(--gold)}.pico.green svg{stroke:var(--green)}.pico.purple svg{stroke:#8b5cf6}
.ptit h2{font-size:16px;font-weight:600;color:var(--text)}
.ptit p{font-size:12px;color:var(--text-3);margin-top:2px}
.panel-body{padding:22px}

/* ═══════════════════════════════════════════
   STEP 0 — WELCOME SCREEN
═══════════════════════════════════════════ */
.welcome-body{padding:32px 24px 28px;text-align:center}
.welcome-logo-wrap{width:72px;height:72px;border-radius:16px;overflow:hidden;background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.welcome-logo-wrap img{width:100%;height:100%;object-fit:contain;display:none}
.welcome-logo-wrap img.loaded{display:block}
.welcome-logo-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.welcome-logo-fallback svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round}
.welcome-cabinet{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:6px}
.welcome-title{font-family:'DM Serif Display',serif;font-size:22px;color:var(--text);margin-bottom:8px;font-weight:400;line-height:1.3}
.welcome-msg{font-size:14px;color:var(--text-3);line-height:1.7;margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto}
/* Checklist docs attendus */
.checklist-section{text-align:left;margin-bottom:24px}
.checklist-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.checklist-title svg{width:13px;height:13px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round}
.checklist{display:flex;flex-direction:column;gap:7px}
.checklist-item{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--s2);border-radius:9px;padding:11px 13px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.checklist-item:hover{border-color:var(--blue);background:rgba(26,86,219,0.03)}
.checklist-item.checked{background:rgba(22,163,74,0.06);border-color:rgba(22,163,74,0.25)}
.ci-box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--s3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--spring)}
.checklist-item.checked .ci-box{background:var(--green);border-color:var(--green)}
.ci-box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;opacity:0;transform:scale(0);transition:all .2s var(--spring)}
.checklist-item.checked .ci-box svg{opacity:1;transform:scale(1)}
.ci-label{font-size:13.5px;font-weight:500;color:var(--text);transition:color .2s}
.checklist-item.checked .ci-label{color:var(--text-3);text-decoration:line-through}
.checklist-progress{margin-top:10px;display:flex;align-items:center;gap:10px}
.cp-bar-wrap{flex:1;height:4px;background:var(--s2);border-radius:2px;overflow:hidden}
.cp-bar{height:100%;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:2px;width:0%;transition:width .4s var(--ease)}
.cp-txt{font-size:11px;color:var(--text-3);white-space:nowrap;font-weight:500}
.welcome-divider{height:1px;background:var(--s2);margin:0 -24px 24px}

/* ═══════════════════════════════════════════
   CONTEXT BANNER
═══════════════════════════════════════════ */
.ctx{background:linear-gradient(135deg,rgba(201,168,76,0.08),rgba(201,168,76,0.02));border:1px solid rgba(201,168,76,0.22);border-radius:12px;padding:12px 14px;margin-bottom:20px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.ctx::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--gold),var(--gold-2))}
.ctx-logo-wrap{width:38px;height:38px;flex-shrink:0;border-radius:8px;overflow:hidden;background:rgba(201,168,76,0.1);display:flex;align-items:center;justify-content:center;border:1px solid rgba(201,168,76,0.18)}
.ctx-logo-wrap img{width:100%;height:100%;object-fit:contain;display:none}
.ctx-logo-wrap img.loaded{display:block}
.ctx-logo-fallback svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round}
.ctx-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--gold);margin-bottom:3px}
.ctx-value{font-size:14px;font-weight:600;color:var(--text)}
.ctx-sub{font-size:11px;color:var(--text-3);margin-top:1px}

/* ═══════════════════════════════════════════
   FIELDS
═══════════════════════════════════════════ */
.fg{margin-bottom:16px}
.fl{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:7px}
.req{color:var(--blue);margin-left:1px}
.fw{position:relative}
.fi{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--s3);fill:none;stroke-width:1.8;stroke-linecap:round;pointer-events:none;transition:stroke .2s}
input[type=text],input[type=email]{width:100%;padding:13px 44px;border:1.5px solid var(--inp-border);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:15px;color:var(--text);background:var(--inp-bg);transition:border-color .2s,box-shadow .2s;outline:none;-webkit-appearance:none;min-height:var(--touch)}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
[data-theme=dark] input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,0.2),0 0 24px rgba(59,130,246,0.1)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,0.2),0 0 24px rgba(59,130,246,0.1)}}
input:focus~.fi{stroke:var(--blue)}
input.valid{border-color:#22c55e}
[data-theme=dark] input.valid{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.15),0 0 20px rgba(34,197,94,0.08)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) input.valid{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.15),0 0 20px rgba(34,197,94,0.08)}}
.fcheck{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#22c55e;fill:none;stroke-width:2.5;stroke-linecap:round;opacity:0;transition:opacity .25s var(--spring)}
.fcheck.show{opacity:1}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:430px){.form-row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════
   UPLOAD
═══════════════════════════════════════════ */
.upload-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mcard{position:relative;border:2px solid var(--s2);border-radius:14px;background:var(--s1);cursor:pointer;overflow:hidden;transition:all .25s var(--ease);padding:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:114px;justify-content:center;-webkit-tap-highlight-color:transparent}
.mcard::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.mcard.mfile::after{background:linear-gradient(135deg,rgba(26,86,219,0.06),transparent)}
.mcard.mcam::after{background:linear-gradient(135deg,rgba(22,163,74,0.06),transparent)}
.mcard:hover::after{opacity:1}
.mcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(12,26,46,0.12)}
.mcard.mfile:hover{border-color:var(--blue)}
.mcard.mcam:hover{border-color:var(--green)}
[data-theme=dark] .mcard.mfile:hover{border-color:#60a5fa;box-shadow:0 8px 32px rgba(59,130,246,0.2)}
[data-theme=dark] .mcard.mcam:hover{border-color:#22c55e;box-shadow:0 8px 32px rgba(34,197,94,0.2)}
.mcard:active{transform:scale(0.98)}
.mcard input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;font-size:0}
.mico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--spring);position:relative;z-index:1}
.mcard:hover .mico{transform:scale(1.1)}
.mico.blue{background:linear-gradient(135deg,rgba(26,86,219,0.14),rgba(59,130,246,0.06))}
.mico.green{background:linear-gradient(135deg,rgba(22,163,74,0.14),rgba(21,128,61,0.06))}
.mico svg{width:23px;height:23px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mico.blue svg{stroke:var(--blue)}.mico.green svg{stroke:var(--green)}
.mtitle{font-size:13px;font-weight:600;color:var(--text);position:relative;z-index:1}
.msub{font-size:11px;color:var(--text-3);line-height:1.4;position:relative;z-index:1}
.dropzone{border:2px dashed var(--s2);border-radius:12px;padding:22px;text-align:center;background:var(--s1);transition:all .2s;margin-bottom:12px;position:relative}
.dropzone.over{border-color:var(--blue);background:rgba(26,86,219,0.04);border-style:solid}
.dropzone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.drop-txt{font-size:12px;color:var(--text-3)}
.drop-txt span{color:var(--blue);font-weight:500}

/* ═══════════════════════════════════════════
   FILE LIST + COMPRESS BADGE
═══════════════════════════════════════════ */
.file-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fitem{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--s2);border-radius:10px;padding:10px 12px;position:relative;overflow:hidden;transition:opacity .25s,transform .25s var(--ease),max-height .3s var(--ease)}
.fitem.entering{animation:itemIn .28s var(--spring) both}
.fitem.removing{opacity:0;transform:scale(0.92) translateX(10px);max-height:0!important;padding:0;margin:0;border:none}
@keyframes itemIn{from{opacity:0;transform:scale(0.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.fitem::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%}
.fitem.doc::before{background:var(--blue)}.fitem.photo::before{background:var(--green)}.fitem.compressed::before{background:#8b5cf6}
.fthumb{width:40px;height:40px;border-radius:7px;object-fit:cover;flex-shrink:0;border:1px solid var(--s2)}
.ficon{width:40px;height:40px;background:rgba(26,86,219,0.09);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ficon svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round}
.finfo{flex:1;min-width:0}
.fname{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.fmeta{font-size:11px;color:var(--text-3);margin-top:2px}
.fbadge{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;flex-shrink:0;white-space:nowrap}
.fbadge.photo{background:rgba(22,163,74,0.1);color:var(--green)}
.fbadge.compressed{background:rgba(139,92,246,0.1);color:#8b5cf6}
.fbadge.locked{background:rgba(220,38,38,0.1);color:var(--red)}
.fdel{background:none;border:none;cursor:pointer;color:var(--s3);padding:7px;border-radius:7px;display:flex;align-items:center;transition:all .15s;min-width:34px;justify-content:center}
.fdel:hover{color:var(--red);background:rgba(220,38,38,0.07)}
.fdel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ═══════════════════════════════════════════
   CHECKLIST MINI (step 2 référence)
═══════════════════════════════════════════ */
.checklist-mini{background:var(--s1);border:1px solid var(--s2);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.checklist-mini-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-3);margin-bottom:8px}
.checklist-mini-items{display:flex;flex-wrap:wrap;gap:6px}
.cmi{display:inline-flex;align-items:center;gap:5px;background:var(--s2);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--text-3);transition:all .2s}
.cmi.done{background:rgba(22,163,74,0.1);color:var(--green)}
.cmi svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}

/* ═══════════════════════════════════════════
   CGU — 2 CASES RGPD GRANULAIRE
═══════════════════════════════════════════ */
.cgu-wrap{background:linear-gradient(135deg,var(--s1),rgba(238,241,247,0.3));border:1.5px solid var(--s2);border-radius:12px;padding:15px;margin-bottom:18px}
.cgu-row{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.cgu-row:last-child{margin-bottom:0}
.cgu-row+.cgu-row{padding-top:11px;border-top:1px solid var(--s2)}
.cgu-check{width:22px;height:22px;flex-shrink:0;cursor:pointer;accent-color:var(--blue);margin-top:1px}
.cgu-txt{font-size:13.5px;color:var(--text-2);line-height:1.55;cursor:pointer}
.cgu-txt a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(26,86,219,0.3)}
.cgu-txt a:hover{border-color:var(--blue)}
.cgu-optional{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin-left:5px;vertical-align:middle}
.rgpd-row{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--s2)}
.rgpd-row svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;stroke:var(--s3);fill:none;stroke-width:1.8;stroke-linecap:round}
.rgpd-txt{font-size:11.5px;color:var(--text-3);line-height:1.65}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-p{width:100%;padding:16px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--touch);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent);opacity:0;transition:opacity .2s}
.btn-p:hover::after{opacity:1}
.btn-p:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 28px rgba(12,26,46,0.3)}
.btn-p:active:not(:disabled){transform:scale(0.985)}
.btn-p:disabled{opacity:0.36;cursor:not-allowed}
.btn-p svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
[data-theme=dark] .btn-p:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#1d4ed8,#2563eb);box-shadow:0 4px 20px rgba(37,99,235,0.35)}
[data-theme=dark] .btn-p:hover:not(:disabled){box-shadow:0 8px 32px rgba(37,99,235,0.5),0 0 0 1px rgba(96,165,250,0.2)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .btn-p:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#1d4ed8,#2563eb);box-shadow:0 4px 20px rgba(37,99,235,0.35)}
  :root:not([data-theme=light]) .btn-p:hover:not(:disabled){box-shadow:0 8px 32px rgba(37,99,235,0.5),0 0 0 1px rgba(96,165,250,0.2)}}
.btn-s{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;background:var(--s1);border:1.5px solid var(--s2);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .2s;min-height:46px;-webkit-tap-highlight-color:transparent}
.btn-s:hover{background:var(--s2)}
.btn-s svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   PROGRESS
═══════════════════════════════════════════ */
.progress-wrap{display:none;margin-top:14px}
.progress-label{display:flex;justify-content:space-between;margin-bottom:7px}
.progress-label-txt{font-size:12px;color:var(--text-3)}
.progress-label-count{font-size:12px;font-weight:600;color:var(--text)}
.progress-track{height:4px;background:var(--s2);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2),#60a5fa);background-size:200% 100%;animation:shimmer 1.5s linear infinite;border-radius:2px;width:0%;transition:width .4s}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.retry-indicator{font-size:11px;color:#f59e0b;margin-top:5px;display:none}
.retry-indicator.show{display:block}
.errmsg{display:none;background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.18);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--red);margin-top:10px;gap:8px;align-items:flex-start}
.errmsg.show{display:flex}
.errmsg svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round}

/* ═══════════════════════════════════════════
   STEP NAV
═══════════════════════════════════════════ */
.step-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--s2);background:var(--nav-bg);transition:background .3s}
.step-nav-info{font-size:12px;color:var(--text-3)}
.step-nav-info strong{color:var(--text);font-weight:600}

/* ═══════════════════════════════════════════
   SUMMARY
═══════════════════════════════════════════ */
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:430px){.sum-grid{grid-template-columns:1fr}}
.sum-item{background:var(--s1);border:1px solid var(--s2);border-radius:10px;padding:12px 14px}
.sum-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;color:var(--text-3);margin-bottom:4px}
.sum-val{font-size:14px;font-weight:500;color:var(--text);word-break:break-all}
.sum-docs{background:var(--s1);border:1px solid var(--s2);border-radius:10px;padding:13px 14px;margin-bottom:16px}
.sum-doc-row{display:flex;align-items:center;gap:9px;padding:5px 0}
.sum-doc-row+.sum-doc-row{border-top:1px solid var(--s2);padding-top:9px;margin-top:4px}
.sdthumb{width:30px;height:30px;border-radius:6px;object-fit:cover;border:1px solid var(--s2);flex-shrink:0}
.sdicon{width:30px;height:30px;background:rgba(26,86,219,0.09);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sdicon svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round}
.sdname{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sdsize{font-size:11px;color:var(--text-3);white-space:nowrap}

/* ═══════════════════════════════════════════
   SUCCESS
═══════════════════════════════════════════ */
.success-screen{display:none;padding:46px 22px 36px;text-align:center}
.success-ring{width:84px;height:84px;margin:0 auto 20px;animation:popIn .5s var(--spring) both}
[data-theme=dark] .success-ring{filter:drop-shadow(0 0 24px rgba(34,197,94,0.5))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .success-ring{filter:drop-shadow(0 0 24px rgba(34,197,94,0.5))}}
@keyframes popIn{from{opacity:0;transform:scale(0.4)}to{opacity:1;transform:scale(1)}}
.success-ring svg{width:84px;height:84px}
.ring-bg{stroke:rgba(22,163,74,0.12);fill:none;stroke-width:4}
.ring-fg{stroke:var(--green);fill:none;stroke-width:4;stroke-dasharray:239;stroke-dashoffset:239;animation:drawRing .7s ease .2s forwards}
@keyframes drawRing{to{stroke-dashoffset:0}}
.ring-check{stroke:var(--green);fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:52;stroke-dashoffset:52;animation:drawCheck .45s ease .75s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.success-screen h2{font-family:'DM Serif Display',serif;font-size:26px;color:var(--text);margin-bottom:10px;font-weight:400;animation:fadeD .4s var(--ease) .7s both}
.success-screen .sub{font-size:14px;color:var(--text-3);line-height:1.75;margin-bottom:10px;animation:fadeD .4s var(--ease) .78s both}
.success-screen .sub strong{color:var(--text);font-weight:600}
.success-ref{display:inline-flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--s2);border-radius:9px;padding:10px 18px;font-size:12px;color:var(--text-3);margin-bottom:22px;font-family:monospace;letter-spacing:0.6px;cursor:pointer;transition:background .15s;animation:fadeD .4s var(--ease) .86s both}
.success-ref:hover{background:var(--s2)}
.success-ref svg{width:13px;height:13px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round}
.success-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;animation:fadeD .4s var(--ease) .94s both}

/* ═══════════════════════════════════════════
   SEC STRIP + FOOTER
═══════════════════════════════════════════ */
.sec-strip{background:var(--navy);border-top:1px solid rgba(255,255,255,0.05);padding:13px 20px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.sec-item{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,0.36);transition:color .2s}
.sec-item:hover{color:rgba(255,255,255,0.6)}
.sec-item svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round}
footer{background:var(--navy);border-top:1px solid rgba(255,255,255,0.04);padding:18px 24px;text-align:center}
.footer-inner{max-width:600px;margin:0 auto}
.footer-brand{font-family:'DM Serif Display',serif;font-size:13px;color:rgba(255,255,255,0.3);margin-bottom:8px}
.footer-brand span{color:var(--gold)}
.footer-links{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.footer-links a{font-size:11px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color .2s;padding:2px 6px}
.footer-links a:hover{color:rgba(255,255,255,0.6)}
.footer-sep{color:rgba(255,255,255,0.15);font-size:10px}
.footer-legal{font-size:10.5px;color:rgba(255,255,255,0.2);line-height:1.7;max-width:480px;margin:0 auto}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--navy);color:#fff;padding:11px 22px;border-radius:9px;font-size:13px;font-weight:500;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;z-index:400;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[data-theme=dark] .toast{background:#162440;border:1px solid rgba(201,168,76,0.15)}

/* ═══════════════════════════════════════════
   OVERLAY / SHEET
═══════════════════════════════════════════ */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-height:88vh;overflow-y:auto;animation:slideUp .32s var(--ease);border:1px solid var(--card-border);border-bottom:none}
@media(min-width:560px){.overlay{align-items:center;padding:20px}.sheet{border-radius:16px;max-width:500px;max-height:82vh;border:1px solid var(--card-border)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:36px;height:4px;background:var(--s2);border-radius:2px;margin:12px auto 0}
.sheet-head{padding:16px 20px;border-bottom:1px solid var(--s2);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--card);z-index:1}
.sheet-head h3{font-size:15px;font-weight:600;color:var(--text)}
.sheet-close{width:30px;height:30px;background:var(--s1);border:none;border-radius:50%;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .15s}
.sheet-close:hover{background:var(--s2)}
.sheet-body{padding:18px 20px 44px;font-size:13px;color:var(--text-2);line-height:1.8}
.sheet-body h4{font-size:13px;font-weight:600;color:var(--text);margin:18px 0 6px}
.sheet-body h4:first-child{margin-top:0}
.sheet-body p{margin-bottom:8px}

@media print{
  header,footer,.sec-strip,.step-nav,.hero,.dark-ambient{display:none!important}
  body{background:#fff!important;color:#000!important}
  .card{box-shadow:none!important;border:1px solid #ccc!important;border-radius:8px!important}
  .success-screen{display:block!important;padding:30px!important}
  .step-panel,.panel-header,.panel-body{display:none!important}
}