/* ========================================================================= NeuroEEAT — Neural Dark Override Layer Couche d'habillage visuel basée sur le design system Neural Dark. N'altère AUCUNE structure HTML ni aucune fonction JS — uniquement couleurs, typographie, surfaces, bordures et micro-effets. Doit être chargé EN DERNIER dans . ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* Surfaces */ --bg: oklch(0.18 0.012 250); --bg-2: oklch(0.215 0.014 250); --bg-3: oklch(0.255 0.014 250); --bg-4: oklch(0.30 0.014 250); --line: oklch(0.32 0.012 250); --line-2: oklch(0.28 0.012 250); /* Texte */ --fg: oklch(0.96 0.005 250); --fg-2: oklch(0.78 0.008 250); --fg-3: oklch(0.58 0.01 250); --fg-4: oklch(0.42 0.012 250); /* Accents EEAT */ --ex: #f5a524; /* Expérience — ambre */ --ep: #3b82f6; /* Expertise — bleu */ --au: #a855f7; /* Autorité — violet */ --tr: #10b981; /* Fiabilité — émeraude */ --er: #ef4444; /* Erreur */ /* Type */ --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif; } /* ==== Base ==== */ html, body { background: var(--bg) !important; color: var(--fg) !important; font-family: var(--sans) !important; -webkit-font-smoothing: antialiased; } /* Halo atmosphérique en fond, comme sur le site marketing */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% -5%, oklch(0.28 0.04 80 / 0.18), transparent 50%), radial-gradient(ellipse at 85% 0%, oklch(0.28 0.04 280 / 0.15), transparent 50%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* Tout le texte hérite de la nouvelle famille sauf le mono explicite */ body, body * { font-family: var(--sans); } body code, body pre, body kbd, body samp, body .font-mono, body [class*="mono"] { font-family: var(--mono) !important; } /* ==== Sélection ==== */ ::selection { background: color-mix(in oklch, var(--ep) 40%, transparent); color: var(--fg); } /* ==== Scrollbar ==== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 5px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--bg-4); } /* ========================================================================= LOGO — "NeuroEEAT" en dégradé 4 piliers (ambre → bleu → violet → émeraude) ========================================================================= */ .gradient-text { background: linear-gradient(120deg, var(--ex) 0%, var(--ep) 35%, var(--au) 65%, var(--tr) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; letter-spacing: -0.015em; font-weight: 700; } /* ========================================================================= SIDEBAR ========================================================================= */ .sidebar { background: oklch(0.16 0.012 250) !important; border-right: 1px solid var(--line-2) !important; backdrop-filter: blur(12px); } .sidebar a { border-radius: 8px; transition: all .15s ease; } /* === Icônes : toujours visibles dans la sidebar (SVG après feather OU avant) === */ .sidebar nav svg, .sidebar nav i[data-feather], .sidebar a > svg, .sidebar a > i { display: inline-block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; flex-shrink: 0 !important; stroke: currentColor; color: currentColor; } /* === Collapsed (desktop) : recentrer les liens autour de l'icône === */ .sidebar.collapsed nav a, .sidebar.collapsed .nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } .sidebar.collapsed .sidebar-text { display: none !important; } /* FIX : le bouton de toggle DOIT rester visible pour pouvoir dé-collapse */ .sidebar.collapsed #sidebar-toggle { display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; margin: 0 auto !important; } .sidebar.collapsed .flex.items-center.justify-between { justify-content: center !important; } /* Logo NeuroEEAT caché en collapsed (juste le bouton centré) */ .sidebar.collapsed .gradient-text.sidebar-text { display: none !important; } .sidebar.collapsed .flex.items-center.justify-between > div:first-child { display: none !important; } .sidebar.collapsed .p-6 { padding-left: 12px !important; padding-right: 12px !important; padding-top: 18px !important; } /* === Tablette (max 1024px) : sidebar forcée à 80px, même règles === */ @media (max-width: 1024px) and (min-width: 769px) { .sidebar:not(.mobile-open) nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } .sidebar:not(.mobile-open) .sidebar-text { display: none !important; } .sidebar:not(.mobile-open) #sidebar-toggle { display: none !important; } .sidebar:not(.mobile-open) .flex.items-center.justify-between { justify-content: center !important; } .sidebar:not(.mobile-open) .p-6 { padding-left: 12px !important; padding-right: 12px !important; } } /* === Mobile (max 768px) : sidebar overlay, le texte revient quand ouverte === */ @media (max-width: 768px) { .sidebar.mobile-open nav a { justify-content: flex-start !important; padding-left: 12px !important; padding-right: 12px !important; } .sidebar.mobile-open .sidebar-text { display: inline !important; } .sidebar.mobile-open .flex.items-center.justify-between { justify-content: space-between !important; } } .sidebar a:hover { background: var(--bg-2) !important; color: var(--fg) !important; } /* Item actif (currentment `bg-indigo-900/50 text-indigo-400`) */ .sidebar a[class*="bg-indigo-900"], .sidebar a.active { background: color-mix(in oklch, var(--ep) 14%, var(--bg-2)) !important; color: var(--ep) !important; box-shadow: inset 2px 0 0 var(--ep); } .sidebar .text-indigo-400 { color: var(--ep) !important; } .sidebar i { transition: transform .15s ease; } /* Pastille indigo du logo */ .bg-indigo-600.rounded-full { background: linear-gradient(135deg, var(--ep), var(--au)) !important; } /* ========================================================================= CARDS, surfaces "lab-card" ========================================================================= */ .lab-card { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; backdrop-filter: none; border-radius: 12px; transition: border-color .2s, transform .2s, box-shadow .2s; } .lab-card:hover { border-color: var(--line) !important; box-shadow: 0 8px 30px -8px oklch(0.10 0.05 250 / 0.6) !important; } /* Cartes report, score, stat */ .report-card, .score-item, .stat-card { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; border-radius: 12px; } /* ========================================================================= TAILWIND : surfaces grises → palette neural-dark ========================================================================= */ .bg-gray-900, [class*="bg-gray-900/"] { background-color: var(--bg) !important; } .bg-gray-800, [class*="bg-gray-800/"] { background-color: var(--bg-2) !important; } .bg-gray-700, [class*="bg-gray-700/"] { background-color: var(--bg-3) !important; } .bg-gray-600 { background-color: var(--bg-4) !important; } .bg-black, [class*="bg-black/"] { background-color: var(--bg) !important; } .bg-white { background-color: var(--fg) !important; } .bg-white\/5 { background-color: color-mix(in oklch, var(--fg) 5%, transparent) !important; } .bg-white\/10 { background-color: color-mix(in oklch, var(--fg) 10%, transparent) !important; } .text-white { color: var(--fg) !important; } .text-gray-100, .text-gray-200, .text-gray-300 { color: var(--fg-2) !important; } .text-gray-400, .text-gray-500 { color: var(--fg-3) !important; } .text-gray-600, .text-gray-700 { color: var(--fg-4) !important; } .border-gray-700, .border-gray-800 { border-color: var(--line-2) !important; } .border-gray-600 { border-color: var(--line) !important; } .divide-gray-800 > * + *, .divide-gray-700 > * + * { border-color: var(--line-2) !important; } /* ========================================================================= TAILWIND : indigo → bleu (--ep / Expertise) — accent primaire ========================================================================= */ .bg-indigo-600, .bg-indigo-500 { background-color: var(--ep) !important; } [class*="bg-indigo-900/"] { background-color: color-mix(in oklch, var(--ep) 18%, var(--bg-2)) !important; } [class*="bg-indigo-600/"] { background-color: color-mix(in oklch, var(--ep) 24%, transparent) !important; } .text-indigo-400, .text-indigo-300, .text-indigo-500 { color: var(--ep) !important; } .border-indigo-500, .border-indigo-600 { border-color: var(--ep) !important; } [class*="border-indigo-500/"], [class*="border-indigo-700/"] { border-color: color-mix(in oklch, var(--ep) 50%, var(--line-2)) !important; } .hover\:bg-indigo-700:hover, .hover\:bg-indigo-600:hover { background-color: color-mix(in oklch, var(--ep) 80%, white) !important; } /* ========================================================================= TAILWIND : purple → violet (--au / Autorité) ========================================================================= */ .bg-purple-600, .bg-purple-500 { background-color: var(--au) !important; } [class*="bg-purple-900/"] { background-color: color-mix(in oklch, var(--au) 18%, var(--bg-2)) !important; } .text-purple-400, .text-purple-300 { color: var(--au) !important; } /* ========================================================================= TAILWIND : green → émeraude (--tr / Fiabilité) ========================================================================= */ .bg-green-600, .bg-green-500 { background-color: var(--tr) !important; } [class*="bg-green-900/"] { background-color: color-mix(in oklch, var(--tr) 16%, var(--bg-2)) !important; } .text-green-400, .text-green-300 { color: var(--tr) !important; } .border-green-700\/30, [class*="border-green-700/"] { border-color: color-mix(in oklch, var(--tr) 40%, var(--line-2)) !important; } /* ========================================================================= TAILWIND : yellow → ambre (--ex / Expérience) ========================================================================= */ .bg-yellow-600, .bg-yellow-500 { background-color: var(--ex) !important; } [class*="bg-yellow-900/"] { background-color: color-mix(in oklch, var(--ex) 16%, var(--bg-2)) !important; } .text-yellow-400, .text-yellow-300, .text-yellow-400\/80 { color: var(--ex) !important; } [class*="border-yellow-700"] { border-color: color-mix(in oklch, var(--ex) 40%, var(--line-2)) !important; } /* ========================================================================= TAILWIND : red, blue, orange (touches conservées + nuancées) ========================================================================= */ .bg-red-500, .bg-red-600 { background-color: var(--er) !important; } [class*="bg-red-900/"] { background-color: color-mix(in oklch, var(--er) 18%, var(--bg-2)) !important; } .text-red-400, .text-red-300 { color: var(--er) !important; } [class*="border-red-700"] { border-color: color-mix(in oklch, var(--er) 40%, var(--line-2)) !important; } .bg-blue-600, .bg-blue-500 { background-color: var(--ep) !important; } .text-blue-400, .text-blue-300 { color: var(--ep) !important; } .bg-orange-600, .bg-orange-500 { background-color: var(--ex) !important; } .text-orange-400, .text-orange-300 { color: var(--ex) !important; } /* Dégradés génériques */ .bg-gradient-to-r.from-indigo-600 { background-image: linear-gradient(90deg, var(--ep), var(--au)) !important; } [class*="from-indigo"][class*="to-purple"] { background-image: linear-gradient(90deg, var(--ep), var(--au)) !important; } /* ========================================================================= TYPOGRAPHIE — titres, paragraphes ========================================================================= */ h1, h2, h3, h4 { font-family: var(--sans); letter-spacing: -0.02em; font-weight: 600; } .text-2xl, .text-3xl, .text-4xl { letter-spacing: -0.025em; } .prose h1, .prose h2, .prose h3 { color: var(--fg) !important; } .prose { color: var(--fg-2) !important; } /* Chiffres / scores : police mono — ciblé strict (pas les H1/H2 par défaut) */ .score-badge, .score-item .num, .stat-card p, .stat-value, .meta-num, .hero-stat-num, .kpi-num, .num.font-bold, [data-mono] { font-family: var(--mono); letter-spacing: -0.02em; } /* ========================================================================= FORMULAIRES ========================================================================= */ input, textarea, select { font-family: var(--sans); background: var(--bg-3) !important; border: 1px solid var(--line) !important; color: var(--fg) !important; border-radius: 8px; transition: border-color .15s; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--ep) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ep) 20%, transparent) !important; } input::placeholder, textarea::placeholder { color: var(--fg-4); } /* Labels mono petits caps comme le design */ label, .field label, form > div > label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3) !important; } /* ========================================================================= BOUTONS ========================================================================= */ button, .btn, [class*="bg-indigo-600"][class*="rounded"], a[class*="bg-indigo"] { font-family: var(--sans); border-radius: 8px; letter-spacing: -0.005em; transition: all .15s ease; } button:hover, .btn:hover { filter: brightness(1.08); } /* CTA gradient principal */ .bg-gradient-to-r.from-indigo-600.to-purple-600, .bg-gradient-to-r.from-indigo-500.to-purple-500 { background-image: linear-gradient(135deg, var(--ep), var(--au)) !important; box-shadow: 0 6px 20px -6px color-mix(in oklch, var(--au) 60%, transparent); } /* ========================================================================= TABLES ========================================================================= */ table { border-collapse: collapse; font-family: var(--sans); } th { background: var(--bg-2) !important; color: var(--fg-3) !important; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600 !important; border-bottom: 1px solid var(--line-2) !important; } td { border-bottom: 1px solid var(--line-2) !important; color: var(--fg-2); } tbody tr:hover td { background: var(--bg-2) !important; } /* ========================================================================= COMPOSANTS DIVERS ========================================================================= */ /* Header / topbar fixe (existe sur dashboard) */ header.fixed, header.sticky { background: oklch(0.18 0.012 250 / 0.85) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2) !important; } /* Notifications dropdown */ .notifications-dropdown { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; border-radius: 12px; box-shadow: 0 20px 40px -10px oklch(0.10 0.05 250 / 0.7); } /* Lignes de divider */ hr, .border-t, .border-b { border-color: var(--line-2) !important; } /* Badges score (high/medium/low) */ .score-high { color: var(--tr) !important; background: color-mix(in oklch, var(--tr) 14%, transparent) !important; } .score-medium{ color: var(--ex) !important; background: color-mix(in oklch, var(--ex) 14%, transparent) !important; } .score-low { color: var(--er) !important; background: color-mix(in oklch, var(--er) 14%, transparent) !important; } /* Listes check / cross / warning */ .check-list li::before { color: var(--tr) !important; } .cross-list li::before { color: var(--er) !important; } .warning-list li::before { color: var(--ex) !important; } /* Prose : tableaux dans rapports */ .prose th { background: color-mix(in oklch, var(--ep) 12%, var(--bg-2)) !important; color: var(--ep) !important; } .prose td, .prose th { border: 1px solid var(--line-2) !important; } /* Loader / spinner couleur */ .animate-spin { color: var(--ep); } /* Champs file / range */ input[type="range"] { accent-color: var(--ep); } input[type="checkbox"], input[type="radio"] { accent-color: var(--ep); } /* ========================================================================= ACCENT BAR au-dessus des cartes piliers (Expérience/Expertise/...) Ciblé via texte/icône feather si présent. ========================================================================= */ .lab-card[data-pillar="experience"], .lab-card.pillar-experience { --pillar: var(--ex); } .lab-card[data-pillar="expertise"], .lab-card.pillar-expertise { --pillar: var(--ep); } .lab-card[data-pillar="autorite"], .lab-card.pillar-autorite { --pillar: var(--au); } .lab-card[data-pillar="fiabilite"], .lab-card.pillar-fiabilite { --pillar: var(--tr); } .lab-card[data-pillar] { position: relative; } .lab-card[data-pillar]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pillar); opacity: 0.8; border-radius: 12px 12px 0 0; } /* ========================================================================= MOBILE — affinements ========================================================================= */ @media (max-width: 768px) { body::before { opacity: 0.6; } } /* ========================================================================= DÉTAILS FINAUX — micro-tweaks ========================================================================= */ /* Liens hors sidebar */ a:not(.sidebar a):not(.btn):not([class*="bg-"]):hover { color: var(--ep); } /* Force la pastille indigo "•" du dot indicator → bleu EEAT */ .bg-red-500.rounded-full[class*="absolute"] { background-color: var(--er) !important; } /* ========================================================================= CHARTS — contraintes de hauteur compactes + cohérence Neural Dark Les modules js/pages/*.js déclarent mais Chart.js ignore l'attribut height quand responsive:true. On contraint via CSS — chart-defaults.js applique maintainAspectRatio:false. ========================================================================= */ .lab-card > canvas[id$="Chart"], .lab-card > canvas[id$="chart"], .lab-card canvas[id*="Chart"] { display: block !important; width: 100% !important; max-height: 240px !important; height: 240px !important; } /* Dashboard charts un peu plus grands (radar + ligne d'évolution) */ .lab-card > canvas#scoreChart, .lab-card > canvas#componentsChart { max-height: 260px !important; height: 260px !important; } /* Sur mobile : encore plus compact */ @media (max-width: 640px) { .lab-card > canvas[id$="Chart"], .lab-card > canvas[id*="Chart"] { max-height: 200px !important; height: 200px !important; } } /* Wrapper de chart : padding-bottom plus serré pour la cohérence visuelle */ .lab-card > h3 + canvas[id*="Chart"], .lab-card > h3 + canvas[id*="chart"] { margin-top: 8px; } /* Compatibilité .nav-brand (utilisé sur /statistiques) — appliquer le gradient logo */ .nav-brand, a.nav-brand, span.nav-brand, .brand-title, .logo-text { background: linear-gradient(120deg, var(--ex) 0%, var(--ep) 35%, var(--au) 65%, var(--tr) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-family: var(--sans) !important; font-weight: 700; letter-spacing: -0.015em; } /* Texte de footer / méta */ .text-xs { letter-spacing: 0.01em; } /* Suppression d'éventuel halo bleu auto sur boutons primaires */ .bg-indigo-600:hover { background-color: color-mix(in oklch, var(--ep) 88%, white) !important; }