@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:optional; src:url('../../public/fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:optional; src:url('../../public/fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:optional; src:url('../../public/fonts/inter-v20-latin-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:optional; src:url('../../public/fonts/inter-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:optional; src:url('../../public/fonts/inter-v20-latin-800.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:optional; src:url('../../public/fonts/inter-v20-latin-900.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:optional; src:url('../../public/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:optional; src:url('../../public/fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:800; font-display:optional; src:url('../../public/fonts/jetbrains-mono-v24-latin-800.woff2') format('woff2'); }

:root {
    --bg-primary: #06060b;
    --bg-secondary: #0c0c14;
    --bg-card: #10101a;
    --bg-card-hover: #151522;
    --bg-elevated: #1a1a2e;
    --accent-cyan: #00f0ff;
    --accent-violet: #7b2ff7;
    --accent-magenta: #ff006e;
    --accent-green: #00ff88;
    --accent-warn: #f59e0b;
    --gradient-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
    --gradient-glow: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    --gradient-admin: linear-gradient(135deg, var(--accent-violet), var(--accent-magenta));
    --text-primary: #f8f8fa;
    --text-secondary: #c0c0d1;
    --text-muted: #9a9ab0;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-accent: rgba(0, 240, 255, 0.2);
    --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem;
    --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
}

/* --- Bouton Menu Mobile (Design Dréa Digital) --- */
.mobile-menu-btn {
    display: none; background: transparent; border: none; cursor: pointer;
    padding: 4px; margin-right: 14px; z-index: 101;
}
.nav__toggle-line {
    display: block; width: 24px; height: 2px; background: var(--text-primary);
    border-radius: 2px; margin-bottom: 5px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav__toggle-line:last-child { margin-bottom: 0; }
.mobile-menu-btn.active .nav__toggle-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active .nav__toggle-line:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .nav__toggle-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (max-width: 960px) { .mobile-menu-btn { display: flex; flex-direction: column; justify-content: center; } }
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(6, 6, 11, 0.8);
    backdrop-filter: blur(4px); z-index: 90;
    opacity: 0; visibility: hidden; transition: all var(--transition-base);
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html, body { overflow-x:hidden !important; width:100%; max-width:100vw; position:relative; }
body { font-family:var(--font-sans); background-color:var(--bg-primary); color:var(--text-primary); line-height:1.6; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img, video, svg { max-width:100%; height:auto; display:block; }
button, input, select, textarea { font-family:inherit; font-size:inherit; border:none; outline:none; background:none; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-md); }
@media (max-width:480px){ .container { padding:0 1rem; } }

.text-gradient { background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-admin { background:var(--gradient-admin); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mono { font-family:var(--font-mono); font-size:0.85em; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-weight:600; font-size:0.95rem; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; text-align:center; transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), color var(--transition-base); will-change:transform; }
.btn:hover { transform:translateY(-2px) translateZ(0); }
.btn--primary { background:var(--gradient-primary); color:var(--bg-primary); padding:0.75rem 1.5rem; }
.btn--primary:hover { box-shadow:0 8px 30px rgba(0,240,255,.3), 0 0 60px rgba(123,47,247,.15); }
.btn--primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn--admin { background:var(--gradient-admin); color:var(--bg-primary); padding:0.75rem 1.5rem; }
.btn--admin:hover { box-shadow:0 8px 30px rgba(123,47,247,.3); }
.btn--admin:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn--outline { background:transparent; color:var(--text-primary); padding:0.75rem 1.5rem; border:1px solid var(--border-subtle); }
.btn--outline:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); }
.btn--success { background:rgba(0,255,136,.1); color:var(--accent-green); border:1px solid rgba(0,255,136,.3); }
.btn--success:hover { background:rgba(0,255,136,.2); border-color:var(--accent-green); color:var(--accent-green); }
.btn--sm { padding:0.55rem 1.2rem; font-size:0.85rem; }
.btn--full { width:100%; }

.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{ background:var(--bg-secondary); border-right:1px solid var(--border-subtle); padding:28px 20px; position:sticky;top:0;height:100vh; display:flex;flex-direction:column;gap:6px; overflow-y:auto; }
.brand{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--border-subtle);margin-bottom:14px}
.brand-logo{ width:42px;height:42px;border-radius:var(--radius-sm); background:var(--gradient-primary); display:flex;align-items:center;justify-content:center; font-weight:800;color:var(--bg-primary);font-size:1.2rem; }
.brand-name{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand-sub{font-size:.7rem;color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase}
.nav-section{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;margin:18px 8px 8px}
.nav-item{ display:flex;align-items:center;gap:12px; padding:11px 14px;border-radius:var(--radius-sm);cursor:pointer; color:var(--text-secondary);font-size:.92rem;font-weight:500; transition:all var(--transition-fast); border:1px solid transparent; }
.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}
.nav-item.active{ background:rgba(0,240,255,.05); color:var(--accent-cyan); border-color:var(--border-accent); }
.nav-item.admin-active.active{ background:rgba(123,47,247,.08); color:var(--accent-violet); border-color:rgba(123,47,247,.3); }
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}
.nav-item.active .dot{background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan)}
.nav-item.admin-active.active .dot{background:var(--accent-violet);box-shadow:0 0 10px var(--accent-violet)}
.sidebar-footer{margin-top:auto;padding-top:20px;border-top:1px solid var(--border-subtle);font-size:.75rem;color:var(--text-muted)}
main{padding:36px 48px;max-width:1500px}
.page-title{font-size:clamp(1.8rem, 4vw, 2.5rem);font-weight:800;}
.page-sub{color:var(--text-secondary);margin-top:6px;font-size:1rem}
.crumbs{display:flex;gap:8px;font-size:.8rem;color:var(--text-muted);margin-bottom:10px;font-family:var(--font-mono)}
.crumbs span::before{content:"›";margin-right:8px;color:var(--border-subtle)}
.crumbs span:first-child::before{content:""}
.crumbs .current{color:var(--accent-cyan)}
.card{ background:var(--bg-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:26px; transition:border-color var(--transition-base), box-shadow var(--transition-base); }
.card:hover{border-color:var(--border-accent);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.card-title{font-weight:800;font-size:1.25rem;margin-bottom:6px}
.card-desc{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-primary);}
.login-hero{ position:relative;overflow:hidden;background:var(--bg-secondary); padding:60px;display:flex;flex-direction:column;justify-content:space-between; border-right:1px solid var(--border-subtle); }
.login-hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 80% 20%,rgba(0,240,255,.1),transparent 50%), radial-gradient(circle at 20% 80%,rgba(123,47,247,.1),transparent 50%); }
.login-hero h2{font-size:2.5rem;position:relative;z-index:1;line-height:1.15;margin-top:20px}
.login-hero p{color:var(--text-secondary);margin-top:14px;position:relative;z-index:1;max-width:420px;font-size:1.05rem}
.login-features{position:relative;z-index:1;margin-top:30px}
.login-feature{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.95rem;color:var(--text-secondary)}
.login-feature .check{color:var(--accent-green);font-size:1.1rem;font-weight:bold}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.login-form{width:100%;max-width:420px}
.login-form h1{font-size:2rem;margin-bottom:8px}
.login-form .sub{color:var(--text-muted);margin-bottom:30px}
.form-group{margin-bottom:18px}
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:.85rem}
.form-row a{color:var(--accent-cyan);text-decoration:none}
#view-login input, #view-dashboard input, #view-admin input,
#view-login select, #view-dashboard select, #view-admin select,
#view-login textarea, #view-dashboard textarea, #view-admin textarea {
    width:100%; padding:0.85rem 1rem; background:var(--bg-elevated);
    border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
    color:var(--text-primary); font-size:0.95rem;
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#view-login input::placeholder, #view-dashboard input::placeholder, #view-admin input::placeholder { color:var(--text-muted); }
#view-login input:focus, #view-dashboard input:focus, #view-admin input:focus {
    border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(0,240,255,.1);
}
label { display:block; font-size:.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.5rem; }
.field-hint{font-size:.75rem;color:var(--text-muted);margin-top:4px;font-style:italic}
.required-star{color:var(--accent-magenta);font-weight:800}

.topbar{ display:flex;justify-content:space-between;align-items:center; padding:14px 22px;background:var(--bg-card); border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:28px; flex-wrap:wrap;gap:14px; }
.user-chip{display:flex;align-items:center;gap:12px}
.avatar{ width:40px;height:40px;border-radius:50%; background:var(--gradient-primary); display:flex;align-items:center;justify-content:center; font-weight:800;color:var(--bg-primary); }
.avatar.admin{background:var(--gradient-admin)}
.user-name{font-weight:600;font-size:.95rem}
.user-email{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.pack-badge,.option-badge,.admin-badge{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600; font-family:var(--font-mono);letter-spacing:.03em; }
.pack-badge{ background:rgba(0,240,255,.05); border:1px solid var(--border-accent); color:var(--accent-cyan); }
.option-badge.social{ background:rgba(255,0,110,.08); border:1px solid rgba(255,0,110,.3); color:var(--accent-magenta); }
.admin-badge{ background:rgba(123,47,247,.08); border:1px solid rgba(123,47,247,.4); color:var(--accent-violet); letter-spacing:.1em;text-transform:uppercase; }

.stat-card{ background:var(--bg-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:22px;position:relative;overflow:hidden; }
.stat-card::after{ content:"";position:absolute;top:0;right:0;width:100px;height:100px; background:radial-gradient(circle,rgba(0,240,255,.05),transparent 70%); }
.stat-label{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em}
.stat-value{font-size:2.2rem;font-weight:800;margin-top:6px;font-family:var(--font-mono);color:var(--text-primary)}
.stat-trend{font-size:.8rem;color:var(--accent-green);margin-top:8px}
.progress-wrap{margin:20px 0}
.progress-info{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.85rem}
.progress-info strong{color:var(--accent-cyan)}
.progress-bar{height:10px;background:var(--bg-elevated);border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--border-subtle)}
.progress-fill{ height:100%;background:var(--gradient-primary); border-radius:var(--radius-full);transition:width 1s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 15px rgba(0,240,255,.4); }
.progress-fill.admin{background:var(--gradient-admin);box-shadow:0 0 15px rgba(123,47,247,.4)}
.step{ display:flex;gap:14px;padding:16px; background:var(--bg-elevated);border:1px solid var(--border-subtle); border-radius:var(--radius-md);margin-bottom:10px; transition:all var(--transition-base); cursor:pointer; }
.step:hover{border-color:var(--border-accent);transform:translateX(4px)}
.step-check{ flex-shrink:0;width:26px;height:26px;border-radius:50%; border:2px solid var(--border-subtle);display:flex;align-items:center;justify-content:center; font-size:.8rem;transition:all var(--transition-fast); background:transparent;color:var(--text-muted); }
.step.done .step-check{background:var(--accent-green);border-color:var(--accent-green);color:var(--bg-primary);font-weight:bold}
.step.done .step-title{color:var(--text-muted);text-decoration:line-through}
.step-body{flex:1}
.step-title{font-weight:600;font-size:.95rem}
.step-meta{font-size:.8rem;color:var(--text-secondary);margin-top:3px}
.step.social .step-check{border-color:rgba(255,0,110,.4)}
.step.social.done .step-check{background:var(--accent-magenta);border-color:var(--accent-magenta);color:var(--bg-primary)}

.social-banner{ background:linear-gradient(135deg,rgba(255,0,110,.05),rgba(123,47,247,.08)); border:1px dashed rgba(255,0,110,.3); border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:28px; display:flex;align-items:center;gap:18px; position:relative;overflow:hidden; }
.social-icon{ flex-shrink:0;width:56px;height:56px;border-radius:var(--radius-sm); background:var(--gradient-glow); display:flex;align-items:center;justify-content:center; font-size:1.7rem;position:relative;z-index:1; }
.social-banner h4{font-size:1.1rem;margin-bottom:4px;color:var(--text-primary)}
.social-banner p{color:var(--text-secondary);font-size:.9rem;max-width:620px}

.drop-zone{ border:2px dashed var(--border-subtle);border-radius:var(--radius-lg);padding:40px; text-align:center;transition:all var(--transition-base);cursor:pointer; background:var(--bg-elevated); }
.drop-zone:hover,.drop-zone.drag{border-color:var(--accent-cyan);background:rgba(0,240,255,.02)}
.drop-zone svg{width:48px;height:48px;color:var(--accent-cyan);margin-bottom:14px}
.drop-zone h4{font-size:1rem;margin-bottom:6px}
.drop-zone p{color:var(--text-muted);font-size:.85rem}
.file-list{margin-top:20px}
.file-item{ display:flex;align-items:center;gap:14px; padding:14px;background:var(--bg-elevated);border:1px solid var(--border-subtle); border-radius:var(--radius-sm);margin-bottom:8px; }
.file-icon{width:38px;height:38px;background:rgba(0,240,255,.08);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);font-weight:800;font-size:.8rem;font-family:var(--font-mono)}
.file-info{flex:1;min-width:0}
.file-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.file-actions{display:flex;gap:8px;align-items:center}
.file-action{ color:var(--text-muted);cursor:pointer;font-size:1.1rem; width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:all var(--transition-fast); background:transparent;border:1px solid transparent; }
.file-action:hover{color:var(--accent-magenta);border-color:var(--border-subtle);background:var(--bg-card)}
.file-action.download:hover{color:var(--accent-cyan);border-color:rgba(0,240,255,.3)}

.admin-stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;margin-bottom:28px; }
.admin-stat{ background:var(--bg-card); border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:22px; position:relative;overflow:hidden; }
.admin-stat .label{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em}
.admin-stat .value{font-family:var(--font-mono);font-size:2rem;font-weight:800;margin-top:6px;color:var(--accent-violet)}
.admin-stat .delta{font-size:.8rem;color:var(--accent-green);margin-top:6px}

.projects-list{display:flex;flex-direction:column;gap:18px}
.project-card{ background:var(--bg-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);overflow:hidden; transition:all var(--transition-base); }
.project-card:hover{border-color:rgba(123,47,247,.4)}
.project-header{ padding:24px 28px; display:flex;flex-direction:column;gap:18px; }
.project-main{min-width:0}
.project-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.project-company{font-size:1.4rem;font-weight:800}
.project-meta{color:var(--text-muted);font-size:.85rem;margin-bottom:14px;font-family:var(--font-mono)}
.project-meta strong{color:var(--text-primary)}
.project-progress{max-width:480px}
.project-progress .progress-info{margin-bottom:8px}
.project-progress .progress-info strong{color:var(--accent-violet)}
.project-progress .progress-bar{height:8px}
.project-actions{display:flex;gap:10px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
.btn-expand{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--radius-sm); background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-primary);font-size:.85rem;font-weight:600; cursor:pointer;transition:all var(--transition-fast);font-family:inherit; }
.btn-expand:hover{border-color:var(--accent-violet);color:var(--accent-violet)}
.btn-expand .chevron{transition:transform .3s}
.btn-expand.expanded .chevron{transform:rotate(180deg)}
.project-checklist{ max-height:0;overflow:hidden; transition:max-height .5s cubic-bezier(.2,.8,.2,1); background:var(--bg-elevated); border-top:1px solid var(--border-subtle); }
.project-checklist.open{max-height:2000px}
.project-checklist-inner{padding:24px 28px}
.checklist-title{font-size:.85rem;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.checklist-title::before{content:"";width:20px;height:1px;background:var(--border-subtle)}
.checklist-title::after{content:"";flex:1;height:1px;background:var(--border-subtle)}

.hero-banner{ background:linear-gradient(135deg,#0c0c14 0%,#06060b 100%); border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:40px;margin-bottom:28px;position:relative;overflow:hidden; display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center; }
.hero-banner::before{ content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px; background:radial-gradient(circle,rgba(0,240,255,.08),transparent 60%); }
.hero-banner.admin-banner::before{ background:radial-gradient(circle,rgba(123,47,247,.08),transparent 60%); }
.hero-banner .illust{ width:160px;height:160px;border-radius:var(--radius-lg); background:var(--bg-elevated); display:flex;align-items:center;justify-content:center; font-size:4rem;position:relative;z-index:1; border:1px solid var(--border-subtle); }
.hero-banner h2{font-size:1.9rem;margin-bottom:8px;position:relative;z-index:1}
.hero-banner p{color:var(--text-secondary);max-width:560px;position:relative;z-index:1;font-size:1.05rem}

.hidden{display:none !important}
.view{display:none;animation:fade .4s ease}
.view.active{display:block}
.page{display:none;animation:fade .4s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.toast{ position:fixed;bottom:24px;right:24px;z-index:3000; padding:14px 20px;border-radius:var(--radius-sm); background:var(--bg-card);border:1px solid var(--accent-cyan); box-shadow:0 20px 40px rgba(0,0,0,.5); display:flex;align-items:center;gap:12px; transform:translateY(100px);opacity:0;transition:all var(--transition-base); max-width:420px; }
.toast.show{transform:translateY(0);opacity:1}
.toast .ico{color:var(--accent-cyan);font-size:1.2rem}
.toast.admin .ico{color:var(--accent-violet)}
.toast.admin{border-color:var(--accent-violet)}
.toast.error{border-color:var(--accent-magenta)}
.toast.error .ico{color:var(--accent-magenta)}
.toast.warn{border-color:var(--accent-warn)}
.toast.warn .ico{color:var(--accent-warn)}
.toast.success{border-color:var(--accent-green)}
.toast.success .ico{color:var(--accent-green)}

.filter-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.filter-tab{ padding:8px 16px;background:var(--bg-card); border:1px solid var(--border-subtle);border-radius:var(--radius-full); font-size:.85rem;color:var(--text-muted);cursor:pointer; transition:all var(--transition-fast);font-family:inherit;font-weight:500; }
.filter-tab:hover{color:var(--text-primary)}
.filter-tab.active{background:rgba(123,47,247,.15);border-color:rgba(123,47,247,.4);color:var(--accent-violet)}

.spinner{ display:inline-block;width:16px;height:16px; border:2px solid rgba(255,255,255,.2);border-top-color:#fff; border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{ position:fixed;inset:0;background:rgba(6,6,11,.85);backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center;z-index:2000; opacity:0;visibility:hidden;transition:all var(--transition-base); }
.loading-overlay.active{opacity:1;visibility:visible}
.loading-box{ background:var(--bg-card);border:1px solid var(--border-subtle); padding:30px 40px;border-radius:var(--radius-md);text-align:center; display:flex;flex-direction:column;align-items:center;gap:16px; }
.loading-box .spinner{width:32px;height:32px;border-top-color:var(--accent-cyan)}

.empty-state{ background:var(--bg-card);border:1px dashed var(--border-subtle); border-radius:var(--radius-md);padding:40px;text-align:center; color:var(--text-secondary); }
.empty-state .ico{font-size:2.5rem;margin-bottom:12px;opacity:.7}
.empty-state h4{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.empty-state p{font-size:.9rem;margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto}

.error-box{ background:rgba(255,0,110,.05);border:1px solid rgba(255,0,110,.3); border-radius:var(--radius-md);padding:20px;color:var(--accent-magenta); margin-top:20px; }
.error-box strong{display:block;margin-bottom:6px;color:#ff4d94}
.error-box code{background:var(--bg-elevated);padding:2px 6px;border-radius:3px;font-size:.8rem;color:var(--text-primary)}

.sync-bar{ display:flex;align-items:center;gap:14px;padding:10px 18px;margin-bottom:18px; background:rgba(0,255,136,.04);border:1px solid rgba(0,255,136,.18); border-radius:var(--radius-sm);font-size:.82rem;color:var(--accent-green); font-family:var(--font-mono); }
.sync-bar.loading{background:rgba(0,240,255,.04);border-color:rgba(0,240,255,.2);color:var(--accent-cyan)}
.sync-bar.error{background:rgba(255,0,110,.04);border-color:rgba(255,0,110,.2);color:var(--accent-magenta)}
.sync-bar .dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent-green);animation:pulseLive 1.5s infinite}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.3}}
.sync-bar .spacer{flex:1}

.init-banner{ background:rgba(0,240,255,.04);border:1px dashed rgba(0,240,255,.3); border-radius:var(--radius-md);padding:18px 22px;margin-bottom:20px; display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.init-banner .info{flex:1;min-width:240px}
.init-banner .info strong{color:var(--accent-cyan);display:block;margin-bottom:4px}
.init-banner .info p{color:var(--text-secondary);font-size:.88rem}

.add-partner-form{ background:var(--bg-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:32px; }
.form-section{margin-bottom:28px}
.form-section-title{ font-size:.8rem;font-family:var(--font-mono);color:var(--accent-violet); text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px; padding-bottom:8px;border-bottom:1px solid var(--border-subtle); display:flex;align-items:center;gap:10px; }
.form-section-title .num{ width:22px;height:22px;border-radius:50%; background:var(--gradient-admin);color:var(--bg-primary); display:flex;align-items:center;justify-content:center; font-size:.7rem;font-weight:800; }
.checkbox-row{ display:flex;align-items:center;gap:12px;padding:14px 16px; background:var(--bg-elevated);border:1px solid var(--border-subtle); border-radius:var(--radius-sm);cursor:pointer;transition:all .2s; }
.checkbox-row:hover{border-color:var(--accent-magenta)}
.checkbox-row input[type="checkbox"]{width:auto;margin:0}
.checkbox-row .cb-label{flex:1}
.checkbox-row .cb-label strong{display:block;color:var(--text-primary);font-size:.9rem;margin-bottom:2px}
.checkbox-row .cb-label span{font-size:.78rem;color:var(--text-muted)}
.add-summary{ background:linear-gradient(135deg,rgba(123,47,247,.05),rgba(255,0,110,.03)); border:1px solid rgba(123,47,247,.25);border-radius:var(--radius-md); padding:20px;margin-top:20px; }
.add-summary h4{font-size:.95rem;color:var(--accent-violet);margin-bottom:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.add-summary ul{list-style:none;padding:0}
.add-summary li{font-size:.85rem;color:var(--text-secondary);padding:4px 0;display:flex;align-items:center;gap:8px}
.add-summary li::before{content:"→";color:var(--accent-magenta);font-weight:800}
.add-result{ margin-top:20px;padding:20px;border-radius:var(--radius-md); background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.3); color:var(--accent-green); }
.add-result.partial{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.3);color:var(--accent-warn)}
.add-result strong{display:block;margin-bottom:8px;font-size:.95rem}
.add-result code{background:var(--bg-elevated);padding:2px 6px;border-radius:3px;font-size:.78rem;color:var(--text-primary)}

@media (max-width:960px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed;left:-280px;z-index:100;width:260px;transition:left var(--transition-base)}
    .sidebar.open{left:0}
    main{padding:24px 20px}
    .login-wrap{grid-template-columns:1fr}
    .login-hero{display:none}
    .hero-banner{grid-template-columns:1fr;padding:26px}
    .hero-banner .illust{width:100px;height:100px;font-size:2.5rem}
    .project-actions{align-items:flex-start;flex-direction:row}
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}

.folder-agence, .folder-client { background: var(--bg-elevated); padding: 15px; border-radius: var(--radius-md); margin-bottom: 20px; }
h4 { color: var(--accent-cyan); font-size: 0.9rem; margin-bottom: 10px; }

/* ======================================================= */
/* MODULE QA / PAC-MAN (ADMIN & CLIENT) */
/* ======================================================= */
.pacman-wrapper { background: var(--bg-primary); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); margin-bottom: 20px; }
.pacman-track { width: 100%; height: 30px; background: rgba(0, 0, 0, 0.8); border: 2px solid #1a1a3a; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: center; margin-top: 15px; box-shadow: inset 0 0 15px rgba(0,240,255,0.15); }
.pacman-dots { display: flex; justify-content: space-between; width: 100%; position: absolute; left: 0; padding: 0 15px; box-sizing: border-box; z-index: 1; }
.pac-dot { width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff; transition: opacity 0.3s; }
.pac-dot.eaten { opacity: 0; }
.pacman-actor { width: 24px; height: 24px; background: var(--accent-warn); border-radius: 50%; position: absolute; left: 0; z-index: 2; transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 15px var(--accent-warn); animation: chomp 0.3s infinite alternate; }
@keyframes chomp {
  0% { clip-path: polygon(100% 74%, 44% 48%, 100% 21%, 100% 0, 0 0, 0 100%, 100% 100%); }
  100% { clip-path: polygon(100% 50%, 50% 50%, 100% 50%, 100% 0, 0 0, 0 100%, 100% 100%); }
}

.qa-tree { position: relative; overflow: hidden; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 24px 0; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.qa-item { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; padding: 12px 24px; border-bottom: 1px dashed rgba(255,255,255,0.03); transition: all 0.2s; position: relative; z-index: 1; }
.qa-item:hover { background: rgba(255, 255, 255, 0.02); }
.qa-item.folder { grid-template-columns: 1fr auto; border-bottom: none; margin-top: 10px; background: rgba(0, 240, 255, 0.03); border-left: 3px solid var(--accent-cyan); color: var(--accent-cyan); font-weight: 800; }
.qa-item.done { color: var(--text-muted); opacity: 0.5; }
.qa-item.done .qa-name { text-decoration: line-through; }
.qa-checkbox-wrap { display: flex; justify-content: center; }
.qa-checkbox { accent-color: var(--accent-warn); width: 16px; height: 16px; cursor: pointer; }
.qa-name { font-weight: 600; color: #f8f8fa; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.qa-file-icon { color: rgba(255,255,255,0.3); font-size: 1rem; }
.qa-note { color: rgba(255,255,255,0.4); font-size: 0.8rem; font-style: italic; display: flex; align-items: center; gap: 8px; margin-left: 30px; }
.qa-note::before { content: "←"; color: rgba(255,255,255,0.1); }
.qa-points { font-family: var(--font-mono); color: var(--accent-warn); font-size: 0.8rem; letter-spacing: 1px; animation: pulseScore 2s infinite alternate; }
@keyframes pulseScore { 0% { opacity: 0.7; } 100% { opacity: 1; text-shadow: 0 0 8px var(--accent-warn); } }

.ghost { position: absolute; width: 24px; height: 24px; border-top-left-radius: 50%; border-top-right-radius: 50%; z-index: 0; opacity: 0.15; animation: floatGhost 15s linear infinite; pointer-events: none; }
.ghost::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background: inherit; clip-path: polygon(0 0, 20% 100%, 40% 0, 60% 100%, 80% 0, 100% 100%, 100% 0); }
.ghost .eyes { position: absolute; top: 5px; left: 4px; width: 16px; height: 6px; display: flex; justify-content: space-between; }
.ghost .eye { width: 7px; height: 7px; background: white; border-radius: 50%; position: relative; }
.ghost .pupil { width: 3px; height: 3px; background: blue; border-radius: 50%; position: absolute; bottom: 1px; right: 1px; }
.ghost.blinky { background: #ff0000; top: 10%; left: -50px; animation-duration: 25s; }
.ghost.pinky { background: #ffb8ff; top: 40%; right: -50px; animation-name: floatGhostReverse; animation-duration: 30s; }
.ghost.inky { background: #00ffff; top: 70%; left: -50px; animation-duration: 22s; animation-delay: 5s; }
.ghost.clyde { background: #ffb852; top: 85%; right: -50px; animation-name: floatGhostReverse; animation-duration: 28s; animation-delay: 2s; }
@keyframes floatGhost {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(300px) translateY(-15px); }
    50% { transform: translateX(600px) translateY(15px); }
    75% { transform: translateX(900px) translateY(-10px); }
    100% { transform: translateX(1500px) translateY(0); }
}
@keyframes floatGhostReverse {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-300px) translateY(15px); }
    50% { transform: translateX(-600px) translateY(-15px); }
    75% { transform: translateX(-900px) translateY(10px); }
    100% { transform: translateX(-1500px) translateY(0); }
}

.neon-logo-float { width: 100px; height: auto; filter: drop-shadow(0 0 25px rgba(123, 47, 247, 0.7)); image-rendering: crisp-edges; animation: floatLogo 5s ease-in-out infinite; }
@keyframes floatLogo { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }

.neon-logo-login { width: 75px; height: auto; filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.5)) drop-shadow(0 0 30px rgba(123, 47, 247, 0.3)); animation: pulseLogoLogin 6s ease-in-out infinite; image-rendering: crisp-edges; }
@keyframes pulseLogoLogin {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.5)) drop-shadow(0 0 30px rgba(123, 47, 247, 0.3)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 40px rgba(123, 47, 247, 0.5)); }
}

.neon-logo-sidebar { width: 42px; height: auto; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)) drop-shadow(0 0 20px rgba(123, 47, 247, 0.2)); image-rendering: crisp-edges; transition: transform 0.3s ease; }
.brand:hover .neon-logo-sidebar { transform: scale(1.1); }

.loading-overlay input[type="text"], .loading-overlay input[type="email"], .loading-overlay input[type="tel"], .loading-overlay input[type="url"], .loading-overlay input[type="password"], .loading-overlay select, .loading-overlay textarea {
    width: 100%; padding: 0.85rem 1rem; background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    color: #ffffff !important; font-size: 0.95rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.loading-overlay input::placeholder, .loading-overlay textarea::placeholder { color: var(--text-muted); }
.loading-overlay input:focus, .loading-overlay select:focus, .loading-overlay textarea:focus {
    border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1); outline: none;
}

/* --- UTILITAIRES (remplacent les style="" inline) --- */
.c-primary { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-muted { color: var(--text-muted); }
.c-cyan { color: var(--accent-cyan); }
.c-violet { color: var(--accent-violet); }
.c-magenta { color: var(--accent-magenta); }
.c-green { color: var(--accent-green); }
.c-warn { color: var(--accent-warn); }
.bg-elev-chip { background: var(--bg-elevated); padding: 2px 6px; border-radius: 3px; }
.is-clickable { cursor: pointer; }
.is-clickable-cyan-mb { cursor: pointer; color: var(--accent-cyan); margin-bottom: 8px; }
.is-clickable-cyan { cursor: pointer; color: var(--accent-cyan); }
.is-clickable-violet-mb { cursor: pointer; color: var(--accent-violet); margin-bottom: 8px; }
.is-clickable-violet { cursor: pointer; color: var(--accent-violet); }
.brand--unboxed { border: none; padding: 0; margin: 0; }
.brand-logo--admin { background: var(--gradient-admin); }
.illust--bare { background: transparent; border: none; }
.flex-center { display: flex; align-items: center; }
.flex-row-gap { display: flex; gap: 10px; align-items: center; }
.flex-row-gap--wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.text-link { color: var(--accent-cyan); cursor: pointer; text-decoration: underline; }
.cb-auto { width: auto; }
.row-inline { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }

.form-group--flat { margin: 0; }
.label--mini { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; }
.input--full { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: .9rem; }
.qa-select { width: 100%; padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: var(--radius-sm); }

.card-spaced { margin-top: 28px; }
.card-spaced-sm { margin-top: 20px; }
.card--relative { position: relative; overflow: hidden; }
.section-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 30px 0; }
.section-subtitle { margin-bottom: 6px; font-weight: 800; }
.section-help { color: var(--text-secondary); font-size: .9rem; margin-bottom: 20px; }
.pacman-wrapper--client { border-color: var(--accent-cyan); background: transparent; }
.pacman-actor--client { background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); }
.qa-tree--locked { pointer-events: none; }
.qa-tree-spacer { margin-top: 20px; margin-bottom: 40px; }
.flex-between-bold { display: flex; justify-content: space-between; font-weight: bold; }
.flex-between-mb14 { display: flex; justify-content: space-between; margin-bottom: 14px; }
.flex-row-gap20 { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.page-header-row { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.files-toolbar { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; align-items: center; }
.files-toolbar__search { flex: 1; min-width: 200px; }
.files-toolbar__group { flex: 0 1 auto; min-width: 180px; text-align: right; }
.files-stats-grid { margin-bottom: 24px; }
.empty-state__icon { font-size: 3rem; }
.empty-state__hint { color: var(--text-muted); max-width: 400px; margin: 0 auto; }
.spinner--violet { margin: 0 auto 14px; width: 32px; height: 32px; border-top-color: var(--accent-violet); }
.projects-loader { text-align: center; padding: 40px; }
.projects-loader__msg { color: var(--text-muted); }
.catalog-pack-badge { margin-bottom: 10px; }
.catalog-pack-badge--audit { background: rgba(123, 47, 247, .08); border-color: rgba(123, 47, 247, .4); color: var(--accent-violet); }
.catalog-price { font-size: 1.6rem; font-weight: 800; color: var(--accent-cyan); font-family: var(--font-mono); }
.catalog-price--violet { color: var(--accent-violet); }
.catalog-rs-card { margin-top: 22px; background: linear-gradient(135deg, rgba(255, 0, 110, .05), rgba(123, 47, 247, .08)); border-color: rgba(255, 0, 110, .3); }
.catalog-rs-icon { font-size: 2.5rem; }
.catalog-rs-body { flex: 1; min-width: 240px; }
.catalog-rs-price-wrap { text-align: right; }
.catalog-rs-price { font-size: 1.4rem; font-weight: 800; color: var(--accent-magenta); font-family: var(--font-mono); }
.catalog-rs-unit { font-size: .75rem; color: var(--text-muted); }
.ops-list { font-size: .85rem; color: var(--text-secondary); line-height: 1.8; }
.ops-list__row { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.ops-list__row:last-child { border-bottom: 0; }
.ops-list__step { color: var(--accent-cyan); }
.hero-action { margin-top: 15px; }
.sync-time { opacity: .7; }
.loading-text { font-size: .9rem; color: var(--text-secondary); }
.error-box__msg { font-size: .85rem; }
.email-box { display: flex; align-items: center; gap: 8px; padding: 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); margin-bottom: 16px; font-family: var(--font-mono); font-size: .92rem; }
.email-box__input { background: transparent; border: none; padding: 0; color: var(--text-primary); }
.email-box__sep { color: var(--accent-cyan); font-weight: 800; }
.email-pack-tag { position: absolute; top: 14px; right: 14px; font-size: .65rem; font-weight: 800; letter-spacing: .15em; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(0, 240, 255, .1); color: var(--accent-cyan); border: 1px solid rgba(0, 240, 255, .3); font-family: var(--font-mono); }
.email-actions { margin-top: 22px; display: flex; gap: 12px; }
.email-locked { margin-top: 28px; text-align: center; padding: 60px 30px; }
.email-locked__icon { font-size: 3rem; margin-bottom: 14px; }
.email-locked__title { margin-bottom: 10px; }
.email-locked__desc { color: var(--text-secondary); max-width: 460px; margin: 0 auto; }
.email-locked__btn { margin-top: 22px; }
.card-h3 { margin-bottom: 6px; }
.catalog-rs-text { color: var(--text-secondary); font-size: .9rem; }
.label-soft { font-weight: 400; }
.sidebar-version { margin-bottom: 8px; }
.grid-3--spaced { margin-bottom: 28px; }
.grid-2--start { align-items: start; }

/* Modales overlay (Edit partner, Admin email, Bulk upload) — utilisent loading-overlay comme base */
.modal-box { background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 28px 32px; border-radius: var(--radius-lg); max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto; }
.modal-box__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-box__close { cursor: pointer; color: var(--text-muted); font-size: 1.4rem; background: none; border: none; }
.modal-box__close:hover { color: var(--accent-magenta); }
.modal-box__actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }

/* --- Brand login (gros logo) --- */
.brand--login { border: none; padding: 0; margin: 0; gap: 20px; align-items: center; }
.brand-name--lg { font-size: 1.8rem; text-shadow: 0 0 20px rgba(255,255,255,0.1); }
.brand-sub--cyan { font-size: 0.85rem; color: var(--accent-cyan); letter-spacing: 0.25em; }
.login-form-side { position: relative; z-index: 1; }
.login-form-foot { position: relative; z-index: 1; font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); }
.cb-auto { width: auto; }
.row-inline { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.btn--full--mt12 { margin-top: 12px; border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* --- Hero action wrapper --- */
.hero-action { margin-top: 15px; }
.social-banner__txt { flex: 1; position: relative; z-index: 1; }
.grid-3--spaced { margin-bottom: 28px; }
.grid-2--start { align-items: start; }

/* --- Page progress (Pacman client) --- */
.pacman-wrapper--client { border-color: var(--accent-cyan); background: transparent; }
.pacman-actor--client { background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); }
.qa-tree--locked { pointer-events: none; }
.qa-tree-spacer { margin-top: 20px; margin-bottom: 40px; }
.section-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 30px 0; }
.section-subtitle { margin-bottom: 6px; font-weight: 800; }
.section-help { color: var(--text-secondary); font-size: .9rem; margin-bottom: 20px; }

/* --- E-mail module (carte d'accès direct) --- */
.email-access-card { position: relative; overflow: hidden; border-color: var(--accent-cyan); margin-bottom: 36px; padding: 40px; }
.email-access-tag { position: absolute; top: 16px; right: 16px; font-size: .7rem; font-weight: 800; letter-spacing: .15em; padding: 6px 14px; border-radius: var(--radius-full); background: rgba(0, 240, 255, .1); color: var(--accent-cyan); border: 1px solid rgba(0, 240, 255, .3); font-family: var(--font-mono); }
.email-access-head { max-width: 600px; margin: 0 auto; text-align: center; }
.email-access-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(123, 47, 247, 0.1)); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.email-access-title { margin-bottom: 10px; font-size: 1.5rem; }
.email-access-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 800px; margin: 0 auto 30px; }
.email-cred-box { background: var(--bg-elevated); padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.email-cred-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.email-cred-label--row { display: flex; justify-content: space-between; align-items: center; }
.email-cred-hint { font-size: 0.65rem; color: var(--accent-magenta); font-style: italic; text-transform: none; letter-spacing: normal; }
.email-cred-value { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text-primary); font-weight: 700; word-break: break-all; }
.email-pwd-row { display: flex; align-items: center; justify-content: space-between; }
.email-pwd { font-family: var(--font-mono); font-size: 1.15rem; color: var(--accent-magenta); font-weight: 700; filter: blur(5px); transition: filter 0.3s; cursor: pointer; }
.email-pwd.is-revealed { filter: none; }
.email-copy-btn { padding: 6px 12px; font-size: 0.8rem; }
.email-access-cta { text-align: center; }
.btn--cta-lg { padding: 16px 40px; font-size: 1.1rem; box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2); }
.email-steps-title { font-size: 1.2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.email-steps-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.email-step-card { padding: 24px; transition: all 0.3s; }
.email-step-card--cyan:hover { border-color: var(--accent-cyan); }
.email-step-card--violet:hover { border-color: var(--accent-violet); }
.email-step-card--magenta:hover { border-color: var(--accent-magenta); }
.email-step-num { width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.email-step-num--cyan { background: rgba(0, 240, 255, 0.1); color: var(--accent-cyan); }
.email-step-num--violet { background: rgba(123, 47, 247, 0.1); color: var(--accent-violet); }
.email-step-num--magenta { background: rgba(255, 0, 110, 0.1); color: var(--accent-magenta); }
.email-step-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; color: var(--text-primary); }
.email-step-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.btn--mini { font-size: 0.8rem; width: 100%; }
.email-locked { margin-top: 28px; text-align: center; padding: 60px 30px; }
.email-locked__icon { font-size: 3rem; margin-bottom: 14px; }
.email-locked__title { margin-bottom: 10px; }
.email-locked__desc { color: var(--text-secondary); max-width: 460px; margin: 0 auto; }
.email-locked__btn { margin-top: 22px; }

/* --- Files / Upload --- */
.file-form-mb { margin-bottom: 20px; }
.file-form-select { max-width: 320px; font-weight: bold; color: var(--accent-cyan); }
.text-link { color: var(--accent-cyan); cursor: pointer; text-decoration: underline; }
.hidden-input { display: none; }
.files-toolbar { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; align-items: center; }
.files-toolbar__search { flex: 1; min-width: 200px; }
.files-toolbar__group { flex: 0 1 auto; min-width: 180px; text-align: right; }
.files-stats-grid { margin-bottom: 24px; }
.label--mini { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; }
.input--full { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: .9rem; }
.form-group--flat { margin: 0; }
.empty-state__icon { font-size: 3rem; }
.empty-state__hint { color: var(--text-muted); max-width: 400px; margin: 0 auto; }

/* --- Admin overview & projects --- */
.illust--bare { background: transparent; border: none; }
.sync-time { opacity: .7; }
.loading-text { font-size: .9rem; color: var(--text-secondary); }
.error-box__msg { font-size: .85rem; }
.page-header-row { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.code-chip { background: var(--bg-elevated); padding: 2px 6px; border-radius: 3px; }
.spinner--violet { margin: 0 auto 14px; width: 32px; height: 32px; border-top-color: var(--accent-violet); }
.projects-loader { text-align: center; padding: 40px; }
.projects-loader__msg { color: var(--text-muted); }

/* --- QA select wrapper --- */
.qa-project-wrap { max-width: 400px; margin-bottom: 30px; }
.qa-select { width: 100%; padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: var(--radius-sm); }
.flex-between-bold { display: flex; justify-content: space-between; font-weight: bold; }
.mono { font-family: var(--font-mono); }
.c-warn { color: var(--accent-warn); }
.c-cyan { color: var(--accent-cyan); }
.c-primary { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-muted { color: var(--text-muted); }
.c-violet { color: var(--accent-violet); }
.c-magenta { color: var(--accent-magenta); }
.c-green { color: var(--accent-green); }

/* --- Admin add form ops --- */
.label-soft { font-weight: 400; }
.ops-list { font-size: .85rem; color: var(--text-secondary); line-height: 1.8; }
.ops-list__row { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.ops-list__row:last-child { border-bottom: 0; }
.ops-list__step { color: var(--accent-cyan); }
.card-spaced { margin-top: 28px; }
.card-spaced-sm { margin-top: 20px; }
.card-h3 { margin-bottom: 6px; }

/* --- Catalogue --- */
.catalog-pack-badge { margin-bottom: 10px; }
.catalog-pack-badge--audit { background: rgba(123, 47, 247, .08); border-color: rgba(123, 47, 247, .4); color: var(--accent-violet); }
.catalog-price { font-size: 1.6rem; font-weight: 800; color: var(--accent-cyan); font-family: var(--font-mono); }
.catalog-price--violet { color: var(--accent-violet); }
.catalog-rs-card { margin-top: 22px; background: linear-gradient(135deg, rgba(255, 0, 110, .05), rgba(123, 47, 247, .08)); border-color: rgba(255, 0, 110, .3); }
.catalog-rs-icon { font-size: 2.5rem; }
.catalog-rs-body { flex: 1; min-width: 240px; }
.catalog-rs-price-wrap { text-align: right; }
.catalog-rs-price { font-size: 1.4rem; font-weight: 800; color: var(--accent-magenta); font-family: var(--font-mono); }
.catalog-rs-unit { font-size: .75rem; color: var(--text-muted); }
.catalog-rs-text { color: var(--text-secondary); font-size: .9rem; }
.flex-between-mb14 { display: flex; justify-content: space-between; margin-bottom: 14px; }
.flex-row-gap20 { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.flex-row-gap { display: flex; gap: 10px; align-items: center; }
.flex-row-gap--wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; }

/* --- Sidebar footer items --- */
.sidebar-version { margin-bottom: 8px; }
.is-clickable-cyan-mb { cursor: pointer; color: var(--accent-cyan); margin-bottom: 8px; }
.is-clickable-cyan { cursor: pointer; color: var(--accent-cyan); }
.is-clickable-violet-mb { cursor: pointer; color: var(--accent-violet); margin-bottom: 8px; }
.is-clickable-violet { cursor: pointer; color: var(--accent-violet); }

/* --- Bulk upload modal --- */
.modal-bulk { width: 90%; max-width: 600px; position: relative; background: var(--bg-primary); padding: 30px; }
.modal-admin-email { width: 90%; max-width: 450px; position: relative; background: var(--bg-primary); padding: 30px; }
.modal-edit-partner { width: 90%; max-width: 500px; position: relative; background: var(--bg-primary); padding: 30px; }
.modal-close-x { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 1.8rem; color: var(--text-muted); }
.modal-close-x:hover { color: var(--accent-magenta); }
.modal-title { margin-bottom: 20px; color: var(--accent-cyan); }
.modal-title--violet { color: var(--accent-violet); }
.modal-help { margin-bottom: 10px; color: var(--accent-cyan); }
.modal-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 24px; }
.modal-actions { margin-top: 24px; display: flex; gap: 12px; justify-content: flex-end; }
.modal-actions--right { margin-top: 20px; text-align: right; }
.bulk-select { width: 100%; }
.bulk-select--violet { border-color: var(--accent-violet); }
.bulk-progress { display: none; margin-top: 20px; padding: 15px; background: var(--bg-elevated); border-radius: 8px; }
.bulk-progress.is-visible { display: block; }
.bulk-progress__text { margin-bottom: 10px; font-size: 0.85rem; color: var(--accent-cyan); }
.progress-bar--thin { height: 8px; }
.drop-zone--bulk { margin-bottom: 20px; }

/* ============================================================
   RESPONSIVE MOBILE — Optimisation complète côté client
   Breakpoints : 960px (tablette) · 640px (mobile M) · 390px (mobile S)
   ============================================================ */

/* ── 960px : tablette & mobile landscape ── */
@media (max-width: 960px) {
  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar .pack-badge { font-size: 0.7rem; padding: 4px 10px; }
  .hero-banner { padding: 22px 20px; gap: 16px; }
  .hero-banner h2 { font-size: 1.4rem; }
  .hero-banner p  { font-size: 0.9rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .step-item { flex-direction: column; gap: 10px; }
  .qa-item { grid-template-columns: 36px 1fr; padding: 10px 14px; }
  .qa-note { display: none; }
  .file-item { flex-wrap: wrap; gap: 10px; }
  .file-meta { font-size: 0.72rem; }
  .modal-bulk, .modal-admin-email, .modal-edit-partner { width: 96%; padding: 20px; }
  .toast { right: 12px; left: 12px; max-width: none; bottom: 16px; }
  .project-actions { flex-wrap: wrap; gap: 8px; }
  .project-actions .btn--sm { font-size: 0.75rem; padding: 6px 10px; }
  /* ── Admin mobile 960px ── */
  .admin-projects-list .card { padding: 16px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .overview-grid { grid-template-columns: 1fr; }
}

/* ── 640px : mobile portrait ── */
@media (max-width: 640px) {
  main { padding: 16px 14px !important; }
  .page-title { font-size: 1.5rem; }
  .page-sub   { font-size: 0.85rem; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .topbar > *:last-child { align-self: flex-end; }
  .hero-banner { grid-template-columns: 1fr; padding: 20px 18px; }
  .hero-banner .illust { display: none; }
  .hero-banner h2 { font-size: 1.25rem; }
  .card { padding: 18px 16px; border-radius: var(--radius-md); }
  .card-title { font-size: 1.1rem; }
  .stat-card { padding: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 14px; }
  .progress-info { flex-direction: column; gap: 2px; align-items: flex-start; }
  .step-item { padding: 14px 16px; }
  .step-num  { font-size: 0.75rem; min-width: 28px; height: 28px; }
  .nav-item { font-size: 0.88rem; padding: 10px 12px; }
  .qa-item { grid-template-columns: 32px 1fr; gap: 8px; padding: 9px 12px; font-size: 0.8rem; }
  .qa-name { font-size: 0.8rem; white-space: normal; word-break: break-word; }
  /* ── Pac-Man fix : annule le padding-left inline JS (indentPx) sur mobile ── */
  .qa-name[style], .qa-item.folder span[style] { padding-left: 0 !important; }
  .qa-item.folder { padding-left: 12px; }
  .qa-tree { overflow-x: hidden; }
  .qa-points { font-size: 0.7rem; }
  .pacman-wrapper { padding: 14px; }
  .file-item { padding: 12px; gap: 10px; }
  .file-name { font-size: 0.85rem; }
  .file-action { padding: 6px 10px; font-size: 0.78rem; }
  .files-toolbar { flex-direction: column; gap: 10px; }
  .files-toolbar__search, .files-toolbar__group { width: 100%; min-width: 0; text-align: left; }
  .pack-badge { font-size: 0.68rem; padding: 3px 8px; }
  .add-partner-form { padding: 18px 16px; }
  .form-section-title { font-size: 0.85rem; }
  .add-summary { padding: 16px; }
  .btn--full { width: 100%; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-bulk, .modal-admin-email, .modal-edit-partner {
    width: 100%; max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 18px; max-height: 90vh; overflow-y: auto;
  }
  .toast { font-size: 0.85rem; padding: 12px 16px; }
  .email-box { flex-wrap: wrap; font-size: 0.82rem; }
  .email-actions { flex-direction: column; }
  .email-actions .btn { width: 100%; justify-content: center; }
  .page-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .crumbs { font-size: 0.75rem; }
  /* ── Admin mobile 640px ── */
  .admin-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stats .stat-card { padding: 12px; }
  .admin-stats .stat-card .stat-value { font-size: 1.4rem; }
  .project-actions { flex-direction: column; gap: 6px; }
  .project-actions .btn--sm { width: 100%; justify-content: center; font-size: 0.8rem; }
  .add-partner-form .grid-2 { grid-template-columns: 1fr; }
  .add-partner-form .form-section { padding: 14px 0; }
  .add-summary .summary-row { flex-direction: column; gap: 4px; }
  .checklist-container { max-height: 280px; overflow-y: auto; }
  .admin-nav { gap: 4px; }
  .admin-nav .nav-item { font-size: 0.82rem; padding: 9px 10px; }
  .topbar-admin { padding: 10px 12px; gap: 8px; }
  .topbar-admin .topbar-right { gap: 6px; }
}

/* ── 390px : iPhone SE / Android compact ── */
@media (max-width: 390px) {
  main { padding: 12px 10px !important; }
  .page-title { font-size: 1.3rem; }
  .card { padding: 14px 12px; }
  .hero-banner { padding: 16px 14px; }
  .hero-banner h2 { font-size: 1.1rem; }
  .topbar { padding: 10px 12px; }
  .btn { font-size: 0.82rem; }
  .btn--sm { font-size: 0.72rem; padding: 5px 8px; }
  .qa-item { padding: 8px 10px; }
  .file-item { padding: 10px; }
  .toast { font-size: 0.8rem; bottom: 10px; }
}

/* ── Touch : zones cliquables élargies ── */
@media (hover: none) and (pointer: coarse) {
  .nav-item   { min-height: 44px; }
  .btn        { min-height: 44px; }
  .btn--sm    { min-height: 38px; }
  .filter-tab { min-height: 38px; }
  .qa-checkbox { width: 20px; height: 20px; }
  .file-action { min-height: 38px; }
}