/* Diamond Optique — application workspace */
:root{--app-nav:244px;--app-surface:#fff;--app-canvas:#f5f6f8;--app-text:#253247;--app-muted:#6b7586;--app-border:#e6e9ef;--app-accent:#a8243e;--app-tint:#fbf0f1;--app-deep:#471b2a}
body[data-space=admin]{--app-accent:#245b91;--app-tint:#edf4fc;--app-deep:#122d4c;--app-canvas:#f3f6fb}
body[data-space=partenaire]{--app-accent:#c9233b;--app-tint:#fff0f0;--app-deep:#5b1c30;--app-canvas:#fbf6f5}
body[data-space=commercial]{--app-accent:#a7243b;--app-tint:#faf0f2;--app-deep:#482431;--app-canvas:#f7f6f4}
body{font-family:Inter,'Segoe UI',Arial,sans-serif!important}button,input,select,textarea{font-family:inherit!important}button,a{touch-action:manipulation}button{transition:background .18s,box-shadow .18s,transform .18s!important}button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}
body.application{background:var(--app-canvas);color:var(--app-text);padding-left:var(--app-nav);font-size:14px;min-height:100vh}
.application .space-header{display:none!important}.application main,.application main.pilotage,.application main.badge-workspace,.application main.stock-workspace{max-width:1440px;margin:0 auto!important;padding:32px 38px 60px!important;width:100%}
.application .workspace-nav,.application .workspace-footer{display:none!important}.app-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;width:var(--app-nav);background:#fff;border-right:1px solid var(--app-border);padding:28px 16px 16px;display:flex;flex-direction:column;gap:10px}.app-brand{display:block;padding:3px 20px 10px}.app-brand img{width:178px;max-width:100%;height:auto}.app-role{font-size:10px;font-weight:750;letter-spacing:1.9px;text-transform:uppercase;color:var(--app-muted);padding:15px 17px}.app-sidebar nav{display:grid;gap:5px}.app-sidebar a{display:flex;align-items:center;gap:13px;padding:12px 14px;min-height:46px;border-radius:11px;font-size:13px;font-weight:550;text-decoration:none;color:#667184}.app-sidebar a:hover{background:#f6f7f9;color:var(--app-accent)}.app-sidebar a[aria-current]{color:var(--app-accent);background:var(--app-tint);font-weight:750;box-shadow:inset 3px 0 var(--app-accent)}.app-sidebar svg,.app-topbar svg,.app-quick svg{width:20px;height:20px;flex:none}.app-sidebar-bottom{margin-top:auto;border-top:1px solid var(--app-border);padding-top:12px}.app-identity{display:flex;align-items:center;gap:10px;padding:15px 8px;font-size:12px;font-weight:650;overflow-wrap:anywhere}.app-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--app-tint);color:var(--app-accent);font-weight:800}.app-topbar{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:18px;height:72px;background:#ffffffed;backdrop-filter:blur(16px);border-bottom:1px solid var(--app-border);padding:0 38px}.app-breadcrumb{font-size:12px;color:var(--app-muted)}.app-date{margin-left:auto;color:var(--app-muted);font-size:12px}.app-topbar button{min-height:34px;padding:6px 12px;border-color:var(--app-border);font-size:12px;background:white;border-radius:9px}.app-menu-toggle{display:none!important}
.application h1{font-size:clamp(27px,3.5vw,38px);font-weight:720;letter-spacing:-1.2px;color:var(--app-text);line-height:1.18;margin:8px 0 12px}.application h2{font-size:20px;letter-spacing:-.5px;color:var(--app-text)}.application h3{font-size:15px;letter-spacing:-.2px}.application p{line-height:1.7;color:var(--app-muted)}.application .eyebrow{font-size:10px;color:var(--app-accent);letter-spacing:1.6px}.application button,.application .contact{border-radius:10px;font-size:12px;min-height:40px;padding:10px 15px}.application .primary{background:var(--app-accent);border-color:var(--app-accent);color:white;box-shadow:0 4px 10px color-mix(in srgb,var(--app-accent) 15%,transparent)}.application input,.application select,.application textarea{border:1px solid #dfe4ec;border-radius:10px;background:#fafbfd;min-height:42px;padding:10px 12px;font-size:13px}.application label{font-size:11px;color:#586477;letter-spacing:.1px}.application :is(input,select,textarea):focus{background:#fff;border-color:var(--app-accent);box-shadow:0 0 0 3px var(--app-tint)}.application .panel{border:1px solid var(--app-border);box-shadow:0 3px 12px #1a2c4703;border-radius:17px;padding:24px}.application .heading{margin-bottom:24px}.application .heading p{font-size:12px}.application .heading .actions{gap:8px}.application .stats{gap:16px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));margin:24px 0}.application .stat{position:relative;overflow:hidden;border:1px solid var(--app-border)!important;box-shadow:0 3px 12px #1a2c4703;border-radius:15px;padding:21px;background:#fff}.application .stat::after{content:'';position:absolute;width:58px;height:58px;right:-18px;top:-18px;background:var(--app-tint);border-radius:50%}.application .stat strong{font-size:30px;line-height:1.3;letter-spacing:-1px;color:var(--app-text);font-weight:750}.application .stat span{display:block;margin-top:6px;font-size:11px;color:var(--app-muted)}.application .stat:first-child{background:var(--app-deep);border-color:var(--app-deep)!important}.application .stat:first-child strong{color:#fff}.application .stat:first-child span{color:#d7e1ee}.application .stat:first-child::after{background:#ffffff12}
.application .workspace-welcome{padding:35px 36px!important;background:var(--app-deep)!important;color:white!important;border:0;border-radius:21px;min-height:224px;position:relative;overflow:hidden;display:flex;align-items:center;margin:0 0 24px!important;box-shadow:0 12px 30px #1a2c4710}.application .workspace-welcome h2{font-size:clamp(28px,3.3vw,40px);font-weight:650;letter-spacing:-1.2px;color:#fff;max-width:540px;margin:13px 0}.application .workspace-welcome p{color:#e3e6eb;max-width:480px;font-size:13px}.application .workspace-welcome .eyebrow{color:#f1d27a}.application .workspace-welcome img{height:200px;width:265px;object-fit:cover;border-radius:15px;transform:rotate(4deg);margin:0 0 -34px 25px;box-shadow:0 16px 35px #0002}.application .workspace-welcome::after{content:'';width:220px;height:220px;border:1px solid #ffffff12;border-radius:50%;position:absolute;right:190px;top:-90px;pointer-events:none}.app-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.app-quick>.eyebrow{grid-column:1/-1}.app-quick a{display:flex;align-items:center;gap:12px;padding:20px 18px;background:#fff;border:1px solid var(--app-border);border-radius:14px;text-decoration:none;font-size:12px;font-weight:650;color:var(--app-text)}.app-quick a svg:first-child{color:var(--app-accent);width:24px;height:24px}.app-quick a svg:last-child{margin-left:auto;width:16px;color:#8993a2}.app-quick a:hover{border-color:var(--app-accent);box-shadow:0 5px 20px #1a2c4708}.application #account-ready{display:none!important}
.application[data-app-view=overview] #dashboard>.heading,.application[data-app-view=overview] #dashboard>.space-guide,.application[data-app-view=overview] #dashboard>.panel,.application[data-app-view=overview] #dashboard>.privacy,.application[data-app-view=overview] #my-referral,.application[data-app-view=overview] #admin-panel>*:not(#admin-counts){display:none!important}
.application:not([data-app-view=overview]) :is(#workspace-welcome,.app-quick){display:none!important}.application[data-app-view=contacts] :is(#admin-panel,#my-referral){display:none!important}.application[data-app-view=qr] :is(#admin-panel,#dashboard){display:none!important}.application[data-app-view=team] :is(#dashboard,#my-referral){display:none!important}.application[data-app-view=contacts] .space-guide{display:none!important}.application #my-referral{max-width:780px;margin:auto;padding:36px}.application #my-qr{background:#fff;border:1px solid var(--app-border);border-radius:16px;width:max-content;padding:14px}.application #my-link{background:var(--app-tint);padding:12px;border-radius:8px;display:block;font-size:12px}
.application .filters{gap:16px;padding:0 0 16px}.application .filters label{margin-top:0}.application .lead{grid-template-columns:minmax(180px,1fr) 140px 210px;padding:20px 8px;border-color:#eef0f4}.application .lead:hover{background:#fafbfd}.application .lead strong{font-size:14px}.application .lead p{font-size:11px;margin:4px 0}.application .lead .badge{font-size:10px;border:1px solid #e8ddaa;background:#fffbec;color:#806819}.application .lead .actions button,.application .lead .contact{font-size:11px;min-height:34px}.application .account{grid-template-columns:minmax(180px,1fr) 130px 170px auto;padding:22px 4px;gap:15px}.application .account strong{font-size:14px}.application .account p{font-size:12px}.application .account button{background:var(--app-accent);color:white}.app-display-options{display:flex;justify-content:flex-end;gap:2px;margin:4px 0 15px}.app-display-options button{min-height:30px;border:1px solid var(--app-border);font-size:11px;padding:5px 12px;background:white}.app-display-options [aria-pressed=true]{color:var(--app-accent);background:var(--app-tint);border-color:var(--app-accent)}.application .card-view #list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.application .card-view .lead{display:flex;flex-direction:column;align-items:stretch;border:1px solid var(--app-border);border-radius:15px;padding:20px;gap:14px}.application .card-view .lead .actions{justify-content:flex-start;border-top:1px solid var(--app-border);padding-top:14px;margin-top:auto}.application .review-help{border:0;background:var(--app-tint);font-size:11px}.application .super-tools{background:linear-gradient(115deg,#fff,var(--app-tint));border:1px solid var(--app-border)}.application .space-guide{gap:16px}.application .privacy{font-size:10px}.application dialog{border:1px solid var(--app-border);border-radius:20px;box-shadow:0 30px 100px #0c182b40;padding:30px}.application dialog::backdrop{background:#10223980;backdrop-filter:blur(5px)}.application #app-help{max-width:480px}.application #app-help p{font-size:14px}.application #app-help button{margin-top:15px}
.application .pilot-filters{grid-template-columns:repeat(3,1fr);gap:10px 20px}.application .pilot-charts{gap:18px}.application .pilot-charts .panel{min-height:200px}.application .pilot-bar{font-size:12px;margin:18px 0}.application .pilot-bar meter{height:12px;accent-color:var(--app-accent)}.application #pilot-stats{grid-template-columns:repeat(5,1fr)}.application .pilot-record{font-size:12px}.application .pilot-record header{background:none;border:0;padding:0}.application .pilot-record form{padding:12px 16px;background:var(--app-canvas);border-radius:12px}.application .badge-pair{padding:22px;background:var(--app-tint);border-radius:18px;border:1px solid var(--app-border)}.application .badge-pair canvas{width:min(400px,100%)}.application #badge-content{margin-top:24px}.application .arrival-grid{gap:20px}.application .stock-fields{gap:16px}.application .capture-3d{margin-top:24px}.application .capture-3d>p{max-width:780px}.application .stock-workspace>h1{margin-bottom:28px}
/* Public forms and entry points */
body:not(.application) .login-layout{border:1px solid var(--space-line);border-radius:28px;overflow:hidden;box-shadow:0 20px 70px #3325310a;background:transparent;margin:20px auto 45px;max-width:1180px}.login-layout .login-story{border-radius:0!important;padding:42px!important;background:var(--app-deep)!important;color:white;position:relative;overflow:hidden}.login-layout .login-story h2{font-size:clamp(32px,4vw,50px);letter-spacing:-1.8px;line-height:1.12;color:white!important}.login-layout .login-story p{color:#e4e0e5!important;font-size:14px;line-height:1.8}.login-layout .login-story .story-kicker{color:#f1d27a!important}.login-layout .login-story .space-illustration{border-radius:20px!important;max-height:260px;object-fit:cover;transform:rotate(-2deg);box-shadow:0 15px 40px #0003;margin-top:25px}.login-layout .auth{box-shadow:none!important;border:0!important;margin:auto!important;padding:42px!important}.login-layout .auth h1{letter-spacing:-1.5px;font-size:35px!important}.login-layout .auth input{border-radius:12px;padding:14px;background:#f8f9fb}.login-layout .auth .primary{min-height:49px;border-radius:12px}.login-layout .login-assurance{font-size:11px}.orientation-form{box-shadow:0 20px 70px #69252f0a;border-radius:25px;padding:36px}.orientation-form h1{letter-spacing:-1.7px}.orientation-form input,.orientation-form select{border-radius:12px;background:#fffcfa;border-color:#ebdeda}.orientation-form #orientation-save{min-height:50px;background:#bf2540;border:0;border-radius:12px}.orientation-form .check{font-size:12px;line-height:1.65}.orientation-form label{font-size:12px}
@keyframes app-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.application .workspace-welcome,.application .panel,.application .stat,.app-quick a{animation:app-enter .4s ease both}.application .stat:nth-child(2){animation-delay:.04s}.application .stat:nth-child(3){animation-delay:.08s}.application .stat:nth-child(4){animation-delay:.12s}}
@media(max-width:1100px){:root{--app-nav:215px}.app-sidebar{padding-left:10px;padding-right:10px}.application main,.application main.pilotage,.application main.badge-workspace,.application main.stock-workspace{padding:28px 24px 45px!important}.application .account{grid-template-columns:1fr 1fr}.application .lead{grid-template-columns:minmax(160px,1fr) 110px 170px;gap:10px}.application #pilot-stats{grid-template-columns:repeat(3,1fr)}.application .workspace-welcome img{width:200px;height:180px}.app-topbar{padding:0 24px}}
@media(max-width:800px){body.application{padding-left:0}.app-sidebar{transform:translateX(-105%);transition:transform .23s ease;width:260px;box-shadow:20px 0 100px #10223933}.app-menu-open .app-sidebar{transform:translateX(0)}.app-menu-open .app-topbar{z-index:85}.app-menu-toggle{display:inline-flex!important}.app-topbar{height:60px;padding:0 16px;gap:12px}.app-breadcrumb{font-size:10px}.app-date{display:none}.app-help-button{margin-left:auto}.application main,.application main.pilotage,.application main.badge-workspace,.application main.stock-workspace{padding:22px 16px 40px!important}.application .workspace-welcome{padding:25px!important;min-height:210px}.application .workspace-welcome h2{font-size:29px}.application .workspace-welcome img{width:120px;height:150px;margin-left:8px}.application .workspace-welcome p{font-size:12px}.app-quick{grid-template-columns:1fr;gap:9px}.app-quick a{padding:15px}.application .panel{padding:20px}.application .stats,.application #pilot-stats{grid-template-columns:repeat(2,1fr);gap:10px}.application .stat{padding:18px}.application .stat strong{font-size:28px}.application .pilot-filters,.application .pilot-charts{grid-template-columns:1fr}.application .lead{grid-template-columns:1fr;gap:12px}.application .lead .actions{justify-content:flex-start}.application .card-view #list{grid-template-columns:1fr}.application .filters{flex-direction:column;align-items:stretch}.application .account{grid-template-columns:1fr 1fr}.application .account>div{grid-column:1/-1}.application .heading{gap:14px;align-items:flex-start}.application .heading h1{font-size:28px}.application .heading .actions{width:100%}.application .badge-pair{padding:12px}.login-layout .login-story{padding:28px!important}.login-layout .auth{padding:28px!important}.login-layout .login-story .space-illustration{max-height:180px}.app-sidebar a{min-height:46px}}
@media(max-width:420px){.application .workspace-welcome img{display:none}.app-breadcrumb{max-width:190px}.application .account{grid-template-columns:1fr}.application .account>*{grid-column:1}.application .pilot-record .assign-fields{grid-template-columns:1fr}}
@media print{.app-sidebar,.app-topbar{display:none!important}body.application{padding-left:0}.application .badge-pair{border:0;background:white;padding:0}}

/* Boutique client — une expérience de découverte, rouge Diamond. */
body[data-space=prospect]{background:#fbf8f5!important;color:#38232a}body[data-space=prospect] .brand-backdrop{background:radial-gradient(ellipse at 80% 0,#f4e1db77,transparent 55%)}body[data-space=prospect] .journey{max-width:1340px;padding:24px 34px 40px}body[data-space=prospect] .journey-brand{padding:0 0 24px;border-bottom:1px solid #eadfdc;margin-bottom:26px}body[data-space=prospect] .journey-layout{border-radius:28px;overflow:hidden;background:white;border:1px solid #ecded9;box-shadow:0 20px 70px #6f25300b;gap:0}body[data-space=prospect] .journey-visual{background:#5a1d30;border-radius:0;min-height:600px;position:relative;isolation:isolate}body[data-space=prospect] .journey-visual-copy{position:relative;z-index:2;padding:36px}body[data-space=prospect] .journey-visual-copy h2{font-family:Georgia,serif;font-size:clamp(38px,4.2vw,61px);line-height:1.05;letter-spacing:-2px;color:#fff9f1}body[data-space=prospect] .journey-visual-copy p{font-size:13px;line-height:1.8;max-width:330px;color:#f5e5e7}body[data-space=prospect] .journey-visual-copy .eyebrow{color:#edd199}body[data-space=prospect] .journey-visual>img{height:310px;object-fit:cover;width:100%;margin-top:-20px}body[data-space=prospect] .journey-visual-footer{position:relative;z-index:2;background:#4a1729;color:white;font-size:11px;padding:20px 30px}body[data-space=prospect] .journey-panel{padding:32px 38px;background:white;border:0;border-radius:0;box-shadow:none}body[data-space=prospect] .journey-panel input,body[data-space=prospect] .journey-panel select{background:#fffcfa;border:1px solid #e7dcd8;border-radius:13px;min-height:49px;padding:13px}body[data-space=prospect] .journey-panel h1{font-size:clamp(27px,3vw,39px);letter-spacing:-1.5px;line-height:1.15}body[data-space=prospect] .journey-options button{border-radius:15px;min-height:65px;border-color:#e9deda;box-shadow:none;text-align:left;transition:transform .18s,box-shadow .18s}body[data-space=prospect] .journey-options button:hover{box-shadow:0 5px 20px #6d26300c;transform:translateY(-2px)}body[data-space=prospect] .journey-reassurance{font-size:11px}body[data-space=prospect] .header{position:sticky;top:0;z-index:30;backdrop-filter:blur(15px);background:#ffffffed;border:1px solid #e9ded9;border-radius:20px;margin:12px auto 0;max-width:1270px;padding:18px 24px;box-shadow:0 6px 25px #59263205}body[data-space=prospect] .header .nav-link{font-size:12px;border-radius:9px;padding:10px 14px}body[data-space=prospect] .header .nav-link.active{background:#fff0ef;color:#a6243b}body[data-space=prospect] #explore-shell>main{max-width:1300px}body[data-space=prospect] .intro{margin:28px 0 36px;background:#f4ece6;border-radius:26px;padding:38px;overflow:hidden;gap:28px}body[data-space=prospect] .intro h1{font-family:Georgia,serif;font-size:clamp(43px,5.5vw,76px);line-height:1.02;letter-spacing:-3px;font-weight:500;color:#45222e}body[data-space=prospect] .intro h1 span{color:#ac2943}body[data-space=prospect] .intro-copy>p{font-size:13px;line-height:1.85;color:#775e65}body[data-space=prospect] .intro-actions{gap:10px}body[data-space=prospect] .intro-actions .button{font-size:12px;min-height:44px;padding:13px 18px;border-radius:12px}body[data-space=prospect] .intro-actions a.button{color:#6c2b3a;background:transparent;border:1px solid #d4b7bd}body[data-space=prospect] .campaign-feature{border-radius:20px;overflow:hidden;transform:rotate(2deg);box-shadow:0 15px 30px #6f26351a}body[data-space=prospect] .campaign-caption{background:#fff9f4;padding:13px 18px;font-size:11px}body[data-space=prospect] .discovery-steps{gap:14px;margin:22px 0 45px}body[data-space=prospect] .discovery-steps article{border:1px solid #eadfdb;background:white;border-radius:15px;padding:22px}body[data-space=prospect] .section-heading h2{font-size:clamp(27px,3vw,38px);letter-spacing:-1.4px;color:#44222d}body[data-space=prospect] .offers-grid{gap:20px}body[data-space=prospect] .offer-card{border:1px solid #eadfdb;border-radius:20px;overflow:hidden;background:white;box-shadow:0 5px 20px #59263205;transition:transform .22s,box-shadow .22s}body[data-space=prospect] .offer-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #59263212}body[data-space=prospect] .offer-copy{padding:24px}body[data-space=prospect] .offer-copy h3{font-size:23px;letter-spacing:-.8px}body[data-space=prospect] .offer-copy p{font-size:13px;line-height:1.7}body[data-space=prospect] .offer-copy .button{border-radius:11px;font-size:12px}body[data-space=prospect] .collection-tabs{background:#f1e9e4;border-radius:13px;padding:5px;gap:3px}body[data-space=prospect] .collection-tab{border:0!important;border-radius:9px;font-size:12px;background:transparent}body[data-space=prospect] .collection-tab.selected{background:white;color:#a6243b;box-shadow:0 3px 10px #5425310d}body[data-space=prospect] .filter-bar{background:white;border:1px solid #e9dfda;border-radius:15px;padding:16px;gap:15px}body[data-space=prospect] .filter-bar input,body[data-space=prospect] .filter-bar select{background:#fbf8f6;border-radius:10px;border-color:#e9dfda;font-size:12px}body[data-space=prospect] .product-card{border:1px solid #ebe0dc;border-radius:19px;background:white;overflow:hidden;box-shadow:0 3px 12px #59263204}body[data-space=prospect] .product-card:hover{box-shadow:0 12px 30px #5926320d}body[data-space=prospect] .product-card .button{font-size:11px;border-radius:10px}body[data-space=prospect] .contact-band{background:#531e31!important;border-radius:23px;padding:34px;color:white}body[data-space=prospect] .contact-band h2,body[data-space=prospect] .contact-band p{color:#fff7f1}body[data-space=prospect] .agency-grid article,body[data-space=prospect] .service-grid article{border:1px solid #e9dfda;border-radius:19px;background:white;padding:27px}body[data-space=prospect] dialog{border:1px solid #e9dfda;border-radius:22px;box-shadow:0 30px 100px #38202d33}body[data-space=prospect] dialog::backdrop{background:#321b2980;backdrop-filter:blur(7px)}
@media(max-width:800px){body[data-space=prospect] .journey{padding:16px}body[data-space=prospect] .journey-brand{padding-bottom:16px;margin-bottom:16px}body[data-space=prospect] .journey-panel{padding:24px}body[data-space=prospect] .journey-visual{min-height:0}body[data-space=prospect] .journey-visual-copy{padding:26px}body[data-space=prospect] .journey-visual-copy h2{font-size:38px}body[data-space=prospect] .journey-visual>img{height:200px}body[data-space=prospect] .header{border-radius:0;margin:0;padding:12px 15px;gap:10px;flex-wrap:wrap}body[data-space=prospect] .header nav{order:3;width:100%;justify-content:space-between;display:flex}body[data-space=prospect] .header .nav-link{font-size:11px;padding:8px 10px}body[data-space=prospect] .intro{margin:18px 0 26px;padding:24px;border-radius:21px;gap:25px}body[data-space=prospect] .intro h1{font-size:48px;letter-spacing:-2px}body[data-space=prospect] .campaign-feature{transform:none}body[data-space=prospect] .offers-grid{gap:16px}body[data-space=prospect] .filter-bar{padding:13px}body[data-space=prospect] .contact-band{padding:26px}body[data-space=prospect] .collection-tabs{overflow:auto;flex-wrap:nowrap}body[data-space=prospect] .collection-tab{white-space:nowrap}.application .demo-banner{margin-left:0}}

.application .workspace-welcome img{filter:none!important;opacity:1!important}.app-signout{width:100%;border:1px solid var(--app-border);font-size:11px;min-height:35px;background:#fafbfd;color:var(--app-muted)}

.application .lead>div:first-child{position:relative;padding-left:47px}.application .lead>div:first-child::before{content:attr(data-initial);position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--app-tint);color:var(--app-accent);font-size:11px;font-weight:750}.application .lead[data-status="Vente réalisée"] .badge{background:#edf8f2;border-color:#cce5d7;color:#24694a}.application .lead[data-status="À relancer"] .badge{background:#fff3e8;border-color:#f2d7b5;color:#946126}.application .lead[data-status="Rendez-vous"] .badge{background:#eef1ff;border-color:#d9dff5;color:#47589b}.application #admin-panel>.space-guide{display:none}.application #admin-panel>.heading h1{font-size:34px}
.signup-page .signup-layout{border-radius:28px;overflow:hidden;border:1px solid var(--space-line);box-shadow:0 20px 70px #3a25300b;background:white;gap:0!important}.signup-page .welcome-panel{background:var(--app-deep)!important;border-radius:0!important;padding:38px!important}.signup-page .welcome-panel h1,.signup-page .welcome-panel h2{color:#fff8f0!important;font-size:clamp(32px,4vw,48px);letter-spacing:-1.8px;line-height:1.12}.signup-page .welcome-panel p{color:#e5dce1!important;line-height:1.8;font-size:13px}.signup-page .welcome-photo{border-radius:17px;overflow:hidden;transform:rotate(-2deg)}.signup-page .auth{border:0!important;box-shadow:none!important;border-radius:0!important;padding:36px!important;background:white}.signup-page .auth h1{font-size:32px!important;letter-spacing:-1.2px}.signup-page .form-section-label{font-size:10px;letter-spacing:1.4px;border-bottom:1px solid var(--space-line);padding-bottom:12px;margin-top:24px}.signup-page input,.signup-page select{background:#fafbfd;border-radius:11px;min-height:46px}.signup-page .primary{border-radius:12px;min-height:48px}.signup-page .journey-steps li{font-size:12px}.signup-page #register-success{border:1px solid #d2e6d8;background:#f2fbf5;border-radius:20px;padding:30px}.signup-page .pending-status{border-radius:12px;background:#fff8e4;color:#7b6026;padding:15px}.directory-main{max-width:1100px;padding:35px 25px}.directory-main .directory-intro{background:#4d2331;color:white;border-radius:23px;padding:36px;border:0}.directory-main .directory-intro h1{font-size:clamp(32px,4vw,46px);letter-spacing:-1.7px;color:#fff7f0;max-width:650px}.directory-main .directory-intro p{color:#e9dfe2}.directory-main .directory-intro .eyebrow{color:#eaca8a}.directory-main .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.directory-main article{border:1px solid #e9dfe2;border-radius:19px;padding:27px;box-shadow:0 5px 20px #5b263005}.directory-main article h2{font-size:22px;letter-spacing:-.7px}.directory-main article a,.directory-main article button{border-radius:11px}.directory-main nav{justify-content:center}.directory-main #orientation-choice-consent{padding:20px;border-radius:14px;background:#fff4ee}
@media(max-width:800px){.signup-page .auth,.signup-page .welcome-panel{padding:26px!important}.signup-page .signup-layout{border-radius:20px}.directory-main{padding:24px 16px}.directory-main .directory-intro{padding:26px}}

.app-stock-tabs{display:flex;gap:7px;padding:6px;margin:25px 0;background:#eaecef;border-radius:13px;max-width:640px}.app-stock-tabs button{flex:1;background:transparent;border:0;color:var(--app-muted);min-height:42px}.app-stock-tabs button[aria-pressed=true]{background:white;color:var(--app-accent);box-shadow:0 2px 7px #172b450a}.application[data-stock-tab=inventory] :is(#stock-form,#capture-3d){display:none!important}.application[data-stock-tab=edit] #stock-manager>section,.application[data-stock-tab=model] #stock-manager>:not(.app-stock-tabs):not(#capture-3d){display:none!important}.application[data-stock-tab=model] #capture-3d{margin-top:0}.application .stock-workspace>p{font-size:12px;max-width:760px}.application .arrival-card{border:1px solid var(--app-border);border-radius:17px;overflow:hidden;box-shadow:0 5px 15px #173d6605}.application .arrival-card img{background:#f7f8fb;object-fit:contain}.application .arrival-card h3{font-size:16px}.application .arrival-card p{font-size:12px}.application .arrival-card button{width:100%;background:var(--app-tint);color:var(--app-accent);border-color:transparent}
body[data-space=prospect] .tryon-dialog{padding:24px;width:min(800px,95vw);background:#fffaf7}body[data-space=prospect] .tryon-stage{border-radius:19px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#eee6df,#cdbfb6);border:1px solid #e5d9d3}body[data-space=prospect] .tryon-toolbar{background:white;border:1px solid #e9ded9;padding:14px;border-radius:13px;margin-top:15px}body[data-space=prospect] .tryon-toolbar select{border-radius:10px;min-height:43px;background:#fbf8f5}body[data-space=prospect] .tryon-status{font-size:12px}body[data-space=prospect] .tryon-adjust{background:#f2eae5;border-radius:12px;padding:14px}body[data-space=prospect] .tryon-note{font-size:10px;line-height:1.7}
@media(max-width:600px){.app-stock-tabs{gap:2px}.app-stock-tabs button{padding:10px 6px!important;font-size:10px!important}.application .stock-workspace h1{font-size:29px}body[data-space=prospect] .tryon-dialog{padding:16px}body[data-space=prospect] .tryon-toolbar{padding:10px}}

@media(prefers-reduced-motion:reduce){.application *,body[data-space=prospect] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.application button:hover,body[data-space=prospect] .offer-card:hover{transform:none!important}}

/* Navigation tactile et raccourcis de suivi. */
.app-scrim,.app-bottom-nav{display:none}
.app-lead-shortcuts{display:flex;gap:8px;overflow-x:auto;padding:0 0 16px;scrollbar-width:thin}
.app-lead-shortcuts button{white-space:nowrap;background:#fff;color:var(--app-muted);border:1px solid var(--app-border);min-height:36px;padding:7px 13px}
.app-lead-shortcuts button[aria-pressed=true]{background:var(--app-tint);color:var(--app-accent);border-color:var(--app-accent);font-weight:750}

/* Rythme des tableaux de bord inspiré de l'ancienne plateforme. */
.application main{background:radial-gradient(circle at 95% 2%,color-mix(in srgb,var(--app-accent) 7%,transparent),transparent 33%)}
.application .workspace-welcome{background:linear-gradient(125deg,var(--app-deep),color-mix(in srgb,var(--app-deep) 76%,var(--app-accent)))!important}
.application .workspace-welcome::before{content:'';position:absolute;inset:auto -8% -75% 48%;aspect-ratio:1;border-radius:50%;border:1px solid #ffffff24;box-shadow:0 0 0 45px #ffffff05,0 0 0 90px #ffffff04;pointer-events:none}
.application .workspace-welcome>*{position:relative;z-index:1}
.application .heading h1,.application .workspace-welcome h2{font-weight:800}
.application .heading h1::after{content:'';display:block;width:52px;height:4px;margin-top:12px;border-radius:99px;background:var(--app-accent)}
.application .stats{counter-reset:app-stat}
.application .stat{min-height:154px;background:linear-gradient(145deg,var(--app-deep),color-mix(in srgb,var(--app-deep) 82%,var(--app-accent)))!important;color:#fff!important;border:1px solid #ffffff1a!important;box-shadow:0 9px 24px #1725401c,0 1px 2px #17254012!important;transition:transform .23s cubic-bezier(.2,.7,.2,1),box-shadow .23s,border-color .23s!important}
.application .stat:hover{transform:translateY(-5px);box-shadow:0 18px 34px #1725402c,0 1px 2px #17254012!important;border-color:#ffffff50!important}
.application .stat::before{counter-increment:app-stat;content:counter(app-stat,decimal-leading-zero);position:relative;display:grid;place-items:center;width:34px;height:34px;margin-bottom:13px;background:#ffffff18;border:1px solid #ffffff18;border-radius:10px;color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px}
.application .stat::after{background:color-mix(in srgb,var(--app-accent) 36%,transparent)!important;right:-12px;top:-20px;width:86px;height:86px;filter:blur(3px)}
.application .stat strong,.application .stat:first-child strong{color:#fff!important;font-size:clamp(28px,3vw,36px);font-weight:850}
.application .stat span,.application .stat:first-child span{color:#e7eaf1!important;font-size:12px;font-weight:600}
.application .panel{box-shadow:0 7px 24px #1a2c4709;border-color:color-mix(in srgb,var(--app-border) 78%,var(--app-accent))}
.application .panel h2{font-weight:800}
.application .lead,.application .account,.application .pilot-record,.application .arrival-card{transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.application :is(.card-view .lead,.account,.pilot-record,.arrival-card):hover{transform:translateY(-3px);box-shadow:0 12px 26px #1a2c4714;border-color:color-mix(in srgb,var(--app-accent) 45%,var(--app-border))}
.application :is(.app-quick a,.app-sidebar a,.app-bottom-nav a) svg{transition:transform .18s}
.application :is(.app-quick a,.app-sidebar a,.app-bottom-nav a):hover svg:first-child{transform:scale(1.12)}
.application .primary{position:relative;overflow:hidden;font-weight:760;box-shadow:0 8px 16px color-mix(in srgb,var(--app-accent) 24%,transparent)}
.application .primary:hover:not(:disabled){box-shadow:0 12px 22px color-mix(in srgb,var(--app-accent) 35%,transparent);transform:translateY(-2px)}
.application .primary:focus-visible,.application button:focus-visible{outline:3px solid color-mix(in srgb,var(--app-accent) 60%,white);outline-offset:2px}
.application .app-quick a{box-shadow:0 5px 16px #1a2c4709}
.application .app-quick a:hover{transform:translateY(-3px);box-shadow:0 13px 24px #1a2c4716}
.application .app-display-options button[aria-pressed=true],.application .app-stock-tabs button[aria-pressed=true]{box-shadow:0 3px 10px #172b451c}
@keyframes diamond-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes diamond-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 20%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@media(prefers-reduced-motion:no-preference){.application .stat{animation:diamond-rise .48s cubic-bezier(.2,.7,.2,1) both}.application .stat:nth-child(2){animation-delay:.06s}.application .stat:nth-child(3){animation-delay:.12s}.application .stat:nth-child(4){animation-delay:.18s}.application .stat:nth-child(5){animation-delay:.24s}.application .app-lead-shortcuts button[aria-pressed=true]{animation:diamond-glow .45s ease-out}}

/* Parcours client et inscriptions : mouvements courts, repères clairs. */
body[data-space=prospect] .offer-card{position:relative;isolation:isolate;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s}
body[data-space=prospect] .offer-card::after{content:'';position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color .24s}
body[data-space=prospect] .offer-card:hover::after{border-color:#c9233b66}
body[data-space=prospect] :is(.offer-card .button,.intro-actions .button,.product-card .button){font-weight:750;transition:transform .18s,box-shadow .18s,background .18s}
body[data-space=prospect] :is(.offer-card .button,.intro-actions .button,.product-card .button):hover{transform:translateY(-2px);box-shadow:0 9px 20px #70293d24}
body[data-space=prospect] .product-card{transition:transform .22s,box-shadow .22s}
body[data-space=prospect] .product-card:hover{transform:translateY(-4px)}
.login-layout,.signup-page .signup-layout{box-shadow:0 24px 80px #33253117!important}
.login-layout :is(button,.contact),.signup-page :is(button,.contact){transition:transform .18s,box-shadow .18s,background .18s}
.login-layout :is(button,.contact):hover,.signup-page :is(button,.contact):hover{transform:translateY(-2px);box-shadow:0 9px 20px #3325311c}
.signup-page .journey-steps li{transition:transform .2s,color .2s}.signup-page .journey-steps li:hover{transform:translateX(4px)}
.signup-page .welcome-panel .journey-steps li :is(div,strong){color:#fff8f3!important}
.signup-page .welcome-panel .journey-steps li p{color:#e9dce0!important}
@media(prefers-reduced-motion:no-preference){body[data-space=prospect] .intro{animation:diamond-rise .55s ease both}body[data-space=prospect] .offer-card{animation:diamond-rise .52s ease both}body[data-space=prospect] .offer-card:nth-child(2){animation-delay:.08s}body[data-space=prospect] .offer-card:nth-child(3){animation-delay:.16s}.login-layout,.signup-page .signup-layout{animation:diamond-rise .55s ease both}}
@media(prefers-reduced-motion:reduce){body[data-space=prospect] .offer-card,.login-layout,.signup-page .signup-layout{animation:none!important}body[data-space=prospect] :is(.offer-card,.product-card,.button):hover,.login-layout :is(button,.contact):hover,.signup-page :is(button,.contact):hover{transform:none!important}}
@media(max-width:800px){
 .application main,.application main.pilotage,.application main.badge-workspace,.application main.stock-workspace{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
 .app-scrim{position:fixed;inset:0;z-index:75;background:#0c182b80;border:0;border-radius:0;min-height:0;padding:0}
 .app-menu-open .app-scrim{display:block}
 .app-menu-open .app-sidebar{z-index:90}
 .app-bottom-nav{position:fixed;z-index:70;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#ffffffef;backdrop-filter:blur(18px);border-top:1px solid var(--app-border);padding:5px 5px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -6px 28px #182b4710}
 .app-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:57px;color:#758093;text-decoration:none;font-size:10px;font-weight:650;border-radius:11px}
 .app-bottom-nav a svg{width:20px;height:20px}
 .app-bottom-nav a[aria-current]{color:var(--app-accent);background:var(--app-tint)}
 .app-bottom-nav a:focus-visible,.app-sidebar a:focus-visible,.app-lead-shortcuts button:focus-visible{outline:3px solid var(--app-accent);outline-offset:2px}
}

/* === DIAMOND OPTIQUE — PACK AMÉLIORATION PROSPECTS, COMMERCIAUX & ADMIN (25 OCT 2026) === */

/* 1. ANIMATIONS ESPACE PROSPECTS */
@keyframes diamond-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes diamond-sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}
@keyframes diamond-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(201, 35, 59, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(201, 35, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 35, 59, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-space=prospect] .campaign-promo {
    animation: diamond-float 4.2s ease-in-out infinite;
    backdrop-filter: blur(10px);
  }
  body[data-space=prospect] .offer-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-140%) skewX(-18deg);
    z-index: 3;
    pointer-events: none;
  }
  body[data-space=prospect] .offer-card:hover::before {
    animation: diamond-sheen 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body[data-space=prospect] .discovery-steps article,
  body[data-space=prospect] .agency-grid article,
  body[data-space=prospect] .service-grid article,
  body[data-space=prospect] .product-card {
    animation: diamond-rise 0.52s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  body[data-space=prospect] .discovery-steps article:nth-child(2),
  body[data-space=prospect] .agency-grid article:nth-child(2),
  body[data-space=prospect] .product-card:nth-child(3n+2) {
    animation-delay: 0.08s;
  }
  body[data-space=prospect] .discovery-steps article:nth-child(3),
  body[data-space=prospect] .agency-grid article:nth-child(3),
  body[data-space=prospect] .product-card:nth-child(3n+3) {
    animation-delay: 0.16s;
  }
  body[data-space=prospect] .intro-actions .button.red,
  body[data-space=prospect] .intro-actions .primary {
    animation: diamond-pulse-ring 2.8s infinite;
  }
}

body[data-space=prospect] .product-card .product-image img {
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1);
}
body[data-space=prospect] .product-card:hover .product-image img {
  transform: scale(1.06);
}
body[data-space=prospect] .agency-grid article,
body[data-space=prospect] .service-grid article {
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.24s, border-color 0.24s;
}
body[data-space=prospect] .agency-grid article:hover,
body[data-space=prospect] .service-grid article:hover {
  transform: translateY(-4px);
  border-color: #c9233b55 !important;
  box-shadow: 0 14px 32px rgba(91, 36, 42, 0.08);
}

/* 2. AMÉLIORATION ESPACE COMMERCIAL & PARTENAIRE */
.application .lead {
  position: relative;
  border-radius: 14px;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-left: 4px solid transparent;
}
.application .lead[data-status="À relancer"] {
  border-left-color: #d97706;
  background: linear-gradient(90deg, #fffbeb44, transparent 35%);
}
.application .lead[data-status="Rendez-vous"] {
  border-left-color: #2563eb;
  background: linear-gradient(90deg, #eff6ff44, transparent 35%);
}
.application .lead[data-status="Vente réalisée"] {
  border-left-color: #16a34a;
  background: linear-gradient(90deg, #f0fdf444, transparent 35%);
}
.application .lead .badge {
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  letter-spacing: 0.2px;
}
.application #my-referral {
  background: linear-gradient(135deg, #ffffff 60%, var(--app-tint));
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
}
.application #my-link {
  border: 1px dashed color-mix(in srgb, var(--app-accent) 40%, transparent);
  font-weight: 650;
  transition: background 0.2s, transform 0.2s;
}
.application #my-link:hover {
  background: #fff;
  transform: translateX(2px);
}

/* 3. AMÉLIORATION ESPACE ADMINISTRATION & PILOTAGE */
body[data-space=admin].application .account {
  background: #ffffff;
  border: 1px solid #dce5ee;
  border-left: 4px solid #245b91;
  border-radius: 14px;
  padding: 18px 20px !important;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(18, 45, 76, 0.04);
}
body[data-space=admin].application .account:hover {
  border-color: #245b91;
  box-shadow: 0 10px 26px rgba(18, 45, 76, 0.1);
}
body[data-space=admin].application #admin-counts .stat,
body[data-space=admin].application #pilot-stats .stat {
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.application .pilot-bar {
  padding: 10px 14px;
  background: var(--app-canvas);
  border-radius: 11px;
  border: 1px solid var(--app-border);
}

/* === DIAMOND OPTIQUE — EDITION FUTURISTE & HAUTE LUNETTERIE === */
:root {
  --do-navy-deep: #0b213a;
  --do-navy: #173d66;
  --do-navy-light: #23588f;
  --do-gold: #f2c32b;
  --do-gold-soft: #ffe484;
  --do-ice: #f3f6fa;
  --do-glass: rgba(255, 255, 255, 0.88);
  --do-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes doAuroraFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -16px, 0) scale(1.08); }
}

@keyframes doGoldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes doBeamSweep {
  0% { transform: translateX(-140%) skewX(-22deg); }
  35%, 100% { transform: translateX(240%) skewX(-22deg); }
}

@keyframes doLevitate {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@keyframes doPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 195, 43, 0.65); }
  70% { box-shadow: 0 0 0 8px rgba(242, 195, 43, 0); }
}

@keyframes doStaggerIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fond global subtil à reflets optiques */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 195, 43, 0.10), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(23, 61, 102, 0.10), transparent 40%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f9 100%) !important;
  overflow-x: hidden;
}

/* Header effet verre optique */
header.space-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(23, 61, 102, 0.10) !important;
  box-shadow: 0 10px 30px rgba(11, 33, 58, 0.05);
  transition: box-shadow 0.35s var(--do-ease);
}

.space-badge {
  position: relative;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(23, 61, 102, 0.09), rgba(242, 195, 43, 0.18)) !important;
  color: var(--do-navy) !important;
  border: 1px solid rgba(23, 61, 102, 0.16);
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Conteneur principal Login / Inscription */
.login-layout {
  position: relative;
  border-radius: 30px !important;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(11, 33, 58, 0.16),
    0 0 0 1px rgba(23, 61, 102, 0.08) !important;
  transition: transform 0.45s var(--do-ease), box-shadow 0.45s var(--do-ease);
}

/* Panneau gauche : Bleu Nuit Diamond & Halo Or Solaire */
.login-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 25%) var(--my, 20%), rgba(242, 195, 43, 0.22), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(35, 88, 143, 0.45), transparent 50%),
    linear-gradient(155deg, #091c32 0%, #173d66 58%, #0d2746 100%) !important;
  isolation: isolate;
}

.login-story::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(242, 195, 43, 0.16), transparent 35%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.08), transparent 40%);
  animation: doAuroraFloat 9s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.login-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32p


cd "C:\Users\DELL\Documents\Codex\2026-10-17\reprend-tout-sa-sur-cloudfare-pour\outputs\diamond-optique-pages"

$futurCss = @'

/* === DIAMOND OPTIQUE — EDITION FUTURISTE & HAUTE LUNETTERIE === */
:root {
  --do-navy-deep: #0b213a;
  --do-navy: #173d66;
  --do-navy-light: #23588f;
  --do-gold: #f2c32b;
  --do-gold-soft: #ffe484;
  --do-ice: #f3f6fa;
  --do-glass: rgba(255, 255, 255, 0.88);
  --do-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes doAuroraFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -16px, 0) scale(1.08); }
}

@keyframes doGoldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes doBeamSweep {
  0% { transform: translateX(-140%) skewX(-22deg); }
  35%, 100% { transform: translateX(240%) skewX(-22deg); }
}

@keyframes doLevitate {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@keyframes doPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 195, 43, 0.65); }
  70% { box-shadow: 0 0 0 8px rgba(242, 195, 43, 0); }
}

@keyframes doStaggerIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fond global subtil à reflets optiques */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 195, 43, 0.10), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(23, 61, 102, 0.10), transparent 40%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f9 100%) !important;
  overflow-x: hidden;
}

/* Header effet verre optique */
header.space-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(23, 61, 102, 0.10) !important;
  box-shadow: 0 10px 30px rgba(11, 33, 58, 0.05);
  transition: box-shadow 0.35s var(--do-ease);
}

.space-badge {
  position: relative;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(23, 61, 102, 0.09), rgba(242, 195, 43, 0.18)) !important;
  color: var(--do-navy) !important;
  border: 1px solid rgba(23, 61, 102, 0.16);
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Conteneur principal Login / Inscription */
.login-layout {
  position: relative;
  border-radius: 30px !important;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(11, 33, 58, 0.16),
    0 0 0 1px rgba(23, 61, 102, 0.08) !important;
  transition: transform 0.45s var(--do-ease), box-shadow 0.45s var(--do-ease);
}

/* Panneau gauche : Bleu Nuit Diamond & Halo Or Solaire */
.login-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 25%) var(--my, 20%), rgba(242, 195, 43, 0.22), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(35, 88, 143, 0.45), transparent 50%),
    linear-gradient(155deg, #091c32 0%, #173d66 58%, #0d2746 100%) !important;
  isolation: isolate;
}

.login-story::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(242, 195, 43, 0.16), transparent 35%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.08), transparent 40%);
  animation: doAuroraFloat 9s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.login-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 85%);
  pointer-events: none;
  z-index: -1;
}

.story-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--do-gold) !important;
  text-shadow: 0 0 18px rgba(242, 195, 43, 0.35);
}

.story-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--do-gold);
  animation: doPulseDot 2.2s infinite;
}

.login-story h2 em {
  background: linear-gradient(120deg, #f2c32b 0%, #fff0a8 45%, #f2c32b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: doGoldShimmer 5s linear infinite;
}

/* Capsules Glassmorphism */
.story-features span {
  position: relative;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 195, 43, 0.28) !important;
  color: #ffffff !important;
  transition: transform 0.3s var(--do-ease), border-color 0.3s var(--do-ease), background 0.3s var(--do-ease), box-shadow 0.3s var(--do-ease);
}

.story-features span:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(242, 195, 43, 0.16) !important;
  border-color: var(--do-gold) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 16px rgba(242, 195, 43, 0.25);
}

/* Illustration 3D en lévitation */
.space-illustration {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 22px 48px rgba(5, 15, 28, 0.45),
    0 0 0 1px rgba(242, 195, 43, 0.20) !important;
  animation: doLevitate 6s ease-in-out infinite;
  transition: transform 0.4s var(--do-ease), box-shadow 0.4s var(--do-ease);
  will-change: transform;
}

.login-story:hover .space-illustration {
  box-shadow:
    0 28px 58px rgba(5, 15, 28, 0.55),
    0 0 28px rgba(242, 195, 43, 0.28) !important;
}

/* Panneau formulaire droite */
.auth {
  position: relative;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px);
  transition: transform 0.35s var(--do-ease), box-shadow 0.35s var(--do-ease);
}

.auth > * {
  animation: doStaggerIn 0.55s var(--do-ease) both;
}
.auth > *:nth-child(1) { animation-delay: 0.05s; }
.auth > *:nth-child(2) { animation-delay: 0.10s; }
.auth > *:nth-child(3) { animation-delay: 0.15s; }
.auth > *:nth-child(4) { animation-delay: 0.20s; }
.auth > *:nth-child(5) { animation-delay: 0.25s; }
.auth > *:nth-child(6) { animation-delay: 0.30s; }

/* Capsules d'étapes 01 & 02 interactives */
.login-assurance span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.35s var(--do-ease);
  border: 1px solid rgba(23, 61, 102, 0.14) !important;
}

.login-assurance span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a7bc;
  transition: all 0.35s var(--do-ease);
}

.login-assurance span.is-active-step {
  background: linear-gradient(135deg, #173d66, #1f5085) !important;
  color: #ffffff !important;
  border-color: #173d66 !important;
  box-shadow: 0 8px 20px rgba(23, 61, 102, 0.22);
  transform: translateY(-2px);
}

.login-assurance span.is-active-step::before {
  background: var(--do-gold);
  box-shadow: 0 0 10px var(--do-gold);
}

/* Champs de saisie futuristes */
input, select, textarea {
  border-radius: 12px !important;
  border: 1.5px solid #d5dfeb !important;
  background: #f8fafd !important;
  transition: all 0.28s var(--do-ease) !important;
}

input:hover, select:hover, textarea:hover {
  border-color: #9cb3cc !important;
  background: #ffffff !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  background: #ffffff !important;
  border-color: var(--do-navy) !important;
  box-shadow:
    0 0 0 4px rgba(23, 61, 102, 0.11),
    0 10px 24px rgba(23, 61, 102, 0.08),
    inset 0 0 0 1px rgba(242, 195, 43, 0.35) !important;
  transform: translateY(-1px);
}

/* Bouton Principal avec Faisceau Optique */
button.primary, .primary {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #173d66 0%, #0e2947 60%, #1d4d80 100%) !important;
  border: 1px solid rgba(242, 195, 43, 0.40) !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow:
    0 12px 26px rgba(23, 61, 102, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition: transform 0.28s var(--do-ease), box-shadow 0.28s var(--do-ease), filter 0.28s var(--do-ease) !important;
}

button.primary::after, .primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(242, 195, 43, 0.32), rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-140%) skewX(-22deg);
  animation: doBeamSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

button.primary:hover:not(:disabled), .primary:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 16px 34px rgba(23, 61, 102, 0.34),
    0 0 0 2px rgba(242, 195, 43, 0.55) !important;
  filter: brightness(1.05);
}

button.primary:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

/* Barre de navigation Workspace façon Dock VisionOS */
.workspace-nav {
  position: sticky;
  top: 76px;
  z-index: 45;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(23, 61, 102, 0.12) !important;
  box-shadow: 0 14px 34px rgba(11, 33, 58, 0.08) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
}

.workspace-nav a {
  border-radius: 999px !important;
  transition: all 0.25s var(--do-ease) !important;
}

.workspace-nav a:hover {
  background: rgba(23, 61, 102, 0.08) !important;
  transform: translateY(-1px);
}

/* Cartes KPI (.stat), Guides (.space-guide article) & Panels (.panel) */
.stat, .panel, .space-guide article {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(23, 61, 102, 0.10) !important;
  box-shadow: 0 12px 32px rgba(11, 33, 58, 0.06) !important;
  transition: transform 0.32s var(--do-ease), box-shadow 0.32s var(--do-ease), border-color 0.32s var(--do-ease) !important;
}

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--do-navy), var(--do-gold));
}

.stat:hover, .space-guide article:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 195, 43, 0.55) !important;
  box-shadow: 0 20px 42px rgba(23, 61, 102, 0.12) !important;
}

.space-guide article > span {
  background: linear-gradient(135deg, var(--do-navy), var(--do-navy-deep)) !important;
  color: var(--do-gold) !important;
  border: 1px solid rgba(242, 195, 43, 0.45);
  box-shadow: 0 8px 18px rgba(23, 61, 102, 0.20);
}

/* Lignes de comptes & prospects interactives */
.account, .lead {
  border-radius: 14px;
  padding-left: 14px !important;
  padding-right: 14px !important;
  transition: background 0.25s var(--do-ease), transform 0.25s var(--do-ease), box-shadow 0.25s var(--do-ease);
}

.account:hover, .lead:hover {
  background: rgba(243, 246, 250, 0.9) !important;
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 var(--do-gold);
}

/* === DIAMOND OPTIQUE — COCKPIT UNIFIE & ANIMATIONS FUTURISTES V2 === */
:root {
  --do-navy-950: #071526;
  --do-navy-900: #0b213a;
  --do-navy-800: #123154;
  --do-navy: #173d66;
  --do-gold: #f2c32b;
  --do-gold-bright: #ffe074;
  --do-cyan: #38bdf8;
  --do-emerald: #10b981;
  --do-rose: #f43f5e;
  --do-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animations de révélation sur la boutique et les espaces */
@keyframes doCardReveal {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes doPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

.do-reveal-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--do-ease), transform 0.65s var(--do-ease);
}

.do-reveal-ready.do-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Layout avec Sidebar fixe quand le Cockpit est actif */
body.do-cockpit-active {
  padding-left: 268px !important;
  background: #0b192c !important;
  color: #e2e8f0 !important;
  transition: padding-left 0.35s var(--do-ease);
}

body.do-cockpit-active.do-sidebar-collapsed {
  padding-left: 78px !important;
}

@media (max-width: 960px) {
  body.do-cockpit-active,
  body.do-cockpit-active.do-sidebar-collapsed {
    padding-left: 0 !important;
  }
}

/* Sidebar Diamond Optique Prospection QR */
.do-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 268px;
  background: linear-gradient(180deg, #071526 0%, #0b213a 65%, #08182b 100%);
  border-right: 1px solid rgba(242, 195, 43, 0.18);
  color: #f8fafc;
  z-index: 120;
  display: flex;
  flex-direction: column;
  box-shadow: 14px 0 40px rgba(3, 10, 20, 0.45);
  transition: width 0.35s var(--do-ease), transform 0.35s var(--do-ease);
  user-select: none;
}

body.do-sidebar-collapsed .do-sidebar {
  width: 78px;
}

.do-sidebar-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 12px;
}

.do-brand-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--do-gold);
  box-shadow: 0 0 14px var(--do-gold);
  flex-shrink: 0;
}

.do-brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #ffffff;
  line-height: 1.15;
}

.do-brand-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--do-gold);
  margin-top: 3px;
  font-weight: 700;
}

body.do-sidebar-collapsed .do-brand-text,
body.do-sidebar-collapsed .do-nav-label,
body.do-sidebar-collapsed .do-sidebar-section-label,
body.do-sidebar-collapsed .do-partner-mini-list {
  display: none !important;
}

.do-sidebar-section-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #64748b;
  padding: 16px 20px 6px;
  font-weight: 700;
}

.do-sidebar-nav {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
}

.do-nav-btn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--do-ease);
  position: relative;
}

.do-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateX(3px);
}

.do-nav-btn.is-active {
  background: linear-gradient(135deg, #d4a72c 0%, #b88a14 100%);
  color: #071526;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(242, 195, 43, 0.28);
}

.do-nav-icon {
  font-size: 17px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.do-nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #e2e8f0;
}

.do-nav-btn.is-active .do-nav-count {
  background: rgba(7, 21, 38, 0.22);
  color: #071526;
}

/* Liste rapide PAR PARTENAIRE dans la sidebar */
.do-partner-mini-list {
  margin-top: 8px;
  padding: 6px 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.do-partner-mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.do-partner-mini-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.do-partner-mini-item span:last-child {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}

.do-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Topbar Cockpit */
.do-cockpit-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: rgba(11, 33, 58, 0.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(242, 195, 43, 0.16);
  border-radius: 18px;
  margin-bottom: 22px;
  box-shadow: 0 16px 38px rgba(4, 12, 24, 0.35);
}

.do-cockpit-title h2 {
  margin: 0;
  font-size: 24px;
  color: #ffffff !important;
  font-weight: 800;
}

.do-cockpit-title small {
  color: #94a3b8 !important;
  font-size: 12px;
}

.do-cockpit-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.do-cockpit-search {
  min-width: 260px;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(7, 21, 38, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.do-cockpit-search:focus {
  border-color: var(--do-gold) !important;
  box-shadow: 0 0 0 3px rgba(242, 195, 43, 0.2) !important;
}

.do-auto-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
}

.do-auto-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: doPulseGreen 2s infinite;
}

/* Bandeau d'ajout rapide (+ Ajouter un partenaire / + Ajouter un commercial) */
.do-quick-add-box {
  background: linear-gradient(145deg, rgba(14, 38, 68, 0.92), rgba(9, 25, 46, 0.95));
  border: 1px solid rgba(242, 195, 43, 0.22);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: 0 18px 42px rgba(4, 12, 24, 0.32);
}

.do-quick-add-box h3 {
  margin: 0 0 14px;
  font-size: 15px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.do-quick-add-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 900px) {
  .do-quick-add-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.do-quick-add-grid label {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.do-quick-add-grid input {
  background: rgba(7, 21, 38, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  color: #ffffff !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.do-btn-emerald {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 800 !important;
  min-height: 42px !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.28);
}

.do-btn-gold {
  background: linear-gradient(135deg, #f2c32b, #d4a017) !important;
  color: #071526 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 15px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-height: 36px !important;
  cursor: pointer;
}

.do-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  min-height: 36px !important;
  cursor: pointer;
}

/* Tableau Cockpit Pro (Partenaires & Commerciaux) */
.do-table-card {
  background: linear-gradient(160deg, rgba(13, 35, 62, 0.94), rgba(8, 23, 42, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 18px;
  overflow-x: auto;
  box-shadow: 0 22px 48px rgba(3, 10, 20, 0.4);
}

.do-grid-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.do-grid-table th {
  text-align: left;
  font-size: 12px;
  color: #94a3b8;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-weight: 700;
}

.do-grid-table td {
  padding: 14px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  vertical-align: middle;
  color: #e2e8f0;
  font-size: 13px;
}

.do-grid-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* Miniature de badge dans chaque ligne */
.do-badge-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 94px;
}

.do-badge-thumb {
  width: 88px;
  height: 112px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.18), rgba(7, 21, 38, 0.95));
  border: 1.5px solid #0ea5e9;
  display: grid;
  place-items: center;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.18);
  transition: transform 0.25s var(--do-ease), border-color 0.25s;
}

.do-badge-thumb:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--do-gold);
}

.do-mini-btn {
  width: 88px;
  min-height: 24px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  background: rgba(15, 35, 60, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
}

.do-mini-btn:hover {
  border-color: var(--do-gold) !important;
  color: var(--do-gold) !important;
}

/* Pastille Badge Reçu / Non reçu */
.do-received-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}

.do-received-pill.is-no {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border-color: rgba(244, 63, 94, 0.32);
}

.do-received-pill.is-yes {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}

.do-avatar-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.do-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #e11d48, #be123c);
}

.do-inline-input, .do-inline-select {
  background: rgba(7, 21, 38, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  min-height: 36px !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

/* Cartes KPI Références */
.do-ref-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

@media (max-width: 850px) {
  .do-ref-kpis { grid-template-columns: 1fr 1fr; }
}

.do-ref-card {
  background: linear-gradient(150deg, rgba(15, 38, 67, 0.95), rgba(9, 24, 44, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 14px 32px rgba(3, 10, 20, 0.32);
}

.do-ref-card strong {
  display: block;
  font-size: 32px;
  color: #ffffff;
  margin: 10px 0 4px;
}

.do-ref-card span {
  font-size: 12px;
  color: #94a3b8;
}

.do-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-radius: 14px;
  background: rgba(13, 35, 62, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.22s var(--do-ease), border-color 0.22s;
}

.do-ref-row:hover {
  transform: translateX(4px);
  border-color: var(--do-gold);
}

/* Modale d'aperçu Recto / Verso du Badge */
.do-badge-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 24, 0.78);
  backdrop-filter: blur(10px);
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
}

.do-badge-modal {
  background: linear-gradient(160deg, #0d233e 0%, #08172a 100%);
  border: 1px solid rgba(242, 195, 43, 0.32);
  border-radius: 22px;
  padding: 26px;
  max-width: 780px;
  width: 100%;
  color: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

.do-badge-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.do-badge-canvases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  text-align: center;
}

@media (max-width: 680px) {
  .do-badge-canvases { grid-template-columns: 1fr; }
}

.do-badge-canvases canvas {
  width: 100%;
  max-width: 290px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  background: #ffffff;
}

.do-badge-modal-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}
/* === DIAMOND OPTIQUE — WEB APP TENDANCE & FUTURISTE === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-base: #060913;
  --bg-surface: #0b1329;
  --bg-card: rgba(15, 23, 42, 0.75);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(242, 195, 43, 0.35);
  --accent-gold: #f2c32b;
  --accent-cyan: #38bdf8;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --radius-xl: 24px;
  --radius-lg: 16px;
  --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.12);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: var(--bg-base) !important;
  color: var(--text-main) !important;
  background-image: 
    radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(242, 195, 43, 0.06), transparent 40%) !important;
  min-height: 100vh;
}

/* Header Web App hautement stylisé */
header.space-header {
  background: rgba(11, 19, 41, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  padding: 14px 28px !important;
}

.space-badge {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(242, 195, 43, 0.15)) !important;
  color: var(--accent-gold) !important;
  border: 1px solid var(--border-gold) !important;
  font-weight: 700;
  border-radius: 99px !important;
  padding: 6px 14px !important;
}

/* Sidebar Web App moderne */
.do-sidebar {
  background: rgba(8, 14, 30, 0.95) !important;
  backdrop-filter: blur(24px);
  border-right: 1px solid var(--border-glass) !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}

.do-nav-btn {
  border-radius: 12px !important;
  margin: 2px 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.do-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  transform: translateX(4px);
}

.do-nav-btn.is-active {
  background: linear-gradient(135deg, #f2c32b 0%, #d4a017 100%) !important;
  color: #060913 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(242, 195, 43, 0.3);
}

/* Cartes & Tableaux effet Verre Dépoli (Glassmorphism) */
.panel, .do-table-card, .do-quick-add-box, .do-ref-card, .auth {
  background: var(--bg-card) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), var(--shadow-glow) !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.panel:hover, .do-table-card:hover {
  border-color: rgba(242, 195, 43, 0.2) !important;
}

/* Champs de formulaires futuristes */
input, select, textarea {
  background: rgba(6, 9, 19, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
  background: rgba(6, 9, 19, 0.95) !important;
}

/* Boutons d'action néon et or */
button.primary, .do-btn-emerald, .do-btn-gold {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

button.primary:hover, .do-btn-emerald:hover, .do-btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* Tableaux web app */
.do-grid-table th {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-glass);
}

.do-grid-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* === DIAMOND OPTIQUE — WEB APP TENDANCE & FUTURISTE === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-base: #060913;
  --bg-surface: #0b1329;
  --bg-card: rgba(15, 23, 42, 0.75);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(242, 195, 43, 0.35);
  --accent-gold: #f2c32b;
  --accent-cyan: #38bdf8;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --radius-xl: 24px;
  --radius-lg: 16px;
  --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.12);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: var(--bg-base) !important;
  color: var(--text-main) !important;
  background-image: 
    radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(242, 195, 43, 0.06), transparent 40%) !important;
  min-height: 100vh;
}

/* Header Web App hautement stylisé */
header.space-header {
  background: rgba(11, 19, 41, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  padding: 14px 28px !important;
}

.space-badge {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(242, 195, 43, 0.15)) !important;
  color: var(--accent-gold) !important;
  border: 1px solid var(--border-gold) !important;
  font-weight: 700;
  border-radius: 99px !important;
  padding: 6px 14px !important;
}

/* Sidebar Web App moderne */
.do-sidebar {
  background: rgba(8, 14, 30, 0.95) !important;
  backdrop-filter: blur(24px);
  border-right: 1px solid var(--border-glass) !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}

.do-nav-btn {
  border-radius: 12px !important;
  margin: 2px 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.do-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  transform: translateX(4px);
}

.do-nav-btn.is-active {
  background: linear-gradient(135deg, #f2c32b 0%, #d4a017 100%) !important;
  color: #060913 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(242, 195, 43, 0.3);
}

/* Cartes & Tableaux effet Verre Dépoli (Glassmorphism) */
.panel, .do-table-card, .do-quick-add-box, .do-ref-card, .auth {
  background: var(--bg-card) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), var(--shadow-glow) !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.panel:hover, .do-table-card:hover {
  border-color: rgba(242, 195, 43, 0.2) !important;
}

/* Champs de formulaires futuristes */
input, select, textarea {
  background: rgba(6, 9, 19, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
  background: rgba(6, 9, 19, 0.95) !important;
}

/* Boutons d'action néon et or */
button.primary, .do-btn-emerald, .do-btn-gold {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

button.primary:hover, .do-btn-emerald:hover, .do-btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* Tableaux web app */
.do-grid-table th {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-glass);
}

.do-grid-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* === CORRECTIFS D'ASSAINISSEMENT : DIALOGUES, EMBED & CONTRASTES === */
body.do-embed-mode header,
body.do-embed-mode .do-universal-switcher,
body.do-embed-mode .workspace-footer,
body.do-embed-mode #do-unified-sidebar {
  display: none !important;
}
body.do-embed-mode {
  padding-left: 0 !important;
  background: transparent !important;
}
dialog {
  background: #0e2238 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(212, 167, 44, 0.45) !important;
  border-top: 4px solid #f2c32b !important;
}
dialog h2, dialog label, dialog p {
  color: #f8fafc !important;
}
.empty-table-notice {
  text-align: center;
  padding: 32px 18px !important;
  color: #94a3b8 !important;
  font-size: 13.5px;
}

/* === CORRECTIFS D'ASSAINISSEMENT : DIALOGUES, EMBED & CONTRASTES === */
body.do-embed-mode header,
body.do-embed-mode .do-universal-switcher,
body.do-embed-mode .workspace-footer,
body.do-embed-mode #do-unified-sidebar {
  display: none !important;
}
body.do-embed-mode {
  padding-left: 0 !important;
  background: transparent !important;
}
dialog {
  background: #0e2238 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(212, 167, 44, 0.45) !important;
  border-top: 4px solid #f2c32b !important;
}
dialog h2, dialog label, dialog p {
  color: #f8fafc !important;
}
.empty-table-notice {
  text-align: center;
  padding: 32px 18px !important;
  color: #94a3b8 !important;
  font-size: 13.5px;
}