@charset "UTF-8";
:root {
  --paper: #f9f8f4;
  --ink: #1a1a1a;
  --spot: #f58220;
  --spot2: #faa61a;
  --spot3: #ed1c24; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  selection-background-color: var(--spot);
  selection-color: white; }

h1, h2, .display {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase; }

.hl {
  font-family: 'Comfortaa', cursive, sans-serif;
  font-weight: 900; }

.logo-hl {
  height: 4rem; }

/* Effet de trame de sérigraphie (Halftone) */
.halftone {
  background-image: radial-gradient(var(--ink) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: 0.1; }

.halftone-large {
  background-image: radial-gradient(var(--ink) 2px, transparent 0);
  background-size: 12px 12px;
  opacity: 0.05; }

/* Texture de papier grainé */
.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

/* Bouton style "Tampon" */
.btn-stamp,
.btn-stampw {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 1.25rem 2.5rem;
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  border: 2px solid var(--ink); }
  .btn-stamp:hover,
  .btn-stampw:hover {
    background: transparent;
    color: var(--ink);
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0px var(--spot); }
  .btn-stamp.btn-stampw,
  .btn-stampw.btn-stampw {
    background: var(--paper);
    color: var(--ink); }
    .btn-stamp.btn-stampw:hover,
    .btn-stampw.btn-stampw:hover {
      background: var(--paper);
      color: var(--ink);
      transform: translate(-4px, -4px);
      box-shadow: 6px 6px 0px var(--spot); }

.border-ink {
  border: 2px solid var(--ink); }

.border-spot {
  border: 2px solid var(--spot); }

.border-spot2 {
  border: 2px solid var(--spot2); }

.border-spot3 {
  border: 2px solid var(--spot3); }

.he:hover {
  cursor: pointer; }
  .he:hover .w-12 {
    transition: all 0.2s ease;
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0px var(--ink); }

/*# sourceMappingURL=main.css.map */