/* Le mois du trésorier : styles propres à cette page. */
.tr-page { max-width: 1240px; margin: clamp(24px, 6vh, 56px) auto 60px; padding: 0 clamp(16px, 4vw, 40px); }
.tr-barre { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; margin: 28px 0 10px; }
.tr-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-barre .btn { margin-top: 0; }
.tr-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 10px; align-items: start; }
.tr-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tr-tete .mini { margin: 0; }
.tr-total { font: 500 13px/1 var(--mono); color: var(--soft); }

/* Les familles : une tuile par famille, sa couleur dit où elle en est */
.tr-familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 14px 0 12px; }
.tf { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #f1efea; border: 1px solid transparent; font-size: 12px; transition: background-color .35s, border-color .35s, color .35s; }
.tf b { font-weight: 600; font-size: 12px; }
.tf span { font: 500 11px/1 var(--mono); color: var(--soft); }
.tf.avis { background: #fff; border-color: #dcd9d2; }
.tf.fichier { background: var(--ink); color: #fff; }
.tf.fichier span { color: #a3a09a; }
.tf.paye { background: #e1f1e5; color: #276b3c; }
.tf.paye span { color: #3f9a5a; }
.tf.rejet { background: #fbe3dc; color: #a5361f; border-color: #e9a690; }
.tf.rejet span { color: #a5361f; }
.tf.manque { background: #fbeee4; color: #a5461f; border-style: dashed; border-color: #e8c3b0; }
.tr-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--soft); }
.tf-l { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; vertical-align: -2px; }
.tf-l.avis { background: #fff; border: 1px solid #dcd9d2; }
.tf-l.fichier { background: var(--ink); }
.tf-l.paye { background: #e1f1e5; border: 1px solid #b9dcc3; }
.tf-l.rejet { background: #fbe3dc; border: 1px solid #e9a690; }
.tf-l.manque { background: #fbeee4; border: 1px dashed #e8c3b0; }

/* L'agent */
.tr-agent { min-height: 420px; position: sticky; top: 16px; }
.tr-agent .mini { margin: 0; }
.tr-dit { font: 500 20px/1.3 var(--sans); letter-spacing: -.02em; color: #f4f2ee; margin-top: 14px; animation: apparait .4s var(--ease) both; }
.tr-compte { font-size: 14px; color: #a3a09a; margin-top: 10px; }
.tr-compte b { font: 600 28px/1 var(--sans); color: #fff; letter-spacing: -.03em; }
.tr-ligne { font-size: 14px; line-height: 1.45; color: #d9d6d0; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); animation: apparait .4s var(--ease) both; }
.tr-ligne.v { background: rgba(63,154,90,.2); color: #cfe9d7; }
.tr-ligne.o { background: rgba(180,83,47,.28); color: #f6d3c3; }
.tr-xml { max-height: 170px; overflow: hidden; margin: 12px 0 0; font-size: 10px; }
.tr-depot { position: relative; margin-top: 12px; }
.tr-depot .btn { margin-top: 0; pointer-events: none; background: #fff; color: var(--ink); }
.tr-doigt { left: 110px; bottom: -4px; animation: touche 1s cubic-bezier(.2,.7,.2,1) .8s both; }
.tr-releve { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.tr-releve li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); animation: apparait .4s var(--ease) both; }
.tr-lib { font: 500 11px/1.3 var(--mono); color: #d9d6d0; }
.tr-mt { font: 500 12px/1.3 var(--mono); color: #fff; text-align: right; }
.tr-avec { grid-column: 1 / -1; font-size: 13px; }
.tr-avec.v { color: #9fd6ae; }
.tr-avec.o { color: #f2b79d; }
.tr-reste { margin-top: 12px; padding-left: 18px; display: grid; gap: 6px; color: #d9d6d0; font-size: 14px; }

@media (max-width: 960px) {
  .tr-scene { grid-template-columns: minmax(0, 1fr); }
  .tr-agent { position: static; min-height: 0; }
}
@media (max-width: 640px) {
  .tr-barre { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-etapes { grid-column: 1 / -1; }
  .tr-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}