/* Styles pour le mode immersif sur Android */

/* Rendre le fond de la barre de navigation et de statut transparent */
body {
  background-color: transparent !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* S'assurer que le contenu s'étend derrière les barres système */
html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#root {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Barres de défilement transparentes */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Style pour la navigation gesture et les coins arrondis */
@media (display-mode: fullscreen) {
  html {
    overscroll-behavior: none;
  }
  
  body {
    overscroll-behavior: none;
  }
  
  /* Assurer que le contenu est visible derrière les barres système */
  #root {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 
             env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  
  /* Contourner les problèmes avec les navigateurs qui ne prennent pas en charge les insets */
  @supports not (padding: env(safe-area-inset-top)) {
    #root {
      padding-top: 24px;
      padding-bottom: 48px;
    }
  }
}