/* mobile-ux.css — audit mobile 2026-09-03 (vue git) : boutons & navigation.
 * Surcharges ≤640 px, isolées de styles.css pour ne pas entrer en conflit
 * avec le WIP en cours sur ce fichier. Vérifié : 390×844, 0 débordement. */
@media (max-width: 640px) {
  .home { padding-top: 36px; }
  /* Clarté mobile (05/09) : UNE action principale d'abord — le collage
     d'URL juste sous le titre, la recherche GitHub reléguée (elle se
     libelle elle-même par placeholder). L'ordre visuel ≠ ordre DOM (tab
     suit le DOM pour l'instant). */
  .home-hero { display: flex; flex-direction: column; }
  .home-hero h1 { order: 0; }
  .home-hero #repo-form { order: 1; }
  .home-hero .quick { order: 2; }
  .home-hero .lead { order: 3; }
  .home-hero .search-sec { order: 4; margin-top: 16px; }
  .home-hero .or-divider { display: none; }
  .home-hero #status { order: 5; }
  .topbar { padding: 8px 12px; gap: 6px; }
  .top-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .quick button { min-height: 42px; padding: 0 14px; }
  .repo-form button[type="submit"] { flex: 1 1 100%; min-height: 48px; }
  /* HUD : à 390 px les actions étaient écrasées à 0 (flex sans wrap) —
     deux rangées : identité pleine largeur, puis actions tactiles ≥42 px. */
  .hud-top { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 10px 12px; }
  .hud-id { flex: 1 1 100%; max-width: none; }
  .hud-actions { width: 100%; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
  .hud-actions .btn { min-height: 44px; min-width: 44px; padding: 0 10px; }
  /* HUD icônes seul sur mobile (une rangée nette — les titres restent dans
     les tooltips) : 7 boutons compacts au lieu de 3 rangées de pastilles. */
  .hud-actions .lbl { display: none; }
  /* Pastille d etat : sous le HUD mobile (~248 px, 3 rangees d actions). */
  .stream-pill { top: 262px; }
}

/* ── Tranche 641-1024 px (tablettes, petits laptops) — le site n'avait qu'un
   breakpoint ≤640 (audit 390 px du 03/09) : entre 641 et 1024, le HUD et les
   formulaires n'étaient pas adaptés. Surcharges légères, isolées ici. ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .home { padding: 44px 20px 32px; }
  .repo-form input { flex-basis: 280px; }
  /* HUD : à 768 px, identité + 6 actions débordaient sans wrap (même faille
     que ≤640, corrigée en 2 rangées sur mobile). */
  .hud-top { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
  .hud-actions { flex-wrap: wrap; justify-content: flex-end; }
  .stream-pill { top: 148px; right: 14px; }
  /* Drawers (chat, compte, pièces, pages) : sur tablette portrait, la largeur
     fixe 440 px mange l'écran — cap sur 92vw. */
  .drawer, .chat-drawer { width: min(92vw, 440px); }
}

/* ── Cibles tactiles : jamais sous 40 px quand le pointeur est coarse (iPad,
   tactile) — la règle ≤640 ne couvrait que le mobile étroit. ── */
@media (pointer: coarse) {
  .btn, .btn-small, .quick button, .repo-form button[type="submit"],
  .top-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .hud-actions .btn { min-height: 44px; }
}