/* =========================
    Thème / variables
========================== */
:root {
  --accent: #1db954;
  --bg: #0f1216;
  --border: #252b35;
  --muted: #98a2b3;
  --panel: #171b21;
  --panel-2: #1d232b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --text: #e8eaf0;
}

/* =========================
    Reset simple
========================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

/* =========================
    Layout principal avec scaling fluide
========================== */
.panel{
display:grid;
grid-template-columns: minmax(200px, 20vw) 1fr;
grid-template-rows:auto 1fr;
height: 100vh;
overflow: hidden;
position: relative;
}

/* Top bar avec scaling fluide */
.topbar{
grid-column:1 / -1;                    /* traverse les 2 colonnes */
grid-row:1;
height: clamp(40px, 4vh, 60px);
display:flex; align-items:center; justify-content:space-between;
padding:0 clamp(8px, 2vw, 20px);
background:linear-gradient(180deg,#141922 0%, #12171e 100%);
border-bottom:1px solid var(--border);
position: relative;
z-index: 100;
}

/* Place la sidebar et le contenu sous la topbar */
.sidebar{ grid-row:2; }
.content{ grid-row:2; }

/* Optionnel: fil d'Ariane + actions avec scaling fluide */
.breadcrumb{ 
  color:var(--muted); 
  font-weight:600; 
  font-size: clamp(12px, 1.5vw, 18px);
}
.namecatgory{ 
  color:var(--muted); 
  font-weight:600; 
  font-size: clamp(12px, 1.5vw, 18px);
}


/* =========================
    Sidebar avec scaling fluide
========================== */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2vw, 24px);
  background: linear-gradient(180deg, #151a21 0%, #13171d 100%);
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}
.sidebar-scroll{
  flex:1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Scroll fluide pour MCEF */
  scroll-behavior: smooth;
  /* Empêche les sauts de scroll */
  overscroll-behavior: contain;
  /* Masquer la barre de scroll tout en gardant la fonctionnalité */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE et Edge */
}
.sidebar-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.sidebar h2 {
  margin: 0 0 clamp(8px, 1.5vw, 16px);
  font-size: clamp(14px, 2vw, 20px);
}

.search { margin-bottom: clamp(10px, 2vw, 18px); }
.search input {
  width: 100%;
  padding: clamp(8px, 1.5vw, 16px);
  color: var(--text);
  background: #11151b;
  border: 1px solid var(--border);
  border-radius: clamp(6px, 1vw, 12px);
  font-size: clamp(12px, 1.5vw, 16px);
}

/* Liste épurée avec scaling fluide */
.nav{
display:flex; flex-direction:column; gap:0; 
margin-top: clamp(8px, 1.5vw, 14px);
border:1px solid var(--border); 
border-radius: clamp(8px, 1.5vw, 16px); 
overflow:hidden;
}

/* Boutons de catégorie avec scaling fluide */
.nav .cat{
all:unset;
display:flex; align-items:center; justify-content:space-between;
padding: clamp(8px, 1.5vw, 16px); 
cursor:pointer; user-select:none;
background:#1a1f27; color:var(--text);
border-bottom:1px solid var(--border);
font-size: clamp(12px, 1.8vw, 18px);
}
.nav .cat:last-of-type + .subs:last-child{ border-bottom:0; }
.nav .cat:hover{ background:#202733; }

/* Icône + à droite avec scaling */
.nav .cat::after{
content:"+"; color:#cfd6e4; font-weight:700; 
margin-left: clamp(4px, 1vw, 12px);
font-size: clamp(14px, 2vw, 20px);
transition:transform .18s ease;
}

/* État ouvert -> icône devient - */
.nav .cat[aria-expanded="true"]::after{ content:"-"; }

/* Bloc sous-catégories repliable */
.nav .subs{
max-height:0; overflow:hidden;
background:#151a1f; border-bottom:1px solid var(--border);
transition:max-height .22s ease;
}

/* Boutons de sous-catégorie avec scaling fluide */
.nav .sub{
all:unset;
display:block; width:100%;
padding: clamp(6px, 1.2vw, 14px) clamp(12px, 2vw, 24px) clamp(6px, 1.2vw, 14px) clamp(18px, 3vw, 32px); 
cursor:pointer;
color:#cdd3df;
font-size: clamp(11px, 1.5vw, 16px);
}
.nav .sub:hover{ background:#1b2230; color:#e9edf6; }

/* =========================
    Contenu / header
========================== */
.content{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:auto; /* <- scrolle ici */
  /* Scroll fluide pour MCEF */
  scroll-behavior: smooth;
  /* Désactiver le scroll instantané qui cause les sauts */
  overscroll-behavior: contain;
  /* Firefox */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE et Edge */
}
.content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.hero {
  display: flex;
  align-items: end;
  gap: 18px;
  min-height: 100px;
  padding: 18px;
  background: linear-gradient(135deg, #1b212b 0%, #171c25 60%, #141a22 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.hero h1 {
  margin: 0;
  font-size: 24px;
}

/* =========================
    Grille + cartes avec scaling fluide
========================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 12vw, 200px), 1fr));
  gap: clamp(4px, 1vw, 12px);     /* Espacement optimisé pour toutes les tailles */
  margin-top: clamp(8px, 1.5vw, 16px);
  padding: clamp(8px, 1.5vw, 16px);
  padding-bottom: clamp(4px, 1vw, 12px);
  overflow: auto;
  /* Scroll fluide pour la grille - optimisé pour MCEF */
  scroll-behavior: smooth;
  /* Empêche les sauts de scroll dans MCEF */
  overscroll-behavior: contain;
  /* Force le scroll progressif */
  scroll-snap-type: y proximity;
}

.grid::-webkit-scrollbar{
  width:8px; 
}
.grid::-webkit-scrollbar-thumb{
  background:#2a3240;
  border-radius:8px;
}
.grid::-webkit-scrollbar-thumb:hover{
  background:#364255;
}
.grid::-webkit-scrollbar-track{
  background:transparent;
}

.card {
  position: relative;              /* pour positionner la pricebar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* Aligne tout vers le haut */
  gap: clamp(2px, 0.5vw, 6px);    /* Espacement minimal entre image et texte */
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);         /* Padding réduit en bas */
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: clamp(6px, 1vw, 12px);
  aspect-ratio: 1;                 /* Force la carte à être carrée */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card .name {
  width: 100%;
  margin-top: 0px;
  text-align: center;
  font-weight: 600;
}

/* ----- Zone média en haut de la card avec scaling fluide ----- */
.thumb{
  width: clamp(28px, 4.5vw, 56px);   /* Taille encore plus grande */
  height: clamp(28px, 4.5vw, 56px);  /* Format carré pour les blocs MC */
  display:block;             /* évite l'espace inline */
  object-fit:contain;
  image-rendering:pixelated; /* style MC */
  margin:0 auto;             /* centre si pas de conteneur .media */
}
/* ----- Barre de prix collée en bas avec scaling fluide ----- */
.pricebuybar {
  position: absolute;
  left: 0; right: 0; 
  bottom: clamp(3px, 0.8vw, 8px);    /* Encore plus proche de l'image */
  height: clamp(14px, 2vw, 20px);    /* Hauteur réduite */
  background: #11161d;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(2px, 0.6vw, 4px);
  padding: 0 clamp(2px, 0.6vw, 4px);
}
.pricesellbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(14px, 2vw, 20px);    /* Hauteur réduite */
  background: #11161d;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(2px, 0.6vw, 4px);
  padding: 0 clamp(2px, 0.6vw, 4px);
}
.amount { 
  font-weight: 450; 
  font-size: clamp(10px, 1.2vw, 14px);
}
.pricebuy { 
  color: #6ae29c; 
  font-weight: 600; 
  font-size: clamp(10px, 1.2vw, 14px);
}
.pricesell { 
  color: #e84141; 
  font-weight: 600; 
  font-size: clamp(10px, 1.2vw, 14px);
}

.price-label .buy{ color:#1db954; }   /* vert */

.price-label .sell{ color:#e84141; }  /* rouge */

/* Ancienne price (masquée si tu utilises .pricebar) */
.price { display: none; }

/* Lignes actions (Acheter / Vendre) */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.btn {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.qty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  padding: 0 6px;
  background: #12171e;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.qty input {
  width: 100%;
  padding: 8px 0;
  color: var(--text);
  font-weight: 700;
  text-align: center;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================
    Footer / états
========================== */
.footer{
  flex:0 0 auto;
  position: sticky;           /* reste visible quand on scrolle .grid */
  bottom:0;
  background: rgba(13,16,22,.85);    /* léger fond */
  backdrop-filter: blur(2px);        /* optionnel */
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: var(--muted);
  font-size:14px;
}

/* Tiret à droite (si tu veux le styliser) */
.footer .dash{
  margin-left:auto;
  opacity:.6;
}

.empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  padding: 16px;
  color: var(--muted);
}

.guard {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  color: var(--muted);
  font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 9999;
}


  /* Vue détail plein contenu (par-dessus la grille) avec scaling fluide */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:9999}
.modal.open{display:flex}
.modal-card{
  width:min(clamp(300px, 50vw, 500px), 95vw);
  background:#1a1f27;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:clamp(4px, 1vw, 8px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal-hd{
  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* gauche | titre | droite */
  align-items:center;
  padding: clamp(8px, 1.5vw, 16px);
  background:#171c23;
  border-bottom:1px solid var(--border);
}
.modal-title{ 
  justify-self:end;
  font-size: clamp(14px, 2vw, 20px);
}
.modal-x{all:unset;cursor:pointer;padding:clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);border:1px solid var(--border);border-radius:clamp(4px, 1vw, 8px);color:var(--muted)}
.modal-bd{
  padding: clamp(10px, 2vw, 18px);
  display:grid;
  gap: clamp(8px, 1.5vw, 16px);
}
.item-line{
  display:flex;
  align-items:center;
  gap: clamp(8px, 1.5vw, 14px);
}
.item-line img{
  width: clamp(24px, 4vw, 40px);
  height: clamp(24px, 4vw, 40px);
  image-rendering:pixelated;
  object-fit:contain;
  display:block;
}
.item-name{
  font-weight:700;
  font-size: clamp(12px, 1.8vw, 18px);
}
.qty-box{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: clamp(6px, 1.2vw, 12px);
  background:#0f141a;
  border:1px solid var(--border);
  border-radius:clamp(6px, 1vw, 12px);
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
}
.qty-box input{
  width: clamp(48px, 8vw, 80px);
  text-align:center;
  background:transparent;
  border:0;
  outline:0;
  color:var(--text);
  font-weight:700;
  font-size: clamp(11px, 1.5vw, 16px);
  appearance:textfield;
  -moz-appearance:textfield;
}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-box{margin-left:auto; display:flex; align-items:center; gap:8px;background:#0f141a; border:1px solid var(--border); border-radius:10px; padding:6px 10px;}
.qty-btn{
  all:unset;
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
  border:1px solid var(--border);
  border-radius:clamp(4px, 1vw, 8px);
  font-weight:700;
  cursor:pointer;
  background:#232a35;
  color:#cfd6e4;
  font-size: clamp(10px, 1.2vw, 14px);
}
.qty-btn:hover{ filter:brightness(1.1); }
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(6px, 1.2vw, 12px);
  background:#12171e;
  border:1px solid var(--border);
  border-radius:clamp(6px, 1vw, 12px);
  font-size: clamp(11px, 1.5vw, 16px);
}
.row .val{
  font-weight:800;
  color:#cfe9d7;
  font-size: clamp(11px, 1.5vw, 16px);
}
.modal-ft{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(8px, 1.5vw, 14px);
  padding: clamp(8px, 1.5vw, 16px);
  background:#171c23;
  border-top:1px solid var(--border);
}
.btn{
  all:unset;
  text-align:center;
  padding: clamp(8px, 1.5vw, 14px) 0;
  border-radius:clamp(6px, 1vw, 12px);
  font-weight:700;
  cursor:pointer;
  border:1px solid var(--border);
  font-size: clamp(11px, 1.5vw, 16px);
}
.btn-cancel{background:#232a35;color:#cfd6e4}
.btn-buy{background:#1db954;color:#07140d;border-color:#118a3f}
.btn-sell{background:#e84141;color:#2a0b0b;border-color:#e84141}
.btn[disabled]{opacity:.5;pointer-events:none}

/* =========================
    Tooltip
========================== */
.tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
  max-width: 200px;
  word-wrap: break-word;
}
.tooltip.show {
  opacity: 1;
}

/* =========================
    Scaling Fluide - Optimisé pour Minecraft In-Game
========================== */

/* Système de scaling fluide - Le menu s'adapte automatiquement à la taille de l'écran */
/* Pas de breakpoints fixes, tout est basé sur clamp() et vw/vh */

/* Adaptation pour les très petits écrans (moins de 480px) */
@media (max-width: 479px) {
  .panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 300px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Adaptation pour les écrans en paysage */
@media (max-width: 1023px) and (orientation: landscape) {
  .panel {
    grid-template-columns: minmax(150px, 25vw) 1fr;
  }
  
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 12vw, 150px), 1fr));
  }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-overlay,
  .card,
  .menu-toggle {
    transition: none;
  }
}

/* Mode sombre/clair (si nécessaire) */
@media (prefers-color-scheme: light) {
  /* Les variables CSS peuvent être ajustées ici si nécessaire */
}

/* =========================
    Optimisations spécifiques pour Minecraft In-Game
========================== */

/* Optimisations MCEF - Amélioration des performances */
.panel {
  /* Force l'accélération matérielle pour MCEF */
  transform: translateZ(0);
  will-change: transform;
}

.grid {
  /* Optimise le rendu de la grille pour MCEF */
  contain: layout style paint;
}

.card {
  /* Optimise le rendu des cartes pour MCEF */
  contain: layout style paint;
  backface-visibility: hidden;
}

/* Amélioration du scroll pour MCEF */
.sidebar-scroll,
.content,
.grid {
  /* Force le scroll fluide pour MCEF */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Optimisation des transitions pour MCEF */
.sidebar,
.sidebar-overlay,
.card,
.menu-toggle {
  /* Transitions optimisées pour MCEF */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Amélioration de la lisibilité en jeu */
.card .name {
  /* Texte plus lisible dans l'environnement de jeu */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 700;
}

.breadcrumb {
  /* Amélioration de la lisibilité du breadcrumb */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Optimisation des modals pour l'environnement de jeu */
.modal {
  /* Amélioration du rendu des modals en jeu */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  /* Amélioration de la visibilité des modals */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  border: 2px solid var(--border);
}

/* Amélioration des boutons pour l'interface de jeu */
.btn {
  /* Boutons plus visibles dans l'environnement de jeu */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 800;
  transition: all 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn:active {
  transform: translateY(0);
}

/* Optimisation des tooltips pour l'environnement de jeu */
.tooltip {
  /* Tooltips plus visibles en jeu */
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  text-shadow: none;
}

/* Amélioration de la recherche pour l'interface de jeu */
.search input {
  /* Champ de recherche plus visible */
  border: 2px solid var(--border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.2);
}

/* Optimisation des prix pour la lisibilité en jeu */
.pricebuy {
  /* Prix d'achat plus visible */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 800;
}

.pricesell {
  /* Prix de vente plus visible */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 800;
}

button.cat {
  cursor: pointer;
}