*{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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'><circle cx='100' cy='100' r='20'/><circle cx='100' cy='100' r='40'/><circle cx='100' cy='100' r='62'/><circle cx='100' cy='100' r='84'/><circle cx='100' cy='100' r='105'/><line x1='100' y1='0' x2='100' y2='200'/><line x1='0' y1='100' x2='200' y2='100'/><line x1='15' y1='15' x2='185' y2='185'/><line x1='185' y1='15' x2='15' y2='185'/><line x1='0' y1='58' x2='200' y2='142'/><line x1='200' y1='58' x2='0' y2='142'/><line x1='58' y1='0' x2='142' y2='200'/><line x1='142' y1='0' x2='58' y2='200'/></g><g opacity='0.22' fill='white' stroke='white' stroke-linecap='round'><ellipse cx='100' cy='118' rx='18' ry='22'/><ellipse cx='100' cy='88' rx='13' ry='11'/><circle cx='100' cy='70' r='10'/><path d='M87 82 Q65 72 42 58' fill='none' stroke-width='4'/><path d='M87 89 Q60 86 32 85' fill='none' stroke-width='4'/><path d='M87 96 Q62 98 36 108' fill='none' stroke-width='4'/><path d='M88 105 Q68 116 50 132' fill='none' stroke-width='4'/><path d='M113 82 Q135 72 158 58' fill='none' stroke-width='4'/><path d='M113 89 Q140 86 168 85' fill='none' stroke-width='4'/><path d='M113 96 Q138 98 164 108' fill='none' stroke-width='4'/><path d='M112 105 Q132 116 150 132' fill='none' stroke-width='4'/></g></svg>");
}

/* ══ 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{
  display:none;align-self:flex-end;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{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  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;}

/* Pastilles toggle (remplacent les checkbox « Non ») */
.mcc-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;cursor:pointer;border-radius:2px;
  font-family:var(--f-body);font-size:12.5px;font-weight:800;
  border:2px solid var(--line);box-shadow:none;
  background:var(--surface);color:var(--muted);
  transition:all 130ms ease;min-height:34px;
}
.mcc-pill .mcc-pill-box{
  width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:transparent;color:#fff;flex-shrink:0;
}
.mcc-pill.on{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);}
.mcc-pill.on .mcc-pill-box{border:none;}
.mcc-pill.on.tone-green{background:color-mix(in srgb,var(--green) 18%,var(--surface));color:var(--green);}
.mcc-pill.on.tone-green .mcc-pill-box{background:var(--green);}
.mcc-pill.on.tone-purple{background:color-mix(in srgb,var(--purple) 18%,var(--surface));color:var(--purple);}
.mcc-pill.on.tone-purple .mcc-pill-box{background:var(--purple);}
.mcc-pill.on.tone-blue{background:color-mix(in srgb,var(--blue) 18%,var(--surface));color:var(--blue);}
.mcc-pill.on.tone-blue .mcc-pill-box{background:var(--blue);}
.mcc-pill.on.tone-orange{background:color-mix(in srgb,var(--orange) 18%,var(--surface));color:var(--orange);}
.mcc-pill.on.tone-orange .mcc-pill-box{background:var(--orange);}

/* Switch pop */
.mcc-switch{
  width:42px;height:24px;border:2px solid var(--ink);border-radius:99px;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 14%,var(--surface));
  position:relative;transition:background 150ms ease;padding:0;flex-shrink:0;
  box-shadow:2px 2px 0 var(--shadow-ink);
}
.mcc-switch.on{background:var(--green);}
.mcc-switch-thumb{
  position:absolute;top:1px;left:1px;width:18px;height:18px;
  border-radius:99px;background:#fff;border:1.5px solid var(--ink);
  transition:left 150ms ease;box-sizing:border-box;
}
.mcc-switch.on .mcc-switch-thumb{left:19px;}

/* Carte estimation marché */
.mcc-est-card{
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface-alt);border-radius:2px;padding:13px 15px;
  display:flex;flex-direction:column;gap:11px;
}
.mcc-est-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.mcc-est-title{font-family:var(--f-shout);font-size:14px;letter-spacing:1.5px;color:var(--ink);}
.mcc-est-meta{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.mcc-est-vals{display:flex;justify-content:space-between;align-items:flex-end;}
.mcc-est-lbl{display:block;font-family:var(--f-shout);font-size:10.5px;letter-spacing:1px;color:var(--muted);}
.mcc-est-min,.mcc-est-max{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink-soft);}
.mcc-est-med{font-family:var(--f-display);font-size:21px;color:var(--primary);}
.mcc-est-gauge{position:relative;height:10px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--green),var(--accent),var(--primary));}
.mcc-est-cursor{position:absolute;top:-4px;width:14px;height:14px;border-radius:99px;background:var(--surface);border:2.5px solid var(--ink);box-sizing:border-box;transform:translateX(-50%);}
.mcc-est-hist{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;border-top:1.5px dashed var(--line);padding-top:10px;}
.mcc-delta{
  font-family:var(--f-shout);font-size:15px;letter-spacing:.5px;
  padding:2px 9px;border:2px solid var(--ink);background:var(--surface);
  transform:rotate(-2deg);box-shadow:2px 2px 0 var(--shadow-ink);display:inline-block;white-space:nowrap;
}
.mcc-delta.up{color:var(--green);}
.mcc-delta.down{color:var(--primary);}
.mcc-est-foot{font-size:10px;color:var(--muted);text-align:center;font-style:italic;}

/* Pied du modal — autosave */
.modal-actions.mcc-modal-foot{
  border-top:3px solid var(--ink);background:var(--surface-alt);
  padding:11px 16px;display:flex;align-items:center;gap:9px;flex-shrink:0;flex-wrap:wrap;
}
.mcc-autosave{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;color:var(--green);white-space:nowrap;
}
.mcc-autosave.saved{animation:mccWelcomeIn 450ms ease;}
.mcc-foot-spring{flex:1;}

/* #NEW tag + anti-doublon (pop-in ajout) */
.mcc-newtag{
  font-family:var(--f-shout);font-size:16px;letter-spacing:1.5px;
  background:var(--accent);color:#1a1208;padding:2px 11px;
  border:2px solid #1a1208;transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.35);flex-shrink:0;
}
.mcc-dup-warn{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:2px solid var(--orange);border-radius:2px;
  background:color-mix(in srgb,var(--orange) 12%,var(--surface));
  padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--ink);
}
.mcc-dup-warn a,.mcc-dup-warn button{
  border:none;background:transparent;padding:0;cursor:pointer;
  color:var(--primary);font-weight:800;text-decoration:underline;font-family:var(--f-body);font-size:12.5px;
}
.mcc-input.dup{border-color:var(--orange)!important;}
.mcc-input.strong{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);}

/* ── VUE SORTIES ────────────────────────────────────────────────────── */
.mcc-sorties-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mcc-week-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding-bottom:7px;margin:18px 0 14px;
}
.mcc-week-title{font-family:var(--f-display);font-size:16px;color:var(--ink);}
.mcc-week-count{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);}
.mcc-rel-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));}
.mcc-rel-card{
  background:var(--surface);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--shadow-ink);border-radius:2px;
  overflow:visible;display:flex;flex-direction:column;position:relative;
}
.mcc-rel-cover{aspect-ratio:.66;width:100%;object-fit:cover;display:block;border-bottom:2px solid var(--ink);background:var(--cover-gradient);}
.mcc-auto-badge{
  position:absolute;top:-3px;left:-3px;z-index:2;
  padding:2px 8px;background:var(--accent);color:#1a1208;
  border:2px solid #1a1208;border-radius:2px;transform:rotate(-3deg);
  font-family:var(--f-shout);font-size:12px;letter-spacing:1px;
  box-shadow:2px 2px 0 rgba(0,0,0,.45);
}
.mcc-rel-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:7px;flex:1;}
.mcc-rel-pub{font-family:var(--f-shout);font-size:11.5px;letter-spacing:1.2px;color:var(--primary);text-transform:uppercase;}
.mcc-rel-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-rel-meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--muted);}
.mcc-rel-meta .num{font-weight:700;color:var(--ink-soft);}
.mcc-follow-btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 10px;border-radius:2px;cursor:pointer;
  font-family:var(--f-body);font-size:12px;font-weight:800;
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--shadow-ink);
  background:var(--accent);color:#1a1208;min-height:36px;
}
.mcc-follow-btn.on{box-shadow:none;background:color-mix(in srgb,var(--green) 16%,var(--surface));color:var(--green);}
.mcc-bought-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 10px;border-radius:2px;cursor:pointer;
  font-family:var(--f-body);font-size:11.5px;font-weight:800;
  border:2px solid var(--line);background:var(--surface);color:var(--ink-soft);min-height:34px;
}
.mcc-bought-btn:hover{border-color:var(--ink);}
.mcc-metron{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-weight:600;}
.mcc-metron a{color:var(--blue);}

/* ── VUE WISHLIST ───────────────────────────────────────────────────── */
.mcc-wish-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}
.mcc-wish-card{
  background:var(--surface);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--shadow-ink);border-radius:2px;
  overflow:visible;display:flex;flex-direction:column;position:relative;
}
.mcc-wish-coverwrap{cursor:pointer;border-bottom:2px solid var(--ink);position:relative;overflow:hidden;}
.mcc-prio-badge{
  position:absolute;top:-3px;right:-3px;z-index:2;
  padding:2px 8px;background:var(--primary);color:#fff;
  border:2px solid var(--ink);border-radius:2px;transform:rotate(3deg);
  font-family:var(--f-shout);font-size:11.5px;letter-spacing:1px;
  box-shadow:2px 2px 0 rgba(0,0,0,.45);
}
.mcc-wish-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:6px;flex:1;}
.mcc-wish-title{font-family:var(--f-body);font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25;}
.mcc-wish-line{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.mcc-wish-lbl{font-family:var(--f-shout);font-size:10.5px;letter-spacing:1px;color:var(--muted);}
.mcc-wish-val{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.mcc-wish-val.ok{color:var(--green);}
.mcc-wish-val.high{color:var(--orange);}
.mcc-wish-val input{
  width:64px;padding:2px 4px;border:1.5px solid var(--line);border-radius:2px;
  background:var(--surface);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:700;outline:none;text-align:right;
}
.mcc-wish-actions{display:flex;gap:6px;margin-top:auto;}
.mcc-prio-btn{
  flex:1;padding:6px 8px;border-radius:2px;cursor:pointer;
  font-family:var(--f-body);font-size:11.5px;font-weight:800;
  border:2px solid var(--ink);background:var(--surface);color:var(--ink-soft);min-height:34px;
}
.mcc-prio-btn.on{background:var(--primary);color:#fff;}
.mcc-wish-del{
  width:34px;display:flex;align-items:center;justify-content:center;
  border-radius:2px;cursor:pointer;border:2px solid var(--line);
  background:var(--surface);color:var(--muted);min-height:34px;
}
.mcc-wish-del:hover{border-color:var(--primary);color:var(--primary);}

/* ── VUE STATISTIQUES ───────────────────────────────────────────────── */
.mcc-stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:13px;}
.mcc-stat-card{
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface);border-radius:2px;padding:13px 15px;
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.mcc-stat-shout{font-family:var(--f-shout);font-size:12.5px;letter-spacing:1.5px;color:var(--muted);white-space:nowrap;}
.mcc-stat-valrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.mcc-stat-val{font-family:var(--f-display);font-size:23px;color:var(--ink);line-height:1.1;white-space:nowrap;}
.mcc-stat-val.primary{color:var(--primary);}
.mcc-stat-sub{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.mcc-stats-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start;}
.mcc-stats-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.mcc-panel{
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface);border-radius:2px;padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.mcc-hbar-row{
  display:grid;grid-template-columns:52px 1fr 86px;align-items:center;gap:12px;
  background:transparent;border:none;padding:2px 0;cursor:pointer;text-align:left;width:100%;
  font-family:var(--f-body);
}
.mcc-hbar-row.writer{grid-template-columns:150px 1fr 34px;gap:11px;}
.mcc-hbar-name{font-size:13px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcc-hbar-track{display:block;height:16px;border:2px solid var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);position:relative;}
.mcc-hbar-track.thin{height:13px;}
.mcc-hbar-track > span{position:absolute;inset:0;}
.mcc-hbar-frac{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-align:right;}
.mcc-legend{display:flex;gap:14px;font-size:10.5px;color:var(--muted);align-items:center;flex-wrap:wrap;}
.mcc-legend .sw{width:10px;height:10px;border:1.5px solid var(--ink);display:inline-block;}
.mcc-status-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.mcc-status-tile{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;cursor:pointer;text-align:left;
  background:var(--surface-alt);border:2px solid var(--line);border-radius:2px;
}
.mcc-status-tile:hover{border-color:var(--ink);}
.mcc-status-tile .val{font-family:var(--f-display);font-size:19px;color:var(--ink);}
.mcc-top5-row{
  display:grid;grid-template-columns:18px 32px 1fr auto;align-items:center;gap:11px;
  width:100%;text-align:left;padding:6px 10px;cursor:pointer;
  background:var(--surface);border:2px solid var(--line);border-radius:2px;
  font-family:var(--f-body);
}
.mcc-top5-row:hover{border-color:var(--ink);}
.mcc-top5-rank{font-family:var(--f-shout);font-size:15px;color:var(--muted);}
.mcc-top5-rank.first{color:var(--primary);}
.mcc-top5-cover{width:32px;aspect-ratio:.66;object-fit:cover;border:1px solid var(--line);background:var(--cover-gradient);display:block;}
.mcc-top5-est{font-family:var(--f-display);font-size:14px;color:var(--green);white-space:nowrap;}

/* ── STORY ARCS (overlay re-skinné) ─────────────────────────────────── */
#arcsOverlay{background:var(--bg);}
.arcs-topbar{background:var(--header-bg);border-bottom:3px solid var(--ink);}
.arcs-topbar h2{font-family:var(--f-display);color:var(--on-header);font-weight:400;}
.mcc-arc-card{
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface);border-radius:2px;padding:15px 16px;
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
.mcc-arc-title{font-family:var(--f-display);font-size:15.5px;color:var(--ink);line-height:1.25;display:block;}
.mcc-arc-range{font-family:var(--f-mono);font-size:11px;color:var(--muted);}
.mcc-arc-covers{display:flex;gap:6px;flex-wrap:wrap;}
.mcc-arc-mini{
  width:44px;padding:0;cursor:pointer;border:2px solid var(--ink);
  background:transparent;border-radius:2px;overflow:hidden;position:relative;aspect-ratio:.66;
}
.mcc-arc-mini.missing{border:2px dashed var(--line);}
.mcc-arc-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.mcc-arc-bar{flex:1;display:block;height:12px;border:2px solid var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);position:relative;}
.mcc-arc-bar > span{position:absolute;inset:0;}

/* ── PARAMÈTRES (re-skin) ───────────────────────────────────────────── */
#settingsOverlay{background:var(--bg);}
.mcc-set-topbar{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;height:58px;gap:14px;
}
.mcc-set-back{
  display:inline-flex;align-items:center;gap:6px;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;
}
.mcc-set-title{font-family:var(--f-display);font-size:17px;color:var(--on-header);letter-spacing:.5px;}
.mcc-set-save{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;cursor:pointer;
  border:2px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--primary);color:#fff;font-family:var(--f-body);font-size:13px;font-weight:800;
}
.mcc-set-layout{display:flex;align-items:stretch;min-height:calc(100vh - 58px);}
.mcc-set-nav{
  width:252px;flex-shrink:0;padding:20px 14px;
  background:var(--surface);border-right:2px solid var(--ink);
  display:flex;flex-direction:column;gap:3px;
}
.mcc-set-nav .settings-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;cursor:pointer;text-align:left;border-radius:2px;
  background:transparent;color:var(--ink-soft);
  border:2px solid transparent;
  font-family:var(--f-body);font-size:13.5px;font-weight:700;
  transition:all 120ms ease;white-space:nowrap;min-height:38px;
}
.mcc-set-nav .settings-nav-item:hover{background:var(--surface-alt);}
.mcc-set-nav .settings-nav-item.active{
  background:var(--primary);color:#fff;border-color:var(--ink);
  box-shadow:3px 3px 0 var(--shadow-ink);
}
.mcc-set-ico{display:flex;flex-shrink:0;}
.settings-nav-sep{height:1px;background:var(--line);margin:10px 4px;}
.mcc-set-navspring{flex:1;}
.mcc-logout-item{border:2px solid var(--line)!important;color:var(--muted)!important;}
.mcc-logout-item:hover{border-color:var(--ink)!important;color:var(--ink)!important;}
.mcc-set-content{flex:1;min-width:0;padding:24px 26px 60px;overflow-y:auto;background:var(--bg);}
.settings-panel{display:none;max-width:720px;flex-direction:column;gap:16px;}
.settings-panel.active{display:flex;}
.settings-panel-title{margin:0 0 4px;font-family:var(--f-display);font-size:24px;color:var(--ink);font-weight:400;}
.mcc-set-card{
  border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface)!important;border-radius:2px!important;padding:18px 20px!important;
  display:flex;flex-direction:column;gap:16px;
}
.mcc-set-label{font-family:var(--f-shout);font-size:13px;letter-spacing:1.5px;color:var(--muted);}
.mcc-set-divider{display:block;border-top:1.5px dashed var(--line);}
.mcc-set-hint{font-size:11.5px;color:var(--muted);font-style:italic;}
.mcc-set-text{margin:0;font-size:13.5px;font-weight:500;color:var(--ink-soft);line-height:1.55;}
.mcc-set-rowflex{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;}
.mcc-btn-row{display:flex;gap:9px;flex-wrap:wrap;}
.mcc-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.mcc-chip-sel{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;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:13px;font-weight:800;
  transition:all 120ms ease;min-height:36px;
}
.mcc-chip-sel.on{border-color:var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);background:var(--accent);color:#1a1208;}
.mcc-notif-row{display:flex;align-items:center;gap:14px;}
.mcc-notif-txt{min-width:0;}
.mcc-notif-title{display:block;font-size:13px;font-weight:800;color:var(--ink);}
.mcc-notif-desc{font-size:12px;font-weight:500;color:var(--muted);}
.mcc-history-list{display:flex;flex-direction:column;}
.mcc-hist-row{
  display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;
  padding:11px 4px;border-top:1.5px dashed var(--line);
}
.mcc-hist-row:first-child{border-top:none;}
.mcc-hist-date{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);}
.mcc-hist-action{display:block;font-size:13px;font-weight:800;color:var(--ink);}
.mcc-hist-detail{font-family:var(--f-mono);font-size:11px;color:var(--muted);}
.mcc-hist-restore{
  padding:5px 10px;border:2px solid var(--line);border-radius:2px;background:var(--surface);
  color:var(--ink-soft);font-family:var(--f-body);font-size:11.5px;font-weight:800;cursor:pointer;
}
.mcc-hist-restore:hover{border-color:var(--ink);}
.mcc-danger-card{border-color:var(--primary)!important;}
.mcc-danger-title{font-family:var(--f-shout);font-size:16px;letter-spacing:1.5px;color:var(--primary);}
.mcc-danger-text{color:var(--primary);}
.avatar-circle{
  width:62px;height:62px;border-radius:99px;flex-shrink:0;
  background:var(--primary);color:#fff;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:20px;cursor:pointer;overflow:hidden;
}
.avatar-circle img{width:100%;height:100%;object-fit:cover;}
.avatar-wrap{display:flex;align-items:center;gap:16px;}
.avatar-hint{font-size:13.5px;font-weight:700;color:var(--ink);}
.upload-limit-hint{font-family:var(--f-mono);font-size:11px;color:var(--muted);}

/* Aperçus de thème */
.mcc-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.mcc-theme-card{
  display:flex;flex-direction:column;padding:0;cursor:pointer;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  border-radius:2px;overflow:hidden;text-align:left;
}
.mcc-theme-card.active{border:3px solid var(--primary);box-shadow:4px 4px 0 var(--shadow-ink);}
.mcc-theme-head{display:flex;align-items:center;gap:5px;height:22px;border-bottom-style:solid;border-bottom-width:2px;padding:0 8px;}
.mcc-theme-dot{width:9px;height:9px;border-radius:99px;}
.mcc-theme-bar{flex:1;height:7px;background:rgba(255,255,255,.25);border-radius:2px;}
.mcc-theme-covers{display:flex;gap:6px;padding:10px 10px 4px;}
.mcc-theme-cover{width:26px;height:36px;}
.mcc-theme-foot{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 9px;font-family:var(--f-body);font-size:12.5px;font-weight:800;}

/* Lien de partage (re-skin) */
.share-url-row{display:flex;gap:0;align-items:stretch;width:100%;}
.share-url-input{
  flex:1;min-width:0;padding:10px 12px;
  border:2px solid var(--ink);border-right:none;border-radius:2px 0 0 2px;
  background:var(--surface-alt);color:var(--ink-soft);
  font-family:var(--f-mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;
}
.share-copy-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 15px;cursor:pointer;
  border:2px solid var(--ink);border-radius:0 2px 2px 0;
  background:var(--accent);color:#1a1208;font-family:var(--f-body);font-size:13px;font-weight:800;
}
.share-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);}

/* ── HARMONISATION DES OVERLAYS LEGACY (scanner, import, SA, bug, légal…) ── */
.scanner-box,.import-box,.batch-box,.bug-modal-box,.legal-panel,
.delete-modal-panel,.sa-modal-panel,.ssm-box,.auth-card,
#collectionModalOverlay > div{
  border-radius:2px!important;
  border:3px solid var(--ink)!important;
  box-shadow:8px 8px 0 var(--shadow-ink)!important;
  background:var(--surface)!important;
  color:var(--ink)!important;
}
.sa-modal-header h2,.import-title,.batch-title,.legal-header h2{font-family:var(--f-display);font-weight:400;}
#superAdminOverlay{background:var(--bg);}
.sa-topbar{background:var(--header-bg)!important;border-bottom:3px solid var(--ink);}
#bugReportBtn{
  border-radius:2px!important;border:2px solid var(--ink)!important;
  box-shadow:3px 3px 0 var(--shadow-ink)!important;background:var(--accent)!important;color:#1a1208!important;
}
.bottom-nav{
  background:var(--surface)!important;border-top:2px solid var(--ink)!important;
}
.bottom-nav-item{color:var(--muted)!important;font-family:var(--f-body);}
.bottom-nav-item.active{color:var(--primary)!important;}
.bnav-badge{background:var(--primary)!important;color:#fff!important;border:1.5px solid var(--ink);}
#appFooter{background:var(--surface);border-top:2px solid var(--line);color:var(--muted);}
#appFooter a{color:var(--ink-soft);}
.mobile-stats-bar{background:var(--surface-alt);border:2px solid var(--line);border-radius:2px;color:var(--ink-soft);font-family:var(--f-mono);}
.mobile-filter-chip{
  border:2px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink-soft);
  font-family:var(--f-body);font-weight:800;
}
.mobile-filter-chip.active{background:var(--accent)!important;color:#1a1208!important;border-color:var(--ink)!important;box-shadow:2px 2px 0 var(--shadow-ink);}
.progress-section{
  background:var(--surface);border:2px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 var(--shadow-ink);
}
.progress-title{font-family:var(--f-shout);letter-spacing:1.2px;color:var(--muted);}
.progress-percent{font-family:var(--f-display);color:var(--primary);}
.progress-bar{border:1.5px solid var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:0;}
.progress-fill{background:var(--primary);border-radius:0;}
.series-chips-bar .series-chip{
  border:2px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink-soft);font-weight:800;
}
.series-chips-bar .series-chip.active{background:var(--accent);color:#1a1208;border-color:var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .mcc-logo-lockup .mcc-logo-side:last-child{display:none;}
}
@media (max-width:980px){
  .mcc-logo-text .mcc-logo-side{display:none;}
}
@media (max-width:900px){
  .mcc-menu-btn{display:flex;}
  .mcc-layout{grid-template-columns:minmax(0,1fr);}
  .mcc-layout > .mcc-main{grid-column:1;}
  .mcc-sidewrap{
    position:fixed;top:0;left:0;bottom:0;z-index:95;
    transform:translateX(-110%);transition:transform 200ms ease;
    box-shadow:8px 0 0 rgba(0,0,0,.25);
  }
  .mcc-sidewrap.open{transform:translateX(0);}
  .mcc-sidebar{position:static;height:100%;top:0;width:280px;max-width:84vw;}
  .mcc-side-close{display:flex;}
  .mcc-side-backdrop{
    display:none;position:fixed;inset:0;z-index:94;background:rgba(10,7,3,.5);
  }
  .mcc-sidewrap.open ~ * .mcc-side-backdrop{display:block;}
  .mcc-layout.drawer-open .mcc-side-backdrop{display:block;}
  .mcc-kbd{display:none;}
  .mcc-add-label{display:none;}
  .mcc-search{max-width:none;}
  .mcc-main{padding:16px 14px 96px;}
  .modal{padding:0;}
  .modal-content.mcc-modal{border-width:0!important;box-shadow:none!important;height:100%;max-height:100vh;border-radius:0;}
  /* (anciennes règles .mcc-modal-grid/.mcc-modal-covercol/.mcc-modal-coverframe
     retirées : classes jamais émises par le markup rendu. La cover mobile réelle
     est gérée sur .mcc-popin-v2 .modal-col-cover — voir bloc ~5760.) */
  .mcc-foot-label{display:none;}
  .mcc-row{grid-template-columns:34px 48px 1fr 20px;}
  .mcc-row-badges,.mcc-row-price{display:none;}
  .mcc-stats-cols{grid-template-columns:1fr;}
  /* Paramètres : nav réduite aux icônes (56px). Spécificité #id + 2 classes +
     !important pour battre le garde-fou legacy #settingsOverlay .settings-nav
     {width:252px!important} (~5455) et le bloc legacy ≤640px (bande horizontale). */
  /* Layout en rangée (rail gauche + contenu à côté), bat le legacy 640px
     #settingsOverlay .settings-layout{flex-direction:column} (~2799). */
  #settingsOverlay .settings-layout.mcc-set-layout{flex-direction:row!important;}
  #settingsOverlay .settings-nav.mcc-set-nav{width:56px!important;flex-direction:column!important;overflow-x:visible!important;height:auto!important;border-right:2px solid var(--ink)!important;border-bottom:none!important;padding:16px 8px!important;}
  #settingsOverlay .settings-nav.mcc-set-nav .settings-nav-item{justify-content:center;padding-left:0;padding-right:0;white-space:nowrap;flex-shrink:0;}
  .mcc-set-navlabel{display:none;}
  .mcc-set-content{padding:18px 14px 80px;}
}
@media (min-width:901px){
  .mcc-side-backdrop{display:none!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  REFONTE PASSION POP — RE-SKIN DES INTERNES LEGACY (fiche, formulaires) ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Corps de la fiche : 2 colonnes maquette (cover 252px | formulaire), la
   colonne "sidebar" legacy (estimation, suivi, suppression) coule sous le
   formulaire dans la colonne droite. */
/* La fiche : le body scrolle (block), la grille prend sa hauteur de contenu —
   sinon le flex legacy étire la grille et écrase les rangées (chevauchement). */
#modalBody{display:block!important;}
.modal-layout{
  display:grid;grid-template-columns:252px minmax(0,1fr);
  grid-template-areas:"cover details" "cover sidebar";
  align-content:start;min-height:100%;
}
.modal-col-cover{
  grid-area:cover;align-self:stretch;padding:18px;background:var(--surface-alt);
  border-right:2px solid var(--ink);display:flex;flex-direction:column;gap:12px;
}
.modal-col-details{grid-area:details;padding:18px 20px 8px;display:flex;flex-direction:column;gap:18px;min-width:0;}
.modal-col-sidebar{grid-area:sidebar;padding:0 20px 22px;display:flex;flex-direction:column;gap:12px;min-width:0;background:transparent!important;}
.modal-cover-est-row{display:none;}

/* Sections du formulaire — étiquette Bangers + barre primary */
.modal-section{border:none;padding:0;margin:0;}
.modal-section-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  padding:0 0 10px;background:transparent;border:none;
}
.modal-section-title{
  font-family:var(--f-shout);font-size:15px;letter-spacing:1.5px;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.modal-section-title::before{content:'';width:18px;height:3px;background:var(--primary);display:inline-block;}
.modal-section-chevron{color:var(--muted);font-size:11px;transition:transform 150ms ease;}
.modal-section.collapsed .modal-section-chevron{transform:rotate(-90deg);}
.modal-section.collapsed .modal-section-body{display:none;}
.modal-section-body{padding-bottom:6px;}

/* Grille des champs */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.detail-item{display:flex;flex-direction:column;gap:5px;min-width:0;}
.detail-label{
  font-family:var(--f-shout);font-size:12px;letter-spacing:1.2px;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.detail-value{font-size:13.5px;font-weight:600;color:var(--ink);}
.edit-input,.edit-select,select.edit-input,textarea.edit-input{
  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;
}
.edit-input:focus,.edit-select:focus{border-color:var(--ink);}
.edit-input[readonly]{background:var(--surface-alt);color:var(--muted);}

/* Pastilles toggle (remplacent les checkbox « Non » — §6) */
.modal-checks-row{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px;}
.modal-check-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;cursor:pointer;border-radius:2px;
  font-family:var(--f-body);font-size:12.5px;font-weight:800;
  border:2px solid var(--line);background:var(--surface);color:var(--muted);
  transition:all 130ms ease;min-height:34px;user-select:none;
}
.modal-check-chip input{accent-color:var(--green);width:14px;height:14px;}
.modal-check-chip:has(input:checked){
  border-color:var(--ink);box-shadow:2px 2px 0 var(--shadow-ink);
  background:color-mix(in srgb,var(--green) 18%,var(--surface));color:var(--green);
}
.checkbox-label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12.5px;font-weight:800;color:var(--ink-soft);
}
.checkbox-label input{accent-color:var(--green);width:15px;height:15px;}
.checkbox-text{font-weight:800;}

/* Cover + lien changer la photo */
.cover-preview-container{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow-ink);overflow:hidden;background:var(--surface);}
.cover-preview{position:relative;}
.modal-cover-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:8px 10px;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:12.5px;font-weight:800;text-decoration:none;
}
.modal-cover-link:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-ink);}

/* Cartes estimation / plus-value / suivi (colonne droite) */
.modal-est-card,.modal-pv-card,.modal-sidebar-section{
  border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;
  background:var(--surface-alt)!important;border-radius:2px!important;padding:13px 15px!important;
  color:var(--ink)!important;
}
.modal-est-label,.modal-pv-label,.modal-sidebar-title{
  font-family:var(--f-shout);font-size:13px;letter-spacing:1.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.modal-pv-card.positive .modal-pv-value{color:var(--green);}
.modal-pv-card.negative .modal-pv-value{color:var(--primary);}
.modal-pv-value{font-family:var(--f-display);font-size:19px;}
.modal-pv-detail{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.modal-est-reestimate{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  padding:6px 11px;cursor:pointer;border:2px solid var(--ink);border-radius:2px;
  box-shadow:2px 2px 0 var(--shadow-ink);background:var(--surface);color:var(--ink-soft);
  font-family:var(--f-body);font-size:12px;font-weight:800;
}
.modal-sidebar-action{
  padding:3px 9px;border:1.5px solid var(--line);border-radius:2px;background:var(--surface);
  color:var(--ink-soft);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f-body);
}
.modal-delete-link{
  border:2px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:2px;
  background:var(--surface);color:var(--primary);cursor:pointer;
  padding:8px 12px;font-family:var(--f-body);font-size:12.5px;font-weight:800;text-align:center;
}
.modal-delete-link:hover{border-color:var(--primary);}

/* Tags (fiche) */
.tag-input-container,.tag-chips-wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.tag-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);
  font-size:11.5px;font-weight:800;border:1.5px solid color-mix(in srgb,var(--blue) 40%,transparent);
}
.tag-chip button,.tag-chip .tag-chip-x{background:none;border:none;color:inherit;cursor:pointer;font-size:11px;padding:0;line-height:1;}
.tag-help{font-size:11px;color:var(--muted);font-style:italic;margin-top:6px;}
#comicTagInput input,.tag-input-container input{
  padding:6px 10px;border:2px solid var(--line);border-radius:2px;min-width:140px;
  background:var(--surface);color:var(--ink);font-family:var(--f-body);font-size:12.5px;font-weight:600;outline:none;
}

/* Tooltip CGC */
.condition-tooltip,.cgc-tooltip{
  background:var(--surface)!important;border:2px solid var(--ink)!important;
  box-shadow:5px 5px 0 var(--shadow-ink)!important;border-radius:2px!important;color:var(--ink)!important;
}

/* Login — harmonisation tokens (style Passion Pop déjà en place) */
.login-overlay{background:var(--bg);}
.login-box{background:var(--surface)!important;}
.seo-login-content{color:var(--ink-soft);}

/* Premium gate (Sorties) */
.pl-premium-overlay{position:fixed;inset:0;z-index:130;background:rgba(10,7,3,.62);display:flex;align-items:center;justify-content:center;padding:20px;}
.pl-premium-modal{
  position:relative;width:min(440px,100%);background:var(--surface);
  border:3px solid var(--ink);box-shadow:8px 8px 0 var(--shadow-ink);border-radius:2px;
  padding:24px;color:var(--ink);
}
.pl-premium-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:2px solid var(--ink);border-radius:2px;background:var(--surface-alt);cursor:pointer;color:var(--ink);}
.pl-premium-features{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.pl-premium-feat{padding:8px 12px;border:2px solid var(--line);border-radius:2px;background:var(--surface-alt);font-size:13px;font-weight:700;}
.pl-premium-cta{
  display:flex;align-items:center;justify-content:center;padding:11px;
  background:var(--primary);color:#fff;border:2px solid var(--ink);border-radius:2px;
  box-shadow:3px 3px 0 var(--shadow-ink);font-weight:800;text-decoration:none;font-size:14px;
}

/* Responsive fiche ≤900px (plein écran, colonnes empilées) */
@media (max-width:900px){
  .modal-layout{grid-template-columns:1fr;grid-template-areas:"cover" "details" "sidebar";}
  .modal-col-cover{
    flex-direction:row;align-items:flex-start;
    border-right:none;border-bottom:2px solid var(--ink);
  }
  .modal-col-cover .cover-preview-container{width:120px;flex-shrink:0;}
  .detail-grid{grid-template-columns:1fr;}
  .mcc-selbar{bottom:74px;}
  .mcc-toast{bottom:132px;}
}

/* ── Garde-fous overlays (les règles legacy vivaient dans un @media ≤768px) ── */
#importOverlay{position:fixed;inset:0;background:rgba(10,7,3,.62);z-index:4000;display:none;align-items:center;justify-content:center;padding:1rem;}
#importOverlay.show{display:flex;}
.import-dropzone{border:2px dashed var(--line);border-radius:2px;padding:2rem;text-align:center;cursor:pointer;color:var(--muted);}
.import-dropzone.drag-over{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);}
.import-dropzone input[type=file]{display:none;}
.import-template-btn{display:flex;align-items:center;gap:.5rem;background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green);border:2px solid var(--green);border-radius:2px;padding:.6rem 1rem;font-size:.85rem;font-weight:800;cursor:pointer;width:fit-content;}
.import-preview{overflow-x:auto;border:2px solid var(--line);border-radius:2px;}
.import-actions{display:flex;gap:.75rem;justify-content:flex-end;}
.import-actions .btn-cancel{padding:8px 15px;border:2px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink-soft);font-weight:800;cursor:pointer;}
.import-actions .btn-import{padding:8px 15px;border:2px solid var(--ink);border-radius:2px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--shadow-ink);}
.import-actions .btn-import:disabled{opacity:.4;box-shadow:none;}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  PARAMÈTRES — override Passion Pop (bat le legacy sombre #settingsOverlay) ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
#settingsOverlay{background:var(--bg)!important;color:var(--ink)!important;}
#settingsOverlay .settings-topbar,#settingsOverlay .mcc-set-topbar{
  background:var(--header-bg)!important;border-bottom:3px solid var(--ink)!important;height:58px!important;color:var(--on-header)!important;padding:0 18px!important;
}
#settingsOverlay .settings-topbar-title,#settingsOverlay .mcc-set-title{color:var(--on-header)!important;font-family:var(--f-display);}
#settingsOverlay .settings-back-btn{background:var(--accent)!important;color:#1a1208!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;font-family:var(--f-body);font-weight:800;}
#settingsOverlay .settings-topbar-save{background:var(--primary)!important;color:#fff!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;font-family:var(--f-body);font-weight:800;}
#settingsOverlay .settings-nav{background:var(--surface)!important;border-right:2px solid var(--ink)!important;width:252px!important;padding:20px 14px!important;gap:3px!important;}
#settingsOverlay .settings-nav-item{color:var(--ink-soft)!important;border:2px solid transparent!important;border-left:2px solid transparent!important;border-radius:2px!important;font-family:var(--f-body);font-weight:700;}
#settingsOverlay .settings-nav-item:hover{background:var(--surface-alt)!important;color:var(--ink)!important;}
#settingsOverlay .settings-nav-item.active{background:var(--primary)!important;color:#fff!important;border:2px solid var(--ink)!important;border-left-color:var(--ink)!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;}
#settingsOverlay .settings-nav-sep{background:var(--line)!important;}
#settingsOverlay .mcc-logout-item{border:2px solid var(--line)!important;color:var(--muted)!important;}
#settingsOverlay .settings-content{background:var(--bg)!important;padding:24px 26px 60px!important;}
#settingsOverlay .settings-panel-title{color:var(--ink)!important;border-bottom:none!important;font-family:var(--f-display);font-weight:400;font-size:24px;}
#settingsOverlay .settings-block,#settingsOverlay .mcc-set-card{
  background:var(--surface)!important;border:2px solid var(--ink)!important;border-radius:2px!important;
  box-shadow:3px 3px 0 var(--shadow-ink)!important;overflow:visible!important;padding:18px 20px!important;
}
#settingsOverlay .mcc-danger-card{border-color:var(--primary)!important;}
#settingsOverlay .settings-row{border-bottom:none!important;padding:0!important;}
#settingsOverlay .settings-row-label,#settingsOverlay .mcc-set-label,#settingsOverlay .mcc-field-label{color:var(--muted)!important;font-family:var(--f-shout);}
#settingsOverlay .settings-row-content{color:var(--ink)!important;}
#settingsOverlay .settings-input,#settingsOverlay .mcc-input{
  background:var(--surface)!important;color:var(--ink)!important;border:2px solid var(--line)!important;border-radius:2px!important;
  font-family:var(--f-body);font-weight:600;
}
#settingsOverlay .settings-input[readonly],#settingsOverlay .mcc-input[readonly]{background:var(--surface-alt)!important;color:var(--muted)!important;}
#settingsOverlay .settings-input:focus,#settingsOverlay .mcc-input:focus{border-color:var(--ink)!important;}
#settingsOverlay .settings-input::placeholder{color:var(--muted)!important;}
#settingsOverlay .avatar-hint{color:var(--ink)!important;font-weight:700;}
#settingsOverlay .upload-limit-hint{color:var(--muted)!important;font-family:var(--f-mono);}
#settingsOverlay .pill-btn,#settingsOverlay .lang-btn{
  background:var(--surface)!important;color:var(--ink-soft)!important;border:2px solid var(--line)!important;border-radius:2px!important;
  font-family:var(--f-body);font-weight:800;padding:7px 13px!important;
}
#settingsOverlay .pill-btn.selected,#settingsOverlay .lang-btn.selected{background:var(--accent)!important;color:#1a1208!important;border-color:var(--ink)!important;box-shadow:2px 2px 0 var(--shadow-ink)!important;}
#settingsOverlay .danger-zone-btn,#settingsOverlay .mcc-btn-danger{
  background:var(--surface)!important;color:var(--primary)!important;border:2px solid var(--primary)!important;border-radius:2px!important;
  font-family:var(--f-body);font-weight:800;
}
#settingsOverlay .share-gen-btn{background:var(--accent)!important;color:#1a1208!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;}
#settingsOverlay .mcc-btn-primary{background:var(--primary)!important;color:#fff!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;}
#settingsOverlay .mcc-btn-accent{background:var(--accent)!important;color:#1a1208!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;}
#settingsOverlay .mcc-btn-ghost{background:var(--surface)!important;color:var(--ink-soft)!important;border:2px solid var(--ink)!important;border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink)!important;}
#settingsOverlay strong,#settingsOverlay #changePasswordMsg,#settingsOverlay .mcc-set-text{color:var(--ink-soft)!important;}
#settingsOverlay .mcc-set-hint{color:var(--muted)!important;}
#settingsOverlay .share-link-input,#settingsOverlay .share-url-input{color:var(--ink-soft)!important;}

/* ── Placeholder de cover rayé (maquette) ───────────────────────────── */
.mcc-cover-ph{
  position:relative;display:block;aspect-ratio:.66;width:100%;overflow:hidden;
}
.mcc-cover-ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
}
.mcc-ph-label{
  position:absolute;bottom:10px;right:8px;z-index:1;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.6px;
  color:rgba(255,255,255,.8);text-transform:lowercase;pointer-events:none;
}
.mcc-cover-over{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block;
}
.mcc-card-coverwrap{aspect-ratio:.66;}
.mcc-cover-num{z-index:2;}
.mcc-heart-btn,.mcc-sel-box{z-index:3;}
.mcc-card-actions{z-index:4;}
.mcc-row-cover.mcc-cover-ph{width:34px;aspect-ratio:.66;}
.mcc-top5-cover.mcc-cover-ph{width:32px;aspect-ratio:.66;}
.mcc-serie-cover.mcc-cover-ph{width:30px;height:42px;aspect-ratio:auto;flex-shrink:0;border:1.5px solid var(--ink);}
.mcc-serie-cover.mcc-cover-ph::after{background:none;}
.mcc-rel-covwrap{position:relative;display:block;aspect-ratio:.66;border-bottom:2px solid var(--ink);overflow:hidden;}
.mcc-rel-covwrap .mcc-cover-ph{position:absolute;inset:0;}
.mcc-wish-coverwrap{aspect-ratio:.66;}
.mcc-wish-coverwrap .mcc-cover-ph,.mcc-wish-coverwrap .mcc-card-cover{position:absolute;inset:0;}
.mcc-wish-coverwrap{position:relative;}

/* ── Segments Confort/Compact + grille/liste : neutraliser le legacy ── */
.mcc-seg{background:var(--surface)!important;padding:0!important;border:2px solid var(--ink)!important;border-radius:2px!important;gap:0!important;}
.mcc-seg .mcc-seg-btn,.mcc-seg .view-btn{
  border:none!important;border-radius:0!important;box-shadow:none!important;
  background:var(--surface)!important;color:var(--muted)!important;
  height:34px!important;margin:0!important;
}
.mcc-seg .view-btn{width:36px!important;padding:0!important;font-size:0!important;}
.mcc-seg .mcc-seg-btn + .mcc-seg-btn{border-left:2px solid var(--ink)!important;}
.mcc-seg .mcc-seg-btn.active{background:var(--ink)!important;color:var(--bg)!important;}

/* ── Sidebar VUES : espacements stricts maquette ── */
.mcc-views-nav{gap:3px;}
.mcc-view-item{min-height:36px;padding:9px 11px;}
@media (pointer:coarse){.mcc-view-item{min-height:44px;}}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FEEDBACK / BUG REPORT — re-skin Passion Pop (bat le legacy sombre)    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* Bouton flottant : bulle pop accent, carrée, ombre plate, wiggle au survol */
#bugReportBtn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:10000;
  width:48px;height:48px;border-radius:2px!important;
  background:var(--accent)!important;color:#1a1208!important;
  border:2px solid var(--ink)!important;
  box-shadow:3px 3px 0 var(--shadow-ink)!important;
  font-size:1.25rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-2deg);
  transition:transform 130ms ease,box-shadow 130ms ease;
}
#bugReportBtn:hover{
  transform:rotate(2deg) translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--shadow-ink)!important;
}
#bugReportBtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow-ink)!important;}

/* La bulle feedback flottante (z-index 10000) passait AU-DESSUS des overlays et
   chevauchait leurs boutons d'action (Vendu→Manquant de la fiche, Enregistrer des
   Paramètres) — flagrant en mobile où les pop-ins sont plein écran. On la masque
   dès qu'un overlay plein écran est ouvert (sélecteurs gated par classe = fiables). */
body:has(#modal.show) #bugReportBtn,
body:has(#settingsOverlay.show) #bugReportBtn,
body:has(#importOverlay.show) #bugReportBtn,
body:has(#batchOverlay.show) #bugReportBtn,
body:has(#scannerOverlay.show) #bugReportBtn,
body:has(#arcsOverlay.open) #bugReportBtn,
body:has(#arcDetailOverlay.open) #bugReportBtn,
body:has(.mcc-layout.drawer-open) #bugReportBtn{ display:none !important; }

/* Overlay + boîte */
#bugReportModal{background:rgba(10,7,3,.62)!important;padding:1rem;}
.bug-modal-box{
  background:var(--surface)!important;color:var(--ink)!important;
  border:3px solid var(--ink)!important;border-radius:2px!important;
  box-shadow:8px 8px 0 var(--shadow-ink)!important;
  max-width:500px;
}

/* Bandeau : fond thème + étiquette inclinée (cohérent pop-ins) */
.bug-modal-header{
  background:var(--header-bg)!important;
  border-bottom:3px solid var(--ink);
  padding:12px 16px!important;color:var(--on-header)!important;
  display:flex;align-items:center;gap:12px;
}
.bug-modal-header h3{
  margin:0;flex:1;
  font-family:var(--f-display);font-size:16px;font-weight:400;
  letter-spacing:.3px;color:var(--on-header)!important;
}
.bug-modal-close{
  width:34px;height:34px;border-radius:2px!important;
  background:rgba(255,255,255,.14)!important;
  border:2px solid rgba(255,255,255,.45)!important;
  color:var(--on-header)!important;cursor:pointer;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  transition:background 120ms ease;
}
.bug-modal-close:hover{background:rgba(255,255,255,.3)!important;}

/* Corps */
.bug-modal-body{background:var(--surface)!important;padding:18px 20px 20px!important;gap:14px!important;}
.bug-modal-label{
  font-family:var(--f-shout)!important;font-size:12px!important;
  letter-spacing:1.2px!important;text-transform:uppercase;
  color:var(--muted)!important;margin-bottom:6px!important;font-weight:400!important;
}

/* Sélecteur Bug / Feature : pastilles toggle pop */
.bug-type-btn{
  flex:1;padding:8px 12px!important;border-radius:2px!important;
  border:2px solid var(--line)!important;
  background:var(--surface)!important;color:var(--ink-soft)!important;
  font-family:var(--f-body);font-size:12.5px!important;font-weight:800!important;
  cursor:pointer;transition:all 130ms ease;min-height:36px;
}
.bug-type-btn.active{
  border:2px solid var(--ink)!important;
  box-shadow:2px 2px 0 var(--shadow-ink)!important;
  background:var(--accent)!important;color:#1a1208!important;
}
.bug-type-btn:hover:not(.active){border-color:var(--ink)!important;color:var(--ink)!important;}

/* Champs */
.bug-modal-input,.bug-modal-textarea{
  background:var(--surface)!important;color:var(--ink)!important;
  border:2px solid var(--line)!important;border-radius:2px!important;
  padding:9px 11px!important;font-family:var(--f-body);font-size:13.5px!important;font-weight:600;
}
.bug-modal-input::placeholder,.bug-modal-textarea::placeholder{color:var(--muted)!important;}
.bug-modal-input:focus,.bug-modal-textarea:focus{border-color:var(--ink)!important;}

/* Upload screenshot : zone pointillée pop */
.bug-img-upload-label{
  background:var(--surface)!important;color:var(--muted)!important;
  border:2px dashed var(--line)!important;border-radius:2px!important;
  padding:10px 12px!important;font-size:12.5px;font-weight:700;
  transition:all 130ms ease;
}
.bug-img-upload-label:hover{border-color:var(--ink)!important;color:var(--ink)!important;background:var(--surface-alt)!important;}
.bug-img-preview{border:2px solid var(--ink);border-radius:2px!important;box-shadow:3px 3px 0 var(--shadow-ink);}

/* Envoi : bouton primaire pop */
.bug-modal-submit{
  background:var(--primary)!important;color:#fff!important;
  border:2px solid var(--ink)!important;border-radius:2px!important;
  box-shadow:3px 3px 0 var(--shadow-ink)!important;
  padding:10px!important;font-family:var(--f-body);font-size:13.5px!important;
  font-weight:800!important;letter-spacing:.2px;
  transition:transform 110ms ease,box-shadow 110ms ease,opacity 110ms ease;
}
.bug-modal-submit:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-ink)!important;opacity:1!important;}
.bug-modal-submit:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow-ink)!important;}
.bug-modal-submit:disabled{opacity:.45;box-shadow:none!important;}
.bug-modal-msg{font-size:.82rem;text-align:center;font-weight:700;}

/* ── Fiche maquette v2 : sections, pastilles, switch, lecture seule ── */
.mcc-msec{display:flex;flex-direction:column;gap:12px;}
.mcc-popin-v2 .modal-col-details{gap:20px;}
.mcc-ro{display:block;font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 0 2px;}
#modalStatusTabs:empty{display:none!important;border:none!important;}
.mcc-pill{cursor:pointer;user-select:none;}
.mcc-pill input{position:absolute;opacity:0;pointer-events:none;}
.mcc-switch{cursor:pointer;}
.mcc-switch input{position:absolute;opacity:0;pointer-events:none;}
#sidebarEstimation:empty,#sidebarPlusValue:empty{display:none;}
.condition-info-icon{cursor:help;font-size:11px;}
.mcc-popin-v2 .cover-preview-container img{width:100%;display:block;}

/* ── Story Arcs : overlay + grille maquette ── */
.arcs-body{padding:22px 24px 48px;max-width:1200px;margin:0 auto;}
.arcs-filter-bar,#arcsFilterBar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.arcs-grid,#arcsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.mcc-arc-card{cursor:pointer;}
.mcc-arc-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow-ink);transition:transform 130ms ease,box-shadow 130ms ease;}
.mcc-arc-title{display:block;font-family:var(--f-display);font-size:15.5px;color:var(--ink);line-height:1.25;}
.mcc-arc-range{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:3px;}
.mcc-arc-mini{flex-shrink:0;}
.mcc-arc-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.mcc-arc-mini .mcc-cover-ph{position:absolute;inset:0;}
.mcc-arc-mini.missing .mcc-cover-ph{filter:grayscale(.9);opacity:.5;}
.arcs-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:58px;}
.arcs-topbar h2{font-size:17px;letter-spacing:.5px;margin:0;}
.arcs-topbar-btn{
  display:inline-flex;align-items:center;gap:6px;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;
}
/* Détail d'arc */
#arcDetailOverlay{background:var(--bg);}
.arcdet-topbar{background:var(--header-bg);border-bottom:3px solid var(--ink);display:flex;align-items:center;gap:14px;padding:0 18px;height:58px;}
.arcdet-topbar-title{font-family:var(--f-display);font-size:16px;color:var(--on-header);}
.arcdet-body{padding:22px 24px 48px;max-width:980px;margin:0 auto;}
.arcdet-hero{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);
  background:var(--surface);border-radius:2px;padding:16px 18px;margin-bottom:16px;
}
.arcdet-hero-covers{display:flex;gap:6px;flex-shrink:0;}
.arcdet-hero-cover{width:64px;aspect-ratio:.66;object-fit:cover;border:2px solid var(--ink);display:block;background:var(--cover-gradient);}
.arcdet-hero-cover-ph{width:64px;aspect-ratio:.66;display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);font-size:20px;}
.arcdet-hero-info{flex:1;min-width:240px;}
.arcdet-hero-name{font-family:var(--f-display);font-size:19px;color:var(--ink);margin-bottom:6px;}
.arcdet-hero-desc{font-size:13px;font-weight:500;color:var(--ink-soft);line-height:1.55;margin-bottom:12px;}
.arcdet-hero-stats{display:flex;gap:10px;flex-wrap:wrap;}
.arcdet-stat{
  border:2px solid var(--line);border-radius:2px;background:var(--surface-alt);
  padding:7px 13px;text-align:center;
}
.arcdet-stat-val{font-family:var(--f-display);font-size:16px;color:var(--ink);}
.arcdet-stat-val.complete{color:var(--green);}
.arcdet-stat-lbl{font-family:var(--f-shout);font-size:10.5px;letter-spacing:1px;color:var(--muted);}
.arcdet-issues{display:flex;flex-direction:column;gap:8px;}
.arcdet-issue{
  display:grid;grid-template-columns:24px 34px 1fr auto;align-items:center;gap:12px;
  padding:7px 12px;background:var(--surface);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--shadow-ink);border-radius:2px;
}
.arcdet-issue.not-subscribed{opacity:.55;border-style:dashed;border-color:var(--line);box-shadow:none;}
.arcdet-issue-num{font-family:var(--f-shout);font-size:14px;color:var(--muted);text-align:center;}
.arcdet-issue-cover{width:34px;aspect-ratio:.66;object-fit:cover;border:1px solid var(--line);display:block;background:var(--cover-gradient);}
.arcdet-issue-cover-ph{width:34px;aspect-ratio:.66;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);color:var(--muted);font-size:12px;}
.arcdet-issue-title{font-size:13px;font-weight:800;color:var(--ink);}
.arcdet-issue-sub{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);}
.arcdet-issue-status{
  font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:1px 7px;border:1.5px solid var(--line);color:var(--muted);white-space:nowrap;
}
.arcdet-issue-status.owned{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);border-color:var(--green);}
.arcdet-issue-status.missing{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);}

/* ── Paramètres : barre Enregistrer en bas du formulaire (sticky, à droite) ── */
.mcc-set-topbar-spacer{width:96px;flex-shrink:0;}
.mcc-set-savebar{
  position:sticky;bottom:0;z-index:5;
  max-width:720px;display:flex;justify-content:flex-end;
  padding:16px 0 4px;margin-top:8px;
  background:linear-gradient(180deg,transparent,var(--bg) 45%);
}
#settingsOverlay .mcc-set-savebar .mcc-btn-primary{
  background:var(--primary)!important;color:#fff!important;
  border:2px solid var(--ink)!important;border-radius:2px!important;
  box-shadow:3px 3px 0 var(--shadow-ink)!important;
  padding:10px 22px!important;font-size:13.5px;
}
@media (max-width:900px){
  .mcc-set-topbar-spacer{width:34px;}
  .mcc-set-savebar{padding-right:0;}
}

/* ── Fiche : photo moins haute + STATUTS en colonne gauche (sans scroll) ── */
.mcc-popin-v2.modal-layout{grid-template-columns:240px minmax(0,1fr);}
.mcc-popin-v2 .modal-col-cover{padding:18px 16px;gap:10px;}
.mcc-popin-v2 .cover-preview-container{max-width:172px;}
.mcc-popin-v2 .modal-cover-link{max-width:204px;}
.mcc-cover-statuts{width:100%;}
.mcc-cover-pills{display:flex;flex-direction:column;gap:6px;}
.mcc-cover-pills .mcc-pill{width:100%;justify-content:flex-start;min-height:32px;padding:5px 10px;font-size:12px;}
@media (max-width:900px){
  .mcc-popin-v2.modal-layout{grid-template-columns:1fr;}
  .mcc-popin-v2 .modal-col-cover{flex-wrap:wrap;align-items:flex-start;}
  /* cover compacte en rangée : 120px de large, hauteur au ratio comic 2/3
     (sans ça elle s'étirait à ~418px de haut sur mobile). */
  .mcc-popin-v2 .cover-preview-container{width:120px;max-width:120px;height:auto;align-self:flex-start;}
  .mcc-popin-v2 .cover-preview-container .cover-preview{aspect-ratio:2/3;height:auto;}
  .mcc-cover-statuts{width:100%;}
  .mcc-cover-pills{flex-direction:row;flex-wrap:wrap;}
  .mcc-cover-pills .mcc-pill{width:auto;}
}

/* ── Fiche compacte : tout visible sans scroll (≥ ~860px de hauteur utile) ── */
.mcc-popin-v2 .modal-col-cover{padding:14px 14px 16px;}
.mcc-popin-v2 .modal-col-details{padding:14px 18px 8px;gap:14px;}
.mcc-popin-v2 .mcc-msec{gap:9px;}
.mcc-popin-v2 .mcc-form-sec{font-size:14px;}
.mcc-popin-v2 .mcc-field{gap:4px;}
.mcc-popin-v2 .mcc-field-row{gap:10px;}
.mcc-popin-v2 .mcc-input,.mcc-popin-v2 .mcc-select{padding:7px 10px;font-size:13px;}
.mcc-popin-v2 .mcc-textarea{padding:7px 10px;font-size:13px;min-height:52px;}
.mcc-popin-v2 .mcc-field-label{font-size:11px;}
.mcc-popin-v2 .mcc-est-card{padding:11px 13px;gap:8px;}
.mcc-popin-v2 .mcc-est-med{font-size:19px;}
.mcc-popin-v2 .mcc-est-hist{padding-top:8px;}
.mcc-popin-v2 .mcc-est-foot{font-size:9.5px;}
.mcc-popin-v2 .modal-pv-card{padding:9px 13px!important;}
.mcc-popin-v2 .modal-pv-value{font-size:16px;}
.mcc-cover-pills{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
.mcc-cover-pills .mcc-pill{width:100%;justify-content:flex-start;min-height:30px;padding:4px 8px;font-size:11.5px;gap:5px;}
.mcc-cover-pills .mcc-pill .mcc-pill-box{width:12px;height:12px;}
.mcc-cover-statuts .mcc-field-label{margin:10px 0 6px!important;}
.modal-actions.mcc-modal-foot{padding:9px 14px;}
.mcc-modal-band{padding:10px 14px!important;}
@media (max-width:900px){
  .mcc-cover-pills{grid-template-columns:repeat(2,1fr);width:100%;}
}

/* ── Fiche : plus-value en ligne + gaps finaux (zéro scroll ≥ 900px) ── */
.mcc-popin-v2 .modal-col-details{gap:12px;}
.mcc-popin-v2 .mcc-msec{gap:8px;}
.mcc-popin-v2 .modal-pv-card{
  display:flex!important;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:7px 13px!important;
}
.mcc-popin-v2 .modal-pv-label{margin-bottom:0;font-size:11.5px;}
.mcc-popin-v2 .modal-pv-value{font-size:15px;}
.mcc-popin-v2 .modal-pv-detail{margin-left:auto;}
.mcc-popin-v2 .mcc-est-card .mcc-est-gauge{margin:2px 0;}

/* ── Fiche : flèches du bandeau alignées (écrase le carousel legacy) ── */
.mcc-band-btns .mcc-navbtn,
.mcc-band-btns .modal-nav,
.mcc-band-btns .modal-close{
  position:static!important;transform:none!important;
  top:auto!important;left:auto!important;right:auto!important;
  width:34px!important;height:34px!important;
  border-radius:2px!important;backdrop-filter:none!important;
  background:rgba(255,255,255,.14)!important;
  border:2px solid rgba(255,255,255,.45)!important;
  color:var(--on-header)!important;margin:0!important;
}
.mcc-band-btns .mcc-navbtn:hover:not(:disabled){transform:none!important;background:rgba(255,255,255,.3)!important;}

/* ── Fiche : pas de fond toile/rouge derrière une vraie photo ── */
.mcc-popin-v2 .cover-preview:has(> img){background:var(--surface)!important;height:auto!important;display:block!important;}
.mcc-popin-v2 .cover-preview:has(> img)::before{display:none!important;}
.mcc-popin-v2 .cover-preview > img{
  position:static!important;width:100%!important;height:auto!important;
  object-fit:contain;display:block;
}
.mcc-popin-v2 .cover-preview-container{background:var(--surface)!important;}
/* boutons rotation / suppression par-dessus la photo : style pop lisible */
.mcc-popin-v2 .rotate-cover-btn,.mcc-popin-v2 .delete-cover-btn{
  border:2px solid var(--ink)!important;border-radius:2px!important;
  background:var(--surface)!important;color:var(--ink)!important;
  width:28px!important;height:28px!important;box-shadow:2px 2px 0 rgba(0,0,0,.35)!important;
}

/* ── Fiche : le placeholder porte SON fond (photo absente ou en erreur) ── */
.mcc-popin-v2 .cover-placeholder{
  background:repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--primary) 72%, var(--ink)) 0 10px,
    var(--primary-dark) 10px 12px)!important;
  width:100%;aspect-ratio:.66;display:flex;align-items:flex-end;justify-content:flex-start;
  padding:10px;position:relative;
}
.mcc-popin-v2 .cover-placeholder::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.45) 100%);
}
.mcc-popin-v2 .cover-placeholder-number{
  position:relative;z-index:1;font-family:var(--f-display);font-size:22px;color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.mcc-popin-v2 .cover-placeholder-new{position:relative;z-index:1;font-family:var(--f-mono);font-size:10px;color:rgba(255,255,255,.85);margin-left:8px;}

/* ════════════════════════════════════════════════════════════════════════
   Cibles tactiles ≥44px en mobile (handoff : « Hit targets mobile ≥44px »).
   Placé en FIN de fichier pour gagner par ordre de cascade sur les règles
   antérieures (.mcc-view-item{min-height:36px} ~5535, boutons bandeau 34px!important).
   N'affecte pas le desktop (>900px). Aucune fonctionnalité retirée (Règle n°0).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .mcc-view-item{min-height:44px;}
  .mcc-fold-btn{min-height:44px;}
  .mcc-side-close,.mcc-side-add{min-width:44px;min-height:44px;}
  .mcc-menu-btn,.mcc-avatar-btn{min-width:44px;min-height:44px;}
  #modal .mcc-band-btns .mcc-navbtn,
  #modal .mcc-band-btns .modal-nav,
  #modal .mcc-band-btns .modal-close{width:44px!important;height:44px!important;}
  .mcc-selbar button{min-height:44px;}
  .mcc-cmd-row{min-height:44px;}
  .mcc-heart-btn{width:44px;height:44px;}
  .mcc-follow-btn,.mcc-bought-btn,.mcc-prio-btn{min-height:44px;}
  .mcc-wish-del{width:44px;min-height:44px;}
  .mcc-fchip,.mcc-seg-btn{min-height:44px;display:inline-flex;align-items:center;}
}

/* ════════════════════════════════════════════════════════════════════════
   REFONTE MOBILE BURGER (≤900px) — recherche + filtres + ajout + compte dans
   le tiroir ; barre du bas supprimée ; logo affiché en entier mais réduit.
   Tout scopé ≤900px → desktop strictement inchangé.
   ════════════════════════════════════════════════════════════════════════ */
.mcc-side-mobileonly{ display:none; }

@media (max-width:900px){
  /* — Barre du bas supprimée (toutes les destinations sont dans le tiroir) — */
  .bottom-nav, #bottomNav{ display:none !important; }

  /* — Barre de filtres rapides legacy supprimée : les filtres vivent dans le tiroir.
       (#activeChips, les chips de filtres ACTIFS, restent visibles sur la page.) — */
  #mobileFilterBar{ display:none !important; }

  /* — Logo affiché EN ENTIER mais réduit (annule cartouche-only ≤980 / hide COLLECTION ≤1180) — */
  .mcc-logo-text .mcc-logo-side,
  .mcc-logo-lockup .mcc-logo-side:last-child{ display:inline-block !important; }
  .mcc-logo-lockup{ gap:6px; }
  .mcc-logo-side{ font-size:12.5px; }
  .mcc-logo-comics{ font-size:13px; padding:4px 7px 3px; box-shadow:2px 2px 0 rgba(0,0,0,.4); }

  /* — Header épuré : avatar + bouton « Ajouter » du header masqués (déplacés dans le tiroir) — */
  #settingsBtn.mcc-avatar-btn{ display:none !important; }
  #addComicBtn{ display:none !important; }

  /* — Bloc mobile visible dans le tiroir — */
  .mcc-side-mobileonly{ display:block; }

  /* Recherche relogée : pleine largeur, popover de portée en inline */
  #sideSearchMount{ display:block; margin-bottom:10px; }
  #sideSearchMount .mcc-search{ display:flex; width:100%; max-width:none; margin:0; }
  #sideSearchMount .mcc-scope-pop{ position:static; width:100%; margin-top:6px; box-shadow:none; }

  /* Bouton « Ajouter un comic » pleine largeur (pop accent) */
  .mcc-side-bigbtn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; margin-bottom:10px; padding:10px 14px;
    background:var(--accent); color:#1a1208; border:2px solid var(--ink);
    box-shadow:3px 3px 0 var(--shadow-ink); border-radius:2px;
    font-family:var(--f-body); font-weight:800; font-size:14px; cursor:pointer;
  }
  .mcc-side-bigbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow-ink); }

  /* Roue de réglages ⚙️ visible au-dessus de la grille (ouvre le panneau filtres) */
  .mcc-filterpanel-btn{ display:inline-flex; align-items:center; gap:7px; min-height:44px; }
}

/* ── Panneau réglages mobile : filtres / tri / densité / layout — glisse depuis la gauche ── */
.mcc-filterpanel-btn{ display:none; }  /* caché en desktop */
@media (max-width:900px){
  .mcc-filterpanel-btn{
    display:inline-flex; align-items:center; gap:7px; padding:8px 13px; min-height:44px;
    background:var(--surface); color:var(--ink); border:2px solid var(--ink);
    box-shadow:2px 2px 0 var(--shadow-ink); border-radius:2px;
    font-family:var(--f-body); font-weight:800; font-size:13px; cursor:pointer;
  }
  .mcc-filterpanel-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow-ink); }
}
.mcc-fpanel-backdrop{
  display:none; position:fixed; inset:0; z-index:109; background:rgba(10,7,3,.5);
  opacity:0; transition:opacity .2s ease;
}
.mcc-fpanel-backdrop.open{ display:block; opacity:1; }
.mcc-fpanel{
  position:fixed; top:0; left:0; bottom:0; z-index:110; width:min(330px,86vw);
  background:var(--surface); border-right:3px solid var(--ink);
  box-shadow:8px 0 0 rgba(0,0,0,.25); transform:translateX(-110%);
  transition:transform .22s ease; overflow-y:auto; display:flex; flex-direction:column;
}
.mcc-fpanel.open{ transform:translateX(0); }
.mcc-fpanel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:3px solid var(--ink); background:var(--header-bg);
}
.mcc-fpanel-title{ font-family:var(--f-display); font-size:15px; color:var(--on-header); }
.mcc-fpanel-close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink); border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--shadow-ink); border-radius:2px; cursor:pointer; flex-shrink:0;
}
.mcc-fpanel-body{ padding:16px; }
/* Contrôles empilés pleine largeur dans le panneau */
#panelFiltersMount{ display:flex; flex-direction:column; gap:10px; }
#panelFiltersMount .mcc-pop-wrap,
#panelFiltersMount .mcc-tool-btn,
#panelFiltersMount .mcc-sort-select,
#panelFiltersMount .mcc-seg{ width:100%; }
#panelFiltersMount .mcc-tool-btn,
#panelFiltersMount .mcc-sort-select,
#panelFiltersMount .mcc-sortdir-btn{ min-height:44px; }
#panelFiltersMount .mcc-seg{ display:flex; }
#panelFiltersMount .mcc-seg .mcc-seg-btn{ flex:1; min-height:44px; }
/* popover Filtres en inline (pas clippé par le panneau scrollable) */
#panelFiltersMount .mcc-filters-pop{ position:static; width:100%; margin-top:6px; box-shadow:none; max-height:none; }