/* Outil · Espaces colorimétriques (Color spaces), id gamuts : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : gm-
   À gauche : le diagramme CIE 1931 (carré, zone fixe : la toile peinte et le tracé par-dessus), l'info.
   À droite : les familles, les espaces en tuiles (grisés hors de la famille), la fiche (4 lignes fixes), les liens, le lexique. */
.gm .outil-fixe { align-items: stretch; }
.gm-diagramme { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0d0b0a; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.gm-toile, .gm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gm-grille { stroke: rgba(242, 240, 235, .06); stroke-width: 1; }
.gm-axe { fill: rgba(242, 240, 235, .35); font: 500 9px var(--mono); }
.gm-locus { fill: none; stroke: rgba(242, 240, 235, .45); stroke-width: 1; }
.gm-repere { fill: rgba(242, 240, 235, .6); }
.gm-nm { fill: rgba(242, 240, 235, .55); font: 500 9px var(--mono); }
.gm-ref { fill: none; stroke: #f2f0eb; stroke-width: 1.2; stroke-dasharray: 3 4; }
.gm-tri { fill: rgba(255, 255, 255, .08); stroke: #ffffff; stroke-width: 2; stroke-linejoin: round; }
.gm-prim { fill: #12100e; stroke: #ffffff; stroke-width: 2; }
.gm-blanc { fill: #ffffff; stroke: #12100e; stroke-width: 1.5; }
.gm-pnom { fill: #ffffff; font: 600 11px var(--mono); paint-order: stroke; stroke: #12100e; stroke-width: 3px; }
.gm-leg text { fill: #ffffff; font: 500 10.5px var(--mono); paint-order: stroke; stroke: #12100e; stroke-width: 3px; }
.gm-info { flex: none; height: 3lh; margin: 0; overflow: hidden; }

.gm-familles { flex-wrap: wrap; }
.gm-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 960px) { .gm-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm-tuile { height: 58px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 8px 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 .3s var(--courbe); }
.gm-tuile b { font: 600 12.5px/1.2 var(--corps); color: var(--papier); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tuile span { font: 500 10px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tuile:hover { background: rgba(242, 240, 235, .04); }
.gm-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.gm-tuile.gm-eteint { opacity: .25; }
.gm-fiche { display: flex; flex-direction: column; gap: 10px; }
.gm-tete { display: flex; align-items: center; gap: 12px; height: 34px; }
.gm-tete h3 { margin: 0; font: 700 21px/1.1 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-texte { margin: 0; height: 4.65em; overflow: hidden; font: 400 14px/1.55 var(--corps); color: var(--texte2); }
.gm-fait { height: 56px; cursor: default; align-items: center; gap: 14px; }
.gm-fait .nom { flex: none; }
.gm-fait .val { min-width: 0; white-space: normal; text-align: right; font: 400 12.5px/1.35 var(--mono); color: var(--papier); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gm-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gm-lexique { padding-top: 10px; border-top: 1px solid var(--filet-doux); }
.gm-lexique details { border-bottom: 1px solid var(--filet-doux); }
.gm-lexique summary { padding: 12px 0; cursor: pointer; list-style: none; font: 500 14px/1.3 var(--corps); color: var(--papier); }
.gm-lexique summary::-webkit-details-marker { display: none; }
.gm-lexique summary::after { content: "+"; float: right; color: var(--texte2); font-family: var(--mono); }
.gm-lexique details[open] summary::after { content: "−"; }
.gm-lexique p { margin: 0 0 12px; font: 400 13.5px/1.55 var(--corps); color: var(--texte2); }