/* ============================================================ Renfora — Design system « Direction D · Doctrine » Feuille partagée par les pages internes (servie via /renfora-d.css). CLAIR par défaut (papier bleuté #EEF2F8, cartes blanches, filets), accent bleu #2E6BB2, titres Oswald condensés en capitales, labels monospace. Bascule clair/sombre conservée : html[data-theme="dark"] = variante marine (#0F1D30). MÊME CONTRAT DE SÉLECTEURS que la Direction C (renfora-c.css) : les composants partagés sont scopés par classe de page sur (rc-console · rc-voice · rc-leads · rc-form · rc-feed · rc-doc · rc-bureau · rc-cockpit) — le HTML et les scripts des pages ne changent pas, seuls les tokens et les habits changent. La landing (/) garde son CSS inline ; mêmes tokens → cohérence. ============================================================ */ :root { --bg: #EEF2F8; --bg-2: #E3ECF7; --panel: #FFFFFF; --panel-2: #F3F6FB; --stroke: #DCE4F0; --stroke-2: #C3D0E2; --text: #14273E; --muted: #4E657F; --accent: #2E6BB2; --accent-deep: #1F4E8C; --accent-ink: #FFFFFF; --accent-pale: #E3ECF7; --danger: #C2452D; --danger-text: #B23A24; --glow: rgba(46,107,178,0.14); --grad-a: #1F4E8C; --grad-b: #2E6BB2; --accent-text: #2E6BB2; --grid-line: rgba(31,78,140,0.05); --card-bg: #FFFFFF; --navy: #0F1D30; --cond: "Oswald", "Avenir Next Condensed", "Arial Narrow", sans-serif; --disp: "Hanken Grotesk", system-ui, sans-serif; --sans: "Hanken Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", monospace; } /* L'attribut light reste accepté (scripts de tête existants) : c'est le défaut. */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --bg: #0F1D30; --bg-2: #16263C; --panel: #16263C; --panel-2: #1D3049; --stroke: rgba(173,189,211,0.18); --stroke-2: rgba(173,189,211,0.34); --text: #E7EDF6; --muted: #ADBDD3; --accent: #2E6BB2; --accent-ink: #FFFFFF; --accent-pale: rgba(111,163,232,0.16); --danger: #E2654C; --danger-text: #F08A74; --glow: rgba(111,163,232,0.13); --grad-a: #6FA3E8; --grad-b: #9FC2F0; --accent-text: #6FA3E8; --grid-line: rgba(173,189,211,0.05); --card-bg: #16263C; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.rc { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: -0.004em; -webkit-font-smoothing: antialiased; padding: max(18px, env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom)); transition: background-color 0.4s ease, color 0.4s ease; } /* Papier technique : grille discrète de bordereau, pas de lueur spectaculaire. */ body.rc::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 78%); } body.rc::after { content: ""; position: fixed; top: -360px; left: 50%; transform: translateX(-50%); width: 900px; height: 560px; border-radius: 50%; z-index: -2; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent 70%); } .rc ::selection { background: var(--accent); color: #fff; } .rc a { color: inherit; text-decoration: none; } .rc .wrap { max-width: 600px; margin: 0 auto; width: 100%; } .rc .mono { font-family: var(--mono); } /* shells */ body.rc-voice, body.rc-console { min-height: 100dvh; display: flex; flex-direction: column; } .rc-voice .wrap, .rc-console .wrap { flex: 1; display: flex; flex-direction: column; } .rc-console .wrap { max-width: 540px; } .rc-voice .wrap, .rc-voice .topbar { max-width: 600px; } .rc-leads .wrap { max-width: 960px; } .rc-form .wrap { max-width: 480px; } .rc-feed .wrap { max-width: 600px; } .rc-leads { padding-bottom: 60px; } /* ---------- Bascule clair / sombre (composant injecté par /renfora-theme.js) ---------- */ .rc .top-right { display: inline-flex; align-items: center; gap: 12px; } .rc .theme-toggle { width: 34px; height: 34px; border-radius: 9px; flex: none; border: 1px solid var(--stroke-2); background: var(--panel); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color 0.2s, color 0.2s, transform 0.2s; } .rc .theme-toggle:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-1px); } .rc .theme-toggle span { display: grid; place-items: center; } .rc .theme-toggle svg { width: 15px; height: 15px; } /* Clair (défaut) : on propose la lune ; sombre : on propose le soleil. */ .rc .theme-toggle .ic-sun { display: none; } .rc .theme-toggle .ic-moon { display: grid; } html[data-theme="dark"] .rc .theme-toggle .ic-sun { display: grid; } html[data-theme="dark"] .rc .theme-toggle .ic-moon { display: none; } /* ---------- Topbar / marque ---------- */ .rc .topbar, .rc .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 auto 18px; width: 100%; } .rc-voice .topbar, .rc-voice .top { max-width: 600px; } .rc .logo, .rc .brand { font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 9px; } .rc .logo::before, .rc .brand::before { content: ""; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); flex: none; } .rc .logo i, .rc .brand i { display: none; } .rc .back { font-family: var(--disp); font-size: 13.5px; font-weight: 700; color: var(--muted); transition: color 0.2s; } .rc .back:hover { color: var(--accent-text); } .rc .top-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid transparent; border-radius: 99px; padding: 5px 12px; } /* ---------- Titres ---------- */ .rc .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); background: transparent; border: 0; padding: 0; border-radius: 0; } .rc h1 { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.002em; line-height: 1.02; margin: 15px 0 8px; } .rc-console h1, .rc-voice h1, .rc-leads h1 { font-size: clamp(30px, 6.4vw, 42px); } .rc-form h1, .rc-feed h1 { font-size: clamp(28px, 5.6vw, 34px); } .rc h1 span, .rc h1 .grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent-text); } .rc .sub { color: var(--muted); font-size: 15px; max-width: 52ch; text-wrap: pretty; } /* ---------- Boutons ---------- */ .rc .btn, .rc .cta, .rc .call, .rc .fb-send, .rc-leads .bar button { font-family: var(--sans); font-weight: 700; font-size: 15.5px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 9px; padding: 14px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.18s, transform 0.18s, opacity 0.2s; } .rc .btn:hover:not(:disabled), .rc .cta:hover, .rc .call:hover:not(:disabled), .rc .fb-send:hover:not(:disabled), .rc-leads .bar button:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-1px); } .rc .btn:active:not(:disabled), .rc .call:active:not(:disabled), .rc .fb-send:active:not(:disabled) { transform: translateY(0); } .rc .btn:disabled, .rc .call:disabled, .rc .fb-send:disabled { opacity: .5; cursor: default; } .rc .btn, .rc .cta, .rc .call, .rc-form .btn, .rc .fb-send { width: 100%; } .rc .cta { font-size: 16.5px; border-radius: 10px; padding: 16px; } .rc .cta-ic { font-size: 18px; } .rc .call.end { background: var(--panel); color: var(--text); border: 1px solid var(--stroke-2); } .rc .call svg, .rc .btn svg { width: 19px; height: 19px; } /* ---------- Champs ---------- */ .rc input, .rc textarea { width: 100%; font-family: inherit; font-size: 16px; color: var(--text); background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 10px; padding: 13px 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .rc input::placeholder, .rc textarea::placeholder { color: var(--muted); opacity: .75; } .rc input:focus, .rc textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .rc textarea { min-height: 148px; line-height: 1.55; resize: vertical; } .rc .field { margin-bottom: 18px; } .rc label { display: block; font-family: var(--disp); font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; } .rc label .hint { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px; letter-spacing: 0; } .rc-leads input { min-width: 240px; width: auto; } /* ---------- Carte d'en-tête (voice/leads) — fiche blanche à filets ---------- */ .rc-voice .head, .rc-leads .head { position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--stroke); border-radius: 16px; box-shadow: 0 14px 36px -22px rgba(20,39,62,0.25); padding: 26px 26px 24px; margin: 16px 0 18px; color: var(--text); } .rc-voice .head::before, .rc-leads .head::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--accent); pointer-events: none; } .rc-voice .head .blob, .rc-leads .head .blob { display: none; } .rc-voice .head h1, .rc-leads .head h1 { position: relative; } .rc-voice .head .sub, .rc-leads .head .sub { position: relative; color: var(--muted); } .rc .ava { position: absolute; top: 22px; right: 24px; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 20px; z-index: 2; } /* ---------- Statut (voice : ligne + led) ---------- */ .rc-voice .status { display: flex; align-items: flex-start; gap: 9px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 2px 4px 12px; letter-spacing: .02em; } .rc-voice .status .led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; opacity: .5; margin-top: 5px; } .rc-voice .status.live { color: var(--accent-text); } .rc-voice .status.live .led { background: var(--accent); opacity: 1; animation: rc-pulse 1.8s ease infinite; } .rc-voice .status.err { color: var(--danger-text); } .rc-voice .status.err .led { background: var(--danger); opacity: 1; } @keyframes rc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,107,178,.45); } 60% { box-shadow: 0 0 0 8px rgba(46,107,178,0); } } /* ---------- Statut (form : texte centré) ---------- */ .rc-form .status { margin-top: 16px; text-align: center; font-family: var(--disp); font-size: 14.5px; min-height: 21px; font-weight: 700; opacity: 0; transition: opacity .25s; } .rc-form .status.show { opacity: 1; } .rc-form .status.ok { color: var(--accent-text); } .rc-form .status.err { color: var(--danger-text); } /* ---------- Journal de conversation (voice) ---------- */ .rc-voice .log { flex: 1; overflow-y: auto; background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; padding: 16px; margin-bottom: 14px; min-height: 240px; display: flex; flex-direction: column; gap: 11px; } .rc-voice .empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; max-width: 38ch; line-height: 1.65; } .rc-voice .empty b { color: var(--text); } .rc-voice .row { display: flex; } .rc-voice .row.user { justify-content: flex-end; } .rc-voice .bub { max-width: 86%; padding: 11px 15px; border-radius: 13px; font-size: 14.5px; line-height: 1.5; } .rc-voice .agent .bub { background: var(--panel-2); border: 1px solid var(--stroke); border-bottom-left-radius: 4px; } .rc-voice .user .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; font-weight: 500; } .rc-voice .note, .rc-voice .tool { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-text); background: transparent; border: 1px dashed var(--stroke-2); border-radius: 99px; padding: 6px 14px; text-align: center; } .rc-voice .note svg { width: 15px; height: 15px; flex: none; } .rc-voice .tool.u { color: var(--danger-text); border-color: var(--danger); } .rc-voice .wave { display: flex; gap: 3px; align-items: center; height: 18px; } .rc-voice .wave i { width: 3px; height: 30%; border-radius: 2px; background: currentColor; animation: rc-wv 1.1s ease-in-out infinite; } .rc-voice .wave i:nth-child(2){animation-delay:.15s} .rc-voice .wave i:nth-child(3){animation-delay:.3s} .rc-voice .wave i:nth-child(4){animation-delay:.45s} .rc-voice .wave i:nth-child(5){animation-delay:.6s} @keyframes rc-wv { 0%,100% { height: 25%; } 50% { height: 95%; } } .rc-voice .hint { margin-top: 13px; font-size: 13px; color: var(--muted); line-height: 1.6; text-align: center; } .rc-voice .hint b { color: var(--danger-text); } .rc-voice .hint a, .rc-voice .written a { font-family: var(--disp); font-weight: 700; color: var(--accent-text); border-bottom: 1px solid var(--accent-text); } .rc-voice .written { margin-top: 16px; text-align: center; font-size: 14px; color: var(--muted); } .rc-voice .contact { margin-top: 16px; } .rc-voice .contact-lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; text-align: center; } .rc-voice .contact-row { display: flex; gap: 8px; } .rc-voice .contact-row input { flex: 1; } .rc-voice .contact-row button { flex: none; font-family: var(--sans); font-weight: 700; font-size: 15px; color: #fff; background: var(--accent); border: 0; border-radius: 9px; padding: 0 22px; cursor: pointer; transition: background 0.18s, transform 0.18s, opacity 0.2s; } .rc-voice .contact-row button:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-1px); } .rc-voice .contact-row button:disabled { opacity: .5; cursor: default; } .rc-voice .contact-ok { margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); } .rc-voice .contact-ok[hidden] { display: none; } .rc-voice .contact-priv { margin-top: 8px; text-align: center; font-size: 11.5px; color: var(--muted); } .rc-voice .contact-priv a { color: var(--accent-text); border-bottom: 1px solid var(--accent-text); } .rc code { font-family: var(--mono); background: var(--panel-2); border: 1px solid var(--stroke); border-radius: 5px; padding: 1px 6px; font-size: 12px; } /* ---------- Banc d'essai : note rapide (test-call) ---------- */ .rc-voice .fb { margin-top: 16px; padding: 18px; background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 14px; } .rc-voice .fb[hidden] { display: none; } .rc-voice .fb-title { font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; } .rc-voice .fb-q { font-size: 13.5px; color: var(--muted); margin: 11px 0 9px; } .rc-voice .rate { display: flex; gap: 8px; margin-bottom: 14px; } .rc-voice .rate .face { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px; font-size: 23px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--stroke-2); border-radius: 10px; transition: .18s; color: var(--text); } .rc-voice .rate .face span { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--muted); } .rc-voice .rate .face:hover { border-color: var(--accent); } .rc-voice .rate .face.sel { background: var(--accent); border-color: var(--accent); } .rc-voice .rate .face.sel span { color: #fff; } .rc-voice .fb-status { margin-top: 10px; text-align: center; font-family: var(--disp); font-size: 13.5px; font-weight: 700; min-height: 18px; opacity: 0; transition: opacity .25s; } .rc-voice .fb-status.show { opacity: 1; } .rc-voice .fb-status.ok { color: var(--accent-text); } .rc-voice .fb-status.err { color: var(--danger-text); } /* ---------- Console (app) ---------- */ .rc-console .hero { margin-bottom: 30px; } .rc-console .chip { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke-2); font-size: 13.5px; font-weight: 500; color: var(--text); } .rc-console .chip[hidden] { display: none; } .rc-console .chip .led { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: rc-pulse 1.8s ease infinite; } .rc-console .chip b { font-weight: 700; } .rc-console .chip .sep { color: var(--muted); } .rc-console .cta-hint { margin-top: 11px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.55; } .rc-console .bricks { margin-top: 4px; } .rc-console .bricks-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 2px 12px; } .rc-console .brick { display: flex; align-items: center; gap: 14px; color: inherit; padding: 15px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 13px; margin-bottom: 11px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; box-shadow: 0 8px 24px -18px rgba(20,39,62,0.18); } .rc-console .brick:hover { border-color: var(--accent); transform: translateY(-2px); } .rc-console .brick-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--accent-pale); border: 1px solid transparent; } .rc-console .brick-ic svg { width: 19px; height: 19px; stroke: var(--accent-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rc-console .brick:nth-child(4) .brick-ic { background: var(--accent); } .rc-console .brick:nth-child(4) .brick-ic svg { stroke: #fff; } .rc-console .brick-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rc-console .brick-tx b { font-family: var(--disp); font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; } .rc-console .brick-tx span { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid transparent; border-radius: 6px; padding: 1px 7px; } .rc-console .chev { color: var(--muted); font-size: 22px; font-weight: 700; flex: none; font-family: var(--disp); } /* ---------- Setup (formulaire de présentation) ---------- */ .rc-form .preview { margin: 24px 0 28px; padding: 18px; background: var(--card-bg); border: 1px solid var(--stroke); border-radius: 14px; box-shadow: 0 10px 30px -22px rgba(20,39,62,0.25); } .rc-form .preview .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; } .rc-form .preview .cap svg { width: 14px; height: 14px; stroke: var(--accent-text); fill: none; stroke-width: 1.8; } .rc-form .bub { background: var(--panel-2); border: 1px solid var(--stroke); border-radius: 13px; border-bottom-left-radius: 5px; padding: 12px 15px; font-size: 16px; color: var(--text); max-width: 92%; } .rc-form .bub b { font-weight: 700; color: var(--accent-text); transition: color .2s; } .rc-form .count { text-align: right; font-size: 12px; color: var(--muted); margin-top: 6px; font-family: var(--mono); } .rc-form .safe { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 22px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 12px; } .rc-form .safe svg { width: 19px; height: 19px; flex: none; margin-top: 1px; stroke: var(--accent-text); fill: none; stroke-width: 1.9; } .rc-form .safe p { font-size: 13.5px; color: var(--muted); line-height: 1.5; } .rc-form .safe b { font-weight: 700; color: var(--text); } .rc-form .now { margin: 20px 0 24px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--text); } .rc-form .now b { font-weight: 700; color: var(--accent-text); } .rc .foot { margin-top: 24px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .rc-console .foot { margin-top: auto; padding-top: 28px; } /* ---------- Leads (table + transcripts) ---------- */ .rc-leads .bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .rc-leads .count { font-family: var(--mono); color: var(--accent-text); font-size: 13px; font-weight: 600; } .rc-leads .msg { color: var(--danger-text); font-size: 14px; font-weight: 600; min-height: 18px; margin-bottom: 12px; } .rc-leads .sec-title { font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: 22px; letter-spacing: 0.01em; margin: 30px 0 14px; display: flex; align-items: baseline; gap: 10px; } .rc-leads .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(20,39,62,0.18); } .rc-leads table { width: 100%; border-collapse: separate; border-spacing: 0; } .rc-leads th, .rc-leads td { text-align: left; padding: 13px 16px; font-size: 14px; vertical-align: top; border-bottom: 1px solid var(--stroke); } .rc-leads th { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; background: var(--panel-2); } .rc-leads tr:last-child td { border-bottom: 0; } .rc-leads td .agent { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-text); background: var(--accent-pale); border: 1px solid transparent; border-radius: 99px; padding: 3px 11px; } .rc-leads td .src { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--stroke); border-radius: 99px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; vertical-align: middle; } .rc-leads td .src.ok { color: var(--accent-text); border-color: var(--accent-text); } .rc-leads td .contact { font-weight: 600; color: var(--text); } .rc-leads .when { color: var(--muted); white-space: nowrap; font-size: 13px; } .rc-leads .muted { color: var(--muted); opacity: .7; } .rc-leads .empty { padding: 36px; text-align: center; color: var(--muted); font-family: var(--disp); font-weight: 700; } .rc-leads .ccard { background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; } .rc-leads .chead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rc-leads .cwhen { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 600; } .rc-leads .cbadge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; border-radius: 99px; padding: 3px 11px; border: 1px solid var(--stroke-2); background: var(--panel-2); color: var(--muted); margin-left: auto; } .rc-leads .cbadge.ok { background: var(--accent); border-color: var(--accent); color: #fff; } .rc-leads .cconvo { display: flex; flex-direction: column; gap: 6px; } .rc-leads .crow { display: flex; } .rc-leads .crow.user { justify-content: flex-end; } .rc-leads .cbub { max-width: 86%; padding: 7px 11px; border-radius: 11px; font-size: 13.5px; line-height: 1.45; word-break: break-word; } .rc-leads .crow.user .cbub { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .rc-leads .crow.agent .cbub { background: var(--panel-2); border: 1px solid var(--stroke); border-bottom-left-radius: 4px; } /* ---------- Page document (confidentialité / conditions / mentions) ---------- */ .rc-doc .wrap { max-width: 640px; } .rc-doc h2 { font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; color: var(--text); margin: 28px 0 8px; } .rc-doc .doc p, .rc-doc .doc li { font-size: 15px; color: var(--muted); line-height: 1.65; } .rc-doc .doc p b, .rc-doc .doc li b { color: var(--text); font-weight: 600; } .rc-doc .doc ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 6px; } .rc-doc .doc p { margin-top: 8px; } .rc-doc .doc a { color: var(--accent-text); border-bottom: 1px solid var(--accent-text); } .rc-doc .note { margin: 20px 0 4px; padding: 13px 16px; background: var(--accent-pale); border: 1px solid transparent; border-radius: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .rc-doc .note b { color: var(--accent-text); } .rc-doc .updated { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 28px; } .rc-doc .foot a { color: var(--accent-text); } /* ---------- Retours (feed d'avis) ---------- */ .rc-feed .summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; } .rc-feed .stat { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 10px; font-size: 14px; font-weight: 500; } .rc-feed .stat b { font-family: var(--disp); font-weight: 800; font-size: 16px; } .rc-feed .stat .em { font-size: 15px; } .rc-feed .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; padding: 16px; margin-bottom: 13px; box-shadow: 0 8px 24px -20px rgba(20,39,62,0.2); } .rc-feed .head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .rc-feed .face { font-size: 21px; flex: none; } .rc-feed .who { font-family: var(--disp); font-weight: 700; font-size: 15.5px; } .rc-feed .when { margin-left: auto; font-size: 12.5px; color: var(--muted); flex: none; } .rc-feed .tried { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .rc-feed .tried b { color: var(--text); font-weight: 600; } .rc-feed .comment { font-size: 15px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .rc-feed .comment.empty { color: var(--muted); font-style: italic; } .rc-feed .deci { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; } .rc-feed .pill { font-family: var(--mono); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 11px; border: 1px solid var(--stroke-2); background: transparent; } .rc-feed .pill.esc { color: var(--danger-text); border-color: var(--danger); background: transparent; } .rc-feed .pill.log { color: var(--accent-text); border-color: var(--accent-text); background: transparent; } .rc-feed .toggle { margin-top: 12px; font-family: var(--disp); font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid transparent; border-radius: 99px; cursor: pointer; padding: 5px 13px; } .rc-feed .convo { margin-top: 11px; padding-top: 12px; border-top: 1px dashed var(--stroke-2); display: none; flex-direction: column; gap: 7px; } .rc-feed .convo.open { display: flex; } .rc-feed .row { display: flex; } .rc-feed .row.user { justify-content: flex-end; } .rc-feed .bub { max-width: 86%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; word-break: break-word; } .rc-feed .user .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .rc-feed .agent .bub { background: var(--panel-2); border: 1px solid var(--stroke); border-bottom-left-radius: 4px; } .rc-feed .tmark { align-self: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-text); background: transparent; border: 1px dashed var(--stroke-2); border-radius: 999px; padding: 3px 11px; } .rc-feed .tmark.u { color: var(--danger-text); border-color: var(--danger); } .rc-feed .msg { text-align: center; color: var(--muted); font-size: 14.5px; padding: 40px 20px; line-height: 1.7; white-space: pre-line; } .rc-feed .msg.err { color: var(--danger-text); font-weight: 600; } .rc-feed .foot { margin-top: 22px; } /* ---------- Bureau : fiche renfort, Carnet, validation ---------- */ .rc-bureau .statebar { display: flex; align-items: center; gap: 9px; margin: 14px 0; padding: 9px 14px; border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--panel); font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); } .rc-bureau .statebar .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .rc-bureau .statebar--on { color: var(--accent-text); } .rc-bureau .statebar--on .led { background: var(--accent); animation: rc-pulse 1.8s ease infinite; } .rc-bureau .statebar--wait .led { background: var(--grad-b); } .rc-bureau .btabs { display: flex; gap: 6px; margin: 18px 0 16px; border-bottom: 1px solid var(--stroke-2); overflow-x: auto; } .rc-bureau .btabs a { font-family: var(--disp); font-size: 14px; font-weight: 700; color: var(--muted); padding: 9px 14px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s; } .rc-bureau .btabs a:hover { color: var(--text); } .rc-bureau .btabs a.on { color: var(--accent-text); border-bottom-color: var(--accent); } .rc-bureau .pin { position: sticky; top: 0; z-index: 5; margin: 0 0 16px; padding: 13px 16px; background: var(--card-bg); border: 1px solid var(--stroke-2); border-radius: 12px; box-shadow: 0 10px 30px -20px rgba(20,39,62,0.3); font-size: 14px; } .rc-bureau .pin b { font-family: var(--disp); } .rc-bureau .pin .mono-sub { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .rc-bureau .tl { display: flex; flex-direction: column; gap: 0; } .rc-bureau .tl-item { position: relative; padding: 0 0 18px 26px; border-left: 1px solid var(--stroke-2); margin-left: 8px; } .rc-bureau .tl-item:last-child { border-left-color: transparent; } .rc-bureau .tl-dot { position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--stroke-2); } .rc-bureau .tl-item--vous .tl-dot { background: var(--accent); border-color: var(--accent); } .rc-bureau .tl-when { font-family: var(--mono); font-size: 11px; color: var(--muted); } .rc-bureau .tl-txt { font-size: 14.5px; margin-top: 2px; } .rc-bureau .tl-txt b { font-family: var(--disp); font-weight: 700; } .rc-bureau .tl-diff { margin-top: 6px; } .rc-bureau .tl-diff li { font-size: 13px; color: var(--muted); margin-left: 16px; } .rc-bureau .tl-act { margin-top: 8px; } .rc-bureau .ev { border: 1px solid var(--stroke); border-radius: 13px; background: var(--panel); padding: 13px 15px; margin-bottom: 11px; } .rc-bureau .ev-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .rc-bureau .ev-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .rc-bureau .ev-sum { margin-top: 6px; font-size: 14.5px; } .rc-bureau .ev details { border: 0; background: transparent; margin-top: 6px; } .rc-bureau .ev details summary { padding: 0; font-size: 12.5px; color: var(--accent-text); font-weight: 700; cursor: pointer; } .rc-bureau .ev .convo { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .rc-bureau .summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; } .rc-bureau .stat { display: flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 10px; font-size: 13.5px; } .rc-bureau .stat b { font-family: var(--disp); font-weight: 800; } .rc-bureau .ghostbtn { display: inline-block; font: 700 12.5px var(--disp); color: var(--accent-text); background: var(--accent-pale); border: 1px solid transparent; border-radius: 99px; padding: 5px 13px; cursor: pointer; } .rc-bureau .ghostbtn:hover { border-color: var(--accent-text); } .rc-bureau .notdo { margin: 16px 0; padding: 14px 16px; background: var(--panel); border: 1px dashed var(--stroke-2); border-radius: 12px; } .rc-bureau .notdo b { font-family: var(--disp); font-size: 14px; } .rc-bureau .notdo li { font-size: 13.5px; color: var(--muted); margin: 4px 0 0 16px; } .rc-bureau .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } @media (max-width: 640px) { .rc-bureau .vs { grid-template-columns: 1fr; } } .rc-bureau .vs .col { border: 1px solid var(--stroke); border-radius: 12px; padding: 13px 15px; background: var(--panel); } .rc-bureau .vs .col b { font-family: var(--disp); font-size: 13.5px; } .rc-bureau .vs .col li { font-size: 13px; color: var(--muted); margin: 4px 0 0 14px; } @media print { .rc-bureau .btabs, .rc-bureau .ghostbtn, .topbar, .theme-toggle, .foot { display: none !important; } body.rc { background: #fff; color: #000; padding: 0; } } @media (max-width: 640px) { .rc-leads th:nth-child(1), .rc-leads td:nth-child(1) { display: none; } } @media (prefers-reduced-motion: reduce) { .rc *, .rc *::before, .rc *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .rc-voice .wave i { height: 60%; } }