/* WiColis Business — feuille de style du portail.
   Reprise À LA LETTRE du prototype Claude Design « WiColis Business prototype » (projet « WiColis ») : styles de la
   page racine puis des sept composants. Générée depuis la planche : une retouche se fait d'abord dans le prototype.
   Seules différences : les sélecteurs propres au moteur de la planche (.sc-host) sont résolus, et les polices sont
   servies par le portail lui-même (CSP « font-src 'self' »). */

@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ===== Page racine du prototype ===== */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}

    body{margin:0;background:#F4F7FB;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:#0F172A;font-size:14px;line-height:1.45;min-width:1280px}
    a{color:#2563EB;text-decoration:none;font-weight:600;cursor:pointer}
    a:hover{color:#0A2C63}
    .jk{font-family:'Plus Jakarta Sans','Inter',sans-serif}
    .tn{font-variant-numeric:tabular-nums}
    .mono{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:12.5px}
    .fx{display:flex}.col{flex-direction:column}.ac{align-items:center}.as{align-items:flex-start}.ae{align-items:flex-end}.jb{justify-content:space-between}.jc{justify-content:center}.wr{flex-wrap:wrap}.f1{flex:1 1 0;min-width:0}
    .g4p{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}
    .grid{display:grid;gap:16px}.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .mu{color:#334155}.ink{color:#0F172A}.sm{font-size:12.5px}.xs{font-size:12px}.b6{font-weight:600}.blk{display:block}.r{text-align:right;justify-self:end}
    .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
    .i12{width:12px;height:12px}.i14{width:14px;height:14px}.i18{width:18px;height:18px}.i20{width:20px;height:20px}
    .kick{display:flex;align-items:center;gap:12px;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#001A49}
    .kick img{height:28px;width:auto;display:block}
    .lk{cursor:pointer}

    /* Mouvement : répondre au geste, entrer en cascade (six rangs au plus), savoir disparaître.
       Les entrées se jouent en « backwards » : une fois finies, elles ne laissent ni transformation ni
       opacité sur l’élément, qui sinon garderait son propre plan et passerait par-dessus les menus voisins. */
    @keyframes wcbIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
    @keyframes pgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes fadeOut{from{opacity:1}to{opacity:0}}
    @keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
    @keyframes popOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.97)}}
    @keyframes drIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    @keyframes drOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(40px)}}
    @keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
    @keyframes grow{from{transform:scaleX(0)}}
    @keyframes rise{from{transform:scaleY(0)}}
    @keyframes draw{from{stroke-dashoffset:420}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes toastT{from{transform:scaleX(1)}to{transform:scaleX(0)}}
    @keyframes flash{0%{background:#EAF9EF}100%{background:transparent}}
    @keyframes ckPop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
    @keyframes dot3{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
    @keyframes ringDraw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
    @keyframes chkDraw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
    @keyframes halo{0%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}100%{box-shadow:0 0 0 22px rgba(22,163,74,0)}}
    @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
    .page > *,.proto > *{animation:pgIn .46s cubic-bezier(.2,.75,.25,1) backwards}
    .page > *:nth-child(2){animation-delay:.04s}.page > *:nth-child(3){animation-delay:.08s}.page > *:nth-child(4){animation-delay:.12s}.page > *:nth-child(5){animation-delay:.16s}.page > *:nth-child(n+6){animation-delay:.2s}
    .boot{min-height:100vh;display:grid;place-items:center;background:#001A49}
    .boot-b{width:180px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:22px}
    .boot-b i{display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,#14A8FF,#22C55E);animation:shimmer 1.2s linear infinite;background-size:200% 100%}

    .app{display:flex;min-height:100vh;position:relative;background:radial-gradient(50% 28% at 92% 0%,rgba(37,99,235,.10),rgba(37,99,235,0) 70%),#F4F7FB}
    .side{width:252px;flex:none;margin:14px 0 14px 14px;border-radius:26px;display:flex;flex-direction:column;gap:16px;padding:20px 12px 14px;color:#fff;position:sticky;top:14px;height:calc(100vh - 28px);align-self:flex-start;z-index:6;background:radial-gradient(120% 40% at 0% 0%,rgba(37,99,235,.55),rgba(37,99,235,0) 70%),radial-gradient(90% 30% at 100% 100%,rgba(20,168,255,.2),rgba(20,168,255,0) 70%),#001A49;box-shadow:0 30px 60px -30px rgba(0,26,73,.7);animation:fadeIn .4s backwards}
    .brand{display:flex;align-items:center;gap:10px;padding:2px 10px;cursor:pointer}
    .brand img{height:26px;width:auto;display:block}
    .biz{height:22px;padding:0 9px;border-radius:11px;box-shadow:inset 0 0 0 1px #14A8FF;color:#fff;font:700 10px/22px 'Plus Jakarta Sans',sans-serif;letter-spacing:1.6px}
    .org{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;transition:background .15s,transform .12s;width:100%}
    .org:hover{background:rgba(255,255,255,.11)}.org:active{transform:scale(.97)}
    .org-av{width:36px;height:36px;border-radius:11px;background:#fff;color:#001A49;display:grid;place-items:center;font:800 13px 'Plus Jakarta Sans',sans-serif;flex:none}
    .org-n{display:block;font-size:13.5px;font-weight:600}
    .org-p{display:block;font-size:11.5px;color:#CBD5E1;margin-top:1px}
    .nav{flex:1;display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;position:relative;scrollbar-width:none;scroll-behavior:smooth}
    .nav-ind{position:absolute;left:0;right:0;top:0;height:40px;border-radius:13px;background:linear-gradient(120deg,#086CFF,#2563EB);box-shadow:0 12px 24px -12px rgba(8,108,255,.95);opacity:0;pointer-events:none;z-index:0}
    .nav-ind.rdy{transition:transform .42s cubic-bezier(.3,1.3,.5,1),height .2s,opacity .2s}
    .nav-t{padding:12px 12px 6px;font-size:10.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#CBD5E1;position:relative;z-index:1}
    .ni{min-height:40px;border-radius:13px;color:#CBD5E1;display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,transform .12s;position:relative;z-index:1}
    .ni:hover{background:rgba(255,255,255,.07);color:#fff}
    .ni:active{transform:scale(.96)}
    .ni.on{color:#fff;background:transparent}
    .ni-c{margin-left:auto;min-width:26px;height:20px;padding:0 7px;border-radius:10px;background:rgba(255,255,255,.14);font-size:11px;font-weight:600;display:grid;place-items:center;color:#fff}
    .help{border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.07);font-size:12px;line-height:1.45;color:#CBD5E1;display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:background .15s,transform .12s}
    .help:hover{background:rgba(255,255,255,.12)}.help:active{transform:scale(.97)}
    .help b{display:block;color:#fff;font-size:13px;font-weight:600}
    .help .i{color:#22C55E;margin-top:2px}
    .me{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:14px;cursor:pointer;width:100%;transition:background .15s}
    .me:hover{background:rgba(255,255,255,.07)}
    .me-av{width:36px;height:36px;border-radius:18px;background:#2563EB;display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none;position:relative}
    .me-av::after{content:'';position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:5px;background:#22C55E;box-shadow:0 0 0 2px #001A49}
    .me-n{display:block;font-size:13px;font-weight:600}
    .me-r{display:block;font-size:11.5px;color:#CBD5E1}

    .main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
    .top{height:84px;display:flex;align-items:center;gap:12px;padding:0 28px 0 32px;position:sticky;top:0;z-index:5;background:rgba(244,247,251,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    .crumb{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;color:#334155;min-width:0;flex-wrap:wrap}
    .crumb b{color:#0F172A;font-weight:600}
    .cmd{height:44px;width:420px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px #64748B,0 14px 30px -20px rgba(0,26,73,.45);display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;font-size:13.5px;color:#334155;cursor:text;transition:box-shadow .2s,transform .12s}
    .cmd:hover{box-shadow:inset 0 0 0 1.5px #2563EB,0 18px 34px -20px rgba(37,99,235,.55)}.cmd:active{transform:scale(.99)}
    .cmd-t{flex:1;white-space:nowrap}
    .kbd{height:26px;padding:0 9px;border-radius:13px;background:#F1F5F9;font-size:11px;font-weight:600;display:inline-grid;place-items:center;color:#334155;flex:none;white-space:nowrap}
    .ib{width:44px;height:44px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px #64748B;display:grid;place-items:center;position:relative;color:#0F172A;cursor:pointer;transition:transform .12s,background .15s}
    .ib:hover{background:#F8FAFC}.ib:active{transform:scale(.94)}
    .ib i{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:5px;background:#DC2626;box-shadow:0 0 0 2px #fff;animation:halo 2.4s ease-out infinite}
    .page{padding:0 28px 40px 32px;display:flex;flex-direction:column;gap:20px}
    .ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .ttl{font:800 32px/1.12 'Plus Jakarta Sans',sans-serif;letter-spacing:-1.1px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .ttl .bdg{font:600 11.5px/1 'Inter',sans-serif;letter-spacing:0}
    .ph-s{margin-top:8px;font-size:14px;color:#334155}
    .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

    .ddw{position:relative;display:inline-flex}
    .ddw.blk{display:flex}
    .menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:248px;max-height:380px;overflow:auto;background:#fff;color:#0F172A;border-radius:18px;padding:6px;box-shadow:0 30px 60px -24px rgba(0,26,73,.5),0 0 0 1px rgba(0,26,73,.08);animation:menuIn .16s cubic-bezier(.2,.8,.2,1) both;transform-origin:top left;text-align:left}
    .menu.r{left:auto;right:0;transform-origin:top right}
    .menu.up{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left}
    .menu-org{width:240px}.menu-me{width:240px}.menu-pick{min-width:260px}.menu-role{min-width:290px}
    .mi{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}
    .mi:hover{background:#F1F5F9}.mi:active{transform:scale(.98)}
    .mi .i{color:#334155}
    .mi.on{font-weight:600}.mi.dg,.mi.dg .i{color:#DC2626}.mi.dis{opacity:.5;cursor:default}
    .mi-s{display:block;font-size:11.5px;color:#334155;font-weight:400;margin-top:1px}
    .mi-ck{color:#2563EB!important}
    .mi-sep{height:1px;background:#EEF2F6;margin:6px 4px;padding:0;pointer-events:none}
    .np{width:400px;padding:0}
    .np-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px}
    .nt{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid #EEF2F6;cursor:pointer;transition:background .12s;position:relative}
    .nt:hover{background:#F8FAFC}
    .nt.un{background:#F6FAFF}
    .nt.un::after{content:'';position:absolute;right:16px;top:18px;width:8px;height:8px;border-radius:4px;background:#2563EB}

    .toast{position:fixed;bottom:24px;left:298px;width:440px;z-index:70;background:#fff;border-radius:18px;padding:14px 12px 14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 26px 50px -22px rgba(0,26,73,.55),inset 0 0 0 1.5px #16A34A;animation:popIn .28s cubic-bezier(.2,.9,.3,1.2) both;overflow:hidden}
    .toast.tk-e{box-shadow:0 26px 50px -22px rgba(0,26,73,.55),inset 0 0 0 1.5px #DC2626}
    .toast.tk-i{box-shadow:0 26px 50px -22px rgba(0,26,73,.55),inset 0 0 0 1.5px #2563EB}
    .toast-p{position:absolute;left:0;right:0;bottom:0;height:3px;background:#16A34A;transform-origin:left;animation:toastT 4.2s linear both;opacity:.6}
    .tk-e .toast-p{background:#DC2626}.tk-i .toast-p{background:#2563EB}.toast.long .toast-p{animation-duration:6.5s}
    .noapp .toast{left:50%;margin-left:-220px}
    .toast-x{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;color:#334155;flex:none;cursor:pointer;transition:background .12s}
    .toast-x:hover{background:#F1F5F9}
    .ovl{position:fixed;inset:0;z-index:60;background:rgba(0,26,73,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:76px 20px 20px;animation:fadeIn .2s both}
    .ovl.out{animation:fadeOut .17s both}
    .ovl.dr{justify-content:flex-end;align-items:stretch;padding:14px;background:rgba(0,26,73,.28)}
    .modal{width:600px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;background:#fff;border-radius:28px;box-shadow:0 50px 100px -30px rgba(0,26,73,.7);overflow:hidden;animation:popIn .3s cubic-bezier(.16,1,.3,1) both}
    .modal.m-sm{width:460px}.modal.m-lg{width:780px}
    .ovl.out .modal{animation:popOut .17s both}
    .drawer{width:520px;display:flex;flex-direction:column;background:#fff;border-radius:26px;box-shadow:0 40px 90px -30px rgba(0,26,73,.7);overflow:hidden;animation:drIn .34s cubic-bezier(.16,1,.3,1) both}
    .ovl.out .drawer{animation:drOut .17s both}
    .md-h{display:flex;align-items:flex-start;gap:14px;padding:24px 20px 0 26px}
    .md-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:#EAF4FF;color:#2563EB}
    .md-ic.w{background:#FFF7ED;color:#D97706}.md-ic.e{background:#FEF2F2;color:#DC2626}
    .md-t{font:800 21px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
    .md-t .bdg{font:600 11.5px/1 'Inter',sans-serif}
    .md-b{padding:20px 26px 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:auto;flex:1;min-height:0;align-content:start}
    .drawer .md-b{padding-top:18px}
    .ob{grid-column:1/-1;min-width:0;display:flex;flex-direction:column;gap:8px}
    .ob.half{grid-column:auto}
    .md-f{display:flex;align-items:center;gap:10px;padding:14px 20px 14px 26px;background:#F6F8FB;flex:none}
    .pf{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#F6F8FB;transition:background .15s}
    .pf.lk:hover{background:#EEF3F9}
    .pf.add{background:#fff;box-shadow:inset 0 0 0 1.5px #64748B;justify-content:center;cursor:pointer;min-height:44px;color:#0F172A;transition:transform .12s,box-shadow .15s}
    .pf.add:hover{box-shadow:inset 0 0 0 1.5px #2563EB}.pf.add:active{transform:scale(.98)}
    .upb{height:5px;border-radius:3px;background:#E2E8F0;overflow:hidden;margin-top:6px}
    .upb i{display:block;height:100%;background:linear-gradient(90deg,#086CFF,#14A8FF);border-radius:3px;transition:width .2s}

    .btn{height:44px;padding:0 20px;border-radius:22px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;transition:transform .12s,background .15s,box-shadow .2s,filter .15s;user-select:none}
    .btn:active{transform:scale(.96)}
    .bp{background:#2563EB;color:#fff;box-shadow:0 14px 26px -14px rgba(37,99,235,.95)}
    .bp:hover{background:#0A2C63}
    .bg{background:linear-gradient(120deg,#086CFF,#2563EB 55%,#0A2C63);color:#fff;box-shadow:0 16px 30px -14px rgba(8,108,255,.9)}
    .bg:hover{filter:brightness(1.08);box-shadow:0 20px 34px -14px rgba(8,108,255,1)}
    .bs{background:#fff;color:#0F172A;box-shadow:inset 0 0 0 1px #64748B}
    .bs:hover{background:#F8FAFC;box-shadow:inset 0 0 0 1.5px #0F172A}
    .bw{background:#fff;color:#001A49;box-shadow:0 14px 26px -16px rgba(0,0,0,.5)}
    .bw:hover{background:#F3F8FF}
    .bgl{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
    .bgl:hover{background:rgba(255,255,255,.18)}
    .bok{background:#16A34A;color:#fff;box-shadow:0 14px 26px -14px rgba(22,163,74,.9)}
    .bdanger{background:#DC2626;color:#fff;box-shadow:0 14px 26px -14px rgba(220,38,38,.8)}
    .bdanger:hover{background:#B91C1C}
    .dis{background:#E2E8F0;color:#334155;box-shadow:none;cursor:not-allowed}
    .dis:active{transform:none}.dis:hover{filter:none;background:#E2E8F0}
    .bsm{height:34px;padding:0 14px;font-size:12.5px;border-radius:17px}
    .blg{height:52px;border-radius:26px;font-size:15px;width:100%}
    .spin{width:16px;height:16px;border-radius:8px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;flex:none}
    .bs .spin,.bw .spin{border-color:rgba(15,23,42,.2);border-top-color:#0F172A}

    .card{background:#fff;border-radius:22px;box-shadow:0 1px 2px rgba(0,26,73,.04),0 14px 34px -18px rgba(0,26,73,.2);min-width:0;transition:transform .18s,box-shadow .18s}
    .card.lk:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,26,73,.04),0 22px 40px -18px rgba(0,26,73,.3)}
    .card.lk:active{transform:scale(.985)}
    .ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0;flex-wrap:wrap}
    .ct{font:700 16.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.25px}
    .cs{font-size:12.5px;color:#334155;margin-top:3px}
    .cb{padding:16px 22px 22px}
    .dv{height:1px;background:#EEF2F6}
    .navyc{color:#fff;background:radial-gradient(90% 70% at 100% 0%,rgba(37,99,235,.55),rgba(37,99,235,0) 65%),radial-gradient(60% 60% at 0% 100%,rgba(20,168,255,.16),rgba(20,168,255,0) 70%),#001A49;box-shadow:0 30px 60px -30px rgba(0,26,73,.65)}
    .navyc .mu{color:#CBD5E1}
    .box{border-radius:16px;padding:14px 16px;background:#F6F8FB}
    .bx-i{background:#EAF4FF}
    .paper{background:#fff;box-shadow:inset 0 0 0 1px #E2E8F0;padding:20px 22px}
    .dkbox{border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
    .lab{font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:#334155}
    .tot{font:800 24px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.6px}
    .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0}
    .kv > span{color:#334155}
    .kv b{font-weight:600;text-align:right}
    .kv.tl2{border-top:1px solid #DCE3EC;margin-top:4px;padding-top:10px}
    .kv.tl2 > span{color:#0F172A;font-weight:600}

    .bdg{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:11.5px;font-weight:600;white-space:nowrap;color:#0F172A;background:#F1F5F9;flex:none}
    .bdg i{width:6px;height:6px;border-radius:3px;background:#64748B;display:block;flex:none}
    .b-i{background:#EAF4FF}.b-i i{background:#2563EB}
    .b-s{background:#EAF9EF}.b-s i{background:#16A34A}
    .b-w{background:#fff;box-shadow:inset 0 0 0 1px #D97706}.b-w i{background:#D97706}
    .b-e{background:#fff;box-shadow:inset 0 0 0 1px #DC2626}.b-e i{background:#DC2626}
    .b-d{background:#001A49;color:#fff}.b-d i{background:#14A8FF}
    .on-w{background:#fff}

    .th{display:grid;align-items:center;gap:14px;padding:10px 22px;background:#F6F8FB;font-size:11.5px;font-weight:600;color:#334155;letter-spacing:.2px}
    .tr{display:grid;align-items:center;gap:14px;padding:13px 22px;border-top:1px solid #EEF2F6;font-size:13px;transition:background .15s;animation:fadeIn .3s backwards}
    .tr:hover{background:#F8FAFC}
    .tr.sel{background:#F3F8FF}
    .tr.lk{cursor:pointer}.tr.lk:active{background:#EEF4FF}
    .tr.flash{animation:flash 1.2s ease-out backwards}
    .ck{width:18px;height:18px;border-radius:6px;box-shadow:inset 0 0 0 1.5px #64748B;background:#fff;display:grid;place-items:center;color:#fff;flex:none;cursor:pointer;transition:background .15s,box-shadow .15s,transform .12s}
    .ck:active{transform:scale(.85)}
    .ck svg{opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
    .ck.on,.ck.part{background:#2563EB;box-shadow:none}
    .ck.on svg,.ck.part svg{opacity:1;transform:none}
    .ck.off{opacity:.35;cursor:default}
    .pc{min-height:28px;padding:4px 10px;border-radius:9px;background:#F1F5F9;font-size:12px;display:inline-flex;align-items:center;gap:6px}

    .fl{font-size:12.5px;font-weight:600;color:#0F172A}
    .in{min-height:48px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #64748B;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px;color:#0F172A;transition:box-shadow .15s}
    .in:focus-within{box-shadow:inset 0 0 0 2px #2563EB,0 0 0 5px rgba(37,99,235,.12)}
    .in.foc{box-shadow:inset 0 0 0 2px #2563EB,0 0 0 5px rgba(37,99,235,.12)}
    .in.ok{box-shadow:inset 0 0 0 1.5px #16A34A,0 0 0 5px rgba(22,163,74,.1)}
    .in.bad{box-shadow:inset 0 0 0 1.5px #DC2626}
    .in.ro{background:#F6F8FB}
    .in.big .inp{font:800 20px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.3px}
    .in.mono .inp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
    .inp{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:12px 0;resize:none}
    textarea.inp{line-height:1.5}
    .inp::placeholder{color:#64748B}
    .suf{color:#334155;font-size:13px;white-space:nowrap}
    .hint{font-size:12px;color:#334155}
    .chip{min-height:38px;padding:4px 15px;border-radius:19px;background:#fff;box-shadow:inset 0 0 0 1px #64748B;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;cursor:pointer;transition:transform .12s,background .18s,color .18s,box-shadow .18s;user-select:none}
    .chip:hover{box-shadow:inset 0 0 0 1.5px #0F172A}
    .chip:active{transform:scale(.96)}
    .chip.on{background:#001A49;color:#fff;box-shadow:0 10px 20px -12px rgba(0,26,73,.8)}
    .cc{width:24px;height:24px;border-radius:12px;background:#F1F5F9;color:#0F172A;display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:.3px;flex:none}
    .chip.on .cc{background:#2563EB;color:#fff}
    .chip-n{min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:#F1F5F9;color:#0F172A;font-size:11px;font-weight:600;display:grid;place-items:center}
    .chip.on .chip-n{background:#2563EB;color:#fff}
    .segw{display:inline-flex;gap:2px;padding:4px;background:#EEF2F6;border-radius:15px}
    .segp{background:#fff;box-shadow:0 10px 24px -18px rgba(0,26,73,.4)}
    .sg{min-height:34px;padding:0 14px;border-radius:11px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;color:#334155;cursor:pointer;transition:background .2s,color .2s,transform .12s;user-select:none;white-space:nowrap}
    .sg:hover{color:#0F172A}.sg:active{transform:scale(.95)}
    .sg.on{background:#001A49;color:#fff;box-shadow:0 8px 16px -10px rgba(0,26,73,.8)}
    .sg-c{font-size:11px;padding:1px 7px;border-radius:9px;background:rgba(0,26,73,.08)}
    .sg.on .sg-c{background:rgba(255,255,255,.18)}
    .tabs{display:flex;gap:6px;flex-wrap:wrap}
    .tab{height:38px;padding:0 14px;border-radius:19px;font-size:13px;font-weight:600;color:#334155;display:flex;gap:8px;align-items:center;cursor:pointer;transition:background .2s,color .2s,transform .12s}
    .tab:hover{background:#E9EEF5}.tab:active{transform:scale(.95)}
    .tab.on{background:#001A49;color:#fff}
    .tab-c{height:20px;min-width:24px;padding:0 7px;border-radius:10px;background:#E2E8F0;font-size:11px;display:grid;place-items:center;color:#0F172A}
    .tab.on .tab-c{background:#2563EB;color:#fff}
    .tg{width:44px;height:26px;border-radius:13px;background:#CBD5E1;position:relative;flex:none;cursor:pointer;transition:background .2s}
    .tg::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,26,73,.25);transition:transform .28s cubic-bezier(.3,1.4,.5,1)}
    .tg.on{background:#2563EB}
    .tg.on::after{transform:translateX(18px)}
    .tg:active::after{width:24px}
    .av{width:38px;height:38px;border-radius:19px;background:#EAF4FF;color:#001A49;display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none}
    .sq{border-radius:12px}
    .avl{width:50px;height:50px;border-radius:16px;font:800 15px 'Plus Jakarta Sans',sans-serif}
    .dot{width:8px;height:8px;border-radius:4px;display:block;flex:none}
    .trk{height:8px;border-radius:4px;background:#EEF2F6;overflow:hidden;display:flex}
    .trk i{display:block;height:100%;border-radius:4px;background:#2563EB;transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards .12s;transition:width .5s cubic-bezier(.2,.8,.2,1)}
    .ph-img{border-radius:14px;background:repeating-linear-gradient(135deg,#F1F5F9 0 8px,#E2E8F0 8px 16px);display:grid;place-items:center;font:500 11px ui-monospace,Menlo,monospace;color:#334155;text-align:center;padding:8px}
    .ph-img.lk{cursor:zoom-in;transition:transform .15s,box-shadow .15s}.ph-img.lk:hover{transform:scale(1.03);box-shadow:0 12px 24px -14px rgba(0,26,73,.5)}
    .note{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:16px;background:#EAF4FF;font-size:13px;line-height:1.5;color:#0F172A}
    .note .i{color:#2563EB;margin-top:2px}
    .n-w{background:#FFF7ED}.n-w .i{color:#D97706}.n-e{background:#FEF2F2}.n-e .i{color:#DC2626}.n-s{background:#EAF9EF}.n-s .i{color:#16A34A}
    .stp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .sp{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#334155}
    .sp.lk{cursor:pointer}.sp.lk:hover .sp-n{box-shadow:0 0 0 4px rgba(37,99,235,.2)}
    .sp-n{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px #64748B;font-size:12px;color:#0F172A;transition:box-shadow .2s,background .2s}
    .sp.done .sp-n{background:#2563EB;box-shadow:none;color:#fff}
    .sp.on{color:#0F172A}
    .sp.on .sp-n{background:#001A49;color:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.16)}
    .sp-l{width:32px;height:2px;border-radius:1px;background:#CBD5E1;display:block}
    .sp-l.done{background:#2563EB}
    .selbar{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 22px;background:#001A49;color:#fff;border-radius:22px 22px 0 0;flex-wrap:wrap;animation:fadeIn .25s backwards}
    .selbar .ck{background:#2563EB;box-shadow:none}
    .selbar a{color:#fff}
    .pg{width:34px;height:34px;border-radius:17px;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:#0F172A;transition:background .15s}
    .pg.lk{cursor:pointer}.pg.lk:hover{background:#EEF2F6}
    .pg.on{background:#001A49;color:#fff}
    [data-tip]{position:relative}
    [data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0F172A;color:#fff;font:600 11.5px/1 'Inter',sans-serif;padding:7px 10px;border-radius:9px;z-index:20;pointer-events:none;animation:fadeIn .12s both}

    /* Éléments des fenêtres. */
    .cards{display:grid;gap:10px}.cards.c1{grid-template-columns:1fr}.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .opt{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px #64748B;background:#fff;cursor:pointer;transition:transform .12s,box-shadow .18s,background .18s}
    .opt:hover{box-shadow:inset 0 0 0 1.5px #0F172A}
    .opt:active{transform:scale(.98)}
    .opt.on{box-shadow:inset 0 0 0 2px #2563EB,0 0 0 5px rgba(37,99,235,.1);background:#F6FAFF}
    .opt.ko{box-shadow:inset 0 0 0 1.5px #DC2626;background:#fff}
    .opt.off{opacity:.5;cursor:not-allowed}
    .opt.ac{align-items:center}
    .opt-ic{width:36px;height:36px;border-radius:12px;background:#F1F5F9;display:grid;place-items:center;color:#334155;flex:none}
    .opt.on .opt-ic{background:#EAF4FF;color:#2563EB}
    .rad{width:20px;height:20px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #64748B;flex:none;margin-top:1px;background:#fff;transition:box-shadow .2s cubic-bezier(.3,1.4,.5,1)}
    .opt.on .rad{box-shadow:inset 0 0 0 6px #2563EB}
    .chks{display:flex;flex-direction:column;border-radius:16px;box-shadow:inset 0 0 0 1px #E2E8F0;overflow:hidden}
    .chk{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid #EEF2F6;cursor:pointer;font-size:13px;transition:background .12s}
    .chk:first-child{border-top:none}.chk:hover{background:#F8FAFC}.chk.on{background:#F6FAFF}.chk.all{background:#F6F8FB}
    .tgl{display:flex;flex-direction:column;gap:2px}
    .tgr{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #EEF2F6;cursor:pointer}
    .tgr:first-child{border-top:none}
    .dropz{border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px;border:2px dashed #94A3B8;background:#FBFDFF;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
    .dropz:hover,[data-drop].over{border-color:#2563EB;background:#F3F8FF}
    .dropz:active{transform:scale(.99)}
    .run{display:flex;gap:22px;align-items:center;padding:6px 0}
    .ring2{width:96px;height:96px;border-radius:48px;display:grid;place-items:center;flex:none;position:relative;transition:background .3s}
    .ring2::before{content:'';position:absolute;inset:8px;border-radius:50%;background:#fff}
    .ring2 > span{position:relative;font-size:19px;font-weight:800;color:#001A49}
    .rs{display:flex;align-items:center;gap:10px;font-size:13px;color:#64748B;transition:color .2s}
    .rs-d{width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 1.5px #CBD5E1;display:grid;place-items:center;color:#fff;flex:none;transition:background .2s,box-shadow .2s}
    .rs.done{color:#0F172A}.rs.done .rs-d{background:#16A34A;box-shadow:none}
    .rs.done .rs-d svg{animation:ckPop .3s both}
    .rs.cur{color:#0F172A;font-weight:600}
    .rs.cur .rs-d{box-shadow:inset 0 0 0 2px #2563EB;position:relative}
    .rs.cur .rs-d::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#2563EB;animation:spin .8s linear infinite}
    .sec{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:#001A49;color:#E2E8F0}
    .sec a{color:#14A8FF}
    .donew{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px 10px 4px}
    .dck{width:76px;height:76px;margin-bottom:6px;border-radius:50%;animation:halo 1.4s ease-out .3s both}
    .dck circle{fill:#EAF9EF;stroke:#16A34A;stroke-width:2.5;stroke-dasharray:160;animation:ringDraw .6s ease-out both}
    .dck path{fill:none;stroke:#16A34A;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:chkDraw .4s ease-out .45s both}
    .lst{display:flex;flex-direction:column;border-radius:16px;box-shadow:inset 0 0 0 1px #E2E8F0;overflow:hidden}
    .lr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #EEF2F6;transition:background .12s}
    .lr:first-child{border-top:none}
    .lr.lk{cursor:pointer}.lr.lk:hover{background:#F8FAFC}.lr.lk:active{background:#EEF4FF}.lr.on{background:#F3F8FF}
    .lr-ic{width:34px;height:34px;border-radius:11px;background:#EAF4FF;color:#2563EB;display:grid;place-items:center;flex:none}
    .lnk{color:#2563EB;font-weight:600}
    .ph-img.big{border-radius:18px;font-size:12px}
    .thread{display:flex;flex-direction:column;gap:10px;padding:4px 0}
    .bw-r{display:flex;flex-direction:column;align-items:flex-start;gap:3px;animation:popIn .25s backwards}
    .bw-r.me{align-items:flex-end}
    .bub{max-width:82%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:#F1F5F9;font-size:13.5px;line-height:1.5}
    .bub.me{background:#2563EB;color:#fff;border-radius:18px 18px 6px 18px}
    .bh{font-size:11px;color:#64748B;padding:0 6px}
    .bub.typing{display:flex;gap:4px;padding:13px 14px}
    .bub.typing i{width:7px;height:7px;border-radius:4px;background:#64748B;display:block;animation:dot3 1.1s infinite}
    .bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
    .cmp{flex:1;display:flex;gap:10px;align-items:center}
    .cmp .inp{height:44px;padding:0 18px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px #64748B}
    .cmp .inp:focus{box-shadow:inset 0 0 0 2px #2563EB}
    .cmp .btn{width:44px;padding:0}
    .accs{display:flex;flex-direction:column;border-radius:16px;box-shadow:inset 0 0 0 1px #E2E8F0;overflow:hidden}
    .acc{border-top:1px solid #EEF2F6}.acc:first-child{border-top:none}
    .acc-h{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
    .acc-h:hover{background:#F8FAFC}
    .acc-h .i{transition:transform .25s}.acc.on .acc-h .i{transform:rotate(180deg)}
    .acc-b{padding:0 14px 14px;line-height:1.55;animation:wcbIn .22s backwards}
    .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
    .mini{border-radius:14px;padding:10px 12px;background:#F6F8FB}
    .mini b{display:block;font-size:13px;font-weight:600;margin-top:2px}
    .mps{display:flex;flex-direction:column;gap:6px}
    .mpr{border-radius:14px;background:#F6F8FB;transition:background .15s,box-shadow .15s}
    .mpr.on{background:#fff;box-shadow:inset 0 0 0 2px #2563EB}
    .mpr.chg{box-shadow:inset 0 0 0 1.5px #16A34A}
    .mpr-h{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:13px}
    .mpr-o{padding:0 14px 14px}
    .mpr .chip{min-height:32px;font-size:12px}
    .pal-o{align-items:flex-start;padding-top:12vh}
    .pal{width:640px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(0,26,73,.7);animation:popIn .26s cubic-bezier(.16,1,.3,1) both}
    .ovl.out .pal{animation:popOut .15s both}
    .pal-in{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 20px;border-bottom:1px solid #EEF2F6}
    .pal-in .inp{font-size:16px;padding:16px 0}
    .pal-l{max-height:420px;overflow:auto;padding:6px}
    .pal-g{padding:12px 12px 6px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#334155}
    .pal-i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;cursor:pointer;transition:background .1s}
    .pal-i.on{background:#EAF4FF}
    .pal-ic{width:34px;height:34px;border-radius:11px;background:#F1F5F9;display:grid;place-items:center;color:#334155;flex:none}
    .pal-i.on .pal-ic{background:#2563EB;color:#fff}
    .pal-go{opacity:0;color:#2563EB;transition:opacity .15s,transform .15s;transform:translateX(-4px)}
    .pal-i.on .pal-go{opacity:1;transform:none}
    .pal-e{padding:28px;text-align:center;font-size:13px;color:#334155}
    .pal-f{display:flex;gap:18px;padding:10px 18px;background:#F6F8FB;font-size:12px;color:#334155}
    .pal-f .kbd{height:22px;padding:0 7px;margin-right:4px;background:#fff;box-shadow:inset 0 0 0 1px #CBD5E1}

    .pnav{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px;animation:fadeIn .2s backwards}
    .pnav-btn{height:44px;padding:0 16px 0 12px;border-radius:22px;background:#0F172A;color:#fff;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 18px 36px -16px rgba(0,0,0,.6);transition:transform .12s;user-select:none}
    .pnav-btn:active{transform:scale(.96)}
    .pnav-id{height:24px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.16);font:700 11px/24px ui-monospace,Menlo,monospace}
    .pnav-p{width:350px;max-height:72vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,26,73,.55),0 0 0 1px rgba(0,26,73,.08);padding:12px;animation:popIn .2s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom right}
    .pnav-t{padding:12px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#334155}
    .nv-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-size:13px;cursor:pointer;transition:background .12s}
    .nv-i:hover{background:#F6F8FB}
    .nv-i.on{background:#EAF4FF;font-weight:600}
    .nv-id{font:700 11px ui-monospace,Menlo,monospace;color:#334155;min-width:30px}
    @media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ===== Composant « Entrer » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    @keyframes blink{50%{opacity:0}}
    @keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
    .login{display:flex;min-height:100vh;background:#F4F7FB}
    .lg-l{flex:0 0 52%;margin:14px;border-radius:30px;color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;background:radial-gradient(70% 55% at 10% 0%,rgba(8,108,255,.6),rgba(8,108,255,0) 65%),radial-gradient(60% 50% at 100% 100%,rgba(20,168,255,.25),rgba(20,168,255,0) 65%),#001A49}
    .lg-k{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:15px;background:rgba(255,255,255,.08);font-size:12.5px;font-weight:600;color:#fff}
    .lg-t{margin-top:22px;font:800 58px/1.02 'Plus Jakarta Sans',sans-serif;letter-spacing:-2px}
    .lg-s{margin-top:20px;font-size:17px;line-height:1.6;color:#CBD5E1;max-width:580px}
    .lg-tiles{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .lg-tile{border-radius:18px;padding:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .2s,background .2s}
    .lg-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
    .lg-tile b{display:block;margin-top:14px;font-size:14px;font-weight:600}
    .lg-tile > span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:#CBD5E1}
    .pulse{border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
    .pl-row{display:grid;grid-template-columns:150px 1fr 84px;gap:14px;align-items:center;font-size:13px}
    .pl-trk{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
    .pl-trk i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#14A8FF,#22C55E);transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) backwards .3s}
    .live{width:8px;height:8px;border-radius:4px;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22);display:block;animation:halo 2s ease-out infinite}
    .lg-r{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
    .lg-f{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px;background:#fff;border-radius:28px;padding:36px;box-shadow:0 40px 80px -40px rgba(0,26,73,.35);animation:slideIn .35s cubic-bezier(.2,.8,.2,1) backwards}
    .otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;cursor:text}
    .otp > span{height:58px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #64748B;display:grid;place-items:center;font:700 24px 'Plus Jakarta Sans',sans-serif;transition:box-shadow .15s,background .15s}
    .otp > span.f{background:#F3F8FF;box-shadow:inset 0 0 0 1.5px #2563EB;animation:ckPop .25s backwards}
    .otp > span.c{box-shadow:inset 0 0 0 2px #2563EB,0 0 0 5px rgba(37,99,235,.14)}
    .caret{display:block;width:2px;height:26px;background:#2563EB;border-radius:1px;animation:blink 1s steps(1) infinite}
    .or{display:flex;align-items:center;gap:12px;font-size:12px;color:#334155}
    .or::before,.or::after{content:'';flex:1;height:1px;background:#E2E8F0}
    .onb{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(50% 35% at 100% 0%,rgba(37,99,235,.1),rgba(37,99,235,0) 70%),#F4F7FB}
    .onb-top{height:80px;display:flex;align-items:center;gap:24px;padding:0 40px;background:rgba(255,255,255,.75);box-shadow:0 1px 0 #E2E8F0;position:sticky;top:0;z-index:4;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    .logo-d{height:30px;width:auto;display:block}
    .biz-d{height:22px;padding:0 9px;border-radius:11px;background:#001A49;color:#fff;font:700 10px/22px 'Plus Jakarta Sans',sans-serif;letter-spacing:1.6px}
    .onb-b{flex:1;display:flex;gap:28px;padding:40px 40px 56px;justify-content:center;align-items:flex-start}
    .onb-b > *{animation:pgIn .45s cubic-bezier(.2,.75,.25,1) backwards}
    .onb-b > *:nth-child(2){animation-delay:.08s}
    .onb-m{flex:0 1 820px;display:flex;flex-direction:column;gap:20px}
    .onb-a{flex:0 0 380px;display:flex;flex-direction:column;gap:16px}
    .found{display:flex;gap:16px;align-items:center;padding:18px;border-radius:18px;background:#EAF9EF;animation:popIn .35s backwards}
    .idr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;font-size:13px;transition:background .25s}
    .idr.on{background:#EAF4FF}
    .plan{background:#fff;border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 14px 34px -18px rgba(0,26,73,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,color .35s,box-shadow .35s}
    .plan:hover{transform:translateY(-4px)}
    .plan.hl{color:#fff;background:radial-gradient(100% 55% at 100% 0%,rgba(37,99,235,.6),rgba(37,99,235,0) 70%),#001A49;box-shadow:0 40px 70px -30px rgba(0,26,73,.65);transform:translateY(-12px)}
    .plan.hl:hover{transform:translateY(-16px)}
    .plan.hl .mu{color:#CBD5E1}
    .pl-name{font:700 19px 'Plus Jakarta Sans',sans-serif}
    .pl-price{font:800 42px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-1.6px}
    .pl-price small{font-size:14px;font-weight:600;letter-spacing:0;margin-left:6px}
    .feat{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4}
    .feat .i{color:#16A34A;margin-top:1px}
    .plan.hl .feat .i{color:#22C55E}
    .pdv{height:1px;background:#EEF2F6}
    .plan.hl .pdv{background:rgba(255,255,255,.14)}
    .sld{position:relative;height:28px}
    .sld-t{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:#E2E8F0}
    .sld-f{position:absolute;left:0;top:12px;height:4px;border-radius:2px;background:linear-gradient(90deg,#086CFF,#2563EB)}
    .sld-k{position:absolute;top:2px;width:24px;height:24px;border-radius:12px;background:#fff;box-shadow:0 0 0 3px #2563EB,0 6px 14px rgba(0,26,73,.25);margin-left:-12px;transition:transform .15s;pointer-events:none}
    .sld:hover .sld-k{transform:scale(1.12)}
    .rng{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:grab}
    .rng:active{cursor:grabbing}
    .sim-v{transition:color .2s}
    .doc-r{display:flex;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid #EEF2F6;transition:background .2s}
    .doc-r:first-child{border-top:none}
    .doc-r.todo{background:#fff}.doc-r.over{background:#F3F8FF}
    .doc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:#F1F5F9;color:#334155}
    .doc-r.ok .doc-ic{background:#EAF9EF;color:#16A34A}
    .doc-r.up .doc-ic{background:#EAF4FF;color:#2563EB}
    .doc-r.ok .doc-ic svg{animation:ckPop .35s backwards}
    .ccard{height:190px;border-radius:22px;padding:22px 24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(90% 90% at 100% 0%,rgba(20,168,255,.55),rgba(20,168,255,0) 60%),linear-gradient(135deg,#0A2C63,#001A49);box-shadow:0 30px 50px -26px rgba(0,26,73,.8);max-width:360px;position:relative;overflow:hidden}
    .ccard::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 60%);background-size:250% 100%;animation:shimmer 4s linear infinite}
    .cc-chip{width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,#F5D27A,#C9A13C)}
    .cc-n{font:600 20px ui-monospace,Menlo,monospace;letter-spacing:2px}

/* ===== Composant « Piloter » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
    .hero{grid-column:span 3;border-radius:26px;padding:26px 28px;display:flex;flex-direction:column;gap:22px}
    .hero-t{font:800 30px/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;max-width:620px}
    .glass{border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column;gap:6px;transition:transform .18s,background .18s;cursor:pointer}
    .glass:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
    .glass:active{transform:scale(.96)}
    .glass.nolk{cursor:default}.glass.nolk:hover{transform:none;background:rgba(255,255,255,.08)}
    .glass.cur{background:#fff;color:#001A49;box-shadow:0 18px 30px -16px rgba(0,0,0,.55)}
    .glass.cur:hover{background:#fff}
    .glass.cur .mu{color:#334155}
    .gl-v{font:800 26px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.6px}
    .gl-a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;margin-top:4px}
    .glass:hover .gl-a .i{transform:translateX(3px)}.gl-a .i{transition:transform .18s}
    .gl-ok{width:30px;height:30px;border-radius:15px;background:#22C55E;color:#001A49;display:grid;place-items:center;margin-bottom:6px}
    .gl-n{width:30px;height:30px;border-radius:15px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);display:grid;place-items:center;font-size:12.5px;font-weight:600;margin-bottom:6px}
    .glass.cur .gl-n{background:#2563EB;color:#fff;box-shadow:none}
    .tall{grid-row:span 2}.s2{grid-column:span 2}.s3{grid-column:span 3}
    .kpi{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
    .kpi-l{font-size:12.5px;color:#334155;font-weight:500}
    .kpi-v{font:800 34px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-1.2px}
    .kpi-v small{font-size:15px;font-weight:700;letter-spacing:0;margin-left:3px;color:#334155}
    .spl{fill:none;stroke:#2563EB;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;animation:draw 1.2s cubic-bezier(.3,.6,.3,1) backwards .15s}
    .spa{fill:#EAF4FF;stroke:none;animation:fadeIn .8s backwards .5s}
    .pipe{display:flex;gap:2px;height:16px;border-radius:8px;overflow:hidden}
    .pipe i{display:block;height:100%;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1);transform-origin:left;animation:grow .8s cubic-bezier(.2,.8,.2,1) backwards}
    .leg{display:flex;flex-wrap:wrap;gap:12px 18px}
    .leg-sw{width:10px;height:10px;border-radius:3px;display:block;flex:none}
    .bars{display:flex;align-items:flex-end;gap:12px;height:140px}
    .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;cursor:default}
    .bar i{display:block;width:100%;max-width:40px;border-radius:8px 8px 3px 3px;background:#2563EB;transition:filter .15s,height .5s;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
    .bar:nth-child(2) i{animation-delay:.04s}.bar:nth-child(3) i{animation-delay:.08s}.bar:nth-child(4) i{animation-delay:.12s}.bar:nth-child(5) i{animation-delay:.16s}.bar:nth-child(n+6) i{animation-delay:.2s}
    .bar:hover i{filter:brightness(1.15)}
    .bar i.cur{background:repeating-linear-gradient(135deg,#2563EB 0 6px,#5E9BFF 6px 12px)}
    .bar > span{font-size:11.5px;color:#334155}
    .bars.dk .bar i{background:#14A8FF}
    .bars.dk .bar > span{color:#CBD5E1}
    .pr{display:flex;flex-direction:column;gap:9px;padding:15px 0;border-top:1px solid #EEF2F6}
    .pr:first-child{border-top:none;padding-top:4px}
    .pr.lk{cursor:pointer;border-radius:12px;transition:background .15s}.pr.lk:hover{background:#F8FAFC}
    .feed{display:flex;gap:12px;align-items:flex-start;padding:11px 8px;margin:0 -8px;border-top:1px solid #EEF2F6;cursor:pointer;border-radius:12px;transition:background .15s}
    .feed:hover{background:#F8FAFC}
    .feed:first-child{border-top:none;padding-top:2px}
    .fd-i{width:32px;height:32px;border-radius:16px;background:#EAF4FF;color:#2563EB;display:grid;place-items:center;flex:none}
    .lot{display:flex;flex-direction:column;gap:8px;padding:12px 8px;margin:0 -8px;border-top:1px solid #EEF2F6;cursor:pointer;border-radius:12px;transition:background .15s}
    .lot:hover{background:#F8FAFC}
    .lot:first-child{border-top:none;padding-top:2px}
    .dz{border-radius:24px;padding:26px 28px;display:flex;align-items:center;gap:22px;background:#fff;border:2px dashed #2563EB;transition:background .2s,transform .2s;cursor:pointer}
    .dz:hover,.dz.over{background:#F3F8FF}
    .map{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 12px;border-radius:11px;background:#F6F8FB;font-size:12.5px}
    .map code{font:500 12px ui-monospace,Menlo,monospace;color:#334155}
    .hm{display:grid;grid-template-columns:170px repeat(6,minmax(0,1fr));gap:5px}
    .hm-h{font-size:11.5px;font-weight:600;color:#334155;padding:4px 6px}
    .hm-r{display:flex;align-items:center;font-size:13px;font-weight:600;padding:0 6px}
    .hm-c{height:66px;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;font-size:13px;cursor:pointer;transition:transform .15s,box-shadow .2s;animation:fadeIn .5s backwards}
    .hm-c:hover{transform:scale(1.05);z-index:2}
    .hm-c:active{transform:scale(.96)}
    .hm-c b{font-weight:600}
    .hm-c > span{font-size:11.5px}
    .q1{background:#EAF4FF;color:#0F172A}.q2{background:#CFE3FF;color:#0F172A}.q3{background:#9EC5FF;color:#0F172A}.q4{background:#5E9BFF;color:#0F172A}.q5{background:#2563EB;color:#fff}.q6{background:#0A2C63;color:#fff}
    .hm-c.sel{box-shadow:0 0 0 3px #fff,0 0 0 5px #001A49}
    .tight-d{width:16px;height:16px;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none}
    .tight-d i{width:7px;height:7px;border-radius:4px;background:#D97706;display:block}
    .lg-sw{width:26px;height:10px;border-radius:3px;display:block}
    .side-c{animation:fadeIn .3s backwards}

/* ===== Composant « Deposer » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none;transition:background .25s,color .25s}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    .sum{display:flex;gap:14px;align-items:center;padding:18px 20px}
    .sum.on{box-shadow:inset 0 0 0 2px #2563EB,0 14px 34px -18px rgba(0,26,73,.2)}
    .sum .si{width:40px;height:40px;border-radius:20px}
    .sum-v{font:800 28px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.8px}
    .map{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 12px;border-radius:11px;background:#F6F8FB;font-size:12.5px}
    .map code{font:500 12px ui-monospace,Menlo,monospace;color:#334155}
    .fix{min-height:32px;border-radius:9px;box-shadow:inset 0 0 0 1.5px #DC2626;background:#fff;display:inline-flex;align-items:center;padding:0 10px;width:170px;transition:box-shadow .15s}
    .fix:focus-within{box-shadow:inset 0 0 0 2px #2563EB,0 0 0 4px rgba(37,99,235,.12)}
    .fix .inp{padding:6px 0;font-size:12.5px}
    .pick{min-height:36px;padding:0 12px;border-radius:11px;background:#fff;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .15s}
    .pick:active{transform:scale(.96)}
    .pick.sug{box-shadow:inset 0 0 0 1.5px #2563EB}
    .pick.err{box-shadow:inset 0 0 0 1.5px #DC2626}
    .drop{border-radius:18px;padding:16px 20px;display:flex;align-items:center;gap:16px;background:#fff;box-shadow:inset 0 0 0 1.5px #2563EB;transition:background .2s}
    .drop.ko{box-shadow:inset 0 0 0 1.5px #DC2626}
    .drop.over{background:#F3F8FF}
    .dock{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 22px;flex-wrap:wrap}
    .empty-r{padding:28px 22px;text-align:center;font-size:13px;color:#334155;border-top:1px solid #EEF2F6}

/* ===== Composant « Choisir » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    .lv{padding:20px 22px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s,transform .18s}
    .lv.on{box-shadow:inset 0 0 0 2px #2563EB,0 20px 40px -24px rgba(37,99,235,.6)}
    .lv-top{display:flex;gap:14px;align-items:center}
    @keyframes wcbRadar{0%{transform:scale(.3);opacity:.75}100%{transform:scale(1);opacity:0}}
    .radar{position:relative;width:220px;height:220px;display:grid;place-items:center}
    .radar i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #2563EB;animation:wcbRadar 3s ease-out infinite}
    .radar i:nth-child(2){animation-delay:1s}.radar i:nth-child(3){animation-delay:2s}
    .radar-c{position:relative;width:100px;height:100px;border-radius:50px;background:#001A49;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(37,99,235,.12);transition:background .4s}
    .radar.got .radar-c{background:#16A34A;animation:ckPop .5s backwards}
    .radar.got i{box-shadow:inset 0 0 0 2px #16A34A}
    .ring{width:120px;height:120px;border-radius:60px;display:grid;place-items:center;flex:none;transition:background 1s linear}
    .ring-i{width:98px;height:98px;border-radius:49px;background:#001A49;display:flex;flex-direction:column;align-items:center;justify-content:center}
    .jr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
    .jr-s{display:flex;flex-direction:column;gap:8px}
    .jr-b{height:6px;border-radius:3px;background:#E2E8F0;display:block;transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.2,1) backwards}
    .jr-s:nth-child(2) .jr-b{animation-delay:.06s}.jr-s:nth-child(3) .jr-b{animation-delay:.12s}.jr-s:nth-child(4) .jr-b{animation-delay:.18s}.jr-s:nth-child(5) .jr-b{animation-delay:.24s}.jr-s:nth-child(n+6) .jr-b{animation-delay:.3s}
    .jr-s.done .jr-b{background:#2563EB}
    .jr-s.cur .jr-b{background:linear-gradient(90deg,#2563EB 55%,#E2E8F0 55%)}
    .jr-l{font-size:12.5px;font-weight:600}
    .jr-d{font-size:11.5px;color:#334155}
    .tl-i{display:grid;grid-template-columns:116px 30px 1fr;gap:14px;animation:fadeIn .4s backwards}
    .tl-d{font-size:12px;color:#334155;text-align:right;padding-top:6px}
    .tl-m{display:flex;flex-direction:column;align-items:center}
    .tl-dot{width:30px;height:30px;border-radius:15px;display:grid;place-items:center;background:#EAF4FF;color:#2563EB;flex:none}
    .tl-dot.cur{background:#2563EB;color:#fff;box-shadow:0 0 0 6px rgba(37,99,235,.15)}
    .tl-dot.warn{background:#FFF7ED;color:#D97706;box-shadow:0 0 0 6px rgba(217,119,6,.12);animation:ckPop .4s backwards}
    .tl-ln{flex:1;width:2px;min-height:18px;background:#E2E8F0;margin:4px 0;display:block}
    .tl-c{display:flex;flex-direction:column;gap:4px;padding:5px 0 22px}
    .doc{display:flex;align-items:center;gap:10px;font-size:13px}
    .yes{width:24px;height:24px;border-radius:12px;background:#EAF9EF;color:#16A34A;display:grid;place-items:center}
    .desk{border-radius:24px;padding:36px;display:flex;justify-content:center;align-items:flex-start;gap:28px;background:repeating-linear-gradient(135deg,#E9EEF4 0 10px,#E4EAF1 10px 20px)}
    .label{width:400px;height:600px;background:#fff;border-radius:6px;box-shadow:0 34px 60px -30px rgba(0,26,73,.5),0 0 0 1px rgba(0,26,73,.08);display:flex;flex-direction:column;overflow:hidden;color:#000;animation:popIn .35s cubic-bezier(.16,1,.3,1) backwards}
    .lb-head{display:flex;align-items:center;gap:10px;padding:14px 16px}
    .lb-sec{padding:12px 16px;border-top:1.5px solid #000}
    .lb-k{display:block;font-size:9.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
    .lb-big{font:800 30px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.8px}
    .biz-d{height:22px;padding:0 9px;border-radius:11px;background:#001A49;color:#fff;font:700 10px/22px 'Plus Jakarta Sans',sans-serif;letter-spacing:1.6px}
    .thumb{width:84px;height:126px;border-radius:4px;background:#fff;box-shadow:0 10px 20px -12px rgba(0,26,73,.4);padding:8px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:transform .15s,box-shadow .15s}
    .thumb:hover{transform:translateY(-3px)}
    .thumb.on{box-shadow:0 0 0 2px #2563EB,0 10px 20px -12px rgba(0,26,73,.4)}
    .thumb i{display:block;height:5px;border-radius:2px;background:#CBD5E1}
    .thumb b{display:block;height:30px;border-radius:2px;background:#E2E8F0}
    .a4{width:420px;height:594px;background:#fff;border-radius:4px;box-shadow:0 34px 60px -30px rgba(0,26,73,.5),0 0 0 1px rgba(0,26,73,.08);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;padding:16px;animation:popIn .35s cubic-bezier(.16,1,.3,1) backwards}
    .ml{border:1.5px solid #000;border-radius:4px;display:flex;flex-direction:column;font-size:10px;color:#000;overflow:hidden}
    .ml > div{padding:6px 8px;border-top:1px solid #000}.ml > div:first-child{border-top:none}
    .ml-big{font:800 17px/1 'Plus Jakarta Sans',sans-serif}
    .pfl{cursor:pointer;transition:background .15s}.pfl:hover{background:#EEF3F9}
    .empty-r{padding:28px 22px;text-align:center;font-size:13px;color:#334155;border-top:1px solid #EEF2F6}

/* ===== Composant « Argent » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    .kpi{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
    .kpi-l{font-size:12.5px;color:#334155;font-weight:500}
    .page.sec-a .kpi-v{font:800 28px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;transition:color .3s}
    .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .fl-s{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(0,26,73,.04),0 14px 34px -18px rgba(0,26,73,.2)}
    .fl-n{width:34px;height:34px;border-radius:17px;background:#001A49;color:#fff;display:grid;place-items:center;font:800 14px 'Plus Jakarta Sans',sans-serif;flex:none}
    .rc{padding:22px;display:flex;flex-direction:column;gap:14px;animation:pgIn .4s backwards}
    .rc-h{display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:14px;margin:-6px;padding:6px;transition:background .15s}
    .rc-h:hover{background:#F6F8FB}
    .pdl{font-weight:500;cursor:pointer}
    .page.sec-a .pipe{display:flex;gap:2px;height:12px;border-radius:6px}
    .page.sec-a .pipe i{display:block;height:100%;transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards}
    .pipe i:first-child{border-radius:6px 0 0 6px}.pipe i:last-child{border-radius:0 6px 6px 0}
    .dl{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:#334155;cursor:pointer;transition:background .15s,color .15s}
    .dl:hover{background:#EAF4FF;color:#2563EB}

/* ===== Composant « Reglages » ===== */
.si{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
    .si.ok{background:#EAF9EF;color:#16A34A}.si.info{background:#EAF4FF;color:#2563EB}.si.err{background:#fff;color:#DC2626;box-shadow:inset 0 0 0 1.5px #DC2626}.si.out{background:#F1F5F9;color:#64748B}
    .yes{width:24px;height:24px;border-radius:12px;background:#EAF9EF;color:#16A34A;display:grid;place-items:center}
    .no{width:24px;height:24px;display:grid;place-items:center;color:#64748B;font-size:13px}
    .mx{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,96px);font-size:13px}
    .mx>div{padding:10px 8px;border-top:1px solid #EEF2F6;display:flex;align-items:center}
    .mx .mh{font-size:11.5px;font-weight:600;color:#334155;border-top:none;justify-content:center;text-align:center}
    .mx .mc{justify-content:center}
    .code{background:#001A49;border-radius:22px;padding:20px 22px;font:12.5px/1.75 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;color:#E2E8F0;box-shadow:0 30px 60px -30px rgba(0,26,73,.65);position:relative}
    .code .ind{padding-left:18px}.code .ind2{padding-left:36px}
    .k1{color:#14A8FF}.k2{color:#22C55E}.k3{color:#CBD5E1}
    .cp{position:absolute;top:14px;right:14px;height:30px;padding:0 12px;border-radius:15px;background:rgba(255,255,255,.1);color:#fff;font:600 12px 'Inter',sans-serif;display:flex;align-items:center;gap:6px;cursor:pointer;transition:background .15s,transform .12s}
    .cp:hover{background:rgba(255,255,255,.18)}.cp:active{transform:scale(.95)}
    .sbx{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:#FFF7ED;box-shadow:inset 0 0 0 1.5px #D97706;font-size:13px;animation:popIn .3s both}
    .dots{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:#334155;cursor:pointer;transition:background .15s}
    .dots:hover{background:#EEF2F6}
    .rchip{min-height:34px;font-size:12.5px}
    .tg-r{cursor:pointer}
    .spin.dk{border-color:rgba(37,99,235,.25);border-top-color:#2563EB;width:14px;height:14px}

/* ===== Composant « Destinataire » ===== */
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
    @keyframes pinDrop{0%{transform:translateY(-30px);opacity:0}60%{transform:translateY(4px);opacity:1}100%{transform:none}}
    @keyframes phoneIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
    .stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:80px;padding:40px;background:radial-gradient(55% 50% at 20% 25%,rgba(37,99,235,.12),rgba(37,99,235,0) 70%),#E6EBF1}
    .stage-side{width:360px;display:flex;flex-direction:column;gap:18px;animation:pgIn .45s both}
    .phone{width:393px;height:852px;border-radius:46px;overflow:hidden;background:#F4F7FB;display:flex;flex-direction:column;flex:none;position:relative;box-shadow:0 50px 100px -40px rgba(0,26,73,.5),0 0 0 10px #0F172A;animation:phoneIn .5s cubic-bezier(.16,1,.3,1) both}
    .sb{height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 6px;font-size:15px;font-weight:600;flex:none}
    .sv{flex:1;display:flex;flex-direction:column;gap:12px;padding:6px 16px 16px;overflow:hidden}
    .sv > *{animation:pgIn .4s both}.sv > *:nth-child(2){animation-delay:.05s}.sv > *:nth-child(3){animation-delay:.1s}.sv > *:nth-child(4){animation-delay:.15s}.sv > *:nth-child(n+5){animation-delay:.2s}
    .sv-hero{border-radius:26px;padding:20px;color:#fff;background:radial-gradient(110% 80% at 100% 0%,rgba(37,99,235,.65),rgba(37,99,235,0) 60%),#001A49}
    .sv-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:18px}
    .sv-seg i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
    .sv-seg i.d{background:#22C55E}
    .sv-seg i.c{background:linear-gradient(90deg,#14A8FF 60%,rgba(255,255,255,.18) 60%)}
    .code-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;cursor:pointer}
    .code-big span{height:58px;border-radius:16px;background:#EAF4FF;display:grid;place-items:center;font:800 28px 'Plus Jakarta Sans',sans-serif;color:#001A49;transition:transform .15s}
    .code-big:active span{transform:scale(.95)}
    .msteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
    .msteps i{display:block;height:5px;border-radius:3px;background:#E2E8F0}
    .msteps i.d{background:#2563EB}
    .tap{cursor:pointer;transition:transform .12s}.tap:active{transform:scale(.97)}
    .pscrim{position:absolute;inset:0;background:rgba(0,26,73,.38);animation:fadeIn .2s both;z-index:5}
    .psheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:#fff;border-radius:28px 28px 0 0;padding:10px 18px 26px;display:flex;flex-direction:column;gap:14px;animation:sheetUp .38s cubic-bezier(.16,1,.3,1) both;box-shadow:0 -20px 40px -20px rgba(0,26,73,.4)}
    .grab{width:40px;height:5px;border-radius:3px;background:#CBD5E1;align-self:center;margin-bottom:4px}
    .pmap{height:150px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(135deg,#DCEBFF,#EAF9EF)}
    .pmap::before{content:'';position:absolute;left:-10%;right:-10%;top:58%;height:14px;background:#fff;transform:rotate(-8deg);opacity:.9}
    .pin{position:absolute;left:50%;top:38%;margin-left:-14px;width:28px;height:28px;border-radius:14px 14px 14px 2px;background:#2563EB;transform-origin:bottom;box-shadow:0 8px 16px -6px rgba(37,99,235,.8);animation:pinDrop .6s cubic-bezier(.3,1.4,.5,1) .2s both;rotate:-45deg}
    .ptoast{position:absolute;left:16px;right:16px;top:56px;z-index:8;background:#0F172A;color:#fff;border-radius:16px;padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:center;animation:popIn .3s cubic-bezier(.2,.9,.3,1.2) both}
    .ptoast .i{color:#22C55E}
    .pta{width:100%;border:0;outline:0;resize:none;font:inherit;font-size:14px;line-height:1.5;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px #64748B;background:#fff;color:#0F172A}
    .pta:focus{box-shadow:inset 0 0 0 2px #2563EB}
    .mb{display:flex;gap:12px;align-items:flex-start;padding:12px 6px;border-top:1px solid #E2E8F0;cursor:pointer;transition:background .15s}
    .mb:hover{background:#EEF2F6}
    .mb:first-child{border-top:none}
    .mb.un .mb-f{font-weight:700}
    .mb-dot{width:9px;height:9px;border-radius:5px;background:#2563EB;flex:none;margin-top:6px}

/* ===== Portail : ce que le moteur de la planche portait (rendu conditionnel, état « occupé »),
   et la remise à zéro des contrôles natifs que la planche dessinait en <div>. ===== */
button{font:inherit;color:inherit;border:0;margin:0;background:none;padding:0;cursor:pointer;text-align:inherit}
button.btn{text-align:center}
button[disabled]{cursor:not-allowed}
form{margin:0}
label{cursor:pointer}
input[hidden]{display:none}
[hidden]{display:none!important}
.menu[hidden],.np[hidden]{display:none}
#ovl-root:empty{display:none}
.btn .spin{display:none}
.btn.is-busy .spin{display:block}
.btn.is-busy .ic-idle{display:none}
/* B15 : « Envoyer un test » et « Rejouer » tournent le temps de l'envoi ; htmx pose htmx-request sur le lien. */
[data-envoi] .lbl-busy{display:none;align-items:center;gap:6px;color:#334155}
[data-envoi].htmx-request{pointer-events:none}
[data-envoi].htmx-request .lbl-busy{display:inline-flex}
[data-envoi].htmx-request .lbl-idle{display:none}
.btn .lbl-busy{display:none}
.btn.is-busy .lbl-busy{display:inline}
.btn.is-busy .lbl-idle{display:none}
.otp-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.otp{position:relative}
a.btn,a.ni,a.mi,a.chip,a.tab{color:inherit}
a.btn.bp,a.btn.bg,a.btn.bok,a.btn.bdanger{color:#fff}
a.ni{color:#CBD5E1}a.ni:hover,a.ni.on{color:#fff}
a.mi{color:#0F172A;font-weight:500}a.mi.dg{color:#DC2626}
/* Ouverture du compte : la coche d'une puce cochée, les trois états d'une ligne de pièce, le champ de carte. */
.chip .ck-on,.in .ck-on{display:none}.chip.on .ck-on,.in.ok .ck-on{display:block}
.doc-r [data-st]{display:none}
.doc-r.ok [data-st~=ok],.doc-r.up [data-st~=up],.doc-r.todo [data-st~=todo]{display:contents}
.stripe-el{flex:1;min-width:0}
/* Dépôt : un bloc de fenêtre qui pose plusieurs blocs, une fenêtre qui en remplace une autre sans rejouer
   son entrée (comme la planche, où seul le contenu change), et l'état d'une colonne choisie sur B19. */
.ob.plat{display:contents}
.ovl.still,.ovl.still>.modal,.ovl.still>.drawer{animation:none}
[data-depot-choisi][hidden],[data-depot-recents][hidden]{display:none}
.sg[hx-get],.sum[hx-get]{cursor:pointer}
a.pc{color:inherit}
.chip.off{opacity:.5;cursor:not-allowed}
/* Capacité (B05) : la carte compte les kilos ou les départs datés sans recharger. La planche suppose des cases
   larges ; dans une case étroite, chaque libellé prend sa forme courte (requête de conteneur) — en départs, sans
   le ratio ni sa pastille, qui sont des kilos —, et une rangée trop étroite pour les kilos passe le panneau sous la
   carte. Rien ne se coupe. */
.hm .v-dep,.hm.dep .v-kg{display:none}.hm.dep .v-dep{display:inline}
.hm-c{container-type:inline-size}
.hm-c .hm-court{display:none}
@container (max-width:77px){.hm-c b>.v-dep>.hm-long{display:none}.hm-c b>.v-dep>.hm-court{display:inline}}
@container (max-width:91px){.hm-c span.tn>.v-dep>.hm-long{display:none}.hm-c span.tn>.v-dep>.hm-court{display:inline}.hm.dep .hm-c .tight-d{display:none}}
@container (max-width:66px){.hm-c b>.v-kg>.hm-long{display:none}.hm-c b>.v-kg>.hm-court{display:inline}}
.cap-l{container-type:inline-size}
@container (max-width:1099px){.cap-r{flex-wrap:wrap}.cap-r>.navyc{flex:1 1 100%!important}}
.navyc .btn.dis{background:rgba(255,255,255,.14);color:#CBD5E1}
.navyc .btn.dis:hover{background:rgba(255,255,255,.14)}