:root {
  --glace: #f4f8fb;
  --carte: #ffffff;
  --encre: #0d2b45;
  --doux: #5a6f82;
  --ligne: #d8e3ec;
  --accent: #1468b3;
  --accent-fonce: #0b4f8c;
  --ok: #17804b;
  --alerte: #b3261e;
  --rayon: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--glace); color: var(--encre);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
header.bandeau {
  background: linear-gradient(135deg, #0d2b45, #1468b3); color: #fff;
  padding: 18px 16px 22px;
}
header.bandeau h1 { margin: 0; font-size: 1.35rem; letter-spacing: .01em; }
header.bandeau p { margin: 4px 0 0; opacity: .85; font-size: .95rem; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; margin-bottom: 16px; }
.carte h2 { margin: 0 0 10px; font-size: 1.1rem; }
.discret { color: var(--doux); font-size: .92rem; }
.cache { display: none !important; }
label { display: block; font-weight: 600; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; color: var(--encre);
}
input:focus, select:focus, button:focus-visible { outline: 3px solid #9cc7ee; outline-offset: 1px; }
button {
  font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer;
  background: var(--accent); color: #fff; min-height: 44px;
}
button:hover:not(:disabled) { background: var(--accent-fonce); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondaire { background: #e6eef5; color: var(--encre); }
button.danger { background: #fbe9e7; color: var(--alerte); }
.ligne-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.message { min-height: 1.5em; margin-top: 8px; }
.message.erreur { color: var(--alerte); }
.message.ok { color: var(--ok); }

/* Galerie */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vignette {
  position: relative; padding: 0; background: #e9f0f6; color: var(--encre); border: 3px solid transparent;
  border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end;
}
.vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.vignette::after { /* filigrane d'affichage en plus de celui intégré à l'image */
  content: "APERÇU"; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.4rem; letter-spacing: .3em; color: rgba(255,255,255,.35); transform: rotate(-25deg); pointer-events: none;
}
.vignette .etiquette { position: relative; z-index: 1; background: rgba(13,43,69,.78); color: #fff; font-size: .78rem; padding: 4px 6px; text-align: left; }
.vignette.choisie { border-color: var(--accent); box-shadow: 0 0 0 3px #9cc7ee; }
.vignette .absente { position: absolute; inset: 0; display: grid; place-items: center; font-size: .85rem; color: var(--doux); padding: 8px; text-align: center; }

/* Produits et panier */
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.produit { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.produit h3 { margin: 0; font-size: 1rem; }
.produit .prix { font-weight: 700; }
.produit .ligne-actions input { width: 76px; }
.panier-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ligne); flex-wrap: wrap; }
.panier-ligne input { width: 76px; }
.total { font-size: 1.15rem; font-weight: 700; margin: 12px 0; }
.note { background: #fff7e0; border: 1px solid #f0d78c; border-radius: 10px; padding: 10px 12px; font-size: .92rem; }

/* Tableaux admin */
.tableau { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { background: #eef4f9; position: sticky; top: 0; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chiffre { background: #eef4f9; border-radius: 12px; padding: 12px; }
.chiffre b { display: block; font-size: 1.4rem; }
.statut { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: .8rem; font-weight: 700; background: #e6eef5; }
.statut.payee { background: #e3f4ea; color: var(--ok); }
.statut.annulee, .statut.remboursee { background: #fbe9e7; color: var(--alerte); }
.qr { background: #fff; padding: 10px; display: inline-block; border: 1px solid var(--ligne); border-radius: 10px; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; display: block; }
code.cle { display: block; font-size: 1.05rem; word-break: break-all; background: #eef4f9; padding: 10px; border-radius: 8px; letter-spacing: .08em; }
textarea { width: 100%; min-height: 160px; font: .85rem/1.4 ui-monospace, Consolas, monospace; padding: 10px; border-radius: 10px; border: 1px solid var(--ligne); }
nav.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
nav.onglets button { background: #e6eef5; color: var(--encre); }
nav.onglets button[aria-selected=true] { background: var(--accent); color: #fff; }
footer { text-align: center; color: var(--doux); font-size: .8rem; padding: 20px 16px 40px; }
.espace { margin-top: 12px; }
.entre { justify-content: space-between; }