/* ============================================================
   FISS - mobile.css   (téléphone : 768 px et moins)
   Finition visuelle de l'application sur téléphone, chargée en dernier. Les sélecteurs commencent par
   « html body » pour passer devant les règles mobiles injectées par dashboard.js (même !important,
   spécificité plus forte).
   - barre du haut compacte : plus rien ne déborde (photo de profil coupée)
   - accueil : sections en liste compacte (icône, titre, description, nombre) au lieu de grandes cartes
   - barre de navigation en bas pour le personnel aussi (Accueil, Ma journée/EDT, Chat, Notifications, Menu)
   - chat équipe en plein écran, comme une application de messagerie
   ============================================================ */
@media (max-width: 768px) {
  /* ── Barre du haut ── */
  html body .app-topbar { gap: 4px !important; padding-left: 8px !important; padding-right: 8px !important; min-height: 52px !important; }
  html body .app-topbar-logo { gap: 6px !important; min-width: 0; flex-shrink: 1 !important; }
  html body .app-topbar-logo img { width: 30px !important; height: 30px !important; }
  html body .app-topbar-logo-text { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
  html body .app-topbar-logo-text small { font-size: 8.5px !important; letter-spacing: .06em !important; overflow: hidden; text-overflow: ellipsis; }
  html body #topbar-section-crumb { display: none !important; }
  html body .app-topbar-notif { width: 38px !important; height: 38px !important; font-size: 19px !important; padding: 0 !important; flex-shrink: 0 !important; }
  html body #hamburger { font-size: 22px !important; padding: 4px 6px !important; flex-shrink: 0; }
  html body #topbar-btn-webmail { padding: 0 !important; width: 38px; height: 38px; justify-content: center; margin-right: 0 !important; background: transparent !important; border: 0 !important; font-size: 18px !important; }
  html body .app-topbar-user { padding: 4px !important; flex-shrink: 0 !important; }
  html body .app-topbar-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  html body .ctx-switch { padding: 6px 8px !important; flex-shrink: 0; }

  /* ── Accueil ── */
  html body #home-screen { padding: 14px 12px !important; }
  html body .home-greeting { margin-bottom: 14px !important; }
  html body .home-greeting-title { font-size: 21px !important; line-height: 1.25; }
  html body .home-greeting-sub { font-size: 12.5px !important; }
  html body #role-widgets-row, html body #home-house-banner { padding: 0 !important; margin: 0 0 6px; }
  html body #role-widgets-row > div { padding: 2px 2px 10px !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html body #role-widgets-row > div::-webkit-scrollbar { display: none; }
  html body #role-widgets-row > div > div { scroll-snap-align: start; border-radius: 14px !important; min-width: 118px !important; box-shadow: 0 1px 3px rgba(10,35,82,.06); }
  /* Sections : une liste compacte, comme les réglages d'un téléphone */
  html body .home-sections-grid { display: flex !important; flex-direction: column; gap: 0 !important; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  html body .home-section-card {
    flex-direction: row !important; align-items: center !important; gap: 12px !important;
    padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important; box-shadow: none !important; transform: none !important;
  }
  html body .home-section-card:last-child { border-bottom: 0 !important; }
  html body .home-section-card:active { background: var(--bg2); }
  html body .home-section-card::after { display: none; }
  html body .home-section-card > div:nth-child(2) { flex: 1; min-width: 0; }
  html body .home-section-card-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; font-size: 21px !important; flex-shrink: 0; }
  html body .home-section-card-title { font-size: 15px !important; }
  html body .home-section-card-desc { font-size: 12px !important; margin-top: 1px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .home-section-card-count { flex-shrink: 0; font-size: 11px !important; padding: 3px 9px !important; }
  html body .home-section-card-count::after { content: ' ›'; }

  /* ── Pages ── */
  html body .section-content { padding: 12px !important; }
  html body .btn-retour-app { margin: 0 0 10px !important; padding: 7px 12px !important; font-size: 13px !important; }
  html body .section-title { font-size: 19px !important; }
  html body .section-sub { font-size: 12.5px !important; }
  html body .card { border-radius: 14px !important; }

  /* ── Barre du bas (personnel, familles, élèves) ── */
  html body .fiss-bottom-nav { height: calc(60px + env(safe-area-inset-bottom, 0px)) !important; box-shadow: 0 -1px 0 var(--border), 0 -6px 16px rgba(10,35,82,.06) !important; }
  html body .fiss-bottom-nav-item { font-size: 10.5px !important; gap: 1px; position: relative; }
  html body .fiss-bottom-nav-item .icon { font-size: 21px !important; }
  html body .fiss-bottom-nav-item.active { color: var(--primary, #0A2352) !important; }
  html body .fiss-bottom-nav-item.active::before { content: ''; position: absolute; top: 2px; width: 40px; height: 28px; border-radius: 14px; background: rgba(10,35,82,.08); z-index: -1; }
  html body .fiss-bottom-nav-item .bn-badge { position: absolute; top: 2px; left: calc(50% + 6px); background: #25D366; color: #fff; border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

  /* ── Chat équipe en plein écran ── */
  html body.page-chat #mobile-back-btn { display: none !important; }
  html body.page-chat .section-content, html body.page-chat #page-content { padding: 0 !important; }
  html body.chat-fil .fiss-bottom-nav { display: none !important; }
  html body.page-chat .chat-shell {
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
    height: calc(100dvh - 52px - env(safe-area-inset-top, 0px) - 60px - env(safe-area-inset-bottom, 0px)) !important; max-height: none !important;
  }
  /* Discussion ouverte : par-dessus tout (barre du haut et barre du bas), comme une appli de messagerie */
  html body.page-chat .chat-shell.thread-open { position: fixed !important; inset: 0 !important; height: 100dvh !important; z-index: 99990 !important; }
  html body.page-chat .chat-shell.thread-open .chat-hd { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
  html body .chat-menu { z-index: 100003 !important; }
  html body .chat-lightbox { z-index: 100004 !important; }
  html body .chat-side-hd { padding: 10px 14px !important; }
}