/* Kohinos — composants visuels interactifs / animés
 * Vanilla CSS + SVG. Zéro dépendance externe.
 * Activés par IntersectionObserver dans diagrams.js
 * (les éléments .anim-* démarrent figés et jouent au scroll).
 */

/* ------------------------------------------------------------------ */
/* 0. Alias de tokens — les composants ci-dessous utilisent --text /   */
/*    --muted / --surface qui ne sont pas définis dans style.css       */
/*    (qui parle en --fg / --fg-soft / --bg-soft). On les mappe ici    */
/*    pour garantir un contraste correct en light ET dark.             */
/* ------------------------------------------------------------------ */
:root {
  --text: var(--fg, #1a1d22);
  --muted: var(--fg-muted, var(--fg-soft, #5e6671));
  --surface: var(--bg, #ffffff);
  --surface-soft: var(--bg-soft, #fafbfd);
  --surface-elev: var(--bg-soft-2, #f1f3f7);
}
[data-theme="dark"] {
  --text: #e9e7e1;
  --muted: #b8b5ad;
  --surface: #232730;
  --surface-soft: #1c1f25;
  --surface-elev: #2a2e36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text: #e9e7e1;
    --muted: #b8b5ad;
    --surface: #232730;
    --surface-soft: #1c1f25;
    --surface-elev: #2a2e36;
  }
}

/* ------------------------------------------------------------------ */
/* Container générique pour bloc visuel                                */
/* ------------------------------------------------------------------ */
.viz {
  margin: 2rem 0 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft, #fafbfd);
  padding: 1.25rem 1rem 1rem;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .viz { background: #1a1e25; }
.viz__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.viz__caption {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted, #5e6671);
  margin-top: 0.6rem;
  font-style: italic;
}
.viz svg { display: block; width: 100%; height: auto; max-width: 100%; }
.viz__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted, #5e6671);
}
.viz__legend i {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* 2. 22 invariants — grille interactive                               */
/* ------------------------------------------------------------------ */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
  margin: 1rem 0;
}
.inv-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  position: relative;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  color: #fff;
}
.inv-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.inv-cell.is-selected { border-color: var(--text); box-shadow: 0 0 0 3px var(--brand-tint); }
.inv-cell[data-cat="conservation"] { background: #1560be; }
.inv-cell[data-cat="atomicite"]    { background: #6b21a8; }
.inv-cell[data-cat="crypto"]       { background: #047857; }
.inv-cell[data-cat="ssa"]          { background: #d97706; }
.inv-cell[data-cat="sepa"]         { background: #be123c; }
.inv-cell[data-cat="solde"]        { background: #0e7490; }
.inv-cell[data-cat="import"]       { background: #4b5563; }

.inv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.inv-filter {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inv-filter:hover { border-color: var(--brand); }
.inv-filter.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
[data-theme="dark"] .inv-filter { background: #20252e; }
.inv-cell.is-dim { opacity: 0.15; }

.inv-detail {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  min-height: 3rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.inv-detail__num { font-weight: 700; color: var(--brand-strong, var(--brand)); }
.inv-detail__cat { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ------------------------------------------------------------------ */
/* 5. Organigramme rôles                                               */
/* ------------------------------------------------------------------ */
.role-tree svg { max-width: 760px; margin: 0 auto; }
.role-tree .role-node { cursor: pointer; transition: transform 0.2s; }
.role-tree .role-node:hover { transform: translateY(-2px); }
.role-tree .role-node rect {
  rx: 6; stroke-width: 2;
  fill: var(--surface, #fff);
  stroke: var(--brand);
}
[data-theme="dark"] .role-tree .role-node rect { fill: var(--surface-elev); stroke: var(--brand-strong, var(--brand)); }
.role-tree .role-node text { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
[data-theme="dark"] .role-tree .role-node text { fill: #f1f5fb; }
.role-tree .role-node[data-tier="0"] rect { fill: var(--brand); stroke: var(--brand-strong, var(--brand)); }
.role-tree .role-node[data-tier="0"] text { fill: #fff; }
[data-theme="dark"] .role-tree .role-node[data-tier="0"] text { fill: #0e1117; }
.role-tree .role-node[data-tier="1"] rect { fill: var(--brand-tint); }
[data-theme="dark"] .role-tree .role-node[data-tier="1"] rect { fill: rgba(106, 166, 238, 0.25); }
.role-tree .role-edge { stroke: var(--border); stroke-width: 1.5; fill: none; }
.role-tree .role-detail {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  min-height: 3.5rem;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------ */
/* 6. Bounded contexts                                                 */
/* ------------------------------------------------------------------ */
.bc-diagram svg { max-width: 780px; margin: 0 auto; }
.bc-diagram .bc-box rect { rx: 8; stroke-width: 2; fill: var(--surface, #fff); stroke: var(--brand); }
[data-theme="dark"] .bc-diagram .bc-box rect { fill: var(--surface-elev); stroke: var(--brand-strong, var(--brand)); }
.bc-diagram .bc-box text { fill: var(--text); font-size: 13px; font-weight: 600; text-anchor: middle; }
.bc-diagram .bc-box .bc-sub { font-size: 10px; font-weight: 400; fill: var(--muted, #5e6671); }
[data-theme="dark"] .bc-diagram .bc-box text { fill: #f1f5fb; }
[data-theme="dark"] .bc-diagram .bc-box .bc-sub { fill: #c8cdd6; }
.bc-diagram .bc-edge { stroke-width: 1.8; fill: none; marker-end: url(#bc-arrow); }
.bc-diagram .bc-edge.sync  { stroke: var(--brand); }
.bc-diagram .bc-edge.event { stroke: var(--accent-warm, #d97706); stroke-dasharray: 5 3; }
.bc-diagram .bc-edge.async { stroke: #047857; stroke-dasharray: 2 3; }
.bc-diagram .bc-label { font-size: 10px; fill: var(--muted, #5e6671); text-anchor: middle; }

/* ------------------------------------------------------------------ */
/* 7. ER diagram (entités)                                             */
/* ------------------------------------------------------------------ */
.er-diagram svg { max-width: 820px; margin: 0 auto; }
.er-diagram .er-entity rect { rx: 4; fill: var(--surface, #fff); stroke: var(--brand); stroke-width: 1.5; }
[data-theme="dark"] .er-diagram .er-entity rect { fill: var(--surface-elev); stroke: var(--brand-strong, var(--brand)); }
.er-diagram .er-entity .er-title { font-weight: 700; font-size: 12px; fill: var(--brand); text-anchor: middle; }
[data-theme="dark"] .er-diagram .er-entity .er-title { fill: var(--brand-strong); }
.er-diagram .er-entity .er-field { font-size: 10.5px; fill: var(--text); font-family: ui-monospace, monospace; }
[data-theme="dark"] .er-diagram .er-entity .er-field { fill: #f1f5fb; }
.er-diagram .er-rel { stroke: var(--muted, #5e6671); stroke-width: 1.4; fill: none; }
[data-theme="dark"] .er-diagram .er-rel { stroke: #8a93a3; }
.er-diagram .er-card { font-size: 10px; fill: var(--muted, #5e6671); }
[data-theme="dark"] .er-diagram .er-card { fill: #b8c0cc; }

/* Mobile : ER + role-tree zoom horizontal */
@media (max-width: 720px) {
  .er-diagram, .role-tree, .bc-diagram { overflow-x: auto; }
  .er-diagram svg, .role-tree svg, .bc-diagram svg { min-width: 600px; }
}

/* ------------------------------------------------------------------ */
/* 8. Scenarios SSA — grilles côte-à-côte et mini-diagrammes           */
/* ------------------------------------------------------------------ */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.scenario-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
[data-theme="dark"] .scenario-card { background: #1a1e25; }
.scenario-card__badge {
  position: absolute;
  top: -10px; left: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
}
.scenario-card__badge--warm { background: var(--accent-warm, #d97706); }
.scenario-card__badge--green { background: #047857; }
.scenario-card__badge--purple { background: #7c3aed; }
.scenario-card h4 {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  color: var(--brand-strong, var(--brand));
}
.scenario-card p { margin: 0; font-size: 0.92rem; }
.scenario-card svg { display: block; width: 100%; height: auto; }
.scenario-card .formula {
  background: var(--brand-tint);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--brand-strong, var(--brand));
  text-align: center;
}
.scenario-card .example {
  border-top: 1px dashed var(--border);
  padding-top: 0.55rem;
  font-size: 0.86rem;
  color: var(--muted, #5e6671);
}
.scenario-card .example strong { color: var(--text); }

/* Mini decision flow (left→right boxes + arrows) */
.mini-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0.5rem 0;
}
.mini-flow__step {
  flex: 1 1 110px;
  min-width: 100px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.55rem;
  background: var(--surface-soft, #fafbfd);
  font-size: 0.78rem;
  text-align: center;
  position: relative;
}
[data-theme="dark"] .mini-flow__step { background: #1a1e25; }
.mini-flow__step--ok { border-color: #047857; background: #ecfdf5; }
.mini-flow__step--ko { border-color: #be123c; background: #fef2f2; }
.mini-flow__step--warm { border-color: var(--accent-warm, #d97706); background: #fff7ed; }
[data-theme="dark"] .mini-flow__step--ok { background: #14392b; color: #86efac; }
[data-theme="dark"] .mini-flow__step--ko { background: #4a1d2f; color: #fda4af; }
[data-theme="dark"] .mini-flow__step--warm { background: #4a2c0d; color: #fdba74; }
.mini-flow__step strong { display: block; font-weight: 700; color: var(--brand-strong, var(--brand)); font-size: 0.82rem; margin-bottom: 0.15rem; }
.mini-flow__step--ok strong { color: #047857; }
.mini-flow__step--ko strong { color: #be123c; }
.mini-flow__step--warm strong { color: var(--accent-warm, #d97706); }
[data-theme="dark"] .mini-flow__step--ok strong { color: #86efac; }
[data-theme="dark"] .mini-flow__step--ko strong { color: #fda4af; }
[data-theme="dark"] .mini-flow__step--warm strong { color: #fdba74; }
.mini-flow__arrow {
  align-self: center;
  font-size: 1.1rem;
  color: var(--muted, #5e6671);
  padding: 0 0.1rem;
  flex-shrink: 0;
}

/* Param matrix: caisse-level vs adhérent-level parameters */
.param-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.param-matrix__col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--surface-soft, #fafbfd);
}
[data-theme="dark"] .param-matrix__col { background: #1a1e25; }
.param-matrix__col h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}
.param-matrix__col ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.param-matrix__col li { margin-bottom: 0.25rem; }
.param-matrix__col code { font-size: 0.84rem; }

/* Preset combos (recommended starter configs) */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.preset-card {
  border: 2px solid var(--brand-tint);
  border-radius: var(--radius);
  padding: 1rem 1rem 0.9rem;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
[data-theme="dark"] .preset-card { background: #1a1e25; }
.preset-card__title {
  margin: 0;
  font-size: 1.02rem;
  color: var(--brand-strong, var(--brand));
}
.preset-card__pitch { margin: 0; font-size: 0.88rem; color: var(--muted, #5e6671); font-style: italic; }
.preset-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.6rem; font-size: 0.85rem; }
.preset-card dt { color: var(--muted, #5e6671); }
.preset-card dd { margin: 0; font-weight: 600; }
.preset-card dd code { font-size: 0.82rem; }
.preset-card__example {
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  background: var(--brand-tint);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

/* Wizard tree (decision tree to pick a config) */
.wizard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface-soft, #fafbfd);
  margin: 1rem 0;
}
[data-theme="dark"] .wizard { background: #1a1e25; }
.wizard__node {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.5rem 0 0.5rem 0;
}
.wizard__q {
  background: var(--brand);
  color: #fff;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  flex: 0 0 auto;
  min-width: 220px;
}
.wizard__branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  flex: 1;
}
.wizard__branch {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font-size: 0.86rem;
  background: var(--surface, #fff);
}
[data-theme="dark"] .wizard__branch { background: #1a1e25; }
.wizard__branch strong { color: var(--brand-strong, var(--brand)); display: block; margin-bottom: 0.15rem; }
.wizard__leaf { border-left: 4px solid var(--accent-warm, #d97706); padding-left: 0.6rem; }
.wizard__leaf strong { color: var(--accent-warm, #d97706); }

@media (max-width: 720px) {
  .param-matrix { grid-template-columns: 1fr; }
  .wizard__node { flex-direction: column; }
  .wizard__q { width: 100%; }
}