/* ══════════════════════════════════════════
   BAD KING TATTOO — Piercings page styles
   ══════════════════════════════════════════ */

/* ═══ HEADER ═══ */
.pierce-header{padding:140px clamp(16px,5vw,60px) 60px;background:var(--void);position:relative;overflow:hidden}
.pierce-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 35% at 50% 60%,rgba(212,168,37,.06),transparent 70%);pointer-events:none}
.pierce-intro{font-family:var(--body);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.4rem);color:var(--cream-50);max-width:680px;margin:32px auto 0;line-height:1.6;position:relative}
.pierce-intro::before,.pierce-intro::after{content:'';position:absolute;top:50%;width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.pierce-intro::before{left:-70px}.pierce-intro::after{right:-70px}

/* ═══ SECTION TYPES & TARIFS ═══ */
#types{background:var(--abyss)}
.pierce-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pierce-cat{background:var(--coal);border:1px solid var(--gold-line);position:relative;padding:40px 32px 32px;transition:border-color .4s,transform .4s;overflow:hidden}
.pierce-cat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.3}
.pierce-cat::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(212,168,37,.04),transparent 60%);pointer-events:none}
.pierce-cat:hover{border-color:rgba(212,168,37,.25);transform:translateY(-4px)}
.pierce-cat:hover::before{opacity:.6}

.pc-head{text-align:center;margin-bottom:28px;position:relative;z-index:1}
.pc-icon{display:inline-flex;width:60px;height:60px;align-items:center;justify-content:center;color:var(--gold);background:rgba(212,168,37,.04);border:1px solid var(--gold-line);margin-bottom:16px}
.pc-icon svg{width:32px;height:32px}
.pc-title{font-family:var(--gothic);font-size:2.4rem;color:var(--white);line-height:1;margin-bottom:8px;text-shadow:2px 2px 0 rgba(212,168,37,.06)}
.pc-desc{font-family:var(--raw);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--ash)}

.pc-list{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.pc-list li{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(212,168,37,.07)}
.pc-list li:last-child{border-bottom:none}
.pl-name{font-family:var(--body);font-size:1.05rem;color:var(--cream);white-space:nowrap}
.pl-dots{flex:1;height:1px;border-bottom:1px dotted rgba(212,168,37,.18);transform:translateY(-4px);min-width:20px}
.pl-price{font-family:var(--raw);font-size:.85rem;letter-spacing:2px;color:var(--gold);white-space:nowrap}
.pl-sep{justify-content:center;font-family:var(--raw);font-size:.65rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dim);border:none!important;padding:14px 0 4px;display:block;text-align:center}

.pierce-note{max-width:900px;margin:60px auto 0;text-align:center;padding:32px 28px;background:rgba(212,168,37,.02);border:1px solid var(--gold-line);position:relative}
.pn-mark{font-size:1.6rem;color:var(--gold);margin-bottom:10px;font-family:var(--gothic)}
.pierce-note p{color:var(--cream-50);font-size:1.05rem;line-height:1.7}
.pierce-note em{color:var(--gold);font-style:italic;font-weight:400}

/* ═══ HYGIENE ═══ */
#hygiene{background:var(--void)}
.hyg-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.hyg-card{background:var(--coal);border:1px solid var(--gold-line);padding:36px 32px;position:relative;overflow:hidden;transition:border-color .4s,transform .4s}
.hyg-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--gold);transition:height .5s cubic-bezier(.22,1,.36,1)}
.hyg-card:hover{border-color:rgba(212,168,37,.2);transform:translateX(4px)}
.hyg-card:hover::before{height:100%}
.hyg-num{font-family:var(--gothic);font-size:3rem;color:var(--gold);line-height:1;margin-bottom:14px;opacity:.55}
.hyg-card h3{font-family:var(--serif);font-size:1.3rem;color:var(--cream);font-weight:600;letter-spacing:1px;margin-bottom:12px}
.hyg-card p{color:var(--cream-50);font-size:1.05rem;line-height:1.65}

/* ═══ AFTERCARE ═══ */
#aftercare{background:var(--abyss)}
.after-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.after-do,.after-dont{background:var(--coal);border:1px solid var(--gold-line);padding:36px 32px;position:relative}
.after-do{border-left:3px solid var(--gold)}
.after-dont{border-left:3px solid #663}
.ad-head{font-family:var(--raw);font-size:.85rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--gold-line)}
.after-dont .ad-head{color:var(--ash)}
.ad-mark{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;font-size:1rem;border:1px solid currentColor}
.ad-yes{color:var(--gold)}
.ad-no{color:#998;border-color:#665!important}
.after-do ul,.after-dont ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.after-do li,.after-dont li{color:var(--cream-50);font-size:1.05rem;line-height:1.55;padding-left:24px;position:relative}
.after-do li::before{content:'♛';position:absolute;left:0;top:0;color:var(--gold);font-size:.8rem;opacity:.6}
.after-dont li::before{content:'×';position:absolute;left:0;top:-2px;color:#998;font-size:1.2rem;font-weight:700}
.after-do em,.after-dont em{color:var(--gold);font-style:italic}

.after-times{grid-column:1/-1;margin-top:32px;padding:40px 32px;background:rgba(212,168,37,.02);border:1px solid var(--gold-line)}
.at-title{font-family:var(--gothic);font-size:2rem;color:var(--white);text-align:center;margin-bottom:32px;text-shadow:2px 2px 0 rgba(212,168,37,.06)}
.at-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.at-item{text-align:center;padding:18px 12px;border:1px solid rgba(212,168,37,.06);background:rgba(0,0,0,.3);transition:border-color .3s,background .3s}
.at-item:hover{border-color:var(--gold-line);background:rgba(212,168,37,.03)}
.at-name{font-family:var(--raw);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--cream-50);margin-bottom:6px}
.at-time{font-family:var(--gothic);font-size:1.4rem;color:var(--gold)}

/* ═══ FAQ ═══ */
#faq{background:var(--void)}
.faq-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--coal);border:1px solid var(--gold-line);position:relative;transition:border-color .4s}
.faq-item[open]{border-color:rgba(212,168,37,.25)}
.faq-item summary{font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:1px;color:var(--cream);padding:20px 56px 20px 28px;list-style:none;position:relative;transition:color .3s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-family:var(--gothic);font-size:1.8rem;color:var(--gold);transition:transform .3s,content .3s;line-height:1}
.faq-item[open] summary::after{content:'−';transform:translateY(-50%) rotate(0deg)}
.faq-item:hover summary{color:var(--gold)}
.faq-body{padding:0 28px 22px;border-top:1px dashed var(--gold-line);margin-top:-1px;padding-top:18px}
.faq-body p{color:var(--cream-50);font-size:1.05rem;line-height:1.7}
.faq-body em{color:var(--gold);font-style:italic}

/* ═══ CTA FINAL ═══ */
#cta-pierce{background:var(--abyss);padding:clamp(60px,10vw,140px) clamp(16px,5vw,60px);text-align:center;position:relative;overflow:hidden}
#cta-pierce::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(212,168,37,.05),transparent 70%);pointer-events:none}
.cta-inner{max-width:700px;margin:0 auto;position:relative;z-index:1}
.cta-mark{font-family:var(--gothic);font-size:3rem;color:var(--gold);margin-bottom:18px;text-shadow:2px 2px 0 rgba(212,168,37,.1)}
.cta-title{font-family:var(--gothic);font-size:clamp(2.2rem,5vw,3.6rem);color:var(--white);line-height:1.1;margin-bottom:18px;text-shadow:3px 3px 0 rgba(212,168,37,.06),-2px -2px 0 rgba(0,0,0,.6)}
.cta-sub{font-family:var(--body);font-style:italic;font-size:1.2rem;color:var(--cream-50);margin-bottom:36px;line-height:1.6}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn--ghost{background:transparent;color:var(--gold);border:2px solid var(--gold-line)}
.btn--ghost:hover{color:var(--void);border-color:var(--gold)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  .pierce-grid{grid-template-columns:1fr;gap:24px;max-width:600px}
  .at-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .pierce-intro::before,.pierce-intro::after{display:none}
  .hyg-grid{grid-template-columns:1fr;gap:18px}
  .hyg-card{padding:28px 24px}
  .after-grid{grid-template-columns:1fr;gap:18px}
  .after-do,.after-dont{padding:28px 24px}
  .at-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pierce-note{padding:24px 20px}
  .faq-item summary{font-size:1rem;padding:18px 48px 18px 20px}
  .faq-item summary::after{right:18px;font-size:1.5rem}
  .faq-body{padding:16px 20px 20px}
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;max-width:300px;text-align:center}
}
@media(max-width:500px){
  .pierce-cat{padding:32px 22px 26px}
  .pc-title{font-size:2rem}
  .at-grid{grid-template-columns:1fr 1fr}
  .pl-name{font-size:.95rem}
  .pl-price{font-size:.75rem}
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION BIJOUX & VITRINE
   ═══════════════════════════════════════════════════════════════════════ */

#bijoux {
  background: var(--abyss);
}

/* ─── Intro ─── */
.bijoux-intro {
  max-width: 820px;
  margin: 0 auto 60px;
  text-align: center;
}
.bijoux-intro p {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--cream);
  margin-bottom: 16px;
}
.bijoux-intro p:last-child { margin-bottom: 0; }
.bijoux-intro em {
  color: var(--gold);
  font-weight: 400;
}

/* ─── Catégories en grille ─── */
.bijoux-grid {
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bijoux-cat {
  background: var(--coal);
  border: 1px solid var(--gold-line);
  padding: 36px 30px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s;
}
.bijoux-cat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3;
  transition: opacity 0.4s;
}
.bijoux-cat:hover {
  border-color: rgba(212, 168, 37, 0.3);
  transform: translateY(-4px);
}
.bijoux-cat:hover::before {
  opacity: 0.7;
}

.bc-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--gold);
  background: rgba(212, 168, 37, 0.04);
  border: 1px solid var(--gold-line);
}
.bc-icon svg {
  width: 32px;
  height: 32px;
}

.bc-title {
  font-family: var(--gothic);
  font-size: 2.2rem;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 rgba(212, 168, 37, 0.06);
}

.bc-desc {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cream-50);
  margin-bottom: 18px;
}

.bc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--gold-line);
  padding-top: 18px;
}
.bc-list li {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--cream);
  padding-left: 22px;
  position: relative;
}
.bc-list li::before {
  content: '♛';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 0.7rem;
  opacity: 0.55;
}

/* ─── Vitrine (placeholders photos) ─── */
.bijoux-vitrine {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 32px;
  background: linear-gradient(155deg, var(--coal) 0%, rgba(15, 12, 9, 0.95) 100%);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  position: relative;
}

.bv-head {
  text-align: center;
  margin-bottom: 36px;
}
.bv-eyebrow {
  display: inline-block;
  font-family: var(--raw);
  font-size: 0.7rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 8px;
}
.bv-title {
  font-family: var(--gothic);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--white);
  line-height: 1.1;
  text-shadow: 2px 2px 0 rgba(212, 168, 37, 0.06);
  margin: 0;
}

.bv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.bv-photo {
  aspect-ratio: 4 / 3;
  background: var(--void);
  border: 1px solid var(--gold-line);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s, transform 0.4s;
}
.bv-photo:hover {
  border-color: rgba(212, 168, 37, 0.3);
  transform: translateY(-2px);
}
.bv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bv-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--gold);
}

.bv-caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--raw);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-50);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 10px;
  border: 1px solid var(--gold-line);
}

.bv-note {
  font-family: var(--body);
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  color: var(--cream-50);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}
.bv-note em {
  color: var(--cream);
  font-style: italic;
}

/* ─── CTA bijoux ─── */
.bijoux-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 60px auto 0;
  max-width: 700px;
}
.bcta-or {
  font-family: var(--raw);
  font-size: 0.7rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .bijoux-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .bv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bv-grid > .bv-photo:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 6;
  }
}

@media (max-width: 720px) {
  .bv-grid {
    grid-template-columns: 1fr;
  }
  .bv-grid > .bv-photo:last-child {
    aspect-ratio: 4 / 3;
  }
  .bijoux-vitrine {
    padding: 32px 22px;
  }
  .bijoux-cta {
    flex-direction: column;
    gap: 12px;
  }
  .bcta-or {
    margin: 4px 0;
  }
  .bijoux-cta .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}