/* ==========================================================================
   La Géode le Showroom — design "minéral" (améthyste)
   ========================================================================== */

:root {
  --bg: #0f0d12;
  --ink: #ece7e1;
  --ink-soft: rgba(236, 231, 225, 0.85);
  --muted: #b7b0a8;
  --faded: #8f877e;
  --accent: #b795e3;
  --accent-soft: #d6c8ee;
  --tint-mineraux: #b795e3;
  --tint-bijoux: #e0a3a8;
  --tint-esoterisme: #85c9ab;
  --tint-deco: #cdb289;
  /* Voile/scrim réutilisable pour garantir la lisibilité du texte sur photo,
     quelle que soit l'image derrière (remplace un fond uni "bandeau" par des
     dégradés doux + text-shadow). */
  --overlay-rgb: 15, 13, 18;
}

@supports (color: oklch(0.75 0.09 300)) {
  :root {
    --accent: oklch(0.75 0.09 300);
    --accent-soft: oklch(0.85 0.06 300);
    --tint-mineraux: oklch(0.75 0.09 300);
    --tint-bijoux: oklch(0.75 0.09 20);
    --tint-esoterisme: oklch(0.75 0.09 160);
    --tint-deco: oklch(0.75 0.09 70);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Transitions de page : fondu-glissé doux entre les pages du site
   (navigateurs compatibles ; les autres naviguent simplement comme avant)
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-sortie 0.4s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vt-entree 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-sortie {
  to { opacity: 0; transform: translateY(-16px) scale(0.992); }
}

@keyframes vt-entree {
  from { opacity: 0; transform: translateY(22px) scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }
::selection { background: rgba(178, 140, 224, 0.35); }

img.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   En-tête fixe
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 5vw;
  background: linear-gradient(rgba(15, 13, 18, 0.7), transparent);
  pointer-events: none;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
}

.brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.brand-sub {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  pointer-events: auto;
}

.site-nav a {
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.site-nav a:hover { color: var(--accent); }

.btn-pill {
  color: #16131a !important;
  background: var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 400;
  text-shadow: none !important;
}

.btn-pill:hover { filter: brightness(1.1); color: #16131a !important; }

@media (max-width: 620px) {
  .site-nav { gap: 18px; font-size: 13px; }
  .site-nav a.nav-link { display: none; }
}

/* --------------------------------------------------------------------------
   Hero plein écran
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 100svh;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Voile radial centré sur le bloc de texte + dégradé vertical : assure un
     contraste suffisant même si la photo est très claire au centre. */
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(var(--overlay-rgb), 0.55), transparent 72%),
    linear-gradient(180deg,
      rgba(var(--overlay-rgb), 0.58) 0%,
      rgba(var(--overlay-rgb), 0.42) 30%,
      rgba(var(--overlay-rgb), 0.5) 58%,
      rgba(var(--overlay-rgb), 0.86) 100%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
}

.kicker {
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 26px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 16px rgba(0, 0, 0, 0.8);
}

.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 1.06;
  margin: 0 0 28px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 6px 36px rgba(0, 0, 0, 0.65);
}

.hero h1 em { color: var(--accent-soft); }

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}

.btn-primary {
  color: #16131a;
  background: var(--accent);
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.btn-primary:hover { filter: brightness(1.12); color: #16131a; }

.btn-ghost {
  color: var(--ink);
  border: 1px solid rgba(236, 231, 225, 0.55);
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  background: rgba(var(--overlay-rgb), 0.3);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(236, 231, 225, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Univers — mosaïque plein écran
   -------------------------------------------------------------------------- */

.univers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  min-height: 100vh;
}

a.univers-panel {
  display: block;
  color: inherit;
}

.univers-panel {
  position: relative;
  min-height: 50vh;
  overflow: hidden;
}

.univers-panel img.cover {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.univers-panel:hover img.cover { transform: scale(1.05); }

.panel-hint { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.univers-panel:hover .panel-hint { transform: translateX(5px); }

/* Voile sombre en bas des panneaux pour la lisibilité des légendes.
   Léger assombrissement dès le haut (fonctionne aussi sur une photo très
   claire) puis renforcement progressif vers le bas, où vit la légende. */
.univers-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--overlay-rgb), 0.1) 0%,
    rgba(var(--overlay-rgb), 0.22) 32%,
    rgba(var(--overlay-rgb), 0.62) 62%,
    rgba(var(--overlay-rgb), 0.92) 100%);
  pointer-events: none;
}

.panel-hint {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

.univers-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 76px 30px 44px;
  /* Second voile dédié, concentré derrière le texte : garantit la lisibilité
     même si le voile du panneau (::after) ne suffit pas sur une photo claire. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--overlay-rgb), 0.72) 55%,
    rgba(var(--overlay-rgb), 0.94) 100%);
  pointer-events: none;
  z-index: 1;
}

.univers-bar {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.univers-panel h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 8px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 3px 20px rgba(0, 0, 0, 0.8);
}

.univers-panel p {
  margin: 0;
  color: rgba(236, 231, 225, 0.97);
  font-size: 15px;
  max-width: 42ch;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   Actualités « En ce moment au showroom »
   -------------------------------------------------------------------------- */

.actus {
  background:
    radial-gradient(ellipse at 75% 15%, rgba(147, 102, 204, 0.10), transparent 55%),
    var(--bg);
  padding: 11vh 6vw;
}

.actus-inner { max-width: 1400px; margin: 0 auto; }

.actus h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 54px);
  margin: 0 0 40px;
}

.actus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 460px));
  gap: 34px;
  justify-content: start;
}

.actu-card img {
  display: block;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(236, 231, 225, 0.12);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s;
}

.actu-card a:hover img {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.actu-body { padding: 16px 4px 0; }

.actu-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.actu-body p {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.actu-fin {
  color: var(--accent) !important;
  font-size: 13.5px !important;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Histoire plein écran
   -------------------------------------------------------------------------- */

.histoire {
  position: relative;
  height: 100vh;
  min-height: 100svh;
}

.histoire-overlay {
  position: absolute;
  inset: 0;
  /* Voile radial centré sur le bloc de texte + dégradé latéral doux :
     lisible quelle que soit la photo, sans bandeau opaque brutal. */
  background:
    radial-gradient(ellipse 55% 65% at 24% 50%, rgba(var(--overlay-rgb), 0.5), transparent 72%),
    linear-gradient(90deg,
      rgba(var(--overlay-rgb), 0.95) 0%,
      rgba(var(--overlay-rgb), 0.8) 46%,
      rgba(var(--overlay-rgb), 0.4) 76%,
      rgba(var(--overlay-rgb), 0.16) 100%);
  pointer-events: none;
}

.histoire-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 6vw;
  pointer-events: none;
}

.histoire-text { max-width: 56ch; }

.kicker-sm {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.histoire .kicker-sm {
  color: var(--accent-soft);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.histoire h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.12;
  margin: 0 0 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 6px 30px rgba(0, 0, 0, 0.5);
}

.histoire p {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 16px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Mobile : le texte occupe presque toute la largeur, il faut donc un voile
   plus uniforme (et non plus seulement latéral) pour rester lisible sur
   n'importe quelle photo. */
@media (max-width: 760px) {
  .histoire-overlay {
    background:
      radial-gradient(ellipse 100% 65% at 50% 42%, rgba(var(--overlay-rgb), 0.55), transparent 78%),
      linear-gradient(180deg,
        rgba(var(--overlay-rgb), 0.88) 0%,
        rgba(var(--overlay-rgb), 0.8) 60%,
        rgba(var(--overlay-rgb), 0.9) 100%);
  }

  .histoire-text { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Infos pratiques + pied de page
   -------------------------------------------------------------------------- */

.infos {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(147, 102, 204, 0.14), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(214, 140, 168, 0.10), transparent 55%),
    var(--bg);
}

.infos-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 14vh 6vw;
}

.infos h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 60px);
  margin: 0 0 14px;
}

.infos-intro {
  color: var(--muted);
  font-size: 16.5px;
  margin: 0 0 56px;
  max-width: 52ch;
}

/* Grand tableau des horaires — pensé pour être lu sans effort */

.horaires-panel {
  border: 1px solid rgba(236, 231, 225, 0.16);
  background: rgba(236, 231, 225, 0.04);
  border-radius: 20px;
  padding: 30px 36px 24px;
  margin: 0 0 54px;
  max-width: 700px;
}

.horaires-titre {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 29px;
  margin: 0 0 16px;
  color: var(--ink);
}

.horaire-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(236, 231, 225, 0.09);
  font-size: 19.5px;
}

.horaire-ligne:last-child { border-bottom: none; }

.horaire-ligne .jour {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.horaire-ligne .heures {
  color: var(--ink-soft);
}

.horaire-ligne .heures em {
  color: var(--accent);
  font-style: normal;
}

.horaire-ligne.ferme .heures {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 17px;
}

.horaire-ligne.aujourdhui .jour {
  color: var(--accent);
  font-weight: 500;
}

.horaire-ligne.aujourdhui .jour::after {
  content: " (aujourd'hui)";
  font-size: 14px;
  color: var(--accent-soft);
}

@media (max-width: 560px) {
  .horaires-panel { padding: 24px 20px 18px; }
  .horaire-ligne { font-size: 17px; }
}

.tel-grand {
  font-size: 24px;
  letter-spacing: 0.03em;
}

.infos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
}

.infos-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
}

.infos-label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.infos-col a.quiet { color: var(--ink-soft); }
.infos-col a.quiet:hover { color: var(--accent); }

.infos-value { color: var(--ink-soft); }

.social-links { display: flex; gap: 16px; }

.site-footer {
  /* Plein-bord garanti même si un futur conteneur parent (main.page, etc.)
     venait à recevoir un max-width ou un padding horizontal. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid rgba(236, 231, 225, 0.08);
  background: rgba(0, 0, 0, 0.28);
  padding: 26px 5vw;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--faded);
}

.site-footer a { color: var(--faded); }
.site-footer a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 24px; }

/* --------------------------------------------------------------------------
   Pages intérieures (histoire, FAQ, mentions légales)
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 25% 10%, rgba(147, 102, 204, 0.12), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(214, 140, 168, 0.08), transparent 55%),
    var(--bg);
}

.page-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 18vh 6vw 8vh;
}

.page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.1;
  margin: 0 0 34px;
}

.page h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 27px;
  margin: 44px 0 12px;
  color: var(--accent-soft);
}

.page p, .page li {
  color: var(--ink-soft);
  font-size: 16.5px;
}

.page .lead {
  font-size: 19px;
  color: var(--ink);
}

.page table {
  border-collapse: collapse;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.page td {
  padding: 6px 22px 6px 0;
  border-bottom: 1px solid rgba(236, 231, 225, 0.08);
}

.page-inner.page-wide { max-width: 1100px; }

/* Pages univers : vignettes des sous-catégories */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 48px;
}

.card {
  background: rgba(236, 231, 225, 0.03);
  border: 1px solid rgba(236, 231, 225, 0.09);
  border-radius: 14px;
  padding: 26px 24px;
  transition: border-color 0.3s, transform 0.3s;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Vitrine : rail de familles + sections d'articles
   -------------------------------------------------------------------------- */

.page-catalogue { max-width: 1500px; }

.familles-rail {
  position: sticky;
  top: 74px;
  z-index: 30;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
  padding: 12px 16px;
  background: rgba(23, 19, 25, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236, 231, 225, 0.12);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  scroll-margin-top: 90px;
}

.fam-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(236, 231, 225, 0.2);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.25s, transform 0.2s;
}

.fam-chip:hover {
  border-color: var(--tint, var(--accent));
  color: var(--ink);
  transform: translateY(-1px);
}

.fam-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tint, var(--accent));
}

.fam-chip .n {
  color: var(--faded);
  font-size: 13px;
}

.fam-chip.active {
  background: var(--tint, var(--accent));
  border-color: transparent;
  color: #16131a;
  font-weight: 500;
}

.fam-chip.active .dot { background: rgba(22, 19, 26, 0.55); }
.fam-chip.active .n { color: rgba(22, 19, 26, 0.6); }

@media (max-width: 620px) {
  .familles-rail { top: 64px; padding: 10px 12px; border-radius: 18px; }
  .fam-chip { font-size: 14px; padding: 9px 14px; }
}

.vitrine .famille:first-child { margin-top: 40px; }

.vitrine-bar {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.vitrine-ligne {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.vitrine-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.vitrine-count {
  color: var(--faded);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.famille { scroll-margin-top: 150px; }

/* Barre de recherche du catalogue */

.search-wrap { margin: 34px 0 6px; }

.search-input {
  width: 100%;
  max-width: 540px;
  font-family: 'Jost', sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(236, 231, 225, 0.16);
  border-radius: 999px;
  padding: 13px 24px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input::placeholder { color: var(--faded); }

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 149, 227, 0.15);
}

.search-compte {
  color: var(--muted);
  font-size: 14.5px;
  margin: 26px 0 0;
}

.search-vide {
  color: var(--muted);
  font-size: 15.5px;
  margin: 30px 0 0;
  max-width: 60ch;
}

.item-contexte {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faded);
  margin-bottom: 5px;
}

/* Familles avec articles (rendues par catalogue.js) */

.famille { margin-top: 64px; }

.famille h2 { margin-top: 0; }

.famille-slogan {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 60ch;
  overflow-wrap: anywhere;
}

.famille h2 { overflow-wrap: anywhere; }

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 26px;
  margin-top: 28px;
}

.item-card {
  position: relative;
  display: block;
  color: inherit;
  background: linear-gradient(180deg, rgba(236, 231, 225, 0.05), rgba(236, 231, 225, 0.02));
  border: 1px solid rgba(236, 231, 225, 0.1);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
}

/* Article épuisé : pastille et photo assombrie */
.epuise-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(15, 13, 18, 0.82);
  border: 1px solid rgba(236, 231, 225, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
}

.article-epuise img.cover,
.article-epuise > img,
.item-card.article-epuise img {
  filter: grayscale(0.5) brightness(0.62);
}

.epuise-txt {
  color: var(--faded);
  font-size: 0.82em;
  letter-spacing: 0.04em;
}

.item-card:hover,
.item-card:focus-visible {
  border-color: var(--tint, var(--accent));
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  outline: none;
}

.item-photo {
  position: relative;
  overflow: hidden;
}

.item-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(236, 231, 225, 0.05);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.item-card:hover .item-photo img { transform: scale(1.07); }

/* Léger voile en bas de la photo pour asseoir la pastille de prix */
.item-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(15, 13, 18, 0.45) 100%);
  pointer-events: none;
}

.item-noimg {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: rgba(236, 231, 225, 0.25);
  background: radial-gradient(ellipse at 50% 40%, rgba(147, 102, 204, 0.12), transparent 70%);
}

.prix-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
  background: rgba(15, 13, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(236, 231, 225, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
  letter-spacing: 0.02em;
}

/* Page article */

a.item-card { display: block; color: inherit; }

.retour {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14.5px;
  letter-spacing: 0.04em;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

@media (max-width: 820px) {
  .article-layout { grid-template-columns: 1fr; gap: 30px; }
}

.article-photo img {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(236, 231, 225, 0.1);
}

.article-epuise .article-photo img { filter: grayscale(0.5) brightness(0.62); }

.article-photo .item-noimg {
  border-radius: 18px;
  border: 1px solid rgba(236, 231, 225, 0.1);
  font-size: 44px;
}

.article-info h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  margin: 6px 0 10px;
  overflow-wrap: anywhere;
}

.article-prix {
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 18px;
}

.article-desc {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.article-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.article-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--faded);
}

.item-body { padding: 16px 18px 18px; }

.item-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 21px;
  margin: 0 0 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.item-prix {
  color: var(--accent);
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 6px;
}

.item-body p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cta-band {
  margin-top: 9vh;
  padding: 44px 40px;
  border: 1px solid rgba(236, 231, 225, 0.09);
  border-radius: 18px;
  background: radial-gradient(ellipse at 20% 0%, rgba(147, 102, 204, 0.12), transparent 60%);
}

.cta-band h2 { margin-top: 0; }

.cta-band .hero-ctas {
  justify-content: flex-start;
  margin-top: 26px;
}

.autres-univers {
  margin-top: 34px;
  font-size: 14.5px;
  color: var(--faded);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Animation d'apparition au scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}