/* =========================================================
   PUNCHLINE — feuille de style
   Direction : streetwear / sticker culture, jeune & punchy.
   Boldness concentrée sur 1 signature : la phrase surlignée
   + l'aperçu du t-shirt dessiné en CSS.
   ========================================================= */

:root{
  --paper:#FBF7EF;     /* fond bone chaud */
  --ink:#16130F;       /* encre quasi-noire */
  --grape:#4B2A8C;     /* violet structurel */
  --shock:#FF2E7E;     /* rose choc — surligneur / CTA */
  --zest:#FFD23F;      /* jaune — touche tertiaire */
  --mist:#E9E1D3;      /* divider discret */
  --paper-2:#F2ECE0;   /* fond alterné */

  --max:1120px;
  --r:18px;            /* rayon */
  --shadow:0 14px 40px -18px rgba(22,19,15,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-weight:700;
  padding:.85em 1.4em;
  border-radius:999px;
  font-size:1rem;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--grape);border-color:var(--grape)}
.btn-block{width:100%}
.btn:focus-visible{outline:3px solid var(--shock);outline-offset:3px}

/* ---------- Barre du haut ---------- */
.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  background:rgba(251,247,239,.86);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);
}
.logo{display:flex;align-items:center;margin-right:auto}
.logo-wordmark{
  height:30px;width:auto;display:block;
}
.bar-nav{display:flex;gap:1.4rem;font-weight:600;font-size:.95rem}
.bar-nav a:hover{color:var(--grape)}
.cart-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--paper);
  border:none;border-radius:999px;
  padding:.6rem 1.1rem;font-weight:700;font-size:.95rem;
}
.cart-btn:hover{background:var(--grape)}
.cart-count{
  display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  background:var(--shock);color:#fff;border-radius:999px;
  font-size:.78rem;font-weight:700;
}

/* ---------- Hero ---------- */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,9vw,6.5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3rem);
  text-align:center;
}
.eyebrow{
  display:inline-block;
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grape);
  border:1.5px solid var(--grape);border-radius:999px;
  padding:.4em 1em;margin:0 0 1.4rem;
}
.hero-title{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:clamp(2.8rem,11vw,6.5rem);
  line-height:.92;
  letter-spacing:.01em;
  margin:0 0 1.2rem;
  text-transform:uppercase;
}
.mark{
  position:relative;display:inline-block;
  padding:0 .12em;
}
.mark::before{
  content:"";position:absolute;left:0;right:0;bottom:.08em;
  height:.46em;background:var(--shock);
  z-index:-1;transform:rotate(-1.4deg) scaleX(0);
  transform-origin:left center;
  animation:draw .7s .25s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes draw{to{transform:rotate(-1.4deg) scaleX(1)}}
.hero-sub{
  max-width:30ch;margin:0 auto 2rem;
  font-size:clamp(1rem,2.4vw,1.2rem);color:#473f33;
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;border-block:2px solid var(--ink);
  background:var(--zest);
}
.marquee-track{
  display:flex;gap:1.6rem;width:max-content;
  padding:.55rem 0;
  font-family:"Anton",sans-serif;font-size:1.3rem;letter-spacing:.05em;
  animation:scroll 24s linear infinite;
}
.marquee-track span{white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Boutique ---------- */
.shop{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem)}
.shop-head{margin-bottom:2.4rem}
.section-title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,6vw,3.2rem);line-height:1;margin:0 0 .4rem;letter-spacing:.02em;
}
.section-note{color:#5c5347;margin:0;max-width:46ch}

.grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}

/* ---------- Carte produit ---------- */
.card{
  border:2px solid var(--ink);border-radius:var(--r);
  background:var(--paper-2);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* onglets de filtre de la boutique */
.shop-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.8rem}
.tab{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.95rem;
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  transition:background .15s ease,color .15s ease;
}
.tab:hover{background:rgba(22,19,15,.08)}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cat[hidden]{display:none}

/* sous-titres de catégorie */
.cat-title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,3.5vw,1.7rem);letter-spacing:.03em;
  margin:2.4rem 0 1.1rem;
}
.cat-title:first-of-type{margin-top:0}

/* aperçu (t-shirt ou casquette) dessiné en CSS */
.mockup-stage{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  padding:1.2rem;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.5), transparent 60%),
    repeating-linear-gradient(45deg,transparent 0 11px,rgba(22,19,15,.03) 11px 12px);
}
.mockup-stage.has-photo{padding:0;background:none}
.photo{width:100%;height:100%;object-fit:cover;display:block}
.tee{
  position:relative;width:78%;aspect-ratio:1/1.04;
  clip-path:polygon(18% 0,0 18%,8% 34%,22% 26%,22% 100%,78% 100%,78% 26%,92% 34%,100% 18%,82% 0,62% 0,50% 9%,38% 0);
  display:grid;place-items:center;
  filter:drop-shadow(0 10px 14px rgba(22,19,15,.18));
  transition:background .25s ease;
}
.tee.white{background:#F6F4EF}
.tee.black{background:#191613}
.tee-phrase{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  text-align:center;line-height:.96;letter-spacing:.005em;
  font-size:clamp(1.15rem,4.6vw,1.7rem);
  padding:0 4% 8%;
  margin-top:13%;
  overflow-wrap:normal;
  hyphens:none;
}
.tee.white .tee-phrase{color:#191613}
.tee.black .tee-phrase{color:#F6F4EF}

/* casquette */
.cap{
  position:relative;width:80%;aspect-ratio:1/0.78;
  filter:drop-shadow(0 10px 14px rgba(22,19,15,.18));
}
.cap-button{
  position:absolute;top:4%;left:50%;transform:translateX(-50%);
  width:8%;aspect-ratio:1;border-radius:50%;z-index:2;
}
.cap-crown{
  position:absolute;top:7%;left:12%;width:76%;height:62%;
  border-radius:50% 50% 16% 16% / 88% 88% 26% 26%;
  transition:background .25s ease;
}
.cap-brim{
  position:absolute;bottom:8%;left:6%;width:74%;height:30%;
  border-radius:8% 8% 60% 60% / 8% 8% 130% 130%;
  transform:rotate(-2deg);transform-origin:left center;
  transition:background .25s ease;
}
.cap.white .cap-crown,.cap.white .cap-button{background:#F6F4EF}
.cap.white .cap-brim{background:#E8E4DC}
.cap.black .cap-crown,.cap.black .cap-button{background:#191613}
.cap.black .cap-brim{background:#0E0C0A}
.cap-phrase{
  position:absolute;top:37%;left:50%;transform:translate(-50%,-50%);z-index:3;
  white-space:nowrap;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  text-align:center;line-height:.98;letter-spacing:.01em;
  font-size:clamp(.95rem,3.3vw,1.4rem);
}
.cap.white .cap-phrase{color:#191613}
.cap.black .cap-phrase{color:#F6F4EF}

.card-body{padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.card-title{font-size:1.05rem;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.01em}
.card-price{font-weight:700;font-size:1.15rem}
.card-price .ship{display:block;font-size:.78rem;font-weight:500;color:#6a6053}

.opt-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6a6053;margin-bottom:.35rem}

/* sélecteur couleur */
.swatches{display:flex;gap:.5rem}
.swatch{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);
  position:relative;padding:0;
}
.swatch[data-color="white"]{background:#F6F4EF}
.swatch[data-color="black"]{background:#191613}
.swatch[aria-pressed="true"]{outline:3px solid var(--shock);outline-offset:2px}

/* sélecteur taille */
.sizes{display:flex;flex-wrap:wrap;gap:.4rem}
.size{
  min-width:38px;border:2px solid var(--ink);background:var(--paper);
  border-radius:9px;padding:.35rem .2rem;font-weight:700;font-size:.85rem;
}
.size[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.size-wide{min-width:auto;padding:.35rem .7rem}

.add{margin-top:.3rem}

/* ---------- Comment ça marche ---------- */
.how{max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem) clamp(3rem,7vw,5rem)}
.steps{
  list-style:none;margin:1.8rem 0 0;padding:0;
  display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.steps li{
  border:2px solid var(--ink);border-radius:var(--r);
  background:var(--paper-2);padding:1.4rem;position:relative;
}
.step-num{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--grape);color:#fff;
  font-family:"Anton",sans-serif;font-size:1.4rem;margin-bottom:.8rem;
}
.steps h3{margin:.2rem 0 .35rem;font-size:1.15rem}
.steps p{margin:0;color:#5c5347;font-size:.98rem}

/* ---------- Footer ---------- */
.foot{
  border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);
  text-align:center;padding:2.8rem 1.5rem;
}
.foot-brand{font-family:"Anton",sans-serif;font-size:2rem;letter-spacing:.05em;margin-bottom:.6rem}
.foot p{margin:.3rem 0;color:#cabfae;font-size:.92rem}
.foot-small{color:#7d7464 !important;font-size:.82rem !important;margin-top:1rem !important}
.foot-contact{margin:.3rem 0}
.foot-contact a{color:var(--zest);font-weight:600;text-decoration:underline}
.foot-contact a:hover{color:#fff}

/* ---------- Panier (tiroir) ---------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(22,19,15,.5);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:50;
}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);
  background:var(--paper);border-left:2px solid var(--ink);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  z-index:60;display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem;border-bottom:2px solid var(--ink);
}
.drawer-head h2{font-family:"Anton",sans-serif;font-weight:400;font-size:1.6rem;margin:0;text-transform:uppercase}
.drawer-close{border:none;background:none;font-size:1.3rem;line-height:1;padding:.3rem}
.drawer-body{flex:1;overflow-y:auto;padding:1rem 1.3rem;display:flex;flex-direction:column;gap:1rem}
.drawer-empty{color:#6a6053;text-align:center;margin-top:2.5rem}

.line{display:flex;gap:.9rem;align-items:flex-start}
.line-tee{
  width:54px;height:54px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-family:"Anton",sans-serif;font-size:.5rem;text-align:center;line-height:.9;
  padding:4px;text-transform:uppercase;border:2px solid var(--ink);
}
.line-tee.white{background:#F6F4EF;color:#191613}
.line-tee.black{background:#191613;color:#F6F4EF}
.line-thumb{width:54px;height:54px;flex:none;border-radius:10px;object-fit:cover;display:block}
.line-info{flex:1;min-width:0}
.line-info b{display:block;font-size:.95rem}
.line-meta{font-size:.82rem;color:#6a6053}
.line-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem}
.qty{display:flex;align-items:center;gap:.5rem}
.qty button{
  width:26px;height:26px;border:2px solid var(--ink);background:var(--paper);
  border-radius:7px;font-weight:700;line-height:1;
}
.line-remove{border:none;background:none;color:var(--shock);font-weight:700;font-size:.82rem}
.line-price{font-weight:700}

.drawer-foot{border-top:2px solid var(--ink);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.drawer-total{display:flex;justify-content:space-between;font-family:"Anton",sans-serif;font-size:1.5rem}
.drawer-ship{margin:0;font-size:.85rem;color:#6a6053;text-align:center}
.drawer-err{margin:.2rem 0 0;color:var(--shock);font-size:.88rem;text-align:center;font-weight:600}

/* ---------- Accessibilité / responsive ---------- */
@media (max-width:640px){
  .bar-nav{display:none}
  /* cartes plus compactes : moins d'espace autour du mockup, mockup plus petit, padding réduit */
  .mockup-stage{padding:.6rem}
  .tee{width:64%}
  .cap{width:70%}
  .tee-phrase{font-size:clamp(1.1rem,5.4vw,1.5rem)}
  .card-body{padding:.85rem .9rem 1rem;gap:.65rem}
  .grid{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
  .mark::before{transform:rotate(-1.4deg) scaleX(1)}
}