/* Fiche d'un élément : en-tête, onglets, cartes et journal. */
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.page-subtitle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.element-tabs .eg-tab { text-decoration: none; }
.element-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.element-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.element-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.element-card-head h2 { margin: 0; font: 600 16px/24px var(--font-sans); }
.element-kv { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: 14px; line-height: 20px; }
.element-kv dt { color: var(--text-muted); }
.element-kv dd { margin: 0; }
.element-kv-text dd { white-space: pre-wrap; }
.element-form { max-width: 720px; }
#catalogue-elements tr[data-href] { cursor: pointer; }
#catalogue-elements tr[data-href] a { color: inherit; text-decoration: none; }
#catalogue-elements tr[data-href] a:hover { text-decoration: underline; }

.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journal li { display: grid; grid-template-columns: 150px 180px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 20px; }
.journal-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.journal-changes summary { cursor: pointer; color: var(--primary-text); font-size: 12px; width: max-content; }
.journal-change { margin-top: var(--space-2); }
.journal-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: 4px; }
.journal-values > div { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.journal-values p { margin: 4px 0 0; white-space: pre-wrap; }
@media (max-width: 720px) { .journal li { grid-template-columns: 1fr; gap: 2px; } .element-kv { grid-template-columns: 1fr; } }

/* Dictionnaire et page d'un champ. */
.dictionary-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-bottom: var(--space-3); }
.dictionary-summary { margin: 0 0 var(--space-3); }
.dictionary-description { max-width: 360px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#dictionary .dictionary-name { white-space: nowrap; }
.field-navigation { display: flex; align-items: center; gap: var(--space-2); }
.field-position { font-variant-numeric: tabular-nums; }
.field-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: var(--space-4); align-items: start; }
.field-main { display: flex; flex-direction: column; gap: var(--space-4); }
.field-profile { position: sticky; top: var(--space-4); }
.field-kv { grid-template-columns: 110px minmax(0, 1fr); }
.field-measures { display: flex; flex-direction: column; gap: var(--space-3); }
.field-admin { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.field-values { width: 100%; font-size: 13px; }
.field-values caption { text-align: left; color: var(--text-muted); padding-bottom: var(--space-1); }
@media (max-width: 960px) { .field-columns { grid-template-columns: minmax(0, 1fr); } .field-profile { position: static; } }

.comments-switch { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.comments-switch .eg-tab { text-decoration: none; }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comments li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-2); }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 13px; }
.comment-body { margin: 0; white-space: pre-wrap; }
.comment-close { align-self: flex-start; }
.journal-removed-fields { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: 13px; }