/* Calculateur de mise (maquette : Exemple 43 ; fabriqué par H24ROULETTE-ACCUEIL-FABRIQUE\calculateur.py ; calcul : calculateur.js).
   Chargée après simulateur.css (en-tête, cadres, cartes, réglages, jetons, onglets communs aux pages d'outils). */

/* ---------- Grille ---------- */
.calc .calc-table { grid-column: 1 / 9; }
.calc .calc-reglages { grid-column: 9 / 13; }
.calc .calc-cartes { grid-column: 1 / -1; }
.calc .calc-resultats { grid-column: 1 / -1; }
.calc .calc-paiements { grid-column: 1 / 5; }
.calc .calc-exemples { grid-column: 5 / 9; }
.calc .calc-conseils { grid-column: 9 / 13; }

/* ---------- Type de roulette ---------- */
.types-roulette { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-bottom: 12px; }
.types-titre { margin: 0; font-weight: 800; color: var(--simu-or-clair); }
.types-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn-type {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 12px; text-align: left;
  border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(6, 12, 36, .9); color: #fff; line-height: 1.15;
}
.btn-type strong { display: block; font-size: .92rem; }
.btn-type small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .72); }
.btn-type:hover { border-color: var(--simu-or); }
.btn-type[aria-pressed="true"] {
  border-color: var(--simu-or-clair); background: linear-gradient(180deg, rgba(70, 52, 8, .95), rgba(24, 16, 4, .95));
  box-shadow: 0 0 12px rgba(247, 201, 72, .6);
}
.btn-type[aria-pressed="true"] strong { color: var(--simu-or-clair); }
.drapeau-type { flex: none; width: 30px; height: 30px; }

/* ---------- Tapis : toutes les cases se jouent ---------- */
.calc .tapis-boite { position: relative; }
.calc .case { cursor: pointer; }
.calc .case:hover { filter: brightness(1.22); }
.calc .case:focus-visible { z-index: 2; }
@media (min-width: 641px) {
  .calc .tapis { grid-template-rows: repeat(6, clamp(20px, 2vw, 28px)) clamp(32px, 2.9vw, 42px) clamp(34px, 3vw, 44px); }
}
.jeton-mise {
  position: absolute; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%);
  background: url("img/simu-jetons.webp") calc(var(--j, 1) * 20%) 0 / 600% 100% no-repeat; border-radius: 50%;
  color: #151515; font-size: .58rem; font-weight: 900; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .75));
}
.jetons-calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 10px; }
.jetons-titre { margin: 0; font-weight: 800; color: var(--simu-or-clair); }
.btn-perso {
  padding: .45em 1em; border-radius: 999px; border: 1.5px solid var(--simu-or); background: rgba(6, 12, 36, .92);
  color: #fff; font-weight: 700; font-size: .88rem;
}
.btn-perso:hover { border-color: var(--simu-or-clair); }
.calc-table .alertes { margin-top: 8px; }
.calc-table .alertes p { text-align: center; }

/* ---------- Réglages et résumé ---------- */
.calc-reglages { gap: 9px; }
.ligne-reglage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center; gap: 8px; }
.ligne-reglage .reglage-tete { margin: 0; gap: 6px; }
.ligne-reglage .reglage-tete > svg.i { flex: none; width: 18px; height: 18px; color: var(--simu-or); }
.nom-reglage { font-weight: 800; font-size: .9rem; color: #fff; line-height: 1.2; }
.ligne-reglage .saisie { width: 100%; height: 36px; }
.valeur-reglage {
  display: flex; align-items: center; justify-content: flex-end; height: 36px; margin: 0; padding: 0 12px; border-radius: 9px;
  border: 1.5px solid rgba(70, 150, 255, .5); background: rgba(3, 8, 28, .7); font-weight: 800; font-variant-numeric: tabular-nums;
}
.valeur-reglage[data-val="total"] { color: var(--simu-or-clair); }
.regles-boutons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.btn-regle {
  min-height: 34px; padding: 2px 4px; border-radius: 9px; border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(5, 12, 38, .9); color: #fff; font-weight: 700; font-size: .8rem; line-height: 1.1;
}
.btn-regle[aria-pressed="true"] { border-color: var(--simu-or-clair); color: #1b1100; background: linear-gradient(180deg, #ffe27a, #f2b52e 55%, #c98a00); }
.btn-regle[disabled] { opacity: .4; cursor: not-allowed; }
.resume { padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(247, 201, 72, .45); background: rgba(3, 8, 28, .6); }
.resume h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; color: var(--simu-or-clair); }
.resume h3 svg.i { width: 18px; height: 18px; color: var(--simu-or); }
.resume-liste { display: flex; flex-direction: column; gap: 6px; max-height: 210px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.resume-liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto 22px; align-items: center; gap: 7px; font-size: .84rem; }
.resume-liste li.vide { display: block; color: rgba(255, 255, 255, .7); }
.point-mise { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); }
.mise-nom { min-width: 0; overflow-wrap: anywhere; }
.mise-montant { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mise-cote { color: rgba(255, 255, 255, .7); white-space: nowrap; }
.retirer { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: #ff8a96; }
.retirer:hover { background: rgba(255, 90, 106, .18); }
.retirer svg.i { width: 14px; height: 14px; }
.calc-boutons { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.calc-boutons .btn-lancer { min-height: 50px; font-size: 1rem; }
.calc-boutons .btn-petit { min-height: 50px; }

/* ---------- Cartes ---------- */
.carte-gain_max .carte-val { color: #6ff0a0; }
.carte-perte_max .carte-val { color: #ff8a96; }
.carte-perte_max h3 svg.i { color: #ff4a5c; }
.calc-cartes .carte-sous { font-weight: 600; }

/* ---------- Résultats possibles ---------- */
.res-deux { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.calc-resultats .tableau-comp tbody th { white-space: normal; }
.res-nom { display: block; }
.calc-resultats .tableau-comp tbody th small { display: block; margin-top: 2px; font-weight: 600; font-size: .76rem; color: rgba(255, 255, 255, .65); }
.calc-resultats td.vide { padding: 1em; white-space: normal; color: rgba(255, 255, 255, .75); }
.situation { display: inline-flex; align-items: center; gap: 6px; padding: .2em .6em; border-radius: 999px; border: 1px solid currentColor; font-size: .78rem; }
.situation.gros, .situation.gain { color: #6ff0a0; }
.situation.nul { color: #ffd94f; }
.situation.perte, .situation.totale { color: #ff6b7a; }
.repartition { padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(70, 150, 255, .45); background: rgba(3, 8, 28, .55); }
.repartition h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; font-size: .95rem; color: var(--simu-or-clair); }
.repartition h3 small { font-size: .82em; font-weight: 600; color: rgba(255, 255, 255, .7); }
.repartition h3 svg.i { width: 18px; height: 18px; color: var(--simu-or); }
.repart-liste { margin: 0; padding: 0; list-style: none; }
.repart-liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; margin-bottom: 9px; font-size: .85rem; }
.repart-liste .pastille-coul { width: 12px; height: 12px; border-radius: 50%; }
.repart-gain .pastille-coul, .repart-gain .barre i { background: #2fd476; }
.repart-nul .pastille-coul, .repart-nul .barre i { background: #f7c948; }
.repart-perte .pastille-coul, .repart-perte .barre i { background: #e8344a; }
.repart-nom { font-weight: 700; min-width: 0; }
.repart-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.moyenne { margin: 10px 0 0; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* ---------- Paiements, exemples, conseils ---------- */
.petit-intro { margin: -4px 0 10px; font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.paie-liste { margin: 0; padding: 0; list-style: none; border-radius: 12px; border: 1px solid rgba(70, 150, 255, .35); background: rgba(3, 8, 28, .45); }
.paie-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; font-size: .88rem; }
.paie-liste li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.paie-liste small { color: rgba(255, 255, 255, .68); }
.cote {
  flex: none; padding: .15em .6em; border-radius: 6px; border: 1.5px solid var(--simu-or); background: rgba(40, 30, 4, .55);
  color: var(--simu-or-clair); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.exemples-liste { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.exemple {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px;
  border-radius: 12px; border: 1.5px solid rgba(247, 201, 72, .4); background: rgba(3, 8, 28, .55);
}
.piles-petites { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .6)); }
.exemple h3 { margin: 0 0 2px; font-size: 1rem; color: var(--simu-or-clair); }
.ex-detail { margin: 0 0 4px; font-size: .86rem; font-weight: 700; }
.ex-chiffres { margin: 0 0 6px; padding-left: 1.1em; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.btn-essayer { padding: 0; border: 0; background: none; color: #9fd0ff; font-weight: 700; font-size: .84rem; }
.btn-essayer:hover { text-decoration: underline; }
.calc-conseils .panneau { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
.calc-conseils .onglets [role="tab"] { font-size: .82rem; padding: .45em .75em; }

/* ---------- Tailles intermédiaires ---------- */
@media (max-width: 1199px) {
  .calc .calc-table { grid-column: 1 / 9; }
  .calc .calc-reglages { grid-column: 9 / 13; }
  .calc .calc-paiements { grid-column: 1 / 7; }
  .calc .calc-exemples { grid-column: 7 / 13; }
  .calc .calc-conseils { grid-column: 1 / -1; }
  .res-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .calc .calc-table { order: 1; }
  .calc .calc-reglages { order: 2; }
  .calc .calc-cartes { order: 3; }
  .calc .calc-resultats { order: 4; }
  .calc .calc-paiements { order: 5; }
  .calc .calc-exemples { order: 6; }
  .calc .calc-conseils { order: 7; }
}
@media (max-width: 640px) {
  .types-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .btn-type { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; text-align: center; }
  .btn-type strong { font-size: .82rem; }
  .btn-type small { font-size: .64rem; }
  .drapeau-type { width: 24px; height: 24px; }
  .jeton-mise { width: 26px; height: 26px; font-size: .52rem; }
  .ligne-reglage { grid-template-columns: minmax(0, 1fr) minmax(0, 48%); }
  .calc-resultats .tableau-comp thead th:nth-child(2), .calc-resultats td.col-brut { display: none; }
  .calc-resultats .tableau-comp table { font-size: .8rem; }
  .calc-resultats .tableau-comp thead th, .calc-resultats .tableau-comp tbody th, .calc-resultats .tableau-comp td { padding: .5em .35em; }
  .situation { font-size: .7rem; padding: .15em .45em; }
  .situation .points { display: none; }
  .calc-conseils .panneau { grid-template-columns: minmax(0, 1fr); }
}