/* Gestion de bankroll (maquette : Exemple 44 ; fabriqué par H24ROULETTE-ACCUEIL-FABRIQUE\bankroll.py ; calcul : bankroll.js).
   Chargée après simulateur.css (en-tête des outils, cadres, cartes, réglages, tableau). */

:root { --bk-vert: #34d873; --bk-rouge: #ff5468; }

/* ---------- En-tête : décor (graphique doré, pièces, cylindre incliné) ---------- */
.bk-deco { position: absolute; z-index: 0; pointer-events: none; }
.bk-deco-gauche {
  left: clamp(8px, 2.5vw, 48px); bottom: 18px; display: flex; align-items: flex-end;
  width: clamp(150px, 17vw, 270px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7));
}
.bk-graphique { display: block; width: 62%; height: auto; }
.bk-pieces { display: block; width: 46%; height: auto; margin-left: -12%; }
svg.bk-dessin { width: 46%; height: auto; aspect-ratio: 1; color: var(--simu-or); filter: drop-shadow(0 0 14px rgba(247, 201, 72, .65)); }
.bk-deco-droite { right: clamp(-150px, -7vw, -60px); bottom: clamp(-210px, -10vw, -90px); width: clamp(260px, 26vw, 420px); perspective: 900px; }
.bk-roue {
  position: relative; width: 100%; aspect-ratio: 1; transform: rotateX(58deg) rotateZ(-12deg);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .75));
}
.bk-roue .cylindre-svg { display: block; width: 100%; height: 100%; }
.bk-roue .tourelle { transform: translate(-50%, -50%) rotateX(-58deg) translateY(-28%); transform-origin: 50% 100%; }

/* ---------- Grille ---------- */
.simu.bk {
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 290px);
  grid-template-areas:
    "gauche cartes cartes cartes"
    "gauche evo barres droite"
    "gauche journal journal droite"
    "conseils conseils conseils conseils";
  align-items: start;
}
.bk-gauche { grid-area: gauche; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bk-cartes { grid-area: cartes; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.bk-evolution { grid-area: evo; align-self: stretch; }
.bk-barres { grid-area: barres; align-self: stretch; }
.bk-droite { grid-area: droite; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bk-journal { grid-area: journal; }
.bk-conseils { grid-area: conseils; }
.bk h2 svg.i, .bk-titre svg.i { flex: none; }
.bk .simu-cadre h2 { flex-wrap: nowrap; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.2; }
.bk-gauche .bk-config { order: 0; }

/* ---------- Configuration ---------- */
.bk-config { gap: 10px; }
.bk-titre {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.2; color: var(--simu-or); text-shadow: 0 0 10px rgba(247, 201, 72, .3);
}
.bk-titre svg.i { width: 1.35em; height: 1.35em; }
.bk-config .ligne-reglage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 6px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bk-config .reglage-tete { margin: 0; flex-wrap: nowrap; }
.bk-config .reglage-tete label.nom-reglage { display: block; font-weight: 700; font-size: .86rem; line-height: 1.25; color: #fff; }
.bk-config .reglage-tete .aide { flex: none; }
.bk-config .saisie { width: 100%; height: 36px; padding-left: 6px; }
.bk-config .saisie input { font-size: 1rem; }
.bk-config .signe { font-weight: 800; color: rgba(255, 255, 255, .85); }
.bk-config .bulle-aide { top: calc(100% - 4px); }
.bk-appliquer { min-height: 48px; margin-top: 4px; font-size: 1rem; }
.bk-message { min-height: 1.2em; margin: 0; font-size: .84rem; font-weight: 700; line-height: 1.4; color: var(--simu-or-clair); }
.bk-message:empty { display: none; }

.bk-actions {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--simu-bord);
  background: linear-gradient(180deg, rgba(10, 20, 54, .94), rgba(4, 8, 26, .96)); box-shadow: 0 0 16px rgba(247, 201, 72, .22);
}
.bk-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  border: 1.5px solid rgba(70, 150, 255, .8); background: linear-gradient(180deg, rgba(20, 42, 100, .95), rgba(8, 18, 54, .95));
  color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 0 10px rgba(47, 134, 255, .3);
}
.bk-btn svg.i { width: 20px; height: 20px; color: #dfe9ff; }
.bk-btn.vert { border-color: #3ee07f; background: linear-gradient(180deg, #1aa152, #0b6b33); box-shadow: 0 0 12px rgba(52, 216, 115, .45); }
.bk-btn.vert svg.i { color: #fff; }
.bk-btn:hover { filter: brightness(1.15); }
.bk-note { display: flex; gap: 6px; margin: 2px 0 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.bk-note svg.i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--cyan); }

/* ---------- Les 4 cartes ---------- */
.bk-carte {
  display: grid; grid-template-columns: clamp(52px, 4.6vw, 74px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 12px;
  text-align: center; border-color: rgba(247, 201, 72, .75); box-shadow: 0 0 16px rgba(247, 201, 72, .3), inset 0 0 12px rgba(247, 201, 72, .1);
}
.bk-carte h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 700; color: #fff; }
.bk-carte .carte-val { font-size: clamp(1.35rem, 2vw, 2.1rem); white-space: nowrap; }
.bk-carte .carte-sous { min-height: 0; font-size: .82rem; }
.icone-carte { display: block; width: 100%; height: auto; max-height: 86px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.bk-carte svg.i.icone-carte-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; color: var(--simu-or); filter: drop-shadow(0 0 10px rgba(247, 201, 72, .5)); }
.bk-actuel { border-color: rgba(62, 224, 127, .85); box-shadow: 0 0 16px rgba(52, 216, 115, .35), inset 0 0 12px rgba(52, 216, 115, .12); }
.bk-actuel .carte-val { color: #6ff0a0; }
.bk-resultat { border-color: rgba(62, 224, 127, .85); box-shadow: 0 0 16px rgba(52, 216, 115, .3), inset 0 0 12px rgba(52, 216, 115, .1); }
.bk-resultat.en-perte { border-color: rgba(255, 84, 104, .85); box-shadow: 0 0 16px rgba(255, 84, 104, .35), inset 0 0 12px rgba(255, 84, 104, .12); }
.bk-baisse { border-color: rgba(255, 84, 104, .85); background: linear-gradient(180deg, rgba(60, 10, 26, .95), rgba(24, 4, 14, .96)); box-shadow: 0 0 16px rgba(255, 84, 104, .4), inset 0 0 12px rgba(255, 84, 104, .14); }
.bk-carte.bk-baisse svg.i.icone-carte-svg { color: var(--bk-rouge); filter: drop-shadow(0 0 10px rgba(255, 84, 104, .6)); }
.bk-baisse .carte-val { color: #ff8a96; }

/* ---------- Graphiques ---------- */
.bk-graphe { position: relative; height: clamp(210px, 17vw, 250px); }
.bk-graphe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bk-graphe text { font-size: 11px; fill: rgba(255, 255, 255, .78); font-weight: 700; font-family: system-ui, sans-serif; }
.bk-graphe .grille { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.bk-graphe .axe { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.bk-graphe .ligne { fill: none; stroke: #ffd24a; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(247, 201, 72, .7)); }
.bk-graphe .point { fill: #fff3b0; stroke: #f2b52e; stroke-width: 2; }
.bk-graphe .etiquette rect { fill: rgba(30, 20, 2, .92); stroke: #f7c948; stroke-width: 1.5; }
.bk-graphe .etiquette text { font-size: 12.5px; font-weight: 900; fill: #ffe27a; }
.bk-graphe .depart { stroke: rgba(255, 255, 255, .3); stroke-dasharray: 4 4; }
.bk-graphe .barre-plus { fill: url(#bk-vert); stroke: #6ff0a0; stroke-width: 1; }
.bk-graphe .barre-moins { fill: url(#bk-rouge); stroke: #ff8a96; stroke-width: 1; }
.bk-graphe .valeur-barre { font-size: 10.5px; font-weight: 800; }
.bk-graphe .vide { font-size: 13px; fill: rgba(255, 255, 255, .6); }

/* ---------- Limites et risques ---------- */
.bk-derniere { margin: -4px 0 10px; font-size: .84rem; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.bk-jauge { margin-bottom: 12px; }
.jauge-nom { margin: 0 0 6px; font-weight: 800; font-size: .98rem; color: #fff; }
.bk-jauge .jauge {
  display: block; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
}
.bk-jauge .jauge i { display: block; width: 0; height: 100%; border-radius: 7px; transition: width .4s; }
.bk-jauge.perte .jauge i { background: linear-gradient(90deg, #ff5468, #c8102e); box-shadow: 0 0 10px rgba(255, 84, 104, .8); }
.bk-jauge.gain .jauge i { background: linear-gradient(90deg, #6ff0a0, #18b25a); box-shadow: 0 0 10px rgba(52, 216, 115, .8); }
.jauge-val { margin: 5px 0 0; text-align: center; font-size: .84rem; font-weight: 700; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.jauge-val .atteinte { color: var(--simu-or-clair); }
.bk-petit { margin: 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .65); }
.bk-risques-liste { margin: 0 0 12px; }
.bk-risques-liste div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bk-risques-liste dt { font-size: .86rem; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.bk-risques-liste dd { margin: 0; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-statut {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid #3ee07f; background: linear-gradient(180deg, rgba(14, 90, 44, .7), rgba(6, 44, 22, .8)); box-shadow: 0 0 14px rgba(52, 216, 115, .35);
}
.bk-statut svg.i { width: 34px; height: 34px; color: #6ff0a0; }
.bk-statut p { margin: 0; font-size: .82rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.bk-statut p strong { display: block; margin-bottom: 2px; font-size: .95rem; color: #fff; }
.bk-statut ul { margin: 4px 0 0; padding-left: 1.1em; font-size: .82rem; line-height: 1.4; }
.bk-statut.alerte { border-color: #ffb547; background: linear-gradient(180deg, rgba(96, 58, 4, .7), rgba(44, 24, 2, .8)); box-shadow: 0 0 14px rgba(255, 181, 71, .35); }
.bk-statut.alerte svg.i { color: #ffd27a; }

/* ---------- Journal ---------- */
.bk-exemple { margin: -6px 0 10px; font-size: .84rem; font-weight: 700; color: var(--simu-or-clair); }
.bk-exemple[hidden] { display: none; }
.bk-journal .tableau-comp table { font-size: .82rem; }
.bk-journal .tableau-comp thead th { padding: .55em .35em; }
.bk-journal .tableau-comp td { padding: .45em .35em; font-weight: 600; }
.bk-journal .tableau-comp td[data-c="resultat"] { font-weight: 800; }
.bk-journal .tableau-comp td[data-c="commentaire"] { min-width: 7em; max-width: 11em; white-space: normal; line-height: 1.3; text-align: left; color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
.bk-journal .tableau-comp td[data-c="methode"] { color: rgba(255, 255, 255, .9); }
.bk-journal .tableau-comp td.vide { padding: 1.2em .6em; white-space: normal; color: rgba(255, 255, 255, .7); }
.bk-actes { display: inline-flex; gap: 4px; }
.bk-acte {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: none;
}
.bk-acte svg.i { width: 18px; height: 18px; }
.bk-acte.modif { color: var(--simu-or); }
.bk-acte.suppr { color: var(--bk-rouge); }
.bk-acte:hover { border-color: currentColor; background: rgba(255, 255, 255, .06); }

/* ---------- Conseils ---------- */
.bk-conseils-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bk-conseil { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(70, 150, 255, .5); background: rgba(3, 8, 28, .6); }
.bk-conseil h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.12rem; line-height: 1.25; color: var(--simu-or-clair);
}
.bk-conseil h3 svg.i { flex: none; width: 32px; height: 32px; color: var(--simu-or); }
.bk-conseil p, .bk-conseil li { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.bk-conseil ul { margin: 0; padding-left: 1.1em; }
.bk-conseil li + li { margin-top: 4px; }
.bk-conseil .liens-conseil { margin-top: 8px; }

/* ---------- Fenêtre « Nouvelle session » ---------- */
.bk-dialogue {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 18px 18px 16px; border-radius: 16px;
  border: 1.5px solid var(--simu-or); background: linear-gradient(180deg, #0c1a48, #050b26); color: #fff; box-shadow: 0 0 28px rgba(247, 201, 72, .45);
}
.bk-dialogue::backdrop { background: rgba(0, 0, 0, .72); }
.bk-form { display: flex; flex-direction: column; gap: 6px; }
.bk-form h2 { margin: 0 0 6px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: 1.4rem; color: var(--simu-or); }
.bk-form label { margin-top: 6px; font-weight: 700; font-size: .9rem; }
.bk-form input, .bk-form select {
  width: 100%; height: 40px; padding: 0 10px; border-radius: 9px; border: 2px solid rgba(70, 150, 255, .85); background: rgba(3, 8, 28, .95);
  color: #fff; font: inherit; font-weight: 700; color-scheme: dark;
}
.bk-form input:focus, .bk-form select:focus { outline: none; border-color: var(--simu-or); box-shadow: 0 0 10px rgba(247, 201, 72, .55); }
.bk-form select option { background: #071233; color: #fff; }
.bk-erreur { min-height: 1.2em; margin: 4px 0 0; font-weight: 700; font-size: .86rem; color: #ff8a96; }
.bk-form-boutons { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; }
.bk-form-boutons .btn-lancer, .bk-form-boutons .btn-petit { min-height: 46px; font-size: .98rem; }

/* ---------- Tailles intermédiaires ---------- */
@media (max-width: 1199px) {
  .simu.bk {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-areas: "cartes cartes" "gauche evo" "gauche barres" "journal journal" "droite droite" "conseils conseils";
  }
  .bk-droite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .bk-conseils-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .bk-deco-gauche { width: clamp(130px, 14vw, 180px); }
}

/* ---------- Tablette et téléphone : un bloc sous l'autre ---------- */
@media (max-width: 999px) {
  .bk-deco { display: none; }
  .bk-cartes { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bk-gauche { order: 2; }
  .bk-evolution { order: 3; }
  .bk-barres { order: 4; }
  .bk-droite { order: 5; }
  .bk-journal { order: 6; }
  .bk-conseils { order: 7; }
}
@media (max-width: 640px) {
  .bk-droite { display: flex; }
  .bk-carte { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 8px; }
  .icone-carte { width: auto; height: 44px; max-height: 44px; margin: 0 auto; }
  .bk-carte svg.i.icone-carte-svg { width: 44px; height: 44px; margin: 0 auto; }
  .bk-carte h3 { font-size: .84rem; }
  .bk-carte .carte-val { font-size: 1.3rem; }
  .bk-carte .carte-sous { font-size: .74rem; }
  .bk-config .ligne-reglage { grid-template-columns: minmax(0, 1fr) 128px; }
  .bk-conseils-liste { grid-template-columns: minmax(0, 1fr); }
  .bk-journal .tableau-comp th:nth-child(3), .bk-journal .tableau-comp td[data-c="debut"],
  .bk-journal .tableau-comp th:nth-child(6), .bk-journal .tableau-comp td[data-c="coups"],
  .bk-journal .tableau-comp th:nth-child(8), .bk-journal .tableau-comp td[data-c="commentaire"] { display: none; }
  .bk-journal .tableau-comp table { font-size: .78rem; }
  .bk-journal .tableau-comp thead th { padding: .5em .3em; font-size: .7rem; }
  .bk-journal .tableau-comp td { padding: .45em .3em; }
  .bk-acte { width: 28px; height: 28px; }
  .bk-graphe { height: 210px; }
}
@media (max-width: 380px) {
  .bk-config .ligne-reglage { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bk-carte .carte-val { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-jauge .jauge i { transition: none; }
}