/* ============================================================
   KHS UI — bibliothèque de composants réutilisables
   Toast · Modal · Confirm · Loading · Skeleton · Tooltip ·
   Dropdown · Empty/Success/Error states
   Vanilla, sans dépendance. Préfixe .kui pour éviter tout conflit.
   ============================================================ */
:root{
  --kui-cream:#F7F3EC; --kui-surface:#FCFAF6; --kui-ink:#1C1A17; --kui-muted:#6B655C;
  --kui-gold:#B8935A; --kui-gold-l:#D8C4A0; --kui-line:#E7E0D3;
  --kui-ok:#1f8a4c; --kui-ok-bg:#e9f7ee; --kui-cx:#b4534b; --kui-cx-bg:#fdeceb;
  --kui-new:#2a5bd7; --kui-new-bg:#eef4ff;
  --kui-r:14px; --kui-r-s:10px; --kui-r-pill:999px;
  --kui-ease:cubic-bezier(.22,.61,.36,1);
  --kui-sh:0 30px 90px rgba(28,26,23,.26),0 8px 28px rgba(28,26,23,.14);
  --kui-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kui-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
}
.kui,.kui *{box-sizing:border-box}

/* ---------- Boutons génériques ---------- */
.kui-btn{appearance:none;border:1px solid transparent;border-radius:var(--kui-r-pill);
  font-family:var(--kui-sans);font-size:14px;font-weight:600;padding:11px 20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;line-height:1;
  transition:transform .12s var(--kui-ease),background .25s var(--kui-ease),border-color .25s var(--kui-ease),box-shadow .25s var(--kui-ease)}
.kui-btn:active{transform:scale(.97)}
.kui-btn.primary{background:var(--kui-ink);color:#fff}
.kui-btn.primary:hover{background:#2a2723}
.kui-btn.ghost{background:#fff;color:var(--kui-ink);border-color:var(--kui-line)}
.kui-btn.ghost:hover{border-color:var(--kui-gold-l);background:var(--kui-cream)}
.kui-btn.danger{background:#fff;color:var(--kui-cx);border-color:var(--kui-cx)}
.kui-btn.danger:hover{background:var(--kui-cx-bg)}
.kui-btn.ok{background:var(--kui-ok);color:#fff}
.kui-btn:disabled{opacity:.55;cursor:default}

/* ============================================================
   TOASTS
   ============================================================ */
.kui-toasts{position:fixed;z-index:2147483600;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;
  font-family:var(--kui-sans);max-width:92vw}
.kui-toast{pointer-events:auto;background:var(--kui-ink);color:#fff;padding:12px 18px;
  border-radius:var(--kui-r-pill);font-size:13px;font-weight:600;
  box-shadow:0 12px 34px rgba(28,26,23,.28);display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .32s var(--kui-ease),transform .32s var(--kui-ease)}
.kui-toast.show{opacity:1;transform:none}
.kui-toast .i{display:grid;place-items:center;width:18px;height:18px;flex:0 0 auto}
.kui-toast.ok{background:linear-gradient(160deg,#1f8a4c,#1a7a43)}
.kui-toast.err{background:linear-gradient(160deg,#b4534b,#a04640)}
.kui-toast.info{background:linear-gradient(160deg,#1C1A17,#2a2723)}
.kui-toast .x{margin-left:4px;cursor:pointer;opacity:.7}
.kui-toast .x:hover{opacity:1}

/* ============================================================
   OVERLAY + MODAL / CONFIRM
   ============================================================ */
.kui-ov{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(28,26,23,.42);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);
  opacity:0;transition:opacity .32s var(--kui-ease);font-family:var(--kui-sans)}
.kui-ov.show{opacity:1}
.kui-modal{width:100%;max-width:460px;background:var(--kui-surface);color:var(--kui-ink);
  border-radius:var(--kui-r);box-shadow:var(--kui-sh);overflow:hidden;
  transform:translateY(20px) scale(.97);opacity:0;
  transition:transform .4s var(--kui-ease),opacity .4s var(--kui-ease);max-height:90vh;display:flex;flex-direction:column}
.kui-ov.show .kui-modal{transform:none;opacity:1}
.kui-modal.lg{max-width:640px}
.kui-modal.sm{max-width:380px}
.kui-m-hd{padding:18px 22px;border-bottom:1px solid var(--kui-line);display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px}
.kui-m-hd h3{margin:0;font-family:var(--kui-serif);font-size:1.4rem;font-weight:500;line-height:1.15}
.kui-m-x{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1px solid var(--kui-line);
  background:#fff;color:var(--kui-muted);cursor:pointer;font-size:18px;display:grid;place-items:center;
  transition:background .2s var(--kui-ease)}
.kui-m-x:hover{background:var(--kui-cream);color:var(--kui-ink)}
.kui-m-bd{padding:20px 22px;overflow-y:auto;font-size:14px;color:var(--kui-muted);line-height:1.55}
.kui-m-bd p{margin:0 0 10px}
.kui-m-ft{padding:14px 22px;border-top:1px solid var(--kui-line);display:flex;gap:10px;justify-content:flex-end}
.kui-m-ft .kui-btn{min-width:110px}
@media(max-width:520px){
  .kui-ov{align-items:flex-end;padding:0}
  .kui-modal{max-width:100%;border-radius:18px 18px 0 0;max-height:92vh}
  .kui-m-ft{flex-direction:column-reverse}
  .kui-m-ft .kui-btn{width:100%}
}

/* ============================================================
   LOADING (overlay + inline spinner)
   ============================================================ */
.kui-spin{display:inline-block;border-radius:50%;border:2px solid rgba(28,26,23,.18);
  border-top-color:var(--kui-gold);animation:kui-rot .7s linear infinite;width:18px;height:18px;vertical-align:middle}
.kui-spin.light{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.kui-spin.lg{width:34px;height:34px;border-width:3px}
@keyframes kui-rot{to{transform:rotate(360deg)}}
.kui-loading{position:fixed;inset:0;z-index:2147483550;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:rgba(252,250,246,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .28s var(--kui-ease);font-family:var(--kui-sans)}
.kui-loading.show{opacity:1}
.kui-loading .lbl{font-size:13px;color:var(--kui-muted);font-weight:600}

/* ============================================================
   SKELETON
   ============================================================ */
.kui-sk{display:block;border-radius:8px;background:linear-gradient(90deg,#efe9dd 25%,#f6f1e8 37%,#efe9dd 63%);
  background-size:400% 100%;animation:kui-sh 1.4s ease infinite;height:14px;margin:0 0 8px}
.kui-sk.line{height:12px}
.kui-sk.title{height:20px;width:55%;margin-bottom:12px}
.kui-sk.pill{height:32px;border-radius:999px}
.kui-sk.box{height:80px}
.kui-sk.circle{width:48px;height:48px;border-radius:50%}
.kui-sk.w40{width:40%}.kui-sk.w60{width:60%}.kui-sk.w80{width:80%}
@keyframes kui-sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.kui-sk{animation:none}}

/* ============================================================
   TOOLTIP  (data-khs-tip="texte")
   ============================================================ */
.kui-tip{position:fixed;z-index:2147483640;background:var(--kui-ink);color:#fff;font-size:12px;
  font-weight:600;padding:7px 11px;border-radius:8px;pointer-events:none;max-width:240px;
  box-shadow:0 8px 24px rgba(28,26,23,.24);opacity:0;transform:translateY(4px);
  transition:opacity .2s var(--kui-ease),transform .2s var(--kui-ease);font-family:var(--kui-sans);line-height:1.35}
.kui-tip.show{opacity:1;transform:none}
.kui-tip::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:5px solid transparent}
.kui-tip.top::after{top:100%;border-top-color:var(--kui-ink)}
.kui-tip.bottom::after{bottom:100%;border-bottom-color:var(--kui-ink)}

/* ============================================================
   DROPDOWN
   ============================================================ */
.kui-dd{position:fixed;z-index:2147483620;min-width:180px;background:#fff;border:1px solid var(--kui-line);
  border-radius:var(--kui-r-s);box-shadow:var(--kui-sh);padding:6px;
  opacity:0;transform:translateY(6px) scale(.98);transform-origin:top;
  transition:opacity .2s var(--kui-ease),transform .2s var(--kui-ease);font-family:var(--kui-sans)}
.kui-dd.show{opacity:1;transform:none}
.kui-dd button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;
  background:none;padding:10px 12px;border-radius:8px;font-size:13px;color:var(--kui-ink);cursor:pointer;
  transition:background .15s var(--kui-ease)}
.kui-dd button:hover{background:var(--kui-cream)}
.kui-dd button.danger{color:var(--kui-cx)}
.kui-dd button.danger:hover{background:var(--kui-cx-bg)}
.kui-dd .sep{height:1px;background:var(--kui-line);margin:5px 4px}

/* ============================================================
   ÉTATS (empty / success / error)
   ============================================================ */
.kui-state{text-align:center;padding:34px 20px;font-family:var(--kui-sans)}
.kui-state .ic{width:60px;height:60px;border-radius:999px;display:grid;place-items:center;margin:0 auto 15px}
.kui-state.empty .ic{background:var(--kui-cream);color:var(--kui-gold)}
.kui-state.ok .ic{background:var(--kui-ok-bg);color:var(--kui-ok)}
.kui-state.err .ic{background:var(--kui-cx-bg);color:var(--kui-cx)}
.kui-state .ic svg{width:28px;height:28px}
.kui-state h4{font-family:var(--kui-serif);font-size:1.4rem;font-weight:500;margin:0 0 6px;color:var(--kui-ink)}
.kui-state p{color:var(--kui-muted);font-size:.92rem;max-width:36ch;margin:0 auto 16px}

@media(prefers-reduced-motion:reduce){
  .kui-ov,.kui-modal,.kui-toast,.kui-tip,.kui-dd,.kui-loading,.kui-spin{transition:none!important;animation:none!important}
  .kui-modal{transform:none}
}