/* ============================================================ Kryptonite Events — Application Comptable Thèmes : Dark Glass (défaut) + Épuré (éditorial noir/blanc, miroir paulojaneiro.fr) — sélection via [data-theme] sur . Fonts chargées par base.html (plus de @import render-blocking). ============================================================ */ /* ============================================================ Design Tokens — Dark (default) ============================================================ */ :root { /* Layout */ --sidebar-w: 240px; --sidebar-rail: 72px; --mobile-nav-h: 66px; --header-h: 60px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Backgrounds */ --bg-app: #080808; --bg-surface: #111111; --bg-surface-2: #181818; --bg-surface-3: #202020; --bg-card: #111111; --bg-input: rgba(255,255,255,0.05); --bg-hover: #202020; --bg-primary: #111111; --bg-secondary: #181818; /* Glass */ --glass-panel: rgba(18,16,26,0.60); --glass-bg: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.12); --glass-shadow: 0 16px 48px rgba(0,0,0,0.6); --glass-hi: inset 0 1px 0 rgba(255,255,255,0.14); --glass-blur: blur(22px) saturate(180%); --blur-amt: 22px; /* Brand palette (copie back-office) */ --pink: #ff007f; --purple: #8b00ff; --cyan: #00ccff; --green: #00e87a; --red: #ff3355; --amber: #ffb020; --grad: linear-gradient(135deg, var(--purple), var(--pink)); --grad-soft: linear-gradient(135deg, rgba(139,0,255,0.15), rgba(255,0,127,0.15)); /* Brand accents (mappés sur les variables historiques) */ --primary: #ff007f; --primary-dim: rgba(255,0,127,0.12); --primary-glow: 0 0 20px rgba(255,0,127,0.30); --primary-color: #ff007f; --neon-yellow: #ff007f; --neon-glow: 0 0 16px rgba(255,0,127,0.35); --secondary: #00ccff; --secondary-dim: rgba(0,204,255,0.12); --neon-cyan: #00ccff; --neon-blue: #8b00ff; /* Functional */ --success: #00e87a; --danger: #ff3355; --neon-red: #ff3355; --warning: #ffb020; --info: #00ccff; --ivoire: #F0EFE2; /* Typography */ --font-main: 'Inter', system-ui, sans-serif; --font-disp: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'Space Grotesk', ui-monospace, monospace; --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.60); --text-muted: rgba(255,255,255,0.38); /* Border */ --border-color: rgba(255,255,255,0.07); /* Shape & motion */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6); --ease: cubic-bezier(0.16, 1, 0.3, 1); --transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease), opacity 0.22s var(--ease); /* Z-index scale */ --z-sidebar: 200; --z-header: 100; --z-modal: 2000; --z-toast: 9999; } /* ============================================================ Design Tokens — Épuré (éditorial noir/blanc, miroir paulojaneiro.fr). Override de tokens UNIQUEMENT : aucune règle de layout/responsive. Sémantiques assombries = AA sur blanc. ============================================================ */ [data-theme="epure"] body { --bg-app: #ffffff; --bg-surface: #ffffff; --bg-surface-2: #fafafa; --bg-surface-3: #efefef; --bg-card: #ffffff; --bg-input: #fafafa; --bg-hover: #f2f2f2; --bg-primary: #ffffff; --bg-secondary: #fafafa; --glass-panel: #ffffff; --glass-bg: #ffffff; --glass-border: #e4e4e4; --glass-shadow: none; --glass-hi: none; --glass-blur: none; --pink: #111111; --purple: #111111; --cyan: #0a6c9c; --green: #0b8a4f; --red: #d11a2a; --amber: #9a6a00; --grad: linear-gradient(135deg, #111111, #111111); --grad-soft: linear-gradient(135deg, #f1f1f1, #f1f1f1); --primary: #111111; --primary-dim: rgba(0,0,0,0.06); --primary-glow: none; --primary-color: #111111; --neon-yellow: #111111; --neon-glow: none; --secondary: #0a6c9c; --secondary-dim: rgba(10,108,156,0.08); --neon-cyan: #0a6c9c; --neon-blue: #111111; --success: #0b8a4f; --danger: #d11a2a; --neon-red: #d11a2a; --warning: #9a6a00; --info: #0a6c9c; --ivoire: #111111; --text-primary: #0a0a0a; --text-secondary: #555555; --text-muted: #767676; --border-color: #e9e9e9; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --shadow-sm: none; --shadow-md: 0 6px 20px rgba(0,0,0,0.08); --shadow-lg: 0 14px 44px rgba(0,0,0,0.12); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-main); background: var(--bg-app); color: var(--text-primary); min-height: 100vh; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Ambient gradient (pink/purple) */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(ellipse 70% 50% at 12% -5%, rgba(139,0,255,0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 95% 105%, rgba(255,0,127,0.08) 0%, transparent 60%); pointer-events: none; z-index: 0; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); } h1, h2, h3, h4, .page-title { font-family: var(--font-disp); } /* ============================================================ Global overflow guard — jamais de scroll horizontal de page ============================================================ */ html { overflow-x: hidden; } img, svg, video, iframe, canvas { max-width: 100%; } .chart-container { max-width: 100%; } .chart-container canvas { max-width: 100% !important; } /* Les enfants de grille/flex doivent pouvoir rétrécir (sinon min-width:auto = taille du contenu → force la largeur de page) */ .deal-grid > *, .deal-card, .stats-container > *, .grid-2 > *, .facturation-grid > *, .form-row > * { min-width: 0; } /* ============================================================ App Layout ============================================================ */ .app-layout { display: flex; min-height: 100vh; } /* ============================================================ Sidebar Navigation (desktop = rail expand-on-hover) ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-rail); height: 100vh; background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--glass-border); box-shadow: var(--glass-hi); z-index: var(--z-sidebar); display: flex; flex-direction: column; transition: width 0.30s var(--ease); overflow: hidden; } .sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-lg); } /* Brand */ .sidebar-brand { padding: 0 0.95rem; height: var(--header-h); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; flex-shrink: 0; } .sidebar-brand .brand-icon { width: 36px; height: 36px; min-width: 36px; background: var(--grad); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -0.5px; box-shadow: 0 0 18px rgba(255,0,127,0.35); flex-shrink: 0; } .sidebar-brand .brand-text { font-family: var(--font-disp); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.4px; opacity: 0; transition: opacity 0.18s ease 0.06s; white-space: nowrap; text-transform: uppercase; } .sidebar:hover .brand-text { opacity: 1; } .sidebar-brand .brand-text span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Nav */ .sidebar-nav { flex: 1; padding: 0.7rem 0.55rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; } .sidebar-link { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.7rem; color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.86rem; transition: var(--transition); white-space: nowrap; position: relative; border-radius: var(--radius-md); cursor: pointer; } .sidebar-link .link-icon { width: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-link .link-icon svg { width: 19px; height: 19px; } .sidebar-link .link-label { opacity: 0; transition: opacity 0.18s ease 0.06s; } .sidebar:hover .link-label { opacity: 1; } .sidebar-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); } .sidebar-link.active { color: #fff; background: var(--grad-soft); } .sidebar-link.active .link-icon svg { color: var(--pink); } .sidebar-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* Badge notifications (sidebar Banque) — visible même sidebar repliée */ .notif-badge { position: absolute; top: 4px; right: 6px; min-width: 16px; padding: 1px 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 1.5; text-align: center; } .notif-badge[hidden] { display: none; } /* Active indicator bar */ .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; background: var(--grad); border-radius: 0 3px 3px 0; box-shadow: 0 0 10px rgba(255,0,127,0.6); } /* Footer */ .sidebar-footer { padding: 0.55rem; border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } /* ============================================================ Header ============================================================ */ .header { background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); padding: 0 2rem; height: var(--header-h); position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; } .header-content { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .header-left .page-title { font-family: var(--font-disp); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; } .header-left .page-subtitle, .header-left p { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; margin-top: 1px; } .header-stats { display: flex; background: var(--bg-surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; } .header-stat { display: flex; flex-direction: column; align-items: center; padding: 0.35rem 1rem; border-right: 1px solid var(--glass-border); min-width: 92px; } .header-stat:last-child { border-right: none; } .header-stat .label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } .header-stat .value { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; margin-top: 1px; font-variant-numeric: tabular-nums; } .header-stat.recettes .value { color: var(--success); } .header-stat.depenses .value { color: var(--danger); } .header-stat.non-declares .value { color: var(--pink); } .header-actions { display: flex; gap: 0.5rem; align-items: center; } /* Main content area */ .main-content { margin-left: var(--sidebar-rail); flex: 1; min-height: 100vh; position: relative; z-index: 1; } .nav-tabs, .nav-tab { display: none; } /* ============================================================ Container ============================================================ */ .container { max-width: 1540px; margin: 0 auto; padding: 1.75rem 2rem 4rem; } /* ============================================================ Stats Grid ============================================================ */ .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .stat-card { background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; position: relative; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); cursor: default; } .stat-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--text-muted); opacity: 0.3; transition: opacity 0.2s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--glass-border); } .stat-card:hover::after { opacity: 0.9; } .stat-card.positive::after { background: var(--success); opacity: 0.8; } .stat-card.negative::after { background: var(--danger); opacity: 0.8; } .stat-card.warning::after { background: var(--warning); opacity: 0.8; } .stat-card.special::after { background: var(--grad); opacity: 0.9; } .stat-card.info::after { background: var(--secondary); opacity: 0.8; } .stat-card .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 0.5rem; } .stat-card .value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; } /* v1.11 — Ligne de détail sous un chiffre clé (ventilation, alerte). */ .stat-card .stat-sub { margin-top: 0.4rem; font-size: 0.72rem; line-height: 1.35; color: var(--text-secondary); } .stat-card.positive .value { color: var(--success); } .stat-card.negative .value { color: var(--danger); } .stat-card.warning .value { color: var(--warning); } .stat-card.special .value { color: var(--pink); } .stat-card.info .value { color: var(--secondary); } /* ============================================================ Cards ============================================================ */ .card { background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); margin-bottom: 1.25rem; overflow: hidden; } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: rgba(255,255,255,0.02); min-height: 54px; } .card-header h2 { font-family: var(--font-disp); font-size: 0.98rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.1px; } .card-header h2 svg { width: 17px; height: 17px; color: var(--text-muted); } .card-body { padding: 1.5rem; } .card-body.no-padding { padding: 0; } .card-special { border-color: rgba(255,0,127,0.25); } .card-previsionnel { border-color: rgba(255,176,32,0.20); } /* ============================================================ Forms & Inputs ============================================================ */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.3px; } .form-control { width: 100%; background: var(--bg-input); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; color: var(--text-primary); font-family: var(--font-main); font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } .form-control:focus, .form-control:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 3px var(--primary-dim); } .form-control::placeholder { color: var(--text-muted); opacity: 0.8; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.25rem; cursor: pointer; } select.form-control option { background: #181818; color: var(--text-primary); } [data-theme="epure"] select.form-control option { background: #ffffff; color: #0a0a0a; } input[type="date"].form-control { color-scheme: dark; } [data-theme="epure"] input[type="date"].form-control { color-scheme: light; } input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } [data-theme="epure"] input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: none; } textarea.form-control { resize: vertical; min-height: 80px; } /* File input */ .file-input-wrapper { position: relative; } .file-input-wrapper input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; } .file-input-label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1.5px dashed var(--glass-border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.85rem; transition: var(--transition); padding: 0.7rem 0.9rem; cursor: pointer; white-space: nowrap; } .file-input-wrapper:hover .file-input-label { border-color: var(--pink); color: var(--pink); background: var(--primary-dim); } /* Checkbox group */ .checkbox-group { display: flex; align-items: center; gap: 0.625rem; padding: 0.65rem 0.9rem; background: var(--bg-input); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); height: 100%; } .checkbox-group:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); } .checkbox-group input { accent-color: var(--pink); width: 1rem; height: 1rem; cursor: pointer; } .checkbox-group span { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.62rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-main); font-weight: 600; font-size: 0.85rem; text-decoration: none; cursor: pointer; transition: var(--transition); border: none; letter-spacing: 0.2px; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 16px rgba(255,0,127,0.25); } .btn-primary:hover { box-shadow: 0 6px 22px rgba(255,0,127,0.45); transform: translateY(-1px); } .btn-success { background: var(--success); color: #04130c; } .btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,232,122,0.3); } .btn-danger { background: rgba(255,51,85,0.12); color: var(--danger); padding: 0.42rem 0.7rem; font-size: 0.78rem; } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-warning { background: rgba(255,176,32,0.14); color: var(--warning); padding: 0.42rem 0.7rem; font-size: 0.78rem; } .btn-warning:hover { background: var(--warning); color: #1a1200; } .btn-deal { background: var(--grad); color: #fff; } .btn-deal:hover { box-shadow: 0 4px 16px rgba(139,0,255,0.45); transform: translateY(-1px); } .btn-privacy, .btn-outline { background: transparent; border: 1px solid var(--glass-border); color: var(--text-secondary); } .btn-privacy:hover, .btn-outline:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); color: var(--text-primary); } .btn-privacy.active { background: var(--grad); color: #fff; border-color: transparent; } /* ============================================================ Tables ============================================================ */ .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } th { position: sticky; top: 0; z-index: 10; background: var(--bg-surface-2); padding: 0.75rem 1rem; text-align: left; font-size: 0.68rem; text-transform: uppercase; color: var(--text-secondary); /* muted = 3.6:1, sous AA sur texte small */ font-weight: 700; letter-spacing: 0.7px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; } td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-primary); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,0.03); } .amount { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; } .amount.positive { color: var(--success); } .amount.negative { color: var(--danger); } .amount.special { color: var(--pink); } .amount.warning { color: var(--warning); } .btn-link { color: var(--pink); text-decoration: none; font-weight: 500; font-size: 0.85rem; transition: var(--transition); cursor: pointer; } .btn-link:hover { opacity: 0.75; } /* Custom checkboxes */ .urssaf-checkbox, .client-paye-checkbox, .paye-checkbox { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--glass-border); border-radius: 5px; background: var(--bg-input); cursor: pointer; transition: var(--transition); position: relative; display: inline-block; vertical-align: middle; } .urssaf-checkbox:checked, .client-paye-checkbox:checked, .paye-checkbox:checked { background: var(--success); border-color: var(--success); } .urssaf-checkbox:checked::after, .client-paye-checkbox:checked::after, .paye-checkbox:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #04130c; border-top: none; border-left: none; transform: rotate(45deg); } .urssaf-checkbox:disabled, .client-paye-checkbox:disabled, .paye-checkbox:disabled { opacity: 0.35; cursor: not-allowed; } .urssaf-checkbox:focus-visible, .client-paye-checkbox:focus-visible, .paye-checkbox:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* ============================================================ Dropdowns & Modals ============================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--glass-shadow); min-width: 200px; display: none; z-index: 1000; padding: 0.375rem; } .dropdown.show .dropdown-menu { display: block; animation: fadeIn 0.18s ease; } .dropdown-menu a { display: block; padding: 0.6rem 0.875rem; color: var(--text-primary); text-decoration: none; border-radius: 8px; font-size: 0.875rem; cursor: pointer; transition: var(--transition); } .dropdown-menu a:hover { background: rgba(255,255,255,0.07); color: var(--pink); } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: var(--z-modal); display: flex; justify-content: center; align-items: center; padding: 1rem; } .modal, .modal-content { background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); overflow: hidden; animation: slideUp 0.25s var(--ease); } .modal-header { background: rgba(255,255,255,0.02); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); } .modal-header h2 { font-family: var(--font-disp); font-size: 1.05rem; font-weight: 600; } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1.25rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; background: rgba(0,0,0,0.15); } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; padding: 0.2rem; transition: color 0.2s ease; line-height: 1; } .modal-close:hover { color: var(--text-primary); } .alert { padding: 0.875rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.875rem; display: flex; gap: 0.5rem; align-items: flex-start; } .alert-warning { background: rgba(255,176,32,0.10); color: var(--warning); border: 1px solid rgba(255,176,32,0.25); } /* ============================================================ Animations ============================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } .animate-in { animation: slideUp 0.3s var(--ease) forwards; } .form-slide-enter { animation: formSlideDown 0.25s var(--ease) forwards; } @keyframes formSlideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } } /* ============================================================ Show More / Pagination ============================================================ */ .hidden-row { display: none !important; } .show-more-container { text-align: center; padding: 0.7rem; border-top: 1px solid var(--glass-border); background: rgba(255,255,255,0.02); cursor: pointer; transition: background 0.2s ease; user-select: none; } .show-more-container:hover { background: var(--primary-dim); } .show-more-btn { background: none; border: none; color: var(--pink); font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ Toasts ============================================================ */ .toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.625rem; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.125rem; border-radius: var(--radius-md); background: var(--bg-surface-2); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--text-primary); font-size: 0.875rem; font-weight: 500; min-width: 260px; max-width: 400px; animation: toastSlideIn 0.3s var(--ease); position: relative; overflow: hidden; } .toast.toast-exit { animation: toastSlideOut 0.25s ease forwards; } .toast-icon { font-size: 1.1rem; flex-shrink: 0; } .toast-message { flex: 1; } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0.2rem; opacity: 0.6; transition: opacity 0.2s; line-height: 1; } .toast-close:hover { opacity: 1; } .toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; animation: toastProgress 4s linear forwards; } .toast-success { border-left: 3px solid var(--success); } .toast-success .toast-icon { color: var(--success); } .toast-success .toast-progress { background: var(--success); } .toast-error { border-left: 3px solid var(--danger); } .toast-error .toast-icon { color: var(--danger); } .toast-error .toast-progress { background: var(--danger); } .toast-warning { border-left: 3px solid var(--warning); } .toast-warning .toast-icon { color: var(--warning); } .toast-warning .toast-progress { background: var(--warning); } .toast-info { border-left: 3px solid var(--secondary); } .toast-info .toast-icon { color: var(--secondary); } .toast-info .toast-progress { background: var(--secondary); } @keyframes toastSlideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } /* ============================================================ Badges ============================================================ */ .badge-origin { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 500; border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono); } .badge-ndf { background: rgba(0,232,122,0.10); color: var(--success); border-color: rgba(0,232,122,0.25); } .badge-manual { background: rgba(255,255,255,0.04); color: var(--text-muted); } /* Pastille « payé » d'une dépense. Partagée par l'onglet Dépenses et les lignes de note de frais : ces deux écrans montrent la même colonne en base, ils doivent la montrer pareil. */ .paye-pill { cursor: pointer; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; background: transparent; } .paye-pill.oui { color: var(--success); border-color: rgba(0, 232, 122, 0.5); } .paye-pill.non { color: var(--warning); border-color: rgba(255, 176, 32, 0.5); } .badge-auto-ndf { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: rgba(255,0,127,0.12); color: var(--pink); border: 1px solid rgba(255,0,127,0.35); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } /* ============================================================ Loading & Button States ============================================================ */ .loading-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.15); border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-loading { position: relative; pointer-events: none; opacity: 0.7; } .btn-loading .btn-text { visibility: hidden; } .btn-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.2); border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; } /* ============================================================ Utilities ============================================================ */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 1.5rem; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 1200px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .empty-state { text-align: center; padding: 2rem; color: var(--text-muted); } .empty-state svg { width: 32px; height: 32px; margin: 0 auto 0.5rem; display: block; opacity: 0.4; } .empty-state p { font-size: 0.875rem; } .chart-container { height: 320px; position: relative; } /* ============================================================ Thème Épuré — Component Overrides Neutralise la surcouche verre (blur/glow/dégradés codés en dur) pour un rendu plat, blanc, éditorial. Cosmétique pur. ============================================================ */ [data-theme="epure"] body::before { content: none; } [data-theme="epure"] .sidebar, [data-theme="epure"] .header, [data-theme="epure"] .modal, [data-theme="epure"] .modal-content, [data-theme="epure"] .card, [data-theme="epure"] .stat-card, [data-theme="epure"] .toast, [data-theme="epure"] .dropdown-menu { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } [data-theme="epure"] .sidebar:hover { box-shadow: 0 14px 44px rgba(0,0,0,0.10); } /* Marque : carré noir, lettrage plein (annule clip dégradé + glow) */ [data-theme="epure"] .brand-icon { box-shadow: none; border-radius: 0; } [data-theme="epure"] .brand-text span { background: none; -webkit-text-fill-color: #0a0a0a; } /* Nav : survols gris clairs, actif noir net sans glow */ [data-theme="epure"] .sidebar-link:hover { color: var(--text-primary); background: #f2f2f2; } [data-theme="epure"] .sidebar-link.active { color: #0a0a0a; } [data-theme="epure"] .sidebar-link.active .link-icon svg { color: #111111; } [data-theme="epure"] .sidebar-link.active::before { box-shadow: none; } /* Surfaces / tables */ [data-theme="epure"] .card-header { background: #fafafa; } [data-theme="epure"] tr:hover td { background: #f7f7f7; } [data-theme="epure"] td { border-bottom-color: #eeeeee; } [data-theme="epure"] .show-more-container { background: #fafafa; } [data-theme="epure"] .show-more-container:hover { background: #f2f2f2; } [data-theme="epure"] .modal-header { background: #fafafa; } [data-theme="epure"] .modal-footer { background: #fafafa; } [data-theme="epure"] .modal-overlay { background: rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Boutons : primaire noir plein, survol inversé (éditorial) */ [data-theme="epure"] .btn-primary, [data-theme="epure"] .btn-deal { background: #111111; color: #ffffff; border: 1.5px solid #111111; box-shadow: none; } [data-theme="epure"] .btn-primary:hover, [data-theme="epure"] .btn-deal:hover { background: #ffffff; color: #111111; transform: none; box-shadow: none; } [data-theme="epure"] .btn-success { background: var(--success); color: #ffffff; } [data-theme="epure"] .btn-success:hover { box-shadow: none; filter: brightness(1.1); } [data-theme="epure"] .btn-warning { background: rgba(154,106,0,0.10); } [data-theme="epure"] .btn-warning:hover { background: var(--warning); color: #ffffff; } [data-theme="epure"] .btn-privacy:hover, [data-theme="epure"] .btn-outline:hover { border-color: #111111; background: #f2f2f2; color: var(--text-primary); } [data-theme="epure"] .dropdown-menu a:hover { background: #f2f2f2; color: var(--text-primary); } [data-theme="epure"] .checkbox-group:hover { background: #f2f2f2; border-color: #d9d9d9; } /* Cases à cocher : coche blanche sur vert foncé */ [data-theme="epure"] .urssaf-checkbox:checked::after, [data-theme="epure"] .client-paye-checkbox:checked::after, [data-theme="epure"] .paye-checkbox:checked::after { border-color: #ffffff; } /* Scrollbars claires */ [data-theme="epure"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); } [data-theme="epure"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); } /* ============================================================ Sélecteur de thème (Paramètres) — pattern back-office PJ ============================================================ */ .theme-seg { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--bg-surface-2); flex-wrap: wrap; } .theme-seg-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); font-family: var(--font-disp); font-weight: 600; font-size: 13px; cursor: pointer; transition: var(--transition); } .theme-seg-btn:hover { color: var(--text-primary); } .theme-seg-btn.active { background: var(--grad); color: #fff; } .theme-seg-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } .theme-seg-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25); flex-shrink: 0; } .theme-seg-dot.glass { background: linear-gradient(135deg, #8b00ff, #ff007f); border-color: rgba(255,255,255,0.3); } .theme-seg-dot.epure { background: #ffffff; border-color: #111111; } /* Bouton header : icône = thème vers lequel on bascule */ .theme-toggle .icon-moon { display: none; } [data-theme="epure"] .theme-toggle .icon-sun { display: none; } [data-theme="epure"] .theme-toggle .icon-moon { display: block; } /* ============================================================ Responsive ============================================================ */ /* Tablet — rail stays hidden until hover, content full width */ @media (max-width: 1100px) and (min-width: 901px) { .header-stats { display: none; } } /* Mobile / small tablet — sidebar becomes a bottom tab bar */ @media (max-width: 900px) { .sidebar { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: calc(var(--mobile-nav-h) + var(--safe-bottom)); flex-direction: row; align-items: stretch; border-right: none; border-top: 1px solid var(--glass-border); padding-bottom: var(--safe-bottom); transition: none; overflow: hidden; } .sidebar:hover { width: 100%; box-shadow: none; } .sidebar-brand { display: none; } .sidebar-nav { flex-direction: row; flex: 1; gap: 2px; padding: 0.3rem 0.4rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-footer { flex-direction: row; border-top: none; border-left: 1px solid var(--glass-border); padding: 0.3rem 0.4rem; } .sidebar-link { flex-direction: column; gap: 2px; min-width: 62px; padding: 0.4rem 0.45rem; border-radius: var(--radius-md); justify-content: center; } .sidebar-link .link-icon { width: auto; min-width: 0; } .sidebar-link .link-icon svg { width: 21px; height: 21px; } .sidebar-link .link-label { opacity: 1; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1px; line-height: 1; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-link.active::before { left: 12%; right: 12%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; } .main-content { margin-left: 0; padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom)); overflow-x: clip; max-width: 100vw; } .container { overflow-x: clip; max-width: 100vw; } /* Formulaires à grille inline (ajout rapide) → 1 colonne sur mobile */ form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; align-items: stretch !important; } /* Rangées flex inline (barres de filtres, groupes de boutons) : wrap si elles débordent — sans effet sur celles qui tiennent déjà */ .main-content [style*="display:flex"], .main-content [style*="display: flex"], .admin-web-actions { flex-wrap: wrap; } .admin-web-header { flex-direction: column; align-items: flex-start; } .admin-web-title { min-width: 0; } .admin-web-url { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header { padding: 0 1rem; } .header-stats { display: none; } .header-left .page-title { font-size: 0.98rem; } .container { padding: 1.1rem 1rem 2rem; } } /* Phones */ @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .stats-container { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .stat-card { padding: 1rem 1.1rem; } .stat-card .value { font-size: 1.25rem; } .card-header { padding: 0.875rem 1rem; } .card-body { padding: 1rem; } .modal, .modal-content { max-width: 100%; } .toast-container { left: 0.75rem; right: 0.75rem; top: auto; bottom: calc(var(--mobile-nav-h) + 0.75rem + var(--safe-bottom)); } .toast { min-width: 0; width: 100%; } .header-actions .btn span { display: none; } } @media (max-width: 380px) { .stats-container { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ A11y & UX hardening — audit fixes (2026-06) ============================================================ */ /* Native controls / scrollbars follow the active theme */ :root { color-scheme: dark; } :root[data-theme="epure"] { color-scheme: light; } /* Screen-reader-only utility (visually hidden, still announced) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link to main content */ .skip-link { position: fixed; top: -4rem; left: 0.75rem; z-index: var(--z-toast); padding: 0.6rem 1rem; background: var(--bg-surface-2); color: var(--text-primary); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: top 0.2s var(--ease); } .skip-link:focus { top: calc(0.75rem + var(--safe-top)); } /* Keyboard focus for elements promoted to role=button / role=tab */ [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } [role="button"] { cursor: pointer; } /* Remove 300ms tap delay on interactive elements */ a, button, summary, label, [role="button"], [role="tab"], .toggle-btn, .tab-btn { touch-action: manipulation; } /* Contain scroll chaining inside overlays / sheets / menus */ .modal-overlay, .modal, .modal-content, .modal-body, .link-modal, .dropdown-menu, .drawer { overscroll-behavior: contain; } /* Catch-all keyboard focus ring for custom inputs that kill `outline` (e.g. .search-input, .ligne-textarea). .form-control keeps its own box-shadow ring; mouse focus stays ring-free via :focus-visible. */ input:not(.form-control):focus-visible, textarea:not(.form-control):focus-visible, select:not(.form-control):focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; } /* ============================================================ v1.12 §8 — Bloc « mes deals » du tableau de bord ============================================================ */ .deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; } .deal-tuile { display: block; padding: 0.85rem 0.9rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .deal-tuile:hover { border-color: var(--pink); transform: translateY(-2px); } .deal-tuile-titre { font-weight: 600; font-size: 0.86rem; line-height: 1.3; margin-bottom: 0.15rem; } .deal-tuile-meta { font-size: 0.7rem; color: var(--text-muted); } /* La poche domine la tuile : c'est le chiffre qu'on vient chercher. */ .deal-tuile-poche { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; margin: 0.35rem 0 0.1rem; } .deal-tuile-badges { margin-top: 0.45rem; } .deal-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .deal-badge-alerte { color: var(--danger); border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .deal-tuile-erreur { border-color: var(--danger); } /* ============================================================ v1.12 §8 — Tête d'accueil et blocs repliables ============================================================ */ /* Trois ou quatre indicateurs, plus larges et plus hauts que les tuiles de trésorerie : c'est la hiérarchie qui manquait au mur de onze cartes. */ .stats-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stats-hero .stat-card { padding: 1.5rem 1.75rem; } .stats-hero .stat-card .value { font-size: 2.1rem; } .stats-hero .stat-card .label { font-size: 0.74rem; } /* En-tête cliquable d'un bloc repliable. Bouton et non : le

garde son rôle de titre pour les lecteurs d'écran, et le second bouton d'action de la barre reste en dehors de la zone de repli. */ .card-repli { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; } .card-repli:hover .card-repli-chevron { color: var(--pink); } .card-repli:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; } .card-repli-chevron { font-size: 0.8rem; color: var(--text-muted); transition: color 0.2s ease; } .config-tuile-ligne { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.2rem; border-bottom: 1px solid var(--border-color); cursor: pointer; font-size: 0.88rem; } .config-tuile-ligne:last-child { border-bottom: none; } .config-tuile-ligne:hover { color: var(--pink); } /* ============================================================ MODE LECTURE SEULE ============================================================ Posé par le serveur : quand le rôle ne peut pas écrire. Masque les contrôles PORTANT LA MARQUE `data-ecriture`. ⚠️ Une liste blanche à l'envers : on marque ce qui ÉCRIT, on ne devine pas. Deviner sur le libellé cacherait « Exporter » un jour où quelqu'un l'aurait renommé « Enregistrer le PDF ». ⚠️ Ceci ne protège RIEN. Le serveur refuse déjà toute écriture (403) et le balayage des 208 routes garantit qu'aucune GET n'écrit. Cacher un bouton est de la cohérence visuelle ; un formulaire caché reste envoyable à la main. Ce qui NE DOIT PAS porter la marque : filtres, tris, recherche, exports PDF, navigation, bascule de thème, fermeture de modale. Un comptable en lecture seule a besoin de fouiller et de sortir des rapports — lui retirer les filtres en même temps que les boutons rendrait le rôle inutile. ============================================================ */ [data-lecture-seule] [data-ecriture] { display: none !important; }