/* ════════════════════════════════════════════════════════════════════════ Spotlite Talent — espace recruteur. Style natif, propre & épuré. ════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ───────────────────────────────────────────────────────── Thème CLAIR par défaut ; le thème SOMBRE s'applique soit via la préférence système (prefers-color-scheme), soit forcé par [data-theme] sur . Tous les composants sont pilotés par ces variables → un simple changement de jeu de tokens reteinte toute l'app + les pages publiques. */ :root { color-scheme: light; /* Surfaces */ --bg: #f4f5f8; /* toile de fond de l'app */ --bg-soft: #eef0f4; /* champs, zones en léger creux */ --panel: #ffffff; /* cartes / panneaux */ --panel-2: #f4f6fa; /* survols, puces, éléments secondaires */ --line: #e4e7ee; /* filets / bordures */ --line-strong: #d5d9e2; /* Texte */ --txt: #1c1d21; --muted: #6a7080; /* Accents */ --brand: #3466f6; --brand-2: #6b4dff; --brand-ink: #ffffff; /* texte sur fond brand */ --accent: #10a37f; --danger: #e5484d; /* Teintes translucides (fonctionnent sur les 2 thèmes) */ --brand-wash: rgba(52,102,246,.10); --accent-wash: rgba(16,163,127,.12); --danger-wash: rgba(229,72,77,.10); /* Formes & profondeur */ --radius-lg: 22px; --radius: 16px; --radius-sm: 11px; --shadow-sm: 0 1px 2px rgba(16,20,40,.05), 0 2px 6px rgba(16,20,40,.05); --shadow: 0 6px 24px rgba(16,20,40,.10), 0 2px 6px rgba(16,20,40,.06); --shadow-lg: 0 24px 60px rgba(16,20,40,.18); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } /* Jeu de tokens SOMBRE, réutilisé par la préférence système ET l'override. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e0f13; --bg-soft: #16181f; --panel: #191c23; --panel-2: #232833; --line: #2a2f3a; --line-strong: #363c49; --txt: #eef1f6; --muted: #9aa3b2; --brand: #6f9bff; --brand-2: #9a7dff; --brand-ink: #0a1020; --accent: #38d39f; --danger: #ff6b6b; --brand-wash: rgba(111,155,255,.14); --accent-wash: rgba(56,211,159,.14); --danger-wash: rgba(255,107,107,.13); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 10px 34px rgba(0,0,0,.45); --shadow-lg: 0 24px 64px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e0f13; --bg-soft: #16181f; --panel: #191c23; --panel-2: #232833; --line: #2a2f3a; --line-strong: #363c49; --txt: #eef1f6; --muted: #9aa3b2; --brand: #6f9bff; --brand-2: #9a7dff; --brand-ink: #0a1020; --accent: #38d39f; --danger: #ff6b6b; --brand-wash: rgba(111,155,255,.14); --accent-wash: rgba(56,211,159,.14); --danger-wash: rgba(255,107,107,.13); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 10px 34px rgba(0,0,0,.45); --shadow-lg: 0 24px 64px rgba(0,0,0,.6); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--txt); background: radial-gradient(1100px 560px at 85% -12%, var(--brand-wash), transparent 60%), radial-gradient(900px 480px at -12% 112%, var(--accent-wash), transparent 58%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; transition: background-color .3s var(--ease), color .2s var(--ease); } [hidden] { display: none !important; } /* Icônes (SVG inline via window.Icons) : alignées, teintées par currentColor. */ svg { flex: none; } .icon, [data-icon] svg, button svg, a svg { vertical-align: middle; } button svg, a svg, .nav-item svg { pointer-events: none; } [data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .muted { color: var(--muted); } .error { color: var(--danger); font-size: .9rem; margin: .4rem 0 0; } /* ─── Brand ─── */ .brand { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; letter-spacing: .2px; } .brand-name strong { color: var(--brand); font-weight: 700; } .brand-name { font-weight: 500; } .brand-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 14px rgba(91, 140, 255, .7); } /* ─── Buttons ─── */ .primary-btn { width: 100%; border: none; cursor: pointer; padding: .8rem 1.1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); font-size: .98rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--brand) 55%, transparent); transition: transform .12s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease); } .primary-btn svg { width: 18px; height: 18px; } .primary-btn:hover { filter: brightness(1.05); box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--brand) 60%, transparent); } .primary-btn:active { transform: scale(.98); } .primary-btn:disabled { opacity: .6; cursor: progress; box-shadow: none; } .ghost-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .8rem; cursor: pointer; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease); } .ghost-btn svg { width: 17px; height: 17px; } .ghost-btn:hover { color: var(--txt); border-color: var(--line-strong); background: var(--panel-2); } .ghost-btn:active { transform: scale(.97); } .ghost-btn.block { width: 100%; } /* ─── Login ─── */ .login-view { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 1rem; } .login-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; } .login-card h1 { font-size: 1.5rem; margin: 1.2rem 0 .4rem; } .login-card p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.5; } .login-card label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; } .key-input { position: relative; display: flex; align-items: center; } .key-input input { width: 100%; padding: .8rem 2.8rem .8rem .9rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; transition: border-color .15s; } .key-input input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); } .key-input .ghost-btn { position: absolute; right: 6px; border: none; padding: .4rem .5rem; } .remember { display: flex !important; align-items: center; gap: .5rem; margin: .9rem 0 1.2rem; font-size: .9rem; color: var(--muted); cursor: pointer; } .remember input { width: auto; accent-color: var(--brand); } .hint { font-size: .82rem; margin-top: 1.2rem !important; line-height: 1.5; } .login-footer { font-size: .8rem; } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── App layout ─── */ .app-view { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; } .sidebar { background: color-mix(in srgb, var(--panel) 65%, var(--bg)); backdrop-filter: saturate(1.4) blur(8px); border-right: 1px solid var(--line); padding: 1.4rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 0; height: 100vh; } .sidebar .brand { padding: .2rem .4rem .3rem; } .nav { display: flex; flex-direction: column; gap: .12rem; flex: 1; overflow-y: auto; margin: 0 -.2rem; padding: 0 .2rem; } .nav-item { text-align: left; background: transparent; border: none; cursor: pointer; color: var(--muted); padding: .62rem .7rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; display: flex; align-items: center; gap: .7rem; transition: background .15s var(--ease), color .15s var(--ease); } .nav-item svg { width: 19px; height: 19px; opacity: .85; } .nav-item:hover { color: var(--txt); background: var(--panel-2); } .nav-item.active { color: var(--brand); background: var(--brand-wash); font-weight: 600; } .nav-item.active svg { opacity: 1; } .nav-sep { height: 1px; background: var(--line); margin: .5rem .3rem; border: none; } .sidebar-foot { display: flex; flex-direction: column; gap: .6rem; padding-top: .2rem; } .company { font-size: .82rem; color: var(--muted); padding: 0 .4rem; word-break: break-word; } .content { padding: 1.7rem 2.2rem 4rem; max-width: 1240px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; } .topbar h2 { font-size: 1.55rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; } .topbar-actions { display: flex; align-items: center; gap: .6rem; } .credits { display: flex; align-items: center; gap: .45rem; background: var(--panel); border: 1px solid var(--line); padding: .48rem .9rem; border-radius: 999px; font-weight: 600; font-size: .92rem; box-shadow: var(--shadow-sm); } .credits svg { width: 16px; height: 16px; } .credits-icon { color: var(--accent); display: inline-flex; } .credits-label { color: var(--muted); font-weight: 400; font-size: .82rem; } /* ─── Soldes (crédits + solde IA) en haut à droite ─── */ .topbar-balances { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; } .balance { display: inline-flex; align-items: center; gap: .45rem; background: var(--panel); border: 1px solid var(--line); padding: .48rem .9rem; border-radius: 999px; font-weight: 600; font-size: .92rem; box-shadow: var(--shadow-sm); } .balance svg { width: 16px; height: 16px; } .ai-balance { cursor: pointer; color: var(--txt); transition: border-color .15s, background .15s, transform .06s; } .ai-balance:hover { border-color: var(--accent); background: var(--accent-wash); } .ai-balance:active { transform: translateY(1px); } .ai-balance .balance-icon { color: var(--accent); display: inline-flex; } .ai-balance .balance-plus { color: var(--muted); display: inline-flex; margin-left: .05rem; } .ai-balance:hover .balance-plus { color: var(--accent); } .balance-label { color: var(--muted); font-weight: 400; font-size: .82rem; } .ai-balance.disabled { opacity: .62; } .ai-balance.disabled .balance-icon, .ai-balance.disabled .balance-plus { color: var(--muted); } .ai-balance.disabled:hover { border-color: var(--line); background: var(--panel); } /* ─── Modale de recharge du solde IA ─── */ .topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .5rem 0 .2rem; } .topup-opt { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .95rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s, transform .06s; } .topup-opt:hover { border-color: var(--accent); background: var(--accent-wash); } .topup-opt:active { transform: translateY(1px); } .topup-opt:disabled { opacity: .5; cursor: default; } .topup-amt { font-weight: 700; font-size: 1.02rem; } .topup-cost { font-size: .8rem; } @media (max-width: 480px) { .topup-grid { grid-template-columns: 1fr; } } /* ─── Sélecteur de thème (système / clair / sombre) ─── */ .theme-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: none; background: transparent; border-radius: 999px; color: var(--muted); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .theme-toggle button svg { width: 16px; height: 16px; } .theme-toggle button:hover { color: var(--txt); } .theme-toggle button.active { background: var(--panel); color: var(--brand); box-shadow: var(--shadow-sm); } .section { display: none; animation: fade .25s ease; } .section.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .welcome h3 { font-size: 1.25rem; margin: 0 0 .3rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.6rem; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-value { font-size: 2.05rem; font-weight: 700; letter-spacing: -0.02em; } .stat-label { color: var(--muted); font-size: .88rem; margin-top: .15rem; } /* ─── Tableau de bord : économies + offres + agenda ─── */ .dash-savings { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.2rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(56,211,159,.08), rgba(91,140,255,.06)); border: 1px solid rgba(56,211,159,.25); } .dash-savings .ds-ic { font-size: 1.2rem; line-height: 1.3; } .dash-savings .ds-line { font-size: .95rem; } .dash-savings .ds-line strong { color: var(--accent); } .dash-savings .ds-sub { margin-top: .15rem; } /* Grille « bento » : deux colonnes égales, chaque bloc dans un panneau doux */ .dash-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; align-items: stretch; } .dash-cell { min-width: 0; } .dash-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .dash-cell-stats { display: flex; } .dash-cell-stats .stat-grid { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0; flex: 1; } .dash-block-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; } .dash-block-head h4 { margin: 0; font-size: 1rem; } .dash-block-head .ghost-btn { flex: 0 0 auto; } /* Offres récentes — grille de deux */ .dash-jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .dash-skel { color: var(--muted); font-size: .88rem; padding: .4rem 0; grid-column: 1 / -1; } .dash-job { text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: .25rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; color: var(--txt); font: inherit; transition: border-color .15s, transform .06s; } .dash-job:hover { border-color: var(--brand); } .dash-job:active { transform: translateY(1px); } .dj-badge { align-self: flex-start; font-size: .62rem; padding: .1rem .4rem; border-radius: 6px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); } .dj-badge.ok { color: var(--accent); border-color: rgba(56,211,159,.4); } .dj-title { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dj-apps { font-size: .78rem; color: var(--brand); margin-top: .1rem; } /* Agenda — mini-calendrier compact au-dessus, prochains RDV en dessous */ .dash-agenda { display: flex; flex-direction: column; gap: 1rem; } .dash-cal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; } .dc-head { text-align: center; margin-bottom: .6rem; font-size: .92rem; text-transform: capitalize; } .dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; } .dc-wd span { text-align: center; font-size: .68rem; color: var(--muted); padding: .1rem 0; } .dc-cell { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; font-size: .76rem; color: var(--muted); border-radius: 7px; } .dc-cell.empty { visibility: hidden; } .dc-cell.today { color: var(--txt); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); } .dc-cell.has { color: var(--txt); background: rgba(56,211,159,.12); } .dc-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .dash-upcoming { display: flex; flex-direction: column; gap: .5rem; } .du-title { margin-bottom: .1rem; } .du-item { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; color: var(--txt); font: inherit; transition: border-color .15s; } .du-item:hover { border-color: var(--brand); } .du-when { font-size: .82rem; color: var(--accent); } .du-who { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-empty { flex: 1; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; } .dash-empty p { margin: 0; } .dash-empty.small { padding: .8rem .9rem; } @media (max-width: 900px) { .dash-bento { grid-template-columns: 1fr; } } @media (max-width: 460px) { .dash-cell-stats .stat-grid, .dash-jobs-grid { grid-template-columns: 1fr; } } .empty { background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-sm); } .empty h3 { margin: 0 0 .5rem; font-weight: 700; letter-spacing: -0.01em; } /* ─── Toolbar candidats ─── */ .toolbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; } .search { flex: 1; min-width: 200px; padding: .68rem .95rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: .95rem; box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); } .search::placeholder { color: var(--muted); } .toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .primary-btn.inline { width: auto; padding: .6rem 1rem; font-size: .92rem; } /* ─── Liste candidats ─── */ .cand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .cand-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.2rem; display: flex; justify-content: space-between; gap: .6rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); } .cand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); } .cand-name { font-weight: 600; display: flex; align-items: center; gap: .5rem; } .cand-title { color: var(--txt); font-size: .9rem; margin-top: .15rem; } .cand-contact { font-size: .82rem; margin-top: .25rem; } .src-badge { font-size: .65rem; padding: .1rem .4rem; border-radius: 6px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); } .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; } .chip { font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; background: rgba(91,140,255,.12); color: #bcd0ff; } .chip.link { text-decoration: none; cursor: pointer; transition: background .15s; } .chip.link:hover { background: rgba(91,140,255,.25); } .cand-actions { display: flex; flex-direction: column; gap: .35rem; } .ghost-btn.icon { padding: .35rem .5rem; line-height: 1; } /* ─── Modale ─── */ .modal-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #05060a 45%, transparent); backdrop-filter: blur(6px) saturate(1.2); } .modal { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modalIn .28s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); z-index: 1; } .modal-head h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; } .modal-body { padding: 1.4rem; } .ghost-btn.icon { padding: .4rem; width: 34px; height: 34px; border-radius: 10px; } .ghost-btn.icon svg { width: 18px; height: 18px; } .modal-body p { margin-top: 0; line-height: 1.5; font-size: .92rem; } /* ─── Formulaires ─── */ .cand-form label, .modal-body label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .9rem; } .cand-form input, .cand-form textarea, .modal-body input, .modal-body textarea { width: 100%; margin-top: .3rem; padding: .6rem .75rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: .92rem; font-family: inherit; } .cand-form input:focus, .cand-form textarea:focus, .cand-form select:focus, .modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; } .file-input { width: 100%; padding: .6rem; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); } .small { font-size: .8rem; } .or { text-align: center; font-size: .8rem; margin: .2rem 0 .9rem; } .loading { display: flex; align-items: center; gap: .6rem; color: var(--muted); padding: .8rem 0; } .loading .spinner { border-top-color: var(--brand); border-color: var(--line); border-top-color: var(--brand); } .preview-table { margin: .6rem 0; max-height: 180px; overflow: auto; } .preview-row { padding: .4rem .2rem; border-bottom: 1px solid var(--line); font-size: .88rem; } .ok-text { color: var(--accent); } /* ─── Option « Générer avec l'IA » dans le formulaire candidat ─── */ .ai-box { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1rem; background: var(--bg-soft); } .ai-box > summary { cursor: pointer; font-weight: 600; color: var(--txt); list-style: none; } .ai-box > summary::-webkit-details-marker { display: none; } .ai-box > summary::before { content: "▸"; color: var(--brand); margin-right: .5rem; } .ai-box[open] > summary::before { content: "▾"; } .ai-box .file-input { margin-top: .6rem; } /* ─── Réglages (toggle) ─── */ .toggle-row { display: flex; align-items: flex-start; gap: .7rem; padding: .4rem 0 1rem; line-height: 1.45; } .toggle-row input { margin-top: .25rem; flex: 0 0 auto; } /* ─── Offres ─── */ .src-badge.ok { color: var(--accent); border-color: rgba(56,211,159,.4); } .ghost-btn.icon.ok { color: var(--accent); border-color: rgba(56,211,159,.4); } .modes { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; margin-bottom: 1rem; } .modes legend { font-size: .82rem; color: var(--muted); padding: 0 .4rem; } .radio, label.check { display: inline-flex !important; align-items: center; gap: .4rem; margin: 0 1rem .2rem 0; color: var(--txt); font-size: .9rem; cursor: pointer; } .radio input, label.check input { width: auto; margin: 0; accent-color: var(--brand); } .cand-form select { width: 100%; margin-top: .3rem; padding: .6rem .75rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: .92rem; } /* ─── Toast ─── */ .toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); padding: .8rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 60; opacity: 0; transition: opacity .2s, transform .2s; font-size: .9rem; max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { border-color: var(--accent); } .toast.error { border-color: var(--danger); } /* ─── Lignes répétables (expériences / formations) ─── */ .repeat-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; margin: .4rem 0 1rem; } .repeat-block legend { font-size: .82rem; color: var(--muted); padding: 0 .4rem; } .repeat-row { position: relative; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; margin-bottom: .7rem; background: var(--bg-soft); } .repeat-row .row-del { position: absolute; top: .4rem; right: .4rem; } /* ─── Bandeau d'accès permanent ─── */ .access-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem 1.2rem; border: none; border-top: 1px solid var(--line); background: rgba(255,107,107,.10); color: var(--txt); cursor: pointer; font-size: .88rem; text-align: left; } .access-banner:hover { background: rgba(255,107,107,.18); } .access-banner .ab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; } .access-banner .ab-cta { margin-left: auto; color: var(--brand); font-weight: 600; white-space: nowrap; } .nav-item.subtle { opacity: .7; font-size: .9rem; } /* ─── Page Accès & aide ─── */ .help-doc { max-width: 760px; line-height: 1.6; } .help-doc h4 { margin: 1.4rem 0 .3rem; color: var(--brand); } .help-doc code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; font-size: .85em; } .help-doc ol { padding-left: 1.2rem; } .help-doc a { color: var(--brand); } /* ─── Responsive ─── */ /* ── Navigation mobile (burger + tiroir latéral) ── */ .nav-burger { display: none; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--txt); cursor: pointer; align-items: center; justify-content: center; } .nav-burger svg { width: 22px; height: 22px; } .nav-scrim { display: none; } @media (max-width: 860px) { .app-view { grid-template-columns: 1fr; } .nav-burger { display: inline-flex; } .topbar { position: sticky; top: 0; z-index: 30; margin: -1.2rem -1.2rem 1.2rem; padding: .75rem 1.2rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 272px; max-width: 82vw; z-index: 80; transform: translateX(-100%); transition: transform .28s var(--ease); background: var(--panel); box-shadow: var(--shadow-lg); } .app-view.nav-open .sidebar { transform: translateX(0); } .app-view.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, #05060a 45%, transparent); backdrop-filter: blur(2px); animation: fade .2s ease; } .content { padding: 1.2rem; } .note-board { margin-inline: -1.2rem; padding-inline: 1.2rem; } .grid2 { grid-template-columns: 1fr; } .cand-list { grid-template-columns: 1fr; } } /* ── Indicateur de tâches IA en arrière-plan (compteur flottant) ────────── */ .task-badge { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; align-items: center; gap: .55rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--txt); padding: .55rem .85rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: .9rem; animation: fade .2s ease; } .task-badge .task-count { min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #07120d; border-radius: 999px; font-weight: 700; font-size: .8rem; } .task-badge .task-label { color: var(--muted); } .task-badge .task-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; } .task-badge.done .task-spin { display: none; } .task-badge.done .task-count { background: var(--accent); } /* ── Modale d'import en masse (onglets lien / vrac / fichiers) ──────────── */ .import-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; } .imp-tab { flex: 1; padding: .5rem .6rem; cursor: pointer; font-size: .85rem; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); } .imp-tab:hover { color: var(--txt); } .imp-tab.active { color: var(--txt); background: var(--panel-2); border-color: rgba(56,211,159,.4); } .imp-pane { margin-bottom: .4rem; } /* ════════════════════════════════════════════════════════════════════════ Coup d'œil (aperçu), partage (lien/iframe/QR) & pages publiques. ════════════════════════════════════════════════════════════════════════ */ /* Badges supplémentaires */ .src-badge.ok { color: var(--accent); border-color: rgba(56,211,159,.4); } .src-badge.link { color: #bcd0ff; border-color: rgba(91,140,255,.4); } .src-badge.ai { color: #d9c8ff; border-color: rgba(124,92,255,.45); } .src-badge.warn { color: #ffd27c; border-color: rgba(255,180,60,.45); } /* Aperçu lecture seule */ .preview-card { font-size: .92rem; } .pv-name { margin: 0 0 .1rem; font-size: 1.15rem; } .pv-sub { margin-bottom: .8rem; font-size: .85rem; } .pv-summary { white-space: pre-wrap; line-height: 1.5; } .pv-field { display: flex; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--line); } .pv-label { color: var(--muted); font-size: .78rem; min-width: 130px; flex: 0 0 auto; } .pv-value { color: var(--txt); word-break: break-word; } .pv-block { margin: .7rem 0; } .pv-block > .pv-label { display: block; margin-bottom: .35rem; } .pv-item { padding: .3rem 0; border-bottom: 1px solid var(--line); } /* Partage (recruteur) */ .share-box { margin-top: .8rem; } .copy-row { display: flex; gap: .5rem; align-items: flex-start; } .copy-row input, .copy-row textarea { flex: 1; } .share-embed { margin: .6rem 0; } .share-embed summary { cursor: pointer; color: var(--muted); font-size: .85rem; } .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: 1rem; } .qr { background: #fff; padding: 10px; border-radius: var(--radius-sm); line-height: 0; } .qr img { display: block; width: 180px; height: 180px; image-rendering: pixelated; } .share-opts { margin: .6rem 0; } .toggle-row { display: flex !important; align-items: flex-start; gap: .55rem; margin-bottom: .6rem; cursor: pointer; } .toggle-row.small span { font-size: .85rem; } .ghost-btn.danger { color: var(--danger); border-color: rgba(255,107,107,.4); } .vrac-meta { margin: -.4rem 0 .8rem; } .video-ai legend { color: var(--accent); } /* ── Pages publiques (offre partagée / fiche candidat) ── */ .public-body { display: flex; flex-direction: column; min-height: 100%; } .public-wrap { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 1.5rem 1.1rem 2.5rem; } .public-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.3rem; box-shadow: var(--shadow); } .public-loading { display: flex; align-items: center; gap: .6rem; color: var(--muted); padding: 2.5rem 0; justify-content: center; } .public-error { text-align: center; color: var(--danger); padding: 2.5rem 1rem; } .public-foot { text-align: center; padding: 1rem; font-size: .8rem; } .pub-head { margin-bottom: 1rem; } .pub-company { color: var(--brand); font-weight: 600; font-size: .9rem; } .pub-title { margin: .2rem 0 .3rem; font-size: 1.4rem; } .pub-meta { font-size: .9rem; } .pub-desc { white-space: pre-wrap; line-height: 1.55; margin: 1rem 0; } .pub-form { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; } .pub-form h2 { font-size: 1.05rem; margin: 0 0 .9rem; } .pub-q { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .9rem; } .pub-q input, .pub-q textarea, .pub-q select { width: 100%; margin-top: .3rem; padding: .6rem .7rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: .92rem; } .pub-questions { margin-top: .4rem; } .pub-status { margin-top: .8rem; color: var(--muted); font-size: .88rem; } .pub-status.error { color: var(--danger); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .pub-done { text-align: center; padding: 1.5rem 1rem; } .pub-done-icon { width: 56px; height: 56px; margin: 0 auto .8rem; border-radius: 50%; background: rgba(56,211,159,.15); color: var(--accent); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; } .pub-note { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .8rem; } @media (max-width: 560px) { .public-wrap { padding: 1rem .8rem 2rem; } .pub-title { font-size: 1.2rem; } } /* ── Signatures électroniques ── */ .sign-badge { font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; } .sign-badge.st-draft { background: rgba(154,163,178,.15); color: var(--muted); } .sign-badge.st-sent { background: rgba(91,140,255,.16); color: #bcd0ff; } .sign-badge.st-viewed { background: rgba(255,191,71,.16); color: #ffd27a; } .sign-badge.st-signed { background: rgba(56,211,159,.16); color: var(--accent); } .sign-badge.st-voided { background: rgba(255,107,107,.14); color: var(--danger); } .sign-preview { white-space: pre-wrap; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; max-height: 320px; overflow: auto; font-size: .82rem; line-height: 1.5; color: var(--txt); } /* Page publique de signature */ .sign-head { margin-bottom: 1rem; } .sign-kicker { color: var(--brand); font-weight: 600; font-size: .82rem; } .sign-head h1 { margin: .2rem 0 .3rem; font-size: 1.4rem; } .sign-doc { margin: 1rem 0; } .sign-pdf { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .sign-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--txt); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; margin: 1rem 0; } .sign-consent input { margin-top: .15rem; } .sign-step { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; } .sign-step h3 { font-size: 1rem; margin: 0 0 .5rem; } .sign-step.locked { opacity: .45; pointer-events: none; } .sign-step.done h3 { color: var(--accent); } .otp-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .otp-row input { width: 130px; letter-spacing: .35em; text-align: center; padding: .6rem .7rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-size: 1.1rem; } .sig-tools { display: flex; gap: .5rem; margin-bottom: .5rem; } .sig-pad { width: 100%; height: 160px; background: #fff; border: 1px dashed #b9c0cf; border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; } .sig-typed { width: 100%; padding: .9rem 1rem; background: #fff; color: #11131a; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 1.6rem; font-style: italic; font-family: "Segoe Script", "Bradley Hand", cursive; } .primary-btn.block { width: 100%; margin-top: .8rem; } .sign-closed { text-align: center; padding: 2rem 1rem; } .sign-closed-icon { font-size: 2.6rem; margin-bottom: .6rem; } .sign-closed h2 { margin: 0 0 .4rem; } .sign-closed a.primary-btn { margin-top: 1rem; } @media (max-width: 560px) { .sign-pdf { height: 360px; } } /* ── Rendez-vous : recruteur (types de RDV + dispos) ── */ .sched-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; } .sched-tab { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; } .sched-tab.active { color: var(--txt); background: var(--panel-2); border-color: rgba(56,211,159,.4); } .ghost-btn.small { padding: .25rem .55rem; font-size: .78rem; } .sched-avail-title { font-size: .82rem; color: var(--muted); margin: .3rem 0 .5rem; font-weight: 600; } .sched-days { display: grid; gap: .6rem; margin-bottom: 1rem; } .sched-day { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; background: var(--bg-soft); } .sched-day-head { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--txt); margin: 0 0 .4rem; } .sched-day-head input { width: auto; margin: 0; } .sched-ranges { display: grid; gap: .4rem; } .sched-range { display: flex; align-items: center; gap: .5rem; } .sched-range input[type="time"] { width: auto; margin: 0; padding: .35rem .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); } .range-del { padding: .2rem .45rem; } /* ── Rendez-vous : page publique (calendrier + créneaux) ── */ .book-head { margin: -1.4rem -1.3rem 1.2rem; padding: 1.4rem 1.3rem 1.2rem; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--line); background: radial-gradient(600px 200px at 100% -40%, rgba(124,92,255,.16), transparent 65%), radial-gradient(500px 200px at -10% 140%, rgba(56,211,159,.12), transparent 60%), var(--bg-soft); } .book-head h1 { margin: .35rem 0 .3rem; font-size: 1.5rem; } .book-brand { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .7rem; opacity: .95; } .book-kicker { color: var(--brand); font-weight: 600; font-size: .78rem; letter-spacing: .3px; text-transform: uppercase; } .book-desc { margin: .3rem 0 .2rem; line-height: 1.5; } .book-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; } .book-pill { font-size: .8rem; padding: .3rem .65rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--txt); } .book-trust { margin-top: .8rem; font-size: .78rem; color: var(--accent); } .book-when { font-size: 1rem; margin: .4rem 0; } .book-cal { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; } .book-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .book-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; } .book-weekdays { margin-bottom: .3rem; } .book-wd { text-align: center; font-size: .72rem; color: var(--muted); padding: .2rem 0; } .book-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .85rem; } .book-cell.empty { border: none; } .book-cell.disabled { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; } .book-cell.avail { position: relative; background: var(--bg-soft); border-color: var(--line); color: var(--txt); cursor: pointer; transition: background .15s, border-color .15s; } .book-cell.avail::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .book-cell.avail:hover { border-color: var(--accent); background: var(--panel-2); } .book-cell.avail.sel { background: rgba(56,211,159,.16); border-color: var(--accent); color: var(--accent); font-weight: 600; } .book-cell.avail.sel::after { display: none; } .book-slots { margin-top: 1.1rem; } .book-slots h3 { font-size: .95rem; margin: 0 0 .6rem; } .book-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; } .book-slot { padding: .55rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-soft); color: var(--txt); font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .15s, background .15s; } .book-slot:hover { border-color: var(--accent); background: var(--panel-2); } .book-confirm { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; } @media (max-width: 560px) { .book-slot-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } } /* Mode intégré (iframe chez l'hôte) : widget épuré, sans marge ni pied de page. */ .public-body.embed { background: transparent; } .public-body.embed .public-wrap { padding: 0; max-width: 100%; } .public-body.embed .public-foot { display: none; } .public-body.embed .public-card { box-shadow: none; border: none; } /* ════════════ VISIO (salles type Zoom) — recruteur + page publique ════════════ */ /* Éditeur de questions (côté recruteur) */ .room-toggles { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0; } .room-questions { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .4rem; } .room-qrow { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; } .room-qrow input[data-f="label"] { flex: 1; } .room-qmin { display: flex; align-items: center; gap: .3rem; } .room-qmin input { width: 62px; } /* ═══════════ Page publique de visio (outil de conférence épuré) ═══════════ */ .room-body { height: 100%; overflow: hidden; } .room-join { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 1.5rem; gap: 1rem; } .room-join-card { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow); } .room-join-card h1 { margin: .8rem 0 .3rem; font-size: 1.4rem; } .room-join-card input[type="text"] { width: 100%; margin: .3rem 0 .9rem; } /* Aperçu caméra avant de rejoindre */ .room-preview-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #0d0f14; margin: 1rem 0 1.2rem; } .room-preview-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .room-preview-wrap video.mirror { transform: scaleX(-1); } .room-preview-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: rgba(255,255,255,.62); font-size: .84rem; } .room-preview-off svg { width: 30px; height: 30px; opacity: .7; } .room-stage { position: fixed; inset: 0; height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% 0%, #12151d 0%, #0a0c11 60%); color: #eef1f6; padding-top: env(safe-area-inset-top); } .room-main { flex: 1; display: flex; min-height: 0; position: relative; } /* ── Grille (3+ participants) ─────────────────────────────────────────────── */ .room-grid { flex: 1; display: grid; gap: .7rem; padding: .9rem; align-content: center; justify-content: center; grid-template-columns: minmax(0, 1100px); min-height: 0; } .room-grid[data-layout="grid"][data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .room-grid[data-layout="grid"][data-count="3"], .room-grid[data-layout="grid"][data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .room-grid[data-layout="grid"][data-count="5"], .room-grid[data-layout="grid"][data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ── Picture-in-picture (exactement 2, façon WhatsApp) ────────────────────── */ .room-grid[data-layout="pip"] { display: block; padding: 0; position: relative; } .room-grid[data-layout="pip"] .room-tile { position: absolute; aspect-ratio: auto; box-shadow: none; border: none; border-radius: 0; } .room-grid[data-layout="pip"] .room-tile.main { inset: 0; } .room-grid[data-layout="pip"] .room-tile.pip { width: min(30vw, 128px); aspect-ratio: 3 / 4; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.22); box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 6; cursor: grab; touch-action: none; } .room-grid[data-layout="pip"] .room-tile.pip.dragging { cursor: grabbing; transition: none; } .room-grid[data-layout="pip"][data-pip="br"] .room-tile.pip { right: calc(14px + env(safe-area-inset-right)); bottom: calc(6.5rem + env(safe-area-inset-bottom)); } .room-grid[data-layout="pip"][data-pip="bl"] .room-tile.pip { left: calc(14px + env(safe-area-inset-left)); bottom: calc(6.5rem + env(safe-area-inset-bottom)); } .room-grid[data-layout="pip"][data-pip="tr"] .room-tile.pip { right: calc(14px + env(safe-area-inset-right)); top: calc(14px + env(safe-area-inset-top)); } .room-grid[data-layout="pip"][data-pip="tl"] .room-tile.pip { left: calc(14px + env(safe-area-inset-left)); top: calc(14px + env(safe-area-inset-top)); } /* ── Spotlight (partage écran / épinglé / locuteur actif) + pellicule ──────── */ /* Astuce : flex-wrap + main en flex-basis 100% → la principale occupe sa propre rangée ; les tuiles .film s'alignent horizontalement en dessous (pellicule). */ .room-grid[data-layout="spotlight"] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .8rem; align-content: flex-start; overflow: hidden; } .room-grid[data-layout="spotlight"] .room-tile.main { flex: 1 1 100%; height: calc(100% - 140px); aspect-ratio: auto; min-height: 0; order: 0; } .room-grid[data-layout="spotlight"] .room-tile.film { flex: 0 0 auto; height: 120px; width: auto; aspect-ratio: 16 / 9; order: 1; } .room-tile { position: relative; background: #14171e; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; box-shadow: 0 6px 22px rgba(0,0,0,.35); cursor: pointer; transition: box-shadow .2s, outline-color .2s; outline: 2px solid transparent; outline-offset: -2px; } .room-tile video { width: 100%; height: 100%; object-fit: cover; background: #0d0f14; } .room-tile video.mirror { transform: scaleX(-1); } .room-tile.speaking { outline-color: #5ee0a0; box-shadow: 0 0 0 1px rgba(94,224,160,.5), 0 8px 26px rgba(0,0,0,.4); } .room-tile.pinned { outline-color: var(--brand, #5b8cff); } .room-tile.no-stream::after { content: "📷"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: .3; } .room-tile.connecting::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); background-size: 200% 100%; animation: roomShimmer 1.4s infinite; } @keyframes roomShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .room-tile-name { position: absolute; left: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35rem; background: rgba(10,12,18,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; padding: .22rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 500; max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-grid[data-layout="pip"] .room-tile.pip .room-tile-name { font-size: .68rem; padding: .12rem .4rem; left: .3rem; bottom: .3rem; } .rt-mic { position: absolute; top: .55rem; right: .55rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229,72,77,.92); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .rt-mic svg { width: 13px; height: 13px; } .rt-pin { position: absolute; top: .55rem; left: .55rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(91,140,255,.92); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .rt-pin svg { width: 14px; height: 14px; } /* ── Sous-titres de traduction (overlay bas de scène) ─────────────────────── */ .room-captions { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6.2rem + env(safe-area-inset-bottom)); width: min(760px, calc(100% - 2rem)); z-index: 12; display: flex; flex-direction: column; gap: .25rem; pointer-events: none; text-align: center; } .rc-line { margin: 0; padding: .3rem .8rem; border-radius: 12px; background: rgba(8,10,15,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 1.02rem; line-height: 1.35; align-self: center; max-width: 100%; } .rc-line.rc-src { color: rgba(255,255,255,.6); font-size: .84rem; } .rc-line.rc-dst { color: #fff; font-weight: 600; } /* ── Mode immersif (tactile) : masque contrôles + barre questions ─────────── */ .room-stage.immersive .room-controls { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; } .room-stage.immersive .room-qbar { transform: translateY(-160%); opacity: 0; } .room-controls, .room-qbar { transition: transform .28s ease, opacity .28s ease; } /* Barre de questions + timer (bandeau slim flottant) */ .room-qbar { display: flex; align-items: center; gap: 1rem; margin: .8rem auto 0; padding: .55rem 1rem; width: min(880px, calc(100% - 1.6rem)); background: rgba(22,25,33,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.35); } .room-qbar.soon { border-color: rgba(239,138,23,.5); } .room-qbar.over { border-color: rgba(229,72,77,.55); } .qb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .qb-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.55); } .qb-q { font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qb-nudge { font-size: .82rem; color: #7fe3c0; } .qb-timer { font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 700; color: #fff; } .qb-timer.over { color: #ff7a7f; } .qb-ctrl { display: flex; align-items: center; gap: .4rem; } /* Chat (feuille latérale) */ .room-chat { width: 340px; max-width: 84vw; display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.08); background: rgba(18,21,28,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .room-chat-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; } .room-chat-log { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; } .room-msg { display: flex; flex-direction: column; gap: .1rem; max-width: 90%; } .room-msg.mine { align-self: flex-end; align-items: flex-end; } .rm-name { font-size: .72rem; color: rgba(255,255,255,.5); } .rm-text { background: rgba(255,255,255,.08); color: #eef1f6; padding: .45rem .65rem; border-radius: 12px; font-size: .9rem; word-break: break-word; } .room-msg.mine .rm-text { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; } .rm-file { display: flex; align-items: center; gap: .55rem; background: var(--panel-2); padding: .5rem .65rem; border-radius: 10px; text-decoration: none; color: var(--txt); border: 1px solid var(--line); max-width: 240px; transition: border-color .15s; } .rm-file:hover { border-color: var(--brand); } .rm-file-ic { font-size: 1.2rem; line-height: 1; } .rm-file-body { display: flex; flex-direction: column; min-width: 0; } .rm-file-name { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-file-size { font-size: .72rem; color: var(--muted); } .room-msg.mine .rm-file { background: rgba(91,140,255,.18); border-color: rgba(91,140,255,.5); } .room-chat-form { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid rgba(255,255,255,.08); } .room-chat-form input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #eef1f6; border-radius: 10px; padding: .55rem .75rem; font: inherit; } .room-chat-form input::placeholder { color: rgba(255,255,255,.42); } .room-chat-form input:focus { outline: none; border-color: var(--brand); } /* Barre de contrôles — pill flottante (verre dépoli) */ .room-controls { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .35rem; padding: .5rem .6rem; background: rgba(22,25,33,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; box-shadow: 0 14px 44px rgba(0,0,0,.5); max-width: calc(100% - 1.4rem); overflow-x: auto; z-index: 15; } .room-grid { padding-bottom: 5.5rem; } .room-ctrl { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: #eef1f6; font: inherit; cursor: pointer; transition: background .15s, transform .08s; } .room-ctrl:hover { background: rgba(255,255,255,.16); } .room-ctrl:active { transform: scale(.93); } .room-ctrl .ic { display: flex; } .room-ctrl .ic svg { width: 22px; height: 22px; } .room-ctrl .lbl { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(10,12,18,.94); color: #fff; padding: .2rem .5rem; border-radius: 7px; font-size: .72rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; } .room-ctrl:hover .lbl { opacity: 1; } .room-ctrl.active { background: var(--brand); color: #fff; } .room-ctrl.off { background: rgba(229,72,77,.92); color: #fff; } .room-ctrl.danger { background: #e5484d; color: #fff; } .room-ctrl.danger:hover { background: #ef5a5f; } .room-ctrl.has-unread::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: #ff7a7f; border: 2px solid rgba(22,25,33,.95); } .room-ctrl-sep { width: 1px; height: 26px; background: rgba(255,255,255,.14); margin: 0 .2rem; flex: none; } /* Menu arrière-plan (flou / image) */ .room-ctrl-wrap { position: relative; display: flex; } .room-bg-menu { position: absolute; bottom: calc(100% + .6rem); left: 50%; transform: translateX(-50%); min-width: 220px; display: flex; flex-direction: column; gap: .2rem; padding: .4rem; background: rgba(28,32,42,.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 30; } .room-bg-menu .bg-opt { text-align: left; padding: .55rem .65rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #eef1f6; font: inherit; font-size: .84rem; cursor: pointer; } .room-bg-menu .bg-opt:hover { background: rgba(255,255,255,.08); } .room-bg-menu .bg-opt.selected { background: rgba(255,255,255,.1); } .room-bg-menu .bg-opt.selected::before { content: "✓ "; color: var(--accent); } .room-bg-hint { margin: .25rem .2rem 0; color: rgba(255,255,255,.6); } /* Menu de traduction en direct (langue cible) */ .room-tr-menu { min-width: 260px; } .room-tr-title { margin: .1rem .3rem .35rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.5); } .room-tr-langs { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; max-height: 260px; overflow-y: auto; } .tr-lang { text-align: left; padding: .5rem .55rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #eef1f6; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-lang:hover { background: rgba(255,255,255,.08); } .tr-lang.selected { background: rgba(94,224,160,.16); border-color: rgba(94,224,160,.4); } .tr-lang.selected::after { content: " ✓"; color: #5ee0a0; } .tr-stop { margin-top: .4rem; width: 100%; padding: .5rem; border-radius: 8px; border: 1px solid rgba(229,72,77,.4); background: rgba(229,72,77,.12); color: #ff8b8f; font: inherit; font-size: .84rem; cursor: pointer; } .tr-stop:hover { background: rgba(229,72,77,.2); } .room-tr-hint { margin: .4rem .2rem 0; color: rgba(255,255,255,.6); } .room-ctrl.active#ctrl-translate, #ctrl-translate.active { background: #2fbf8f; color: #fff; } @media (max-width: 620px) { .room-chat { position: absolute; inset: 0; width: 100%; max-width: none; z-index: 20; } /* Contrôles collés au bas + safe-area (encoches / barre gestes). */ .room-controls { left: 50%; right: auto; bottom: calc(.7rem + env(safe-area-inset-bottom)); gap: .2rem; padding: .4rem .45rem; max-width: calc(100% - .8rem); } .room-ctrl { width: 46px; height: 46px; } .room-ctrl .ic svg { width: 20px; height: 20px; } .room-ctrl .lbl { display: none; } /* pas de survol au doigt */ /* Grille plein écran : les vignettes remplissent la hauteur (plus de bandes). */ .room-grid[data-layout="grid"] { padding: .5rem .5rem 5.6rem; gap: .45rem; align-content: stretch; grid-auto-rows: 1fr; } .room-grid[data-layout="grid"] .room-tile { aspect-ratio: auto; } .room-grid[data-layout="grid"][data-count="2"] { grid-template-columns: 1fr; } .room-grid[data-layout="grid"][data-count="3"], .room-grid[data-layout="grid"][data-count="4"], .room-grid[data-layout="grid"][data-count="5"], .room-grid[data-layout="grid"][data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .room-grid[data-layout="spotlight"] .room-tile.main { height: calc(100% - 108px); } .room-grid[data-layout="spotlight"] .room-tile.film { height: 90px; } .room-captions { bottom: calc(5.6rem + env(safe-area-inset-bottom)); } .rc-line.rc-dst { font-size: .96rem; } .qb-q { font-size: .9rem; } .room-tr-menu { min-width: min(78vw, 260px); } } /* ════════════════════════════════════════════════════════════════════════ NOTES & TÂCHES — le « chef d'orchestre » ════════════════════════════════════════════════════════════════════════ */ /* Bouton 📝 contextuel sur les cartes d'entités */ .note-btn { opacity: .7; } .note-btn:hover { opacity: 1; } /* Barre d'outils de la section Notes */ .notes-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .notes-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .notes-viewtoggle button { background: transparent; color: var(--muted); border: none; padding: .55rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; } .notes-viewtoggle button.active { background: var(--panel-2); color: var(--txt); } /* Filtres (puces) */ .note-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; } .note-chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: .38rem .7rem; border-radius: 999px; font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; } .note-chip:hover { color: var(--txt); } .note-chip.active { border-color: var(--brand); color: var(--txt); background: var(--panel-2); } .note-chip.tag.active { border-color: var(--accent); } .nc-count { background: var(--bg-soft); border-radius: 999px; padding: 0 .4rem; font-size: .72rem; } .note-sep { width: 1px; height: 18px; background: var(--line); margin: 0 .2rem; } /* Tableau libre (post-it déplaçables) — les notes flottent directement sur la page (pas de conteneur bordé) ; seul le motif de points doux reste en fond. */ .note-board { position: relative; min-height: 440px; overflow: visible; margin: 0 -2.2rem; padding: .4rem 2.2rem 2rem; border: none; border-radius: 0; background: radial-gradient(circle at center, color-mix(in srgb, var(--txt) 6%, transparent) 1.3px, transparent 1.4px); background-size: 24px 24px; } /* Carte / post-it — papier pastel, encre sombre, ombre en couches */ .note-card { position: absolute; width: 244px; padding: .8rem .85rem .55rem; color: #34301f; --txt: #34301f; --muted: #7d745a; --line: rgba(60,52,30,.16); --line-strong: rgba(60,52,30,.28); --panel-2: rgba(60,52,30,.09); border: none; border-radius: 4px 4px 12px 4px; box-shadow: 0 1px 1px rgba(30,24,10,.12), 0 10px 20px -8px rgba(30,24,10,.35); cursor: grab; user-select: none; transition: box-shadow .16s var(--ease), transform .1s var(--ease); } .note-card::after { /* coin corné */ content: ""; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: linear-gradient(135deg, transparent 46%, rgba(0,0,0,.10) 47%, rgba(0,0,0,.04) 62%, transparent 63%); border-bottom-right-radius: 12px; } .note-card:hover { box-shadow: 0 2px 3px rgba(30,24,10,.14), 0 18px 34px -10px rgba(30,24,10,.45); transform: translateY(-2px) rotate(-.4deg); } .note-card.dragging { cursor: grabbing; box-shadow: 0 24px 50px -12px rgba(30,24,10,.55); transform: scale(1.03) rotate(0); z-index: 999; } .note-card.done { opacity: .72; } .note-card.done .nc-title { text-decoration: line-through; } .note-card.pinned { box-shadow: 0 1px 1px rgba(30,24,10,.12), 0 12px 24px -8px rgba(30,24,10,.4), inset 0 3px 0 color-mix(in srgb, var(--brand) 70%, transparent); } /* Ligne (vue liste) — même papier, format bandeau, largeur de lecture confortable */ .note-listwrap { display: flex; flex-direction: column; gap: .7rem; max-width: 780px; } .note-row { position: relative; padding: 1rem 1.15rem; color: #34301f; --txt: #34301f; --muted: #7d745a; --line: rgba(60,52,30,.16); --line-strong: rgba(60,52,30,.28); --panel-2: rgba(60,52,30,.09); border: none; border-radius: 4px 12px 12px 4px; box-shadow: 0 1px 1px rgba(30,24,10,.1), 0 8px 18px -10px rgba(30,24,10,.3); } .note-row.done { opacity: .72; } .note-row.done .nc-title { text-decoration: line-through; } /* Couleurs de post-it : palette PAPIER plus douce (teintes conservées, plus claires et moins saturées) — lisible sur thème clair ET sombre. */ .nc-yellow { background: linear-gradient(158deg, #fff8d4, #fdeeb0); } .nc-green { background: linear-gradient(158deg, #e2f7e8, #cbeed6); } .nc-blue { background: linear-gradient(158deg, #e6f1fd, #d3e6fb); } .nc-pink { background: linear-gradient(158deg, #ffe8f0, #ffd4e2); } .nc-purple { background: linear-gradient(158deg, #efe9fd, #e0d6fa); } .nc-orange { background: linear-gradient(158deg, #fff0d8, #ffe1b3); } .nc-gray { background: linear-gradient(158deg, #f4f6f9, #e7eaf0); } /* Intérieur de carte */ .nc-head { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; } .nc-head-main { flex: 1; min-width: 0; } .nc-title { font-weight: 600; font-size: .92rem; word-break: break-word; } .nc-kind { font-size: .95rem; } .nc-body { font-size: .83rem; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 6.5em; overflow: hidden; margin-bottom: .4rem; } .nc-toggle { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 7px; border: 1.6px solid rgba(60,52,30,.35); background: rgba(255,255,255,.35); color: #10794f; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .12s var(--ease); } .nc-toggle svg { width: 13px; height: 13px; } .nc-toggle.on { background: #16a06a; border-color: #16a06a; color: #fff; } .nc-kind { display: inline-flex; color: #7d745a; } .nc-kind svg { width: 17px; height: 17px; } .nc-pin { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; opacity: .32; color: #453f2b; display: inline-flex; padding: 2px; border-radius: 6px; transition: opacity .12s var(--ease); } .nc-pin svg { width: 15px; height: 15px; } .nc-pin.on { opacity: 1; color: var(--brand); } .nc-pin:hover { opacity: .75; } /* Progression checklist */ .nc-progress-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .nc-prog { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; } .nc-prog span { display: block; height: 100%; background: var(--accent); } .nc-prog-txt { font-size: .72rem; } /* Méta (échéance, contexte, tags) */ .nc-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .3rem; } .nc-due { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: #5f5636; background: rgba(60,52,30,.1); border-radius: 999px; padding: .14rem .5rem; } .nc-due svg { width: 12px; height: 12px; } .nc-due.over { color: #fff; background: #e5484d; } .nc-ctx { display: inline-flex; align-items: center; gap: .28rem; font-size: .72rem; color: #453f2b; background: rgba(60,52,30,.1); border: 1px solid rgba(60,52,30,.14); border-radius: 999px; padding: .14rem .55rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nc-ctx svg { width: 12px; height: 12px; } .nc-ctx:hover { background: rgba(60,52,30,.16); } .nc-tag { font-size: .72rem; color: #7d745a; font-weight: 600; } .nc-actions { display: flex; justify-content: flex-end; gap: .1rem; margin-top: .2rem; } .ghost-btn.small { padding: .3rem .5rem; font-size: .8rem; } .ghost-btn.icon.small { width: auto; } /* Éditeur de note */ .note-editor .note-kind { display: flex; gap: .5rem; margin-bottom: 1rem; } .kchip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .85rem; color: var(--muted); margin-bottom: 0 !important; } .kchip.on { border-color: var(--brand); color: var(--txt); background: var(--panel-2); } .kchip input { display: none; } .swatches { display: flex; gap: .5rem; margin-bottom: 1rem; } .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .swatch.on { border-color: var(--txt); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--txt); } .swatch.nc-yellow { background: #fdeeb0; } .swatch.nc-green { background: #cbeed6; } .swatch.nc-blue { background: #d3e6fb; } .swatch.nc-pink { background: #ffd4e2; } .swatch.nc-purple { background: #e0d6fa; } .swatch.nc-orange { background: #ffe1b3; } .swatch.nc-gray { background: #e7eaf0; } .note-ctx-tag { font-size: .82rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem; } .checklist-block { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; margin-bottom: 1rem; } .cb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font-size: .82rem; color: var(--muted); } .check-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .check-row input[type="text"] { flex: 1; } .check-row input[type="checkbox"] { width: 16px; height: 16px; } .danger-text { color: var(--danger); margin-right: auto; } .note-linkpanel { display: flex; flex-direction: column; gap: .6rem; max-height: 55vh; overflow: auto; margin-bottom: 1rem; } /* Bouton flottant de capture rapide (présent dans toutes les sections) */ #notes-fab-wrap { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; } .notes-fab { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--brand) 65%, transparent); position: relative; transition: transform .12s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease); } .notes-fab svg { width: 24px; height: 24px; } .notes-fab:hover { filter: brightness(1.05); box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--brand) 70%, transparent); } .notes-fab:active { transform: scale(.95); } .fab-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); } .notes-quick { width: 300px; max-width: calc(100vw - 2.8rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem; } .nq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; } .nq-ctx { margin-bottom: .5rem; } .notes-quick textarea { width: 100%; resize: vertical; } .nq-row { display: flex; gap: .5rem; margin: .6rem 0; } .nq-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .primary-btn.small { width: auto; padding: .5rem .9rem; font-size: .88rem; } /* Widget « à faire » du tableau de bord */ .dash-tasks { display: flex; flex-direction: column; gap: .4rem; } .dt-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .7rem; cursor: pointer; color: var(--txt); font: inherit; font-size: .86rem; } .dt-item:hover { border-color: var(--brand); } .dt-item.over { border-color: rgba(255,107,107,.5); } .dt-check { color: var(--muted); } .dt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-due { font-size: .72rem; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: .1rem .5rem; } .dt-item.over .dt-due { color: #fff; background: rgba(255,107,107,.8); } @media (max-width: 620px) { .note-board { min-height: 60vh; } #notes-fab-wrap { right: 1rem; bottom: 5rem; } } /* ════════════════════════════════════════════════════════════════════════ TIROIR DE NOTES CONTEXTUEL — prise de notes intégrée (fiche candidat, offre, RDV, pendant la visio…). Remplace le petit « stylo » sur les cartes. ════════════════════════════════════════════════════════════════════════ */ .note-drawer-root { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; } .note-drawer-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #05060a 40%, transparent); backdrop-filter: blur(4px); animation: fade .2s ease; } .note-drawer { position: relative; width: 420px; max-width: 92vw; height: 100%; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: drawerIn .3s var(--ease); } @keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } } .nd-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); } .nd-head .nd-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); flex: none; } .nd-head .nd-ic svg { width: 20px; height: 20px; } .nd-head-main { flex: 1; min-width: 0; } .nd-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .nd-title { font-size: 1.02rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } .nd-quick { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .55rem; } .nd-quick textarea { width: 100%; resize: vertical; min-height: 46px; padding: .6rem .75rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font: inherit; font-size: .92rem; } .nd-quick textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); } .nd-quick-row { display: flex; align-items: center; gap: .5rem; } .nd-quick-row .kchip { padding: .38rem .7rem; font-size: .82rem; } .nd-quick-row .spacer { flex: 1; } .nd-list { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; } .nd-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 2.5rem 1rem; line-height: 1.5; } .nd-empty svg { width: 34px; height: 34px; opacity: .5; margin-bottom: .6rem; } @media (max-width: 520px) { .note-drawer { width: 100%; max-width: 100%; } } /* ════════════════════════════════════════════════════════════════════════ ESPACE COLLABORATIF — membres, invitations (lien/QR), droits par section. ════════════════════════════════════════════════════════════════════════ */ .collab-tabs { display: flex; gap: .4rem; margin-bottom: 1.2rem; } .collab-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: color .15s var(--ease), border-color .15s var(--ease); } .collab-tab svg { width: 17px; height: 17px; } .collab-tab.active { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-wash); } .collab-tab .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; } .collab-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; } .collab-card h4 { margin: 0 0 .2rem; font-size: 1.02rem; } .collab-card .muted { font-size: .88rem; } .member-row { display: flex; align-items: center; gap: .8rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); } .member-row:last-child { border-bottom: none; } .member-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; letter-spacing: .02em; } .member-main { flex: 1; min-width: 0; } .member-name { font-weight: 600; display: flex; align-items: center; gap: .5rem; } .member-sub { font-size: .8rem; color: var(--muted); margin-top: .1rem; } .role-pill { font-size: .72rem; font-weight: 600; padding: .16rem .55rem; border-radius: 999px; } .role-pill.owner { background: var(--brand-wash); color: var(--brand); } .role-pill.edit { background: var(--accent-wash); color: var(--accent); } .role-pill.read { background: var(--panel-2); color: var(--muted); } .role-pill.pending { background: rgba(255,180,60,.16); color: #c98a12; } .member-status { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .status-dot.on { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } /* Grille de permissions par section (Aucun / Lecture / Édition) */ .perm-grid { display: grid; gap: .4rem; margin: .4rem 0 1rem; } .perm-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); } .perm-row .perm-label { flex: 1; display: flex; align-items: center; gap: .55rem; font-size: .9rem; } .perm-row .perm-label svg { width: 18px; height: 18px; color: var(--muted); } .perm-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); } .perm-seg button { border: none; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; padding: .28rem .65rem; border-radius: 999px; cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease); } .perm-seg button.on { background: var(--panel); color: var(--txt); box-shadow: var(--shadow-sm); } .perm-seg button.on[data-lvl="edit"] { color: var(--accent); } .perm-seg button.on[data-lvl="read"] { color: var(--brand); } /* Carte d'invitation créée (lien + QR + code) */ .invite-result { display: grid; grid-template-columns: 1fr auto; gap: 1.1rem; align-items: start; } .invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; color: var(--txt); background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: .7rem 1rem; text-align: center; } @media (max-width: 560px) { .invite-result { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════ CHAT COLLABORATIF — coordination d'équipe + citation de notes. ════════════════════════════════════════════════════════════════════════ */ .chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .chat-log { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; } .chat-day { align-self: center; font-size: .72rem; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: .18rem .7rem; margin: .3rem 0; } .chat-msg { display: flex; gap: .6rem; max-width: 82%; } .chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; } .chat-msg .c-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; } .chat-bubble { background: var(--panel-2); border-radius: 14px; padding: .5rem .8rem; } .chat-msg.mine .chat-bubble { background: var(--brand); color: var(--brand-ink); } .c-name { font-size: .72rem; color: var(--muted); margin-bottom: .1rem; font-weight: 600; } .chat-msg.mine .c-name { display: none; } .c-text { font-size: .92rem; line-height: 1.45; word-break: break-word; white-space: pre-wrap; } .c-time { font-size: .66rem; opacity: .6; margin-top: .2rem; text-align: right; } /* Note citée dans un message */ .c-quote { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; padding: .45rem .6rem; border-radius: 10px; background: color-mix(in srgb, var(--txt) 6%, transparent); border-left: 3px solid var(--brand); cursor: pointer; text-decoration: none; color: inherit; } .chat-msg.mine .c-quote { background: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.7); } .c-quote svg { width: 15px; height: 15px; flex: none; opacity: .8; } .c-quote .cq-title { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, var(--bg)); } .chat-form textarea { flex: 1; resize: none; max-height: 120px; min-height: 42px; padding: .6rem .8rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font: inherit; font-size: .92rem; } .chat-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); } .chat-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .1s var(--ease); } .chat-send:active { transform: scale(.94); } .chat-cite-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; background: var(--brand-wash); border-top: 1px solid var(--line); font-size: .82rem; color: var(--brand); } .chat-cite-bar .spacer { flex: 1; } /* ─── Multi-conversations : rail + fil actif ─── */ .chat-pane { position: relative; height: calc(100vh - 210px); min-height: 440px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .chat-pane:not([hidden]) { display: flex; } .chat-rail { width: 264px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, var(--bg)); } .chat-rail-head { padding: .9rem 1rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .chat-rail-list { flex: 1; overflow-y: auto; padding: .3rem .5rem .6rem; display: flex; flex-direction: column; gap: 2px; } .chat-rail-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: none; background: transparent; border-radius: 12px; cursor: pointer; text-align: left; color: var(--txt); width: 100%; transition: background .12s var(--ease); } .chat-rail-item:hover { background: var(--panel-2); } .chat-rail-item.active { background: var(--brand-wash); } .cr-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; } .cr-av.cop { background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: 1rem; } .cr-av.team { background: var(--accent); } .cr-av svg { width: 16px; height: 16px; } .cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cr-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-last { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } .chat-thread-head { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, var(--bg)); } .chat-thread-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel-2); font-size: .72rem; font-weight: 700; } .chat-thread-avatar svg { width: 15px; height: 15px; } .chat-thread-title { font-weight: 700; font-size: .95rem; } .chat-rail-toggle { flex: none; } .chat-msg.assistant .chat-bubble { background: var(--accent-wash); } .chat-msg.assistant .c-avatar { background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important; } /* Cartes de pièce jointe (partage /candidat /job /tache /calendar /visio) */ .chat-attach-card { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; padding: .5rem .65rem; border-radius: 12px; background: color-mix(in srgb, var(--txt) 6%, transparent); border: 1px solid var(--line); cursor: pointer; text-decoration: none; color: inherit; } .chat-msg.mine .chat-attach-card { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); } .cac-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); } .chat-msg.mine .cac-ic { background: rgba(255,255,255,.22); color: #fff; } .cac-ic svg { width: 18px; height: 18px; } .cac-main { display: flex; flex-direction: column; min-width: 0; } .cac-label { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cac-sub { font-size: .72rem; } /* Barre pièce jointe (composer) */ .chat-attach-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; background: var(--accent-wash); border-top: 1px solid var(--line); font-size: .82rem; color: var(--accent); } .chat-attach-bar .spacer { flex: 1; } .chat-attach-bar svg { width: 15px; height: 15px; } .chat-slash-btn { flex: none; } /* Popover slash / mention */ .chat-menu { position: absolute; left: .8rem; right: .8rem; bottom: 64px; z-index: 8; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: .35rem; max-height: 260px; overflow-y: auto; } .cm-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .35rem .5rem .2rem; } .cm-item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .55rem; border: none; background: transparent; border-radius: 9px; cursor: pointer; color: var(--txt); text-align: left; font-size: .88rem; } .cm-item:hover { background: var(--panel-2); } .cm-item svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .cm-item .cm-hint { margin-left: auto; font-size: .74rem; } .cm-emoji { width: 16px; text-align: center; } /* Sélecteur d'entité (modale de partage) */ .pick-list { max-height: 320px; overflow-y: auto; margin-top: .6rem; display: flex; flex-direction: column; gap: 2px; } .pick-item { display: flex; flex-direction: column; width: 100%; padding: .55rem .6rem; border: none; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; color: var(--txt); } .pick-item:hover { background: var(--panel-2); } .pick-label { font-weight: 600; font-size: .9rem; } .pick-sub { font-size: .76rem; } /* Indicateur « Copilot écrit » + repli IA */ .c-typing { display: inline-flex; gap: 4px; padding: .2rem 0; } .c-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chatTyping 1.2s infinite ease-in-out; } .c-typing span:nth-child(2) { animation-delay: .2s; } .c-typing span:nth-child(3) { animation-delay: .4s; } @keyframes chatTyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .chat-ai-cta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; align-self: stretch; margin: .3rem .2rem; padding: .55rem .7rem; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg-soft); } .chat-ai-cta .spacer { flex: 1; } /* Responsive : rail repliable (desktop) / off-canvas (mobile) */ .chat-scrim { display: none; } @media (min-width: 760px) { .chat-pane.rail-hidden .chat-rail { display: none; } } @media (max-width: 759px) { .chat-rail { position: absolute; inset: 0 auto 0 0; z-index: 6; transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: 0 10px 40px rgba(0,0,0,.3); } .chat-pane.rail-open .chat-rail { transform: translateX(0); } .chat-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 5; display: none; } .chat-pane.rail-open .chat-scrim { display: block; } } /* ═══════════════════════════ Évaluations (tests de personnalité) ═══════════ */ /* — Section recruteur — */ .assess-status { font-size: .74rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px; } .assess-status.s-sent { background: var(--brand-wash); color: var(--brand); } .assess-status.s-started { background: var(--accent-wash); color: var(--accent); } .assess-status.s-done { background: rgba(16,163,127,.14); color: var(--accent); } .assess-status.s-expired { background: var(--bg-soft); color: var(--muted); } .fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .9rem; } .fw-tile { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--txt); cursor: pointer; text-align: left; font-size: .86rem; transition: border-color .12s var(--ease), background .12s var(--ease); } .fw-tile:hover { border-color: var(--line-strong); } .fw-tile.sel { border-color: var(--brand); background: var(--brand-wash); } .fw-emoji { font-size: 1.2rem; } .assess-type-badge { display: inline-flex; flex-direction: column; align-items: center; background: var(--brand-wash); color: var(--brand); font-weight: 800; font-size: 1.5rem; padding: .5rem 1rem; border-radius: var(--radius-sm); line-height: 1.1; } .assess-type-badge span { font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: .2rem; } .assess-result-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; } .assess-narrative { margin-top: .8rem; padding: .9rem 1rem; background: var(--brand-wash); border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.5; } .assess-narrative h4 { margin: 0 0 .4rem; color: var(--brand); } /* — Barres de dimensions (recruteur + candidat) — */ .assess-bars { display: flex; flex-direction: column; gap: .55rem; margin: .4rem 0 1rem; } .assess-bar-row { font-size: .82rem; } .assess-bar-label { display: flex; justify-content: space-between; margin-bottom: .22rem; color: var(--txt); } .assess-bar-label span { color: var(--muted); } .assess-bar { height: 9px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .assess-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } /* — Page publique candidat — */ .assess-card { max-width: 560px; } .assess-head { text-align: center; margin-bottom: 1.2rem; } .assess-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--brand); } .assess-head h1 { font-size: 1.5rem; margin: .3rem 0 .5rem; } .assess-lede { color: var(--muted); font-size: .95rem; } .assess-meta-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; } .assess-pill { font-size: .78rem; background: var(--bg-soft); color: var(--muted); padding: .3rem .7rem; border-radius: 999px; } .assess-note { font-size: .84rem; color: var(--muted); background: var(--bg-soft); border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1.1rem; } .assess-progress { height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: .5rem; } .assess-progress-bar { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .25s var(--ease); } .assess-count { text-align: center; font-size: .78rem; color: var(--muted); margin-bottom: 1.1rem; } .assess-q-title { text-align: center; font-size: 1rem; color: var(--muted); margin: 0 0 1rem; font-weight: 600; } .assess-statement { text-align: center; font-size: 1.22rem; font-weight: 600; line-height: 1.4; margin: 0 0 1.4rem; color: var(--txt); } .assess-choices { display: flex; flex-direction: column; gap: .7rem; } .assess-choice { padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--txt); font-size: .98rem; cursor: pointer; transition: border-color .12s var(--ease), transform .08s var(--ease); } .assess-choice:hover { border-color: var(--brand); } .assess-choice:active { transform: scale(.985); } .assess-choice.sel { border-color: var(--brand); background: var(--brand-wash); } .assess-likert { display: flex; justify-content: space-between; align-items: flex-end; gap: .35rem; } .assess-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; } .assess-dot .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); transition: all .12s var(--ease); } .assess-dot:hover .dot { border-color: var(--brand); } .assess-dot.sel .dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); } .assess-dot .lk-label { font-size: .64rem; text-align: center; line-height: 1.15; max-width: 62px; } .assess-nav { display: flex; align-items: center; margin-top: 1.6rem; } .assess-nav .assess-spacer { flex: 1; } .assess-center { text-align: center; } .assess-emoji { font-size: 2.6rem; margin-bottom: .3rem; } .assess-type { font-size: 2rem; font-weight: 800; color: var(--brand); } .assess-type-sub { color: var(--muted); font-size: .9rem; } .assess-result-chip { text-align: center; margin: .6rem 0; } .assess-summary { text-align: center; color: var(--txt); font-size: .95rem; line-height: 1.5; margin-bottom: 1rem; } /* ═══════════════════════════ Copilot (widget tableau de bord) ══════════════ */ .copilot-widget { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-bottom: 1rem; position: relative; overflow: hidden; } .copilot-widget::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); } .cop-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .cop-ident { display: flex; align-items: center; gap: .6rem; } .cop-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--brand-wash); } .cop-name { font-weight: 700; } .cop-sub { font-size: .78rem; } .cop-head-actions { display: flex; align-items: center; gap: .6rem; } .cop-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .cop-switch input { opacity: 0; width: 0; height: 0; } .cop-slider { position: absolute; inset: 0; cursor: pointer; background: var(--line-strong); border-radius: 999px; transition: .2s; } .cop-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .cop-switch input:checked + .cop-slider { background: var(--brand); } .cop-switch input:checked + .cop-slider::before { transform: translateX(18px); } .cop-paused { padding: .8rem 0 .2rem; font-size: .88rem; } .cop-brief-card { margin-top: .8rem; padding: .8rem .9rem; background: var(--brand-wash); border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.55; color: var(--txt); } .cop-objectives { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .9rem; } .cop-obj { background: var(--bg-soft); border-radius: var(--radius-sm); padding: .55rem .4rem; text-align: center; } .cop-obj-icon { display: block; font-size: 1rem; } .cop-obj-val { display: block; font-size: 1.25rem; font-weight: 800; color: var(--txt); } .cop-obj-label { display: block; font-size: .68rem; color: var(--muted); } .cop-section { margin-top: 1rem; } .cop-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin-bottom: .45rem; } .cop-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .45rem; } .cop-row-paid { background: color-mix(in srgb, var(--brand-wash) 55%, var(--panel)); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); } .cop-row-icon { font-size: 1.05rem; } .cop-row-main { flex: 1; min-width: 0; } .cop-row-title { font-size: .88rem; font-weight: 600; } .cop-row-detail { font-size: .76rem; } .cop-row-actions { display: flex; gap: .35rem; flex: none; } .primary-btn.small, .ghost-btn.small { padding: .34rem .7rem; font-size: .8rem; } .cop-feed { list-style: none; margin: 0; padding: 0; } .cop-feed li { font-size: .8rem; color: var(--muted); padding: .28rem 0; border-bottom: 1px dashed var(--line); } .cop-feed li:last-child { border-bottom: none; } .cop-allclear { text-align: center; padding: 1rem 0 .4rem; font-size: .9rem; } @media (max-width: 560px) { .cop-objectives { grid-template-columns: repeat(2, 1fr); } .cop-row-actions { flex-direction: column; } } /* Message « assistant » (Copilot) dans la Discussion d'équipe */ .chat-msg.assistant .c-avatar { background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important; } .chat-msg.assistant .chat-bubble { background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); } /* ════════════════════════════════════════════════════════════════════════ Entretiens IA — côté recruteur (cartes de résultat + synthèse) ════════════════════════════════════════════════════════════════════════ */ .iv-badge { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent); vertical-align: middle; margin-left: .4rem; } .iv-details { margin-top: .5rem; } .iv-details > summary { cursor: pointer; color: var(--accent); font-size: .85rem; list-style: none; } .iv-details > summary::-webkit-details-marker { display: none; } .iv-syn { margin-top: .6rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); } .iv-syn > p { margin: .3rem 0 .6rem; line-height: 1.5; } .iv-score-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .iv-score { font-weight: 800; font-size: 1.1rem; min-width: 2.6rem; text-align: center; padding: .2rem .5rem; border-radius: var(--radius-sm); } .iv-score-good { background: var(--accent-wash); color: var(--accent); } .iv-score-mid { background: rgba(224,161,27,.14); color: #e0a11b; } .iv-score-low { background: var(--danger-wash); color: var(--danger); } .iv-pts { margin: .3rem 0 .6rem; padding-left: 1.1rem; } .iv-pts li { margin: .15rem 0; line-height: 1.4; font-size: .9rem; } .iv-pts.iv-good li::marker { content: "✓ "; color: var(--accent); } .iv-pts.iv-warn li::marker { content: "! "; color: #e0a11b; } .iv-transcript { margin-top: .6rem; } .iv-transcript > summary { cursor: pointer; color: var(--muted); font-size: .8rem; } .iv-transcript pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .82rem; line-height: 1.5; color: var(--muted); max-height: 260px; overflow: auto; margin: .4rem 0 0; padding: .6rem .7rem; background: var(--panel, var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* ════════════════════════════════════════════════════════════════════════ Entretien IA — page candidat (ambiance calme, sans caméra) ════════════════════════════════════════════════════════════════════════ */ .interview-body { background: radial-gradient(1100px 560px at 50% -8%, var(--brand-wash), transparent 60%), var(--bg); } .interview-card { max-width: 560px; margin: 0 auto; text-align: center; } .interview-card h1 { margin: .3rem 0 .2rem; } .iv-brand { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--brand); background: var(--brand-wash); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .6rem; } .iv-intro { line-height: 1.55; margin: .4rem 0 1rem; } .iv-facts { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; text-align: left; } .iv-facts li { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: var(--panel-2); border-radius: var(--radius-sm); font-size: .9rem; } .iv-facts li [data-icon] { color: var(--brand); display: inline-flex; } .iv-consent { font-size: .8rem; color: var(--muted); line-height: 1.5; text-align: left; padding: .7rem .85rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); margin-bottom: 1rem; } .iv-fields { display: grid; gap: .7rem; text-align: left; margin-bottom: 1rem; } .iv-fields label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); } .iv-fields input { width: 100%; } .iv-mic-test { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; } .iv-mic-meter { flex: 1; height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; } .iv-mic-meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .08s linear; } .iv-agree { justify-content: flex-start; text-align: left; margin-bottom: 1rem; font-size: .85rem; } .interview-card .primary-btn { width: 100%; } .iv-done-check { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-size: 2rem; display: flex; align-items: center; justify-content: center; } /* Entretien en cours */ .interview-live { max-width: 560px; margin: 0 auto; text-align: center; } .iv-live-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; } .iv-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--muted); background: var(--panel-2); padding: .25rem .7rem; border-radius: 999px; } .iv-timer-low { color: var(--danger); background: var(--danger-wash); } .iv-phase { font-size: .85rem; color: var(--muted); } .iv-orb-wrap { display: flex; justify-content: center; padding: 1.6rem 0 1.2rem; } .iv-orb { width: 160px; height: 160px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, var(--brand-wash), transparent 70%); transition: transform .3s ease; } .iv-orb-core { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(140deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 40px -6px color-mix(in srgb, var(--brand) 55%, transparent); transition: transform .25s ease, box-shadow .25s ease; } .iv-orb.listening .iv-orb-core { animation: iv-breathe 3.6s ease-in-out infinite; } .iv-orb.speaking .iv-orb-core { animation: iv-pulse 1.1s ease-in-out infinite; box-shadow: 0 10px 60px -4px color-mix(in srgb, var(--brand-2) 65%, transparent); } @keyframes iv-breathe { 0%,100% { transform: scale(.92); opacity: .82; } 50% { transform: scale(1); opacity: 1; } } @keyframes iv-pulse { 0%,100% { transform: scale(.96); } 25% { transform: scale(1.09); } 55% { transform: scale(1.02); } 80% { transform: scale(1.12); } } .iv-captions { min-height: 120px; max-height: 200px; overflow-y: auto; text-align: left; padding: .4rem .2rem; margin-bottom: .6rem; } .iv-cap-hint { text-align: center; } .iv-cap { margin: .35rem 0; line-height: 1.5; font-size: .95rem; } .iv-cap-who { display: inline-block; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; margin-right: .45rem; padding: .1rem .4rem; border-radius: 6px; } .iv-cap-ai .iv-cap-who { color: var(--brand); background: var(--brand-wash); } .iv-cap-me { color: var(--muted); } .iv-cap-me .iv-cap-who { color: var(--muted); background: var(--panel-2); } .iv-nudge { text-align: center; font-size: .85rem; color: var(--brand); background: var(--brand-wash); padding: .5rem .8rem; border-radius: var(--radius-sm); margin-bottom: .8rem; } .iv-live-controls { display: flex; justify-content: center; gap: 1rem; margin-top: .4rem; } .iv-ctrl { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--txt); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s, background .15s; } .iv-ctrl:hover { transform: translateY(-2px); } .iv-ctrl.off { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .iv-ctrl.iv-end { background: var(--danger); color: #fff; border-color: transparent; } /* ── Clients : signaux de prospection (extension SpotLite Prospect) ───────── */ .score-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .1rem; } .score-badge { position: relative; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .22rem .55rem .34rem; border-radius: 999px; background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); overflow: hidden; } .score-badge b { font-weight: 800; } .score-badge i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 3px; } .detail-scores { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0; } .chip.subtle { background: var(--panel-2); color: var(--muted); } .chip.status-prospect { background: var(--accent-wash); color: var(--accent); } .chip.status-client { background: var(--panel-2); color: var(--txt); } .chip.type { background: var(--accent-wash); color: var(--accent); } .chip.risk-medium, .chip.sev-medium { background: rgba(217,119,6,.16); color: #d97706; } .chip.risk-high, .chip.sev-high { background: var(--danger-wash); color: var(--danger); } .chip.sev-low { background: var(--panel-2); color: var(--muted); } .signal-item { padding: .55rem 0; border-bottom: 1px solid var(--line); } .signal-item:last-child { border-bottom: none; } .si-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .25rem; } .need-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .need-item:last-child { border-bottom: none; } .need-u { font-weight: 800; font-size: 1rem; color: var(--accent); } .reco-box { border-left: 3px solid var(--accent); background: var(--panel-2); padding: .5rem .75rem; border-radius: 0 8px 8px 0; margin: .6rem 0; font-size: .9rem; line-height: 1.5; } .pv-sources { font-size: .82rem; line-height: 1.7; } .pv-sources a { color: var(--accent); text-decoration: none; } .ext-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem; }