/* ==============================================================================
   cauZon — Site Officiel & PWA Vitrine | Styles CSS3 Modernes
   Palette Officielle : Bordeaux (#6B1124, #520B1B), Crème (#FAF6EB, #F4F1E0), Émeraude (#10B981)
============================================================================== */

:root {
  --color-bordeaux-900: #3D0613;
  --color-bordeaux-800: #520B1B;
  --color-bordeaux-700: #6B1124;
  --color-bordeaux-600: #7F011F;
  --color-creme-100: #FFFFFF;
  --color-creme-200: #FAF6EB;
  --color-creme-300: #F4F1E0;
  --color-creme-400: #EAE5CE;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-dark: #1F2937;
  --color-gray-500: #6B7280;
  --color-gray-100: #F3F4F6;
  
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Playfair Display', Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--color-creme-200);
  color: var(--color-dark);
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}

::selection {
  background-color: var(--color-bordeaux-700);
  color: var(--color-creme-200);
}

/* Typographie Spécifique */
.font-display {
  font-family: var(--font-display);
}

/* Gradients et Effets de Lumière */
.bg-hero-gradient {
  background: linear-gradient(180deg, var(--color-bordeaux-700) 0%, var(--color-bordeaux-800) 50%, var(--color-bordeaux-900) 100%);
}

.bg-bordeaux-card {
  background: linear-gradient(180deg, var(--color-bordeaux-700) 0%, var(--color-bordeaux-800) 100%);
}

.glow-emerald {
  box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.4);
}

.glow-bordeaux {
  box-shadow: 0 15px 35px -5px rgba(107, 17, 36, 0.35);
}

/* Phone Simulator Frame */
.phone-mockup {
  position: relative;
  width: 320px;
  height: 640px;
  background-color: #111827;
  border-radius: 44px;
  border: 10px solid #1F2937;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  background-color: #1F2937;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  z-index: 30;
}

.phone-screen {
  flex: 1;
  background-color: var(--color-creme-200);
  overflow-y: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-creme-300);
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 17, 36, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-bordeaux-700);
}

/* Modal Animation */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active .modal-content {
  transform: scale(1) translateY(0);
}

/* Accordion FAQ */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out;
  opacity: 0;
}

.faq-item.active .faq-content {
  max-height: 500px;
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Micro-animations */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.animate-pulse-glow {
  animation: pulseGlow 4s infinite ease-in-out;
}