/* KnapFlux main stylesheet -  ./assets/css/knapflux.css*/
:root{
  --kf-bg:#0A2540;
  --kf-bg-alt:#081A2B;
  --kf-fg:#EAF2FB;
  --kf-muted:#9FB6CC;
  --kf-accent:#5de0e6;
  --kf-primary:#2B6CFF;
  --kf-card:#0F2D4B;
  --kf-border:#153651;
  --kf-ok:#2ecc71;
  --kf-warn:#f1c40f;
  --kf-bad:#e74c3c;
  --kf-maxw:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  background: linear-gradient(180deg,var(--kf-bg),var(--kf-bg-alt));
  color:var(--kf-fg);
  line-height:1.55;
}

/* Limite la fenêtre JSON à 450px max avec scroll */
.kf-code{ max-height:450px; overflow:auto; }
.kf-code pre{ max-height:inherit; overflow:auto; }

.kf-container{max-width:var(--kf-maxw);margin:0 auto;padding:0 20px}
.kf-muted{color:var(--kf-muted)}
.kf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;border:1px solid var(--kf-border);background:transparent;
  color:var(--kf-fg);padding:.9rem 1.2rem;border-radius:14px;font-weight:600;
  text-decoration:none;transition:.2s ease transform, .2s ease background, .2s ease color
}
.kf-btn:hover{transform:translateY(-1px)}
.kf-btn--primary{background:linear-gradient(90deg,var(--kf-primary),#4D90FF);border-color:transparent}
.kf-btn--ghost{background:transparent}
.kf-btn--small{padding:.55rem .9rem}

.kf-header{position:sticky;top:0;background:rgba(8,26,43,.7);backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid var(--kf-border)}
.kf-header .kf-container{display:flex;align-items:center;justify-content:space-between;height:64px}
.kf-logo{display:flex;align-items:center;gap:.6rem;color:var(--kf-fg);text-decoration:none;font-weight:800}
.kf-logo svg{color:var(--kf-accent)}
.kf-nav{display:flex;gap:1rem;align-items:center}
.kf-nav a{color:var(--kf-muted);text-decoration:none;padding:.4rem .6rem;border-radius:10px}
.kf-nav a:hover{color:var(--kf-fg);background:rgba(255,255,255,.04)}
.kf-nav-toggle{display:none;width:36px;height:36px;border:1px solid var(--kf-border);border-radius:10px;background:transparent;position:relative}
.kf-nav-toggle:before,.kf-nav-toggle:after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--kf-fg)}
.kf-nav-toggle:before{top:12px}.kf-nav-toggle:after{top:20px}

.kf-hero{padding:72px 0;border-bottom:1px solid var(--kf-border)}
.kf-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.kf-hero h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.kf-hero__sub{color:var(--kf-muted);font-size:18px}
.kf-hero__ctas{display:flex;gap:.8rem;margin-top:16px}
.kf-metrics{display:flex;gap:28px;margin-top:18px}
.kf-metric__num{font-size:28px;font-weight:800}
.kf-metric__num span{font-size:16px;color:var(--kf-muted);font-weight:700}
.kf-metric__label{color:var(--kf-muted);font-size:13px}
.kf-smallprint{font-size:12px;color:var(--kf-muted);margin-top:6px}
.kf-hero__art{display:flex;align-items:center;justify-content:center}

.kf-diagram .d-box{fill:#0b2846;stroke:#1a3b5d;stroke-width:2}
.kf-diagram .d-title{fill:#ffffff;font-size:16px;font-weight:700}
.kf-diagram .d-body{fill:#b7c9db;font-size:13px}
.kf-diagram .d-arrow{stroke:url(#grad);stroke-width:3}
.kf-diagram .d-dot{fill:var(--kf-accent)}

.kf-section{padding:72px 0;border-bottom:1px solid var(--kf-border)}
.kf-section--alt{background:rgba(255,255,255,.02)}
.kf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kf-card{background:var(--kf-card);border:1px solid var(--kf-border);border-radius:16px;padding:18px}
.kf-card h3{margin:0 0 6px}
.kf-card p{margin:0;color:var(--kf-muted)}

.kf-steps{counter-reset:step;display:grid;gap:14px;padding-left:0}
.kf-steps li{list-style:none;background:var(--kf-card);border:1px solid var(--kf-border);border-radius:14px;padding:14px 16px;position:relative}
.kf-steps li:before{counter-increment:step;content:counter(step);position:absolute;left:-10px;top:-10px;background:var(--kf-primary);color:white;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:800}

.kf-tabs{display:flex;gap:.6rem;margin-bottom:12px}
.kf-tab{background:transparent;color:var(--kf-muted);border:1px solid var(--kf-border);padding:.5rem .9rem;border-radius:999px;cursor:pointer}
.kf-tab--active{background:rgba(255,255,255,.06);color:var(--kf-fg);border-color:rgba(255,255,255,.2)}
.kf-tabpanes{border:1px solid var(--kf-border);border-radius:16px;background:var(--kf-card);padding:18px}

.kf-tabpane{display:none}
.kf-tabpane--active{display:block}

.kf-flex{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kf-bullets{margin:0;padding-left:18px}
.kf-bullets li{margin:.35rem 0}

.kf-proof .kf-logos{display:flex;gap:12px;flex-wrap:wrap}
.kf-logo-badge{background:rgba(255,255,255,.05);border:1px solid var(--kf-border);padding:.4rem .8rem;border-radius:999px;color:var(--kf-muted)}

.kf-accordion{border:1px solid var(--kf-border);border-radius:16px;overflow:hidden}
.kf-acc-trigger{width:100%;text-align:left;background:rgba(255,255,255,.03);color:var(--kf-fg);border:0;border-bottom:1px solid var(--kf-border);padding:14px 16px;font-weight:700;cursor:pointer}
.kf-acc-panel{padding:12px 16px;color:var(--kf-muted);display:none;background:#0f2d4b}
.kf-acc-panel--open{display:block}
.kf-glossary{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}

.kf-section--cta{background:radial-gradient(80% 120% at 10% 10%, #113763, transparent), radial-gradient(60% 100% at 90% 0%, #133a69, transparent)}
.kf-cta{text-align:center}
.kf-form{max-width:760px;margin:10px auto 0;display:grid;gap:12px}
.kf-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kf-form label{display:grid;gap:6px;font-weight:600}
.kf-form input,.kf-form textarea,.kf-form select{
  background:#0b2542;border:1px solid var(--kf-border);border-radius:12px;color:var(--kf-fg);
  padding:.8rem 1rem;outline:none
}
.kf-feedback{min-height:22px;font-size:14px;margin:6px 0 0}

.kf-footer{padding:40px 0;background:#081a2b}
.kf-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
.kf-logo--muted{color:var(--kf-muted)}
.kf-legal{display:flex;justify-content:space-between;color:var(--kf-muted);border-top:1px solid var(--kf-border);padding-top:16px;margin-top:12px}

@media (max-width: 980px){
  .kf-hero__grid{grid-template-columns:1fr}
  .kf-flex{grid-template-columns:1fr}
  .kf-grid-3{grid-template-columns:1fr}
  .kf-form__row{grid-template-columns:1fr}
  .kf-footer__grid{grid-template-columns:1fr 1fr}
  .kf-glossary{grid-template-columns:1fr}
  .kf-nav{display:none}
  .kf-nav--open{display:flex;position:absolute;top:64px;right:20px;flex-direction:column;background:#0b2542;border:1px solid var(--kf-border);border-radius:12px;padding:10px;gap:.2rem}
  .kf-nav-toggle{display:block}
}

/* Lang active (optionnel) */
.kf-lang--active { font-weight: 700; text-decoration: underline; }



/* === PATCH: HERO KPIs === */
.kf-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.kf-metric{
  background:var(--kf-card);
  border:1px solid var(--kf-border);
  border-radius:14px;
  padding:12px 14px;
  text-align:center;
}
.kf-metric__num{
  font-size:28px;
  font-weight:800;
  line-height:1;
}
.kf-metric__num span{font-size:16px;color:var(--kf-muted);font-weight:700}
.kf-metric__label{
  color:var(--kf-muted);
  font-size:13px;
  margin-top:6px;
}
.kf-smallprint{font-size:12px;color:var(--kf-muted);margin-top:8px;opacity:.9}


/* === PATCH: FORM CONTROLS === */
.kf-form label{display:grid;gap:6px;font-weight:600;color:var(--kf-fg)}
.kf-form input,
.kf-form textarea,
.kf-form select{
  width:100%;
  display:block;
  background:#0b2542;
  border:1px solid var(--kf-border);
  border-radius:12px;
  color:var(--kf-fg);
  padding:.8rem 1rem;
  outline:none;
}
.kf-form input::placeholder,
.kf-form textarea::placeholder{color:var(--kf-muted)}
.kf-form input:focus,
.kf-form textarea:focus,
.kf-form select:focus{
  border-color:var(--kf-primary);
  box-shadow:0 0 0 3px rgba(77,144,255,.15);
}


/* === PATCH: FOOTER LINKS === */
.kf-footer h4{margin:0 0 .5rem;color:var(--kf-fg)}
.kf-footer ul{list-style:none;margin:0;padding:0}
.kf-footer a{
  color:#d7e6f6;
  text-decoration:none;
}
.kf-footer a:hover{
  color:var(--kf-accent);
  text-decoration:none;
}


/* === PATCH: DASHBOARD FILE INPUT === */
#alloc-file{
  width:100%;
  background:#0b2542;
  border:1px solid var(--kf-border);
  color:var(--kf-fg);
  border-radius:12px;
  padding:.8rem 1rem;
}
#alloc-file::file-selector-button{
  background:linear-gradient(90deg,var(--kf-primary),#4D90FF);
  border:0;
  border-radius:10px;
  padding:.5rem .8rem;
  color:#fff;
  margin-right:.6rem;
  cursor:pointer;
}

/* Table du dashboard (gains/allocations) */
.table table{width:100%;border-collapse:collapse}
.table thead th{
  text-align:left;
  font-weight:700;
  color:var(--kf-muted);
  border-bottom:1px solid var(--kf-border);
  padding:8px 10px;
}
.table tbody td{
  border-bottom:1px solid var(--kf-border);
  padding:8px 10px;
  color:var(--kf-fg);
}



/* Optional: lien global plus lisible sur fond sombre */
a{color:#d7e6f6}
a:hover{color:var(--kf-accent)}




/* === LINKS (globaux) === */
a{color:#d7e6f6;text-decoration:none}
a:hover{color:var(--kf-accent);text-decoration:none}
.kf-card a{border-bottom:1px dashed rgba(215,230,246,.35)}
.kf-card a:hover{border-bottom-color:transparent}

/* === FOOTER LINKS (si footer présent) === */
.kf-footer a{color:#d7e6f6;text-decoration:none}
.kf-footer a:hover{color:var(--kf-accent)}

/* === FILE UPLOAD — style uniforme (demo + dashboard) === */
/* conteneur "boîte" générique */
.kf-upload{
  background:#0b2542;border:1px dashed var(--kf-border);
  border-radius:14px;padding:14px;display:grid;gap:8px
}
.kf-upload .hint{color:var(--kf-muted);font-size:13px}

/* input natif (demo) */
#demo-file,
#alloc-file{
  width:100%;
  background:#0b2542;
  border:1px solid var(--kf-border);
  color:var(--kf-fg);
  border-radius:12px;
  padding:.8rem 1rem;
}

/* bouton de sélection système */
#demo-file::file-selector-button,
#alloc-file::file-selector-button{
  background:linear-gradient(90deg,var(--kf-primary),#4D90FF);
  border:0;border-radius:10px;
  padding:.5rem .8rem;
  color:#fff;margin-right:.6rem;
  cursor:pointer
}

/* focus visible */
#demo-file:focus,#alloc-file:focus{
  border-color:var(--kf-primary);
  box-shadow:0 0 0 3px rgba(77,144,255,.15);
  outline: none;
}


/* === KNAPFLUX — THEME CLAIR (patch à coller APRÈS ton CSS) === */

/* --- Palette claire --- */
:root{
  --kf-bg:#F6F9FE;         /* fond page */
  --kf-bg-alt:#FFFFFF;     /* fond secondaire */
  --kf-fg:#0A2540;         /* texte principal (bleu sombre) */
  --kf-muted:#526C86;      /* texte atténué */
  --kf-accent:#5de0e6;     /* accent conservé */
  --kf-primary:#2B6CFF;    /* bleu principal conservé */
  --kf-card:#FFFFFF;       /* cartes/blocs */
  --kf-border:#DFE8F3;     /* bordures claires */
}

/* Fond global + texte */
body{
  background: linear-gradient(180deg,var(--kf-bg),var(--kf-bg-alt));
  color: var(--kf-fg);
}

/* Header + nav */
.kf-header{background:rgba(255,255,255,.85); border-bottom:1px solid var(--kf-border)}
.kf-logo{color:var(--kf-fg)}
.kf-nav a{color:var(--kf-muted)}
.kf-nav a:hover{color:var(--kf-fg); background:rgba(10,37,64,.06)}
.kf-nav-toggle{border-color:var(--kf-border)}
.kf-nav--open{background:#fff; border-color:var(--kf-border)}

/* Sections / cartes / onglets */
.kf-section{border-bottom:1px solid var(--kf-border)}
.kf-section--alt{background:rgba(10,37,64,.03)}
.kf-card{background:var(--kf-card); border:1px solid var(--kf-border)}
.kf-card p{color:var(--kf-muted)}
.kf-tabs .kf-tab{border-color:var(--kf-border); color:var(--kf-muted)}
.kf-tab--active{background:#F4F8FF; color:var(--kf-fg); border-color:#E3ECFF}
.kf-tabpanes{background:var(--kf-card); border:1px solid var(--kf-border)}

/* Étapes / listes */
.kf-steps li{background:var(--kf-card); border:1px solid var(--kf-border)}
.kf-steps li:before{background:var(--kf-primary)}

/* KPI tuiles */
.kf-metric{background:var(--kf-card); border:1px solid var(--kf-border)}
.kf-metric__label{color:var(--kf-muted)}

/* Formulaires */
.kf-form label{color:var(--kf-fg)}
.kf-form input,
.kf-form textarea,
.kf-form select{
  background:#fff;
  border:1px solid var(--kf-border);
  color:var(--kf-fg);
}
.kf-form input::placeholder,
.kf-form textarea::placeholder{color:var(--kf-muted)}
.kf-form input:focus,
.kf-form textarea:focus,
.kf-form select:focus{
  border-color:var(--kf-primary);
  box-shadow:0 0 0 3px rgba(43,108,255,.15);
}

/* Upload / file inputs */
.kf-upload{
  background:#fff;
  border:1px dashed var(--kf-border);
}
#demo-file, #alloc-file{
  background:#fff; border:1px solid var(--kf-border); color:var(--kf-fg);
}

/* Accordéon */
.kf-accordion{border:1px solid var(--kf-border)}
.kf-acc-trigger{background:#F6FAFF; color:var(--kf-fg); border-bottom:1px solid var(--kf-border)}
.kf-acc-panel{background:#fff; color:var(--kf-muted)}

/* Tableaux */
.table thead th{color:var(--kf-muted); border-bottom:1px solid var(--kf-border)}
.table tbody td{color:var(--kf-fg); border-bottom:1px solid var(--kf-border)}

/* Liens */
a{color:var(--kf-primary)}
a:hover{color:var(--kf-accent)}
.kf-card a{border-bottom:1px dashed rgba(10,37,64,.25)}
.kf-card a:hover{border-bottom-color:transparent}

/* Footer */
.kf-footer{background:#fff; border-top:1px solid var(--kf-border)}
.kf-footer h4{color:var(--kf-fg)}
.kf-footer a{color:var(--kf-primary)}
.kf-footer a:hover{color:var(--kf-accent)}
.kf-legal{color:var(--kf-muted); border-top:1px solid var(--kf-border)}

/* Diagramme SVG (remplace les fills sombres codés en dur) */
.kf-diagram .d-box{fill:#ffffff; stroke:var(--kf-border)}
.kf-diagram .d-title{fill:var(--kf-fg)}
.kf-diagram .d-body{fill:var(--kf-muted)}
.kf-diagram .d-arrow{stroke:var(--kf-primary)}
.kf-diagram .d-dot{fill:var(--kf-primary)}

/* CTA section (dégradé plus léger) */
.kf-section--cta{
  background: radial-gradient(80% 120% at 10% 10%, #E8F0FF, transparent),
              radial-gradient(60% 100% at 90% 0%, #EAF2FF, transparent);
}

/* Patches de fond sombre codés en dur dans le thème initial */
.kf-acc-panel,
.kf-footer,
#alloc-file,
#demo-file,
.kf-upload{
  background:#fff !important;
}

/* Tabs / Accordions visibility */
.kf-tabpane{display:none}
.kf-tabpane--active{display:block}
.kf-acc-trigger{cursor:pointer}
.kf-acc-panel[hidden]{display:none}

/* Header: empêcher les retours à la ligne et la casse */
.kf-header .kf-container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.kf-nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.kf-nav a{white-space:nowrap;font-size:clamp(13px,.95vw,16px);line-height:1.1;padding:8px 0}
.kf-header .kf-btn--small{padding:8px 12px;border-radius:10px}

/* Mobile menu */
@media (max-width: 900px){
  .kf-nav{display:none}
  .kf-nav.kf-nav--open{
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    position:absolute;left:0;right:0;top:64px;padding:16px;background:#fff;border-bottom:1px solid #e9eef5
  }
  .kf-nav-toggle{display:inline-block}
}
@media (min-width: 901px){ .kf-nav-toggle{display:none} }


/* Accordions */
.kf-acc-trigger{cursor:pointer}
.kf-acc-panel{display:none}
.kf-acc-panel.is-open{display:block}


.i18n-missing { outline: 1px dashed #c00; }
.kf-lang--active { opacity: 0.7; pointer-events: none; }

.kf-logo { display:flex; align-items:center; gap:.5rem; }
.kf-logo-svg svg { width:28px; height:28px; display:block; }

/* Hero diagram (colonne droite) */
.kf-diagram2 { display:flex; flex-direction:column; gap:12px; }
.kf-diagram2 .diag-moto { font-weight:700; font-size:1rem; letter-spacing:.2px; }
.kf-diagram2 .diag-modes { font-size:.95rem; color:var(--kf-muted,#94a3b8); }

.kf-diagram2 .diag-flow {
  display:grid; gap:10px; align-items:stretch;
  grid-template-columns: 1fr auto 1fr auto 1fr;
}
.kf-diagram2 .diag-box {
  background: var(--kf-panel, #0b1220);
  color: #e6edf5;
  border: 1px solid rgba(230,237,245,.16);
  border-radius: 12px; padding: 12px;
}
.kf-diagram2 .diag-box__title { font-weight:700; margin-bottom:6px; }
.kf-diagram2 .diag-box__body { font-size:.92rem; line-height:1.35; opacity:.95; }
.kf-diagram2 .diag-arrow { align-self:center; font-size:22px; opacity:.7; padding:0 4px; color:#9aa4b2; }

.kf-diagram2 .diag-subtitle { margin-top:8px; font-weight:600; font-size:.95rem; opacity:.92; }

/* Chips (fonds) sans dégradé */
.kf-diagram2 .diag-chips { display:flex; flex-wrap:wrap; gap:8px; }
.kf-diagram2 .chip {
  display:inline-block; padding:6px 10px; border-radius:10px;
  background: transparent; color: #9aa4b2;
  border:1px solid rgba(230,237,245,.18); text-decoration:none; font-size:.85rem;
}
.kf-diagram2 .chip:hover { border-color: rgba(230,237,245,.35); }

/* Pills (workflows) */
.kf-diagram2 .diag-pills { display:flex; flex-wrap:wrap; gap:8px; }
.kf-diagram2 .pill {
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(230,237,245,.18); background: rgba(230,237,245,.04);
  color:#9aa4b2; text-decoration:none; font-size:.82rem;
}
.kf-diagram2 .pill:hover { background: rgba(230,237,245,.07); }

/* Responsive */
@media (max-width: 980px){
  .kf-diagram2 .diag-flow { grid-template-columns:1fr; }
  .kf-diagram2 .diag-arrow { display:none; }
}