/* Outil · Unités (Unit converter) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : un-
   Même mise en page que Devises : à gauche (en haut sur téléphone) les catégories, la carte (valeur → résultat), la formule ;
   à droite la valeur dans toutes les unités. Emplacements fixes : tableau de 10 lignes, même vides. */
.un .outil-fixe { align-items: stretch; }

.un-carte { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 18px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.un-ligne { display: flex; flex-direction: column; gap: var(--libelle); }
.un-ligne .groupe { padding: 0; }
.un-paire { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.un-nombre { width: 100%; min-width: 0; height: 60px; border: 0; outline: none; border-radius: 14px; background: rgba(242, 240, 235, .04); box-shadow: inset 0 0 0 1px var(--filet);
  padding: 0 14px; text-align: left; color: var(--papier); font: 700 clamp(22px, 6.5vw, 30px)/1 var(--display); letter-spacing: -.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: box-shadow .3s var(--courbe); }
.un-nombre:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.un-resultat { color: var(--peche); cursor: copy; }
.un-select { position: relative; width: 116px; height: 60px; border-radius: 14px; display: flex; align-items: center; padding: 0 30px 0 14px; cursor: pointer;
  background: rgba(242, 240, 235, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f2f0eb' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 12px center;
  box-shadow: inset 0 0 0 1px var(--filet); transition: box-shadow .3s var(--courbe); }
.un-select b { font: 600 16px/1 var(--mono); letter-spacing: .04em; color: var(--papier); }
/* Le vrai menu, invisible, par-dessus : un toucher ouvre la liste du système (avec les noms des devises) */
.un-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.un-select:focus-within { box-shadow: inset 0 0 0 1.5px var(--papier); }
/* ⇅ : à cheval entre les deux lignes, à droite */
.un-inverser { position: absolute; right: 144px; top: 50%; translate: 0 -50%; z-index: 1; background: var(--noir); }
.un-inverser svg { transition: rotate .4s var(--courbe); }
.un-inverser.tourne svg { rotate: 180deg; }

.un-formule { margin: -6px 0 0; height: 1.6em; text-align: center; font: var(--valeur); line-height: 1.6; letter-spacing: .04em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.un-rangee { height: 44px; flex: none; align-items: center; padding: 0; cursor: pointer; }
.un-rangee.vide { cursor: default; border-bottom-color: transparent; }
.un-rangee .nom { font: 400 14px/1.3 var(--corps); color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-rangee .val { font: 500 14px/1.3 var(--mono); color: var(--papier); overflow: hidden; text-overflow: ellipsis; }
.un-tableau { display: flex; flex-direction: column; }

/* Les catégories : tout en haut, au-dessus des deux colonnes, en onglets dans une seule pilule (comme .seg) ;
   sur téléphone la pilule défile de côté */
.un-onglets { display: flex; gap: 2px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); overflow-x: auto; scrollbar-width: none; }
.un-onglets::-webkit-scrollbar { display: none; }
.un-onglets button { flex: 1 0 auto; border: 0; background: none; border-radius: 999px; padding: 10px 12px; white-space: nowrap; cursor: pointer;
  font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.un-onglets button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.un-onglets button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
@media (min-width: 960px) {
  .un.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 24px; }
  .un-onglets { grid-column: 1 / -1; margin-top: 4px; }
}