/* Polices self-hébergées (Fontshare — ITF Free Font License, self-hosting permis) */ @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-Variable.woff2') format('woff2-variations'), url('fonts/ClashDisplay-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'), url('fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'), url('fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ========================================================================= LANCE FLOW STUDIO — Design System v3 Moderne, géométrique, contrasté · fond sombre, accent lime unique ========================================================================= */ :root { /* ======================================================================= Lance Flow Studio — Design System v3 Moderne, géométrique, contrasté. Fond sombre, accent lime unique. Pas de dégradé, pas de glassmorphism, pas de serif, pas d'italique. ======================================================================= */ /* Fonds */ --bg: #0B0B0F; --surface: #14141A; --surface-2: #1C1C24; --line-solid: #2A2A34; /* Texte */ --text: #F7F7F2; --text-2: #A8A8B3; --text-3: #6B6B78; /* Accents */ --accent: #D6FF3F; /* lime acide — CTA, chiffres clés, actif */ --accent-ink: #0B0B0F; /* texte SUR l'accent */ --coral: #FF5C7A; /* alertes, variations négatives */ --mint: #4ADE80; /* succès, variations positives */ --violet: #A78BFA; /* secondaire, graphiques */ /* Formes */ --r-sm: 10px; --r: 18px; --r-lg: 26px; --r-pill: 999px; /* Ombres — franches, jamais floues */ --shadow: 4px 4px 0 var(--line-solid); --shadow-acc: 4px 4px 0 var(--accent); /* ---- Compat layer : anciennes variables réutilisées dans tout le fichier, ré-alignées sur la nouvelle palette pour ne rien casser en aval. ---- */ --bg-alt: var(--surface); --bg-soft: var(--surface); --bg-card: var(--surface-2); --bg-elev: var(--surface-2); --bg-overlay: rgba(0, 0, 0, 0.70); --bg-glass: var(--surface); --bg-glass-strong: var(--surface-2); --ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3); --ink-4: var(--text-3); --ink-5: var(--line-solid); --line: var(--line-solid); --line-soft: #202028; --line-strong: #3A3A46; --gold: var(--accent); --gold-deep: #B9E62E; --gold-light: #E4FF85; --gold-soft: rgba(214, 255, 63, 0.10); --gold-tint: rgba(214, 255, 63, 0.04); --gold-glow: rgba(214, 255, 63, 0.40); --accent-deep: #B9E62E; --accent-light: #E4FF85; --accent-soft: rgba(214, 255, 63, 0.10); --accent-glow: rgba(214, 255, 63, 0.40); --success: var(--mint); --success-bg: rgba(74, 222, 128, 0.12); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.12); --error: var(--coral); --error-bg: rgba(255, 92, 122, 0.12); --r-xs: 8px; --r-md: var(--r); --r-xl: var(--r-lg); --shadow-xs: var(--shadow); --shadow-sm: var(--shadow); --shadow-md: var(--shadow); --shadow-lg: 8px 8px 0 var(--line-solid); --shadow-gold: var(--shadow-acc); --shadow-glow: var(--shadow-acc); /* Typography — self-hébergées, voir @font-face plus haut dans */ --font-display: 'Clash Display', system-ui, sans-serif; --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur-mid: 320ms; --dur-slow: 520ms; /* Layout */ --sidebar-w: 272px; --content-max: 1180px; --gutter: 28px; --gutter-lg: 44px; } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); color: var(--accent-light); } /* Force hidden attribute to override display: flex/grid/etc (fixes auth-gate bug) */ [hidden] { display: none !important; } /* Scrollbars dark theme */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: rgba(214, 255, 63, 0.18); border-radius: 999px; border: 2px solid var(--bg-alt); } ::-webkit-scrollbar-thumb:hover { background: rgba(214, 255, 63, 0.32); } * { scrollbar-color: rgba(214, 255, 63, 0.18) var(--bg-alt); scrollbar-width: thin; } /* Fond plat, uni — pas de dégradé décoratif */ body::before, body::after { content: none; } /* ========================================================================= TYPOGRAPHY ========================================================================= */ .display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; } .display em { font-style: normal; font-weight: 700; color: var(--accent); } .headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 2.6rem); line-height: 1.08; letter-spacing: -0.015em; } .headline em { font-style: normal; font-weight: 700; color: var(--accent); } .title { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; } .lede { font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .muted { color: var(--ink-3); } .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } /* ========================================================================= APP SHELL ========================================================================= */ .app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; min-height: 100dvh; } .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 28px 22px; border-right: 1px solid var(--line); background: var(--bg); z-index: 10; } .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 0; cursor: pointer; user-select: none; transition: opacity var(--dur-fast) var(--ease); min-width: 0; /* permet au texte de rétrécir/tronquer au lieu de forcer le débordement */ } .brand:hover { opacity: 0.85; } .brand-text { min-width: 0; overflow: hidden; } .brand-mark, .brand-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-logo { width: 36px; height: 36px; flex-shrink: 0; /* Symbole Lance Flow (PNG transparent) : simple halo lime */ filter: drop-shadow(0 0 12px rgba(214, 255, 63, 0.35)); object-fit: contain; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 36px; } .header-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink-3); transition: all var(--dur-fast) var(--ease); flex-shrink: 0; } .header-icon-btn svg { width: 18px; height: 18px; } .header-icon-btn:hover { background: var(--gold-soft); color: var(--accent-light); } .brand-mark { font-family: var(--font-body); font-weight: 700; font-size: 1.22rem; white-space: nowrap; letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.18em; } .brand-mark .flow { font-style: normal; font-weight: 700; color: var(--accent); } .brand-tag { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); padding-left: 2px; display: block; margin-top: -2px; } .brand-text { display: flex; flex-direction: column; min-width: 0; } .sidebar-header .brand { gap: 8px; flex: 1 1 auto; } .sidebar-header .brand-logo { width: 34px; height: 34px; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-section-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); padding: 16px 12px 8px; } .nav-section-label:first-child { padding-top: 0; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; font-size: 0.94rem; transition: all var(--dur-fast) var(--ease); position: relative; } .nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .nav-item:hover { background: var(--bg-soft); color: var(--ink); } .nav-item.active { background: rgba(214, 255, 63, 0.10); color: var(--accent-light); box-shadow: inset 0 0 0 1px rgba(214, 255, 63, 0.20); } .nav-item.active .nav-item-icon { opacity: 1; color: var(--accent-light); } .nav-item.active::before { content: ''; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--accent); border-radius: 0 2px 2px 0; box-shadow: 0 0 0 3px var(--accent-soft); } .sidebar-footer { padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--ink-3); } /* ========================================================================= MAIN AREA ========================================================================= */ .main { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .topbar { display: none; /* mobile only */ align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(11, 11, 15, 0.8); position: sticky; top: 0; z-index: 8; } .topbar .brand { margin-bottom: 0; } .topbar .brand-mark { font-size: 1.3rem; } .content { flex: 1; padding: var(--gutter-lg); max-width: var(--content-max); width: 100%; margin: 0 auto; } /* Mobile bottom nav — hidden on desktop, shown via media query on mobile */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: rgba(11, 11, 15, 0.88); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; border-radius: var(--r-sm); color: var(--ink-3); gap: 4px; transition: color var(--dur-fast) var(--ease); } .bottom-nav-item svg { width: 20px; height: 20px; } .bottom-nav-item span { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; } .bottom-nav-item.active { color: var(--accent-light); } .bottom-nav-item.active svg { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); } /* ========================================================================= VIEWS ========================================================================= */ .view { display: none; animation: viewIn var(--dur-mid) var(--ease); } .view.active { display: block; } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .view-header { margin-bottom: 36px; } .view-header .eyebrow { display: block; margin-bottom: 14px; } .view-header .lede { margin-top: 14px; } /* ========================================================================= COMPONENTS — BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; letter-spacing: -0.005em; cursor: pointer; transition: all var(--dur-fast) var(--ease); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary, .btn-gold { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: var(--shadow-acc); border: 0; } .btn-primary:hover, .btn-gold:hover { background: var(--accent); box-shadow: 2px 2px 0 var(--line-solid); transform: translate(2px, 2px); } .btn-primary:active, .btn-gold:active { transform: translate(3px, 3px); box-shadow: none; } .btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translate(2px, 2px); } .btn-ghost { background: transparent; color: var(--ink-2); border: 1.5px solid transparent; } .btn-ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--line); } .btn-sm { padding: 7px 14px; font-size: 0.84rem; } .btn-icon { padding: 9px; aspect-ratio: 1; } /* ========================================================================= COMPONENTS — FORM ========================================================================= */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .input, .textarea, .select { width: 100%; padding: 11px 14px; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-family: var(--font-body); font-size: 0.96rem; color: var(--ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder, .textarea::placeholder { color: var(--ink-4); } .textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .select option { background: var(--bg-elev); color: var(--ink); } .fieldset { display: grid; gap: 18px; } .fieldset-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 540px) { .fieldset-row { grid-template-columns: 1fr; } } /* ========================================================================= COMPONENTS — CARD ========================================================================= */ .card { background: var(--bg-glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: all var(--dur-mid) var(--ease); position: relative; overflow: hidden; } /* Subtle inner glow on top edge — gives that premium glassmorphism look */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); pointer-events: none; } .card-elevated { background: var(--bg-glass-strong); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .card:hover { border-color: rgba(214, 255, 63, 0.20); } /* ========================================================================= HOME VIEW ========================================================================= */ .home-hero { padding: 24px 0 48px; border-bottom: 1px solid var(--line-soft); margin-bottom: 48px; position: relative; } .home-hero .display { margin: 18px 0 22px; max-width: 18ch; } .home-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--line); } .home-meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 110px; } .home-meta-item .mono { font-size: 1.5rem; color: var(--ink); font-weight: 500; } .home-meta-item .label { font-size: 0.68rem; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .tool-card { background: var(--bg-glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 24px; cursor: pointer; transition: all var(--dur-mid) var(--ease); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 200px; text-align: left; width: 100%; isolation: isolate; } .tool-card::before { content: ''; position: absolute; inset: 0; background: var(--accent-soft); opacity: 0; transition: opacity var(--dur-mid) var(--ease); pointer-events: none; z-index: -1; } .tool-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); opacity: 0; transition: opacity var(--dur-mid) var(--ease); } .tool-card:hover { border-color: rgba(214, 255, 63, 0.45); transform: translateY(-3px); box-shadow: var(--shadow-md), 0 16px 48px rgba(214, 255, 63, 0.12); } .tool-card:hover::before, .tool-card:hover::after { opacity: 1; } .tool-card-icon { width: 36px; height: 36px; color: var(--accent); filter: drop-shadow(0 0 12px rgba(214, 255, 63, 0.4)); transition: transform var(--dur-mid) var(--ease); } .tool-card:hover .tool-card-icon { transform: scale(1.08); } .tool-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; } .tool-card-desc { font-size: 0.92rem; color: var(--ink-3); line-height: 1.5; flex: 1; } .tool-card-cta { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light); padding-top: 12px; border-top: 1px solid rgba(214, 255, 63, 0.10); transition: color var(--dur-fast) var(--ease); } .tool-card:hover .tool-card-cta { color: var(--accent); } .tool-card-cta svg { transition: transform var(--dur-fast) var(--ease); } .tool-card:hover .tool-card-cta svg { transform: translateX(3px); } /* ========================================================================= DROPZONE ========================================================================= */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 32px; background: var(--bg-card); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; cursor: pointer; transition: all var(--dur-mid) var(--ease); user-select: none; min-height: 240px; } .dropzone:hover { border-color: var(--gold); background: var(--gold-tint); } .dropzone.active { border-color: var(--gold); border-style: solid; background: var(--gold-soft); box-shadow: var(--shadow-gold); transform: scale(1.005); } .dropzone-icon { width: 44px; height: 44px; color: var(--gold-deep); } .dropzone-title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; } .dropzone-desc { color: var(--ink-3); max-width: 36ch; font-size: 0.95rem; } .dropzone-mobile { display: none; } .dropzone-desktop { display: block; } /* ========================================================================= DÉTOURAGE — RESULTS ========================================================================= */ .detourage-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 0 26px; flex-wrap: wrap; } .detourage-toolbar-info { margin-right: auto; font-size: 0.9rem; color: var(--ink-3); } .detourage-toolbar-info .mono { color: var(--ink); font-weight: 500; } .options-bar { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 22px; } .option { display: flex; align-items: center; gap: 10px; } .option-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .option-toggle { display: inline-flex; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 2px; gap: 1px; } .option-toggle button { padding: 5px 11px; border-radius: 4px; font-size: 0.83rem; font-weight: 500; color: var(--ink-3); transition: all var(--dur-fast) var(--ease); } .option-toggle button.active { background: var(--accent); color: #0B0B0F; font-weight: 600; box-shadow: 4px 4px 0 var(--line-solid); } .custom-bg-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--gold); border-radius: var(--r-md); margin-bottom: 22px; animation: cardIn var(--dur-mid) var(--ease); } .custom-bg-row[hidden] { display: none; } .custom-bg-empty, .custom-bg-preview { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .custom-bg-empty[hidden], .custom-bg-preview[hidden] { display: none; } .custom-bg-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; } .custom-bg-name { font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } @media (max-width: 640px) { .custom-bg-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; } .custom-bg-empty, .custom-bg-preview { flex-wrap: wrap; } .custom-bg-empty > div:nth-child(2) { flex: 1 1 100%; } } .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .result-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; animation: cardIn var(--dur-mid) var(--ease); } @keyframes cardIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .result-canvas { position: relative; aspect-ratio: 1; background: linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; background-color: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .result-canvas img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-mid) var(--ease); } .result-canvas[data-state="processing"] img { opacity: 0.35; } .result-canvas[data-state="error"] { background: var(--error-bg); } /* Traitement — un balayage --accent traverse l'image de haut en bas, en boucle */ .result-shimmer { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 0 3px rgba(214, 255, 63, 0.18); pointer-events: none; display: none; animation: resultSweep 1.3s linear infinite; } .result-canvas[data-state="processing"] .result-shimmer { display: block; } @keyframes resultSweep { 0% { top: 0%; opacity: 1; } 100% { top: 100%; opacity: 1; } } /* Révélation — le fond disparaît par masque progressif, de haut en bas, sur 600ms */ /* > img : uniquement l'image résultat, PAS l'image "avant" du slider (sinon l'animation écrase son clip-path et elle recouvre tout) */ .result-canvas[data-state="done"] > img { opacity: 1; animation: resultReveal 600ms var(--ease) both; } @keyframes resultReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } } /* Résultat — l'objet se soulève une fois révélé */ .result-canvas[data-state="done"] { animation: resultLift 320ms var(--ease) 600ms both; } @keyframes resultLift { from { transform: translateY(0); box-shadow: none; } to { transform: translateY(-4px); box-shadow: var(--shadow-acc); } } /* Comparaison — slider avant/après, poignée en --accent */ .result-compare { position: absolute; inset: 0; display: none; pointer-events: none; } .result-canvas[data-state="done"] .result-compare { display: block; pointer-events: auto; } .result-compare-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg-soft); clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .result-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: var(--accent); transform: translateX(-50%); cursor: ew-resize; touch-action: none; } .result-compare-handle::after { content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); font-size: 13px; box-shadow: var(--shadow-acc); } .result-compare-label { position: absolute; top: 8px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(11, 11, 15, 0.72); color: #fff; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; } .result-compare-label.before { left: 8px; } .result-compare-label.after { right: 8px; background: var(--accent); color: var(--accent-ink); } .result-canvas[data-state="done"] .result-compare { cursor: ew-resize; touch-action: none; } .detourage-eta { color: var(--ink-3); margin-left: 6px; } .detourage-bar { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line-soft); overflow: hidden; } .detourage-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width var(--dur-mid) var(--ease); } .result-meta { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--line-soft); } .result-status { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); } .result-status.ok { color: var(--success); } .result-status.err { color: var(--error); } .result-actions { display: flex; gap: 4px; } .icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink-3); transition: all var(--dur-fast) var(--ease); } .icon-btn:hover { background: var(--gold-soft); color: var(--gold-deep); } .icon-btn svg { width: 16px; height: 16px; } /* Model loader */ .model-loader { display: none; align-items: center; gap: 14px; padding: 16px 20px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-md); margin-bottom: 18px; } .model-loader.show { display: flex; } .model-loader-spinner { width: 22px; height: 22px; border: 2.5px solid var(--gold-soft); border-top-color: var(--gold-deep); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } .model-loader-content { flex: 1; min-width: 0; } .model-loader-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; margin-bottom: 4px; } .model-loader-text { font-size: 0.85rem; color: var(--ink-2); } .model-loader-progress { height: 3px; background: rgba(184, 146, 76, 0.2); border-radius: 2px; overflow: hidden; margin-top: 8px; } .model-loader-bar { height: 100%; background: var(--gold); width: 0%; transition: width var(--dur-fast) linear; } /* ========================================================================= FICHE IA ========================================================================= */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 920px) { .split { grid-template-columns: 1fr; } } .split-form .card, .split-output .card { padding: 26px; } .output-section { margin-bottom: 22px; } .output-section:last-child { margin-bottom: 0; } .output-section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .output-content { font-family: var(--font-body); font-size: 0.96rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-sm); min-height: 38px; } .output-content.title-content { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; } .output-content.empty { color: var(--ink-4); } .copy-btn { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px; border-radius: 4px; transition: all var(--dur-fast) var(--ease); } .copy-btn:hover { background: var(--gold-soft); color: var(--gold-deep); } .copy-btn.ok { color: var(--success); } /* Loading skeleton — pulse uni, pas de balayage dégradé */ .skeleton { background: var(--bg-soft); animation: skeletonPulse 1.4s ease-in-out infinite; border-radius: var(--r-sm); height: 0.95em; margin: 0.4em 0; } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ========================================================================= MARGES ========================================================================= */ .marges-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; } @media (max-width: 920px) { .marges-grid { grid-template-columns: 1fr; } } /* ========================================================================= VENTES — Suivi business manuel (sync Supabase) ========================================================================= */ .ventes-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 920px) { .ventes-kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .ventes-kpis { grid-template-columns: 1fr; } } .ventes-kpi { position: relative; padding: 18px 20px; background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: all var(--dur-mid) var(--ease); } .ventes-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .ventes-kpi:hover { border-color: rgba(214, 255, 63, 0.22); transform: translateY(-2px); } .ventes-kpi-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .ventes-kpi-label-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(214, 255, 63, 0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .ventes-kpi-label-icon svg { width: 12px; height: 12px; } .ventes-kpi-value { font-family: var(--font-body); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; } .ventes-kpi-value.up { color: var(--accent-light); } .ventes-kpi-value.down { color: #FF5C7A; } .ventes-kpi-meta { margin-top: 6px; font-size: 0.78rem; color: var(--ink-3); } /* Toolbar (period + actions) */ .ventes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .ventes-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Sales table */ .ventes-table { display: flex; flex-direction: column; } .ventes-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ventes-tools #vSearch { flex: 1 1 260px; max-width: 380px; } .ventes-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--accent); border-radius: var(--r-md, 12px); padding: 8px 12px; } .ventes-bulk .input { width: 210px; } .ventes-bulk-count { font-size: 0.82rem; color: var(--ink); font-weight: 600; } .ventes-row .col-sel { display: flex; align-items: center; justify-content: center; } .ventes-row .col-sel input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--ink-3); border-radius: 5px; background: transparent; cursor: pointer; position: relative; margin: 0; transition: all .12s; } .ventes-row .col-sel input:hover { border-color: var(--accent); } .ventes-row .col-sel input:checked { background: var(--accent); border-color: var(--accent); } .ventes-row .col-sel input:checked::after { content: ''; position: absolute; left: 4px; top: 0px; width: 5px; height: 10px; border: solid var(--accent-ink, #0B0B0F); border-width: 0 2px 2px 0; transform: rotate(45deg); } .ventes-row.selected { background: rgba(214, 255, 63, 0.06); } .ventes-row { display: grid; grid-template-columns: 28px 90px 1fr 110px 90px 90px 100px 80px; gap: 10px; padding: 12px 10px; align-items: center; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; transition: background var(--dur-fast) var(--ease); } .ventes-row:hover { background: rgba(255, 255, 255, 0.02); } .ventes-row:last-child { border-bottom: 0; } .ventes-row.head { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); padding: 10px; background: var(--bg-soft); border-radius: 8px 8px 0 0; } .ventes-row .col-date { font-family: var(--font-mono); color: var(--ink-3); font-size: 0.78rem; } .ventes-row .col-title { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ventes-row .col-platform { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(255, 255, 255, 0.04); border-radius: 999px; font-size: 0.74rem; color: var(--ink-2); width: fit-content; } .ventes-row .col-platform.vinted { background: rgba(0, 162, 174, 0.12); color: #00C7DC; } .ventes-row .col-platform.vinted-pro { background: rgba(167, 139, 250, 0.12); color: #A78BFA; } .ventes-row .col-platform.leboncoin { background: rgba(255, 107, 53, 0.12); color: #FF6B35; } .ventes-row .col-money { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); } .ventes-row .col-profit { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .ventes-row .col-profit.positive { color: var(--accent-light); } .ventes-row .col-profit.negative { color: #FF5C7A; } .ventes-row .col-actions { display: flex; gap: 4px; justify-content: flex-end; } .ventes-row .col-actions button { width: 28px; height: 28px; background: transparent; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); } .ventes-row .col-actions button:hover { color: var(--ink); border-color: var(--line-strong); } .ventes-row .col-actions button.danger:hover { color: #FF5C7A; border-color: rgba(255, 92, 122, 0.30); } .ventes-row .col-actions svg { width: 13px; height: 13px; } @media (max-width: 720px) { .ventes-row { grid-template-columns: 26px 1fr auto; grid-template-areas: "sel main profit" "sel date act"; column-gap: 10px; row-gap: 4px; align-items: center; } .ventes-row .col-hide-mobile { display: none; } .ventes-row .col-sel { grid-area: sel; align-self: start; padding-top: 2px; } .ventes-row .col-title { grid-area: main; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .ventes-row .col-date { grid-area: date; font-size: 0.72rem; } .ventes-row .col-profit { grid-area: profit; justify-self: end; text-align: right; } .ventes-row .col-actions { grid-area: act; justify-self: end; } .ventes-row.head { grid-template-columns: 1fr; grid-template-areas: "sel"; } .ventes-row.head > :not(.col-sel) { display: none; } .ventes-row.head .col-sel { justify-content: flex-start; gap: 10px; } .ventes-row.head .col-sel::after { content: 'Tout sélectionner'; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-3); } .cost-missing { white-space: nowrap; } } /* Empty state */ .ventes-empty { padding: 60px 20px; text-align: center; } .ventes-empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(214, 255, 63, 0.10); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 28px; } .ventes-empty-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; } .ventes-empty-text { color: var(--ink-3); font-size: 0.88rem; max-width: 380px; margin: 0 auto; line-height: 1.5; } /* Modal (add / edit) */ .ventes-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; } .ventes-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 15, 17, 0.72); } .ventes-modal-card { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px 28px 24px; background: var(--bg-glass-strong); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 8px 8px 0 var(--line-solid); animation: modalIn 0.2s var(--ease-spring); } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .ventes-modal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .ventes-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .ventes-modal-title { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .ventes-modal-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ventes-modal-close:hover { color: var(--ink); border-color: var(--line-strong); } .ventes-modal-form { display: flex; flex-direction: column; gap: 14px; } .ventes-modal-form .field { display: flex; flex-direction: column; gap: 5px; } .ventes-modal-form label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); } .ventes-modal-form input, .ventes-modal-form select { padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-family: var(--font-body); font-size: 0.92rem; outline: none; transition: all var(--dur-fast) var(--ease); } .ventes-modal-form input:focus, .ventes-modal-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(214, 255, 63, 0.12); } .ventes-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ventes-modal-summary { margin-top: 6px; padding: 14px 16px; background: rgba(214, 255, 63, 0.08); border: 1px solid rgba(214, 255, 63, 0.30); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; } .ventes-modal-summary-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-2); } .ventes-modal-summary-value { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; color: var(--accent-light); font-variant-numeric: tabular-nums; } .ventes-modal-summary-value.negative { color: #FF5C7A; } .ventes-modal-actions { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; } /* Sync indicator (top right of view) */ .ventes-sync { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(214, 255, 63, 0.06); border: 1px solid rgba(214, 255, 63, 0.18); border-radius: 999px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.04em; } .ventes-sync .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .ventes-sync.saving .dot { animation: pulseDot 1s ease-in-out infinite; background: #FBBF24; box-shadow: 0 0 6px #FBBF24; } .ventes-sync.error .dot { background: #FF5C7A; box-shadow: none; animation: none; } /* ========================================================================= DASHBOARD — Pilote temps réel ========================================================================= */ .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 920px) { .dash-grid { grid-template-columns: 1fr; } } /* ----- Status bar (top of dashboard) ----- */ .dash-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 20px; background: rgba(214, 255, 63, 0.05); border: 1px solid rgba(214, 255, 63, 0.18); border-radius: 16px; margin-bottom: 22px; } @media (max-width: 480px) { /* Sur mobile, le pill "Démo/Live" ne doit pas être écrasé dans une colonne étroite par le flex row — sinon border-radius:999px sur du texte qui wrap donne un blob illisible. */ .dash-status-pill { white-space: normal; border-radius: var(--r); text-align: left; } } .dash-status-info { display: flex; align-items: center; gap: 14px; } .dash-status-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(228, 255, 133, 0.16); display: flex; align-items: center; justify-content: center; color: var(--accent-light); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); } .dash-status-icon svg { width: 22px; height: 22px; } .dash-status-text { display: flex; flex-direction: column; } .dash-status-title { font-weight: 600; font-size: 0.96rem; color: var(--ink); } .dash-status-sub { font-size: 0.82rem; color: var(--ink-3); margin-top: 2px; } .dash-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(228, 255, 133, 0.16); color: var(--accent-light); border-radius: 999px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border: 1px solid rgba(228, 255, 133, 0.30); } .dash-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #E4FF85; box-shadow: 0 0 8px #E4FF85; animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .dash-status-pill.offline { background: rgba(255, 255, 255, 0.05); color: var(--ink-3); border-color: var(--line-strong); } .dash-status-pill.offline .dot { background: var(--ink-3); box-shadow: none; animation: none; } .dash-status-pill.offline .dot { background: #FBBF24; box-shadow: 0 0 8px #FBBF24; animation: none; } /* ----- KPI cards row ----- */ .dash-kpis { display: none !important; } .dash-grid { grid-template-columns: 1fr !important; } .dash-kpis-old { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 720px) { .dash-kpis { grid-template-columns: 1fr; } } .kpi-card { position: relative; padding: 18px 20px 16px; background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: all var(--dur-mid) var(--ease); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .kpi-card:hover { border-color: rgba(214, 255, 63, 0.22); transform: translateY(-2px); } .kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .kpi-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); } .kpi-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(214, 255, 63, 0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .kpi-icon svg { width: 15px; height: 15px; } .kpi-value { font-family: var(--font-body); font-weight: 700; font-size: 2rem; letter-spacing: -0.025em; color: var(--ink); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .kpi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi-delta { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; } .kpi-delta.up { background: rgba(228, 255, 133, 0.12); color: #E4FF85; } .kpi-delta.down { background: rgba(251, 113, 133, 0.12); color: #FF5C7A; } .kpi-delta.flat { background: rgba(255, 255, 255, 0.05); color: var(--ink-3); } .kpi-spark { flex: 1; height: 26px; } .kpi-spark svg { width: 100%; height: 100%; } .kpi-spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .kpi-spark .area { fill: rgba(214, 255, 63, 0.14); stroke: none; } /* ----- Bots panel (right of KPIs) ----- */ .dash-bots-panel { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 6px; } .dash-bots-panel .dash-bots-panel-head { grid-column: 1 / -1; } @media (max-width: 720px) { .dash-bots-panel { grid-template-columns: 1fr; } } .dash-bots-panel { background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } .dash-bots-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .dash-bots-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; } .dash-bots-panel-title { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; color: var(--ink); } .dash-bots-panel-title svg { width: 16px; height: 16px; color: var(--accent); } .dash-bots-panel-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-light); font-weight: 600; } .dash-bot-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-radius: 8px; transition: background var(--dur-fast) var(--ease); } .dash-bot-row:hover { background: rgba(255, 255, 255, 0.02); } .dash-bot-info { display: flex; align-items: center; gap: 10px; } .dash-bot-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(214, 255, 63, 0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-light); } .dash-bot-icon svg { width: 14px; height: 14px; } .dash-bot-name { font-size: 0.86rem; color: var(--ink); font-weight: 500; } .dash-bot-status { font-family: var(--font-mono); font-size: 0.70rem; padding: 2px 8px; border-radius: 6px; background: rgba(228, 255, 133, 0.12); color: var(--accent-light); } .dash-bot-status.off { background: rgba(255, 255, 255, 0.04); color: var(--ink-4); } /* Mini toggle (visual only for now) */ .dash-mini-toggle { width: 30px; height: 18px; background: rgba(228, 255, 133, 0.20); border-radius: 999px; position: relative; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .dash-mini-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #E4FF85; top: 2px; right: 2px; transition: all var(--dur-fast) var(--ease); box-shadow: 0 0 8px rgba(228, 255, 133, 0.45); } .dash-mini-toggle.off { background: rgba(255, 255, 255, 0.08); } .dash-mini-toggle.off::after { background: var(--ink-4); right: auto; left: 2px; box-shadow: none; } /* ----- Main chart row ----- */ .dash-mid-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 920px) { .dash-mid-grid { grid-template-columns: 1fr; } } .dash-panel { background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; position: relative; overflow: hidden; } .dash-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dash-panel-title { font-weight: 600; font-size: 0.94rem; color: var(--ink); } .dash-panel-sub { font-family: var(--font-mono); font-size: 0.70rem; letter-spacing: 0.06em; color: var(--ink-3); } /* Performance multi-line chart */ .dash-chart { width: 100%; height: 180px; position: relative; } .dash-chart svg { width: 100%; height: 100%; } .dash-chart-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-4); text-align: center; font-size: 0.86rem; padding: 0 20px; } .dash-chart-empty svg { color: var(--ink-4); opacity: 0.6; } .dash-list-empty { padding: 28px 12px; text-align: center; color: var(--ink-4); font-size: 0.86rem; } .dash-chart .grid-line { stroke: rgba(255, 255, 255, 0.04); stroke-width: 1; } .dash-chart .axis-label { fill: var(--ink-4); font-family: var(--font-mono); font-size: 9px; } .dash-chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dash-chart .series-area { stroke: none; opacity: 0.18; } .dash-chart .series-dot { stroke-width: 2; fill: var(--bg-elev); } .dash-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .dash-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-3); } .dash-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* Donut Taux de réponse */ .dash-donut-panel { display: flex; flex-direction: column; align-items: center; } .dash-donut-svg { width: 140px; height: 140px; } .dash-donut-svg svg { width: 100%; height: 100%; transform: rotate(-90deg); } .dash-donut-svg circle { fill: none; stroke-width: 12; } .dash-donut-svg .bg { stroke: rgba(255, 255, 255, 0.06); } .dash-donut-svg .fg { stroke: var(--accent); transition: stroke-dasharray 0.8s var(--ease); } .dash-donut-center { position: relative; margin-top: -84px; text-align: center; pointer-events: none; } .dash-donut-pct { font-weight: 700; font-size: 1.7rem; color: var(--accent-light); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dash-donut-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; max-width: 104px; margin-left: auto; margin-right: auto; line-height: 1.4; } .dash-donut-target { margin-top: 14px; font-size: 0.78rem; color: var(--ink-3); } .dash-donut-target b { color: var(--ink-2); } /* ----- Bottom row: Top annonces + Activity feed ----- */ .dash-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .dash-bottom-grid { grid-template-columns: 1fr; } } /* Top annonces */ .dash-top-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .dash-top-item:last-child { border-bottom: 0; } .dash-top-thumb { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .dash-top-thumb svg { width: 18px; height: 18px; } .dash-top-info { flex: 1; min-width: 0; } .dash-top-title { font-size: 0.86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .dash-top-bar-wrap { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; } .dash-top-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.6s var(--ease); box-shadow: 0 0 8px var(--accent-glow); } .dash-top-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Activity feed */ /* Activité des bots */ .bot-act { margin-bottom: 16px; } .bot-act-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; } .bot-act-tile { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 14px 12px; text-align: center; } .bot-act-tile.total { border-color: var(--accent); } .bot-act-num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--ink); line-height: 1.1; } .bot-act-tile.total .bot-act-num { color: var(--accent); } .bot-act-lbl { font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; } .bot-act-offers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .bot-act-chip { font-size: 0.78rem; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--line-soft); color: var(--ink-2, var(--ink)); } .bot-act-chip b { color: var(--ink); font-family: var(--font-mono); } .bot-act-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 10px; } .bot-act-num.skel { color: transparent !important; background: linear-gradient(90deg, var(--line-soft) 25%, rgba(255,255,255,.08) 50%, var(--line-soft) 75%); background-size: 200% 100%; animation: skelMove 1.2s linear infinite; border-radius: 8px; min-width: 60%; display: inline-block; filter: none !important; } @keyframes skelMove { to { background-position: -200% 0; } } .tile-delta { font-family: var(--font-mono); font-size: 0.72rem; margin-top: 4px; min-height: 1em; color: var(--ink-3); } .tile-delta.up { color: var(--success, #4ADE80); } .tile-delta.down { color: var(--danger, #F87171); } .tile-spark { height: 22px; margin-top: 6px; } .tile-spark svg { width: 100%; height: 100%; display: block; } .tile-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; } .tile-spark path.area { fill: var(--accent); opacity: .12; stroke: none; } .goal-card { display: grid; grid-template-columns: 96px 1fr minmax(160px, 1.2fr); gap: 18px; align-items: center; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 14px 16px; margin-top: 14px; } .goal-ring { position: relative; width: 96px; height: 96px; } .goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .goal-ring circle { fill: none; stroke-width: 9; } .goal-ring .bg { stroke: var(--line-soft); } .goal-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .8s var(--ease, ease); } .goal-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; color: var(--ink); } .goal-line { font-size: 0.95rem; color: var(--ink-3); margin-top: 4px; } .goal-line b { color: var(--ink); font-family: var(--font-mono); } .goal-sub { font-size: 0.76rem; color: var(--ink-3); margin-top: 4px; } .goal-edit { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .goal-curve { height: 84px; } .goal-curve svg { width: 100%; height: 100%; display: block; } .goal-curve .line { fill: none; stroke: var(--accent); stroke-width: 2; } .goal-curve .target { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; } .goal-curve .area { fill: var(--accent); opacity: .12; } @media (max-width: 900px) { .goal-card { grid-template-columns: 96px 1fr; } .goal-curve { grid-column: 1 / -1; } } .onboard { margin-bottom: 16px; border-color: var(--accent); } .onboard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .onboard-step { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 12px 14px; } .onboard-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-3); flex-shrink: 0; margin-top: 2px; } .onboard-step.done .onboard-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(214,255,63,.15); } .onboard-t { font-size: 0.9rem; font-weight: 600; color: var(--ink); } .onboard-step.done .onboard-t { text-decoration: line-through; color: var(--ink-3); } .onboard-s { font-size: 0.76rem; color: var(--ink-3); margin-top: 3px; line-height: 1.4; } @media (max-width: 800px) { .onboard-steps { grid-template-columns: 1fr; } } #dashFeed, #dashTopItems { max-height: 340px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--line-strong, #3a3a44) transparent; } #dashFeed::-webkit-scrollbar, #dashTopItems::-webkit-scrollbar { width: 6px; } #dashFeed::-webkit-scrollbar-thumb, #dashTopItems::-webkit-scrollbar-thumb { background: var(--line-strong, #3a3a44); border-radius: 3px; } @media (max-width: 820px) { .view-header .lede { display: none; } .view-header .headline { font-size: clamp(1.5rem, 7vw, 1.9rem); margin-bottom: 4px; } .view-header { margin-bottom: 14px; } .view-header .eyebrow { font-size: 0.62rem; } .dash-panel-head { flex-wrap: wrap; gap: 4px 12px; } .money-hint { display: none; } } .install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; gap: 12px; background: var(--bg-elev, #17171d); border: 1px solid var(--accent); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); } .install-banner.show { display: flex; } .install-banner img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .install-banner .ib-txt { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--ink); line-height: 1.35; } .install-banner .ib-txt small { display: block; color: var(--ink-3); font-size: 0.72rem; margin-top: 2px; } .install-banner button { flex-shrink: 0; } @media (min-width: 821px) { .install-banner { display: none !important; } } .remote { margin-bottom: 16px; } .rc-screen { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line-soft); box-shadow: inset 0 2px 10px rgba(0,0,0,.35); } .remote-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 5px rgba(255,255,255,.06); } .rc-screen[data-s="live"] .remote-dot { background: var(--mint); box-shadow: 0 0 0 5px rgba(74,222,128,.18), 0 0 18px rgba(74,222,128,.7); } .rc-screen[data-s="test"] .remote-dot { background: #FBBF24; box-shadow: 0 0 0 5px rgba(251,191,36,.18), 0 0 18px rgba(251,191,36,.6); } .rc-screen[data-s="paused"] .remote-dot { background: var(--coral); box-shadow: 0 0 0 5px rgba(255,92,122,.18), 0 0 18px rgba(255,92,122,.55); } .rc-screen-txt { flex: 1; min-width: 0; } .rc-screen-label { font: 600 0.64rem var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .rc-screen-t { font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: 2px; } .rc-screen-sub { font-size: 0.7rem; color: var(--ink-3); text-align: right; max-width: 36%; line-height: 1.3; } .rc-power { margin: 14px 0 6px; } .rc-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 16px; border-radius: 16px; border: 0; font: inherit; font-size: 1.02rem; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: transform .08s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; } .rc-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .rc-btn:active { transform: scale(.98); } .rc-btn:hover { filter: brightness(1.06); } .rc-btn-stop { background: var(--coral); color: #fff; box-shadow: 0 10px 26px -12px rgba(255,92,122,.75); } .rc-btn-go { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 26px -12px rgba(214,255,63,.6); } .remote[data-master="on"] .rc-btn-go, .remote[data-master="off"] .rc-btn-stop, .remote[data-master="unknown"] .rc-btn-go { display: none; } .remote[data-master="unknown"] .rc-btn-stop { opacity: .4; pointer-events: none; } .rc-label { font: 600 0.66rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 16px 2px 10px; } .rc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 900px) { .rc-grid { grid-template-columns: repeat(4, 1fr); } } .rc-toggle { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 122px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; cursor: pointer; transition: transform .08s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; -webkit-tap-highlight-color: transparent; } .rc-toggle:active { transform: scale(.97); } .rc-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); color: var(--ink-3); transition: background .18s, color .18s; } .rc-ico svg { width: 20px; height: 20px; } .rc-name { font-size: 0.98rem; font-weight: 700; margin-top: 6px; } .rc-desc { font-size: 0.72rem; color: var(--ink-3); line-height: 1.3; } .rc-state { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px; font: 700 0.68rem var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--ink-3); } .rc-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .rc-toggle[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px rgba(214,255,63,.12), 0 12px 28px -14px rgba(214,255,63,.45); } .rc-toggle[aria-checked="true"] .rc-ico { background: var(--accent); color: var(--accent-ink); } .rc-toggle[aria-checked="true"] .rc-state { color: var(--accent); } .rc-toggle[data-rc="preview"][aria-checked="true"] { border-color: #FBBF24; background: rgba(251,191,36,.09); box-shadow: 0 0 0 1px rgba(251,191,36,.12), 0 12px 28px -14px rgba(251,191,36,.4); } .rc-toggle[data-rc="preview"][aria-checked="true"] .rc-ico { background: #FBBF24; color: #0B0B0F; } .rc-toggle[data-rc="preview"][aria-checked="true"] .rc-state { color: #FBBF24; } .rc-toggle.pending { animation: rcPulse 1s ease-in-out infinite; } .rc-toggle.pending .rc-state { color: var(--ink-2); } @keyframes rcPulse { 50% { opacity: .55; } } .rc-toggle:disabled { opacity: .4; cursor: not-allowed; } .remote[data-master="off"] .rc-toggle:not(:disabled) { opacity: .55; } .remote-note { font-size: 0.76rem; color: var(--ink-3); margin-top: 12px; line-height: 1.5; } .remote-note.warn { color: #FBBF24; } .stag-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); } .stag-item:first-child { border-top: 0; } .stag-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--line-soft); flex-shrink: 0; } .stag-main { flex: 1; min-width: 0; } .stag-title { font-size: 0.88rem; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stag-meta { font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; } .cost-missing { border: 1px dashed var(--accent); background: transparent; color: var(--accent); border-radius: var(--r-pill); font: inherit; font-size: 0.74rem; padding: 3px 10px; cursor: pointer; } .cost-missing:hover { background: var(--accent); color: var(--accent-ink); } .eye-btn { border: 1px solid var(--line-soft); background: var(--bg-soft); color: var(--ink-2, var(--ink)); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .eye-btn:hover { border-color: var(--accent); color: var(--accent); } .eye-btn svg { width: 16px; height: 16px; } #walletPanel.money-hidden .money { filter: blur(10px); user-select: none; transition: filter .2s; } #walletPanel .money { transition: filter .2s; } .rev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; } .rev-title { font-size: 0.86rem; font-weight: 600; color: var(--ink); } .rev-chart { height: 190px; position: relative; } .rev-chart svg { width: 100%; height: 100%; display: block; } .rev-bar { fill: var(--accent); opacity: 0.85; transform-box: fill-box; transform-origin: bottom; animation: revGrow .5s var(--ease, ease) both; cursor: pointer; } .rev-bar:hover { opacity: 1; } .rev-bar.zero { fill: var(--line-soft); opacity: 1; } @keyframes revGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .rev-axis { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); } .rev-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--bg-elev, #17171d); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; font-size: 0.78rem; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.4); } #walletPanel.money-hidden .rev-tip b { filter: blur(6px); } .rev-sum { font-size: 0.8rem; color: var(--ink-3); margin-top: 6px; } .rev-sum b { color: var(--ink); font-family: var(--font-mono); } .best-sale { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 12px; } .best-sale img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--line-soft); } .best-sale-main { flex: 1; min-width: 0; } .best-sale-title { font-size: 0.92rem; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .best-sale-meta { font-size: 0.76rem; color: var(--ink-3); margin-top: 3px; } .best-sale-price { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent); font-weight: 600; } #walletPanel.money-hidden .best-sale-price { filter: blur(9px); } input:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-soft, #15151b) inset !important; -webkit-text-fill-color: var(--ink, #fff) !important; caret-color: var(--ink, #fff); transition: background-color 9999s; } .money-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 14px; align-items: stretch; } .money-cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .money-gen { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 14px; } .money-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .money-row.two { grid-template-columns: repeat(2, 1fr); } .money-hint { text-transform: none; letter-spacing: 0; font-family: inherit; opacity: .7; } .tile-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px dashed var(--ink-3); color: var(--ink-2, var(--ink)); font: inherit; font-size: 0.8rem; text-align: center; text-align-last: center; cursor: pointer; padding: 3px 16px 3px 6px; margin-top: 6px; max-width: 100%; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; } .tile-select:hover, .tile-select:focus { color: var(--accent); outline: none; } .tile-select option { background: var(--bg-elev, #17171d); color: var(--ink); } .money-bal { display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 14px; } .money-bal .bot-act-tile { flex: 1; display: flex; flex-direction: column; justify-content: center; } .money-layout .bot-act-tile { min-width: 0; padding: 12px 8px; } .money-layout .bot-act-num { font-size: clamp(0.95rem, 1.5vw, 1.35rem); white-space: nowrap; } @media (max-width: 900px) { .money-layout { grid-template-columns: 1fr; } } @media (max-width: 520px) { .money-row, .money-row.two { grid-template-columns: 1fr; } } .wallet-tiles .bot-act-num { font-size: clamp(0.95rem, 1.5vw, 1.25rem); white-space: nowrap; } .wallet-tiles .bot-act-tile { min-width: 0; padding-left: 8px; padding-right: 8px; } @media (max-width: 900px) { .wallet-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .bot-act-tiles { grid-template-columns: repeat(2, 1fr); } } .desc-history { margin-top: 20px; } .desc-hist-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); } .desc-hist-item:first-child { border-top: 0; } .desc-hist-main { flex: 1; min-width: 0; } .desc-hist-title { font-size: 0.9rem; color: var(--ink); font-weight: 600; } .desc-hist-meta { font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; } .desc-hist-badge { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--line-soft); color: var(--ink-3); margin-left: 6px; } .dash-feed-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .dash-feed-item:last-child { border-bottom: 0; } .dash-feed-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(214, 255, 63, 0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-light); flex-shrink: 0; } .dash-feed-icon svg { width: 13px; height: 13px; } .dash-feed-icon.counter { background: rgba(251, 191, 36, 0.10); color: #FBBF24; } .dash-feed-icon.qa { background: rgba(228, 255, 133, 0.10); color: #E4FF85; } .dash-feed-icon.welcome { background: rgba(167, 139, 250, 0.10); color: #A78BFA; } .dash-feed-content { flex: 1; min-width: 0; } .dash-feed-title { font-size: 0.84rem; color: var(--ink); } .dash-feed-sub { font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-feed-time { font-family: var(--font-mono); font-size: 0.70rem; color: var(--ink-4); flex-shrink: 0; } /* Period selector */ .dash-period { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; } .dash-period button { padding: 5px 12px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--ink-3); border-radius: 999px; transition: all var(--dur-fast) var(--ease); } .dash-period button.active { background: var(--accent); color: #0B0B0F; font-weight: 600; } /* "Connect extension" empty state */ .dash-empty { padding: 48px 32px; text-align: center; background: var(--bg-glass); border: 1px dashed rgba(214, 255, 63, 0.25); border-radius: 16px; margin-top: 18px; } .dash-empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(214, 255, 63, 0.10); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 28px; } .dash-empty-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; } .dash-empty-text { color: var(--ink-3); font-size: 0.88rem; max-width: 380px; margin: 0 auto; line-height: 1.5; } /* ========================================================================= AUTH GATE — écran "Entre ta clé" ========================================================================= */ .auth-gate { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 60px; background: var(--bg); overflow-y: auto; } .auth-gate-card { width: 100%; max-width: 480px; min-height: fit-content; padding: 38px 36px 32px; background: var(--bg-glass-strong); border: 1px solid rgba(214, 255, 63, 0.22); border-radius: 24px; box-shadow: 8px 8px 0 var(--line-solid); position: relative; /* overflow:hidden ici + focus() automatique sur le champ = le navigateur scrolle la carte pour amener l'input dans le cadre, mais overflow:hidden bloque le scroll utilisateur ensuite → logo/titre restent coincés hors champ, bouton tronqué. overflow:visible laisse le scroll remonter au vrai conteneur scrollable (.auth-gate) qui a une vraie scrollbar utilisable. */ overflow: visible; } /* Sales pitch sections (below the auth card) */ .auth-pitch { width: 100%; max-width: 980px; margin-top: 44px; } .auth-pitch-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-light); text-align: center; margin-bottom: 8px; } .auth-pitch-title { font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -0.025em; text-align: center; margin-bottom: 32px; color: var(--ink); line-height: 1.15; } .auth-pitch-title em { font-style: normal; font-weight: 700; color: var(--accent); } .auth-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; } @media (max-width: 720px) { .auth-features { grid-template-columns: 1fr; } } .auth-feature { padding: 22px 22px 20px; background: var(--bg-glass); border: 1px solid var(--line); border-radius: 18px; text-align: center; position: relative; transition: all var(--dur-mid) var(--ease); } .auth-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .auth-feature:hover { border-color: rgba(214, 255, 63, 0.30); transform: translateY(-3px); } .auth-feature-icon { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px; background: rgba(214, 255, 63, 0.10); display: flex; align-items: center; justify-content: center; color: var(--accent-light); filter: drop-shadow(0 0 16px rgba(214, 255, 63, 0.25)); } .auth-feature-icon svg { width: 22px; height: 22px; } .auth-feature-title { font-weight: 600; font-size: 1rem; margin-bottom: 6px; color: var(--ink); } .auth-feature-desc { font-size: 0.85rem; color: var(--ink-3); line-height: 1.5; } .auth-trust { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 18px 24px; background: rgba(214, 255, 63, 0.04); border: 1px solid rgba(214, 255, 63, 0.14); border-radius: 14px; } .auth-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-2); } .auth-trust-item svg { width: 18px; height: 18px; color: var(--accent-light); flex-shrink: 0; } .auth-gate-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-solid); } .auth-gate-logo { width: 72px; height: 72px; margin: 0 auto 18px; display: block; filter: drop-shadow(0 0 20px rgba(214, 255, 63, 0.4)); object-fit: contain; } .auth-gate-title { text-align: center; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 6px; } .auth-gate-title .flow { font-style: normal; font-weight: 700; color: var(--accent); } .auth-gate-sub { text-align: center; color: var(--ink-3); font-size: 0.92rem; margin-bottom: 28px; line-height: 1.5; } .auth-gate-input { width: 100%; padding: 14px 16px; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--ink); text-align: center; text-transform: uppercase; transition: all var(--dur-fast) var(--ease); outline: none; } .auth-gate-input::placeholder { color: var(--ink-4); letter-spacing: 0.08em; } .auth-gate-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(214, 255, 63, 0.12), 0 0 24px rgba(214, 255, 63, 0.18); } .auth-pitch { display: none !important; } .auth-gate-input.auth-plain { text-transform: none; letter-spacing: 0; font-family: var(--font-body); } .auth-gate-input.auth-code { letter-spacing: 0.4em; text-align: center; font-size: 1.3rem; } .auth-link { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--accent-light); text-decoration: underline; text-decoration-color: rgba(228,255,133,.35); cursor: pointer; font: inherit; font-size: 0.82rem; } .auth-link:disabled { opacity: .5; cursor: default; text-decoration: none; } .auth-gate-error { margin-top: 10px; padding: 10px 14px; background: rgba(255, 92, 122, 0.10); border: 1px solid rgba(255, 92, 122, 0.30); border-radius: 10px; color: #FF5C7A; font-size: 0.85rem; text-align: center; } .auth-gate-btn { width: 100%; margin-top: 16px; padding: 14px 20px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-weight: 600; font-size: 1rem; border: 0; border-radius: var(--r-pill); cursor: pointer; box-shadow: var(--shadow-acc); transition: all var(--dur-fast) var(--ease); } .auth-gate-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line-solid); } .auth-gate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .auth-gate-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); text-align: center; font-size: 0.82rem; color: var(--ink-3); line-height: 1.6; } .auth-gate-foot a { color: var(--accent-light); text-decoration: underline; text-decoration-color: rgba(228, 255, 133, 0.35); } .auth-gate-foot a:hover { text-decoration-color: var(--accent-light); } /* ========================================================================= ADMIN PAGE ========================================================================= */ .admin-page { position: fixed; inset: 0; z-index: 999; background: var(--bg); overflow-y: auto; padding: 32px; } .admin-wrap { max-width: 1100px; margin: 0 auto; } .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .admin-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; } .admin-title .badge { font-family: var(--font-mono); font-size: 0.62rem; background: rgba(255, 92, 122, 0.16); color: #FF5C7A; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; } .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-gen { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 10px; padding: 18px; background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 20px; align-items: end; } @media (max-width: 720px) { .admin-gen { grid-template-columns: 1fr; } } .admin-gen .field { display: flex; flex-direction: column; gap: 4px; } .admin-gen label { font-size: 0.74rem; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em; } .admin-gen input { padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-family: var(--font-body); } .admin-gen input:focus { outline: none; border-color: var(--accent); } .admin-keys { background: var(--bg-glass); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .admin-keys-row { display: grid; grid-template-columns: 2fr 80px 80px 1fr 110px 90px; gap: 10px; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; } .admin-keys-row.head { background: var(--bg-soft); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-3); } .admin-keys-row .key { font-family: var(--font-mono); color: var(--ink); user-select: all; } .admin-keys-row .status.active { color: #E4FF85; } .admin-keys-row .status.revoked { color: #FF5C7A; } .admin-keys-row button { padding: 5px 10px; background: rgba(255, 92, 122, 0.10); border: 1px solid rgba(255, 92, 122, 0.30); color: #FF5C7A; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .admin-keys-row button:hover { background: rgba(255, 92, 122, 0.18); } .admin-keys-row button.reactivate { background: rgba(228, 255, 133, 0.10); border-color: rgba(228, 255, 133, 0.30); color: #E4FF85; } @media (max-width: 720px) { .admin-keys-row { grid-template-columns: 1fr 70px; gap: 6px; font-size: 0.78rem; } .admin-keys-row .col-hide { display: none; } } .admin-just-generated { margin: 16px 0; padding: 14px 16px; background: rgba(228, 255, 133, 0.08); border: 1px solid rgba(228, 255, 133, 0.30); border-radius: 12px; } .admin-just-generated h4 { font-size: 0.86rem; margin-bottom: 8px; color: var(--accent-light); } .admin-just-generated pre { font-family: var(--font-mono); font-size: 0.85rem; background: var(--bg-soft); padding: 10px 12px; border-radius: 8px; overflow-x: auto; white-space: pre; user-select: all; color: var(--ink); border: 1px solid var(--line); } .admin-just-generated .copy-btn { margin-top: 8px; padding: 6px 14px; background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 6px; font-size: 0.78rem; cursor: pointer; } /* ========================================================================= PROFIL POPOVER (icône user en haut à droite) ========================================================================= */ .profile-trigger { width: 30px; height: 30px; border-radius: 50%; background: rgba(214, 255, 63, 0.10); border: 1px solid rgba(214, 255, 63, 0.20); color: var(--accent-light); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .profile-trigger:hover { background: rgba(214, 255, 63, 0.16); } .profile-trigger svg { width: 16px; height: 16px; } .profile-popover { position: fixed; top: 70px; right: 24px; width: 320px; background: var(--bg-glass-strong); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 6px 6px 0 var(--line-solid); z-index: 200; padding: 18px; animation: popIn 0.18s var(--ease); } @keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .profile-popover[hidden] { display: none; } .profile-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .profile-row:last-child { border-bottom: 0; } .profile-label { font-size: 0.78rem; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .profile-value { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink); user-select: all; } .profile-devices { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .profile-device { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--bg-soft); border-radius: 8px; font-size: 0.84rem; } .profile-device.current { border: 1px solid rgba(228, 255, 133, 0.30); } .profile-device-info { display: flex; flex-direction: column; gap: 2px; } .profile-device-name { color: var(--ink); } .profile-device-meta { font-size: 0.70rem; color: var(--ink-4); font-family: var(--font-mono); } .profile-device-current { font-size: 0.66rem; color: var(--accent-light); font-weight: 600; padding: 2px 8px; background: rgba(228, 255, 133, 0.12); border-radius: 999px; letter-spacing: 0.05em; } .profile-device button { padding: 4px 8px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-3); border-radius: 6px; font-size: 0.70rem; cursor: pointer; } .profile-device button:hover { color: #FF5C7A; border-color: rgba(248, 113, 133, 0.40); } .profile-logout { margin-top: 12px; width: 100%; padding: 10px; background: rgba(255, 92, 122, 0.08); border: 1px solid rgba(255, 92, 122, 0.25); color: #FF5C7A; border-radius: 8px; font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .profile-logout:hover { background: rgba(255, 92, 122, 0.14); } /* ===== MARGES — masterclass v2 ===== */ .marges-result { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 36px 32px; background: var(--surface-2); border: 1.5px solid var(--accent); color: var(--ink); box-shadow: var(--shadow-acc); } .marges-result::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); pointer-events: none; } .marges-result > * { position: relative; z-index: 1; } .marges-state-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 8px; transition: all var(--dur-mid) var(--ease); } .marges-state-badge.good { background: rgba(228, 255, 133, 0.16); color: #E4FF85; box-shadow: none; } .marges-state-badge.medium { background: rgba(251, 191, 36, 0.16); color: #FBBF24; box-shadow: none; } .marges-state-badge.poor { background: rgba(251, 113, 133, 0.16); color: #FF5C7A; } .marges-state-badge.loss { background: rgba(255, 92, 122, 0.20); color: #FF5C7A; box-shadow: none; animation: lossPulse 2s ease-in-out infinite; } @keyframes lossPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .marges-state-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .marges-big-number { font-family: var(--font-display); font-size: clamp(3.4rem, 8vw, 5.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; margin: 4px 0 6px; color: var(--accent); display: inline-block; } .marges-big-number.loss { color: var(--coral); } .marges-big-number.pulse { animation: numberPulse 0.6s var(--ease-spring); } @keyframes numberPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); filter: drop-shadow(0 0 48px rgba(214, 255, 63, 0.65)); } 100% { transform: scale(1); } } .marges-big-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } .marges-big-label .mono { color: var(--ink); font-weight: 500; } .marges-coef { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px; background: rgba(214, 255, 63, 0.10); border: 1px solid rgba(214, 255, 63, 0.22); color: var(--accent-light); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; } .marges-coef::before { content: '⚡'; filter: drop-shadow(0 0 4px var(--accent-glow)); } /* ----- Donut chart SVG ----- */ .marges-donut-wrap { margin-top: 28px; display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; } @media (max-width: 540px) { .marges-donut-wrap { grid-template-columns: 1fr; justify-items: center; } } .marges-donut { width: 180px; height: 180px; position: relative; } .marges-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } .marges-donut circle { fill: none; stroke-width: 18; transition: stroke-dasharray 0.6s var(--ease); } .marges-donut .donut-bg { stroke: rgba(255, 255, 255, 0.05); } .marges-donut .donut-achat { stroke: #6B6B78; } .marges-donut .donut-frais { stroke: #6B6B78; } .marges-donut .donut-urssaf { stroke: #FBBF24; } .marges-donut .donut-marge { stroke: var(--accent); } .marges-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .marges-donut-center .pct { font-family: var(--font-body); font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; color: var(--accent-light); } .marges-donut-center .lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; } /* ----- Breakdown rows (right side of donut) ----- */ .marges-breakdown { display: flex; flex-direction: column; gap: 9px; } .marges-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.88rem; padding: 6px 0; } .marges-line-label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); } .marges-line-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .marges-line-value { font-family: var(--font-mono); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } .marges-line.total { margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(228, 255, 133, 0.20); } .marges-line.total .marges-line-label { color: var(--accent-light); font-weight: 600; } .marges-line.total .marges-line-value { color: var(--accent-light); font-size: 1rem; font-weight: 600; } /* ----- Smart insights panel ----- */ .marges-insights { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(228, 255, 133, 0.14); } .marges-insights-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .marges-insights-label::before { content: '✦'; color: var(--accent); font-size: 0.85rem; filter: drop-shadow(0 0 4px var(--accent-glow)); } .marges-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .marges-insight { padding: 12px 14px; background: rgba(214, 255, 63, 0.05); border: 1px solid rgba(214, 255, 63, 0.12); border-radius: 12px; transition: all var(--dur-fast) var(--ease); cursor: pointer; } .marges-insight:hover { background: rgba(214, 255, 63, 0.10); border-color: rgba(214, 255, 63, 0.30); transform: translateY(-2px); } .marges-insight.featured { background: rgba(214, 255, 63, 0.10); border-color: rgba(228, 255, 133, 0.35); box-shadow: 4px 4px 0 var(--line-solid); } .marges-insight-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .marges-insight-value { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .marges-insight-delta { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; } .marges-insight-delta.up { color: #E4FF85; } .marges-insight-delta.down { color: #FF5C7A; } .marges-insight.featured .marges-insight-value { color: var(--accent-light); } .marges-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; margin-top: 14px; font-size: 0.82rem; color: var(--ink-5); } .marges-legend-item { display: flex; align-items: center; gap: 7px; } .marges-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .range-input { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; background: rgba(214, 255, 63, 0.20); border-radius: 999px; margin: 12px 0 4px; cursor: pointer; } .range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--accent); border: 3px solid #14141A; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--accent); transition: transform var(--dur-fast) var(--ease); } .range-input::-webkit-slider-thumb:hover { transform: scale(1.15); } .range-input::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent); border: 3px solid #14141A; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--accent); } .range-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); } /* ========================================================================= HOOKS IA ========================================================================= */ .hooks-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } .hook-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); transition: all var(--dur-fast) var(--ease); animation: cardIn var(--dur-mid) var(--ease) backwards; } .hook-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); } .hook-num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--gold-deep); width: 28px; flex-shrink: 0; padding-top: 1px; } .hook-text { flex: 1; font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; line-height: 1.4; color: var(--ink); } .hook-actions { display: flex; gap: 2px; flex-shrink: 0; } /* ========================================================================= TEMPLATES ========================================================================= */ .template-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .template-tabs::-webkit-scrollbar { display: none; } .template-tab { padding: 11px 18px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--dur-fast) var(--ease); margin-bottom: -1px; } .template-tab:hover { color: var(--ink-2); } .template-tab.active { color: var(--ink); border-bottom-color: var(--gold); } .templates-list { display: grid; gap: 14px; } .template-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; transition: all var(--dur-fast) var(--ease); } .template-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); } .template-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; } .template-item-title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; } .template-item-body { font-size: 0.93rem; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; background: var(--bg-soft); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); } .tpl-category-header { display: none; } .tpl-category-header.active { display: block; } /* ========================================================================= TOAST ========================================================================= */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-elev); color: var(--ink); padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 0.92rem; font-weight: 500; box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 0, 0, 0.4); z-index: 100; opacity: 0; transition: all var(--dur-mid) var(--ease); pointer-events: none; max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.gold { background: var(--accent); color: #0B0B0F; border-color: var(--accent); box-shadow: 6px 6px 0 var(--line-solid), 0 0 0 1px var(--accent) inset; } .toast.error { background: var(--error-bg); border-color: var(--error); color: var(--error); box-shadow: 6px 6px 0 var(--line-solid); } @media (max-width: 768px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom)); } } /* ========================================================================= EMPTY STATE ========================================================================= */ .empty-state { text-align: center; padding: 60px 20px; color: var(--ink-3); } .empty-state-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--ink-4); } .empty-state-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; } /* ========================================================================= RESPONSIVE — MOBILE ========================================================================= */ @media (max-width: 880px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } .topbar { display: flex; } .bottom-nav { display: grid; } .content { padding: 22px 18px calc(96px + env(safe-area-inset-bottom)); --gutter: 18px; --gutter-lg: 22px; } .home-hero { padding: 12px 0 32px; margin-bottom: 32px; } .home-meta { gap: 18px; } .home-meta-item { min-width: 90px; } .home-meta-item .mono { font-size: 1.2rem; } .dropzone { padding: 40px 20px; min-height: 200px; } .dropzone-mobile { display: block; } .dropzone-desktop { display: none; } .dropzone-title { font-size: 1.25rem; } .results-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .tools-grid { grid-template-columns: 1fr; gap: 14px; } .tool-card { padding: 22px 20px; min-height: 0; } .view-header { margin-bottom: 26px; } .card { padding: 20px 18px; } .marges-result { padding: 26px 22px; } .marges-big-number { font-size: 3rem; } .marges-legend { grid-template-columns: 1fr 1fr; } .options-bar { padding: 12px 14px; gap: 12px; } .option-toggle button { padding: 6px 12px; } .hook-text { font-size: 0.96rem; } .hook-item { padding: 12px 14px; gap: 10px; } } @media (max-width: 480px) { .results-grid { grid-template-columns: 1fr 1fr; } .home-meta { flex-direction: column; gap: 10px; } .home-meta-item { flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; } .display { font-size: 2.4rem; } } /* Hide on mobile, show on desktop */ .desktop-only { display: initial; } .mobile-only { display: none; } @media (max-width: 880px) { .desktop-only { display: none; } .mobile-only { display: initial; } } /* ===== Refonte : Accueil = l'essentiel, Finance = l'argent ===== */ .seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 12px; padding: 3px; gap: 3px; margin-top: 12px; } .seg button { border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 0.86rem; font-weight: 600; padding: 9px 20px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; } .seg button.active { background: var(--accent); color: var(--accent-ink, #0B0B0F); } .ventes-seg { display: none; } .view[data-view="finance"] { } .mobile-only { display: none !important; } @media (hover: none) and (pointer: coarse), (max-width: 820px) { .mobile-only { display: inline-flex !important; } #btnDownloadAll { display: none !important; } } @media (max-width: 820px) { .dash-mid-grid { display: none !important; } .dash-bottom-grid { grid-template-columns: 1fr !important; } .dash-bottom-grid > .dash-panel:first-child { display: none; } .ventes-seg { display: grid; margin: 0 0 14px; } .view[data-view="dashboard"].active { display: flex; flex-direction: column; } .view[data-view="dashboard"] .dash-status { order: -2; } .view[data-view="dashboard"] .remote { order: -1; } .view[data-view="dashboard"] #coachPanel { order: -1; } .view[data-view="dashboard"] > .view-header { display: none; } .finance-head { margin-bottom: 12px; } .finance-head .headline { font-size: 1.6rem; margin: 0; } .finance-head .seg, .ventes-seg { display: grid; width: 100%; margin-top: 12px; } .dash-panel, .remote, .dash-status, .onboard, .money-gen, .money-bal, .goal-card, .best-sale { border-radius: 12px; } .dash-panel, .remote { padding: 14px; margin-bottom: 12px; } .dash-panel-title { font-size: 0.95rem; } .dash-status { padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; } .dash-status-sub { display: none; } .dash-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; padding: 10px 12px; } .dash-status-info { min-width: 0; flex: 1; } .dash-status-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-status-pill { flex-shrink: 1; min-width: 0; max-width: 52%; font-size: 0.68rem; padding: 5px 10px; } .dash-status-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-status-icon { display: none; } .dash-status-title { font-size: 0.95rem; } .dash-grid { margin-bottom: 12px; } .dash-bots-panel { padding: 12px 14px; } .dash-bots-panel-head { margin-bottom: 2px; } .bot-act-tiles { gap: 8px; } .bot-act-tile { padding: 12px 6px; border-radius: 10px; } .bot-act-num { font-size: 1.35rem; } .bottom-nav { padding-top: 6px; } .topbar { padding-top: calc(14px + env(safe-area-inset-top)); } .bottom-nav-item { padding: 8px 2px; gap: 3px; border-radius: 10px; position: relative; } .bottom-nav-item span { font-size: 0.66rem; } .bottom-nav-item.active { background: rgba(214, 255, 63, 0.09); color: var(--accent); } .bottom-nav-item.active svg { filter: none; } .content { padding-left: 14px !important; padding-right: 14px !important; } .money-row.two { grid-template-columns: 1fr 1fr !important; } .money-bal { flex-direction: row; } .money-bal .bot-act-tile { flex: 1; } .money-layout .bot-act-num { font-size: clamp(0.95rem, 5vw, 1.25rem); } .tile-delta { font-size: 0.62rem; line-height: 1.3; } .tile-select { font-size: 0.72rem; } } /* Appareils (écran de connexion + réglages) */ .auth-devices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; max-height: 220px; overflow-y: auto; } .auth-device, .account-device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-align: left; } .auth-device b, .account-device b { display: block; color: var(--ink); font-weight: 600; font-size: 0.9rem; } .auth-device span, .account-device span { display: block; color: var(--ink-4); font-size: 0.72rem; font-family: var(--font-mono); margin-top: 2px; } .auth-device button, .account-device button { background: transparent; color: var(--ink-2); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; } .auth-device button:hover, .account-device button:hover { color: #FF5C7A; border-color: rgba(248,113,133,0.45); } .account-device.current { border-color: rgba(228,255,133,0.30); } .account-device em { font-style: normal; font-size: 0.68rem; color: var(--accent-light); font-weight: 600; letter-spacing: 0.05em; padding: 2px 8px; background: rgba(228,255,133,0.12); border-radius: 999px; } .auth-devices-empty, .account-devices-empty { color: var(--ink-4); font-size: 0.85rem; text-align: center; padding: 8px; } .account-devices-head { color: var(--ink-3); font-size: 0.85rem; margin: 6px 0 8px; } .account-devices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } /* Coach du jour */ .coach-item { padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); border-left: 3px solid var(--text-3); } .coach-item.tone-gold { border-left-color: var(--accent); } .coach-item.tone-mint { border-left-color: var(--mint); } .coach-item.tone-warn { border-left-color: #FBBF24; } .coach-item.tone-bad { border-left-color: var(--coral); } .coach-item.tone-info { border-left-color: #7DB7FF; } .coach-item-t { font-size: 0.9rem; font-weight: 700; color: var(--ink); line-height: 1.35; } .coach-item-d { font-size: 0.8rem; color: var(--ink-3); margin-top: 3px; line-height: 1.45; } .coach-safety { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(74,222,128,0.14); color: var(--mint); } .coach-safety.lvl-good { background: var(--accent-soft); color: var(--accent); } .coach-safety.lvl-warn { background: rgba(251,191,36,0.16); color: #FBBF24; } .coach-safety.lvl-risk { background: rgba(255,92,122,0.16); color: var(--coral); } .coach-sub { font-size: 0.72rem; color: var(--ink-4); margin-top: 8px; } /* Outils : boîte à outils, audit, négociation, lot */ .tl-group { font: 600 0.68rem var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 30px 2px 14px; } .tl-group:first-of-type { margin-top: 8px; } .tl-empty { color: var(--ink-3); font-size: 0.9rem; text-align: center; padding: 36px 12px; } .tl-hint { font-size: 0.78rem; color: var(--ink-3); line-height: 1.5; } .tl-sub { font: 600 0.66rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; } .tl-score { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; } .tl-ring { --p: 0; --c: var(--accent); width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); position: relative; flex-shrink: 0; } .tl-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-elev, #14141A); } .tl-ring span { position: relative; font-size: 2rem; font-weight: 800; color: var(--ink); } .tl-score-label { font-size: 1.05rem; font-weight: 700; color: var(--ink); } .tl-bar { margin: 10px 0; } .tl-bar-top { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 5px; } .tl-bar-top b { color: var(--ink); } .tl-bar-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .tl-bar-track i { display: block; height: 100%; border-radius: 99px; } .tl-checks { display: flex; flex-direction: column; gap: 9px; } .tl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; } .tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--ink-3); } .tl-dot.ok { background: var(--mint); } .tl-dot.mid { background: #FBBF24; } .tl-dot.ko { background: var(--coral); } .tl-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 13px; margin-bottom: 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); font-size: 0.88rem; color: var(--ink); line-height: 1.5; } .tl-copy > div { flex: 1; min-width: 0; overflow-wrap: anywhere; } .tl-copy-col { flex-direction: column; } .tl-tags { display: flex; flex-wrap: wrap; gap: 7px; } .tl-tags span { padding: 5px 11px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 600; } .tl-verdict { padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1.5px solid var(--c, var(--accent)); box-shadow: 0 14px 34px -22px var(--c, var(--accent)); } .tl-verdict-t { font: 600 0.68rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--accent)); } .tl-verdict-n { font-size: 2.1rem; font-weight: 800; color: var(--ink); margin-top: 4px; } .tl-msg { padding: 13px 14px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); } .tl-msg.reco { border-color: var(--accent); background: var(--accent-soft); } .tl-msg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; font-size: 0.86rem; color: var(--ink); } .tl-msg-top em { font-style: normal; font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); } .tl-msg-text { font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 9px; } .tl-profit { margin-left: auto; font-size: 0.74rem; font-weight: 700; } .tl-profit.pos { color: var(--mint); } .tl-profit.neg { color: var(--coral); } .tl-ai { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; } .tl-lot-head, .tl-lot-row { display: grid; grid-template-columns: 1fr 78px 78px 30px; gap: 8px; align-items: center; } .tl-lot-head { font: 600 0.64rem var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .tl-lot-row { margin-bottom: 8px; } .tl-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; font-size: 1.1rem; line-height: 1; } .tl-x:hover { color: var(--coral); border-color: var(--coral); } .tl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .tl-kpis > div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); } .tl-kpis b { display: block; font-size: 1.02rem; color: var(--ink); } .tl-kpis span { font-size: 0.7rem; color: var(--ink-3); line-height: 1.3; display: block; margin-top: 3px; } #lotRemise { width: 100%; accent-color: var(--accent); } @media (max-width: 820px) { .tl-lot-head, .tl-lot-row { grid-template-columns: 1fr 66px 66px 28px; } .tl-kpis { grid-template-columns: 1fr; } .tl-group { margin-top: 24px; } } /* Bilan business */ .bil-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bil-tile { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); } .bil-tile.warn { border-color: rgba(255,92,122,.5); background: rgba(255,92,122,.06); } .bil-tile.info { border-color: rgba(125,183,255,.45); } .bil-n { font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1.1; } .bil-n.neg { color: var(--coral); } .bil-l { font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-top: 4px; } .bil-s { font-size: 0.72rem; color: var(--ink-3); margin-top: 3px; line-height: 1.4; } .bil-week { margin-top: 12px; font-size: 0.86rem; color: var(--ink-2); } .bil-week b { color: var(--ink); } .bil-week .pos { color: var(--mint); } .bil-week .neg { color: var(--coral); } .bil-fisc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .bil-fisc-t { font: 600 0.66rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .bil-bar { margin-bottom: 10px; } .bil-bar-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-2); margin-bottom: 5px; } .bil-bar-top b { color: var(--ink); } .bil-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .bil-track i { display: block; height: 100%; border-radius: 99px; background: var(--mint); } .bil-track i.near { background: #FBBF24; } .bil-track i.over { background: var(--coral); } @media (max-width: 820px) { .bil-tiles { grid-template-columns: 1fr; } .bil-tile { display: flex; flex-direction: column; } } /* Personnalisation : questionnaire, choix des outils */ .pz-off { display: none !important; } .pz { position: fixed; inset: 0; z-index: 900; background: var(--bg); overflow-y: auto; display: flex; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); } .pz[hidden] { display: none; } .pz-card { width: 100%; max-width: 560px; margin: auto 0; } .pz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .pz-top img { height: 34px; } .pz-skip, .pz-back { border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 0.86rem; cursor: pointer; padding: 6px 2px; } .pz-skip:hover, .pz-back:hover { color: var(--ink); } .pz-progress { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 10px; } .pz-progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; } .pz-step { font: 600 0.68rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .pz-q { font-size: 1.7rem; line-height: 1.2; font-weight: 800; color: var(--ink); margin: 0 0 20px; } .pz-opts { display: flex; flex-direction: column; gap: 10px; } .pz-opt { text-align: left; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; } .pz-opt b { display: block; font-size: 1rem; } .pz-opt span { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 3px; } .pz-opt:hover { border-color: var(--accent); background: var(--accent-soft); } .pz-opt:active { transform: scale(.985); } .pz-back { margin-top: 18px; } .pz-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; } .pz-res-t { font-size: 2.1rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin: 0 0 6px; } .pz-res-s { color: var(--ink-2); font-size: 1rem; margin-bottom: 18px; } .pz-sec { font: 600 0.66rem var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 10px; } .pz-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pz-chips span { padding: 7px 13px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 0.82rem; font-weight: 600; } .pz-steps { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; } .pz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .pz-actions .btn { flex: 1; justify-content: center; } .pz-pick { display: flex; align-items: center; gap: 14px; padding: 13px 14px; margin-bottom: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; } .pz-pick.on { border-color: var(--accent); background: var(--accent-soft); } .pz-pick > div { flex: 1; min-width: 0; } .pz-pick b { display: block; font-size: 0.95rem; color: var(--ink); } .pz-pick span { font-size: 0.78rem; color: var(--ink-3); } .pz-pick i { width: 42px; height: 24px; border-radius: 99px; background: var(--line-strong, #3a3a44); position: relative; flex-shrink: 0; transition: background .18s; } .pz-pick i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; } .pz-pick.on i { background: var(--accent); } .pz-pick.on i::after { transform: translateX(18px); background: #0B0B0F; } .pz-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .pz-profile { font-size: 0.8rem; color: var(--ink-2); } .pz-profile b { color: var(--accent); } .pz-more { margin-top: 26px; } .pz-more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px dashed var(--line); font-size: 0.88rem; color: var(--ink-2); } .tl-checkline { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--ink-2); margin: 8px 0; cursor: pointer; } .tl-checkline input { accent-color: var(--accent); width: 17px; height: 17px; } /* Guide de démarrage */ .gd-card { max-width: 640px; } .gd-lead { color: var(--ink-2); font-size: 0.96rem; line-height: 1.55; margin: 0 0 16px; } .gd-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } .gd-step { position: relative; padding: 10px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); } .gd-step p { margin: 8px 2px 2px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; } .gd-step a { color: var(--accent); } .gd-n { position: absolute; top: 4px; left: 4px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .gd-art { display: block; width: 100%; height: auto; border-radius: 10px; } .gd-key { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .gd-key input { flex: 1; min-width: 0; } .gd-msg { min-height: 20px; margin-top: 10px; font-size: 0.86rem; color: var(--ink-3); } .gd-msg.ok { color: var(--mint); } .gd-msg.ko { color: var(--coral); } .gd-note { padding: 10px 14px; border-radius: 12px; background: rgba(251,191,36,.10); color: #FBBF24; font-size: 0.86rem; margin-bottom: 14px; } .gd-copy { border: 1px solid var(--line); background: transparent; color: var(--accent); border-radius: 8px; padding: 2px 9px; font: inherit; font-size: 0.78rem; cursor: pointer; margin-left: 4px; } .gd-live { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1.5px solid var(--line); font-size: 0.92rem; color: var(--ink-2); } .gd-live.ok { border-color: var(--mint); color: var(--mint); background: rgba(74,222,128,.08); } .gd-dot { width: 12px; height: 12px; border-radius: 50%; background: #FBBF24; animation: rcPulse 1.2s ease-in-out infinite; flex-shrink: 0; } .gd-live.ok .gd-dot { background: var(--mint); animation: none; } .gd-check { display: grid; gap: 8px; margin-bottom: 16px; } .gd-check div { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-3); } .gd-check div.ok { color: var(--ink); } .gd-check i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; } .gd-check div.ok i { background: var(--mint); border-color: var(--mint); } @media (max-width: 820px) { .gd-steps { grid-template-columns: 1fr; } .gd-key { flex-direction: column; align-items: stretch; } } /* Description IA : photo */ .fiche-photo-drop { border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .fiche-photo-drop.drag { border-color: var(--accent); background: var(--accent-soft); } .fiche-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.85rem; } .fiche-photo-thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .fiche-photo-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; } .fiche-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fiche-photo-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(11,11,15,.75); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .fiche-photo-add { width: 76px; height: 76px; border-radius: 10px; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 22px; cursor: pointer; background: transparent; } .fiche-phrases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; } @media (max-width: 560px) { .fiche-phrases { grid-template-columns: 1fr; } }