:root{
  --bg:#0b0e16;
  --panel:#131a2a;
  --panel-2:#18233a;
  --text:#e8eefc;
  --muted:#9fb0d3;
  --brand:#7cc3ff;
  --accent:#63e6be;
  --danger:#ff6b6b;
  --ok:#54d38b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}


body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url("assets/aion.jpg") no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
}

*{box-sizing:border-box}
html,body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url("assets/aion.jpg") no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}

.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:12px 20px;
  background:rgba(11,14,22,.8);backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-nav .brand a{font-weight:700;letter-spacing:.5px;color:var(--text)}
.site-nav .nav-toggle{display:none;border:0;background:var(--panel);color:var(--text);padding:8px 10px;border-radius:12px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.site-nav li a{display:block;padding:10px 14px;border-radius:12px;background:transparent;color:var(--text)}
.site-nav li a:hover{background:var(--panel-2)}
.site-nav .points{margin-left:auto;background:var(--panel);padding:10px 14px;border-radius:12px;color:var(--accent)}
.site-nav .auth a{background:var(--panel);}

.container{max-width:1100px;margin:28px auto;padding:0 16px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .grid.cols-3{grid-template-columns:1fr}
  .site-nav .links{display:none;flex-direction:column;background:var(--panel);position:absolute;left:16px;right:16px;top:58px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
  .site-nav .links.open{display:flex}
  .site-nav .nav-toggle{display:inline-flex}
  .site-nav .points{order:-1;margin-left:0}
}

h1,h2,h3{margin:.2em 0 .6em}
.muted{color:var(--muted)}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:var(--panel-2);color:var(--text);cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--brand),#508dff);color:#011}
.btn.danger{background:linear-gradient(180deg,#ff7878,#e54);color:#220}
.form{display:grid;gap:10px}
.input, select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0f1524;color:var(--text)}
.notice{padding:12px;border-radius:12px;background:#102132;border:1px solid rgba(124,195,255,.25)}

.shop .item{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px}
.shop .item img{width:56px;height:56px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.shop .item .name{font-weight:600}
.shop .item .price{margin-left:auto;color:var(--accent);font-weight:700}
.shop .item form{display:flex;gap:8px;align-items:center}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(124,195,255,.12);border:1px solid rgba(124,195,255,.3);color:var(--brand);font-size:.85em}
.status-ok{color:var(--ok)} .status-bad{color:var(--danger)}


/* Style amélioré pour la quantité d'objets */
.shop .item form .input[type="number"] {
    width: 40px;
    padding: 6px;
    font-size: 1rem;
    text-align: center;
    border: 2px solid #4cafef;
    border-radius: 6px;
    background-color: #fff;
    color: #000;
}
.shop .item form .input[type="number"]:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 5px rgba(33,150,243,0.6);
}

/* === Boutique (alignements propres) === */
.shop .list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.shop .item{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:12px;
}
.shop .thumb{height:140px; overflow:hidden; border-radius:8px;}
.shop .thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.shop .meta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.shop .name{margin:0; font-size:16px;}
.shop .price{font-weight:600;}

.shop .buy{margin-top:auto;}
/* Ligne d'actions bien alignée */
.shop .actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.shop .actions .input[type="number"]{
  width:80px;
  text-align:center;
}
/* On cache le label visuel (on garde aria-label côté HTML) */
.shop .actions .label{position:absolute; left:-9999px;}
.shop .actions .btn{white-space:nowrap;}

@media (max-width:480px){
  .shop .actions{flex-wrap:wrap;}
  .shop .actions .input[type="number"]{flex:1;}
}

/* === Tablet responsive (<= 1024px) — injected by assistant === */
@media (max-width:1024px){
  .container{max-width: 920px; padding: 0 20px}
  .grid.cols-3{grid-template-columns: repeat(2, minmax(0,1fr))}
  /* Nav: keep points visible but compress paddings */
  .site-nav .links a{padding:8px 10px}
  .site-nav .points{padding:8px 10px}
  /* Cards: add a bit more breathing room for fingers */
  .card{padding:20px}
  /* Shop list: allow more columns on wide tablets, narrower tiles */
  .shop .list{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:18px}
  /* Shop item layout: stack meta when tight */
  .shop .item .meta{flex-wrap: wrap; gap:8px}
  /* Forms/buttons touch targets */
  .btn{min-height:40px}
  input[type="number"], input[type="text"], select{min-height:38px}
}
/* === Narrow tablets (<= 820px) === */
@media (max-width:820px){
  .container{max-width: 760px}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .shop .list{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))}
  .site-nav .links{gap:8px}
  .shop .actions{flex-wrap: wrap}
  .shop .actions .input[type="number"]{flex:1; min-width: 120px}
}

/* === LISIBILITE PATCH (auto) === */


/* === Patch lisibilité sur fond d'image =============================== */
/* Couleur par défaut du texte */
body { color: var(--text); }

/* Overlay sombre pour donner du contraste à l'image de fond */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(0,0,0,.20), transparent 60%),
    linear-gradient(to bottom, rgba(5,8,14,.70), rgba(5,8,14,.55) 30%, rgba(5,8,14,.70));
  pointer-events:none;
  z-index:-1; /* sous le contenu, au-dessus du background */
}

/* Barres et panneaux principaux en verre dépoli */
.site-nav, header, footer{
  background: rgba(10,14,22,.70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}

/* Conteneurs de contenu génériques */
.container, .card, .panel, .box{
  background: rgba(19,26,42,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.08);
}

/* Cartes déjà foncées : renforce un peu la lisibilité du texte */
.card p, .card li, .card h1, .card h2, .card h3{
  color: var(--text);
}

/* Sections éventuelles directement placées dans le body (ex: .server-status) */
body > .server-status, body > .notice, body > .hero, body > .content-block{
  max-width: 1100px;
  margin: 24px auto;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(19,26,42,.82);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

/* Lisibilité des liens */
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Titres plus nets sur image de fond */
h1,h2,h3{ text-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* Petites améliorations sur la nav pour écran étroit */
.site-nav .links a{ color: var(--text); }
.site-nav .links a:hover{ background: rgba(255,255,255,.06); }

/* Tables contrastées */
table{ background: rgba(19,26,42,.88); border-collapse: collapse; }
table td, table th{ border:1px solid rgba(255,255,255,.08); padding:10px; }
table th{ background: rgba(24,35,58,.88); color: var(--text) }

/* Champs et boutons sur fond image */
input, select, textarea{
  background: rgba(255,255,255,.08);
  color: var(--text);
  border:1px solid rgba(255,255,255,.18);
}
input::placeholder, textarea::placeholder{ color: var(--muted); }
.btn, button, .button{
  background: rgba(124,195,255,.15);
  color: var(--text);
  border:1px solid rgba(124,195,255,.35);
  border-radius: 12px;
}
.btn:hover, button:hover, .button:hover{
  background: rgba(124,195,255,.25);
}

/* Pour les pages très longues, évite la transparence excessive sous les modales/toasts */
.modal, .toast{ background: var(--panel); }

/* === Décalage du contenu sur la page d'accueil === */
body.index .container {
  margin-top: 300px; /* ajuste selon besoin */
}

@keyframes glow {
  0%   { box-shadow: 0 0 5px #7bb6ff; }
  50%  { box-shadow: 0 0 20px #7bb6ff; }
  100% { box-shadow: 0 0 5px #7bb6ff; }
}

a[href*="vote"] img {
  animation: glow 2s infinite;
  border-radius: 6px; /* optionnel, adoucit les coins */
}