/* ============================================================================
   HOTELIUM — Couche d'interactions (compagnon de hotelium-ui.js)
   Styles des 5 micro-interactions. À charger APRÈS platform.css.
   ============================================================================ */

/* — Transitions globales discrètes (désactivées si reduced-motion) --------- */
@media (prefers-reduced-motion: no-preference) {
  .tab, .hui-xtab, .field-input, .btn, .kpi, .card, .sb-item,
  .hui-delta, .progress > span { transition-property: color, background-color, border-color, box-shadow, transform, width, opacity; transition-duration: .18s; transition-timing-function: cubic-bezier(.4,0,.2,1); }
}

/* ==========================================================================
   1. ANIMATED TABS — indicateur glissant
   ========================================================================== */
.tabs[data-hui-tabs] { position: relative; }
.tabs[data-hui-tabs] .tab { border-bottom-color: transparent !important; position: relative; z-index: 1; }
.hui-tab-ink {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--green-800); border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1), opacity .2s;
  will-change: transform, width;
}
@media (prefers-reduced-motion: reduce) { .hui-tab-ink { transition: none; } }
/* variante pilule */
.tabs-pill { border-bottom: 0 !important; gap: 4px; background: var(--bg-page); padding: 4px; border-radius: 9px; display: inline-flex; }
.tabs-pill .tab { border: 0 !important; border-radius: 6px; padding: 7px 14px; }
.tabs-pill .tab.is-active, .tabs-pill .tab.active { color: var(--green-800); }
.hui-tab-ink.is-pill {
  bottom: 4px; top: 4px; height: auto; z-index: 0;
  background: var(--bg-card); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(13,26,10,.10);
}

/* ==========================================================================
   2. EXPANDABLE TABS — barre d'icônes qui déploie le libellé actif
   ========================================================================== */
.hui-xtabs {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px;
}
.hui-xtab {
  display: inline-flex; align-items: center; gap: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 10px; border-radius: var(--r-pill);
  white-space: nowrap; overflow: hidden;
  transition: background-color .2s, color .2s, gap .26s cubic-bezier(.4,0,.2,1);
}
.hui-xtab svg { width: 17px; height: 17px; flex-shrink: 0; }
.hui-xtab .hui-xtab-label {
  max-width: 0; opacity: 0;
  transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .25s, margin .26s;
}
.hui-xtab:hover { color: var(--ink); background: var(--bg-soft); }
.hui-xtab.is-active { color: var(--green-800); background: var(--bg-tint); gap: 8px; }
.hui-xtab.is-active .hui-xtab-label { max-width: 160px; opacity: 1; }
.hui-xtab-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border); }
@media (prefers-reduced-motion: reduce) {
  .hui-xtab, .hui-xtab .hui-xtab-label { transition: none; }
}

/* ==========================================================================
   3. BADGE DELTA — pastille de taux ↑/↓
   ========================================================================== */
.hui-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px 3px 6px; border-radius: var(--r-pill);
}
.hui-delta svg { width: 12px; height: 12px; }
.hui-delta.good { background: var(--success-bg); color: var(--success-fg); }
.hui-delta.bad  { background: var(--danger-bg);  color: var(--danger-fg); }
.hui-delta.flat { background: var(--neutral-bg); color: var(--neutral-fg); }
/* apparition au montage */
@media (prefers-reduced-motion: no-preference) {
  .hui-delta { animation: hui-pop .32s cubic-bezier(.34,1.56,.64,1) both; }
}
@keyframes hui-pop { from { opacity: 0; transform: translateY(3px) scale(.92); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   4. PROGRESS — barre animée + stepper (états gérés par le JS)
   ========================================================================== */
.progress[data-hui-progress] > span { width: 0; transition: width .55s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .progress[data-hui-progress] > span { transition: none; } }
.step.is-todo .step-num { background: var(--bg-card); border-color: var(--border-strong); color: var(--ink-3); }
.step.is-todo + .step::before { background: var(--border-strong); }

/* ==========================================================================
   5. INPUT FEEDBACK — état valide (succès) en complément de platform.css
   (.is-focus / .is-error sont déjà stylés dans platform.css)
   ========================================================================== */
.field-input.is-valid {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(63, 138, 94, 0.12);
}
.field-with-icon .field-trail svg { display: block; }
.field.has-error .field-trail { color: var(--danger-fg); }
.field-input.is-valid + .field-trail,
.field-with-icon .field-trail:has(svg use[href="#i-check"]) { color: var(--green-600); }
.field-error { display: none; }
.field-error:not(:empty) {
  display: block;
  animation: hui-shake .3s cubic-bezier(.36,.07,.19,.97) both;
}
@media (prefers-reduced-motion: reduce) { .field-error:not(:empty) { animation: none; } }
@keyframes hui-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}