/* ========= BASE & VARIABLES ========= */
:root {
  --bg:#0b0f1c;
  --panel:#0f172a;
  --ink:#f1f5f9;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --radius:14px;
}

/* Tout inclut padding/border dans la largeur → évite les débordements */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: clamp(15px, 1.3vw, 18px); }
h1 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); margin:.2em 0 .4em; }

body {
  margin:0;
  font:16px/1.5 system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

.container {
  max-width:980px;
  margin:0 auto;
  padding:24px;
}
.container.full {
  max-width:none;
  width:100%;
  padding:24px;
}

/* ========= CARTES & GRILLES ========= */
.card {
  background:var(--panel);
  border:1px solid #1f2937;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

@media (max-width:640px) {
  .container { padding:16px; }
  .card { padding:14px; }
}

.row {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
@media (max-width:960px) {
  .row { grid-template-columns:1fr; }
}

/* ========= IMAGES ========= */
img.responsive {
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* miniatures de liste (page index) */
.items-table img {
  width:clamp(70px, 12vw, 120px);
  height:auto;
  border-radius:8px;
}

/* ========= TEXTE ========= */
p.muted { color:var(--muted); margin:.4em 0 .8em; }
.badge {
  display:inline-block;
  padding:.2em .6em;
  border-radius:999px;
  background:#1e293b;
  color:var(--muted);
  font-size:.9em;
}

/* ========= TABLES ========= */
.table-wrap{
  width:100%;
  overflow-x:auto;
}

/* la table reprend son flux normal et prend 100% du conteneur */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  table-layout:auto;      /* ou 'fixed' si tu veux des colonnes plus stables */
  display:table;          /* remet le comportement de table */
}
.table th,
.table td {
  padding:10px 12px;
  border-bottom:1px solid #253046;
  white-space:nowrap;
}
.table tr:first-child { background:rgba(56,189,248,.08); }
.table tr:first-child td { font-weight:700; }

/* Back-office full width déjà OK; on allège sur mobile */
@media (max-width:960px) {
  .admin-table { min-width:780px; }
}

/* Option “cards” pour la liste publique si tu veux éviter le scroll sur mobile */
@media (max-width:640px) {
  .items-table thead { display:none; }
  .items-table tr {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:10px;
    padding:12px 0;
  }
  .items-table td:nth-child(1){ grid-row:1 / span 2; } /* image */
  .items-table td:nth-child(2){ font-weight:700; }     /* titre */
  .items-table td:nth-child(3){ color:var(--muted); }  /* desc */
  .items-table td:nth-child(4){ grid-column:1 / -1; }  /* top bid */
}

/* ========= FORMULAIRES ========= */
.form-grid {
  display:grid;
  gap:10px;
}
.form-grid.two {
  grid-template-columns:1fr 1fr;
}
@media (max-width:720px) {
  .form-grid.two { grid-template-columns:1fr; }
}

label { font-weight:600; font-size:.95em; display:block; }

input, textarea, select, button {
  width:100%;
  max-width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  background:#0b1226;
  color:var(--ink);
  border:1px solid #24314d;
  min-height:44px;
}

input[type=file] {
  padding:8px;
  background:#0b1226;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}

button {
  cursor:pointer;
  border-radius:10px;
  border:1px solid #1f2a44;
  background:#0b1226;
  color:var(--ink);
  line-height:1.3;
}
button.primary {
  background:var(--accent);
  color:#001525;
  border:none;
  font-weight:700;
}

/* ========= TURNSTILE ========= */
.turnstile {
  display:block;
  max-width:100%;
  margin:8px auto 0;
}

/* ========= NOTICES ========= */
.notice {
  background:#332b0b;
  border:1px solid #7c5c15;
  color:#facc15;
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}

/* ========= BACK-OFFICE TABLE ========= */
.admin-table-wrapper {
  width:100vw;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow-x:auto;
  background:var(--panel);
  padding:12px;
  border-radius:10px;
}
.admin-table {
  width:100%;
  min-width:1000px;
  border-collapse:collapse;
  margin:0 auto;
  border-spacing:0;
}
.admin-table th,
.admin-table td {
  padding:10px 12px;
  border-bottom:1px solid #253046;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
}
.admin-table img {
  width:64px;
  height:auto;
  border-radius:6px;
  cursor:zoom-in;
}
.admin-actions {
  display:flex;
  gap:8px;
}
td.admin-actions {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  white-space:nowrap;
}
td.admin-actions form {
  margin:0;
  display:inline-flex;
}
td.admin-actions button {
  margin:0;
  line-height:1;
  height:32px;
  padding:6px 10px;
}

/* ========= ACCESSIBILITÉ ========= */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Moins d’animations si l’utilisateur le demande */
@media (prefers-reduced-motion:reduce) {
  * { transition:none!important; animation:none!important; }
}

/* ========= SÉCURITÉ VISUELLE & DÉBORDEMENTS ========= */
.card, .container, .form-grid { word-wrap: break-word; overflow-wrap: anywhere; }