/* static/global.css */

/* Variables globales */
:root {
    --app-bg: #f5f5f7; /* Couleur de fond - ajustez selon votre design */
    --card-background: rgba(255, 255, 255, 0.7);
    --border-color: rgba(255, 255, 255, 0.5);
    --background-blur: 10px;
    --text-color: #333;
    --text-secondary: #666;
    --vh: 1vh; /* Variable pour hauteur iOS */
  }
  
  /* Variables pour le thème sombre */
  @media (prefers-color-scheme: dark) {
    :root {
      --app-bg: #1a1a1a;
      --card-background: rgba(30, 30, 35, 0.7);
      --border-color: rgba(70, 70, 80, 0.3);
      --text-color: #eee;
      --text-secondary: #aaa;
    }
  }
  
  /* Styles de base pour HTML et Body */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background-color: var(--app-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    touch-action: manipulation;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overscroll-behavior: none;
  }
  
  /* Styles anti-zoom */
  * {
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y;
    -webkit-touch-callout: none;
  }
  
  /* Formulaires et boutons sans zoom */
  input, textarea, select, button {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  .leaflet-control-attribution{
    display:none;
  }
  /* Dimensions des boutons pour iOS */
  button, 
  .glass-button,
  .action-button,
  a[role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Styles de conteneur d'application */
  #app, #svelte, .app-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--app-bg);
  }
  
  /* Style de base pour les conteneurs de carte */
  .map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    background-color: var(--app-bg);
  }
  
  /* Adaptations pour les zones de sécurité iOS */
  @supports (padding: env(safe-area-inset-top)) {
    /* Conteneur de carte avec marges de sécurité */
    .ios-device .map-container {
      padding: env(safe-area-inset-top) env(safe-area-inset-right) 
               env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    
    /* Contrôles Leaflet adaptés aux zones de sécurité */
    .ios-device .leaflet-top {
      top: env(safe-area-inset-top) !important;
    }
    
    .ios-device .leaflet-bottom {
      bottom: env(safe-area-inset-bottom) !important;
    }
    
    .ios-device .leaflet-left {
      left: env(safe-area-inset-left) !important;
    }
    
    .ios-device .leaflet-right {
      right: env(safe-area-inset-right) !important;
    }
    
    /* Boutons flottants adaptés */
    .fixed-button-bottom-right {
      bottom: max(20px, env(safe-area-inset-bottom));
      right: max(20px, env(safe-area-inset-right));
    }
    
    .fixed-button-top-right {
      top: max(20px, env(safe-area-inset-top));
      right: max(20px, env(safe-area-inset-right));
    }
  }
  
  /* Conteneur Leaflet */
  .leaflet-container {
    height: 100% !important;
    background-color: var(--app-bg) !important;
    z-index: 0;
  }
  
  /* Éléments UI communs */
  .glass {
    background: var(--card-background);
    backdrop-filter: blur(var(--background-blur));
    -webkit-backdrop-filter: blur(var(--background-blur));
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: var(--text-color);
  }
  
  .glass-button {
    background: var(--card-background);
    backdrop-filter: blur(var(--background-blur));
    -webkit-backdrop-filter: blur(var(--background-blur));
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-color);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  /* Animations */
  @keyframes spinner {
    to { transform: rotate(360deg); }
  }

.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{
    display:none;
  }