/* * ImmoSentinel — Design System "Black Intelligence" * STRICT noir/blanc dans l'UI. La couleur est reservee EXCLUSIVEMENT * aux donnees : graphiques, badges score, statuts data. * * Aucun accent or, aucun gradient, aucune ombre, aucune animation * complexe. Less is more. */ :root { /* Backgrounds */ --bg-primary: #0A0A0A; /* corps de page */ --bg-secondary: #111111; /* zones secondaires */ --bg-surface: #161616; /* cards */ --bg-nav: #0D0D0D; /* navigation laterale */ /* Bordures */ --border: #222222; /* bordure standard */ --border-faint: #1A1A1A; /* separateurs discrets */ --border-active: #FFFFFF; /* borduce active (strict B&W) */ /* Texte */ --text-primary: #FFFFFF; --text-secondary:#888888; --text-disabled: #444444; /* Couleurs DATA UNIQUEMENT (graphiques, badges score, statuts) */ --color-success: #2ECC71; --color-warning: #E67E22; --color-danger: #E74C3C; --color-info: #3498DB; --color-purple: #9B59B6; --color-teal: #1ABC9C; } /* ─── Theme clair (Sprint Light) ──────────────────────────────────────── * Active via (pose par Sentinel.theme.set au * boot, avant que le CSS ne s'applique, pour eviter le flash sombre). * On ne touche QUE les variables bg/border/text — les couleurs DATA * (badges score, graphiques) restent identiques pour conserver la * coherence visuelle des donnees entre les 2 modes. */ :root[data-theme="light"] { --bg-primary: #FFFFFF; --bg-secondary: #F7F7F7; /* zones secondaires, ~5% gris */ --bg-surface: #FFFFFF; /* cards (sur fond F7) */ --bg-nav: #F2F2F2; /* nav, plus contrastee que page */ --border: #DDDDDD; --border-faint: #EEEEEE; --border-active: #000000; /* inverse du dark */ --text-primary: #0A0A0A; --text-secondary:#666666; --text-disabled: #BBBBBB; } /* Overrides ponctuels en light : effets bases sur rgba(255,255,255,...) * qui deviennent invisibles sur fond clair (kanban drop target, hover bouton). */ :root[data-theme="light"] .input:hover, :root[data-theme="light"] .input:focus { background: rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .kanban__col-cards.is-target { background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); } /* Hovers boutons en light : les valeurs dark donnent des effets agressifs * (#E0E0E0 sur fond noir = flash gris clair) ou invisibles (rgba blanc * sur fond blanc). On override avec des valeurs cohérentes light. */ :root[data-theme="light"] .btn-primary:hover { background: #333333; /* gris foncé sur fond noir → légère respiration */ } :root[data-theme="light"] .btn-secondary:hover { background: rgba(0, 0, 0, 0.05); } /* Statuts pipeline + notes : les borders/backgrounds dark sont invisibles * sur fond clair. On augmente la saturation en light pour garder la * lisibilite des badges sur le tableau et le Kanban. */ :root[data-theme="light"] .statut-badge--prospect { color: #555; border-color: #bbb; background: rgba(0, 0, 0, 0.03); } :root[data-theme="light"] .statut-badge--perdu { color: #555; border-color: #bbb; background: rgba(0, 0, 0, 0.03); } :root[data-theme="light"] .statut-badge--actif { color: #1565c0; border-color: #90caf9; background: rgba(74, 158, 255, 0.10); } :root[data-theme="light"] .statut-badge--chaud { color: #c2410c; border-color: #fdba74; background: rgba(255, 149, 51, 0.10); } :root[data-theme="light"] .statut-badge--signe { color: #1b5e20; border-color: #81c784; background: rgba(76, 175, 80, 0.10); } :root[data-theme="light"] .derniere-interaction--stale { color: #c2410c; /* orange un peu plus sombre, lisible sur fond clair */ } :root[data-theme="light"] .derniere-interaction--very-stale { color: #c62828; /* rouge plus sombre */ } /* ─── Reset minimal ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg-primary); color: var(--text-primary); font-weight: 400; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--text-primary); text-decoration: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; } /* ─── Typographie ───────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-weight: 300; /* effet luxe, leger */ margin: 0 0 0.5em 0; color: var(--text-primary); letter-spacing: 0.02em; } h1 { font-size: 32px; letter-spacing: 0.05em; } h2 { font-size: 22px; } h3 { font-size: 16px; font-weight: 600; } .label, .uppercase { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--text-secondary); } .muted { color: var(--text-secondary); } .muted-strong { color: var(--text-disabled); } /* ─── Layout ────────────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } .layout__main { flex: 1; padding: 32px 40px; overflow-x: auto; } .page-header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--border-faint); } .page-header h1 { margin: 0 0 4px 0; } .page-header p { margin: 0; color: var(--text-secondary); } /* ─── Cards ──────────────────────────────────────────────────────────── */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 2px; padding: 24px; } .card + .card { margin-top: 16px; } /* ─── Boutons (strict B&W) ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 2px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; transition: all 200ms ease; cursor: pointer; background: transparent; color: var(--text-primary); } .btn-primary { background: var(--text-primary); color: var(--bg-primary); } .btn-primary:hover { /* Hover swap-aware : E0E0E0 en dark (gris clair sur blanc), * override en light dans le bloc [data-theme="light"] plus bas. */ background: #E0E0E0; } .btn-secondary { background: transparent; border-color: var(--text-primary); color: var(--text-primary); } .btn-secondary:hover { /* rgba(255,255,255) en dark, override rgba(0,0,0) en light. */ background: rgba(255, 255, 255, 0.06); } /* "danger" reste monochrome — la couleur est reservee a la data */ .btn-danger { background: transparent; border-color: #666666; color: var(--text-secondary); } .btn-danger:hover { border-color: var(--text-primary); color: var(--text-primary); } .btn[disabled], .btn:disabled { cursor: not-allowed; opacity: 0.4; } /* ─── Inputs ────────────────────────────────────────────────────────── */ .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid #333333; border-radius: 2px; color: var(--text-primary); transition: border-color 200ms ease; } .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text-primary); } label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); } .field + .field { margin-top: 16px; } /* ─── Tableaux ──────────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; } .table thead th { background: var(--bg-secondary); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); } .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-faint); } .table tbody tr:hover td { background: var(--bg-surface); } .table tbody tr:last-child td { border-bottom: none; } /* ─── Badges score (DATA = couleur autorisee) ──────────────────────── */ .badge { display: inline-block; padding: 4px 10px; border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; border: 1px solid var(--text-disabled); color: var(--text-secondary); background: transparent; } .badge--score-100 { border-color: var(--color-success); color: var(--color-success); background: rgba(46, 204, 113, 0.06); } .badge--score-good, .badge--score-medium { /* alias : 70-99 score, ou actions "intermediaires" audit */ border-color: var(--color-warning); color: var(--color-warning); background: rgba(230, 126, 34, 0.06); } .badge--score-low { border-color: var(--text-disabled); color: var(--text-secondary); } /* ─── Compteurs (dashboard) ─────────────────────────────────────────── */ .stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 2px; padding: 24px; } .stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; } .stat__value { font-size: 36px; font-weight: 300; letter-spacing: 0.02em; line-height: 1; color: var(--text-primary); } .stat__sub { margin-top: 8px; font-size: 11px; color: var(--text-secondary); } .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; } /* ─── Login ─────────────────────────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--bg-surface); border: 1px solid var(--border); padding: 40px; } .login-card h1 { text-align: center; margin-bottom: 4px; font-size: 28px; letter-spacing: 0.3em; } .login-card .subtitle { text-align: center; color: var(--text-secondary); font-size: 10px; letter-spacing: 0.4em; margin-bottom: 32px; text-transform: uppercase; } .login-card form { width: 100%; } /* Sprint Polish : bandeau "session interrompue" en haut du formulaire * (vs petite form-error 12px facile a manquer). Affiche par login.html * quand l'URL contient ?reason=... apres un kick. */ .kick-banner { width: 100%; border: 1px solid var(--color-danger); background: rgba(231, 76, 60, 0.08); /* color-danger a 8% */ border-left-width: 3px; padding: 14px 16px; margin-bottom: 24px; border-radius: 2px; } .kick-banner__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-danger); margin-bottom: 6px; font-weight: 600; } .kick-banner__msg { font-size: 13px; color: var(--text-primary); line-height: 1.5; } .form-error { margin-top: 16px; padding: 10px 14px; border: 1px solid var(--color-danger); background: rgba(231, 76, 60, 0.06); color: var(--color-danger); font-size: 12px; text-align: center; display: none; } .form-error.is-visible { display: block; } /* ─── Lien splash (page d'accueil publique) ─────────────────────────── */ .splash-link { display: inline-block; margin-top: 56px; font-size: 10px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-disabled); padding: 10px 4px; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; } .splash-link:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); } /* ─── Navigation laterale ───────────────────────────────────────────── */ .nav { width: 240px; flex-shrink: 0; background: var(--bg-nav); border-right: 1px solid var(--border-faint); padding: 32px 0 16px 0; display: flex; flex-direction: column; min-height: 100vh; } .nav__brand { padding: 0 24px 32px 24px; border-bottom: 1px solid var(--border-faint); } .nav__logo { font-weight: 300; letter-spacing: 0.3em; font-size: 18px; color: var(--text-primary); } .nav__sublogo { font-size: 9px; letter-spacing: 0.5em; color: var(--text-secondary); margin-top: 6px; text-transform: uppercase; } /* Phase 13.2 : badge groupe + cabinet actif sous le brand */ .nav__groupe-badge { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-faint); font-size: 10px; line-height: 1.5; } .nav__groupe-label { color: var(--text-secondary); letter-spacing: 0.15em; font-weight: 600; } .nav__groupe-name { color: var(--text-primary); letter-spacing: 0.05em; } .nav__groupe-cabinet { color: var(--text-secondary); margin-top: 4px; font-size: 11px; } /* Sprint Polish : lien GROUPE pour groupe_admin (clic -> /groupe.html). * Hover discret pour signaler l'affordance sans crier. */ a.nav__groupe-link { display: inline-block; text-decoration: none; color: inherit; transition: opacity 150ms ease; } a.nav__groupe-link:hover { opacity: 0.7; text-decoration: underline; text-decoration-color: var(--text-secondary); text-underline-offset: 3px; } /* Sprint Polish : bouton "RETOUR" pour groupe_admin qui a switche. * Visuellement secondaire (pas de fond plein) mais visible (border + hover). */ .nav__groupe-return { display: block; margin-top: 10px; width: 100%; background: transparent; border: 1px solid var(--text-secondary); color: var(--text-primary); padding: 6px 10px; font-size: 10px; font-family: inherit; letter-spacing: 0.1em; cursor: pointer; text-align: center; border-radius: 2px; transition: border-color 0.15s, color 0.15s; } .nav__groupe-return:hover:not(:disabled) { border-color: var(--text-primary); } .nav__groupe-return:disabled { opacity: 0.5; cursor: wait; } .nav__list { list-style: none; margin: 0; padding: 16px 0 0 0; flex: 1; } .nav__list li { margin: 0; } .nav__list a { display: block; padding: 12px 24px; color: var(--text-disabled); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border-left: 2px solid transparent; transition: color 200ms ease, background 200ms ease; } .nav__list a:hover { color: var(--text-primary); } .nav__list a.is-active { color: var(--text-primary); border-left-color: var(--text-primary); background: var(--bg-surface); } .nav__bot { padding: 16px 24px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border-faint); } .nav__bot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); animation: pulse 2s ease-in-out infinite; } .nav__bot-dot.is-inactive { background: var(--text-disabled); animation: none; } .nav__bot-dot.is-warning { background: #f5a623; animation: pulse 2s ease-in-out infinite; } /* ─── Toasts (Sprint A) ─────────────────────────────────────────────── */ #sentinel-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .sentinel-toast { pointer-events: auto; background: var(--bg-secondary); border: 1px solid #333; color: var(--text-primary); padding: 12px 18px; border-radius: 4px; font-size: 13px; max-width: 360px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transform: translateX(120%); opacity: 0; transition: transform 0.25s ease-out, opacity 0.25s ease-out; border-left: 3px solid var(--text-secondary); } .sentinel-toast.is-visible { transform: translateX(0); opacity: 1; } .sentinel-toast--success { border-left-color: #4caf50; } .sentinel-toast--error { border-left-color: #f44336; } .sentinel-toast--info { border-left-color: #888; } @media (max-width: 600px) { #sentinel-toasts { right: 12px; left: 12px; bottom: 12px; } .sentinel-toast { max-width: none; } } /* ─── Empty states (Sprint A) ───────────────────────────────────────── */ .empty-state-cta { text-align: center; padding: 48px 24px; color: var(--text-secondary); } .empty-state-cta__title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; } .empty-state-cta__subtitle { font-size: 13px; color: var(--text-disabled); margin-bottom: 20px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; } .empty-state-cta__action { display: inline-block; } /* ─── Onboarding checklist (Sprint A) ───────────────────────────────── */ .onboarding-card { background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-secondary) 100%); border: 1px solid var(--border); border-left: 3px solid var(--text-primary); padding: 24px; margin-bottom: 24px; position: relative; } .onboarding-card__title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 4px; } .onboarding-card__subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; } .onboarding-card__progress { font-size: 11px; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .onboarding-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bg-secondary); } .onboarding-step:last-child { border-bottom: none; } .onboarding-step__check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--text-disabled); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-disabled); flex-shrink: 0; } .onboarding-step.is-done .onboarding-step__check { border-color: #4caf50; background: #4caf50; color: #000; } .onboarding-step__label { flex: 1; font-size: 13px; color: var(--text-primary); } .onboarding-step.is-done .onboarding-step__label { color: var(--text-disabled); text-decoration: line-through; } .onboarding-step__action { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); text-decoration: none; border: 1px solid #444; padding: 6px 12px; border-radius: 2px; } .onboarding-step__action:hover { color: var(--text-primary); border-color: var(--text-primary); } .onboarding-step.is-done .onboarding-step__action { display: none; } /* ─── Sprint CRM 1 : filtres pipeline + badges statut ───────────────── */ .pipeline-filters { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; } .pipeline-filters__btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px; font-family: inherit; transition: all 0.15s; } .pipeline-filters__btn:hover { color: var(--text-primary); border-color: #555; } .pipeline-filters__btn.is-active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); } /* Badges statut client */ .statut-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 2px; border: 1px solid; font-weight: 600; } .statut-badge--prospect { color: #888; border-color: #444; } .statut-badge--actif { color: #4a9eff; border-color: #2a5a8f; background: rgba(74, 158, 255, 0.08); } .statut-badge--chaud { color: #ff9533; border-color: #8a5520; background: rgba(255, 149, 51, 0.08); } .statut-badge--signe { color: #4caf50; border-color: #2a6a2c; background: rgba(76, 175, 80, 0.08); } .statut-badge--perdu { color: #777; border-color: #333; opacity: 0.7; } /* Indicateur "X jours sans contact" */ .derniere-interaction { font-size: 11px; color: var(--text-disabled); } .derniere-interaction--stale { color: #ff9533; } .derniere-interaction--very-stale { color: #f44336; font-weight: 600; } /* Statut match (badges plus petits dans le tableau) */ .match-statut-select { font-size: 10px; padding: 3px 6px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } /* Notes timestampees */ .notes-block { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 12px; max-height: 240px; overflow-y: auto; font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.6; font-family: 'SF Mono', Menlo, Consolas, monospace; } /* ─── Sprint Admin Pro : tableau triable ────────────────────────────── */ .table--sortable th[data-sort] { cursor: pointer; user-select: none; position: relative; padding-right: 18px; } .table--sortable th[data-sort]:hover { color: var(--text-primary); } .table--sortable th[data-sort]::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0.3; border: 4px solid transparent; border-top-color: currentColor; margin-top: 2px; } .table--sortable th.is-sorted-asc::after { opacity: 1; border-top-color: transparent; border-bottom-color: currentColor; margin-top: -4px; } .table--sortable th.is-sorted-desc::after { opacity: 1; } /* ─── Sprint CRM 2 : Kanban + rappels + contact ─────────────────────── */ /* Toggle Liste / Kanban */ .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .view-toggle__btn { background: transparent; border: none; color: var(--text-secondary); padding: 6px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; font-family: inherit; } .view-toggle__btn:hover { color: var(--text-primary); } .view-toggle__btn.is-active { background: var(--text-primary); color: var(--bg-primary); } /* Kanban board */ .kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; } @media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .kanban { grid-template-columns: 1fr; } } .kanban__col { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; min-height: 320px; display: flex; flex-direction: column; } .kanban__col-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--bg-secondary); } .kanban__col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); font-weight: 600; } .kanban__col-count { font-size: 11px; color: var(--text-disabled); background: var(--bg-surface); padding: 2px 8px; border-radius: 10px; min-width: 20px; text-align: center; } .kanban__col-cards { flex: 1; padding: 8px; overflow-y: auto; transition: background 0.15s; } .kanban__col-cards.is-target { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); } .kanban__empty { text-align: center; color: var(--text-disabled); font-size: 11px; padding: 24px 8px; } .kanban__card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px; padding: 10px; margin-bottom: 8px; cursor: grab; transition: transform 0.1s, box-shadow 0.1s; } .kanban__card:hover { border-color: #555; background: var(--bg-secondary); } .kanban__card.is-dragging { opacity: 0.4; cursor: grabbing; } .kanban__card-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; } .kanban__card-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; } .kanban__card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .kanban__card-budget { font-size: 11px; color: var(--text-disabled); } .kanban__card-days { font-size: 10px; padding: 2px 6px; border-radius: 2px; background: var(--bg-secondary); color: var(--text-disabled); } .kanban__card-days.is-stale { color: #ff9533; border: 1px solid #5a3a1a; } .kanban__card-days.is-very-stale { color: #f44336; border: 1px solid #5a1a1a; font-weight: 600; } /* Rappels dashboard */ .rappels-card { border-left: 3px solid #ff9533; } .rappels-list { list-style: none; padding: 0; margin: 0; } .rappel-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bg-secondary); font-size: 13px; } .rappel-item:last-child { border-bottom: none; } .rappel-name { flex: 1; color: var(--text-primary); text-decoration: none; } .rappel-name:hover { text-decoration: underline; } .rappel-days { font-size: 11px; color: #ff9533; text-transform: uppercase; letter-spacing: 0.05em; } .rappel-actions { display: flex; gap: 4px; } .rappel-action { font-size: 10px; padding: 4px 8px; border: 1px solid #333; color: var(--text-secondary); text-decoration: none; border-radius: 2px; letter-spacing: 0.05em; } .rappel-action:hover { color: var(--text-primary); border-color: #555; } /* Contact buttons (modale detail) */ .contact-btn { font-size: 12px; padding: 8px 14px; } /* Sprint Polish : barre de contact en HAUT de la modale detail (vs * noyee au milieu de la section Coordonnees). Action #1 du workflow * CRM : "j'ouvre client -> j'appelle". Pas de fond card pour ne pas * concurrencer le titre, juste les boutons alignes a gauche. */ .contact-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 16px 0; margin-bottom: 16px; border-bottom: 1px solid var(--border-faint); } /* ─── Recherche cmd+K (Sprint C9) ───────────────────────────────────── */ .cmd-palette-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; } .cmd-palette-backdrop.is-open { display: flex; } .cmd-palette { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; width: 90%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); overflow: hidden; } .cmd-palette__input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text-primary); padding: 18px 20px; font-size: 15px; outline: none; } .cmd-palette__input::placeholder { color: #555; } .cmd-palette__list { overflow-y: auto; flex: 1; padding: 4px 0; } .cmd-palette__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; font-size: 13px; color: var(--text-primary); } .cmd-palette__item.is-selected { background: var(--bg-surface); } .cmd-palette__item:hover { background: var(--bg-surface); } .cmd-palette__tag { font-size: 9px; padding: 3px 6px; border: 1px solid #333; color: var(--text-disabled); border-radius: 2px; letter-spacing: 0.1em; flex-shrink: 0; width: 50px; text-align: center; } .cmd-palette__label { flex: 1; } .cmd-palette__meta { color: var(--text-disabled); font-size: 11px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .cmd-palette__empty { padding: 24px; text-align: center; color: var(--text-disabled); font-size: 12px; } .cmd-palette__hint { border-top: 1px solid var(--border); padding: 8px 20px; font-size: 10px; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.05em; } /* ─── Clusters Leaflet (Sprint B) ───────────────────────────────────── */ /* Style cohérent avec le design "Black Intelligence" : cercle blanc sur fond noir, taille variable selon le nombre d'items. */ .sentinel-cluster { width: 36px; height: 36px; line-height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #000; text-align: center; font-size: 13px; font-weight: 600; border: 2px solid rgba(0, 0, 0, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .sentinel-cluster--md { width: 44px; height: 44px; line-height: 44px; font-size: 14px; } .sentinel-cluster--lg { width: 54px; height: 54px; line-height: 54px; font-size: 15px; background: #fff; } /* Cache la "coverage" hover Leaflet (cercle bleu) qui jure avec le design */ .leaflet-marker-icon.marker-cluster { background: transparent !important; } .leaflet-marker-icon.marker-cluster div { background: transparent !important; } /* ─── Mobile cards : tableaux -> cards verticales (< 768px) ────────── */ /* Sprint B : evite le scroll horizontal cauchemardesque sur iPhone. Les tableaux gardent leur HTML , le CSS les transforme en stack de cards. Headers caches, chaque cellule devient une ligne "label: valeur". */ @media (max-width: 768px) { /* Sprint Polish Vague 5 : font-size 16px sur les inputs pour eviter * que iOS Safari zoome auto au focus (qui casse le layout et oblige * a pinch-out). Combinable avec design 14px desktop. */ .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select, textarea { font-size: 16px !important; } /* Sprint Polish Vague 5 : tableaux mobile = chaque td affiche son * label (ex. "Cabinet :") via data-label, sinon les valeurs nues * sont incomprehensibles. Le JS doit ajouter data-label="..." sur * chaque
. Si absent, on ne montre rien (pas de "undefined"). */ .table td::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 600; margin-bottom: 3px; } .table td:not([data-label])::before { display: none; } /* Cellule "actions" : on ne veut pas le prefix "Actions :" */ .table td.actions::before { display: none; } /* Boutons d'action sur mobile : tap targets >= 44px */ .table .btn-mini, .actions .btn-mini { min-height: 36px; padding: 9px 12px; font-size: 12px; } .table td.actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px !important; } .table td.actions .btn-mini { flex: 1 1 auto; } /* Sprint Polish Vague 5 : sticky footer modale (boutons toujours * visibles meme sur formulaire long avec scroll). Avant : l'user * scrollait en bas, modifiait un champ haut, perdait les boutons. */ .modal__footer { position: sticky; bottom: 0; background: var(--bg-surface); border-top: 1px solid var(--border); margin-top: 0; z-index: 1; } .modal__body { padding-bottom: 16px; } /* Sprint Polish Vague 5 : contact-bar (boutons Tel/SMS/Email) en * grid 2-col sur mobile, hauteur 44px (tap target standard). */ .contact-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } .contact-bar .contact-btn { font-size: 14px; padding: 12px 14px; text-align: center; min-height: 44px; } /* Le bouton "Appeler" en pleine largeur (action #1 sur mobile) */ .contact-bar .contact-btn:first-child { grid-column: 1 / -1; } .table thead { /* On cache visuellement les headers (plus de table layout) mais on les garde accessibles aux screen readers via clip. */ position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; box-sizing: border-box; } /* Sprint Polish : Kanban force-cache sur mobile. Le drag&drop HTML5 * natif ne marche pas sur iOS/Android (pas de touch events). Le JS * (clients.js) bascule auto en LISTE, mais ce override garantit que * meme un user qui a deja switche en Kanban sur desktop puis a * reduit la fenetre voit la liste, pas un Kanban inerte. */ .view-toggle { display: none !important; } #view-kanban { display: none !important; } .table tr { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; } .table tbody tr:hover td { /* Pas de hover effect sur les cards, ca casse le visuel */ background: transparent; } .table td { padding: 4px 0; text-align: left; border-bottom: none; border-top: none; font-size: 13px; line-height: 1.4; } /* Empty states gardent leur padding standard */ .table td.empty-state, .table td > .empty-state-cta { text-align: center; padding: 24px 8px; } /* Cellule "actions" : flex aligne a droite */ .table td.actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bg-secondary); justify-content: flex-end; } .table .btn-mini { font-size: 11px; padding: 6px 10px; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .nav__bot-label { font-size: 9px; letter-spacing: 0.3em; color: var(--text-secondary); text-transform: uppercase; } .nav__user { padding: 16px 24px 0 24px; border-top: 1px solid var(--border-faint); } .nav__user-email { font-size: 11px; word-break: break-all; margin-bottom: 8px; } .nav__logout { background: transparent; border: none; color: var(--text-disabled); font-size: 9px; letter-spacing: 0.3em; cursor: pointer; padding: 0; transition: color 200ms ease; text-transform: uppercase; } .nav__logout:hover { color: var(--text-primary); } /* Sprint Polish : toggle theme distinct du bouton DECONNEXION (avant : * meme classe nav__logout, l'user pouvait confondre les 2). Le toggle * est plus discret (taille petite, opacity), et a une icone pour * le differencier visuellement au coup d'oeil. */ .nav__theme { display: block; background: transparent; border: none; color: var(--text-secondary); font-size: 9px; letter-spacing: 0.2em; cursor: pointer; padding: 4px 0; margin-bottom: 4px; font-family: inherit; text-transform: uppercase; text-align: left; transition: color 200ms ease; } .nav__theme:hover { color: var(--text-primary); } .nav__theme-icon { display: inline-block; width: 14px; text-align: center; margin-right: 4px; font-size: 11px; opacity: 0.8; } /* ─── Activity feed ─────────────────────────────────────────────────── */ .activity-list { list-style: none; padding: 0; margin: 0; } .activity-list li { padding: 12px 0; border-bottom: 1px solid var(--border-faint); font-size: 13px; } .activity-list li:last-child { border-bottom: none; } .activity__tag { display: inline-block; margin-right: 10px; padding: 2px 6px; border: 1px solid var(--border); font-size: 9px; font-weight: 600; letter-spacing: 0.15em; color: var(--text-secondary); text-transform: uppercase; vertical-align: middle; } .activity__date { display: block; font-size: 9px; color: var(--text-disabled); letter-spacing: 0.15em; margin-top: 4px; text-transform: uppercase; } /* ─── Grid 2 colonnes (chart + activite) ────────────────────────────── */ .grid-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px; } @media (max-width: 1100px) { .grid-2col { grid-template-columns: 1fr; } } /* ─── Cellules tableau : actions, score ────────────────────────────── */ .table .actions { display: flex; gap: 8px; } .table .btn-mini { padding: 6px 12px; font-size: 10px; letter-spacing: 0.1em; border: 1px solid #444444; background: transparent; color: var(--text-secondary); border-radius: 2px; cursor: pointer; text-decoration: none; text-transform: uppercase; } .table .btn-mini:hover { color: var(--text-primary); border-color: var(--text-primary); } .table .btn-mini--danger { border-color: #663333; color: #cc6666; } .table .btn-mini--danger:hover { color: #ff8888; border-color: #aa4444; } /* ─── Etat de chargement / vide ─────────────────────────────────────── */ .empty-state { text-align: center; padding: 32px 0; color: var(--text-disabled); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } /* ─── Barre d'actions / filtres ─────────────────────────────────────── */ .actions-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .actions-bar .input { flex: 0 1 280px; } .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; background: var(--bg-surface); border: 1px solid var(--border); padding: 16px; margin-bottom: 16px; } .filters .field { margin: 0; } .filters .field + .field { margin-top: 0; } .filters__actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* ─── Modale ────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; overflow-y: auto; } .modal-backdrop.is-open { display: flex; } .modal { width: 100%; max-width: 640px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 2px; max-height: calc(100vh - 48px); overflow-y: auto; margin: auto; } .modal--lg { max-width: 880px; } .modal__header { padding: 20px 24px; border-bottom: 1px solid var(--border-faint); display: flex; justify-content: space-between; align-items: center; } .modal__header h2 { margin: 0; font-size: 18px; letter-spacing: 0.05em; } .modal__close { background: transparent; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .modal__close:hover { color: var(--text-primary); } .modal__body { padding: 24px; } .modal__section { border-top: 1px solid var(--border-faint); padding-top: 20px; margin-top: 20px; } .modal__section:first-child { border-top: none; padding-top: 0; margin-top: 0; } .modal__section-title { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; } .modal__footer { padding: 16px 24px; border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; gap: 12px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-row > .field { margin-top: 0; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 14px; } .checkbox-group label { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--text-primary); cursor: pointer; margin: 0; } .checkbox-group input[type="checkbox"] { width: auto; accent-color: var(--text-primary); cursor: pointer; } /* ─── Champs Tags (villes) ──────────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--bg-secondary); border: 1px solid #333333; border-radius: 2px; min-height: 40px; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg-surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-primary); } .tag button { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; } .tag button:hover { color: var(--text-primary); } .tag-list input { flex: 1; min-width: 100px; background: transparent; border: none; color: var(--text-primary); padding: 4px; font-size: 12px; } .tag-list input:focus { outline: none; } /* ─── Autocomplete dropdown ─────────────────────────────────────────── */ .autocomplete { position: relative; } .autocomplete__menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-secondary); border: 1px solid #333333; border-radius: 2px; max-height: 240px; overflow-y: auto; z-index: 1100; display: none; } .autocomplete__menu.is-open { display: block; } .autocomplete__item { padding: 10px 14px; font-size: 12px; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid var(--border-faint); display: flex; justify-content: space-between; gap: 12px; } .autocomplete__item:last-child { border-bottom: none; } .autocomplete__item:hover, .autocomplete__item.is-active { background: var(--bg-surface); } .autocomplete__item .ac__cp { color: var(--text-disabled); font-size: 10px; letter-spacing: 0.1em; } .autocomplete__hint { padding: 8px 14px; font-size: 10px; color: var(--text-disabled); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--border-faint); } /* ─── Badge geoloc (annonces) ───────────────────────────────────────── */ .badge--geo-exact { border-color: var(--color-success); color: var(--color-success); background: rgba(46, 204, 113, 0.06); } .badge--geo-partial { border-color: var(--color-warning); color: var(--color-warning); } .badge--geo-none { border-color: var(--color-danger); color: var(--color-danger); } /* ─── Detail annonce : grilles ──────────────────────────────────────── */ .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .kv-grid .kv__label { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 2px; } .kv-grid .kv__value { font-size: 13px; } /* ─── Carte / Leaflet ───────────────────────────────────────────────── */ .map-side { width: 280px; flex-shrink: 0; background: var(--bg-nav); border-right: 1px solid var(--border-faint); transition: margin-left 200ms ease; } .map-side.is-collapsed { margin-left: -280px; } .map-side__inner { padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; } .map-side__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-faint); } .checkbox-line { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--text-primary); cursor: pointer; } .checkbox-line input[type="checkbox"] { width: auto; accent-color: var(--text-primary); cursor: pointer; } .map-side__open { display: none; position: absolute; top: 50%; left: 240px; transform: translateY(-50%); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); width: 24px; height: 48px; cursor: pointer; z-index: 1000; font-size: 14px; } .layout .map-side.is-collapsed ~ .map-side__open { display: block; } .map-side__legend { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 8px; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-secondary); } .legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .legend-dot--100 { background: var(--color-success); } .legend-dot--good { background: var(--color-warning); } .legend-dot--low { background: var(--text-disabled); } .legend-dot--none { background: transparent; border: 1px solid var(--text-disabled); } /* Compteur en bas a droite de la carte */ .map-counter { position: absolute; bottom: 16px; right: 16px; background: var(--bg-surface); border: 1px solid var(--border); padding: 8px 14px; font-size: 11px; letter-spacing: 0.1em; color: var(--text-secondary); text-transform: uppercase; z-index: 999; } /* Custom marker (DivIcon) — pastille de couleur selon score */ .sentinel-marker { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #000; } .sentinel-marker--100 { background: var(--color-success); } .sentinel-marker--good { background: var(--color-warning); } .sentinel-marker--low { background: var(--text-disabled); } .sentinel-marker--none { background: transparent; } /* Popup Leaflet — overrides pour matcher le design */ .leaflet-popup-content-wrapper { background: var(--bg-surface) !important; border: 1px solid var(--text-primary) !important; border-radius: 2px !important; color: var(--text-primary) !important; box-shadow: none !important; } .leaflet-popup-tip { background: var(--bg-surface) !important; border: 1px solid var(--text-primary) !important; } .leaflet-popup-content { margin: 12px 16px !important; font-family: "Inter", sans-serif !important; color: var(--text-primary) !important; font-size: 12px !important; min-width: 220px; } .leaflet-popup-content h4 { margin: 0 0 6px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .leaflet-popup-content .meta { color: var(--text-secondary); font-size: 11px; margin-bottom: 8px; } .leaflet-popup-content a { color: var(--text-primary); text-decoration: underline; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .leaflet-control-zoom a { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .leaflet-control-attribution { background: rgba(0,0,0,0.5) !important; color: var(--text-disabled) !important; } .leaflet-control-attribution a { color: var(--text-secondary) !important; } /* ─── Rapports ──────────────────────────────────────────────────────── */ .period-selector { display: flex; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border); padding: 4px; margin-bottom: 16px; width: fit-content; } .period-selector button { background: transparent; border: none; color: var(--text-secondary); padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 200ms ease; } .period-selector button:hover { color: var(--text-primary); } .period-selector button.is-active { background: var(--text-primary); color: var(--bg-primary); } .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1100px) { .report-grid { grid-template-columns: 1fr; } } /* ─── Hamburger nav (responsive) ────────────────────────────────────── */ .nav-toggle { display: none; position: fixed; top: 16px; left: 16px; width: 40px; height: 40px; background: var(--bg-surface); border: 1px solid var(--border); cursor: pointer; z-index: 1100; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text-primary); transition: transform 200ms ease, opacity 200ms ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; } .nav-backdrop.is-open { display: block; } /* ─── Responsive : tablette + mobile ────────────────────────────────── */ @media (max-width: 800px) { .nav-toggle { display: flex; } .nav { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 1050; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); } .nav.is-open { transform: translateX(0); } .layout__main { padding: 64px 16px 24px 16px; /* place pour le bouton hamburger */ } /* Tableaux : on autorise le scroll horizontal pour ne rien casser */ .card { overflow-x: auto; } /* Stats : 2 par ligne plutot que 4+ */ .grid-stats { grid-template-columns: repeat(2, 1fr); } /* Filtres et actions : tout sur une colonne */ .filters { grid-template-columns: 1fr; } .actions-bar { flex-direction: column; align-items: stretch; } .actions-bar .input { flex: 1 1 auto; } /* Modale : full width sur mobile */ .modal { max-width: 100%; max-height: calc(100vh - 16px); margin: 8px; } .field-row { grid-template-columns: 1fr; } .kv-grid { grid-template-columns: 1fr; } /* Page header */ .page-header h1 { font-size: 24px; } /* Carte : panneau lateral devient un bottom-sheet */ .map-side { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-height: 60vh; overflow-y: auto; z-index: 999; border-right: none; border-top: 1px solid var(--border-faint); } } @media (max-width: 480px) { .grid-stats { grid-template-columns: 1fr; } .layout__main { padding: 64px 12px 16px 12px; } h1 { font-size: 20px; } .stat__value { font-size: 28px; } } /* ─── Outils (Phase 9.5) ────────────────────────────────────────────── */ .tool-result { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-secondary); font-size: 13px; display: none; } .tool-result.is-visible { display: block; } .tool-result.is-success { border-color: var(--color-success); color: var(--color-success); } .tool-result.is-warning { border-color: var(--color-warning); color: var(--color-warning); } .tool-result.is-error { border-color: var(--color-danger); color: var(--color-danger); } .tool-result code { background: var(--bg-primary); padding: 2px 6px; border-radius: 2px; font-size: 12px; color: var(--text-primary); } .tool-map { margin-top: 12px; height: 240px; display: none; border: 1px solid var(--border); } .tool-map.is-visible { display: block; } textarea.input { min-height: 80px; font-family: "Inter", sans-serif; resize: vertical; } input[type="file"].input { padding: 8px 14px; cursor: pointer; } /* ─── Audit Vague 6 : couleurs cellules tableau Performance equipe ─ * Couleurs DATA autorisees pour mettre en valeur les chiffres cles * (nouveaux clients, matches, ventes). Le patron voit d'un coup d'oeil * qui performe sans avoir a comparer ligne par ligne. */ .cell-success { color: var(--color-success); font-weight: 600; } .cell-info { color: var(--color-warning); /* orange = activite (matches recus) */ font-weight: 600; } .cell-vente { color: var(--color-success); font-weight: 700; background: rgba(46, 204, 113, 0.08); /* halo vert pale */ } :root[data-theme="light"] .cell-success { color: #1b5e20; } :root[data-theme="light"] .cell-info { color: #c2410c; } :root[data-theme="light"] .cell-vente { color: #1b5e20; background: rgba(46, 204, 113, 0.12); } /* ─── Sprint Polish Vague 3 : Pipeline pill (rapports equipe) ────── * Mini-bargraph horizontal compact (5 statuts cote a cote) pour * visualiser le pipeline d'un agent dans une cellule de tableau. */ .pipeline-pill { display: inline-flex; width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-secondary); vertical-align: middle; } .pipeline-pill__seg { display: block; height: 100%; transition: opacity 150ms ease; } .pipeline-pill__seg:hover { opacity: 0.7; cursor: help; } /* ─── Sprint Polish Vague 3 : Backup card refonte ───────────────────── * Avant : 4 stat-cards alignees + tableau separe, pas de hierarchie. * Maintenant : tout dans une card englobante avec header (titre + sante * + bouton), 3 stats compactes alignees, tableau dans la meme card. */ .backup-card { padding: 20px 24px; } .backup-card__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; } .backup-card__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .backup-card__title h2 { margin: 0; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; } .backup-card__subtitle { color: var(--text-secondary); font-size: 11px; font-weight: 400; } /* Health dot : couleur en fonction de l'etat (last backup recency). * Vert <24h, orange 24-72h, rouge >72h, gris si aucun backup. */ .backup-health-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-disabled); flex-shrink: 0; } .backup-health-dot[data-state="ok"] { background: var(--color-success); box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2); } .backup-health-dot[data-state="warn"] { background: var(--color-warning); box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2); } .backup-health-dot[data-state="critical"] { background: var(--color-danger); box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); } /* 3 stats compactes alignees a gauche (sans grid-stats geant) */ .backup-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; } @media (max-width: 768px) { .backup-stats-row { grid-template-columns: 1fr; gap: 16px; } .backup-card__header { flex-direction: column; align-items: stretch; } } .backup-stat__label { color: var(--text-secondary); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; } .backup-stat__value { color: var(--text-primary); font-size: 22px; font-weight: 300; line-height: 1.2; } .backup-stat__sub { color: var(--text-disabled); font-size: 11px; margin-top: 4px; } .backup-table-wrap { border-top: 1px solid var(--border-faint); margin: 0 -24px -20px -24px; /* deborde la padding de la card */ } .backup-table-wrap .table { margin: 0; } .backup-table-wrap .table th, .backup-table-wrap .table td { padding: 10px 24px; } /* ─── Sprint Legal V1 : pages legales (mentions / CGU / confidentialite) ─ */ .legal-doc h2 { font-size: 16px; font-weight: 600; margin: 24px 0 8px 0; color: var(--text-primary); border-bottom: 1px solid var(--border-faint); padding-bottom: 6px; } .legal-doc h2:first-child { margin-top: 0; } .legal-doc h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px 0; color: var(--text-primary); } .legal-doc p, .legal-doc li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 8px 0; } .legal-doc ul { padding-left: 22px; } .legal-doc strong { color: var(--text-primary); } .legal-doc a { color: var(--accent, #4f46e5); text-decoration: underline; } .legal-doc a:hover { text-decoration: none; } /* ─── Sprint Legal V1 : footer global ──────────────────────────────────── */ .site-footer { margin-top: 32px; padding: 16px 24px; border-top: 1px solid var(--border-faint); background: var(--bg-primary); font-size: 12px; color: var(--text-secondary); } .site-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer__brand strong { color: var(--text-primary); } .site-footer__links { display: flex; gap: 16px; flex-wrap: wrap; } .site-footer__links a { color: var(--text-secondary); text-decoration: none; } .site-footer__links a:hover { color: var(--text-primary); text-decoration: underline; } .nav--minimal { padding-bottom: 16px; } .nav--minimal .nav__list a { color: var(--text-secondary); text-decoration: none; padding: 8px 16px; display: block; } .nav--minimal .nav__list a:hover { color: var(--text-primary); } .nav__legal { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-faint); font-size: 10px; color: var(--text-secondary); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .nav__legal a { color: var(--text-secondary); text-decoration: none; } .nav__legal a:hover { color: var(--text-primary); text-decoration: underline; } .nav__legal span { opacity: 0.5; } /* ─── Sprint C : onboarding overlay ───────────────────────────────────── */ .onboarding-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .onboarding-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); } .onboarding-card { position: relative; background: var(--bg-card, #1f1f23); color: var(--text-primary, #f5f5f7); border: 1px solid var(--border-faint, rgba(255,255,255,0.1)); border-radius: 12px; padding: 28px 28px 20px 28px; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .onboarding-card__close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--text-secondary); font-size: 26px; cursor: pointer; line-height: 1; } .onboarding-card__close:hover { color: var(--text-primary); } .onboarding-card__progress { display: flex; gap: 6px; margin-bottom: 16px; } .ob-step { flex: 1; height: 3px; border-radius: 2px; background: var(--border-faint, rgba(255,255,255,0.15)); transition: background 0.2s; } .ob-step.is-active { background: var(--primary, #4f46e5); } .onboarding-card__title { font-size: 20px; margin: 0 0 4px 0; } .onboarding-card__lead { font-size: 12px; color: var(--text-secondary); margin: 0 0 20px 0; } .onboarding-step__num { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary, #4f46e5); font-weight: 600; margin-bottom: 8px; } .onboarding-step__title { font-size: 16px; margin: 0 0 10px 0; } .onboarding-step__text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px 0; } .onboarding-card__footer { display: flex; gap: 8px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-faint); } /* ─── Sprint F : modale recherche globale Cmd+K ───────────────────────── */ .cmdk-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; padding-left: 20px; padding-right: 20px; } .cmdk-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } .cmdk-card { position: relative; width: 100%; max-width: 600px; background: var(--bg-card, #1f1f23); border: 1px solid var(--border-faint, rgba(255,255,255,0.1)); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-faint); } .cmdk-icon { font-size: 18px; color: var(--text-secondary); } #cmdk-input { flex: 1; border: 0; background: transparent; color: var(--text-primary, #f5f5f7); font-size: 15px; font-family: inherit; outline: none; } .cmdk-kbd { background: rgba(255,255,255,0.08); border: 1px solid var(--border-faint); border-radius: 4px; padding: 2px 6px; font-size: 10px; color: var(--text-secondary); font-family: ui-monospace, monospace; } .cmdk-results { flex: 1; overflow-y: auto; padding: 6px 0; } .cmdk-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; } .cmdk-section-label { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } .cmdk-row { padding: 10px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .cmdk-row[data-active] { background: rgba(255,255,255,0.06); } .cmdk-row__label { font-size: 13px; color: var(--text-primary); } .cmdk-row__sub { font-size: 11px; color: var(--text-secondary); } .cmdk-footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border-faint); font-size: 11px; color: var(--text-secondary); } .cmdk-footer kbd { background: rgba(255,255,255,0.08); border: 1px solid var(--border-faint); border-radius: 3px; padding: 1px 5px; font-size: 10px; font-family: ui-monospace, monospace; color: var(--text-primary); margin-right: 4px; } .nav__cmdk-hint { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 12px; border: 1px solid var(--border-faint); border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 11px; background: transparent; width: calc(100% - 24px); text-align: left; } .nav__cmdk-hint:hover { color: var(--text-primary); border-color: var(--border, rgba(255,255,255,0.2)); } .nav__cmdk-hint kbd { background: rgba(255,255,255,0.08); border: 1px solid var(--border-faint); border-radius: 3px; padding: 1px 5px; font-size: 10px; font-family: ui-monospace, monospace; margin-left: auto; } /* ─── Sprint G : Aide / FAQ ───────────────────────────────────────────── */ .faq-grid { display: flex; flex-direction: column; gap: 10px; max-width: 880px; margin-top: 12px; } .faq-item { background: var(--bg-card, #1f1f23); border: 1px solid var(--border-faint, rgba(255,255,255,0.1)); border-radius: 8px; padding: 14px 18px; } .faq-item summary { cursor: pointer; font-size: 14px; color: var(--text-primary, #f5f5f7); list-style: none; padding-right: 24px; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-secondary); } .faq-item[open] summary::after { content: "−"; } .faq-item__body { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-faint); } .faq-item__body p, .faq-item__body li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 6px 0; } .faq-item__body ul, .faq-item__body ol { padding-left: 22px; } .faq-item__body a { color: var(--accent, #4f46e5); text-decoration: underline; } .faq-item__body kbd { background: rgba(255,255,255,0.08); border: 1px solid var(--border-faint); border-radius: 3px; padding: 1px 6px; font-size: 11px; font-family: ui-monospace, monospace; color: var(--text-primary); } .faq-item__body code { background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: ui-monospace, monospace; } /* ─── Scrollbar ─────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: #333333; border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: #555555; }