/* ============================================================ MivaaPay — Thème back-office Surcharge du thème Vuexy/Modern Admin : rouge #E83E52, charbon, Inter, rayons 8/12. Chargé EN DERNIER pour gagner la cascade. Règle : rouge = accent (texte blanc dessus) ; sur fond blanc, le texte d'accent reste rouge (lisible) ou charbon selon le contexte. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { --predy-red: #E83E52; --predy-red-deep: #C9293D; --predy-red-soft: rgba(232, 62, 82, .14); --predy-red-ink: #B21D30; /* texte rouge foncé lisible sur fond clair/soft */ --predy-on-accent: #FFFFFF; /* encre sur l'accent rouge (foncé) */ --predy-noir: #141414; --predy-charbon: #212121; --predy-sidebar: #1b1b1b; /* Aplat d'accent portant du texte blanc. En thème clair on assombrit légèrement le rouge de marque : blanc sur #E83E52 ne donne que 4.0:1, blanc sur #D62B41 donne 4.9:1 (AA). Le rouge de marque reste utilisé pour les bordures, les icônes et les fonds teintés. */ --predy-accent-fill: #D62B41; /* Alias de compatibilité (anciens noms --predy-yellow*) → accent rouge */ --predy-yellow: var(--predy-red); --predy-yellow-deep: var(--predy-red-deep); --predy-yellow-soft: var(--predy-red-soft); /* Surfaces du thème clair (valeurs par défaut) */ --predy-page-bg: #f4f4f4; --predy-card-bg: rgba(247, 253, 255, .5); --predy-card-border: #ececec; --predy-card-shadow: 0 2px 10px rgba(20, 20, 20, .04); --predy-nav-shadow: 0 2px 10px rgba(20, 20, 20, .06); --predy-ink-2: #8a8a8a; /* en-têtes de tableaux, libellés discrets */ --predy-loader-scrim: rgba(255, 255, 255, .6); --predy-toggle-bg: #ffffff; --predy-toggle-border: #dcdcdc; } /* ============================================================ Thème sombre — activé par la classe `dark-layout` (posée sur par le script inline, miroitée sur pour les sélecteurs composés du thème Vuexy type `.dark-layout.blank-page`). Vuexy fournit déjà dark-layout.css pour ses composants ; on ne surcharge ici que ce que MivaaPay avait figé en clair. ============================================================ */ html.dark-layout { /* L'accent-texte s'éclaircit : #B21D30 est illisible sur fond sombre. */ --predy-red-ink: #F98A98; /* En sombre, l'aplat reste le rouge de marque (choix d'identité existant). */ --predy-accent-fill: var(--predy-red); --predy-page-bg: #161D31; /* fond de page Vuexy dark */ --predy-card-bg: #283046; /* carte Vuexy dark */ --predy-card-border: #3B4253; --predy-card-shadow: 0 2px 10px rgba(0, 0, 0, .25); --predy-nav-shadow: 0 2px 10px rgba(0, 0, 0, .3); --predy-ink-2: #9ca0ab; --predy-loader-scrim: rgba(16, 20, 33, .68); --predy-toggle-bg: #283046; --predy-toggle-border: #3B4253; } /* Seule règle de dark-layout.css portée par `body` et non par un ancêtre : on la rejoue depuis pour que la classe sur suffise. */ html.dark-layout body { color: #B4B7BD; } /* ---------- Typographie ---------- */ body, .card, .btn, .form-control, .form-select, input, select, textarea, h1, h2, h3, h4, h5, h6, .main-menu, .header-navbar, .breadcrumb, .badge, .nav, .dropdown-menu, .table { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; } h1, h2, h3, h4, h5, .card-title { letter-spacing: -.01em; font-weight: 700; } /* ---------- Fond de page (neutralise le gris hérité) ---------- */ body { background-color: var(--predy-page-bg) !important; height: auto !important; } /* ---------- Accent primaire → rouge (texte blanc) ---------- */ .btn-primary, .btn-primary:not(:disabled):not(.disabled) { background-color: var(--predy-accent-fill) !important; border-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; box-shadow: none !important; font-weight: 600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--predy-red-deep) !important; border-color: var(--predy-red-deep) !important; color: var(--predy-on-accent) !important; box-shadow: 0 6px 16px rgba(232, 62, 82, .28) !important; } .btn-outline-primary { color: var(--predy-red) !important; border-color: var(--predy-red) !important; } .btn-outline-primary:hover { background-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; } .btn-flat-primary { color: var(--predy-red) !important; } .btn-relief-primary { background-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; } .bg-primary { background-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; } .bg-light-primary { background-color: var(--predy-red-soft) !important; color: var(--predy-red-ink) !important; } .text-primary { color: var(--predy-red) !important; } .badge-primary, .badge.bg-primary { background-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; } .badge-light-primary { background-color: var(--predy-red-soft) !important; color: var(--predy-red-ink) !important; } .border-primary { border-color: var(--predy-red) !important; } /* Icônes/avatars colorés du thème */ .avatar.bg-light-primary, .avatar .bg-light-primary { background-color: var(--predy-red-soft) !important; color: var(--predy-red-ink) !important; } .avatar.bg-primary { background-color: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; } /* ---------- Liens ---------- */ a { color: var(--predy-charbon); } a:hover { color: var(--predy-red-deep); } html.dark-layout a { color: #D0D2D6; } html.dark-layout a:hover { color: var(--predy-red-ink); } /* ---------- Sidebar (menu vertical) en charbon, actif rouge ---------- */ .main-menu, .main-menu.menu-light, .main-menu.menu-dark { background-color: var(--predy-sidebar) !important; } .main-menu .navbar-header { background-color: var(--predy-sidebar) !important; } .main-menu-content .navigation { background-color: var(--predy-sidebar) !important; } .main-menu .navigation > li > a, .main-menu .navigation li a { color: #cfcfcf !important; } .main-menu .navigation li a i, .main-menu .navigation li a svg { color: #9a9a9a !important; } .main-menu .navigation > li > a:hover { color: #fff !important; } .main-menu .navigation li.has-sub > a { color: #cfcfcf !important; } .main-menu .navigation > li.active > a { background: var(--predy-accent-fill) !important; color: var(--predy-on-accent) !important; box-shadow: 0 0 10px 1px rgba(232, 62, 82, .5) !important; border-radius: 8px; font-weight: 600; } .main-menu .navigation > li.active > a i, .main-menu .navigation > li.active > a svg { color: var(--predy-on-accent) !important; } .main-menu .navigation li.menu-item a:hover { background: rgba(255, 255, 255, .05) !important; border-radius: 8px; } .main-menu .navigation .menu-title, .main-menu .navigation .navigation-header span { color: #7a7a7a !important; } /* ---------- Navbar supérieure ---------- */ .header-navbar { border-radius: 12px; } .header-navbar.navbar-shadow { box-shadow: var(--predy-nav-shadow); } /* ---------- Cartes ---------- `.card`, `.glass` et `.glass-card` sont figées en blanc translucide par le