/* Style CSS personnalisé - WeBuildApp */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primary-glow: radial-gradient(rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.05), transparent 70%);
}

* {
  font-family: var(--font-main);
  scroll-behavior: smooth;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* Background Glow Effects - Confinés pour le mobile */
.glow-bg {
  position: absolute;
  width: 500px;
  height: 500px;
  max-width: 80vw;
  max-height: 80vw;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

@media (max-width: 640px) {
  .glow-bg {
    filter: blur(60px);
    opacity: 0.3;
  }
}

.glow-indigo {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0) 70%);
}

.glow-purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(168, 85, 247, 0) 70%);
}

.glow-cyan {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, rgba(6, 182, 212, 0) 70%);
}

/* Glassmorphism Classes */
.glass-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.15);
}

/* Light Mode Overrides */
html.light {
  color-scheme: light;
}

html.light body {
  background-color: #f8fafc;
  color: #0f172a;
}

html.light .glass-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

html.light .glass-card:hover {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.12);
}

html.light .text-slate-100,
html.light .text-white {
  color: #0f172a !important;
}

/* Préserver le texte blanc sur les boutons d'action foncés en mode clair */
html.light .bg-indigo-600,
html.light .bg-indigo-600 *,
html.light button[type="submit"],
html.light button[type="submit"] *,
html.light #apply-to-contact-btn,
html.light #apply-to-contact-btn * {
  color: #ffffff !important;
}

/* Saisie claire et nette pour les champs */
html.light input,
html.light select,
html.light textarea {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html.light .text-slate-300,
html.light .text-slate-400 {
  color: #475569 !important;
}

html.light .text-slate-500 {
  color: #64748b !important;
}

html.light .bg-slate-900,
html.light .bg-slate-950 {
  background-color: #ffffff !important;
}

html.light .bg-slate-900\/80,
html.light .bg-slate-900\/50,
html.light .bg-slate-800\/50,
html.light .bg-slate-800 {
  background-color: #f1f5f9 !important;
}

html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-700 {
  border-color: #e2e8f0 !important;
}

html.light .hover\:bg-slate-800:hover {
  background-color: #e2e8f0 !important;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Gradient Text Utilities */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.light .text-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Interactive Estimator Radio styling */
.estimator-radio:checked + label {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 1px #6366f1;
}

/* Badge pulse animation */
.live-dot {
  position: relative;
}
.live-dot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Utilitaires Mobiles Dédiés */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Éviter le zoom forcé d'iOS Safari au focus des champs */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Adaptation du tactile sur smartphone */
@media (hover: none) {
  .glass-card:hover {
    transform: none;
  }
  .glass-card:active {
    transform: scale(0.98);
  }
}

/* Sécurité anti-débordement de texte */
h1, h2, h3, p, span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}