/* ============================================================================
   JARVICE mobile - COUCHE LISIBILITE (chargee APRES style.css).

   Regle : aucune couleur ni structure de style.css n est reprise. Cette
   feuille ne fait que remonter les tailles de texte (jamais sous 12 px sur
   un telephone), retirer les majuscules forcees du lanceur, et reparer deux
   details de mise en page (barre du haut, ecran d appairage).

   Echelle (variables reprises par lanceur.css, etats.css, aide.css) :
     --m-micro   12 px  petites etiquettes, journaux, sorties brutes
     --m-petit   13 px  intitules de champ et de section, descriptions
     --m-base    15 px  texte courant
     --m-lecture 16 px  lecture longue, titres d etats vides
     --m-titre   18 px  titres
   ========================================================================== */

:root {
  --m-micro: 12px;
  --m-petit: 13px;
  --m-base: 15px;
  --m-lecture: 16px;
  --m-titre: 18px;
  /* Contraste : le gris des textes secondaires (aides, sous-titres, preuves, "mesure a
     l instant"...) passe de #64748B (4,2:1 sur le fond) a un gris plus clair, >= 4,5:1 sur
     le fond ET sur les panneaux. Les couleurs principales ne bougent pas. */
  --muted-2: #8392A8;
}

/* textes qui utilisaient le gris le plus sombre (--muted-3) : meme gris secondaire */
.sync,
.separateur,
.famille-tete small,
.tampon,
.etoile {
  color: var(--muted-2);
}
.etoile.active { color: var(--warn); }

/* boutons principaux : le blanc sur le cyan n atteignait que 2,9:1 ; le texte prend la couleur du fond (6,9:1), le cyan ne change pas */
.mini.primaire, .mini.primaire:active { color: var(--fond); }

/* --- le contenu defilant ne finit jamais sous la barre du bas ------------------
   (Parler et Projets ont leur propre mise en page : composer et pied collants.) */
.vue { padding-bottom: calc(var(--lanceur-h) + var(--sab) + 24px); }
.vue[data-vue="parler"], .vue[data-vue="projets"] { padding-bottom: 0; }

/* --- tout ce qui descendait sous 12 px remonte a 12 px ------------------- */
.tampon,
.msg.jarvice::before,
.marqueur,
.chip,
.carte-eyebrow,
.sync,
.mode,
.separateur,
.confirm-tete,
.famille-tete,
.famille-tete small,
.gauge label,
.gauge span,
.carte h5 small,
.outil-nom .famille,
.outil-param,
.lance-fenetre,
.msg.act,
.alloc .row,
.alloc .row b,
.journal,
.sortie,
.outil-chevron {
  font-size: var(--m-micro);
}

/* --- une vue est une colonne qui defile : ses blocs ne doivent pas s ecraser.
   Sans cela, la rangee de pastilles de l onglet Outils (overflow-x:auto, donc
   min-height 0) se tasse a quelques pixels des que la liste est longue. */
.vue > :not(.chat) { flex-shrink: 0; }

/* --- etiquettes de champ et titres de section : 13 px -------------------- */
.field,
.titre-section,
.alloc h4 {
  font-size: var(--m-petit);
}

/* --- lanceur : plus aucune majuscule forcee ------------------------------ */
.lance-fenetre {
  text-transform: none;
  letter-spacing: 0;
}
.chip { letter-spacing: .3px; }
.marqueur { letter-spacing: .5px; }

/* --- jauges : la colonne des valeurs doit contenir "100% / 16 fils" a 12 px */
.gauge { grid-template-columns: 44px 1fr 124px; }

/* --- barre du haut : le nom de la vue se lit en entier -------------------
   Le bloc .brand prend la place restante, le nom de la vue (.sub) ne se
   raccourcit qu au-dela de 60vw ; c est la pastille machine qui cede la
   place (son nom de machine passe en ellipse) et non le titre. */
.titlebar { padding-left: 12px; padding-right: 12px; gap: 8px; }
.titlebar .brand { flex: none; gap: 7px; }
.titlebar .brand .name { flex: none; letter-spacing: 1px; }
.titlebar .brand .sep { margin: 0; }
.titlebar .brand .pastille { display: none; }
.brand .sub {
  font-size: var(--m-petit);
  max-width: none;
  flex: none;
  letter-spacing: 0;
  white-space: nowrap;
}
/* le bloc de gauche (pastille d etat, nom, nom de la vue, rond d aide) ne se raccourcit
   jamais : c est le nom de la machine qui cede la place, en ellipse */
.titlebar .winbtns { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
.titlebar .chip-bouton { max-width: 32vw; padding: 6px 7px; gap: 6px; }
.titlebar .chip-bouton #chipMachine { min-width: 0; flex: 0 1 auto; }
.titlebar .chip-bouton #chipLatence { flex: none; }
.titlebar .chip-bouton i { flex: none; }

/* --- ecran d appairage ---------------------------------------------------
   Le bouton ne s etire plus (.mini avait flex:1 : dans une colonne, il
   grandissait de toute la hauteur libre) et le contenu part du haut. */
.accueil {
  justify-content: flex-start;
  gap: 12px;
}
.accueil .reactor-wrap.compact { flex: none; }
#app-valider {
  height: 50px;
  min-height: 50px;
  flex: none;
}
.aide-code {
  font-size: var(--m-base);
  line-height: 1.5;
  color: var(--texte);
  margin-bottom: -2px;
}