/* RMGT — néobrutalisme · tokens + primitives (v1) */
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/sg-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/sg-700.woff2) format("woff2")}

:root{
  /* Palette (aplats, aucun dégradé) */
  --ink:#000;          /* bordures, texte */
  --paper:#FFFFFF;     /* cartes */
  --bg:#FFF6D6;        /* fond de page crème */
  --yellow:#FFD400;    /* primaire : meilleur prix, CTA */
  --blue:#2B4BFF;      /* liens, neuf */
  --red:#FF3B30;       /* promo, baisse de prix, erreur */
  --green:#12D17A;     /* Montgallet, en stock */
  --orange:#FF8A1F;    /* reconditionné */
  --pink:#FF8AD8;      /* éditorial / guides */
  --grey:#E8E4D4;      /* désactivé, squelettes */

  --bw:3px; --bw-lg:4px;
  --sh:4px 4px 0 var(--ink); --sh-lg:6px 6px 0 var(--ink); --sh-sm:2px 2px 0 var(--ink);
  --r:0;
  --font:"Space Grotesk",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.75rem;--fs-2xl:2.5rem;--fs-price:2.25rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 var(--fs-md)/1.45 var(--font)}
h1,h2,h3,h4{font-weight:700;line-height:1.1;margin:0 0 var(--s3);letter-spacing:-.02em}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
p{margin:0 0 var(--s3)}
a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:var(--bw-lg) solid var(--blue);outline-offset:3px}
img{max-width:100%;display:block}
.container{max-width:1200px;margin-inline:auto;padding-inline:var(--s4)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:var(--s2) var(--s4);font:700 var(--fs-md)/1 var(--font);
  color:var(--ink);background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);cursor:pointer;text-decoration:none;
  transition:transform .08s,box-shadow .08s}
.btn:hover{background:var(--yellow);color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--blue{background:var(--blue);color:#fff}.btn--blue:hover{background:var(--blue);color:#fff}
.btn--red{background:var(--red);color:#fff}.btn--red:hover{background:var(--red);color:#fff}
.btn--green{background:var(--green)}.btn--green:hover{background:var(--green)}
.btn--white{background:var(--paper)}.btn--white:hover{background:var(--paper)}
.btn--sm{min-height:36px;padding:var(--s1) var(--s3);font-size:var(--fs-sm)}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--grey);color:#555;box-shadow:none;cursor:not-allowed;transform:none}
.htmx-request.btn{opacity:.7;pointer-events:none}

/* ---------- Badges / tags ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s1);padding:2px var(--s2);
  font:700 var(--fs-xs)/1.4 var(--font);text-transform:uppercase;letter-spacing:.04em;
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-sm)}
.badge--montgallet{background:var(--green)}
.badge--refurb{background:var(--orange)}
.badge--new{background:var(--blue);color:#fff}
.badge--promo{background:var(--red);color:#fff}
.badge--best{background:var(--yellow)}
.badge--guide{background:var(--pink)}
.tag{display:inline-block;padding:2px var(--s2);font:700 var(--fs-sm)/1.4 var(--font);
  background:var(--paper);border:2px solid var(--ink);text-decoration:none;color:var(--ink);cursor:pointer}
a.tag:hover{background:var(--yellow)}
.tag[aria-pressed="true"],.tag.is-active{background:var(--ink);color:var(--paper)}

/* ---------- Formulaires ---------- */
.field{display:flex;flex-direction:column;gap:var(--s1)}
.field>label,.label{font:700 var(--fs-sm)/1.2 var(--font);text-transform:uppercase;letter-spacing:.04em}
.input,.select{width:100%;min-height:44px;padding:var(--s2) var(--s3);font:500 var(--fs-md) var(--font);
  color:var(--ink);background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh-sm);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.input:focus,.select:focus{outline:none;background:#FFFBE0;box-shadow:var(--sh);transform:translate(-1px,-1px)}
.input::placeholder{color:#555}
.input[aria-invalid="true"]{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.field__error{color:var(--red);font-weight:700;font-size:var(--fs-sm)}
.check{display:flex;align-items:center;gap:var(--s2);font-weight:700;cursor:pointer}
.check input{appearance:none;width:24px;height:24px;margin:0;background:var(--paper);border:var(--bw) solid var(--ink);display:grid;place-content:center;cursor:pointer}
.check input:checked{background:var(--yellow)}
.check input:checked::after{content:"✓";font-weight:700;line-height:1}

/* ---------- Surfaces ---------- */
.box{background:var(--paper);border:var(--bw) solid var(--ink);box-shadow:var(--sh);padding:var(--s4)}
.box--yellow{background:var(--yellow)}.box--blue{background:var(--blue);color:#fff}
.box--black{background:var(--ink);color:var(--paper)}

/* ---------- États HTMX ---------- */
.skeleton{background:var(--grey);border:var(--bw) solid var(--ink);min-height:1.5em;
  animation:blink .9s steps(2,jump-none) infinite}
@keyframes blink{50%{background:var(--paper)}}
.htmx-indicator{opacity:0;transition:opacity .1s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.alert{padding:var(--s3) var(--s4);border:var(--bw) solid var(--ink);box-shadow:var(--sh);font-weight:700;background:var(--paper)}
.alert--error{background:var(--red);color:#fff}.alert--empty{background:var(--yellow)}

@media (max-width:480px){
  :root{--fs-2xl:1.9rem;--fs-xl:1.4rem;--fs-price:1.9rem;--sh:3px 3px 0 #000;--sh-lg:4px 4px 0 #000}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}