/* ========================================================================= APP.CSS — Interface authentifiée reconstruite de A à Z (admin / client / employé) Portée : tout est scopé sous .app-ui (ajouté au des pages applicatives). Le site public et les anciens styles restent intacts. Aucune logique modifiée. Direction : workspace SaaS premium — rail latéral sombre, espace de travail clair, cartes nettes, tableaux aérés, en-têtes de page lisibles. ========================================================================= */ .app-ui{ --ws-bg:#eef2f8; --ws-surface:#ffffff; --ws-surface-2:#f6f8fc; --ws-border:#e4eaf2; --ws-border-strong:#d4deea; --ws-ink:#101826; --ws-ink-soft:#3c4a5e; --ws-muted:#6b7a8d; --ws-accent:var(--blue); --ws-accent-700:var(--primary-700,#1b43c4); --ws-radius:16px; --ws-radius-sm:11px; --ws-topbar-h:60px; --nav-w:274px; --nav-bg:#0c1626; --nav-bg-2:#101d31; --nav-ink:#9fb0c6; --nav-ink-strong:#ffffff; --nav-border:rgba(255,255,255,.07); --nav-hover:rgba(255,255,255,.06); --nav-group-label:#5d6f88; background:var(--ws-bg); } /* ---------------------------------------------------------------- Coque ---- */ .app-ui main{padding:0;margin:0;max-width:none} .app-ui .footer{display:none} .app-ui .app-shell{ display:block;gap:0;padding:0;margin:0;max-width:none; } @media (min-width:980px){ .app-ui .app-shell{ display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr); align-items:start; } } .app-ui .content{ min-width:0;padding:26px clamp(16px,3vw,40px) 64px;max-width:1280px;width:100%; } /* ----------------------------------------------------------- Barre haute --- */ /* Restyle des deux entêtes possibles (admin-command-bar et topbar marketing) */ .app-ui .topbar, .app-ui .admin-command-shell{ position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--ws-border);box-shadow:0 1px 0 rgba(16,24,38,.02); } .app-ui .topbar{min-height:var(--ws-topbar-h);padding:8px clamp(14px,2.4vw,26px)} .app-ui .admin-command-bar{min-height:var(--ws-topbar-h);padding:8px clamp(14px,2.4vw,26px);gap:12px} .app-ui .topbar .brand-text strong{color:var(--ws-ink)} /* Entête admin : pastille tenant, recherche, raccourcis — version épurée */ .app-ui .tenant-pill{ display:inline-flex;align-items:center;gap:8px;background:var(--ws-surface-2); border:1px solid var(--ws-border);border-radius:999px;padding:6px 14px 6px 10px; color:var(--ws-ink);font-weight:700;font-size:13.5px;box-shadow:none } .app-ui .tenant-pill svg{width:16px;height:16px;color:var(--ws-accent)} .app-ui .command-search-button{ flex:1;max-width:520px;display:flex;align-items:center;gap:10px; background:var(--ws-surface-2);border:1px solid var(--ws-border);border-radius:11px; padding:9px 12px;color:var(--ws-muted);box-shadow:none;cursor:text;transition:border-color .15s,background .15s } .app-ui .command-search-button:hover{border-color:var(--ws-border-strong);background:#fff} .app-ui .command-search-button strong{font-weight:550;font-size:14px;color:var(--ws-muted)} .app-ui .command-search-button svg{width:17px;height:17px;color:var(--ws-muted)} .app-ui .command-search-button kbd{ margin-left:auto;font-size:11px;font-weight:700;color:var(--ws-muted); background:#fff;border:1px solid var(--ws-border);border-radius:6px;padding:2px 7px } .app-ui .admin-shortcuts .admin-pin-button{ width:38px;height:38px;border-radius:10px;border:1px solid var(--ws-border); background:var(--ws-surface);color:var(--ws-muted);display:grid;place-items:center } .app-ui .admin-shortcuts .admin-pin-button:hover{color:var(--ws-accent);border-color:var(--ws-accent)} .app-ui .admin-recent-menu>summary{ border:1px solid var(--ws-border);background:var(--ws-surface);border-radius:10px; padding:9px 14px;color:var(--ws-ink);font-weight:650;list-style:none } .app-ui .demo-pill{border-radius:999px} /* Topbar marketing en contexte app : nav réduite et propre */ .app-ui .topbar .nav{gap:6px} .app-ui .topbar .nav a{color:var(--ws-ink-soft);font-weight:650;border-radius:9px;padding:7px 11px} .app-ui .topbar .nav a:hover{background:var(--ws-surface-2)} .app-ui .topbar .inline-form button{color:var(--ws-accent)} /* ----------------------------------------------------------- Rail latéral -- */ /* Sélecteurs préfixés .premium-side-nav pour battre `.app-body .premium-side-nav …` */ .app-ui .premium-side-nav{ background:linear-gradient(185deg,var(--nav-bg-2),var(--nav-bg))!important; border:0;border-right:1px solid rgba(255,255,255,.05);border-radius:0; box-shadow:none;padding:16px 12px 22px;color:var(--nav-ink);overflow:visible;min-width:0 } @media (min-width:980px){ .app-ui .premium-side-nav{ position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:6px; } } .app-ui .premium-side-nav::-webkit-scrollbar{width:8px} .app-ui .premium-side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)} .app-ui .premium-side-nav .side-nav-title{ border-bottom:1px solid var(--nav-border);padding:6px 10px 14px;margin:0 0 6px;display:grid;gap:3px;background:transparent } .app-ui .premium-side-nav .side-nav-title strong{color:var(--nav-group-label);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em} .app-ui .premium-side-nav .side-nav-title span{color:var(--nav-ink-strong)!important;font-size:15.5px;font-weight:750;letter-spacing:-.01em;text-transform:none} .app-ui .premium-side-nav .side-nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 10px} .app-ui .premium-side-nav .side-nav-actions a, .app-ui .premium-side-nav .side-nav-actions button, .app-ui .premium-side-nav .admin-site-link, .app-ui .premium-side-nav .admin-logout-button{ display:flex;align-items:center;justify-content:center;gap:7px;width:100%; background:rgba(255,255,255,.05)!important;border:1px solid var(--nav-border);border-radius:10px; padding:9px 10px;color:var(--nav-ink)!important;font-weight:600;font-size:12.5px;box-shadow:none;min-height:0 } .app-ui .premium-side-nav .side-nav-actions a:hover, .app-ui .premium-side-nav .side-nav-actions button:hover{background:rgba(255,255,255,.12)!important;color:#fff!important} .app-ui .premium-side-nav .side-nav-actions svg{color:inherit} /* le bouton déconnexion porte .secondary (fond blanc) : on force le style sombre du rail */ .app-ui .premium-side-nav .side-nav-actions .admin-logout-button, .app-ui .premium-side-nav .side-nav-actions .admin-logout-button.secondary, .app-ui .premium-side-nav .side-nav-actions .admin-site-link{ background:rgba(255,255,255,.05)!important;color:var(--nav-ink)!important;border:1px solid var(--nav-border)!important } .app-ui .premium-side-nav .side-nav-actions form{display:grid} /* Accordéons de navigation */ .app-ui .premium-side-nav .nav-accordion{display:grid;gap:3px} .app-ui .premium-side-nav .nav-group{border:0!important;background:transparent!important;border-radius:10px;box-shadow:none!important;overflow:visible} .app-ui .premium-side-nav .nav-group>summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px; padding:9px 11px;border-radius:10px;color:var(--nav-ink);transition:background .14s,color .14s } .app-ui .premium-side-nav .nav-group>summary::-webkit-details-marker{display:none} .app-ui .premium-side-nav .nav-group>summary:hover{background:var(--nav-hover);color:#fff} .app-ui .premium-side-nav .nav-group>summary .nav-group-icon{ width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:9px;display:grid;place-items:center; background:rgba(255,255,255,.06)!important;color:#c6d4e8!important;font-size:0 } .app-ui .premium-side-nav .nav-group>summary .nav-group-icon svg{width:17px;height:17px} .app-ui .premium-side-nav .nav-group>summary strong{font-size:13.5px;font-weight:700;color:var(--nav-ink-strong);display:block;line-height:1.2} .app-ui .premium-side-nav .nav-group>summary small{font-size:11px;color:var(--nav-group-label);font-weight:550} .app-ui .premium-side-nav .nav-group[open]>summary{color:#fff} .app-ui .premium-side-nav .nav-group[open]>summary .nav-group-icon{background:rgba(255,255,255,.12)!important} .app-ui .premium-side-nav .nav-group-items{display:grid;gap:1px;padding:3px 0 6px 12px;margin-left:16px;border-left:1px solid var(--nav-border)} .app-ui .premium-side-nav .nav-group-items a{ display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px; color:var(--nav-ink)!important;font-size:13px;font-weight:550;transition:background .12s,color .12s } .app-ui .premium-side-nav .nav-group-items a .nav-icon{ display:inline-grid;place-items:center;width:auto!important;height:auto!important; background:transparent!important;box-shadow:none!important;opacity:.65;color:inherit!important } .app-ui .premium-side-nav .nav-group-items a .nav-icon svg{width:16px;height:16px} .app-ui .premium-side-nav .nav-group-items a:hover{background:var(--nav-hover);color:#fff!important} .app-ui .premium-side-nav .nav-group-items a:hover .nav-icon{opacity:1} .app-ui .premium-side-nav .nav-group-items a.active{background:var(--ws-accent)!important;color:#fff!important;font-weight:650;box-shadow:0 8px 18px -8px var(--ws-accent)} .app-ui .premium-side-nav .nav-group-items a.active .nav-icon{opacity:1;background:transparent!important;color:#fff!important} /* Bouton menu mobile (barre du rail repliée) */ .app-ui .premium-side-nav .mobile-menu-button{ background:linear-gradient(135deg,var(--nav-bg-2),var(--nav-bg))!important;border:1px solid var(--nav-border)!important; color:#fff;border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-sm) } .app-ui .premium-side-nav .mobile-menu-button span{color:#dce6f4;font-weight:700} .app-ui .premium-side-nav .mobile-menu-button strong{color:#9fb0c6} @media (max-width:979px){ .app-ui .premium-side-nav{position:static;height:auto;background:transparent!important;border:0;padding:14px clamp(14px,3vw,24px) 0} .app-ui .premium-side-nav .side-nav-title{display:none} .app-ui .premium-side-nav .side-nav-actions, .app-ui .premium-side-nav .nav-accordion{display:none} .app-ui .premium-side-nav.open{background:transparent!important} .app-ui .premium-side-nav.open .side-nav-actions{display:grid;margin-top:12px} .app-ui .premium-side-nav.open .nav-accordion{display:grid!important;grid-template-columns:1fr!important;gap:2px;margin-top:0;background:var(--nav-bg);border:1px solid var(--nav-border);border-top:0;border-radius:0 0 14px 14px;padding:10px} .app-ui .premium-side-nav.open .side-nav-title{display:grid;background:var(--nav-bg);border-radius:14px 14px 0 0;border:1px solid var(--nav-border);border-bottom:0;padding:16px 14px 12px;margin:10px 0 0} .app-ui .premium-side-nav.open .nav-group-items{margin-left:14px} } /* --------------------------------------------------------- En-tête de page - */ .app-ui .page-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px; flex-wrap:wrap;margin:0 0 22px } .app-ui .page-head h1{font-size:clamp(23px,2.6vw,30px);font-weight:800;letter-spacing:-.025em;color:var(--ws-ink);margin:0} .app-ui .page-head .eyebrow{color:var(--ws-accent);font-size:12px;letter-spacing:.07em;margin-bottom:4px} .app-ui .page-head .muted,.app-ui .page-head>div>p{color:var(--ws-muted);margin:6px 0 0;font-size:14.5px} .app-ui .eyebrow{color:var(--ws-accent)} /* ------------------------------------------------------------- Surfaces ---- */ .app-ui .panel, .app-ui .card, .app-ui .contact-box, .app-ui .stat, .app-ui .list-card, .app-ui .ops-card, .app-ui .ops-drawer, .app-ui .table-wrap, .app-ui .settings-group{ background:var(--ws-surface);border:1px solid var(--ws-border);border-radius:var(--ws-radius); box-shadow:0 1px 2px rgba(16,24,38,.04),0 8px 24px -16px rgba(16,24,38,.18) } .app-ui .panel{padding:22px} .app-ui .panel h2,.app-ui .compact-heading h2,.app-ui .inline-heading h2{ font-size:17px;font-weight:750;letter-spacing:-.015em;color:var(--ws-ink) } .app-ui .compact-heading .eyebrow,.app-ui .inline-heading .eyebrow{color:var(--ws-muted)} /* Cartes statistiques */ .app-ui .stat-grid{gap:14px} .app-ui .stat,.app-ui .compact-stat{padding:16px 17px;border-radius:14px} .app-ui .stat strong,.app-ui .compact-stat strong{color:var(--ws-ink)!important;font-weight:800;letter-spacing:-.03em} .app-ui .stat span,.app-ui .compact-stat span{color:var(--ws-muted);font-weight:600} .app-ui a.compact-stat:hover,.app-ui .stat:hover{box-shadow:0 1px 2px rgba(16,24,38,.04),0 16px 30px -18px rgba(16,24,38,.3);border-color:var(--ws-border-strong)} /* Tableaux */ .app-ui .table-wrap{overflow:auto;box-shadow:0 1px 2px rgba(16,24,38,.04)} .app-ui table{min-width:680px} .app-ui th{ background:var(--ws-surface-2);color:var(--ws-muted);text-transform:uppercase; font-size:11px;letter-spacing:.05em;font-weight:700;padding:12px 16px;border-bottom:1px solid var(--ws-border) } .app-ui td{padding:14px 16px;border-bottom:1px solid var(--ws-border);color:var(--ws-ink-soft);font-size:14px} .app-ui tbody tr:last-child td{border-bottom:0} .app-ui tbody tr:hover{background:var(--ws-surface-2)} /* Lignes de résultat / listes */ .app-ui .result-row{border-bottom:1px solid var(--ws-border);padding:11px 10px;margin:0 -10px;border-radius:9px} .app-ui a.result-row:hover{background:var(--ws-surface-2)} .app-ui .result-row strong{color:var(--ws-ink);font-weight:650} .app-ui .result-row span{color:var(--ws-muted)} /* Bandeau de décision / raccourcis */ .app-ui .decision-strip a{ background:var(--ws-surface);border:1px solid var(--ws-border);border-radius:13px;padding:16px; box-shadow:0 1px 2px rgba(16,24,38,.04) } .app-ui .decision-strip a:hover{border-color:var(--ws-accent);box-shadow:0 14px 30px -18px rgba(16,24,38,.35);transform:translateY(-2px)} .app-ui .decision-strip a strong{color:var(--ws-ink)} .app-ui .decision-strip a span{color:var(--ws-muted)} /* États vides */ .app-ui .empty-state{ border:1px dashed var(--ws-border-strong);background:var(--ws-surface-2);border-radius:14px;color:var(--ws-muted) } .app-ui .empty-state strong{color:var(--ws-ink)} /* Champs de formulaire dans l'app */ .app-ui label{color:var(--ws-ink-soft);font-weight:600} .app-ui input,.app-ui select,.app-ui textarea{border-color:var(--ws-border-strong);background:var(--ws-surface);border-radius:11px} .app-ui input:focus,.app-ui select:focus,.app-ui textarea:focus{border-color:var(--ws-accent)} .app-ui .form-section{border-radius:var(--ws-radius);border-color:var(--ws-border);box-shadow:0 1px 2px rgba(16,24,38,.04)} /* Badge pastille comptage de tâches dans les entêtes */ .app-ui .compact-heading .badge,.app-ui .inline-heading .badge{background:var(--primary-50);color:var(--ws-accent-700);border:1px solid #d4e7f4} /* Boutons d'action dans l'app : un poil plus compacts et nets */ .app-ui .page-head .actions .button,.app-ui .page-head .actions button{border-radius:11px}