/* Outil · Codecs (Codec guide) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cx-
   En haut, centré : « Je veux… » et un conseil (2 lignes fixes). À gauche : les codecs en tuiles (grisées si hors de l'usage).
   À droite : la fiche (texte de 4 lignes fixes, 6 lignes de faits), puis le lexique. Emplacements fixes. */
.cx .outil-fixe { align-items: stretch; }
.cx-haut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cx-usages { max-width: 100%; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); overflow-x: auto; scrollbar-width: none; }
.cx-usages::-webkit-scrollbar { display: none; }
.cx-usages button { flex: none; border: 0; background: none; border-radius: 999px; padding: 10px 16px; cursor: pointer; font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--texte2);
  transition: background .4s var(--courbe), color .4s var(--courbe); }
.cx-usages button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.cx-usages button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.cx-conseil { margin: 0; max-width: 640px; height: 3lh; text-align: center; text-wrap: balance; font: 400 13.5px/1.5 var(--corps); color: var(--texte2); }
@media (min-width: 960px) {
  .cx.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .cx-haut { grid-column: 1 / -1; margin-top: 4px; }
  .cx-conseil { height: 2lh; }
  .cx .outil-fixe { justify-content: flex-start; }
}

/* Les tuiles : deux colonnes (trois sur ordinateur), le nom et la famille */
.cx-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 960px) { .cx-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-tuile { height: 66px; border: 0; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; text-align: left; transition: background .3s var(--courbe), box-shadow .3s var(--courbe), opacity .4s var(--courbe); }
.cx-tuile b { font: 600 13.5px/1.2 var(--corps); color: var(--papier); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cx-tuile span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.cx-tuile:hover { background: rgba(242, 240, 235, .04); }
.cx-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.cx-tuile.cx-eteint { opacity: .3; }
.cx-tuile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* La fiche */
.cx-fiche { display: flex; flex-direction: column; gap: 10px; }
.cx-tete { display: flex; align-items: center; gap: 12px; height: 34px; }
.cx-tete h3 { margin: 0; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-texte { margin: 0; height: 6lh; overflow: hidden; font: 400 14px/1.55 var(--corps); color: var(--texte2); }
@media (min-width: 960px) { .cx-texte { height: 5lh; } }
.cx-fait { height: 52px; flex: none; align-items: center; padding: 0; cursor: default; gap: 14px; }   /* hauteur fixe : une valeur sur 2 lignes au plus */
.cx-fait .nom { flex: none; color: var(--texte2); font-weight: 400; }
.cx-fait:hover .nom { color: var(--texte2); }
.cx-fait .val { min-width: 0; white-space: normal; text-align: right; color: var(--papier); font: 400 13px/1.35 var(--corps);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cx-jauge { margin-right: 10px; vertical-align: middle; }
.cx-jauge { display: inline-flex; gap: 3px; }
.cx-jauge i { width: 14px; height: 6px; border-radius: 2px; background: var(--filet); }
.cx-jauge i.plein { background: var(--papier); }
.cx-poids { align-self: flex-start; margin-top: 4px; }
.cx-poids:hover { translate: none; }
.cx-cache { visibility: hidden; }

/* Le lexique : des lignes à déplier */
.cx-lexique { padding-top: 10px; border-top: 1px solid var(--filet-doux); }
.cx-lexique details { border-bottom: 1px solid var(--filet-doux); }
.cx-lexique summary { padding: 12px 0; cursor: pointer; list-style: none; font: 500 14px/1.3 var(--corps); color: var(--papier); }
.cx-lexique summary::-webkit-details-marker { display: none; }
.cx-lexique summary::after { content: "+"; float: right; color: var(--texte2); font-family: var(--mono); }
.cx-lexique details[open] summary::after { content: "−"; }
.cx-lexique p { margin: 0 0 12px; font: 400 13.5px/1.55 var(--corps); color: var(--texte2); }