/* HK Sentinel · composants. Chaque valeur vient de tokens.css. */
.hk-root { background: var(--surface); color: var(--text-hi); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.hk-d { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0; }
.hk-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; color: var(--accent-text); }
.hk-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }

/* Bouton */
.hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; font: 700 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; box-sizing: border-box; transition: transform .16s cubic-bezier(.2,.7,.2,1), background-color .16s, border-color .16s; }
.hk-btn:hover { transform: translateY(-1px); }
.hk-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hk-btn--primary { background: var(--green-500); color: var(--on-accent); }
.hk-btn--primary:hover { background: var(--green-400); }
.hk-btn--secondary { background: transparent; color: var(--text-hi); border-color: var(--line-strong); }
.hk-btn--secondary:hover { border-color: var(--text-lo); }
.hk-btn--inverse { background: var(--text-hi); color: var(--surface); }
.hk-btn--sm { min-height: 44px; padding: 0 var(--space-4); font-size: 14px; }
.hk-btn:disabled, .hk-btn[aria-disabled="true"] { opacity: .4; transform: none; cursor: not-allowed; }
.hk-link { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.hk-link:hover { text-decoration: underline; }

/* Onglet pilule */
.hk-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hk-tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text-md); font: 600 15px var(--font-body); cursor: pointer; transition: all .16s; }
.hk-tab:hover { color: var(--text-hi); }
.hk-tab[aria-selected="true"] { color: var(--text-hi); border-color: var(--green-500); background: var(--green-tint); }
[data-theme="light"] .hk-tab[aria-selected="true"] { background: var(--green-wash); color: var(--green-ink); }

/* Champ */
.hk-field { display: flex; flex-direction: column; gap: var(--space-2); font: 600 13px var(--font-body); color: var(--text-md); }
.hk-input { height: var(--control-h); box-sizing: border-box; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-hi); font: 400 16px var(--font-body); }
.hk-input:focus { outline: none; border-color: var(--green-500); box-shadow: var(--shadow-focus); }
.hk-input[aria-invalid="true"] { border-color: var(--red-alert); }
.hk-input:disabled { opacity: .5; }
.hk-field-error { font-weight: 500; color: var(--red-alert-text); }

/* Pastille de statut */
.hk-badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: 600 13px var(--font-body); }
.hk-badge--ok { background: var(--green-tint); color: var(--green-400); }
[data-theme="light"] .hk-badge--ok { background: var(--green-wash); color: var(--green-ink); }
.hk-badge--neutral { background: var(--panel); color: var(--text-md); border: 1px solid var(--line-strong); }
.hk-badge--alert { background: rgba(255, 59, 48, 0.12); color: var(--red-alert-text); }

/* Point de statut vivant */
.hk-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); flex: none; }
.hk-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid currentColor; color: var(--green-400); animation: hk-ping 2.4s cubic-bezier(.2,.7,.2,1) infinite; }
.hk-dot--alert { background: var(--red-alert); }
.hk-dot--alert::after { color: var(--red-alert); animation-duration: 1.6s; }
.hk-dot--idle { background: var(--text-lo); }
.hk-dot--idle::after { display: none; }
@keyframes hk-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* Notification d'événement */
.hk-event { display: flex; flex-direction: column; gap: 6px; width: 270px; padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--ink-850); border: 1px solid var(--ink-700); color: var(--white); box-shadow: var(--shadow-float); box-sizing: border-box; }
.hk-event__head { display: flex; align-items: center; gap: 10px; font: 700 14px var(--font-body); }
.hk-event__time { margin-left: auto; font: 400 13px var(--font-mono); color: #8c8c8c; }
.hk-event__meta { font: 400 13px var(--font-body); color: #b3b3b3; }

/* Radar */
.hk-radar { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.hk-radar__sweep { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 168, 120, .30), rgba(0, 168, 120, 0) 70deg, rgba(0, 168, 120, 0) 360deg); animation: hk-spin 7s linear infinite; }
.hk-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes hk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hk-dot::after, .hk-radar__sweep { animation: none; }
  .hk-btn, .hk-tab { transition: none; }
}

/* NewsFeed · actualités, nouveaux produits, événements */
.hk-nf-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
.hk-nf-chip { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text-md); font: 600 14px var(--font-body); cursor: pointer; transition: all .16s; }
.hk-nf-chip:hover { color: var(--text-hi); }
.hk-nf-chip[aria-selected="true"] { background: var(--text-hi); border-color: var(--text-hi); color: var(--surface); }
.hk-nf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.hk-nf-feat { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-alt); color: var(--text-hi); text-decoration: none; }
.hk-nf-img { position: relative; aspect-ratio: 16 / 9; background: var(--ink-800); }
.hk-nf-body { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.hk-nf-date { position: absolute; left: 20px; top: 20px; width: 64px; padding: 10px 0 8px; border-radius: 12px; background: var(--white); color: var(--ink-950); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hk-nf-date strong { font: 700 26px/1 var(--font-display); }
.hk-nf-date span { font: 600 11px var(--font-display); letter-spacing: .18em; }
.hk-nf-date:has(strong:empty) { display: none; }
.hk-nf-new { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--green-500); color: var(--on-accent); font: 700 12px var(--font-body); }
.hk-nf-new:empty { display: none; }
.hk-nf-type { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--green-wash); color: var(--green-ink); font: 600 13px var(--font-body); }
.hk-nf-rail { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.hk-nf-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--text-hi); text-decoration: none; }
.hk-nf-thumb { position: relative; height: 84px; border-radius: var(--radius-md); background: var(--ink-800); }
.hk-nf-agenda { display: flex; gap: 48px; align-items: flex-start; background: var(--ink-950); color: var(--white); border-radius: var(--radius-xl); padding: 32px 36px; }
.hk-nf-ev { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--ink-700); }
.hk-nf-ev:first-child { border-top: 0; }
.hk-nf-ev .hk-nf-date { position: static; width: 56px; background: var(--green-tint); color: var(--green-400); }
@media (max-width: 1000px) {
  .hk-nf { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hk-nf-rail { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; border-top: 0; scrollbar-width: none; }
  .hk-nf-item { flex: 0 0 min(78%, 320px); scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .hk-nf-thumb { height: 150px; }
  .hk-nf-agenda { flex-direction: column; gap: 20px; padding: 24px 20px; }
}
@media (max-width: 720px) {
  .hk-nf-body { padding: 20px 18px 22px; }
  .hk-nf-ev { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .hk-nf-ev .hk-btn { grid-column: 1 / -1; width: 100%; }
}