/* ══════════════════════════════════════════════════════════════
   THURNHERR ART MARQUETRY — Luxury redesign
   Inspired by haute couture maisons (Hermès, Cartier, LV)
   Applies to index.html only. carrd-source.html untouched.
   ══════════════════════════════════════════════════════════════ */

.shop-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f0e9dc !important;
  color: #f0e9dc !important;
}

/* ── Design tokens ── */
:root {
  --lux-black: #0a0a0a;
  --lux-deep: #111110;
  --lux-surface: #171615;
  --lux-gold: #c9a96e;
  --lux-gold-light: #ddc99a;
  --lux-cream: #f0e9dc;
  --lux-muted: rgba(240, 233, 220, 0.55);
  --lux-line: rgba(201, 169, 110, 0.18);
  --lux-serif: "DM Serif Text", "Playfair Display", Georgia, serif;
  --lux-display: Cinzel, "Cormorant Garamond", Georgia, serif;
  --lux-sans: Alata, "Helvetica Neue", Arial, sans-serif;
  --lux-speed: 0.45s;
  --lux-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global reset & base ── */
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 110, 0.3) var(--lux-black);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--lux-black); }
::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.3); }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 110, 0.55); }

::selection {
  background: rgba(201, 169, 110, 0.25);
  color: #fff;
}

body {
  background-color: var(--lux-black) !important;
}


/* smooth transitions on all links */
a {
  transition: color var(--lux-speed) var(--lux-ease),
              opacity var(--lux-speed) var(--lux-ease) !important;
}

/* ══════════════════════════════════════
   HEADER — Floating glass bar
   ══════════════════════════════════════ */
#header {
  background: rgba(10, 10, 10, 0.55) !important;
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border-bottom: 1px solid var(--lux-line) !important;
  position: sticky !important;
  top: 0;
  transition: background 0.6s ease, box-shadow 0.6s ease;
  z-index: 1000 !important;
}

#header #container04 > .wrapper > .inner {
  align-items: center !important;
  display: grid !important;
  gap: clamp(0.8rem, 1.5vw, 1.5rem) !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0.2rem clamp(1.2rem, 4vw, 4.5rem) !important;
}

/* Logo */
#header #gallery02 .inner {
  max-width: 3.8rem !important;
  transition: transform 0.5s var(--lux-ease), filter 0.5s ease;
}

#header #gallery02 .inner:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

/* Brand name — gold gradient */
#header #links03 {
  justify-content: flex-start !important;
  min-width: 0 !important;
  text-align: left !important;
}

#header #links03 a {
  background: linear-gradient(135deg, var(--lux-cream) 0%, var(--lux-gold) 45%, var(--lux-gold-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block !important;
  font-family: var(--lux-display) !important;
  font-size: clamp(1rem, 2vw, 2.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: clamp(0.15rem, 0.6vw, 0.35rem) !important;
  line-height: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Nav links — minimal uppercase */
#header #links01 {
  align-items: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(1rem, 1.6vw, 2rem) !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

#header #links01 li {
  margin: 0 !important;
}

#header #links01 a {
  color: rgba(240,233,220,0.65) !important;
  font-family: var(--lux-sans) !important;
  font-size: clamp(0.62rem, 0.7vw, 0.78rem) !important;
  letter-spacing: 0.14rem !important;
  line-height: 1 !important;
  padding: 0.5rem 0 !important;
  position: relative;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: color 0.4s ease !important;
  white-space: nowrap !important;
}

#header #links01 a:hover {
  color: var(--lux-gold) !important;
}

#header #links01 a::after {
  background: var(--lux-gold);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--lux-ease);
  width: 100%;
}

#header #links01 a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ══════════════════════════════════════
   HERO — Full-viewport cinematic
   ══════════════════════════════════════ */
#home-section {
  position: relative !important;
}

#home-section #container03 {
  background: var(--lux-black) !important;
}

#home-section #container03 > .wrapper {
  min-height: clamp(36rem, 94vh, 64rem) !important;
}

#home-section #image36,
#home-section #image36 .frame {
  min-height: clamp(36rem, 94vh, 64rem) !important;
}

#home-section #image36 img {
  filter: contrast(1.08) saturate(0.92) brightness(0.82);
  min-height: clamp(36rem, 94vh, 64rem) !important;
  object-fit: cover !important;
  transition: filter 1.2s ease !important;
}

/* Cinematic vignette + bottom fade */
#home-section #image36 .frame::after {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(10, 10, 10, 0.6) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, transparent 20%, transparent 55%, rgba(10, 10, 10, 0.95) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* ── Hero tagline — italic serif statement ── */
.hero-sales-line {
  align-items: center;
  background: var(--lux-black);
  border-bottom: 1px solid var(--lux-line);
  border-top: 1px solid var(--lux-line);
  color: var(--lux-cream);
  display: flex;
  font-family: var(--lux-serif);
  font-size: clamp(0.95rem, 1.3vw, 1.4rem);
  font-style: italic;
  justify-content: center;
  letter-spacing: 0.06rem;
  line-height: 1.5;
  margin: 0;
  padding: clamp(1.6rem, 2.8vw, 2.4rem) clamp(1.5rem, 5vw, 5rem);
  position: relative;
  text-align: center;
  z-index: 6;
}

.hero-sales-line span {
  display: block;
  max-width: 900px;
  white-space: nowrap;
}

/* Gold ornamental line before & after tagline */
.hero-sales-line::before,
.hero-sales-line::after {
  background: linear-gradient(90deg, transparent, var(--lux-gold), transparent);
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: min(60%, 500px);
}

.hero-sales-line::before { top: -1px; }
.hero-sales-line::after { bottom: -1px; }

/* ══════════════════════════════════════
   BIO / ABOUT — Elegant two-column
   ══════════════════════════════════════ */
#home-section #container02 {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(201, 169, 110, 0.03), transparent 60%),
    linear-gradient(180deg, var(--lux-black) 0%, var(--lux-deep) 100%) !important;
}

#home-section #container02 > .wrapper > .inner {
  gap: clamp(2.5rem, 6vw, 6rem) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 5rem) !important;
}

/* Artist name — large gold gradient display */
#home-section #text04 {
  background: linear-gradient(135deg, var(--lux-cream) 0%, var(--lux-gold) 40%, var(--lux-gold-light) 70%, var(--lux-cream) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--lux-display) !important;
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.15rem !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

#home-section #text02 {
  max-width: 38rem !important;
}

#home-section #text02 .p {
  color: var(--lux-muted) !important;
  display: block !important;
  font-family: var(--lux-sans) !important;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem) !important;
  line-height: 1.95 !important;
  margin-bottom: 1.2rem !important;
}

/* ══════════════════════════════════════
   GALLERY OVERVIEW — Refined grid
   ══════════════════════════════════════ */

/* Gallery section title */
#galleryall-section #links04 a {
  background: linear-gradient(135deg, var(--lux-cream), var(--lux-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--lux-display) !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  letter-spacing: 0.2rem !important;
  text-transform: uppercase !important;
}

/* Category filter links — refined pills */
#galleryall-section #links05 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  padding: 0.5rem 0 !important;
}

#galleryall-section #links05 a {
  border: 1px solid rgba(201, 169, 110, 0.2) !important;
  color: var(--lux-muted) !important;
  display: inline-block !important;
  font-family: var(--lux-sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12rem !important;
  padding: 0.55rem 1.2rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: all 0.4s var(--lux-ease) !important;
}

#galleryall-section #links05 a:hover {
  background: rgba(201, 169, 110, 0.08) !important;
  border-color: var(--lux-gold) !important;
  color: var(--lux-gold) !important;
}

/* ── Gallery thumbnails — luxury hover ── */
[id^="gallery"]:not(#gallery02) ul li .thumbnail {
  overflow: hidden !important;
  position: relative !important;
}

[id^="gallery"]:not(#gallery02) ul li img {
  transition: transform 0.7s var(--lux-ease), filter 0.7s ease !important;
}

[id^="gallery"]:not(#gallery02) ul li .thumbnail:hover {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(201, 169, 110, 0.15) !important;
  transform: scale(1.03) !important;
  z-index: 2 !important;
}

[id^="gallery"]:not(#gallery02) ul li .thumbnail:hover img {
  filter: contrast(1.06) saturate(1.1) brightness(1.04) !important;
  transform: scale(1.06) !important;
}

/* ══════════════════════════════════════
   ARTWORK DETAIL SECTIONS
   ══════════════════════════════════════ */
.artwork-detail > .wrapper > .inner {
  align-items: center !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem) !important;
}

.artwork-detail .image .frame,
.artwork-detail .image img {
  display: block !important;
  width: 100% !important;
}

.artwork-detail .image .frame {
  overflow: hidden !important;
}

.artwork-detail .image img {
  background: var(--lux-black) !important;
  max-height: 78vh !important;
  object-fit: contain !important;
  transition: transform 1s var(--lux-ease) !important;
}

.artwork-detail .image:hover img {
  transform: scale(1.02) !important;
}

/* Detail titles */
#text-jaguar-title,
.generated-detail-title {
  color: var(--lux-cream) !important;
  font-family: var(--lux-display) !important;
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.1rem !important;
  line-height: 1.05 !important;
  margin-bottom: 1.2rem !important;
  text-transform: uppercase !important;
}

/* Detail dividers — gold gradient line */
#divider-jaguar,
.generated-detail-divider {
  border: 0 !important;
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, var(--lux-gold), transparent) 1 !important;
  margin: 1.2rem 0 !important;
  width: 5rem !important;
}

/* Detail descriptions */
#text-jaguar-desc,
#text-jaguar-note,
.generated-detail-desc {
  color: var(--lux-muted) !important;
  font-family: var(--lux-sans) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  line-height: 1.9 !important;
  text-align: left !important;
}

/* ── Jaguar detail ── */
#jaguar-section #container27 {
  background: var(--lux-black) !important;
  background-image: none !important;
  min-height: var(--viewport-height) !important;
}

#jaguar-section #container27 > .wrapper > .inner {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
}

#jaguar-section #container27 > .wrapper > .inner > div {
  margin: 0 !important;
  padding: clamp(1.5rem, 4vw, 4rem) !important;
  width: 50% !important;
}

#jaguar-section #container27 > .wrapper > .inner > div:first-child {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
}

#jaguar-section #image-jaguar-detail { width: 100% !important; }

#jaguar-section #image-jaguar-detail .frame {
  align-items: center !important;
  background: var(--lux-black) !important;
  display: flex !important;
  justify-content: center !important;
  max-width: min(46rem, 44vw) !important;
  overflow: hidden !important;
  width: 100% !important;
}

#jaguar-section #image-jaguar-detail img {
  background: var(--lux-black) !important;
  display: block !important;
  height: auto !important;
  max-height: 82vh !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 0.9s var(--lux-ease) !important;
  width: 100% !important;
}

#jaguar-section #image-jaguar-detail .frame:hover img {
  transform: scale(1.025) !important;
}

#jaguar-section #text-jaguar-title,
#jaguar-section #divider-jaguar,
#jaguar-section #text-jaguar-desc {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#jaguar-section #text-jaguar-desc { max-width: 34rem !important; }

/* ── Echiquier Monaco detail ── */
#echiquiermonaco-section #container-echiquiermonaco {
  background: var(--lux-black) !important;
  background-image: none !important;
  min-height: var(--viewport-height) !important;
}

#echiquiermonaco-section #container-echiquiermonaco > .wrapper > .inner {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
}

#echiquiermonaco-section #container-echiquiermonaco > .wrapper > .inner > div {
  margin: 0 !important;
  padding: clamp(1.5rem, 4vw, 4rem) !important;
  width: 50% !important;
}

#echiquiermonaco-section #container-echiquiermonaco > .wrapper > .inner > div:first-child {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
}

#echiquiermonaco-section #image-echiquiermonaco-detail { width: 100% !important; }

#echiquiermonaco-section #image-echiquiermonaco-detail .frame {
  align-items: center !important;
  background: var(--lux-black) !important;
  display: flex !important;
  justify-content: center !important;
  max-width: min(44rem, 42vw) !important;
  overflow: hidden !important;
  width: 100% !important;
}

#echiquiermonaco-section #image-echiquiermonaco-detail img {
  background: var(--lux-black) !important;
  display: block !important;
  height: auto !important;
  max-height: 82vh !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 0.9s var(--lux-ease) !important;
  width: 100% !important;
}

#echiquiermonaco-section #image-echiquiermonaco-detail .frame:hover img {
  transform: scale(1.025) !important;
}

#echiquiermonaco-section #text-echiquiermonaco-title,
#echiquiermonaco-section #divider-echiquiermonaco,
#echiquiermonaco-section #text-echiquiermonaco-desc {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#echiquiermonaco-section #text-echiquiermonaco-desc { max-width: 34rem !important; }

/* ── Leclerc detail ── */
#leclerc-section #container91 {
  background: var(--lux-black) !important;
  background-image: none !important;
  min-height: var(--viewport-height) !important;
}

#leclerc-section #container91 > .wrapper > .inner {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
}

#leclerc-section #container91 > .wrapper > .inner > div {
  margin: 0 !important;
  padding: clamp(1.5rem, 4vw, 4rem) !important;
  width: 50% !important;
}

#leclerc-section #container91 > .wrapper > .inner > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#leclerc-section #image29 { width: 100% !important; }

#leclerc-section #image29 .frame {
  background: var(--lux-black) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  max-width: min(46rem, 44vw) !important;
  overflow: hidden !important;
  width: 100% !important;
}

#leclerc-section #image29 img {
  background: var(--lux-black) !important;
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 0.9s var(--lux-ease) !important;
  width: 100% !important;
}

#leclerc-section #image29 .frame:hover img {
  transform: scale(1.025) !important;
}

#leclerc-section #text56,
#leclerc-section #text57,
#leclerc-section #text-leclerc-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#leclerc-section #text-leclerc-desc {
  color: var(--lux-muted) !important;
  font-family: var(--lux-sans) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  line-height: 1.8 !important;
  max-width: 34rem !important;
}

/* ══════════════════════════════════════
   SLIDESHOWS — Refined
   ══════════════════════════════════════ */
.slideshow .content {
  border: 1px solid rgba(201, 169, 110, 0.06);
  transition: border-color 0.6s ease;
}

.slideshow .content:hover {
  border-color: rgba(201, 169, 110, 0.15);
}

.slideshow .nav {
  opacity: 0;
  transition: opacity 0.5s ease !important;
}

.slideshow:hover .nav {
  opacity: 0.8;
}

/* ══════════════════════════════════════
   EXPO SECTION
   ══════════════════════════════════════ */
#expo-section #text70 {
  background: linear-gradient(135deg, var(--lux-cream), var(--lux-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--lux-display) !important;
  letter-spacing: 0.15rem !important;
  text-transform: uppercase !important;
}

#expo-section #text72 {
  font-family: var(--lux-serif) !important;
  color: var(--lux-cream) !important;
}

/* ══════════════════════════════════════
   CONTACT SECTION — Refined form
   ══════════════════════════════════════ */
#contact-section #text01 {
  background: linear-gradient(135deg, var(--lux-cream), var(--lux-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--lux-display) !important;
  letter-spacing: 0.15rem !important;
  text-transform: uppercase !important;
}

#contact-section #text06 {
  color: var(--lux-muted) !important;
  font-family: var(--lux-sans) !important;
  line-height: 1.8 !important;
}

#contact-section #form01 input,
#contact-section #form01 textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 169, 110, 0.15) !important;
  border-radius: 0 !important;
  color: var(--lux-cream) !important;
  font-family: var(--lux-sans) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

#contact-section #form01 input:focus,
#contact-section #form01 textarea:focus {
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.08) !important;
  outline: none !important;
}

#contact-section #form01 button[type="submit"] {
  background: transparent !important;
  border: 1px solid var(--lux-gold) !important;
  border-radius: 0 !important;
  color: var(--lux-gold) !important;
  font-family: var(--lux-sans) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18rem !important;
  padding: 0.9rem 2.5rem !important;
  text-transform: uppercase !important;
  transition: all 0.4s var(--lux-ease) !important;
}

#contact-section #form01 button[type="submit"]:hover {
  background: var(--lux-gold) !important;
  color: var(--lux-black) !important;
}

/* ══════════════════════════════════════
   FOOTER — Minimal luxe
   ══════════════════════════════════════ */
#footer {
  background: var(--lux-black) !important;
  border-top: 1px solid var(--lux-line) !important;
}

#footer #links02 a {
  color: var(--lux-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: color 0.35s ease !important;
}

#footer #links02 a:hover {
  color: var(--lux-gold) !important;
}

#footer #icons01 a {
  color: var(--lux-muted) !important;
  transition: color 0.35s ease, transform 0.35s ease !important;
}

#footer #icons01 a:hover {
  color: var(--lux-gold) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   GLOBAL — All section headings
   ══════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--lux-display) !important;
}

/* All dividers */
hr {
  border-color: var(--lux-line) !important;
  opacity: 0.6;
}

/* All containers — subtle radial ambient */
[id^="container"]:not(#container04) {
  background-color: var(--lux-black) !important;
}

/* Section transitions */
section {
  transition: opacity 0.6s ease !important;
}

/* Social icons in contact */
#contact-section [id^="icons"] a {
  color: var(--lux-muted) !important;
  transition: color 0.35s ease, transform 0.35s ease !important;
}

#contact-section [id^="icons"] a:hover {
  color: var(--lux-gold) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 980px) {
  #header #container04 > .wrapper > .inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 0.65rem !important;
  }

  #header #links01 {
    gap: 0.7rem !important;
    justify-content: flex-end !important;
  }

  #header #links01 a {
    font-size: 0.6rem !important;
    letter-spacing: 0.08rem !important;
  }

  #header #links03 a {
    font-size: clamp(0.85rem, 1.8vw, 1.3rem) !important;
    letter-spacing: 0.12rem !important;
  }
}

@media (max-width: 820px) {
  #header #container04 > .wrapper > .inner {
    grid-template-columns: auto 1fr !important;
  }

  #header #container04 > .wrapper > .inner > div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  #header #links01 {
    justify-content: center !important;
  }
}

@media (min-width: 821px) and (max-width: 1280px) {
  #header #links03 a {
    font-size: clamp(0.9rem, 1.6vw, 1.5rem) !important;
    letter-spacing: 0.1rem !important;
  }

  #header #links01 {
    gap: 0.8rem !important;
  }

  #header #links01 a {
    font-size: 0.62rem !important;
    letter-spacing: 0.1rem !important;
  }
}

/* ── Mobile — grilles home ── */
@media (max-width: 768px) {
  .home-bio-grid {
    grid-template-columns: 1fr !important;
  }

  /* Kicker + titre + image + texte passent tous en colonne unique */
  .home-bio-grid > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Titres nowrap : autorise le retour à la ligne sur mobile */
  .home-bio-grid h2 {
    white-space: normal !important;
    font-size: clamp(1.1rem, 5vw, 1.6rem) !important;
  }

  /* Images moonwatch : 2 colonnes sur tablette */
  .home-moonwatch-images {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Texte moonwatch : colonne unique */
  .home-moonwatch-text {
    grid-template-columns: 1fr !important;
  }
  .home-moonwatch-text > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .home-moonwatch-text .mw-desc1 { order: 1; }
  .home-moonwatch-text .mw-title1 { order: 2; }
  .home-moonwatch-text .mw-list1 { order: 3; padding-bottom: 2rem !important; }
  .home-moonwatch-text .mw-desc2 { order: 4; }
  .home-moonwatch-text .mw-title2 { order: 5; }
  .home-moonwatch-text .mw-list2 { order: 6; }

  /* Propositions : colonne unique */
  .propositions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Expo : colonne masonry → 1 colonne */
  .expo-columns {
    columns: 1 !important;
  }

  /* Expo contact grid : colonne unique */
  .expo-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Détail œuvre : image + info en colonne */
  .detail-layout {
    flex-direction: column !important;
  }

  .detail-layout .detail-img,
  .detail-layout .detail-images,
  .detail-layout .detail-info {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Moonwatch 4 images → 1 seule colonne */
  .home-moonwatch-images {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Titres Moonwatch */
  .home-bio-grid h2 {
    font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
  }
}

@media (max-width: 768px) {
  .detail-back {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  body::before { display: none; }

  #header {
    background: rgba(10, 10, 10, 0.9) !important;
    position: relative !important;
  }

  #header #container04 > .wrapper > .inner {
    grid-template-columns: auto 1fr !important;
    justify-items: center !important;
    padding: 0.6rem 1rem !important;
  }

  #header #links03 {
    display: block !important;
    text-align: center !important;
  }

  #header #links03 a {
    font-size: 0.85rem !important;
    letter-spacing: 0.15rem !important;
  }

  #header #links01 {
    grid-column: 1 / -1 !important;
    gap: 0.6rem !important;
    justify-content: center !important;
    overflow-x: auto !important;
    padding-bottom: 0.3rem !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  #header #links01::-webkit-scrollbar { display: none !important; }

  #header #links01 a {
    font-size: 0.68rem !important;
    letter-spacing: 0.08rem !important;
  }

  #home-section #container03 > .wrapper,
  #home-section #image36,
  #home-section #image36 .frame,
  #home-section #image36 img {
    min-height: 65vh !important;
  }

  .hero-sales-line {
    font-size: 0.85rem;
    font-style: italic;
    letter-spacing: 0.03rem;
    line-height: 1.55;
    padding: 1.2rem 1.2rem;
  }

  .hero-sales-line span { white-space: normal; }
  .hero-sales-line::before,
  .hero-sales-line::after { width: 80%; }

  #home-section #container02 > .wrapper > .inner {
    padding: clamp(2.5rem, 6vw, 4rem) 1.2rem !important;
  }

  #leclerc-section #container91 > .wrapper > .inner,
  #jaguar-section #container27 > .wrapper > .inner,
  #echiquiermonaco-section #container-echiquiermonaco > .wrapper > .inner {
    flex-direction: column !important;
  }

  #leclerc-section #container91 > .wrapper > .inner > div,
  #jaguar-section #container27 > .wrapper > .inner > div,
  #echiquiermonaco-section #container-echiquiermonaco > .wrapper > .inner > div {
    width: 100% !important;
  }

  #leclerc-section #image29 .frame,
  #jaguar-section #image-jaguar-detail .frame,
  #echiquiermonaco-section #image-echiquiermonaco-detail .frame {
    max-width: 94vw !important;
  }

  #galleryall-section #links05 a {
    font-size: 0.65rem !important;
    padding: 0.45rem 0.8rem !important;
  }
}