/* components.css — segmenté depuis le monolithe, éditer ici. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;vertical-align:middle;
  height:36px;padding:0 16px;border-radius:8px;font-size:13.5px;font-weight:500;cursor:pointer;user-select:none;
  border:1px solid transparent;background:transparent;color:var(--txt);transition:background .15s,border-color .15s}
.btn:focus-visible{outline:2px solid var(--mut);outline-offset:2px}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-default{background:var(--accent);color:var(--accent-txt)} .btn-default:hover{filter:brightness(.92)}
.btn-destructive{background:var(--danger);color:#fff} .btn-destructive:hover{filter:brightness(.9)}
.btn-outline{border-color:var(--border);color:var(--txt)} .btn-outline:hover{background:var(--hover)}
.btn-secondary{background:var(--hover2);color:var(--txt)} .btn-secondary:hover{filter:brightness(1.15)}
.btn-ghost{color:var(--mut)} .btn-ghost:hover{background:var(--hover);color:var(--txt)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-icon{width:36px;padding:0}
.card{background:var(--card);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow);min-width:0}
.card-h{padding:16px 16px 0} .card-c{padding:12px 16px;min-width:0} .card-f{padding:12px 16px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-t{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.card-t .ic{color:var(--mut)}
.card-d{margin:5px 0 0;font-size:13px;color:var(--mut)}
.lbl{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.inp,select.inp{display:flex;height:36px;width:100%;border-radius:8px;border:1px solid var(--border);background:transparent;
  padding:0 12px;font-size:13.5px;color:var(--txt)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
select.inp option{background:var(--card);color:var(--txt)}
.inp::placeholder{color:var(--faint)} .inp:focus{outline:2px solid var(--mut);outline-offset:1px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--border)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);margin-top:-6px;border:none}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--border)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:none}
input[type=checkbox].chk{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid var(--border);
  padding:2px 10px;font-size:12px;font-weight:600;color:var(--mut);
  background:color-mix(in srgb, var(--txt) 6%, transparent);border-color:color-mix(in srgb, var(--txt) 16%, transparent)}
.badge-ok{background:color-mix(in srgb, #34d399 14%, transparent);border-color:color-mix(in srgb, #34d399 42%, transparent);color:color-mix(in srgb, #34d399 45%, var(--txt))}
.badge-danger{background:color-mix(in srgb, #f87171 12%, transparent);border-color:color-mix(in srgb, #f87171 45%, transparent);color:color-mix(in srgb, #f87171 55%, var(--txt))}
/* Badge occupant la place d'un bouton (même gabarit que .btn-sm). */
.badge-btn{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px;justify-content:center}
/* Stepper numérique (remplace le spinner natif des <input type=number>). */
.stepper{display:inline-flex;align-items:stretch;height:36px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:transparent}
.stepper:focus-within{outline:2px solid var(--mut);outline-offset:1px}
.stepper button{width:36px;border:0;background:transparent;color:var(--mut);cursor:pointer;display:grid;place-items:center;flex:none}
.stepper button:hover:not(:disabled){background:var(--hover);color:var(--txt)}
.stepper button:disabled{opacity:.4;cursor:not-allowed}
.stepper button .ic{width:15px;height:15px}
.stepper input{border:0;width:52px;min-width:0;text-align:center;font-size:13.5px;color:var(--txt);background:transparent;padding:0}
.stepper input:focus{outline:none}
.stepper input:disabled{opacity:.5}
/* Neutralise le spinner natif (Chrome/Safari/Firefox) partout. */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.card-danger{border-color:color-mix(in srgb, #f87171 45%, transparent)}
/* État vide : médaillon centré + titre + aide + CTA (grille + tableau). */
.card.empty,.tempty{padding:44px 24px;text-align:center;display:grid;gap:6px;justify-items:center;align-content:center}
.card.empty{min-height:280px}
.tempty{padding:34px 16px}
.empty-ic{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:var(--hover2);
  border:1px solid var(--border-soft);color:var(--faint);margin-bottom:8px}
.empty-ic .ic{width:26px;height:26px}
.card.empty b,.tempty b{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.card.empty p,.tempty p{margin:0;font-size:13px;color:var(--mut);max-width:400px}
.card.empty .btn,.tempty .btn{margin-top:12px}
.btn-outline-danger{border-color:color-mix(in srgb, #f87171 50%, transparent);color:color-mix(in srgb, #f87171 60%, var(--txt))}
.btn-outline-danger:hover{background:color-mix(in srgb, #f87171 12%, transparent);color:color-mix(in srgb, #f87171 60%, var(--txt))}
/* Écran de chargement : overlay plein écran (HTML statique, visible avant le JS). */
.splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);transition:opacity .3s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash .logo{width:52px;height:52px;border-radius:14px;background:var(--hover);border:1px solid var(--border);display:grid;place-items:center}
.splash .logo .ic{width:26px;height:26px;color:var(--txt)}
.splash h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.splash p{margin:0;font-size:13px;color:var(--mut)}
.splash-bar{width:180px;height:3px;border-radius:999px;background:var(--hover2);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;border-radius:inherit;background:var(--accent);animation:loadslide 1.2s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.splash-bar i{animation:none;width:100%}}
/* Petit cœur Lucide qui bat (nœuds actifs). */
.node-heart{display:inline-flex;vertical-align:-3px;margin-right:7px;color:#34d399;transform-origin:center;animation:heartbeat 1.6s ease-in-out infinite;filter:drop-shadow(0 0 3px color-mix(in srgb, #34d399 55%, transparent))}
.node-heart svg{width:14px;height:14px;fill:currentColor}
.node-heart.off{color:var(--faint);animation:none;filter:none}
.node-heart.off svg{fill:none}
/* État nœud : cœur + libellé (remplace le badge). */
.hv-live{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:color-mix(in srgb, #34d399 55%, var(--txt));white-space:nowrap}
.hv-live.off{color:var(--faint)}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.22)}56%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.node-heart{animation:none}}
.kbd{font-family:ui-monospace,monospace;font-size:11px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--mut);background:var(--hover)}
/* Autofill Chrome : neutralise le fond jaune sur tous les formulaires
   (login mail/mdp, clé API, TOTP, réglages SMTP/comptes, création…). */
.inp:-webkit-autofill,.inp:-webkit-autofill:hover,.inp:-webkit-autofill:focus,.inp:-webkit-autofill:active,
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,
textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,
select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);caret-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;box-shadow:0 0 0 1000px var(--card) inset;
  transition:background-color 9999s ease-in-out 0s}
.inp:-webkit-autofill::first-line,input:-webkit-autofill::first-line{font-size:inherit}
.inp:autofill,input:autofill,textarea:autofill,select:autofill{
  box-shadow:0 0 0 1000px var(--card) inset;-webkit-text-fill-color:var(--txt);caret-color:var(--txt)}