/* assets/css/catalogue.css
 * Le tiroir du catalogue en feuille-record (IHM-CATALOGUE-B §C4, amendé
 * IHM-DRAWER-SOUSCARTES-IVOIRE puis IHM-CORRECTIF-STAGING item F).
 *
 * Tokens requis : css/design-tokens.css (chargé avant).
 * Primitives réutilisées : encre-lumiere.css P4 (.el-card, .el-seal) — la
 * feuille-record est une DÉCLINAISON du registre, pas une seconde invention.
 *
 * PÉRIMÈTRE D'ÉCRITURE : ce fichier, et lui seul, porte la feuille-record.
 * `sidebar.css` n'est pas touché (point chaud partagé).
 *
 * IHM-AI-AGENTS-REVERT-TABLE (2026-08-15) — les sections C1 (en-tête éditorial),
 * C2 (groupes) et C3 (cartes-lignes) sont RETIRÉES. La liste AI Agents redevient
 * la table à huit colonnes : une carte-ligne gagnait de la densité en SUPPRIMANT
 * trois colonnes du niveau liste (Client ID, Type, Tier), et une liste sert à
 * comparer. Les listes vivent donc à nouveau sous `.id-table`
 * (`identities-common.css`), et ce fichier ne parle plus que du tiroir.
 *
 * C4 drawer — le tiroir, dans la langue de `.ta-panel`
 */

/* ============ C4 — LE TIROIR, DANS LA LANGUE DE `.ta-panel` ============
   AMENDEMENT 2026-08-15 (IHM-CORRECTIF-STAGING item F) — L'IVOIRE DU TIROIR EST
   ABANDONNÉ. Ce n'est pas un troisième réglage de la même idée : c'est l'idée
   qu'on retire.

   Historique en deux temps, pour ne pas le re-diagnostiquer. (1) La « feuille
   pleine ivoire » re-mappait les tokens AU NIVEAU DU PANNEAU : ce qui citait un
   token virait au clair, ce qui posait un hex en dur restait sombre — tiroir
   mi-ivoire mi-encre. (2) Les « sous-cartes ivoire » ont déplacé le re-mappage
   sur la SECTION : plus de mélange, mais une masse molle ivoire-sur-ivoire, des
   cartes dans des cartes, une typo et des écarts qui ne suivaient plus rien.

   Le constat qui tranche : le tiroir `.ta-panel` (Decisions Inbox, Trust
   Scoring, H2A) — jamais retouché par aucun de ces lots — est plus lisible et
   plus premium que les deux. Il ne le doit à aucune trouvaille : il est TOUT
   ENCRE, ses sections sont séparées par un FILET et non par un cadre, et ses
   valeurs vivent dans une grille clé/valeur plate. On ne réinvente donc rien —
   on ALIGNE `#id-drawer` sur ce qui marche déjà.

   MIROIR, PAS RENOMMAGE. `#id-drawer` est partagé par une quinzaine de modules
   qui écrivent tous `.id-detail-section` / `.id-detail-label` / `.id-detail-grid`
   en asynchrone. Renommer leurs classes en `.ta-*` toucherait quinze fichiers
   pour un résultat identique à l'écran. Les valeurs de `.ta-section`,
   `.ta-section-title` et `.ta-meta-dl` (sidebar.css) sont donc reportées ICI,
   à l'identique — une divergence entre les deux se verrait immédiatement, les
   deux tiroirs étant côte à côte dans la même console.

   PLUS AUCUN RE-MAPPAGE DE TOKENS. C'était la rançon de l'ivoire : les modules
   posent `var(--el-ink-white)` / `var(--el-ink-text-3)` en inline, et il fallait
   les détourner. Sur l'encre, ces tokens sont ceux d'origine — ils tombent
   juste tout seuls. Vingt lignes de détournement disparaissent avec la lumière
   qui les rendait nécessaires.

   `!important` sur la SEULE géométrie, et pourquoi : ces mêmes modules posent
   `margin-bottom:12px` / `padding:14px` en inline sur leurs sections. Sans lui,
   une section sur deux garderait son ancien écart et le rythme du tiroir
   redeviendrait irrégulier — c'est précisément l'un des défauts relevés. La
   règle possède le rythme ; les modules gardent tout le reste. */
#id-drawer .id-detail-section {
  /* `.ta-section` — un filet, pas un cadre. Une carte pose quatre bords pour
     dire « ceci est un sujet » ; un filet le dit avec un trait. */
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(57,67,79,.6) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  color: var(--el-ink-text);
  line-height: 1.45;
}
#id-drawer .id-detail-section:last-child { border-bottom: none !important; }

/* Une section dans une section n'a pas son propre filet : deux traits collés
   diraient deux fois la même séparation. */
#id-drawer .id-detail-section .id-detail-section {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
}

/* Le rythme est porté par le `padding` des sections et leurs filets, comme dans
   `.ta-panel-body`. Le conteneur n'ajoute donc PLUS de `gap` : il en ajoutait 16
   par-dessus, ce qui doublait l'écart des sections nues et pas celui des
   sections enveloppées d'un `<div id="ac-…">` par les modules asynchrones —
   d'où l'espacement irrégulier constaté. */
#id-drawer #id-drawer-body,
#id-drawer .id-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Le panneau garde son en-tête d'encre (titre + croix) : sidebar.css les tient,
   et ils sont déjà dans la langue de `.ta-panel-header`. Rien à re-déclarer. */

/* — L'en-tête de la feuille : la marque du registre, le code scellé, la voix —
     Repeints en encre. La marque perd son or : « TrustOR · Registre d'identité »
     est une étiquette, pas un acte d'autorité — c'est exactement le genre d'or
     décoratif que la discipline refuse (§gold-discipline). Le ● qui
     l'accompagnait part avec elle. */
.cat-sheet-mark { display: flex; align-items: center; gap: 8px; font-family: var(--el-font-title); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--el-ink-text-3); }
.cat-sheet-code { font-family: var(--el-font-mono); font-size: 13px; color: var(--el-ink-text-2); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.cat-sheet-voice { font-size: 13px; font-style: italic; color: var(--el-ink-text-3); margin: 10px 0 0; line-height: 1.45; }

/* `.ta-section-title` — 11px / 600 / uppercase / .8px, en `--el-ink-text-3`.
   Le ● doré en tête de section est RETIRÉ : il ouvrait quinze sections, donc il
   ne distinguait rien, et l'or n'est pas une puce (F.6). Le filet de la section
   dit déjà où elle commence. */
#id-drawer .id-detail-section > .id-detail-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--el-ink-text-3);
  margin: 0 0 10px;
}

/* La respiration à l'intérieur d'une section — les valeurs de `.ta-panel`. */
#id-drawer .id-detail-section .id-detail-value { line-height: 1.45; }
#id-drawer .id-detail-section .id-detail-grid { gap: 10px 14px; }
#id-drawer .id-detail-section .id-detail-row { padding: 8px 0; }
#id-drawer .id-detail-section .id-scope-list { gap: 6px; }
/* Les listes montées en colonne par les modules (scopes, capabilities, tools)
   arrivent avec un `gap:3px`/`gap:4px` inline — deux lignes de monospace
   collées. `!important` parce que le gap fautif est inline. Toutes les valeurs
   constatées sont ≤4px : la règle ne resserre rien, elle aère. */
#id-drawer .id-detail-section [style*="flex-direction:column"],
#id-drawer .id-detail-section [style*="flex-direction: column"] { gap: 8px !important; }

/* — Le titre de section de la feuille-record : même échelle que `.id-detail-label`
     ci-dessus, pour que deux sections voisines n'aient pas deux typographies.
     Le `<span class="cat-m">` (● or) a disparu du markup avec sa règle. */
.cat-sec { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.cat-sec .cat-t { font-family: var(--el-font-title); font-weight: 600; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--el-ink-text-3); }
.cat-sec .cat-tag { margin-left: auto; font-family: var(--el-font-mono); font-size: 13px; color: var(--el-ink-text-3); display: inline-flex; align-items: center; gap: 5px; }

/* — `.ta-meta-dl` — la grille clé/valeur, plate et alignée.
     C'étaient des sous-cartes : un cadre par valeur, DANS une carte de section,
     DANS le panneau — trois niveaux d'emboîtement pour afficher « Provider :
     anthropic ». Elles redeviennent ce qu'elles sont : des lignes. Le libellé
     en `--el-ink-text-3`, la valeur en `--el-ink-white`, une colonne fixe pour
     que les valeurs s'alignent verticalement au lieu de flotter. */
.cat-fields { display: flex; flex-direction: column; gap: 5px; }
.cat-field { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; align-items: baseline; min-width: 0; }
/* Une valeur longue (chemin de manifest, description) prend la ligne entière :
   son libellé passe au-dessus plutôt que de raboter la colonne de tout le monde. */
.cat-field--full { grid-template-columns: 1fr; }
.cat-field .cat-k { font-size: 13px; color: var(--el-ink-text-3); display: flex; align-items: center; gap: 5px; }
.cat-field .cat-v { font-size: 13px; color: var(--el-ink-white); overflow-wrap: anywhere; }
/* IBM Plex Mono est RÉSERVÉ aux codes, ids et slugs (F.5) : `.cat-v` était en
   police de titre à 14px/700 pour TOUTE valeur, y compris les phrases. */
.cat-field .cat-v.cat-mono { font-family: var(--el-font-mono); font-size: 13px; color: var(--el-ink-text-2); }

/* — LA SECTION DU SCORE : ce qui est OBSERVÉ, au milieu de ce qui est SCELLÉ —
     Elle reste la seule autorité du tiroir, donc la seule à porter un filet or
     (§gold-discipline). Le filet passe de l'or « sur la lumière » à l'or « sur
     l'encre » : le cadre est redevenu sombre, et `--el-gold-deep` s'y éteindrait.
     C'est aussi le seul bloc du tiroir qui garde une SURFACE — il bouge, et la
     surface dit qu'on regarde une mesure, pas un enregistrement. */
.cat-score {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--el-ink-panel) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin: 14px 0 !important;
  border-bottom: none !important;
}
.cat-score::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--el-gold); opacity: .85;
}
.cat-score .cat-l { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--el-ink-text-3); }
.cat-score .cat-l b { display: block; font-family: var(--el-font-title); font-weight: 800; font-size: 24px; color: var(--el-gold-light); letter-spacing: 0; text-transform: none; margin-top: 4px; }
.cat-score .cat-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--el-ink-text-2); }

/* — Le sceau, en pied : ce qui rend la feuille opposable —
     Il nomme la PROVENANCE (« scellé · manifest »), il n'est pas un acte : il
     passe donc en texte de métadonnée, comme le reste du tiroir. */
.cat-seal { display: flex; align-items: center; gap: 8px; font-family: var(--el-font-mono); font-size: 13px; color: var(--el-ink-text-3); overflow-wrap: anywhere; }
.cat-seal svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 760px) {
  .cat-field { grid-template-columns: 1fr; }
}