/* ===========================
   Variables & reset de base
   =========================== */
:root{
  --bg:#0b0d10; --panel:#131720; --ink:#e7ecf3; --muted:#9aa5b1;
  --primary:#7aa2ff; --accent:#22d3ee; --danger:#ff6b6b; --ok:#22c55e;
  --border:#1f2530; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
}
a{color:var(--accent);text-decoration:none}

/* ===========================
   Layout & composants
   =========================== */
.wrap{max-width:960px;margin:0 auto;padding:24px}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:14px 0
}
h1,h2,h3{margin:0 0 8px}

/* ---- Boutons ---- */
.btn{
  display:inline-flex;                 /* centrage propre */
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  min-height:40px;                     /* hauteur uniforme */
  line-height:1;
  white-space:nowrap;                  /* pas de retour par défaut */
  border-radius:12px;
  border:1px solid var(--border);
  background:#151a24;
  color:var(--ink);
  text-align:center;
  cursor:pointer
}
.btn.primary{background:linear-gradient(135deg,var(--primary),#5b85ff);border:none}
.btn.danger{background:linear-gradient(135deg,#ff6b6b,#ff4470);border:none}
.btn.ok{background:linear-gradient(135deg,#16a34a,#22c55e);border:none}

/* Rangées de boutons compacts et égaux */
.btn-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
  align-items:stretch;
  margin-top:.5rem;
}
.btn-row .btn,
.btn-row button.btn{ width:100%; box-sizing:border-box; }
.btn-row.wrap .btn{ white-space:normal; } /* autoriser retour si libellé long */
.btn-row.tight .btn{                      /* variante encore plus compacte */
  min-height:36px; padding:8px 10px; font-size:.95rem;
}

/* ---- Form inputs ---- */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0e131b;
  color:var(--ink)
}

/* ---- Grilles ---- */
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- Badges ---- */
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#0e1420;
  border:1px solid var(--border);
  font-size:.85rem;
  color:var(--muted); /* fix */
}

/* ---- Table ---- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:left
}

/* ---- Flash ---- */
.flash{
  padding:10px 12px;
  border:1px solid var(--border);
  background:#102031;
  border-radius:12px;
  color:#ccf
}

/* ---- Text utils ---- */
.small{font-size:.95rem;color:var(--muted)}
.center{text-align:center}

/* Nouvelle classe "mini" (peut s'ajouter à .small) */
.mini{font-size:.80rem; line-height:1.25; color:var(--muted)}
.small.mini{margin:.25rem 0}            /* paragraphes compacts */

/* ===========================
   Utilitaires : progression
   =========================== */
.bar{
  height:10px;
  border-radius:999px;
  background:#0e1420;
  border:1px solid var(--border);
  overflow:hidden;
  margin:8px 0
}
.fill{
  height:100%;
  background:linear-gradient(90deg,var(--primary),#5b85ff)
}

/* ===========================
   Admin : grille utilisateurs
   =========================== */
.user-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px
}
.userbtn{
  display:block;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  text-align:left;
  box-shadow:var(--shadow);
  transition:transform .08s ease, border-color .2s ease
}
.userbtn:hover{transform:translateY(-2px);border-color:var(--accent)}
.userbtn .title{font-weight:700;margin-bottom:6px}
.userbtn .meta{font-size:.9rem;color:var(--muted);margin:6px 0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* ===========================
   Responsive & mobile tweaks
   =========================== */
@media (max-width: 960px){
  .wrap{padding:18px}
}
@media (max-width: 640px){
  .wrap{padding:14px}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
}

/* ===========================
   Fond d'écran 100% écran sur smartphone
   (placer l'image dans assets/bg-mobile.jpg)
   =========================== */
@media (max-width: 768px) {
  html, body { min-height: 100%; }

  /* On applique l'image sur html pour éviter que le body la masque */
  html{
    background:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
      url('bg-mobile.jpg') center / cover no-repeat fixed !important;
  }
  body{ background: transparent !important; }

  /* Lisibilité du contenu par-dessus l'image */
  .card{
    background: rgba(19,23,32,.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Correctif iOS : si le 'fixed' cause des artefacts, on l’enlève */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    html{
      background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url('bg-mobile.jpg') center / cover no-repeat !important; /* sans fixed */
    }
  }
}