/* Écran 5 : le bon. Bande rouge en tête, fond blanc, huit colonnes centrées. */
.bon { padding-top: clamp(72px, 8vw, 128px); }
.bon__feuille { width: min(var(--g) * 8 / 12, 100vw - 2 * var(--mg)); margin: 0 auto; border-top: 8px solid var(--rouge);
  border-bottom: 2px solid var(--encre); padding: 28px 0 32px; display: grid; gap: 0; }
.bon h2 { font: 400 40px/1.1 var(--titre); padding-bottom: 20px; }
.bon__lignes { border-top: 2px solid var(--encre); }
.bon__ligne { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; column-gap: 20px; min-height: 76px;
  padding: 10px 0; border-bottom: 1px solid rgb(22 32 27 / .14); }
.bon__ligne.arrive { animation: arrive .35s cubic-bezier(.3, .7, .2, 1); }
@keyframes arrive { from { transform: translateY(-12px); opacity: 0; } }
.bon__q { width: calc(var(--l, 105) / 205 * 96px); height: auto; justify-self: start; }
.bon__nom { font: 400 22px/1.25 var(--titre); }
.bon__nom small { display: block; font: 500 16px/1.3 var(--texte); color: var(--rouge); }
.compteur { display: inline-grid; grid-template-columns: 48px 44px 48px; align-items: center; text-align: center; }
.compteur button { width: 48px; height: 48px; border: 2px solid var(--encre); border-radius: 8px; background: var(--blanc);
  font: 500 24px/1 var(--texte); }
.compteur button:disabled { opacity: .35; cursor: default; }
.compteur output { font: 400 24px/1 var(--titre); }
.bon__ajout { display: grid; grid-template-columns: 1fr minmax(0, 340px); align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 2px solid var(--encre); font-weight: 700; }
.bon select { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; padding: 0 40px 0 14px; border: 2px solid var(--encre);
  border-radius: 8px; font: 500 16px/1 var(--texte); background: var(--blanc)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%2316201B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  right 14px center / 12px 8px no-repeat; }
.bon__quand { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 18px 0; }
.champ { display: grid; gap: 6px; }
.champ label, .bon__durees legend { font: 700 16px/1.3 var(--texte); }
.bon__durees { margin: 0; padding: 0 0 18px; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.bon__durees legend { padding: 0 0 6px; }
.bon__durees label { position: relative; display: grid; align-content: center; min-height: 52px; padding: 8px 14px; border: 2px solid var(--encre);
  border-radius: 8px; cursor: pointer; }
.bon__durees input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.bon__durees span { font: 400 22px/1.2 var(--titre); }
.bon__durees label:has(:checked) { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.bon__durees label:has(:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 3px; }
.bon__durees .ferme { border-style: dashed; border-color: rgb(22 32 27 / .4); cursor: not-allowed; }
.bon__durees .ferme span { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--gris); }
.bon__durees small { font: 500 14px/1.35 var(--texte); color: var(--gris); }
.bon__retour { padding: 14px 0; border-top: 2px solid var(--encre); font: 700 18px/1.3 var(--texte); }
.bon__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0 12px; }
.bon__total span { font-weight: 700; }
.bon__total strong { font: 400 48px/1.1 var(--titre); }
.bon__info { font-size: 16px; line-height: 1.5; max-width: 62ch; padding: 4px 0; }
.bon__continuer { justify-self: end; margin-top: 20px; min-width: 220px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 8px;
  background: var(--rouge); color: var(--blanc); font: 700 18px/1 var(--texte); }
.bon__continuer:hover { background: var(--rouge-f); }

@media (max-width: 1023.98px) {
  .bon { padding-top: 64px; }
  .bon__feuille { width: auto; margin: 0 var(--mg); }
  .bon h2 { font-size: 32px; }
  .bon__ligne { grid-template-columns: 64px 1fr; row-gap: 8px; }
  .bon__q { width: calc(var(--l, 105) / 205 * 64px); }
  .bon__nom { font-size: 19px; }
  .compteur { grid-column: 2; justify-self: start; }
  .bon__ajout { grid-template-columns: 1fr; gap: 6px; }
  .bon__quand { grid-template-columns: 1fr; }
  .bon__durees { grid-template-columns: 1fr; }
  .bon__total strong { font-size: 40px; }
  .bon__continuer { justify-self: stretch; }
}