@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  --rp-rose: #c88e7a;
  --rp-rose-light: #e6b29f;
  --rp-rose-dark: #8c5847;
  --rp-bg: #0a0a0a;
  --rp-header: #141110;
  --rp-panel: #11100f;
  --rp-muted: #a69188;
  --rp-line: rgba(200, 142, 122, 0.72);
  --rp-line-soft: rgba(200, 142, 122, 0.22);
}

html {
  scroll-behavior: smooth;
  background: var(--rp-bg);
}

body,
body.font-sans {
  margin: 0 !important;
  background: var(--rp-bg) !important;
  color: #f6f0ec !important;
  font-family: 'Montserrat', sans-serif !important;
  overflow-x: hidden !important;
}

h1,
h2,
h3,
h4,
.font-tattoo,
.serif {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* =========================================================
   HEADER — rendu de référence
   ========================================================= */
#navbar {
  height: 70px !important;
  background:
    radial-gradient(circle at 18% 45%, rgba(200, 142, 122, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(20, 17, 16, 0.98), rgba(10, 10, 10, 0.98)) !important;
  border-bottom: 1px solid var(--rp-line-soft) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
}

#navbar > div:first-child,
#navbar .max-w-7xl {
  height: 70px !important;
}

#navbar .font-tattoo {
  color: #ffffff !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

#navbar .text-rattoo-pink {
  color: var(--rp-rose-light) !important;
}

#navbar a:not(.bg-rattoo-pink) {
  color: var(--rp-rose-light) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

#navbar a:not(.bg-rattoo-pink):hover {
  color: #ffffff !important;
  transform: translateY(-1px);
}

#navbar .bg-rattoo-pink,
#navbar a.bg-rattoo-pink {
  min-width: 110px !important;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--rp-rose-light), var(--rp-rose)) !important;
  border: 1px solid var(--rp-rose-light) !important;
  color: #241713 !important;
  box-shadow: 0 7px 20px rgba(200, 142, 122, 0.16) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

#navbar .bg-rattoo-pink:hover,
#navbar a.bg-rattoo-pink:hover {
  background: #f0d5ca !important;
  color: #241713 !important;
}

#navbar img {
  width: 43px !important;
  height: 43px !important;
  border-radius: 50% !important;
  border: 1px solid var(--rp-rose) !important;
  box-shadow: 0 0 18px rgba(200, 142, 122, 0.16) !important;
}

#mobile-menu {
  top: 70px !important;
  background: rgba(20, 17, 16, 0.985) !important;
  border-bottom: 1px solid var(--rp-line-soft) !important;
}

/* =========================================================
   GALERIE — reproduction du rendu envoyé
   ========================================================= */
#galerie {
  background:
    radial-gradient(circle at 50% 12%, rgba(200, 142, 122, 0.035), transparent 30%),
    #0a0a0a !important;
  padding-top: 34px !important;
  padding-bottom: 78px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

#galerie > .max-w-7xl {
  width: min(930px, calc(100% - 36px)) !important;
  max-width: 930px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#galerie .text-center {
  margin-bottom: 42px !important;
}

#galerie h2 {
  margin: 0 0 10px !important;
  color: #e6b29f !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.7rem, 6vw, 4.1rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.055em !important;
  line-height: 0.98 !important;
  text-transform: uppercase !important;
}

#galerie h2 span {
  color: inherit !important;
}

#galerie .text-center > p {
  margin: 0 auto !important;
  max-width: 680px !important;
  color: #a69188 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

#galerie .grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 40px !important;
}

#galerie .group.relative {
  order: initial;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.86 / 1 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 3px solid var(--rp-rose) !important;
  box-shadow: none !important;
  cursor: default !important;
  transition: none !important;
  position: relative !important;
}

#galerie .group.relative:nth-child(1) { order: 6; }
#galerie .group.relative:nth-child(2) { order: 1; }
#galerie .group.relative:nth-child(3) { order: 2; }
#galerie .group.relative:nth-child(4) { order: 3; }
#galerie .group.relative:nth-child(5) { order: 4; }
#galerie .group.relative:nth-child(6) { order: 5; }

#galerie .group.relative::after {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  color: #c88e7a;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.42rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-align: center;
  pointer-events: none;
}

#galerie .group.relative:nth-child(1)::after { content: 'Tribal moderne'; }
#galerie .group.relative:nth-child(2)::after { content: 'Broderie Harley'; }
#galerie .group.relative:nth-child(3)::after { content: 'Dino Vert'; }
#galerie .group.relative:nth-child(4)::after { content: 'Papillon'; }
#galerie .group.relative:nth-child(5)::after { content: 'Chucky'; }
#galerie .group.relative:nth-child(6)::after { content: 'Indienne'; }

#galerie .group.relative img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

#galerie .group.relative .bg-gradient-to-t {
  display: none !important;
}

#galerie .group.relative > *:not(img):not(.bg-gradient-to-t) {
  pointer-events: none !important;
}

#galerie .group.relative:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--rp-rose) !important;
}

#galerie .mt-16 {
  margin-top: 72px !important;
}

#galerie .mt-16 a {
  color: var(--rp-rose) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  border-bottom: 1px solid var(--rp-rose) !important;
}

/* =========================================================
   Le reste du site garde les fonctions existantes mais adopte
   la même palette et le même rendu premium.
   ========================================================= */
.bg-rattoo-dark,
.bg-black {
  background-color: var(--rp-bg) !important;
}

.bg-rattoo-gray,
.bg-\[\#0a0a0a\] {
  background-color: var(--rp-panel) !important;
}

.bg-rattoo-pink {
  background: linear-gradient(135deg, var(--rp-rose-light), var(--rp-rose)) !important;
}

.text-rattoo-pink,
.text-transparent.bg-clip-text {
  color: var(--rp-rose) !important;
}

#ai-lab button.bg-rattoo-pink,
#contact button.bg-rattoo-pink,
#contact a.bg-rattoo-pink {
  background: linear-gradient(135deg, var(--rp-rose-light), var(--rp-rose)) !important;
  border-color: var(--rp-rose-light) !important;
  color: #241713 !important;
  border-radius: 999px !important;
}

#ai-lab button.bg-rattoo-pink:hover,
#contact button.bg-rattoo-pink:hover,
#contact a.bg-rattoo-pink:hover {
  background: #f0d5ca !important;
  color: #241713 !important;
}

#cookie-banner {
  background: rgba(20, 17, 16, 0.985) !important;
  border-top-color: var(--rp-line-soft) !important;
}

#cookie-banner .bg-rattoo-pink {
  color: #241713 !important;
}

#chatbot-toggle {
  background: linear-gradient(135deg, var(--rp-rose-light), var(--rp-rose)) !important;
  color: #241713 !important;
}

::-webkit-scrollbar-track {
  background: var(--rp-bg) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--rp-rose-dark) !important;
  border-radius: 999px !important;
}

@media (max-width: 900px) {
  #galerie > .max-w-7xl {
    width: min(94%, 720px) !important;
  }

  #galerie .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 38px !important;
  }

  #galerie .group.relative::after {
    bottom: -27px;
    font-size: 1.02rem;
  }
}

@media (max-width: 560px) {
  #navbar {
    height: 64px !important;
  }

  #navbar > div:first-child,
  #navbar .max-w-7xl {
    height: 64px !important;
  }

  #mobile-menu {
    top: 64px !important;
  }

  #galerie {
    padding-top: 26px !important;
  }

  #galerie > .max-w-7xl {
    width: min(94%, 420px) !important;
  }

  #galerie h2 {
    font-size: 2.55rem !important;
  }

  #galerie .text-center > p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  #galerie .grid {
    grid-template-columns: 1fr !important;
    row-gap: 43px !important;
  }

  #galerie .group.relative::after {
    bottom: -27px;
    font-size: 1.24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}