/* ─────────────────────────────────────────────────────
   catalog.css — Collection, grille produits, cartes
───────────────────────────────────────────────────── */

/* ── EN-TÊTE COLLECTION ── */
.coll-header {
  padding: 80px 48px 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.coll-overline { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--go); margin-bottom: 10px; }
.coll-title    { font-family: 'Cormorant', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1; color: var(--k); }
.coll-title em { font-style: italic; }

/* Onglets catégories */
.coll-tabs { display: flex; gap: 2px; }
.ctab {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 20px; background: none; border: 1px solid var(--br3);
  color: var(--br2); cursor: pointer; font-family: 'Raleway', sans-serif;
  font-weight: 400; transition: all .25s;
}
.ctab:hover  { color: var(--k); border-color: var(--br); }
.ctab.active { background: var(--k); color: var(--w); border-color: var(--k); }

/* ── GRILLE ── */
.coll-grid {
  padding: 24px 48px 72px;
  display: grid; gap: 5px;
}
.coll-grid.layout-a,
.coll-grid.layout-b,
.coll-grid.layout-c,
.coll-grid.layout-d { grid-template-columns: repeat(3, 1fr); }

/* ── CARTE PRODUIT ── */
.prd { position: relative; overflow: hidden; background: var(--w2); cursor: pointer; }

.prd-img { width: 100%; overflow: hidden; background: var(--w3); position: relative; aspect-ratio: 4/5; }

/* Vignette subtile */
.prd-img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(18,15,9,.18) 100%);
  pointer-events: none; z-index: 1; transition: opacity .6s ease;
}
.prd:hover .prd-img::after { opacity: .5; }

.prd-img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  transition: transform 1s cubic-bezier(.25,.46,.45,.94), filter .7s ease;
  filter: contrast(1.06) saturate(1.14) brightness(1.03) sepia(0.06);
}
.prd:hover .prd-img img { transform: scale(1.06); filter: contrast(1.1) saturate(1.22) brightness(1.06) sepia(0.04); }

/* Cadrage optimal par catégorie */
#cat-bagues    .prd-img img { object-position: center center; }
#cat-colliers  .prd-img img,
#cat-pendentifs .prd-img img { object-position: center 22%; }
#cat-bracelets .prd-img img { object-position: center 38%; }

/* Info carte */
.prd-info { padding: 18px 22px 24px; }
.prd-ref  { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--br3); margin-bottom: 4px; font-weight: 400; }
.prd-cat  { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--go); margin-bottom: 5px; }
.prd-name {
  font-family: 'Cormorant', serif;
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; color: var(--k);
  margin-bottom: 6px; line-height: 1.1;
}
.prd-desc { font-size: 12.5px; color: var(--br2); line-height: 1.65; margin-bottom: 14px; }
.prd-link { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--k); display: inline-flex; align-items: center; gap: 8px; transition: gap .25s; }
.prd-link::after { content: '→'; }
.prd:hover .prd-link { gap: 14px; }

/* ── SÉPARATEUR CATALOGUE → CONSEILS ── */
.coll-end-strip {
  background: var(--k); padding: 20px 48px;
  display: flex; align-items: center; gap: 20px;
}
.coll-end-strip::before,
.coll-end-strip::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.coll-end-strip span   { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(250,250,247,.25); white-space: nowrap; }