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

:root {
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f4;
  --bg-tertiary:  #f1efe8;
  --bg-danger:    #fcebeb;
  --text-primary:   #1a1a18;
  --text-secondary: #5f5e5a;
  --text-danger:    #a32d2d;
  --border:       rgba(0,0,0,0.12);
  --border-hover: rgba(0,0,0,0.28);
  --border-danger:rgba(163,45,45,0.35);
  --radius-md: 8px;
  --radius-lg: 12px;
  --s-completed: #639922;
  --s-playing:   #185FA5;
  --s-played:    #7B5EA7;
  --s-backlog:   #2F9E8F;
  --s-wishlist:  #EF9F27;
  --avatar-bg:   #4a6fa5;
  /* ── Accent (sélection / focus) ── */
  --accent:      #185FA5;
  --accent-bg:   rgba(24,95,165,.11);
  --accent-ring: rgba(24,95,165,.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:   #1c1c1a;
    --bg-secondary: #252522;
    --bg-tertiary:  #2c2c2a;
    --bg-danger:    #501313;
    --text-primary:   #f0ede8;
    --text-secondary: #888780;
    --text-danger:    #f09595;
    --border:       rgba(255,255,255,0.12);
    --border-hover: rgba(255,255,255,0.28);
    --border-danger:rgba(240,149,149,0.35);
    --accent:      #4a8ac4;
    --accent-bg:   rgba(24,95,165,.22);
    --accent-ring: rgba(74,138,196,.30);
  }
}
[data-theme="dark"] {
  --bg-primary:   #1c1c1a;
  --bg-secondary: #252522;
  --bg-tertiary:  #2c2c2a;
  --bg-danger:    #501313;
  --text-primary:   #f0ede8;
  --text-secondary: #888780;
  --text-danger:    #f09595;
  --border:       rgba(255,255,255,0.12);
  --border-hover: rgba(255,255,255,0.28);
  --border-danger:rgba(240,149,149,0.35);
  --accent:      #4a8ac4;
  --accent-bg:   rgba(24,95,165,.22);
  --accent-ring: rgba(74,138,196,.30);
}
[data-theme="light"] {
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f4;
  --bg-tertiary:  #f1efe8;
  --bg-danger:    #fcebeb;
  --text-primary:   #1a1a18;
  --text-secondary: #5f5e5a;
  --text-danger:    #a32d2d;
  --border:       rgba(0,0,0,0.12);
  --border-hover: rgba(0,0,0,0.28);
  --border-danger:rgba(163,45,45,0.35);
  --accent:      #185FA5;
  --accent-bg:   rgba(24,95,165,.11);
  --accent-ring: rgba(24,95,165,.22);
}

body { font-family: system-ui,-apple-system,sans-serif; background:var(--bg-tertiary); color:var(--text-primary); font-size:16px; line-height:1.5; min-height:100vh; display:flex; flex-direction:column; }

/* ── Auth ── */
.auth-screen { flex:1; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:2rem; width:100%; max-width:400px; }
.auth-card h1 { font-size:22px; font-weight:500; margin-bottom:1.5rem; display:flex; align-items:center; gap:10px; }
.tab-bar { display:flex; border-bottom:0.5px solid var(--border); margin-bottom:1.5rem; }
.tab { flex:1; padding:8px; background:none; border:none; border-bottom:2px solid transparent; font-size:14px; cursor:pointer; color:var(--text-secondary); }
.tab.active { border-bottom-color:var(--text-primary); color:var(--text-primary); }
.form-error { font-size:13px; color:var(--text-danger); min-height:20px; margin-bottom:8px; }
.form-hint { font-size:13px; color:var(--text-secondary); margin:8px 0; min-height:18px; }
.auth-pending-error { background:var(--bg-danger); color:var(--text-danger); border:0.5px solid var(--border-danger); border-radius:var(--radius-md); padding:10px 12px; font-size:14px; font-weight:500; margin-bottom:14px; }

/* ── Layout ── */
.header { background:var(--bg-primary); border-bottom:0.5px solid var(--border); padding:12px 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:50; }
.header h1 { font-size:18px; font-weight:500; display:flex; align-items:center; gap:8px; }
.header-left { display:flex; align-items:center; gap:12px; }
.header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.header-burger { position:relative; display:flex; }
.header-actions-menu { display:flex; align-items:center; gap:8px; }
.header-burger-btn { display:none; width:36px; height:36px; padding:0; flex-shrink:0; align-items:center; justify-content:center; font-size:18px; }
.container { max-width:1280px; margin:0 auto; padding:1.5rem 1rem 5rem; }

/* ── Buttons ── */
button { font-family:inherit; font-size:14px; padding:7px 14px; border-radius:var(--radius-md); border:0.5px solid var(--border-hover); background:transparent; color:var(--text-primary); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .12s; outline:none; }
button:hover { background:var(--bg-secondary); }
button:active { transform:scale(.98); }
button:focus-visible { box-shadow:0 0 0 3px var(--accent-ring); border-color:var(--accent); }
button:disabled { opacity:.5; cursor:not-allowed; }

@keyframes gc-spin { to { transform:rotate(360deg); } }
.ti-loader { display:inline-block; animation:gc-spin .8s linear infinite; }
.btn-loading { position:relative; pointer-events:none; }
.btn-loading:disabled { opacity:1; }
.btn-loading-content { visibility:hidden; }
.btn-spinner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.btn-primary { background:var(--text-primary); color:var(--bg-primary); border-color:transparent; }
.btn-primary:hover { opacity:.88; background:var(--text-primary); }
.btn-primary:focus-visible { box-shadow:0 0 0 2px var(--bg-primary), 0 0 0 5px var(--accent); border-color:transparent; }
/* Action secondaire : la classe existait dans le markup sans style associé, si
   bien qu'un « Annuler » et l'action principale se ressemblaient trait pour trait. */
.btn-secondary { color:var(--text-secondary); border-color:var(--border); background:var(--bg-secondary); }
.btn-secondary:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.btn-danger { color:var(--text-danger); border-color:var(--border-danger); }
.btn-danger:hover { background:var(--bg-danger); }
.full { width:100%; justify-content:center; margin-top:4px; }

/* ── Form elements ── */
input, select, textarea { font-family:inherit; font-size:14px; padding:8px 10px; border-radius:var(--radius-md); border:0.5px solid var(--border); background:var(--bg-primary); color:var(--text-primary); outline:none; transition:border-color .12s; width:100%; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
input[readonly]:focus { border-color:var(--border); box-shadow:none; }
input[readonly] { background:var(--bg-secondary); color:var(--text-secondary); cursor:default; }
textarea { height:80px; resize:vertical; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint { font-size:13px; color:var(--text-secondary); margin-bottom:1rem; }
.profile-hint-inline { font-size:12px; color:var(--text-secondary); flex:1; }

/* ── Stats bar ── */
#stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 10px 18px;
  margin-bottom: 1.25rem;
}
.stat-bar-left { display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.stat-item { display:flex; align-items:baseline; gap:5px; padding:4px 16px 4px 0; }
.stat-item + .stat-item { padding-left:16px; border-left:0.5px solid var(--border); }
.stat-num { font-size:21px; font-weight:600; line-height:1; letter-spacing:-.02em; }
.stat-label { font-size:12px; color:var(--text-secondary); }
.stat-item--completed .stat-num { color:var(--s-completed); }
.stat-item--playing   .stat-num { color:var(--s-playing); }
.stat-item--played    .stat-num { color:var(--s-played); }
.stat-item--backlog   .stat-num { color:var(--s-backlog); }
.stat-item--wishlist  .stat-num { color:var(--s-wishlist); }
.stat-item--sold      .stat-num { color:var(--text-secondary); }
.stat-bar-families { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.stat-bar-families .platform-badge { display:inline-flex; align-items:center; gap:4px; }
.stat-bar-families .platform-badge strong { font-size:11px; }

#consoleStats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 10px 18px;
  margin-bottom: 1.25rem;
}

.platform-badge--sm { font-size:10px; padding:1px 6px; }

/* ── Toolbar ── */
.toolbar { display:flex; flex-direction:column; gap:8px; margin-bottom:1.25rem; }
.toolbar-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.search-wrap { flex:1; min-width:180px; position:relative; }
.search-wrap input { width:100%; padding-left:34px; }
.search-wrap .ti-search { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-secondary); font-size:16px; pointer-events:none; }
.toolbar-row--secondary select { min-width:130px; width:auto; font-size:13px; color:var(--text-secondary); padding:6px 10px; }
.sort-wrap { display:flex; align-items:center; gap:4px; }
.sort-wrap select { border-radius:var(--radius-md) 0 0 var(--radius-md); }
.sort-dir-btn { height:32px; width:32px; padding:0; border:0.5px solid var(--border); border-left:none; border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--bg-primary); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.sort-dir-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.filters-toggle-btn { display:none; font-size:13px; color:var(--text-secondary); }
.filters-toggle-btn .filters-toggle-chevron { font-size:12px; transition:transform .2s; margin-left:-2px; }
.filters-toggle-btn[aria-expanded="true"] .filters-toggle-chevron { transform:rotate(180deg); }

/* ── Status pills ── */
.status-pills { display:flex; gap:5px; flex-wrap:wrap; }
.status-pill {
  --pill-accent: var(--text-primary);
  font-family: inherit; font-size:13px;
  padding: 5px 12px; border-radius:20px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; gap:6px;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
}
.status-pill:not(.status-pill--all)::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background: currentColor; flex-shrink:0;
}
.status-pill--backlog   { color: var(--s-backlog); }
.status-pill--playing   { color: var(--s-playing); }
.status-pill--played    { color: var(--s-played); }
.status-pill--completed { color: var(--s-completed); }
.status-pill--wishlist  { color: var(--s-wishlist); }
.status-pill:hover:not(.active) { border-color:var(--border-hover); color:var(--text-primary); }
.status-pill--all.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); font-weight:600; }
.status-pill:not(.status-pill--all).active { background:var(--pill-accent); border-color:var(--pill-accent); color:#fff; }

/* ── View toggle (grille / liste) ── */
.view-toggle {
  display:flex; gap:3px;
  background:var(--bg-secondary); border-radius:var(--radius-md); padding:3px;
  margin-left:auto;
}
.view-toggle-btn {
  font-family:inherit; font-size:15px;
  padding:5px 9px; border:none;
  background:transparent; border-radius:calc(var(--radius-md) - 2px);
  color:var(--text-secondary); cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background .12s, color .12s;
}
.view-toggle-btn.active { background:var(--bg-primary); color:var(--text-primary); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.view-toggle-btn:hover:not(.active) { color:var(--text-primary); }

/* ── Mobile : burger menu d'entête + filtres repliables ── */
@media (max-width: 768px) {
  .header { padding:10px 1rem; gap:6px; }
  .header h1 .header-title-text { display:none; }
  .header-left { gap:8px; }
  .view-tab-text { display:none; }
  .view-tab { padding:7px 9px; }
  .header-burger-btn { display:inline-flex; }
  .header-actions-menu {
    display:none; flex-direction:column; align-items:stretch; gap:6px;
    position:absolute; top:calc(100% + 6px); right:0;
    background:var(--bg-primary); border:0.5px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:0 4px 20px rgba(0,0,0,.12);
    min-width:180px; max-width:calc(100vw - 24px); z-index:100; padding:8px;
  }
  .header-actions-menu.open { display:flex; }
  .header-actions-menu button { width:100%; justify-content:flex-start; }

  .filters-toggle-btn { display:inline-flex; }
  .toolbar-row--secondary.filters-collapsed,
  .status-pills.filters-collapsed { display:none; }

  .toolbar-row--primary .search-wrap { flex-basis:100%; }

  /* iOS zoome automatiquement sur tout champ < 16px au focus ;
     le padding élargi porte les cibles tactiles vers ~44px.
     (Les selects compacts de la toolbar gardent leur taille : règle
     .toolbar-row--secondary select plus spécifique.) */
  input:not([type=checkbox]):not([type=radio]), textarea, .modal select {
    font-size: 16px;
    padding: 12px;
  }
  /* La règle ci-dessus est plus spécifique que .search-wrap input :
     ré-affirmer la place de l'icône loupe */
  .search-wrap input { padding-left: 34px; }

  /* Profil : label + champ + bouton sur une seule ligne ne laisse presque
     plus de place au champ (label min-width:120px + bouton) → on empile.
     Sélecteur .profile-card .profile-row : la règle de base .profile-row
     (align-items:center) est déclarée plus loin dans ce fichier et gagnerait
     à spécificité égale, recentrant les champs une fois en colonne. */
  .profile-card .profile-row { flex-direction: column; align-items: stretch; }
  .profile-card .profile-row label { min-width: 0; }
  .profile-card .profile-row input,
  .profile-card .profile-row select { width: 100%; }
  .profile-card .profile-row .btn-sm { align-self: flex-start; }
}

/* ── Game card (redesign v0.2) ── */
.game-card {
  --card-accent: #8a8880;
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--card-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 12px 14px 11px 13px;
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap:5px;
  min-height: 108px;
  transition: box-shadow .15s, transform .12s;
}
.game-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.10); transform:translateY(-2px); }
.game-card:focus-visible { outline:2px solid var(--card-accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .game-card { transition:none; } .game-card:hover { transform:none; } }
.game-card .title { font-size:14px; font-weight:600; line-height:1.35; }
.game-card .meta  { font-size:12px; color:var(--text-secondary); }
.card-foot { display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:8px; }
.card-tags { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; }
.card-status { font-size:11px; font-weight:600; color:var(--card-accent); letter-spacing:.04em; text-transform:uppercase; }
.game-card .rating { font-size:13px; font-weight:600; color:#BA7517; }

/* ── Vue tableau jeux ── */
.game-table-wrap {
  grid-column: 1 / -1;
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.game-table { width:100%; border-collapse:collapse; font-size:14px; }
.game-table thead th {
  text-align:left; font-size:11px; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em;
  padding:9px 14px; border-bottom:0.5px solid var(--border);
  background:var(--bg-secondary);
}
.th-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sortable:hover { color:var(--text-primary); }
.th-sort-active { color:var(--text-primary); }
.th-sort-icon { font-size:12px; margin-left:3px; vertical-align:middle; opacity:.7; }
.th-sort-icon--idle { opacity:.3; }
.game-table__row { cursor:pointer; }
.game-table__row td { padding:10px 14px; border-bottom:0.5px solid var(--border); vertical-align:middle; }
.game-table__row:last-child td { border-bottom:none; }
.game-table__row:hover td { background:var(--bg-secondary); }
.game-table__row td:first-child { border-left:3px solid var(--card-accent); }
.game-table__title { font-weight:500; }
.game-table__genre, .game-table__year { color:var(--text-secondary); white-space:nowrap; }
.game-table__platform { white-space:nowrap; }
.game-table__platform .format-badge { margin-left:4px; }
.game-table__rating { color:#BA7517; font-weight:600; white-space:nowrap; text-align:right; }
.table-no-rating { color:var(--text-secondary); font-weight:400; }

/* ── Grid ── */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.platform-badge { font-size:11px; font-weight:500; padding:2px 8px; border-radius:var(--radius-md); display:inline-block; }
.p-ps   { background:#B5D4F4; color:#0C447C; }
.p-xbox { background:#C0DD97; color:#27500A; }
.p-nin  { background:#FAECE7; color:#993C1D; }
.p-pc   { background:#EEEDFE; color:#3C3489; }
.p-other{ background:#D3D1C7; color:#444441; }
@media (prefers-color-scheme: dark) {
  .p-ps   { background:#0C2E52; color:#B5D4F4; }
  .p-xbox { background:#1A3508; color:#C0DD97; }
  .p-nin  { background:#3D1A12; color:#FAECE7; }
  .p-pc   { background:#1E1B4A; color:#CCCAFF; }
  .p-other{ background:#2a2a28; color:#D3D1C7; }
}
.empty { grid-column:1/-1; text-align:center; padding:4rem 1rem; color:var(--text-secondary); }
.empty i { font-size:40px; display:block; margin-bottom:12px; }
.loading { grid-column:1/-1; text-align:center; padding:3rem; color:var(--text-secondary); }

/* ── Pagination ── */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:1.5rem; flex-wrap:wrap; }
.pagination button { min-width:36px; justify-content:center; }
.pagination button.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); font-weight:600; }

/* ── Modal ── */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.modal-bg.open { display:flex; }
.modal { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; }
.modal h2 { font-size:18px; font-weight:500; margin-bottom:1.25rem; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:1.25rem; padding-top:1rem; border-top:0.5px solid var(--border); }

/* ── Drop zone ── */
.drop-zone { border:1.5px dashed var(--border-hover); border-radius:var(--radius-md); padding:2rem; text-align:center; color:var(--text-secondary); font-size:14px; cursor:pointer; transition:background .12s; margin-bottom:14px; }
.drop-zone:hover, .drop-zone.drag-over { background:var(--bg-secondary); }
#importStatus { font-size:13px; min-height:20px; }
#importStatus.ok  { color:#3B6D11; }
#importStatus.err { color:var(--text-danger); }
.import-confirm { background:var(--bg-secondary); border:0.5px solid var(--border); border-radius:var(--radius-md); padding:11px 14px; margin-bottom:12px; font-size:13px; line-height:1.6; }
.import-confirm-warn { color:var(--text-danger); margin-top:6px; }
.import-confirm-actions { display:flex; gap:8px; margin-bottom:12px; }

/* ── FAB ── */
.fab { position:fixed; bottom:1.5rem; right:1.5rem; width:52px; height:52px; border-radius:50%; background:var(--text-primary); color:var(--bg-primary); border:none; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:100; padding:0; }
.fab:hover { opacity:.88; background:var(--text-primary); }

/* ── Administration (page dédiée) ── */
.admin-panel { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin-top:1rem; min-height:300px; }
.admin-tabs  { margin-bottom:0; border-bottom:0.5px solid var(--border); }

.admin-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.admin-toolbar .search-wrap { flex:1; min-width:0; }
.admin-toolbar .search-wrap input { padding-right:30px; }
.admin-result-count { font-size:12px; color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }

.search-clear-btn {
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:none; border-radius:50%;
  background:none; color:var(--text-secondary); font-size:13px; cursor:pointer;
}
.search-clear-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }

.ref-list  { margin-bottom:1rem; }
.ref-empty { text-align:center; padding:2.5rem 1rem; color:var(--text-secondary); font-size:14px; }

.ref-item { border-bottom:0.5px solid var(--border); }
.ref-item:last-child { border-bottom:none; }

.ref-view,
.ref-edit { display:flex; align-items:center; gap:10px; padding:9px 0; }

.ref-name { flex:1; font-size:14px; }
.ref-value-badge { font-size:11px; color:var(--text-secondary); background:var(--bg-secondary); padding:2px 8px; border-radius:var(--radius-md); font-family:monospace; flex-shrink:0; }

.ref-actions { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.ref-actions button { padding:5px 8px; }

.ref-edit input { flex:1; min-width:80px; }

.ref-add-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:0.75rem; border-top:0.5px solid var(--border); margin-top:0.5rem; }
.ref-add-form input { flex:1; min-width:120px; }

/* ── Admin : doublons ── */
.dup-view { display:flex; flex-direction:column; gap:8px; padding:12px 0; }
.dup-candidates { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.dup-candidates strong { font-size:12px; color:var(--text-secondary); }
.dup-candidate { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px; background:var(--bg-secondary); border-radius:var(--radius-md); }
.dup-candidate button { padding:3px 8px; flex-shrink:0; }
.dup-merge-search { position:relative; }
.dup-merge-search input { width:100%; }

/* ── Résolution de quasi-doublon (modal jeu, ajout) ── */
.dup-review-msg { font-size:13px; color:var(--text-secondary); margin:0 0 1rem; }
.dup-review-list { display:flex; flex-direction:column; gap:10px; margin-bottom:1rem; }
.dup-candidate-card {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:0.5px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-secondary);
}
.dup-candidate-info { display:flex; flex-direction:column; gap:2px; }
.dup-candidate-card button { flex-shrink:0; }
.dup-platform-add { color:var(--accent); }
.dup-review-actions { justify-content:flex-end; padding-top:0.75rem; border-top:0.5px solid var(--border); }

/* ── Modal large (formulaire jeu) ── */
.modal-large {
  max-width: 740px;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-large h2 { margin-bottom: 0; }

/* Zones fixe/défilante du modal formulaire */
.modal-header { padding: 14px 18px 0; flex-shrink: 0; }
.modal-header-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.modal-header-top h2 { flex:1; }
.modal-body { overflow-y: auto; flex: 1; padding: 12px 18px 4px; }
.modal-large .modal-footer { margin-top: 0; padding: 10px 18px 14px; }

/* Grille 2 colonnes catalogue / exemplaire */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  align-items: start;
}
/* Cartes de rubrique (catalogue / exemplaire, jeu et console) */
.form-card {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 4px;
}
/* Sur fond de carte gris, les chips genre reprennent le fond de la modale */
#catalogCol .genre-tag:not(.genre-tag--primary) { background: var(--bg-primary); }
/* En sombre, --bg-secondary est trop proche du fond de la modale :
   cartes et hero passent sur le palier au-dessus */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-card,
  :root:not([data-theme="light"]) .game-hero { background: var(--bg-tertiary); }
}
[data-theme="dark"] .form-card,
[data-theme="dark"] .game-hero { background: var(--bg-tertiary); }
/* Titre de section dans chaque colonne */
.form-section-head {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 4px 0 8px; border-bottom: 0.5px solid var(--border);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.form-section-head > .ti { color: var(--accent); font-size: 14px; }
.form-section-head .btn-link { margin-left: auto; }

/* Entête lecture seule du jeu (non-admin, mode édition) */
.game-hero {
  padding: 7px 12px; margin-bottom: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border-hover);
}
.game-hero-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.game-hero-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  flex: 1; min-width: 0;
}
.game-hero-change {
  flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--accent);
  gap: 4px;
}
.game-hero-change:hover { background: var(--accent-bg); }
.game-hero-meta {
  font-size: 12px; color: var(--text-secondary);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* Rangées compactes de champs à largeur variable */
.field-row--flex { display: flex; gap: 10px; align-items: flex-start; }
.field-row--flex .field { flex: 1; min-width: 0; }
.field--w80  { flex: 0 0 80px !important; }
.field--w100 { flex: 0 0 100px !important; }

/* Points colorés de plateforme dans les onglets d'exemplaires */
.plat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-ps   { background: #185FA5; }
.dot-xbox { background: #27500A; }
.dot-nin  { background: #993C1D; }
.dot-pc   { background: #3C3489; }
.copy-label { font-size: 11px; opacity: .7; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive modal formulaire : 1 colonne, catalogue au-dessus de l'exemplaire */
@media (max-width: 640px) {
  .modal-large { max-height: 95vh; max-height: 95dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-bg:has(.modal-large) { align-items: flex-end; padding: 0; }
  .form-grid { grid-template-columns: 1fr !important; }
  #catalogCol { order: 1; }
  #copyCol { order: 2; grid-column: 1 !important; }
  /* En colonne défilante, ne pas réserver la place des cases masquées.
     (.form-grid en préfixe : la règle de base min-height:34px est déclarée
     plus loin dans le fichier et gagnerait à spécificité égale.) */
  .field-checkbox--sub.sub-hidden { display: none; }
  .form-grid .field-row--sub { min-height: 0; }
}

/* ── Catalogue search autocomplete ── */
.catalog-search-wrap { position: relative; }
.catalog-suggestions {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--bg-primary); border: 0.5px solid var(--border-hover);
  border-radius: var(--radius-md); list-style: none;
  max-height: 240px; overflow-y: auto; z-index: 300; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.catalog-suggestions li {
  padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; align-items: baseline;
  border-bottom: 0.5px solid var(--border); font-size: 14px;
}
.catalog-suggestions li:last-child { border-bottom: none; }
.catalog-suggestions li:hover { background: var(--bg-secondary); }
.catalog-suggestions li small { font-size: 11px; color: var(--text-secondary); }

/* ── Details / Summary sections in modal ── */
details { margin-bottom: 1rem; }
details {
  position: relative;
}
.section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 0; cursor: pointer; user-select: none;
  border-bottom: 0.5px solid var(--border); margin-bottom: 12px;
}
details > .btn-link {
  position: absolute; top: 0; right: 0;
}
.section-label::marker { content: ''; }
details[open] > .section-label::before { content: '▾ '; font-size: 12px; }
details:not([open]) > .section-label::before { content: '▸ '; font-size: 12px; }

/* ── FAQ items (profile screen) ── */
.faq-item summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.faq-item summary::marker { content: ''; }
.faq-item[open] summary::before { content: '▾ '; font-size: 12px; }
.faq-item:not([open]) summary::before { content: '▸ '; font-size: 12px; }
.faq-item p:last-child { margin-bottom: 0; }

/* ── Btn link ── */
.btn-link { background: none; border: none; padding: 2px 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.btn-link:hover { background: var(--bg-secondary); }

/* ── Format badge on game card ── */
.format-badge {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-secondary);
  display: inline-block; margin-left: 4px; vertical-align: middle;
}

.copy-badge {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-md);
  background: #e8f0fb; color: #2a5fa8;
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-weight: 500; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .copy-badge { background: #1a2e42; color: #7ab0e0; }
}

/* ── Catalog admin meta ── */
.ref-meta { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ── Admin : gestion des utilisateurs ── */
.user-list  { margin-bottom:1rem; }
.user-item  { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:0.5px solid var(--border); flex-wrap:wrap; }
.user-item:last-child { border-bottom:none; }
.user-info  { flex:1; min-width:0; }
.user-name  { font-size:14px; font-weight:500; }
.user-email { font-size:12px; color:var(--text-secondary); }
.badge-admin { font-size:11px; font-weight:500; padding:2px 8px; border-radius:var(--radius-md); background:#EEDEDF; color:#7A2020; flex-shrink:0; }
@media (prefers-color-scheme:dark) { .badge-admin { background:#501313; color:#f09595; } }

/* ── Tabs de navigation Jeux / Consoles ── */
.view-tabs { display:flex; gap:4px; background:var(--bg-secondary); border-radius:var(--radius-md); padding:3px; }
.view-tab { height:36px; border:none; background:transparent; border-radius:calc(var(--radius-md) - 2px); padding:5px 12px; font-size:14px; font-weight:500; color:var(--text-secondary); gap:5px; }
.view-tab.active { background:var(--bg-primary); color:var(--text-primary); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.view-tab:hover:not(.active) { background:var(--bg-tertiary); }

/* ── Cartes consoles ── */
.console-card .console-custom-name { font-size:12px; color:var(--text-secondary); font-style:italic; }

/* ── Champ checkbox ── */
.field-checkbox { margin-top:4px; margin-bottom:12px; }
.field-checkbox label { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); cursor:pointer; }
.field-checkbox input[type=checkbox] { width:16px; height:16px; cursor:pointer; flex-shrink:0; }
/* Sous-option rattachée au champ de la colonne au-dessus (boîte ↔ format, complété ↔ statut) */
.field-checkbox--sub {
  margin-top:-6px; margin-bottom:12px; padding:6px 0 6px 12px;
  border-left:2px solid var(--border-hover);
  display:flex; align-items:center;
}
.field-checkbox--sub label { font-size:13px; color:var(--text-secondary); }
/* Case masquée : invisible mais hauteur réservée sur desktop
   (évite les sauts de layout en basculant d'onglet) ; en mobile,
   display:none via la media query du modal formulaire (≤640px). */
.field-checkbox--sub.sub-hidden { visibility:hidden; }
/* Réserve toujours la hauteur de la ligne (évite les sauts de layout quand
   les cases apparaissent/disparaissent en basculant d'onglet). */
.field-row--sub { min-height: 34px; }
.field-row--sub #boxField        { grid-column:1; }
.field-row--sub #completionField { grid-column:2; }

/* ── Sélecteur de date optionnel (champ date d'achat) ── */
.date-input-wrap { position: relative; }
.date-input-wrap input[type=text] { padding-right: 38px; }
.date-picker-btn {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 36px; padding: 0;
  border: none; background: transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.date-picker-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
/* Input date natif : invisible mais rendu (requis par showPicker),
   ancré sous le bouton pour positionner le calendrier au bon endroit */
.date-picker-native {
  position: absolute; right: 0; bottom: 0;
  width: 36px; height: 1px;
  opacity: 0; pointer-events: none; border: none; padding: 0;
}

/* ── Badge timing d'achat ── */
.timing-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  margin-top: 6px; vertical-align: middle;
}
.timing-badge--preorder { background: #f0e8f8; color: #7B5EA7; }
.timing-badge--day1     { background: #e8f4e8; color: #2E6B2E; }
.timing-badge--in_month { background: #e8f0f8; color: #185FA5; }
.timing-badge--in_year  { background: #fef8e8; color: #B07B00; }
.timing-badge--later    { background: var(--bg-secondary); color: var(--text-secondary); }
@media (prefers-color-scheme: dark) {
  .timing-badge--preorder { background: #3a2a4a; color: #c4a8e8; }
  .timing-badge--day1     { background: #1e3a1e; color: #78c878; }
  .timing-badge--in_month { background: #1a2e42; color: #7ab0e0; }
  .timing-badge--in_year  { background: #3a3010; color: #d4b060; }
}

/* ── Admin catalogue consoles : select dans ref-edit/add ── */
.ref-edit select, .ref-add-form select { flex:1; min-width:120px; }

/* ── Dates de sortie complémentaires (catalogue admin) ────── */
.ref-edit { flex-wrap: wrap; }
.rdate-section { flex-basis: 100%; border-top: 0.5px solid var(--border); padding-top: 6px; margin-top: 4px; }
.rdate-section-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.rdate-section-header button { padding: 2px 8px; font-size: 11px; }
.rdate-row { display: flex; gap: 5px; align-items: center; margin-bottom: 3px; }
.rdate-row select { flex: 1.2; min-width: 90px; font-size: 12px; padding: 3px 5px; }
.rdate-row input[type="text"] { flex: 0.6; min-width: 70px; font-size: 12px; padding: 3px 5px; }
.rdate-row input[type="date"] { flex: 0.8; min-width: 110px; font-size: 12px; padding: 3px 5px; }
.rdate-row .btn-danger { padding: 2px 6px; font-size: 11px; flex-shrink: 0; }
.rdate-worldwide-label { display:flex; align-items:center; gap:4px; font-size:12px; flex-shrink:0; white-space:nowrap; cursor:pointer; }
.rdate-row.is-worldwide select,
.rdate-row.is-worldwide input[type="text"] { opacity:0.35; pointer-events:none; }

/* ── Sélecteur de langue ── */
.lang-switcher { display:flex; align-items:center; gap:2px; }
.lang-btn {
  padding:3px 8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
  background:none;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.lang-btn:hover:not(.active) { background:var(--bg-secondary); color:var(--text-primary); }
.lang-btn.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); font-weight:700; }
.lang-switcher--auth { justify-content:center; margin-top:1.5rem; padding-top:1rem; border-top:0.5px solid var(--border); }

/* ── Avatar utilisateur ── */
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--avatar-bg);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; user-select: none;
}

/* ── Menu utilisateur (dropdown) ── */
.user-menu { position:relative; }
.user-menu-trigger { height: 36px; padding: 4px 10px 4px 4px; border-radius: 20px; gap: 8px; }
.user-menu-trigger .user-menu-chevron { font-size:12px; transition:transform .2s; }
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform:rotate(180deg); }
.user-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--bg-primary); border:0.5px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 4px 20px rgba(0,0,0,.12);
  min-width:220px; max-width:calc(100vw - 24px); z-index:100; padding:6px;
}
.user-menu-user { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:14px; }
.user-menu-sep { border:none; border-top:0.5px solid var(--border); margin:4px 0; }
.user-menu-item { width:100%; justify-content:flex-start; border:none; padding:8px 10px; }
.user-menu-lang { padding:6px 10px 8px; }
.user-menu-lang-label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.user-menu-lang select { width:100%; }
.user-menu-logout { color:var(--text-danger); }
.user-menu-logout:hover { background:var(--bg-danger); color:var(--text-danger); }

/* ── Footer de version ── */
.app-footer {
  text-align:center;
  padding:12px 0 8px;
  font-size:11px;
  color:var(--text-secondary);
  opacity:.6;
  letter-spacing:.04em;
}

/* ── Page Profil ─────────────────────────────────────────── */
.profile-screen {
  display:none; min-height:100vh;
  background:var(--bg-tertiary);
}
.profile-screen.open { display:block; }
.profile-screen .container { padding-top: 1.5rem; }
.profile-header {
  display:flex; align-items:center; gap:12px;
  margin-bottom:1.5rem;
}
.profile-header h1 { font-size:20px; font-weight:500; }

/* ── Héro profil ── */
.profile-hero {
  max-width: 560px; margin: 0 auto 1.5rem;
  padding: 24px; background: var(--bg-primary);
  border: 0.5px solid var(--border); border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 20px;
}
.profile-hero-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background:
    var(--avatar-bg) content-box,
    conic-gradient(from 0deg,
      var(--s-completed) 0% 25%,
      var(--s-playing)   25% 50%,
      var(--s-backlog)   50% 75%,
      var(--s-wishlist)  75% 100%
    ) border-box;
  border: 3px solid transparent;
  color: #fff; font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; user-select: none;
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
  font-size: 22px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-hero-email { font-size: 14px; color: var(--text-secondary); }

.profile-card {
  background:var(--bg-primary); border:0.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  max-width:560px; margin:0 auto 1.25rem;
}
.profile-card h2 {
  font-size:13px; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em;
  padding-bottom:10px; margin-bottom:1rem;
  border-bottom:0.5px solid var(--border);
}
.profile-row {
  display:flex; align-items:center; gap:10px;
  margin-bottom:.75rem; flex-wrap:wrap;
}
.profile-row label { font-size:14px; color:var(--text-secondary); min-width:120px; }
.profile-row input { flex:1; min-width:0; }
.profile-row .btn-sm { flex-shrink:0; }
.profile-pref-group { display:flex; gap:6px; flex-wrap:wrap; }
.profile-pref-btn {
  border:0.5px solid var(--border); background:var(--bg-secondary);
  border-radius:var(--radius-md); padding:5px 14px;
  font-size:13px; cursor:pointer; color:var(--text-secondary); transition:all .15s;
}
.profile-pref-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  font-weight: 600;
}
.profile-pref-label { font-size:14px; color:var(--text-secondary); margin-bottom:6px; display:block; }
.profile-row select { flex:1; min-width:0; }
.profile-msg { font-size:13px; margin-top:8px; min-height:18px; }

/* ── Sélecteur de thème (cartes visuelles) ── */
.pref-theme-group { display:flex; gap:10px; flex-wrap:wrap; }
.pref-theme-card {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 16px; min-width:80px;
  border:2px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-secondary); color:var(--text-secondary);
  font-size:13px; cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
.pref-theme-card:hover { border-color:var(--border-hover); color:var(--text-primary); }
.pref-theme-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent); font-weight:600;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pref-theme-card.active::after {
  content: '✓';
  position:absolute; top:4px; right:5px;
  width:16px; height:16px; border-radius:50%;
  background: var(--accent); color:#fff;
  font-size:10px; font-weight:700;
  line-height:16px; text-align:center;
}
.pref-theme-swatch {
  width:56px; height:38px; border-radius:5px;
  border:1px solid rgba(0,0,0,.15); flex-shrink:0;
}
/* Couleurs hardcodées — indépendantes du thème actif */
.pref-theme-swatch--light {
  background: linear-gradient(to bottom, #1a1a18 32%, #f1efe8 32%);
}
.pref-theme-swatch--dark {
  background: linear-gradient(to bottom, #252522 32%, #1c1c1a 32%);
}
.pref-theme-swatch--auto {
  background: linear-gradient(135deg, #f1efe8 50%, #1c1c1a 50%);
}

/* ── Section enregistrement préférences ── */
.profile-prefs-save {
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:0.5px solid var(--border);
}
.btn-full { width:100%; justify-content:center; padding:11px 20px; font-size:15px; }
.profile-msg--ok    { color:#3a8a3a; }
.profile-msg--error { color:var(--text-danger); }
@media (prefers-color-scheme:dark) {
  .profile-msg--ok { color:#78c878; }
}
[data-theme="dark"]  .profile-msg--ok { color:#78c878; }
[data-theme="light"] .profile-msg--ok { color:#3a8a3a; }

/* ── Zone de danger (suppression de compte) ── */
.profile-card--danger { border-color:var(--border-danger); }
.profile-card--danger h2 { color:var(--text-danger); }
.profile-danger-warning {
  font-size:14px; line-height:1.5; color:var(--text-danger);
  background:var(--bg-danger); border:0.5px solid var(--border-danger);
  border-radius:var(--radius-md); padding:12px 14px; margin-bottom:1rem;
}
.profile-danger-instruction { font-size:14px; color:var(--text-secondary); margin-bottom:.5rem; }
.profile-danger-phrase {
  font-family:monospace; font-size:16px; font-weight:600; letter-spacing:.02em;
  text-align:center; user-select:all;
  background:var(--bg-secondary); border:0.5px solid var(--border);
  border-radius:var(--radius-md); padding:10px 14px; margin-bottom:1rem;
}
.profile-danger-input { margin-bottom:.25rem; }


/* ── Onglets d'exemplaires (modal groupé) ────────────────── */
.modal-tabs {
  display:flex; align-items:center; gap:4px;
  padding:8px 0 10px; border-bottom:0.5px solid var(--border);
  overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
}
.modal-tabs::-webkit-scrollbar { display:none; }
.modal-tab {
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); background:var(--bg-secondary);
  border-radius:var(--radius-md); padding:4px 12px;
  font-size:13px; cursor:pointer; color:var(--text-secondary); white-space:nowrap;
  flex-shrink:0;
}
.modal-tab.active {
  background:var(--accent-bg); color:var(--accent);
  border-color:var(--accent); font-weight:600;
}
.modal-tab-add {
  border:0.5px dashed var(--border); background:transparent;
  border-radius:var(--radius-md); padding:4px 10px;
  font-size:16px; cursor:pointer; color:var(--text-secondary); line-height:1;
}
.modal-tab-add:hover { border-color:var(--border-hover); color:var(--text-primary); }

/* ── Carte groupée (affichage copies regroupées) ─────────── */
.game-card--group .group-copies {
  margin-top:6px; display:flex; flex-direction:column; gap:3px;
}
.group-copy-line {
  font-size:12px; color:var(--text-secondary);
  display:flex; align-items:center; gap:6px;
}
.group-count-badge {
  font-size:11px; font-weight:600; padding:1px 6px;
  border-radius:var(--radius-md); background:#e8f0fb; color:#2a5fa8;
  margin-left:6px; vertical-align:middle;
}
@media (prefers-color-scheme:dark) {
  .group-count-badge { background:#1a2e42; color:#7ab0e0; }
}
[data-theme="dark"]  .group-count-badge { background:#1a2e42; color:#7ab0e0; }
[data-theme="light"] .group-count-badge { background:#e8f0fb; color:#2a5fa8; }

/* ── Genre-picker ── */
.genre-picker { display:flex; flex-direction:column; gap:6px; }
.genre-picker__input { display:flex; gap:6px; align-items:center; }
.genre-picker__input select { flex:1; min-width:0; }
.genre-picker__input button { white-space:nowrap; }

.genre-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:0; }

.genre-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:12px; padding:2px 4px 2px 2px;
  border:0.5px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-secondary); color:var(--text-primary);
}
.genre-tag--primary {
  border-color:var(--text-primary); background:var(--text-primary); color:var(--bg-primary);
}
.genre-tag__primary {
  background:none; border:none; cursor:pointer; padding:0 2px;
  font-size:13px; line-height:1; color:var(--text-secondary);
  opacity:.5;
}
.genre-tag__primary:hover { opacity:1; }
.genre-tag--primary .genre-tag__primary { color:var(--bg-primary); opacity:1; }
.genre-tag__remove {
  background:none; border:none; cursor:pointer; padding:0 2px;
  font-size:13px; line-height:1; color:var(--text-secondary);
  opacity:.5;
}
.genre-tag__remove:hover { opacity:1; color:var(--danger, #c0392b); }
.genre-tag--primary .genre-tag__remove { color:var(--bg-primary); }

/* ── Modale cohérence ── */
.coherence-content { font-size:14px; line-height:1.6; }
.coherence-content ul { margin:.4rem 0 .8rem 1.2rem; padding:0; }
.coherence-content li { margin-bottom:.25rem; }
.coherence-section-title {
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-secondary);
  margin:.8rem 0 .2rem;
}
.coherence-section-title:first-child { margin-top:0; }

/* ── Vue lecture seule (game modal RO mode) ── */
.ro-copy-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ro-platform { font-size:15px; font-weight:600; color:var(--text-primary); }
.status-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
  background: var(--bg-secondary); color: var(--text-secondary);
}
.status-badge--backlog   { background:#e8eef8; color:#2c5a9e; }
.status-badge--playing   { background:#e8f4e8; color:#2a6a2a; }
.status-badge--completed { background:#d8f0d8; color:#1a5c1a; }
.status-badge--wishlist  { background:#f8f4e8; color:#8c6c1a; }
.ro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px 16px;
  margin-bottom: 12px;
}
.ro-field { display:flex; flex-direction:column; gap:2px; }
.ro-label {
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-secondary);
}
.ro-value { font-size:14px; color:var(--text-primary); }
.ro-notes-label {
  display:block;
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-secondary);
  margin:8px 0 4px;
}
.ro-notes { font-size:14px; color:var(--text-primary); line-height:1.5; white-space:pre-wrap; margin:0; }
@media (prefers-color-scheme: dark) {
  .status-badge--backlog   { background:#1a2a3a; color:#7aabec; }
  .status-badge--playing   { background:#1a2e1a; color:#6ec06e; }
  .status-badge--completed { background:#142814; color:#5ab05a; }
  .status-badge--wishlist  { background:#2e2a14; color:#d4a83a; }
}

/* ════════════════════════════════════════════════════════════════
   ADAPTATION GRANDS ÉCRANS
   Layout : sidebar (filtres) + contenu (grille/tableau)
   Compatible responsive : aucune règle ne s'applique < 1440 px
   ════════════════════════════════════════════════════════════════ */

/* ── ≥ 1440 px : container élargi, grille légèrement plus dense ── */
@media (min-width: 1440px) {
  .container { max-width: 1440px; }
  .game-grid  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── ≥ 1600 px : layout sidebar ────────────────────────────────
   Colonne gauche (270 px) : stats + toolbar sticky
   Colonne droite (fluide)  : grille ou tableau de jeux
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {

  /* Conteneur vues Jeux / Consoles : pleine largeur en grille 2 col */
  #viewGames,
  #viewConsoles {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 3rem;
    display: grid;
    grid-template-columns: 270px 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  /* ── JEUX — placement explicite des enfants ── */
  #stats                { grid-column: 1; grid-row: 1; }
  #legend               { grid-column: 1; grid-row: 2; }
  #viewGames > .toolbar { grid-column: 1; grid-row: 3; }
  #gameGrid             { grid-column: 2; grid-row: 1 / 4; }
  #pagination           { grid-column: 2; grid-row: 4; }

  /* ── CONSOLES — placement explicite des enfants ── */
  #consoleStats            { grid-column: 1; grid-row: 1; }
  #viewConsoles > .toolbar { grid-column: 1; grid-row: 2; }
  #consoleGrid             { grid-column: 2; grid-row: 1 / 3; }

  /* ── Stats verticalisées dans la sidebar ── */
  #stats,
  #consoleStats {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin-bottom: .75rem;
  }
  #stats .stat-bar-left,
  #consoleStats .stat-bar-left {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  #stats .stat-item,
  #consoleStats .stat-item {
    padding: 6px 0;
  }
  #stats .stat-item + .stat-item,
  #consoleStats .stat-item + .stat-item {
    border-left: none;
    padding-left: 0;
    border-top: 0.5px solid var(--border);
  }
  #stats .stat-bar-families {
    padding-top: 10px;
    border-top: 0.5px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* ── Toolbar sticky dans la sidebar ── */
  #viewGames > .toolbar,
  #viewConsoles > .toolbar {
    position: sticky;
    top: 52px;
    z-index: 40;
    background: var(--bg-tertiary);
    padding-top: .5rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
  }

  /* Rangées de filtres verticalisées */
  #viewGames > .toolbar .toolbar-row,
  #viewConsoles > .toolbar .toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #viewGames > .toolbar .search-wrap,
  #viewConsoles > .toolbar .search-wrap { flex: none; min-width: 0; }
  #viewGames > .toolbar .view-toggle,
  #viewConsoles > .toolbar .view-toggle { margin-left: 0; align-self: flex-start; }
  #viewGames > .toolbar .status-pills,
  #viewConsoles > .toolbar .status-pills { flex-wrap: wrap; gap: 4px; }
  #viewGames > .toolbar .toolbar-row--secondary select,
  #viewConsoles > .toolbar .toolbar-row--secondary select { width: 100%; min-width: 0; }
  #viewGames > .toolbar .sort-wrap,
  #viewConsoles > .toolbar .sort-wrap { align-items: stretch; width: 100%; }
  #viewGames > .toolbar .sort-wrap select,
  #viewConsoles > .toolbar .sort-wrap select { flex: 1; min-width: 0; }

  /* ── Grille de cartes plus dense dans la colonne droite ── */
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }
}

/* ── ≥ 1920 px : sidebar un peu plus large ── */
@media (min-width: 1920px) {
  #viewGames,
  #viewConsoles {
    grid-template-columns: 290px 1fr;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

/* ── ≥ 2560 px (2K / 4K) : sidebar plus ample, cartes plus grandes ── */
@media (min-width: 2560px) {
  #viewGames,
  #viewConsoles {
    grid-template-columns: 320px 1fr;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

/* ── Écran d'import CSV ────────────────────────────────────────
   Trois états dans un même écran : progression de l'analyse, revue ligne à
   ligne, bilan. La structure est commune aux jeux et aux consoles. */

.import-progress-bar {
  height: 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0 .5rem;
}
.import-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}
.import-progress-label { color: var(--text-secondary); font-size: .9rem; }

/* En-tête de revue : c'est le passage obligé avant la liste des lignes, pas le
   contenu principal — il doit tenir en quelques lignes pour que les lignes du
   fichier restent visibles sans défiler. */
.import-summary { padding: .9rem 1rem; }
.import-summary h2 { margin-bottom: .5rem; }

.import-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2rem 1.25rem; margin: 0 0 .6rem;
  font-size: .84rem;
}
.import-meta dt { color: var(--text-secondary); }
.import-meta dt::after { content: ' :'; }
.import-meta dd { margin: 0 .5rem 0 0; }

.import-dateformat { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.import-dateformat .field { margin-bottom: 0; flex: 0 0 auto; }
.import-dateformat .field label { margin-bottom: 2px; }
.import-dateformat select { width: auto; min-width: 12rem; }
.import-dateformat .import-notice { margin-top: 0; flex: 1 1 18rem; align-self: center; }

.import-notice {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: .6rem .8rem;
  margin-top: .75rem;
  font-size: .9rem;
}
.import-notice--info   { border-left-color: var(--accent);      background: var(--accent-bg); }
.import-notice--warn   { border-left-color: var(--s-wishlist);  background: var(--bg-tertiary); }
.import-notice--danger { border-left-color: var(--text-danger); background: var(--bg-danger); color: var(--text-danger); }
.import-notice ul { margin: .4rem 0 0 1.1rem; }

/* Compteurs, qui servent aussi de filtres */
.import-counters { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.import-counter-group { display: flex; flex-direction: column; gap: .3rem; }
.import-counter-caption { font-size: .74rem; color: var(--text-secondary); }
.import-counter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.import-counter {
  display: flex; flex-direction: column; align-items: center;
  min-width: 5.5rem; padding: .5rem .75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.import-counter:hover  { border-color: var(--border-hover); }
.import-counter.active { border-color: var(--accent); background: var(--accent-bg); }
.import-counter-value { font-size: 1.15rem; font-weight: 600; }
.import-counter-label { font-size: .78rem; color: var(--text-secondary); }

/* Chaque compteur reprend la couleur du badge des lignes qu'il filtre : le lien
   entre « 12 à arbitrer » et les lignes orange plus bas doit se voir avant d'être lu. */
.import-counter--matched   { border-left: 3px solid var(--s-completed); }
.import-counter--new       { border-left: 3px solid var(--accent); }
.import-counter--ambiguous { border-left: 3px solid var(--s-wishlist); }
.import-counter--warnings  { border-left: 3px solid var(--s-wishlist); }
.import-counter--existing  { border-left: 3px solid var(--accent); }
.import-counter--unmatched,
.import-counter--invalid,
.import-counter--blocking  { border-left: 3px solid var(--text-danger); }

.import-counter--matched   .import-counter-value { color: var(--s-completed); }
.import-counter--new       .import-counter-value,
.import-counter--existing  .import-counter-value { color: var(--accent); }
.import-counter--ambiguous .import-counter-value,
.import-counter--warnings  .import-counter-value { color: #a06a05; }
.import-counter--unmatched .import-counter-value,
.import-counter--invalid   .import-counter-value,
.import-counter--blocking  .import-counter-value { color: var(--text-danger); }

.import-bulk { display: flex; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }

/* Lignes du fichier */
.import-rows { display: flex; flex-direction: column; gap: .5rem; }
.import-row {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: .6rem .75rem;
}
/* L'état « sera importée » se lit sur le liseré, dans la couleur de la case à
   cocher. Une opacité globale sur les lignes décochées éteignait aussi leurs
   commandes : l'utilisateur ne voyait plus qu'il pouvait encore les arbitrer,
   alors que c'est précisément là qu'il a quelque chose à faire. */
.import-row--included   { border-left-color: var(--accent); }
.import-row--excluded   { border-left-color: var(--border); background: var(--bg-primary); }
.import-row--excluded .import-row-title { color: var(--text-secondary); font-weight: 500; }
.import-row--unresolved { border-left-color: var(--text-danger); }

.import-row-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.import-row-check { display: flex; align-items: center; }
.import-row-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.import-row-check input[type=checkbox]:disabled { cursor: not-allowed; opacity: .45; }
.import-row-toggle { background: none; border: none; cursor: pointer; padding: .2rem; color: var(--text-secondary); }
.import-row-line { color: var(--text-secondary); font-size: .8rem; white-space: nowrap; }
.import-row-title { font-weight: 600; flex: 1; min-width: 8rem; }
.import-row-platform { color: var(--text-secondary); font-size: .85rem; }

.import-badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.import-badge--matched   { background: rgba(99,153,34,.16);  color: var(--s-completed); }
.import-badge--new       { background: var(--accent-bg);     color: var(--accent); }
.import-badge--ambiguous { background: rgba(239,159,39,.18); color: #a06a05; }
.import-badge--unmatched { background: var(--bg-danger);     color: var(--text-danger); }
.import-badge--invalid   { background: var(--bg-danger);     color: var(--text-danger); }

/* Tag d'information, en fin de ligne : il complète le badge de classement sans le
   remplacer, et ne signale rien de bloquant — d'où le contour plutôt qu'un aplat, qui
   l'aurait mis sur le même plan que le statut de la ligne. */
.import-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; padding: .15rem .5rem;
  border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: help;
}
.import-tag i { font-size: .9rem; }
.import-tag--existing { border-color: var(--accent); color: var(--accent); }

/* Fiche du catalogue retenue pour la ligne */
.import-row-target {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .35rem; padding-left: 1.9rem;
  font-size: .82rem;
}
.import-row-target-label { color: var(--text-secondary); }
.import-row-target-label::after { content: ' :'; }
.import-row-target-value { font-weight: 500; }

.import-row-warnings { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.import-warn {
  font-size: .78rem; padding: .12rem .45rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

/* Arbitrage d'une ligne */
.import-row-resolve {
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
}
.import-resolve-intro { font-size: .85rem; color: var(--text-secondary); }
.import-candidates { display: flex; flex-wrap: wrap; gap: .5rem; }
.import-candidate {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .45rem .6rem; text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.import-candidate:hover    { border-color: var(--border-hover); }
.import-candidate.selected { border-color: var(--accent); background: var(--accent-bg); }
.import-candidate small    { color: var(--text-secondary); font-size: .78rem; }
.import-candidate em       { color: var(--s-wishlist); font-size: .74rem; font-style: normal; }

.import-resolve-search { width: 100%; max-width: 26rem; }
.import-resolve-search input { width: 100%; }
.import-search-results { display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; }
.import-search-item {
  text-align: left; padding: .35rem .5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.import-search-item:hover { border-color: var(--accent); }
.import-search-item small { color: var(--text-secondary); margin-left: .4rem; }

.import-fix { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }

/* Détail : toutes les colonnes lues et leur interprétation */
.import-row-detail { margin-top: .6rem; overflow-x: auto; }
.import-detail-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.import-detail-table th,
.import-detail-table td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid var(--border); }
.import-detail-table thead th { color: var(--text-secondary); font-weight: 600; }
.import-detail-table tbody th { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.import-detail-changed { color: var(--accent); font-weight: 600; }
.import-detail-target td { font-weight: 600; }
.import-detail-target th,
.import-detail-target td { background: var(--bg-tertiary); }

/* Pied fixe : ce qui sera écrit */
.import-footer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
}
.import-footer-actions { display: flex; gap: .5rem; }
.import-footer-info { display: flex; flex-direction: column; gap: .1rem; }
.import-footer-hint { font-size: .78rem; color: var(--text-secondary); }

/* Bilan */
.import-result-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.import-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 6rem; padding: .6rem .9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
}
/* Mêmes couleurs que les statuts de l'écran de revue, pour que le bilan se lise
   dans la continuité de ce qui vient d'y être arbitré. */
.import-stat--imported,
.import-stat--linked    { border-left-color: var(--s-completed); }
.import-stat--imported  .import-stat-value,
.import-stat--linked    .import-stat-value { color: var(--s-completed); }
.import-stat--created,
.import-stat--created_temporary { border-left-color: var(--accent); }
.import-stat--created .import-stat-value,
.import-stat--created_temporary .import-stat-value { color: var(--accent); }
.import-stat--duplicates,
.import-stat--excluded  { border-left-color: var(--s-wishlist); }
.import-stat--duplicates .import-stat-value,
.import-stat--excluded   .import-stat-value { color: #a06a05; }
.import-stat--blocked,
.import-stat--invalid,
.import-stat--deleted,
.import-stat--errors    { border-left-color: var(--text-danger); }
.import-stat--blocked .import-stat-value,
.import-stat--invalid .import-stat-value,
.import-stat--deleted .import-stat-value,
.import-stat--errors  .import-stat-value { color: var(--text-danger); }
.import-stat-value { font-size: 1.3rem; font-weight: 600; }
.import-stat-label { font-size: .78rem; color: var(--text-secondary); text-align: center; }
.import-result-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* Doublon des sorties, réservé au petit écran (voir la règle média plus bas). */
.import-secondary-actions { display: none; margin-top: 1.25rem; }
.import-secondary-actions .import-result-actions { margin-top: .5rem; }

@media (max-width: 640px) {
  .import-row-head { gap: .4rem; }
  .import-row-platform { width: 100%; }

  /* Le bandeau collant se réduit à ce qu'il a de vraiment collant : le décompte
     et l'action principale. Retour et Annuler passent en fin de liste, où ils ne
     risquent pas l'appui involontaire. */
  .import-footer {
    gap: .5rem;
    padding: .5rem .75rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
  .import-footer-hint { display: none; }
  .import-footer-info  { flex: 1 1 auto; min-width: 0; }
  .import-footer-actions { flex: 0 0 auto; }
  .import-footer-actions .btn-secondary,
  .import-footer-actions .btn-danger { display: none; }
  #importFooterSummary { font-size: .82rem; }

  .import-secondary-actions { display: block; }
}

/* ══ Écran Statistiques ═══════════════════════════════════════
   Les barres sont en HTML plutôt qu'en SVG : le placement d'un libellé qui ne
   tient pas dans sa barre demanderait de mesurer le texte rendu, ce dont le
   flux HTML se charge nativement (cf. en-tête de js/charts.js).
   Une seule teinte pour les barres de magnitude — la longueur porte déjà la
   grandeur, colorer par valeur la double-encoderait.                          */

/* Marges négatives + padding : le fond collant couvre toute la largeur du conteneur
   (rien ne défile dans les gouttières) et les champs restent en retrait du bord. */
.stats-filters {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-primary);
  margin: 0 -1rem 1rem;
  padding: .75rem 1rem .7rem;
  border-bottom: 0.5px solid var(--border);
}
.stats-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stats-filters__row--sub { margin-top: .5rem; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.seg-btn {
  padding: 6px 12px; font-size: 13px; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); border-right: 1px solid var(--border);
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--accent-bg); color: var(--text-primary); font-weight: 600; }

.stats-filter { max-width: 190px; font-size: 13px; padding: 6px 8px; }

/* La règle globale `input { width:100% }` étire les cases à cocher et disloque
   le libellé : on leur rend leur taille intrinsèque. */
.stats-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.stats-toggle input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.stats-selection { font-size: 13px; color: var(--text-secondary); margin-left: auto; }

/* Les filtres actifs sont l'information la plus importante de la barre : sans eux, on lit
   des chiffres partiels en croyant lire le tout. Bandeau propre, libellé explicite, et une
   réinitialisation qui se voit. */
.stats-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  width: 100%; margin-top: .5rem; padding: .45rem .6rem;
  background: var(--accent-bg); border: 1px solid var(--accent-ring);
  border-radius: var(--radius-md);
}
.stats-chips__label {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  margin-right: .1rem; display: inline-flex; align-items: center; gap: .3rem;
}
.stats-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--accent); border-radius: 999px;
}
.stats-chip:hover { border-color: var(--text-primary); }
.stats-chip .ti { font-size: 13px; opacity: .7; }
.stats-chip--reset {
  margin-left: auto; background: var(--accent); color: #fff;
  border-color: var(--accent); font-weight: 600;
}
.stats-chip--reset:hover { filter: brightness(1.12); border-color: var(--accent); }

.stats-tabs { margin-bottom: 1rem; }

/* align-items:start — sans quoi chaque carte s'étire à la hauteur de la plus
   haute de sa rangée, laissant de grands vides sous les graphiques courts. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.stats-grid--single { grid-template-columns: 1fr; margin-top: 1rem; }

/* ── Tuiles d'indicateur ── */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat-tile {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.stat-tile__label { font-size: 12px; color: var(--text-secondary); }
.stat-tile__value { font-size: 26px; font-weight: 600; line-height: 1.15; }
.stat-tile__hint  { font-size: 11px; color: var(--text-secondary); }

/* ── Carte de graphique ── */
.chart-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
}
.chart-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.chart-card__actions { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.chart-card__icon {
  display: inline-flex; padding: 3px 5px; background: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-secondary);
}
.chart-card__icon:hover { border-color: var(--border); color: var(--text-primary); }

/* Carte repliée : seul l'en-tête reste, pour pouvoir la rouvrir. */
.chart-card.is-hidden .chart-card__content,
.chart-card.is-hidden .chart-card__sub { display: none; }
.chart-card.is-hidden { opacity: .75; }
.chart-card.is-hidden .chart-card__toggle { display: none; }

/* Plafond de hauteur : une grille de cartes doit se lire d'un coup d'œil. Au-delà, la
   carte défile, et le bouton « agrandir » la montre en entier. */
.chart-card__content { max-height: 340px; overflow: auto; }

/* Agrandissement : la carte passe au-dessus de tout, sans plafond. */
.card-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55);
}
/* `max-height` plutôt qu'un `inset` complet : une carte au contenu court reste courte
   au lieu d'occuper l'écran entier pour cinq lignes. */
.chart-card.is-expanded {
  position: fixed; z-index: 61;
  top: 3vh; left: 3vw; right: 3vw;
  max-height: 94vh; margin: 0; overflow: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.chart-card.is-expanded .chart-card__content { max-height: none; }
body.has-expanded-card { overflow: hidden; }
/* `flex: 1` — avec la poignée de déplacement, l'en-tête compte trois éléments et le
   `space-between` centrait le titre au lieu de le laisser à gauche. */
.chart-card__title { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.chart-card__sub { font-size: 12px; color: var(--text-secondary); margin-bottom: .5rem; }
.chart-card__toggle {
  font-size: 11px; padding: 2px 8px; background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary);
}
.chart-card__toggle.is-open { background: var(--accent-bg); color: var(--text-primary); }
.chart-card__body { margin-top: .6rem; }
.chart-card__table { margin-top: .75rem; overflow-x: auto; }
.stats-hidden-bar { display: flex; align-items: center; gap: .6rem; font-size: 12px;
                    color: var(--text-secondary); margin-bottom: .75rem; }

/* ── Barres horizontales ──
   Extrémité de donnée arrondie (4px), pied carré sur la ligne de base ;
   2px de surface séparent deux barres voisines.                             */
.chart-bars { display: flex; flex-direction: column; gap: 2px; }
.chart-row {
  display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto;
  align-items: center; gap: .6rem;
  width: 100%; padding: 2px 0; background: none; border: none; text-align: left;
  font: inherit; color: inherit;
}
.chart-row--clickable { cursor: pointer; border-radius: var(--radius-md); }
.chart-row--clickable:hover .chart-row__fill { filter: brightness(1.12); }
.chart-row--clickable:hover { background: var(--bg-tertiary); }
.chart-row--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chart-row__label {
  font-size: 13px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-row__track { height: var(--bar-max, 24px); max-height: 24px; display: flex; align-items: stretch; }
.chart-row__fill {
  background: var(--bar-color, var(--accent));
  border-radius: 0 4px 4px 0;   /* arrondi côté donnée, carré au pied */
  min-width: 2px;
}
.chart-row__value { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-row--muted .chart-row__fill { background: var(--text-secondary); opacity: .45; }
.chart-row--muted .chart-row__label { color: var(--text-secondary); }

/* ── Barre composée (part-to-whole) ── */
.chart-stack { display: flex; height: 24px; border-radius: 4px; overflow: hidden; gap: 2px; }
.chart-stack__seg { background: var(--seg-color); display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .6rem; }
.chart-legend__item { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; }
.chart-legend__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--seg-color); flex: 0 0 auto; }
.chart-legend__label { color: var(--text-primary); }
.chart-legend__value { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.chart-empty { font-size: 13px; color: var(--text-secondary); padding: .5rem 0; }

/* ── Vue tableau (alternative non graphique, toujours disponible) ── */
.chart-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chart-table th, .chart-table td { padding: 5px 8px; text-align: left; border-bottom: 0.5px solid var(--border); }
.chart-table thead th { color: var(--text-secondary); font-weight: 600; }
.chart-table td, .chart-table tbody th { font-weight: 400; }
.chart-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .stats-filter { max-width: none; flex: 1 1 140px; }
  .stats-selection { margin-left: 0; width: 100%; }
  .chart-row { grid-template-columns: minmax(70px, 40%) 1fr auto; }
  .stat-tile__value { font-size: 22px; }
}

/* ── Colonnes verticales (séries chronologiques) ── */
.chart-cols { display: flex; align-items: flex-end; gap: 2px; }
.chart-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; font: inherit; color: inherit;
}
.chart-col--clickable { cursor: pointer; border-radius: var(--radius-md); }
.chart-col--clickable:hover { background: var(--bg-tertiary); }
.chart-col--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chart-col__cap { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-col__track { height: var(--col-h, 150px); width: 100%; max-width: 24px; display: flex; align-items: flex-end; }
.chart-col__fill {
  width: 100%; background: var(--accent);
  border-radius: 4px 4px 0 0;   /* arrondi côté donnée, carré au pied */
  min-height: 2px;
}
.chart-col__label {
  font-size: 11px; color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Heatmap ──
   Rampe séquentielle d'une seule teinte obtenue par mélange accent/surface :
   monotone en clarté par construction, et suit le thème sans table de couleurs. */
.heat { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.heat-row { display: flex; gap: 2px; align-items: center; }
.heat-rowhead, .heat-corner {
  flex: 0 0 46px; font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; text-align: right; padding-right: .3rem;
}
.heat-colhead {
  flex: 1 1 0; min-width: 22px; font-size: 10px; color: var(--text-secondary);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heat-cell {
  flex: 1 1 0; min-width: 22px; height: 22px; border-radius: 3px;
  background: color-mix(in oklab, var(--accent) var(--heat), var(--bg-tertiary));
}
.heat-cell--empty { background: var(--bg-tertiary); opacity: .5; }
.heat-legend { display: flex; align-items: center; gap: 3px; margin-top: .6rem; font-size: 11px; color: var(--text-secondary); }
.heat-legend__min { margin-right: .2rem; }
.heat-legend__max { margin-left: .2rem; }
.heat-swatch {
  width: 20px; height: 10px; border-radius: 2px;
  background: color-mix(in oklab, var(--accent) var(--heat), var(--bg-tertiary));
}

@media (max-width: 640px) {
  .chart-col__cap { display: none; }   /* trop étroit pour une valeur lisible */
  .heat-rowhead, .heat-corner { flex-basis: 34px; }
}

/* Trois onglets seulement : `flex:1` (hérité de .tab) les étirerait sur tout
   l'écran et donnerait un soulignement actif large d'un tiers de page. */
.stats-tabs .tab { flex: 0 0 auto; padding: 8px 22px; }

/* Sans plafond de largeur, huit colonnes de mois étalées sur 1 200 px donnent
   des cases de 140 px : la grille se lit alors comme des barres. */
.heat-cell, .heat-colhead { max-width: 46px; }
.heat-row { justify-content: flex-start; }
.stats-note { font-size: 12px; color: var(--text-secondary); margin: 0 0 1rem; }

/* ── Tableau croisé ──
   Un vrai tableau, pas un graphique : au-delà de quelques modalités, des nombres
   alignés se lisent mieux que des couleurs — et se recopient. La teinte de fond
   n'est qu'un appui, sur la même rampe séquentielle que la heatmap.            */
.pivot-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.pivot-controls label { display: flex; flex-direction: column; gap: .2rem; font-size: 12px; color: var(--text-secondary); }
.pivot-controls select { min-width: 150px; font-size: 13px; padding: 6px 8px; }
.pivot-controls .stats-toggle { flex-direction: row; align-items: center; align-self: center; }
.pivot-controls .btn-sm { align-self: center; }

.pivot-wrap { overflow-x: auto; }
.pivot { border-collapse: collapse; font-size: 13px; width: 100%; }
.pivot th, .pivot td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 0.5px solid var(--border); }
.pivot thead th { color: var(--text-secondary); font-weight: 600; position: sticky; top: 0; background: var(--bg-secondary); }
/* `.pivot th` (0,1,1) l'emportait sur `.pivot-rowhead` seul (0,1,0) : les en-têtes de
   ligne repassaient à droite. */
.pivot .pivot-corner, .pivot .pivot-rowhead { text-align: left; }
.pivot-rowhead { font-weight: 400; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pivot-colhead { cursor: pointer; user-select: none; }
.pivot-colhead:hover { color: var(--text-primary); }
.pivot-colhead.is-sorted { color: var(--accent); }
.pivot-cell { font-variant-numeric: tabular-nums; }
.pivot-cell--shaded { background: color-mix(in oklab, var(--accent) var(--heat, 0%), transparent); }
.pivot-cell--empty { color: var(--text-secondary); opacity: .5; }
.pivot-total { font-weight: 600; }
.pivot-footrow th, .pivot-footrow td { border-top: 1px solid var(--border); border-bottom: none; font-weight: 600; }

@media (max-width: 640px) {
  .pivot-controls select { min-width: 0; width: 100%; }
  .pivot-controls label { flex: 1 1 100%; }
}

/* ── Réagencement des cartes ──
   `scrollbar-gutter: stable` réserve la place de la barre de défilement en
   permanence : sans elle, la barre se superposait au contenu et rognait la
   valeur en bout de barre ou la dernière colonne d'un tableau croisé. */
.chart-card__content { scrollbar-gutter: stable; padding-right: 2px; }

.chart-card--full { grid-column: 1 / -1; }
.chart-card__grip {
  display: inline-flex; align-items: center; color: var(--text-secondary);
  cursor: grab; opacity: .45; margin-right: .1rem; flex: 0 0 auto;
}
.chart-card:hover .chart-card__grip { opacity: .9; }
.chart-card__grip:active { cursor: grabbing; }
.chart-card.is-dragging { opacity: .45; outline: 2px dashed var(--accent); }
.chart-card__head { align-items: center; }

/* Une carte agrandie sort du flux : elle ne doit plus occuper de colonne. */
.chart-card.is-expanded { grid-column: auto; }

.stats-hidden-bar { flex-wrap: wrap; }