/**
 * SimCrise - Mobile Optimizations
 * Index Page Mobile
 * 
 * Description: Menu hamburger, media queries responsive, touch targets et safe-area-inset
 * Usage: Importé pour optimisations mobiles
 * Version: 1.0.0
 */

/* Mobile hamburger menu system */
#mobile-menu-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 20001;
  width: 56px;
  height: 56px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 16px rgba(26,63,110,0.18);
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media (max-width: var(--mobile)) {
  .bottom-buttons {
    display: none !important;
  }
  #mobile-menu-btn {
    display: flex !important;
  }
  .floating-element, .help-button, .notification {
    margin-bottom: 80px !important;
  }
}

@media (max-width: 480px) {
  #mobile-menu-btn {
    width: max(48px, 56px); /* NIVEAU 1 FIX: Touch target minimum garanti */
    height: max(48px, 56px); /* NIVEAU 1 FIX: Touch target minimum garanti */
    font-size: 1.5rem;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)); /* NIVEAU 1 FIX: Safe area iPhone */
    right: 16px;
  }
}

#mobile-menu-modal {
  display: none;
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: var(--modal-overlay);
  z-index: 20002;
  align-items: flex-end;
  justify-content: center;
}

#mobile-menu-modal.active {
  display: flex;
}

#mobile-menu-content {
  background: var(--card);
  width: 100vw;
  max-width: 420px;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  box-shadow: 0 -8px 32px var(--shadow-dark);
  padding: var(--padding-large) var(--padding) var(--padding-medium) var(--padding);
  margin-bottom: env(safe-area-inset-bottom, 0px);
  animation: menu-slide-up 0.25s cubic-bezier(.4,0,.2,1);
}

/* Media queries finales pour responsive */
@media (max-width: 768px) {
  #orientation-guide > div > div:nth-child(3) {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .orientation-option {
    padding: 16px !important;
    min-height: 160px !important;
  }
  
  .orientation-option h3 {
    font-size: 1.05rem !important;
  }
  
  .orientation-option p {
    font-size: 0.8rem !important;
    height: 35px !important;
  }
  
  .orientation-option div:first-child div:first-child {
    font-size: 2.2rem !important;
  }
  
  /* Style responsive pour le chapô */
  .mt-32[style*="max-width: 1000px"] p {
    font-size: 1rem !important;
    text-align: center !important;
  }
  
  .mt-32[style*="max-width: 1000px"] img {
    max-height: 110px !important;
  }
  
  /* Aération responsive */
  .card[style*="margin-top: 80px"] {
    margin-top: 48px !important;
  }
  
  .card[style*="margin-top: 64px"] {
    margin-top: 40px !important;
  }
  
  div[style*="margin-top: 48px"] {
    margin-top: 32px !important;
  }
  
  div[style*="margin-top: 64px"] {
    margin-top: 40px !important;
  }
}

@media (max-width: 600px) {
  #orientation-guide > div > div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .orientation-option {
    padding: 18px !important;
    min-height: 150px !important;
  }
  
  .orientation-option h3 {
    font-size: 1.1rem !important;
  }
  
  .orientation-option p {
    font-size: 0.85rem !important;
    height: 40px !important;
  }
  
  .orientation-option div:first-child div:first-child {
    font-size: 2.3rem !important;
  }
}

@media (max-width: 480px) {
  .card[style*="margin-top: 80px"] {
    margin-top: 32px !important;
  }
  
  .card[style*="margin-top: 64px"] {
    margin-top: 24px !important;
  }
  
  div[style*="margin-top: 48px"] {
    margin-top: 24px !important;
  }
  
  div[style*="margin-top: 64px"] {
    margin-top: 28px !important;
  }
}

/* 🔵 Suppression TOTALE du cercle bleu tactile sur mobile */
@media (max-width: 768px) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important; /* Supprime le cercle bleu Android */
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* Double sécurité */
    -webkit-touch-callout: none !important; /* Supprime le menu contextuel long-press */
  }
  
  /* Reset appearance seulement pour les éléments non-critiques */
  button, select, textarea {
    -webkit-appearance: none !important; /* Reset l'apparence native */
    appearance: none !important; /* Standard property */
  }
  
  /* 🖼️ Image en-tête pleine largeur sur mobile */
  .logo-container {
    margin-left: -20px !important; /* Compense le padding de la card */
    margin-right: -20px !important;
    margin-bottom: 24px !important;
    width: calc(100% + 40px) !important; /* Largeur totale */
  }
  
  .logo-container img {
    width: 100% !important;
    border-radius: 0 !important; /* Pas de rayon sur les bords */
    max-height: 200px !important; /* Hauteur contrôlée */
  }
}

@media print {
  #mobile-menu-btn,
  #mobile-menu-modal,
  .bottom-buttons {
    display: none !important;
  }
}