/*
 * HUA — couche d'adaptation aux appareils, chargée après Tailwind sur les 37 écrans.
 *
 * Elle ne change ni les polices, ni les couleurs, ni la composition voulue par les maquettes :
 * elle corrige ce que des mesures réelles ont montré le 14 septembre 2026 dans le navigateur du
 * propriétaire, sur les 37 écrans, en téléphone (390 px), tablette (768 px) et ordinateur
 * (1440 px). Aucun contenu n'est masqué : les débordements de contenu sont corrigés à la source
 * (bandes de rune des écrans de résultat, dans leurs modules), seuls les décors sont rognés.
 */

/* 0. Typographie. Les écrans embarquent deux polices : Inter et JetBrains Mono (`fonts.css`,
 *    fichiers dans `design/fonts`). La classe utilitaire `font-mono` de Tailwind, employée
 *    57 fois sur 20 écrans, retombait sur la chasse fixe du système : la même donnée — un
 *    identifiant, une empreinte — s'affichait dans deux dessins différents selon l'élément.
 *    Elle prend maintenant la police de la marque, avec les mêmes replis qu'avant. */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* 0 bis. Écrans à carte centrée (récupération, connexion visage + voix, liaison d'appareil). La maquette fige le corps à la hauteur
 *    de l'écran (`height: 100vh; overflow: hidden`) et centre la carte. Une carte plus haute que l'écran — courriel et mot de passe
 *    de l'identité, cadre du code neuf, « mot de passe oublié » — était coupée en bas, sans défilement possible : mesuré le
 *    7 octobre 2026 à 1024 × 768 après une capture du propriétaire, la récupération montrait 768 px d'une carte de 1 860, la
 *    connexion visage + voix 768 de 1 274. Le corps grandit avec la carte ; la carte reste centrée quand elle tient, et ne passe
 *    jamais au-dessus du haut de l'écran (`safe`). */
body:has(.login-card) { height: auto; min-height: 100vh; overflow: visible; }
body:has(.login-card) main { align-items: safe center; }

/* 1. Décors. Les halos `.quantum-orb` sont posés en absolu — jusqu'à 800 px de large, avec des
 *    décalages négatifs — et allongeaient la page vers la droite : 265 px sur security, 165 sur
 *    mission, 145 sur technology, 138 sur register-human, 100 sur register et register-machine,
 *    35 sur trace-gateway. `clip` coupe ce dépassement horizontal sans créer de conteneur de
 *    défilement : `position: sticky`, les barres fixes et le défilement vertical restent intacts,
 *    contrairement à `overflow-x: hidden`. */
html { overflow-x: clip; }

/* 2. Bandes de rune (`.fragment-strip` : 60 blocs, écrans de résultat Talk, Voice, Trace). Les
 *    modules donnent désormais à chaque bloc une part proportionnelle à sa densité au lieu d'une
 *    largeur en pixels : la bande remplit exactement son panneau, à toute taille d'écran. Sur
 *    téléphone, l'espacement passe à 1 px pour que les blocs restent lisibles. */
.fragment-strip { min-width: 0; overflow-x: hidden; }
@media (max-width: 640px) {
  .fragment-strip { gap: 1px; }
}

/* 3. Grilles et panneaux. Un enfant de grille ou de boîte flexible garde par défaut la largeur
 *    minimale de son contenu (`min-width: auto`) : sur téléphone, une colonne réclamait 478 px
 *    dans un conteneur de 343 px (écrans de résultat) ou 363 px dans 327 px (passerelle Trace),
 *    et poussait la page vers la droite. Mesuré sur le poste : dès que ce plancher est levé, le
 *    contenu se replie correctement et rien ne sort du panneau. */
@media (max-width: 900px) {
  .grid > *, .glass-panel, .tech-panel, .tech-item { min-width: 0; }
}

/* Marge intérieure des panneaux techniques (40 px dans la maquette) et coupure des longs jetons
   comme « API navigator.geolocation », qui imposaient à eux seuls la largeur de la colonne. */
@media (max-width: 640px) {
  .tech-panel { padding: 24px; }
  .tech-item { overflow-wrap: anywhere; }
}

/* 4. Bandeau flottant de la carte du maillage (`.header-bar`, écran unique). Titre et compteurs
 *    sur une seule ligne : « Latence Moyenne » sortait de 35 px sur téléphone et se trouvait
 *    coupée. Les compteurs passent à la ligne sous le titre. */
@media (max-width: 640px) {
  /* Vaut aussi pour le panneau de topologie que le module ajoute à la carte. */
  .ui-panel, .ui-panel * { flex-wrap: wrap; }
  .header-bar { row-gap: 10px; padding: 14px 18px; }
  .ui-panel > * { min-width: 0; }
}

/* 5. Identifiants et empreintes. Les valeurs en chasse fixe (identifiant d'entité sur 64
 *    caractères, adresse du relais, numéro de passeport) n'ont pas d'espace où se couper : sur
 *    téléphone elles sortaient de leur case, jusqu'à 307 px hors écran sur le passeport. Elles se
 *    coupent désormais en fin de ligne, et les cases d'une rangée souple peuvent rétrécir. */
@media (max-width: 900px) {
  .field-value, .val-tech, .font-mono, [class*="font-mono"] { overflow-wrap: anywhere; }
  .flex > * { min-width: 0; }
}

/* 6. Boîte de courrier (seul écran porteur de `.mail-viewer`). Dessinée pour trois colonnes
 *    (menu 280 px, liste 380 px, lecture), elle sortait de l'écran de 163 px sur téléphone : la
 *    barre supérieure ne se repliait pas et le volet de lecture restait à droite. Les trois
 *    colonnes s'empilent, la barre passe à la ligne. Le contenu reste entier. */
@media (max-width: 900px) {
  body:has(.mail-viewer) { height: auto; min-height: 100vh; overflow: visible; }
  body:has(.mail-viewer) .top-bar { height: auto; padding: 12px 16px; flex-wrap: wrap; row-gap: 10px; }
  body:has(.mail-viewer) .top-bar > div:nth-child(2) { order: 3; flex: 1 1 100%; }
  /* Le champ de recherche est figé à 300 px dans la maquette : sur téléphone il prend la place
     restante de sa ligne au lieu de pousser la barre hors de l'écran. */
  body:has(.mail-viewer) .search-bar { width: auto; min-width: 0; flex: 1 1 auto; }
  body:has(.mail-viewer) .top-bar > div:nth-child(2) { gap: 12px; }
  body:has(.mail-viewer) .app-container { flex-direction: column; overflow: visible; }
  body:has(.mail-viewer) .sidebar,
  body:has(.mail-viewer) .inbox-list {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  body:has(.mail-viewer) .mail-viewer { min-height: 55vh; }
}

/* 6 bis. Annuaire du maillage (seul écran porteur de `.explorer-sidebar`). Sur téléphone, la colonne des
 *    catégories (320 px dans la maquette) restait à côté de la liste : mesuré le 17 septembre 2026 à
 *    390 px, l'annuaire n'avait plus que 80 px de large, et les cartes de liaison (copier, Talk, Vault,
 *    retirer) sortaient de l'écran — atteignables au clavier, jamais visibles. Comme la boîte de
 *    courrier : les colonnes s'empilent, la page défile d'un bloc, et une carte tient dans la largeur.
 *    Tablette (768 px : une carte par ligne à côté des catégories) et ordinateur ne bougent pas. */
@media (max-width: 767px) {
  body.hua-side-full:has(.explorer-sidebar) { height: auto !important; min-height: calc(100vh - 56px); overflow: visible; }
  body:has(.explorer-sidebar) .app-container { flex-direction: column; overflow: visible; }
  body:has(.explorer-sidebar) .explorer-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); padding: 24px 16px; gap: 20px; }
  /* Les filtres passent en pastilles sur deux lignes : empilés un par ligne, ils repoussaient la liste à
     670 px sous le haut de la page. */
  body:has(.explorer-sidebar) .filter-group { flex-direction: row; flex-wrap: wrap; }
  body:has(.explorer-sidebar) .filter-group > :first-child { flex-basis: 100%; }
  body:has(.explorer-sidebar) .filter-btn { padding: 8px 12px; gap: 8px; }
  body:has(.explorer-sidebar) .main-content { padding: 24px 16px; overflow: visible; }
  body:has(.explorer-sidebar) .node-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 7. Pieds de page en rangée (accueil, Technologie). Sur tablette (768 à 1023 px), la maquette les
 *    met en ligne (`md:flex-row`, `justify-between`) et la règle 5 laisse chaque bloc rétrécir :
 *    mesuré le 16 septembre 2026 à 768 px sur l'accueil, « HUA Protocol — Hybrid Sovereignty » et
 *    « Éphémère • Programmé • Isolé » se coupaient sur deux lignes et « Documentation » touchait
 *    « Network ». Les blocs gardent leur largeur et la rangée passe à la ligne, centrée. Ordinateur
 *    (une seule ligne, inchangée) et téléphone (blocs empilés) ne bougent pas. */
@media (min-width: 768px) and (max-width: 1023px) {
  footer .md\:flex-row.justify-between { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
  footer .md\:flex-row.justify-between > * { flex: 0 0 auto; min-width: auto; }
}

/* 8. Pastille de télémétrie du traceur (seul écran porteur : trace-active). Centrée par `left: 50%` et un
 *    décalage, elle ne dispose que de la moitié de la largeur : à 390 px, l'étiquette « Précision » tenait dans
 *    39 px pour 56 de texte et sortait de sa boîte (mesuré le 20 septembre 2026, épreuve N14, bulle réelle).
 *    Sur téléphone, elle prend toute la largeur pour se centrer, resserre ses marges, et se pose au-dessus des
 *    boutons du bas qu'elle recouvrait. Aucune couleur touchée. */
@media (max-width: 640px) {
  .absolute.bottom-10.left-1\/2:has(> .flex > .text-center > .label-tech) {
    left: 0; right: 0; --tw-translate-x: 0; transform: none;
    display: flex; justify-content: center; padding: 0 12px;
    /* Les deux boutons du traceur occupent le bas à droite (de 32 à 112 px du bord) : sur téléphone la pastille,
       centrée, passait dessus. Elle se pose au-dessus d'eux. */
    bottom: 8rem;
  }
  .absolute.bottom-10.left-1\/2:has(> .flex > .text-center > .label-tech) > .flex { gap: 1rem; padding-left: 1rem; padding-right: 1rem; }
  .absolute.bottom-10.left-1\/2 .label-tech { white-space: nowrap; }
}