/* ================================================================
   CalculaX – Scientific Calculator
   calculax.css — hébergé sur Cloudflare Pages
   Intégration WordPress/Elementor : isolation via #calculax-root
   Variables CSS préfixées --cx-* pour éviter les conflits de thème
   ================================================================ */

/* ── Variables CSS (scope global, nommage isolé --cx-*) ──────── */
:root{
--cx-bg:#e7ebfc;
--cx-bg2:#ffffff;
--cx-bg3:#f0f4ff;
--cx-bg4:#d9e2fb;
--cx-blue:#1a3057;
--cx-green:#1a6b3c;
--cx-purple:#5e4b8b;
--cx-orange:#b45f2e;
--cx-red:#b52b2b;
--cx-yellow:#b38b2a;
--cx-text:#1a3057;
--cx-text2:#3a5270;
--cx-text3:#6b7f99;
--cx-border:#b8c7e3;
--cx-border2:#8fa3c7;
--cx-grd1:linear-gradient(135deg,#1a3057,#3a6b9b);
--cx-shadow:0 8px 32px rgba(26,48,87,0.15);
}

/* ── Reset minimal — uniquement dans le périmètre du widget ──── */
#calculax-root *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Layout conteneur ────────────────────────────────────────── */
#calculax-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 40px;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cx-text);
}





/* HEADER */
#calculax-root .header {display:flex;align-items:center;gap:14px;margin-bottom:28px;user-select:none;}
#calculax-root .header img {height:42px;filter:drop-shadow(0 2px 12px rgba(0,0,0,0.1));}
#calculax-root .header-title {font-size:15px;color:var(--cx-text2);font-weight:400;letter-spacing:.04em;}



/* WRAPPER */
#calculax-root .calc-wrap {width:100%;max-width:480px;background:var(--cx-bg2);border-radius:20px;border:1px solid var(--cx-border);overflow:hidden;box-shadow:var(--cx-shadow);}

/* DISPLAY */
#calculax-root .display {background:var(--cx-bg);padding:20px 20px 14px;border-bottom:1px solid var(--cx-border);}
#calculax-root .display-expr {font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--cx-text2);min-height:18px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;margin-bottom:6px;}
#calculax-root .display-main {font-family:'JetBrains Mono',monospace;font-size:clamp(26px,6vw,40px);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cx-text);letter-spacing:-.02em;line-height:1.1;}
#calculax-root .display-main.error {color:var(--cx-red)!important;font-size:22px;}
#calculax-root .mem-indicator {font-size:11px;color:var(--cx-purple);margin-top:4px;text-align:left;min-height:14px;font-weight:600;letter-spacing:.05em;}

/* TOOLBAR */
#calculax-root .toolbar {display:flex;gap:8px;padding:10px 14px;background:var(--cx-bg3);border-bottom:1px solid var(--cx-border);align-items:center;flex-wrap:wrap;}
#calculax-root .mode-toggle {display:flex;background:var(--cx-bg4);border-radius:8px;overflow:hidden;border:1px solid var(--cx-border);}
#calculax-root .mode-btn {padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--cx-text2);transition:all .15s;letter-spacing:.03em;}
#calculax-root .mode-btn.active {background:var(--cx-blue);color:#fff;}
#calculax-root .inv-btn {padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--cx-border2);background:transparent;color:var(--cx-text2);border-radius:8px;transition:all .15s;letter-spacing:.03em;}
#calculax-root .inv-btn.active {background:var(--cx-purple);color:#fff;border-color:var(--cx-purple);}

/* BUTTONS GRID */
#calculax-root .btn-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:14px;}

#calculax-root .btn {position:relative;border:none;border-radius:10px;cursor:pointer;font-family:'Space Grotesk',sans-serif;
font-size:17.7px;
font-weight:600;padding:0;height:42px;
display:flex;align-items:center;justify-content:center;transition:transform .08s,opacity .12s,background .12s;user-select:none;letter-spacing:.02em;outline:none;touch-action:manipulation;}
#calculax-root .btn:active {transform:scale(.94);}
#calculax-root .btn-num {background:var(--cx-bg3);color:var(--cx-text);}
#calculax-root .btn-num:hover {background:var(--cx-bg4);}
#calculax-root .btn-op {background:#e2f0e5;color:var(--cx-green);}
#calculax-root .btn-op:hover {background:#cde0d5;}
#calculax-root .btn-fn {background:#d5eaee;color:var(--cx-blue);}
#calculax-root .btn-fn:hover {background:#c0dde3;}
#calculax-root .btn-eq {background:var(--cx-grd1);color:#fff;font-size:28px;font-weight:700;}
#calculax-root .btn-eq:hover {opacity:.92;}
#calculax-root .btn-clear {background:#f7e2e2;color:var(--cx-red);}
#calculax-root .btn-clear:hover {background:#f0d0d0;}
#calculax-root .btn-mem {background:#e3daf0;color:var(--cx-purple);font-size:17.7px;}
#calculax-root .btn-mem:hover {background:#d6c9e8;}
#calculax-root .btn-spec {background:#f5efe0;color:var(--cx-orange);}
#calculax-root .btn-spec:hover {background:#efe4ce;}
#calculax-root .btn-zero {grid-column:span 2;}
#calculax-root .btn sup {font-size:12.6px;position:relative;top:-4px;}


/* HISTORY */
#calculax-root .history-panel {border-top:1px solid var(--cx-border);padding:12px 14px;max-height:140px;overflow-y:auto;background:var(--cx-bg2);}
#calculax-root .history-panel:empty {display:none;}
#calculax-root .history-title {font-size:11px;color:var(--cx-text3);margin-bottom:6px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
#calculax-root .history-item {font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cx-text2);padding:4px 0;border-bottom:1px solid var(--cx-border);cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
#calculax-root .history-item:hover {color:var(--cx-text);}
#calculax-root .history-item span:last-child {color:var(--cx-green);font-weight:700;}
#calculax-root .history-panel::-webkit-scrollbar {width:4px;}
#calculax-root .history-panel::-webkit-scrollbar-track {background:transparent;}
#calculax-root .history-panel::-webkit-scrollbar-thumb {background:var(--cx-border2);border-radius:4px;}

/* FOOTER */
#calculax-root .footer {margin-top:14px;font-size:11px;color:var(--cx-text3);text-align:center;}
#calculax-root .footer a {color:var(--cx-text3);}

@media(max-width:380px){
  #calculax-root .btn {height:38px;font-size:15px;}
#calculax-root .btn-grid {gap:4px;padding:10px;}
#calculax-root .btn-eq {font-size:23px;}
#calculax-root .btn sup {font-size:11px;}

}