MAD-Platform/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'leaflet/dist/leaflet.css';

/* Styles personnalisés pour Leaflet */
.leaflet-container {
  font-family: inherit;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-tip {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  background-color: white !important;
  color: #374151 !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
  transition: all 0.2s !important;
}

.leaflet-control-zoom a:hover {
  background-color: #f3f4f6 !important;
  color: #6B46C1 !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid #e5e7eb !important;
}

.custom-marker-depart,
.custom-marker-arrivee {
  background: transparent !important;
  border: none !important;
}

.custom-popup .leaflet-popup-content {
  margin: 0 !important;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-poppins), Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}