/* Hypergol (bar) — ajouts au socle visuel de Ground Control (../passerelle/passerelle.css), comme Apollo.
   Conditions : bar en soirée, lumière basse, mains mouillées ou collantes, tablette posée au comptoir et lue à 50-60 cm,
   téléphone du responsable pour l'édition. D'où le thème foncé, des cibles de 56 px et des doses lisibles d'un coup d'œil.
   Les écrans (recettes.html, edition.html) ajoutent leurs propres feuilles : ce fichier ne porte que le cadre. */

.tablette { grid-template-rows: auto 64px auto minmax(0, 1fr) 64px; }
/* Un seul panneau par écran : chaque écran redéfinit ses colonnes au besoin */
.corps { grid-template-columns: minmax(0, 1fr); }

/* Marque : la goutte orange de l'icône devant le nom, la seule touche de décor de l'en-tête */
.entete .marque { display: inline-flex; align-items: center; gap: var(--espace-3); }
.entete .marque svg { width: 26px; height: 32px; flex: none; fill: var(--c-accent); }

/* Doses : les chiffres restent alignés d'une ligne à l'autre, et « ¾ oz » ne se coupe jamais */
.dose { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dose-grande { font-size: var(--taille-chiffre); line-height: 1.15; }

/* Gros boutons du bar (mains mouillées) */
.btn-bar { min-height: var(--cible-ligne); font-size: var(--taille-corps-fort); padding: 0 var(--espace-6); }

/* Cibles tactiles : jamais sous la cible minimale de l'interface (56 px) */
.nav a, .btn { min-height: var(--cible-minimum); }

@media (max-width: 760px) {
  /* Téléphone : colonne simple (passerelle.css) ; le corps prend la hauteur restante, la navigation reste en bas */
  .corps { flex: 1 1 auto; }
  .nav { position: sticky; bottom: 0; }
  /* En-tête : langue, « Changer de personne », santé et heure passent à la ligne plutôt que de se chevaucher */
  .entete .droite { flex-wrap: wrap; justify-content: flex-start; gap: var(--espace-2) var(--espace-3); }
  .entete .droite .heure { margin-left: auto; }
  /* Jusqu'à quatre onglets (Recettes, Inventaire, Ajustements, Édition) : un nom long passe sur deux lignes plutôt que d'être coupé */
  .nav a { white-space: normal; text-align: center; line-height: 1.15; padding: 0 var(--espace-1); font-size: var(--taille-meta); overflow-wrap: anywhere; }
}