/* ============================================================
   Caly-Lab Kit — systeme de design + popups
   Reutilisable par tous les labs. Charge via :
   <link rel="stylesheet" href="../_kit/caly-lab-kit.css">
   <script src="../_kit/caly-lab-kit.js" defer></script>
   Design inspire du lab de reference « Caly-Fuite » (Material / Google).
   ============================================================ */
:root{
  --clk-bg:#f8f9fa; --clk-panel:#fff; --clk-alt:#f1f3f4; --clk-surface:#fff;
  --clk-text:#202124; --clk-text2:#5f6368; --clk-border:#dadce0; --clk-border-soft:#e8eaed;
  --clk-accent:#1a73e8; --clk-accent-dk:#1557b0; --clk-accent-soft:#e8f0fe;
  --clk-success:#34a853; --clk-warning:#f9ab00; --clk-danger:#ea4335;
  --clk-purple:#9334e6; --clk-cyan:#1da1f2; --clk-orange:#fa7b17;
  --clk-shadow-1:0 1px 2px rgba(60,64,67,.08),0 1px 3px rgba(60,64,67,.12);
  --clk-shadow-2:0 1px 3px rgba(60,64,67,.12),0 4px 8px rgba(60,64,67,.10);
  --clk-shadow-3:0 2px 6px rgba(60,64,67,.15),0 8px 16px rgba(60,64,67,.10);
  --clk-radius:8px; --clk-radius-lg:12px;
  --clk-font:'Google Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --clk-mono:'Roboto Mono','Consolas','SF Mono',monospace;
  --clk-top:60px;
}

@keyframes clk-fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ---- Popup concept / info-bulle formule ---- */
[data-concept]{ cursor:help; border-bottom:1px dashed var(--clk-accent); }
.clk-modal-backdrop{ position:fixed; inset:0; background:rgba(32,33,36,.45); z-index:9800;
  display:none; align-items:center; justify-content:center; padding:20px; }
.clk-modal-backdrop.open{ display:flex; }
.clk-modal{ background:#fff; border-radius:var(--clk-radius-lg); max-width:560px; width:100%;
  max-height:80vh; overflow-y:auto; box-shadow:var(--clk-shadow-3); font-family:var(--clk-font);
  padding:22px 24px; animation:clk-fade .2s; }
.clk-modal h3{ margin:0 0 10px; color:var(--clk-accent); font-size:1.15rem; }
.clk-modal p{ color:var(--clk-text); line-height:1.6; font-size:.92rem; }
.clk-modal .clk-close{ float:right; background:none; border:none; font-size:1.4rem;
  cursor:pointer; color:var(--clk-text2); line-height:1; }
.clk-tooltip{ position:fixed; z-index:9900; background:rgba(15,23,42,.94); color:#fff;
  font-family:var(--clk-mono); font-size:.78rem; padding:6px 10px; border-radius:6px;
  pointer-events:none; max-width:320px; box-shadow:var(--clk-shadow-2); display:none; }
[data-formula]{ cursor:help; }