/* * AcepUI — thème de refonte (partial CSS) * Source de vérité : acepui-design-prototype.html (validé) + DESIGN_HANDOFF.md * Classes préfixées "acep-" pour ne pas entrer en collision avec le template * Bootstrap/NiceAdmin existant (.card, .breadcrumb, .avatar sont déjà pris). */ :root{ /* ACEP — charte graphique : blanc + teal vif + teal profond */ --acep-white: #FFFFFF; --acep-teal: #51C4BD; /* couleur du logo */ --acep-teal-deep: #02564A; /* couleur de marque secondaire */ /* Neutres dérivés du teal profond — sombre, mais jamais noir pur */ --bg: #071915; --bg-elevated: #0E2A22; --panel: #12332A; --panel-hover: #183E33; --border: rgba(158,224,216,0.14); --border-strong: rgba(158,224,216,0.32); --text: #F4FAF9; --text-dim: #B4CCC6; --text-faint: #6E8F88; /* Famille de nuances de teal — pour distinguer les 7 modules sans sortir de charte */ --teal-50: #C9EDE8; --teal-100: #9FE0D8; --teal-200: #7ED4C9; --teal-300: #51C4BD; /* = --acep-teal, brand */ --teal-400: #33A99C; --teal-500: #1F7E74; --teal-600: #12554C; --teal-700: #02564A; /* = --acep-teal-deep, brand */ --success: #51C4BD; --danger: #C2584B; /* seul écart volontaire à la charte : rouge = alerte, usage universel */ --status-pending: var(--teal-100); --brand-text: var(--acep-teal); --glow-1: rgba(81,196,189,0.08); --glow-2: rgba(2,86,74,0.35); --grid-line: rgba(255,255,255,0.015); --topbar-bg: rgba(15,19,25,0.7); --row-hover: rgba(255,255,255,0.015); --field-bg: rgba(255,255,255,0.04); --radius: 14px; --radius-sm: 9px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ---------- Thème clair — même charte, fond clair ---------- */ [data-theme="light"]{ --bg: #F3FBFA; --bg-elevated: #FFFFFF; --panel: #FFFFFF; --panel-hover: #EAF6F3; --border: rgba(2,86,74,0.14); --border-strong: rgba(2,86,74,0.26); --text: #072A24; --text-dim: #3E655F; --text-faint: #7B9994; --success: #12554C; --danger: #A8412F; --status-pending: #12554C; --brand-text: var(--acep-teal-deep); --glow-1: rgba(81,196,189,0.16); --glow-2: rgba(81,196,189,0.10); --grid-line: rgba(2,86,74,0.05); --topbar-bg: rgba(255,255,255,0.78); --row-hover: rgba(2,86,74,0.035); --field-bg: rgba(2,86,74,0.035); } /* * .acep-shell = conteneur de la nouvelle charte (topbar + zone déjà migrée). * Volontairement PAS posé sur : sur une page hybride (chrome migré, * contenu métier Bootstrap encore d'origine, ex. compta/contentieux.php), un * reset sur déteint par héritage/cascade sur tout le contenu Bootstrap * qui suit (texte quasi blanc sur fond blanc, boutons/DataTables décolorés). * .acep-shell borne la nouvelle charte à la zone réellement redessinée. */ .acep-shell[data-theme]{ background: radial-gradient(1100px 520px at 12% -8%, var(--glow-1), transparent 60%), radial-gradient(900px 500px at 100% 0%, var(--glow-2), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Modificateur pour une page entièrement migrée (ex. dash.php) : occupe au moins tout le viewport même quand le contenu est court. À ne PAS ajouter sur une page hybride, sous peine de pousser le contenu Bootstrap d'un écran entier vers le bas. */ .acep-shell--page[data-theme]{ min-height: 100vh; } /* subtle ledger-grid texture */ .acep-shell[data-theme]::before{ content:""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(1200px 700px at 50% 0%, black, transparent 75%); z-index: 0; } a.acep-card, a.acep-subpage-row, a.acep-breadcrumb-link{ color:inherit; text-decoration:none; } .acep-shell :focus-visible{ outline: 2px solid var(--acep-teal); outline-offset: 2px; border-radius: 6px; } /* En-tête léger pour une page hybride : ne porte que le fil d'Ariane au-dessus du contenu métier Bootstrap non migré (contrairement à .acep-main, pensé pour une vue entièrement nouvelle). */ .acep-page-head{ position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 22px 40px 4px; } /* ---------- Topbar ---------- */ .acep-topbar{ position: sticky; top:0; z-index: 2; display:flex; align-items:center; justify-content:space-between; padding: 18px 40px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); } .acep-brand{ display:flex; align-items:center; gap:12px; } .acep-brand-mark{ width:34px;height:34px; border-radius: 9px; background: linear-gradient(135deg, var(--acep-teal), var(--acep-teal-deep)); display:flex;align-items:center;justify-content:center; font-family: var(--font-display); font-weight:700; color:#04140F; font-size: 15px; } .acep-brand-text{ font-family: var(--font-display); font-weight:600; font-size: 16.5px; letter-spacing: 0.2px; } .acep-brand-sub{ font-size:11px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 1px; } .acep-topbar-right{ display:flex; align-items:center; gap: 18px; } .acep-search{ display:flex; align-items:center; gap:8px; background: var(--panel); border:1px solid var(--border); border-radius: 10px; padding: 8px 12px; color: var(--text-faint); font-size: 13px; width: 260px; } .acep-search svg{flex-shrink:0;} .acep-env-badge{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--brand-text); background: color-mix(in srgb, var(--acep-teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acep-teal) 30%, transparent); padding: 3px 8px; border-radius: 100px; } .acep-avatar{ width:34px;height:34px;border-radius:50%; background: var(--bg-elevated); border:1px solid var(--border-strong); display:flex;align-items:center;justify-content:center; font-family: var(--font-display); font-size: 12.5px; color: var(--text-dim); } .acep-theme-switch{ display:flex; align-items:center; gap:2px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 100px; padding: 3px; } /* Reset ciblé : ce sont les 2 seuls