:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01" 1, "cv02" 1; }
.mesh { background-image: radial-gradient(circle at 10% 20%, rgba(45,212,191,.16), transparent 24rem), radial-gradient(circle at 90% 0%, rgba(56,189,248,.15), transparent 28rem); }
.eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.panel-shadow { box-shadow: 0 22px 55px -34px rgba(8,47,73,.45); }
.status { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.3rem .65rem; font-size:.75rem; font-weight:700; background:#f1f5f9; color:#334155; }
.status::before { content:""; width:.42rem; height:.42rem; border-radius:99px; background:#14b8a6; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(20,184,166,.2); border-color: #14b8a6!important; }

/* Public landing refinements */
header { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(15, 23, 42, .06); }
header nav { min-height: 76px; }
header nav > a:first-child { letter-spacing: -.06em; font-size: 1.45rem; }
header nav > a:first-child::before { content: "M"; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 9px; border-radius: 8px; background: #082f49; color: #2dd4bf; font-size: .72rem; letter-spacing: 0; vertical-align: 2px; }
header nav > div { display: flex; align-items: center; gap: .75rem; }
header nav > div > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .35rem; white-space: nowrap; }
header nav > div > a:last-child { padding: 0 1rem; border-radius: .4rem; }
header nav form { display: flex; align-items: center; margin: 0; }
header nav::after { display:none; }
.mesh { position: relative; overflow: hidden; background-color: #082f49; background-image: linear-gradient(90deg, rgba(8,47,73,.93) 0%, rgba(8,47,73,.72) 44%, rgba(8,47,73,.12) 100%), url('tech-hero-background.png?v=2'); background-position: center, right center; background-size: cover, cover; background-repeat: no-repeat; }
.mesh::after { content:""; position:absolute; right:10%; bottom:-160px; width:440px; height:440px; border:1px solid rgba(94,234,212,.10); border-radius:50%; box-shadow: 0 0 0 55px rgba(94,234,212,.02); }
.mesh > div { position:relative; z-index:1; }
.mesh h1 { max-width: 760px; letter-spacing:-.055em; line-height: .98; }
.mesh p { line-height: 1.65; }
.mesh a { box-shadow: 0 12px 28px rgba(20,184,166,.2); transition: transform .2s ease, box-shadow .2s ease; }
.mesh a:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(20,184,166,.3); }
.panel-shadow { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.panel-shadow:hover { transform: translateY(-6px); border-color: #5eead4; box-shadow: 0 24px 52px -30px rgba(8,47,73,.35); }
@media (max-width: 780px) { header nav { min-height: 64px; } header nav::after { display:none; } header nav > a:first-child { font-size:1.22rem; } .mesh h1 { font-size: 2.75rem!important; } .mesh::after { right:-160px; } }

.process-section { background: linear-gradient(180deg, #fff 0%, #f0fdfa 100%); border-top: 1px solid #e2e8f0; }
.process-visual { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.process-line { position: absolute; top: 48px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, #14b8a6, #67e8f9, #14b8a6); z-index: 0; }
.process-card { position: relative; z-index: 1; min-height: 230px; padding: 24px 20px; border: 1px solid #dbe4ea; border-radius: 18px; background: rgba(255,255,255,.93); box-shadow: 0 18px 36px -28px rgba(8,47,73,.45); }
.process-number { color: #0f766e; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.process-icon { display:grid; place-items:center; width: 52px; height: 52px; margin: 14px 0 18px; border-radius: 15px; background: #082f49; color: #5eead4; font-size: 1.1rem; box-shadow: 0 10px 18px -10px #082f49; }
.process-card h3 { color:#082f49; font-weight:800; font-size:1rem; }
.process-card p { margin-top:8px; color:#64748b; font-size:.87rem; line-height:1.5; }
@media (max-width: 900px) { .process-visual { grid-template-columns: repeat(2, 1fr); } .process-line { display:none; } }
@media (max-width: 520px) { .process-visual { grid-template-columns: 1fr; } .process-card { min-height:auto; } }
.project-steps { display:flex; gap:10px; align-items:flex-start; overflow-x:auto; padding-bottom:5px; }
.project-step { min-width:130px; flex:1; position:relative; padding:14px; border:1px solid #dbe4ea; border-radius:12px; background:#f8fafc; color:#64748b; font-size:.82rem; }
.project-step b { display:grid; place-items:center; width:26px; height:26px; margin-bottom:9px; border-radius:50%; background:#e2e8f0; color:#475569; font-size:.75rem; }
.project-step.done { border-color:#99f6e4; background:#f0fdfa; color:#0f766e; }
.project-step.done b { background:#14b8a6; color:white; }
.project-steps.admin .project-step:first-child { border-color:#99f6e4; background:#f0fdfa; }
.client-shell { max-width: 1440px; margin:0 auto; min-height:calc(100vh - 80px); display:grid; grid-template-columns:260px 1fr; }
.client-sidebar { background:#082f49; color:#dbeafe; padding:34px 22px; }
.client-sidebar h2 { color:white; font-weight:800; margin:8px 0 30px; }
.client-sidebar h2::after { content:"●  Client actif"; display:block; width:max-content; margin-top:9px; padding:5px 8px; border:1px solid rgba(94,234,212,.24); border-radius:999px; color:#5eead4; background:rgba(20,184,166,.12); font-size:.7rem; font-weight:750; letter-spacing:.02em; }
.client-sidebar nav { display:grid; gap:8px; }
.client-sidebar nav a { display:flex; gap:11px; align-items:center; padding:13px 12px; border-radius:9px; font-size:.9rem; font-weight:650; }
.client-sidebar nav a:hover,.client-sidebar nav a.active { background:rgba(45,212,191,.14); color:#5eead4; }
.sidebar-cta,.btn-dark { display:block; margin-top:30px; padding:12px; border-radius:9px; background:#14b8a6; color:#042f2e; text-align:center; font-weight:800; }
.client-main { padding:52px 58px; }
.client-main h1 { color:#082f49; font-size:2.25rem; font-weight:900; margin-top:6px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }.stat-grid div,.project-card,.request-row,.empty-card { background:#fff; border:1px solid #dbe4ea; border-radius:14px; padding:20px; }.stat-grid span { display:block; color:#64748b; font-size:.85rem; }.stat-grid b { display:block; color:#082f49; font-size:2rem; margin-top:8px; }.section-title { margin:42px 0 18px; color:#082f49; font-size:1.25rem; font-weight:800; }.project-card { margin-top:15px; }.project-card h3,.request-row h3 { font-size:1.1rem; font-weight:800; color:#082f49; }.request-row { display:flex; justify-content:space-between; gap:20px; }.request-row p,.empty-card p { color:#64748b; margin-top:6px; }.empty-card { margin-top:28px; max-width:600px; }
@media(max-width:800px){.client-shell{grid-template-columns:1fr}.client-sidebar{padding:22px}.client-sidebar nav{grid-template-columns:repeat(3,1fr)}.client-sidebar nav a span{font-size:.7rem}.sidebar-cta{margin-top:15px}.client-main{padding:32px 20px}.stat-grid{grid-template-columns:1fr}.project-steps{overflow-x:auto}}
.payment-flow { margin-top:-10px; padding-left:58px; }.payment-project { display:grid; grid-template-columns:1fr 310px; gap:34px; max-width:900px; margin-top:25px; padding:28px; border:1px solid #dbe4ea; border-radius:16px; background:#fff; }.payment-project h3 { margin:7px 0 15px; font-size:1.25rem; font-weight:850; color:#082f49; }.payment-project ol { display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; }.payment-project li { padding:7px 10px; border-radius:20px; background:#f1f5f9; color:#64748b; font-size:.78rem; }.payment-project li.done { background:#ccfbf1; color:#0f766e; }.bank-box { margin-top:18px; padding:16px; border-radius:10px; background:#f0fdfa; color:#134e4a; font-size:.88rem; }.bank-box p { margin-top:6px; }.receipt-form { align-self:center; display:grid; gap:12px; padding:20px; border:1px dashed #94a3b8; border-radius:12px; }.receipt-form label { font-weight:700; font-size:.9rem; }.receipt-form input { display:block; width:100%; margin-top:8px; font-size:.8rem; }.receipt-form small { color:#64748b; }.receipt-form button { padding:11px; border-radius:8px; background:#082f49; color:white; font-weight:700; }@media(max-width:800px){.payment-flow{padding:20px}.payment-project{grid-template-columns:1fr}}
body:has(.payment-flow) .client-main { display:none; }
body:has(.payment-flow) .client-shell { min-height:0; }
body:has(.payment-flow) .payment-flow { position:absolute; top:112px; left:360px; right:0; margin:0; padding:38px 58px; }
@media(max-width:800px){body:has(.payment-flow) .payment-flow{position:static;padding:26px 20px}body:has(.payment-flow) .client-main{display:block}}
.admin-shell{max-width:1180px;margin:0 auto;padding:52px 32px}.admin-shell h1{font-size:2.3rem;font-weight:900;color:#082f49;margin-top:6px}.admin-stats{max-width:760px}.admin-payments{margin-top:52px}.admin-payments h2{font-size:1.4rem;font-weight:850;color:#082f49;margin-top:5px}.admin-receipt{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;margin-top:14px;padding:18px 20px;border:1px solid #dbe4ea;border-radius:12px;background:#fff}.admin-receipt p{margin-top:4px;color:#64748b;font-size:.9rem}.admin-receipt .btn-dark{margin:0;padding:10px 14px;color:white;background:#082f49}@media(max-width:650px){.admin-shell{padding:35px 20px}.admin-receipt{grid-template-columns:1fr}.admin-receipt .btn-dark{width:100%}}
.admin-demand-anchor{margin-top:52px;padding:24px;border:1px solid #dbe4ea;border-radius:14px;background:#fff;scroll-margin-top:100px}.admin-demand-anchor h2{margin-top:7px;font-size:1.4rem;font-weight:850;color:#082f49}.admin-demand-anchor p:last-child{margin-top:8px;color:#64748b}
.admin-request{display:flex;justify-content:space-between;gap:18px;margin-top:16px;padding:16px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.admin-request b{color:#082f49;font-size:1.02rem}.admin-request p{margin-top:5px;color:#64748b;font-size:.88rem}.admin-request .status{height:max-content;white-space:nowrap}
.request-row,.admin-request{cursor:pointer}.request-row:hover,.admin-request:hover{border-color:#5eead4;box-shadow:0 10px 24px -20px #082f49}
.confirmed-payment{padding:16px;border-radius:10px;background:#dcfce7;color:#166534;font-weight:800;text-align:center}
.admin-sidebar{position:fixed;top:80px;bottom:0;left:0;width:260px;padding:34px 22px;background:#082f49;color:white;z-index:20}.admin-sidebar h2{margin:8px 0 28px;font-size:1.2rem;font-weight:850}.admin-sidebar nav{display:grid;gap:8px}.admin-sidebar nav a{padding:13px;border-radius:9px;color:#dbeafe;font-weight:700}.admin-sidebar nav a:hover{background:rgba(20,184,166,.16);color:#5eead4}body:has(.admin-sidebar) .admin-shell{margin-left:280px}@media(max-width:800px){.admin-sidebar{position:static;width:auto}.admin-sidebar nav{grid-template-columns:repeat(3,1fr)}body:has(.admin-sidebar) .admin-shell{margin-left:0}}
.project-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:28px}.project-toolbar label{display:grid;gap:7px;font-size:.88rem;font-weight:700;color:#334155}.project-toolbar select{min-width:240px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:10px;color:#082f49}.project-toolbar b{color:#475569;font-size:.9rem}.project-table-wrap{margin-top:16px;overflow:auto;border:1px solid #dbe4ea;border-radius:14px;background:#fff}.project-table{width:100%;min-width:760px;border-collapse:collapse}.project-table th{padding:15px 18px;text-align:left;background:#f8fafc;color:#475569;font-size:.8rem}.project-table td{padding:16px 18px;border-top:1px solid #e2e8f0;color:#334155}.project-table td small{display:block;margin-top:4px;color:#64748b}.project-open{display:inline-block;border-radius:8px;background:#082f49;padding:9px 12px;color:#fff;font-size:.82rem;font-weight:700}.empty-cell{text-align:center;color:#64748b}@media(max-width:800px){.project-toolbar{align-items:stretch;flex-direction:column}.project-toolbar select{width:100%}}