/* * Home tenant Ngento — styles autonomes. * Tous les tokens sont surchargés en par les CSS variables --t-* * injectées depuis le tenant_context (P3.C). */ :root { --t-primary: #1f4e79; --t-primary-dark: #163a5a; --t-primary-light: #2c6a9d; --t-accent: #f58220; --t-text: #1e293b; --t-muted: #64748b; --t-surface: #ffffff; --t-bg: linear-gradient(145deg, #1a556d 0%, #1f4e79 60%, #2c6a9d 100%); --t-radius: 18px; --t-radius-card: 14px; --t-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); --t-shadow-strong: 0 24px 60px rgba(15, 23, 42, 0.22); --t-safe-bottom: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body.ng-page { min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--t-text); background: var(--t-bg); background-attachment: fixed; } /* ─── topbar ─── */ .ng-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); position: sticky; top: 0; z-index: 100; } .ng-topbar-left { display: flex; align-items: center; gap: 0.85rem; } .ng-logo, .ng-logo-fallback { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; } .ng-logo { object-fit: cover; background: var(--t-primary); } .ng-logo-fallback { background: linear-gradient(135deg, var(--t-primary-dark) 0%, var(--t-primary) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; } .ng-topbar-title { font-weight: 700; color: var(--t-primary-dark); font-size: 1.05rem; line-height: 1.2; } .ng-topbar-subtitle { color: var(--t-muted); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } .ng-topbar-nav { display: flex; gap: 0.4rem; } .ng-nav-link { padding: 0.5rem 0.85rem; text-decoration: none; color: var(--t-primary-dark); font-weight: 600; font-size: 0.85rem; border-radius: 10px; transition: background 0.12s ease; } .ng-nav-link:hover { background: rgba(31, 78, 121, 0.08); } .ng-nav-link.active { background: var(--t-primary); color: #fff; } /* ─── main + hero ─── */ .ng-main { padding: 1.25rem; max-width: 1200px; margin: 0 auto; padding-bottom: calc(2rem + var(--t-safe-bottom)); } .ng-hero { background: rgba(255, 255, 255, 0.95); border-radius: var(--t-radius); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--t-shadow); } .ng-hero h1 { margin: 0; font-size: 1.85rem; color: var(--t-primary-dark); font-weight: 700; letter-spacing: -0.02em; } .ng-hero-sub { margin: 0.5rem 0 0; color: var(--t-muted); font-size: 0.95rem; } .ng-hero-sub code { background: rgba(31, 78, 121, 0.08); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; } /* ─── grille blocs ─── */ .ng-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .ng-card { background: rgba(255, 255, 255, 0.97); border-radius: var(--t-radius-card); padding: 1.1rem 1.15rem 1rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 168px; box-shadow: var(--t-shadow); transition: transform 0.14s ease, box-shadow 0.14s ease; position: relative; overflow: hidden; } .ng-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-light) 100%); opacity: 0; z-index: 0; transition: opacity 0.18s ease; } .ng-card > * { position: relative; z-index: 1; } .ng-card:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-strong); } .ng-card:hover::before { opacity: 0.04; } .ng-card-small { grid-column: span 1; min-height: 140px; } .ng-card-medium { grid-column: span 1; } .ng-card-large { grid-column: span 2; min-height: 200px; } .ng-card-wide { grid-column: span 3; } .ng-card-full { grid-column: span 4; } .ng-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.6rem; } .ng-card-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--t-primary-dark), var(--t-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; } .ng-card-tier { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 700; } .ng-tier-free { background: rgba(31, 78, 121, 0.12); color: var(--t-primary-dark); } .ng-tier-premium { background: rgba(245, 130, 32, 0.18); color: #b45309; } .ng-tier-private { background: rgba(15, 81, 50, 0.15); color: #166534; } .ng-tier-marketplace { background: rgba(124, 58, 237, 0.15); color: #6d28d9; } .ng-card-name { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; color: var(--t-primary-dark); } .ng-card-desc { margin: 0 0 0.85rem; flex: 1; color: var(--t-muted); font-size: 0.85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ng-card-footer { display: flex; justify-content: space-between; align-items: center; } .ng-card-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-muted); font-weight: 600; } .ng-card-arrow { font-size: 1.2rem; color: var(--t-primary); } /* ─── empty state ─── */ .ng-empty { background: rgba(255, 255, 255, 0.95); border-radius: var(--t-radius); padding: 2.5rem 1.5rem; text-align: center; box-shadow: var(--t-shadow); } .ng-empty h2 { margin: 0 0 0.5rem; color: var(--t-primary-dark); } .ng-empty p { color: var(--t-muted); margin: 0; } .ng-empty a { color: var(--t-primary); font-weight: 600; } /* ─── info ─── */ .ng-info { background: rgba(255, 255, 255, 0.95); border-radius: var(--t-radius); padding: 1.25rem; box-shadow: var(--t-shadow); } .ng-info-title { margin: 0 0 0.85rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-muted); } .ng-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; } .ng-info-item { display: flex; flex-direction: column; gap: 0.15rem; } .ng-info-key { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-muted); } .ng-info-val { font-weight: 600; color: var(--t-primary-dark); font-size: 0.95rem; word-break: break-word; } /* ─── footer ─── */ .ng-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem calc(1rem + var(--t-safe-bottom)); color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; max-width: 1200px; margin: 0 auto; } .ng-footer-link { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 600; } .ng-footer-link:hover { color: #fff; } /* ─── responsive ─── */ @media (max-width: 1024px) { .ng-grid { grid-template-columns: repeat(2, 1fr); } .ng-card-large, .ng-card-wide, .ng-card-full { grid-column: span 2; } } @media (max-width: 600px) { .ng-grid { grid-template-columns: 1fr; } .ng-card, .ng-card-small, .ng-card-medium, .ng-card-large, .ng-card-wide, .ng-card-full { grid-column: span 1; min-height: auto; } .ng-hero h1 { font-size: 1.4rem; } .ng-topbar-nav { gap: 0.2rem; } .ng-nav-link { padding: 0.4rem 0.6rem; font-size: 0.8rem; } }