/* =========================================================
   Calculateur d'encrage — styles SCOPÉS sous .enc-app
   Aucune règle globale : rien ne fuit vers le site, et inversement.
   S'appuie sur les variables de style.css (--ink, --primary, etc.)
   avec repli si le composant est utilisé seul.
   ========================================================= */

.enc-app{
  --enc-card: #fff;
  --enc-line: #e4e4e4;
  --enc-ink: var(--ink, #121212);
  --enc-muted: var(--ink-medium, #ACACAC);
  --enc-primary: var(--primary, #FFD567);
  --enc-blue: var(--accent-blue, #4A90E2);
  --enc-orange: var(--accent-orange, #FF8C42);
  --enc-radius: var(--radius, 10px);
  --enc-radius-sm: var(--radius-sm, 4px);
  color: var(--enc-ink);
}
.enc-app *{box-sizing:border-box}
.enc-app [hidden]{display:none!important}

/* ---- En-tête ---- */
.enc-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--enc-blue);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.enc-eyebrow::before{content:"";width:26px;height:3px;background:var(--enc-primary)}
.enc-app h1.enc-title{font-size:2.5rem;line-height:1.05;letter-spacing:-.02em;margin:.4rem 0 .6rem;max-width:16ch}
.enc-lede{color:var(--enc-muted);max-width:56ch;margin:0;font-size:1.05rem}
.enc-trust{margin-top:14px;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:2px solid var(--enc-ink);border-radius:999px;padding:6px 14px 6px 11px}
.enc-dot{width:8px;height:8px;border-radius:50%;background:#2bb673;flex:none}

/* ---- Grille ---- */
.enc-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
@media(min-width:840px){.enc-grid{grid-template-columns:1.4fr 1fr;align-items:start}}
.enc-card{background:var(--enc-card);border:3px solid var(--enc-ink);border-radius:var(--enc-radius)}

/* ---- Scène (dépôt + aperçu) ---- */
.enc-stage{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center;padding:14px}
.enc-drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:30px;cursor:pointer;border-radius:var(--enc-radius);transition:background .15s}
.enc-drop:hover,.enc-drop.hot{background:rgba(74,144,226,.07)}
.enc-drop svg{width:42px;height:42px;color:var(--enc-blue);margin-bottom:4px}
.enc-drop b{font-weight:800;font-size:1.05rem}
.enc-drop span{color:var(--enc-muted);font-size:.85rem;line-height:1.45}
.enc-browse{margin-top:4px;color:var(--enc-blue);font-weight:700;text-decoration:underline}
.enc-host{position:relative;line-height:0;max-width:100%;display:inline-block}
.enc-host canvas{max-width:100%;height:auto;display:block}
#enc-overlay{position:absolute;inset:0;pointer-events:none}
.enc-scan{position:absolute;left:0;right:0;height:38%;top:-40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(74,144,226,.18),transparent);border-bottom:2px solid var(--enc-blue);opacity:0}
.enc-scan.run{animation:enc-sweep 1.05s ease-in-out}
@keyframes enc-sweep{0%{top:-40%;opacity:1}100%{top:100%;opacity:1}}

/* ---- Panneau ---- */
.enc-panel{padding:20px 20px 18px}
.enc-panel.empty{color:var(--enc-muted)}
.enc-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.enc-metric-label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--enc-muted);margin:0 0 2px}
.enc-metric{font-weight:800;font-size:clamp(2.6rem,8vw,3.6rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0}
.enc-metric small{font-size:.42em;font-weight:700;color:var(--enc-muted);margin-left:6px;letter-spacing:0}
.enc-badge{font-size:.7rem;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:5px 10px;white-space:nowrap;border:2px solid var(--enc-ink);background:#fff}
.enc-badge.cmyk{border-color:var(--enc-blue);background:rgba(74,144,226,.1)}
.enc-badge.rgb{border-color:var(--enc-orange);background:rgba(255,140,66,.12)}
.enc-badge.mix{border-color:#9b6dd6;background:rgba(155,109,214,.12)}

.enc-bar{margin:16px 0 6px;height:16px;border-radius:999px;background:#fff;border:2px solid var(--enc-ink);overflow:hidden}
.enc-bar>i{display:block;height:100%;width:0;background:var(--enc-primary);transition:width .5s cubic-bezier(.2,.7,.2,1)}

.enc-rows{margin-top:16px;border-top:1px solid var(--enc-line)}
.enc-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--enc-line);font-size:.92rem}
.enc-row span:first-child{color:var(--enc-muted)}
.enc-row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}

.enc-controls{margin-top:16px;display:grid;gap:14px}
.enc-ctrl label{display:block;font-size:.85rem;color:var(--enc-muted);margin-bottom:6px}
.enc-ctrl .val{color:var(--enc-ink);font-weight:700}
.enc-app input[type=range]{width:100%;accent-color:var(--enc-blue)}
.enc-pager{display:flex;align-items:center;gap:8px}
.enc-app .enc-pager select{font:inherit;font-size:.85rem;padding:5px 8px;border:2px solid var(--enc-ink);border-radius:var(--enc-radius-sm);background:#fff;color:var(--enc-ink);flex:1}
.enc-app .enc-pager button{font:inherit;font-size:1rem;line-height:1;font-weight:800;background:#fff;border:2px solid var(--enc-ink);
  border-radius:var(--enc-radius-sm);padding:3px 11px;cursor:pointer;color:var(--enc-ink);box-shadow:none;margin:0}
.enc-app .enc-pager button:hover{box-shadow:none}
.enc-app .enc-pager button:disabled{opacity:.4;cursor:default}
.enc-hint{font-size:.78rem;color:var(--enc-muted);margin:5px 0 0}

.enc-actions{margin-top:18px}
.enc-app .enc-reset{display:inline-block;margin-top:12px;border:none;background:none;box-shadow:none;padding:0;
  color:var(--enc-blue);text-decoration:underline;font-weight:600;font-size:.85rem;cursor:pointer}
.enc-app .enc-reset:hover{box-shadow:none}

/* ---- Séparations ---- */
.enc-seps{margin-top:18px;padding:20px}
.enc-app h2.enc-seps-title{font-size:1.4rem;margin:0 0 2px}
.enc-seps .enc-intro{color:var(--enc-muted);font-size:.88rem;margin:6px 0 16px;max-width:62ch}
.enc-plates{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:720px){.enc-plates{grid-template-columns:repeat(2,1fr)}}
.enc-plate{display:flex;flex-direction:column;gap:8px}
.enc-plate .enc-frame{border:2px solid var(--enc-ink);border-radius:var(--enc-radius-sm);overflow:hidden;background:#fff;
  line-height:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.enc-plate canvas{max-width:100%;max-height:100%;height:auto;display:block}
.enc-plate .enc-cap{display:flex;align-items:center;gap:7px;font-size:.85rem}
.enc-plate .enc-sw{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.15);flex:none}
.enc-plate .enc-nm{font-weight:700}
.enc-plate .enc-cv{margin-left:auto;font-size:.8rem;color:var(--enc-muted);font-variant-numeric:tabular-nums}
.enc-tacline{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--enc-line)}
.enc-tacline div{font-size:.82rem;color:var(--enc-muted)}
.enc-tacline b{font-size:1.1rem;font-weight:800;color:var(--enc-ink);font-variant-numeric:tabular-nums;display:block;margin-top:2px}
.enc-tacline b.warn{color:var(--enc-orange)}

.enc-note{margin-top:20px;font-size:.8rem;color:var(--enc-muted);max-width:66ch;border-left:3px solid var(--enc-primary);padding-left:12px}
.enc-note b{color:var(--enc-ink)}
.enc-err{color:var(--enc-orange);font-weight:700;font-size:.85rem;margin-top:12px}
.enc-app :focus-visible{outline:2px solid var(--enc-blue);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.enc-scan.run{animation:none}.enc-app *{transition:none!important}}