/* Corrections mobile (≤ 640 px) : aucune page ne doit défiler latéralement. Chargé après les styles de chaque page. */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 640px) {
  /* —— Application : barre du haut —— */
  .topbar-inner { gap: 8px; padding: 10px 12px; }
  .topbar-inner > * { min-width: 0; }
  .topbar-actions { gap: 2px; flex: none; }
  .topbar-actions .lang-switcher, .topbar-actions [data-lang-switcher] { transform: scale(.85); transform-origin: right center; margin: 0 -4px; }
  .topbar-actions button, .topbar-actions .user-avatar { flex: none; }
  .community-switcher, .brand-community { min-width: 0; flex: 1 1 auto; overflow: hidden; }

  /* Recherche : une icône qui s'ouvre en barre pleine largeur */
  .search-bar { display: flex !important; width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; border-radius: 50%; flex: none; cursor: pointer; }
  .search-bar input { display: none; }
  .search-bar.open { position: fixed; left: 12px; right: 12px; top: 8px; width: auto; height: 48px; padding: 0 16px; border-radius: 999px; justify-content: flex-start; gap: 10px; z-index: 2600; background: var(--background, #fff); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
  .search-bar.open input { display: block; flex: 1; }
  .search-bar.open .search-panel { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; max-height: 70vh; }

  /* Navigation par onglets : défilement latéral doux, sans déborder de la page */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }

  /* Calendrier, cartes, listes */
  .cal-actions, .cal-view-toggle { flex-wrap: wrap; max-width: 100%; }
  .main, .layout, .content { min-width: 0; }
  img, video, canvas, svg { max-width: 100%; }
  table { display: block; overflow-x: auto; }
  .modal { max-width: calc(100vw - 24px) !important; }
  .modal-body, .settings-content { min-width: 0; }

  /* Cibles tactiles : 40 px minimum */
  button, .tab, select { min-height: 36px; }
}

@media (max-width: 380px) {
  .topbar-inner { padding: 8px; }
}

/* Très petits écrans : l'avatar de la communauté suffit, le nom libère la place de la recherche et des icônes */
@media (max-width: 420px) {
  .community-switcher .community-name { display: none; }
  .community-switcher { padding-right: 6px; }
}

/* Onglet Communauté : sous 1000 px la colonne latérale passe sous le fil (sinon le fil s'écrase à 0 px de large) */
@media (max-width: 1000px) {
  .main.layout-with-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
  .main.layout-with-sidebar .sidebar { position: static; width: 100%; }
  .main { padding-left: 12px; padding-right: 12px; }
}