/* ═══════════════════════════════════════════════════════════════════
   mobile.css — coque adaptative (telephone d'abord)
   Charge APRES styles.css. Purement additif : aucune regle existante
   n'est modifiee. Retrait = supprimer les 2 lignes de index.html.
   Point de rupture : 900px (tablette portrait incluse).
   ═══════════════════════════════════════════════════════════════════ */

/* Le bouton et le voile n'existent qu'en dessous du point de rupture */
.mnav-burger, .mnav-scrim { display: none; }

@media (max-width: 900px) {

  /* 1 ── Bouton d'ouverture, fixe en haut a gauche */
  .mnav-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 9px; left: 10px; z-index: 1300;
    width: 38px; height: 38px; padding: 0;
    border-radius: 9px; border: 1.5px solid var(--p3);
    background: #fff; color: var(--p);
    font-size: 1rem; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
    transition: transform .12s ease;
  }
  .mnav-burger:active { transform: scale(.93); }

  /* la barre du haut laisse la place au bouton */
  .nav { padding-left: 58px !important; }

  /* 2 ── La barre laterale devient un tiroir hors ecran.
         !important obligatoire : app-core.js pose position/overflow en inline. */
  .layout { display: block !important; }
  aside.sidebar {
    position: fixed !important;
    top: 56px; left: 0; bottom: 0;
    height: auto !important;
    width: 264px !important;
    min-width: 264px !important;
    max-width: 84vw;
    margin-left: 0 !important;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 2px 0 20px rgba(15, 23, 42, .16);
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.mnav-open aside.sidebar { transform: translateX(0); }

  /* 3 ── Le repli « bureau » n'a pas de sens ici. On le neutralise
         sans jamais toucher a la preference localStorage. */
  body.sidebar-collapsed aside.sidebar {
    width: 264px !important; min-width: 264px !important;
    margin-left: 0 !important; overflow-y: auto !important;
  }
  body.sidebar-collapsed aside.sidebar > *:not(.sidebar-toggle) {
    opacity: 1 !important; pointer-events: auto !important;
  }
  .sidebar-toggle { display: none !important; }

  /* 4 ── Le contenu occupe toute la largeur */
  .layout > *:not(aside.sidebar) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }

  /* 5 ── Voile */
  .mnav-scrim {
    display: block;
    position: fixed; top: 56px; right: 0; bottom: 0; left: 0;
    background: rgba(15, 23, 42, .42);
    z-index: 1190; opacity: 0; pointer-events: none;
    transition: opacity .24s ease;
  }
  body.mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }
  body.mnav-open { overflow: hidden; }

  /* 6 ── Cibles tactiles dans le menu */
  .sidebar-item { padding: 10px 12px !important; font-size: .86rem !important; }

  /* 7 ── Bandeau de titre : 13 ecrans partagent .page-head.
         La rangee horizontale comprimait le titre a gauche et empilait
         les pastilles de filtre en colonne. On passe en colonne nette. */
  .page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .page-head > div { min-width: 0; }
  .page-title { font-size: 1.15rem !important; }
  .page-actions { flex-wrap: wrap !important; }
  .page-actions > * { flex: 0 1 auto; }

  /* 8 ── Barre du haut compactee : le logo prenait 200px fixes
         et poussait la recherche hors ecran. */
  .nav { padding: 0 10px 0 58px !important; }
  .nav-logo { min-width: 0 !important; font-size: .82rem !important; gap: 8px !important; }
  .nav-r { gap: 6px !important; }

  /* 9 ── Tableaux : .tbl-wrap defile deja, on evite juste
         que le contenu force la page entiere a deborder. */
  .tbl-wrap { max-width: 100%; }
  .section { min-width: 0; }

  /* 10 ── Les enfants de .page-head se partagent la ligne au lieu
         d empiler une rangee par element. Sur la page Reponses cela
         faisait 11 rangees avant le premier fil de conversation. */
  #responsesFiltersBar { gap: 6px !important; }
  #responsesFiltersBar > * {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  #responsesFiltersBar select {
    width: 100% !important; min-width: 0 !important;
    font-size: .76rem !important; padding: 0 8px !important;
  }

  .page-actions { flex-wrap: wrap !important; gap: 6px !important; }
  .page-actions > * { flex: 1 1 calc(50% - 3px) !important; min-width: 0 !important; }
  .page-actions .notif-dropdown { flex: none !important; }
  .page-actions .btn {
    width: 100%; justify-content: center;
    font-size: .74rem !important; padding: 0 8px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 11 ── Onglets et pastilles : moins de hauteur perdue */
  .page-head { margin-bottom: 10px !important; }

  /* 12 ── Titres : le HTML porte un style inline (font-size:1.3rem sur
         .page-title, .72rem sur .page-sub) qui bat la feuille de style.
         Il faut !important pour reprendre la main. */
  .page-title { font-size: 1.08rem !important; line-height: 1.25 !important; }
  .page-sub   { font-size: .7rem !important; line-height: 1.35 !important; }

  /* 13 ── Les rangees de pastilles de filtre : elles sont dans un
         flex-wrap mais un frere (Actualiser) occupait la moitie droite
         et cassait l enroulement. On leur rend la largeur entiere. */
  .page-head > div[style*="flex-wrap"] {
    width: 100% !important; flex: 1 1 100% !important;
    gap: 5px !important; order: 2;
  }
  .page-head > div[style*="flex-wrap"] > * { flex: 0 0 auto; }
  .camp-status-chip { font-size: .72rem !important; padding: 4px 10px !important; }
}

/* ── Telephone etroit ── */
@media (max-width: 560px) {
  .nav { padding-right: 8px !important; }
  .nav-logo-sub { display: none !important; }   /* « CRM Prospection » passait sur 2 lignes */
  .page-title { font-size: 1.05rem !important; }
  table { font-size: .72rem; }
  .btn, .nav-btn { font-size: .74rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   BARRE D ONGLETS EN BAS — la navigation principale a portee du pouce.
   Le coin superieur gauche est le point le plus difficile a atteindre
   d une main sur un telephone ; le bas de l ecran, le plus facile.
   ═══════════════════════════════════════════════════════════════════ */
.mtabs { display: none; }

@media (max-width: 900px) {
  .mtabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1250;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1.5px solid var(--p3);
    box-shadow: 0 -1px 12px rgba(15,23,42,.07);
    /* barre de gestes iPhone : sans ca, les libelles passent dessous */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px;
    border: none; background: none; cursor: pointer;
    color: var(--sub); font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
  }
  .mtab-ic { position: relative; font-size: 1.06rem; line-height: 1; }
  .mtab-lb {
    font-size: .62rem; font-weight: 600; letter-spacing: -.01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mtab.is-active { color: var(--p); }
  .mtab.is-active .mtab-lb { font-weight: 800; }
  .mtab:active { transform: scale(.94); }

  .mtab-badge {
    position: absolute; top: -5px; left: 11px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 8px; background: #ec4899; color: #fff;
    font-size: .56rem; font-weight: 800; line-height: 15px;
    text-align: center; border: 1.5px solid #fff;
  }
  .mtab-badge[hidden] { display: none; }

  /* le contenu ne doit pas passer sous la barre */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
  aside.sidebar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .mnav-scrim { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}