/* Reset & structure page */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #1a1a1a; line-height: 1.6; }
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1 0 auto; }
.site-footer-bottom { margin-top: auto; }

/* 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; }

/* Compensation sous header */
body { padding-top: 120px; }

/* Grille: no-overlap entre items + réserve basse anti-footer */
.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;
  padding-bottom: var(--offset-safety, 160px);
}

/* Studio intro */
.studio-intro { grid-column: 1 / -1; display: grid; gap: 1rem; padding: 2rem 0; }
.studio-intro h2 { font-family: 'Anton', sans-serif; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.5px; }
.studio-intro p { max-width: 60ch; font-size: 1.05rem; opacity: 0.9; }

/* Items */
.ceramic-piece { position: relative; z-index: 0; cursor: pointer; }

/* Boîte image: overflow hidden pour swap, offset SANS chevauchement vertical */
.ceramic-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Offset horizontal safe et micro-ondulation verticale limitée: injecté par JS en --offset-transform */
  transform: var(--offset-transform, translate(0,0));
  z-index: 0;
}

/* Images et swap */
.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; }

/* Proxy légende: suit le même offset horizontal pour alignement et no-overlap */
.ceramic-cap-proxy { transform: var(--offset-transform-proxy, translate(0,0)); will-change: transform; }

/* Légende au hover */
.ceramic-caption {
  margin-top: 10px;
  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: 3;
}
.ceramic-visual:hover + .ceramic-cap-proxy .ceramic-caption { opacity: 1; pointer-events: auto; }

/* Footer brutaliste enrichi */
.site-footer-bottom { border-top: 2px solid #1a1a1a; padding: 2.5rem 5vw; background: #f5f5f5; color: #111; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem 3rem; margin-bottom: 1.5rem; }
.footer-block h3 { font-family: 'Anton', sans-serif; font-size: 1.25rem; letter-spacing: 0.5px; margin-bottom: 0.75rem; text-transform: uppercase; }
.footer-block p { font-size: 0.95rem; line-height: 1.5; }
.footer-cta p:first-child { font-family: 'Anton', sans-serif; font-size: 1.1rem; text-transform: uppercase; }
.footer-bottom { border-top: 2px solid #1a1a1a; padding-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer-bottom p { font-size: 0.9rem; }
.footer-links { list-style: none; display: flex; gap: 1rem; }
.footer-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 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)); }
  .studio-intro h2 { font-size: clamp(1.6rem, 7vw, 3rem); }
}