/* Outil · Devises (Currency converter) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : fd-
   À gauche (en haut sur téléphone) : la carte (montant → résultat), les raccourcis, le taux, l'état ; à droite : les montants courants.
   Emplacements fixes : lignes d'état en hauteur fixe, tableau de 8 lignes. */
.fd .outil-fixe { align-items: stretch; }

.fd-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); }
.fd-ligne { display: flex; flex-direction: column; gap: var(--libelle); }
.fd-ligne .groupe { padding: 0; }
.fd-paire { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.fd-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); }
.fd-nombre:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.fd-resultat { color: var(--peche); cursor: copy; }
.fd-select { position: relative; width: 108px; 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); }
.fd-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) */
.fd-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.fd-select:focus-within { box-shadow: inset 0 0 0 1.5px var(--papier); }
/* ⇅ : à cheval entre les deux lignes, à droite */
.fd-inverser { position: absolute; right: 136px; top: 50%; translate: 0 -50%; z-index: 1; background: var(--noir); }
.fd-inverser svg { transition: rotate .4s var(--courbe); }
.fd-inverser.tourne svg { rotate: 180deg; }

.fd-rapides { margin-top: -8px; }
.fd-taux { margin: 0; height: 2lh; text-align: center; text-wrap: balance; font: var(--valeur); line-height: 1.6; letter-spacing: .04em; color: var(--papier); }
.fd-etat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -8px; }
.fd-etat p { margin: 0; height: 2lh; display: flex; align-items: center; font: 400 12.5px/1.5 var(--corps); color: var(--texte2); }
.fd-etat p.alerte { color: var(--peche); }
.fd-etat .pastille { flex: none; }
.fd-etat .pastille:hover { translate: none; }

.fd-rangee { height: 44px; flex: none; align-items: center; padding: 0; cursor: copy; }
.fd-rangee .nom { font: 500 14px/1.3 var(--mono); color: var(--texte2); white-space: nowrap; }
.fd-rangee .val { font: 500 14px/1.3 var(--mono); color: var(--papier); overflow: hidden; text-overflow: ellipsis; }
.fd-source { margin: 12px 0 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }