/* ============================================================================
   MYGAMELIST V4 — DESIGN SYSTEM & CHROME (refonte « réseau social »)
   ----------------------------------------------------------------------------
   Socle de la refonte : tokens, topbar, grille 3 colonnes (nav | contenu |
   widgets), rail d'icônes, drawer + bottom-bar mobile, composants de base.
   S'appuie sur les variables d'identité de base.css (--blue, --pseudo,
   --pro-badge-*, --game-name, --font-*) → le dark mode existant
   ([data-theme="dark"]) est hérité automatiquement.
   Chargé UNIQUEMENT par le layout v4.php (jamais avec navbar.css).
   ============================================================================ */

/* ── 1. TOKENS ──────────────────────────────────────────── */
:root {
  --v4-topbar-h: 64px;
  --v4-nav-w:    250px;
  --v4-rail-w:   68px;
  --v4-aside-w:  320px;
  --v4-gap:      20px;
  --v4-shell-max: 1400px;

  --v4-bg:        var(--gray-50);
  --v4-surface:   var(--card-bg);
  --v4-border:    var(--gray-200);
  --v4-radius:    14px;
  --v4-radius-sm: 10px;

  /* Bandeau bleu standard v4 (même langage que les bandes Pro/Pro+) —
     source unique du dégradé, réutilisée par tous les bandeaux de page. */
  --v4-hero-gradient: linear-gradient(135deg, #0b2a66 0%, #1d4ed8 55%, #3b82f6 100%);

  /* Couleurs de section (identité subnav conservée) */
  --v4-c-consoles:   #2563eb;
  --v4-c-classement: #059669;
  --v4-c-news:       #ea580c;
  --v4-c-albums:     #7c3aed;
  --v4-c-forum:      #dc2626;
  --v4-c-avis:       #d97706;
}

.v4-body {
  background: var(--v4-bg);
  min-height: 100vh;
}

/* ── 2. TOPBAR (fine, sticky, glass) ────────────────────── */
.v4-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--v4-topbar-h);
  background: color-mix(in srgb, var(--v4-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v4-border);
}
.v4-topbar-inner {
  max-width: var(--v4-shell-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.v4-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.v4-logo img { height: 42px; width: auto; display: block; }
.v4-logo-since {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.1;
}

/* Recherche */
.v4-search {
  position: relative;
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--gray-100);
  border: 1px solid var(--v4-border);
  border-radius: 999px;
  transition: var(--transition);
}
.v4-search:focus-within {
  background: var(--v4-surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
}
.v4-search i { color: var(--text-muted); font-size: 16px; }
.v4-search-fav { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.v4-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 13.5px;
  color: var(--text);
}
.v4-search input::placeholder { color: var(--text-muted); }

/* Résultats de recherche live */
.v4-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 105;
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.v4-sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--v4-radius-sm);
  transition: var(--transition);
}
.v4-sr-item:hover { background: var(--gray-100); }
.v4-sr-jaq {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--gray-100);
  flex-shrink: 0;
}
.v4-sr-body { flex: 1; min-width: 0; }
.v4-sr-nom {
  display: block; /* span inline : sans block, overflow/ellipsis sont ignorés → le nom file sous le badge console */
  font-size: 13px;
  font-weight: 700;
  color: var(--game-name);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-sr-alt {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-sr-console {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  background: var(--gray-100);
  padding: 2px 7px;
  border-radius: 999px;
}
.v4-sr-owned {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}
.v4-sr-more, .v4-sr-empty {
  display: block;
  text-align: center;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
  border-radius: var(--v4-radius-sm);
}
.v4-sr-more:hover { background: var(--gray-100); }
.v4-sr-empty { color: var(--text-muted); font-weight: 600; }

/* Univers (Accueil / Collections / Jeux / Communauté) */
.v4-universe {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  height: 100%;
}
.v4-universe a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent; /* équilibre le border-bottom */
  transition: var(--transition);
}
.v4-universe a i { font-size: 18px; color: inherit; }
.v4-universe a:hover { color: var(--text); background: var(--gray-100); }
.v4-universe a.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
.v4-uni-btn {
  border-radius: var(--v4-radius-sm);
  background: var(--blue-light);
  color: var(--blue-mid);
  border: 1px solid rgba(43, 91, 168, 0.18);
  padding: 0 12px;
  min-height: 36px;
}
.v4-uni-btn:hover {
  background: #dbe8ff;
  color: var(--blue-mid);
}
.v4-uni-btn.active {
  background: #dbe8ff;
  color: var(--blue-mid);
  border-color: rgba(43, 91, 168, 0.26);
}

/* Dropdowns d'univers */
.v4-uni-item { position: relative; height: 100%; }
.v4-uni-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 14px;
  border: none;
  background: none;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  transition: var(--transition);
}
.v4-uni-btn i { font-size: 18px; color: inherit; }
.v4-uni-btn .v4-caret { font-size: 12px; transition: transform 0.2s ease; }
.v4-uni-btn:hover { color: var(--text); background: var(--gray-100); }
.v4-uni-item.open .v4-uni-btn { color: var(--blue); }
.v4-uni-item.open .v4-caret { transform: rotate(180deg); }
.v4-dd {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 105;
  min-width: 220px;
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: v4DdIn 0.15s ease;
}
.v4-uni-item.open .v4-dd { display: block; }
@keyframes v4DdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v4-dd a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--v4-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  transition: var(--transition);
  white-space: nowrap;
}
.v4-dd a i { font-size: 17px; width: 20px; text-align: center; }
.v4-dd a:hover { background: var(--gray-100); }

/* Actions (thème, notifs, avatar) */
.v4-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v4-iconbtn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  transition: var(--transition);
}
.v4-iconbtn:hover { background: var(--gray-200); }
.v4-iconbtn i { font-size: 17px; color: var(--text); }
#v4Theme .v4-ic-moon { color: #7c3aed; }
#v4Theme .v4-ic-sun { color: #d97706; }
.v4-actions .ph-translate { color: #0891b2; }
#navNotifBtn .ph-bell { color: #f59e0b; }
.v4-iconbtn .v4-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E24B4A;
  border: 2px solid var(--v4-surface);
}
.v4-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Icônes du bouton thème : on montre l'inverse du thème actif */
html:not([data-theme="dark"]) .v4-ic-sun  { display: none; }
html[data-theme="dark"]       .v4-ic-moon { display: none; }

/* ── Notifications & menu avatar (contrat DOM d'app.js : IDs navNotif*/navAvatar*,
      classes .navbar-notif-* / .navbar-avatar-* — stylées ici pour le chrome V4 ── */
.v4-notif-wrap, .v4-avatar-wrap { position: relative; }
.v4-avatarbtn { border: none; background: none; padding: 0; display: block; border-radius: 50%; }

/* Badge compteur (cloche — créé/mis à jour par app.js — et enveloppe) */
.navbar-notif-badge, .v4-count-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #E24B4A;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  border: 2px solid var(--v4-surface);
}

/* Panneau notifications */
.navbar-notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 106;
  width: 370px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-lg);
  animation: v4DdIn 0.15s ease;
}
.navbar-notif-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--v4-surface);
  border-bottom: 1px solid var(--v4-border);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
}
.navbar-notif-readall {
  border: none;
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-main);
}
.navbar-notif-readall:hover { text-decoration: underline; }
.navbar-notif-list { padding: 6px; }
.navbar-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--v4-radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.navbar-notif-item:hover { background: var(--gray-100); }
.navbar-notif-item--unread { background: var(--blue-light); }
.navbar-notif-item--unread:hover { background: color-mix(in srgb, var(--blue-light) 70%, var(--gray-100)); }
.navbar-notif-avatar-wrap { position: relative; flex-shrink: 0; }
.navbar-notif-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.navbar-notif-badge-icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
}
.navbar-notif-badge-icon i { font-size: 10px; }
.navbar-notif-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-100);
}
.navbar-notif-body { flex: 1; min-width: 0; }
.navbar-notif-titre { font-size: 13px; line-height: 1.45; word-break: break-word; }
.navbar-notif-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.navbar-notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 6px;
}
.navbar-notif-empty, .navbar-notif-loading {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.navbar-notif-pseudo { color: var(--pseudo); font-weight: 700; }
.navbar-notif-pseudo--pro { color: var(--pseudo-pro); }
.navbar-notif-jeu { color: var(--game-name); font-weight: 700; }
/* Vignette jaquette (meta.jaquette, ex. prêts) — même pattern que .v4-sr-jaq */
.navbar-notif-jaq {
  flex-shrink: 0;
  width: 32px;
  height: 42px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--gray-100);
}

/* Menu avatar */
.navbar-avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 106;
  min-width: 240px;
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.navbar-avatar-dropdown.open { display: block; animation: v4DdIn 0.15s ease; }
.navbar-avatar-profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--v4-radius-sm);
  transition: var(--transition);
}
.navbar-avatar-profile-link:hover { background: var(--gray-100); }
.pseudo-name { font-weight: 600; color: var(--pseudo); font-size: 12px; }
.pseudo-name.pseudo-pro { color: var(--pseudo-pro); }
.navbar-avatar-sep { height: 1px; background: var(--v4-border); margin: 6px 4px; }
.navbar-avatar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--v4-radius-sm);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.navbar-avatar-item:hover { background: var(--gray-100); }
.navbar-avatar-item i { font-size: 17px; width: 20px; text-align: center; }
.navbar-avatar-item .ph-translate { color: #0891b2; }
.navbar-avatar-admin, .navbar-avatar-admin i { color: var(--yellow, #F5C518); }
.navbar-avatar-logout, .navbar-avatar-logout i { color: #E24B4A; }
.navbar-msg-badge {
  margin-left: auto;
  background: #E24B4A;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}
/* Petits écrans : panneau notifications en pleine largeur */
@media (max-width: 520px) {
  .navbar-notif-dropdown {
    position: fixed;
    top: calc(var(--v4-topbar-h) + 6px);
    left: 10px;
    right: 10px;
    width: auto;
  }
}

/* ── 3. GRILLE 3 COLONNES ───────────────────────────────── */
.v4-shell {
  display: grid;
  grid-template-columns: var(--v4-nav-w) minmax(0, 1fr) var(--v4-aside-w);
  gap: var(--v4-gap);
  max-width: var(--v4-shell-max);
  margin: 0 auto;
  padding: var(--v4-gap) 16px;
  align-items: start;
}
.v4-main { min-width: 0; }
/* Espacement horizontal aligné sur l'accueil du profil (référence) : là, le
   contenu (.profile-hero, .profile-section…) est posé DIRECTEMENT dans .v4-main,
   au ras du bord de la colonne — la seule marge vient de la grille .v4-shell.
   Pour que TOUTES les pages aient le même espacement, .container ne doit donc
   PAS réintroduire de gouttière latérale dans cette colonne. Les cartes/bandeaux
   fournissent eux-mêmes leur padding interne (le texte n'est jamais collé). */
.v4-main .container {
  padding-left: 0;
  padding-right: 0;
}
/* Bandeaux bleus full-bleed (fond au ras du bord de colonne comme .profile-hero) :
   padding horizontal INTERNE pour que leur texte ne colle pas au bord (miroir du
   padding de .profile-hero-body). Pas de margin → même bord que le profil.
   Leur .container interne ne doit rien réajouter. */
.v4-main .news-page-hero,
.v4-main .profile-page-hero,
.v4-main .settings-hero,
.v4-main .forum-hero,
.v4-main .gamelist-page-hero,
.v4-main .page-hero-sm,
.v4-main .pro-hero {
  padding-left: 22px;
  padding-right: 22px;
}
.v4-main .news-page-hero > .container,
.v4-main .profile-page-hero > .container,
.v4-main .settings-hero > .container,
.v4-main .forum-hero > .container,
.v4-main .gamelist-page-hero > .container,
.v4-main .page-hero-sm > .container,
.v4-main .pro-hero > .container {
  padding-left: 0;
  padding-right: 0;
}
/* Variante sans colonne widgets (pages de contenu classiques) */
.v4-shell--noaside { grid-template-columns: var(--v4-nav-w) minmax(0, 1fr); }

/* ── 4. COLONNE NAV GAUCHE ──────────────────────────────── */
.v4-nav {
  position: sticky;
  top: calc(var(--v4-topbar-h) + var(--v4-gap));
  max-height: calc(100vh - var(--v4-topbar-h) - var(--v4-gap) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}
/* Cadre blanc (surface) par section de liens — sans bordure */
.v4-nav-card {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 1px;
  background: var(--v4-surface);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-sm);
}
/* Carte « Bienvenue » (visiteurs non connectés) */
.v4-nav-welcome { padding: 16px; gap: 10px; }
.v4-nav-welcome-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.v4-nav-welcome-text {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}
.v4-nav-welcome-feats {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v4-nav-welcome-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.v4-nav-welcome-feats li i { font-size: 16px; color: var(--pseudo); flex-shrink: 0; }
.v4-nav-welcome-btn { width: 100%; justify-content: center; }
.v4-nav-welcome-btn + .v4-nav-welcome-btn { margin-top: -2px; }
.v4-nav-section {
  font-size: 11px;
  font-weight: 800;
  margin: auto;
  text-decoration: underline;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 14px 4px;
}
.v4-nav-profilecard {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 5px 5px;
  padding: 9px 10px !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--v4-surface));
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-sm);
}
.v4-nav-profilecard:hover { background: color-mix(in srgb, var(--blue) 10%, var(--v4-surface)); }
.v4-nav-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.v4-nav-profile-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.v4-nav-profile-name {
  display: block;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--pseudo);
}
.v4-nav-profile-name.pseudo-pro { color: var(--pseudo-pro); }
.v4-nav-profile-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 16px;
}
.v4-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-radius: var(--v4-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: var(--transition);
}
.v4-nav a i { font-size: 19px; width: 22px; text-align: center; flex-shrink: 0; }
/* Icône « Ma Gamelist » : favicon dans un cadre bleu (même dégradé que .btn-gamelist) */
.v4-nav a .v4-nav-glogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(to bottom, #3b74f5 0%, #3b74f5 50%, #2563eb 50%, #2563eb 100%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
}
.v4-nav a .v4-nav-glogo img { width: 13px; height: 13px; object-fit: contain; }
.v4-nav a:hover { background: var(--gray-100); }
.v4-nav a.active {
  background: var(--blue);
  color: #fff;
}
.v4-nav a.active i { color: #fff !important; }
.v4-nav-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--gray-100);
  padding: 1px 8px;
  border-radius: 999px;
}
.v4-nav a.active .v4-nav-count { background: rgba(255,255,255,0.18); color: #fff; }
/* Badges PRO / PRO+ sur les liens premium de la nav (alignés à droite, discrets) */
.v4-nav a .pro-tag { margin-left: auto; font-size: 8.5px; padding: 2px 6px; }
.v4-nav a.active .pro-tag { filter: brightness(1.1); }
/* Couleurs de section (icônes Explorer + dropdowns, texte neutre) */
.v4-nav a[data-c="consoles"]   i, .v4-dd a[data-c="consoles"]   i { color: var(--v4-c-consoles); }
.v4-nav a[data-c="classement"] i, .v4-dd a[data-c="classement"] i { color: var(--v4-c-classement); }
.v4-nav a[data-c="news"]       i, .v4-dd a[data-c="news"]       i { color: var(--v4-c-news); }
.v4-nav a[data-c="albums"]     i, .v4-dd a[data-c="albums"]     i { color: var(--v4-c-albums); }
.v4-nav a[data-c="forum"]      i, .v4-dd a[data-c="forum"]      i { color: var(--v4-c-forum); }
.v4-nav a[data-c="avis"]       i, .v4-dd a[data-c="avis"]       i { color: var(--v4-c-avis); }
.v4-nav-foot {
  margin-top: 10px;
  padding: 12px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--v4-border);
}

/* ── 5. COLONNE WIDGETS (aside) ─────────────────────────── */
.v4-aside {
  display: flex;
  flex-direction: column;
  gap: var(--v4-gap);
}
.v4-widget {
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.v4-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.v4-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.v4-widget-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}
.v4-widget-more:hover { text-decoration: underline; }
.v4-widget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: var(--v4-radius-sm);
  transition: var(--transition);
}
.v4-widget-row:hover { background: var(--gray-100); }
.v4-widget-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.v4-widget-row-body { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.v4-widget-row-body strong { color: var(--pseudo); font-weight: 700; }
.v4-widget-row-user { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.v4-widget-row-user strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v4-widget-row-sub { font-size: 11.5px; color: var(--text-muted); }
.v4-widget-news-author { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.v4-widget-news-author img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.v4-widget-news-author span { color: var(--text-muted); font-weight: 600; }
.v4-widget-news-author .v4-w-pro { color: var(--pseudo-pro) !important; }

/* Ligne « contribution » : champ modifié (couleur neutre, distincte du pseudo) */
.v4-widget-contrib-field {
  display: inline-block;
  color: var(--text-muted);
  background: var(--gray-100);
  font-weight: 600;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
/* Ligne « dernier jeu ajouté » : mini-jaquette rectangulaire (≠ avatar rond) */
.v4-widget-jaq {
  width: 30px !important;
  height: 40px !important;
  border-radius: 4px !important;
  object-fit: cover;
  background: var(--gray-100);
}
.v4-widget-gamename {
  color: var(--game-name);
  font-weight: 700;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Encart PRO (identité badge conservée) */
.v4-widget--pro {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pro-badge-bg) 14%, var(--v4-surface)),
    color-mix(in srgb, var(--pro-plus-badge-bg) 10%, var(--v4-surface)));
  border-color: color-mix(in srgb, var(--pro-badge-bg) 40%, transparent);
  text-align: center;
}
.v4-widget--pro .ph-crown { font-size: 28px; color: var(--pro-badge-bg); }
.v4-widget--pro h3 { font-family: var(--font-display); font-size: 16px; margin: 6px 0 4px; }
.v4-widget--pro p  { font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; }

/* Widget carousel « À découvrir » — jeux aléatoires en fondu (jaquette plein fond) */
.v4-carousel { position: relative; }
.v4-carousel-track {
  position: relative;
  border-radius: var(--v4-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #1a1d24;
}
.v4-carousel-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.v4-carousel-slide.is-active { opacity: 1; pointer-events: auto; }
/* Jaquette entière visible : s'ajuste en largeur à la hauteur du cadre (contain). */
.v4-carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v4-carousel-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.45) 55%, rgba(0,0,0,0));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.v4-carousel-name {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v4-carousel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.v4-carousel-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.v4-carousel-stat i { font-size: 13px; color: #fff; }
.v4-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.v4-carousel-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-400);
  cursor: pointer;
  transition: var(--transition);
}
.v4-carousel-dot:hover { background: var(--text-muted); }
.v4-carousel-dot.is-active { background: var(--pseudo); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .v4-carousel-slide { transition: none; }
}

/* ── 6. COMPOSANTS DE BASE V4 ───────────────────────────── */
.v4-card {
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.v4-card:hover { box-shadow: var(--shadow); }
.v4-card + .v4-card { margin-top: var(--v4-gap); }
.v4-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.v4-muted { color: var(--text-muted); font-size: 13px; }

/* Chip / segmented (repris du langage de la maquette, aux couleurs MGL) */
.v4-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--v4-border);
  background: var(--v4-surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.v4-chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.v4-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── 6bis. FOOTER ───────────────────────────────────────── */
.v4-footer {
  border-top: 1px solid var(--v4-border);
  background: var(--v4-surface);
  margin-top: 32px;
}
.v4-footer-inner {
  max-width: var(--v4-shell-max);
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.v4-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.v4-footer-links a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.v4-footer-links a:hover { color: var(--blue); }
.v4-footer-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.v4-footer-langs a { font-weight: 600; }
.v4-footer-langs a:hover { color: var(--blue); }
.v4-footer-langs strong { color: var(--text); }
@media (max-width: 799px) {
  .v4-footer { margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 7. BOTTOM-BAR + DRAWER (mobile) ────────────────────── */
.v4-bottombar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--v4-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--v4-border);
}
.v4-bottombar a,
.v4-bottombar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.v4-bottombar i { font-size: 21px; color: inherit; }
.v4-bottombar .active { color: var(--blue); }

.v4-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(8, 12, 22, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.v4-drawer-open .v4-backdrop { opacity: 1; pointer-events: auto; }

/* ── 8. RESPONSIVE ──────────────────────────────────────── */

/* ≤ 1179px : rail d'icônes + widgets masqués */
@media (max-width: 1179px) {
  .v4-shell { grid-template-columns: var(--v4-rail-w) minmax(0, 1fr); }
  .v4-aside { display: none; }
  .v4-nav-section, .v4-nav-count, .v4-nav-foot { display: none; }
  .v4-nav .v4-nav-profilecard { display: none; }
  .v4-nav-welcome { display: none; }
  .v4-nav-card { padding: 6px 4px; }
  .v4-nav a { justify-content: center; padding: 11px 0; }
  .v4-nav a span { display: none; }
  .v4-nav a i { width: auto; }
  .v4-universe a span, .v4-uni-btn span, .v4-uni-btn .v4-caret { display: none; }
  .v4-universe a, .v4-uni-btn { padding: 0 12px; }
  /* Dropdowns : alignés à droite pour ne pas déborder de l'écran */
  .v4-dd { left: auto; right: 0; }
}

/* ≤ 799px : une colonne, nav → drawer, bottom-bar */
@media (max-width: 799px) {
  .v4-shell { grid-template-columns: minmax(0, 1fr); padding: 12px 12px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .v4-universe { display: none; }
  .v4-search { max-width: none; }
  .v4-logo img { height: 30px; }
  .v4-bottombar { display: flex; }

  .v4-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 120;
    width: 290px;
    max-height: none;
    background: var(--v4-surface);
    border-right: 1px solid var(--v4-border);
    padding: 16px 12px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .v4-drawer-open .v4-nav { transform: translateX(0); }
  /* Le drawer retrouve les labels/sections cachés par le rail */
  /* Le drawer est déjà une surface : cadres à plat (pas de carte dans la carte) */
  .v4-nav-card { padding: 0; background: transparent; box-shadow: none; }
  .v4-nav a { justify-content: flex-start; padding: 10px 14px; }
  .v4-nav a span { display: inline; }
  .v4-nav a i { width: 22px; }
  .v4-nav .v4-nav-profilecard { display: flex; padding: 9px 10px !important; }
  .v4-nav .v4-nav-profilecard span { display: flex; }
  .v4-nav .v4-nav-profilecard .v4-nav-profile-name { display: block; max-width: 190px; }
  .v4-nav .v4-nav-profilecard .v4-nav-profile-meta { display: flex; }
  .v4-nav-section, .v4-nav-count, .v4-nav-foot { display: block; }
  .v4-nav-count { display: inline-block; }
  /* Carte « Bienvenue » : réaffichée dans le drawer, avec sa propre surface */
  .v4-nav-welcome { display: flex; padding: 16px; background: var(--v4-surface); box-shadow: var(--shadow-sm); }
}

/* ── 9. AJUSTEMENTS DARK ────────────────────────────────── */
[data-theme="dark"] .v4-topbar,
[data-theme="dark"] .v4-bottombar {
  background: color-mix(in srgb, var(--v4-surface) 88%, transparent);
}
[data-theme="dark"] .v4-search {
  background: var(--v4-surface);
  border-color: color-mix(in srgb, var(--text) 34%, var(--v4-border));
}
[data-theme="dark"] .v4-search:focus-within {
  border-color: var(--blue);
}
[data-theme="dark"] .v4-backdrop { background: rgba(0, 0, 0, 0.65); }

/* Cartes de progression des toplistes : leurs fonds sont inline côté profil. */
[data-theme="dark"] .ptl-progress-card {
  background: var(--v4-surface) !important;
}

/* ── 10. SKIN V4 DU PROFIL (harmonisation avec la home sociale) ─────────────
   Reskin des classes existantes de profile.css — même pattern que la cloche/
   avatar (contrat DOM conservé, seule l'apparence est alignée sur les cartes
   de la home : surface, bordure 1px, radius 14, shadow-sm, échelle compacte). */

/* Hero + KPIs de la page racine du profil : carte V4 native (profile.css). */

/* Barre de pages (profil d'autrui) : bande bleue → carte */
.v4-body .profile-tabsband .profile-tabs-wrap {
  background: var(--v4-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--v4-gap);
}
.v4-body .profile-tabsband .profile-tab { background: transparent; }

/* Sections de contenu : tokens des cartes de la home */
.v4-body .profile-section {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  transition: box-shadow var(--transition);
}
.v4-body .profile-section:hover { box-shadow: var(--shadow); }
.v4-body .profile-section-title { font-size: 14px; }
.v4-body .profile-widget {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--shadow-sm);
}

/* Bandes premium (or / violet) : arrondies comme des cartes */
.v4-body .profile-band {
  border-radius: var(--v4-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Bandeau bleu des sous-pages du profil + page XP — même langage visuel que
   les bandes Pro/Pro+ (dégradé 3 tons 135deg, titre 20/800 blanc, carte arrondie) */
.profile-page-hero {
  background: var(--v4-hero-gradient);
  color: #fff;
  padding: 28px 0 24px;
  border-radius: var(--v4-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.profile-page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.profile-page-hero-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.65);
}
.profile-page-hero-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}
.profile-page-hero-title i { font-size: 22px; opacity: 0.9; }