@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette Coekipia */
    --c-bg:           #fafaf7;
    --c-surface:      #ffffff;
    --c-surface-soft: #fbf5ff;
    --c-primary:      #6861f5;
    --c-primary-700:  #573e69;
    --c-primary-300:  #aa8fe4;
    --c-lavender:     #dddbff;
    --c-lavender-50:  #eeedff;
    --c-pink-50:      #f7f0fa;
    --c-text:         #0a0a0a;
    --c-text-2:       #483953;
    --c-text-muted:   #7d5f92;
    --c-border:       rgba(180, 156, 197, 0.28);
    --c-border-strong:rgba(180, 156, 197, 0.55);
    --c-success:      #16a34a;
    --c-success-soft: #dcfce7;
    --c-danger:       #dc2626;
    --c-warn:         #b45309;

    --radius-xl: 12px;
    --radius-lg: 9px;
    --radius-md: 6px;
    --radius-sm: 5px;

    --shadow-sm: 0 1px 2px rgba(40, 30, 60, 0.05);
    --shadow-md: 0 1px 3px rgba(40, 30, 60, 0.06), 0 1px 2px rgba(40, 30, 60, 0.04);
    --shadow-lg: 0 6px 20px rgba(40, 30, 60, 0.08);

    /* Accent du portail cible (surchargé en JS pendant la simulation) */
    --sim-accent: #0a6cb0;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
      radial-gradient(900px 500px at 12% -10%, rgba(221, 219, 255, 0.55) 0%, transparent 60%),
      radial-gradient(900px 600px at 100% 0%,   rgba(236, 216, 243, 0.45) 0%, transparent 55%);
    pointer-events: none;
}
.hidden { display: none !important; }

/* ===================== HEADER ===================== */
header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border);
    padding: 12px 32px;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 80;
}
.header-left { display: flex; align-items: center; gap: 13px; }
header h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.header-right { display: flex; align-items: center; gap: 10px; }

.badge {
    font-size: 10.5px; padding: 5px 12px; border-radius: 6px;
    background: var(--c-lavender-50); color: var(--c-primary-700);
    font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--c-border);
}
.badge.ok   { background: var(--c-success-soft); color: #166534; border-color: rgba(22,163,74,0.15); }
.badge.warn { background: #fef3c7; color: #92400e; border-color: rgba(217,119,6,0.18); }

.header-btn {
    background: transparent; border: 1px solid var(--c-border-strong);
    border-radius: 6px; padding: 7px 14px; font-size: 12.5px; font-weight: 500;
    cursor: pointer; color: var(--c-text-2); transition: all 0.18s ease; font-family: inherit;
}
.header-btn:hover { background: var(--c-lavender-50); border-color: var(--c-primary-300); color: var(--c-primary); }

/* ===================== ONGLETS ===================== */
.tabs {
    display: flex; gap: 4px;
    padding: 0 32px; max-width: 1480px; width: 100%; margin: 18px auto 0;
    border-bottom: 1px solid var(--c-border);
}
.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; font-size: 13.5px; font-weight: 600;
    color: var(--c-text-muted); cursor: pointer; background: transparent;
    border: none; border-bottom: 2.5px solid transparent;
    font-family: inherit; transition: all 0.16s ease; margin-bottom: -1px;
}
.tab:hover { color: var(--c-primary); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab .tab-count {
    font-size: 10.5px; font-weight: 700; background: var(--c-lavender-50);
    color: var(--c-primary-700); padding: 1px 7px; border-radius: 10px;
}
.tab.active .tab-count { background: var(--c-primary); color: #fff; }

main {
    flex: 1; padding: 22px 32px 44px; max-width: 1480px; margin: 0 auto; width: 100%;
    display: flex; flex-direction: column; gap: 16px;
}

/* ===================== SOURCE ===================== */
.source-zone {
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-lg); padding: 12px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.source-zone.dragover { border-color: var(--c-primary); background: var(--c-lavender-50); }
.source-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.source-select {
    padding: 9px 14px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    font-family: inherit; color: var(--c-text); background: var(--c-surface);
    cursor: pointer; min-width: 280px; transition: border-color 0.15s, box-shadow 0.15s;
}
.source-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(104,97,245,0.15); }
.source-divider { width: 1px; height: 22px; background: var(--c-border-strong); flex: 0 0 auto; }
.source-browse {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
    font-size: 13px; font-weight: 600; background: var(--c-primary); color: #fff;
    border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; flex: 0 0 auto;
}
.source-browse:hover { background: #5751e6; }
.source-hint { font-size: 12px; color: var(--c-text-muted); }
.source-desc { margin: 8px 0 0; font-size: 12px; color: var(--c-text-muted); min-height: 16px; }
.file-info {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto;
    padding: 6px 10px; background: var(--c-lavender-50); border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}
#file-name { font-weight: 600; color: var(--c-primary); font-size: 12.5px; word-break: break-all; }

/* ===================== ACTION BAR ===================== */
.action-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px; flex-wrap: wrap; gap: 10px;
    background: var(--c-surface); border-radius: var(--radius-lg);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.actions-left, .actions-right { display: flex; gap: 10px; align-items: center; }

/* ===================== BOUTONS ===================== */
.btn {
    padding: 9px 20px; border: 1px solid transparent; border-radius: 6px;
    font-size: 12.5px; cursor: pointer; font-weight: 600; transition: all 0.18s ease;
    font-family: inherit; line-height: 1.2; display: inline-flex; align-items: center; gap: 7px;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #5751e6; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803d; }
.btn-sm { padding: 6px 12px; font-size: 11.5px; }
.btn-outline { background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-text-2); }
.btn-outline:hover:not(:disabled) { background: var(--c-lavender-50); border-color: var(--c-primary-300); color: var(--c-primary); }
.btn-rpa {
    background: linear-gradient(135deg, #6861f5 0%, #8b5cf6 100%); color: #fff;
    box-shadow: 0 4px 14px rgba(104, 97, 245, 0.35);
}
.btn-rpa:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(104, 97, 245, 0.45); }
.btn:focus-visible, .header-btn:focus-visible, .source-browse:focus-visible, .tab:focus-visible {
    outline: 2px solid var(--c-primary); outline-offset: 2px;
}

/* ===================== WORK GRID ===================== */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .work-grid { grid-template-columns: 1fr; } }

.panel {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
}
.panel-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    background: linear-gradient(135deg, var(--c-pink-50) 0%, var(--c-lavender-50) 100%);
    border-bottom: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-primary-700); font-weight: 600;
}
.panel-title { flex: 0 0 auto; }
.panel-sub { font-size: 11.5px; color: var(--c-text-muted); font-weight: 500; }
.form-header { justify-content: space-between; }

/* Navigateur de pages (documents batch type lot d'OT) */
.page-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.page-nav .panel-sub { min-width: 70px; text-align: center; }
.page-nav-btn {
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-primary-700);
    border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; font-family: inherit;
    transition: all 0.14s ease; padding: 0;
}
.page-nav-btn:hover:not(:disabled) { border-color: var(--c-primary-300); color: var(--c-primary); background: var(--c-lavender-50); }
.page-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.preview-box {
    min-height: 460px; display: flex; align-items: center; justify-content: center;
    padding: 14px; background: var(--c-surface); position: relative; overflow: auto;
}
.preview-box img { max-width: 100%; max-height: 64vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.placeholder { color: var(--c-text-muted); font-size: 13.5px; font-style: italic; text-align: center; padding: 0 20px; }

/* ===================== TARGET CHIPS ===================== */
.target-wrap { display: flex; align-items: center; gap: 8px; }
.target-label { font-size: 11.5px; color: var(--c-text-muted); font-weight: 600; }
.target-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.target-chip {
    padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--c-border-strong); border-radius: 20px;
    background: var(--c-surface); color: var(--c-text-2); font-family: inherit;
    transition: all 0.15s ease;
}
.target-chip:hover { border-color: var(--c-primary-300); color: var(--c-primary); }
.target-chip.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ===================== FORMULAIRE ===================== */
.form-host { padding: 16px 18px; max-height: 64vh; overflow-y: auto; }
.form-section { margin-bottom: 16px; }
.form-section-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--c-primary-700); margin-bottom: 9px; padding-bottom: 5px;
    border-bottom: 1px solid var(--c-border);
}
.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.w-full  { grid-column: span 6; }
.field.w-half  { grid-column: span 3; }
.field.w-third { grid-column: span 2; }
@media (max-width: 560px) { .field.w-half, .field.w-third { grid-column: span 6; } }
.field label { font-size: 10.5px; font-weight: 600; color: var(--c-text-2); }
.field input, .field select, .field textarea {
    padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm); font-family: inherit; color: var(--c-text);
    background: var(--c-surface); transition: border-color 0.15s, box-shadow 0.15s, background 0.2s;
    width: 100%;
}
.field textarea { resize: vertical; min-height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(104,97,245,0.15);
}
/* Champ qui vient d'être rempli (flash) */
.field input.filled, .field select.filled, .field textarea.filled,
.lines-table td.filled { animation: fieldflash 0.6s ease; }
@keyframes fieldflash {
    0%   { background: var(--c-lavender); }
    100% { background: var(--c-surface); }
}

/* Tableau de lignes */
.lines-wrap { margin-bottom: 16px; overflow-x: auto; }
.lines-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lines-table th {
    text-align: left; padding: 7px 9px; background: var(--c-pink-50);
    color: var(--c-primary-700); font-weight: 600; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--c-border-strong);
}
.lines-table td { padding: 6px 9px; border-bottom: 1px solid var(--c-border); }
.lines-table input {
    width: 100%; border: 1px solid transparent; background: transparent;
    padding: 4px 6px; font-size: 11.5px; font-family: inherit; color: var(--c-text);
    border-radius: 4px;
}
.lines-table input:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }
.lines-empty { color: var(--c-text-muted); font-style: italic; font-size: 12px; padding: 8px 4px; }

.form-footer {
    display: flex; align-items: center; gap: 12px 16px; padding: 14px 18px; flex-wrap: wrap;
    border-top: 1px solid var(--c-border); background: var(--c-surface-soft);
}

/* ===================== STATUS ===================== */
.status-bar { font-size: 12px; color: var(--c-text-muted); min-height: 16px; font-weight: 500; }
.status-bar.success { color: var(--c-success); }
.status-bar.error   { color: var(--c-danger); }
.status-bar.warn    { color: var(--c-warn); }

/* ===================== SIDE PANEL ===================== */
.side-panel {
    position: fixed; top: 0; right: -460px; width: 430px; height: 100vh;
    background: var(--c-surface); border-left: 1px solid var(--c-border);
    box-shadow: -16px 0 48px rgba(40,30,60,0.10); z-index: 900;
    transition: right 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column;
}
.side-panel.open { right: 0; }
.side-panel-header {
    display: flex; justify-content: space-between; align-items: center; padding: 18px 22px;
    background: linear-gradient(135deg, var(--c-pink-50) 0%, var(--c-lavender-50) 100%);
    border-bottom: 1px solid var(--c-border);
}
.side-panel-header h2 { font-size: 16px; font-weight: 600; }
.side-panel-close {
    background: rgba(255,255,255,0.7); border: 1px solid var(--c-border); font-size: 13px;
    cursor: pointer; color: var(--c-primary-700); padding: 5px 12px; border-radius: 6px;
    font-family: inherit; transition: all 0.15s ease;
}
.side-panel-close:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.side-panel-backdrop { position: fixed; inset: 0; background: rgba(40,30,60,0.22); backdrop-filter: blur(2px); z-index: 899; display: none; }
.side-panel-backdrop.open { display: block; }
.settings-form { display: flex; flex-direction: column; gap: 18px; }
.settings-intro {
    font-size: 12px; line-height: 1.55; color: var(--c-text-2); background: var(--c-pink-50);
    border-radius: var(--radius-sm); border-left: 3px solid var(--c-primary-300); padding: 10px 14px;
}
.settings-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c-text-2); }
.settings-label input, .settings-label select {
    padding: 10px 14px; font-size: 13.5px; border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm); font-family: inherit; color: var(--c-text); background: var(--c-surface);
}
.settings-label input:focus, .settings-label select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(104,97,245,0.18); }
.settings-current-key { color: var(--c-text-muted); font-size: 11px; font-style: italic; }
.settings-actions { display: flex; align-items: center; gap: 14px; }

/* ===================== POP-UP SIMULATION ===================== */
.sim-backdrop {
    position: fixed; inset: 0; background: rgba(20, 14, 32, 0.55);
    backdrop-filter: blur(5px); z-index: 1000;
}
.sim-modal {
    position: fixed; inset: 0; z-index: 1001;
    display: flex; align-items: center; justify-content: center; padding: 28px;
    pointer-events: none;
}
.sim-window {
    pointer-events: auto; width: 100%; max-width: 940px; max-height: 92vh;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.5); display: flex; flex-direction: column;
    animation: simpop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes simpop { from { transform: scale(0.94) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Chrome navigateur */
.sim-chrome {
    display: flex; align-items: center; gap: 12px; padding: 9px 14px;
    background: #e9ecf1; border-bottom: 1px solid #d4d8e0;
}
.sim-lights { display: flex; gap: 6px; }
.sim-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.sim-lights i:nth-child(1) { background: #ff5f57; }
.sim-lights i:nth-child(2) { background: #febc2e; }
.sim-lights i:nth-child(3) { background: #28c840; }
.sim-urlbar {
    flex: 1; display: flex; align-items: center; gap: 7px; background: #fff;
    border: 1px solid #d4d8e0; border-radius: 14px; padding: 5px 14px;
    font-size: 12px; color: #475569; font-family: 'JetBrains Mono', Consolas, monospace;
}
.sim-lock { width: 12px; height: 12px; fill: #16a34a; flex: 0 0 auto; }
.sim-close {
    background: transparent; border: none; font-size: 14px; color: #64748b;
    cursor: pointer; padding: 4px 8px; border-radius: 5px;
}
.sim-close:hover { background: #ff5f57; color: #fff; }

/* App simulée (skin du portail) — thème par portail via classe sur .sim-app */
.sim-app {
    flex: 1; overflow: hidden; display: flex; flex-direction: column; background: #eef1f5;
    --sim-accent: #6d28d9; --sim-top: #2e1065; --sim-top-2: #5b21b6;
}
.sim-app.theme-tms         { --sim-accent: #6d28d9; --sim-top: #2e1065; --sim-top-2: #5b21b6; }
.sim-app.theme-palettes    { --sim-accent: #e2001a; --sim-top: #161616; --sim-top-2: #2b2b2b; }
.sim-app.theme-facturation { --sim-accent: #000091; --sim-top: #000091; --sim-top-2: #1b1ba8; }
.sim-app.theme-generic     { --sim-accent: #00875a; --sim-top: #14532d; --sim-top-2: #166534; }

/* Barre supérieure : marque + menu + compte */
.sim-topbar {
    display: flex; align-items: stretch;
    background: linear-gradient(180deg, var(--sim-top) 0%, var(--sim-top-2) 100%);
    color: #fff;
}
.sim-brand {
    display: flex; flex-direction: column; justify-content: center; padding: 7px 18px;
    min-width: 150px; border-right: 1px solid rgba(255,255,255,0.14);
}
.sim-brand-name { font-size: 16px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; }
.sim-brand-sub { font-size: 8.5px; opacity: 0.72; letter-spacing: 0.07em; text-transform: uppercase; }
.sim-menu { display: flex; align-items: stretch; flex: 1; overflow: hidden; }
.sim-menu-item {
    display: flex; align-items: center; padding: 0 15px; font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.8); border-bottom: 3px solid transparent; white-space: nowrap;
}
.sim-menu-item.active { color: #fff; background: rgba(255,255,255,0.10); border-bottom-color: #fff; font-weight: 600; }
.sim-account {
    display: flex; align-items: center; gap: 7px; padding: 0 18px; font-size: 11.5px;
    color: rgba(255,255,255,0.92); white-space: nowrap;
}
.sim-account::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.25); flex: 0 0 auto;
}

/* Barre d'outils : titre de page + actions */
.sim-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 18px; background: #fff; border-bottom: 1px solid #d8dee6;
}
.sim-page-title { font-size: 13.5px; font-weight: 700; color: #1f2937; }
.sim-toolbar-actions { display: flex; gap: 8px; }
.sim-tbtn {
    padding: 6px 14px; font-size: 11.5px; font-weight: 600; border-radius: 4px; font-family: inherit;
    border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; cursor: default;
}
.sim-tbtn.primary { background: var(--sim-accent); border-color: var(--sim-accent); color: #fff; }
.sim-tbtn.primary.flash { animation: tbtnflash 0.55s ease; }
@keyframes tbtnflash {
    0%,100% { filter: none; box-shadow: none; }
    50% { filter: brightness(1.2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sim-accent) 32%, transparent); }
}

/* Canvas : formulaire dense, look logiciel métier */
.sim-canvas { flex: 1; overflow-y: auto; padding: 16px 18px; background: #eef1f5; }
.sim-canvas .form-section {
    background: #fff; border: 1px solid #d8dee6; border-radius: 5px; padding: 0 14px 12px; margin-bottom: 12px;
}
.sim-canvas .form-section-title {
    margin: 0 -14px 12px; padding: 8px 14px; font-size: 10.5px; color: #fff;
    background: var(--sim-accent); border: none; border-radius: 5px 5px 0 0; letter-spacing: 0.06em;
}
.sim-canvas .lines-wrap.form-section { padding-top: 0; }
.sim-canvas .field label { color: #475569; font-weight: 600; }
.sim-canvas .field input, .sim-canvas .field select, .sim-canvas .field textarea {
    border-color: #cbd5e1; background: #fff; border-radius: 3px; font-size: 12px; padding: 7px 9px;
}
.sim-canvas .field input:focus, .sim-canvas .field select:focus, .sim-canvas .field textarea:focus {
    border-color: var(--sim-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sim-accent) 22%, transparent);
}
.sim-canvas .field input.rpa-active, .sim-canvas .field select.rpa-active, .sim-canvas .field textarea.rpa-active {
    border-color: var(--sim-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sim-accent) 28%, transparent);
    background: color-mix(in srgb, var(--sim-accent) 7%, #fff);
}
.sim-canvas .lines-table th { background: color-mix(in srgb, var(--sim-accent) 12%, #fff); color: var(--sim-accent); }
.sim-canvas .lines-table input { font-size: 11.5px; }

/* Barre d'état : progression + vitesse + journal RPA */
.sim-statusbar { background: #0f172a; padding: 9px 16px 11px; }
.sim-progress { height: 4px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.sim-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6861f5, #22d3ee); transition: width 0.25s ease; }
.sim-statusrow { display: flex; align-items: flex-start; gap: 16px; }
.sim-log {
    flex: 1; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; color: #94a3b8;
    max-height: 60px; overflow-y: auto; line-height: 1.6;
}
.sim-log .ok   { color: #4ade80; }
.sim-log .run  { color: #38bdf8; }
.sim-log .done { color: #a78bfa; font-weight: 600; }

/* Contrôle de vitesse de saisie */
.speed-control { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.speed-label { font-size: 10px; font-weight: 700; color: var(--c-text-muted); margin-right: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.speed-btn {
    padding: 5px 11px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
    border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-2);
    border-radius: 6px; transition: all 0.14s ease;
}
.speed-btn:hover { border-color: var(--c-primary-300); color: var(--c-primary); }
.speed-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.speed-control-sim { flex: 0 0 auto; }
.speed-control-sim .speed-label { color: #64748b; }
.speed-control-sim .speed-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; padding: 4px 9px; }
.speed-control-sim .speed-btn:hover { border-color: #6861f5; color: #fff; }
.speed-control-sim .speed-btn.active { background: #6861f5; border-color: #6861f5; color: #fff; }

/* Faux curseur du bot */
.sim-cursor {
    position: fixed; width: 22px; height: 22px; z-index: 1100; pointer-events: none;
    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    left: 50%; top: 50%;
}
.sim-cursor::before {
    content: ''; position: absolute; inset: 0;
    background: no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 11-6 1 3.5 7-3 1.3L10 15l-5 4z' fill='%236861f5' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.sim-cursor.click::after {
    content: ''; position: absolute; left: -8px; top: -8px; width: 30px; height: 30px;
    border: 2px solid var(--c-primary); border-radius: 50%; animation: clickpulse 0.4s ease-out;
}
@keyframes clickpulse { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1.2); opacity: 0; } }

/* ===================== LOADING ===================== */
.overlay {
    position: fixed; inset: 0; background: rgba(250,250,247,0.82);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 1200; backdrop-filter: blur(8px);
}
.spinner { width: 48px; height: 48px; border: 3px solid var(--c-lavender); border-top-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s cubic-bezier(0.5,0.1,0.5,0.9) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.overlay p { margin-top: 18px; color: var(--c-primary-700); font-size: 14px; font-weight: 500; }

@media (max-width: 768px) {
    header { padding: 12px 18px; }
    .tabs { padding: 0 16px; }
    main { padding: 16px 16px 28px; }
    .side-panel { width: 100%; right: -100%; }
}