/* Outil · Conteneurs (Container guide) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cn- (même mise en page que Codecs, outils/codecs/outil.css)
   En haut, centré : « Je veux… » et un conseil (2 lignes fixes). À gauche : les conteneurs en tuiles (grisées si hors de l'usage).
   À droite : la fiche (texte de 5 ou 6 lignes fixes, 6 lignes de faits), le lien vers Codecs, puis le lexique. Emplacements fixes. */
.cn .outil-fixe { align-items: stretch; }
.cn-haut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cn-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; }
.cn-usages::-webkit-scrollbar { display: none; }
.cn-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); }
.cn-usages button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.cn-usages button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.cn-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) {
  .cn.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .cn-haut { grid-column: 1 / -1; margin-top: 4px; }
  .cn-conseil { height: 2lh; }
  .cn .outil-fixe { justify-content: flex-start; }
}

/* Les tuiles : deux colonnes (trois sur ordinateur), le nom et la famille */
.cn-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 960px) { .cn-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-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); }
.cn-tuile b { font: 600 13.5px/1.2 var(--corps); color: var(--papier); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cn-tuile span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.cn-tuile:hover { background: rgba(242, 240, 235, .04); }
.cn-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.cn-tuile.cn-eteint { opacity: .3; }
.cn-tuile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* La fiche */
.cn-fiche { display: flex; flex-direction: column; gap: 10px; }
.cn-tete { display: flex; align-items: center; gap: 12px; height: 34px; }
.cn-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; }
.cn-texte { margin: 0; height: 6lh; overflow: hidden; font: 400 14px/1.55 var(--corps); color: var(--texte2); }
@media (min-width: 960px) { .cn-texte { height: 5lh; } }
.cn-fait { height: 52px; flex: none; align-items: center; padding: 0; cursor: default; gap: 14px; }   /* hauteur fixe : une valeur sur 2 lignes au plus */
.cn-fait .nom { flex: none; color: var(--texte2); font-weight: 400; }
.cn-fait:hover .nom { color: var(--texte2); }
.cn-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; }
.cn-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

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