/* La bande.
 *
 * Une case par colonne, un cran à la fois. L'état de chaque case est porté par
 * une FORME — cadre, coche, épaisseur — et la couleur ne fait que renforcer.
 * C'est ce qui rend la notation lisible en daltonisme et sur une photocopie,
 * là où la version d'origine reposait sur la seule couleur.
 */

.bande {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: calc(var(--pas) * 5);
  margin: calc(var(--pas) * 4) 0;
}

/* ---------------------------------------------------------------- La piste */

.bande-piste {
  overflow-x: auto;
  scrollbar-width: thin;
  padding: calc(var(--pas) * 2) 0 calc(var(--pas) * 4);
  border-radius: 8px;
}

.bande-piste:focus-visible {
  outline: 3px solid var(--chiffre);
  outline-offset: 3px;
}

.bande-cases {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}

/* Chaque case est un cran : le trait qui les sépare est la perforation. */
.case {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: calc(var(--pas));
  min-width: 3.25rem;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 2) calc(var(--pas) * 3);
  border-left: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent);
  margin: 0;
}

.case:last-child {
  border-right: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent);
}

.case-haut,
.case-bas {
  font-family: var(--mono);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.case-haut {
  color: var(--ink);
}

/* Le résultat écrit : sous la case, séparé par un trait, comme une opération
   posée. C'est le geste que l'on veut voir se répéter. */
.case-bas {
  color: var(--resultat);
  min-height: 1em;
  padding-top: calc(var(--pas) * 2);
  border-top: 2px solid var(--line);
  width: 100%;
  text-align: center;
}

.case-marque {
  font-family: var(--mono);
  font-size: var(--t-petit);
  color: var(--ink3);
  min-height: 1em;
  line-height: 1;
}

/* --- Les trois états, chacun porté par une forme distincte --- */

/* En attente : rien. Le contour pointillé du cran suffit à situer la case. */
.case[data-etat="attente"] .case-haut {
  color: var(--ink3);
}

/* Traitée : une coche gravée sous la case. Une forme, pas une teinte. */
.case[data-etat="traitee"]::after {
  content: "✓";
  position: absolute;
  bottom: calc(var(--pas) * 0.5);
  font-family: var(--mono);
  font-size: var(--t-petit);
  color: var(--resultat);
}

/* Courante : cadre épais et fond. Reconnaissable sans distinguer les couleurs. */
.case[data-etat="courante"] {
  background: var(--chiffre-bg);
  border: 3px solid var(--chiffre);
  border-radius: 10px;
  margin: -1.5px;
}

.case[data-etat="courante"] .case-haut {
  color: var(--chiffre);
}

/* La retenue sortante, en exposant : troisième forme, distincte des deux autres. */
.case[data-retenue]::before {
  content: attr(data-retenue);
  position: absolute;
  top: calc(var(--pas) * -0.5);
  right: calc(var(--pas) * 0.5);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--retenue);
  background: var(--retenue-bg);
  border: 1.5px solid var(--retenue);
  border-radius: 99px;
  padding: 1px 5px;
}

/* ------------------------------------------------------ L'explication */

.bande-explication {
  margin: calc(var(--pas) * 4) 0;
  padding: calc(var(--pas) * 4);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 8px;
  min-height: 4rem;
}

/* LES ETAPES SONT UNE LISTE, ET LEUR NUMEROTATION VIENT D ICI.

   Un « 1. » ecrit dans le texte serait lu par la synthese vocale entre chaque
   phrase — « un, deux, trois » — et rendrait l explication inecoutable. Le
   contenu genere par ::before ne fait pas partie du texte : il numerote a
   l oeil sans rien ajouter a ce qui se lit.

   Les regles .step-h, .step-calc, .step-out et le lexique de couleurs .c-c,
   .c-v, .c-r, .c-s, .op ont ete retires ici au lot B1 : l explication ne porte
   plus de balisage, donc plus une seule de ces classes. Le doublage
   couleur-plus-forme qui les justifiait vit desormais dans les CASES de la
   bande — .case-haut, .case-bas, .case-marque et leurs etats — ou il porte le
   meme sens sans dependre de la teinte. */
.bande-explication .etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  font-size: var(--t-corps);
  line-height: 1.8;
}

.bande-explication .etapes li {
  counter-increment: etape;
  display: flex;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas)) 0;
}

.bande-explication .etapes li + li {
  border-top: 1px solid var(--line2, var(--line));
}

.bande-explication .etapes li::before {
  content: counter(etape) ".";
  flex: 0 0 auto;
  min-width: 1.4em;
  font-family: var(--mono);
  font-size: var(--t-petit);
  color: var(--ink3);
}

/* La premiere ligne est l en-tete de la colonne : elle nomme le chiffre et son
   voisin, et sert de titre a ce qui suit. */
.bande-explication .etapes li:first-child {
  font-family: var(--mono);
  font-size: var(--t-petit);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink2);
}

/* ------------------------------------------------------ Les commandes */

.bande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 2);
  margin-top: calc(var(--pas) * 4);
}

.btn-bande {
  font-family: var(--mono);
  font-size: var(--t-petit);
  font-weight: 700;
  border: 2px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  padding: 0 calc(var(--pas) * 4);
  min-height: var(--cible);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
}

.btn-bande.btn-premier {
  background: var(--ink);
  color: var(--paper);
}

.btn-bande:hover:not(:disabled),
.btn-bande:focus-visible:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--line);
}

.btn-bande:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-bande {
    transition: none;
  }
}

.bande-resultat {
  font-family: var(--mono);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--resultat);
  margin: calc(var(--pas) * 4) 0 0;
  min-height: 1.5em;
}

.bande-resultat[data-fini="oui"] {
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  background: var(--resultat-bg);
  border: 2px solid var(--resultat);
  border-radius: 8px;
}

/* ------------------------------------------------------ Écrans étroits */

@media (max-width: 34rem) {
  .bande {
    padding: calc(var(--pas) * 3);
  }

  /* La piste défile plutôt que de comprimer les cases : un chiffre trop petit
     ne se lit plus, et c'est précisément ce qu'il faut lire. La case courante
     est ramenée dans le champ par le script à chaque cran. */
  .bande-cases {
    justify-content: flex-start;
  }

  .case {
    min-width: 2.75rem;
  }
}

/* ------------------------------------------------------ Impression */

@media print {
  .bande-actions {
    display: none;
  }

  .bande,
  .bande-explication {
    box-shadow: none;
    border: 1.5px solid #000;
  }

  /* Sur papier, tout est déroulé : une bande figée à mi-parcours n'apprend rien. */
  .case[data-etat="attente"] .case-haut {
    color: #000;
  }

  .case[data-etat="courante"] {
    background: transparent;
    border-color: #000;
  }

  .bande-explication .c-c,
  .bande-explication .c-v,
  .bande-explication .c-r {
    color: #000;
    border-color: #000;
    background: transparent;
  }
}