/* Puai — styles complémentaires (au-dessus de Tailwind CDN) */

:root {
  --ink: #0A0A0B;
  --carbon: #15161A;
  --steel: #26282F;
  --lime: #D7FF1E;
  --lime-deep: #A9CC00;
  --volt: #C2F53D;
  --chalk: #F4F4F2;
  --ash: #9A9CA3;
  --ember: #FF5A3C;
  --amber: #FFB020;
  --mint: #39E991;
}

html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--chalk); }

/* Grain léger sur le fond sombre */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tabnum { font-variant-numeric: tabular-nums; }

/* Reveal initial state (GSAP prend le relais) */
.gsap-ready .reveal { opacity: 0; transform: translateY(40px); }
@media (prefers-reduced-motion: reduce) {
  .gsap-ready .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Focus visible lime */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Titres display condensés */
.display { font-family: 'Anton', sans-serif; letter-spacing: 0.01em; }
.head { font-family: 'Oswald', sans-serif; }

/* Eyebrow d'accent réutilisable (libellés de section) */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.eyebrow::before {
  content: "";
  width: 1.5rem; height: 2px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--lime), transparent);
}

/* Texte dégradé lime réutilisable */
.text-gradient-lime {
  background: linear-gradient(100deg, var(--lime), var(--volt) 45%, var(--lime-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Glow lime au survol des cartes */
.glow-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.glow-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgba(215,255,30,.4), 0 22px 48px -14px rgba(215,255,30,.28), 0 8px 24px -12px rgba(0,0,0,.6);
  border-color: rgba(215,255,30,.5);
}

/* Image qui se sature au survol */
.img-desat { filter: grayscale(0.6) contrast(1.05); transition: filter .5s ease, transform .6s ease; }
.group:hover .img-desat { filter: grayscale(0) contrast(1.1) saturate(1.1); }

/* Jauge de places */
.gauge { height: 6px; border-radius: 9999px; background: var(--steel); overflow: hidden; }
.gauge > span { display: block; height: 100%; border-radius: 9999px; transition: width .6s cubic-bezier(.2,.7,.2,1); }

/* Bandeau éclair lime animé */
@keyframes charge { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.lime-bar {
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  background-size: 200% 100%;
  animation: charge 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .lime-bar { animation: none; } }

/* Scrollbar planning */
.planning-scroll::-webkit-scrollbar { height: 8px; }
.planning-scroll::-webkit-scrollbar-track { background: var(--carbon); }
.planning-scroll::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 9999px; }

/* Modale */
[x-cloak] { display: none !important; }

/* Leaflet sombre */
.leaflet-container { background: #15161A; }

/* Flash succès */
@keyframes pulseMint { 0%,100% { box-shadow: 0 0 0 0 rgba(57,233,145,0); } 50% { box-shadow: 0 0 0 6px rgba(57,233,145,.35); } }
.pulse-mint { animation: pulseMint 1s ease 2; }

/* Chips pill */
.chip {
  border: 1px solid var(--steel);
  border-radius: 9999px;
  transition: all .2s ease;
}
.chip[aria-pressed="true"], .chip.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  font-weight: 600;
}

/* Liens hover lime underline */
.nav-underline { position: relative; }
.nav-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--lime); transition: width .25s ease;
}
.nav-underline:hover::after, .nav-underline.active::after { width: 100%; }