/* =================================================================== Console admin — couche de composants propres à l'admin. LE SOCLE VISUEL EST portal.css (chargé avant) : tokens clair/sombre, coque (sidebar + barre haute), cartes, boutons, champs, modales, bascule de thème animée. Les pages admin portent et héritent du langage « cockpit » de l'espace client — exactement comme la page Analyse de données. Ce fichier ne décrit que ce que le portail n'a pas. =================================================================== */ /* Tokens que le portail ne définit pas (utilisés par les composants admin hérités : tableaux, valeurs mono, filets discrets). */ :root { --hairline: rgba(60, 60, 67, 0.08); --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", ui-monospace, monospace; } :root[data-theme="dark"] { --hairline: rgba(235, 235, 245, 0.08); } /* ── Cartes : le padding d'office, l'en-tête vit DANS la carte ───── */ /* Le portail pose le padding au cas par cas (.card-pad) ; les pages admin l'ont toujours eu intégré. Même visuel, moins de classes. Les cellules KPI du rail gardent leur propre padding. */ .dashboard-view .card:not(.kpi) { padding: 1.3rem 1.35rem 1.35rem; } .dashboard-view .card > .card-head { padding: 0; margin-bottom: 1.15rem; } .card h2, .panel h2 { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 0.3rem; } .card .card-desc, .panel .card-desc { color: var(--text-2); font-size: 0.845rem; margin-bottom: 1.15rem; } /* En-tête de carte avec pastille icône */ .card-head .card-glyph { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .card-head h2 { margin-bottom: 0; } .card-head .card-desc { margin-bottom: 0; font-size: 0.8rem; } /* Panneau (Assistance) : même silhouette qu'une carte cockpit. */ .dashboard-view .panel { background: var(--dash-card); border: 1px solid var(--dash-line); border-radius: 18px; padding: 1.3rem 1.35rem 1.35rem; box-shadow: none; margin-bottom: 1rem; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .panel-head h2 { margin-bottom: 0; } .panel-link { color: var(--accent); font-size: 0.815rem; font-weight: 600; text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; transition: color 0.15s; } .panel-link:hover { color: var(--text); } .panel-divider { height: 1px; background: var(--hairline); margin: 1.3rem -1.4rem; } /* ── Bouton pilule (pages publiques : connexion) ─────────────────── */ .btn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.42rem 0.95rem; background: var(--surface-2); border: 1px solid transparent; border-radius: 980px; font-size: 0.82rem; font-weight: 500; font-family: inherit; cursor: pointer; color: var(--text-2); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .btn-pill:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); } .btn-pill.accent { color: var(--accent); border-color: rgba(139, 124, 240, 0.35); } .btn-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Variantes de .btn que le portail n'a pas. */ .btn.secondary { background: var(--surface-2); border-color: transparent; color: var(--text); } .btn.secondary:hover:not(:disabled) { background: var(--surface-3); } .btn.ghost { background: none; color: var(--text-2); } .btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .btn.block { width: 100%; } /* La règle cockpit `.dashboard-view .page-head .btn` détourne les boutons de l'en-tête en boutons picto (fond carte) : c'est juste pour le portail, qui n'y met qu'une icône. L'admin y met de vraies actions — on rend au .btn.primary son violet, sinon texte blanc sur fond blanc en clair. */ .dashboard-view .page-head .toolbar .btn.primary { border-color: transparent; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; box-shadow: var(--shadow-accent); } .dashboard-view .page-head .toolbar .btn.secondary, .dashboard-view .page-head .toolbar .btn.ghost { border: 1px solid var(--dash-line); background: var(--dash-card); color: var(--text); } /* ── Tableaux de données ─────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; } .data-table thead th { font-size: 0.665rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.085em; color: var(--text-3); text-align: left; padding: 0 0.75rem 0.7rem; border-bottom: 1px solid var(--hairline); white-space: nowrap; } .data-table thead th:first-child { padding-left: 0; } .data-table thead th:last-child { padding-right: 0; } .data-table tbody td { padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--hairline); color: var(--text); vertical-align: middle; } .data-table tbody td:first-child { padding-left: 0; } .data-table tbody td:last-child { padding-right: 0; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background 0.12s; } .data-table tbody tr:hover { background: var(--dash-subtle, var(--surface-2)); } .data-table .col-muted { color: var(--text-2); } .data-table .col-mono { font-family: var(--font-mono); font-size: 0.79rem; color: var(--text-2); letter-spacing: -0.01em; white-space: nowrap; } .data-table .col-strong { font-weight: 600; } .data-table .col-right { text-align: right; } .table-scroll { overflow-x: auto; } /* ── Badges de statut ────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 0.16rem 0.6rem; border-radius: 980px; white-space: nowrap; line-height: 1.5; } .badge.success, .badge.active { background: var(--success-soft); color: var(--success); } .badge.accent { background: var(--accent-soft); color: var(--accent); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); } .badge.neutral, .badge.inactive { background: var(--surface-3); color: var(--text-3); } /* ── Fil d'activité ──────────────────────────────────────────────── */ .activity-list { display: flex; flex-direction: column; gap: 0.95rem; } .activity-row { display: flex; align-items: flex-start; gap: 11px; min-width: 0; } .activity-glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .activity-glyph.accent { background: var(--accent-soft); color: var(--accent); } .activity-glyph.success { background: var(--success-soft); color: var(--success); } .activity-glyph.warn { background: var(--warn-soft); color: var(--warn); } .activity-title { font-size: 0.855rem; color: var(--text); line-height: 1.4; word-break: break-word; } .activity-time { font-size: 0.745rem; color: var(--text-3); margin-top: 1px; } /* Rangée des tuiles KPI : la pastille d'évolution reste du registre admin. */ .stat-spark { flex-shrink: 0; color: var(--accent); opacity: 0.9; } .stat-delta { display: flex; align-items: center; gap: 4px; font-size: 0.775rem; font-weight: 600; color: var(--text-3); } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } /* ── Stepper (création de widget) ────────────────────────────────── */ .stepper { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .step { display: inline-flex; align-items: center; gap: 8px; padding: 0.38rem 1rem 0.38rem 0.45rem; border-radius: 980px; font-size: 0.815rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2); } .step .step-dot { width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; background: var(--surface-3); color: var(--text-2); } .step.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .step.active .step-dot { background: rgba(255, 255, 255, 0.26); color: #fff; } .step.done { background: var(--success-soft); border-color: rgba(74, 222, 128, 0.28); color: var(--success); } .step.done .step-dot { background: var(--success); color: #08130c; } .step-link { text-decoration: none; } .stepper-sep { width: 20px; height: 1px; background: var(--border-strong); } /* ── Formulaire : compléments au .field du portail ───────────────── */ /* Le portail n'habille que input texte et textarea dans .field : les selects, couleurs et fichiers des formulaires admin ont besoin des leurs. Sans eux : contrôles natifs gris, illisibles en sombre. */ .field select { width: 100%; height: 46px; padding: 0 2.2rem 0 0.9rem; border: none; border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit; color: var(--text); background: var(--surface-2); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23939cb2' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; cursor: pointer; transition: box-shadow 0.15s; } .field select:focus { outline: none; box-shadow: 0 0 0 3.5px var(--ring); } .field select option { background: var(--surface); color: var(--text); } .field input[type="color"] { width: 100%; height: 46px; border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 4px; background: var(--surface-2); } .field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; } .field input[type="file"] { height: auto; font-size: 0.83rem; color: var(--text-2); } .field input[type="file"]::file-selector-button { font-family: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem; margin-right: 0.7rem; border: none; border-radius: 980px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: background 0.15s; } .field input[type="file"]::file-selector-button:hover { background: var(--surface-3); } .field-row { display: flex; gap: 1rem; } .field-row .field { flex: 1; min-width: 0; } .check-field { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; font-weight: 500; font-size: 0.87rem; color: var(--text); } .check-field input[type="checkbox"] { margin-top: 0.25rem; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent-strong); cursor: pointer; } .form-msg { font-size: 0.845rem; margin-top: 0.7rem; } .form-msg.error { color: var(--danger); } .form-msg.success { color: var(--success); } /* ── Bloc de code (code d'embed) ─────────────────────────────────── */ .code-block { background: var(--surface-2); border: 1px solid var(--card-line); color: var(--text); padding: 0.95rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.795rem; line-height: 1.55; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin-bottom: 1rem; } /* ── État vide (les pages génèrent leur propre balisage) ─────────── */ .empty-state { text-align: center; padding: 3.5rem 2rem; grid-column: 1 / -1; } .empty-state-icon { width: 56px; height: 56px; background: var(--accent-soft); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.4rem; color: var(--accent); font-weight: 700; } .empty-state p { color: var(--text-2); margin-bottom: 1.3rem; font-size: 0.92rem; } /* ── Modales : le portail fournit overlay + carte ; l'admin ajoute les boutons d'action et l'icône d'alerte ─────────────────────── */ .modal-card { text-align: center; } .modal-icon { width: 46px; height: 46px; background: var(--danger-soft); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--danger); font-size: 1.2rem; font-weight: 700; } .modal-actions { display: flex; gap: 0.7rem; } .modal-btn { flex: 1; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 0.885rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background 0.15s; font-family: inherit; } .modal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .modal-btn-cancel { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .modal-btn-cancel:hover { background: var(--surface-3); } .modal-btn-delete { background: var(--danger); color: #fff; } /* ── Barre d'enregistrement ──────────────────────────────────────── */ .save-bar { display: flex; justify-content: flex-end; gap: 0.7rem; margin-bottom: 1.1rem; } /* ── Pages centrées (connexion) ──────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--ambient); background-attachment: fixed; } .auth-card { width: 100%; max-width: 396px; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 26px; padding: 2rem; box-shadow: var(--shadow-shell); } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; } .auth-brand .logo-mark { width: 34px; height: 34px; object-fit: contain; } .auth-brand .logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.025em; color: var(--text); } .auth-brand .logo-sub { font-weight: 500; color: var(--text-3); } .auth-card h1 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.3rem; } .auth-card .auth-desc { color: var(--text-2); font-size: 0.875rem; margin-bottom: 1.5rem; } /* ── Notification toast ──────────────────────────────────────────── */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: var(--surface); border: 1px solid var(--card-line); color: var(--text); padding: 0.7rem 1.2rem; border-radius: 980px; font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10000; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Utilitaires ─────────────────────────────────────────────────── */ .muted { color: var(--text-2); } .mono { font-family: var(--font-mono); } .nowrap { white-space: nowrap; } .stack { display: flex; flex-direction: column; gap: 0.6rem; } .row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .row.between { justify-content: space-between; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* ── step2 : formulaire + aperçu épinglé ─────────────────────────── */ .step2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.1rem; align-items: start; } .step2-aside { position: sticky; top: calc(var(--topbar-h) + 1.5rem); } /* ── Aperçu du widget (step2) — reproduit le rendu clair du produit, volontairement conservé en clair : c'est ce que voit le visiteur. */ .preview-card { padding: 1.3rem; background: var(--surface); } .preview-stage { background: #eef0f4; border-radius: var(--radius-sm); padding: 1.4rem 1.15rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .widget-preview { width: 100%; max-width: 300px; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); background: #fff; } .preview-header { background: var(--accent-strong); color: #fff; padding: 0.85rem 1.1rem; font-weight: 600; font-size: 0.9rem; } .preview-body { background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%); padding: 1rem; min-height: 96px; display: flex; flex-direction: column; gap: 0.5rem; } .preview-bubble { background: #f4f5f7; padding: 0.65rem 0.9rem; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); font-size: 0.82rem; max-width: 90%; color: #1d1d1f; width: fit-content; } .preview-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-top: 0.35rem; } .preview-chip { border: 1px solid var(--accent-strong); color: var(--accent-strong); background: #fff; border-radius: 14px; padding: 0.35rem 0.75rem; font-size: 0.74rem; max-width: 100%; word-break: break-word; } .preview-teaser { align-self: flex-end; background: #fff; color: #1d1d1f; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); padding: 0.6rem 0.85rem; font-size: 0.8rem; max-width: 260px; display: none; } .preview-caption { font-size: 0.72rem; color: var(--text-3); text-align: center; } /* Thème et style du panneau se lisent dans l'aperçu, avec la photo de profil et la bulle personnalisée. */ .preview-stage { position: relative; } .widget-preview { position: relative; } .preview-avatar { width: 26px; height: 26px; border-radius: 50%; background: center / cover no-repeat #fff; display: inline-block; vertical-align: -8px; margin-right: 0.5rem; } .preview-launcher { position: absolute; right: 10px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-strong) center / 62% no-repeat; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } .widget-preview[data-wtheme="dark"] { background: #211f2d; } .widget-preview[data-wtheme="dark"] .preview-body { background: linear-gradient(180deg, #262336 0%, #211f2d 100%); } .widget-preview[data-wtheme="dark"] .preview-bubble { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.06); color: #f0eff6; } .widget-preview[data-wtheme="dark"] .preview-chip { background: transparent; } .widget-preview[data-style="epure"] .preview-header { background: transparent; color: var(--accent-strong); border-bottom: 1px solid var(--hairline); } .widget-preview[data-style="immersif"] .preview-header { background: linear-gradient(150deg, var(--accent-strong), var(--accent-deep)); text-align: center; padding-top: 1.5rem; } .widget-preview[data-style="immersif"] .preview-avatar { display: block; margin: 0 auto 0.35rem; width: 42px; height: 42px; } /* ── Navigation haute (pages publiques : connexion) ──────────────── */ .nav { background: var(--material); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--separator); padding: 0 2rem; height: 56px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: 1280px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-brand .logo-mark { width: 28px; height: 28px; object-fit: contain; } .nav-brand .logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.02em; } .nav-brand .logo-sub { font-weight: 500; color: var(--text-3); } .nav-actions { display: flex; align-items: center; gap: 0.6rem; } /* ── Bouton de thème : même dessin que l'icon-btn du portail ─────── */ .theme-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, transform 0.1s; } .theme-btn:hover { background: var(--surface-2); } .theme-btn:active { transform: scale(0.92); } .theme-btn svg { width: 17px; height: 17px; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 1100px) { .step2-layout { grid-template-columns: 1fr; } .step2-aside { position: static; } } @media (max-width: 640px) { .dashboard-view .card, .dashboard-view .panel { padding: 1.15rem; } .panel-divider { margin-left: -1.15rem; margin-right: -1.15rem; } .field-row { flex-direction: column; gap: 0; } }