/* Amikal — design system repris du mockup Tariva (_ds industry + helmet). */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100:#f5f5f8; --color-neutral-200:#e7e7ea; --color-neutral-300:#d4d4d7;
  --color-neutral-400:#b7b7ba; --color-neutral-500:#98989b; --color-neutral-600:#7a7a7d;
  --color-neutral-700:#5d5d60; --color-neutral-800:#424244; --color-neutral-900:#2b2b2d;

  --color-accent-100:#eef6ff; --color-accent-200:#d6ebff; --color-accent-300:#b5d9fd;
  --color-accent-400:#94bce3; --color-accent-500:#749dc4; --color-accent-600:#597ea3;
  --color-accent-700:#416180; --color-accent-800:#2c455d; --color-accent-900:#1d2d3d;

  --font-heading:'Space Grotesk','Rubik','IBM Plex Sans Hebrew',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Hebrew','Rubik',system-ui,sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb,#2b2b2d 14%,transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb,#2b2b2d 16%,transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb,#2b2b2d 22%,transparent);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.55; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:600;
  line-height:1.12; letter-spacing:-.01em; margin:0 0 7px; }
h1{font-size:34px} h2{font-size:28px} h3{font-size:22px} h4{font-size:18px}
h5{font-size:15px} h6{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase}
p{margin:0 0 10px} a{color:var(--color-accent); text-underline-offset:3px}
.text-muted{color:color-mix(in srgb,var(--color-text) 55%,transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--color-neutral-300)}

/* — blueprint frame — */
.blueprint{position:relative;border:1px solid var(--color-divider);border-radius:0}
.blueprint>.corner{position:absolute;width:11px;height:11px;
  color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}
.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}
.blueprint>.corner.br{bottom:-6px;right:-6px}

/* — buttons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:600;
  font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;
  border:1px solid var(--color-divider);padding:7px 12px;border-radius:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.btn svg{display:block}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent)}
.btn-primary:hover:not(:disabled){background:var(--color-accent-600)}
.btn-primary:active{background:var(--color-accent-700)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-ghost{color:var(--color-accent);border-color:transparent;padding-inline:4px}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.btn-icon{width:36px;height:36px;padding:0}

/* — forms — */
.field>label{display:block;font-size:12px;margin-bottom:5px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;
  color:var(--color-text);caret-color:var(--color-accent);background:var(--color-surface);
  border:1px solid var(--color-divider);border-radius:0}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:90px;resize:vertical}

/* — segmented — */
.seg{display:inline-flex;overflow:hidden;border:1px solid var(--color-divider)}
.seg-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  font-size:13px;cursor:pointer;user-select:none}
.seg-opt+.seg-opt{border-inline-start:1px solid var(--color-divider)}
.seg-opt.on{background:var(--color-accent);color:#fff}
.seg-opt:not(.on):hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}

/* — tables — */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:start;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 60%,transparent);
  padding:7px;border-bottom:1px solid var(--color-divider)}
.table td{padding:7px;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
.table tbody tr:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}

/* — dialog — */
.dialog-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:14px;
  background:color-mix(in srgb,var(--color-neutral-900) 50%,transparent);z-index:80}
@keyframes cmToast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cmModal{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1.1s linear infinite}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes checkPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.check-pop{animation:checkPop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes barShine{0%{background-position:-120px 0}100%{background-position:220px 0}}
.proc-bar-fill{background-image:linear-gradient(90deg,var(--color-accent),var(--color-accent));transition:width .5s cubic-bezier(.4,0,.2,1)}
.modal{background:#fff;border:1px solid var(--color-divider);box-shadow:var(--shadow-lg);
  animation:cmModal .28s ease;max-height:92vh;overflow:auto}

/* — chips (options de fork) — */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 11px;
  border:1px solid var(--color-divider);cursor:pointer;background:#fff;user-select:none;
  font-family:var(--font-body)}
.chip:hover{border-color:var(--color-accent)}
.chip.on{background:#6f96bd;border-color:#6f96bd;color:#fff}
.chip.soft{background:var(--color-accent-100);border-color:var(--color-accent-300);
  color:var(--color-accent-800)}
.chip.off{opacity:.5;text-decoration:line-through}

/* tuiles/cartes de dashboard cliquables : affordance au survol */
.metric-tile{transition:border-color .12s, box-shadow .12s}
.metric-tile:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}

/* ── animation d'import par ligne (spec 13) ── */
@keyframes thinkingSweep{0%{background-position:180% 0}100%{background-position:-80% 0}}
.thinking{
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--color-text) 42%,transparent) 0%,
    color-mix(in srgb,var(--color-text) 42%,transparent) 42%,
    var(--color-accent) 50%,
    color-mix(in srgb,var(--color-text) 42%,transparent) 58%,
    color-mix(in srgb,var(--color-text) 42%,transparent) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:thinkingSweep 1.7s linear infinite}
.ln-prog{height:5px;border-radius:4px;background:color-mix(in srgb,var(--color-text) 9%,transparent);overflow:hidden;flex:none;position:relative}
.ln-prog>i{display:block;height:100%;border-radius:4px;background:var(--color-accent);transition:width .35s cubic-bezier(.4,0,.2,1)}
/* barre INDÉTERMINÉE pour une ligne en cours : faisceau qui traverse, sans
   timing client (survit au remount/revisit → l'anim ne « repart pas de zéro ») */
@keyframes lnIndet{0%{left:-38%}100%{left:100%}}
.ln-prog.indet>i{position:absolute;top:0;width:38%;left:-38%;animation:lnIndet 1.25s cubic-bezier(.4,0,.2,1) infinite}
.ln-row{transition:background .2s}
.ln-row.act{background:var(--color-accent-100)}
@keyframes lnPulse{0%,100%{opacity:.45}50%{opacity:1}}
.ln-wait{animation:lnPulse 1.6s ease-in-out infinite}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}

/* Find HS code — ossature 3 colonnes : fiche | navigation | classement */
.tv-split3{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,340px)}
/* crans CONFIRMÉS = cliquables pour revenir (affordance : hover + flèche) */
.cran-back{transition:background .12s,border-color .12s}
.cran-back:hover{background:var(--color-accent-100)!important;border-color:var(--color-accent)!important}
.cran-back .cran-back-hint{opacity:.55}
.cran-back:hover .cran-back-hint{opacity:1}
@media (max-width:1400px){
  .tv-split3{grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,300px)}
}
@media (max-width:1180px){
  .tv-split{grid-template-columns:minmax(0,1fr) !important}
  .tv-cards2{grid-template-columns:minmax(0,1fr) !important}
  .tv-split3{grid-template-columns:minmax(0,1fr) !important}
}
@keyframes cmFadeOut{from{opacity:.85}to{opacity:0;transform:translateY(5px)}}

/* ── arbre de décision GRAPHIQUE (tronc → branches, connecteurs dessinés) ── */
.tn{display:flex;align-items:center}
.tn-label{border:1.5px solid var(--color-divider);background:#fff;padding:5px 9px;
  font-family:var(--font-heading);font-weight:700;font-size:12.5px;white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.tn-label.pick{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-100)}
.tn-kids{display:flex;flex-direction:column;justify-content:center;gap:7px;
  margin-inline-start:26px;position:relative}
.tn-kids::before{content:"";position:absolute;inset-inline-start:-26px;top:50%;
  width:12px;border-top:1.5px solid var(--color-neutral-400)}
.tn-branch{position:relative;padding-inline-start:14px}
.tn-branch::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  width:14px;border-top:1.5px solid var(--color-neutral-400)}
.tn-branch::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;
  border-inline-start:1.5px solid var(--color-neutral-400)}
.tn-branch:first-child::after{top:50%}
.tn-branch:last-child::after{bottom:50%}
.tn-branch:only-child::after{display:none}
.tn-dec{font-size:9.5px;line-height:1.35;color:var(--color-neutral-700);
  background:var(--color-accent-100);border:1px dashed var(--color-accent-300);
  padding:3px 7px;max-width:240px}
/* nœud = boîte (largeur uniforme) + sûreté EN DESSOUS · score À CÔTÉ pour les feuilles */
.tn-node{display:flex;align-items:center;gap:6px}
.tn-box{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
/* sûreté du cran : pastille discrète SOUS la boîte (dans le flux de la colonne, largeur
   de la boîte inchangée → aucune case décalée) */
.tn-cert{font-weight:700;font-size:8.5px;padding:0 5px;border-radius:8px;line-height:1.65;
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.tn-cert i{width:3.5px;height:3.5px;border-radius:50%;background:currentColor;flex:none;opacity:.85}
/* score final à la feuille : pastille pleine, À CÔTÉ de la boîte */
.tn-score{font-family:var(--font-heading);font-weight:800;font-size:9.5px;padding:2px 7px;
  border-radius:10px;line-height:1.35;white-space:nowrap;color:#fff;flex:none;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(20,30,50,.14)}

/* ─────────────── Dark mode (thème sombre) ─────────────── */
/* Inversion REPRISE À L'IDENTIQUE du site vitrine (website/assets/css/site.css)
   — mêmes fond/surface/encre, divider/hairline en color-mix, ombres renforcées,
   et surtout l'ACCENT qui s'éclaircit (#5980a6 → #6f96bd) pour le contraste. */
:root[data-theme="dark"] {
  --color-bg:#16181c; --color-surface:#1e2127; --color-surface-2:#23262c; --color-text:#e7e9ec;
  --color-divider: color-mix(in srgb, #e7e9ec 16%, transparent);
  --color-neutral-100:#23262c; --color-neutral-150:#23262c; --color-neutral-200:#2b2f37;
  --color-neutral-300:#3a3f48; --color-neutral-400:#5a606b; --color-neutral-500:#8a909a;
  --color-neutral-600:#a7adb6; --color-neutral-700:#c2c7ce; --color-neutral-800:#dce0e5; --color-neutral-900:#eef0f3;
  /* accent éclairci en sombre (vitrine) — liens/boutons/accents lisibles sur #16181c */
  --color-accent:#6f96bd; --color-accent-600:#5f88b1; --color-accent-700:#527ba6;
  --color-accent-100:#1f2b38; --color-accent-200:#243444; --color-accent-300:#2c455d;
  --shadow-md:0 6px 22px rgba(0,0,0,.5); --shadow-lg:0 18px 48px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body { background:var(--color-bg); color:var(--color-text); }
/* Surfaces blanches en dur — inline STRING (background:#fff) ET style-objets preact
   (que le navigateur sérialise en « rgb(255, 255, 255) ») : les deux doivent basculer,
   sinon les popovers/menus « à droite » restent blancs et le texte clair y devient illisible. */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="rgb(255, 255, 255)"],
:root[data-theme="dark"] [style*="rgb(255,255,255)"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"] { background-color: var(--color-surface) !important; }
:root[data-theme="dark"] .blueprint { background: var(--color-surface) !important; }
/* surfaces blanches DÉFINIES EN CSS (échappent au catch-all inline) */
:root[data-theme="dark"] .chip { background: var(--color-surface); }
:root[data-theme="dark"] .chip.soft { color: var(--color-accent-400); }   /* lisible sur fond sombre */
:root[data-theme="dark"] .tn-label { background: var(--color-surface); }
:root[data-theme="dark"] .input,
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background: #12141a !important; color: var(--color-text) !important; border-color: var(--color-divider) !important; }
:root[data-theme="dark"] .input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--color-neutral-500); }
:root[data-theme="dark"] .text-muted { color: var(--color-neutral-600) !important; }
:root[data-theme="dark"] table, :root[data-theme="dark"] .table td { color: var(--color-text); }
:root[data-theme="dark"] .table th { color: var(--color-neutral-600); }
:root[data-theme="dark"] .modal, :root[data-theme="dark"] .dialog-backdrop > div { background: var(--color-surface) !important; }

/* ═══════════════ AMIKAL · עמיקל — brand logo ═══════════════ */
:root{
  --amikal-accent:#5980a6;   /* fork strokes · the ק / "ka" */
  --amikal-ink:#1d1f20;      /* Hebrew wordmark body */
  --amikal-deep:#2f4a63;     /* English wordmark body · root node */
  --amikal-hs6:#3f8f88;      /* left branch node · HS6 */
  --amikal-hs10:#7a6ea6;     /* right branch node · HS8/10 */
}
.amikal-logo{
  display:inline-flex; align-items:center; gap:.34em;
  direction:rtl; line-height:1; text-decoration:none;
}
.amikal-logo svg{display:block; flex:none; overflow:visible}
.amikal-logo .amikal-name{
  font-family:'Heebo','IBM Plex Sans Hebrew',system-ui,sans-serif;
  font-weight:800; letter-spacing:-.015em; color:var(--amikal-ink);
}
.amikal-logo .amikal-k{color:var(--amikal-accent)}   /* the ק (accent) */
/* wordmark hébreu עמיקל partout (même UI anglaise) — plus de variante latine */
.amikal-logo[data-tone="light"] .amikal-name{color:#fff}
.amikal-logo[data-tone="light"] .amikal-k{color:#9dc0e0}
/* dark mode — repris de la vitrine : le wordmark s'éclaircit (sinon invisible),
   le ק garde l'accent (lisible sur #1e2127) */
:root[data-theme="dark"] .amikal-logo .amikal-name{color:#e7e9ec}
:root[data-theme="dark"] .amikal-logo[data-tone="dark"] .amikal-k{color:#7ba3ca}