/* ════════════════════════════════════════════════════════════════════════════
   Modules opérationnels — Patrimoine · Démos · Sécurité.
   Sorti du <style> en ligne d'index.html le 24/08/2026, à géométrie IDENTIQUE :
   mêmes sélecteurs, mêmes espacements, mêmes tailles. Seules les VALEURS DE
   MARQUE changent, et elles ne sont plus écrites ici : elles viennent de
   /brand/tokens.css. C'est le corollaire non négociable de la charte
   (VISION §4, quelle que soit la branche de la décision D2) :
     · une seule ocre-or, #C8923A, et elle ne vit que dans le paquet ;
     · purge du navy GEH #1B2E6E des surfaces ANSEMOK — il vivait ici.
   L'ambre de l'ancien accent est l'une des ocres parasites
   explicitement refusées par le test de la charte : elle passe sur --ocre-ink.

   NON re-skinné ici : le tableau de bord (#hos, holding-os.css). Il a ses
   propres rendus visés — Decider / Passerelle / Poche — et se refait sur eux,
   pas à la main. Un demi-skin sans rendu de référence est une dette, pas un pas.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* --bg --bg-card --text --ink --muted --faint --hair : servis par /brand/tokens.css.
     Ce qui suit n'est que le pont entre les noms locaux et la charte. */
  --surface: var(--bg-card);
  --line: var(--hair);
  --navy: var(--ink);          /* la couleur d'action devient l'encre (bouton dominant) */
  --sapin: var(--sauge);
  --ambre: var(--ocre-ink);
  --brique: var(--terre);
  --mixte: var(--faint);
  --radius: var(--radius-card);
  --serif: var(--font-display);
  --sans: var(--font-body);

  /* Variables attendues par les vues (styles en ligne) et qui n'étaient définies
     nulle part hors de #hos : elles rendaient une couleur invalide dans
     Patrimoine / Démos / Sécurité. Rattachées à la charte. */
  --bl: 8px;
  --fm: var(--font-mono);
  --or: var(--ocre);
  --p0: var(--terre);
  --p1: var(--warn);
  --p2: var(--faint);
  --navy-soft: rgba(36, 23, 16, .06);
}

* { box-sizing: border-box }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  font-feature-settings: "tnum" 1, "cv01" 1; -webkit-font-smoothing: antialiased;
}
.serif { font-family: var(--serif) }
.tnum { font-variant-numeric: tabular-nums }
a { color: var(--ocre-ink) }
a:hover { color: var(--text) }
button {
  font: inherit; cursor: pointer; border: none; border-radius: var(--radius-button);
  padding: 10px 16px; background: var(--navy); color: var(--text-inverse);
  font-weight: 600; letter-spacing: .01em;
}
button:hover:not(:disabled) { background: var(--ink-hover) }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--hair-strong) }
button.ghost:hover:not(:disabled) { background: var(--bg-sidebar) }
button.sm { padding: 6px 11px; font-size: 13px; border-radius: var(--radius-button) }
button:disabled { opacity: .5; cursor: default }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px }
input {
  font: inherit; width: 100%; padding: 11px 13px; border: 1px solid var(--hair-strong);
  border-radius: var(--radius-input); background: var(--bg-input); color: var(--text);
}
input:focus-visible { outline: none; border: 2px solid var(--ocre); padding: 10px 12px }
.err { color: var(--terre); font-size: 13px; min-height: 18px }
select {
  font: inherit; width: 100%; padding: 11px 13px; border: 1px solid var(--hair-strong);
  border-radius: var(--radius-input); background: var(--bg-input); color: var(--text);
}
select:focus-visible { outline: none; border: 2px solid var(--ocre); padding: 10px 12px }
header.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--hair); background: var(--bg-sidebar);
}
header .b { font-family: var(--serif); font-weight: 800; color: var(--text); font-size: 18px }
header .b small {
  font-family: var(--sans); font-weight: 600; color: var(--faint); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; display: block;
}
header .who { font-size: 13px; color: var(--faint); text-align: right }
header .nav { display: flex; gap: 4px }
header .nav a {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--faint);
  padding: 7px 13px; border-radius: var(--radius-button);
}
header .nav a.on { color: var(--text); background: var(--bg-sidebar) }
main { max-width: 1100px; margin: 0 auto; padding: 28px }
.row { display: flex; gap: 16px; flex-wrap: wrap }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px }
.sec-title {
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin: 30px 0 14px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.prop { cursor: pointer; transition: border-color .15s } .prop:hover { border-color: var(--ocre) }
.prop h3 { font-family: var(--serif); margin: 0 0 4px; font-size: 18px } .prop .ref { font-size: 12px; color: var(--faint) }
.pill {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill); color: var(--text-inverse); margin-top: 12px;
}
.unit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--hair);
}
.unit:first-child { border-top: none } .unit .ref { font-weight: 600 }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle }
.acts { display: flex; gap: 7px; flex-wrap: wrap }
.carnet { font-size: 13px; color: var(--faint); margin-top: 8px }
.carnet .e { padding: 7px 0; border-top: 1px dashed var(--hair) }
.crumb { font-size: 13px; color: var(--faint); margin-bottom: 14px }
.crumb a { cursor: pointer; text-decoration: underline }
.muted { color: var(--faint) } .empty { color: var(--faint); font-size: 14px; padding: 18px 0 }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--text-inverse); padding: 11px 18px;
  border-radius: var(--radius-card); font-size: 14px; opacity: 0;
  transition: opacity .25s; pointer-events: none; z-index: 9999;
}
.toast.show { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  .prop, .toast { transition: none }
}