:root {
  --bg: #f6f4ef; --surface: #ffffff; --ink: #17172b; --ink-2: #4a4a63; --muted: #7a7a90;
  --line: #e4e1d8; --brand: #4f3cf0; --brand-ink: #ffffff; --brand-soft: #ecE9ff;
  --accent: #ffc83d; --ok: #1f9d55; --warn: #d97706; --bad: #d64545;
  --radius: 14px; --shadow: 0 1px 2px rgba(23,23,43,.06), 0 8px 24px rgba(23,23,43,.06);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--font);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h2 { font-size: 1.45rem; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.center { text-align: center; padding-top: 48px; padding-bottom: 48px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.15rem; color: var(--ink-2); }
.err { color: var(--bad); font-weight: 500; }
.ic { width: 22px; height: 22px; flex: none; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 999px; padding: 12px 22px; font: 600 15px var(--font); text-decoration: none; cursor: pointer; transition: transform .1s, filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.wide { width: 100%; }
.btn.small { padding: 8px 14px; font-size: 13px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.danger { color: var(--bad); }

/* En-tête */
.topbar { background: var(--ink); color: #fff; text-align: center; font-size: 13px; padding: 7px 16px; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hdr { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { font: 700 1.25rem var(--display); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo-mark { color: var(--brand); font-size: 1.1em; }
.search { flex: 1; max-width: 460px; margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 999px; padding: 0 16px; color: var(--muted); }
.search input { border: 0; background: transparent; font: inherit; padding: 10px 0; width: 100%; outline: none; color: var(--ink); }
.search:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.cart-link { position: relative; display: inline-flex; padding: 8px; border-radius: 999px; }
.cart-link:hover { background: var(--bg); }
.cart-link .ic { width: 26px; height: 26px; }
.cart-count { position: absolute; top: 0; right: -2px; background: var(--brand); color: #fff; font: 700 11px var(--font); min-width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; }
.cart-count.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.35); } }
.catnav { border-top: 1px solid var(--line); }
.catnav-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.catnav a { padding: 11px 12px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.catnav a:hover { color: var(--ink); border-color: var(--brand); }
.icon-btn { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink); }
.only-mobile { display: none; }

/* Hero */
.hero { background: radial-gradient(1200px 400px at 85% 0%, #e2dcff 0%, transparent 60%), linear-gradient(180deg, #fff 0%, var(--bg) 100%); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--brand); margin: 0 0 12px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-art { display: grid; place-items: center; min-height: 300px; }
.fan { position: relative; width: 190px; height: 265px; }
.fan span { position: absolute; inset: 0; border-radius: 14px; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(23,23,43,.18); transform-origin: 50% 110%; }
.fan span:nth-child(1) { background: linear-gradient(145deg, #ff7a59, #ffc83d); transform: rotate(-24deg); }
.fan span:nth-child(2) { background: linear-gradient(145deg, #22c1a3, #1e6fd9); transform: rotate(-12deg); }
.fan span:nth-child(3) { background: linear-gradient(145deg, #4f3cf0, #a855f7); transform: rotate(0); }
.fan span:nth-child(4) { background: linear-gradient(145deg, #17172b, #4a4a63); transform: rotate(12deg); }
.fan span:nth-child(5) { background: linear-gradient(145deg, #ffc83d, #fff1b8); transform: rotate(24deg); }
.fan span::after { content: '◆'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.75); font-size: 44px; }

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -24px; position: relative; }
.perk { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.perk .ic { width: 30px; height: 30px; color: var(--brand); }
.perk b { display: block; }
.perk span { font-size: 14px; color: var(--muted); }

.section { margin-top: 56px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h1, .sec-head h2 { margin: 0; }
.sec-head a { font-weight: 500; text-decoration: none; color: var(--brand); }

.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat { background: var(--surface); border-radius: var(--radius); padding: 22px 12px; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.cat:hover { transform: translateY(-3px); border-color: var(--brand); }
.cat-ic { width: 44px; height: 44px; color: var(--brand); }

/* Grille produits */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.pcard { background: var(--surface); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); transition: box-shadow .2s, transform .2s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pcard-img { position: relative; aspect-ratio: 1; background: #f1efe9; display: block; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pcard.is-out .pcard-img img { opacity: .45; filter: grayscale(.6); }
.tag-sale { position: absolute; top: 10px; left: 10px; background: var(--bad); color: #fff; font: 700 12px var(--font); padding: 3px 8px; border-radius: 99px; }
.pcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pcard-meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.pcard h3 { font: 600 15px/1.35 var(--font); margin: 0 0 12px; }
.pcard h3 a { text-decoration: none; }
.pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font: 700 1.1rem var(--display); }
.price s { color: var(--muted); font-weight: 500; font-size: .85em; margin-left: 4px; }
.price.big { font-size: 1.9rem; margin: 6px 0 10px; }
.btn-add { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .15s; }
.btn-add:hover { transform: scale(1.1); }
.btn-add.done { background: var(--ok); }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.badge.ok { background: #e3f6ea; color: var(--ok); }
.badge.low { background: #fff1d6; color: var(--warn); }
.badge.out { background: #f1efe9; color: var(--muted); }

/* Catalogue */
.page-head { padding-top: 28px; padding-bottom: 8px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.shop { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; }
.filters { position: sticky; top: 130px; }
.filters h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; }
.filters h4:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.col { flex-direction: column; align-items: stretch; }
.chip { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; background: transparent; border: 1px solid var(--line); }
.chips:not(.col) .chip { border-radius: 99px; }
.chip em { font-style: normal; color: var(--muted); font-size: 12px; }
.chip:hover { border-color: var(--ink-2); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on em { color: #cfcfe0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.sort select, select, input, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.sort select { padding: 6px 10px; margin-left: 6px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
.empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; background: var(--surface); border-radius: var(--radius); }

/* Fiche produit */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; padding-bottom: 20px; }
.gallery-main { background: var(--surface); border-radius: var(--radius); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { width: 70px; height: 70px; padding: 4px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.thumbs button.on { border-color: var(--brand); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pinfo h1 { margin-top: 4px; }
.buy { display: flex; gap: 12px; margin: 22px 0; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
.qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink); }
.qty input { width: 44px; border: 0; text-align: center; padding: 0; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy .btn { flex: 1; }
.assure { list-style: none; padding: 16px 0; margin: 0 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.assure li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.assure .ic { color: var(--brand); }
.desc { color: var(--ink-2); }
.desc ul { padding-left: 20px; }

/* Paiement */
.pays { display: flex; flex-wrap: wrap; gap: 6px; }
.pay { display: inline-block; font: 600 11px var(--font); padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.pays.small { margin: 14px 0 6px; }

/* Panier */
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; padding-bottom: 40px; }
.cart-items { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.cline { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.cline:last-child { border-bottom: 0; }
.cline img { width: 80px; height: 80px; object-fit: contain; background: #f1efe9; border-radius: 10px; padding: 6px; }
.cline a { text-decoration: none; font-weight: 600; }
.cline .qty { display: inline-flex; margin-top: 8px; }
.cline .qty button { width: 32px; height: 34px; font-size: 17px; }
.cline .qty input { width: 34px; }
.cline-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rm { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; }
.warn-line { color: var(--warn); font-size: 13px; }
.summary { background: var(--surface); border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); position: sticky; top: 130px; }
.summary .row { display: flex; justify-content: space-between; margin: 8px 0; }
.summary .btn { margin-top: 14px; }
.freebar { margin: 14px 0 4px; font-size: 13px; }
.bar { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .3s; }
.cart-empty { padding: 40px 16px; text-align: center; }

.thanks-ic { width: 72px; height: 72px; border-radius: 50%; background: #e3f6ea; color: var(--ok); font-size: 36px; display: grid; place-items: center; margin: 0 auto 18px; }
.cm-banner { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cm-banner p { margin: 0; color: #cfcfe0; }
.cm-banner .btn { background: var(--accent); color: var(--ink); }

/* Pages texte */
.prose { padding-top: 32px; padding-bottom: 56px; }
.prose h2 { font-size: 1.2rem; margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink-2); }
.big-link { font-size: 1.3rem; font-weight: 600; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }

/* Pied de page */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 72px; padding-top: 44px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.foot-grid a:not(.logo) { display: block; text-decoration: none; font-size: 14px; padding: 3px 0; color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 16px; padding-bottom: 24px; font-size: 13px; color: var(--muted); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; opacity: 0; transition: .25s; z-index: 50; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast a { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── Admin ── */
.is-admin { background: #f3f3f7; }
.admin-header { background: var(--ink); color: #fff; }
.admin-header .logo-mark { color: var(--accent); }
.admin-nav { display: flex; gap: 18px; margin-left: auto; align-items: center; font-size: 14px; flex-wrap: wrap; }
.admin-nav a { text-decoration: none; opacity: .85; }
.admin-nav a:hover { opacity: 1; }
.admin-nav form { margin: 0; }
.is-admin main { padding: 28px 0 60px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 20px; border: 1px solid var(--line); margin-bottom: 18px; }
.card.flush { padding: 0; overflow-x: auto; }
.card h3 { font-size: 1.05rem; }
.pad { padding: 20px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.form label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.login { max-width: 400px; margin: 40px auto; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kpi span { font-size: 13px; color: var(--muted); display: block; }
.kpi b { font: 700 1.6rem var(--display); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two .card { margin-bottom: 0; }
.two + .card, .two + form { margin-top: 18px; }
.flash { background: #e3f6ea; color: #14532d; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.flash.warn { background: #fff1d6; color: #7c4a03; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.st-pending { background: #eee; color: #666; } .st-paid { background: #fff1d6; color: #7c4a03; }
.st-shipped { background: #e3f6ea; color: #14532d; } .st-cancelled { background: #fde8e8; color: #9b1c1c; }
.thumb { width: 44px; height: 44px; object-fit: contain; background: #f1efe9; border-radius: 8px; padding: 3px; }
.stock-form { display: flex; gap: 4px; }
.stock-form input { width: 70px; padding: 5px 8px; }
.stock-form input.low { border-color: var(--warn); }
.stock-form button { border: 0; background: var(--bg); border-radius: 8px; cursor: pointer; padding: 0 10px; }
.filter-input { width: 100%; max-width: 320px; margin-bottom: 12px; }
.imgs { display: flex; flex-wrap: wrap; gap: 12px; }
.imgbox { position: relative; width: 120px; height: 120px; border-radius: 12px; border: 1.5px solid var(--line); background: #f1efe9; cursor: grab; }
.imgbox:first-child { border-color: var(--brand); }
.imgbox img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.imgbox button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.imgadd { width: 120px; height: 120px; border-radius: 12px; border: 2px dashed var(--line); display: grid !important; place-items: center; cursor: pointer; color: var(--muted); font-weight: 600 !important; margin: 0 !important; }
.imgadd:hover { border-color: var(--brand); color: var(--brand); }
.actions { display: flex; gap: 12px; }
.danger-zone { margin-top: 28px; font-size: 14px; }
.addr { line-height: 1.6; }
.ship { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.warnrow td { background: #fff8e6; }
tr.total td { font-weight: 700; }

/* Responsive */
@media (max-width: 960px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .only-mobile { display: inline-flex; }
  .hdr { gap: 10px; height: 60px; }
  .search { position: absolute; left: 16px; right: 16px; top: 60px; max-width: none; margin: 0; background: var(--surface); border: 1px solid var(--line); display: none; }
  .catnav { display: none; }
  .nav-open .catnav { display: block; padding-top: 58px; }
  .nav-open .catnav-in { flex-direction: column; padding-bottom: 8px; }
  .nav-open .search { display: flex; }
  .logo { margin-right: auto; font-size: 1.1rem; }
  .hero-in { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 48px; }
  .hero-art { display: none; }
  .perks { grid-template-columns: 1fr; margin-top: -20px; }
  .shop, .product, .cart, .two { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters .chips.col { flex-direction: row; flex-wrap: wrap; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcard-body { padding: 10px 12px 12px; }
  .pcard h3 { font-size: 14px; }
  .summary { position: static; }
  .cols3 { grid-template-columns: 1fr; }
  .product { gap: 20px; }
  .cline { grid-template-columns: 64px 1fr; }
  .cline img { width: 64px; height: 64px; }
  .cline-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .admin-header .hdr { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .admin-nav { margin-left: 0; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   THÈME NANO-COLLECTOR — pixel art (reprend le logo)
   Ciel bleu + grille, jaune, rouge, crème, contours noirs épais,
   ombres « pixel » sans flou, pas d'arrondis.
   ═══════════════════════════════════════════════════════════ */
:root {
  --sky: #31abee; --sky-deep: #1b8fd4; --sky-line: rgba(255,255,255,.14);
  --yellow: #ffec08; --red: #cd0820; --cream: #ffffda; --black: #010100;
  --bg: var(--sky); --surface: #ffffff; --ink: var(--black); --ink-2: #2b2b3a; --muted: #5a5a6e;
  --line: var(--black); --brand: var(--red); --brand-ink: #fff; --accent: var(--yellow);
  --ok: #129b3e; --warn: #c26a00; --bad: var(--red);
  --radius: 0px; --bw: 3px;
  --shadow: 5px 5px 0 var(--black); --shadow-sm: 3px 3px 0 var(--black);
  --display: 'Pixelify Sans', 'Press Start 2P', system-ui, sans-serif;
  --arcade: 'Press Start 2P', monospace;
}
body {
  background-color: var(--sky);
  background-image:
    linear-gradient(var(--sky-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sky-line) 1px, transparent 1px);
  background-size: 25px 25px;
}
img[src$="logo.png"], img[src*="icon-64"], .hero-logo { image-rendering: pixelated; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
h1, .hero h1 { text-shadow: 3px 3px 0 var(--yellow); }

/* Contours & ombres pixel partout */
.pcard, .cat, .perk, .summary, .cart-items, .gallery-main, .empty, .card, .kpi, .cm-banner, .prose, .page-head h1 { border-radius: 0; }
.pcard, .cat, .perk, .summary, .cart-items, .gallery-main, .empty, .card, .kpi {
  border: var(--bw) solid var(--black); box-shadow: var(--shadow);
}
.pcard:hover, .cat:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--black); border-color: var(--black); }

/* Boutons */
.btn { border-radius: 0; border: var(--bw) solid var(--black); background: var(--red); color: #fff; box-shadow: var(--shadow-sm);
  font: 700 17px var(--display); padding: 10px 20px; text-transform: none; }
.btn:hover { filter: none; background: #e0112b; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--black); }
.btn.ghost { background: var(--yellow); color: var(--black); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { background: #fff45c; box-shadow: var(--shadow-sm); }
.btn-add { border-radius: 0; border: var(--bw) solid var(--black); background: var(--yellow); color: var(--black); font: 16px var(--arcade); width: 40px; height: 40px; box-shadow: var(--shadow-sm); }
.btn-add:hover { transform: none; background: #fff45c; }
.btn-add:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-add.done { background: var(--ok); color: #fff; }

/* Bandeau + en-tête */
.topbar { background: var(--black); color: var(--yellow); font: 10px/1.8 var(--arcade); letter-spacing: .02em; padding: 8px 16px; }
.site-header { background: var(--cream); border-bottom: var(--bw) solid var(--black); }
.logo { gap: 10px; font: 700 1.35rem var(--display); color: var(--black); }
.logo img { height: 44px; width: auto; }
.logo span { text-shadow: 2px 2px 0 var(--yellow); }
.search { border-radius: 0; background: #fff; border: var(--bw) solid var(--black); color: var(--black); }
.search:focus-within { box-shadow: var(--shadow-sm); }
.cart-link { border-radius: 0; }
.cart-link:hover { background: var(--yellow); }
.cart-count { border-radius: 0; background: var(--red); border: 2px solid var(--black); font: 9px var(--arcade); min-width: 22px; height: 22px; top: -2px; right: -6px; }
.catnav { background: var(--red); border-top: var(--bw) solid var(--black); }
.catnav a { color: #fff; font: 700 15px var(--display); border-bottom: 0; padding: 10px 14px; }
.catnav a:hover { background: var(--yellow); color: var(--black); }

/* Hero */
.hero { background: transparent; }
.hero-txt { background: var(--cream); border: var(--bw) solid var(--black); box-shadow: 8px 8px 0 var(--black); padding: 28px 30px; }
.eyebrow { font: 10px/1.6 var(--arcade); color: var(--red); letter-spacing: .04em; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.hero-art { position: relative; }
.hero-logo { width: min(100%, 470px); height: auto; filter: drop-shadow(8px 8px 0 rgba(1,1,0,.35)); animation: float 3.2s steps(8) infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.spark { position: absolute; width: 14px; height: 14px; background: var(--yellow); box-shadow: 0 0 0 3px var(--black); animation: blink 1.6s steps(2) infinite; }
.spark::before, .spark::after { content: ''; position: absolute; background: var(--yellow); }
.spark::before { left: 4px; top: -10px; width: 6px; height: 34px; }
.spark::after { top: 4px; left: -10px; height: 6px; width: 34px; }
.s1 { top: 8%; left: 8%; } .s2 { bottom: 12%; right: 4%; animation-delay: .5s; } .s3 { top: 18%; right: 10%; width: 8px; height: 8px; animation-delay: 1s; }
.s3::before { left: 1px; top: -8px; width: 6px; height: 24px; } .s3::after { left: -8px; top: 1px; width: 24px; height: 6px; }
@keyframes blink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .hero-logo, .spark { animation: none; } }

.perk { background: var(--yellow); }
.perk .ic { color: var(--red); }
.perk span { color: var(--ink-2); }

/* Sections */
.sec-head h1, .sec-head h2 { display: inline-block; background: var(--black); color: var(--yellow); padding: 8px 14px 6px; text-shadow: none; font-size: 1.4rem; }
.sec-head a { background: var(--cream); color: var(--black); border: var(--bw) solid var(--black); padding: 4px 10px; font: 700 15px var(--display); box-shadow: var(--shadow-sm); }
.sec-head a:hover { background: var(--yellow); }
.cat { background: var(--cream); font: 700 16px var(--display); }
.cat-ic { color: var(--red); }
.cat:hover { background: var(--yellow); }

/* Cartes produits */
.pcard { background: var(--cream); }
.pcard-img { background: #fff; border-bottom: var(--bw) solid var(--black); }
.pcard-meta { font: 8px/1.7 var(--arcade); color: var(--muted); letter-spacing: .02em; }
.pcard h3 { font: 700 17px/1.25 var(--display); }
.price { font: 700 1.25rem var(--display); color: var(--red); }
.price s { color: var(--muted); }
.price.big { font-size: 2.2rem; text-shadow: 2px 2px 0 var(--black); color: var(--yellow); -webkit-text-stroke: 1px var(--black); }
.tag-sale { border-radius: 0; background: var(--yellow); color: var(--black); border: 2px solid var(--black); font: 9px var(--arcade); padding: 5px 6px; }
.badge { border-radius: 0; border: 2px solid var(--black); font: 700 13px var(--display); }
.badge.ok { background: #b9f5c9; color: var(--black); }
.badge.low { background: var(--yellow); color: var(--black); }
.badge.out { background: #ddd; color: #555; }

/* Catalogue / filtres */
.page-head h1 { display: inline-block; background: var(--cream); border: var(--bw) solid var(--black); box-shadow: var(--shadow); padding: 10px 16px 8px; }
.crumbs { color: var(--black); font-weight: 500; }
.crumbs a, .crumbs span { background: rgba(255,255,255,.7); padding: 1px 4px; }
.filters { background: var(--cream); border: var(--bw) solid var(--black); box-shadow: var(--shadow); padding: 16px; }
.filters h4 { font: 9px var(--arcade); color: var(--red); }
.chip, .chips:not(.col) .chip { border-radius: 0; border: 2px solid var(--black); background: #fff; font-weight: 500; }
.chip:hover { background: var(--yellow); border-color: var(--black); }
.chip.on { background: var(--black); color: var(--yellow); }
.toolbar .muted { background: var(--cream); color: var(--black); border: 2px solid var(--black); padding: 3px 10px; font-weight: 600; }
.sort label { background: var(--cream); border: 2px solid var(--black); padding: 3px 3px 3px 10px; font-weight: 600; }
select, input, textarea, .sort select { border-radius: 0; border: 2px solid var(--black); }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: var(--shadow-sm); }

/* Fiche produit */
.pinfo { background: var(--cream); border: var(--bw) solid var(--black); box-shadow: var(--shadow); padding: 24px; }
.thumbs button { border-radius: 0; border: var(--bw) solid var(--black); }
.thumbs button.on { border-color: var(--red); box-shadow: var(--shadow-sm); }
.qty { border-radius: 0; border: var(--bw) solid var(--black); }
.qty button { font-family: var(--arcade); font-size: 14px; }
.qty button:hover { background: var(--yellow); }
.assure { border-color: var(--black); border-style: dashed; border-width: 2px 0; }
.assure .ic { color: var(--red); }
.pay { border-radius: 0; border: 2px solid var(--black); color: var(--black); font-weight: 700; }

/* Panier */
.cline { border-bottom: 2px dashed var(--black); }
.cline img { border-radius: 0; border: 2px solid var(--black); background: #fff; }
.summary { background: var(--cream); }
.summary h3 { font-size: 1.3rem; }
.bar { border-radius: 0; border: 2px solid var(--black); height: 14px; background: #fff; }
.bar i { background: repeating-linear-gradient(90deg, var(--ok) 0 10px, #0d7a30 10px 12px); }
.rm { color: var(--red); }
.cart-items { background: var(--cream); }

/* Merci, bannière, pages */
.center { background: var(--cream); border: var(--bw) solid var(--black); box-shadow: var(--shadow); margin-top: 40px; }
.thanks-ic { border-radius: 0; background: var(--yellow); color: var(--black); border: var(--bw) solid var(--black); font-family: var(--arcade); font-size: 26px; }
.cm-banner { background: var(--red); border: var(--bw) solid var(--black); box-shadow: var(--shadow); }
.cm-banner h2 { color: var(--yellow); text-shadow: 3px 3px 0 var(--black); }
.cm-banner p { color: #fff; }
.cm-banner .btn { background: var(--yellow); color: var(--black); }
.prose { background: var(--cream); border: var(--bw) solid var(--black); box-shadow: var(--shadow); margin-top: 32px; padding: 32px; }
.prose h1 { text-shadow: 3px 3px 0 var(--yellow); }
.prose h2 { color: var(--red); }
.tbl th { font: 8px var(--arcade); color: var(--red); }
.tbl th, .tbl td { border-bottom: 2px solid rgba(1,1,0,.12); }

/* Pied de page */
.site-footer { background: var(--black); color: #fff; border-top: 0; box-shadow: 0 -6px 0 var(--red), 0 -12px 0 var(--yellow); margin-top: 90px; }
.site-footer .logo { color: #fff; }
.site-footer .logo span { text-shadow: 2px 2px 0 var(--red); }
.site-footer .muted, .foot-bottom { color: #b7b7c7; }
.foot-grid h4 { font: 9px var(--arcade); color: var(--yellow); }
.foot-grid a:not(.logo) { color: #e6e6ef; }
.foot-grid a:hover { color: var(--yellow); }
.foot-grid p a { color: var(--yellow) !important; }
.foot-bottom { border-top: 2px dashed #444; }
.site-footer .pay { background: var(--cream); }

/* Toast */
.toast { border-radius: 0; border: var(--bw) solid var(--yellow); background: var(--black); box-shadow: 5px 5px 0 var(--red); }

/* ── Admin (plus sobre, même identité) ── */
.is-admin { background-color: #e8f5fd; background-image: none; }
.admin-header { background: var(--black); border-bottom: 4px solid var(--red); }
.admin-header .logo { color: #fff; } .admin-header .logo span { text-shadow: 2px 2px 0 var(--red); }
.admin-header .logo img { height: 36px; }
.is-admin .card, .is-admin .kpi { box-shadow: var(--shadow-sm); border-width: 2px; }
.is-admin .kpi { background: var(--cream); }
.is-admin .kpi span { font: 8px/1.6 var(--arcade); color: var(--red); }
.is-admin .page-head h1, .is-admin h1 { text-shadow: 2px 2px 0 var(--yellow); }
.pill { border-radius: 0; border: 2px solid var(--black); }
.flash { border-radius: 0; border: 2px solid var(--black); }
.imgbox, .imgadd { border-radius: 0 !important; }
.imgbox { border: 2px solid var(--black); }
.imgbox:first-child { border-color: var(--red); box-shadow: var(--shadow-sm); }
.imgbox button { border-radius: 0; background: var(--red); }
.imgadd { border: 2px dashed var(--black); }
.imgadd:hover { background: var(--yellow); color: var(--black); border-color: var(--black); }
.thumb { border-radius: 0; border: 1px solid var(--black); }
.stock-form button { border-radius: 0; border: 2px solid var(--black); background: var(--yellow); }
.login { background: var(--cream); }

@media (max-width: 760px) {
  .topbar { font-size: 8px; }
  .logo img { height: 36px; }
  .logo span { font-size: 1.1rem; }
  .hero-art { display: grid; min-height: 0; order: -1; }
  .hero-logo { width: 72%; }
  .spark { display: none; }
  .hero-txt { padding: 20px; }
  .search { border-width: 2px; }
  .nav-open .catnav { padding-top: 62px; }
  .pcard-meta { font-size: 7px; }
  .pcard h3 { font-size: 15px; }
  .pinfo, .prose { padding: 18px; }
  .sec-head h2 { font-size: 1.15rem; }
}
.pcard .price { white-space: nowrap; }
.pcard .price s { display: block; margin: 0; font-size: .75em; }
@media (max-width: 760px) { .pcard .price { font-size: 1.02rem; } .btn-add { width: 34px; height: 34px; font-size: 13px; } }
/* Logo Nano Collector : le texte est déjà dans le logo */
.site-header .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-header .logo img { height: 48px; }
.hero-logo { width: min(100%, 520px); }
@media (max-width: 760px) { .site-header .logo img { height: 38px; } .hero-logo { width: 88%; } }
.site-footer .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-footer .logo img { height: 60px; }
.hero-logo { width: min(100%, 560px); }
.site-footer .logo img { height: 52px; }
.site-header .logo img { height: 56px; } @media (max-width:760px){ .site-header .logo img { height: 40px; } }
.cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.todo { background: var(--yellow) !important; }
.todo ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.todo li.done { opacity: .55; text-decoration: line-through; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }