/* Outil · Formats 3D (3D formats) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : f3-
   À gauche : les 8 formats en tuiles, puis l'usage du format choisi (3 lignes fixes). À droite : la fiche (format, unités,
   axe, puis 10 capacités : oui / en partie / non avec leur raison) et le bloc « d'un logiciel à l'autre » (ton logiciel,
   vers, échelle, axe vertical, repère). */
.f3 .outil-fixe { align-items: stretch; }
.f3-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.f3-tuile { height: 76px; border: 0; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 10px 14px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; text-align: left; transition: background .3s var(--courbe), box-shadow .3s var(--courbe); }
.f3-tuile b { font: 700 17px/1.1 var(--display); letter-spacing: -.01em; color: var(--papier); }
.f3-tuile span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.f3-tuile:hover { background: rgba(242, 240, 235, .04); }
.f3-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.f3-usage { margin: 0; height: 3lh; overflow: hidden; text-align: center; text-wrap: balance; font: 400 14px/1.5 var(--corps); color: var(--texte2); }

.f3-fiche { display: flex; flex-direction: column; gap: 6px; }
.f3-tete { display: flex; align-items: baseline; gap: 12px; height: 34px; }
.f3-tete h3 { margin: 0; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; }
.f3-tete span { font: 500 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f3-ligne { cursor: default; align-items: center; }
.f3-info, .f3-cap { height: 44px; }
.f3-ligne .val { color: var(--papier); text-align: right; white-space: normal; }
.f3-info .val { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.f3-cap .val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.f3-cap .val b { font: 500 12.5px/1.2 var(--mono); letter-spacing: .04em; }
.f3-cap .val b[data-etat="2"] { color: var(--papier); }
.f3-cap .val b[data-etat="1"] { color: var(--peche); }
.f3-cap .val b[data-etat="0"] { color: var(--texte2); opacity: .7; }
.f3-cap .val i { font: 400 11px/1.2 var(--corps); font-style: normal; color: var(--texte2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.f3-logiciels { display: flex; flex-direction: column; gap: 10px; }
.f3-choix { display: flex; flex-direction: column; gap: 6px; }
.f3-choix > span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.f3-puces { flex-wrap: wrap; }
.f3-puces .puce { cursor: pointer; padding: 7px 12px; }
.f3-conv { height: 64px; }
.f3-conv .val { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 72%; font-size: 13px; }
.f3-note { margin: 0; height: 2lh; font: 400 12.5px/1.5 var(--corps); color: var(--texte2); }
@media (max-width: 959px) {
  .f3-conv { height: 84px; }
  .f3-conv .val { -webkit-line-clamp: 4; }
  .f3-note { height: 3lh; }
}