/* Poe Rava — styles custom (au-dessus de Tailwind CDN) */

:root {
  --noir-nacre: #0B0B0F;
  --anthracite: #15151C;
  --graphite: #1E1E27;
  --nacre: #F3EFE7;
  --nacre-doux: #A9A39A;
  --or: #C8A95B;
  --or-clair: #E3CC8A;
  --paon: #1F6E6A;
  --paon-clair: #3FA39B;
  --lisere: #2A2A33;
}

html { background: var(--noir-nacre); }
body {
  -webkit-font-smoothing: antialiased;
  /* Profondeur d'arrière-plan : halos diffus fixes */
  background-color: var(--noir-nacre);
  background-image:
    radial-gradient(900px 520px at 80% -6%, rgba(63,163,155,.10), transparent 60%),
    radial-gradient(760px 480px at 6% 3%, rgba(200,169,91,.06), transparent 62%);
  background-attachment: fixed;
}

/* Grain subtil global, derrière le contenu, ne capte pas les clics */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Finitions typographiques */
h1, h2, h3, .font-display { text-wrap: balance; }
.font-display { font-feature-settings: "liga" 1, "dlig" 1; }

/* Ombres douces & finitions réutilisables */
.shadow-soft { box-shadow: 0 24px 60px -28px rgba(0,0,0,.75), 0 6px 18px -12px rgba(0,0,0,.6); }
.ring-hairline { box-shadow: inset 0 0 0 1px rgba(243,239,231,.05); }

/* Filet doré décoratif */
.gold-rule {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--or-clair), var(--or), transparent);
}

/* Halo de perle radial signature */
.pearl-halo {
  background: radial-gradient(circle at 38% 34%, var(--paon-clair) 0%, var(--paon) 42%, var(--noir-nacre) 78%);
}

/* Surtitre petites capitales */
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--or);
}

/* Texte dégradé or — léger reflet nacré qui balaie lentement */
.text-gold-grad {
  background: linear-gradient(100deg, var(--or) 0%, var(--or-clair) 38%, #FFF4D6 50%, var(--or-clair) 62%, var(--or) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldSheen 9s ease-in-out infinite;
}
@keyframes goldSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Lift discret au survol (cartes, encarts) */
.lift { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.lift:hover { transform: translateY(-4px); }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--noir-nacre); }
::-webkit-scrollbar-thumb { background: var(--lisere); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a45; }

/* Focus visible doré */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* Champs de formulaire sombres cohérents */
.field {
  background: var(--graphite);
  border: 1px solid var(--lisere);
  color: var(--nacre);
  border-radius: 4px;
  transition: border-color .25s;
}
.field:focus { border-color: var(--or); outline: none; }
.field::placeholder { color: rgba(169,163,154,.6); }

/* Reveal au scroll (état initial avant GSAP) */
[data-reveal] { opacity: 1; }
.js-gsap [data-reveal] { opacity: 0; transform: translateY(24px); }

/* Range slider stylé */
input[type="range"].pearl-range {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--lisere);
  border-radius: 999px;
  outline: none;
}
input[type="range"].pearl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, var(--paon-clair) 40%, var(--paon) 90%);
  border: 1px solid var(--or);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(200,169,91,.12);
}
input[type="range"].pearl-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, var(--paon-clair) 40%, var(--paon) 90%);
  border: 1px solid var(--or);
  cursor: pointer;
}

/* Leaflet sombre */
.leaflet-container { background: var(--graphite); }
.leaflet-tile { filter: brightness(.7) saturate(.85) contrast(1.05); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--anthracite); color: var(--nacre);
}

/* Skeleton nacré */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--graphite) 25%, #262630 50%, var(--graphite) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }
}