/* ============================================
   GONEZZA — Premium Denim v2
   Base sombre (True Religion/Miss Me) + mécaniques empruntées
   Texture denim tissée · surpiqûres · laiton
   ============================================ */

:root {
  --raw:      #0e1320;  /* fond le plus profond */
  --indigo:   #141823;  /* fond sections */
  --indigo2:  #1b2030;  /* cartes */
  --denim:    #2c3e5f;  /* denim moyen */
  --denim-lt: #3a5078;  /* denim clair */
  --bone:     #ece7dd;  /* texte clair */
  --muted:    #bcc4d4;  /* texte secondaire */
  --rivet:    #c8a05a;  /* laiton / rivet — accent chaud */
  --thread:   #d96b4a;  /* fil surpiqûre — accent vif */
  --line:     rgba(200,160,90,.18);
  --line-str: rgba(200,160,90,.35);

  --display: 'Archivo','Helvetica Neue',sans-serif;
  --body:    'Inter',-apple-system,sans-serif;
  --mono:    'Courier New',monospace;
  --maxw: 1320px;
  --gut: clamp(16px,4vw,42px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--body);
  color:var(--bone);
  background:var(--raw);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

/* ---- Texture denim réutilisable ---- */
.denim-weave {
  background:
    repeating-linear-gradient(38deg, var(--denim) 0px, var(--denim) 3px, var(--denim-lt) 3px, var(--denim-lt) 6px),
    linear-gradient(135deg, var(--denim-lt), #243652);
  background-blend-mode:overlay;
}

/* ---- Type ---- */
.display { font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:.9; text-transform:uppercase; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--rivet); }
.mono-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rivet); }

/* ---- Surpiqûre décorative ---- */
.stitch-rule {
  height:6px;
  background:repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 17px);
  opacity:.85;
}

/* ---- Boutons ---- */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:13px; padding:14px 26px;
  border:1.5px solid var(--bone); background:var(--bone); color:var(--raw);
  border-radius:3px; cursor:pointer; transition:transform .15s, background .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn--thread { background:var(--thread); border-color:var(--thread); color:var(--raw); box-shadow:3px 3px 0 0 rgba(200,160,90,.4); }
.btn--thread:hover { box-shadow:4px 4px 0 0 rgba(200,160,90,.5); }
.btn--ghost { background:transparent; color:var(--bone); border-color:rgba(236,231,221,.4); }
.btn--ghost:hover { background:rgba(236,231,221,.08); }

/* ---- Announcement / bandeau live (mécanique Fashion Nova) ---- */
.live-bar {
  background:var(--thread); color:var(--raw);
  overflow:hidden; border-bottom:1px solid var(--rivet);
}
.live-bar__track {
  display:flex; gap:48px; white-space:nowrap; padding:9px 0;
  animation:scroll-x 22s linear infinite;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:13px; letter-spacing:.05em;
}
.live-bar__track span { display:inline-flex; align-items:center; gap:48px; }
.live-bar__track span::after { content:'●'; color:var(--raw); font-size:8px; }
@keyframes scroll-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- Header + méga-menu (mécanique PLT) ---- */
.site-header { position:sticky; top:0; z-index:60; background:var(--raw); border-bottom:1px solid var(--line); }
.site-header__bar { display:flex; align-items:center; justify-content:space-between; height:62px; }
.site-header__logo { font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:.16em; text-transform:uppercase; }
.nav { display:flex; gap:30px; height:100%; }
.nav__item { position:relative; display:flex; align-items:center; }
.nav__item > a { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; padding:4px 0; position:relative; }
.nav__item > a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--thread); transition:width .25s; }
.nav__item:hover > a::after { width:100%; }

.megamenu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--indigo); border:1px solid var(--line-str); border-radius:6px;
  padding:20px 24px; min-width:420px; display:grid; grid-template-columns:1fr 1fr; gap:8px 28px;
  opacity:0; visibility:hidden; transition:.2s; z-index:70;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.nav__item:hover .megamenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.megamenu a { font-size:13px; color:var(--muted); padding:7px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.04); transition:color .15s; }
.megamenu a:hover { color:var(--bone); }
.megamenu a span { font-family:var(--mono); font-size:9px; color:var(--rivet); }
.megamenu__head { grid-column:1/-1; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rivet); margin-bottom:4px; }

.header__cta { display:flex; align-items:center; gap:14px; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; }
.burger span { width:24px; height:2px; background:var(--bone); }

/* ---- Hero ---- */
.hero {
  position:relative; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden;
  background:
    repeating-linear-gradient(48deg, #16203a 0px, #16203a 2px, #1b2746 2px, #1b2746 4px),
    repeating-linear-gradient(-42deg, rgba(10,15,28,.5) 0px, rgba(10,15,28,.5) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg,#21304f 0%,#131c30 55%,#0c1322 100%);
  background-blend-mode:overlay,overlay,normal;
}
.hero__media { position:absolute; inset:0; z-index:1; }
.hero__media img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.hero__media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,19,32,.2), rgba(14,19,32,.85)); }
.hero__glow { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 55% 50% at 70% 35%, rgba(217,107,74,.12), transparent 70%); }
.hero__inner { position:relative; z-index:3; padding-bottom:clamp(36px,7vw,72px); }
.hero__tag { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line-str); border-radius:3px; margin-bottom:18px; }
.hero__tag i { width:5px; height:5px; background:var(--thread); border-radius:50%; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero h1 { font-size:clamp(48px,10vw,120px); line-height:.84; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.hero h1 em { font-style:normal; color:var(--thread); }
.hero__sub { font-family:var(--body); max-width:380px; margin:20px 0 26px; font-size:15.5px; color:var(--muted); }
.hero__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ---- Détail denim (mécanique Miss Me) ---- */
.detail { background:var(--indigo); padding:clamp(50px,8vw,100px) 0; }
.detail__grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,70px); align-items:center; }
.detail__visual { aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:relative; border:1px solid var(--line); }
.detail__visual img { width:100%; height:100%; object-fit:cover; }
.detail__visual .ph-inner { position:absolute; inset:14px; border:1px dashed var(--line-str); display:flex; align-items:center; justify-content:center; }
.detail__visual .ph-inner span { font-family:var(--mono); font-size:10px; letter-spacing:.25em; color:rgba(236,231,221,.4); }
.detail h2 { font-size:clamp(28px,4.5vw,52px); margin:14px 0 18px; }
.detail p { color:var(--muted); max-width:420px; margin-bottom:14px; font-size:15px; }
.detail__specs { display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
.detail__specs div .mono-lbl { display:block; margin-bottom:5px; }
.detail__specs div strong { font-family:var(--display); font-size:21px; }

/* ---- Section + grille produits ---- */
.section { padding:clamp(50px,7vw,90px) 0; }
.section__head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:18px; flex-wrap:wrap; }
.section__head .eyebrow { margin-bottom:10px; display:block; }
.section__head h2 { font-size:clamp(28px,4.5vw,52px); }

.pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.pcard { background:var(--indigo2); border:1px solid var(--line); border-radius:5px; overflow:hidden; position:relative; transition:border-color .2s, transform .2s; }
.pcard:hover { border-color:var(--line-str); transform:translateY(-3px); }
.pcard__badge { position:absolute; top:9px; left:9px; z-index:3; background:var(--thread); color:var(--raw); font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; padding:4px 7px; border-radius:2px; font-weight:bold; }
.pcard__badge--out { background:var(--denim-lt); }
.pcard__media { aspect-ratio:3/4; position:relative; overflow:hidden; }
.pcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard__media img { transform:scale(1.05); }
.pcard__media .ph-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pcard__media .ph-inner::before { content:''; position:absolute; inset:10px; border:1px dashed var(--line-str); }
.pcard__media .ph-inner span { font-family:var(--mono); font-size:9px; letter-spacing:.25em; color:rgba(236,231,221,.4); }
.pcard__body { padding:13px 14px 15px; border-top:1px solid var(--line); }
.pcard__name { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.02em; }
.pcard__meta { display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
.pcard__price { font-weight:600; font-size:14px; }
.pcard__shop { font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--rivet); }

/* ---- Live (mécanique Fashion Nova : urgence) ---- */
.live { position:relative; padding:clamp(46px,7vw,80px) 0; overflow:hidden;
  background:repeating-linear-gradient(48deg, #16203a 0 2px, #1b2746 2px 4px), linear-gradient(160deg,#1d2a47,#0c1322); background-blend-mode:overlay,normal; }
.live__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.live__dot { display:inline-flex; align-items:center; gap:8px; color:var(--thread); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.live__dot i { width:8px; height:8px; border-radius:50%; background:var(--thread); animation:pulse 1.4s infinite; }
.live h2 { font-size:clamp(28px,4.5vw,52px); margin:14px 0 16px; }
.live p { color:var(--muted); max-width:400px; margin-bottom:24px; font-size:15px; }
.live__visual { aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--line); position:relative; }
.live__visual img { width:100%; height:100%; object-fit:cover; }
.live__visual .ph-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.live__visual .ph-inner span { font-family:var(--mono); font-size:10px; letter-spacing:.25em; color:rgba(236,231,221,.4); }

/* ---- Newsletter ---- */
.news { background:var(--indigo); padding:clamp(50px,7vw,90px) 0; text-align:center; }
.news h2 { font-size:clamp(26px,4.5vw,46px); margin-bottom:12px; }
.news p { color:var(--muted); margin-bottom:24px; }
.news__form { display:flex; gap:8px; max-width:440px; margin:0 auto; }
.news__form input { flex:1; padding:14px 16px; border:1.5px solid var(--line-str); background:var(--raw); color:var(--bone); font-size:15px; font-family:var(--body); border-radius:3px; }
.news__form input:focus { outline:2px solid var(--thread); outline-offset:-1px; }

/* ---- Footer ---- */
.site-footer { background:var(--raw); border-top:1px solid var(--line); padding:clamp(46px,6vw,70px) 0 32px; }
.site-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:42px; }
.site-footer__logo { font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.site-footer p.tag { color:var(--muted); max-width:280px; font-size:13.5px; }
.site-footer__col h4 { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rivet); margin-bottom:14px; }
.site-footer__col a { display:block; font-size:13.5px; color:var(--muted); margin-bottom:9px; transition:color .15s; }
.site-footer__col a:hover { color:var(--thread); }
.site-footer__bottom { display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px; }

/* ---- Placeholder denim ---- */
.ph-fallback { background:
    repeating-linear-gradient(38deg, var(--denim) 0px, var(--denim) 3px, var(--denim-lt) 3px, var(--denim-lt) 6px),
    linear-gradient(135deg, var(--denim-lt), #243652);
  background-blend-mode:overlay; }

/* ---- Reveal ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s, transform .7s; }
.reveal.in { opacity:1; transform:none; }

/* ---- Responsive ---- */
@media (max-width:980px) {
  .pgrid { grid-template-columns:repeat(2,1fr); }
  .detail__grid, .live__grid { grid-template-columns:1fr; }
  .site-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .nav { display:none; }
  .burger { display:flex; }
  .header__cta .btn { display:none; }
  .news__form { flex-direction:column; }
  .site-footer__grid { grid-template-columns:1fr; }
  .site-footer__bottom { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}

/* ---- Menu mobile ---- */
@media (max-width:720px){
  .nav[data-mobilenav]{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--indigo); border-bottom:1px solid var(--line-str); flex-direction:column; gap:0; padding:6px 0; height:auto; }
  .nav[data-mobilenav].open{ display:flex; }
  .nav[data-mobilenav] .nav__item{ height:auto; }
  .nav[data-mobilenav] .nav__item > a{ padding:14px var(--gut); display:block; width:100%; }
  .nav[data-mobilenav] .megamenu{ display:none; }
}