/* ============================================================ Renfora — Design system « Direction C · Moderne 2026 » Feuille partagée par les pages internes (servie via /renfora-c.css). Dark premium + bascule clair/sombre (html[data-theme="light"]), accent lime → menthe, glassmorphism, labels monospace. Les composants qui partagent un même nom de classe d'une page à l'autre sont SCOPÉS par une classe de page sur : rc-console · rc-voice · rc-leads · rc-form · rc-feed. La landing (/) garde son CSS inline ; mêmes tokens → cohérence. ============================================================ */ :root { --bg: #090D0B; --bg-2: #0E1411; --panel: rgba(255,255,255,0.035); --panel-2: rgba(255,255,255,0.06); --stroke: rgba(255,255,255,0.09); --stroke-2: rgba(255,255,255,0.16); --text: #EDF2EC; --muted: #8DA092; --accent: #C8F046; --accent-ink: #131A07; --danger: #FF7A59; --danger-text: #FF7A59; --glow: rgba(200,240,70,0.14); --grad-a: var(--accent); --grad-b: #7DE8A0; --accent-text: var(--accent); --grid-line: rgba(255,255,255,0.025); --card-bg: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); --disp: "Sora", system-ui, sans-serif; --sans: "Hanken Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", monospace; } html[data-theme="light"] { --bg: #F6F7F2; --bg-2: #EDF0E7; --panel: rgba(20,30,22,0.035); --panel-2: rgba(20,30,22,0.065); --stroke: rgba(20,30,22,0.12); --stroke-2: rgba(20,30,22,0.22); --text: #18221B; --muted: #5A6A5E; --danger: #D6452A; --danger-text: #C13D1F; --glow: rgba(150,200,60,0.22); --grad-a: color-mix(in oklab, var(--accent) 55%, #1F4D18); --grad-b: color-mix(in oklab, var(--accent) 25%, #1F8A5B); --accent-text: color-mix(in oklab, var(--accent) 45%, #234A1C); --grid-line: rgba(20,30,22,0.055); --card-bg: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55)); } * { 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; } 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: 64px 64px; mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 78%); } body.rc::after { content: ""; position: fixed; top: -340px; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; border-radius: 50%; z-index: -2; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent 70%); } .rc ::selection { background: var(--accent); color: var(--accent-ink); } .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: 10px; flex: none; border: 1px solid var(--stroke-2); background: transparent; 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; } .rc .theme-toggle .ic-moon { display: none; } html[data-theme="light"] .rc .theme-toggle .ic-sun { display: none; } html[data-theme="light"] .rc .theme-toggle .ic-moon { display: grid; } /* ---------- 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(--disp); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; } .rc .logo i, .rc .brand i { font-style: normal; color: var(--accent); } .rc .back { font-family: var(--disp); font-size: 13.5px; font-weight: 600; 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: 600; color: var(--accent-text); background: var(--panel); border: 1px solid var(--stroke-2); border-radius: 99px; padding: 5px 12px; } /* ---------- Titres ---------- */ .rc .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent-text); background: var(--panel); border: 1px solid var(--stroke-2); padding: 7px 14px; border-radius: 99px; } .rc h1 { font-family: var(--disp); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 15px 0 8px; } .rc-console h1, .rc-voice h1, .rc-leads h1 { font-size: clamp(28px, 6vw, 38px); } .rc-form h1, .rc-feed h1 { font-size: clamp(26px, 5.4vw, 32px); } .rc h1 span, .rc h1 .grad { background: linear-gradient(100deg, var(--grad-a) 10%, var(--grad-b) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .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(--disp); font-weight: 600; font-size: 16px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 13px; padding: 14px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 0 0 0 rgba(200,240,70,0); transition: transform 0.2s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s, 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) { transform: translateY(-2px); box-shadow: 0 8px 30px -8px rgba(200,240,70,0.45); } .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; box-shadow: none; cursor: default; } .rc .btn, .rc .cta, .rc .call, .rc-form .btn, .rc .fb-send { width: 100%; } .rc .cta { font-size: 17px; font-weight: 700; border-radius: 15px; padding: 16px; } .rc .cta-ic { font-size: 18px; } .rc .call.end { background: var(--panel-2); 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: 12px; padding: 13px 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .rc input::placeholder, .rc textarea::placeholder { color: var(--muted); opacity: .8; } .rc input:focus, .rc textarea:focus { border-color: var(--accent-text); 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: 600; 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 glass (voice/leads) ---------- */ .rc-voice .head, .rc-leads .head { position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--stroke-2); border-radius: 22px; backdrop-filter: blur(8px); padding: 26px 26px 24px; margin: 16px 0 18px; color: var(--text); } .rc-voice .head::before, .rc-leads .head::before { content: ""; position: absolute; inset: -1px; border-radius: 22px; padding: 1px; pointer-events: none; background: linear-gradient(140deg, rgba(200,240,70,0.45), transparent 38%, transparent 70%, rgba(125,232,160,0.28)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .rc-voice .head .blob, .rc-leads .head .blob { position: absolute; width: 240px; height: 240px; border-radius: 50%; top: -120px; right: -70px; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent 70%); } .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: 13px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--disp); 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(200,240,70,.5); } 60% { box-shadow: 0 0 0 8px rgba(200,240,70,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: 600; 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: 18px; 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: 14px; 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: var(--accent-ink); 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: 600; 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(--disp); font-weight: 600; font-size: 15px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 12px; padding: 0 22px; cursor: pointer; transition: transform 0.2s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s, opacity 0.2s; } .rc-voice .contact-row button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(200,240,70,0.45); } .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: 18px; } .rc-voice .fb[hidden] { display: none; } .rc-voice .fb-title { font-family: var(--disp); font-weight: 700; 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); border: 1px solid var(--stroke-2); border-radius: 12px; 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-text); } .rc-voice .rate .face.sel { background: var(--accent); border-color: var(--accent); } .rc-voice .rate .face.sel span { color: var(--accent-ink); } .rc-voice .fb-status { margin-top: 10px; text-align: center; font-family: var(--disp); font-size: 13.5px; font-weight: 600; 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 (home) ---------- */ .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: 600; 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: 15px; margin-bottom: 11px; transition: border-color 0.25s, background 0.25s, transform 0.25s; } .rc-console .brick:hover { border-color: var(--stroke-2); background: var(--panel-2); transform: translateY(-2px); } .rc-console .brick-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--stroke-2); } .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(3) .brick-ic { background: var(--panel-2); border-color: var(--stroke-2); } .rc-console .brick:nth-child(4) .brick-ic { background: var(--accent); border-color: var(--accent); } .rc-console .brick:nth-child(4) .brick-ic svg { stroke: var(--accent-ink); } .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: 600; 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: 600; color: var(--accent-text); background: var(--panel); border: 1px solid var(--stroke-2); 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-2); border-radius: 18px; backdrop-filter: blur(6px); } .rc-form .preview .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; 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: 15px; 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: 14px; } .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: 14px; 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(--disp); font-weight: 700; font-size: 20px; 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: 18px; overflow: hidden; } .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: 600; 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(--panel); border: 1px solid var(--stroke-2); 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: .6; } .rc-leads .empty { padding: 36px; text-align: center; color: var(--muted); font-family: var(--disp); font-weight: 600; } .rc-leads .ccard { background: var(--panel); border: 1px solid var(--stroke); border-radius: 16px; 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: var(--accent-ink); } .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: 12px; font-size: 13.5px; line-height: 1.45; word-break: break-word; } .rc-leads .crow.user .cbub { background: var(--accent); color: var(--accent-ink); 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é / mentions) ---------- */ .rc-doc .wrap { max-width: 640px; } .rc-doc h2 { font-family: var(--disp); font-weight: 700; 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(--panel); border: 1px solid var(--stroke-2); border-radius: 13px; 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: 11px; font-size: 14px; font-weight: 500; } .rc-feed .stat b { font-family: var(--disp); font-weight: 700; font-size: 16px; } .rc-feed .stat .em { font-size: 15px; } .rc-feed .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 16px; padding: 16px; margin-bottom: 13px; } .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: 600; 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: 600; color: var(--accent-text); background: var(--panel); border: 1px solid var(--stroke-2); 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: 13px; font-size: 13.5px; line-height: 1.45; word-break: break-word; } .rc-feed .user .bub { background: var(--accent); color: var(--accent-ink); 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; } @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%; } }