/* ═══════════════════════════════════════════════════════════════
   /assets/css/univers.css — Structure par univers
   Menu déroulant · pages univers · cartes univers (accueil)
═══════════════════════════════════════════════════════════════ */

/* ── Menu principal avec sous-menus ───────────────────── */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-item > a .nav-caret {
  width: 9px; height: 9px; opacity: .6;
  transition: transform .3s var(--ease, ease);
}
.nav-item:hover > a .nav-caret,
.nav-item:focus-within > a .nav-caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 270px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(247,238,222,.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line, rgba(46,32,19,.14));
  box-shadow: 0 30px 60px -28px rgba(42,29,18,.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 80;
}
.nav-drop::before { /* pont invisible pour garder le survol */
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-drop-head {
  display: block;
  padding: 6px 12px 10px;
  font-family: 'DM Mono', monospace;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent, #B87415);
  border-bottom: 1px solid var(--line, rgba(46,32,19,.14));
  margin-bottom: 6px;
}
.nav-links .nav-drop a {
  display: flex; flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  opacity: 1;
  font-size: .9rem;
  color: var(--text, #2E2013);
  transition: background .2s ease;
}
.nav-links .nav-drop a::after { display: none; }
.nav-links .nav-drop a small {
  font-family: 'DM Mono', monospace; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .55;
}
.nav-links .nav-drop a:hover { background: rgba(184,116,21,.12); }
.nav-links .nav-drop a.nav-drop-all {
  margin-top: 6px; flex-direction: row; justify-content: space-between;
  font-weight: 600; color: var(--accent-strong, #96590C);
}

/* Menu mobile : groupes */
.nav-mobile nav { gap: 22px; }
.nav-mobile-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nav-mobile-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; max-width: 320px; }
.nav-mobile nav .nav-mobile-sub a {
  font-family: Karla, sans-serif; font-size: .9rem; opacity: .7;
}

/* ── Pages univers : en-tête ─────────────────────────── */
.uv-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  max-width: var(--maxw, 1280px);
  margin: 0 auto;
  padding: clamp(110px, 12vw, 150px) var(--gutter, 48px) clamp(40px, 6vw, 80px);
}
.uv-breadcrumb { margin-bottom: 28px; }
.uv-kicker {
  font-family: 'DM Mono', monospace;
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-strong, #96590C);
  margin-bottom: 14px;
}
.uv-kicker span { font-weight: 700; }
.uv-title {
  font-size: clamp(2.6rem, 5vw + .4rem, 5rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
.uv-intro {
  max-width: 520px;
  font-size: clamp(1rem, .4vw + .9rem, 1.15rem);
  color: var(--text-2, #63482F);
  margin-bottom: 30px;
}
.uv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.uv-chip {
  display: inline-flex; flex-direction: column;
  padding: 10px 18px;
  border-radius: 16px;
  border: 1.5px solid var(--line, rgba(46,32,19,.14));
  background: rgba(247,238,222,.5);
  text-decoration: none;
  font-weight: 600; font-size: .9rem;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.uv-chip small {
  font-family: 'DM Mono', monospace; font-weight: 400;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.uv-chip:hover, .uv-chip.active {
  background: var(--canvas-deep, #2A1D12); color: var(--on-deep, #EFE2CE);
  border-color: var(--canvas-deep, #2A1D12); transform: translateY(-2px);
}

.uv-hero-media {
  position: relative;
  aspect-ratio: 1;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(42,29,18,.6);
}
.uv-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.uv-jewel-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #B87415;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,240,210,.9), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(227,166,63,.35), transparent 60%),
    linear-gradient(140deg, #F3E4CB, #DCC09A);
}
.uv-jewel-art svg { width: 78%; height: auto; filter: drop-shadow(0 6px 10px rgba(150,89,12,.25)); }

@media (max-width: 860px) {
  .uv-hero { grid-template-columns: 1fr; padding-top: 100px; }
  .uv-hero-media { order: -1; aspect-ratio: 4/3; }
}

/* ── Catalogue ──────────────────────────────────────── */
.uv-catalogue { padding-top: clamp(20px, 3vw, 40px); scroll-margin-top: 80px; }
.uv-toolbar {
  position: sticky; top: 76px; z-index: 20;
  margin: 0 calc(var(--gutter, 48px) * -1) 28px;
  padding: 12px var(--gutter, 48px);
  background: rgba(220,197,162,.88);
  backdrop-filter: blur(12px);
}
.uv-tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.uv-tabs::-webkit-scrollbar { display: none; }
.uv-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--line, rgba(46,32,19,.14));
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text, #2E2013);
  transition: background .25s, color .25s, border-color .25s;
}
.uv-tab span {
  font-family: 'DM Mono', monospace; font-size: .66rem;
  padding: 2px 7px; border-radius: 20px; background: rgba(46,32,19,.08);
}
.uv-tab:hover, .uv-tab.active {
  background: var(--canvas-deep, #2A1D12); color: var(--on-deep, #EFE2CE); border-color: var(--canvas-deep, #2A1D12);
}
.uv-tab.active span, .uv-tab:hover span { background: rgba(239,226,206,.16); }

.product-card[hidden], .uv-soon[hidden] { display: none !important; }

.uv-soon {
  text-align: center;
  max-width: 620px;
  margin: 20px auto 10px;
  padding: clamp(36px, 5vw, 60px) 28px;
  border-radius: 28px;
  border: 1px dashed rgba(150,89,12,.35);
  background: rgba(247,238,222,.45);
}
.uv-soon-kicker { color: var(--accent, #B87415); margin-bottom: 12px; }
.uv-soon-title { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); margin-bottom: 14px; }
.uv-soon-text { color: var(--text-2, #63482F); margin: 0 auto 26px; max-width: 460px; }

/* ── Cartes univers (pages univers + accueil) ──────── */
.uv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.uv-card-link {
  position: relative;
  display: block;
  min-height: 300px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: var(--on-deep, #EFE2CE);
  background: linear-gradient(140deg, #F3E4CB, #CFAF82);
  isolation: isolate;
}
.uv-card-link img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease, ease);
  z-index: -1;
}
.uv-card-link:hover img { transform: scale(1.06); }
.uv-card-link--bijoux::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,240,210,.85), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23B87415' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M70 70 C 110 230, 290 230, 330 70'/%3E%3Ccircle cx='200' cy='208' r='16'/%3E%3Ccircle cx='118' cy='300' r='34'/%3E%3Cellipse cx='280' cy='302' rx='56' ry='30'/%3E%3C/svg%3E") center 40% / 62% no-repeat,
    linear-gradient(140deg, #F3E4CB, #D6B88C);
  transition: transform .8s var(--ease, ease);
}
.uv-card-link--bijoux:hover::before { transform: scale(1.05); }
.uv-card-link-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 26px 28px;
  background: linear-gradient(to top, rgba(42,29,18,.78) 0%, rgba(42,29,18,.05) 62%);
}
.uv-card-link-overlay small {
  font-family: 'DM Mono', monospace; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8;
}
.uv-card-link-overlay strong {
  font-family: Prata, Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 2vw + .8rem, 2.3rem); line-height: 1.1;
}
.uv-card-link-overlay em {
  font-style: normal; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85;
}
.uv-card-sub {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.uv-card-sub span {
  font-size: .72rem; padding: 4px 10px; border-radius: 20px;
  background: rgba(239,226,206,.16); border: 1px solid rgba(239,226,206,.25);
}

/* Accueil : grandes cartes univers */
.home-uv .uv-card-link { min-height: clamp(340px, 38vw, 480px); }

/* Changement d'en-tête selon la sous-catégorie */
.uv-kicker, .uv-title, .uv-intro, .uv-hero-media img { transition: opacity .22s ease, transform .22s ease; }
.uv-hero-text.is-swapping .uv-kicker,
.uv-hero-text.is-swapping .uv-title,
.uv-hero-text.is-swapping .uv-intro { opacity: 0; transform: translateY(8px); }
.uv-hero-media img.is-swapping { opacity: 0; transform: scale(1.03); }

/* ── Carrousel des nouveautés (en-tête Bijoux) ─────────── */
/* Photo en haut, fiche produit en dessous : le bijou reste entièrement visible */
.uv-sc { aspect-ratio: auto; width: 100%; max-width: 540px; margin-left: auto; background: #F3E8D6; }
.uv-sc-track {
  display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.uv-sc-track::-webkit-scrollbar { display: none; }
.uv-sc-track:focus-visible { outline: 2px solid var(--accent-strong, #96590C); outline-offset: -4px; }
.uv-sc-slide {
  position: relative; flex: 0 0 100%;
  display: flex; flex-direction: column;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.uv-sc-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.uv-sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.uv-sc-slide:hover .uv-sc-img img { transform: scale(1.04); }

.uv-sc-badges { position: absolute; top: 18px; left: 18px; display: flex; gap: 8px; z-index: 2; }
.uv-sc-badges span {
  padding: 7px 14px; border-radius: 100px;
  background: var(--canvas-deep, #2A1D12); color: #F7EEDE;
  font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}

.uv-sc-info { flex: 1; padding: 18px 22px 20px; background: #F3E8D6; border-top: 1px solid rgba(46,32,19,.08); }
.uv-sc-kicker {
  font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-strong, #96590C); margin-bottom: 6px;
}
.uv-sc-name { font-size: clamp(1.05rem, .5vw + .9rem, 1.25rem); line-height: 1.2; margin-bottom: 8px; }
.uv-sc-name a { text-decoration: none; color: var(--text, #2A1D12); }
.uv-sc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.uv-sc-price strong { font-family: 'DM Mono', monospace; font-size: 1.1rem; color: #8A5209; }
.uv-sc-price s { font-family: 'DM Mono', monospace; font-size: .82rem; color: var(--text-2, #63482F); }
.uv-sc-price em { font-style: normal; font-size: .78rem; font-weight: 600; color: #1F6B3B; }
.uv-sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.uv-sc-actions .btn { padding: 12px 20px; font-size: .74rem; }
.uv-sc-more { font-size: .86rem; font-weight: 600; color: var(--text, #2A1D12); text-decoration: none; }
.uv-sc-more:hover { color: var(--accent-strong, #96590C); }
.uv-sc-note { margin-top: 10px; font-size: .74rem; color: var(--text-2, #63482F); }

/* Flèches + points : en haut à droite de la photo, loin de la fiche */
.uv-sc-nav {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 5px; border-radius: 100px;
  background: rgba(247,238,222,.82);
  box-shadow: 0 8px 18px -10px rgba(42,29,18,.6);
}
.uv-sc-arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--text, #2A1D12);
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  transition: background .25s, color .25s;
}
.uv-sc-arrow:hover { background: var(--canvas-deep, #2A1D12); color: #F7EEDE; }
.uv-sc-dots { display: flex; gap: 6px; }
.uv-sc-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(42,29,18,.25);
  transition: width .3s, background .3s;
}
.uv-sc-dot.active { width: 22px; background: var(--canvas-deep, #2A1D12); }

@media (max-width: 860px) {
  .uv-sc { max-width: none; }
  .uv-sc-info { padding: 14px 16px 16px; }
  .uv-sc-note { display: none; }
  .uv-sc-actions .btn { padding: 11px 16px; font-size: .7rem; }
}