/* Are Nui Surf — styles complémentaires (le gros vient de Tailwind CDN) */

:root {
  --ocean: #0B5FA5;
  --ocean-deep: #073B63;
  --lagon: #1FA2C4;
  --ecume: #F5FBFE;
  --soleil: #FFC233;
  --corail: #FF6B4A;
  --ink: #0A2A3D;
  --ink-soft: #577182;
  --succes: #27AE7A;
}

body { -webkit-font-smoothing: antialiased; }

/* Reveal initial state (GSAP anime vers l'état final) */
.gsap-ready .reveal { opacity: 0; transform: translateY(28px); }
.gsap-ready [data-reveal-group] .reveal { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* Dégradés réutilisables */
.bg-ocean-grad { background: linear-gradient(135deg, #04253F 0%, #073B63 35%, #0B5FA5 75%, #1FA2C4 100%); }
.bg-cta-grad   { background: linear-gradient(135deg, #FFC233 0%, #FF6B4A 100%); }
.text-cta-grad {
  background: linear-gradient(120deg, #FFD86B 0%, #FFC233 40%, #FF6B4A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wave-rule {
  width: 64px; height: 4px; border-radius: 9999px;
  background: linear-gradient(90deg, #FFC233, #FF6B4A);
}

/* Grain subtil pour donner de la matière aux fonds sombres */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}

/* Voile vignette radial (profondeur hero) */
.hero-vignette::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 18% 35%, transparent 0%, transparent 38%, rgba(4,37,63,.55) 100%);
}

/* Carte verre dépoli (sélecteur hero, panneaux) */
.glass {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,.6);
}

/* Élévation douce au survol des cartes interactives */
.hover-lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(7,59,99,.4); }

/* Badge pilule conditions (hero) */
.pill-live {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.dot-live { box-shadow: 0 0 0 0 rgba(39,174,122,.7); animation: pulse-live 2.2s infinite; }
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(39,174,122,.6); }
  70% { box-shadow: 0 0 0 8px rgba(39,174,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,174,122,0); }
}
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

/* Boutons pill */
.btn-soleil {
  background: linear-gradient(135deg, #FFC233 0%, #FF6B4A 100%);
  color: #073B63; font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(255,107,74,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-soleil:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(255,107,74,.65); }

/* Carte ombre bleutée */
.shadow-ocean { box-shadow: 0 12px 30px -12px rgba(11,95,165,.35); }

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

/* Leaflet : popups & marqueurs */
.leaflet-popup-content { font-family: 'Outfit', system-ui, sans-serif; margin: 12px 14px; }
.spot-marker {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(7,59,99,.4);
}

/* Stepper tunnel */
.step-dot { transition: all .3s ease; }

/* flatpickr accent override */
.flatpickr-day.has-session {
  background: rgba(31,162,196,.16); border-color: transparent; font-weight: 700; color: #0B5FA5;
}
.flatpickr-day.has-session:hover { background: rgba(31,162,196,.3); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #0B5FA5; border-color: #0B5FA5; }

/* prix qui tick */
.price-tick { transition: transform .15s ease; }
.price-tick.bump { transform: scale(1.08); }

/* line clamp util */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }