/* ============================================================ Challenge Prospection — Direction 2 · « Cobalt Scoreboard » Drop-in style.css · mobile-first · clair + sombre (auto) Aucune dépendance JS. Polices via Google Fonts ( dans ). Toutes les classes / id / data-* / classes d'état sont préservées. ============================================================ */ :root { /* — Couleurs claires — */ --bg: #f2f6fc; --surface: #ffffff; --surface-2: #e7eef9; --ink: #091228; --ink-soft: #44546f; --ink-faint: #8492ad; --line: #dfe7f4; --line-2: #ccd8ec; --accent: #2563eb; --accent-2: #4a8bff; --accent-deep: #1b4ed8; --accent-soft: #dde9ff; --accent-ring: rgba(37,99,235,.20); --hero-1: #050f26; --hero-2: #0b2050; --hero-ink: #eef4ff; --hero-soft: #aec6ee; --hero-faint:#7790c0; --gold: #f4b50f; --silver: #aab2c8; --bronze: #d18a4e; --danger: #e5484d; --ok: #18a06a; --radius: 14px; --radius-sm: 10px; --radius-xs: 7px; --shadow: 0 1px 2px rgba(12,16,36,.05), 0 10px 30px -12px rgba(12,16,36,.16); --shadow-lg: 0 24px 60px -18px rgba(20,24,67,.40); --shadow-accent: 0 14px 36px -12px rgba(79,70,229,.55); --font-display: "Space Grotesk", system-ui, sans-serif; --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); color-scheme: light; } /* — Sombre auto + forçage par .app[data-theme="dark"] (aperçu) — */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#060b18; --surface:#0f1830; --surface-2:#16223f; --ink:#eaf1ff; --ink-soft:#9fb0d0; --ink-faint:#66789b; --line:#213050; --line-2:#2d406a; --accent:#5b9bff; --accent-2:#79b0ff; --accent-deep:#3b82f6; --accent-soft:rgba(91,155,255,.16); --accent-ring:rgba(91,155,255,.30); --hero-1:#040a1c; --hero-2:#0a1c44; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -20px rgba(0,0,0,.75); --silver:#8e96b4; color-scheme:dark; } } [data-theme="dark"] { --bg:#060b18; --surface:#0f1830; --surface-2:#16223f; --ink:#eaf1ff; --ink-soft:#9fb0d0; --ink-faint:#66789b; --line:#213050; --line-2:#2d406a; --accent:#5b9bff; --accent-2:#79b0ff; --accent-deep:#3b82f6; --accent-soft:rgba(91,155,255,.16); --accent-ring:rgba(91,155,255,.30); --hero-1:#040a1c; --hero-2:#0a1c44; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -20px rgba(0,0,0,.75); --silver:#8e96b4; color-scheme:dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } [hidden], .hide, .hidden { display: none !important; } .app { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; overflow: hidden; } .ic { font-style: normal; } /* ── Hero ──────────────────────────────────────────────── */ .hero { position: relative; color: var(--hero-ink); background: linear-gradient(165deg, var(--hero-1), var(--hero-2)); padding: 20px 22px 30px; overflow: hidden; isolation: isolate; } .hero-grain { position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .055; mix-blend-mode: screen; pointer-events: none; } .hero-glow { position: absolute; inset: -40% -10% auto -10%; height: 120%; z-index: -1; background: radial-gradient(420px 240px at 82% 0%, rgba(109,106,254,.55), transparent 60%), radial-gradient(360px 220px at 12% 8%, rgba(79,70,229,.35), transparent 65%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px); mask-image: linear-gradient(180deg, #000, transparent 78%); } .hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .hero-back { color: var(--hero-soft); text-decoration: none; font-size: .86rem; font-weight: 600; opacity: .9; transition: opacity .15s; } .hero-back:hover { opacity: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #e8e9ff; background: rgba(109,106,254,.18); border: 1px solid rgba(141,138,255,.4); padding: 4px 11px; border-radius: 999px; } .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #8ef0c0; box-shadow: 0 0 8px #8ef0c0; } .hero-kicker { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-faint); } .hero-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 11vw, 3rem); line-height: .98; letter-spacing: -.03em; } .hero-sub { margin: 12px 0 0; color: var(--hero-soft); font-size: .98rem; max-width: 46ch; } .hero-dates { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; font-size: .8rem; } .hero-dates span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 5px 12px; border-radius: 999px; color: var(--hero-soft); font-weight: 600; } .hero-dates .countdown { background: rgba(109,106,254,.22); border-color: rgba(141,138,255,.45); color: #e7e7ff; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; } .stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 13px 10px 11px; text-align: center; backdrop-filter: blur(4px); } .stat-val { font-family: var(--font-display); font-size: clamp(1.3rem,5.6vw,1.6rem); font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-lab { font-size: .62rem; color: var(--hero-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; font-weight: 700; } /* ── Tabs ──────────────────────────────────────────────── */ .tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; padding: 9px 12px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: var(--font); font-size: .88rem; font-weight: 700; color: var(--ink-soft); padding: 9px 16px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: all .16s; } .tab:hover { background: var(--surface-2); color: var(--ink); } .tab.is-active { background: var(--ink); color: var(--surface); box-shadow: var(--shadow); } .tab-admin.is-active { background: var(--accent); color: #fff; } /* ── Layout ────────────────────────────────────────────── */ .main { padding: 18px 14px 100px; max-width: 1140px; margin: 0 auto; } .panel { display: none; } .panel.is-active { display: block; } @media (prefers-reduced-motion: no-preference) { .panel.is-active { animation: fade .32s cubic-bezier(.2,.7,.2,1); } @keyframes fade { from { transform: translateY(10px); opacity: .6; } to { transform: none; opacity: 1; } } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; } .card-h { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 9px; } .card-h-tag { font-family: var(--font); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; } .muted { color: var(--ink-faint); font-size: .88rem; margin: 0 0 16px; } .muted code { font-family: ui-monospace, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .85em; } /* ── Formulaire déclaration ────────────────────────────── */ .declare-card { max-width: 580px; margin: 0 auto; } .field, .field-sm { display: block; margin-bottom: 16px; } .field-label { display: block; font-size: .76rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .04em; } .input { width: 100%; font-family: var(--font); font-size: .98rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; min-height: 46px; } .input::placeholder { color: var(--ink-faint); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a90ad' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .row2 { display: grid; grid-template-columns: 1fr 140px; gap: 12px; } .row2 .field { margin-bottom: 16px; } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .type-btn { text-align: left; cursor: pointer; font-family: var(--font); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); padding: 13px 14px; transition: all .16s; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; } .type-btn .tb-ic { grid-row: 1 / 3; font-size: 1.35rem; width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface-2); border-radius: 11px; transition: all .16s; } .type-btn .tb-label { font-weight: 700; font-size: .9rem; } .type-btn .tb-pts { font-size: .78rem; color: var(--ink-faint); font-weight: 700; } .type-btn:hover { border-color: var(--accent); transform: translateY(-1px); } .type-btn.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } .type-btn.sel .tb-ic { background: var(--accent); } .type-btn.sel .tb-pts { color: var(--accent-deep); } .type-btn.sel::after { content: "✓"; position: absolute; top: 9px; right: 11px; font-size: .8rem; font-weight: 800; color: #fff; background: var(--accent); width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; } .declare-preview { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--surface))); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; margin: 6px 0 16px; } .dp-label { font-size: .84rem; color: var(--ink-soft); font-weight: 700; } .dp-points { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--accent-deep); line-height: 1; font-variant-numeric: tabular-nums; } .check { font-size: .86rem; color: var(--ink-soft); display: inline-flex; gap: 8px; align-items: center; } .check input { width: 18px; height: 18px; accent-color: var(--accent); } .announce-row { margin: 2px 0 16px; } .declare-note { font-size: .84rem; text-align: center; margin: 12px 0 0; min-height: 1em; font-weight: 700; } .declare-note.ok { color: var(--ok); } .declare-note.err { color: var(--danger); } /* ── Boutons ───────────────────────────────────────────── */ .btn { font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 18px; transition: all .15s; min-height: 44px; } .btn:hover { background: var(--surface-2); border-color: var(--line); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); } .btn-block { width: 100%; padding: 15px; font-size: 1rem; } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); } .btn-mini { padding: 6px 12px; font-size: .78rem; border-radius: 9px; min-height: 0; } .btn:disabled { opacity: .5; cursor: default; } /* ── Feed activité ─────────────────────────────────────── */ .feed-card { margin-top: 4px; } .feed { list-style: none; margin: 0; padding: 0; } .feed-row { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-bottom: 1px solid var(--line); border-radius: 10px; } .feed-row:last-child { border-bottom: none; } .feed-ic { flex: 0 0 42px; height: 42px; width: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; background: var(--accent-soft); } .feed-ic.t-cdc_be { background: color-mix(in srgb,#7c3aed 16%, var(--surface)); } .feed-ic.t-prospect_phys { background: color-mix(in srgb,#4f46e5 16%, var(--surface)); } .feed-ic.t-prospect_teams { background: color-mix(in srgb,#0891b2 16%, var(--surface)); } .feed-ic.t-client_phys { background: color-mix(in srgb,#d97706 16%, var(--surface)); } .feed-main { flex: 1; min-width: 0; } .feed-line { font-size: .94rem; font-weight: 700; } .feed-line b { font-weight: 800; } .feed-meta { font-size: .76rem; color: var(--ink-faint); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; } .feed-type { background: var(--surface-2); padding: 1px 8px; border-radius: 999px; font-weight: 700; } .feed-pts { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; color: var(--accent-deep); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .feed-del { flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: 1rem; padding: 4px 7px; border-radius: 8px; } .feed-del:hover { background: color-mix(in srgb,var(--danger) 12%, var(--surface)); color: var(--danger); } .feed-row.flash { animation: flashrow 1.8s ease; } @keyframes flashrow { 0% { background: var(--accent-soft); } 100% { background: transparent; } } /* ── Classement ────────────────────────────────────────── */ .board { display: grid; grid-template-columns: 1fr; gap: 18px; } .board-h { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 2px 2px 14px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; letter-spacing: -.01em; } .board-hint { font-family: var(--font); font-size: .72rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; } /* Podium — cartes champions */ .podium { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .champ { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px 16px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; } .champ-1 { grid-column: 1 / -1; order: -1; padding: 26px 16px 20px; border-color: transparent; background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--gold) 22%, var(--surface)), var(--surface) 60%); box-shadow: 0 0 0 1.5px var(--gold) inset, var(--shadow-lg); } .champ-medal { font-size: 1.9rem; line-height: 1; } .champ-1 .champ-medal { font-size: 2.6rem; } .champ-avatar { width: 60px; height: 60px; border-radius: 50%; margin: 4px 0 2px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-ring); } .champ-1 .champ-avatar { width: 84px; height: 84px; font-size: 1.9rem; background: linear-gradient(135deg, #ffd76b, var(--gold)); color: #5a3d00; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px color-mix(in srgb,var(--gold) 45%, transparent); } .champ-2 .champ-avatar { background: linear-gradient(135deg,#cfd6e6,var(--silver)); color: #2b3346; } .champ-3 .champ-avatar { background: linear-gradient(135deg,#e8b07e,var(--bronze)); color: #4a2c10; } .champ-name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; } .champ-1 .champ-name { font-size: 1.25rem; } .champ-agency { margin: 1px 0 3px; } .champ-pts { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent-deep); line-height: 1; font-variant-numeric: tabular-nums; } .champ-pts small { display: block; font-family: var(--font); font-size: .6rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } .champ-1 .champ-pts { font-size: 2.3rem; color: var(--accent); } .champ-crown { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8a5a00; background: color-mix(in srgb,var(--gold) 30%, var(--surface)); border: 1px solid color-mix(in srgb,var(--gold) 55%, transparent); padding: 3px 12px; border-radius: 999px; margin-bottom: 2px; } .champ-extra { font-size: .74rem; color: var(--ink-faint); font-weight: 700; margin-top: 4px; } .tag-chip { font-size: .68rem; font-weight: 700; background: var(--surface-2); color: var(--ink-soft); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); } .rank-list, .agency-list { list-style: none; margin: 0; padding: 0; } .rank-row, .agency-row { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 15px; margin-bottom: 8px; box-shadow: var(--shadow); transition: transform .15s; } .rank-row:hover, .agency-row:hover { transform: translateX(3px); } .rank-num { flex: 0 0 32px; height: 32px; width: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .rank-row.top .rank-num, .agency-row.top .rank-num { background: var(--accent); color: #fff; } .rank-main { flex: 1; min-width: 0; } .rank-name { font-weight: 700; font-size: .96rem; } .rank-meta { font-size: .76rem; color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 1px; } .rank-bar { height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 8px; overflow: hidden; } .rank-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-deep)); border-radius: 99px; } .rank-pts { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; } .rank-pts small { display: block; font-family: var(--font); font-size: .6rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; } .agency-row .rank-pts { color: var(--accent-deep); } .insight-card { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); border: none; color: #fff; box-shadow: var(--shadow-accent); } .insight-big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .insight-txt { font-size: .9rem; margin-top: 8px; color: #e9e9ff; max-width: 30ch; } .empty { text-align: center; color: var(--ink-faint); padding: 30px 12px; font-size: .9rem; } /* ── Admin ─────────────────────────────────────────────── */ .admin-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .admin-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 340px; overflow-y: auto; } .adm-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; } .adm-row .grow { flex: 1; min-width: 110px; } .adm-row input.input, .adm-row select.input { padding: 8px 11px; font-size: .86rem; min-height: 38px; background: var(--surface); } .adm-name { font-weight: 700; font-size: .9rem; flex: 1; min-width: 100px; } .inline-form { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .inline-form .input { flex: 1; min-width: 150px; } .textarea { resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .84rem; line-height: 1.5; } .cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .cfg-points { margin-bottom: 16px; } .cfg-points-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; } .cfg-points-grid .adm-row { cursor: default; } .cfg-points-grid .input { max-width: 90px; text-align: center; font-weight: 700; } .cfg-actions { display: flex; gap: 10px; flex-wrap: wrap; } .import-controls { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; flex-direction: column; } .import-preview { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; } .imp-row { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; font-size: .82rem; } .imp-row .input { padding: 7px 9px; font-size: .82rem; min-height: 34px; background: var(--surface); } .imp-row .imp-orig { font-family: ui-monospace, monospace; color: var(--ink-faint); font-size: .72rem; grid-column: 1 / -1; } .imp-row.warn { outline: 2px solid var(--gold); outline-offset: -1px; } .imp-ok, .imp-warn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; } .imp-ok { background: color-mix(in srgb,var(--ok) 18%, var(--surface)); color: var(--ok); } .imp-warn { background: color-mix(in srgb,var(--gold) 24%, var(--surface)); color: #8a5a00; } .import-actions { margin-top: 14px; } /* ── Footer + FAB + Toast ──────────────────────────────── */ .foot { text-align: center; color: var(--ink-faint); font-size: .78rem; padding: 8px 16px 28px; } .fab { position: absolute; right: 18px; bottom: 18px; z-index: 30; height: 58px; width: 58px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: #fff; font-size: 1.7rem; line-height: 1; box-shadow: var(--shadow-accent); transition: transform .15s, background .15s; } .fab:hover { background: var(--accent-deep); transform: scale(1.06); } .fab.hide { transform: scale(0); opacity: 0; pointer-events: none; } .toast { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--surface); padding: 12px 20px; border-radius: 999px; font-size: .88rem; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 50; opacity: 0; transition: opacity .2s, transform .2s; max-width: 90%; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.err { background: var(--danger); color: #fff; } /* ── Combobox ──────────────────────────────────────────── */ .combo { position: relative; } .combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 270px; overflow-y: auto; } .combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 10px; cursor: pointer; font-size: .94rem; font-weight: 600; } .combo-opt.active, .combo-opt:hover { background: var(--accent-soft); color: var(--accent-deep); } .combo-opt .opt-tag { font-size: .66rem; font-weight: 700; color: var(--ink-faint); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; } .combo-empty { padding: 12px 13px; color: var(--ink-faint); font-size: .88rem; } /* ── Breakpoints desktop ───────────────────────────────── */ @media (min-width: 760px) { .hero { padding: 30px 36px 36px; } .hero-title { font-size: clamp(2.6rem, 6vw, 3.6rem); } .main { padding: 26px 24px 60px; } .fab { display: none; } .admin-grid { grid-template-columns: 1fr 1fr; } .card-wide { grid-column: 1 / -1; } .import-controls { flex-direction: row; align-items: flex-end; } .import-controls .textarea { flex: 1; } .cfg-points-grid { grid-template-columns: 1fr 1fr; } .imp-row { grid-template-columns: 26px 1.1fr .9fr 1fr 130px 56px; } .imp-row .imp-orig { grid-column: 1 / -1; } } @media (min-width: 860px) { .board { grid-template-columns: 1.25fr 1fr; align-items: start; } .podium { grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; } .champ-1 { grid-column: auto; order: 0; transform: translateY(-14px); } .champ-2, .champ-3 { margin-bottom: 0; } } /* ============================================================ ICÔNES PNG — remplacent les emojis (Cobalt Scoreboard) Icônes monochromes via CSS mask : elles héritent de la couleur (currentColor / --cat) donc s'adaptent au thème clair/sombre. Médailles = PNG couleur en background-image. ============================================================ */ .ic{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-.16em; background-color: currentColor; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } /* Onglets */ .tab .ic{ width:1.1em; height:1.1em; } .tab[data-tab="declarer"] .ic{ -webkit-mask-image:url("icons/plus.png"); mask-image:url("icons/plus.png"); } .tab[data-tab="classement"] .ic{ -webkit-mask-image:url("icons/podium.png"); mask-image:url("icons/podium.png"); } .tab[data-tab="admin"] .ic{ -webkit-mask-image:url("icons/sliders.png"); mask-image:url("icons/sliders.png"); } /* Chips du hero */ .ic-cal{ -webkit-mask-image:url("icons/calendar.png"); mask-image:url("icons/calendar.png"); } .ic-flag{ -webkit-mask-image:url("icons/flag.png"); mask-image:url("icons/flag.png"); } .ic-target{ -webkit-mask-image:url("icons/target.png"); mask-image:url("icons/target.png"); } /* Tuiles de catégorie (type-btn + fil) — icône colorée par type */ .tb-ic, .feed-ic{ position:relative; font-size:0; } .tb-ic::before, .feed-ic::before{ content:""; position:absolute; inset:0; margin:auto; width:60%; height:60%; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; background-color: var(--cat,#2563eb); } .type-btn[data-type="client_phys"] .tb-ic::before, .feed-ic.t-client_phys::before { --cat:#f0921d; -webkit-mask-image:url("icons/building.png"); mask-image:url("icons/building.png"); } .type-btn[data-type="prospect_teams"] .tb-ic::before, .feed-ic.t-prospect_teams::before{ --cat:#1bb8da; -webkit-mask-image:url("icons/laptop.png"); mask-image:url("icons/laptop.png"); } .type-btn[data-type="prospect_phys"] .tb-ic::before, .feed-ic.t-prospect_phys::before { --cat:#5b95ff; -webkit-mask-image:url("icons/people.png"); mask-image:url("icons/people.png"); } .type-btn[data-type="cdc_be"] .tb-ic::before, .feed-ic.t-cdc_be::before { --cat:#9d80f6; -webkit-mask-image:url("icons/doc.png"); mask-image:url("icons/doc.png"); } .type-btn.sel .tb-ic::before{ background-color:#fff; } /* Médailles du podium (PNG couleur) */ .champ-medal{ background:center/contain no-repeat; font-size:0; line-height:0; } .champ-2 .champ-medal, .champ-3 .champ-medal{ width:38px; height:38px; } .champ-1 .champ-medal{ width:54px; height:54px; background-image:url("icons/medal-1.png"); } .champ-2 .champ-medal{ background-image:url("icons/medal-2.png"); } .champ-3 .champ-medal{ background-image:url("icons/medal-3.png"); } /* ============================================================ Overrides app Concours (hors design pack) : nav, modal, exports, astérisque agence, FAB/toast flottants en plein écran (le pack ciblait un cadre, ici l'app occupe toute la page). ============================================================ */ .app { overflow: visible; } .fab, .toast { position: fixed; } .hero-top { justify-content: flex-end; } /* plus de lien Portfolio à gauche */ .req-star { color: var(--danger); font-weight: 800; margin-left: 3px; } /* Nav : « Ajouter » en avant (accent), « Classement » discret, Admin hors barre */ .tab-cta { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-accent); } .tab-cta:hover, .tab-cta.is-active { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); } .tab:not(.tab-cta).is-active { background: var(--surface-2); color: var(--ink); box-shadow: none; } /* Contrôle Admin discret en haut à droite du hero */ .hero-admin { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; color: var(--hero-soft); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; transition: all .15s; } .hero-admin:hover { background: rgba(255,255,255,.12); color: #fff; } .hero-admin .dot { width: 6px; height: 6px; border-radius: 50%; background: #8ef0c0; box-shadow: 0 0 8px #8ef0c0; } /* Boutons export */ .btn-export { background: #1d6f42; border-color: #1d6f42; color: #fff; box-shadow: none; } .btn-export:hover { background: #17592f; border-color: #17592f; } .btn-pptx { background: #c43e1c; border-color: #c43e1c; color: #fff; box-shadow: none; } .btn-pptx:hover { background: #a5330f; border-color: #a5330f; } /* Modal (choix d'agence obligatoire) */ .modal-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5,9,20,.6); backdrop-filter: blur(4px); } .modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; width: 100%; max-width: 430px; } .modal-h { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; } .modal-sub { margin: 0 0 16px; color: var(--ink-soft); font-size: .9rem; } .modal-or { text-align: center; margin: 6px 0 12px; position: relative; color: var(--ink-faint); font-size: .76rem; } .modal-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); } .modal-or span { position: relative; background: var(--surface); padding: 0 10px; } .modal-note { font-size: .76rem; color: var(--ink-faint); margin: 4px 0 16px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ============================================================ Itération 2 : polish « épuré », gouttières latérales, exports dans la barre, bouton Admin bas-droite, sous-nav + vue détail. ============================================================ */ :root { --radius: 16px; --radius-sm: 12px; } /* Gouttières : contenu (et hero) centrés, respiration sur les côtés */ .hero-inner, .main { max-width: 1060px; margin-left: auto; margin-right: auto; } .card { box-shadow: 0 1px 2px rgba(12,16,36,.04), 0 16px 40px -26px rgba(12,16,36,.20); } .rank-row:hover, .agency-row:hover { transform: none; } .tabs { border-bottom: none; gap: 6px; } @media (min-width: 760px) { .hero { padding: 32px 40px 30px; } .main { padding: 26px 30px 80px; } } /* Exports dans la barre d'onglets (toujours visibles, poussés à droite) */ .tabs-spacer { flex: 1 1 auto; min-width: 6px; } .tab-export { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 13px; white-space: nowrap; transition: all .15s; } .tab-export:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); } /* Bouton Admin discret, en bas à droite */ .admin-fab { position: fixed; right: 16px; bottom: 16px; z-index: 45; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: .78rem; font-weight: 700; color: var(--ink-faint); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow); opacity: .8; transition: all .15s; } .admin-fab:hover { opacity: 1; color: var(--ink); background: var(--surface); } /* Sous-navigation du classement (Classement / Détail) */ .subnav { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 18px; } .subtab { border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: .86rem; color: var(--ink-soft); padding: 8px 16px; border-radius: 999px; transition: all .15s; } .subtab:hover { color: var(--ink); } .subtab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .subview { display: none; } .subview.is-active { display: block; } /* Vue détail des RDV : barre de filtres + liste */ .rdv-toolbar { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 16px; } @media (min-width: 680px) { .rdv-toolbar { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; } } .rdv-toolbar .input { min-height: 42px; padding: 9px 12px; font-size: .88rem; } .rdv-list { display: flex; flex-direction: column; gap: 7px; } .rdv-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 11px; align-items: center; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .rdv-row .feed-ic { width: 40px; height: 40px; flex: none; } .rdv-main { min-width: 0; } .rdv-name { font-weight: 700; font-size: .92rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rdv-sub { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .rdv-type, .rdv-date { display: none; } .rdv-pts { font-family: var(--font-display); font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .rdv-row .feed-del { color: var(--ink-faint); } @media (min-width: 680px) { .rdv-row { grid-template-columns: 40px 1.7fr 1fr .8fr auto 30px; } .rdv-type { display: inline-block; justify-self: start; font-size: .74rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; } .rdv-date { display: inline-block; font-size: .82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } } /* ============================================================ Itération 3 : aligner la barre d'onglets/exports, le hero et le contenu sur les MÊMES marges latérales (gouttière commune). Le fond plein-largeur reste (hero, barre sticky) ; seul le contenu est calé sur une colonne ~1060px centrée. ============================================================ */ :root { --gut: max(16px, calc((100% - 1060px) / 2)); } .hero { padding-left: 0; padding-right: 0; } .hero-inner { max-width: none; margin: 0; padding-left: var(--gut); padding-right: var(--gut); } .main { max-width: none; margin: 0; padding-left: var(--gut); padding-right: var(--gut); } .tabs { padding-left: var(--gut); padding-right: var(--gut); } /* ── Bouton modifier + groupe d'actions (fil & détail) ─────── */ .row-actions { display: inline-flex; align-items: center; gap: 2px; } .feed-edit { flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: 1rem; padding: 4px 7px; border-radius: 8px; line-height: 1; } .feed-edit:hover { background: var(--accent-soft); color: var(--accent-deep); } @media (min-width: 680px) { .rdv-row { grid-template-columns: 40px 1.7fr 1fr .8fr auto auto; } } /* ── Bouton Excel scindé + menu déroulant d'exports ────────── */ .export-split { display: inline-flex; align-items: stretch; flex: 0 0 auto; } .tab-export-main { border-top-right-radius: 0; border-bottom-right-radius: 0; } .export-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 8px 9px; font-size: .7rem; } .export-menu { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 5px; min-width: 210px; display: flex; flex-direction: column; gap: 2px; } .export-menu a { text-decoration: none; color: var(--ink); font-family: var(--font); font-weight: 600; font-size: .85rem; padding: 10px 13px; border-radius: 8px; white-space: nowrap; } .export-menu a:hover { background: var(--accent-soft); color: var(--accent-deep); } /* ── Slider de navigation (Classement / Détail / Paramètres) dans la barre ── */ .nav-slider { margin: 0; flex: 0 0 auto; } /* ============================================================ Itération 4 : « dynamiser » — bouton + flottant, feuille de déclaration coulissante, confettis maison, animations podium. ============================================================ */ /* ── Bouton + flottant (FAB) ─────────────────────────────── */ .fab { position: fixed; right: clamp(16px, 4vw, 34px); bottom: clamp(18px, 5vw, 36px); z-index: 46; height: 60px; width: 60px; padding: 0; border: none; border-radius: 20px; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); box-shadow: var(--shadow-accent), 0 12px 30px -8px rgba(37,99,235,.55); transition: transform .18s cubic-bezier(.2,.85,.25,1), box-shadow .18s, opacity .2s; } .fab svg { width: 26px; height: 26px; display: block; } .fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-accent), 0 18px 38px -10px rgba(37,99,235,.65); } .fab:active { transform: scale(.94); } .fab.hide { transform: scale(0) rotate(-90deg); opacity: 0; pointer-events: none; } @media (min-width: 760px) { .fab { display: grid; height: 64px; width: 64px; } } /* annule le display:none hérité */ /* Anneau de pulsation (halo) — purement décoratif */ .fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } /* ── Feuille « Déclarer un RDV » (bottom-sheet / modal) ──── */ .sheet-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,9,20,.55); backdrop-filter: blur(5px); padding: 0; } .sheet { position: relative; width: 100%; max-width: 600px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); padding: 22px 18px calc(26px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; } .sheet-grip { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--line-2); margin: 0 auto 14px; } .sheet-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; cursor: pointer; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 1rem; display: grid; place-items: center; line-height: 1; transition: background .15s, color .15s; } .sheet-close:hover { background: var(--line); color: var(--ink); } .sheet .declare-card { margin: 0 auto; } body.sheet-open { overflow: hidden; } @media (min-width: 760px) { .sheet-overlay { align-items: center; padding: 24px; } .sheet { border-radius: 24px; border-bottom: 1px solid var(--line); max-height: 88vh; padding: 26px 26px 28px; } .sheet-grip { display: none; } } /* ── Canvas confettis (au-dessus du contenu, ne bloque rien) ── */ .fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 65; } /* ── Animations (désactivées si l'utilisateur préfère le calme) ── */ @media (prefers-reduced-motion: no-preference) { /* FAB : halo qui pulse doucement */ .fab::after { animation: fabPulse 2.8s ease-out infinite; } @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); } 70% { box-shadow: 0 0 0 16px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } } /* Feuille : entrée coulissante (overlay en fondu) */ .sheet-overlay { animation: fxFade .25s ease; } .sheet { animation: sheetUp .36s cubic-bezier(.2,.8,.2,1); } @keyframes fxFade { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } } /* Lignes de classement / agences / fil : apparition décalée */ .rank-row, .agency-row, .feed-row { animation: rowIn .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 26ms); } @keyframes rowIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* Jauges : remplissage animé (indépendant de la largeur calculée) */ .rank-bar > i { transform-origin: left center; animation: barGrow .75s cubic-bezier(.2,.8,.2,1) both; } @keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Podium : champions qui montent en cascade */ .champ { animation: champIn .5s cubic-bezier(.2,.85,.25,1) both; } .champ-2 { animation-delay: .04s; } .champ-1 { animation-delay: .12s; } .champ-3 { animation-delay: .2s; } @keyframes champIn { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } } /* Conserve le léger décrochage du champion sur grand écran */ @media (min-width: 860px) { .champ-1 { animation-name: champInLead; } } @keyframes champInLead { from { opacity: 0; transform: translateY(2px) scale(.95); } to { opacity: 1; transform: translateY(-14px); } } /* Champion : balayage lumineux diagonal */ .champ-1::before { content: ""; position: absolute; top: 0; left: -65%; width: 55%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: champShine 6s ease-in-out infinite; z-index: 1; } @keyframes champShine { 0%, 16% { left: -65%; } 46%, 100% { left: 150%; } } /* Champion : rayons dorés tournants derrière l'avatar */ .champ-1 .champ-avatar { position: relative; z-index: 0; } .champ-1 .champ-avatar::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; z-index: -1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 55%, transparent) 0 5deg, transparent 5deg 16deg); -webkit-mask: radial-gradient(circle, #000 36%, transparent 70%); mask: radial-gradient(circle, #000 36%, transparent 70%); opacity: .55; animation: spin 9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Couronne : flottement léger */ .champ-crown { animation: crownFloat 2.6s ease-in-out infinite; } @keyframes crownFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } } /* ── Flash enrichi du nouveau RDV (remplace l'ancien) ─────── */ .feed-row.flash { animation: flashrow 2s cubic-bezier(.2,.8,.2,1); } @keyframes flashrow { 0% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; } 60% { background: var(--accent-soft); } 100% { background: transparent; box-shadow: none; } } /* ============================================================ Itération 5 : logo up Technologies, thème clair/sombre, lignes de classement cliquables, badge « RDV ajouté » (Annuler + barre de compte à rebours), correction de la police du toast. ============================================================ */ /* Toast générique : police propre (il vit hors de .app → héritait du serif système) */ .toast { font-family: var(--font); letter-spacing: -.01em; } /* ── Logo de marque (hero, haut-gauche, en transparence) ──── */ .hero-top { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 14px; } .brand-logo { height: 32px; width: auto; opacity: .82; filter: drop-shadow(0 1px 4px rgba(0,0,0,.3)); user-select: none; pointer-events: none; } @media (min-width: 760px) { .brand-logo { height: 40px; } } /* ── Bascule thème clair / sombre (1er élément de la barre) ── */ .theme-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; } .theme-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); } .theme-toggle:active { transform: scale(.92); } .theme-toggle .th-ic { display: none; } .theme-toggle .th-moon { display: block; } /* thème clair → on propose la lune */ .theme-toggle.is-dark .th-moon { display: none; } .theme-toggle.is-dark .th-sun { display: block; } /* thème sombre → on propose le soleil */ /* ── Lignes de classement / agences / podium cliquables ───── */ .is-clickable { cursor: pointer; } .rank-row.is-clickable:hover, .agency-row.is-clickable:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-ring), var(--shadow); transform: translateX(2px); } .champ.is-clickable:hover { box-shadow: var(--shadow-lg); } .rank-row.is-clickable:focus-visible, .agency-row.is-clickable:focus-visible, .champ.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Badge « RDV ajouté » : barre de compte à rebours + Annuler ── */ .snackbar { position: fixed; z-index: 56; left: 12px; right: 12px; bottom: 20px; display: flex; align-items: center; gap: 12px; font-family: var(--font); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px 12px 15px; overflow: hidden; transform: translateY(170%); opacity: 0; transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .25s; } .snackbar.show { transform: translateY(0); opacity: 1; } .snack-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); box-shadow: var(--shadow-accent); } .snack-body { flex: 1; min-width: 0; } .snack-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; } .snack-sub { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .snack-undo { flex: 0 0 auto; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-family: var(--font); font-weight: 800; font-size: .82rem; cursor: pointer; padding: 9px 15px; border-radius: 11px; transition: all .15s; } .snack-undo:hover { background: var(--accent); color: #fff; } .snack-x { flex: 0 0 auto; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: .9rem; padding: 7px; border-radius: 9px; line-height: 1; } .snack-x:hover { color: var(--ink); background: var(--surface-2); } .snack-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--accent) 14%, transparent); } .snack-progress > i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--accent-2), var(--accent-deep)); } @media (min-width: 560px) { .snackbar { left: 50%; right: auto; bottom: 26px; width: 440px; transform: translateX(-50%) translateY(170%); } .snackbar.show { transform: translateX(-50%) translateY(0); } } /* ── Barres de défilement harmonisées (fines, discrètes, thème cobalt) ────── La feuille « Déclarer un RDV » et les zones scrollables de l'app utilisaient la barre native de l'OS (épaisse, claire) → moche sur le fond foncé. */ .sheet, .modal-card, .admin-list, .import-preview, .combo-list { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .sheet::-webkit-scrollbar, .modal-card::-webkit-scrollbar, .admin-list::-webkit-scrollbar, .import-preview::-webkit-scrollbar, .combo-list::-webkit-scrollbar { width: 10px; height: 10px; } .sheet::-webkit-scrollbar-track, .modal-card::-webkit-scrollbar-track, .admin-list::-webkit-scrollbar-track, .import-preview::-webkit-scrollbar-track, .combo-list::-webkit-scrollbar-track { background: transparent; } .sheet::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb, .admin-list::-webkit-scrollbar-thumb, .import-preview::-webkit-scrollbar-thumb, .combo-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } .sheet::-webkit-scrollbar-thumb:hover, .modal-card::-webkit-scrollbar-thumb:hover, .admin-list::-webkit-scrollbar-thumb:hover, .import-preview::-webkit-scrollbar-thumb:hover, .combo-list::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } .sheet::-webkit-scrollbar-button, .modal-card::-webkit-scrollbar-button, .admin-list::-webkit-scrollbar-button, .import-preview::-webkit-scrollbar-button, .combo-list::-webkit-scrollbar-button { display: none; } /* ============================================================ Itération 6 : logo en coin (compact, ne décale plus le contenu), barre de défilement principale du site, autocomplétion entreprise par texte fantôme (Tab pour compléter). ============================================================ */ /* Logo : compact dans le coin haut-gauche, décalage minimal du contenu */ .hero { padding-top: 6px; } .hero-top { margin: 0 0 4px; } .brand-logo { height: 22px; } @media (min-width: 760px) { .brand-logo { height: 26px; } } /* Barre de défilement PRINCIPALE du site (fenêtre) harmonisée */ html { background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 12px; height: 12px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } html::-webkit-scrollbar-button, body::-webkit-scrollbar-button { display: none; } /* ── Autocomplétion « Entreprise » (texte fantôme + Tab) ──── */ .ac { position: relative; display: block; } .ac .input { position: relative; z-index: 1; background: transparent; line-height: 22px; } .ac-ghost { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 12px 46px 12px 14px; /* = padding input, + place à droite pour le badge ⇥ */ border: 1.5px solid transparent; /* compense la bordure de l'input pour aligner le texte */ font-family: var(--font); font-size: .98rem; line-height: 22px; white-space: pre; overflow: hidden; pointer-events: none; color: transparent; } .ac-ghost .g-typed { visibility: hidden; } /* occupe la largeur du texte tapé (offset) */ .ac-ghost .g-rest { color: var(--ink-faint); } /* complétion grisée */ .ac-key { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); z-index: 2; font-family: var(--font); font-size: .68rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; cursor: pointer; line-height: 1; } .ac-key:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); } /* ── Alerte « contact déjà ajouté » (par nom de famille, non bloquante) ───── */ .contact-warn { margin: -6px 0 14px; padding: 9px 12px; border-radius: 10px; font-size: .82rem; font-weight: 700; line-height: 1.35; color: #8a5a00; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); } [data-theme="dark"] .contact-warn { color: #ffd48a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-warn { color: #ffd48a; } } /* ============================================================ Multi-entreprises — Accueil (welcome) + Timeline des concours (réutilise les tokens du thème « Cobalt Scoreboard ») ============================================================ */ .wp-body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; } .wp { min-height: 100vh; display: flex; flex-direction: column; } /* ── Hero présentation ─────────────────────────────────────── */ .wp-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--hero-ink); background: linear-gradient(165deg, var(--hero-1), var(--hero-2)); padding: 28px 22px 56px; } .wp-hero-grid { max-width: 1100px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .wp-hero-left { min-width: 0; } .wp-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--hero-ink); margin-bottom: 26px; letter-spacing: -.01em; } .wp-logo-mark { width: 26px; height: 26px; border-radius: 8px; flex: none; background: linear-gradient(135deg, #2563eb, #6d6afe); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l5-6 4 4 7-9' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l5-6 4 4 7-9' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat; background-color: #6d6afe; background-image: none; } .wp-kicker { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-faint); } .wp-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.03em; } .wp-lead { margin: 18px 0 0; color: var(--hero-soft); font-size: 1.04rem; max-width: 52ch; } .wp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .wp-mini { margin: 20px 0 0; font-size: .84rem; color: var(--hero-faint); } .wp-mini b { color: var(--hero-soft); } /* ── Boutons (plateforme) ──────────────────────────────────── */ .wp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: .94rem; padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s, opacity .15s; background: var(--surface); color: var(--ink); border-color: var(--line); } .wp-btn:hover { transform: translateY(-1px); } .wp-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-accent); } .wp-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .wp-btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--hero-ink); } .wp-body .tl .wp-btn-ghost, .tl .wp-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); } .wp-btn-ghost:hover { background: rgba(255,255,255,.16); } .wp-btn-block { width: 100%; padding: 14px; font-size: 1rem; } .wp-btn-mini { padding: 8px 13px; font-size: .82rem; border-radius: 9px; } /* ── Carte d'accès (connexion / inscription) ───────────────── */ .wp-auth { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; color: var(--ink); position: relative; } .auth-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .auth-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: var(--radius-sm); margin-bottom: 20px; } .auth-tab { flex: 1; text-align: center; padding: 9px; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; user-select: none; } #auth-login:checked ~ .auth-tabs label[data-tab="login"], #auth-signup:checked ~ .auth-tabs label[data-tab="signup"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .auth-form { display: block; } .auth-signup-form { display: none; } #auth-signup:checked ~ .auth-login-form { display: none; } #auth-signup:checked ~ .auth-signup-form { display: block; } .auth-h { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; } .auth-sub { margin: 0 0 18px; color: var(--ink-faint); font-size: .9rem; } .auth-err { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-xs); font-size: .86rem; font-weight: 600; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); } .auth-field { display: block; margin-bottom: 14px; } .auth-field > span { display: block; font-size: .76rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } .auth-field input { width: 100%; background: var(--bg); border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); color: var(--ink); font-size: .96rem; font-family: var(--font); padding: 11px 13px; outline: none; transition: border-color .15s, box-shadow .15s; } .auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-switch { margin: 14px 0 0; text-align: center; font-size: .86rem; color: var(--ink-faint); } .auth-link { color: var(--accent); font-weight: 600; cursor: pointer; } .auth-link:hover { text-decoration: underline; } /* ── Sections « à quoi ça sert » ───────────────────────────── */ .wp-main { flex: 1; max-width: 1100px; margin: 0 auto; width: 100%; padding: 56px 22px 20px; } .wp-section-kicker { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .wp-section-title { margin: 0 0 30px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.02em; } .wp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .wp-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .wp-feature-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 1.3rem; margin-bottom: 14px; } .wp-feature h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; } .wp-feature p { margin: 0; color: var(--ink-soft); font-size: .92rem; } .wp-steps { margin: 50px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .wp-step { display: flex; gap: 14px; align-items: flex-start; } .wp-step-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 700; } .wp-step h4 { margin: 4px 0 4px; font-size: 1rem; } .wp-step p { margin: 0; color: var(--ink-soft); font-size: .9rem; } .wp-final { text-align: center; padding: 40px 20px 50px; } .wp-final h2 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.02em; } .wp-foot { text-align: center; padding: 24px; color: var(--ink-faint); font-size: .84rem; border-top: 1px solid var(--line); } @media (max-width: 820px) { .wp-hero-grid { grid-template-columns: 1fr; gap: 30px; } .wp-main { padding-top: 40px; } } /* ============================================================ Timeline des concours (espace entreprise) ============================================================ */ .tl { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); } .tl-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; } .tl-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: .98rem; } .tl-top-actions { display: flex; align-items: center; gap: 10px; } .tl-company { font-size: .9rem; font-weight: 600; color: var(--ink-soft); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-main { flex: 1; max-width: 920px; margin: 0 auto; width: 100%; padding: 30px 22px 24px; } .tl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; } .tl-title { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: -.02em; } .tl-sub { margin: 0; color: var(--ink-soft); font-size: .94rem; } .tl-head-actions { display: flex; gap: 10px; flex-wrap: wrap; } .tl-timeline { position: relative; display: flex; flex-direction: column; gap: 18px; } .tl-timeline::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--line-2), color-mix(in srgb, var(--line-2) 20%, transparent)); } .tl-node { position: relative; padding-left: 36px; } .tl-dot { position: absolute; left: 2px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-2); } .tl-node.is-active .tl-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; } .tl-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); } .tl-node.is-active .tl-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .tl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .tl-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tl-name { margin: 0; font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; } .tl-badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .01em; } .tl-badge-on { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); } .tl-badge-off { color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line); } .tl-chip { font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); } .tl-period { font-size: .82rem; color: var(--ink-faint); font-weight: 600; white-space: nowrap; } .tl-card-sub { margin: 8px 0 0; color: var(--ink-soft); font-size: .9rem; } .tl-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; } .tl-stat { display: flex; flex-direction: column; } .tl-stat b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .tl-stat small { font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } .tl-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); flex-wrap: wrap; } .tl-open-hint { font-size: .84rem; font-weight: 600; color: var(--accent); } .tl-row-btns { display: flex; gap: 6px; flex-wrap: wrap; } .tl-mini { font-size: .76rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; } .tl-mini:hover { background: var(--surface-2); color: var(--ink); } .tl-mini-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); } .tl-empty { text-align: center; padding: 50px 20px; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); } .tl-empty-ic { font-size: 2.6rem; margin-bottom: 12px; } .tl-empty h3 { margin: 0 0 6px; font-family: var(--font-display); } .tl-empty p { margin: 0; font-size: .92rem; } @media (max-width: 560px) { .tl-company { display: none; } .tl-card-top { flex-direction: column; gap: 6px; } } /* ── Import Excel (modale) ─────────────────────────────────── */ .modal-wide { max-width: 720px; width: 100%; } .imp-file { display: block; margin: 14px 0 6px; } .imp-file input[type=file] { display: none; } .imp-file-label { display: inline-block; padding: 11px 18px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-2); color: var(--ink-soft); font-weight: 600; font-size: .9rem; cursor: pointer; } .imp-file-label:hover { border-color: var(--accent); color: var(--accent); } .imp-detected { margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); } .imp-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; margin-bottom: 16px; } .imp-map-row { display: block; } .imp-map-label { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; } .imp-map select.input { width: 100%; } .imp-preview-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; } .imp-table { border-collapse: collapse; font-size: .8rem; width: 100%; } .imp-table th, .imp-table td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; white-space: nowrap; } .imp-table th { background: var(--surface-2); position: sticky; top: 0; font-weight: 700; } /* ── Tableau de bord : marque entreprise + concours archivé ── */ .brand-chip { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--hero-ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 5px 13px; border-radius: 999px; } .ro-badge { display: inline-block; margin-top: 14px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: #ffd48a; background: rgba(244,181,15,.16); border: 1px solid rgba(244,181,15,.42); padding: 5px 13px; border-radius: 999px; } .acc-sep { border: none; border-top: 1px solid var(--line); margin: 22px 0 16px; } .acc-h { margin: 0 0 14px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }