*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary-red:#ed1d24;
--primary-blue:#1976d2;
--dark-blue:#0d47a1;
--success-green:#43a047;
--bg-dark:#1a1a2e;
--bg-page:#f5f7fa;
--bg-surface:#ffffff;
--bg-card:#ffffff;
--bg-elevated:#f5f5f5;
--bg-secondary:#eeeeee;
--text-primary:#1a1a1a;
--text-secondary:#757575;
--text-muted:#999;
--border:#e0e0e0;
--shadow:0 2px 8px rgba(0,0,0,0.1);
--shadow-hover:0 8px 24px rgba(0,0,0,0.15);
--input-bg:#ffffff;
--header-gradient:linear-gradient(135deg,var(--primary-red) 0%,var(--dark-blue) 100%);
--cover-gradient:linear-gradient(135deg,var(--primary-red),var(--dark-blue));
--card-radius:16px;
--font-base:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--cover-svg:url("data:image/svg+xml,");
}
/* ══ REFONTE PASSION POP — DESIGN TOKENS & ALIAS ═══════════════════════════
Source de vérité : design_handoff_app_refonte → MCC_THEMES (README §thèmes).
Un thème = ~18 variables posées sur :root via [data-theme] ; les anciens
alias (--bg-page, --text-primary, …) pointent vers les nouveaux tokens →
tous les écrans legacy (super admin, scanner, import…) suivent le thème. */
:root{
--f-display:'Bungee',Impact,sans-serif;
--f-shout:'Bangers',Impact,sans-serif;
--f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--f-hand:'Caveat',cursive;
--f-mono:'JetBrains Mono','SF Mono',monospace;
/* tokens — défaut = Crimson (thème par défaut du produit) */
--bg:#f7f0ef; --surface:#fdfaf9; --surface-alt:#efe1de;
--ink:#221012; --ink-soft:#4a2e31; --muted:#7d6164;
--line:rgba(34,16,18,.18);
--primary:#c41824; --primary-dark:#92121b; --primary-soft:rgba(196,24,36,.08);
--accent:#ffc83d;
--green:#10a36f; --orange:#d97a14; --purple:#6c3ab0; --blue:#1b5aa8;
--header-bg:#9e1019; --on-header:#ffffff; --shadow-ink:#221012;
/* alias legacy → tokens */
--primary-red:var(--primary);
--primary-blue:var(--blue);
--dark-blue:var(--primary-dark);
--success-green:var(--green);
--bg-dark:var(--ink);
--bg-page:var(--bg);
--bg-surface:var(--surface);
--bg-card:var(--surface);
--bg-elevated:var(--surface-alt);
--bg-secondary:var(--surface-alt);
--text-primary:var(--ink);
--text-secondary:var(--ink-soft);
--text-muted:var(--muted);
--border:var(--line);
--shadow:3px 3px 0 var(--shadow-ink);
--shadow-hover:5px 5px 0 var(--shadow-ink);
--input-bg:var(--surface);
--header-gradient:var(--header-bg);
--cover-gradient:linear-gradient(135deg,var(--primary),var(--primary-dark));
--card-radius:2px;
--font-base:var(--f-body);
}
/* Composants avec couleurs hardcodées → overrides dark */
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) body,
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .main-content { background:var(--bg-page); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .sidebar { background:var(--bg-surface); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .modal-content { background:var(--bg-card); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .modal-header { background:linear-gradient(135deg,#c0000a,#0a3070); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .search-wrapper { background:var(--bg-surface); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .search-wrapper:focus-within { background:var(--bg-card); box-shadow:0 4px 12px rgba(0,0,0,0.4); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .comic-card { background:var(--bg-card); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .comic-card:hover { box-shadow:var(--shadow-hover); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .filter-btn { background:var(--bg-card); border-color:var(--border); color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .filter-btn:hover { background:var(--bg-elevated); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .filter-btn.active { background:var(--primary-red); color:#fff; border-color:var(--primary-red); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .view-btn { color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .sort-select,
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .sort-dir-btn { background:var(--bg-card); color:var(--text-primary); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .edit-input,
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) select.edit-input,
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) textarea.edit-input { background:var(--input-bg); color:var(--text-primary); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .detail-item { border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .detail-label { color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .stats-card { background:var(--bg-card); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .kpi-card { background:var(--bg-card); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .progress-section { background:var(--bg-card); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .progress-bar { background:var(--bg-elevated); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .import-box { background:var(--bg-card); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .import-dropzone { border-color:var(--border); color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .import-preview { border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .import-preview td { border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .view-tabs { background:var(--bg-surface); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .view-tab { color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .view-tab.active { background:var(--bg-card); color:var(--text-primary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .cost-stat { background:rgba(237,29,36,.08); border-color:rgba(237,29,36,.2); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .mobile-filter-chip { background:var(--bg-card); color:var(--text-secondary); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .mobile-filter-chip.active { background:var(--primary-red); color:#fff; }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .list-item { background:var(--bg-card); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .modal-actions { background:var(--bg-elevated); border-color:var(--border); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .batch-box { background:var(--bg-card); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .search-scope-select { color:var(--primary-red); background:transparent; }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .search-clear { background:rgba(255,255,255,0.1); color:var(--text-secondary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .cgc-tooltip { background:var(--bg-elevated); border-color:var(--border); color:var(--text-primary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .checkbox-label { color:var(--text-primary); }
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) #loginError { background:rgba(237,29,36,.15); }
body{
font-family:var(--font-base,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
background:var(--bg-page);
color:var(--text-primary);
overflow-x:hidden;
transition:background .25s,color .25s;
}
/* LOGIN MODAL */
/* ── LOGIN MODAL — Direction B v2 "Passion Pop" ─────────── */
.login-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fdf6e8;
background-image:radial-gradient(rgba(232,36,44,0.1) 1px,transparent 1.5px);
background-size:6px 6px;
z-index:2000;
display:none;
flex-direction:column;
align-items:center;
justify-content:flex-start;
overflow-y:auto;
padding:20px 20px 40px;
-webkit-overflow-scrolling:touch;
}
.login-overlay.show{display:flex;}
.seo-login-content{max-width:900px;width:100%;margin:2.5rem auto 0;padding:0 1.5rem;font-family:'Inter',system-ui,sans-serif;color:#1a1208;line-height:1.7;}
.seo-login-content h2{font-size:1.5rem;font-weight:800;margin-bottom:1rem;text-align:center;}
.seo-login-content h3{font-size:1.1rem;font-weight:700;margin-top:1.8rem;margin-bottom:.4rem;}
.seo-login-content p{margin-bottom:.8rem;font-size:.95rem;}
.seo-login-content hr{border:none;border-top:1px solid #eee;margin:2rem 0;}
.login-close-btn{
position:absolute;
top:20px;
right:20px;
background:#e8242c;
border:3px solid #1a1208;
box-shadow:3px 3px 0 #1a1208;
color:#fff;
width:40px;
height:40px;
border-radius:0;
cursor:pointer;
font-family:'Bangers',Impact,sans-serif;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
transition:transform 140ms ease-out,box-shadow 140ms ease-out;
z-index:10;
}
.login-close-btn:hover{
transform:translate(-1px,-1px);
box-shadow:4px 4px 0 #1a1208;
background:#b01820;
}
.login-overlay::before{display:none;}
.login-box{
background:#fff;
padding:clamp(24px,4vw,40px);
border:3px solid #1a1208;
box-shadow:8px 8px 0 #1a1208;
border-radius:0;
max-width:440px;
width:100%;
position:relative;
z-index:1;
animation:loginSlideUp 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes loginSlideUp{
0%{opacity:0;transform:translateY(30px) scale(0.94)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.login-header{
text-align:center;
margin-bottom:24px;
}
.login-icon{
width:72px;
height:72px;
background:#e8242c;
border:3px solid #1a1208;
box-shadow:4px 4px 0 #1a1208;
border-radius:0;
display:inline-flex;
align-items:center;
justify-content:center;
font-family:'Bangers',Impact,sans-serif;
font-size:32px;
color:#fff;
margin-bottom:16px;
transform:rotate(-5deg);
}
.login-title{
font-family:'Bungee',Impact,sans-serif;
font-size:clamp(22px,3vw,28px);
font-weight:400;
color:#1a1208;
margin-bottom:6px;
letter-spacing:-0.5px;
text-transform:uppercase;
line-height:1;
}
.login-title span{
display:inline-block;
background:#e8242c;
color:#fff;
padding:0 8px;
border:2px solid #1a1208;
box-shadow:3px 3px 0 #1a1208;
transform:rotate(-2deg);
}
.login-subtitle{
color:#3d2f1a;
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:600;
margin-top:10px;
}
.login-form{
display:flex;
flex-direction:column;
gap:10px;
}
.login-input{
padding:12px 14px;
border:2px solid #1a1208;
border-radius:0;
font-family:'Inter',sans-serif;
font-size:15px;
font-weight:500;
color:#1a1208;
background:#fff;
transition:box-shadow 140ms ease-out;
}
.login-input:focus{
outline:none;
background:#fff9e9;
box-shadow:3px 3px 0 #e8242c;
}
.login-btn{
padding:14px 18px;
border:3px solid #1a1208;
box-shadow:5px 5px 0 #1a1208;
border-radius:0;
font-family:'Bangers',Impact,sans-serif;
font-weight:400;
cursor:pointer;
font-size:16px;
letter-spacing:1.8px;
transition:transform 140ms ease-out,box-shadow 140ms ease-out;
background:#e8242c;
color:#fff;
margin-top:4px;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.login-btn:hover{
transform:translate(-2px,-2px);
box-shadow:7px 7px 0 #1a1208;
}
.login-btn:active{
transform:translate(2px,2px);
box-shadow:1px 1px 0 #1a1208;
}
.login-error{
background:#fff9e9;
color:#b01820;
padding:12px 14px;
border:2px solid #b01820;
box-shadow:3px 3px 0 #1a1208;
border-radius:0;
font-family:'Inter',sans-serif;
font-size:13.5px;
text-align:center;
font-weight:600;
}
.login-info{
margin-top:1.25rem;
padding:0.875rem 1rem;
background:#f8f8f8;
border-radius:12px;
font-size:0.8rem;
color:var(--text-light);
border:1px solid #f0f0f0;
}
.login-info strong{
color:var(--text-dark);
display:block;
margin-bottom:0.4rem;
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.5px;
}
/* HEADER STICKY */
.header{
position:sticky;
top:0;
z-index:100;
background:var(--header-gradient);
box-shadow:0 2px 12px rgba(0,0,0,0.15);
padding:1rem 2rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
}
.logo{
display:flex;
align-items:center;
gap:0.75rem;
color:white;
text-decoration:none;
}
.logo-icon{
font-size:2rem;
}
.logo-text{
display:flex;
flex-direction:column;
}
.logo-title{
font-size:1.5rem;
font-weight:900;
letter-spacing:-0.5px;
line-height:1;
}
.logo-subtitle{
font-size:0.75rem;
opacity:0.9;
font-weight:500;
}
.header-search{
flex:1;
max-width:600px;
position:relative;
}
.search-wrapper{
display:flex;
align-items:center;
background:rgba(255,255,255,0.95);
border-radius:50px;
overflow:hidden;
transition:all 0.3s;
}
.search-wrapper:focus-within{
background:white;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.search-scope-select{
border:none;
background:transparent;
padding:0.75rem 0.25rem 0.75rem 1rem;
font-size:0.8rem;
font-weight:700;
color:var(--primary-red);
cursor:pointer;
outline:none;
appearance:none;
-webkit-appearance:none;
white-space:nowrap;
flex-shrink:0;
}
.search-scope-divider{
width:1px;
height:1.2rem;
background:#ddd;
flex-shrink:0;
}
.search-icon{
padding:0 0.5rem 0 0.75rem;
color:var(--text-secondary);
flex-shrink:0;
font-size:0.95rem;
}
.search-input{
flex:1;
min-width:0;
padding:0.75rem 0.25rem 0.75rem 0;
border:none;
background:transparent;
font-size:1rem;
outline:none;
}
.search-clear{
display:none;
align-items:center;
justify-content:center;
width:1.5rem;
height:1.5rem;
margin-right:0.4rem;
border:none;
background:rgba(0,0,0,0.12);
color:#555;
border-radius:50%;
font-size:0.75rem;
cursor:pointer;
flex-shrink:0;
line-height:1;
}
.search-clear:hover{background:rgba(0,0,0,0.22);color:#000;}
.search-clear.visible{display:flex;}
.search-icon{
color:var(--text-secondary);
flex-shrink:0;
}
.header-stats{
display:flex;
gap:1.5rem;
color:white;
align-items:center;
}
.header-stat{
text-align:center;
}
.header-stat-value{
font-size:1.5rem;
font-weight:900;
display:block;
}
.header-stat-label{
font-size:0.75rem;
opacity:0.9;
}
.logout-btn{
padding:0.5rem 1.5rem;
background:rgba(255,255,255,0.2);
border:2px solid white;
color:white;
border-radius:12px;
cursor:pointer;
font-weight:600;
transition:all 0.2s;
}
.logout-btn:hover{
background:white;
color:var(--primary-red);
}
.user-badge{
background:rgba(255,255,255,0.2);
padding:0.5rem 1rem;
border-radius:20px;
font-size:0.85rem;
font-weight:600;
}
/* SIDEBAR */
.layout{
display:grid;
grid-template-columns:280px 1fr;
min-height:calc(100vh - 80px);
}
.sidebar{
background:var(--bg-surface);
border-right:1px solid var(--border);
padding:1.5rem;
position:sticky;
top:80px;
height:calc(100vh - 80px);
overflow-y:auto;
}
.sidebar-section{
margin-bottom:2rem;
}
.sidebar-title{
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
color:var(--text-muted);
margin-bottom:1rem;
letter-spacing:0.5px;
}
/* Collections sidebar */
.collections-section{padding:0.75rem 0.5rem 0.25rem}
.collections-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.35rem}
.collections-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.collections-add-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;padding:0 2px;border-radius:4px;transition:color 0.15s}
.collections-add-btn:hover{color:var(--primary-red)}
.collections-list{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow-y:auto;overflow-x:hidden}
.collections-list::-webkit-scrollbar{width:3px}
.collections-list::-webkit-scrollbar-track{background:transparent}
.collections-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.coll-item{display:flex;flex-direction:column;padding:0.45rem 0.6rem;border-radius:8px;cursor:pointer;transition:background 0.15s;position:relative}
.coll-item:hover{background:rgba(255,255,255,0.06)}
.coll-item.active{background:rgba(237,29,36,0.12)}
.coll-item.active .coll-name{color:var(--primary-red)}
.coll-item-row{display:flex;align-items:center;justify-content:space-between;gap:0.4rem}
.coll-emoji-name{display:flex;align-items:center;gap:0.4rem;min-width:0;flex:1}
.coll-emoji{font-size:0.9rem;flex-shrink:0}
.coll-name{font-size:0.8rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coll-pct{font-size:0.72rem;font-weight:700;color:var(--primary-red);flex-shrink:0}
.coll-mini-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.1);margin-top:4px;overflow:hidden}
.coll-mini-fill{height:100%;border-radius:2px;background:var(--primary-red);transition:width 0.3s}
.coll-edit-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:0.75rem;opacity:0;padding:2px 4px;border-radius:4px;transition:opacity 0.15s,color 0.15s;flex-shrink:0}
.coll-item:hover .coll-edit-btn{opacity:1}
.coll-edit-btn:hover{color:var(--primary-red)}
/* Collection modal */
#collectionModal .modal-content{max-width:420px}
.coll-modal-field{margin-bottom:1rem}
.coll-modal-label{font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.35rem;display:block}
.coll-modal-input{width:100%;background:var(--input-bg);border:1.5px solid var(--border);color:var(--text-primary);border-radius:8px;padding:0.55rem 0.75rem;font-size:0.88rem;outline:none;transition:border-color 0.2s}
.coll-modal-input:focus{border-color:var(--primary-red)}
.coll-emoji-row{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.4rem}
.coll-emoji-opt{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:border-color 0.15s,background 0.15s}
.coll-emoji-opt:hover{background:rgba(237,29,36,0.1)}
.coll-emoji-opt.selected{border-color:var(--primary-red);background:rgba(237,29,36,0.12)}
.coll-color-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.4rem}
.coll-color-opt{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color 0.15s,transform 0.15s}
.coll-color-opt:hover{transform:scale(1.1)}
.coll-color-opt.selected{border-color:var(--text-primary)}
.coll-type-row{display:flex;gap:0.5rem;margin-top:0.4rem}
.coll-type-btn{flex:1;padding:0.5rem 0.6rem;border-radius:8px;border:2px solid var(--border);background:transparent;color:var(--text-secondary);font-size:0.8rem;cursor:pointer;transition:all 0.15s;text-align:center}
.coll-type-btn.active{border-color:var(--primary-red);background:rgba(237,29,36,0.1);color:var(--text-primary)}
.nav-item{
padding:0.75rem 1rem;
border-radius:8px;
cursor:pointer;
transition:all 0.2s;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:0.5rem;
}
.nav-item:hover{
background:#f5f5f5;
}
.nav-item.active{
background:var(--primary-red);
color:white;
font-weight:600;
}
.nav-badge{
background:rgba(0,0,0,0.08);
padding:0.25rem 0.5rem;
border-radius:12px;
font-size:0.75rem;
font-weight:700;
}
.filter-group{
margin-bottom:1.5rem;
}
.filter-label{
font-size:0.85rem;
font-weight:600;
margin-bottom:0.5rem;
display:block;
color:var(--text-secondary);
}
.filter-btn{
display:inline-block;
padding:0.5rem 1rem;
background:white;
border:2px solid var(--border);
border-radius:20px;
cursor:pointer;
font-size:0.85rem;
font-weight:600;
margin:0.25rem;
transition:all 0.2s;
}
.filter-btn:hover{
border-color:var(--primary-red);
}
.filter-btn.active{
background:var(--primary-red);
color:white;
border-color:var(--primary-red);
}
/* MAIN CONTENT */
.main-content{
padding:2rem;
min-width:0;
overflow-x:hidden;
}
.content-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:2rem;
}
.page-title{
font-size:2rem;
font-weight:900;
color:var(--text-primary);
}
.content-controls{
display:flex;
gap:1rem;
align-items:center;
}
.view-switcher{
display:flex;
background:var(--bg-card);
border-radius:10px;
padding:0.25rem;
border:1px solid var(--border);
}
.view-btn{
padding:0.5rem 1rem;
border:none;
background:transparent;
cursor:pointer;
border-radius:8px;
font-size:1rem;
transition:all 0.2s;
color:var(--text-secondary);
}
.view-btn.active{
background:var(--primary-red);
color:white;
}
.sort-select{
padding:0.5rem 1rem;
border:1px solid var(--border);
border-radius:10px;
background:var(--bg-card);
color:var(--text-primary);
cursor:pointer;
font-size:0.9rem;
}
.sort-dir-btn{
padding:0.5rem 0.65rem;
border:1px solid var(--border);
border-radius:10px;
background:var(--bg-card);
color:var(--text-primary);
cursor:pointer;
font-size:0.9rem;
line-height:1;
transition:background 0.15s;
}
.sort-dir-btn:hover{background:var(--bg-secondary);}
/* COST STATS */
.cost-stats{display:flex;flex-direction:column;gap:0.5rem;}
.cost-stat{
display:flex;flex-direction:column;
background:rgba(237,29,36,0.06);
border:1px solid rgba(237,29,36,0.15);
border-radius:10px;
padding:0.6rem 0.9rem;
}
.cost-stat-value{
font-size:1.25rem;font-weight:900;
background:linear-gradient(135deg,var(--primary-red),var(--dark-blue));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cost-stat-label{font-size:0.7rem;color:var(--text-secondary);margin-top:0.1rem;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.cost-stat-sub{font-size:0.72rem;color:var(--text-secondary);text-align:center;margin-top:0.15rem;font-style:italic;}
/* PROGRESS BAR */
.progress-section{
background:var(--bg-card);
padding:1.5rem;
border-radius:16px;
margin-bottom:2rem;
border:1px solid var(--border);
}
.progress-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
}
.progress-title{
font-size:1.1rem;
font-weight:700;
color:var(--text-primary);
}
.progress-percent{
font-size:1.5rem;
font-weight:900;
color:var(--success-green);
}
.progress-bar{
height:12px;
background:#e0e0e0;
border-radius:6px;
overflow:hidden;
}
.progress-fill{
height:100%;
background:linear-gradient(90deg,var(--success-green),#2e7d32);
transition:width 0.5s ease;
}
/* GRID VIEW */
.comics-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:1.5rem;
}
.comic-card{
background:white;
border-radius:var(--card-radius);
overflow:hidden;
box-shadow:var(--shadow);
transition:all 0.3s;
cursor:pointer;
}
.comic-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
}
.comic-cover{
width:100%;
height:280px;
background:var(--cover-gradient);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:3rem;
font-weight:900;
position:relative;
overflow:hidden;
}
.comic-cover::before{
content:'';
position:absolute;
inset:0;
background-image:var(--cover-svg);
background-size:cover;
z-index:1;
pointer-events:none;
}
.comic-cover img{
width:100%;
height:100%;
object-fit:contain;
position:absolute;
top:0;
left:0;
z-index:2;
background:#1a1a1a;
}
.comic-number{
position:absolute;
bottom:0;
left:0;
right:0;
z-index:3;
text-align:center;
background:linear-gradient(transparent,rgba(0,0,0,0.75));
padding:1rem 0.5rem 0.5rem;
font-size:1.1rem;
}
.comic-info{
padding:1rem;
}
.comic-title{
font-size:0.9rem;
font-weight:700;
margin-bottom:0.5rem;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
color:var(--text-primary);
}
.comic-meta{
font-size:0.75rem;
color:var(--text-secondary);
margin-bottom:0.5rem;
}
.comic-badges{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}
.badge{
padding:0.25rem 0.5rem;
border-radius:4px;
font-size:0.7rem;
font-weight:700;
}
.badge-owned{
background:#e8f5e9;
color:var(--success-green);
}
.badge-forsale{
background:#fff8e1;
color:#ff8f00;
}
.badge-annual{
background:#e8f5e9;
color:#2e7d32;
font-weight:700;
}
.badge-cgc{
background:#fff3e0;
color:#f57c00;
}
.badge-signed{
background:#f3e5f5;
color:#7b1fa2;
}
.badge-variant{
background:#e3f2fd;
color:var(--primary-blue);
}
.badge-loaned{
background:#fff8e1;
color:#e65100;
font-weight:700;
}
.badge-read{
background:#e8f5e9;
color:#2e7d32;
font-weight:700;
}
.badge-key{
background:#fff8e1;
color:#e65100;
font-weight:700;
}
.badge-wishlist{
background:#fce4ec;
color:#880e4f;
font-weight:700;
}
.badge-condition{
background:#e0f2f1;
color:#00695c;
font-weight:700;
font-family:monospace;
letter-spacing:.04em;
}
.badge-ordered{
background:#fff8e1;
color:#e65100;
border:1px solid #ffcc02;
animation:orderedPulse 2s ease-in-out infinite;
}
@keyframes orderedPulse{
0%,100%{opacity:1;}
50%{opacity:0.65;}
}
/* LIST VIEW */
.comics-list{
display:flex;
flex-direction:column;
gap:1rem;
}
.comic-list-item{
background:white;
border-radius:12px;
padding:1rem;
display:grid;
grid-template-columns:60px 1fr auto;
gap:1rem;
align-items:center;
box-shadow:var(--shadow);
cursor:pointer;
transition:all 0.2s;
}
.comic-list-item:hover{
box-shadow:var(--shadow-hover);
}
.list-cover{
width:60px;
height:80px;
background:linear-gradient(135deg,var(--primary-red),var(--dark-blue));
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:900;
font-size:1.2rem;
position:relative;
overflow:hidden;
}
.list-cover img{
width:100%;
height:100%;
object-fit:contain;
position:absolute;
top:0;
left:0;
background:#1a1a1a;
}
.list-info{
flex:1;
}
.list-title{
font-weight:700;
margin-bottom:0.25rem;
color:var(--text-primary);
}
.list-meta{
font-size:0.85rem;
color:var(--text-secondary);
}
.list-actions{
display:flex;
gap:0.5rem;
align-items:center;
}
/* MODAL */
/* ═══════ MODAL v2 ═══════════════════════════════════════════════ */
.modal{
display:none;
position:fixed;
top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.85);
z-index:1000;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:1rem;
align-items:center;
justify-content:center;
}
.modal.show{display:flex;}
.modal-content{
background:var(--bg-card,#fff);
max-width:1100px;
width:calc(100% - 80px);
border-radius:var(--card-radius,16px);
overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,0.5);
display:flex;flex-direction:column;
max-height:90vh;
position:relative;
}
/* ── Header ── */
.modal-header{
background:var(--header-gradient);
color:white;
padding:.85rem 1.25rem;
position:relative;
flex-shrink:0;
display:flex;align-items:center;gap:.75rem;
}
.modal-header-text{flex:1;min-width:0;}
.modal-subtitle{font-size:.7rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.modal-title{font-size:1.2rem;font-weight:900;line-height:1.15;font-family:'Bangers','Impact',cursive;letter-spacing:.04em;}
.modal-issue-badge{
background:var(--primary-red,#e62429);color:#fff;
font-family:'Bangers','Impact',cursive;font-size:1.1rem;font-weight:900;letter-spacing:.03em;
padding:.2rem .7rem;border-radius:6px;white-space:nowrap;flex-shrink:0;
}
.modal-close{
background:rgba(0,0,0,0.3);border:none;color:white;
width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.3rem;
display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0;
}
.modal-close:hover{background:rgba(0,0,0,0.5);}
/* ── Status Tabs ── */
.modal-status-tabs{
display:flex;gap:0;border-bottom:1px solid var(--border,#e0e0e0);flex-shrink:0;background:var(--bg-card,#fff);
}
.status-tab{
flex:1;padding:.6rem .5rem;border:none;background:none;cursor:pointer;
font-family:inherit;font-size:.78rem;font-weight:600;color:var(--text-muted,#999);
transition:.15s;position:relative;text-align:center;white-space:nowrap;
}
.status-tab:hover{color:var(--text-primary,#333);}
.status-tab.active{color:var(--primary-red,#e62429);font-weight:700;}
.status-tab.active::after{
content:'';position:absolute;bottom:0;left:15%;right:15%;height:3px;
background:var(--primary-red,#e62429);border-radius:3px 3px 0 0;
}
.status-tab.active[data-status="owned"]{color:#43a047;}
.status-tab.active[data-status="owned"]::after{background:#43a047;}
.status-tab.active[data-status="sold"]{color:#ff8f00;}
.status-tab.active[data-status="sold"]::after{background:#ff8f00;}
.status-tab[disabled]{opacity:.5;cursor:default;}
/* ── Body & Layout ── */
.modal-body{flex:1;min-height:0;overflow:hidden;padding:0;display:flex;flex-direction:column;}
.modal-layout{
display:grid;
grid-template-columns:220px 1fr 280px;
gap:0;flex:1;min-height:0;overflow:hidden;align-items:stretch;
}
/* ── Cover column ── */
.modal-col-cover{
background:var(--bg-elevated,#f0f0f0);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:0.5rem;padding:0;position:relative;overflow:hidden;
}
.modal-cover-link{
font-size:.72rem;color:var(--text-muted,#888);cursor:pointer;text-decoration:none;
padding:.4rem 0;transition:.15s;
}
.modal-cover-link:hover{color:var(--primary-red,#e62429);}
/* ── Details column ── */
.modal-col-details{padding:1rem 1.25rem;overflow-y:auto;}
/* ── Sidebar column ── */
.modal-col-sidebar{
padding:1rem;overflow-y:auto;
border-left:1px solid var(--border,#e0e0e0);
display:flex;flex-direction:column;gap:.75rem;
background:var(--bg-elevated,#f8f8f8);
}
/* ── Estimation card (sidebar) ── */
.modal-est-card{
background:var(--bg-card,#fff);border:1px solid var(--border,#e0e0e0);
border-radius:var(--card-radius,12px);padding:.85rem 1rem;
}
.modal-est-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#888);margin-bottom:.35rem;}
.modal-est-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;}
.modal-est-price{font-size:1.6rem;font-weight:900;color:var(--text-primary,#1a1a1a);line-height:1;}
.modal-est-trend{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:12px;white-space:nowrap;}
.modal-est-trend.up{background:#e8f5e9;color:#2e7d32;}
.modal-est-trend.down{background:#fbe9e7;color:#c62828;}
.modal-est-range{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted,#888);margin-top:.35rem;}
.modal-est-bar{height:5px;background:linear-gradient(90deg,#27ae60,#f39c12,#e74c3c);border-radius:3px;margin-top:.25rem;position:relative;}
.modal-est-bar-dot{
position:absolute;top:-4px;width:13px;height:13px;
background:var(--primary-red,#e62429);border:2px solid #fff;border-radius:50%;
box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translateX(-50%);
}
.modal-est-reestimate{
display:block;width:100%;margin-top:.5rem;padding:.4rem;
border:1.5px solid var(--border,#ddd);border-radius:var(--card-radius,8px);
background:var(--bg-card,#fff);color:var(--text-secondary,#666);
font-size:.72rem;font-weight:600;cursor:pointer;text-align:center;transition:.15s;
}
.modal-est-reestimate:hover{border-color:var(--primary-red);color:var(--primary-red);}
/* ── Plus-value card ── */
.modal-pv-card{
background:var(--bg-card,#1a1208);border-radius:var(--card-radius,12px);
padding:.7rem 1rem;color:#fff;
}
.modal-pv-card.positive{background:#1b5e20;}
.modal-pv-card.negative{background:#b71c1c;}
.modal-pv-card.neutral{background:var(--bg-elevated,#333);color:var(--text-primary,#fff);}
.modal-pv-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85;}
.modal-pv-value{font-size:1.2rem;font-weight:900;line-height:1.2;}
.modal-pv-detail{font-size:.65rem;opacity:.75;margin-top:.15rem;}
/* ── Suivi mini-section (sidebar) ── */
.modal-sidebar-section{
background:var(--bg-card,#fff);border:1px solid var(--border,#e0e0e0);
border-radius:var(--card-radius,12px);padding:.75rem 1rem;
}
.modal-sidebar-title{
font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-muted,#888);margin-bottom:.4rem;
display:flex;align-items:center;justify-content:space-between;
}
.modal-sidebar-action{
font-size:.7rem;font-weight:600;color:var(--primary-red,#e62429);
cursor:pointer;border:none;background:none;padding:0;
}
.modal-sidebar-action:hover{text-decoration:underline;}
/* ── Section headers with accent bar ── */
.modal-section{border-bottom:1px solid var(--border,#eee);padding-bottom:0;}
.modal-section:last-child{border-bottom:none;}
.modal-section-header{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;cursor:pointer;user-select:none;}
.modal-section-header:hover{opacity:.8;}
.modal-section-title{
font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--primary-red,#e62429);
display:flex;align-items:center;gap:.4rem;
padding-left:.6rem;border-left:3px solid var(--primary-red,#e62429);
}
.modal-section-chevron{font-size:.7rem;color:var(--text-muted,#aaa);transition:transform .2s;}
.modal-section.collapsed .modal-section-chevron{transform:rotate(-90deg);}
.modal-section-body{padding-bottom:.75rem;}
.modal-section.collapsed .modal-section-body{display:none;}
/* ── Detail grid ── */
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;}
.detail-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.25rem;letter-spacing:0.5px;}
.detail-value{font-size:0.9rem;color:var(--text-primary);}
/* ── Inline checkboxes row ── */
.modal-checks-row{display:flex;flex-wrap:wrap;gap:.5rem .8rem;padding:.4rem 0;}
.modal-check-chip{
display:inline-flex;align-items:center;gap:.35rem;
padding:.3rem .65rem;border:1.5px solid var(--border,#ddd);border-radius:var(--card-radius,8px);
font-size:.75rem;font-weight:600;color:var(--text-secondary,#666);cursor:pointer;
background:var(--bg-card,#fff);transition:.15s;user-select:none;
}
.modal-check-chip input[type="checkbox"]{width:16px;height:16px;margin:0;accent-color:var(--primary-red,#e62429);cursor:pointer;}
.modal-check-chip:has(input:checked){border-color:var(--primary-red,#e62429);color:var(--primary-red,#e62429);background:rgba(237,29,36,.05);}
/* ── Form inputs ── */
.edit-input,.edit-select{
width:100%;padding:0.45rem 0.65rem;
border:1.5px solid var(--border);border-radius:var(--card-radius,8px);
font-size:0.88rem;transition:all 0.2s;
background:var(--input-bg,#fff);color:var(--text-primary,#333);
}
.edit-input:focus,.edit-select:focus{outline:none;border-color:var(--primary-red);box-shadow:0 0 0 3px rgba(237,29,36,0.08);}
.edit-input:disabled,.edit-select:disabled{background:var(--bg-elevated,#f5f5f5);cursor:not-allowed;}
.checkbox-label{display:flex;align-items:center;gap:0.5rem;cursor:pointer;}
.checkbox-label input{width:20px;height:20px;cursor:pointer;}
.checkbox-label input:disabled{cursor:not-allowed;}
.checkbox-text{font-weight:600;color:var(--text-primary);}
/* ── Delete link ── */
.modal-delete-link{
display:flex;align-items:center;justify-content:center;gap:.3rem;
font-size:.75rem;color:var(--text-muted,#999);cursor:pointer;
border:none;background:none;padding:.5rem;width:100%;transition:.15s;margin-top:auto;
}
.modal-delete-link:hover{color:#c62828;}
/* ── Actions bar ── */
.modal-actions{
padding:0.5rem 1rem;
background:var(--bg-card,#f8f8f8);
display:flex;justify-content:flex-end;align-items:center;
gap:0.4rem;flex-wrap:nowrap;
border-top:1px solid var(--border,#eee);
flex-shrink:0;overflow-x:auto;
}
.modal-actions-timestamp{
margin-right:auto;font-size:.7rem;color:var(--text-muted,#999);
display:flex;align-items:center;gap:.3rem;
}
.modal-actions-timestamp::before{content:'●';color:#43a047;font-size:.5rem;}
.modal-actions .btn,.modal-actions .btn-ghost-danger{font-size:.75rem;padding:.4rem .7rem;white-space:nowrap;}
.modal-actions .btn-primary{font-size:.8rem;padding:.5rem 1rem;}
/* ── Mobile cover+estimation row ── */
.modal-cover-est-row{display:none;}
/* ═══ Responsive: tablet (collapse sidebar into details) ═══ */
@media(max-width:960px){
.modal-content{width:calc(100% - 40px);}
.modal-layout{grid-template-columns:200px 1fr;}
.modal-col-sidebar{
border-left:none;border-top:1px solid var(--border,#e0e0e0);
flex-direction:row;flex-wrap:wrap;gap:.5rem;padding:.75rem;
}
.modal-est-card,.modal-pv-card,.modal-sidebar-section{flex:1;min-width:200px;}
}
/* ═══ Responsive: mobile ═══ */
@media(max-width:640px){
.modal{padding:0;align-items:flex-start;overflow:hidden;}
.modal-content{
border-radius:0;max-height:100dvh;height:100dvh;width:100%;
display:flex;flex-direction:column;overflow:hidden;
}
.modal-header{padding:.7rem .85rem;gap:.5rem;}
.modal-title{font-size:1rem;}
.modal-subtitle{font-size:.62rem;}
.modal-issue-badge{font-size:.9rem;padding:.15rem .55rem;}
.modal-body{max-height:none;flex:1;min-height:0;overflow:hidden;}
.modal-layout{
grid-template-columns:1fr;flex:1;min-height:0;
overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* Hide desktop cover column + sidebar on mobile */
.modal-col-cover{display:none;}
.modal-col-sidebar{display:none;}
/* Show mobile cover+estimation row */
.modal-cover-est-row{
display:flex;gap:.6rem;padding:.75rem;
border-bottom:1px solid var(--border,#e0e0e0);
background:var(--bg-elevated,#f5f5f5);flex-shrink:0;
}
.modal-cover-est-row .cover-thumb{
width:120px;flex-shrink:0;border-radius:var(--card-radius,8px);overflow:hidden;
}
.modal-cover-est-row .cover-thumb img{width:100%;display:block;}
.modal-cover-est-row .est-side{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.modal-col-details{overflow-y:visible;max-height:none;padding-bottom:1rem;}
.modal-section .detail-grid{grid-template-columns:repeat(2,1fr) !important;}
.detail-grid{grid-template-columns:1fr;}
.modal-actions{
position:sticky;bottom:0;z-index:20;
background:var(--bg-card,#fff);box-shadow:0 -2px 10px rgba(0,0,0,.08);
padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom,0px));
gap:.35rem;row-gap:.4rem;flex-wrap:wrap;overflow-x:visible;
box-sizing:border-box;width:100%;max-width:100%;justify-content:flex-end;
}
.modal-actions-timestamp{display:none;}
.modal-actions .btn,.modal-actions .btn-ghost-danger{font-size:.7rem;padding:.4rem .6rem;min-width:0;flex:0 1 auto;}
.modal-actions .btn-primary{font-size:.75rem;padding:.45rem .85rem;}
.modal-checks-row{gap:.4rem;}
.modal-check-chip{font-size:.7rem;padding:.25rem .5rem;}
}
.btn{
padding:0.75rem 2rem;
border:none;
border-radius:8px;
font-weight:700;
cursor:pointer;
transition:all 0.2s;
font-size:1rem;
}
.btn-primary{
background:linear-gradient(135deg,var(--primary-red),var(--dark-blue));
color:white;
border-radius:12px;
box-shadow:0 4px 12px rgba(237,29,36,0.3);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(237,29,36,0.4);
}
.btn-success{
background:linear-gradient(135deg,#2e7d32,#1b5e20);
color:white;border-radius:12px;box-shadow:0 4px 12px rgba(46,125,50,0.3);
}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(46,125,50,0.45);}
.btn-warning{
background:linear-gradient(135deg,#e65100,#bf360c);
color:white;border-radius:12px;box-shadow:0 4px 12px rgba(230,81,0,0.3);
}
.btn-warning:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(230,81,0,0.45);}
.btn-danger{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:white;border-radius:12px;box-shadow:0 4px 12px rgba(198,40,40,0.3);
}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(198,40,40,0.45);}
.btn-ghost-danger{
background:transparent;color:#ef5350;border:1.5px solid #ef5350;border-radius:12px;
font-size:0.82rem;padding:0.35rem 0.75rem;cursor:pointer;transition:all .18s;
}
.btn-ghost-danger:hover{background:#ef5350;color:white;}
.btn-primary:disabled{
background:#ccc;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
.condition-info-icon{
cursor:help;
color:var(--text-light);
margin-left:0.5rem;
transition:color 0.2s;
}
.condition-info-icon:hover{
color:var(--primary-red);
}
.condition-tooltip{
position:fixed;
background:white;
border:2px solid var(--primary-red);
border-radius:16px;
padding:1.25rem 1.5rem;
max-width:min(640px,calc(100vw - 24px));
max-height:75vh;
overflow-y:auto;
z-index:10000;
box-shadow:0 12px 40px rgba(0,0,0,0.2);
display:none;
color:var(--text-primary);
-webkit-overflow-scrolling:touch;
}
.condition-tooltip.show{
display:block;
}
.tooltip-title{
font-size:1.3rem;
font-weight:bold;
margin-bottom:1.5rem;
color:var(--primary-red);
border-bottom:2px solid rgba(237,29,36,0.5);
padding-bottom:0.75rem;
}
.cgc-grid{
display:grid;
grid-template-columns:auto 1fr;
gap:0.75rem 1.5rem;
font-size:0.9rem;
}
.cgc-grade{
font-weight:bold;
color:var(--primary-red);
font-family:'Courier New',monospace;
}
.cgc-desc{
color:var(--text-secondary);
line-height:1.6;
}
.cgc-name{
font-weight:600;
color:var(--primary-blue);
}
.readonly-notice{
background:#fff3cd;
color:#856404;
padding:1rem;
border-radius:10px;
margin-bottom:1rem;
text-align:center;
font-weight:600;
}
/* BARRE STATS MOBILE (visible uniquement quand la sidebar est cachée) */
.mobile-stats-bar{
display:none; /* caché par défaut — affiché via JS + media query */
align-items:center;
gap:0.75rem;
padding:0.5rem 1rem 0.25rem;
font-size:0.82rem;
color:var(--text-secondary);
flex-wrap:wrap;
}
.mobile-stats-bar.visible{display:flex;}
.mob-stat{display:flex;align-items:center;gap:0.3rem;}
.mob-stat strong{color:var(--text-primary);font-size:0.9rem;}
.mob-stat-sep{opacity:0.35;font-size:0.9rem;}
.mob-stat-sub{font-size:0.72rem;font-style:italic;opacity:0.7;}
@media(min-width:1025px){
.mobile-stats-bar{display:none!important;} /* sidebar visible → barre inutile */
}
/* VIEW TABS (visible uniquement sans sidebar) */
.view-tabs{
display:none;
gap:0.5rem;
padding:0.75rem 1rem 0;
}
.view-tab{
flex:1;
padding:0.6rem 1rem;
border:none;
border-radius:10px;
background:var(--border);
color:var(--text-secondary);
font-weight:700;
font-size:0.85rem;
cursor:pointer;
transition:all 0.2s;
}
.view-tab.active{
background:var(--primary-red);
color:white;
}
.tab-badge{
background:rgba(255,255,255,0.3);
color:inherit;
border-radius:20px;
padding:0.1rem 0.5rem;
font-size:0.75rem;
margin-left:0.3rem;
}
.view-tab:not(.active) .tab-badge{
background:rgba(0,0,0,0.1);
}
/* RESPONSIVE */
@media(max-width:1024px){
.layout{
grid-template-columns:1fr;
}
.sidebar{
display:none;
}
.view-tabs{
display:flex;
}
.comics-grid{
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
}
@media(max-width:768px){
.header{
flex-wrap:wrap;
padding:0.75rem 1rem;
gap:0.5rem;
align-items:center;
}
.logo{
flex:1;
min-width:0;
}
.logo-title{
font-size:1rem;
}
.logo-subtitle{
font-size:0.65rem;
}
.logo-icon{
font-size:1.4rem;
}
.header-search{
order:10;
flex-basis:100%;
width:100%;
max-width:none;
}
.header-stats{
flex-shrink:0;
}
.header-stats .add-comic-btn{
width:36px;
height:36px;
font-size:1rem;
}
/* ─── HEADER ACTION BUTTONS ──────────────────────────────────────────────── */
.hdr-btn{
padding:0;
border:none;
border-radius:12px;
cursor:pointer;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.22s cubic-bezier(0.16,1,0.3,1);
margin-left:0.5rem;
flex-shrink:0;
}
.hdr-btn svg{display:block;pointer-events:none;}
/* Tooltip au survol */
.hdr-btn{position:relative;}
.hdr-btn::after{
content:attr(data-tooltip);
position:absolute;
bottom:calc(100% + 9px);
left:50%;
transform:translateX(-50%) translateY(4px);
background:rgba(15,17,23,0.88);
color:#fff;
font-size:0.7rem;
font-weight:700;
letter-spacing:0.02em;
padding:4px 9px;
border-radius:7px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity 0.15s,transform 0.15s;
backdrop-filter:blur(4px);
}
.hdr-btn:hover::after{
opacity:1;
transform:translateX(-50%) translateY(0);
}
/* Connexion (login) — bonhomme blanc sur fond glassmorphism */
#adminLoginBtn{
background:rgba(255,255,255,0.14);
color:white;
border:1.5px solid rgba(255,255,255,0.32);
backdrop-filter:blur(4px);
}
#adminLoginBtn:hover{
background:rgba(255,255,255,0.28);
border-color:rgba(255,255,255,0.6);
transform:scale(1.08);
box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
/* Ajout comic — blanc signature avec rouge */
#addComicBtn{
background:white;
color:var(--primary-red);
box-shadow:0 2px 10px rgba(0,0,0,0.18),0 1px 3px rgba(0,0,0,0.08);
}
#addComicBtn:hover{
transform:scale(1.05);
box-shadow:0 6px 22px rgba(0,0,0,0.28);
}
.hdr-label{display:none !important;}
/* Dark mode toggle */
#darkModeBtn{
background:rgba(255,255,255,0.14);
color:white;
border:1.5px solid rgba(255,255,255,0.28);
font-size:1.1rem;
line-height:1;
}
#darkModeBtn:hover{
background:rgba(255,255,255,0.26);
border-color:rgba(255,255,255,0.55);
transform:scale(1.08);
box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
/* ── Import overlay ─────────────────────────────────── */
#importOverlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:4000;display:none;align-items:center;justify-content:center;padding:1rem;}
#importOverlay.show{display:flex;}
.import-box{background:var(--bg-card);border-radius:20px;padding:1.5rem;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;}
.import-title{font-size:1.2rem;font-weight:800;color:var(--text-primary);}
.import-template-btn{display:flex;align-items:center;gap:0.5rem;background:#e8f5e9;color:#2e7d32;border:1.5px solid #a5d6a7;border-radius:12px;padding:0.6rem 1rem;font-size:0.85rem;font-weight:700;cursor:pointer;width:fit-content;}
.import-template-btn:hover{background:#c8e6c9;}
.import-dropzone{border:2px dashed var(--border);border-radius:14px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-secondary);}
.import-dropzone.drag-over{border-color:var(--primary-red);background:rgba(237,29,36,.05);color:var(--primary-red);}
.import-dropzone input[type=file]{display:none;}
.import-dropzone-icon{font-size:2rem;margin-bottom:.5rem;}
.import-dropzone-label{font-size:.9rem;font-weight:600;}
.import-dropzone-sub{font-size:.78rem;margin-top:.25rem;opacity:.7;}
.import-preview{overflow-x:auto;border-radius:10px;border:1px solid var(--border);}
.import-preview table{width:100%;border-collapse:collapse;font-size:.78rem;}
.import-preview th{background:var(--bg-secondary);padding:.4rem .6rem;text-align:left;font-weight:700;white-space:nowrap;}
.import-preview td{padding:.35rem .6rem;border-top:1px solid var(--border);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;}
.import-preview tr.row-new td:first-child::after{content:' 🆕';font-size:.7rem;}
.import-preview tr.row-update td:first-child::after{content:' ✏️';font-size:.7rem;}
.import-summary{font-size:.85rem;color:var(--text-secondary);}
.import-summary strong{color:var(--text-primary);}
.import-actions{display:flex;gap:.75rem;justify-content:flex-end;}
.import-actions .btn-cancel{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:12px;padding:.6rem 1.2rem;cursor:pointer;font-weight:700;}
.import-actions .btn-import{background:linear-gradient(135deg,var(--primary-red),#b71c1c);color:white;border:none;border-radius:12px;padding:.6rem 1.4rem;cursor:pointer;font-weight:700;}
.import-actions .btn-import:disabled{opacity:.5;cursor:not-allowed;}
/* Logout — fond transparent, bordure blanche, icône blanche */
#logoutBtn{
background:transparent;
color:rgba(255,255,255,0.7);
border:1.5px solid rgba(255,255,255,0.35);
border-radius:12px;
}
#logoutBtn svg{stroke:rgba(255,255,255,0.7);}
#logoutBtn:hover{
background:rgba(255,255,255,0.1);
color:white;
border-color:rgba(255,255,255,0.6);
transform:scale(1.05);
}
#logoutBtn:hover svg{stroke:white;}
@media(max-width:768px){
.hdr-btn{width:36px;height:36px;border-radius:10px;margin-left:0;}
.header-stats{gap:0.3rem;}
#superAdminBtn{width:36px;height:36px;}
}
.view-tabs{
padding:0.5rem 0.75rem 0;
gap:0.4rem;
}
.view-tab{
font-size:0.75rem;
padding:0.5rem 0.6rem;
}
.content-header{
flex-wrap:wrap;
gap:0.5rem;
padding:0.75rem 1rem;
}
.page-title{
font-size:1.4rem;
width:100%;
}
.content-controls{
width:100%;
justify-content:space-between;
}
.sort-select{
font-size:0.8rem;
padding:0.4rem 0.6rem;
max-width:160px;
}
.comics-grid{
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:1rem;
}
.main-content{
padding:0.75rem;
}
.login-overlay.show{
overflow-y:auto;
align-items:flex-start;
padding:1rem;
}
.login-box{
width:100%;
max-width:100%;
padding:1.5rem 1.25rem;
margin:0;
}
.login-title{
font-size:1.2rem;
}
.login-close-btn{
position:fixed;
top:0.5rem;
right:0.5rem;
}
}
/* MOBILE FILTER BAR */
.mobile-filter-bar{
display:none;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
white-space:nowrap;
padding:0.5rem 1rem;
gap:0.5rem;
background:white;
border-bottom:1px solid #eee;
}
.mobile-filter-bar::-webkit-scrollbar{display:none;}
@media(max-width:640px){
.mobile-filter-bar{display:flex;align-items:center;}
}
.mobile-filter-chip{
display:inline-flex;
align-items:center;
padding:0.35rem 0.85rem;
border-radius:20px;
border:1.5px solid #ddd;
background:white;
color:#555;
font-size:0.8rem;
font-weight:600;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
transition:all 0.15s;
}
.mobile-filter-chip.active{
background:var(--primary-red);
border-color:var(--primary-red);
color:white;
}
@media(max-width:640px){
/* Compact progress card on mobile */
.progress-section{
padding:0.6rem 1rem;
border-radius:8px;
margin:0.5rem 0 0.5rem;
}
.progress-title{font-size:0.8rem;}
.progress-percent{font-size:1rem;}
.progress-bar{height:6px;border-radius:3px;}
/* Less main content padding on mobile */
.main-content{padding:0 0 1rem;}
/* Tighter comics grid gap on mobile */
.comics-grid{gap:0.75rem;padding:0 0.75rem;}
/* Detail grid single column on mobile */
.detail-grid{grid-template-columns:1fr;}
}
/* LOADING STATE */
.loading{
text-align:center;
padding:3rem;
color:var(--text-secondary);
}
.spinner{
width:40px;
height:40px;
border:4px solid var(--border);
border-top-color:var(--primary-red);
border-radius:50%;
animation:spin 1s linear infinite;
margin:0 auto 1rem;
}
@keyframes spin{
to{transform:rotate(360deg);}
}
/* V3 COVER STYLES */
.delete-cover-btn{
position:absolute;
top:8px;
right:8px;
background:rgba(255,255,255,.85);
backdrop-filter:blur(4px);
border:none;
border-radius:8px;
width:32px;
height:32px;
font-size:0.8rem;
cursor:pointer;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
color:#e53935;
}
.delete-cover-btn:hover{
background:rgba(255,255,255,1);
transform:scale(1.08);
}
.rotate-cover-btn{
position:absolute;
top:8px;
left:8px;
background:rgba(255,255,255,.85);
backdrop-filter:blur(4px);
border:none;
border-radius:8px;
width:32px;
height:32px;
font-size:.9rem;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
color:#333;
transition:all 0.2s;
padding:0;
line-height:1;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.rotate-cover-btn:hover{
background:rgba(255,255,255,1);
transform:scale(1.08);
}
.cover-preview-container{
width:100%;
height:100%;
position:relative;
display:block;
}
.cover-preview{
width:100%;
height:100%;
background:linear-gradient(135deg,var(--primary-red),var(--dark-blue));
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative;
}
.cover-preview::before{
content:'';
position:absolute;
inset:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'%3E%3Ccircle cx='100' cy='100' r='20'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='100' r='84'/%3E%3Ccircle cx='100' cy='100' r='105'/%3E%3Cline x1='100' y1='0' x2='100' y2='200'/%3E%3Cline x1='0' y1='100' x2='200' y2='100'/%3E%3Cline x1='15' y1='15' x2='185' y2='185'/%3E%3Cline x1='185' y1='15' x2='15' y2='185'/%3E%3Cline x1='0' y1='58' x2='200' y2='142'/%3E%3Cline x1='200' y1='58' x2='0' y2='142'/%3E%3Cline x1='58' y1='0' x2='142' y2='200'/%3E%3Cline x1='142' y1='0' x2='58' y2='200'/%3E%3C/g%3E%3Cg opacity='0.22' fill='white' stroke='white' stroke-linecap='round'%3E%3Cellipse cx='100' cy='118' rx='18' ry='22'/%3E%3Cellipse cx='100' cy='88' rx='13' ry='11'/%3E%3Ccircle cx='100' cy='70' r='10'/%3E%3Cpath d='M87 82 Q65 72 42 58' fill='none' stroke-width='4'/%3E%3Cpath d='M87 89 Q60 86 32 85' fill='none' stroke-width='4'/%3E%3Cpath d='M87 96 Q62 98 36 108' fill='none' stroke-width='4'/%3E%3Cpath d='M88 105 Q68 116 50 132' fill='none' stroke-width='4'/%3E%3Cpath d='M113 82 Q135 72 158 58' fill='none' stroke-width='4'/%3E%3Cpath d='M113 89 Q140 86 168 85' fill='none' stroke-width='4'/%3E%3Cpath d='M113 96 Q138 98 164 108' fill='none' stroke-width='4'/%3E%3Cpath d='M112 105 Q132 116 150 132' fill='none' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
background-size:cover;
pointer-events:none;
}
.cover-preview img{
width:100%;
height:100%;
object-fit:contain;
position:absolute;
top:0;
left:0;
}
.cover-placeholder{
color:white;
font-weight:900;
text-align:center;
z-index:1;
padding:1rem;
}
.cover-placeholder-number{
font-size:3rem;
margin-bottom:0.5rem;
text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.cover-placeholder-new{
font-size:1.5rem;
opacity:0.9;
text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.add-comic-btn{
padding:0;
background:white;
border:none;
color:var(--primary-red);
border-radius:14px;
cursor:pointer;
font-size:1.3rem;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
margin-left:0.5rem;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
font-weight:900;
}
.add-comic-btn:hover{
transform:scale(1.12) rotate(90deg);
box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
/* ─── STATS VIEW ──────────────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem 1.5rem 0;}
.kpi-box{background:white;border-radius:12px;padding:1.25rem;box-shadow:var(--shadow);text-align:center;transition:transform .15s;}
.kpi-box:hover{transform:translateY(-2px);}
.kpi-val{font-size:2rem;font-weight:800;color:var(--primary-red);line-height:1;}
.kpi-sub{font-size:0.72rem;font-weight:600;color:#43a047;margin-top:.15rem;}
.kpi-lbl{font-size:0.7rem;color:var(--text-secondary);margin-top:0.3rem;text-transform:uppercase;letter-spacing:.04em;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;padding:1.5rem;}
.stats-card{background:white;border-radius:12px;padding:1.4rem 1.4rem 1.2rem;box-shadow:var(--shadow);}
.stats-card-title{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:1.1rem;display:flex;align-items:center;gap:.4rem;}
/* barres horizontales */
.sbar-row{display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:.5rem;margin-bottom:.42rem;}
.sbar-lbl{font-size:.76rem;color:var(--text-secondary);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sbar-track{background:#f0f0f0;border-radius:4px;height:18px;overflow:hidden;position:relative;}
.sbar-fill{height:100%;border-radius:4px;min-width:2px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.sbar-count{font-size:.72rem;font-weight:700;color:var(--text-primary);text-align:right;white-space:nowrap;}
/* couleur decade par % */
.sbar-fill[data-pct]{background:var(--primary-red);}
.sbar-era-label{font-size:.72rem;font-weight:600;color:var(--text-secondary);text-align:right;}
/* writers */
.sbar-writer-name{font-size:.76rem;color:var(--text-primary);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;}
/* CGC grade dots */
.cgc-grade-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
.cgc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cgc-grade-bar-track{flex:1;background:#f0f0f0;border-radius:4px;height:16px;overflow:hidden;}
.cgc-grade-bar-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.cgc-grade-label{font-size:.73rem;font-weight:700;color:var(--text-secondary);width:48px;text-align:right;}
.cgc-grade-count{font-size:.73rem;font-weight:700;color:var(--text-primary);width:24px;text-align:right;}
.stats-evaluate-btn{display:block;width:100%;padding:0.75rem;background:var(--primary-red);color:white;border:none;border-radius:8px;font-size:0.9rem;font-weight:700;cursor:pointer;margin-top:1rem;transition:opacity .2s;}
.stats-evaluate-btn:hover{opacity:.85;}
.stats-evaluate-btn:disabled{opacity:.5;cursor:not-allowed;}
.stats-data-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:10px;font-size:.85rem;font-weight:700;cursor:pointer;border:none;transition:opacity .2s;}
.stats-data-btn:hover{opacity:.85;}
.stats-data-btn--import{background:#e3f2fd;color:#1565c0;border:1.5px solid #90caf9;}
.stats-data-btn--export{background:#f3e5f5;color:#6a1b9a;border:1.5px solid #ce93d8;}
.stats-data-btn--insurance{background:#fff8e1;color:#e65100;border:1.5px solid #ffcc02;}
/* ── Story Arcs Overlay ───────────────────────────────────── */
#arcsOverlay{display:none;position:fixed;inset:0;background:var(--bg-page);z-index:9000;overflow-y:auto;}
#arcsOverlay.open{display:block;}
.arcs-topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background:var(--header-gradient);color:#fff;position:sticky;top:0;z-index:10;}
.arcs-topbar h2{flex:1;font-size:1rem;font-weight:800;margin:0;}
.arcs-topbar-btn{background:rgba(255,255,255,.18);border:none;color:#fff;padding:.4rem .9rem;border-radius:7px;font-size:.82rem;font-weight:700;cursor:pointer;}
.arcs-topbar-btn:hover{background:rgba(255,255,255,.32);}
.arcs-body{max-width:960px;margin:0 auto;padding:1.5rem 1rem 4rem;}
.arcs-filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.arcs-filter-chip{padding:.35rem .85rem;border-radius:99px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;}
.arcs-filter-chip.active{background:var(--primary-red);border-color:var(--primary-red);color:#fff;}
.arcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.arc-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;transition:all .18s;}
.arc-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-red);}
.arc-card-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.65rem;}
.arc-card-cover{width:48px;height:68px;border-radius:5px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);background:var(--bg-elevated);}
.arc-card-cover-ph{width:48px;height:68px;border-radius:5px;flex-shrink:0;background:var(--cover-gradient);display:flex;align-items:center;justify-content:center;font-size:1.4rem;}
.arc-card-meta{flex:1;min-width:0;}
.arc-card-name{font-size:.92rem;font-weight:800;color:var(--text-primary);line-height:1.3;margin-bottom:.2rem;}
.arc-card-year{font-size:.72rem;color:var(--text-secondary);}
.arc-cat-badge{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:.4rem;text-transform:uppercase;letter-spacing:.04em;}
.arc-cat-classic{background:#fff3e0;color:#e65100;}
.arc-cat-bronze{background:#fce4ec;color:#c62828;}
.arc-cat-modern{background:#e8f5e9;color:#2e7d32;}
.arc-cat-contemporary{background:#e3f2fd;color:#1565c0;}
.arc-progress-bar{height:5px;background:var(--bg-elevated);border-radius:3px;overflow:hidden;margin-bottom:.4rem;}
.arc-progress-fill{height:100%;background:var(--primary-red);border-radius:3px;transition:width .3s;}
.arc-progress-fill.complete{background:#43a047;}
.arc-progress-label{font-size:.7rem;color:var(--text-secondary);}
/* Arc detail overlay */
#arcDetailOverlay{display:none;position:fixed;inset:0;background:var(--bg-page);z-index:9100;overflow-y:auto;}
#arcDetailOverlay.open{display:block;}
.arcdet-topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background:var(--header-gradient);color:#fff;position:sticky;top:0;z-index:10;}
.arcdet-topbar-title{flex:1;font-size:1rem;font-weight:800;}
.arcdet-body{max-width:800px;margin:0 auto;padding:1.5rem 1rem 4rem;}
.arcdet-hero{display:flex;gap:1.25rem;margin-bottom:1.75rem;align-items:flex-start;}
.arcdet-hero-covers{display:flex;gap:4px;flex-wrap:wrap;max-width:200px;}
.arcdet-hero-cover{width:56px;height:80px;border-radius:5px;object-fit:cover;border:1px solid var(--border);}
.arcdet-hero-cover-ph{width:56px;height:80px;border-radius:5px;background:var(--cover-gradient);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.arcdet-hero-info{flex:1;}
.arcdet-hero-name{font-size:1.3rem;font-weight:900;color:var(--text-primary);margin-bottom:.3rem;}
.arcdet-hero-desc{font-size:.83rem;color:var(--text-secondary);line-height:1.55;margin-bottom:.75rem;}
.arcdet-hero-stats{display:flex;gap:1rem;flex-wrap:wrap;}
.arcdet-stat{text-align:center;background:var(--bg-elevated);border-radius:8px;padding:.5rem .85rem;}
.arcdet-stat-val{font-size:1.1rem;font-weight:800;color:var(--primary-red);}
.arcdet-stat-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-top:2px;}
.arcdet-issues{display:flex;flex-direction:column;gap:.5rem;}
.arcdet-issue{display:flex;align-items:center;gap:.85rem;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:.6rem .85rem;}
.arcdet-issue.owned{border-color:rgba(67,160,71,.35);background:rgba(67,160,71,.04);}
.arcdet-issue.not-subscribed{opacity:.45;}
.arcdet-issue-num{font-size:1rem;font-weight:800;min-width:28px;text-align:center;color:var(--text-secondary);}
.arcdet-issue-cover{width:38px;height:54px;border-radius:4px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;}
.arcdet-issue-cover-ph{width:38px;height:54px;border-radius:4px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text-muted);flex-shrink:0;}
.arcdet-issue-info{flex:1;min-width:0;}
.arcdet-issue-title{font-size:.83rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.arcdet-issue-sub{font-size:.7rem;color:var(--text-secondary);margin-top:2px;}
.arcdet-issue-status{font-size:.7rem;font-weight:700;padding:3px 7px;border-radius:99px;white-space:nowrap;}
.arcdet-issue-status.owned{background:rgba(67,160,71,.15);color:#2e7d32;}
.arcdet-issue-status.missing{background:rgba(237,29,36,.1);color:#c62828;}
.arcdet-issue-status.not-sub{background:var(--bg-elevated);color:var(--text-muted);}
/* ── Insurance Report Overlay (v5.106 Pro) ─────────────────── */
#insuranceReportOverlay{display:none;position:fixed;inset:0;background:#fff;z-index:9999;overflow-y:auto;font-family:Georgia,serif;color:#111;}
#insuranceReportOverlay.open{display:block;}
.ir-topbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#ed1d24;color:#fff;position:sticky;top:0;z-index:10;flex-wrap:wrap;}
.ir-topbar h2{flex:1;min-width:200px;font-size:1rem;font-weight:800;margin:0;}
.ir-topbar-btn{background:rgba(255,255,255,.2);border:none;color:#fff;padding:.45rem 1rem;border-radius:7px;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.ir-topbar-btn:hover{background:rgba(255,255,255,.35);}
.ir-body{max-width:950px;margin:0 auto;padding:2rem 1.5rem 4rem;}
.ir-header{text-align:center;border-bottom:3px solid #111;padding-bottom:1.5rem;margin-bottom:1.5rem;}
.ir-header h1{font-size:1.6rem;font-weight:900;letter-spacing:.02em;margin-bottom:.25rem;}
.ir-header p{font-size:.85rem;color:#555;margin:.2rem 0;}
.ir-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-bottom:1.5rem;}
.ir-sum-box{border:1.5px solid #ddd;border-radius:8px;padding:.75rem .85rem;text-align:center;}
.ir-sum-val{font-size:1.3rem;font-weight:800;color:#ed1d24;line-height:1.1;}
.ir-sum-lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:#777;margin-top:.3rem;line-height:1.3;}
.ir-insurance-note{background:#fff8e1;border:1px solid #ffcc80;border-left:4px solid #ef6c00;border-radius:6px;padding:.75rem 1rem;font-size:.78rem;color:#333;margin:1.5rem 0;line-height:1.5;}
.ir-section-title{font-size:1rem;font-weight:800;border-bottom:2px solid #111;padding-bottom:.35rem;margin:1.75rem 0 .65rem;}
.ir-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.ir-table th{background:#111;color:#fff;padding:.5rem .6rem;text-align:left;font-weight:700;font-size:.7rem;letter-spacing:.04em;}
.ir-table td{padding:.5rem .6rem;border-bottom:1px solid #e8e8e8;vertical-align:middle;}
.ir-table tr:nth-child(even) td{background:#fafafa;}
.ir-cover{width:48px;height:72px;object-fit:cover;border-radius:3px;border:1px solid #ddd;display:block;}
.ir-cover-ph{width:48px;height:72px;background:#eee;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#1a1208;border:1px solid #ddd;}
.ir-badge{display:inline-block;background:#1565c0;color:#fff;font-size:.62rem;font-weight:700;padding:2px 5px;border-radius:4px;margin-left:3px;}
.ir-badge-cgc{background:#ff8f00;}
.ir-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;}
.ir-tag{background:#f0f0f0;color:#555;font-size:.62rem;padding:1px 5px;border-radius:5px;font-weight:500;border:1px solid #e0e0e0;}
.ir-total-row td{font-weight:800;background:#f5f5f5 !important;border-top:2px solid #111;font-size:.82rem;}
/* Verification footer */
.ir-verify{display:flex;gap:1.25rem;align-items:flex-start;background:#f9f9fb;border:1px solid #e0e0e8;border-radius:10px;padding:1.25rem;margin-top:2rem;page-break-inside:avoid;}
.ir-verify-qr{flex-shrink:0;border:1px solid #ddd;border-radius:6px;padding:6px;background:#fff;}
.ir-verify-qr img{display:block;}
.ir-verify-info{flex:1;font-size:.85rem;}
.ir-verify-title{font-weight:800;font-size:.95rem;margin-bottom:.65rem;color:#111;}
.ir-verify-row{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid #f0f0f0;font-size:.78rem;}
.ir-verify-row span{color:#666;}
.ir-verify-url{font-size:.7rem;color:#1565c0;margin-top:.65rem;font-family:monospace;word-break:break-all;}
.ir-verify-note{font-size:.7rem;color:#888;margin-top:.5rem;font-style:italic;}
/* Final totals */
.ir-final-totals{margin-top:3rem;padding-top:1.5rem;border-top:2px solid #111;page-break-inside:avoid;}
.ir-final-grp{display:flex;justify-content:space-between;align-items:baseline;padding:.65rem 0;border-bottom:1px solid #eee;}
.ir-final-lbl{font-size:.95rem;color:#444;font-weight:600;}
.ir-final-val{font-size:1.6rem;font-weight:900;}
.ir-final-footer{text-align:center;font-size:.78rem;color:#777;margin-top:1.25rem;padding-top:.75rem;border-top:1px dashed #ddd;}
/* History modal */
.ir-history-overlay{display:flex;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;align-items:center;justify-content:center;padding:1rem;font-family:-apple-system,sans-serif;}
.ir-history-modal{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 64px rgba(0,0,0,.3);color:#111;}
.ir-history-head{display:flex;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #eee;}
.ir-history-head h3{flex:1;margin:0;font-size:1.05rem;font-weight:800;}
.ir-history-x{background:#f5f5f5;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.9rem;}
.ir-history-body{overflow-y:auto;flex:1;padding:.5rem 1rem;}
.ir-hist-row{display:flex;align-items:center;gap:.85rem;padding:.85rem .25rem;border-bottom:1px solid #f0f0f0;}
.ir-hist-row:last-child{border-bottom:none;}
.ir-hist-date{flex:0 0 130px;font-size:.85rem;}
.ir-hist-totals{flex:1;font-size:.8rem;line-height:1.5;}
.ir-hist-verify{background:#e8f5e9;color:#2e7d32;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:.95rem;transition:background .12s;}
.ir-hist-verify:hover{background:#c8e6c9;}
/* Print styles */
@media print{
body > *:not(#insuranceReportOverlay){display:none !important;}
#insuranceReportOverlay{position:static !important;overflow:visible !important;}
.ir-topbar{display:none !important;}
.ir-table{page-break-inside:auto;}
.ir-table tr{page-break-inside:avoid;}
.ir-insurance-note{page-break-inside:avoid;}
.ir-verify{page-break-inside:avoid;background:#f9f9fb !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.ir-summary{page-break-inside:avoid;}
.ir-final-totals{page-break-inside:avoid;}
.ir-history-overlay, #insuranceHistoryModal, #insuranceSettingsModal{display:none !important;}
}
@media (max-width:720px){
.ir-summary{grid-template-columns:repeat(2,1fr);}
.ir-verify{flex-direction:column;}
.ir-verify-qr{margin:0 auto;}
.ir-table{font-size:.7rem;}
.ir-cover{width:36px;height:54px;}
.ir-cover-ph{width:36px;height:54px;}
}
@media(max-width:640px){
.kpi-row{grid-template-columns:repeat(2,1fr);}
.stats-grid{grid-template-columns:1fr;padding:1rem;}
.sbar-row{grid-template-columns:60px 1fr 36px;}
}
/* ─── VALUE HISTORY ─────────────────────────────────────────────────────── */
.val-hist-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;border-bottom:1px solid #f5f5f5;font-size:.72rem;}
.val-hist-row:last-child{border-bottom:none;}
.val-hist-date{color:var(--text-secondary);}
.val-hist-total{font-weight:700;color:var(--text-primary);}
.val-hist-evol{font-weight:700;min-width:46px;text-align:right;}
.val-hist-evol.up{color:#2e7d32;}
.val-hist-evol.down{color:#c62828;}
.val-hist-evol.neutral{color:var(--text-secondary);}
.val-kpi-main{font-size:1.6rem;font-weight:800;color:var(--primary-red);line-height:1;}
.val-kpi-sub{font-size:.75rem;color:var(--text-secondary);margin-top:.2rem;}
.val-evol-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:99px;font-size:.78rem;font-weight:700;margin-top:.4rem;}
.val-evol-badge.up{background:#e8f5e9;color:#2e7d32;}
.val-evol-badge.down{background:#ffebee;color:#c62828;}
.val-evol-badge.neutral{background:#f5f5f5;color:var(--text-secondary);}
/* ─── BATCH OVERLAY ─────────────────────────────────────────────────────── */
#batchOverlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:4000;display:none;align-items:center;justify-content:center;}
#batchOverlay.show{display:flex;}
.batch-box{background:white;border-radius:16px;padding:2rem;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.batch-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;}
.batch-track{background:#eee;border-radius:6px;height:10px;overflow:hidden;margin-bottom:.75rem;}
.batch-fill{background:var(--primary-red);height:100%;border-radius:6px;transition:width .3s;width:0%;}
.batch-total{font-size:1.6rem;font-weight:800;color:var(--primary-red);text-align:center;margin:.75rem 0;}
.batch-status{font-size:0.8rem;color:var(--text-secondary);text-align:center;min-height:1.2em;}
.batch-cancel-btn{display:block;width:100%;padding:.6rem;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;font-size:.85rem;cursor:pointer;margin-top:1rem;}
/* ─── BARCODE SCANNER ───────────────────────────────────────────────────── */
#scannerOverlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:5000;display:none;align-items:center;justify-content:center;padding:1rem;}
#scannerOverlay.show{display:flex;}
.scanner-box{background:#111;border-radius:20px;overflow:hidden;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.scanner-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;background:#1a1a1a;color:white;}
.scanner-title{font-size:.92rem;font-weight:700;display:flex;align-items:center;gap:.5rem;}
.scanner-close{background:rgba(255,255,255,.1);border:none;color:white;border-radius:8px;width:32px;height:32px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.scanner-close:hover{background:rgba(255,255,255,.2);}
.scanner-viewport{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden;}
#scannerVideo{width:100%;height:100%;object-fit:cover;}
/* Cadre de visée */
.scanner-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.scanner-frame-inner{position:relative;width:72%;height:38%;}
.scanner-corner{position:absolute;width:22px;height:22px;border-color:var(--primary-red);border-style:solid;opacity:.9;}
.scanner-corner.tl{top:0;left:0;border-width:3px 0 0 3px;border-radius:3px 0 0 0;}
.scanner-corner.tr{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 3px 0 0;}
.scanner-corner.bl{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 3px;}
.scanner-corner.br{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 3px 0;}
/* Ligne de scan animée */
.scanner-line{position:absolute;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,var(--primary-red),transparent);animation:scanLine 1.8s ease-in-out infinite;box-shadow:0 0 8px var(--primary-red);}
@keyframes scanLine{0%,100%{top:31%;opacity:1}50%{top:69%;opacity:.7}}
/* Zone résultat */
.scanner-footer{padding:.85rem 1rem;background:#1a1a1a;}
.scanner-status{color:rgba(255,255,255,.6);font-size:.8rem;text-align:center;padding:.4rem 0;}
.scanner-result-card{background:#222;border-radius:12px;padding:1rem;margin-top:.6rem;display:none;}
.scan-found{display:flex;align-items:center;gap:.75rem;}
.scan-found-badge{width:40px;height:40px;background:var(--primary-red);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem;}
.scan-found-lgy{font-size:1.3rem;font-weight:800;color:white;}
.scan-found-title{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:.1rem;}
.scan-not-found{text-align:center;color:rgba(255,255,255,.5);font-size:.82rem;padding:.25rem 0;}
.scan-multi{padding:.25rem 0;}
.scan-multi-label{color:rgba(255,255,255,.45);font-size:.72rem;margin-bottom:.5rem;}
.scan-pick-btn{display:flex;width:100%;background:#2d2d2d;border:none;color:white;border-radius:8px;padding:.55rem .8rem;margin-bottom:.4rem;cursor:pointer;align-items:center;justify-content:space-between;font-size:.82rem;transition:background .15s;}
.scan-pick-btn:hover{background:#3a3a3a;}
.scan-pick-owned{background:rgba(46,125,50,.3);color:#81c784;border-radius:4px;font-size:.68rem;padding:.15rem .4rem;font-weight:600;}
/* Bouton manuel fallback */
.scanner-manual{width:100%;padding:.65rem;background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5);border-radius:8px;font-size:.78rem;cursor:pointer;margin-top:.5rem;transition:all .2s;}
.scanner-manual:hover{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.8);}
/* Bouton scan dans la search bar */
.scan-btn{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:0 0.65rem;font-size:1rem;display:flex;align-items:center;transition:color .2s;}
.scan-btn:hover{color:var(--primary-red);}
/* ─── MODAL NAV ARROWS (sides of modal, carousel style) ──────────────── */
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:white;border:none;border-radius:50%;width:40px;height:40px;font-size:1.1rem;cursor:pointer;z-index:20;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;}
.modal-nav:hover{background:rgba(0,0,0,.75);transform:translateY(-50%) scale(1.1);}
#modalNavPrev{left:-52px;}
#modalNavNext{right:-52px;}
/* ─── MOBILE FIXES COMPLETS (≤640px) ────────────────────────────────────── */
@media(max-width:640px){
/* ── 1. Tabs scrollables — plus de flex:1 qui étrangle les labels ──────── */
.view-tabs{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
flex-wrap:nowrap;
padding:0.4rem 0.75rem 0;
gap:0.3rem;
/* ombre à droite pour indiquer le scroll */
-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%);
mask-image:linear-gradient(to right,black 85%,transparent 100%);
}
.view-tabs::-webkit-scrollbar{display:none;}
.view-tab{
flex:0 0 auto !important; /* annule flex:1 du desktop */
white-space:nowrap;
font-size:0.76rem;
padding:0.45rem 0.8rem;
border-radius:8px;
}
/* ── 2. Modal — voir MODAL v2 responsive (ligne ~1241) ── */
.form-label{font-size:0.68rem;}
#ebayPriceBtn{font-size:0.72rem;padding:0.3rem 0.5rem;}
/* ── 3. Stats — KPI 2×2 + padding compact ───────────────────────────────── */
.kpi-row{
grid-template-columns:repeat(2,1fr) !important;
padding:0.75rem 0.75rem 0 !important;
gap:0.6rem;
}
.kpi-box{padding:0.85rem 0.75rem;}
.kpi-val{font-size:1.5rem;}
.kpi-sub{font-size:0.65rem;}
.kpi-lbl{font-size:0.62rem;}
.stats-grid{
grid-template-columns:1fr !important;
padding:0.75rem !important;
gap:0.85rem;
}
.stats-card{padding:1rem 0.9rem;}
.stats-card-title{font-size:0.74rem;margin-bottom:0.7rem;}
.sbar-row{grid-template-columns:52px 1fr 36px;gap:0.35rem;margin-bottom:.35rem;}
.sbar-lbl{font-size:.68rem;}
.sbar-count{font-size:.68rem;}
.sbar-track{height:15px;}
/* ── 4. Price bar — cache le "sur X comics" trop long ───────────────────── */
#mobPricedCount{display:none;}
.mobile-stats-bar{
overflow:hidden;
white-space:nowrap;
font-size:0.82rem;
}
/* ── 5. Nav arrows — voir MODAL v2 responsive ── */
#modalNavPrev{left:4px;top:50%;transform:translateY(-50%);}
#modalNavNext{right:4px;top:50%;transform:translateY(-50%);}
.modal-nav{width:34px;height:34px;font-size:1rem;opacity:.7;}
/* ── 6. Page title + controls sur mobile ────────────────────────────────── */
.page-title{font-size:1.2rem;}
.content-header{padding:0.5rem 0.75rem 0;}
}
/* ── THEMES — 7 palettes Passion Pop (mêmes ids produit) ── */
[data-theme="pop-bordeaux"]{
--bg:#fdf6e8;
--surface:#fff9e9;
--surface-alt:#f4ead0;
--ink:#1a1208;
--ink-soft:#3d2f1a;
--muted:#6b5a42;
--line:rgba(26,18,8,.18);
--primary:#e8242c;
--primary-dark:#b01820;
--primary-soft:rgba(232,36,44,.08);
--accent:#ffc83d;
--green:#10a36f;
--orange:#d97a14;
--purple:#6c3ab0;
--blue:#1b5aa8;
--header-bg:#e8242c;
--on-header:#ffffff;
--shadow-ink:#1a1208;
}
[data-theme="crimson-web"]{
--bg:#f7f0ef;
--surface:#fdfaf9;
--surface-alt:#efe1de;
--ink:#221012;
--ink-soft:#4a2e31;
--muted:#7d6164;
--line:rgba(34,16,18,.18);
--primary:#c41824;
--primary-dark:#92121b;
--primary-soft:rgba(196,24,36,.08);
--accent:#ffc83d;
--green:#10a36f;
--orange:#d97a14;
--purple:#6c3ab0;
--blue:#1b5aa8;
--header-bg:#9e1019;
--on-header:#ffffff;
--shadow-ink:#221012;
}
[data-theme="man-of-steel"]{
--bg:#eef3f8;
--surface:#f9fbfd;
--surface-alt:#dfe9f2;
--ink:#101b26;
--ink-soft:#2e3d4c;
--muted:#5b6b7c;
--line:rgba(16,27,38,.18);
--primary:#1b5aa8;
--primary-dark:#134576;
--primary-soft:rgba(27,90,168,.08);
--accent:#ffc83d;
--green:#10a36f;
--orange:#d97a14;
--purple:#6c3ab0;
--blue:#1b5aa8;
--header-bg:#16448a;
--on-header:#ffffff;
--shadow-ink:#101b26;
}
[data-theme="mutant-academy"]{
--bg:#eef1f8;
--surface:#f9fafd;
--surface-alt:#dfe5f2;
--ink:#121a2b;
--ink-soft:#34405a;
--muted:#66718a;
--line:rgba(18,26,43,.18);
--primary:#2447a8;
--primary-dark:#1a347e;
--primary-soft:rgba(36,71,168,.09);
--accent:#ffc83d;
--green:#10a36f;
--orange:#d97a14;
--purple:#6c3ab0;
--blue:#2447a8;
--header-bg:#1a347e;
--on-header:#ffffff;
--shadow-ink:#121a2b;
}
[data-theme="golden-age"]{
--bg:#f6ecd4;
--surface:#fcf5e3;
--surface-alt:#eddfbe;
--ink:#2a1a0c;
--ink-soft:#54402a;
--muted:#82684a;
--line:rgba(42,26,12,.2);
--primary:#b3402a;
--primary-dark:#8a2f1d;
--primary-soft:rgba(179,64,42,.09);
--accent:#e0a93c;
--green:#477d36;
--orange:#c07514;
--purple:#7a4a96;
--blue:#345f8a;
--header-bg:#8a2f1d;
--on-header:#f9efd9;
--shadow-ink:#2a1a0c;
}
[data-theme="maximum-effort"]{
color-scheme:dark;
--bg:#191012;
--surface:#241719;
--surface-alt:#2e1d20;
--ink:#f5e8e6;
--ink-soft:#d8c2bf;
--muted:#9c8280;
--line:rgba(245,232,230,.2);
--primary:#ff3d47;
--primary-dark:#d92a35;
--primary-soft:rgba(255,61,71,.14);
--accent:#ffc83d;
--green:#2fbe8a;
--orange:#f0993f;
--purple:#a87add;
--blue:#5b96e0;
--header-bg:#3a0d12;
--on-header:#f5e8e6;
--shadow-ink:#000000;
}
[data-theme="dark-web"]{
color-scheme:dark;
--bg:#16120c;
--surface:#221c12;
--surface-alt:#2d2517;
--ink:#f5ead2;
--ink-soft:#d9ccb0;
--muted:#9c8f76;
--line:rgba(245,234,210,.22);
--primary:#ff4d54;
--primary-dark:#d93a41;
--primary-soft:rgba(255,77,84,.14);
--accent:#ffc83d;
--green:#2fbe8a;
--orange:#f0993f;
--purple:#a87add;
--blue:#5b96e0;
--header-bg:#2a0f12;
--on-header:#f5ead2;
--shadow-ink:#000000;
}
/* ── THEME PICKER in settings ─────────────────────────── */
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media(max-width:500px){.theme-picker{grid-template-columns:repeat(2,1fr);}}
.theme-card{cursor:pointer;border-radius:10px;overflow:hidden;border:3px solid transparent;transition:all .15s;background:var(--bg-elevated);}
.theme-card:hover{transform:scale(1.03);}
.theme-card.selected{border-color:var(--primary-red);}
.theme-preview{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:7px 7px 0 0;}
.theme-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.theme-name{padding:4px 6px 5px;font-size:.7rem;font-weight:700;text-align:center;color:var(--text-primary);font-family:-apple-system,sans-serif;}
/* ── SUPER ADMIN DASHBOARD ────────────────────────────── */
#superAdminOverlay{
position:fixed;inset:0;z-index:3100;
background:var(--bg-page);
display:none;flex-direction:column;overflow:hidden;
}
#superAdminOverlay.show{display:flex;}
.sa-topbar{
display:flex;align-items:center;justify-content:space-between;
padding:0 1.5rem;height:60px;flex-shrink:0;
background:linear-gradient(135deg,#1a0533,#0d2b5e);color:#fff;
}
.sa-back-btn{
background:rgba(255,255,255,0.15);border:none;color:#fff;
padding:0.4rem 1rem;border-radius:20px;
font-size:0.875rem;font-weight:700;cursor:pointer;
transition:background 0.15s;
}
.sa-back-btn:hover{background:rgba(255,255,255,0.28);}
.sa-topbar-title{font-size:1rem;font-weight:800;letter-spacing:.02em;}
.sa-refresh-btn{
background:rgba(255,255,255,0.15);border:none;color:#fff;
padding:0.4rem 1rem;border-radius:20px;
font-size:0.875rem;font-weight:700;cursor:pointer;
transition:background 0.15s;
}
.sa-refresh-btn:hover{background:rgba(255,255,255,0.28);}
.sa-body{
flex:1;overflow-y:auto;padding:1.5rem;
max-width:1100px;width:100%;margin:0 auto;
}
/* Global stats row */
.sa-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.8rem;}
@media(max-width:700px){.sa-stats-row{grid-template-columns:repeat(2,1fr);}}
.sa-stat-card{
background:var(--bg-surface);border:1px solid var(--border);
border-radius:14px;padding:1.1rem 1.2rem;text-align:center;
}
.sa-stat-value{font-size:1.6rem;font-weight:800;color:var(--primary-red,#ed1d24);line-height:1;}
.sa-stat-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-top:0.4rem;}
/* Users grid */
.sa-users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem;}
.sa-user-card{
background:var(--bg-surface);border:1px solid var(--border);
border-radius:16px;overflow:hidden;
transition:box-shadow 0.15s;
}
.sa-user-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.12);}
.sa-user-header{
display:flex;align-items:center;gap:0.9rem;
padding:1rem 1.2rem 0.8rem;
border-bottom:1px solid var(--border);
}
.sa-user-avatar{
width:42px;height:42px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#1a0533,#0d2b5e);
color:#fff;font-size:0.9rem;font-weight:800;
display:flex;align-items:center;justify-content:center;
}
.sa-user-info{flex:1;min-width:0;}
.sa-user-name{font-size:0.9rem;font-weight:800;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sa-user-email{font-size:0.72rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sa-plan-badge{
font-size:0.65rem;font-weight:800;padding:3px 8px;border-radius:20px;
white-space:nowrap;flex-shrink:0;
}
.plan-super{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;}
.plan-admin{background:rgba(237,29,36,0.12);color:var(--primary-red,#ed1d24);border:1px solid rgba(237,29,36,0.3);}
/* User stats grid */
.sa-user-stats{
display:grid;grid-template-columns:repeat(4,1fr);
padding:0.8rem 1.2rem;gap:0.5rem;
border-bottom:1px solid var(--border);
}
.sa-user-stat{text-align:center;}
.sa-user-stat-value{font-size:1rem;font-weight:800;color:var(--text-primary);}
.sa-user-stat-label{font-size:0.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-top:2px;}
/* Footer */
.sa-user-footer{padding:0.65rem 1.2rem; display:flex; flex-direction:column; gap:.6rem;}
.sa-user-meta{display:flex;gap:1rem;flex-wrap:wrap;}
.sa-user-meta span{font-size:0.72rem;color:var(--text-secondary);}
.sa-reset-btn{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:7px;color:#90caf9;font-size:.75rem;padding:.35rem .8rem;cursor:pointer;transition:background .15s, color .15s;align-self:flex-start;}
.sa-reset-btn:hover{background:rgba(144,202,249,.1);border-color:#90caf9;}
/* Loading / error */
.sa-loading{text-align:center;padding:3rem;color:var(--text-secondary);font-size:1rem;}
.sa-error{text-align:center;padding:3rem;color:#ef4444;font-size:0.95rem;}
/* Super admin header button */
#superAdminBtn{
background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(239,68,68,0.25));
border:1.5px solid rgba(245,158,11,0.5);
border-radius:50%;width:38px;height:38px;
padding:0;display:none;
align-items:center;justify-content:center;
font-size:1rem;cursor:pointer;
transition:transform 0.15s;flex-shrink:0;
}
#superAdminBtn:hover{transform:scale(1.1);}
/* ── SUPER ADMIN TABS ──────────────────────────────────── */
.sa-tabbar{
display:flex;gap:0;border-bottom:2px solid var(--border);
background:var(--bg-surface);flex-shrink:0;padding:0 1.5rem;
}
.sa-tab{
padding:0.75rem 1.4rem;font-size:0.82rem;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
background:none;border:none;color:var(--text-secondary);
border-bottom:3px solid transparent;margin-bottom:-2px;
transition:color 0.15s, border-color 0.15s;
}
.sa-tab.active{color:var(--primary-red,#ed1d24);border-bottom-color:var(--primary-red,#ed1d24);}
.sa-tab:hover:not(.active){color:var(--text-primary);}
/* ── DEPLOYMENT TIMELINE ───────────────────────────────── */
.deploy-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:1.4rem;flex-wrap:wrap;gap:0.8rem;
}
.deploy-header h2{font-size:1rem;font-weight:800;color:var(--text-primary);}
.deploy-add-btn{
display:flex;align-items:center;gap:6px;
padding:0.5rem 1.1rem;border-radius:20px;
background:var(--primary-red,#ed1d24);color:#fff;
border:none;font-size:0.82rem;font-weight:800;cursor:pointer;
transition:opacity 0.15s;
}
.deploy-add-btn:hover{opacity:0.88;}
/* Add form */
.deploy-form{
background:var(--bg-surface);border:1px solid var(--border);
border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.6rem;
display:none;flex-direction:column;gap:0.9rem;
}
.deploy-form.open{display:flex;}
.deploy-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
@media(max-width:600px){.deploy-form-row{grid-template-columns:1fr;}}
.deploy-form label{font-size:0.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);display:block;margin-bottom:4px;}
.deploy-input{
width:100%;padding:0.55rem 0.85rem;
border:1.5px solid var(--border);border-radius:10px;
background:var(--bg-elevated);color:var(--text-primary);
font-size:0.88rem;font-weight:600;outline:none;
transition:border-color 0.15s;box-sizing:border-box;
}
.deploy-input:focus{border-color:var(--primary-red,#ed1d24);}
.deploy-textarea{resize:vertical;min-height:70px;font-family:inherit;}
.deploy-form-actions{display:flex;gap:0.6rem;justify-content:flex-end;}
.deploy-submit-btn{
padding:0.5rem 1.2rem;border-radius:20px;
background:var(--primary-red,#ed1d24);color:#fff;
border:none;font-size:0.82rem;font-weight:800;cursor:pointer;
transition:opacity 0.15s;
}
.deploy-submit-btn:hover{opacity:0.88;}
.deploy-cancel-btn{
padding:0.5rem 1rem;border-radius:20px;
background:var(--bg-elevated);color:var(--text-secondary);
border:1px solid var(--border);font-size:0.82rem;font-weight:700;cursor:pointer;
}
/* Timeline */
.deploy-timeline{display:flex;flex-direction:column;gap:0;}
.deploy-item{
display:grid;grid-template-columns:120px 1fr;gap:0 1.4rem;
position:relative;padding-bottom:1.4rem;
}
.deploy-item:last-child{padding-bottom:0;}
/* Left: date column */
.deploy-date-col{text-align:right;padding-top:0.15rem;}
.deploy-date{font-size:0.78rem;font-weight:700;color:var(--text-secondary);}
.deploy-time{font-size:0.68rem;color:var(--text-secondary);opacity:0.7;}
/* Connector line */
.deploy-item::before{
content:'';position:absolute;
left:calc(120px + 0.7rem + 6px);top:22px;bottom:0;
width:2px;background:var(--border);
}
.deploy-item:last-child::before{display:none;}
/* Right: content */
.deploy-content-col{position:relative;padding-left:1.2rem;}
/* Dot */
.deploy-content-col::before{
content:'';position:absolute;
left:-8px;top:5px;
width:14px;height:14px;border-radius:50%;
background:var(--primary-red,#ed1d24);
border:3px solid var(--bg-page);
box-shadow:0 0 0 2px var(--primary-red,#ed1d24);
}
.deploy-version{
display:inline-block;
background:linear-gradient(135deg,var(--primary-red,#ed1d24),#b71c1c);
color:#fff;font-size:0.68rem;font-weight:800;
padding:2px 8px;border-radius:20px;margin-bottom:4px;
letter-spacing:.04em;font-family:-apple-system,sans-serif;
}
.deploy-feature{font-size:0.92rem;font-weight:800;color:var(--text-primary);margin-bottom:4px;}
.deploy-details{font-size:0.78rem;color:var(--text-secondary);line-height:1.5;}
/* ══════════════════════════════════════════════════════════
SETTINGS PAGE — Layout sidebar gauche + panel droit
Dark forcé, indépendant du thème actif.
══════════════════════════════════════════════════════════ */
#settingsOverlay{
position:fixed;inset:0;z-index:3000;
background:#0f1117 !important;
color:#e8eaf0 !important;
display:none;flex-direction:column;overflow:hidden;
}
#settingsOverlay.show{display:flex;}
/* Topbar */
#settingsOverlay .settings-topbar{
display:flex;align-items:center;justify-content:space-between;
padding:0 1.5rem;height:56px;flex-shrink:0;
background:linear-gradient(135deg,#ed1d24,#0d47a1) !important;
color:#fff !important;
}
#settingsOverlay .settings-back-btn{
background:rgba(255,255,255,0.15);border:none;color:#fff !important;
padding:0.35rem 1rem;border-radius:20px;
font-size:0.85rem;font-weight:700;cursor:pointer;transition:background 0.15s;
}
#settingsOverlay .settings-back-btn:hover{background:rgba(255,255,255,0.28);}
#settingsOverlay .settings-topbar-title{font-size:1rem;font-weight:800;letter-spacing:.02em;color:#fff !important;}
#settingsOverlay .settings-topbar-save{
background:#fff;color:#ed1d24 !important;border:none;
padding:0.35rem 1.1rem;border-radius:20px;
font-size:0.85rem;font-weight:800;cursor:pointer;transition:opacity 0.15s;
}
#settingsOverlay .settings-topbar-save:hover{opacity:0.88;}
/* ── Layout sidebar + contenu ─────────────────────────── */
#settingsOverlay .settings-layout{
flex:1;display:flex;overflow:hidden;
}
/* Sidebar gauche */
#settingsOverlay .settings-nav{
width:210px;flex-shrink:0;
background:#111425 !important;
border-right:1px solid rgba(255,255,255,.06) !important;
padding:0.75rem 0;
display:flex;flex-direction:column;gap:2px;
overflow-y:auto;
}
#settingsOverlay .settings-nav-item{
display:flex;align-items:center;gap:0.65rem;
padding:0.65rem 1.2rem;
background:none;border:none;border-left:3px solid transparent;
color:#7a8aaa !important;
font-size:0.875rem;font-weight:700;
cursor:pointer;text-align:left;width:100%;
transition:background 0.12s,color 0.12s,border-color 0.12s;
}
#settingsOverlay .settings-nav-item:hover{
background:rgba(255,255,255,.04) !important;color:#e8eaf0 !important;
}
#settingsOverlay .settings-nav-item.active{
background:rgba(237,29,36,.1) !important;
color:#e8eaf0 !important;
border-left-color:#ed1d24 !important;
}
#settingsOverlay .settings-nav-item.danger-nav{color:#ef9a9a !important;}
#settingsOverlay .settings-nav-item.danger-nav.active{
background:rgba(239,83,80,.12) !important;
border-left-color:#ef5350 !important;
}
#settingsOverlay .settings-nav-sep{
height:1px;background:rgba(255,255,255,.06) !important;
margin:0.5rem 1.2rem;
}
/* Panel droit */
#settingsOverlay .settings-content{
flex:1;overflow-y:auto;padding:1.5rem;
background:#0f1117 !important;
}
#settingsOverlay .settings-panel{
display:none;flex-direction:column;gap:1rem;
max-width:680px;
}
#settingsOverlay .settings-panel.active{display:flex;}
/* Section title dans panel */
#settingsOverlay .settings-panel-title{
font-size:1.05rem;font-weight:800;color:#e8eaf0 !important;
margin-bottom:0.25rem;
padding-bottom:0.75rem;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
/* Blocs dans panel */
#settingsOverlay .settings-block{
background:#1a1d2e !important;
border-radius:12px;
border:1px solid rgba(255,255,255,.08) !important;
overflow:hidden;
}
/* Rows */
#settingsOverlay .settings-row{
display:flex;align-items:flex-start;gap:1rem;
padding:0.9rem 1.2rem;
border-bottom:1px solid rgba(255,255,255,.06) !important;
}
#settingsOverlay .settings-row:last-child{border-bottom:none !important;}
#settingsOverlay .settings-row-label{
font-size:0.7rem;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:#7a8aaa !important;
min-width:120px;padding-top:0.35rem;flex-shrink:0;
}
#settingsOverlay .settings-row-content{flex:1;min-width:0;color:#e8eaf0 !important;}
/* Inputs */
#settingsOverlay .settings-input{
width:100%;padding:0.55rem 0.8rem;
border:1.5px solid rgba(255,255,255,.12) !important;border-radius:8px;
background:rgba(255,255,255,.05) !important;
color:#e8eaf0 !important;
font-size:0.88rem;font-weight:600;outline:none;
transition:border-color 0.15s;box-sizing:border-box;
}
#settingsOverlay .settings-input:focus{border-color:#ed1d24 !important;}
#settingsOverlay .settings-input::placeholder{color:#5a6480 !important;}
/* Avatar */
.avatar-wrap{display:flex;align-items:center;gap:1rem;margin-bottom:0;}
.avatar-circle{
width:64px;height:64px;border-radius:50%;
background:#ed1d24;color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:1.5rem;font-weight:800;cursor:pointer;
overflow:hidden;flex-shrink:0;
border:3px solid rgba(255,255,255,0.3);
transition:transform 0.15s;
}
.avatar-circle:hover{transform:scale(1.07);}
.avatar-circle img{width:100%;height:100%;object-fit:cover;}
#settingsOverlay .avatar-hint{font-size:0.75rem;color:#7a8aaa !important;line-height:1.4;}
#settingsOverlay .upload-limit-hint{font-size:0.68rem;color:#5a6480 !important;margin-top:2px;}
/* Emoji picker */
.emoji-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:0.3rem;}
#settingsOverlay .emoji-btn{
width:34px;height:34px;border-radius:8px;border:2px solid transparent;
background:rgba(255,255,255,.06) !important;
font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:border-color 0.12s,transform 0.1s;
}
#settingsOverlay .emoji-btn:hover{transform:scale(1.15);}
#settingsOverlay .emoji-btn.selected{border-color:#ed1d24 !important;background:rgba(237,29,36,.15) !important;}
/* Color swatches */
.color-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:0.3rem;}
.color-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform 0.12s,border-color 0.12s;}
.color-swatch:hover{transform:scale(1.15);}
#settingsOverlay .color-swatch.selected{border-color:#e8eaf0 !important;}
/* Pills */
.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:0.3rem;}
#settingsOverlay .pill-btn{
padding:4px 12px;border-radius:20px;
border:1.5px solid rgba(255,255,255,.12) !important;
background:rgba(255,255,255,.05) !important;
color:#e8eaf0 !important;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.12s;
}
#settingsOverlay .pill-btn.selected{background:#ed1d24 !important;color:#fff !important;border-color:#ed1d24 !important;}
/* Language picker */
.lang-grid{display:flex;flex-wrap:wrap;gap:6px;}
#settingsOverlay .lang-btn{
display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;
border:1.5px solid rgba(255,255,255,.12) !important;
background:rgba(255,255,255,.05) !important;
color:#e8eaf0 !important;font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.12s;
}
#settingsOverlay .lang-btn.selected{background:#ed1d24 !important;color:#fff !important;border-color:#ed1d24 !important;}
#settingsOverlay .lang-btn:hover:not(.selected){border-color:#ed1d24 !important;}
/* Danger zone button */
#settingsOverlay .danger-zone-btn{
background:rgba(239,83,80,.12) !important;color:#ef5350 !important;
border:1px solid rgba(239,83,80,.35) !important;
border-radius:8px;padding:0.5rem 1.1rem;
font-size:0.85rem;font-weight:700;cursor:pointer;transition:background 0.15s;
}
#settingsOverlay .danger-zone-btn:hover{background:rgba(239,83,80,.22) !important;}
/* Action buttons */
#settingsOverlay .share-gen-btn,#settingsOverlay .settings-action-btn{
background:linear-gradient(135deg,#ed1d24,#0d47a1);
color:#fff !important;border:none;border-radius:8px;
padding:0.5rem 1.2rem;font-size:0.85rem;font-weight:700;cursor:pointer;transition:opacity 0.15s;
}
#settingsOverlay .share-gen-btn:hover,#settingsOverlay .settings-action-btn:hover{opacity:0.88;}
#settingsOverlay .share-link-input{color:#b0b8d0 !important;}
#settingsOverlay #changePasswordMsg{color:#e8eaf0 !important;}
#settingsOverlay strong{color:#e8eaf0 !important;}
/* Header avatar button */
#settingsBtn{
background:rgba(255,255,255,0.14);
border:1.5px solid rgba(255,255,255,0.28);
border-radius:50%;width:38px;height:38px;
padding:0;overflow:hidden;display:none;
align-items:center;justify-content:center;
font-size:0.9rem;font-weight:800;color:#fff;cursor:pointer;
transition:transform 0.15s;flex-shrink:0;
}
#settingsBtn:hover{transform:scale(1.1);}
#settingsBtn img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* ── Settings responsive mobile ──────────────────────── */
@media(max-width:640px){
#settingsOverlay .settings-layout{flex-direction:column;}
#settingsOverlay .settings-nav{
width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;
height:auto;border-right:none !important;
border-bottom:none !important;
padding:0.5rem 0.5rem 0.35rem;gap:0.35rem;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
background:rgba(0,0,0,.15);
}
#settingsOverlay .settings-nav::-webkit-scrollbar{display:none;}
#settingsOverlay .settings-nav-item{
border-left:none !important;border-bottom:none !important;
padding:0.45rem 0.75rem;font-size:0.72rem;flex-shrink:0;white-space:nowrap;
border-radius:8px;background:rgba(255,255,255,.06);
}
#settingsOverlay .settings-nav-item.active{
border-left-color:transparent !important;
background:var(--primary-red,#ed1d24) !important;color:#fff !important;
}
#settingsOverlay .settings-nav-sep{display:none;}
#settingsOverlay .settings-content{padding:1rem 0.75rem;}
}
/* ── Share Banner (read-only mode) ─────────────────────── */
#shareBanner {
display: none;
background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
border-bottom: 2px solid var(--accent, #e62429);
padding: .6rem 1.2rem;
text-align: center;
font-size: .85rem;
color: #e8eaf0;
position: sticky;
top: 0;
z-index: 100;
gap: .6rem;
align-items: center;
justify-content: center;
}
#shareBanner.active { display: flex; }
#shareBannerName { font-weight: 700; color: var(--accent, #e62429); }
.share-banner-badge {
background: var(--accent, #e62429);
color: #fff;
border-radius: 99px;
padding: .1rem .55rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
}
/* ── Share Link Section (in Settings) ───────────────────── */
.share-link-box {
display: flex;
gap: .5rem;
align-items: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
padding: .5rem .7rem;
margin-top: .5rem;
}
.share-link-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #b0b8d0;
font-size: .82rem;
font-family: monospace;
min-width: 0;
cursor: text;
}
.share-copy-btn {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 6px;
color: #e8eaf0;
padding: .3rem .7rem;
cursor: pointer;
font-size: .8rem;
white-space: nowrap;
transition: background .15s;
}
.share-copy-btn:hover { background: rgba(255,255,255,.15); }
.share-meta {
font-size: .78rem;
color: #7a8aaa;
margin-top: .4rem;
}
.share-actions {
display: flex;
gap: .6rem;
margin-top: .8rem;
flex-wrap: wrap;
}
.share-gen-btn {
background: var(--accent, #e62429);
color: #fff;
border: none;
border-radius: 8px;
padding: .55rem 1.1rem;
cursor: pointer;
font-size: .85rem;
font-weight: 600;
transition: opacity .15s;
}
.share-gen-btn:hover { opacity: .85; }
.share-regen-btn {
background: rgba(255,255,255,.08);
color: #e8eaf0;
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px;
padding: .55rem 1.1rem;
cursor: pointer;
font-size: .85rem;
transition: background .15s;
}
.share-regen-btn:hover { background: rgba(255,255,255,.14); }
.share-revoke-btn {
background: transparent;
color: #ef5350;
border: 1px solid #ef5350;
border-radius: 8px;
padding: .55rem 1.1rem;
cursor: pointer;
font-size: .85rem;
transition: background .15s;
}
.share-revoke-btn:hover { background: rgba(239,83,80,.1); }
/* ── Forgot / Reset Password ────────────────────────────── */
#forgotScreen, #resetScreen {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg, #0f1117);
padding: 1.5rem;
}
#forgotScreen.active, #resetScreen.active { display: flex; }
.auth-card {
background: var(--card-bg, #1a1d2e);
border-radius: 16px;
padding: 2rem 2.2rem;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.auth-card h2 {
margin: 0;
font-size: 1.3rem;
color: #e8eaf0;
text-align: center;
}
.auth-card p {
margin: 0;
font-size: .85rem;
color: #7a8aaa;
text-align: center;
line-height: 1.5;
}
.auth-card .form-group {
display: flex;
flex-direction: column;
gap: .4rem;
}
.auth-card label {
font-size: .8rem;
color: #9aa0b8;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: #e8eaf0;
padding: .65rem .9rem;
font-size: .95rem;
outline: none;
transition: border-color .2s;
}
.auth-card input:focus {
border-color: var(--accent, #e62429);
}
.auth-card .auth-btn {
background: var(--accent, #e62429);
color: #fff;
border: none;
border-radius: 8px;
padding: .7rem;
font-size: .95rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s;
width: 100%;
}
.auth-card .auth-btn:hover { opacity: .88; }
.auth-card .auth-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-back-link {
text-align: center;
font-size: .83rem;
color: #7a8aaa;
}
.auth-back-link a {
color: var(--accent, #e62429);
text-decoration: none;
cursor: pointer;
}
.auth-back-link a:hover { text-decoration: underline; }
.auth-msg {
font-size: .85rem;
text-align: center;
padding: .5rem .8rem;
border-radius: 6px;
display: none;
}
.auth-msg.success { background: rgba(102,187,106,.15); color: #66bb6a; display: block; }
.auth-msg.error { background: rgba(239,83,80,.15); color: #ef5350; display: block; }
/* ── Danger Zone (settings) ─────────────────────────────── */
.danger-zone-btn {
background: transparent;
border: 1px solid #ef5350;
color: #ef5350;
border-radius: 8px;
padding: .6rem 1.2rem;
cursor: pointer;
font-size: .85rem;
font-weight: 600;
transition: background .15s;
}
.danger-zone-btn:hover { background: rgba(239,83,80,.1); }
/* ── Admin delete button ─────────────────────────────────── */
.sa-delete-btn {
background: transparent;
border: 1px solid rgba(239,83,80,.4);
border-radius: 7px;
color: #ef5350;
font-size: .75rem;
padding: .35rem .8rem;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.sa-delete-btn:hover { background: rgba(239,83,80,.1); border-color: #ef5350; }
/* ══════════════════════════════════════════════════════════
BUG REPORT — Bouton flottant + Modal
══════════════════════════════════════════════════════════ */
#bugReportBtn {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 10000;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #ed1d24, #c0000a);
color: #fff;
border: none;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 4px 16px rgba(237,29,36,.5);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s, box-shadow 0.15s;
}
#bugReportBtn:hover {
transform: scale(1.12);
box-shadow: 0 6px 24px rgba(237,29,36,.7);
}
#bugReportModal {
position: fixed;
inset: 0;
z-index: 10001;
background: rgba(0,0,0,.65);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
#bugReportModal.show { display: flex; }
.bug-modal-box {
background: #1a1d2e !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 16px;
width: 100%;
max-width: 500px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.6);
color: #e8eaf0 !important;
}
.bug-modal-header {
background: linear-gradient(135deg, #ed1d24, #0d47a1);
padding: 1rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.bug-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.bug-modal-close {
background: rgba(255,255,255,.2);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.bug-modal-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; background:#1a1d2e !important; }
.bug-modal-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #7a8aaa !important;
margin-bottom: 0.35rem;
}
.bug-modal-input, .bug-modal-textarea {
width: 100%;
background: rgba(255,255,255,.06) !important;
border: 1.5px solid rgba(255,255,255,.12) !important;
border-radius: 8px;
color: #e8eaf0 !important;
padding: 0.6rem 0.85rem;
font-size: 0.9rem;
font-family: inherit;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.bug-modal-input::placeholder, .bug-modal-textarea::placeholder { color: #5a6480 !important; }
.bug-modal-input:focus, .bug-modal-textarea:focus { border-color: #ed1d24 !important; }
.bug-modal-textarea { resize: vertical; min-height: 90px; }
.bug-img-upload-label {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255,255,255,.05) !important;
border: 1.5px dashed rgba(255,255,255,.15) !important;
border-radius: 8px;
padding: 0.6rem 1rem;
cursor: pointer;
color: #7a8aaa !important;
font-size: 0.85rem;
transition: border-color 0.15s;
}
.bug-img-upload-label:hover { border-color: #ed1d24; color: #e8eaf0; }
.bug-img-preview {
width: 100%;
max-height: 140px;
object-fit: cover;
border-radius: 6px;
display: none;
margin-top: 0.4rem;
}
.bug-modal-submit {
background: linear-gradient(135deg, #ed1d24, #0d47a1);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.75rem;
font-size: 0.95rem;
font-weight: 800;
cursor: pointer;
width: 100%;
transition: opacity 0.15s;
}
.bug-modal-submit:hover { opacity: 0.88; }
.bug-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
/* Type selector */
.bug-type-btn {
flex: 1;
padding: 0.5rem;
border-radius: 8px;
border: 2px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.05) !important;
color: #e8eaf0 !important;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.bug-type-btn.active {
border-color: #ed1d24 !important;
background: rgba(237,29,36,.15) !important;
color: #e8eaf0 !important;
}
.bug-type-btn:hover:not(.active) { border-color: rgba(255,255,255,.25) !important; color: #e8eaf0 !important; }
.bug-modal-msg { font-size: 0.82rem; text-align: center; }
/* ── Super Admin — Bugs Tab ──────────────────────────────── */
.sa-bug-card {
background: #1e2235;
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
margin: 0 1rem 1rem;
overflow: hidden;
transition: border-color 0.15s;
}
.sa-bug-card:hover { border-color: rgba(255,255,255,.15); }
.sa-bug-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
cursor: pointer;
user-select: none;
}
.sa-bug-status {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 99px;
flex-shrink: 0;
}
.sa-bug-status.new { background: rgba(33,150,243,.2); color: #90caf9; }
.sa-bug-status.in_progress{ background: rgba(255,167,38,.2); color: #ffa726; }
.sa-bug-status.treated { background: rgba(102,187,106,.2); color: #66bb6a; }
.sa-bug-status.ignored { background: rgba(120,120,120,.2); color: #9e9e9e; }
.sa-bug-title-wrap { flex: 1; min-width: 0; }
.sa-bug-title { font-weight: 700; color: #e8eaf0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-bug-meta { font-size: 0.72rem; color: #7a8aaa; margin-top: 2px; }
.sa-bug-chevron { color: #5a6480; font-size: 0.8rem; flex-shrink: 0; transition: transform 0.2s; }
.sa-bug-card.open .sa-bug-chevron { transform: rotate(90deg); }
.sa-bug-body {
display: none;
padding: 0 1.1rem 1.1rem;
border-top: 1px solid rgba(255,255,255,.06);
}
.sa-bug-card.open .sa-bug-body { display: block; }
.sa-bug-content {
background: rgba(255,255,255,.04);
border-radius: 8px;
padding: 0.75rem;
color: #b0b8d0;
font-size: 0.85rem;
line-height: 1.6;
margin: 0.8rem 0;
white-space: pre-wrap;
}
.sa-bug-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 0.8rem; cursor: pointer; }
.sa-bug-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-top: 0.8rem; }
.sa-bug-status-select {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 7px;
color: #e8eaf0;
padding: 0.4rem 0.65rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.sa-bug-reply-area {
width: 100%;
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 8px;
color: #e8eaf0;
padding: 0.6rem;
font-size: 0.85rem;
font-family: inherit;
resize: vertical;
min-height: 60px;
box-sizing: border-box;
outline: none;
margin-top: 0.6rem;
transition: border-color 0.15s;
}
.sa-bug-reply-area:focus { border-color: #ed1d24; }
.sa-bug-save-btn {
background: linear-gradient(135deg,#ed1d24,#0d47a1);
color: #fff;
border: none;
border-radius: 7px;
padding: 0.45rem 1rem;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.sa-bug-save-btn:hover { opacity: 0.88; }
.sa-bug-send-btn {
background: rgba(102,187,106,.15);
color: #66bb6a;
border: 1px solid rgba(102,187,106,.3);
border-radius: 7px;
padding: 0.45rem 1rem;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.sa-bug-send-btn:hover { background: rgba(102,187,106,.25); }
.sa-bug-existing-reply {
background: rgba(102,187,106,.08);
border: 1px solid rgba(102,187,106,.2);
border-radius: 8px;
padding: 0.65rem;
color: #a5d6a7;
font-size: 0.83rem;
margin-top: 0.6rem;
white-space: pre-wrap;
}
.sa-bugs-toolbar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.sa-bugs-filter-btn {
padding: 5px 14px;
border-radius: 99px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: #7a8aaa;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: all 0.12s;
}
.sa-bugs-filter-btn.active { background: #ed1d24; color: #fff; border-color: #ed1d24; }
.sa-bugs-empty {
text-align: center;
color: #5a6480;
padding: 3rem 1rem;
font-size: 0.9rem;
}
/* ── Footer ──────────────────────────────────────────────── */
#appFooter {
background: var(--bg-surface, #1a1d2e);
border-top: 1px solid var(--border, rgba(255,255,255,.08));
padding: 1rem 1.5rem;
text-align: center;
font-size: .75rem;
color: #5a6480;
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
#appFooter a {
color: #7a8aaa;
text-decoration: none;
cursor: pointer;
transition: color .15s;
}
#appFooter a:hover { color: var(--accent, #e62429); }
#appFooter .footer-sep { color: #3a4060; }
/* ── Legal Modal ─────────────────────────────────────────── */
#legalModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 1rem;
}
#legalModal.active { display: flex; }
.legal-panel {
background: #1a1d2e;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
width: 100%;
max-width: 680px;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.legal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.legal-header h2 { margin: 0; font-size: 1.1rem; color: #e8eaf0; }
.legal-close {
background: transparent;
border: none;
color: #7a8aaa;
font-size: 1.4rem;
cursor: pointer;
line-height: 1;
padding: .2rem .4rem;
border-radius: 6px;
transition: background .15s;
}
.legal-close:hover { background: rgba(255,255,255,.08); color: #e8eaf0; }
.legal-body {
overflow-y: auto;
padding: 1.5rem;
color: #b0b8d0;
font-size: .88rem;
line-height: 1.7;
}
.legal-body h3 { color: #e8eaf0; font-size: .95rem; margin: 1.4rem 0 .4rem; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body ul { padding-left: 1.2rem; margin: .4rem 0; }
.legal-body li { margin-bottom: .3rem; }
.legal-body a { color: var(--accent, #e62429); }
.legal-tabs {
display: flex;
gap: .4rem;
padding: .8rem 1.5rem 0;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.legal-tab {
background: transparent;
border: none;
color: #7a8aaa;
font-size: .82rem;
padding: .4rem .9rem .65rem;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s;
}
.legal-tab.active { color: #e8eaf0; border-bottom-color: var(--accent, #e62429); }
/* ── Delete account confirm modal ────────────────────────── */
#deleteAccountModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 1rem;
}
#deleteAccountModal.active { display: flex; }
.delete-modal-panel {
background: #1a1d2e;
border: 1px solid #ef5350;
border-radius: 16px;
width: 100%;
max-width: 420px;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.delete-modal-panel h2 { margin: 0; color: #ef5350; font-size: 1.1rem; }
.delete-modal-panel p { margin: 0; color: #b0b8d0; font-size: .88rem; line-height: 1.6; }
.delete-modal-panel input {
background: rgba(239,83,80,.07);
border: 1px solid rgba(239,83,80,.4);
border-radius: 8px;
color: #e8eaf0;
padding: .6rem .9rem;
font-size: .95rem;
outline: none;
width: 100%;
box-sizing: border-box;
}
.delete-modal-panel input:focus { border-color: #ef5350; }
.delete-modal-actions { display: flex; gap: .7rem; }
.delete-confirm-btn {
background: #ef5350;
color: #fff;
border: none;
border-radius: 8px;
padding: .6rem 1.2rem;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
flex: 1;
transition: opacity .15s;
}
.delete-confirm-btn:hover { opacity: .85; }
.delete-confirm-btn:disabled { opacity: .4; cursor: not-allowed; }
.delete-cancel-btn {
background: rgba(255,255,255,.06);
color: #e8eaf0;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
padding: .6rem 1.2rem;
font-size: .88rem;
cursor: pointer;
flex: 1;
}
/* ── SA User Management ──────────────────────────────────── */
.sa-topbar-actions {
display: flex;
gap: .6rem;
align-items: center;
}
.sa-create-btn {
background: var(--accent, #e62429);
color: #fff;
border: none;
border-radius: 8px;
padding: .5rem 1rem;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s;
white-space: nowrap;
}
.sa-create-btn:hover { opacity: .85; }
.sa-search-bar {
display: flex;
gap: .6rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
align-items: center;
}
.sa-search-input {
flex: 1;
min-width: 180px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: #e8eaf0;
padding: .5rem .9rem;
font-size: .85rem;
outline: none;
transition: border-color .2s;
}
.sa-search-input:focus { border-color: var(--accent, #e62429); }
.sa-filter-select {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: #e8eaf0;
padding: .5rem .8rem;
font-size: .82rem;
outline: none;
cursor: pointer;
}
.sa-filter-select option { background: #1a1d2e; }
.sa-suspended-badge {
font-size: .65rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 20px;
background: rgba(239,83,80,.2);
color: #ef5350;
border: 1px solid rgba(239,83,80,.4);
white-space: nowrap;
flex-shrink: 0;
}
.sa-user-card.suspended {
opacity: .65;
border-color: rgba(239,83,80,.3);
}
.sa-suspend-btn {
background: transparent;
border: 1px solid rgba(255,165,0,.4);
border-radius: 7px;
color: #ffa726;
font-size: .75rem;
padding: .35rem .8rem;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.sa-suspend-btn:hover { background: rgba(255,167,38,.1); }
.sa-activate-btn {
background: transparent;
border: 1px solid rgba(102,187,106,.4);
border-radius: 7px;
color: #66bb6a;
font-size: .75rem;
padding: .35rem .8rem;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.sa-activate-btn:hover { background: rgba(102,187,106,.1); }
.sa-edit-btn {
background: transparent;
border: 1px solid rgba(255,255,255,.2);
border-radius: 7px;
color: #e8eaf0;
font-size: .75rem;
padding: .35rem .8rem;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.sa-edit-btn:hover { background: rgba(255,255,255,.08); }
/* ── SA Modals (create/edit user) ───────────────────────── */
#saCreateModal, #saEditModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 1rem;
}
#saCreateModal.active, #saEditModal.active { display: flex; }
.sa-modal-panel {
background: #1a1d2e;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
width: 100%;
max-width: 460px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sa-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.sa-modal-header h2 { margin: 0; font-size: 1rem; color: #e8eaf0; }
.sa-modal-close {
background: transparent; border: none; color: #7a8aaa;
font-size: 1.3rem; cursor: pointer; padding: .2rem .4rem;
border-radius: 6px; transition: background .15s; line-height: 1;
}
.sa-modal-close:hover { background: rgba(255,255,255,.08); color: #e8eaf0; }
.sa-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.sa-modal-field {
display: flex;
flex-direction: column;
gap: .4rem;
}
.sa-modal-field label {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #9aa0b8;
}
.sa-modal-field input,
.sa-modal-field select {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: #e8eaf0;
padding: .6rem .9rem;
font-size: .9rem;
outline: none;
transition: border-color .2s;
}
.sa-modal-field input:focus,
.sa-modal-field select:focus { border-color: var(--accent, #e62429); }
.sa-modal-field select option { background: #1a1d2e; }
.sa-modal-field .field-hint {
font-size: .75rem;
color: #5a6480;
}
.sa-modal-msg {
font-size: .82rem;
padding: .5rem .8rem;
border-radius: 6px;
display: none;
}
.sa-modal-msg.success { background: rgba(102,187,106,.15); color: #66bb6a; display: block; }
.sa-modal-msg.error { background: rgba(239,83,80,.15); color: #ef5350; display: block; }
.sa-modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(255,255,255,.08);
display: flex;
gap: .6rem;
justify-content: flex-end;
}
.sa-modal-save {
background: var(--accent, #e62429);
color: #fff;
border: none;
border-radius: 8px;
padding: .6rem 1.4rem;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s;
}
.sa-modal-save:hover { opacity: .85; }
.sa-modal-save:disabled { opacity: .5; cursor: not-allowed; }
.sa-modal-cancel {
background: rgba(255,255,255,.06);
color: #e8eaf0;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
padding: .6rem 1.2rem;
font-size: .88rem;
cursor: pointer;
}
/* ── Subscription / plan badges ─────────────────────────── */
.plan-trial { background:rgba(255,167,38,.2); color:#ffa726; border:1px solid rgba(255,167,38,.4); }
.plan-expired { background:rgba(239,83,80,.15); color:#ef5350; border:1px solid rgba(239,83,80,.3); }
.plan-premium { background:rgba(102,187,106,.15);color:#66bb6a; border:1px solid rgba(102,187,106,.3); }
.plan-expiry-hint { font-size:.68rem; color:#ffa726; margin-top:2px; }
/* ── User card: notes + quota ────────────────────────────── */
.sa-user-notes {
font-size: .73rem;
color: #7a8aaa;
font-style: italic;
padding: .3rem 1.2rem .1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sa-quota-bar-wrap {
padding: .3rem 1.2rem .6rem;
display: flex;
flex-direction: column;
gap: 3px;
}
.sa-quota-label { font-size: .68rem; color: #7a8aaa; display: flex; justify-content: space-between; }
.sa-quota-bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.sa-quota-fill { height: 100%; border-radius: 99px; background: var(--accent,#e62429); transition: width .3s; }
.sa-quota-fill.warn { background: #ffa726; }
.sa-quota-fill.over { background: #ef5350; }
.sa-last-ip { font-size: .68rem; color: #5a6480; padding: 0 1.2rem .5rem; }
.sa-user-activity { font-size: .72rem; color: var(--mcc-ink, #1a1208); opacity: .78; padding: .35rem 1.2rem .45rem; border-top: 1px dashed rgba(0,0,0,.08); }
/* ── SA topbar with all action buttons ───────────────────── */
.sa-topbar-left { display:flex; align-items:center; gap:.8rem; }
.sa-topbar-right { display:flex; align-items:center; gap:.5rem; }
.sa-export-btn {
background: transparent;
border: 1px solid rgba(144,202,249,.4);
border-radius: 7px;
color: #90caf9;
font-size: .78rem;
padding: .4rem .8rem;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.sa-export-btn:hover { background: rgba(144,202,249,.1); }
.sa-broadcast-btn {
background: transparent;
border: 1px solid rgba(255,167,38,.4);
border-radius: 7px;
color: #ffa726;
font-size: .78rem;
padding: .4rem .8rem;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.sa-broadcast-btn:hover { background: rgba(255,167,38,.1); }
/* ── Pagination ──────────────────────────────────────────── */
.sa-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 1.2rem 0 .5rem;
flex-wrap: wrap;
}
.sa-page-btn {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 7px;
color: #e8eaf0;
font-size: .82rem;
padding: .35rem .75rem;
cursor: pointer;
transition: background .15s;
min-width: 36px;
text-align: center;
}
.sa-page-btn:hover { background: rgba(255,255,255,.12); }
.sa-page-btn.active { background: var(--accent,#e62429); border-color: var(--accent,#e62429); font-weight: 700; }
.sa-page-btn:disabled { opacity: .3; cursor: not-allowed; }
.sa-page-info { font-size: .78rem; color: #7a8aaa; }
/* ── Broadcast modal ─────────────────────────────────────── */
#saBroadcastModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 1rem;
}
#saBroadcastModal.active { display: flex; }
/* ─── MILESTONES / FAITS MARQUANTS ──────────────────────────────────────── */
#milestonesContainer{padding:1.5rem 1rem;overflow-y:auto;max-height:calc(100vh - 120px);}
.ms-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem;}
.ms-title{font-family:'Oswald',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text-primary);}
.ms-subtitle{font-size:.8rem;color:var(--text-secondary);margin-top:.15rem;}
.ms-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem;}
.ms-filter-btn{padding:.3rem .75rem;border-radius:99px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;}
.ms-filter-btn:hover{border-color:var(--primary-red);color:var(--primary-red);}
.ms-filter-btn.active{background:var(--primary-red);border-color:var(--primary-red);color:#fff;}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.ms-card{background:var(--bg-card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1.5px solid var(--border);cursor:pointer;transition:transform .15s,box-shadow .15s;}
.ms-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.ms-card-top{display:flex;gap:.85rem;padding:.85rem .9rem .65rem;}
.ms-cover{width:62px;height:88px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--cover-gradient);background-image:var(--cover-svg);background-size:cover;}
.ms-cover-ph{width:62px;height:88px;border-radius:7px;flex-shrink:0;background:var(--cover-gradient);background-image:var(--cover-svg);background-size:cover;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;}
.ms-cover-num{font-family:'Oswald',sans-serif;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.9);}
.ms-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;}
.ms-cat-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:99px;font-size:.68rem;font-weight:700;width:fit-content;margin-bottom:.35rem;}
.ms-cat-first_app{background:#e3f2fd;color:#1565c0;}
.ms-cat-death{background:#ffebee;color:#b71c1c;}
.ms-cat-costume{background:#f3e5f5;color:#6a1b9a;}
.ms-cat-milestone{background:#fff8e1;color:#e65100;}
.ms-cat-arc{background:#e8f5e9;color:#2e7d32;}
.ms-issue{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text-primary);line-height:1;}
.ms-date{font-size:.72rem;color:var(--text-secondary);margin-top:.1rem;}
.ms-owned-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:.4rem;vertical-align:middle;}
.ms-owned-dot.owned{background:#43a047;}
.ms-owned-dot.missing{background:#e0e0e0;}
.ms-significance{padding:0 .9rem .55rem;font-size:.82rem;font-weight:700;color:var(--text-primary);line-height:1.35;}
.ms-creators{padding:0 .9rem .75rem;font-size:.73rem;color:var(--text-secondary);line-height:1.4;}
.ms-story{padding:0 .9rem;font-size:.73rem;font-style:italic;color:var(--text-muted);border-top:1px solid var(--border);padding-top:.5rem;padding-bottom:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-card{background:var(--bg-card);border-color:var(--border);}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-cat-first_app{background:#0d2a42;color:#64b5f6;}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-cat-death{background:#3b0000;color:#ef9a9a;}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-cat-costume{background:#2a0a3d;color:#ce93d8;}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-cat-milestone{background:#3d2200;color:#ffb74d;}
:is([data-theme="dark-web"],[data-theme="maximum-effort"]) .ms-cat-arc{background:#0a2e12;color:#81c784;}
@media(max-width:640px){
.ms-grid{grid-template-columns:1fr;}
.ms-header{margin-bottom:.75rem;}
}
/* ── SERIES DELETE BUTTON ───────────────────────────────── */
.series-del-btn{display:none;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:rgba(255,60,60,.15);color:#ff6b6b;border-radius:4px;cursor:pointer;font-size:.7rem;padding:0;flex-shrink:0;transition:.12s;}
.series-del-btn:hover{background:rgba(255,60,60,.35);color:#fff;}
.coll-item:hover .series-del-btn{display:inline-flex;}
/* ── SERIES CHIPS BAR ────────────────────────────────────── */
.series-chips-bar{display:flex;gap:.4rem;flex-wrap:wrap;padding:.4rem 0 .5rem;margin-bottom:.35rem;border-bottom:1px solid var(--border,rgba(255,255,255,.07));}
.series-chip{font-size:.72rem;padding:.28rem .7rem;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text-secondary,#bbb);cursor:pointer;white-space:nowrap;transition:.12s;flex-shrink:0;}
.series-chip:hover{background:rgba(255,255,255,.08);}
.series-chip.active{background:var(--accent,#e62429);border-color:var(--accent,#e62429);color:#fff;font-weight:600;}
.series-chip.loading{opacity:.5;cursor:default;}
/* ── SERIES SECTION ───────────────────────────────────────── */
.series-section{padding:.5rem .75rem .25rem;}
.series-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem;}
.series-title{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#888);}
.series-list{display:flex;flex-direction:column;gap:1px;max-height:260px;overflow-y:auto;}
.series-list::-webkit-scrollbar{width:3px}
.series-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
/* Series view — container */
#seriesContainer{display:none;padding:0 .5rem 2rem;}
.sv-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;}
.sv-meta{flex:1;}
.sv-title{font-size:1.25rem;font-weight:800;margin:0 0 .15rem;}
.sv-sub{font-size:.78rem;color:var(--text-muted,#888);margin-bottom:.5rem;}
.sv-progress-bar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;max-width:260px;}
.sv-progress-fill{height:100%;background:var(--accent,#e62429);border-radius:3px;transition:width .3s;}
.sv-progress-label{font-size:.72rem;color:var(--text-muted,#888);margin-top:.2rem;}
.sv-actions{display:flex;gap:.5rem;flex-shrink:0;}
.sv-back-btn{font-size:.72rem;padding:.3rem .7rem;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text-muted,#888);cursor:pointer;}
.sv-back-btn:hover{background:rgba(255,255,255,.08);}
.sv-remove-btn{font-size:.72rem;padding:.3rem .7rem;border-radius:6px;border:1px solid rgba(220,50,50,.4);background:transparent;color:#ef9a9a;cursor:pointer;}
.sv-remove-btn:hover{background:rgba(220,50,50,.1);}
/* Filter tabs */
.sv-tabs{display:flex;gap:.35rem;margin-bottom:.75rem;}
.sv-tab{font-size:.75rem;padding:.3rem .8rem;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text-muted,#888);cursor:pointer;transition:.15s;}
.sv-tab.active{background:var(--accent,#e62429);color:#fff;border-color:var(--accent,#e62429);}
/* Issue grid */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;}
.sv-card{border-radius:10px;padding:.75rem;background:var(--bg-surface,#1e2030);border:1px solid var(--border,rgba(255,255,255,.07));cursor:pointer;transition:.15s;position:relative;}
.sv-card:hover{border-color:var(--accent,#e62429);transform:translateY(-1px);}
.sv-card.owned{border-color:rgba(100,200,100,.35);background:rgba(100,200,100,.04);}
.sv-card-num{font-size:.8rem;font-weight:800;color:var(--accent,#e62429);margin-bottom:.15rem;}
.sv-card-status{font-size:.68rem;font-weight:600;padding:.1rem .45rem;border-radius:10px;display:inline-block;margin-bottom:.4rem;}
.sv-card-status.owned{background:rgba(100,200,100,.2);color:#81c784;}
.sv-card-status.missing{background:rgba(255,255,255,.07);color:var(--text-muted,#888);}
.sv-card-date{font-size:.68rem;color:var(--text-muted,#888);}
.sv-card-story{font-size:.7rem;color:var(--text-secondary,#bbb);margin:.25rem 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sv-card-writer{font-size:.65rem;color:var(--text-muted,#888);margin-top:.2rem;}
.sv-card-grade{font-size:.7rem;font-weight:700;color:#ffd54f;margin-top:.25rem;}
/* Search modal */
#seriesSearchModal{display:none;position:fixed;inset:0;z-index:1100;align-items:center;justify-content:center;}
#seriesSearchModal.open{display:flex;}
.ssm-overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);}
.ssm-box{position:relative;z-index:1;background:var(--bg-surface,#1e2030);border-radius:14px;padding:1.25rem;width:min(520px,95vw);max-height:85vh;display:flex;flex-direction:column;gap:.75rem;}
.ssm-title{font-size:1rem;font-weight:700;margin:0;}
.ssm-input{width:100%;padding:.55rem .85rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:inherit;font-size:.9rem;outline:none;box-sizing:border-box;}
.ssm-input:focus{border-color:var(--accent,#e62429);}
.ssm-results{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px;}
.ssm-row{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;border-radius:8px;cursor:pointer;gap:.5rem;transition:.12s;}
.ssm-row:hover{background:rgba(255,255,255,.07);}
.ssm-row-info{flex:1;min-width:0;}
.ssm-row-name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssm-row-sub{font-size:.68rem;color:var(--text-muted,#888);}
.ssm-row-issues{font-size:.72rem;color:var(--text-muted,#888);white-space:nowrap;}
.ssm-row-add{font-size:.75rem;padding:.25rem .6rem;border-radius:6px;background:var(--accent,#e62429);color:#fff;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.ssm-row-add:disabled{background:rgba(100,200,100,.25);color:#81c784;cursor:default;}
.ssm-empty{color:var(--text-muted,#888);font-size:.82rem;text-align:center;padding:1.5rem;}
/* Issue detail modal (light) */
/* old issueModal CSS removed */
.im-save{width:100%;padding:.55rem;border-radius:8px;background:var(--accent,#e62429);color:#fff;font-weight:700;font-size:.85rem;border:none;cursor:pointer;margin-top:.25rem;}
@media(max-width:640px){.sv-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
/* ══════════════════════════════════════════════════════════════
UX/UI MOBILE IMPROVEMENTS
══════════════════════════════════════════════════════════════ */
/* ── Bottom Navigation Bar (mobile) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--bg-card,#fff);border-top:1px solid var(--border,#e8e8e8);padding:0;padding-bottom:env(safe-area-inset-bottom,0);height:calc(64px + env(safe-area-inset-bottom,0));box-shadow:0 -2px 12px rgba(0,0,0,.08);}
.bottom-nav-inner{display:flex;height:64px;max-width:600px;margin:0 auto;padding:0 8px;}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:none;background:none;cursor:pointer;color:var(--text-muted,#999);font-size:.52rem;font-weight:600;font-family:inherit;padding:6px 0;transition:.15s;position:relative;min-width:0;-webkit-tap-highlight-color:transparent;overflow:hidden;}
.bottom-nav-item:active{transform:scale(.92);opacity:.7;}
.bottom-nav-item.active{color:var(--primary-red,#e62429);}
.bottom-nav-item .bnav-icon{font-size:1.1rem;line-height:1;}
.bottom-nav-item .bnav-label{white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;}
.bottom-nav-item .bnav-badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--primary-red,#e62429);color:#fff;font-size:.55rem;font-weight:700;padding:1px 5px;border-radius:8px;line-height:1.2;min-width:14px;text-align:center;}
@media(max-width:768px){
.bottom-nav{display:flex;}
/* Add bottom padding to main content so it's not hidden behind bottom nav */
.main-content{padding-bottom:80px !important;}
/* Hide top view tabs on mobile (replaced by bottom nav) */
.view-tabs-bar,.view-tabs{display:none !important;}
/* Shrink search bar placeholder on mobile */
.search-input{font-size:.85rem !important;}
.search-input::placeholder{font-size:.8rem;}
/* Compact header on mobile */
.header{padding:0.5rem 0.75rem !important;gap:0.35rem !important;}
.logo-title{font-size:.9rem !important;}
.logo-subtitle{font-size:.58rem !important;display:none;}
.logo-icon{font-size:1.2rem !important;}
/* Move feedback button above bottom nav */
#bugReportBtn{bottom:78px !important;}
}
/* ── Tabs scroll horizontal (quand pas de bottom nav, tablette) ── */
.view-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.view-tabs-bar::-webkit-scrollbar{display:none;}
/* ── Empty state engageant ── */
.empty-state-box{text-align:center;padding:3rem 1.5rem;max-width:400px;margin:2rem auto;}
/* ── Sprint Bulk Operations — sélection multiple + barre flottante ────── */
.comic-card.bulk-selected { outline: 3px solid var(--primary-red, #e62429); outline-offset: -3px; }
.bulk-checkbox { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; background: rgba(0,0,0,.55); border: 2px solid #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: transform .12s, background .12s; }
.bulk-checkbox:hover { transform: scale(1.1); background: rgba(0,0,0,.75); }
.comic-card.bulk-selected .bulk-checkbox { background: var(--primary-red, #e62429); border-color: #fff; }
.bulk-checkbox::after { content: ''; display: none; width: 8px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-2px); }
.comic-card.bulk-selected .bulk-checkbox::after { display: block; }
.bulk-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; border-top: 2px solid var(--primary-red, #e62429); padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 -8px 32px rgba(0,0,0,.6); z-index: 4000; flex-wrap: wrap; }
.bulk-bar-left, .bulk-bar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bulk-bar-cancel { background: rgba(255,255,255,.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: background .12s; }
.bulk-bar-cancel:hover { background: rgba(255,255,255,.2); }
.bulk-bar-count { color: #fff; font-size: .9rem; font-weight: 600; min-width: 150px; }
.bulk-bar-link { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; padding: .35rem .7rem; border-radius: 6px; cursor: pointer; font-size: .8rem; transition: background .12s; }
.bulk-bar-link:hover { background: rgba(255,255,255,.1); }
.bulk-action { background: var(--primary-red, #e62429); border: none; color: #fff; padding: .5rem 1rem; border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 600; transition: background .12s, transform .12s; display: inline-flex; align-items: center; gap: .35rem; }
.bulk-action:disabled { opacity: .35; cursor: not-allowed; }
.bulk-action:not(:disabled):hover { transform: translateY(-1px); background: #c1191d; }
.bulk-action-quick { padding: .5rem .7rem; font-size: 1.1rem; background: rgba(255,255,255,.1); }
.bulk-action-quick:not(:disabled):hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.bulk-action-danger { background: #444; }
.bulk-action-danger:not(:disabled):hover { background: #c1191d; }
.bulk-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 5000; padding: 1rem; }
.bulk-modal { background: #1a1a1a; border-radius: 12px; max-width: 520px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.1); }
.bulk-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.bulk-modal-header h3 { margin: 0; color: #fff; font-size: 1.05rem; }
.bulk-modal-close { background: rgba(255,255,255,.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.bulk-modal-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.bulk-modal-hint { color: rgba(255,255,255,.6); font-size: .82rem; margin: 0 0 1rem; line-height: 1.4; }
.bulk-edit-field { display: grid; grid-template-columns: 1fr 1.2fr; gap: .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.bulk-edit-field label { color: #f0f0f0; font-size: .85rem; display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.bulk-edit-field label input[type="checkbox"] { cursor: pointer; }
.bulk-edit-field input[type="text"], .bulk-edit-field input[type="number"], .bulk-edit-field select { background: #2d2d2d; border: 1px solid #555; color: #fff; padding: .4rem .6rem; border-radius: 6px; font-size: .85rem; outline: none; width: 100%; }
.bulk-modal-footer { display: flex; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); justify-content: flex-end; }
.bulk-modal-cancel { background: rgba(255,255,255,.1); border: none; color: #fff; padding: .55rem 1rem; border-radius: 8px; cursor: pointer; font-size: .85rem; }
.bulk-modal-apply { background: var(--primary-red, #e62429); border: none; color: #fff; padding: .55rem 1.2rem; border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 600; }
.bulk-modal-apply:hover { background: #c1191d; }
@media (max-width: 560px) {
.bulk-bar { padding: .6rem .75rem; gap: .5rem; }
.bulk-bar-count { min-width: auto; font-size: .8rem; }
.bulk-action { padding: .4rem .6rem; font-size: .8rem; }
.bulk-action-quick { padding: .4rem .55rem; }
.bulk-edit-field { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
SPRINT TAGS / CUSTOM FIELDS (v5.105) — chips, input, suggestions, filters, cards
══════════════════════════════════════════════════════════════ */
.tag-input-container { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: .5rem; }
.tag-chips-wrap { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 28px; }
.tag-chip { display: inline-flex; align-items: center; gap: .25rem; background: rgba(230,36,41,.18); border: 1px solid rgba(230,36,41,.5); color: #fff; padding: 3px 6px 3px 10px; border-radius: 14px; font-size: .78rem; line-height: 1.2; font-weight: 500; }
.tag-chip.readonly { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); padding: 3px 10px; }
.tag-chip-label { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tag-chip-x { background: rgba(0,0,0,.35); border: none; color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: .85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s; }
.tag-chip-x:hover { background: var(--primary-red, #e62429); }
.tag-input-inline { background: transparent; border: none; outline: none; color: var(--text-primary, #fff); flex: 1 1 100px; min-width: 100px; font-size: .8rem; padding: 2px 4px; font-family: inherit; }
.tag-input-inline::placeholder { color: var(--text-muted, #999); font-style: italic; }
.tag-suggestions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgba(255,255,255,.07); align-items: center; }
.tag-sugg-label { font-size: .7rem; color: var(--text-muted, #999); margin-right: .25rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.tag-sugg-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text-secondary, #ccc); padding: 3px 9px; border-radius: 12px; font-size: .72rem; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; display: inline-flex; align-items: center; gap: .25rem; }
.tag-sugg-chip:hover { background: rgba(230,36,41,.2); border-color: rgba(230,36,41,.4); color: #fff; }
.tag-sugg-count { background: rgba(255,255,255,.12); color: var(--text-muted, #aaa); font-size: .65rem; padding: 0 5px; border-radius: 8px; min-width: 18px; text-align: center; font-weight: 700; }
.tag-help { margin-top: .55rem; font-size: .72rem; color: var(--text-muted, #999); line-height: 1.4; padding: 0 .25rem; }
/* — Filtre sidebar par tag — */
.tag-filter-chips-wrap { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; max-height: 220px; overflow-y: auto; padding: .25rem; }
.tag-filter-chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text-secondary, #ccc); padding: 3px 8px; border-radius: 12px; font-size: .72rem; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .25rem; transition: all .12s; }
.tag-filter-chip:hover { background: rgba(255,255,255,.1); color: #fff; }
.tag-filter-chip.active { background: var(--primary-red, #e62429); border-color: var(--primary-red, #e62429); color: #fff; font-weight: 600; }
.tag-filter-chip.active .tag-filter-count { background: rgba(0,0,0,.3); color: #fff; }
.tag-filter-count { background: rgba(255,255,255,.1); color: var(--text-muted, #aaa); font-size: .62rem; padding: 0 5px; border-radius: 8px; min-width: 18px; text-align: center; font-weight: 700; }
.tag-filter-clear { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--text-muted, #aaa); padding: 3px 8px; border-radius: 12px; font-size: .7rem; cursor: pointer; font-family: inherit; }
.tag-filter-clear:hover { color: #fff; border-color: rgba(255,255,255,.4); }
/* — Tag chips on comic cards (lecture seule) — */
.comic-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.comic-card-tag { background: rgba(255,255,255,.08); color: var(--text-secondary, #ccc); font-size: .62rem; padding: 1px 6px; border-radius: 8px; font-weight: 500; line-height: 1.4; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.comic-card-tag-more { background: rgba(230,36,41,.18); color: #fff; font-size: .62rem; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
/* ══════════════════════════════════════════════════════════════
SPRINT PULL LIST v5.108 — vue calendrier sorties + premium gate
══════════════════════════════════════════════════════════════ */
.pl-wrapper { padding: 1rem .25rem 2rem; }
.pl-header { margin-bottom: 1.25rem; }
.pl-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 .25rem; }
.pl-subtitle { font-size: .85rem; color: var(--text-muted); }
.pl-subtitle a { color: inherit; }
.pl-mode-switch { display: inline-flex; gap: .5rem; margin-bottom: 1rem; background: rgba(255,255,255,.04); padding: 4px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.08)); }
.pl-mode-btn { background: transparent; color: var(--text-secondary, #ccc); border: none; padding: .45rem 1rem; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: .12s; }
.pl-mode-btn.active { background: var(--primary-red, #e62429); color: #fff; }
.pl-filters { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-bottom: 1rem; padding: 0 .25rem; }
.pl-pubs { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-width: 0; }
.pl-pub-pill { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text-secondary, #ccc); padding: 4px 10px; border-radius: 12px; font-size: .73rem; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .3rem; transition: all .12s; }
.pl-pub-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.pl-pub-pill.active { background: var(--primary-red, #e62429); border-color: var(--primary-red, #e62429); color: #fff; font-weight: 600; }
.pl-pub-pill.active .pl-pill-n { background: rgba(0,0,0,.3); color: #fff; }
.pl-pill-n { background: rgba(255,255,255,.1); color: var(--text-muted, #aaa); font-size: .63rem; padding: 0 5px; border-radius: 8px; min-width: 18px; text-align: center; font-weight: 700; }
.pl-month-sel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--text-primary, #fff); padding: 5px 10px; border-radius: 8px; font-size: .8rem; font-family: inherit; cursor: pointer; outline: none; }
.pl-week { margin-bottom: 1.75rem; }
.pl-week-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .45rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); margin-bottom: .85rem; }
.pl-week-label { font-size: .9rem; font-weight: 700; color: var(--text-primary, #fff); text-transform: capitalize; }
.pl-week-count { font-size: .7rem; color: var(--text-muted, #999); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .85rem; }
.pl-card { background: rgba(255,255,255,.04); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.pl-card:hover { transform: translateY(-2px); border-color: rgba(230,36,41,.3); box-shadow: 0 6px 20px rgba(230,36,41,.12); }
.pl-card-cover { aspect-ratio: 2/3; background: #000; overflow: hidden; position: relative; }
.pl-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-card-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #333; }
.pl-card-body { padding: .65rem .7rem .75rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.pl-card-pub { font-size: .62rem; font-weight: 700; color: var(--primary-red, #e62429); text-transform: uppercase; letter-spacing: .05em; }
.pl-card-title { font-size: .85rem; font-weight: 600; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-card-issues { display: flex; flex-direction: column; gap: 2px; margin-top: .2rem; }
.pl-issue-row { display: flex; justify-content: space-between; font-size: .73rem; color: var(--text-muted, #999); }
.pl-issue-num { font-weight: 700; color: var(--text-secondary, #ddd); }
.pl-issue-date { color: var(--text-muted, #999); }
.pl-follow-btn { margin-top: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text-primary, #fff); padding: .4rem .65rem; border-radius: 6px; font-size: .73rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: .12s; text-align: center; text-decoration: none; display: block; }
.pl-follow-btn:hover { background: rgba(255,255,255,.1); }
.pl-follow-btn.followed { background: rgba(67,160,71,.18); border-color: rgba(67,160,71,.4); color: #66bb6a; }
/* Sprint 3c — Auto-wishlist badge + toggle */
.pl-auto-badge { position: absolute; top: 6px; left: 6px; background: linear-gradient(135deg, #ffc83d, #ff9800); color: #1a1208; font-size: .6rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 1.5px solid #1a1208; z-index: 3; }
.pl-card.pl-card-auto { box-shadow: 0 4px 16px rgba(255,200,61,.18); }
.pl-card.pl-card-auto:hover { box-shadow: 0 6px 22px rgba(255,200,61,.28); }
.pl-auto-toggle { margin-top: .25rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--text-muted, #999); padding: .3rem .55rem; border-radius: 6px; font-size: .8rem; cursor: pointer; font-family: inherit; transition: .12s; width: 100%; text-align: center; }
.pl-auto-toggle:hover { background: rgba(255,200,61,.1); color: #ffc83d; }
.pl-auto-toggle.on { background: linear-gradient(135deg, rgba(255,200,61,.2), rgba(255,152,0,.15)); border-color: rgba(255,200,61,.45); color: #ffc83d; font-weight: 700; }
.pl-auto-toggle.on:hover { background: linear-gradient(135deg, rgba(255,200,61,.3), rgba(255,152,0,.2)); }
.pl-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted, #999); }
.pl-empty h3 { font-size: 1.05rem; margin: .5rem 0; color: var(--text-primary, #fff); }
.pl-empty p { font-size: .9rem; line-height: 1.5; max-width: 480px; margin: 0 auto; }
/* Premium gate modal */
.pl-premium-overlay { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10000; align-items: center; justify-content: center; padding: 1rem; }
.pl-premium-modal { background: var(--bg-elevated, #1a1a1a); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 16px; max-width: 440px; width: 100%; padding: 2rem 1.75rem; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pl-premium-x { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.06); border: none; color: var(--text-secondary); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .9rem; }
.pl-premium-features { display: flex; flex-direction: column; gap: .65rem; margin: 1.25rem 0; }
.pl-premium-feat { background: rgba(230,36,41,.08); border: 1px solid rgba(230,36,41,.15); padding: .55rem .8rem; border-radius: 8px; font-size: .85rem; color: var(--text-primary, #fff); }
.pl-premium-cta { display: block; background: linear-gradient(135deg, #e62429, #c0392b); color: #fff; text-align: center; padding: .85rem 1.25rem; border-radius: 10px; font-weight: 800; font-size: 1rem; text-decoration: none; margin-top: 1rem; transition: .15s; }
.pl-premium-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230,36,41,.4); }
@media (max-width: 640px) {
.pl-cards { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.pl-card-body { padding: .5rem .55rem .6rem; }
.pl-card-title { font-size: .75rem; }
.pl-pubs { gap: .25rem; }
.pl-pub-pill { font-size: .68rem; padding: 3px 7px; }
}
/* — Mode dropdown bulk tag — */
.bulk-edit-field-tags { display: block; }
.bulk-edit-field-tags label { display: block; margin-bottom: .35rem; }
.bulk-tags-mode-sel { width: 100%; margin-bottom: .5rem; }
@media (max-width: 560px) {
.tag-filter-chips-wrap { max-height: 140px; }
.tag-suggestions { padding-top: .4rem; margin-top: .4rem; }
.tag-sugg-chip { font-size: .7rem; padding: 2px 7px; }
.comic-card-tag { font-size: .58rem; max-width: 60px; }
}
.empty-state-icon{font-size:3rem;margin-bottom:1rem;opacity:.7;}
.empty-state-title{font-size:1.1rem;font-weight:700;color:var(--text-primary,#333);margin-bottom:.5rem;}
.empty-state-desc{font-size:.88rem;color:var(--text-muted,#888);line-height:1.6;margin-bottom:1.25rem;}
.empty-state-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;background:var(--primary-red,#e62429);color:#fff;border-radius:8px;border:none;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;}
.empty-state-cta:hover{opacity:.9;transform:translateY(-1px);}
/* ══════════════════════════════════════════════════════════════
GUIDED TOUR — Tooltip system
══════════════════════════════════════════════════════════════ */
#tourOverlay{display:none;position:fixed;inset:0;z-index:8000;pointer-events:none;}
#tourOverlay.active{display:block;}
#tourBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:8001;pointer-events:auto;transition:opacity .3s;}
#tourHighlight{position:absolute;z-index:8002;border-radius:8px;box-shadow:0 0 0 4000px rgba(0,0,0,.55),0 0 0 3px var(--primary-red,#e62429);pointer-events:none;transition:all .35s ease;}
.tour-tooltip{position:absolute;z-index:8003;background:#fff;border-radius:14px;padding:1.25rem 1.35rem;max-width:340px;width:max-content;box-shadow:0 12px 40px rgba(0,0,0,.25);pointer-events:auto;animation:tourFadeIn .25s ease;}
@keyframes tourFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tour-tooltip{--arrow-x:30px;--arrow-y:20px;}
.tour-tooltip::before{content:'';position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);z-index:-1;}
.tour-tooltip.arrow-top::before{top:-7px;left:var(--arrow-x);box-shadow:-2px -2px 4px rgba(0,0,0,.06);}
.tour-tooltip.arrow-bottom::before{bottom:-7px;left:var(--arrow-x);box-shadow:2px 2px 4px rgba(0,0,0,.06);}
.tour-tooltip.arrow-left::before{left:-7px;top:var(--arrow-y);box-shadow:-2px 2px 4px rgba(0,0,0,.06);}
.tour-tooltip.arrow-right::before{right:-7px;top:var(--arrow-y);box-shadow:2px -2px 4px rgba(0,0,0,.06);}
.tour-step-badge{display:inline-block;background:var(--primary-red,#e62429);color:#fff;font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:10px;margin-bottom:.5rem;}
.tour-title{font-size:1rem;font-weight:800;color:#1a1a2e;margin-bottom:.35rem;line-height:1.3;}
.tour-desc{font-size:.85rem;color:#666;line-height:1.6;margin-bottom:1rem;}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.tour-btn{padding:.5rem 1rem;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:.15s;}
.tour-btn-next{background:var(--primary-red,#e62429);color:#fff;}
.tour-btn-next:hover{opacity:.9;}
.tour-btn-skip{background:none;color:#1a1208;font-weight:500;padding:.5rem .5rem;}
.tour-btn-skip:hover{color:#333;}
.tour-progress{display:flex;gap:4px;align-items:center;}
.tour-dot{width:7px;height:7px;border-radius:50%;background:#ddd;transition:.2s;}
.tour-dot.active{background:var(--primary-red,#e62429);width:18px;border-radius:4px;}
@media(max-width:640px){
.tour-tooltip:not(.tour-centered){max-width:calc(100vw - 2rem);left:1rem !important;right:1rem !important;width:auto !important;}
.tour-tooltip.tour-centered{left:50% !important;right:auto !important;top:50% !important;transform:translate(-50%,-50%) !important;width:calc(100vw - 2.5rem) !important;max-width:360px !important;position:fixed !important;}
}
/* ── Google OAuth Button ── */
.pwd-wrap{position:relative;width:100%;}
.pwd-wrap .login-input{width:100%;padding-right:3rem;box-sizing:border-box;}
.pwd-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:6px;opacity:.4;transition:.15s;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center;}
.pwd-eye:hover{opacity:.8;}
.pwd-eye svg{width:20px;height:20px;stroke:#888;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border-radius:0;border:2px solid #1a1208;background:#fff;color:#1a1208;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform 140ms ease-out,box-shadow 140ms ease-out;box-shadow:3px 3px 0 #1a1208;}
.google-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1a1208;background:#f8e8a8;color:#1a1208;}
/* (modal sections now in main modal v2 CSS block above) */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ REFONTE PASSION POP — DESIGN SYSTEM (design_handoff_app_refonte) ║
║ Bordures ink 2px · ombres plates · Bungee/Bangers/Inter/Caveat/Mono ║
╚══════════════════════════════════════════════════════════════════════╝ */
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);}
::selection{background:var(--accent);color:#1a1208;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* ── Boutons pop génériques ─────────────────────────────────────────── */
.pbtn{transition:transform 110ms ease,box-shadow 110ms ease;}
.pbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-ink)!important;}
.pbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow-ink)!important;}
.hbtn{transition:background 120ms ease;}
.hbtn:hover{background:rgba(255,255,255,.26)!important;}
.mcc-btn-primary,.mcc-btn-accent,.mcc-btn-ghost,.mcc-btn-danger{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:8px 15px;cursor:pointer;border:2px solid var(--ink);border-radius:2px;
box-shadow:3px 3px 0 var(--shadow-ink);
font-family:var(--f-body);font-size:13px;font-weight:800;letter-spacing:.2px;
}
.mcc-btn-primary{background:var(--primary);color:#fff;}
.mcc-btn-accent{background:var(--accent);color:#1a1208;}
.mcc-btn-ghost{background:var(--surface);color:var(--ink-soft);}
.mcc-btn-danger{background:var(--surface);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 45%,transparent);box-shadow:none;}
.mcc-link-btn{margin-top:4px;font-size:12.5px;font-weight:800;color:var(--primary);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;text-align:left;font-family:var(--f-body);}
/* ── HEADER ─────────────────────────────────────────────────────────── */
.mcc-header{
position:sticky;top:0;z-index:50;
background:var(--header-bg);border-bottom:3px solid var(--ink);
display:flex;align-items:center;gap:16px;
padding:0 18px;height:58px;
}
.mcc-menu-btn{
display:none;align-items:center;justify-content:center;
width:38px;height:38px;background:rgba(255,255,255,.14);
border:2px solid rgba(255,255,255,.4);border-radius:2px;
color:var(--on-header);cursor:pointer;flex-shrink:0;
}
/* Logo lockup */
.mcc-logo-lockup{
display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0;
text-decoration:none;cursor:pointer;
animation:mccLogoIn 500ms cubic-bezier(.34,1.56,.64,1);
}
.mcc-logo-side{font-family:var(--f-display);font-size:17px;letter-spacing:-.5px;color:var(--on-header);line-height:1;}
.mcc-logo-comics{
display:inline-block;font-family:var(--f-display);font-size:18px;
letter-spacing:-.5px;line-height:1;color:#1a1208;
background:var(--accent);border:2px solid #1a1208;
box-shadow:3px 3px 0 rgba(0,0,0,.4);
padding:5px 10px 4px;transform:rotate(-2deg);
animation:mccComicsWiggle 7s ease-in-out 2.5s infinite;
}
.mcc-logo-lockup:hover .mcc-logo-comics{animation:mccComicsWiggle 900ms ease-in-out infinite;}
@keyframes mccLogoIn{from{transform:scale(.7) rotate(-4deg);}to{transform:none;}}
@keyframes mccComicsWiggle{0%,8%,100%{transform:rotate(-2deg);}2%{transform:rotate(-6deg) scale(1.07);}5%{transform:rotate(1.5deg);}}
/* Recherche header */
.mcc-search{
flex:1;max-width:560px;margin:0 auto;min-width:0;
display:flex;align-items:center;
background:var(--surface);border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);border-radius:2px;height:38px;
}
.mcc-scope-wrap{position:relative;height:100%;flex-shrink:0;}
.mcc-scope-btn{
display:flex;align-items:center;gap:5px;
font-family:var(--f-shout);font-size:13px;letter-spacing:1px;
padding:0 10px;height:100%;cursor:pointer;
background:var(--accent);color:#1a1208;
border:none;border-right:2px solid var(--ink);border-radius:0;
}
.mcc-scope-pop,.mcc-filters-pop{
position:absolute;top:calc(100% + 8px);left:-2px;z-index:60;
background:var(--surface);border:2px solid var(--ink);
box-shadow:5px 5px 0 var(--shadow-ink);padding:10px;width:200px;border-radius:2px;
}
.mcc-pop-title{font-family:var(--f-shout);font-size:12px;letter-spacing:1.5px;color:var(--muted);margin-bottom:7px;}
.mcc-pop-item{
display:flex;align-items:center;gap:8px;padding:6px 9px;width:100%;
background:transparent;border:2px solid transparent;border-radius:2px;
cursor:pointer;color:var(--ink);font-family:var(--f-body);font-size:13px;font-weight:700;text-align:left;
}
.mcc-pop-item.active{background:var(--primary-soft);border-color:var(--primary);}
.mcc-pop-item .mcc-pop-check{margin-left:auto;color:var(--primary);display:flex;}
.mcc-search-ico{padding:0 8px;color:var(--muted);display:flex;flex-shrink:0;}
.mcc-search-input{
flex:1;border:none;outline:none;background:transparent;
color:var(--ink);font-family:var(--f-body);font-size:13.5px;font-weight:600;min-width:0;
}
.mcc-search-input::placeholder{color:var(--muted);}
.mcc-kbd{
margin:0 9px;padding:1px 6px;font-family:var(--f-mono);font-size:11px;
color:var(--muted);border:1.5px solid var(--line);border-radius:3px;flex-shrink:0;
}
.mcc-search-clear{
display:none;border:none;background:transparent;cursor:pointer;
color:var(--muted);padding:0 8px;align-items:center;flex-shrink:0;
}
.mcc-search-clear.visible{display:flex;}
.mcc-search-clear.visible ~ .mcc-kbd, .mcc-search:has(.mcc-search-clear.visible) .mcc-kbd{display:none;}
.mcc-scan-btn{
border:none;border-left:2px solid var(--line);background:transparent;cursor:pointer;
color:var(--muted);padding:0 9px;height:100%;display:flex;align-items:center;flex-shrink:0;
}
.mcc-scan-btn:hover{color:var(--ink);background:var(--surface-alt);}
/* Actions header */
.mcc-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative;}
.mcc-add-btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:7px 13px;cursor:pointer;border:2px solid var(--ink);border-radius:2px;
box-shadow:3px 3px 0 var(--shadow-ink);
background:var(--accent);color:#1a1208;
font-family:var(--f-body);font-size:13px;font-weight:800;letter-spacing:.2px;
}
.mcc-crown-btn{
width:38px;height:38px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);border-radius:2px;
font-size:17px;cursor:pointer;flex-shrink:0;
}
.mcc-crown-btn:hover{background:rgba(255,255,255,.26);}
.mcc-avatar-btn{
width:36px;height:36px;border-radius:99px;background:var(--ink);
color:var(--accent);display:flex;align-items:center;justify-content:center;
font-family:var(--f-display);font-size:12px;border:2px solid rgba(255,255,255,.55);
cursor:pointer;flex-shrink:0;padding:0;overflow:hidden;
}
.mcc-avatar-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* ── LAYOUT + SIDEBAR ───────────────────────────────────────────────── */
.mcc-layout{
display:grid;grid-template-columns:264px minmax(0,1fr);
align-items:start;min-height:calc(100vh - 58px);
}
.mcc-layout > .mcc-sidewrap{grid-column:1;grid-row:1;}
.mcc-layout > .mcc-main{grid-column:2;grid-row:1;}
.mcc-layout > #appFooter{grid-column:1 / -1;}
.mcc-side-backdrop{display:none;}
.mcc-sidewrap{flex-shrink:0;}
.mcc-sidebar{
width:264px;display:flex;flex-direction:column;gap:22px;
padding:20px 16px 28px;overflow-y:auto;
background:var(--surface);border-right:2px solid var(--ink);
position:sticky;top:58px;height:calc(100vh - 58px);box-sizing:border-box;
}
.mcc-side-close{
/* `align-self` retire : la croix vit desormais dans `.mcc-side-topbar`,
qui gere l'alignement pour elle ET pour la cloche. */
display:none;width:32px;height:32px;
align-items:center;justify-content:center;
background:var(--surface-alt);border:2px solid var(--ink);border-radius:2px;
color:var(--ink);cursor:pointer;
}
.mcc-side-sec{display:flex;flex-direction:column;}
.mcc-side-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;}
.mcc-fold-btn{
display:flex;align-items:center;gap:6px;background:transparent;
border:none;padding:0;cursor:pointer;
font-family:var(--f-shout);font-size:13.5px;letter-spacing:1.8px;color:var(--muted);
}
.mcc-fold-chev{display:flex;transition:transform 150ms ease;}
.mcc-side-sec.folded .mcc-fold-chev{transform:rotate(-90deg);}
.mcc-side-sec.folded .mcc-side-body{display:none;}
.mcc-side-add{
width:22px;height:22px;display:flex;align-items:center;justify-content:center;
background:var(--surface);border:1.5px solid var(--line);border-radius:2px;
color:var(--muted);cursor:pointer;
}
.mcc-side-add:hover{color:var(--ink);border-color:var(--ink);}
.mcc-side-hint{font-size:10.5px;color:var(--muted);margin-top:7px;font-style:italic;}
/* VUES nav */
.mcc-views-nav{display:flex;flex-direction:column;gap:3px;}
.mcc-view-item{
display:flex;align-items:center;gap:10px;width:100%;
padding:9px 11px;cursor:pointer;text-align:left;
background:transparent;color:var(--ink-soft);
border:2px solid transparent;border-radius:2px;
font-family:var(--f-body);font-size:13.5px;font-weight:700;
transition:all 120ms ease;min-height:38px;
}
.mcc-view-item:hover{background:var(--surface-alt);}
.mcc-view-item.active{
background:var(--primary);color:#fff;border-color:var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);
}
.mcc-vi-ico{display:flex;color:var(--muted);flex-shrink:0;}
.mcc-view-item.active .mcc-vi-ico{color:#fff;}
.mcc-vi-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcc-vi-count{
font-family:var(--f-mono);font-size:11.5px;font-weight:700;
padding:1px 7px;border-radius:99px;
background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted);
}
.mcc-vi-count.tone-orange{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange);}
.mcc-vi-count.tone-red{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);}
.mcc-vi-count.tone-blue{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue);}
.mcc-vi-count.tone-green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);}
.mcc-view-item.active .mcc-vi-count{background:rgba(255,255,255,.22);color:#fff;}
/* Carte série (sidebar) */
.mcc-serie-card{
display:flex;align-items:center;gap:10px;width:100%;
padding:10px 11px;cursor:pointer;text-align:left;
background:var(--surface-alt);border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);border-radius:2px;margin-bottom:6px;
font-family:var(--f-body);color:var(--ink);position:relative;
}
.mcc-serie-card.inactive{background:var(--surface);border-color:var(--line);box-shadow:none;}
.mcc-serie-cover{width:30px;height:42px;flex-shrink:0;border:1.5px solid var(--ink);object-fit:cover;background:var(--cover-gradient);}
.mcc-serie-name{display:block;font-size:13px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcc-serie-bar{display:block;height:6px;background:color-mix(in srgb,var(--ink) 9%,transparent);border:1px solid var(--line);margin-top:6px;position:relative;}
.mcc-serie-bar > span{position:absolute;inset:0;background:var(--green);}
.mcc-serie-frac{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-top:3px;}
.mcc-serie-actions{position:absolute;top:6px;right:6px;display:none;gap:4px;}
.mcc-serie-card:hover .mcc-serie-actions{display:flex;}
.mcc-serie-actions button{
width:20px;height:20px;display:flex;align-items:center;justify-content:center;
background:var(--surface);border:1.5px solid var(--line);border-radius:2px;
color:var(--muted);cursor:pointer;font-size:10px;padding:0;
}
/* VALEUR */
.mcc-value-card{
border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
background:var(--surface-alt);border-radius:2px;padding:12px 13px;
display:flex;flex-direction:column;gap:9px;
}
.mcc-value-row{display:flex;justify-content:space-between;align-items:baseline;}
.mcc-value-main{font-family:var(--f-display);font-size:19px;color:var(--primary);}
.mcc-value-mono{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink);}
.mcc-value-lbl{font-family:var(--f-shout);font-size:11px;letter-spacing:1.2px;color:var(--muted);}
.mcc-value-sub{font-size:10.5px;color:var(--muted);font-style:italic;}
/* COMPLÉTUDE — barres décennies */
.mcc-decade-row{
display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer;
background:transparent;border:none;padding:5px 2px;text-align:left;
}
.mcc-decade-top{display:flex;justify-content:space-between;align-items:baseline;}
.mcc-decade-name{font-family:var(--f-body);font-size:12px;font-weight:700;color:var(--ink-soft);}
.mcc-decade-row.active .mcc-decade-name{font-weight:900;color:var(--primary);}
.mcc-decade-frac{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.mcc-decade-bar{display:block;height:7px;background:color-mix(in srgb,var(--ink) 9%,transparent);border:1.5px solid var(--line);position:relative;}
.mcc-decade-bar > span{position:absolute;inset:0;background:color-mix(in srgb,var(--primary) 75%,var(--ink));}
.mcc-decade-row.active .mcc-decade-bar > span{background:var(--primary);}
/* Tags sidebar (conservé) */
.tag-filter-chips-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.tag-filter-chip{
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:2px;cursor:pointer;
border:2px solid var(--line);background:var(--surface);color:var(--ink-soft);
font-family:var(--f-body);font-size:11.5px;font-weight:800;
}
.tag-filter-chip.active{border-color:var(--ink);background:var(--accent);color:#1a1208;box-shadow:2px 2px 0 var(--shadow-ink);}
/* ── MAIN + TOOLBAR ─────────────────────────────────────────────────── */
.mcc-main{flex:1;min-width:0;padding:22px 24px 48px;display:flex;flex-direction:column;gap:18px;background:var(--bg);}
.mcc-toolbar{display:flex;flex-direction:column;gap:12px;}
.mcc-toolbar-head{display:flex;flex-direction:column;gap:1px;}
.mcc-title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.mcc-page-title{margin:0;font-family:var(--f-display);font-size:27px;color:var(--ink);letter-spacing:.2px;font-weight:400;}
.mcc-page-count{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-weight:600;}
.mcc-welcome-line{
font-family:var(--f-hand);font-size:21px;font-weight:500;color:var(--ink-soft);
line-height:1.3;min-height:28px;animation:mccWelcomeIn 450ms ease;
}
@keyframes mccWelcomeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.mcc-toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:30;}
.mcc-tool-btn{
display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
cursor:pointer;border:2px solid var(--ink);border-radius:2px;
box-shadow:3px 3px 0 var(--shadow-ink);
background:var(--surface);color:var(--ink-soft);
font-family:var(--f-body);font-size:13px;font-weight:800;min-height:36px;
}
.mcc-tool-btn.dark{background:var(--ink);color:var(--bg);}
.mcc-pop-wrap{position:relative;}
.mcc-filters-pop{width:280px;left:0;}
.mcc-fchip{
padding:5px 11px;border-radius:2px;cursor:pointer;
border:2px solid var(--line);box-shadow:none;
background:var(--surface);color:var(--ink-soft);
font-family:var(--f-body);font-size:12px;font-weight:800;
}
.mcc-fchip.on{border-color:var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);background:var(--accent);color:#1a1208;}
.mcc-fpop-row{display:flex;flex-wrap:wrap;gap:6px;}
.mcc-fpop-foot{margin-top:12px;display:flex;justify-content:space-between;align-items:center;}
.mcc-fpop-count{font-family:var(--f-mono);font-size:11px;color:var(--muted);}
.mcc-fpop-clear{border:none;background:transparent;cursor:pointer;color:var(--primary);font-size:12px;font-weight:800;font-family:var(--f-body);text-decoration:underline;}
.mcc-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0;}
.mcc-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 6px 4px 10px;border-radius:2px;
border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);
background:var(--accent);color:#1a1208;
font-family:var(--f-body);font-size:12px;font-weight:800;
}
.mcc-chip button{
display:flex;align-items:center;justify-content:center;
width:16px;height:16px;border:1.5px solid #1a1208;border-radius:2px;
background:rgba(255,255,255,.4);cursor:pointer;color:#1a1208;padding:0;
}
.mcc-sort-select{
padding:8px 10px;border-radius:2px;border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);
background:var(--surface);color:var(--ink);cursor:pointer;
font-family:var(--f-body);font-size:12.5px;font-weight:800;min-height:36px;
}
.mcc-sortdir-btn{
width:36px;min-height:36px;border-radius:2px;border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);background:var(--surface);color:var(--ink);
cursor:pointer;font-size:15px;font-weight:800;
}
.mcc-seg{
display:flex;border:2px solid var(--ink);border-radius:2px;
box-shadow:3px 3px 0 var(--shadow-ink);overflow:hidden;flex-shrink:0;background:var(--surface);
}
.mcc-seg-btn{
height:34px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:5px;
border:none;cursor:pointer;background:var(--surface);color:var(--muted);
font-family:var(--f-body);font-size:11.5px;font-weight:800;
}
.mcc-seg-btn + .mcc-seg-btn{border-left:2px solid var(--ink);}
.mcc-seg-btn.active{background:var(--ink);color:var(--bg);}
/* ── GRILLE / CARTES ────────────────────────────────────────────────── */
.mcc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));}
.mcc-grid.compact{gap:12px;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));}
.mcc-card{
background:var(--surface);border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--shadow-ink);border-radius:2px;
cursor:pointer;overflow:visible;position:relative;
display:flex;flex-direction:column;
transition:transform 130ms ease,box-shadow 130ms ease;
}
.mcc-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow-ink);}
.mcc-card.selected{outline:3px solid var(--green);outline-offset:2px;}
.mcc-card.mcc-flash{animation:mccCardPulse 2s ease;}
@keyframes mccCardPulse{0%,60%{outline:3px solid var(--accent);outline-offset:3px;}100%{outline:3px solid transparent;outline-offset:3px;}}
.mcc-card-coverwrap{position:relative;border-bottom:2px solid var(--ink);overflow:hidden;}
.mcc-card-cover{aspect-ratio:.66;width:100%;object-fit:cover;display:block;background:var(--cover-gradient);}
.mcc-card-cover.missing{filter:grayscale(.9);opacity:.5;}
.mcc-cover-ph{
aspect-ratio:.66;width:100%;display:block;position:relative;
background:var(--cover-gradient);
}
.mcc-cover-ph.missing{filter:grayscale(.9);opacity:.5;}
.mcc-cover-num{
position:absolute;bottom:6px;left:9px;
font-family:var(--f-display);font-size:22px;color:#fff;
text-shadow:2px 2px 0 rgba(0,0,0,.5);pointer-events:none;
}
.mcc-key-tag{
position:absolute;top:-3px;right:-3px;z-index:2;
display:flex;align-items:center;gap:4px;
padding:3px 9px 3px 7px;
background:var(--accent);border:2px solid #1a1208;border-radius:2px;
color:#1a1208;box-shadow:2px 2px 0 rgba(0,0,0,.45);
font-family:var(--f-shout);font-size:14px;letter-spacing:1px;
transform:rotate(3deg);pointer-events:none;
}
.mcc-heart-btn{
position:absolute;top:7px;left:7px;z-index:2;width:28px;height:28px;padding:0;
display:flex;align-items:center;justify-content:center;
background:var(--surface);color:var(--ink-soft);
border:2px solid var(--ink);border-radius:2px;cursor:pointer;
box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.mcc-heart-btn.on{background:var(--primary);color:#fff;}
.mcc-sel-box{
position:absolute;top:7px;left:7px;width:26px;height:26px;z-index:2;
display:flex;align-items:center;justify-content:center;
background:var(--surface);border:2px solid var(--ink);border-radius:2px;
box-shadow:2px 2px 0 rgba(0,0,0,.35);color:#fff;
}
.mcc-sel-box.on{background:var(--green);}
.mcc-card-actions{
position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:12px;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45) 100%);
opacity:0;transition:opacity 140ms ease;pointer-events:none;
}
.mcc-card:hover .mcc-card-actions{opacity:1;pointer-events:auto;}
.mcc-card-actions button{
font-family:var(--f-body);font-size:12px;font-weight:800;
padding:7px 14px;cursor:pointer;border-radius:2px;
background:var(--accent);color:#1a1208;
border:2px solid #1a1208;box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.mcc-card-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:6px;flex:1;}
.mcc-card-title{
font-family:var(--f-body);font-size:12.5px;font-weight:800;color:var(--ink);
line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:31px;
}
.mcc-card-meta{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.mcc-card-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;}
.mcc-badge{
display:inline-flex;align-items:center;gap:4px;
padding:0 5px;border:1.5px solid var(--line);border-radius:0;
font-size:9.5px;font-weight:800;letter-spacing:.4px;line-height:1.7;
text-transform:uppercase;white-space:nowrap;
background:transparent;color:var(--muted);font-family:var(--f-body);
}
.mcc-badge.md{padding:1px 7px;font-size:10.5px;}
.mcc-badge.tone-green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);border-color:var(--green);}
.mcc-badge.tone-orange{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange);border-color:var(--orange);}
.mcc-badge.tone-purple{background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple);border-color:var(--purple);}
.mcc-badge.tone-blue{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue);border-color:var(--blue);}
.mcc-badge.tone-red{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);}
.mcc-badge.tone-accent{background:var(--accent);color:#1a1208;border-color:#1a1208;}
.mcc-tag-chip{
display:inline-flex;padding:0 6px;border-radius:99px;
background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue);
font-size:9.5px;font-weight:700;line-height:1.8;white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis;
}
/* Liste */
.mcc-list{display:flex;flex-direction:column;gap:8px;}
.mcc-row{
display:grid;grid-template-columns:34px 52px 1fr auto auto 20px;
align-items:center;gap:14px;width:100%;text-align:left;
padding:7px 12px;cursor:pointer;
background:var(--surface);border:2px solid var(--ink);
box-shadow:2px 2px 0 var(--shadow-ink);border-radius:2px;
transition:transform 110ms ease,box-shadow 110ms ease;
font-family:var(--f-body);color:var(--ink);
}
.mcc-row:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-ink);}
.mcc-row-cover{width:34px;aspect-ratio:.66;object-fit:cover;border:1px solid var(--line);display:block;background:var(--cover-gradient);}
.mcc-row-num{font-family:var(--f-display);font-size:14px;color:var(--primary);}
.mcc-row-title{display:block;font-size:13.5px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcc-row-meta{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-top:2px;}
.mcc-row-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.mcc-row-price{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ink);min-width:56px;text-align:right;}
.mcc-row-price.empty{color:var(--muted);}
.mcc-row-chev{color:var(--muted);display:flex;}
/* États vides */
.mcc-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:70px 24px;text-align:center;}
.mcc-empty-shout{
font-family:var(--f-shout);font-size:21px;letter-spacing:2px;color:#1a1208;
background:var(--accent);border:2px solid #1a1208;
box-shadow:4px 4px 0 var(--shadow-ink);padding:5px 18px;transform:rotate(-2deg);
}
.mcc-empty-title{font-family:var(--f-display);font-size:23px;color:var(--ink);margin-top:8px;}
.mcc-empty-body{margin:0;max-width:380px;font-size:14px;font-weight:500;color:var(--muted);line-height:1.6;}
/* Pagination sentinel */
.mcc-load-sentinel{height:1px;}
/* ── BARRE DE SÉLECTION EN LOT ──────────────────────────────────────── */
.mcc-selbar{
/* ⚠️ `width:max-content` INDISPENSABLE, et le défaut qu'il corrige est
contre-intuitif : pour un élément `fixed` posé en `left:50%` sans `width`
ni `right`, la largeur au contenu est bornée par l'espace RESTANT à sa
droite — soit 50 vw. Le `max-width:calc(100vw - 32px)` plus bas ne pouvait
donc jamais s'appliquer, et le `flex-wrap` empilait les 9 boutons dans une
colonne de 50 vw. Mesuré à 375 px : barre de 188 px de large sur 362 de
haut, soit 45 % de l'écran, posée AU MILIEU de la grille qu'on est en train
de cocher. Le défaut commençait dès ~1280 px de viewport, donc bien avant
le mobile. */
position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
width:max-content;
display:flex;align-items:center;gap:9px;padding:10px 14px;
background:var(--ink);color:var(--bg);
border:2px solid var(--shadow-ink);border-radius:2px;
box-shadow:5px 5px 0 rgba(0,0,0,.35);
flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);
}
.mcc-selbar-count{font-family:var(--f-display);font-size:15px;color:var(--accent);}
.mcc-selbar-lbl{font-size:12.5px;font-weight:700;}
.mcc-selbar button{
display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
border-radius:2px;cursor:pointer;font-family:var(--f-body);font-size:12.5px;
font-weight:800;background:transparent;color:var(--bg);
border:1.5px solid color-mix(in srgb,var(--bg) 45%,transparent);min-height:36px;
}
.mcc-selbar button:disabled{opacity:.4;cursor:default;}
.mcc-selbar .mcc-selbar-danger{background:var(--primary);border-color:var(--primary);color:#fff;}
.mcc-selbar-sep{width:1px;align-self:stretch;background:color-mix(in srgb,var(--bg) 30%,transparent);}
/* ── TOASTS ─────────────────────────────────────────────────────────── */
.mcc-toast{
position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:90;
background:var(--accent);color:#1a1208;
border:2px solid #1a1208;border-radius:2px;
box-shadow:3px 3px 0 rgba(0,0,0,.4);
padding:9px 16px;font-weight:800;font-size:13px;
font-family:var(--f-body);white-space:nowrap;max-width:calc(100vw - 32px);
overflow:hidden;text-overflow:ellipsis;
animation:mccToastIn 250ms cubic-bezier(.34,1.56,.64,1);
}
.mcc-toast.error{background:var(--primary);color:#fff;border-color:#1a1208;}
@keyframes mccToastIn{from{transform:translateX(-50%) translateY(12px);}to{transform:translateX(-50%) translateY(0);}}
/* ── PALETTE DE COMMANDES ⌘K ────────────────────────────────────────── */
.mcc-cmd-overlay{
position:fixed;inset:0;z-index:120;background:rgba(10,7,3,.55);
display:flex;justify-content:center;align-items:flex-start;padding-top:11vh;
}
.mcc-cmd-box{
width:min(560px,calc(100vw - 32px));background:var(--surface);
border:3px solid var(--ink);box-shadow:7px 7px 0 var(--shadow-ink);
border-radius:2px;overflow:hidden;display:flex;flex-direction:column;max-height:64vh;
}
.mcc-cmd-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--ink);color:var(--ink);}
.mcc-cmd-head input{
flex:1;border:none;outline:none;background:transparent;
color:var(--ink);font-family:var(--f-body);font-size:14.5px;font-weight:600;min-width:0;
}
.mcc-cmd-head kbd{padding:1px 7px;font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1.5px solid var(--line);border-radius:3px;}
.mcc-cmd-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;}
.mcc-cmd-sec{font-family:var(--f-shout);font-size:11.5px;letter-spacing:1.5px;color:var(--muted);padding:6px 12px 2px;}
.mcc-cmd-row{
display:flex;align-items:center;gap:11px;width:100%;
padding:9px 12px;cursor:pointer;text-align:left;
background:transparent;border:2px solid transparent;border-radius:2px;
font-family:var(--f-body);font-size:13.5px;font-weight:700;color:var(--ink);
}
.mcc-cmd-row:hover,.mcc-cmd-row.sel{background:var(--primary-soft);border-color:var(--primary);}
.mcc-cmd-row .ico{display:flex;color:var(--muted);}
.mcc-cmd-row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcc-cmd-row .hint{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
/* ── POP-IN DÉTAIL / AJOUT (re-skin du modal existant) ──────────────── */
.modal{background:rgba(10,7,3,.62);padding:28px;}
.modal-content.mcc-modal{
background:var(--surface);border:3px solid var(--ink);border-radius:2px;
box-shadow:8px 8px 0 var(--shadow-ink);max-width:980px;width:100%;
max-height:calc(100vh - 56px);display:flex;flex-direction:column;overflow:hidden;padding:0;
}
.mcc-modal-band{
background:var(--header-bg);border-bottom:3px solid var(--ink);border-radius:0;
padding:12px 16px;display:flex;align-items:center;gap:13px;flex-shrink:0;position:relative;
}
.mcc-band-num{
font-family:var(--f-display);font-size:25px;color:var(--accent);flex-shrink:0;
background:none;border:none;padding:0;line-height:1;
}
.mcc-band-text{min-width:0;flex:1;}
.mcc-band-title{
display:block;font-family:var(--f-body);font-size:15.5px;font-weight:800;color:var(--on-header);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mcc-band-sub{font-family:var(--f-mono);font-size:10.5px;color:color-mix(in srgb,var(--on-header) 72%,transparent);}
.mcc-band-btns{display:flex;gap:7px;flex-shrink:0;}
.mcc-navbtn{
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.45);
border-radius:2px;color:var(--on-header);cursor:pointer;padding:0;position:static;
transition:background 120ms ease;font-size:inherit;line-height:1;
}
.mcc-navbtn:hover:not(:disabled){background:rgba(255,255,255,.3);}
.mcc-navbtn:disabled{opacity:.35;cursor:default;}
.modal-status-tabs{
display:flex;gap:0;border-bottom:2px solid var(--ink);background:var(--surface-alt);flex-shrink:0;
}
.modal-status-tabs .status-tab{
flex:1;padding:9px 8px;cursor:pointer;text-align:center;
background:transparent;border:none;border-right:2px solid var(--line);
font-family:var(--f-shout);font-size:14px;letter-spacing:1.2px;color:var(--muted);
}
.modal-status-tabs .status-tab:last-child{border-right:none;}
.modal-status-tabs .status-tab.active{background:var(--primary);color:#fff;}
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:0;background:var(--surface);}
.mcc-modal-grid{display:flex;min-height:0;}
.mcc-modal-covercol{
width:252px;flex-shrink:0;padding:18px;
background:var(--surface-alt);border-right:2px solid var(--ink);
display:flex;flex-direction:column;gap:12px;
}
.mcc-modal-coverframe{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow-ink);position:relative;overflow:hidden;}
.mcc-modal-coverframe img{width:100%;aspect-ratio:.66;object-fit:cover;display:block;}
.mcc-modal-formcol{flex:1;min-width:0;padding:18px 20px 22px;display:flex;flex-direction:column;gap:20px;}
.mcc-form-sec{
font-family:var(--f-shout);font-size:15px;letter-spacing:1.5px;color:var(--ink);
display:flex;align-items:center;gap:8px;
}
.mcc-form-sec::before{content:'';width:18px;height:3px;background:var(--primary);display:inline-block;}
.mcc-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.mcc-field-label{font-family:var(--f-shout);font-size:12px;letter-spacing:1.2px;color:var(--muted);}
.mcc-input,.mcc-select,.mcc-textarea{
padding:9px 11px;border-radius:2px;border:2px solid var(--line);
background:var(--surface);color:var(--ink);
font-family:var(--f-body);font-size:13.5px;font-weight:600;outline:none;width:100%;box-sizing:border-box;
}
.mcc-input:focus,.mcc-select:focus,.mcc-textarea:focus{border-color:var(--ink);}
.mcc-input.mcc-mono{font-family:var(--f-mono);}
.mcc-input[readonly]{background:var(--surface-alt);color:var(--muted);}
.mcc-select{cursor:pointer;}
.mcc-textarea{resize:vertical;font-weight:500;}
.mcc-field-row{display:flex;gap:12px;flex-wrap:wrap;}
.mcc-field-row > .mcc-field{flex:1;min-width:110px;}
.mcc-input-suffix-wrap{position:relative;display:block;}
.mcc-input-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;color:var(--muted);pointer-events:none;}
/* ── Pastille « ? » d'aide + son infobulle ────────────────────────────────────
Le « ? » vivait en caractère nu dans le libellé : rien ne disait qu'il se
cliquait. C'est un vrai