/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #1a1a1a; line-height: 1.6; padding-top: 120px; }

/* Header fixe brutaliste */
.site-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 2rem; z-index: 1000; pointer-events: none; }
.site-title, .site-nav a { pointer-events: auto; }
.site-title { font-family: 'Anton', sans-serif; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; color: #1a1a1a; line-height: 1; }
.site-nav ul { list-style: none; display: flex; gap: 1.5rem; }
.site-nav a { text-decoration: none; color: #1a1a1a; font-weight: 700; font-size: 1rem; position: relative; padding-bottom: 4px; }
.site-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #1a1a1a; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease-out; }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Container Grid (agrandit automatiquement, trous autorisés) */
.main-content { width: 100%; }
.ceramics-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 8rem auto;
  display: grid;
  gap: 6rem 3rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
  position: relative;
  isolation: isolate;
}

/* Items */
.ceramic-piece {
  position: relative;               /* permet z-index par item */
  z-index: 0;                       /* surchargé dynamiquement au hover via JS */
  cursor: pointer;
}

/* Visuel (images droites, offsets appliqués ici) */
.ceramic-visual {
  position: relative;
  width: 100%;
  overflow: hidden;                 /* bords nets */
  transform: var(--offset-transform, translate(0,0));
  z-index: 0;
}

/* Swap direct au hover (pas d’overlay sur l’image) */
.ceramic-image { width: 100%; height: auto; display: block; }
.ceramic-visual .view-1 { position: relative; z-index: 1; }
.ceramic-visual .view-2 { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 60ms linear, visibility 0ms linear 60ms; }
.ceramic-visual:hover .view-2 { opacity: 1; visibility: visible; transition: opacity 60ms linear, visibility 0ms; }

/* Légende intégrée dans .ceramic-visual: apparaît sous l’image, visible uniquement au hover du visuel */
.ceramic-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.98rem;
  color: #1a1a1a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
  position: relative;               /* z-index pour passer au-dessus du visuel de la même pièce */
  z-index: 3;                       /* au-dessus de .view-2 */
  margin-top: 10px;                 /* espace sous l’image à l’intérieur du même bloc */
}

/* Affichage de la légende au hover de l’image (ou du bloc visuel) */
.ceramic-visual:hover .ceramic-caption {
  opacity: 1;
  pointer-events: auto;
}

/* Typo du texte produit */
.piece-name { font-weight: 700; }
.piece-price { font-weight: 700; }

/* Footer */
.site-footer-bottom { text-align: center; padding: 2rem; background: #f0f0f0; font-size: 0.9rem; }

/* Responsive */
@media (max-width: 768px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
  body { padding-top: 150px; }
  .site-title { font-size: 2rem; }
  .ceramics-container { gap: 5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}