:root {
  --fond: #0b1530;
  --fond2: #13214a;
  --carte: #18295a;
  --bord: #26397a;
  --texte: #eef2ff;
  --doux: #9fb0d9;
  --jaune: #f5c518;
  --vert: #3ecf8e;
  --rouge: #ff6b6b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--jaune); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 6px 0 16px; }
h2 { font-size: 17px; margin: 22px 0 10px; color: var(--jaune); }
.barre { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--fond2); border-bottom: 2px solid var(--jaune); }
.marque { color: var(--texte); text-decoration: none; font-weight: 700; font-size: 17px; }
.marque span { background: var(--jaune); color: var(--fond); border-radius: 8px; padding: 2px 6px; margin-right: 6px; }
.cloche { text-decoration: none; font-size: 20px; position: relative; }
.cloche b { position: absolute; top: -6px; right: -10px; background: var(--rouge); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; }
.menu { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: var(--fond2); scrollbar-width: none; }
.menu a { white-space: nowrap; text-decoration: none; color: var(--doux); padding: 7px 12px; border-radius: 20px; background: var(--carte); font-size: 14px; }
.menu a.actif { background: var(--jaune); color: var(--fond); font-weight: 600; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 14px; }
.chiffre small { color: var(--doux); display: block; }
.chiffre strong { font-size: 22px; color: var(--jaune); }
.flash { background: var(--jaune); color: var(--fond); padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.doux { color: var(--doux); font-size: 13px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; background: var(--bord); color: var(--texte); }
.badge.vert { background: var(--vert); color: #06281a; }
.badge.jaune { background: var(--jaune); color: var(--fond); }
.badge.rouge { background: var(--rouge); color: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
th { color: var(--doux); font-weight: 500; font-size: 13px; }
.defile { overflow-x: auto; }
input, select, textarea { width: 100%; background: var(--fond); color: var(--texte); border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; font: inherit; }
input[type=checkbox] { width: auto; }
input[type=file] { padding: 6px; }
label { display: block; color: var(--doux); font-size: 13px; margin: 8px 0 4px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 10px; }
button, .bouton { display: inline-block; background: var(--jaune); color: var(--fond); border: 0; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
button.discret, .bouton.discret { background: var(--bord); color: var(--texte); font-weight: 500; }
button.danger { background: var(--rouge); color: #fff; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.onglets { display: flex; gap: 8px; margin-bottom: 12px; }
.onglets a { text-decoration: none; padding: 8px 14px; border-radius: 12px; background: var(--carte); color: var(--doux); }
.onglets a.actif { background: var(--jaune); color: var(--fond); font-weight: 700; }
.produit { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.produit img, .vignette { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--fond); }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
.bulles { display: flex; flex-direction: column; gap: 8px; }
.bulle { max-width: 82%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bulle.in { background: var(--carte); align-self: flex-start; border-bottom-left-radius: 4px; }
.bulle.out { background: #1f5f4a; align-self: flex-end; border-bottom-right-radius: 4px; }
.bulle.humain { background: #6b4e00; }
.bulle .meta { display: block; font-size: 11px; color: var(--doux); margin-top: 4px; }
.bulle img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 6px; }
.connexion { max-width: 380px; margin: 60px auto; }
@media (max-width: 600px) {
  main { padding: 12px; }
  .masquer-mobile { display: none; }
}