/* mobile.css - Styles optimisés pour mobile PWA GAIUS */
/* Réécrit le 10 mars 2026 - encodage UTF-8 correct + iOS portrait optimisation */

/* ════════════════════════════════════════════
   RESPONSIVE GÉNÉRAL
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Marges containers */
  .MuiContainer-root {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Boutons : taille minimum Apple HIG 44pt */
  .MuiButton-root {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* Tableaux scrollables */
  .MuiDataGrid-root {
    font-size: 13px;
    overflow-x: auto;
  }

  /* Cards espacées */
  .MuiCard-root {
    margin-bottom: 12px;
  }

  /* Drawer mobile */
  .MuiDrawer-paper {
    width: 85% !important;
    max-width: 300px !important;
  }

  /* Form fields */
  .MuiTextField-root {
    margin-bottom: 16px !important;
  }

  /* CRITIQUE iOS : évite le zoom auto quand font-size < 16px */
  .MuiInputBase-input {
    font-size: 16px !important;
  }

  /* Dialog adapté mobile */
  .MuiDialog-paper {
    margin: 16px !important;
    max-height: calc(100% - 32px) !important;
  }

  /* Tabs scrollables */
  .MuiTabs-root {
    overflow-x: auto !important;
  }

  /* Liste items espacés */
  .MuiListItem-root {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Chips adaptés mobile */
  .MuiChip-root {
    font-size: 12px !important;
    height: 28px !important;
  }
}

/* ════════════════════════════════════════════
   iOS SAFE AREA — DYNAMIC ISLAND / ENCOCHE / BARRE HOME
   env(safe-area-inset-*) = zones non utilisables iOS
   ════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  /* NE PAS toucher padding-bottom du body ici :
     le BottomNavigation MUI gère lui-même son safe-area-inset-bottom
     via les sx de App.js. Doublon = double espacement. */
  body {
    /* Inset haut : uniquement si pas d'AppBar fixe qui le gère déjà */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* AppBar : se glisse sous la Dynamic Island/notch */
  .MuiAppBar-root {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* BottomNavigation : espace au-dessus de la barre home iPhone */
  .MuiBottomNavigation-root {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ════════════════════════════════════════════
   MODE PAYSAGE MOBILE
   ════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
  .MuiAppBar-root {
    min-height: 48px !important;
  }
  .MuiToolbar-root {
    min-height: 48px !important;
  }
}

/* ════════════════════════════════════════════
   TOUCH OPTIMISATIONS
   ════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Zones cliquables minimum 44×44pt (Apple HIG) */
  a, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Retirer hover effects sur tactile */
  .MuiButtonBase-root:hover {
    background-color: transparent !important;
  }

  /* Feedback visuel au tap */
  .MuiButtonBase-root:active {
    opacity: 0.7;
    transform: scale(0.97);
  }
}

/* ════════════════════════════════════════════
   SCROLL FLUIDE
   ════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  /* Momentum scrolling iOS (legacy mais encore utile sur certains appareils) */
  -webkit-overflow-scrolling: touch;
}

/* Évite le zoom double-tap iOS partout */
* {
  touch-action: manipulation;
}

/* ════════════════════════════════════════════
   VIEWPORT DYNAMIQUE iOS
   100dvh = tient compte du clavier virtuel (contrairement à 100vh)
   ════════════════════════════════════════════ */
#root {
  min-height: 100dvh;
  /* Fallback pour navigateurs sans dvh */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ════════════════════════════════════════════
   SNACKBAR MOBILE
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  .MuiSnackbar-root {
    left: 8px !important;
    right: 8px !important;
    bottom: 80px !important; /* Au-dessus du BottomNavigation */
  }
  .MuiSnackbarContent-root {
    flex-grow: 1;
  }
}

/* ════════════════════════════════════════════
   PERFORMANCE GPU
   Limité aux éléments animés seulement
   (will-change sur tout = fuite mémoire iOS)
   ════════════════════════════════════════════ */
.MuiDrawer-paper {
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important;
  will-change: transform;
}

/* Animation transitions */
.MuiCollapse-root {
  will-change: height;
}

/* ════════════════════════════════════════════
   ACCESSIBILITÉ
   ════════════════════════════════════════════ */
.MuiInputBase-root.Mui-focused {
  outline: 2px solid #4caf50;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ════════════════════════════════════════════
   SPLASH SCREEN (avant chargement React)
   ════════════════════════════════════════════ */
#root:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background-color: #4caf50; /* Vert étudiant */
}

#root:empty::after {
  content: "GAIUS";
  font-size: 32px;
  font-weight: bold;
  color: white;
  animation: splashPulse 1.5s ease-in-out infinite;
}

@keyframes splashPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}