/**
 * La fiche société — les règles que `renderDetail` de `js/detail.js` suppose.
 *
 * Sorties de `css/app.css` pour la même raison que la table : deux pages
 * rendent cette fiche. L'application sous `/app`, et la démonstration de la
 * page de vente sous `/`, qui écrit le même balisage — mêmes libellés, même
 * ordre, mêmes classes — mais sans appeler `renderDetail`, qui va chercher
 * trois fichiers fermés. Recopier ces règles dans la page de vente les aurait
 * fait diverger de la fiche vendue au premier ajustement.
 *
 * Ce fichier ne déclare aucun jeton. Il consomme ceux de la page qui le charge :
 * `--line`, `--line-soft`, `--ink`, `--ink-2`, `--ink-3`, `--bg`, `--bg-rail`,
 * `--bg-sunk`, `--bg-sel`, `--bg-hover`, `--accent`.
 */

/* ── Fiche société ───────────────────────────────────────────────────── */
.detail { width: 360px; flex: 0 0 360px; padding-bottom: 40px; }
.d-head { display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-rail); z-index: 2; }
.d-title { display: flex; gap: 8px; flex: 1; min-width: 0; }
.d-title img { width: 30px; height: 30px; border-radius: 5px; object-fit: contain; background: var(--bg-sunk); flex: 0 0 auto; }
.d-head h2 { font-size: 14px; margin: 0; line-height: 1.25; }
.d-sub { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.d-close { flex: 0 0 auto; font-size: 15px; line-height: 1; padding: 1px 6px; }
.d-actions { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.d-actions a.btn { text-decoration: none; }
.is-pinned-btn { border-color: #c99700; color: #c99700; }
.d-block { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.d-block h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 0 0 6px; }
.d-block h3 .d-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.d-row { display: flex; gap: 8px; font-size: 12px; padding: 1px 0; }
.d-k { flex: 0 0 118px; color: var(--ink-3); }
.d-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.d-hint { color: var(--ink-3); font-size: 10.5px; cursor: help; }
.d-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.d-tag { background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-size: 11px; cursor: pointer; color: var(--ink-2); }
.d-tag:hover { background: var(--bg-sel); color: var(--ink); }
.d-desc { font-size: 12px; line-height: 1.5; margin: 0; color: var(--ink-2); }
.d-sim { list-style: none; margin: 0; padding: 0; }
.d-sim-row { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); padding: 5px 2px; cursor: pointer; color: inherit; }
.d-sim-row:hover { background: var(--bg-hover); }
.d-sim-name { font-weight: 600; font-size: 12px; }
.d-sim-score { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.d-sim-meta { font-size: 10.5px; color: var(--ink-3); grid-column: 1 / -1; }
.d-sim-tags { font-size: 10.5px; color: var(--ink-2); grid-column: 1 / -1; line-height: 1.3; }
.d-sub-badge { color: var(--accent); font-size: 10px; }
.d-note { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; margin: 6px 0 0; }

/* Le bouton de la fiche, borné à la fiche.
 *
 * `.btn` reste dans `css/app.css` : la barre d'outils et la porte de connexion
 * s'en servent aussi. Mais la page de vente a son propre `.btn` — le grand
 * bouton terracotta de l'offre — et sa feuille est chargée après celle-ci. À
 * égalité de spécificité, c'est le sien qui gagnerait, et les deux boutons de
 * la fiche apparaîtraient en taille d'appel à l'action.
 *
 * Ces règles portent donc les mêmes déclarations que `.btn` et `.btn-mini`,
 * bornées au conteneur de la fiche, où elles ne peuvent viser rien d'autre.
 * Dans l'application le rendu ne change pas : mêmes valeurs, spécificité plus
 * haute que la règle générale qu'elles répètent. */
.d-actions .btn, .d-head .btn {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 4px; padding: 2px 7px; font-size: 11.5px;
  font-family: inherit; font-weight: 400; line-height: 1.45;
  cursor: pointer; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; width: auto;
}
.d-actions .btn:hover, .d-head .btn:hover { background: var(--bg-hover); }
.d-actions .btn:active, .d-head .btn:active { transform: translateY(0.5px); }
.d-actions .is-pinned-btn { border-color: #c99700; color: #c99700; }