/* ═══════════════════════════════════════════════════════════════
   Mobile / iPhone (≤ 767 px) — surcouche responsive globale.
   Chargée après luxwave*.css. Référence : iPhone 13 (390 × 844, Safari).
   Principes : jamais de défilement horizontal de page, champs ≥ 16 px
   (Safari iOS zoome sinon), cibles tactiles ≥ 40 px, encoche / barre
   d'accueil respectées (env(safe-area-inset-*)).
   ═══════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Éléments du tiroir réservés au mobile */
.sidebar-mobile-only { display: none; }

@media (max-width: 767px) {
  /* ── Barre du haut : menu, logo, recherche, notifications ── */
  .topbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .topbar-desktop-only { display: none !important; }
  .topbar-right { gap: 10px; margin-left: auto; }
  .topbar-right > a { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .topbar-logo { min-width: 0; flex-shrink: 1; }
  .topbar-logo-img { height: 28px; max-width: 150px; object-fit: contain; object-position: left center; }
  .hamburger-btn { min-width: 40px; min-height: 40px; padding: 0 6px; }

  /* ── Tiroir latéral ── */
  .sidebar {
    width: min(86vw, 320px);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .sidebar a { min-height: 40px; display: flex; align-items: center; }
  .sidebar-mobile-only { display: block; }
  .sidebar-mobile-countries { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
  .sidebar-mobile-countries a {
    min-height: 36px !important; min-width: 52px; padding: 0 12px; border-radius: 6px;
    background: var(--gray-100, #f1f5f9); justify-content: center; font-weight: 700;
  }
  .sidebar-mobile-countries a.active { background: var(--blue, #1565C0); color: #fff !important; }
  .sidebar-mobile-lang { margin: 4px 0 8px; }
  /* Le sélecteur de langue est stylé pour la barre bleue : recolorer sur fond clair */
  .sidebar-mobile-lang button {
    color: var(--navy, #0A1628) !important; background: var(--gray-100, #f1f5f9) !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important; min-height: 40px;
  }
  .sidebar-mobile-btn {
    display: block; width: 100%; min-height: 40px; text-align: left; padding: 0 12px;
    background: none; border: none; color: inherit; font: inherit; opacity: 0.85; cursor: pointer;
  }
  .sidebar-mobile-logout { color: #f87171; }

  /* ── Zone de contenu ── */
  .site-main {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    /* barre de navigation basse (58 px) + barre d'accueil iOS */
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    overflow-x: clip;
    min-width: 0;
    max-width: 100vw;
  }
  .site-main img, .site-main video, .site-main iframe, .site-main canvas, .site-main svg:not([width]) {
    max-width: 100%;
  }
  .site-main img { height: auto; }
  .site-main pre, .site-main code { white-space: pre-wrap; word-break: break-word; }
  .site-main h1, .site-main h2, .site-main h3 { overflow-wrap: anywhere; }
  .site-main p, .site-main li { overflow-wrap: anywhere; }
  .site-main a { overflow-wrap: break-word; }

  /* Grilles et rangées : une colonne, retour à la ligne */
  .two-col, .charts-row, .kpi-grid.cols-3, .kpi-grid.cols-4 { grid-template-columns: 1fr !important; }
  .page-header, .page-actions, .toolbar, .filter-bar { flex-wrap: wrap; gap: 8px; }

  /* Grilles inline à colonnes fixes (classe ajoutée dans le JSX) */
  .rgrid { grid-template-columns: minmax(0, 1fr) !important; }
  .rgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rgrid > *, .rgrid-2 > * { min-width: 0; }

  /* Recherche de la barre du haut : prend la place restante */
  .header-search { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 6px; }

  /* Cartes KPI : jamais plus larges que leur colonne */
  .kpi-grid > * , .kpi-card { min-width: 0; }
  .kpi-card .kpi-value, .kpi-card .kpi-label, .kpi-card .kpi-sub { overflow-wrap: anywhere; white-space: normal; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Tableaux : défilement horizontal dans leur propre boîte */
  .site-main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Cellules : largeur minimale lisible — le tableau défile plutôt que d'écraser
     ses colonnes (texte coupé lettre par lettre) */
  .site-main th, .site-main td { overflow-wrap: normal; word-break: normal; min-width: 76px; }
  .site-main td button, .site-main td a { white-space: nowrap; }

  /* Formulaires : 16 px minimum (sinon Safari iOS zoome au focus) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; max-width: 100%; }

  /* Cibles tactiles */
  .btn, button.btn { min-height: 40px; }

  /* Modales génériques : pleine largeur utile */
  .modal, .modal-content, .dialog { max-width: calc(100vw - 24px) !important; }

  /* Pied de page au-dessus de la barre basse */
  .site-footer { padding-bottom: 8px; }

  /* Panneau assistant IA : plein écran (400 px ne tiennent pas sur 390) */
  .ai-chat-panel { width: 100vw !important; max-width: 100vw !important; padding-bottom: env(safe-area-inset-bottom); }

  /* ── Documents ── */
  .doc-actions {
    margin-left: 0 !important; width: 100%;
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important;
  }
  .doc-actions > button, .doc-actions > a {
    min-height: 44px; display: flex !important; align-items: center; justify-content: center;
    text-align: center; box-sizing: border-box; font-size: 14px !important;
  }
  .doc-list-header h1 { flex: 1 1 100%; }
  .doc-list-actions { margin-left: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-list-actions > *, .doc-list-actions button { width: 100%; min-height: 44px; }
  .doc-filter-bar > input { flex: 1 1 100%; }
  .doc-filter-bar > select { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .doc-filter-bar > span { flex: 1 1 100%; margin-left: 0 !important; }
  .doc-pdf-frame { height: calc(100dvh - 150px) !important; min-height: 420px; }
  .doc-preview { margin-left: -12px; margin-right: -12px; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }

  /* Bouton assistant IA : au-dessus de la barre de navigation basse */
  .ai-chat-fab { bottom: calc(70px + env(safe-area-inset-bottom)) !important; right: 12px !important; }
}