/* Thèmes visuels de la plateforme Gravité. « Signature » = valeurs par défaut dans base.html (:root). Chaque thème ci-dessous redéfinit les variables ; les thèmes sombres ajoutent data-bs-theme="dark" (posé par le gabarit) pour que Bootstrap recolore cartes/tableaux/formulaires. N'affecte QUE la présentation — aucune donnée, aucun calcul. */ /* ============ ÉCLAT — clair, aéré, arrondi, nav blanche ============ */ html[data-theme="eclat"] { --page-bg:#fbfbfe; --card-bg:#ffffff; --text:#1f1f3a; --muted:#8b8fa6; --border:#ece9f5; --marine:#1f1f3a; --rose:#F50087; --nav-bg:#ffffff; --nav-text:#1f1f3a; --nav-muted:#6b6f82; --nav-hover:rgba(40,40,70,.06); --nav-border:#eceaf5; --radius:.85rem; --radius-lg:1rem; --shadow:0 .35rem 1.4rem rgba(40,40,70,.07); --fs:1.02rem; --group-bg:#f4f2fb; } /* Nav claire : les éléments « pour fond foncé » deviennent foncés */ html[data-theme="eclat"] .navbar-gravite { border-bottom:1px solid var(--nav-border); } html[data-theme="eclat"] .navbar-gravite .btn-outline-light { color:#1f1f3a; border-color:#cfd0dd; } html[data-theme="eclat"] .navbar-gravite .btn-outline-light:hover { background:#f0f0f6; color:#1f1f3a; } html[data-theme="eclat"] .navbar-gravite .text-light, html[data-theme="eclat"] .navbar-gravite .navbar-text { color:#1f1f3a !important; } /* ============ NUIT — mode sombre ============ */ html[data-theme="nuit"] { --page-bg:#14141f; --card-bg:#1e1e2e; --text:#d8dae5; --muted:#9094a8; --border:#2e2e42; --marine:#e7e8f0; --rose:#FF3DA0; --nav-bg:#1b1b2b; --nav-text:#e7e8f0; --nav-muted:#9fa3ba; --nav-hover:rgba(255,255,255,.06); --nav-border:#2a2a3d; --radius:.5rem; --radius-lg:.6rem; --shadow:none; --fs:1rem; --group-bg:#262636; --bs-card-bg:var(--card-bg); } /* ============ DENSE — compact, pro, anguleux ============ */ html[data-theme="dense"] { --page-bg:#e9ebf0; --card-bg:#ffffff; --text:#2b2f3a; --muted:#6b7180; --border:#cdd2dd; --marine:#282846; --rose:#F50087; --nav-bg:#282846; --nav-text:#ffffff; --nav-muted:#dfe1ea; --nav-hover:rgba(255,255,255,.08); --nav-border:rgba(255,255,255,.12); --radius:0; --radius-lg:0; --shadow:none; --fs:.9rem; --group-bg:#dde1ea; } html[data-theme="dense"] .card-body { padding:.6rem .8rem; } html[data-theme="dense"] .table > :not(caption) > * > * { padding:.25rem .45rem; } html[data-theme="dense"] .navbar-gravite { --bs-navbar-padding-y:.15rem; } /* ============ STATION — embarquement spatial : marine profond + rose vif ============ */ html[data-theme="station"] { --page-bg:#0d0d20; --card-bg:#16162e; --text:#e2e4f4; --muted:#9aa0c0; --border:#2b2b52; --marine:#eef0fb; --rose:#FF2E9F; --nav-bg:rgba(13,13,32,.92); --nav-text:#eef0fb; --nav-muted:#9aa0c0; --nav-hover:rgba(255,46,159,.10); --nav-border:#26264a; --radius:.8rem; --radius-lg:.95rem; --shadow:0 0 0 1px #26264a; --fs:1rem; --group-bg:#1d1d3d; --bs-card-bg:var(--card-bg); } /* Champ d'étoiles TOUJOURS derrière le contenu (même méthode que la pluie Matrix) : fond porté par , body transparent, canvas en z-index négatif. */ #champEtoiles { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:#0d0d20; } html[data-theme="station"] { background:#0d0d20; } html[data-theme="station"] body { background:transparent; } /* Cartes HUD : liséré rose en tête, halo discret au survol */ html[data-theme="station"] .card { border:1px solid #26264a; border-top:2px solid var(--rose); } html[data-theme="station"] .card:hover { box-shadow:0 0 0 1px #34346a, 0 0 22px rgba(255,46,159,.10); } html[data-theme="station"] .kpi { color:#ffffff; text-shadow:0 0 18px rgba(255,46,159,.35); } html[data-theme="station"] .menu-list .nav-link.active, html[data-theme="station"] .btn-rose { box-shadow:0 0 14px rgba(255,46,159,.45); } html[data-theme="station"] .navbar-gravite { border-bottom:1px solid #26264a; } html[data-theme="station"] .offcanvas-gravite { background:#10102a; } html[data-theme="station"] .menu-section { color:var(--rose); text-shadow:0 0 12px rgba(255,46,159,.4); } /* ============ MATRIX — terminal vert sur noir + pluie de code ============ */ html[data-theme="matrix"] { --page-bg:#050a05; --card-bg:rgba(7,16,9,.88); --text:#9dffb0; --muted:#4f9b63; --border:#15391f; --marine:#7cffa0; --rose:#00ff66; --nav-bg:rgba(6,15,9,.92); --nav-text:#7cffa0; --nav-muted:#4f9b63; --nav-hover:rgba(0,255,102,.08); --nav-border:#13351d; --radius:.2rem; --radius-lg:.25rem; --shadow:0 0 0 1px #13351d; --fs:1rem; --group-bg:rgba(13,31,18,.85); --font:"SFMono-Regular",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace; --bs-card-bg:var(--card-bg); } /* Canvas de pluie TOUJOURS derrière le contenu (z-index négatif = méthode robuste, pas besoin de remonter chaque conteneur). Le fond noir est porté par ; body transparent pour laisser voir la pluie ; le contenu (z-index auto = 0) passe automatiquement au-dessus du canvas (-1). */ #matrixRain { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:#050a05; } html[data-theme="matrix"] { background:#050a05; } html[data-theme="matrix"] body { background:transparent; } /* Accents verts : texte foncé sur les surfaces néon */ html[data-theme="matrix"] .btn-rose, html[data-theme="matrix"] .menu-list .nav-link.active { color:#04230f !important; } html[data-theme="matrix"] .navbar-gravite .btn-outline-light { color:#7cffa0; border-color:#1c5a30; } html[data-theme="matrix"] .navbar-gravite .btn-outline-light:hover { background:rgba(0,255,102,.1); color:#7cffa0; } html[data-theme="matrix"] .navbar-gravite .text-light, html[data-theme="matrix"] .navbar-gravite .navbar-text { color:#7cffa0 !important; }