:root{--primary: #2c3e50;--secondary: #e67e22;--brand-red: #eb302d;--bg-light: #f8fafc;--text-dark: #1e293b;--text-light: #ffffff;--border: #e2e8f0;--radius: 12px;--radius-sm: 8px;--footer-bg: #0f172a;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:var(--bg-light);color:var(--text-dark);margin:0;min-height:100vh}app-root{display:flex;flex-direction:column;min-height:100vh}main{flex:1;padding:92px 0 0}main:has(app-home){padding:92px 0 0}header{background:#f8fafc;color:var(--text-dark);padding:1rem 2rem;position:fixed;top:0;left:0;width:100%;z-index:100;box-shadow:0 2px 8px #00000014;border-bottom:1px solid var(--border)}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem;width:100%}main .container{padding-top:2rem;padding-bottom:2rem}.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.brand{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:10px;cursor:pointer}.brand i{color:var(--secondary)}nav ul{list-style:none;display:flex;gap:20px}nav a{color:var(--text-dark);text-decoration:none;font-weight:500;transition:.3s;cursor:pointer}nav a:hover,nav a.active{color:var(--brand-red)}.cart-icon-wrapper{position:relative;cursor:pointer}.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--secondary);color:#fff;border-radius:50%;width:20px;height:20px;font-size:.8rem;display:flex;align-items:center;justify-content:center}button{cursor:pointer;border:none;border-radius:var(--radius);padding:10px 15px;transition:.2s;font-size:1rem;display:inline-flex;align-items:center;gap:8px;justify-content:center}.btn-primary{background:var(--secondary);color:#fff}.btn-primary:hover{background:#d35400}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.btn-outline{border:1px solid var(--primary);background:transparent;color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}.btn-sm{padding:5px 10px;font-size:.85rem}.table-container{overflow-x:auto;background:#fff;border-radius:var(--radius);box-shadow:0 2px 4px #0000000d;margin-bottom:2rem}table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee}th{background:#f8f9fa;color:#444;font-weight:700;text-transform:uppercase;font-size:.85rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:none;justify-content:center;align-items:center;z-index:1000}.modal-overlay.open{display:flex}.modal{background:#fff;padding:2rem;border-radius:var(--radius);max-width:800px;width:90%;position:relative;max-height:90vh;overflow-y:auto}.close-modal{position:absolute;top:15px;right:20px;font-size:1.5rem;cursor:pointer}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius)}.color-preview{width:20px;height:20px;display:inline-block;border:1px solid #ccc;border-radius:4px;vertical-align:middle}.status-text{font-weight:700;text-transform:capitalize}.status-en_cours{color:#e67e22}.status-receptionnee,.status-payee{color:#27ae60}.detail-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:.75rem;font-weight:700;margin-left:4px;cursor:help;transition:transform .1s}.detail-badge:hover{transform:scale(1.1)}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:125%;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:5px 10px;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:1000;pointer-events:none;font-weight:400}[data-tooltip]:hover:before{opacity:1;visibility:visible}[data-tooltip]:after{content:"";position:absolute;bottom:105%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:rgba(0,0,0,.85) transparent transparent transparent;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:1000}[data-tooltip]:hover:after{opacity:1;visibility:visible}@media (max-width: 768px){header{padding:.5rem 1rem}.brand{font-size:1.1rem;gap:6px}nav ul{gap:12px}nav a{font-size:.9rem}.container{padding:0 1rem}main{padding:0}h2{font-size:1.3rem}.section-title{font-size:1.2rem}input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{font-size:16px}}