/* =========================================================
   FRENCHCONNECT — STREET MAX (GRAFFITI NEON)
   Fichier complet: assets/css/style.css
   ========================================================= */

/* ================================
   VARIABLES
================================ */
:root{
  --bg: #07070b;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.035);
  --line: rgba(255,255,255,.12);

  --ink: #f1f4ff;
  --muted: rgba(241,244,255,.72);

  --neon:#39ff14;
  --neon2:#ff2bd6;
  --neon3:#00e5ff;

  --maxw: 1200px;
}

/* ================================
   RESET
================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color: var(--neon3); }

/* ================================
   BACKGROUND GLOBAL — IDENTIQUE PARTOUT (PANIER STYLE)
   ✅ FIX .com : chemin relatif
================================ */
html{ background:#07070b; }

body{
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: transparent;
  line-height:1.55;
}

/* Image de fond (même cadrage partout) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;

  /* ✅ IMPORTANT : chemin RELATIF depuis assets/css/style.css */
  background-image: url("../images/background.webp");
  background-repeat: no-repeat;
  background-size: cover;

  /* 🎯 Position comme ton panier */
  background-position: 65% center;

  transform: translateZ(0);
  will-change: transform;
}

/* Voile global léger */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45),
    rgba(0,0,0,.65)
  );
}

/* Home = voile un peu plus léger */
html.home body::after{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.30),
    rgba(0,0,0,.52)
  );
}

/* Titres (street) */
h1,h2,h3{
  margin:0 0 12px;
  font-family: "Bangers", Inter, system-ui, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(57,255,20,.18),
    0 0 18px rgba(0,229,255,.12);
}
.muted{ color: var(--muted); }

/* ================================
   LAYOUT
================================ */
.container{ padding:24px; }
.wrap{ max-width:var(--maxw); margin:0 auto; }

/* ================================
   HEADER (CLUB / STREET)
================================ */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(7,7,11,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,229,255,.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.site-header .wrap{
  padding: 12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{ height:42px; width:auto; }

.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.nav a{
  padding: 8px 10px;
  border-radius: 12px;
  opacity: .90;
  position: relative;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .92rem;
}
.nav a:hover{
  opacity: 1;
  background: rgba(0,229,255,.08);
  box-shadow: 0 0 18px rgba(0,229,255,.10);
}
.nav a.active{
  opacity: 1;
  background: rgba(57,255,20,.10);
  border: 1px solid rgba(57,255,20,.25);
  box-shadow: 0 0 18px rgba(57,255,20,.10);
}

/* Compteur panier */
.cart-link span,
#cart-count{
  display:inline-block;
  background: rgba(57,255,20,.95);
  color:#000;
  border-radius:999px;
  padding:2px 8px;
  margin-left:6px;
  font-size:.85rem;
  font-weight:900;
}

/* ================================
   BANNIÈRE
================================ */
.age-banner{
  text-align:center;
  padding:8px 14px;
  background: rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.9rem;
}

/* ================================
   HERO
================================ */
.hero{ padding:40px 24px; }
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items:center;
}
.hero-text h1{ font-size: 2.4rem; }
.hero-text p{ max-width: 560px; color: var(--muted); }

.hero-media-small{ max-width: 420px; margin:0 auto; }
.hero-media-small img{
  width:100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: contain;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
}

@media (max-width: 768px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-text h1{ font-size: 2rem; }
  .hero-media-small{ max-width: 320px; }
}

/* ================================
   GRID / CARDS (MAX STREET)
================================ */
.grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03));
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 18px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.42),
    0 0 18px rgba(0,229,255,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  border:2px dashed rgba(255,255,255,.08);
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:0;
}
.card::before{
  content:"";
  position:absolute;
  top:-10px;
  right:18px;
  width:62px;
  height:20px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.25) 6px,
    rgba(255,255,255,.14) 6px,
    rgba(255,255,255,.14) 12px
  );
  transform: rotate(4deg);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

.card:hover{
  transform: translateY(-4px);
  border-color: rgba(57,255,20,.25);
  box-shadow:
    0 22px 70px rgba(0,0,0,.48),
    0 0 22px rgba(57,255,20,.10),
    0 0 18px rgba(255,43,214,.08);
  filter: saturate(1.06) contrast(1.02);
}

.card .thumb{
  width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  position: relative;
  z-index: 1;
  filter: saturate(1.14) contrast(1.06);
}
.card .pad{
  padding: 14px;
  position: relative;
  z-index: 2;
}
.card .pad::after{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  bottom:-12px;
  height: 26px;
  background:
    radial-gradient(circle at 10% 60%, rgba(255,43,214,.22), transparent 55%),
    radial-gradient(circle at 35% 40%, rgba(57,255,20,.18), transparent 58%),
    radial-gradient(circle at 70% 60%, rgba(0,229,255,.18), transparent 58%),
    radial-gradient(circle at 90% 45%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(10px);
  opacity: .95;
  pointer-events:none;
}

.pill{
  display:inline-block;
  font-size:.78rem;
  border-radius:999px;
  padding:4px 10px;
  color:#eaf2ff;
  border: 1px solid rgba(255,43,214,.24);
  background: rgba(255,43,214,.10);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  transform: rotate(-4deg);
  box-shadow: 0 0 18px rgba(255,43,214,.10);
}

.price-tag{
  position: relative;
  font-weight: 900;
}
.price-tag::after{
  content:"";
  position:absolute;
  left:-8px;
  right:10px;
  bottom:-3px;
  height:9px;
  background: linear-gradient(90deg, rgba(57,255,20,.28), rgba(255,43,214,.26), rgba(0,229,255,.26));
  filter: blur(9px);
  z-index:-1;
}

/* ================================
   BUTTONS
================================ */
.btn{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(57,255,20,.60);
  background: rgba(57,255,20,.12);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing: .9px;
  box-shadow:
    0 0 18px rgba(57,255,20,.18),
    0 18px 50px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,43,214,.55);
  background: rgba(255,43,214,.12);
  box-shadow:
    0 0 24px rgba(255,43,214,.20),
    0 18px 60px rgba(0,0,0,.28);
}
.btn.ghost{
  border: 1px solid rgba(0,229,255,.40);
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 14px rgba(0,229,255,.10);
}
.btn.ghost:hover{
  background: rgba(0,229,255,.10);
}

/* ================================
   INPUTS / SELECTS
================================ */
input, select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 12px;
}
input:focus, select:focus{
  outline: none;
  border-color: rgba(0,229,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.12);
}

/* ================================
   GRAMMAGE
================================ */
#grammage-box select,
#grammage-box option{
  background: #0f0f0f !important;
  color: #ffffff !important;
}
#grammage-box select{
  border: 1px solid rgba(255,255,255,.20) !important;
}
#qty{
  background: #0f0f0f !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

/* ================================
   PANIER (photos)
================================ */
#cart-items .cart-line img{
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
#cart-items .cart-line{
  padding: 10px !important;
  gap: 10px !important;
}

/* ================================
   STICKERS PROMO
================================ */
.sticker{
  position:absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 999 !important;
  pointer-events:none !important;

  padding: 9px 13px !important;
  font-weight: 1000 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;

  color: #0b0b0d !important;
  background: var(--neon) !important;

  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.45),
    0 0 22px rgba(57,255,20,.20) !important;

  transform: rotate(-8deg) !important;
  clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 4% 50%);

  background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px) !important;
  background-size: 6px 6px !important;
}
.sticker.right{ left:auto !important; right:14px !important; transform: rotate(8deg) !important; }
.sticker.pink{ background: var(--neon2) !important; }
.sticker.cyan{ background: var(--neon3) !important; }
.sticker.black{ background: rgba(255,255,255,.92) !important; color:#000 !important; }

/* ================================
   FOOTER
================================ */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:40px;
}
.site-footer .cols{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.site-footer .copy{
  text-align:center;
  color:var(--muted);
  padding-bottom:24px;
}
@media (max-width:980px){
  .site-footer .cols{ grid-template-columns:1fr; }
}

/* ================================
   Micro animation
================================ */
@keyframes neonPulse{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.08); }
  100%{ filter: brightness(1); }
}
.sticker{ animation: neonPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .sticker{ animation:none !important; }
}

/* =========================================================
   STREET NAV — BURGER + OVERLAY
================================ */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,229,255,.30);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 18px rgba(0,229,255,.10);
  cursor:pointer;
  position: relative;
}

.nav-toggle span{
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  background: rgba(241,244,255,.92);
  transform: translateX(-50%);
  border-radius:99px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; opacity:.95; }
.nav-toggle span:nth-child(3){ top:27px; }

.nav-toggle:hover{
  border-color: rgba(57,255,20,.35);
  box-shadow: 0 0 22px rgba(57,255,20,.10);
}

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:none;
}

.mobile-menu .backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}

.mobile-menu .panel{
  position:absolute;
  right: 14px;
  top: 14px;
  width: min(420px, calc(100% - 28px));
  border-radius: 22px;
  border: 1px solid rgba(0,229,255,.22);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(57,255,20,.16), transparent 55%),
    radial-gradient(700px 520px at 80% 15%, rgba(255,43,214,.14), transparent 55%),
    rgba(8,8,12,.88);
  box-shadow:
    0 26px 90px rgba(0,0,0,.55),
    0 0 22px rgba(0,229,255,.12);
  overflow:hidden;
  transform: translateY(-6px);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}

.mobile-menu .panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  border:2px dashed rgba(255,255,255,.08);
  pointer-events:none;
  mix-blend-mode: overlay;
}

.mobile-menu.open{ display:block; }
.mobile-menu.open .panel{ transform: translateY(0); opacity:1; }

.mobile-menu .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 8px;
}
.mobile-menu .head strong{
  font-family:"Bangers", Inter, system-ui, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(0,229,255,.14);
}

.mobile-menu .close{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,43,214,.28);
  background: rgba(255,255,255,.03);
  color: var(--ink);
  cursor:pointer;
  box-shadow: 0 0 18px rgba(255,43,214,.10);
}

.mobile-menu .links{
  padding: 8px 14px 14px;
  display:grid;
  gap:10px;
}

.mobile-menu .links a{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(255,255,255,.04);
}
.mobile-menu .links a:hover{
  border-color: rgba(57,255,20,.28);
  background: rgba(57,255,20,.08);
  box-shadow: 0 0 18px rgba(57,255,20,.10);
}

@media (max-width: 860px){
  .site-header .nav{ display:none; }
  .nav-toggle{ display:inline-block; }
}

body.menu-open .nav-toggle span:nth-child(1){
  top:21px;
  transform: translateX(-50%) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){
  top:21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* =========================================
   HOME ONLY (index.html)
========================================= */
html.home .card{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border-color: rgba(0,229,255,.18) !important;
}
html.home .container{
  padding-top: 18px;
  padding-bottom: 18px;
}