/* ============================================================
   TOKYO VAULT — Design System
   Palette et typographie alignées sur la DA existante du site.
   ============================================================ */

:root{
  --bg:        #0A0908;
  --bg-2:      #12100C;
  --bg-3:      #171410;
  --gold:      #C6A050;
  --gold-dim:  #8A6E35;
  --champagne: #E3CC96;
  --ivory:     #F4EEE1;
  --muted:     #9C937F;
  --line:      #2B2620;

  --serif: "Cormorant Garamond", "Noto Serif JP", Georgia, serif;
  --sans:  "Jost", "Noto Sans JP", system-ui, sans-serif;

  --maxw: 1180px;
  --pad:  clamp(20px, 4vw, 48px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typographie ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.2; }
h1{ font-size:clamp(34px, 5vw, 56px); letter-spacing:.01em; }
h2{ font-size:clamp(26px, 3.5vw, 38px); }
h3{ font-size:clamp(19px, 2.2vw, 23px); color:var(--champagne); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  color:var(--gold);
  font-size:12px; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::after{ content:""; height:1px; width:56px; background:var(--gold); opacity:.7; }

.lead{ color:var(--muted); font-size:clamp(16px,1.6vw,18px); max-width:62ch; }

/* ---------- Ornements ---------- */
.diamond{ display:inline-block; width:9px; height:9px; background:var(--gold);
  clip-path:polygon(50% 0, 78% 22%, 100% 50%, 78% 78%, 50% 100%, 22% 78%, 0 50%, 22% 22%);
  transform:rotate(0deg); }
.sep{ display:flex; align-items:center; justify-content:center; gap:18px; margin:34px 0; }
.sep::before,.sep::after{ content:""; height:1px; width:min(150px,26vw); background:var(--gold); opacity:.75; }

.frame{ border:1px solid var(--gold); outline:1px solid var(--gold-dim); outline-offset:-9px; }

/* ---------- Structure ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ padding-block:clamp(56px, 9vw, 110px); position:relative; }

/* Filigrane montre (SVG inline via .watermark) */
.watermark{
  position:absolute; inset:auto -6% -8% auto;
  width:min(560px, 62vw); opacity:.06; pointer-events:none;
  color:var(--gold);
}

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,9,8,.88); /* fallback */
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ font-family:var(--serif); font-size:22px; color:var(--ivory); text-decoration:none; letter-spacing:.03em; }
.brand small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; }
.nav-links{ display:flex; gap:28px; list-style:none; }
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  transition:color .25s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--champagne); }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px;
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
  border:1px solid var(--gold);
}
.btn-solid{ background:var(--gold); color:#141109; }
.btn-solid:hover{ background:var(--champagne); border-color:var(--champagne); }
.btn-ghost{ background:transparent; color:var(--champagne); }
.btn-ghost:hover{ background:rgba(198,160,80,.1); }
.btn:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; }

/* ---------- Cartes ---------- */
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  outline:1px solid var(--gold-dim);
  outline-offset:-8px;
  padding:34px 30px;
}

/* ---------- Stats (compteurs corrigés) ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg-2); padding:34px 26px; text-align:center; }
.stat-num{ font-family:var(--serif); font-size:44px; color:var(--champagne); font-weight:600; }
.stat-label{ color:var(--muted); font-size:12px; letter-spacing:.22em; text-transform:uppercase; margin-top:6px; }

/* ---------- Tableaux (specs, douane) ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{
  text-align:left; padding:15px 18px;
  border-bottom:1px solid var(--line);
  font-size:15px; vertical-align:top;
}
.spec-table th{
  color:var(--gold); font-weight:400; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; width:34%;
}
.spec-table td{ color:var(--ivory); }
.spec-table td em{ color:var(--muted); font-style:normal; }

/* ---------- Fiche produit ---------- */
.product{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media (max-width:900px){ .product{ grid-template-columns:1fr; } }

.gallery-main{
  aspect-ratio:1/1; width:100%; object-fit:cover;
  border:1px solid var(--line); outline:1px solid var(--gold-dim); outline-offset:-8px;
  background:var(--bg-2);
}
.gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.gallery-thumbs button{
  aspect-ratio:1/1; padding:0; border:1px solid var(--line); background:var(--bg-2);
  cursor:pointer; transition:border-color .2s; overflow:hidden;
}
.gallery-thumbs button.active, .gallery-thumbs button:hover{ border-color:var(--gold); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.price{ font-family:var(--serif); font-size:clamp(28px,3vw,36px); color:var(--champagne); }
.price small{ display:block; font-family:var(--sans); font-size:12px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; margin-top:4px; }

.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:9px 16px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.badge .diamond{ width:7px; height:7px; }

/* ---------- Timeline / process ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.step{ position:relative; }
.step .kanji{ font-family:var(--serif); font-size:40px; color:var(--gold); }
.step h3{ margin:10px 0 8px; }
.step p{ color:var(--muted); font-size:15px; }

/* ---------- Certificat ---------- */
.certificate{
  background:var(--bg-2);
  border:1px solid var(--gold);
  outline:1px solid var(--gold-dim); outline-offset:-10px;
  padding:clamp(28px,4vw,52px);
  max-width:640px; margin-inline:auto; text-align:center;
}
.certificate .cert-title{ font-family:var(--serif); font-size:26px; color:var(--champagne); letter-spacing:.06em; }
.certificate .cert-sub{ color:var(--gold); font-size:11px; letter-spacing:.34em; text-transform:uppercase; margin-top:6px; }
.certificate dl{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; text-align:left; margin:30px 0; }
.certificate dt{ color:var(--muted); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.certificate dd{ color:var(--ivory); font-size:15px; margin-top:3px; }
.cert-seal{
  width:74px; height:74px; margin:8px auto 0; border-radius:50%;
  border:1px solid var(--gold); display:grid; place-items:center;
  font-family:var(--serif); color:var(--gold); font-size:22px;
}

/* ---------- Accordéon FAQ ---------- */
details{ border-bottom:1px solid var(--line); }
details summary{
  cursor:pointer; list-style:none; padding:20px 0;
  font-family:var(--serif); font-size:19px; color:var(--ivory);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:"+"; color:var(--gold); font-size:22px; transition:transform .25s; }
details[open] summary::after{ transform:rotate(45deg); }
details .a{ padding:0 0 22px; color:var(--muted); max-width:70ch; }

/* ---------- Reveal au scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:44px var(--pad);
  text-align:center; color:var(--muted); font-size:13px;
}
footer .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-bottom:18px; }
footer a{ color:var(--muted); text-decoration:none; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
footer a:hover{ color:var(--champagne); }

/* ---------- Accessibilité ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#141109; padding:12px 22px;
  font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus{ left:0; }
details summary:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; }

/* ---------- Accueil ---------- */
.lang-switch{ display:flex; gap:2px; border:1px solid var(--line); }
.lang-switch button{
  background:transparent; border:0; color:var(--muted);
  font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  padding:8px 12px; cursor:pointer; transition:color .2s, background .2s;
}
.lang-switch button[aria-pressed="true"]{ background:var(--gold); color:#141109; }
.lang-switch button:not([aria-pressed="true"]):hover{ color:var(--champagne); }

.hero{ min-height:86vh; display:grid; align-items:center; overflow:hidden; }
.hero h1{ max-width:14ch; }
.hero .lead{ margin:26px 0 38px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

.products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.product-card{ text-decoration:none; color:inherit; display:block; transition:transform .3s; }
.product-card:hover{ transform:translateY(-4px); }
.product-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border:1px solid var(--line); outline:1px solid var(--gold-dim); outline-offset:-8px;
}
.product-card h3{ margin:18px 0 4px; color:var(--ivory); }
.product-card .ref{ color:var(--muted); font-size:13px; letter-spacing:.1em; }
.product-card .p{ font-family:var(--serif); font-size:22px; color:var(--champagne); margin-top:10px; }
.product-card .p small{ display:block; font-family:var(--sans); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.section-alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* ---------- Entrée du hero (au chargement) ---------- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero .eyebrow, .hero h1, .hero .lead, .hero .hero-actions{
  opacity:0; animation:riseIn .9s cubic-bezier(.22,.8,.3,1) forwards;
}
.hero .eyebrow{ animation-delay:.1s; }
.hero h1{ animation-delay:.28s; }
.hero .lead{ animation-delay:.5s; }
.hero .hero-actions{ animation-delay:.7s; }

/* ---------- Filigrane montre : rotation lente + parallaxe ---------- */
@keyframes slowSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.hero .watermark{ animation:slowSpin 240s linear infinite; will-change:transform; }
.watermark{ transition:translate .1s linear; }

/* ---------- Marquee marques (bande défilante) ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:22px; background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:0; width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{
  font-family:var(--serif); font-size:19px; color:var(--muted);
  letter-spacing:.14em; text-transform:uppercase;
  padding-inline:34px; display:flex; align-items:center; gap:34px; white-space:nowrap;
}
.marquee-track span::after{
  content:""; width:8px; height:8px; background:var(--gold);
  clip-path:polygon(50% 0, 78% 22%, 100% 50%, 78% 78%, 50% 100%, 22% 78%, 0 50%, 22% 22%);
}

/* ---------- Cartes produit : zoom image + filet or ---------- */
.product-card{ position:relative; }
.product-card .imgwrap{ overflow:hidden; border:1px solid var(--line); outline:1px solid var(--gold-dim); outline-offset:-8px; }
.product-card .imgwrap img{ border:0; outline:0; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .imgwrap img{ transform:scale(1.06); }
.product-card h3{ position:relative; display:inline-block; }
.product-card h3::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.product-card:hover h3::after{ transform:scaleX(1); }

/* ---------- Boutons : balayage lumineux ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,246,222,.35) 50%, transparent 70%);
  transform:translateX(-110%);
}
.btn:hover::before{ transition:transform .8s ease; transform:translateX(110%); }

/* ---------- Reveal : cascade ---------- */
.reveal{ transition-delay:var(--d, 0s); }

/* ---------- Nav : ombre au scroll ---------- */
.nav.scrolled{ box-shadow:0 8px 30px rgba(0,0,0,.55); border-bottom-color:var(--gold-dim); }

@media (prefers-reduced-motion: reduce){
  .hero .eyebrow,.hero h1,.hero .lead,.hero .hero-actions{ animation:none; opacity:1; }
  .hero .watermark{ animation:none; }
  .marquee-track{ animation:none; }
  .product-card .imgwrap img{ transition:none; }
}