:root { /* Brand */ --brand-orange: #FF7A00; --brand-orange-hover: #E66E00; --brand-orange-soft: rgba(255, 122, 0, 0.14); --brand-blue: #2F80ED; --brand-blue-hover: #256DD0; --brand-blue-soft: rgba(47, 128, 237, 0.14); --brand-green: #27AE60; --brand-green-hover: #219150; --brand-green-soft: rgba(39, 174, 96, 0.14); --brand-yellow: #FFB800; --brand-yellow-soft: rgba(255, 184, 0, 0.14); --danger: #DC2626; --danger-soft: rgba(220, 38, 38, 0.14); --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 30px; --gradient-brand: linear-gradient(135deg, #FF7A00 0%, #2F80ED 52%, #27AE60 100%); --gradient-primary: linear-gradient(135deg, #2F80ED 0%, #27AE60 100%); --gradient-cta: linear-gradient(135deg, #FF7A00 0%, #FFB800 100%); } /* #bulkBar special-case removed — dropdown is now portalled to */ .logoImg { width: 100%; padding:0 1rem; } /* ========================= DARK THEME ========================= */ .theme-dark { --bg: #081522; --bg-soft: #0d2033; --surface: rgba(13, 32, 51, 0.78); --surface-strong: #10263b; --surface-dark: #081522; --line: rgba(176, 190, 197, 0.14); --line-strong: rgba(176, 190, 197, 0.28); --text: #ffffff; --text-soft: #d9e4ec; --muted: #9fb3c3; --primary: var(--brand-blue); --primary-hover: var(--brand-blue-hover); --primary-soft: var(--brand-blue-soft); --secondary: var(--brand-orange); --secondary-hover: var(--brand-orange-hover); --secondary-soft: var(--brand-orange-soft); --success: var(--brand-green); --success-soft: var(--brand-green-soft); --warning: var(--brand-yellow); --warning-soft: var(--brand-yellow-soft); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16); --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.22); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.30); --panel-glass: rgba(255, 255, 255, 0.04); /* ---bg-bg: linear-gradient(180deg, #081522 0%, #0B1C2C 55%, #10263b 100%);*/ --sidebar-bg: #081522; --body-bg: radial-gradient(circle at top left, rgba(47, 128, 237, 0.16), transparent 28%), radial-gradient(circle at top right, rgba(39, 174, 96, 0.10), transparent 24%), radial-gradient(circle at bottom left, rgba(255, 122, 0, 0.10), transparent 22%), linear-gradient(180deg, #081522 0%, #0B1C2C 100%); } /* ========================= LIGHT THEME ========================= */ .theme-light { --bg: #f4f8fc; --bg-soft: #edf4fb; --surface: rgba(255, 255, 255, 0.82); --surface-strong: #ffffff; --surface-dark: #0B1C2C; --line: rgba(11, 28, 44, 0.10); --line-strong: rgba(11, 28, 44, 0.18); --text: #2b4b69; --text-soft: #264154; --muted: #6B7C93; --primary: var(--brand-blue); --primary-hover: var(--brand-blue-hover); --primary-soft: rgba(47, 128, 237, 0.10); --secondary: var(--brand-orange); --secondary-hover: var(--brand-orange-hover); --secondary-soft: rgba(255, 122, 0, 0.10); --success: var(--brand-green); --success-soft: rgba(39, 174, 96, 0.10); --warning: var(--brand-yellow); --warning-soft: rgba(255, 184, 0, 0.12); --shadow-sm: 0 8px 24px rgba(11, 28, 44, 0.06); --shadow-md: 0 18px 40px rgba(11, 28, 44, 0.10); --shadow-lg: 0 30px 80px rgba(11, 28, 44, 0.14); --panel-glass: rgba(255, 255, 255, 0.72); --sidebar-bg: #163851; --body-bg: radial-gradient(circle at top left, rgba(47, 128, 237, 0.10), transparent 28%), radial-gradient(circle at top right, rgba(39, 174, 96, 0.08), transparent 24%), radial-gradient(circle at bottom left, rgba(255, 122, 0, 0.08), transparent 22%), linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--text); background: var(--body-bg); min-height: 100vh; } a { color: var(--primary); text-decoration: none; transition: 0.2s ease; } .button:hover { transform: translateY(-1px); filter: brightness(1.05); } .checkbox-inline input:checked + * { color: var(--primary); } .checkbox-inline:has(input:checked) { border-color: rgba(47, 128, 237, 0.35); background: var(--primary-soft); } .override-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .checkbox-inline { display: flex; align-items: center; gap: 10px; background: var(--panel-glass); border: 1px solid var(--line); padding: 12px 14px; border-radius: 14px; cursor: pointer; font-weight: 600; color: var(--text-soft); } .checkbox-inline input { width: 18px; height: 18px; } .override-block { margin-bottom: 16px; } /* Layout */ .layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 20px; color: #fff; background: var(--sidebar-bg); border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .sidebar-top { flex: 1; min-height: 0; overflow-y: auto; } .sidebar-footer { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; } .sidebar-logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; color: rgba(226, 232, 240, 0.84); font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s ease; } .sidebar-logout-btn:hover { background: rgba(220, 38, 38, 0.14); border-color: rgba(220, 38, 38, 0.28); color: #fca5a5; } .sidebar .theme-toggle { width: 100%; justify-content: flex-start; padding: 10px 14px; } .brand { margin-bottom: 26px; padding: 0 12px; } .brand-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #fff; } .brand-subtitle { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.02em; text-align: center; } .sidebar nav { display: flex; flex-direction: column; gap: 8px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 14px; border-radius: 14px; color: rgba(226, 232, 240, 0.84); font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: 0.22s ease; } .sidebar nav a:hover, .sidebar nav a.active { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .content { padding: 28px 32px 40px; /* Grid items don't shrink below their content's min-content width by default — without this, a wide table anywhere on the page forces the whole 1fr column (and the page) wider than the viewport. */ min-width: 0; } /* Topbar */ .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; } .topbar-left h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .topbar-left p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .topbar-right { display: flex; gap: 10px; flex-wrap: wrap; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* Cards are routinely used as grid/flex items (.grid-two, .grid-three, .stats-grid…) — without this a wide table/table-scroll inside one forces the whole grid track (and the page) wider than the viewport. */ min-width: 0; } .card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; } .card-title-row h2, .card h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .card p { margin-top: 0; color: var(--text-soft); } /* KPI stats */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; } .stats-grid.compact { margin-top: 18px; } .stat { position: relative; overflow: hidden; min-height: 138px; text-align: center; align-items: center; display: flex; flex-direction: column; justify-content: center; } .stat::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: var(--gradient-brand); } .modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(6px); z-index: 999; align-items: center; justify-content: center; } .modal-content { width: 700px; max-width: 95%; background: var(--surface-strong); border-radius: 18px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); border: 1px solid var(--line); overflow-y: scroll; max-height: 80%; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .close-btn { background: none; border: none; font-size: 22px; cursor: pointer; } .modal textarea { width: 100%; border-radius: 12px; padding: 12px; border: 1px solid var(--line); font-family: monospace; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; } .import-result { margin-top: 12px; font-size: 14px; } /* ── Legacy button aliases (use .button variants for new code) ── */ .dashButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s ease; background: var(--panel-glass); color: var(--text-soft); border: 1px solid var(--line); text-decoration: none; } .dashButton:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: var(--text); } .deleteButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s ease; background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.22); } .deleteButton:hover { background: var(--danger); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22); } .stat span { display: block; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; } .stat strong { display: block; margin-top: 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.05em; color: var(--text); } .stat small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; } /* Layout helpers */ .grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .stack-form { display: flex; flex-direction: column; gap: 22px; } /* Forms */ .field { margin-bottom: 16px; } label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.01em; padding-top: 1rem; } input, textarea, select { width: 100%; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); color: var(--text); font: inherit; padding: 12px 14px; outline: none; transition: 0.2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); } .theme-dark input, .theme-dark textarea, .theme-dark select { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } input::placeholder, textarea::placeholder { color: #8ea0b3; } input:focus, textarea:focus, select:focus { border-color: rgba(47, 128, 237, 0.36); box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12), 0 12px 30px rgba(47, 128, 237, 0.08); background: #fff; } .theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus { background: rgba(255, 255, 255, 0.06); } textarea { resize: vertical; min-height: 110px; } textarea[readonly] { background: rgba(248, 250, 252, 0.72); color: #334155; border-style: dashed; } .theme-dark textarea[readonly] { background: rgba(255, 255, 255, 0.03); color: #c2d1db; } /* Buttons */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border: none; border-radius: 14px; background: var(--gradient-cta); color: #fff; font-weight: 700; cursor: pointer; transition: 0.2s ease; box-shadow: 0 12px 24px rgba(255, 122, 0, 0.20); } .button:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(255, 122, 0, 0.26); } .button.secondary { background: var(--gradient-primary); box-shadow: 0 12px 24px rgba(47, 128, 237, 0.18); } .button.ghost { background: rgba(255,255,255,0.78); color: var(--text); border: 1px solid var(--line); box-shadow: none; } .theme-dark .button.ghost { background: rgba(255,255,255,0.04); } .button.ghost:hover { border-color: var(--line-strong); color: var(--text); } .button.danger { background: var(--danger); color: #fff; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.20); } .button.danger:hover { box-shadow: 0 16px 28px rgba(220, 38, 38, 0.30); } .button.success { background: var(--success); color: #fff; box-shadow: 0 12px 24px rgba(39, 174, 96, 0.20); } .button.success:hover { box-shadow: 0 16px 28px rgba(39, 174, 96, 0.28); } .button.warning { background: var(--warning); color: #1a1a1a; box-shadow: 0 12px 24px rgba(255, 184, 0, 0.20); } .button.sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; box-shadow: none; } .button.sm:hover { box-shadow: var(--shadow-sm); } .button.xs { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 8px; box-shadow: none; } .button.disabled { opacity: 0.35; pointer-events: none; cursor: default; } .grid-one { display: grid; grid-template-columns: 1fr; gap: 20px; } .preview-switch { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .preview-tab.active { background: var(--gradient-primary); color: white; border-color: transparent; box-shadow: 0 12px 24px rgba(47, 128, 237, 0.18); } .preview-panel { display: none; } .preview-panel.active { display: block; } .page-preview-frame { width: 100%; min-height: 920px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); } .actions-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 22px; } .actions-group { display: flex; gap: 6px; align-items: center; padding: 4px 10px 4px 8px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; } .actions-group-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-right: 6px; border-right: 1px solid var(--line); margin-right: 2px; white-space: nowrap; } /* Tables */ .table-card { overflow: hidden; } /* Wrap any wide table in this to get horizontal scroll on narrow screens instead of squashing columns or breaking the page layout. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; } .mlib-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; } td { color: var(--text-soft); } th { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } tbody tr { transition: 0.16s ease; } tbody tr:hover { background: var(--primary-soft); } /* Status badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; } .badge.primary { background: var(--primary-soft); color: var(--primary); } .badge.success { background: var(--success-soft); color: var(--success); } .badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.warning { background: var(--warning-soft); color: #c78500; } .theme-dark .badge.warning { color: #ffd25a; } .badge.dark { background: var(--secondary-soft); color: var(--secondary); } /* Flash messages */ .flash-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; font-weight: 600; border: 1px solid transparent; transition: opacity 0.32s ease, transform 0.32s ease; } .flash-dismissed { opacity: 0; transform: translateY(-6px); } .flash-close { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; color: inherit; opacity: 0.6; flex-shrink: 0; } .flash-close:hover { opacity: 1; } .flash-success { background: var(--success-soft); color: var(--success); border-color: rgba(39, 174, 96, 0.18); } .flash-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(220, 38, 38, 0.18); } .flash-warning { background: var(--warning-soft); color: #c78500; border-color: rgba(255, 184, 0, 0.20); } /* CTA preview */ .amofordesign-cta-preview { padding: 18px; border-radius: 18px; border: 1px dashed rgba(47, 128, 237, 0.24); background: linear-gradient(180deg, rgba(47,128,237,0.04), rgba(255,255,255,0.55)); } .theme-dark .amofordesign-cta-preview { background: linear-gradient(180deg, rgba(47,128,237,0.06), rgba(255,255,255,0.02)); } .amofordesign-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border-radius: 14px; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(11, 28, 44, 0.14); transition: 0.2s ease; } .amofordesign-cta:hover { transform: translateY(-1px); color: #fff; } .amofordesign-cta-primary { background: var(--gradient-cta); } .amofordesign-cta-secondary { background: var(--gradient-primary); } .amofordesign-cta-dark { background: linear-gradient(135deg, #0B1C2C, #10263b); } /* Section helpers */ .section-title { margin-bottom: 16px; } .section-title h2 { margin: 0; } .section-title p { margin: 8px 0 0; font-size: 14px; color: var(--muted); } /* Small helper panels */ .info-box { padding: 14px 16px; border-radius: 16px; background: var(--panel-glass); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.6; } /* Responsive */ @media (max-width: 1180px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .grid-three { grid-template-columns: 1fr; } } @media (max-width: 1080px) { /* .layout / .sidebar : voir le bloc « tiroir » plus bas, qui prend le relais à cette même largeur. Empiler la barre latérale ici la remettrait en flux. */ .grid-two, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .topbar { flex-direction: column; } .actions-row { flex-direction: column; align-items: stretch; } .actions-group { flex-wrap: wrap; } .button { width: 100%; } } @media (max-width: 700px) { .grid-two { grid-template-columns: 1fr !important; } } @media (max-width: 1080px) { /* .zIndexContainer's absolutely-positioned form assumes a single-row filter bar (fixed min-height). Once filters wrap onto several rows on narrower screens, the form overflows that fixed box and visually floats on top of whatever comes after it (e.g. the pages table). Let it take normal flow height instead. !important: the unconditional .zIndexContainer/form rules are declared later in this file with equal selector specificity and would otherwise win the cascade over this media query. */ .zIndexContainer { min-height: 0 !important; } .zIndexContainer form { position: static !important; } } @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr !important; } } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .image-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-strong); display: flex; flex-direction: column; } .image-thumb-wrapper { width: 100%; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; } .image-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; } .image-thumb-wrapper img { transition: transform 0.2s ease; } .image-card:hover img { transform: scale(1.05); } .image-info { padding: 12px; font-size: 0.9rem; display: grid; gap: 6px; } .image-alt { font-weight: 500; } .image-url { font-size: 0.75rem; color: #64748b; word-break: break-all; } .button.small { margin: 12px; padding: 8px 10px; font-size: 0.85rem; } .theme-toggle { display: inline-flex; align-items: center; gap: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-glass); color: var(--text); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: 0.2s ease; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .theme-toggle:hover { transform: translateY(-1px) ; border-color: var(--line-strong); } /* topBodyNavBar removed — logout + theme toggle now live in sidebar-footer */ .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.14), var(--shadow-sm); } .theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 15px; line-height: 1; } .theme-toggle-label { white-space: nowrap; } .users-page { display: grid; gap: 24px; } .users-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } .users-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 0; } .users-card h2 { margin: 0 0 8px 0; color: var(--text); } .users-card p.helper { margin: 0 0 20px 0; color: var(--muted); font-size: 0.95rem; } .users-form { display: grid; gap: 16px; } .users-form label { display: grid; gap: 8px; font-weight: 600; color: var(--text); } .users-form input, .users-form .cs-trigger { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; background: transparent; color: var(--text); } .users-checkbox { display: flex !important; align-items: center; gap: 10px; font-weight: 600; color: var(--text); } .users-checkbox input { width: auto; min-height: auto; } .user-list { display: grid; gap: 16px; } .user-item { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--panel-glass); } .user-item-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; } .user-item-title { display: flex; flex-direction: column; gap: 6px; } .user-item-title h3 { margin: 0; font-size: 1.1rem; color: var(--text); } .user-meta { display: flex; flex-wrap: wrap; gap: 8px; } .user-pill { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--panel-glass); color: var(--text-soft); border: 1px solid var(--line); } .user-pill.admin { background: var(--secondary-soft); color: var(--secondary); } .user-pill.client { background: var(--success-soft); color: var(--success); } .user-pill.site { background: var(--primary-soft); color: var(--primary); } .user-actions-grid { display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 12px; align-items: end; } .user-actions-grid form { margin: 0; } .user-inline-form { display: grid; gap: 12px; } .user-inline-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: end; } .user-inline-row.password-row { grid-template-columns: 1fr auto; } .danger-inline { display: flex; align-items: end; height: 100%; } .button-danger-soft { border: 1px solid rgba(220, 38, 38, 0.35); color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 10px 14px; font-weight: 600; cursor: pointer; } .button-danger-soft:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 1100px) { .users-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .user-inline-row, .user-inline-row.password-row { grid-template-columns: 1fr; } .user-item-header { flex-direction: column; align-items: start; } } .image-card-highlight { animation: imageCardPulse 1.2s ease; } @keyframes imageCardPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); transform: scale(1); } 40% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12); transform: scale(1.01); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: scale(1); } } .catalog-modal { position: fixed; inset: 0; z-index: 1200; display: none; } .catalog-modal.is-open { display: block; } .catalog-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .catalog-modal-panel { position: relative; z-index: 1; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: 24px auto; overflow: auto; border-radius: 24px; padding: 0 24px 24px 24px; background: var(--surface-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .catalog-modal-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; position: sticky; top: 0; background: var(--surface-strong); padding-bottom: 12px; padding-top: 12px; z-index: 2; } .catalog-modal .image-grid { margin-top: 8px; } .catalog-modal .image-card { background: var(--surface); } body.catalog-open { overflow: hidden; } .image-card-highlight { animation: imageCardPulse 1.2s ease; } @keyframes imageCardPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); transform: scale(1); } 40% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12); transform: scale(1.01); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: scale(1); } } @media (max-width: 760px) { .catalog-modal-panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); margin: 8px auto; padding: 16px; border-radius: 18px; } .catalog-modal-header { flex-direction: column; align-items: stretch; } } /* ── Confirm modal ─────────────────────────────────────────── */ .confirm-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; } .confirm-modal.is-open { display: flex; } .confirm-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.60); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .confirm-modal-panel { position: relative; z-index: 1; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-lg); width: min(420px, calc(100vw - 32px)); text-align: center; } .confirm-modal-message { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 22px; line-height: 1.5; } .confirm-modal-actions { display: flex; gap: 12px; justify-content: center; } /* ── SEO progress bar ──────────────────────────────────────── */ .seo-score-cell { display: flex; flex-direction: column; gap: 6px; } .seo-bar-wrap { width: 80px; height: 5px; border-radius: 99px; background: var(--line-strong); overflow: hidden; display: none; } .seo-bar { height: 100%; border-radius: 99px; transition: width 0.4s ease; } .seo-bar-good { background: var(--brand-green); } .seo-bar-mid { background: var(--brand-yellow); } .seo-bar-bad { background: var(--danger); } /* Stat card SEO bar */ .stat-seo-bar { width: 70%; height: 5px; border-radius: 99px; background: var(--line-strong); overflow: hidden; margin: 8px auto 0; } .stat-seo-fill { height: 100%; border-radius: 99px; } .stat-seo-good { background: var(--brand-green); } .stat-seo-mid { background: var(--brand-yellow); } .stat-seo-bad { background: var(--danger); } /* ── FAQ builder ───────────────────────────────────────────── */ .faq-builder { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .faq-row { display: flex; align-items: flex-start; gap: 10px; background: var(--panel-glass); border: 1px solid var(--line); border-radius: 14px; padding: 12px; } .faq-row-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; } .faq-row-inputs input, .faq-row-inputs textarea { padding-top: 0; margin: 0; font-size: 14px; } .faq-row-inputs label { padding-top: 0; } .faq-remove-btn { min-height: 36px; padding: 6px 10px; font-size: 18px; flex-shrink: 0; } /* ── Tag input (keywords_secondary) ───────────────────────── */ .tag-input-wrap { min-height: 50px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: rgba(255, 255, 255, 0.92); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text; transition: 0.2s ease; margin-top: 4px; } .theme-dark .tag-input-wrap { background: rgba(255, 255, 255, 0.04); } .tag-input-wrap:focus-within { border-color: rgba(47, 128, 237, 0.36); box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .kw-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; } .kw-chip-del { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 0; font-size: 15px; line-height: 1; } .kw-chip-del:hover { opacity: 1; } .tag-input-wrap input { border: none; background: none; box-shadow: none; padding: 4px 4px; min-width: 140px; flex: 1; font-size: 14px; } .tag-input-wrap input:focus { border: none; box-shadow: none; background: none; } /* ── Sticky save bar ───────────────────────────────────────── */ .sticky-save-bar { position: fixed; bottom: 0; left: 280px; right: 0; z-index: 900; background: var(--surface-strong); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(0,0,0,0.10); padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transform: translateY(100%); transition: transform 0.28s ease; } .sticky-save-bar.is-visible { transform: translateY(0); } .sticky-save-msg { font-size: 14px; color: var(--muted); font-weight: 600; } /* ── Pages list — count badge ──────────────────────────────── */ .pages-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); border-radius: 999px; font-size: 14px; font-weight: 700; padding: 3px 10px; margin-left: 8px; vertical-align: middle; } /* ── Filters bar ───────────────────────────────────────────── */ .pages-filters { margin-bottom: 18px; } .filters-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .filter-field { flex: 1; min-width: 160px; } .filter-actions { display: flex; gap: 10px; padding-bottom: 2px; } /* ── Pagination ────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } .page-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; transition: 0.18s ease; } .page-btn:hover:not(.disabled) { border-color: var(--primary); color: var(--primary); } .page-btn.disabled { opacity: 0.4; cursor: default; pointer-events: none; } .page-info { font-size: 14px; color: var(--muted); font-weight: 600; } /* ── Bar chart (dashboard) ─────────────────────────────────── */ .bar-chart { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .bar-row { display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 12px; } .bar-label { font-size: 13px; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { height: 10px; border-radius: 99px; background: var(--line-strong); overflow: hidden; } .bar-fill { height: 100%; border-radius: 99px; background: var(--gradient-primary); transition: width 0.5s ease; } .bar-value { font-size: 13px; font-weight: 700; color: var(--text); text-align: right; } /* ── CTA Builder ───────────────────────────────────────────── */ .cta-builder-section { margin-top: 22px; } .cta-new-form { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; margin-bottom: 22px; } .cta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .cta-form-grid label { grid-column: span 1; } .cta-form-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .cta-preview-inline { display: flex; align-items: center; gap: 10px; flex: 1; } .muted-label { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; } .cta-list { display: flex; flex-direction: column; gap: 14px; } .cta-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; background: var(--panel-glass); transition: 0.18s ease; } .cta-item:hover { border-color: var(--line-strong); } .cta-item-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .cta-item-meta { display: flex; align-items: center; gap: 10px; } .cta-code-pill { display: inline-flex; align-items: center; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 700; font-family: monospace; color: var(--text); letter-spacing: 0.02em; } .cta-item-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cta-url-muted { font-size: 13px; color: var(--muted); word-break: break-all; } .cta-edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } /* ── Bulk action bar ───────────────────────────────────────── */ .col-check { width: 40px; text-align: center; vertical-align: middle; } .col-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; padding: 0; border-radius: 5px; } .bulk-action-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 950; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: min(680px, calc(100vw - 48px)); transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .bulk-action-bar.is-visible { transform: translateX(-50%) translateY(0); } .bulk-count { font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; background: var(--primary-soft); padding: 6px 12px; border-radius: 999px; } .bulk-controls { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; } /* .bulk-select styles are now handled by .cs-compact via the custom select component */ /* ── Responsive adjustments ────────────────────────────────── */ @media (max-width: 1080px) { .sticky-save-bar { left: 0; } .bar-row { grid-template-columns: 120px 1fr 36px; } .cta-form-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .filters-row { flex-direction: column; } .filter-field { min-width: 100%; } .bar-row { grid-template-columns: 90px 1fr 32px; } .bulk-action-bar { bottom: 12px; padding: 12px 14px; gap: 10px; } .bulk-controls { flex-direction: column; } .cta-item-header { flex-direction: column; align-items: flex-start; } } /* ── Mobile hamburger + sidebar drawer ──────────────────────── */ .sidebar-hamburger { display: none; position: fixed; top: 14px; left: 14px; z-index: 1100; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: var(--sidebar-bg); color: #fff; cursor: pointer; align-items: center; justify-content: center; box-shadow: var(--shadow-md); } .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); } /* Le tiroir démarre à 1080px, pas à 760px : entre les deux, la barre latérale se dépliait en pleine largeur avec le logo sur 300 px de haut, et il fallait faire défiler tout le menu avant d'atteindre le contenu de la page. C'est la largeur d'un portable en fenêtre partagée, pas un cas rare. */ @media (max-width: 1080px) { .layout { grid-template-columns: 1fr; } .sidebar { position: fixed !important; top: 0; left: 0; height: 100vh !important; width: 280px; z-index: 1060; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .sidebar.is-open { transform: translateX(0); } .sidebar-overlay.is-open { display: block; } .sidebar-hamburger { display: flex; } .content { padding: 20px 20px 20px; padding-top: 64px; } } @media (max-width: 760px) { .content { padding: 16px 14px 16px; padding-top: 64px; } } /* ── Sortable table headers ─────────────────────────────────── */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--primary); } .sort-icon { display: inline-block; margin-left: 4px; opacity: 0.45; font-size: 10px; } th.sort-asc .sort-icon, th.sort-desc .sort-icon { opacity: 1; color: var(--primary); } /* ── SEO score breakdown ────────────────────────────────────── */ .seo-popover-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text-soft); border-bottom: 1px solid var(--line); } .seo-popover-row:last-child { border-bottom: none; font-weight: 700; color: var(--text); padding-top: 8px; } .seo-criterion-pts { flex-shrink: 0; font-weight: 700; font-size: 11px; } .seo-criterion-pts.earned { color: var(--brand-green); } .seo-criterion-pts.missed { color: var(--danger); opacity: 0.7; } /* ── CTA full-width block ───────────────────────────────────── */ .cta-block-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .cta-block-grid > * { flex: 1 1 180px; } .cta-block-preview { flex: 0 0 auto; } /* ── SEO details panel (sous stats-grid) ───────────────────── */ .seo-details-panel { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-top: -4px; margin-bottom: 20px; } .seo-details-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; } .seo-details-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; } /* ── Heading TOC inside SEO panel ───────────────────────────── */ .seo-toc-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .seo-toc-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; } .seo-toc-list { display: flex; flex-direction: column; gap: 4px; } .seo-toc-empty { font-size: 12px; color: var(--muted); margin: 0; } .seo-toc-row { display: flex; align-items: center; gap: 8px; } .seo-toc-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-family: monospace; min-width: 28px; text-align: center; } .seo-toc-h1 { background: #dbeafe; color: #1d4ed8; } .seo-toc-h2 { background: #ede9fe; color: #6d28d9; } .seo-toc-h3 { background: #d1fae5; color: #065f46; } .seo-toc-h4 { background: #fef9c3; color: #92400e; } .seo-toc-h5 { background: #fee2e2; color: #991b1b; } .seo-toc-h6 { background: #f1f5f9; color: #475569; } .seo-toc-input { flex: 1; font-size: 12px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-family: inherit; transition: border-color .15s; } .seo-toc-input:focus { outline: none; border-color: #8b5cf6; } /* ── Breadcrumb ─────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { opacity: 0.45; } .breadcrumb-current { color: var(--text-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } /* ── FAQ drag handle ────────────────────────────────────────── */ .faq-drag-handle { display: flex; align-items: center; padding: 4px; cursor: grab; color: var(--muted); opacity: 0.5; flex-shrink: 0; font-size: 16px; line-height: 1; } .faq-drag-handle:hover { opacity: 1; color: var(--primary); } .faq-row.is-dragging { opacity: 0.4; border-style: dashed; } .faq-row.drag-over { border-color: var(--primary); background: var(--primary-soft); } /* ── Collapsible details sections ───────────────────────────── */ .collapsible-section { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin: 20px 0; } .collapsible-section summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text); background: var(--panel-glass); list-style: none; user-select: none; transition: background 0.15s; } .collapsible-section summary::-webkit-details-marker { display: none; } .collapsible-section summary:hover { background: var(--primary-soft); } .collapsible-section[open] summary { border-bottom: 1px solid var(--line); } .collapsible-chevron { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform 0.22s ease; } .collapsible-section[open] .collapsible-chevron { transform: rotate(180deg); } .collapsible-body { padding: 18px; } .zIndexContainer { display: block; width: 100%; position: relative; min-height: 125px; z-index: 99; } .zIndexContainer form { width: 100%; position: absolute; left:0; right:0; top:0; bottom:0; z-index: 99; } #statsFilter { display: flex; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 1.5rem; position: relative; z-index: 99; } #statsFilter form { width:100%; } #statsFilter .preFilter { flex-grow: 1; display: flex; align-items: center; } #statsFilter .dateRange { flex-grow: 1; display: flex; align-items: center; } #statsFilter .websiteSelector { flex-grow: 1; display: flex; align-items: center; } #statsFilter .submitStatsFilter { flex-grow: 1; justify-content: flex-end; display: flex; } #statsFilter label { display: flex; flex-direction: row; } #statsFilter .cs-wrapper { max-width: 400px; } /* ═══════════════════════════════════════════════════════════════ CUSTOM SELECT ═══════════════════════════════════════════════════════════════ */ /* Hide the native select; keep it in the DOM for form submission */ .cs-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } .cs-wrapper { position: relative; width: 100%; } /* Trigger button */ .cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; outline: none; user-select: none; text-align: left; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .theme-dark .cs-trigger { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .cs-trigger:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.97); } .theme-dark .cs-trigger:hover { background: rgba(255, 255, 255, 0.07); } .cs-trigger:focus, .cs-wrapper.is-open .cs-trigger { border-color: rgba(47, 128, 237, 0.45); box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12), 0 8px 24px rgba(47, 128, 237, 0.08); background: #fff; } .theme-dark .cs-trigger:focus, .theme-dark .cs-wrapper.is-open .cs-trigger { background: rgba(255, 255, 255, 0.06); } .cs-trigger-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .cs-trigger-label.is-placeholder { color: var(--muted); } .cs-chevron { flex-shrink: 0; width: 15px; height: 15px; color: var(--muted); transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1); } .cs-wrapper.is-open .cs-chevron { transform: rotate(180deg); color: var(--primary); } /* Dropdown panel — portalled to via JS, position:fixed set by JS */ .cs-dropdown { position: fixed; /* coordinates set by JS via getBoundingClientRect */ z-index: 99999; /* above all stacking contexts */ background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.04); opacity: 0; transform: translateY(-6px) scale(0.97); transform-origin: top center; pointer-events: none; transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); max-height: 288px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .cs-dropdown.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Option items */ .cs-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 14px; color: var(--text); cursor: pointer; transition: background 0.1s ease, color 0.1s ease; border-bottom: 1px solid var(--line); } .cs-option:last-child { border-bottom: none; } .cs-option:hover, .cs-option.is-focused { background: var(--primary-soft); color: var(--primary); } .cs-option.is-selected { color: var(--primary); font-weight: 600; } .cs-option.is-selected .cs-check { display: block; } .cs-check { display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--primary); } /* Compact variant — for filter bars, bulk controls */ .cs-compact .cs-trigger { min-height: 36px; padding: 7px 11px; border-radius: 12px; font-size: 13px; } .cs-compact .cs-dropdown { border-radius: 12px; } .cs-compact .cs-option { padding: 8px 11px; font-size: 13px; } .cs-compact.cs-wrapper { min-width: 180px; } /* ═══════════════════════════════════════════════════════════════ ACE CODE EDITOR ═══════════════════════════════════════════════════════════════ */ .ace-wrap { position: relative; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; background: #1d2433; } .theme-light .ace-wrap { background: #f8f9fc; } .ace-wrap:focus-within { border-color: rgba(47, 128, 237, 0.45); box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12); } .ace-wrap .ace_editor { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important; font-size: 13px !important; line-height: 1.65 !important; width: 100% !important; } /* Hide the original textarea — keep it in the DOM for form submission */ textarea.ace-replaced { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } /* ═══════════════════════════════════════════════════════════════ ACCENT COLOUR SCHEMES (set via html[data-accent="..."]) Admin can choose in /admin/app-settings Default (no attribute) = kwoord blue/orange/green ═══════════════════════════════════════════════════════════════ */ /* Acier — Blue-grey / steel corporate */ html[data-accent="acier"] { --brand-orange: #2e6da4; --brand-orange-hover: #235a8f; --brand-orange-soft: rgba(46, 109, 164, 0.12); --brand-blue: #3d7ab5; --brand-blue-hover: #2e6da4; --brand-blue-soft: rgba(61, 122, 181, 0.12); --brand-green: #546e7a; --brand-green-hover: #37474f; --brand-green-soft: rgba(84, 110, 122, 0.12); --gradient-brand: linear-gradient(135deg, #90a4ae 0%, #3d7ab5 52%, #1a4f7c 100%); --gradient-primary: linear-gradient(135deg, #546e7a 0%, #2e6da4 100%); --gradient-cta: linear-gradient(135deg, #2e6da4 0%, #1a4f7c 100%); } /* Marine — Deep navy corporate */ html[data-accent="marine"] { --brand-orange: #1a3a6e; --brand-orange-hover: #122b55; --brand-orange-soft: rgba(26, 58, 110, 0.12); --brand-blue: #1e4d99; --brand-blue-hover: #1a3a6e; --brand-blue-soft: rgba(30, 77, 153, 0.12); --brand-green: #2563eb; --brand-green-hover: #1d4ed8; --brand-green-soft: rgba(37, 99, 235, 0.12); --gradient-brand: linear-gradient(135deg, #2563eb 0%, #1e4d99 52%, #0d2137 100%); --gradient-primary: linear-gradient(135deg, #1e4d99 0%, #1a3a6e 100%); --gradient-cta: linear-gradient(135deg, #1a3a6e 0%, #0d2137 100%); } /* Azur — Light cerulean blue */ html[data-accent="azur"] { --brand-orange: #0284c7; --brand-orange-hover: #0369a1; --brand-orange-soft: rgba(2, 132, 199, 0.12); --brand-blue: #0ea5e9; --brand-blue-hover: #0284c7; --brand-blue-soft: rgba(14, 165, 233, 0.12); --brand-green: #38bdf8; --brand-green-hover: #0ea5e9; --brand-green-soft: rgba(56, 189, 248, 0.12); --gradient-brand: linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 52%, #0369a1 100%); --gradient-primary: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); --gradient-cta: linear-gradient(135deg, #0ea5e9 0%, #075985 100%); } /* Iris — Blue-mauve / periwinkle-indigo */ html[data-accent="iris"] { --brand-orange: #4f46e5; --brand-orange-hover: #4338ca; --brand-orange-soft: rgba(79, 70, 229, 0.12); --brand-blue: #6366f1; --brand-blue-hover: #4f46e5; --brand-blue-soft: rgba(99, 102, 241, 0.12); --brand-green: #818cf8; --brand-green-hover: #6366f1; --brand-green-soft: rgba(129, 140, 248, 0.12); --gradient-brand: linear-gradient(135deg, #a5b4fc 0%, #6366f1 52%, #3730a3 100%); --gradient-primary: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%); --gradient-cta: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); } /* ═══════════════════════════════════════════════════════════════ COMPLETE THEMES — override the full variable set per palette Each theme defines both .theme-light and .theme-dark variants ═══════════════════════════════════════════════════════════════ */ /* ── COSMOS — Indigo espace, sidebar nuit profonde ───────────── */ /* Inspiré Linear : indigo tech, propre, pas du tout 90s */ html[data-accent="violet"].theme-light { --bg: #FAFAFA; --bg-soft: #F0EFFF; --surface: rgba(255,255,255,.94); --surface-strong: #FFFFFF; --surface-dark: #1A1560; --line: rgba(67,56,202,.08); --line-strong: rgba(67,56,202,.14); --text: #0F0D2A; --text-soft: #1E1B4B; --muted: #6D6A8C; --primary: #4338CA; --primary-hover: #3730A3; --primary-soft: rgba(67,56,202,.09); --secondary: #6366F1; --secondary-hover: #4F46E5; --secondary-soft: rgba(99,102,241,.09); --success: #059669; --success-soft: rgba(5,150,105,.10); --warning: #D97706; --warning-soft: rgba(217,119,6,.12); --danger: #DC2626; --danger-soft: rgba(220,38,38,.10); --shadow-sm: 0 2px 8px rgba(67,56,202,.06), 0 8px 20px rgba(0,0,0,.05); --shadow-md: 0 4px 16px rgba(67,56,202,.08), 0 16px 36px rgba(0,0,0,.07); --shadow-lg: 0 8px 24px rgba(67,56,202,.10), 0 28px 64px rgba(0,0,0,.10); --panel-glass: rgba(255,255,255,.82); --sidebar-bg: #1A1560; --body-bg: radial-gradient(ellipse at 70% 0%, rgba(99,102,241,.12), transparent 38%), radial-gradient(ellipse at 0% 100%, rgba(67,56,202,.07), transparent 34%), linear-gradient(180deg, #FAFAFA 0%, #F5F4FF 100%); --brand-blue: #4338CA; --brand-blue-hover: #3730A3; --brand-blue-soft: rgba(67,56,202,.09); --brand-orange: #7C3AED; --brand-orange-hover: #6D28D9; --brand-orange-soft: rgba(124,58,237,.09); --brand-green: #059669; --brand-green-hover: #047857; --brand-green-soft: rgba(5,150,105,.10); --gradient-brand: linear-gradient(135deg, #A5B4FC 0%, #6366F1 48%, #4338CA 100%); --gradient-primary: linear-gradient(135deg, #818CF8 0%, #4338CA 100%); --gradient-cta: linear-gradient(135deg, #818CF8 0%, #4338CA 100%); } html[data-accent="violet"].theme-dark { --bg: #09071A; --bg-soft: #100E2A; --surface: rgba(20,17,45,.86); --surface-strong: #181540; --surface-dark: #09071A; --line: rgba(99,102,241,.10); --line-strong: rgba(99,102,241,.18); --text: #EEF0FF; --text-soft: #C7C9F0; --muted: #7B7EA8; --primary: #818CF8; --primary-hover: #6366F1; --primary-soft: rgba(129,140,248,.12); --secondary: #A5B4FC; --secondary-hover: #818CF8; --secondary-soft: rgba(165,180,252,.10); --success: #34D399; --success-soft: rgba(52,211,153,.12); --warning: #FCD34D; --warning-soft: rgba(252,211,77,.12); --danger: #F87171; --danger-soft: rgba(248,113,113,.12); --shadow-sm: 0 8px 24px rgba(0,0,0,.30); --shadow-md: 0 16px 40px rgba(0,0,0,.38); --shadow-lg: 0 28px 72px rgba(0,0,0,.48); --panel-glass: rgba(255,255,255,.04); --sidebar-bg: #06041A; --body-bg: radial-gradient(ellipse at 30% 0%, rgba(129,140,248,.14), transparent 36%), radial-gradient(ellipse at 80% 90%, rgba(99,102,241,.08), transparent 30%), linear-gradient(180deg, #09071A 0%, #100E2A 100%); --brand-blue: #818CF8; --brand-blue-hover: #6366F1; --brand-blue-soft: rgba(129,140,248,.12); --brand-orange: #A5B4FC; --brand-orange-hover: #818CF8; --brand-orange-soft: rgba(165,180,252,.10); --brand-green: #34D399; --brand-green-hover: #10B981; --brand-green-soft: rgba(52,211,153,.12); --gradient-brand: linear-gradient(135deg, #C7D2FE 0%, #818CF8 48%, #4338CA 100%); --gradient-primary: linear-gradient(135deg, #C7D2FE 0%, #818CF8 100%); --gradient-cta: linear-gradient(135deg, #A5B4FC 0%, #6366F1 100%); } /* ── ONYX — Slate développeur, sidebar graphite ──────────────── */ /* Inspiré GitHub/Vercel : slate pur, accent bleu froid */ html[data-accent="carbon"].theme-light { --bg: #F6F8FA; --bg-soft: #EAECEF; --surface: rgba(255,255,255,.96); --surface-strong: #FFFFFF; --surface-dark: #0D1117; --line: rgba(13,17,23,.08); --line-strong: rgba(13,17,23,.14); --text: #0D1117; --text-soft: #24292F; --muted: #656D76; --primary: #0969DA; --primary-hover: #0756BA; --primary-soft: rgba(9,105,218,.09); --secondary: #1F6FEB; --secondary-hover: #1158C7; --secondary-soft: rgba(31,111,235,.09); --success: #1A7F37; --success-soft: rgba(26,127,55,.10); --warning: #9A6700; --warning-soft: rgba(154,103,0,.12); --danger: #CF222E; --danger-soft: rgba(207,34,46,.10); --shadow-sm: 0 1px 3px rgba(13,17,23,.08), 0 6px 18px rgba(13,17,23,.05); --shadow-md: 0 3px 8px rgba(13,17,23,.08), 0 14px 32px rgba(13,17,23,.07); --shadow-lg: 0 6px 14px rgba(13,17,23,.09), 0 24px 56px rgba(13,17,23,.10); --panel-glass: rgba(255,255,255,.86); --sidebar-bg: #0D1117; --body-bg: linear-gradient(180deg, #F6F8FA 0%, #EAECEF 100%); --brand-blue: #0969DA; --brand-blue-hover: #0756BA; --brand-blue-soft: rgba(9,105,218,.09); --brand-orange: #BC4C00; --brand-orange-hover: #A04000; --brand-orange-soft: rgba(188,76,0,.09); --brand-green: #1A7F37; --brand-green-hover: #166B2E; --brand-green-soft: rgba(26,127,55,.10); --gradient-brand: linear-gradient(135deg, #79C0FF 0%, #1F6FEB 48%, #0D419D 100%); --gradient-primary: linear-gradient(135deg, #58A6FF 0%, #0969DA 100%); --gradient-cta: linear-gradient(135deg, #58A6FF 0%, #0969DA 100%); } html[data-accent="carbon"].theme-dark { --bg: #0D1117; --bg-soft: #161B22; --surface: rgba(22,27,34,.90); --surface-strong: #21262D; --surface-dark: #0D1117; --line: rgba(240,246,252,.08); --line-strong: rgba(240,246,252,.14); --text: #E6EDF3; --text-soft: #C9D1D9; --muted: #8B949E; --primary: #58A6FF; --primary-hover: #388BFD; --primary-soft: rgba(88,166,255,.12); --secondary: #79C0FF; --secondary-hover: #58A6FF; --secondary-soft: rgba(121,192,255,.10); --success: #3FB950; --success-soft: rgba(63,185,80,.12); --warning: #D29922; --warning-soft: rgba(210,153,34,.12); --danger: #F85149; --danger-soft: rgba(248,81,73,.12); --shadow-sm: 0 8px 24px rgba(0,0,0,.32); --shadow-md: 0 16px 40px rgba(0,0,0,.40); --shadow-lg: 0 28px 72px rgba(0,0,0,.50); --panel-glass: rgba(255,255,255,.04); --sidebar-bg: #010409; --body-bg: radial-gradient(ellipse at 20% 10%, rgba(88,166,255,.08), transparent 30%), linear-gradient(180deg, #0D1117 0%, #161B22 100%); --brand-blue: #58A6FF; --brand-blue-hover: #388BFD; --brand-blue-soft: rgba(88,166,255,.12); --brand-orange: #F0883E; --brand-orange-hover: #DB6D28; --brand-orange-soft: rgba(240,136,62,.12); --brand-green: #3FB950; --brand-green-hover: #2EA043; --brand-green-soft: rgba(63,185,80,.12); --gradient-brand: linear-gradient(135deg, #79C0FF 0%, #58A6FF 48%, #388BFD 100%); --gradient-primary: linear-gradient(135deg, #79C0FF 0%, #58A6FF 100%); --gradient-cta: linear-gradient(135deg, #79C0FF 0%, #388BFD 100%); } /* ── ATLANTIS — Teal profond, sidebar abyssal ────────────────── */ /* Inspiré Stripe/fintech : teal saturé, clean et modern */ html[data-accent="blanc"].theme-light { --bg: #F0FDFA; --bg-soft: #CCFBF1; --surface: rgba(255,255,255,.94); --surface-strong: #FFFFFF; --surface-dark: #042F2E; --line: rgba(13,148,136,.08); --line-strong: rgba(13,148,136,.15); --text: #0D2725; --text-soft: #134E4A; --muted: #5C8A86; --primary: #0D9488; --primary-hover: #0F766E; --primary-soft: rgba(13,148,136,.09); --secondary: #0891B2; --secondary-hover: #0E7490; --secondary-soft: rgba(8,145,178,.09); --success: #16A34A; --success-soft: rgba(22,163,74,.10); --warning: #D97706; --warning-soft: rgba(217,119,6,.12); --danger: #DC2626; --danger-soft: rgba(220,38,38,.10); --shadow-sm: 0 2px 8px rgba(13,148,136,.07), 0 8px 20px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(13,148,136,.09), 0 16px 36px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(13,148,136,.10), 0 28px 64px rgba(0,0,0,.09); --panel-glass: rgba(255,255,255,.82); --sidebar-bg: #042F2E; --body-bg: radial-gradient(ellipse at 65% 0%, rgba(13,148,136,.12), transparent 36%), radial-gradient(ellipse at 0% 100%, rgba(8,145,178,.06), transparent 32%), linear-gradient(180deg, #F0FDFA 0%, #E6FAF8 100%); --brand-blue: #0D9488; --brand-blue-hover: #0F766E; --brand-blue-soft: rgba(13,148,136,.09); --brand-orange: #0891B2; --brand-orange-hover: #0E7490; --brand-orange-soft: rgba(8,145,178,.09); --brand-green: #16A34A; --brand-green-hover: #15803D; --brand-green-soft: rgba(22,163,74,.10); --gradient-brand: linear-gradient(135deg, #5EEAD4 0%, #0D9488 48%, #042F2E 100%); --gradient-primary: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%); --gradient-cta: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%); } html[data-accent="blanc"].theme-dark { --bg: #021A18; --bg-soft: #082F2E; --surface: rgba(10,42,40,.88); --surface-strong: #0D3835; --surface-dark: #021A18; --line: rgba(94,234,212,.08); --line-strong: rgba(94,234,212,.14); --text: #CCFBF1; --text-soft: #99F6E4; --muted: #5EEAD4; --primary: #2DD4BF; --primary-hover: #14B8A6; --primary-soft: rgba(45,212,191,.12); --secondary: #22D3EE; --secondary-hover: #06B6D4; --secondary-soft: rgba(34,211,238,.10); --success: #4ADE80; --success-soft: rgba(74,222,128,.12); --warning: #FCD34D; --warning-soft: rgba(252,211,77,.12); --danger: #F87171; --danger-soft: rgba(248,113,113,.12); --shadow-sm: 0 8px 24px rgba(0,0,0,.30); --shadow-md: 0 16px 40px rgba(0,0,0,.38); --shadow-lg: 0 28px 72px rgba(0,0,0,.48); --panel-glass: rgba(255,255,255,.04); --sidebar-bg: #010E0D; --body-bg: radial-gradient(ellipse at 25% 5%, rgba(45,212,191,.12), transparent 32%), radial-gradient(ellipse at 80% 88%, rgba(13,148,136,.07), transparent 28%), linear-gradient(180deg, #021A18 0%, #082F2E 100%); --brand-blue: #2DD4BF; --brand-blue-hover: #14B8A6; --brand-blue-soft: rgba(45,212,191,.12); --brand-orange: #22D3EE; --brand-orange-hover: #06B6D4; --brand-orange-soft: rgba(34,211,238,.10); --brand-green: #4ADE80; --brand-green-hover: #22C55E; --brand-green-soft: rgba(74,222,128,.12); --gradient-brand: linear-gradient(135deg, #99F6E4 0%, #2DD4BF 48%, #0D9488 100%); --gradient-primary: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%); --gradient-cta: linear-gradient(135deg, #5EEAD4 0%, #14B8A6 100%); } /* ── GRAPHITE — Zinc chaud, accent rose/amber raffiné ────────── */ /* Inspiré Raycast/Craft : zinc warm, accent subtil moderne */ html[data-accent="encre"].theme-light { --bg: #FAFAF9; --bg-soft: #F2F0EE; --surface: rgba(255,255,255,.96); --surface-strong: #FFFFFF; --surface-dark: #1C1917; --line: rgba(28,25,23,.07); --line-strong: rgba(28,25,23,.13); --text: #1C1917; --text-soft: #292524; --muted: #78716C; --primary: #E11D48; --primary-hover: #BE123C; --primary-soft: rgba(225,29,72,.09); --secondary: #F43F5E; --secondary-hover: #E11D48; --secondary-soft: rgba(244,63,94,.09); --success: #16A34A; --success-soft: rgba(22,163,74,.10); --warning: #CA8A04; --warning-soft: rgba(202,138,4,.12); --danger: #991B1B; --danger-soft: rgba(153,27,27,.10); --shadow-sm: 0 1px 3px rgba(28,25,23,.07), 0 6px 18px rgba(0,0,0,.05); --shadow-md: 0 3px 8px rgba(28,25,23,.07), 0 14px 32px rgba(0,0,0,.06); --shadow-lg: 0 6px 14px rgba(28,25,23,.08), 0 24px 56px rgba(0,0,0,.09); --panel-glass: rgba(255,255,255,.86); --sidebar-bg: #1C1917; --body-bg: radial-gradient(ellipse at 68% 0%, rgba(225,29,72,.08), transparent 34%), linear-gradient(180deg, #FAFAF9 0%, #F5F2F0 100%); --brand-blue: #E11D48; --brand-blue-hover: #BE123C; --brand-blue-soft: rgba(225,29,72,.09); --brand-orange: #F43F5E; --brand-orange-hover: #E11D48; --brand-orange-soft: rgba(244,63,94,.09); --brand-green: #16A34A; --brand-green-hover: #15803D; --brand-green-soft: rgba(22,163,74,.10); --gradient-brand: linear-gradient(135deg, #FDA4AF 0%, #F43F5E 48%, #E11D48 100%); --gradient-primary: linear-gradient(135deg, #FB7185 0%, #E11D48 100%); --gradient-cta: linear-gradient(135deg, #FB7185 0%, #E11D48 100%); } html[data-accent="encre"].theme-dark { --bg: #12110F; --bg-soft: #1C1917; --surface: rgba(28,25,23,.90); --surface-strong: #28211E; --surface-dark: #12110F; --line: rgba(240,234,228,.07); --line-strong: rgba(240,234,228,.12); --text: #FAFAF9; --text-soft: #E7E5E4; --muted: #A8A29E; --primary: #FB7185; --primary-hover: #F43F5E; --primary-soft: rgba(251,113,133,.12); --secondary: #FDA4AF; --secondary-hover: #FB7185; --secondary-soft: rgba(253,164,175,.10); --success: #4ADE80; --success-soft: rgba(74,222,128,.12); --warning: #FCD34D; --warning-soft: rgba(252,211,77,.12); --danger: #FCA5A5; --danger-soft: rgba(252,165,165,.12); --shadow-sm: 0 8px 24px rgba(0,0,0,.30); --shadow-md: 0 16px 40px rgba(0,0,0,.38); --shadow-lg: 0 28px 72px rgba(0,0,0,.48); --panel-glass: rgba(255,255,255,.04); --sidebar-bg: #09080A; --body-bg: radial-gradient(ellipse at 28% 5%, rgba(251,113,133,.12), transparent 32%), radial-gradient(ellipse at 80% 88%, rgba(244,63,94,.06), transparent 28%), linear-gradient(180deg, #12110F 0%, #1C1917 100%); --brand-blue: #FB7185; --brand-blue-hover: #F43F5E; --brand-blue-soft: rgba(251,113,133,.12); --brand-orange: #FDA4AF; --brand-orange-hover: #FB7185; --brand-orange-soft: rgba(253,164,175,.10); --brand-green: #4ADE80; --brand-green-hover: #22C55E; --brand-green-soft: rgba(74,222,128,.12); --gradient-brand: linear-gradient(135deg, #FDA4AF 0%, #FB7185 48%, #E11D48 100%); --gradient-primary: linear-gradient(135deg, #FDA4AF 0%, #FB7185 100%); --gradient-cta: linear-gradient(135deg, #FDA4AF 0%, #F43F5E 100%); } /* ── App Settings — swatch UI ────────────────────────────────── */ .accent-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; } .accent-swatch { border: 2px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; background: var(--surface); position: relative; } .accent-swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .accent-swatch.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .accent-swatch.is-active::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background: var(--primary); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 22px; text-align: center; } /* Mini UI preview inside each swatch */ .accent-swatch-preview { height: 110px; display: flex; overflow: hidden; position: relative; } /* Light preview — left 65% */ .swp-light { width: 65%; height: 100%; display: flex; } /* Dark preview — right 35% */ .swp-dark { width: 35%; height: 100%; display: flex; position: relative; } .swp-dark::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.12); } .swp-sidebar { width: 34%; height: 100%; display: flex; flex-direction: column; gap: 5px; padding: 10px 6px; } .swp-nav-dot { height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); } .swp-nav-dot.active { background: rgba(255,255,255,.65); width: 80% !important; } .swp-content { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; } .swp-btn { height: 14px; border-radius: 5px; width: 55%; } .swp-card { flex: 1; border-radius: 6px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(0,0,0,.06); } .swp-line { height: 5px; border-radius: 3px; opacity: .18; } .swp-line.sm { width: 60%; opacity: .11; } .swp-label { position: absolute; bottom: 4px; right: 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .5; text-transform: uppercase; } .accent-swatch-body { padding: 11px 14px 13px; } .accent-swatch-name { font-weight: 700; font-size: 14px; color: var(--text); margin: 0 0 3px; display: flex; align-items: center; justify-content: space-between; } .accent-swatch-tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .accent-swatch-tag.new { background: var(--primary-soft); color: var(--primary); } .accent-swatch-tag.classic { background: var(--line); color: var(--muted); } .accent-swatch-desc { font-size: 11px; color: var(--muted); margin: 0; } /* ── Sidebar compacte sur desktop : évite le scroll vertical (ajouté 2026-06-22) ── */ @media (min-width: 761px) { .sidebar { padding: 16px 16px; } .brand { margin-bottom: 12px; } .brand-subtitle { margin-top: 3px; } .sidebar nav { gap: 3px; } .sidebar nav a { min-height: 0; padding: 7px 12px; border-radius: 11px; } .sidebar nav a svg { width: 17px; height: 17px; } .sidebar .nav-section { padding: 9px 12px 3px !important; } .sidebar-footer { padding-top: 10px; gap: 7px; } .sidebar-logout-btn, .sidebar .theme-toggle { min-height: 0; padding: 8px 12px; } } /* =========================================================================== COMPOSANTS PARTAGES (.kw-*) --------------------------------------------------------------------------- Ajoutes le 2026-08-07. Constat de l'audit : le selecteur de site etait reimplemente dans 8 ecrans, les onglets en 2 versions, et 1073 attributs style= vivaient dans les templates. Chaque ecran refaisait sa mise en forme et se heurtait aux regles globales ci-dessus. Regle : ce qui apparait sur plus d'un ecran se declare ici, et s'utilise via les macros de templates/_components.html. On n'ecrit plus de style= en dur pour ces elements-la. ======================================================================== */ /* -- Selecteur de site ---------------------------------------------------- */ .kw-site-select { display: flex; align-items: center; gap: 8px; } .kw-site-select select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); } /* -- Barre d'onglets ------------------------------------------------------ */ .kw-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .kw-tabs a { padding: 9px 15px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .kw-tabs a:hover { color: var(--text); } .kw-tabs a.on { color: var(--text); border-bottom-color: var(--primary); } .kw-tabs a span { font-size: 11px; background: var(--line); border-radius: 9px; padding: 1px 7px; margin-left: 5px; } .kw-tabs a.on span { background: var(--primary); color: #fff; } /* -- Case a cocher en ligne ---------------------------------------------- app.css met les