/* =========================================================
   OPERATIONS — operations.css
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */

:root{
  --op-cell-size: 52px;
  --op-small-cell-size: 30px;

  --op-border: #ced4da;
  --op-grid-fg: #212529;

  --op-ok-bg: #d1e7dd;
  --op-ok-bd: #198754;
  --op-ok-fg: #0f5132;

  --op-bad-bg: #f8d7da;
  --op-bad-bd: #dc3545;
  --op-bad-fg: #842029;

  --op-carry-bg: #fff5f8;
  --op-carry-bd: #f1b6cf;
  --op-carry-fg: #b4236b;

  --op-highlight-bg: rgba(255,193,7,.28);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.exo-operations-container .operations-wrapper{
  max-width: 1000px;
  margin: 0 auto;
}

.operations-toolbar{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 1rem;
}

.operations-stage{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 260px;
  margin-top: 20px;
}

.operations-score{
  min-height: 2rem;
}


/* =========================================================
   CARD
   ========================================================= */

.operation-card{
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;

  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 .25rem 1rem rgba(0,0,0,.08);
}


/* =========================================================
   GRID (COMMUN)
   ========================================================= */

.operation-grid{
  display: inline-grid;
  grid-template-columns: repeat(var(--cols), auto);

  color: var(--op-grid-fg);
  font-family: "Verdana","Trebuchet MS",sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;

  align-items: center;
  justify-items: center;
}

.operation-grid > div{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--op-cell-size);
  height: var(--op-cell-size);
}

.operation-grid .line{
  border-bottom: 3px solid #212529;
}

.operation-grid .sign{
  font-weight: 700;
}

/* ancien système éventuel de virgule : conservé sans effet gênant */
.operation-grid .op-decimal-separator{
  opacity: .9;
}


/* =========================================================
   INPUTS (COMMUN)
   ========================================================= */

.operation-grid input{
  text-align: center;
  font-weight: 700;

  border: 1px solid var(--op-border);
  border-radius: .5rem;
  outline: none;

  transition:
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.operation-grid input:focus{
  border-color: #86b7fe;
  box-shadow: 0 0 0 .18rem rgba(13,110,253,.18);
}


/* =========================================================
   RESULTATS / CHAMPS GENERAUX
   ========================================================= */

.operation-grid .result{
  width: 40px;
  height: 40px;
  font-size: 1.35rem;
  background: #fff;
}

.operation-grid .carry{
  width: var(--op-small-cell-size);
  height: var(--op-small-cell-size);
  font-size: .95rem;

  color: var(--op-carry-fg);
  background: var(--op-carry-bg);
  border-color: var(--op-carry-bd);
}


/* =========================================================
   FEEDBACK
   ========================================================= */

.operation-grid .ok{
  background: var(--op-ok-bg) !important;
  border-color: var(--op-ok-bd) !important;
  color: var(--op-ok-fg) !important;
}

.operation-grid .bad{
  background: var(--op-bad-bg) !important;
  border-color: var(--op-bad-bd) !important;
  color: var(--op-bad-fg) !important;
}


/* =========================================================
   COLUMN HIGHLIGHT
   ========================================================= */

.operation-grid > div.col-active{
  background: var(--op-highlight-bg);
}

.operation-grid input.col-active{
  background: var(--op-highlight-bg);
  border-color: #ffc107;
}


/* =========================================================
   SUBTRACTION
   ========================================================= */

.subtraction-grid .borrow-col{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--op-small-cell-size);
}

.subtraction-grid .digit-col{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--op-cell-size);
}

.subtraction-grid .carry-top,
.subtraction-grid .carry-bottom{
  position: absolute;
  right: -10px;
  z-index: 2;

  width: 12px;
  height: 14px;

  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;

  border: 1px solid var(--op-carry-bd);
  border-radius: 3px;

  background: var(--op-carry-bg);
  color: var(--op-carry-fg);
}

.subtraction-grid .carry-top{
  bottom: 13px;
}

.subtraction-grid .carry-bottom{
  bottom: 8px;
}


/* =========================================================
   MULTIPLICATION
   ========================================================= */

.operation-grid .partial{
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  border: 1px solid var(--op-border);
  border-radius: .5rem;
}

.operation-grid .carry-mul{
  background: #fff4f6;
  border-color: #e8a3b6;
}

.operation-grid .carry-add{
  background: #eef6ff;
  border-color: #8bb9ff;
}

/* léger abaissement visuel des retenues du haut */
.operation-grid .carry-mul{
  transform: translateY(8px);
}

.partial-zero{
  opacity: .35;
}

.row-active{
  background: rgba(255,193,7,.18);
}

/* =========================================================
   MULTIPLICATION — virgule visuelle
   La virgule n'occupe jamais une colonne logique
   ========================================================= */

.operation-grid .op-comma-after::after{
  content: ",";
  position: absolute;
  right: -0.28em;
  bottom: .08em;

  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  color: inherit;

  pointer-events: none;
}


/* =========================================================
   SCORE
   ========================================================= */

.operations-score .alert,
.operations-score .card{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px){
  :root{
    --op-cell-size: 46px;
    --op-small-cell-size: 28px;
  }

  .operation-grid{
    font-size: 1.6rem;
  }

  .operation-grid .result{
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
}

@media (max-width: 768px){
  :root{
    --op-cell-size: 40px;
    --op-small-cell-size: 24px;
  }

  .operation-card{
    padding: 1rem;
  }

  .operation-grid{
    font-size: 1.35rem;
  }

  .operation-grid .result{
    width: 32px;
    height: 32px;
    font-size: 1.05rem;
  }
}

@media (max-width: 576px){
  :root{
    --op-cell-size: 34px;
    --op-small-cell-size: 22px;
  }

  .operation-grid{
    font-size: 1.15rem;
  }

  .operation-grid .result{
    width: 28px;
    height: 28px;
    font-size: .95rem;
    border-radius: .35rem;
  }

  .operation-grid .carry{
    width: 20px;
    height: 20px;
    font-size: .72rem;
    border-radius: .3rem;
  }
}


/* =========================================================
   OPERATIONS DIVISION — SC@LPA
   CSS complet pour potence française
   ========================================================= */

/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.division-stage{
  display: block;
  font-family: monospace;
}


/* =========================================================
   POTENCE
   ========================================================= */

.potence{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}


/* =========================================================
   PARTIE GAUCHE
   ========================================================= */

.left{
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
}


/* =========================================================
   COLONNE DES SIGNES
   ========================================================= */

.signs{
  display: flex;
  flex-direction: column;
}

.sign{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: var(--op-cell-size);
  font-size: 2rem;
}


/* =========================================================
   GRILLE DES CALCULS
   ========================================================= */

.grid{
  display: flex;
  flex-direction: column;
  border-right: 4px solid #000;
  padding-right: 15px;
  box-sizing: content-box;
}

.row{
  display: grid;
  /*grid-template-columns: repeat(6, var(--op-cell-size));*/
  grid-template-columns: repeat(var(--cols), var(--op-cell-size));
  height: var(--op-cell-size);
}


/* =========================================================
   CELLULES
   ========================================================= */

.cell{
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--op-cell-size);
  height: var(--op-cell-size);
  font-size: 2rem;
}


/* =========================================================
   DIVIDENDE
   ========================================================= */

.dividend{
  color: #198754;
  font-weight: 600;
}

.unit-decimal::after{
  content: ",";
  position: absolute;
  right: -10px;
  bottom: 8px;
  font-size: 2rem;
}


/* =========================================================
   PRODUITS
   ========================================================= */

.product{
  color: #dc3545;
}

.product.underline{
  border-bottom: 2px solid #000;
}


/* =========================================================
   RESTES INTERMEDIAIRES
   ========================================================= */

.partial{
  color: #6f42c1;
}


/* =========================================================
   RESTE FINAL
   ========================================================= */

.remainder{
  color: #198754;
  font-weight: 700;
}


/* =========================================================
   FLECHE ABAISSEMENT
   ========================================================= */

.bring-down::after{
  content: "↓";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #0d6efd;
}


/* =========================================================
   PARTIE DROITE (DIVISEUR + QUOTIENT)
   ========================================================= */

.right{
  display: flex;
  flex-direction: column;
}

.divisor{
  display: flex;
  align-items: center;

  height: var(--op-cell-size);
  font-size: 2rem;
  font-weight: 700;
  color: #dc3545;
}

.bar{
  border-top: 4px solid #000;
  margin-top: 2px;
  margin-bottom: 4px;
}


/* =========================================================
   QUOTIENT
   ========================================================= */

.quotient{
  position: relative;
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.q-comma{
  position: absolute;
  transform: translateX(-50%);
  top: 18px;
  font-family: monospace;
  font-size: 2rem;
}


/* =========================================================
   INPUTS DIVISION
   ========================================================= */

.division-stage input{
  box-sizing: border-box;
  width: calc(var(--op-cell-size) - 6px);
  height: calc(var(--op-cell-size) - 6px);
  padding: 0;

  text-align: center;
  font-family: monospace;
  font-size: 2rem;

  border: 1px solid var(--op-border);
  border-radius: 6px;
  background: #fff;
}

.division-stage input.q{
  width: calc(var(--op-cell-size) - 6px);
}


/* =========================================================
   FEEDBACK DIVISION
   ========================================================= */

.division-stage input.ok{
  background: var(--op-ok-bg);
  border-color: var(--op-ok-bd);
  color: var(--op-ok-fg);
}

.division-stage input.bad{
  background: var(--op-bad-bg);
  border-color: var(--op-bad-bd);
  color: var(--op-bad-fg);
}


/* =========================================================
   TABLE DU DIVISEUR
   ========================================================= */

.division-table-accordion{
  max-width: 320px;
  margin: 1rem auto 0 auto;
}

.division-table-list{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-family: monospace;
  font-size: 1.05rem;
}

.division-table-line{
  display: grid;
  grid-template-columns: 2ch 1ch 4ch 1ch 5ch;
  justify-content: center;
  align-items: center;
  column-gap: .35rem;
}

.division-table-sign{
  text-align: center;
}

.division-table-line.best{
  background: #e8f5e9;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
}

.division-table-line.next{
  color: #6c757d;
}