:root { /* Dark theme. Neutrals are tinted toward the brand violet (hue 288) at very low chroma, so nothing is a dead grey and the surface feels intentional. */ --bg: oklch(0.17 0.012 288); /* surface */ --surface-1: oklch(0.22 0.013 288); /* surface-container-low */ --surface-2: oklch(0.26 0.014 288); /* surface-container */ --surface-3: oklch(0.30 0.015 288); /* surface-container-high */ --fg: oklch(0.93 0.006 288); /* on-surface */ --muted: oklch(0.70 0.013 288); /* on-surface-variant */ /* Brand violet. --accent-rgb mirrors --accent for translucent tints; keep the two in sync if the hue ever moves. */ --accent: oklch(0.78 0.13 288); /* primary */ --accent-2: var(--accent); --accent-rgb: 184 164 255; --accent-container: oklch(0.32 0.10 290); --on-accent-container: oklch(0.87 0.07 290); --on-primary: oklch(0.22 0.11 288); /* text on a filled accent button */ /* Derived accent surfaces — single source of truth for every tinted state. */ --accent-tint: rgb(var(--accent-rgb) / 0.10); --accent-tint-strong: rgb(var(--accent-rgb) / 0.16); --accent-line: rgb(var(--accent-rgb) / 0.38); --card: var(--surface-1); --border: rgb(255 255 255 / 0.07); /* outline-variant */ --outline: rgb(255 255 255 / 0.16); /* outline */ --radius: 5px; /* Elevation */ --elev-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15); --elev-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15); --elev-3: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15); } /* ============================================================================ Light theme — same brand hue (violet ~290), inverted lightness. Activated by data-theme="light" on (theme toggle in the nav). Designed alongside the dark theme to keep WCAG AA contrast and brand consistency. ============================================================================ */ [data-theme="light"] { --bg: oklch(0.975 0.005 288); --surface-1: oklch(0.995 0.003 288); --surface-2: oklch(1 0 0); --surface-3: oklch(0.955 0.007 288); --fg: oklch(0.25 0.03 290); /* dark text, ~AAA on white */ --muted: oklch(0.46 0.03 290); /* secondary text, ~5:1 on white */ --accent: oklch(0.47 0.19 292); /* deep violet: white text ~4.8:1 */ --accent-2: var(--accent); --accent-rgb: 99 60 186; /* approx of --accent, drives tints */ --accent-container: oklch(0.93 0.06 292); --on-accent-container: oklch(0.38 0.16 292); --on-primary: oklch(0.99 0.004 292); /* white text on the violet button */ --card: var(--surface-1); --border: rgb(17 12 34 / 0.12); --outline: rgb(17 12 34 / 0.22); --elev-1: 0 1px 2px rgb(17 12 34 / 0.06), 0 1px 3px 1px rgb(17 12 34 / 0.04); --elev-2: 0 2px 4px rgb(17 12 34 / 0.07), 0 3px 8px 2px rgb(17 12 34 / 0.05); --elev-3: 0 4px 10px rgb(17 12 34 / 0.10), 0 8px 24px 4px rgb(17 12 34 / 0.08); } /* Components with hardcoded dark fills / white hovers must flip in light mode. Use background-color (not the `background` shorthand) so glyphs painted via background-image survive in light theme (select chevrons, search magnifier). Exclude [type="range"]: .score-slider paints its colored track via its own background, which this rule would otherwise overwrite with flat white. */ [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="light"] textarea, [data-theme="light"] select { background-color: var(--surface-2) !important; } [data-theme="light"] .btn.ghost:hover, [data-theme="light"] .btn-link:hover { background: rgb(17 12 34 / 0.05); } /* Theme toggle button (nav). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--fg); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } .theme-toggle:hover { background: var(--accent-tint); border-color: var(--accent-line); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .theme-ico-moon { display: none; } [data-theme="light"] .theme-toggle .theme-ico-sun { display: none; } [data-theme="light"] .theme-toggle .theme-ico-moon { display: inline-flex; } * { box-sizing: border-box; } /* The HTML `hidden` attribute must always win, even over component rules that set `display` (e.g. .detail-overlay{display:flex}). Without this, hidden elements with a display rule stay visible. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* Material: no gradient backgrounds. Surface stays flat. */ .bg-grid, .bg-glow, .grain { display: none; } /* ---------- Nav ---------- */ .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; /* Full-width sticky app bar. The inner pages (map, board) are full-width, so a 1140-centered nav sat inset and looked off — this aligns the logo/links to the page edges everywhere. Opaque + hairline border, no blur (per DESIGN.md). */ padding: 14px clamp(20px, 4vw, 40px); position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 18px; } /* Logo mark: a small "squircle" app-tile with a soft accent gradient and a removed — the wordmark stands on its own. Hidden in CSS so it disappears everywhere it's used, with no per-template markup changes. */ .logo-dot { display: none; } .badge { font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); } /* ---------- Hero ---------- */ .hero { max-width: 1140px; margin: 0 auto; padding: 60px 32px 80px; text-align: center; } .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); margin-bottom: 28px; } .hero h1 { font-size: clamp(38px, 6.5vw, 76px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 24px; } .grad { /* Material : pas de gradient text. Couleur primaire pleine. */ color: var(--accent); } .lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0 auto 40px; } /* ---------- CTAs (Material-3 inspired) ---------- */ .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 80px; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border: none; border-radius: 4px; font: inherit; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; cursor: pointer; user-select: none; text-decoration: none; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.06s ease; -webkit-tap-highlight-color: transparent; } /* Material state layer: a sibling pseudo-element that fades in on hover/active. Avoids the AI-generic gradient-glow look. */ .btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .btn:hover::after { opacity: 0.08; } .btn:focus-visible::after { opacity: 0.12; } .btn:active::after { opacity: 0.16; } .btn:active { transform: scale(0.98); } .btn:disabled, .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .btn.primary { background: var(--accent); color: var(--on-primary); box-shadow: var(--elev-1); } .btn.primary:hover { box-shadow: var(--elev-2); } .btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--fg); } .btn.ghost:hover { background: rgba(255, 255, 255, 0.04); } /* ---------- Features ---------- */ .features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; text-align: left; } .features li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color 0.2s ease, transform 0.2s ease; } .features li:hover { border-color: var(--accent-line); transform: translateY(-4px); } .feat-icon { font-size: 24px; margin-bottom: 12px; } .features h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; } .features p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--border); margin-top: 60px; padding: 24px 32px; max-width: 1140px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } @media (max-width: 640px) { .nav, .hero, footer { padding-left: 20px; padding-right: 20px; } .hero { padding-top: 32px; } footer { flex-direction: column; gap: 6px; } } /* ============================================================================ Mobile bottom tab bar (≤640px). Hidden by default; replaces the horizontal nav links for thumb-reachable navigation. Adds safe-area padding for the iPhone home indicator. The corresponding desktop nav links carry the class .nav-link-desktop so we can hide them on phones. ============================================================================ */ .mobile-tabbar { display: none; } @media (max-width: 640px) { .nav-link-desktop { display: none !important; } /* Free the tappable footprint up top : just logo + notif + theme. */ .nav { padding: 10px 16px; gap: 8px; } .nav-right { gap: 8px; } /* Push every page content above the tabbar so nothing sits under it. */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgb(0 0 0 / 0.18); backdrop-filter: blur(8px); } .mobile-tabbar .mt-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 2px; color: var(--muted); font-size: 10px; font-weight: 500; border-radius: 5px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color 150ms ease, background 150ms ease; } .mobile-tabbar .mt-item svg { opacity: 0.9; } .mobile-tabbar .mt-item span { letter-spacing: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-tabbar .mt-item.active { color: var(--accent); background: var(--accent-tint); } .mobile-tabbar .mt-item.active svg { opacity: 1; } .mobile-tabbar .mt-item:active { transform: scale(0.96); } } /* ====================================================================== */ /* Shared utilities */ /* ====================================================================== */ .nav-right { display: flex; align-items: center; gap: 14px; } .btn-link { background: none; border: none; color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; padding: 6px 12px; border-radius: 5px; text-decoration: none; transition: background 0.15s ease; } .btn-link:hover { background: rgba(255, 255, 255, 0.06); } .btn-link.center { text-align: center; display: block; margin: 0 auto; } .muted { color: var(--muted); } .italic { font-style: normal; font-weight: 600; } /* Material: pas de serif italic, juste un poids différent */ .link { color: var(--accent-2); text-decoration: none; } .link:hover { text-decoration: underline; } .check { color: #4ade80; font-weight: bold; } .avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; } .user-name { font-size: 14px; font-weight: 500; color: var(--fg); } .chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, 0.06); color: var(--fg); text-transform: lowercase; } .chip-secret { background: rgba(245, 158, 11, 0.12); color: #fbbf24; } .chip-ok { background: rgba(34, 197, 94, 0.12); color: #86efac; } .chip-empty { background: rgba(255, 255, 255, 0.04); color: var(--muted); } /* ====================================================================== */ /* Auth pages (login + signup) - split screen */ /* ====================================================================== */ body.auth-page { overflow: auto; min-height: 100vh; } .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; } .auth-side { position: relative; overflow: hidden; padding: 40px 56px 56px; background: radial-gradient(130% 90% at 0% 0%, rgb(var(--accent-rgb) / 0.16), transparent 55%), radial-gradient(120% 80% at 100% 100%, oklch(0.72 0.15 322 / 0.10), transparent 60%), var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .auth-side > * { position: relative; z-index: 1; } .auth-side .logo { font-size: 18px; margin-bottom: auto; } .auth-pitch h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 28px; } .pitch-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; } .pitch-bullets li { display: flex; align-items: center; gap: 13px; color: var(--fg); font-size: 15px; line-height: 1.5; } .bullet-dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-tint); border: 1px solid var(--accent-line); display: grid; place-items: center; } .bullet-dot::before { content: "\2713"; font-size: 12px; font-weight: 700; color: var(--accent); } .pitch-foot { color: var(--muted); font-size: 13px; margin: 0; padding-top: 16px; border-top: 1px solid var(--border); } .auth-main { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: radial-gradient(100% 80% at 100% 0%, rgb(var(--accent-rgb) / 0.06), transparent 60%); } .auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 32px; box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(var(--accent-rgb) / 0.05); } /* Standalone centered shell for the transient auth-callback page */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 24px; } .auth-head { margin-bottom: 24px; } .auth-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .auth-sub { color: var(--muted); font-size: 14px; margin: 0; } .oauth-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .btn-oauth { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 20px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); background: #ffffff; color: #1f1f1f; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.06s ease; -webkit-tap-highlight-color: transparent; } .btn-oauth::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .btn-oauth:hover::after { opacity: 0.06; } .btn-oauth:focus-visible::after { opacity: 0.1; } .btn-oauth:active::after { opacity: 0.14; } .btn-oauth:active { transform: scale(0.98); } .btn-oauth:disabled { opacity: 0.55; cursor: wait; } .btn-oauth:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .divider { display: flex; align-items: center; margin: 20px 0; color: var(--muted); font-size: 12px; text-transform: lowercase; letter-spacing: 0.04em; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .divider span { padding: 0 12px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .auth-form input, .field input { width: 100%; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--fg); font: inherit; font-size: 14px; transition: border-color 0.15s ease, background 0.15s ease; } .auth-form input:focus, .field input:focus { outline: none; border-color: var(--accent); background: rgba(0, 0, 0, 0.5); } .auth-form input[name="otp"], .otp-field { text-align: center; font-size: 24px; letter-spacing: 0.4em; font-weight: 600; font-family: "JetBrains Mono", ui-monospace, monospace; } .advanced { border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; background: rgba(0, 0, 0, 0.2); } .advanced summary { font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; } .advanced summary:hover { color: var(--fg); } .auth-cta { width: 100%; padding: 13px 16px; margin-top: 4px; } .auth-error { background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.3); color: #fca5a5; padding: 10px 12px; border-radius: 5px; font-size: 13px; margin-bottom: 16px; } .auth-info { background: var(--accent-tint); border: 1px solid rgb(var(--accent-rgb) / 0.25); padding: 18px; border-radius: 5px; font-size: 14px; } .auth-info .info-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--fg); } .auth-info p { margin: 0 0 6px; } .auth-info p:last-child { margin: 0; } .auth-info .auth-form { margin-top: 14px; } .otp-info { font-size: 14px; color: var(--fg); margin: 0 0 8px; line-height: 1.5; } .auth-legal { font-size: 11px; color: var(--muted); text-align: center; margin: 22px 0 0; line-height: 1.5; } @media (max-width: 880px) { .auth-shell { grid-template-columns: 1fr; } .auth-side { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 24px 32px; } .auth-pitch h2 { font-size: 24px; } .pitch-bullets { font-size: 13px; } } /* Resend OTP row in verify.html */ .resend-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; } .resend-row p { margin: 0; } /* Admin CTA card on dashboard */ .admin-cta { display: flex; align-items: center; gap: 24px; text-align: left; margin: 56px auto 0; max-width: 640px; padding: 24px 28px; background: var(--accent-container); border: 1px solid var(--accent); border-radius: 6px; } .admin-cta-text { flex: 1; } .admin-cta-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: var(--on-primary); margin-bottom: 8px; } .admin-cta h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .admin-cta p { margin: 0; font-size: 13px; color: var(--muted); } @media (max-width: 600px) { .admin-cta { flex-direction: column; align-items: flex-start; } } /* ====================================================================== */ /* Admin panel */ /* ====================================================================== */ body.admin-page { overflow: auto; min-height: 100vh; } .admin-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } .admin-badge { margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: var(--on-primary); } .admin-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 32px 60px; } .admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .admin-tabs .tab { background: none; border: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; } .admin-tabs .tab:hover { color: var(--fg); } .admin-tabs .tab.active { color: var(--fg); border-bottom-color: var(--accent); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 28px; } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .kpi-label { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .kpi-value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; } .chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } @media (max-width: 920px) { .chart-grid { grid-template-columns: 1fr; } } .chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 20px; min-height: 280px; } .chart-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: var(--fg); } .chart-card canvas { max-height: 240px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); } .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover { background: rgba(255,255,255,0.02); } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255, 255, 255, 0.1); border-radius: 8px; transition: background 0.2s ease; } .slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform 0.2s ease; } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(18px); } .settings-list { display: flex; flex-direction: column; gap: 12px; } /* Feature flag toggles (admin) */ .settings-features { display: flex; flex-direction: column; gap: 10px; } .feature-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 14px 18px; } .feature-row .feature-text { min-width: 0; } .feature-row .feature-name { display: block; font-size: 14px; font-weight: 600; } .feature-row .setting-desc { margin: 5px 0 0; } .feature-row .switch { flex-shrink: 0; } .setting-card { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 18px 20px; } .setting-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .setting-key { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--fg); } .setting-desc { color: var(--muted); font-size: 13px; margin: 0 0 12px; } .setting-edit { display: flex; gap: 8px; margin-bottom: 8px; } .setting-edit input { flex: 1; padding: 9px 12px; border-radius: 5px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--fg); font: inherit; font-size: 13px; } .setting-edit input:focus { outline: none; border-color: var(--accent); } .setting-save { padding: 9px 16px; font-size: 13px; border-radius: 5px; } .setting-meta { font-size: 11px; margin: 0; } .setting-current { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: 5px; background: rgba(0, 0, 0, 0.4); border: 1px dashed var(--border); } .setting-current-label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .setting-current-value { flex: 1; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--fg); word-break: break-all; letter-spacing: 0.04em; } .setting-toggle, .setting-copy { background: none; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; flex-shrink: 0; } .setting-toggle:hover, .setting-copy:hover { color: var(--fg); border-color: var(--accent); } .empty-state { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 40px 20px; text-align: center; } .empty-state p { margin: 0 0 6px; } .empty-state code { font-family: "JetBrains Mono", ui-monospace, monospace; background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 4px; font-size: 13px; } /* ====================================================================== */ /* Container shells (profile, jobs) */ /* ====================================================================== */ .container { max-width: 1100px; margin: 0 auto; padding: 32px 28px 60px; } .container.narrow { max-width: 720px; } .page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .page-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; } /* ====================================================================== */ /* Profile form */ /* ====================================================================== */ .profile-form { display: flex; flex-direction: column; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 24px; } .profile-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .profile-form .row-2 { grid-template-columns: 1fr; } } .profile-form textarea, .profile-form select { width: 100%; padding: 11px 14px; border-radius: 4px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--fg); font: inherit; font-size: 14px; resize: vertical; } .profile-form textarea:focus, .profile-form select:focus { outline: none; border-color: var(--accent); } /* ====================================================================== */ /* Jobs page */ /* ====================================================================== */ .jobs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .jobs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; /* never overflow; wraps cleanly on smaller widths */ } /* Unified 40px control height so inputs, selects and buttons line up cleanly. */ .jobs-actions input[type="search"], .jobs-actions select { height: 40px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); font: inherit; font-size: 13px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .jobs-actions input[type="search"]::placeholder { color: var(--muted); } .jobs-actions input[type="search"]:hover, .jobs-actions select:hover { border-color: var(--outline); } .jobs-actions input[type="search"]:focus, .jobs-actions select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } /* Search sized to a comfortable width but does NOT grow to fill the row, so the filter cluster stays a tidy left group instead of stretching across to line up under the CTA above. Mobile (<=640px) override below restores full width. */ .jobs-actions input[type="search"] { flex: 0 1 300px; min-width: 200px; max-width: 340px; } .jobs-actions select { min-width: 0; } /* Magnifier glyph inside the search field. */ #search { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.4' stroke='%239b9ba8' stroke-width='1.5'/%3E%3Cpath d='M10.6 10.6 14 14' stroke='%239b9ba8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; background-size: 15px; } /* Custom chevron — kills the dated native select arrow. */ .jobs-actions select, .filters-panel select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239b9ba8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 14px; } /* Toolbar buttons: sleeker, matched to the 40px control height. */ .jobs-actions .btn { min-height: 40px; padding: 0 16px; font-size: 13px; } /* ===== Filtres /jobs : bouton repliable, panneau, chips ===== */ .filters-toggle { display: inline-flex; align-items: center; gap: 7px; } .filters-toggle .chevron { flex: none; transition: transform 180ms ease; } .filters-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .filters-toggle .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--accent); color: var(--on-primary); font-size: 11px; font-weight: 700; line-height: 1; } .filters-panel { display: none; flex-wrap: wrap; gap: 14px 16px; align-items: end; margin: 12px 0 0; padding: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); } .filters-panel.open { display: flex; } .filter-field { display: flex; flex-direction: column; gap: 5px; } .filter-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .filters-panel select { height: 40px; min-width: 150px; padding: 0 32px 0 12px; /* room for the chevron on the right */ border-radius: 4px; border: 1px solid var(--border); background-color: var(--surface-2); color: var(--fg); font: inherit; font-size: 13px; transition: border-color 150ms ease, box-shadow 150ms ease; } .filters-panel select:hover { border-color: var(--outline); } .filters-panel select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .filters-panel select:disabled { opacity: 0.45; cursor: not-allowed; } /* Score min : slider visuel 0-100 + badge live. Le track porte un dégradé tri-couleur (lo/mid/hi) qui rappelle les tiers utilisés partout dans l'app, le thumb prend l'accent. La valeur affichée à droite change de teinte selon le palier atteint. */ .score-picker { display: inline-flex; align-items: center; gap: 12px; height: 40px; min-width: 200px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease; } .score-picker:hover { border-color: var(--outline); } .score-picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .score-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; background: linear-gradient(to right, oklch(0.68 0.14 25 / 0.32) 0% 40%, oklch(0.78 0.14 70 / 0.32) 40% 70%, oklch(0.74 0.16 158 / 0.32) 70% 100%); border-radius: 999px; outline: none; cursor: pointer; } .score-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--accent); border: 2px solid var(--surface-2); border-radius: 50%; box-shadow: 0 0 0 1px var(--accent), 0 1px 4px rgb(0 0 0 / .35); cursor: grab; transition: transform .12s ease, box-shadow .12s ease; } .score-slider:hover::-webkit-slider-thumb, .score-slider:focus::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-tint); } .score-slider:active::-webkit-slider-thumb, .score-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); } .score-slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent); border: 2px solid var(--surface-2); border-radius: 50%; cursor: grab; transition: transform .12s ease; } .score-slider:hover::-moz-range-thumb, .score-slider:focus::-moz-range-thumb { transform: scale(1.18); } .score-slider:disabled, .score-picker:has(.score-slider:disabled) { opacity: 0.4; cursor: not-allowed; } .score-picker-value { flex: none; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 38px; text-align: right; transition: color .15s ease; } .score-picker[data-tier="lo"] .score-picker-value { color: oklch(0.70 0.15 25); } .score-picker[data-tier="mid"] .score-picker-value { color: oklch(0.78 0.14 70); } .score-picker[data-tier="hi"] .score-picker-value { color: oklch(0.74 0.16 158); } [data-theme="light"] .score-picker[data-tier="lo"] .score-picker-value { color: oklch(0.50 0.16 25); } [data-theme="light"] .score-picker[data-tier="mid"] .score-picker-value { color: oklch(0.48 0.13 60); } [data-theme="light"] .score-picker[data-tier="hi"] .score-picker-value { color: oklch(0.42 0.14 158); } .filters-reset { align-self: end; margin-left: auto; } /* Custom multi-select widget (Contrat / Source). Lookalike of native select but pops open a checkbox list — supports multiple values cleanly. */ .multi-select { position: relative; } .multi-select .ms-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; min-width: 170px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-1); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .multi-select .ms-btn:hover { border-color: var(--outline); } .multi-select .ms-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .multi-select .ms-btn.active { border-color: var(--accent); background: var(--accent-tint); } .multi-select .ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multi-select .ms-chev { transition: transform .15s ease; flex: none; opacity: 0.7; } .multi-select.open .ms-chev { transform: rotate(180deg); } .multi-select .ms-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 6px; box-shadow: var(--elev-2); z-index: 60; } .multi-select .ms-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; } .multi-select .ms-opt:hover { background: var(--surface-3); } .multi-select .ms-opt input { accent-color: var(--accent); margin: 0; } .active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .active-filters:empty { display: none; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--fg); font-size: 12px; white-space: nowrap; } .filter-chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .filter-chip button:hover { background: rgb(var(--accent-rgb) / 0.22); color: var(--fg); } .filter-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { .filters-toggle .chevron { transition: none; } } /* ===== Onboarding wizard ===== */ .onb-wrap { max-width: 640px; margin: 24px auto 64px; } .onb-steps { display: flex; gap: 8px; } .onb-steps .dot { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); transition: background 220ms ease; } .onb-steps .dot.done, .onb-steps .dot.current { background: var(--accent); } .onb-progress { font-size: 12px; margin: 10px 0 24px; letter-spacing: 0.03em; } .onb-step { display: none; } .onb-step.active { display: block; animation: onb-fade 220ms ease; } @keyframes onb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .onb-step h1 { margin: 0 0 8px; font-size: 28px; } .onb-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; } .onb-list li { color: var(--muted); padding: 12px 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; } .onb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; } .onb-results { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .onb-result { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; text-decoration: none; color: var(--fg); transition: border-color 150ms ease, background 150ms ease; } .onb-result:hover { border-color: var(--accent); background: var(--surface-2); } .onb-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .onb-result-body .muted { font-size: 13px; } .onb-score { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; font-weight: 700; font-size: 15px; background: var(--accent-tint); color: var(--fg); border: 1px solid var(--accent-line); } .onb-score[data-tier="hi"] { background: rgb(34 197 94 / 0.16); border-color: rgb(34 197 94 / 0.4); } .onb-score[data-tier="lo"] { background: var(--surface-3); border-color: var(--border); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .onb-step.active { animation: none; } } /* Onboarding "skip" link : intégré sous le flow plutôt que coincé en haut. Présente sur étapes 1-2 (cachée à l'étape 3 via JS). Subtile mais lisible — l'utilisateur doit la trouver, pas la subir. */ .onb-skip { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; } .onb-skip a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 4px; transition: color 150ms ease, background 150ms ease; } .onb-skip a:hover { color: var(--accent); background: var(--accent-tint); } .onb-skip-hint { font-size: 12px; } /* ===== User menu (avatar dropdown) ===== Regroupe Mon profil / Tarifs / Support / Admin / Déconnexion sous un avatar à l'extrême droite de la nav. Évite la rangée de 9 liens horizontaux. Caché sur mobile (le bottom tabbar prend le relais). */ .user-menu { position: relative; display: inline-flex; } .user-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px 0 4px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--fg); cursor: pointer; font: inherit; transition: background 150ms ease, border-color 150ms ease; } .user-menu-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--border); } .user-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .user-menu.open .user-menu-btn { background: rgba(255, 255, 255, 0.06); border-color: var(--border); } [data-theme="light"] .user-menu-btn:hover, [data-theme="light"] .user-menu.open .user-menu-btn { background: rgb(17 12 34 / 0.05); } .user-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), oklch(0.66 0.16 322)); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0; overflow: hidden; } .user-avatar.lg { width: 40px; height: 40px; font-size: 16px; } .user-avatar.has-img { background: var(--surface-3); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-chev { transition: transform .15s ease; opacity: 0.7; } .user-menu.open .user-chev { transform: rotate(180deg); } .user-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--elev-3); padding: 6px; z-index: 60; } .user-menu-header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .user-menu-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .user-menu-id strong { font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .user-menu-id .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .user-menu-pop a, .user-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; text-align: left; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background 120ms ease; } .user-menu-pop a:hover, .user-menu-pop button:hover { background: var(--surface-2); } .user-menu-pop a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); } .user-menu-pop svg { flex: none; opacity: 0.75; } .user-menu-pop a:hover svg, .user-menu-pop button:hover svg { opacity: 1; } .user-menu-pop form { margin: 0; } .user-menu-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--border); } .user-menu-signout { color: var(--muted); } .user-menu-signout:hover { color: oklch(0.74 0.16 25); } .user-menu-admin svg { color: var(--accent); opacity: 1; } /* Mobile : le menu utilisateur disparait (couvert par le bottom tabbar). */ @media (max-width: 640px) { .user-menu { display: none !important; } } /* ===== Notifications bell ===== */ .notif { position: relative; display: inline-flex; } .notif-bell { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background 150ms ease, color 150ms ease; } .notif-bell:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); } .notif-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .notif-bell.has-unread { color: var(--fg); } .notif-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--accent); color: var(--on-primary); font-size: 10px; font-weight: 700; line-height: 1; } .notif-panel { /* z-index >> Leaflet (panes 200-700) : sinon la carte couvrait le dropdown. Ancré à GAUCHE de la cloche (qui est au début de .nav-right) -> le panneau s'étend vers la droite et reste dans la viewport (right:0 le faisait sortir à gauche de la page). */ position: absolute; top: calc(100% + 8px); left: 0; z-index: 10000; width: 340px; max-width: calc(100vw - 32px); background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--elev-3); overflow: hidden; } .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; } .notif-readall { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; } .notif-readall:hover { text-decoration: underline; } .notif-actions { display: inline-flex; gap: 12px; align-items: center; } .notif-clear { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 0; } .notif-clear:hover { color: #fca5a5; text-decoration: underline; } .notif-list { max-height: 380px; overflow-y: auto; } .notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px; } .notif-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--fg); transition: background 150ms ease; } .notif-item:last-child { border-bottom: 0; } .notif-item:hover { background: var(--surface-3); } .notif-item.unread { background: var(--accent-tint); } .notif-item.unread:hover { background: var(--accent-tint-strong); } .notif-item strong { font-size: 13px; font-weight: 600; } .notif-item .notif-body { font-size: 12px; color: var(--muted); } .notif-item .notif-time { font-size: 11px; color: var(--muted); opacity: 0.8; } .jobs-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; /* separation nette entre la zone de filtres et la liste d'offres */ } .job-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 0; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Premium hover, same DA as the hero widget + dashboard cards. */ .job-card:hover { border-color: var(--accent-line); box-shadow: 0 12px 30px -22px rgb(var(--accent-rgb) / 0.45); } @media (prefers-reduced-motion: reduce) { .job-card { transition: border-color 0.2s ease; } .job-card:hover { transform: none; box-shadow: none; } } /* Score badge — a slow conic "shader" glow, tier-coloured, behind a bold number. GPU-composited via an animated @property angle (no WebGL). Degrades to a static gradient where @property is unsupported; stops under reduced-motion. Shared with the landing hero mock (.preview-score). */ @property --score-ang { syntax: ""; initial-value: 0deg; inherits: false; } .job-score { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; width: 48px; height: 48px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--score-grad, var(--score-base, var(--surface-2))); color: var(--score-fg, var(--fg)); border: 1px solid var(--score-line, var(--border)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); } /* List badges are clean, solid tier chips. The animated conic "shader" is reserved for the single hero widget (.preview-score) — running it on every row of a long list was visually noisy and paint-heavy. */ .preview-score::before { content: ""; position: absolute; inset: -45%; z-index: -1; background: conic-gradient(from var(--score-ang, 0deg), var(--score-c1), var(--score-c2), var(--score-c3), var(--score-c1)); opacity: var(--score-glow, 0.4); animation: score-spin 9s linear infinite; } @keyframes score-spin { to { --score-ang: 360deg; } } /* Tier palettes (OKLCH, moderate chroma — premium, not garish). */ .job-score[data-tier="hi"], .preview-score { --score-base: oklch(0.28 0.06 158); --score-fg: oklch(0.92 0.14 158); --score-line: oklch(0.58 0.10 160 / 0.45); --score-c1: oklch(0.74 0.16 150); --score-c2: oklch(0.82 0.13 178); --score-c3: oklch(0.70 0.15 205); --score-glow: 0.45; --score-grad: linear-gradient(140deg, oklch(0.34 0.10 158), oklch(0.41 0.11 196)); } .job-score[data-tier="mid"] { --score-base: oklch(0.30 0.06 75); --score-fg: oklch(0.91 0.14 85); --score-line: oklch(0.60 0.11 75 / 0.45); --score-c1: oklch(0.81 0.15 85); --score-c2: oklch(0.83 0.13 62); --score-c3: oklch(0.79 0.15 42); --score-glow: 0.42; --score-grad: linear-gradient(140deg, oklch(0.36 0.11 82), oklch(0.42 0.12 52)); } .job-score[data-tier="lo"] { --score-base: oklch(0.26 0.012 288); --score-fg: var(--muted); --score-line: var(--border); --score-c1: oklch(0.50 0.04 288); --score-c2: oklch(0.44 0.03 288); --score-c3: oklch(0.56 0.05 288); --score-glow: 0.16; --score-grad: linear-gradient(140deg, oklch(0.31 0.02 288), oklch(0.25 0.015 288)); } @media (prefers-reduced-motion: reduce) { .preview-score::before { animation: none; } } /* Light theme — softer pastel chips for score badges. The dark-theme palette (deep saturated bg + neon text) reads as harsh on a white card; here we invert lightness so the badge becomes a calm tinted pill with darker text. */ [data-theme="light"] .job-score[data-tier="hi"], [data-theme="light"] .preview-score { --score-base: oklch(0.94 0.06 158); --score-fg: oklch(0.36 0.10 158); --score-line: oklch(0.78 0.08 160 / 0.55); --score-grad: linear-gradient(140deg, oklch(0.95 0.05 158), oklch(0.94 0.05 196)); } [data-theme="light"] .job-score[data-tier="mid"] { --score-base: oklch(0.95 0.07 85); --score-fg: oklch(0.42 0.11 60); --score-line: oklch(0.80 0.09 75 / 0.55); --score-grad: linear-gradient(140deg, oklch(0.96 0.06 85), oklch(0.94 0.07 52)); } [data-theme="light"] .job-score[data-tier="lo"] { --score-base: oklch(0.95 0.008 288); --score-fg: var(--muted); --score-line: var(--border); --score-grad: linear-gradient(140deg, oklch(0.96 0.006 288), oklch(0.93 0.008 288)); } [data-theme="light"] .cand-score[data-tier="hi"] { background: linear-gradient(140deg, oklch(0.94 0.06 158), oklch(0.94 0.05 196)); color: oklch(0.36 0.10 158); border-color: oklch(0.78 0.08 160 / 0.55); } [data-theme="light"] .cand-score[data-tier="mid"] { background: linear-gradient(140deg, oklch(0.95 0.07 85), oklch(0.94 0.07 52)); color: oklch(0.42 0.11 60); border-color: oklch(0.80 0.09 75 / 0.55); } [data-theme="light"] .cand-score[data-tier="lo"] { background: var(--surface-3); color: var(--muted); } .job-body { flex: 1; min-width: 0; } .job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .job-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.3; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-meta { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.4; } .job-meta strong { color: var(--fg); font-weight: 600; } .meta-company { display: block; color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta-extra { display: block; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-reason { position: relative; font-size: 13px; color: var(--fg); background: var(--accent-tint); border: 1px solid rgb(var(--accent-rgb) / 0.18); padding: 9px 12px 9px 32px; border-radius: 4px; margin: 0 0 10px; line-height: 1.5; } /* Leading mark flags the AI rationale without a (banned) colored side-stripe. */ .job-reason::before { content: "\2726"; position: absolute; left: 12px; top: 9px; font-size: 12px; line-height: 1.5; color: var(--accent); } .job-desc { font-size: 13px; line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .job-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .job-action { font: inherit; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .job-action:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); } .job-action.active { background: var(--accent-tint-strong); color: var(--accent-2); border-color: var(--accent-line); } /* === /jobs : master-detail layout (LinkedIn-style) === The whole page becomes a non-scrolling app-shell (body.jobs-page locks page-level scroll). Inside, the nav and toolbar sit at the top, and the two-column layout fills the remaining viewport — list + detail each get their own scrollbar, both reachable all the way to the bottom. Below 1024px the detail becomes a full-screen slide-in over the list. */ body.jobs-page { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body.jobs-page > main.container { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 20px; } body.jobs-page .jobs-layout { flex: 1; min-height: 0; position: static; top: auto; height: auto; } .jobs-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(440px, 1.4fr); gap: 20px; margin-top: 16px; } .jobs-list-col { min-width: 0; overflow-y: auto; padding-right: 6px; } .jobs-detail-col { overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); } /* Custom scrollbars for the two scrollable columns — thin, rounded, fading into the surface. Tuned for both themes; Firefox uses scrollbar-* props, WebKit/Blink uses ::-webkit-scrollbar pseudo-elements. */ .jobs-list-col, .jobs-detail-col { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.18) transparent; } .jobs-list-col::-webkit-scrollbar, .jobs-detail-col::-webkit-scrollbar { width: 10px; height: 10px; } .jobs-list-col::-webkit-scrollbar-track, .jobs-detail-col::-webkit-scrollbar-track { background: transparent; } .jobs-list-col::-webkit-scrollbar-thumb, .jobs-detail-col::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.12); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; transition: background 150ms ease; } .jobs-list-col:hover::-webkit-scrollbar-thumb, .jobs-detail-col:hover::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.22); background-clip: padding-box; } .jobs-list-col::-webkit-scrollbar-thumb:hover, .jobs-detail-col::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.32); background-clip: padding-box; } .jobs-list-col::-webkit-scrollbar-thumb:active, .jobs-detail-col::-webkit-scrollbar-thumb:active { background: rgb(255 255 255 / 0.40); background-clip: padding-box; } [data-theme="light"] .jobs-list-col, [data-theme="light"] .jobs-detail-col { scrollbar-color: rgb(17 12 34 / 0.18) transparent; } [data-theme="light"] .jobs-list-col::-webkit-scrollbar-thumb, [data-theme="light"] .jobs-detail-col::-webkit-scrollbar-thumb { background: rgb(17 12 34 / 0.14); background-clip: padding-box; } [data-theme="light"] .jobs-list-col:hover::-webkit-scrollbar-thumb, [data-theme="light"] .jobs-detail-col:hover::-webkit-scrollbar-thumb { background: rgb(17 12 34 / 0.24); background-clip: padding-box; } [data-theme="light"] .jobs-list-col::-webkit-scrollbar-thumb:hover, [data-theme="light"] .jobs-detail-col::-webkit-scrollbar-thumb:hover { background: rgb(17 12 34 / 0.32); background-clip: padding-box; } /* List card — compact, click anywhere selects (no inline expand). */ .job-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; } .job-row .job-body { flex: 1; min-width: 0; } .job-card.selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); } .job-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Quick triage actions on each card (Save / Reject) — always visible. */ .job-quick { display: inline-flex; gap: 4px; flex: none; } .job-action.quick { width: 36px; height: 36px; padding: 0; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; } .job-action.quick:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); border-color: var(--border); } .job-action.quick.active { background: var(--accent-tint-strong); border-color: var(--accent-line); color: var(--fg); } .job-action.quick svg { width: 18px; height: 18px; } .job-action.quick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Detail panel content */ .job-detail { padding: 24px 26px; } .job-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; color: var(--muted); text-align: center; gap: 8px; } .job-detail-back { display: none; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; padding: 0 0 14px; } .job-detail-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; } .job-detail-header .job-score { width: 56px; height: 56px; font-size: 18px; flex: none; } .job-detail-title { flex: 1; min-width: 0; } .job-detail-title h2 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 6px; word-wrap: break-word; } .job-detail-meta { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; } .job-detail-meta strong { color: var(--fg); font-weight: 600; } .job-detail-meta .chip { margin-left: 6px; vertical-align: middle; } .job-detail .job-reason { margin: 16px 0; } .job-detail-desc { font-size: 14px; line-height: 1.65; color: var(--fg); margin: 16px 0 20px; white-space: pre-wrap; max-width: 72ch; } .job-detail-footer { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } /* Vue carte intégrée (desktop) : la carte occupe TOUTE la largeur du layout (au lieu d'être tassée dans la colonne liste), et le détail devient un panneau flottant qui glisse par-dessus le bord droit de la carte au clic sur une épingle — même logique de master-detail, mais « sur le côté » plutôt que collé à une colonne vide. Mobile : le slide-in plein écran existant suffit. */ @media (min-width: 1024px) { /* body.jobs-page pour battre `body.jobs-page .jobs-layout { position: static }`. */ body.jobs-page .jobs-layout.map-mode { position: relative; } .jobs-layout.map-mode .jobs-list-col { grid-column: 1 / -1; /* la carte s'étale sur les deux colonnes */ overflow: visible; padding-right: 0; } .jobs-layout.map-mode .jobs-detail-col { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(420px, 46%); z-index: 30; box-shadow: var(--elev-3); transform: translateX(calc(100% + 24px)); transition: transform 240ms cubic-bezier(.22, .61, .36, 1); } .jobs-layout.map-mode.detail-open .jobs-detail-col { transform: none; } .jobs-layout.map-mode .job-detail-back { display: inline-flex; } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .jobs-layout.map-mode .jobs-detail-col { transition: none; } } /* Mobile / tablette : le panneau devient un slide-in plein écran. On annule le sticky/hauteur viewport pour retomber en flux normal. */ @media (max-width: 1023px) { body.jobs-page { height: auto; overflow: visible; display: block; } body.jobs-page > main.container { flex: none; display: block; padding-bottom: 60px; } body.jobs-page .jobs-layout { flex: none; } .jobs-layout { grid-template-columns: 1fr; gap: 0; position: static; height: auto; } .jobs-list-col { overflow: visible; padding-right: 0; } .jobs-detail-col { position: fixed; inset: 0; z-index: 100; height: 100dvh; border-radius: 0; border: 0; background: var(--bg); transform: translateX(100%); transition: transform 220ms ease; } .jobs-layout.detail-open .jobs-detail-col { transform: translateX(0); } .job-detail-back { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .jobs-detail-col { transition: none; } } .post-save { margin-top: 24px; } /* Pied de page léger (pages connectées) — accès légal RGPD + contact. */ .app-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .app-footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .app-footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .15s ease; } .app-footer-links a:hover { color: var(--fg); } .app-footer-meta { margin: 0; color: var(--muted); font-size: 12px; opacity: .8; } /* Admin-only emphasis variant of the ghost button (jobs toolbar) */ .btn.ghost.admin-accent { border-color: var(--accent); color: var(--accent); } /* ====================================================================== */ /* Candidatures CRM (stats + pipeline board + detail panel) */ /* ====================================================================== */ .container-wide { max-width: 1320px; } /* --- Dashboard stat cards --- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 16px 18px; } .stat-val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; } .alert-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .alert-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); } .alert-chip.due { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245,158,11,0.3); } .alert-chip.stale { background: rgba(255,255,255,0.04); color: var(--muted); } /* --- Pipeline board ---------------------------------------------------- A real board: the whole pipeline fits the viewport so the PAGE never scrolls — each lane scrolls on its own. Sizing is driven by the full-height flex column on body.cand-page (further down). On desktop the six stages sit side-by-side in an equal grid; under 1080px it becomes a horizontal scroll-snap rail. */ .pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: start; /* each lane sizes to its own content */ } .pipeline-col { display: flex; flex-direction: column; min-height: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .pipeline-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 13px; border-bottom: 1px solid var(--border); background: var(--accent-tint); /* default = "saved" (violet) */ } .pipeline-col-head h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; color: var(--fg); } .pipeline-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex-shrink: 0; } .pipeline-dot[data-stage="applied"] { background: #93c5fd; } .pipeline-dot[data-stage="interview"] { background: #fbbf24; } .pipeline-dot[data-stage="offer"] { background: #86efac; } .pipeline-dot[data-stage="accepted"] { background: #34d399; } .pipeline-dot[data-stage="rejected"] { background: #f0a4a4; } /* lane header tints, keyed off the stage colour */ .pipeline-col[data-stage="applied"] .pipeline-col-head { background: rgba(147,197,253,0.10); } .pipeline-col[data-stage="interview"] .pipeline-col-head { background: rgba(251,191,36,0.10); } .pipeline-col[data-stage="offer"] .pipeline-col-head { background: rgba(134,239,172,0.10); } .pipeline-col[data-stage="accepted"] .pipeline-col-head { background: rgba(52,211,153,0.10); } .pipeline-col[data-stage="rejected"] .pipeline-col-head { background: rgba(240,164,164,0.10); } .pipeline-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fg); background: rgb(0 0 0 / 0.22); border-radius: 999px; padding: 2px 9px; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; } .pipeline-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; scrollbar-width: thin; scrollbar-color: var(--outline) transparent; } .pipeline-list::-webkit-scrollbar { width: 9px; } .pipeline-list::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } .pipeline-list::-webkit-scrollbar-track { background: transparent; } .pipeline-empty { margin: 0; padding: 18px 12px; text-align: center; border: 1px dashed var(--border); border-radius: 5px; font-size: 12px; } /* "voir toutes" : extra cards collapsed behind a button. display:contents so the revealed cards rejoin the lane's flex gap seamlessly. */ .pipeline-extra { display: contents; } .pipeline-more { width: 100%; margin-top: 2px; padding: 8px; background: transparent; border: 1px dashed var(--border); border-radius: 4px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .pipeline-more:hover { background: var(--accent-tint); color: var(--fg); border-color: var(--accent-line); } /* --- Candidature card --- */ .cand-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 12px 13px; cursor: pointer; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; animation: candRise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 26ms); } .cand-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--elev-2); } .cand-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cand-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .cand-card-top h3 { font-size: 13.5px; font-weight: 700; margin: 0; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cand-meta { font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cand-score { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 5px; font-variant-numeric: tabular-nums; background: var(--surface-3); border: 1px solid var(--border); color: var(--fg); } .cand-score[data-tier="hi"] { background: linear-gradient(140deg, oklch(0.34 0.10 158), oklch(0.40 0.10 196)); color: oklch(0.92 0.14 160); border-color: oklch(0.58 0.10 160 / 0.45); } .cand-score[data-tier="mid"] { background: linear-gradient(140deg, oklch(0.36 0.11 82), oklch(0.41 0.12 52)); color: oklch(0.92 0.14 85); border-color: oklch(0.60 0.11 75 / 0.45); } .cand-score[data-tier="lo"] { background: var(--surface-3); color: var(--muted); } .cand-flags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; } .cand-flag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .cand-flag.due { background: rgba(245,158,11,0.15); color: #fbbf24; } .cand-flag.stale { background: rgba(255,255,255,0.05); color: var(--muted); } @keyframes candRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* Full-height layout: nav + recap stay fixed, the board fills the rest and the page itself never scrolls (the lanes do). Scoped to the candidatures page via the body class so no other page is affected. */ body.cand-page { min-height: 100dvh; } /* board sizes to content; page scrolls normally */ body.cand-page .nav { flex: 0 0 auto; } body.cand-page main.container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 18px; } body.cand-page .container-wide { max-width: 1460px; } body.cand-page .jobs-head, body.cand-page #stats, body.cand-page #alerts, body.cand-page #error-flash { flex: 0 0 auto; } body.cand-page .pipeline { flex: 1 1 auto; } /* tighten the recap a touch so the board gets the room */ body.cand-page .stat-grid { margin-bottom: 12px; } body.cand-page .stat-card { padding: 13px 16px; } body.cand-page .stat-val { font-size: 24px; } @media (prefers-reduced-motion: reduce) { .cand-card { animation: none; } .cand-card:hover { transform: none; } } /* Tablet / narrow: drop the full-height trick and make the board a horizontal scroll-snap rail of lanes instead of cramming six columns. */ @media (max-width: 1080px) { body.cand-page { height: auto; overflow: visible; display: block; } body.cand-page main.container { display: block; } .pipeline { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overflow-y: hidden; height: min(72dvh, 680px); align-items: stretch; scroll-snap-type: x proximity; padding-bottom: 8px; } .pipeline-col { flex: 0 0 clamp(240px, 42vw, 300px); scroll-snap-align: start; } } @media (max-width: 560px) { .pipeline { height: min(76dvh, 600px); } .pipeline-col { flex: 0 0 84%; } } /* Mobile pipeline tabs (≤640px) : one column visible at a time, switched via a horizontal tab strip just above the board. Replaces the swipe-through-6- columns scroll rail with thumb-friendly tap navigation. */ .pipeline-tabs { display: none; } @media (max-width: 640px) { .pipeline-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 10px; margin: 8px 0 4px; } .pipeline-tabs::-webkit-scrollbar { display: none; } .pipeline-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface-1); color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .pipeline-tab.active { background: var(--accent-tint); border-color: var(--accent-line); color: var(--fg); } .pipeline-tab .pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); } .pipeline-tab[data-tab="saved"] .pt-dot { background: oklch(0.68 0.06 288); } .pipeline-tab[data-tab="applied"] .pt-dot { background: oklch(0.70 0.13 240); } .pipeline-tab[data-tab="interview"] .pt-dot { background: oklch(0.74 0.16 85); } .pipeline-tab[data-tab="offer"] .pt-dot { background: oklch(0.74 0.16 158); } .pipeline-tab[data-tab="accepted"] .pt-dot { background: oklch(0.66 0.18 142); } .pipeline-tab[data-tab="rejected"] .pt-dot { background: oklch(0.66 0.14 25); } .pipeline-tab .pt-count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-3); padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center; } .pipeline-tab.active .pt-count { background: var(--accent); color: var(--on-primary, #fff); } /* Show only the active column, full-width. Override the tablet scroll-rail. */ .pipeline { display: block !important; height: auto !important; overflow: visible !important; padding-bottom: 0; } .pipeline-col { display: none !important; } .pipeline[data-active="saved"] .pipeline-col[data-stage="saved"], .pipeline[data-active="applied"] .pipeline-col[data-stage="applied"], .pipeline[data-active="interview"] .pipeline-col[data-stage="interview"], .pipeline[data-active="offer"] .pipeline-col[data-stage="offer"], .pipeline[data-active="accepted"] .pipeline-col[data-stage="accepted"], .pipeline[data-active="rejected"] .pipeline-col[data-stage="rejected"] { display: flex !important; flex: none !important; width: 100%; } /* Hide the redundant column header on mobile (tab strip already shows it). */ .pipeline-col-head { display: none; } /* Cards get more breathing room since they take the full row. */ .pipeline-list { padding: 8px 6px 12px; gap: 8px; } .cand-card { padding: 14px 14px; } } /* ============================================================================ Mobile ergonomics (≤640px) — touch targets, anti-zoom inputs, compact toolbars, safe-area-aware spacing. Strictly additive over desktop styles. ============================================================================ */ @media (max-width: 640px) { /* Anti-zoom on iOS Safari : inputs <16px trigger an auto-zoom on focus. */ input, select, textarea { font-size: 16px !important; } /* Bigger comfy controls : 44px min height meets Apple HIG / Material. */ .jobs-actions input[type="search"], .jobs-actions select, .filters-panel select, .filters-panel input, .multi-select .ms-btn, .map-filters input, .map-filters select { height: 44px; } /* /jobs toolbar : every control on its own line (or 2-up) instead of wrapping mid-row with awkward gaps. Primary CTAs become full-width. */ .jobs-head { flex-direction: column; align-items: stretch; margin-bottom: 14px; gap: 10px; } .jobs-actions { width: 100%; gap: 8px; } .jobs-actions input[type="search"] { flex: 1 1 100%; } .jobs-actions select { flex: 1 1 auto; min-width: 0; } .jobs-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; } .jobs-actions .filters-toggle { flex: 1 1 100%; } /* Pipeline + map share the same compact head. */ .map-head { flex-wrap: wrap; gap: 8px; } .map-filters { gap: 8px; } .map-filters .search-wrap { flex: 1 1 100%; min-width: 0; } .map-proximity { width: 100%; margin-left: 0; } .map-proximity #city { width: 100%; } /* Map shell trims height to leave room for the tabbar + filters above. */ .map-shell { height: calc(100dvh - 320px); min-height: 360px; } /* Touch-friendly quick actions on /jobs cards (was 36x36 → 44x44). */ .job-action.quick { width: 44px; height: 44px; } .job-action.quick svg { width: 20px; height: 20px; } /* List card overall padding bumped a touch for thumb tap. */ .job-row { padding: 14px 14px; gap: 12px; } .job-card { -webkit-tap-highlight-color: transparent; } /* Detail panel close / back buttons. */ .detail-close { width: 44px; height: 44px; font-size: 22px; } .job-detail-back { padding: 10px 4px; min-height: 44px; } /* Multi-select menu stays comfortably tappable inside a popover. */ .multi-select .ms-opt { padding: 10px 12px; min-height: 40px; } .multi-select .ms-menu { max-height: 60vh; } /* Page titles slightly tighter to give scrollable content more vertical room. */ .page-title { font-size: 24px; } .container { padding: 18px 16px 60px; } /* The notifications dropdown / theme toggle should be just as easy to tap. */ .theme-toggle { width: 40px; height: 40px; } /* Full-viewport modals must sit above the bottom tabbar (z-index 90). */ .detail-overlay { z-index: 100; } /* And their inner panel reserves space for the home-indicator safe area. */ .detail-overlay .detail-panel { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } /* --- Detail panel (slide-over) --- */ .detail-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.55); display: flex; justify-content: flex-end; } .detail-panel { width: min(480px, 100%); height: 100%; overflow-y: auto; background: var(--surface-1); border-left: 1px solid var(--outline); padding: 28px 26px; position: relative; box-shadow: var(--elev-3); } .detail-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; } .detail-close:hover { color: var(--fg); } .detail-head h2 { font-size: 19px; font-weight: 700; margin: 10px 0 4px; letter-spacing: -0.01em; } .detail-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 8px; } .status-picker { display: flex; flex-wrap: wrap; gap: 6px; } .status-pick { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.12s ease; } .status-pick:hover { color: var(--fg); border-color: var(--outline); } .status-pick.active { background: rgba(124,92,255,0.16); color: var(--accent); border-color: rgba(124,92,255,0.4); } .status-pick.active[data-stage="interview"] { background: rgba(245,158,11,0.16); color: #fbbf24; border-color: rgba(245,158,11,0.4); } .status-pick.active[data-stage="offer"], .status-pick.active[data-stage="accepted"] { background: rgba(34,197,94,0.16); color: #86efac; border-color: rgba(34,197,94,0.4); } .status-pick.active[data-stage="rejected"] { background: rgba(240,164,164,0.14); color: #f0a4a4; border-color: rgba(240,164,164,0.4); } .detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .detail-panel input[type="date"], .detail-panel input[type="text"], .detail-panel textarea { width: 100%; padding: 9px 12px; border-radius: 4px; border: 1px solid var(--border); background: rgba(0,0,0,0.35); color: var(--fg); font: inherit; font-size: 14px; } .detail-panel input:focus, .detail-panel textarea:focus { outline: none; border-color: var(--accent); } .detail-panel textarea { resize: vertical; } .detail-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .saved-note { font-size: 13px; color: #86efac; font-weight: 600; } .timeline { list-style: none; padding: 0; margin: 8px 0 0; } .timeline li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); line-height: 1.4; } .timeline li:last-child { border-bottom: none; } .timeline li.muted { color: var(--muted); } .tl-date { color: var(--muted); font-size: 12px; flex: none; } .tl-text { flex: 1; min-width: 0; } .tl-del { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; } .timeline li:hover .tl-del, .tl-del:focus-visible { opacity: 1; } .tl-del:hover { background: rgba(240, 164, 164, 0.14); color: oklch(0.74 0.16 25); } .tl-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .timeline li.removing { opacity: 0.4; pointer-events: none; } /* Touch devices (no hover) : le bouton reste visible. */ @media (hover: none) { .timeline .tl-del { opacity: 0.8; } } /* Collapsible offer summary on /candidatures detail panel. Native

for accessibility and zero JS. Closed by default — the user came here to manage the candidature ; the offer description is reference material, available on demand. */ .offer-summary { margin-top: 24px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-1); } .offer-summary > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; user-select: none; border-radius: 5px; -webkit-tap-highlight-color: transparent; } .offer-summary > summary::-webkit-details-marker { display: none; } .offer-summary > summary::marker { content: ""; } .offer-summary > summary:hover { background: var(--surface-2); } .offer-summary > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .offer-summary .os-label { letter-spacing: 0.01em; } .offer-summary .os-chev { transition: transform .15s ease; opacity: 0.7; flex: none; } .offer-summary[open] > summary .os-chev { transform: rotate(180deg); } .offer-summary[open] > summary { border-bottom: 1px solid var(--border); } .offer-summary-body { padding: 12px 14px 16px; } .offer-summary-body .job-reason { margin: 0 0 12px; } .offer-summary-body .job-reason:last-child { margin-bottom: 0; } .offer-summary-body .job-detail-desc { margin: 0; } @media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .detail-panel { width: 100%; padding: 24px 18px; } } /* Active nav item */ .btn-link[aria-current] { color: var(--accent); background: var(--accent-tint); } /* ====================================================================== */ /* Editorial home page (less AI-generic) */ /* ====================================================================== */ /* Subtle SVG noise grain for editorial feel */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E"); } body.home-page { overflow-x: hidden; } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Editorial nav */ .nav-editorial { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; padding: 28px 36px; gap: 12px; } @media (max-width: 640px) { /* Landing nav : compact one-row layout, hide secondary links (Tarifs reste accessible via le footer). Le pill version est déjà gated admin-only. */ .nav-editorial { padding: 14px 16px; gap: 8px; flex-wrap: nowrap; min-width: 0; } .nav-editorial .logo { font-size: 16px; gap: 8px; min-width: 0; flex: 0 1 auto; } .nav-editorial .logo span:not(.logo-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-editorial .nav-right { gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; } .nav-editorial .nav-tarifs { display: none; } .nav-editorial .btn-text { font-size: 13px; padding: 8px 6px; white-space: nowrap; } .nav-editorial .btn-sm { min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; } } .nav-pill { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; } .btn-text { font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; padding: 8px 4px; transition: opacity 0.15s ease; } .btn-text:hover { opacity: 0.7; } .btn-sm { min-height: 38px; padding: 0 18px; font-size: 13px; } /* Landing: nav sticks and firms up once you leave the hero. Opaque + hairline + soft elevation (no glassmorphism, per DESIGN.md). State toggled in JS. */ .home-page .nav-editorial { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .home-page .nav-editorial.scrolled { background-color: var(--bg); border-bottom-color: var(--border); box-shadow: var(--elev-1); } @media (prefers-reduced-motion: reduce) { .home-page .nav-editorial { transition: none; } } /* Smooth in-page jumps (e.g. "Voir comment" -> #process), motion-safe. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .numbered-section { scroll-margin-top: 88px; } /* ====================================================================== */ /* Brand surfaces: ambient violet aurora, hero product preview, entrances */ /* Expressive on purpose (landing + auth). All motion is reduced-safe. */ /* ====================================================================== */ /* Ambient aurora — soft drifting violet light, fixed behind the content. */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora i { position: absolute; display: block; width: 62vmax; height: 62vmax; border-radius: 50%; will-change: transform; } .aurora i:nth-child(1) { top: -24%; left: -12%; background: radial-gradient(circle at center, rgb(var(--accent-rgb) / 0.20), transparent 62%); } .aurora i:nth-child(2) { right: -16%; bottom: -28%; background: radial-gradient(circle at center, oklch(0.72 0.15 322 / 0.16), transparent 62%); } .aurora i:nth-child(3) { top: 32%; left: 38%; width: 42vmax; height: 42vmax; background: radial-gradient(circle at center, rgb(var(--accent-rgb) / 0.10), transparent 60%); } @media (prefers-reduced-motion: no-preference) { .aurora i:nth-child(1) { animation: aurora-1 24s ease-in-out infinite alternate; } .aurora i:nth-child(2) { animation: aurora-2 30s ease-in-out infinite alternate; } .aurora i:nth-child(3) { animation: aurora-3 20s ease-in-out infinite alternate; } } @keyframes aurora-1 { to { transform: translate(10%, 8%) scale(1.12); } } @keyframes aurora-2 { to { transform: translate(-8%, -10%) scale(1.08); } } @keyframes aurora-3 { to { transform: translate(-12%, 6%) scale(0.92); } } /* Hero: copy on the left, product preview on the right */ .hero-edit-copy { display: flex; flex-direction: column; } .hero-edit-copy .hero-edit-title { font-size: clamp(44px, 6.4vw, 86px); line-height: 0.96; } .hero-edit-copy .hero-edit-lead { margin: 28px 0 0; max-width: 34ch; } .hero-edit-copy .hero-edit-cta { margin-top: 28px; } .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; } .preview-card { position: relative; width: 100%; max-width: 380px; display: flex; gap: 16px; padding: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 28px 60px -28px rgb(0 0 0 / 0.7), 0 24px 60px -34px rgb(var(--accent-rgb) / 0.55); transform: rotate(-1.6deg); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .preview-score { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; width: 54px; height: 54px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--score-base); color: var(--score-fg); border: 1px solid var(--score-line); } .preview-body { flex: 1; min-width: 0; } .preview-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .preview-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } /* Le `.chip` global est lowercase (badges de source sur /jobs). Sur le widget du hero on garde la casse réelle ("France Travail" comme proper noun) : ça tient sur une ligne, et c'est plus pro qu'un tout-minuscule ou tout-caps. */ .preview-card .chip { text-transform: none; letter-spacing: normal; } .preview-meta { font-size: 12.5px; color: var(--muted); margin: 3px 0 10px; } .preview-meta strong { color: var(--fg); } .preview-reason { position: relative; font-size: 12.5px; line-height: 1.5; color: var(--fg); background: var(--accent-tint); border: 1px solid rgb(var(--accent-rgb) / 0.18); border-radius: 4px; padding: 8px 10px 8px 28px; margin: 0 0 12px; } .preview-reason::before { content: "\2726"; position: absolute; left: 10px; top: 8px; font-size: 11px; color: var(--accent); } .preview-actions { display: flex; gap: 6px; flex-wrap: wrap; } .preview-pill { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); } .preview-pill.is-accent { background: var(--accent-tint); color: var(--accent-2); border-color: var(--accent-line); } .preview-tag { position: absolute; top: -16px; right: 2px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 8px 13px; background: var(--surface-3); border: 1px solid var(--accent-line); border-radius: 999px; box-shadow: 0 14px 34px -18px rgb(0 0 0 / 0.8); } .preview-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } @media (prefers-reduced-motion: no-preference) { .preview-card { animation: float-card 7s ease-in-out infinite; } .preview-card:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-6px); } .preview-tag { animation: float-tag 5.5s ease-in-out infinite; } @keyframes float-card { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(-1.6deg) translateY(-12px); } } @keyframes float-tag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } } /* Hero entrance on load (staggered) */ @media (prefers-reduced-motion: no-preference) { .home-page .hero-edit-meta, .home-page .hero-edit-title, .home-page .hero-edit-copy .hero-edit-lead, .home-page .hero-edit-copy .hero-edit-cta, .home-page .hero-edit-copy .hero-edit-foot, .home-page .hero-visual { opacity: 0; animation: hero-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .home-page .hero-edit-title { animation-delay: 0.06s; } .home-page .hero-edit-copy .hero-edit-lead { animation-delay: 0.16s; } .home-page .hero-edit-copy .hero-edit-cta { animation-delay: 0.24s; } .home-page .hero-edit-copy .hero-edit-foot { animation-delay: 0.32s; } .home-page .hero-visual { animation-delay: 0.22s; } @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } } /* Gentle interactive lift on landing cards */ .step, .diff-card, .stat { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; } .diff-card:hover, .stat:hover { transform: translateY(-4px); border-color: var(--accent-line); } .step:hover { transform: translateY(-3px); } /* Auth: drifting glow on the pitch panel + entrances */ .auth-side::after { content: ""; position: absolute; z-index: 0; top: 28%; left: -12%; width: 52vmax; height: 52vmax; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.14), transparent 60%); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .auth-side::after { animation: aurora-1 26s ease-in-out infinite alternate; } .auth-card { animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .auth-side .logo { animation: hero-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .auth-pitch { animation: hero-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } } .auth-trust { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: var(--muted); } .auth-trust .chip { background: var(--accent-tint); color: var(--on-accent-container); } /* Hero — asymmetric layout */ .hero-edit { max-width: 1280px; margin: 0 auto; padding: 60px 36px 100px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } @media (max-width: 880px) { .hero-edit { grid-template-columns: 1fr; gap: 32px; padding: 30px 24px 60px; } } .hero-edit-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; } .meta-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-edit-title { font-size: clamp(52px, 8.5vw, 110px); line-height: 0.94; letter-spacing: -0.045em; font-weight: 800; margin: 0; } .hero-edit-title .italic { font-weight: 400; letter-spacing: -0.02em; } .hero-edit-side { padding-bottom: 12px; } .hero-edit-lead { font-size: 17px; line-height: 1.55; margin: 0 0 24px; color: var(--fg); } .hero-edit-cta { display: flex; gap: 10px; flex-wrap: wrap; } .hero-edit-foot { font-size: 12px; margin: 18px 0 0; } /* Marquee */ .marquee-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; margin-top: 0; } .marquee-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 14px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* Seamless loop: the track holds TWO identical sequences and animates by exactly -50% (= one sequence). Each sequence repeats the source list enough to be wider than any viewport, so no blank gap ever appears on wide screens (the old single-copy at -50% was the cause of the gap). */ .marquee-track { display: flex; width: max-content; animation: marquee-scroll 48s linear infinite; } .marquee-seq { display: flex; align-items: center; flex-shrink: 0; } .marquee-item { font-weight: 500; font-size: 16px; letter-spacing: 0.01em; color: var(--fg); opacity: 0.78; padding: 0 22px; white-space: nowrap; } .marquee-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.55; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Numbered sections */ .numbered-section { max-width: 1280px; margin: 0 auto; padding: 120px 36px; } .section-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; } .section-h { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 56px; } .section-h .italic { font-weight: 400; letter-spacing: -0.015em; } .section-h .muted { color: var(--muted); } .section-h .underline-wavy { text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } } .step { border-top: 1px solid var(--border); padding-top: 24px; } .step-num-big { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; color: var(--accent); padding: 6px 10px; border: 1px solid var(--outline); border-radius: 4px; margin-bottom: 18px; } .step h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; } .step p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; } /* Smaller step number for dashboard cards */ .step-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); margin-right: 10px; padding: 2px 6px; border: 1px solid var(--outline); border-radius: 4px; vertical-align: middle; } /* Diff section */ .diff-section { max-width: 1280px; margin: 0 auto; padding: 0 36px 120px; } .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 880px) { .diff-grid { grid-template-columns: 1fr; } } .diff-card { padding: 24px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); } .diff-card.diff-us { background: var(--accent-container); border-color: var(--accent); } .diff-card.diff-us .diff-text { color: var(--on-accent-container); } .diff-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .diff-card.diff-us .diff-label { color: var(--accent-2); } .diff-text { font-size: 14px; line-height: 1.55; margin: 0; } /* Stats */ .stats-section { max-width: 1280px; margin: 0 auto; padding: 0 36px 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 880px) { .stats-section { grid-template-columns: repeat(2, 1fr); } } .stat { padding: 28px 24px; border: 1px solid var(--border); border-radius: 5px; } .stat-num { display: block; font-size: clamp(36px, 4.5vw, 52px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; font-feature-settings: "tnum"; color: var(--accent); } .stat-label { font-size: 13px; color: var(--muted); line-height: 1.4; } /* Final CTA */ .final-cta { max-width: 1280px; margin: 0 auto; padding: 60px 36px 120px; text-align: center; } /* Footer */ .footer-edit { border-top: 1px solid var(--border); padding: 36px 0; } .footer-edit-inner { max-width: 1280px; margin: 0 auto; padding: 0 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-links { display: flex; gap: 24px; font-size: 13px; } .footer-links a { color: var(--muted); text-decoration: none; } .footer-links a:hover { color: var(--fg); } .footer-meta { font-size: 12px; color: var(--muted); margin: 0; } /* ====================================================================== */ /* Dashboard refonte (cards + step-num) */ /* ====================================================================== */ .dash-hero { max-width: 980px; margin: 0 auto 40px; padding-top: 28px; } .dash-hero h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 14px 0 16px; } .dash-hero .lead { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 580px; } .dash-grid { max-width: 1100px; margin: 24px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dash-card-wide { grid-column: 1 / -1; } @media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } } .dash-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 28px; } .dash-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .dash-card-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } /* ====================================================================== */ /* Legal pages */ /* ====================================================================== */ .legal-doc { padding-top: 24px; padding-bottom: 60px; } .legal-doc h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 36px 0 12px; scroll-margin-top: 80px; } .legal-doc p, .legal-doc li { font-size: 14.5px; line-height: 1.6; } .legal-doc ul { padding-left: 22px; } .legal-doc code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 4px; } .legal-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0 24px; } .legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .legal-table th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* ====================================================================== */ /* Scrape debug viewer (admin) */ /* ====================================================================== */ .debug-log { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.55; background: #0a0a14; border: 1px solid var(--border); border-radius: 5px; padding: 14px 16px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .debug-line { display: flex; gap: 10px; padding: 1px 0; } .debug-time { color: var(--muted); flex-shrink: 0; min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; } .debug-source { color: var(--accent-2); flex-shrink: 0; min-width: 100px; } .debug-level-info { color: #cbd5e1; } .debug-level-ok { color: #86efac; } .debug-level-warning { color: #fbbf24; } .debug-level-error { color: #fca5a5; } .debug-msg { flex: 1; word-break: break-word; } /* Scrape sources status grid */ .scrape-sources { background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .src-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1.3fr; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; } .src-row:last-child { border-bottom: none; } .src-name { display: flex; align-items: center; gap: 8px; } .src-meta { display: flex; flex-direction: column; gap: 4px; } .src-meta code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); } .src-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; } .src-quota { color: var(--accent); font-size: 11px; font-weight: 500; } .src-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .src-dot.ok { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); } .src-dot.off { background: #ef4444; } @media (max-width: 700px) { .src-row { grid-template-columns: 1fr; } } /* Dedup analyzer */ .dedup-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; } .dedup-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .dedup-kpi .kpi-label { font-size: 10px; } .dedup-kpi .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .dedup-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; } @media (max-width: 800px) { .dedup-grid { grid-template-columns: 1fr; } } .dedup-h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 8px 0 10px; } .dedup-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .dedup-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); } .dedup-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); } .dedup-table tr:last-child td { border-bottom: none; } .dedup-sample-list { display: flex; flex-direction: column; gap: 8px; } .dedup-sample { background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; padding: 10px 14px; font-size: 13px; } .dedup-sample-title { font-weight: 600; margin-bottom: 4px; } .dedup-sample-meta { font-size: 12px; } .dedup-pair { display: flex; flex-direction: column; gap: 6px; } .dedup-pair > div { font-size: 13px; } /* ====================================================================== */ /* Cover letter composer (/lettre) — "paper on a dark desk" */ /* The app shell stays dark; the letter is a warm document you'll send. */ /* ====================================================================== */ .letter-shell { /* Pure white paper sheet + cool ink. (White forced by design — reads as a real document and matches the downloadable PDF.) */ --paper: #ffffff; --paper-edge: oklch(0.9 0 0); --paper-ph: oklch(0.62 0.02 280); --ink: oklch(0.27 0.018 280); --ink-soft: oklch(0.46 0.02 280); max-width: 1200px; margin: 0 auto; padding: 20px 32px 80px; } .letter-back { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 20px; transition: color 0.15s ease; } .letter-back:hover { color: var(--fg); } .letter-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; } @media (max-width: 920px) { .letter-layout { grid-template-columns: 1fr; } } /* ---- Inspector rail ---- */ .letter-controls { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 22px; } @media (max-width: 920px) { .letter-controls { position: static; } } .letter-job { padding-bottom: 20px; border-bottom: 1px solid var(--border); } .letter-job-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .letter-job-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 4px; } .letter-job-company { font-size: 14px; color: var(--muted); margin: 0 0 12px; } .letter-job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .letter-job-link { font-size: 13px; color: var(--accent); } .letter-job-link:hover { text-decoration: underline; } .letter-field { display: flex; flex-direction: column; gap: 8px; } .letter-field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .letter-field-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; } .letter-field-hint { font-size: 11px; color: var(--muted); min-height: 14px; } .letter-field textarea { width: 100%; padding: 11px 13px; border-radius: 4px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--fg); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; } .letter-field textarea:focus { outline: none; border-color: var(--accent); } /* Segmented control */ .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); } .seg-opt { appearance: none; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 6px; border-radius: 5px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .seg-opt:hover { color: var(--fg); } .seg-opt.is-active { background: var(--accent-container); color: var(--on-accent-container); } .seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .letter-generate { width: 100%; min-height: 46px; } .letter-meta { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; } .letter-err { margin: 0; } /* ---- Document side ---- */ .letter-doc-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .letter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .letter-status { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .letter-toolbar-actions { display: flex; gap: 8px; } /* The paper itself */ .letter-paper { background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 24px 60px -28px rgba(0, 0, 0, 0.7); min-height: 60vh; position: relative; } .letter-paper-inner { max-width: 68ch; margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 64px); } .letter-subject { width: 100%; border: none; background: transparent; color: var(--ink); font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 600; padding: 0 0 16px; margin-bottom: 22px; border-bottom: 1px solid var(--paper-edge); } .letter-subject:focus { outline: none; } .letter-subject::placeholder { color: var(--paper-ph); } .letter-body { display: block; width: 100%; border: none; background: transparent; color: var(--ink); font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 16.5px; line-height: 1.75; resize: none; overflow: hidden; min-height: 42vh; padding: 0; } .letter-body:focus { outline: none; } /* Empty + loading states hide the editable fields */ .letter-paper.is-empty .letter-subject, .letter-paper.is-empty .letter-body, .letter-paper.is-loading .letter-subject, .letter-paper.is-loading .letter-body { display: none; } .letter-placeholder { display: none; text-align: center; padding: 72px 20px; color: var(--ink-soft); } .letter-paper.is-empty .letter-placeholder { display: block; } .letter-placeholder-title { font-family: "Newsreader", Georgia, serif; font-size: 22px; color: var(--ink); margin: 0 0 10px; } .letter-placeholder-sub { font-size: 14px; line-height: 1.6; max-width: 40ch; margin: 0 auto; } /* Shimmer skeleton while the model writes */ .letter-skeleton { display: none; flex-direction: column; gap: 16px; padding: 8px 0; } .letter-paper.is-loading .letter-skeleton { display: flex; } .letter-skeleton span { height: 13px; border-radius: 4px; background: linear-gradient(90deg, var(--paper-edge) 25%, oklch(0.89 0.02 95) 37%, var(--paper-edge) 63%); background-size: 300% 100%; animation: letter-shimmer 1.4s ease infinite; } .letter-skeleton span:nth-child(1) { width: 56%; } .letter-skeleton span:nth-child(4) { width: 92%; } .letter-skeleton span:nth-child(7) { width: 38%; } @keyframes letter-shimmer { to { background-position: -200% 0; } } /* Gentle rise when the finished letter appears */ .letter-paper:not(.is-empty):not(.is-loading) .letter-subject, .letter-paper:not(.is-empty):not(.is-loading) .letter-body { animation: letter-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes letter-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .letter-skeleton span, .letter-paper .letter-subject, .letter-paper .letter-body { animation: none; } } /* Disabled job-action (toolbar copy/download before a letter exists) */ .job-action:disabled { opacity: 0.45; cursor: not-allowed; } /* "Lettre" entry point on job cards — tinted so it's discoverable */ .job-action.letter-action { color: var(--accent-2); border-color: var(--accent-line); } .job-action.letter-action:hover { background: var(--accent-tint); color: var(--accent-2); border-color: var(--accent-line); } @media (max-width: 920px) { .letter-shell { padding-left: 20px; padding-right: 20px; } } /* API usage bars */ .usage-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-top: 6px; } .usage-bar-fill { height: 100%; background: var(--accent); transition: width 0.5s ease; } .usage-bar-label { font-size: 11px; margin-top: 4px; } /* ====================================================================== */ /* Hero preview card — pointer-driven 3D tilt + cursor sheen (brand) */ /* Reinforces the core value prop: the AI score is the thing you watch. */ /* Desktop pointers only, fully reduced-motion gated (JS adds .is-tilting)*/ /* ====================================================================== */ .hero-visual { perspective: 1100px; } /* While tilting, JS owns the transform (overrides the idle float keyframe). --ry/--rx are set per-pointer-move; they ease back to 0 on leave. */ .preview-card { --ry: 0deg; --rx: 0deg; transform-style: preserve-3d; } .preview-card.is-tilting { animation: none; transform: rotateY(var(--ry)) rotateX(var(--rx)) rotate(-1.6deg); transition: transform 0.18s ease-out; } /* Specular sheen that tracks the cursor (--mx/--my in %). A moving highlight, not a static glass blur — distinct from the banned glassmorphism default. */ .preview-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient( 220px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.14), transparent 60% ); } .preview-card.is-tilting .preview-glare { opacity: 1; } /* The score badge floats forward on tilt for real depth (layered parallax). */ .preview-card.is-tilting .preview-score { transform: translateZ(38px); transition: transform 0.18s ease-out; } @media (prefers-reduced-motion: reduce) { .preview-card.is-tilting { transform: rotate(-1.6deg); } .preview-card.is-tilting .preview-score { transform: none; } .preview-glare { display: none; } } /* ====================================================================== */ /* Pricing page (/tarifs) — brand register, on-charte (violet / dark) */ /* ====================================================================== */ .btn-text[aria-current] { color: var(--accent); } .pricing-hero { max-width: 760px; margin: 0 auto; padding: 56px 24px 8px; text-align: center; } .pricing-h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 14px 0 20px; } .pricing-lead { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 0 auto 28px; } .billing-toggle { display: inline-flex; align-items: center; gap: 14px; } .billing-toggle .seg { display: inline-grid; } .billing-save { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-line); padding: 5px 11px; border-radius: 999px; } /* Plans: middle (featured) is larger and lifted — deliberate asymmetry, not a row of identical cards. */ .pricing-grid { max-width: 1120px; margin: 40px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 1.09fr 1fr; gap: 18px; align-items: stretch; /* equal-height, top-aligned cards (no floaty middle) */ } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } } .plan { position: relative; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 30px 26px; } .plan-featured { background: var(--accent-container); border-color: var(--accent-line); padding: 38px 28px; box-shadow: 0 26px 60px -30px rgb(var(--accent-rgb) / 0.55), var(--elev-2); } .plan-featured .plan-tagline { color: var(--on-accent-container); opacity: 0.85; } .plan-badge { position: absolute; top: -11px; left: 28px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-primary); background: var(--accent); padding: 4px 11px; border-radius: 999px; } .plan-head { margin-bottom: 18px; } .plan-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; } .plan-tagline { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.45; } .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 20px; } .plan-amount { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(38px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .plan-cur { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; font-weight: 600; } .plan-per { width: 100%; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .plan-featured .plan-per { color: var(--on-accent-container); opacity: 0.8; } .plan-cta { width: 100%; margin-bottom: 24px; } .plan-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .plan-feats li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.45; color: var(--fg); } .plan-feats li::before { content: "\2713"; /* check */ position: absolute; left: 0; top: 0; font-weight: 700; color: var(--accent); } .plan-featured .plan-feats li::before { color: var(--on-accent-container); } .plan-feats strong { font-weight: 600; } .soon { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 2px; vertical-align: middle; } /* Comparison table — precise, not a third grid of cards */ .cmp-section { max-width: 920px; margin: 96px auto 0; padding: 0 24px; } .cmp-title { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 28px; } .cmp-wrap { border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; /* scroll, don't clip, on narrow screens */ -webkit-overflow-scrolling: touch; background: var(--surface-1); } .cmp { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14px; } .cmp th[scope="col"] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--border); } .cmp th[scope="col"]:first-child { text-align: left; } .cmp th[scope="row"] { font-weight: 500; text-align: left; padding: 13px 18px; color: var(--fg); } .cmp td { text-align: center; padding: 13px 18px; color: var(--muted); font-variant-numeric: tabular-nums; } .cmp tbody tr { border-bottom: 1px solid var(--border); } .cmp tbody tr:last-child { border-bottom: none; } .cmp .cmp-pro { background: var(--accent-tint); color: var(--fg); } .cmp .yes { color: var(--accent); font-weight: 700; } .cmp .no { color: var(--muted); opacity: 0.5; } /* FAQ accordion */ .faq-section { max-width: 760px; margin: 96px auto 0; padding: 0 24px; } .faq-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .faq-item { border: 1px solid var(--border); border-radius: 5px; background: var(--surface-1); padding: 4px 18px; } .faq-item summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; padding: 14px 28px 14px 0; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-size: 20px; font-weight: 400; color: var(--muted); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); } .faq-item p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.6; } @media (max-width: 560px) { .cmp th[scope="col"], .cmp th[scope="row"], .cmp td { padding: 11px 10px; font-size: 12.5px; } } /* ====================================================================== */ /* Site-wide art-direction carry + phone ergonomics */ /* Keep the home "widget" DA (ambient aura, premium lift) across the app */ /* and make every surface comfortable on a phone. */ /* ====================================================================== */ /* App top nav: let links wrap instead of overflowing on narrow screens. Applies to every app page (dashboard, offres, candidatures, profil...). */ @media (max-width: 760px) { .nav { flex-wrap: wrap; gap: 10px 14px; padding: 16px 18px; } .nav-right { flex-wrap: wrap; gap: 8px 12px; } .admin-nav { padding: 14px 18px; } } /* Dashboard cards inherit the hero-widget feel: a soft accent-tinted lift. */ .dash-card { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease; } .dash-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 22px 50px -30px rgb(var(--accent-rgb) / 0.5); } @media (prefers-reduced-motion: reduce) { .dash-card { transition: none; } .dash-card:hover { transform: none; } } /* Phone refinements (<=560px): these surfaces only broke at 880px, so on a real phone the 28-32px paddings and large type were heavy. */ @media (max-width: 560px) { .auth-main { padding: 22px 14px 36px; } .auth-card { padding: 22px 18px; border-radius: 5px; } .auth-head h1 { font-size: 23px; } .auth-side { padding: 18px 18px 24px; } .auth-pitch h2 { font-size: 21px; margin-bottom: 16px; } .pitch-bullets { gap: 10px; margin-bottom: 16px; } .container { padding-left: 16px; padding-right: 16px; } .dash-hero { padding-top: 16px; } .dash-card { padding: 20px 18px; border-radius: 5px; } .dash-grid { gap: 12px; } .admin-cta { margin-top: 28px; padding: 18px 16px; } .page-title { font-size: 24px; } .page-sub { font-size: 13px; } } /* ====================================================================== */ /* Profile avatar editor (/profile) */ /* ====================================================================== */ .avatar-edit { display: flex; align-items: center; gap: 20px; padding: 20px; margin-bottom: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; } .avatar-edit-pic { position: relative; flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--outline); } .avatar-edit-pic img, .avatar-initials { width: 100%; height: 100%; border-radius: 50%; } .avatar-edit-pic img { object-fit: cover; display: block; } .avatar-initials { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--on-accent-container); background: var(--accent-container); } .avatar-cam { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--card); background: var(--accent); color: var(--on-primary); cursor: pointer; transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1); } .avatar-cam:hover { transform: scale(1.08); } .avatar-cam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .avatar-edit-text { min-width: 0; } .avatar-edit-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-edit-actions { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .avatar-remove { color: var(--muted); } .avatar-remove:hover { color: #fca5a5; } .avatar-hint { font-size: 12px; margin: 0; } .avatar-status { font-size: 12px; margin: 6px 0 0; } .avatar-status.is-err { color: #fca5a5; } .avatar-status.is-ok { color: #86efac; } @media (max-width: 480px) { .avatar-edit { flex-direction: column; text-align: center; } .avatar-edit-actions { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .avatar-cam { transition: none; } .avatar-cam:hover { transform: none; } } /* ---- Interactive avatar crop modal ---- */ .crop-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0.6); padding: 20px; } .crop-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--elev-3); width: min(360px, 100%); } .crop-title { margin: 0 0 14px; font-size: 18px; } .crop-stage { position: relative; width: 300px; height: 300px; max-width: 100%; margin: 0 auto; border-radius: 5px; overflow: hidden; background: #000; touch-action: none; } .crop-stage canvas { display: block; cursor: grab; touch-action: none; } .crop-stage canvas:active { cursor: grabbing; } /* Circular guide: dims the square corners that get cropped out when shown round */ .crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(255 255 255 / 0.5); pointer-events: none; } .crop-zoom-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; } .crop-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; } .crop-zoom-min, .crop-zoom-max { color: var(--muted); font-size: 18px; line-height: 1; width: 14px; text-align: center; } .crop-hint { font-size: 12px; margin: 0 0 16px; text-align: center; } .crop-actions { display: flex; justify-content: flex-end; gap: 10px; } /* ====================================================================== */ /* Dashboard — hub d'accueil */ /* ====================================================================== */ .dash-welcome { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 22px; } .dash-hello { margin: 0; font-size: 30px; letter-spacing: -0.02em; } .dash-sub { margin: 5px 0 0; } .dash-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; } .dash-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 22px 0; } .dash-card-title { margin: 0 0 16px; font-size: 14px; font-weight: 700; } .dash-card-donut { display: flex; flex-direction: column; } /* pipeline bars */ .pipe-bars { display: flex; flex-direction: column; gap: 10px; } .pipe-row { display: grid; grid-template-columns: 104px 1fr 30px; align-items: center; gap: 10px; } .pipe-name { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pipe-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .pipe-fill { display: block; height: 100%; border-radius: 999px; transition: width 500ms ease; } .pipe-num { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } /* donut (taux de réponse) */ .donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; } .donut-track { stroke: var(--surface-3); } .donut-val { transition: stroke-dasharray 600ms ease; } .donut-pct { font-size: 24px; font-weight: 800; fill: var(--fg); } .donut-hint { font-size: 12px; text-align: center; margin: 0; } .dash-section-title { margin: 28px 0 14px; font-size: 16px; } /* hub grid */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .hub-tile { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; text-decoration: none; color: var(--fg); transition: border-color 150ms ease, transform 150ms ease, background 150ms ease; } .hub-tile:hover { border-color: var(--accent-line); transform: translateY(-2px); background: var(--surface-2); } .hub-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hub-tile.is-soon { opacity: 0.6; cursor: default; } .hub-tile.is-soon:hover { transform: none; border-color: var(--border); background: var(--surface-1); } .hub-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; color: var(--c, var(--accent)); background: color-mix(in oklch, var(--c, var(--accent)) 16%, transparent); } .hub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hub-body strong { font-size: 14px; display: flex; align-items: center; gap: 8px; } .hub-body .muted { font-size: 12.5px; } .hub-arrow { margin-left: auto; color: var(--muted); font-size: 18px; flex: none; } .hub-tile:hover .hub-arrow { color: var(--accent); } .hub-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--fg); border: 1px solid var(--accent-line); } .hub-badge.is-warn { background: rgba(245,158,11,0.14); color: #fbbf24; border-color: rgba(245,158,11,0.3); } @media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr; } } /* ====================================================================== */ /* Candidatures kanban — drag & drop between status columns */ /* ====================================================================== */ .cand-card[draggable="true"] { cursor: grab; } .cand-card.dragging { opacity: 0.45; cursor: grabbing; } .pipeline-col.drop-target { border-radius: var(--radius); background: var(--accent-tint); outline: 2px dashed var(--accent-line); outline-offset: -4px; } /* ====================================================================== */ /* Footer credits — team + "la démarche" */ /* ====================================================================== */ .footer-credits { max-width: 1280px; margin: 0 auto 28px; padding: 0 36px 26px; border-bottom: 1px solid var(--border); } .footer-credits-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .footer-credits-pitch { max-width: 70ch; font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; } .footer-credits-pitch strong { color: var(--fg); font-weight: 600; } .footer-credits-team { font-size: 13px; color: var(--muted); margin: 16px 0 0; } .footer-credits-team span { color: var(--fg); font-weight: 600; } @media (max-width: 640px) { .footer-credits { padding-left: 20px; padding-right: 20px; } } /* ============================================================================ POLISH LAYER (append-only). Gap-filling refinements that lift every page: focus-visible rings on controls that lacked them, clearer disabled states, placeholders, a shared skeleton primitive, motion-safe guards, refined scrollbars, and theme-aware fixes. Appended last so equal-specificity rules win without editing existing lines. No side-stripe borders, no gradient text. ============================================================================ */ /* --- Text selection + smooth scroll (motion-safe) --- */ ::selection { background: rgb(var(--accent-rgb) / 0.30); color: var(--fg); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* --- Focus-visible rings for links / nav / actions that had none (a11y) --- */ .btn-text:focus-visible, .link:focus-visible, .btn-link:focus-visible, .btn-link[aria-current]:focus-visible, .notif-readall:focus-visible, .notif-clear:focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 2px; } /* Form controls + page-specific interactive bits */ .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .profile-form select:focus-visible, input[type="range"]:focus-visible, .otp-field:focus-visible, .letter-subject:focus-visible, .letter-body:focus-visible, .tk-close:focus-visible, .detail-close:focus-visible, .status-pick:focus-visible, .offer-panel .close:focus-visible, .admin-tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Disabled-state clarity --- */ .btn-link:disabled { opacity: 0.55; cursor: not-allowed; } .btn:disabled, .btn[aria-busy="true"] { background: var(--surface-2); } select:disabled, input:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; } /* --- Placeholders: muted + theme-aware --- */ .field input::placeholder, .auth-form input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.65; } [data-theme="light"] .field input::placeholder, [data-theme="light"] .auth-form input::placeholder { color: oklch(0.60 0.02 290); opacity: 1; } /* --- Shared skeleton/shimmer primitive (replaces ad-hoc "Chargement..." text) --- */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; border-radius: 4px; color: transparent !important; } @media (prefers-reduced-motion: no-preference) { .skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; } } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Motion-safety guard for the existing landing card lifts (transform on hover was unguarded). Keep the border-color cue when motion is reduced. --- */ @media (prefers-reduced-motion: reduce) { .step:hover, .diff-card:hover, .stat:hover { transform: none; } } .stat-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Featured pricing plan: hover lift to match button feedback (motion-safe). No side-stripe accents anywhere; emphasis via shadow + full elevation. --- */ @media (prefers-reduced-motion: no-preference) { .plan-featured { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; } .plan-featured:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -30px rgb(var(--accent-rgb) / 0.55), var(--elev-3); } } /* FAQ "+" rotation should respect reduced motion */ @media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } } /* --- Refined scrollbars on the remaining scroll containers (match jobs list) --- */ .offer-panel, .notif-list { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.18) transparent; } .offer-panel::-webkit-scrollbar, .notif-list::-webkit-scrollbar { width: 8px; } .offer-panel::-webkit-scrollbar-track, .notif-list::-webkit-scrollbar-track { background: transparent; } .offer-panel::-webkit-scrollbar-thumb, .notif-list::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .offer-panel::-webkit-scrollbar-thumb:hover, .notif-list::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.24); background-clip: padding-box; } [data-theme="light"] .offer-panel, [data-theme="light"] .notif-list { scrollbar-color: rgb(17 12 34 / 0.18) transparent; } [data-theme="light"] .offer-panel::-webkit-scrollbar-thumb, [data-theme="light"] .notif-list::-webkit-scrollbar-thumb { background: rgb(17 12 34 / 0.14); background-clip: padding-box; } /* --- Theme-aware fixes (override hardcoded values; append wins at equal spec) --- */ .notif-clear:hover { color: var(--accent); text-decoration: underline; } .notif-bell, .btn-oauth { border-radius: var(--radius); } [data-theme="light"] .notif-bell:hover { background: rgb(99 60 186 / 0.08); } [data-theme="light"] .legal-doc code { background: rgb(17 12 34 / 0.08); color: oklch(0.38 0.16 290); } [data-theme="light"] .user-avatar { background: linear-gradient(135deg, oklch(0.42 0.13 288), oklch(0.40 0.14 322)); color: #fff; } /* --- Responsive tightening at 640px (KPIs, hub, bigger tap target) --- */ @media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .theme-toggle { width: 44px; height: 44px; } .mobile-tabbar .mt-item:active { transform: scale(0.96); } } @media (max-width: 640px) and (prefers-reduced-motion: reduce) { .mobile-tabbar .mt-item:active { transform: none; } } /* --- Page-specific polish (append-only overrides) --- */ /* Admin: active tab reads clearly at a glance (bottom emphasis + tint, no side-stripe) */ .admin-tabs .tab.active { border-bottom: 3px solid var(--accent); color: var(--accent); background: var(--accent-tint); } /* Empty/placeholder containers: dashed outline signals "nothing here yet" vs a data card */ .empty-state { background: var(--surface-1); border: 1px dashed var(--border); } /* Candidatures: a draggable card mid-drag gets a real lifted state (full border, shadow), not just dimmed. Motion-safe; the scale only applies when motion is allowed. */ .cand-card.dragging { opacity: 0.9; cursor: grabbing; border-color: var(--accent-line); box-shadow: var(--elev-3); } @media (prefers-reduced-motion: no-preference) { .cand-card.dragging { transform: scale(0.97) rotate(-0.6deg); } } /* Cover letter: make the editable body placeholder legible on the "paper" surface */ .letter-body::placeholder { color: var(--ink-soft, var(--muted)); opacity: 0.6; } /* ============================================================================ CV dropzone (profile + onboarding) + "Trouver mes offres" CTA. Append-only, token-based (light+dark via --accent-rgb/--accent/--elev-*), motion-safe. No side-stripe, no gradient text. ============================================================================ */ /* --- Custom CV file dropzone --- */ .cv-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 24px; margin-top: 4px; border: 2px dashed rgb(var(--accent-rgb) / 0.40); border-radius: var(--radius); background: rgb(var(--accent-rgb) / 0.04); cursor: pointer; user-select: none; text-align: center; transition: border-color .15s ease, background .15s ease, transform .06s ease; } .cv-dropzone:hover { border-color: rgb(var(--accent-rgb) / 0.60); background: rgb(var(--accent-rgb) / 0.08); } .cv-dropzone:focus-within { outline: none; border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.12); box-shadow: 0 0 0 3px var(--accent-tint); } .cv-dropzone:active { transform: scale(0.985); } .cv-dropzone.drag-over { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.16); } .cv-dropzone-icon { width: 30px; height: 30px; color: var(--accent); } .cv-dropzone-main { font-size: 14px; font-weight: 600; color: var(--fg); } .cv-dropzone-hint { font-size: 12px; color: var(--muted); margin-top: 3px; } .cv-dropzone-filename { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 4px; max-width: 100%; word-break: break-word; display: none; } .cv-dropzone-filename:not(:empty) { display: block; } /* --- Primary CTA "Trouver mes offres" (jobs + onboarding) --- */ #sync-btn, #run-sync { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 22px; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: transform .16s ease, box-shadow .16s ease; } #sync-btn svg, #run-sync svg { flex: none; opacity: 0.95; } #sync-btn:hover, #run-sync:hover { transform: translateY(-2px); box-shadow: var(--elev-3); } #sync-btn:active, #run-sync:active { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .cv-dropzone, .cv-dropzone:active { transition: none; transform: none; } #sync-btn, #run-sync { transition: none; } #sync-btn:hover, #run-sync:hover { transform: none; } } /* --- Polished range sliders (profile matching weights). JS sets --fill (0-100%) per slider for a cross-browser filled track; custom accent thumb with ring. Scoped to #profile-form so the crop-zoom + other ranges are untouched. --- */ #profile-form input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; --fill: 60%; } #profile-form input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill)); } #profile-form input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent-line); transition: transform .12s ease, box-shadow .12s ease; } #profile-form input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); } #profile-form input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); } #profile-form input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent-line); } #profile-form input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); } #profile-form input[type="range"]:focus-visible { outline: none; } #profile-form input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-tint); } #profile-form input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-tint); } @media (prefers-reduced-motion: reduce) { #profile-form input[type="range"]::-webkit-slider-thumb { transition: none; } #profile-form input[type="range"]:hover::-webkit-slider-thumb { transform: none; } } /* --- Alternance duration pills (/jobs, shown when alternance is selected) --- */ .dur-pills { display: flex; flex-wrap: wrap; gap: 8px; } .dur-pill { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1); color: var(--fg); cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease; } .dur-pill:hover { border-color: var(--outline); background: var(--surface-2); } .dur-pill.active { border-color: var(--accent-line); background: var(--accent-tint); font-weight: 600; } .dur-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); } /* Reveal animation when the alternance duration field appears (motion-safe). */ @media (prefers-reduced-motion: no-preference) { #duration-field:not([hidden]) { animation: durReveal .22s cubic-bezier(0.16,1,0.3,1) both; } } @keyframes durReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* --- "Postuler via X" multi-provider row (JSearch offers expose several apply publishers: LinkedIn, Indeed, beBee...). Shown in the offer detail. --- */ .apply-via { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; } .apply-via-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .apply-via-btn { font-size: 13px; font-weight: 600; color: var(--fg); padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--accent-line); background: var(--accent-tint); transition: background .15s ease, border-color .15s ease; } .apply-via-btn:hover { background: var(--accent-tint-strong); border-color: var(--accent); } .apply-via-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Formatted offer descriptions ───────────────────────────────────────── formatDescription() now emits real