/* ================================================================
   PADHUJOB — RESPONSIVE MOBILE CSS
   À inclure dans TOUTES les pages HTML :
   <link rel="stylesheet" href="mobile.css">
   Breakpoints : 480px (téléphone), 768px (tablette)
   ================================================================ */

/* ── VARIABLES MOBILE ── */
:root {
  --bottom-nav-h: 64px; /* hauteur barre de nav mobile */
}

/* ================================================================
   1. BASE MOBILE — s'applique sous 768px
   ================================================================ */
@media (max-width: 768px) {

  /* ── Espacement global ── */
  * { box-sizing: border-box; }

  body {
    padding-bottom: var(--bottom-nav-h); /* espace pour la nav en bas */
    overflow-x: hidden;
  }

  /* ── Header ── */
  .header {
    padding: .6rem 1rem;
  }
  .nav {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .logo {
    font-size: 1.1rem;
  }
  .logo span:not(:first-child) { display: none; } /* garde juste l'icône */

  /* Cacher les éléments non essentiels du header sur mobile */
  .badge-premium,
  #lienAdminPanel,
  #securityWatermark,
  #apiBar {
    display: none !important;
  }

  /* Réduire les badges header */
  .badge-doctor {
    font-size: .75rem;
    padding: 4px 8px;
  }
  .badge-spec {
    font-size: .72rem;
    padding: 4px 8px;
  }
  #doctorBadge { display: none; }

  /* Bouton déconnexion plus compact */
  .header-right {
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* ── Tabs horizontaux → CACHÉS sur mobile (remplacés par bottom nav) ── */
  .tabs-container {
    display: none;
  }

  /* ── Panels ── */
  .panel {
    padding: 0 .75rem 1rem;
    margin-top: .75rem;
  }

  /* ── Cards ── */
  .card {
    border-radius: 16px;
    padding: 1rem;
  }

  /* ── Dashboard layout ── */
  .dash-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ── TikTok phone : version mobile compacte ── */
  .tiktok-phone {
    border-radius: 20px;
    max-height: 420px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 4px #1a1a2a;
  }

  /* ── Stats row ── */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-val { font-size: 1.4rem; }

  /* ── Grids génériques → 1 colonne ── */
  .zoom-layout,
  .asm-grid,
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── MedFlow ── */
  .zoom-container-modern {
    border-radius: 16px;
    padding: 12px;
  }
  .medflow-hd {
    flex-wrap: wrap;
    gap: 8px;
    padding: .75rem;
  }

  /* ── Boutons : taille minimum doigt ── */
  button, .btn, .lock-btn, .lock-btn-sec, .tab-btn {
    min-height: 44px;
  }

  /* ── Formulaires ── */
  input, select, textarea {
    font-size: 16px !important; /* évite le zoom auto iOS */
    min-height: 44px;
  }

  /* ── Messenger / Chat ── */
  .chatbot-window {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: calc(var(--bottom-nav-h) + 12px) !important;
    max-height: 70vh;
  }

  /* ── PDH WhatsApp ── */
  #pdhMessenger {
    width: 100vw !important;
    height: 100vh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }

  /* ── Modals ── */
  .modal-box,
  .security-modal-box,
  .engagement-card,
  [style*="max-width:700px"],
  [style*="max-width: 700px"],
  [style*="max-width:780px"],
  [style*="max-width: 780px"] {
    width: 95% !important;
    max-width: 95% !important;
    margin: auto;
    border-radius: 16px !important;
  }

  /* ── Forum ── */
  .forum-hd { flex-wrap: wrap; gap: 8px; }
  .forum-filters { flex-wrap: wrap; gap: 6px; }

  /* ── Cours ── */
  .cours-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Agenda / Planning ── */
  .agenda-item { gap: 8px; }

  /* ── QCM / Apprentissage ── */
  .evc-filters { gap: 6px; }
  .q-card { padding: .85rem; }

  /* ── Methodologie ── */
  .pmz-grid-methodo { grid-template-columns: 1fr; }
  .timeline-methodo { flex-direction: column; }
  .timeline-step { min-width: auto; }
  .specialty-grid { grid-template-columns: 1fr; }

  /* ── Page connexion / inscription / paiement ── */
  .lock-box {
    padding: 1.5rem 1rem;
    border-radius: 16px;
    margin: 0 .5rem;
  }

  /* ── Tables ── */
  table { display: block; overflow-x: auto; }

  /* ── Chatbot fab ── */
  #chatbotFab {
    bottom: calc(var(--bottom-nav-h) + 16px) !important;
  }

  /* ── Textes trop grands ── */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .section-hd { font-size: .95rem; }

}

/* ================================================================
   2. SMARTPHONE PETIT — sous 480px
   ================================================================ */
@media (max-width: 480px) {

  .header { padding: .5rem .75rem; }

  .panel { padding: 0 .5rem .75rem; }

  .card { padding: .85rem .75rem; border-radius: 14px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-val { font-size: 1.2rem; }
  .stat-card { padding: .85rem; }

  .tiktok-phone { max-height: 340px; }

  .badge-doctor, .badge-spec { font-size: .68rem; padding: 3px 7px; }

  /* Forum : masquer aperçu long */
  .forum-preview { display: none; }

  /* Boutons pleine largeur dans les modals */
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions button { width: 100%; }

}

/* ================================================================
   3. BOTTOM NAVIGATION BAR — visible uniquement sur mobile
   ================================================================ */
#mobileBottomNav {
  display: none;
}

@media (max-width: 768px) {
  #mobileBottomNav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background: #fff;
    border-top: 1px solid #e9ecef;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #999;
    font-size: .62rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 6px 4px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-nav-item i {
    font-size: 1.2rem;
    transition: transform .15s;
  }

  .mob-nav-item.active {
    color: #007bff;
  }

  .mob-nav-item.active i {
    transform: scale(1.15);
  }

  .mob-nav-item:active i {
    transform: scale(.9);
  }

  /* Badge notification sur nav item */
  .mob-nav-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    background: #dc3545;
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  .mob-nav-item { position: relative; }
}

/* ================================================================
   4. PAGES STATIQUES (index, connexion, inscription, paiement,
      exercer-en-france, annonces, 404, admin)
   ================================================================ */
@media (max-width: 768px) {

  /* ── index.html / landing ── */
  .hero-section, .landing-hero {
    padding: 2rem 1rem;
    text-align: center;
  }
  .hero-section h1, .landing-hero h1 {
    font-size: 1.75rem;
  }
  .features-grid, .pricing-grid, .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .nav-links { display: none; } /* menu desktop caché */
  .hamburger-btn { display: flex !important; } /* bouton burger affiché */

  /* ── connexion.html / inscription.html ── */
  .auth-container, .form-container {
    padding: 1.5rem 1rem;
    margin: 1rem .75rem;
    border-radius: 16px;
  }

  /* ── paiement.html ── */
  .payment-card, .plan-card {
    padding: 1.25rem;
    border-radius: 14px;
  }
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* ── exercer-en-france.html / annonces.html ── */
  .content-grid, .articles-grid, .annonces-grid {
    grid-template-columns: 1fr !important;
  }
  .article-card, .annonce-card {
    border-radius: 14px;
  }

  /* ── admin.html ── */
  .admin-layout {
    grid-template-columns: 1fr !important;
  }
  .admin-sidebar {
    display: none; /* sidebar masqué, accès via menu */
  }
  .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 404.html ── */
  .error-page {
    padding: 2rem 1rem;
    text-align: center;
  }
  .error-code {
    font-size: 5rem;
  }

}

/* ================================================================
   5. UTILITAIRES RESPONSIVE
   ================================================================ */

/* Cacher uniquement sur mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
}

/* Cacher uniquement sur desktop */
@media (min-width: 769px) {
  .show-mobile { display: none !important; }
  .show-mobile-flex { display: none !important; }
  #mobileBottomNav { display: none !important; }
}