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

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

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

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

/* Le tableau de la fiche (versions, prises, broches…) : toujours 5 lignes de hauteur fixe, sur une ligne chacune */
.cb-tableau .groupe { padding-bottom: 2px; }
.cb-ligne { height: 40px; display: grid; grid-template-columns: 8.6em 7.4em minmax(0, 1fr); gap: 10px; align-items: center;
  border-bottom: 1px solid var(--filet-doux); font: 400 13px/1.2 var(--corps); }
.cb-ligne b, .cb-ligne span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ligne b { font: 500 12.5px/1.2 var(--mono); letter-spacing: .02em; color: var(--papier); }
.cb-ligne span { font: 400 12.5px/1.2 var(--mono); color: var(--papier); }
.cb-ligne i { font-style: normal; font-size: 12.5px; line-height: 1.25; color: var(--texte2); text-align: right; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* la note : 2 lignes au plus */
.cb-ligne.cb-vide { border-bottom-color: transparent; }