/* ============================================================ ATS Grossiste B2B — Design system Style : Glassmorphism + profondeur 3D (CSS natif, pas de WebGL) Palette : dark-first, vert = positif, ambre/rouge = dette & risque Typo : Fira Sans (texte) · Fira Code (montants, références) ============================================================ */ :root{ /* Fond et profondeur */ --void:#020617; --deep:#060B1A; --surf:#0F172A; --surf-2:#1E293B; --glass:rgba(30,41,59,.55); --glass-2:rgba(15,23,42,.72); --edge:rgba(148,163,184,.18); --edge-lit:rgba(226,232,240,.30); /* Texte */ --ink:#F8FAFC; --ink-2:#CBD5E1; --ink-3:#94A3B8; --ink-4:#64748B; /* Marque et sémantique */ --brand:#3B82F6; --brand-2:#6366F1; --brand-glow:rgba(59,130,246,.45); --ok:#22C55E; --ok-soft:rgba(34,197,94,.14); --ok-glow:rgba(34,197,94,.4); --warn:#F59E0B; --warn-soft:rgba(245,158,11,.14); --warn-glow:rgba(245,158,11,.4); --bad:#EF4444; --bad-soft:rgba(239,68,68,.14); --bad-glow:rgba(239,68,68,.4); --info:#38BDF8; --info-soft:rgba(56,189,248,.14); /* Profondeur 3D */ --persp:1200px; --lift-1:0 1px 2px rgba(0,0,0,.4); --lift-2:0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35); --lift-3:0 18px 40px -12px rgba(0,0,0,.65), 0 8px 16px -8px rgba(0,0,0,.45); --lift-4:0 32px 64px -16px rgba(0,0,0,.75), 0 12px 24px -12px rgba(0,0,0,.5); --inner-lit:inset 0 1px 0 rgba(255,255,255,.08); --r:16px; --rs:11px; --rl:24px; --rxl:32px; --f:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --fm:"Fira Code",ui-monospace,Menlo,Consolas,monospace; --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* Dark par défaut : un fond clair délave le glassmorphism et les indicateurs de dette. Le thème clair reste disponible via , avec des contrastes vérifiés (≥ 4.5:1). */ :root[data-theme=light]{ --void:#EEF2F9; --deep:#F5F8FD; --surf:#FFFFFF; --surf-2:#F1F5F9; --glass:rgba(255,255,255,.82); --glass-2:rgba(255,255,255,.9); --edge:rgba(15,23,42,.12); --edge-lit:rgba(15,23,42,.2); --ink:#0F172A; --ink-2:#334155; --ink-3:#475569; --ink-4:#64748B; --brand:#2551E0; --brand-2:#4F46E5; --brand-glow:rgba(37,81,224,.25); --ok:#15803D; --ok-soft:rgba(21,128,61,.1); --warn:#B45309; --warn-soft:rgba(180,83,9,.1); --bad:#B91C1C; --bad-soft:rgba(185,28,28,.1); --info:#0369A1; --info-soft:rgba(3,105,161,.1); --lift-1:0 1px 2px rgba(15,23,42,.06); --lift-2:0 4px 12px -2px rgba(15,23,42,.1), 0 2px 4px rgba(15,23,42,.05); --lift-3:0 18px 40px -12px rgba(15,23,42,.16), 0 8px 16px -8px rgba(15,23,42,.08); --lift-4:0 32px 64px -16px rgba(15,23,42,.2); --inner-lit:inset 0 1px 0 rgba(255,255,255,.9); } *{box-sizing:border-box;min-width:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--f);font-size:16px;line-height:1.55; color:var(--ink);background:var(--void); -webkit-font-smoothing:antialiased;overflow-x:hidden; padding-bottom:calc(84px + env(safe-area-inset-bottom)); min-height:100vh;position:relative; } /* ---- Aurore de fond : 3 couches en profondeur, fixées ---- */ body::before{ content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none; background: radial-gradient(48% 38% at 18% 8%, rgba(59,130,246,.20), transparent 62%), radial-gradient(42% 34% at 88% 18%, rgba(99,102,241,.16), transparent 60%), radial-gradient(52% 42% at 50% 96%, rgba(34,197,94,.10), transparent 64%); animation:drift 26s var(--ease) infinite alternate; } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--edge) 1px,transparent 1px), linear-gradient(90deg,var(--edge) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 75%); } @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(2%,-2%,0) scale(1.06)} 100%{transform:translate3d(-2%,2%,0) scale(1.02)} } img,svg,table{max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.18;font-weight:700} p{margin:0} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} .num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .mono{font-family:var(--fm);font-size:.82em;letter-spacing:-.01em} /* ============ Structure ============ */ .wrap{max-width:600px;margin:0 auto;padding:16px 16px 32px; display:flex;flex-direction:column;gap:16px;perspective:var(--persp)} .wrap.wide{max-width:1240px} @media(min-width:900px){ .wrap{padding:26px 28px 48px;gap:20px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} .grid-2-1{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start} } /* ============ Barre supérieure (glass) ============ */ .topbar{ position:sticky;top:0;z-index:40;padding:11px 16px; background:var(--glass-2);backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid var(--edge);box-shadow:var(--lift-1); } .topbar .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px} .mark{ width:40px;height:40px;border-radius:13px;flex:none;color:#fff;font-weight:700; font-size:12px;letter-spacing:.04em;display:grid;place-items:center;position:relative; background:linear-gradient(145deg,var(--brand),var(--brand-2)); box-shadow:0 6px 18px -6px var(--brand-glow),var(--inner-lit); transform:translateZ(0);transition:transform .4s var(--ease); } .mark:hover{transform:rotateY(18deg) rotateX(-8deg) scale(1.06)} .who{flex:1;min-width:0} .who b{display:block;font-size:14.5px;font-weight:600;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who span{font-size:11.5px;color:var(--ink-3);letter-spacing:.01em} .icb{ width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center; color:var(--ink-2);background:var(--surf-2);border:1px solid var(--edge); transition:all .2s var(--ease);cursor:pointer; } .icb:hover{color:var(--ink);border-color:var(--edge-lit);transform:translateY(-1px);box-shadow:var(--lift-2)} .icb:focus-visible,a:focus-visible,button:focus-visible{ outline:2px solid var(--brand);outline-offset:2px} /* ============ Navigation basse ============ */ .tabbar{ position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:grid; padding:7px 6px;border-radius:20px; background:var(--glass-2);backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7); border:1px solid var(--edge);box-shadow:var(--lift-3),var(--inner-lit); margin-bottom:env(safe-area-inset-bottom); } .tab{ display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px; border-radius:13px;color:var(--ink-4);font-size:10.5px;font-weight:500; min-height:44px;justify-content:center;transition:all .22s var(--ease);position:relative; } .tab svg{width:21px;height:21px;transition:transform .25s var(--ease)} .tab:hover{color:var(--ink-2)} .tab.on{color:var(--brand);background:var(--brand-glow)} .tab.on svg{transform:translateY(-2px) scale(1.08)} @media(min-width:900px){.tabbar{max-width:640px;margin:0 auto 12px;left:0;right:0}} /* ============ Cartes glass avec profondeur ============ */ .card{ position:relative;border-radius:var(--r);padding:16px; background:var(--glass);backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--edge);box-shadow:var(--lift-2),var(--inner-lit); transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s; } .card.pad0{padding:0;overflow:hidden} .card.lift:hover{transform:translateY(-3px);box-shadow:var(--lift-3),var(--inner-lit);border-color:var(--edge-lit)} /* Tilt 3D piloté par motion.js (--rx/--ry injectés au survol) */ .tilt{transition:transform .18s var(--ease-out),box-shadow .3s var(--ease)} .tilt:hover{box-shadow:var(--lift-4),var(--inner-lit)} .tilt-in{transform:translateZ(28px)} /* ============ Panneau chiffre-clé (hero) ============ */ .panel{ position:relative;border-radius:var(--rl);padding:24px 22px;overflow:hidden;color:#fff; background:linear-gradient(145deg,var(--brand),var(--brand-2)); box-shadow:var(--lift-3),var(--inner-lit);transform-style:preserve-3d; } .panel.is-warn{background:linear-gradient(145deg,#D97706,#B45309)} .panel.is-bad{background:linear-gradient(145deg,#DC2626,#991B1B)} .panel.is-ok{background:linear-gradient(145deg,#16A34A,#15803D)} .panel::before{ content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%); animation:orb 14s var(--ease) infinite alternate; } .panel::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%); transform:translateX(-120%);animation:sheen 7s var(--ease) infinite; } @keyframes orb{to{transform:translate3d(-26px,26px,0) scale(1.18)}} @keyframes sheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}} .panel .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.9; font-weight:600;position:relative;z-index:1} .panel .big{font-size:clamp(34px,9vw,46px);font-weight:700;letter-spacing:-.04em; line-height:1.02;margin-top:4px;position:relative;z-index:1; text-shadow:0 2px 20px rgba(0,0,0,.2)} .panel .split{display:flex;gap:22px;margin-top:18px;position:relative;z-index:1; font-size:11.5px;flex-wrap:wrap} .panel .split>div{opacity:.9} .panel .split b{display:block;font-size:15px;margin-top:2px;opacity:1; font-family:var(--fm);font-weight:600} /* ============ Jauge de seuil ============ */ .gauge{margin-top:16px;position:relative;z-index:1} .gauge .track{height:10px;border-radius:99px;position:relative;overflow:hidden; background:rgba(255,255,255,.18);box-shadow:inset 0 1px 3px rgba(0,0,0,.25)} .gauge .fill{height:100%;border-radius:99px;background:#fff;position:relative; box-shadow:0 0 14px rgba(255,255,255,.5); width:0;animation:fillup 1.3s var(--ease-out) .2s forwards} .gauge .fill::after{content:"";position:absolute;inset:0;border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:pulse-bar 2.4s ease-in-out infinite} @keyframes fillup{to{width:var(--pct,0%)}} @keyframes pulse-bar{0%,100%{opacity:0}50%{opacity:1}} .gauge .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:rgba(255,255,255,.75); border-radius:2px;z-index:2} .gauge .legend{display:flex;justify-content:space-between;margin-top:8px; font-size:10.5px;font-weight:500;opacity:.85} /* Jauge hors panneau coloré */ .gauge.plain .track{background:var(--surf-2);border:1px solid var(--edge);box-shadow:none} .gauge.plain .fill{background:var(--ok);box-shadow:0 0 12px var(--ok-glow)} .gauge.plain .fill.w{background:var(--warn);box-shadow:0 0 12px var(--warn-glow)} .gauge.plain .fill.d{background:var(--bad);box-shadow:0 0 12px var(--bad-glow)} .gauge.plain .mark{background:var(--ink-4)} .gauge.plain .legend{color:var(--ink-3);opacity:1} /* ============ Titres ============ */ .h1{font-size:clamp(23px,5.5vw,30px);font-weight:700;letter-spacing:-.035em} .sub{font-size:13.5px;color:var(--ink-3);margin-top:5px;line-height:1.55;max-width:66ch} .sec{display:flex;align-items:center;justify-content:space-between;gap:12px} .sec h3{font-size:15px;font-weight:600;letter-spacing:-.015em} .lnk{font-size:12.5px;color:var(--brand);font-weight:500;transition:opacity .2s} .lnk:hover{opacity:.75} .muted{color:var(--ink-3);font-size:12.5px;line-height:1.6} /* ============ Tuiles statistiques ============ */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px} .tiles-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:420px){.tiles-3{grid-template-columns:1fr 1fr}} .tile{ position:relative;padding:14px 15px;border-radius:var(--r);overflow:hidden; background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--edge);box-shadow:var(--lift-1),var(--inner-lit); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s; } a.tile{cursor:pointer} a.tile:hover{transform:translateY(-3px) rotateX(3deg);box-shadow:var(--lift-3),var(--inner-lit); border-color:var(--edge-lit)} .tile .k{font-size:11px;color:var(--ink-3);font-weight:500;display:block; text-transform:uppercase;letter-spacing:.06em} .tile .v{font-size:21px;font-weight:700;display:block;margin-top:5px;letter-spacing:-.03em; font-family:var(--fm)} .tile.ok .v{color:var(--ok)} .tile.warn .v{color:var(--warn)} .tile.bad .v{color:var(--bad)} .tile .spark{position:absolute;right:0;bottom:0;width:58%;height:34px;opacity:.5} /* ============ Badges ============ */ .bdg{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px; font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1.5; border:1px solid transparent;letter-spacing:.01em} .bdg::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .bdg.g{background:var(--ok-soft);color:var(--ok);border-color:rgba(34,197,94,.25)} .bdg.w{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,158,11,.25)} .bdg.d{background:var(--bad-soft);color:var(--bad);border-color:rgba(239,68,68,.25)} .bdg.i{background:var(--info-soft);color:var(--info);border-color:rgba(56,189,248,.25)} .bdg.b{background:var(--brand-glow);color:var(--brand);border-color:rgba(59,130,246,.3)} .bdg.n{background:var(--surf-2);color:var(--ink-3);border-color:var(--edge)} .bdg.pulse::before{animation:blip 1.8s ease-in-out infinite} @keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} /* ============ Listes ============ */ .list{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:12px;padding:13px 16px; border-bottom:1px solid var(--edge);transition:background .2s var(--ease);position:relative} .row:last-child{border-bottom:0} a.row{cursor:pointer} a.row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--brand);transform:scaleY(0);transition:transform .25s var(--ease)} a.row:hover{background:rgba(148,163,184,.07)} a.row:hover::after{transform:scaleY(1)} .row .bd{flex:1;min-width:0} .row .t{font-size:13.5px;font-weight:500;line-height:1.35} .row .s{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45} .row .amt{text-align:right;flex:none;font-weight:600;font-size:13.5px;font-family:var(--fm)} .row .amt small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500; margin-top:3px;font-family:var(--f)} .av{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center; font-size:11.5px;font-weight:600;font-family:var(--fm); background:var(--surf-2);border:1px solid var(--edge);color:var(--ink-2); box-shadow:var(--inner-lit);transition:transform .25s var(--ease)} a.row:hover .av{transform:translateZ(10px) scale(1.05)} .av.b{background:linear-gradient(145deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent; box-shadow:0 4px 12px -4px var(--brand-glow)} .av.g{background:var(--ok-soft);color:var(--ok);border-color:rgba(34,197,94,.3)} .av.w{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,158,11,.3)} /* ============ Tableau grand livre ============ */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent} .scroll-x::-webkit-scrollbar{height:7px} .scroll-x::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:4px} .ledger{width:100%;border-collapse:collapse;font-size:12.5px;min-width:660px} .ledger th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em; color:var(--ink-3);font-weight:600;padding:12px 14px;white-space:nowrap; border-bottom:1px solid var(--edge);background:var(--glass-2); position:sticky;top:0;backdrop-filter:blur(10px);z-index:2} .ledger td{padding:13px 14px;border-bottom:1px solid var(--edge);vertical-align:top} .ledger tbody tr{transition:background .18s} .ledger tbody tr:hover{background:rgba(148,163,184,.06)} .ledger tr:last-child td{border-bottom:0} .ledger .n{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums; font-weight:500;white-space:nowrap} .ledger .deb{color:var(--bad)} .ledger .cre{color:var(--ok)} .ledger tfoot td{font-weight:700;background:var(--surf-2);border-top:2px solid var(--edge)} /* ============ Confidentialité ============ */ .masked{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9px; background:repeating-linear-gradient(135deg,transparent,transparent 5px,var(--surf-2) 5px,var(--surf-2) 10px); border:1px dashed var(--edge-lit);color:var(--ink-4);font-size:11.5px;font-weight:500} .masked svg{width:12px;height:12px;flex:none} .note{display:flex;gap:11px;padding:13px 14px;border-radius:var(--rs);font-size:12.5px; line-height:1.6;border:1px solid transparent} .note svg{width:16px;height:16px;flex:none;margin-top:2px} .note.i{background:var(--info-soft);color:var(--info);border-color:rgba(56,189,248,.22)} .note.w{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,158,11,.22)} .note.d{background:var(--bad-soft);color:var(--bad);border-color:rgba(239,68,68,.22)} .note.g{background:var(--ok-soft);color:var(--ok);border-color:rgba(34,197,94,.22)} .note b{font-weight:600} /* ============ Boutons ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 20px;border-radius:var(--rs);font-size:14px;font-weight:600; min-height:46px;color:#fff;position:relative;overflow:hidden;cursor:pointer; background:linear-gradient(145deg,var(--brand),var(--brand-2)); box-shadow:0 6px 18px -6px var(--brand-glow),var(--inner-lit); transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .2s; } .btn::after{content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%); transform:translateX(-130%);transition:transform .6s var(--ease)} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px var(--brand-glow),var(--inner-lit)} .btn:hover::after{transform:translateX(130%)} .btn:active{transform:translateY(0) scale(.985)} .btn.full{width:100%} .btn.ghost{background:var(--glass);color:var(--ink-2);border:1px solid var(--edge);box-shadow:var(--lift-1)} .btn.ghost:hover{color:var(--ink);border-color:var(--edge-lit);box-shadow:var(--lift-2)} .btn.ok{background:linear-gradient(145deg,#22C55E,#16A34A);box-shadow:0 6px 18px -6px var(--ok-glow),var(--inner-lit)} .btn.warn{background:linear-gradient(145deg,#F59E0B,#D97706);box-shadow:0 6px 18px -6px var(--warn-glow),var(--inner-lit)} .btn.bad{background:linear-gradient(145deg,#EF4444,#DC2626);box-shadow:0 6px 18px -6px var(--bad-glow),var(--inner-lit)} .btns{display:flex;gap:10px;flex-wrap:wrap} .btns>.btn{flex:1;min-width:140px} /* ============ Filtres ============ */ .chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{white-space:nowrap;padding:9px 15px;border-radius:99px;font-size:12.5px;font-weight:500; min-height:40px;display:inline-flex;align-items:center;cursor:pointer; background:var(--glass);border:1px solid var(--edge);color:var(--ink-3); transition:all .22s var(--ease)} .chip:hover{color:var(--ink);border-color:var(--edge-lit);transform:translateY(-1px)} .chip.on{background:linear-gradient(145deg,var(--brand),var(--brand-2));color:#fff; border-color:transparent;box-shadow:0 5px 14px -5px var(--brand-glow)} /* ============ Champs ============ */ .field{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--rs); background:var(--surf-2);border:1px solid var(--edge);transition:border-color .2s,box-shadow .2s} .field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)} .field input,.field select,.field textarea{border:0;background:none;outline:none;flex:1; font-size:15px;color:var(--ink);min-height:22px} .field input::placeholder{color:var(--ink-4)} .lab{font-size:11.5px;font-weight:500;color:var(--ink-3);display:block;margin-bottom:6px; text-transform:uppercase;letter-spacing:.05em} .stack{display:flex;flex-direction:column;gap:12px} /* ============ Étapes ============ */ .steps{display:flex;flex-direction:column} .step{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--edge);position:relative} .step:last-child{border-bottom:0} .step .no{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center; font-size:11.5px;font-weight:600;font-family:var(--fm); background:var(--surf-2);border:1px solid var(--edge);color:var(--ink-4); transition:all .3s var(--ease)} .step.done .no{background:var(--ok-soft);border-color:rgba(34,197,94,.35);color:var(--ok)} .step.now .no{background:linear-gradient(145deg,var(--brand),var(--brand-2));border-color:transparent; color:#fff;box-shadow:0 0 0 4px var(--brand-glow)} .step .t{font-size:13.5px;font-weight:500;line-height:1.4} .step .s{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45} /* ============ Sélecteur de rôle (accueil) ============ */ .roles{display:grid;gap:14px} @media(min-width:820px){.roles{grid-template-columns:repeat(3,1fr)}} .role{ display:flex;flex-direction:column;gap:13px;padding:20px;border-radius:var(--rl); background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--edge);box-shadow:var(--lift-2),var(--inner-lit); transform-style:preserve-3d;cursor:pointer;position:relative;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s; } .role::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s; background:radial-gradient(75% 55% at 50% 0%,var(--brand-glow),transparent 70%)} .role:hover::before{opacity:1} .role:hover{border-color:var(--edge-lit)} .role.soon{opacity:.72;cursor:default} .role .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff; position:relative;z-index:1;box-shadow:var(--lift-2),var(--inner-lit); transition:transform .35s var(--ease)} .role:hover .ic{transform:translateZ(30px) rotateY(-14deg) rotateX(8deg)} .role .ic svg{width:24px;height:24px} .role h3{font-size:16.5px;position:relative;z-index:1;display:flex;align-items:center; gap:9px;flex-wrap:wrap} .role p{font-size:12.5px;color:var(--ink-3);line-height:1.6;position:relative;z-index:1} .role .blind{font-size:11px;color:var(--ink-4);display:flex;align-items:center;gap:6px; padding-top:11px;border-top:1px solid var(--edge);position:relative;z-index:1;margin-top:auto} .role .blind svg{width:13px;height:13px;flex:none} /* ============ Révélation à l'entrée ============ L'état masqué n'est appliqué QUE si le script a posé `js-anim` sur . Sans JavaScript — ou si l'observateur ne se déclenche pas — le contenu reste visible : une animation ne doit jamais pouvoir masquer la page. */ .js-anim [data-reveal]{opacity:0;transform:translateY(22px) translateZ(0)} /* `.in` pose l'état final lui-même : si l'animation ne se joue pas, l'élément est visible malgré tout. L'animation n'est qu'un embellissement. */ .js-anim [data-reveal].in{opacity:1;transform:none;animation:rise .65s var(--ease-out) backwards} @keyframes rise{to{opacity:1;transform:translateY(0)}} /* ============ Divers ============ */ .stamp{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:99px; background:var(--warn-soft);border:1px solid rgba(245,158,11,.28); color:var(--warn);font-size:11.5px;font-weight:600;letter-spacing:.02em} .empty{text-align:center;padding:42px 20px} .empty .ic{width:58px;height:58px;border-radius:18px;margin:0 auto 14px;display:grid; place-items:center;background:var(--surf-2);border:1px solid var(--edge);color:var(--ink-4)} hr.sep{border:0;height:1px;background:var(--edge);margin:2px 0} /* ============ Mouvement réduit ============ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .js-anim [data-reveal]{opacity:1;transform:none} .gauge .fill{width:var(--pct,0%);animation:none} body::before{animation:none} }