/* tresorie_v2.css — page « Bilan comptable » (espace secrétariat), charte v2
   thème rouge admin. Réf. zip « Trésorerie CEE-ENSA - révisé ».
   Chaîne CE → Programme → AE → EJ → CP, édition sur place. Pleine largeur. */

.tr2 {
  --rouge: #BF0C2B;
  --rouge-fonce: #8E0A20;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 28px 72px;
  color: var(--marine, #001C31);
  font-family: var(--texte, 'Public Sans'), system-ui, sans-serif;
}

.tr2 * {
  box-sizing: border-box;
}

.tr2 a:hover {
  color: var(--marine, #001C31);
}

/* neutralise form{} (fond blanc + ombre, style.css) et button{} (vert) ;
   les .tr2-form ci-dessous sont préfixés .tr2 pour repasser devant */
.tr2 form {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* button{} de button.css met un fond vert + un :hover vert sur TOUT
   <button>. On remet tout à plat ici, puis chaque classe réaffirme son
   style (préfixée .tr2 pour repasser devant button:hover). */
.tr2 button {
  margin: 0;
  background-color: transparent;
  color: inherit;
}

.tr2 button:hover {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

.tr2 .tr2-bouton {
  background: var(--rouge);
  color: #fff;
}

.tr2 .tr2-bouton:hover {
  background: var(--marine, #001C31);
  color: #fff;
}

.tr2 .tr2-ico {
  background: #fff;
  color: var(--rouge);
}

.tr2 .tr2-ico:hover {
  background: var(--BGadmin, #FFE4DF);
  color: var(--rouge);
  border-color: var(--rouge);
}

.tr2 .tr2-ico.del {
  color: var(--ardoise, #516B8F);
}

.tr2 .tr2-ico.del:hover {
  color: var(--marine, #001C31);
  border-color: var(--marine, #001C31);
  background: var(--aplat, #F7F6F3);
}

.tr2 .tr2-form-actions button[type="submit"] {
  background: var(--rouge);
  color: #fff;
}

.tr2 .tr2-form-actions button[type="submit"]:hover {
  background: var(--marine, #001C31);
  color: #fff;
}

.tr2 .tr2-form-actions .g {
  background: #fff;
  color: var(--ardoise, #516B8F);
}

.tr2 .tr2-form-actions .g:hover {
  background: #fff;
  color: var(--marine, #001C31);
  border-color: var(--marine, #001C31);
}

.tr2 .tr2-form {
  background: #FFF9F8;
  border-left: 3px solid var(--rouge);
  padding: 14px 18px;
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--filet, #E8E0DC);
}

.tr2 .tr2-form.plain {
  border: 1px solid var(--rouge);
  border-top: none;
}

.tr2 .mono {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
}

.tr2 .num {
  font: 500 13px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  text-align: right;
  white-space: nowrap;
}

.tr2 .neg {
  color: var(--rouge);
}

.tr2-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--marine, #001C31);
  z-index: 5;
}

.tr2-surtitre {
  display: block;
  font: 500 11px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 10px;
}

.tr2-tete h1 {
  font: 600 30px/1.15 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--marine, #001C31);
  margin: 0 0 8px;
}

.tr2-tete p {
  font: 400 14px/1.6 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  margin: 0;
  max-width: 52em;
}

.tr2-tete-cmd {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tr2-tete-cmd label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10.5px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
}

.tr2-tete-cmd select {
  border: 1px solid var(--bord-champ, #C9C2B4);
  border-radius: 3px;
  padding: 10px 11px;
  font: 500 13px/1 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--marine, #001C31);
  background: #fff;
}

/* --- mode aide (page pensée pour quelqu'un qui découvre la trésorerie) --- */
.tr2-aide-toggle {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.tr2-aide-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--rouge);
  cursor: pointer;
  vertical-align: -3px;
  margin-right: 2px;
}

/* Masqués par défaut ; #tr2-root (jamais remplacé par les re-rendus AJAX,
   seul son contenu l'est) porte la classe mode-aide tant qu'elle est
   active, donc ce CSS suffit à garder tous les encadrés visibles/masqués
   sans code JS supplémentaire après chaque re-rendu. */
#tr2-root .tr2-aide {
  display: none;
}

#tr2-root.mode-aide .tr2-aide {
  display: block;
}

p.tr2-aide {
  font: 400 13px/1.6 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  margin: 0 0 14px;
  max-width: 60em;
}

p.tr2-aide .mono {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
}

.tr2-aide-premiers {
  background: var(--BGadmin, #FFE4DF);
  border: 1px solid var(--rouge);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 20px;
}

.tr2-aide-premiers h2 {
  font: 600 16px/1.3 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--rouge-fonce, #8E0A20);
  margin: 0 0 8px;
}

.tr2-aide-premiers p {
  font: 400 13px/1.6 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
  margin: 10px 0 0;
}

.tr2-aide-premiers ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font: 400 13px/1.5 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
}

.tr2-aide-premiers .mono {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
  background: #fff;
  border: 1px solid var(--rouge);
  border-radius: 3px;
  padding: 0 5px;
  font-style: normal;
}

.tr2-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rouge);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 18px;
  font: 600 13.5px/1 var(--texte, 'Public Sans'), sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.tr2-bouton:hover {
  background: var(--marine, #001C31);
  color: #fff;
}

.tr2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  border: 1px solid var(--filet, #E8E0DC);
  border-top: none;
  background: var(--filet, #E8E0DC);
}

.tr2-stat {
  padding: 16px 20px;
  background: #fff;
}

.tr2-stat span.k {
  display: block;
  font: 500 10.5px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
  margin-bottom: 8px;
}

.tr2-stat strong {
  font: 500 22px/1 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--marine, #001C31);
}

.tr2-stat span.s {
  display: block;
  font: 400 11.5px/1.5 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  margin-top: 6px;
}

.tr2-alerte {
  background: #fff;
  border: 1px solid var(--rouge);
  border-top: none;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tr2-alerte .tag {
  background: var(--BGadmin, #FFE4DF);
  color: var(--rouge-fonce, #8E0A20);
  border-radius: 3px;
  padding: 5px 8px;
  font: 500 10.5px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tr2-alerte span {
  font: 400 13.5px/1.5 var(--texte, 'Public Sans'), sans-serif;
}

.tr2-section {
  margin-top: 28px;
}

.tr2-section-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tr2-section-tete h2 {
  font: 600 20px/1.25 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--marine, #001C31);
  margin: 0;
}

.tr2-section-tete .fil {
  font: 500 11.5px/1 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
}

.tr2-section-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- histogramme budget par programme (Crédits / AE / Engagé / Payé) --- */
.tr2-bars-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font: 500 12px/1 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
}

.tr2-bars-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tr2-bars-legende i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.tr2-bars {
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  padding: 20px 20px 16px;
  display: flex;
  gap: 8px;
}

.tr2-bars-axe {
  flex: none;
  width: 58px;
}

.tr2-bars-axe-zone {
  position: relative;
  height: 220px;
}

.tr2-bars-tick {
  position: absolute;
  right: 8px;
  left: 0;
  transform: translateY(50%);
  text-align: right;
  font: 500 10px/1 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  white-space: nowrap;
}

.tr2-bars-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  position: relative;
}

.tr2-bars-grille {
  position: absolute;
  left: 0;
  right: 0;
  height: 220px;
  pointer-events: none;
}

.tr2-bars-grille i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filet, #E8E0DC);
}

.tr2-bars-groupes {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  min-width: max-content;
  padding: 0 6px;
}

.tr2-bars-groupe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 96px;
}

.tr2-bars-cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 220px;
  width: 100%;
}

.tr2-bars-col {
  width: 16px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  position: relative;
}

/* Barre empilée par élément constitutif (ligne de ressource, AE…) : un
   rectangle par élément, le premier de la liste en bas, comme une pile
   de crédits. */
.tr2-bars-col--empile {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}

.tr2-bars-seg {
  width: 100%;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .55);
}

/* Fongibilité : la part donnée à un autre programme, en surimpression
   hachurée sur le sommet de la barre Crédits — la barre est dessinée à sa
   hauteur BRUTE (avant transfert donné), et cette trame masque la part
   qui est partie, si bien que la part solide (réellement disponible,
   en dessous) s'arrête visiblement plus bas que le sommet de la barre. */
.tr2-bars-hachure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .75) 0,
    rgba(255, 255, 255, .75) 3px,
    rgba(0, 28, 49, .55) 3px,
    rgba(0, 28, 49, .55) 6px
  );
  border-bottom: 1px dashed #fff;
}

.tr2-bars-legende-hachure {
  width: 16px !important;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    #fff 0,
    #fff 2px,
    var(--marine, #001C31) 2px,
    var(--marine, #001C31) 4px
  ) !important;
}

.tr2-bars-val i {
  font-style: normal;
  opacity: .85;
}

.tr2-bars-val {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--marine, #001C31);
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  font: 500 11px/1.3 var(--texte, 'Public Sans'), sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 2;
}

.tr2-bars-col:hover .tr2-bars-val {
  opacity: 1;
}

.tr2-bars-nom {
  font: 500 11.5px/1.3 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
  text-align: center;
}

@media (min-width: 720px) {
  .tr2-bars-groupe {
    width: 116px;
  }

  .tr2-bars-col {
    width: 20px;
  }
}

/* --- carte programme --- */
.tr2-prog {
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  border-top: 2px solid var(--marine, #001C31);
  margin-bottom: 16px;
}

.tr2-prog-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 108px) 66px;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--filet, #E8E0DC);
}

.tr2-prog-id {
  flex: none;
  background: var(--marine, #001C31);
  color: #fff;
  border-radius: 3px;
  padding: 4px 7px;
  font: 500 11px/1 var(--donnee, 'JetBrains Mono'), monospace;
}

.tr2-prog-tete h3 {
  font: 600 16px/1.3 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--marine, #001C31);
  margin: 0;
  min-width: 0;
}

.tr2-prog-nom {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.tr2-bar {
  height: 4px;
  margin-top: 9px;
  background: var(--creme, #F0EEE9);
  max-width: 340px;
}

.tr2-bar i {
  display: block;
  height: 4px;
  background: var(--ardoise, #516B8F);
}

.tr2-bar.over i {
  background: var(--rouge);
}

.tr2-conso {
  font: 400 11px/1.5 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  margin-top: 5px;
}

.tr2-conso.over {
  color: var(--rouge);
}

.tr2-col-k {
  display: block;
  font: 500 10px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
  margin-bottom: 4px;
  text-align: right;
}

/* le montant sous sa légende : même alignement (bord droit de la colonne) */
.tr2-prog-tete>div>.num {
  display: block;
}

.tr2-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.tr2-actions form {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
}

.tr2-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--filet, #E8E0DC);
  border-radius: 3px;
  background: #fff;
  color: var(--rouge);
  font: 500 12px/1 var(--donnee, 'JetBrains Mono'), monospace;
  cursor: pointer;
  padding: 0;
}

.tr2-ico:hover {
  border-color: var(--rouge);
  background: var(--BGadmin, #FFE4DF);
}

.tr2-ico.del {
  color: var(--ardoise, #516B8F);
}

.tr2-ico.del:hover {
  border-color: var(--marine, #001C31);
  color: var(--marine, #001C31);
  background: var(--aplat, #F7F6F3);
}

.tr2-ico.sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* --- ligne AE --- */
.tr2-ae {
  border-bottom: 1px solid #F5F0EE;
}

.tr2-ae:last-child {
  border-bottom: none;
}

.tr2-ae-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 108px) 66px;
  gap: 10px;
  align-items: center;
  padding: 11px 18px;
}

.tr2-ae-nom {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  color: var(--marine, #001C31);
  font: inherit;
}

.tr2-ae-nom:hover {
  color: var(--rouge);
}

.tr2-ae-nom .chev {
  flex: none;
  color: var(--rouge);
  font: 500 11px/1 var(--donnee, 'JetBrains Mono'), monospace;
}

.tr2-ae-nom .code {
  flex: none;
  font: 500 11px/1 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
}

.tr2-ae-nom .t {
  min-width: 0;
}

.tr2-ae-nom .t b {
  display: block;
  font: 500 14px/1.35 var(--texte, 'Public Sans'), sans-serif;
  font-weight: 500;
}

.tr2-ae-nom .t s {
  display: block;
  text-decoration: none;
  font: 400 10.5px/1.4 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  margin-top: 2px;
}

.tr2-ae-corps {
  background: #FCFBFA;
  border-top: 1px solid var(--creme, #F0EEE9);
  padding: 6px 18px 12px 40px;
}

/* --- ligne EJ --- */
.tr2-ej {
  border-top: 1px solid var(--creme, #F0EEE9);
}

.tr2-ej-h {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 100px 108px 60px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
}

.tr2-ej-date {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: 500 11px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
}

.tr2-ej-date:hover {
  color: var(--rouge);
}

.tr2-ej-lib {
  min-width: 0;
}

.tr2-ej-lib b {
  display: block;
  font: 500 13.5px/1.4 var(--texte, 'Public Sans'), sans-serif;
  font-weight: 500;
  color: var(--marine, #001C31);
}

.tr2-ej-lib s {
  display: block;
  text-decoration: none;
  font: 400 10.5px/1.45 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  margin-top: 2px;
}

.tr2-ej-statut {
  display: block;
  font: 400 10px/1.4 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  margin-top: 2px;
  text-align: right;
}

.tr2-cp-wrap {
  padding: 2px 0 10px 26px;
}

.tr2-cp-k {
  display: block;
  font: 500 9.5px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
  margin: 6px 0;
}

.tr2-cp {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 92px 54px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #F5F0EE;
}

.tr2-cp span.d {
  font: 500 11px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
}

.tr2-cp span.n {
  font: 400 12.5px/1.4 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  min-width: 0;
}

.tr2-vide {
  font: italic 400 13px/1.5 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  margin: 8px 0;
}

/* --- table crédits entrants --- */
.tr2-credits {
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  border-top: 2px solid var(--marine, #001C31);
}

.tr2-cr-tete,
.tr2-cr-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 120px minmax(0, 1.1fr) 66px;
  gap: 10px;
  padding: 10px 18px;
  align-items: center;
}

.tr2-cr-tete {
  border-bottom: 1px solid var(--filet, #E8E0DC);
  background: var(--aplat, #F7F6F3);
  font: 500 10px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
}

.tr2-cr-row {
  border-bottom: 1px solid #F5F0EE;
}

.tr2-cr-row:last-child {
  border-bottom: none;
}

.tr2-cr-report {
  background: var(--aplat, #F7F6F3);
}

.tr2-cr-report .tr2-cr-lib s {
  color: var(--rouge-fonce, #8E0A20);
}

.tr2-cr-lib b {
  display: block;
  font: 500 14px/1.35 var(--texte, 'Public Sans'), sans-serif;
  font-weight: 500;
  color: var(--marine, #001C31);
}

.tr2-cr-lib s {
  display: block;
  text-decoration: none;
  font: 400 10.5px/1.45 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
  margin-top: 2px;
}

.tr2-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.tr2-part {
  background: var(--aplat, #F7F6F3);
  border: 1px solid var(--filet, #E8E0DC);
  border-radius: 3px;
  padding: 4px 7px;
  font: 500 10.5px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--marine, #001C31);
}

.tr2-part.reste,
.tr2-part.neg {
  background: var(--BGadmin, #FFE4DF);
  border-color: var(--rouge);
  color: var(--rouge-fonce, #8E0A20);
}

/* --- formulaires en place --- */
.tr2-form {
  background: #FFF9F8;
  border-left: 3px solid var(--rouge);
  padding: 14px 18px;
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--filet, #E8E0DC);
}

.tr2-form.plain {
  border: 1px solid var(--rouge);
  border-top: none;
}

.tr2-form-lib {
  font: 500 10px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rouge);
}

.tr2-form h2 {
  font: 600 16px/1.3 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--marine, #001C31);
  margin: 0;
}

.tr2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.tr2-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font: 500 10px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
}

.tr2-form label.inline {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font: 400 12.5px/1 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
}

/* emplacements où le JS insère les formulaires clonés */
.tr2-slot:empty {
  display: none;
}

.tr2-slot>form {
  margin: 0;
}

/* messages */
.tr2-messages {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.tr2-msg {
  border-left: 3px solid var(--ardoise, #516B8F);
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  border-left-width: 3px;
  padding: 10px 14px;
  font: 400 13px/1.5 var(--texte, 'Public Sans'), sans-serif;
}

.tr2-msg.error {
  border-left-color: var(--rouge, #BF0C2B);
}

.tr2-msg.warning {
  border-left-color: #E48E68;
}

.tr2-msg.success {
  border-left-color: var(--marine, #001C31);
}

.tr2-form input,
.tr2-form select,
.tr2-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--bord-champ, #C9C2B4);
  border-radius: 3px;
  padding: 8px 9px;
  font: 400 13px/1.4 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
  background: #fff;
}

.tr2-form input[type=number] {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
  text-align: right;
}

.tr2-form input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--rouge);
}

.tr2-form :is(input, select, textarea):focus {
  outline: 2px solid var(--rouge);
  outline-offset: -1px;
  border-color: var(--rouge);
}

.tr2-vent {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--filet, #E8E0DC);
  padding-top: 12px;
}

.tr2-vent-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  font: 500 10px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
}

.tr2-vent-ecart {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
  text-transform: none;
  letter-spacing: 0;
}

.tr2-vent-ecart.ko {
  color: var(--rouge);
}

.tr2-vent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 10px;
  align-items: center;
}

.tr2-vent-row span {
  font: 400 13px/1.4 var(--texte, 'Public Sans'), sans-serif;
  color: var(--marine, #001C31);
  min-width: 0;
}

.tr2-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.tr2-form-actions button {
  border-radius: 3px;
  font: 600 12.5px/1 var(--texte, 'Public Sans'), sans-serif;
  padding: 9px 15px;
  border: 1px solid transparent;
  cursor: pointer;
}

.tr2-form-actions button[type=submit] {
  background: var(--rouge);
  color: #fff;
}

.tr2-form-actions button[type=submit]:hover {
  background: var(--marine, #001C31);
}

.tr2-form-actions .g {
  background: #fff;
  border-color: var(--bord-champ, #C9C2B4);
  color: var(--ardoise, #516B8F);
}

.tr2-form-actions .g:hover {
  border-color: var(--marine, #001C31);
  color: var(--marine, #001C31);
}

.tr2-form-actions .aide {
  font: 400 11px/1.4 var(--donnee, 'JetBrains Mono'), monospace;
  color: var(--ardoise, #516B8F);
}

/* --- lexique --- */
.tr2-lexique {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.tr2-lexique>div {
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  padding: 18px 20px;
}

.tr2-lexique h2 {
  font: 600 14px/1.3 var(--titre, 'Space Grotesk'), sans-serif;
  color: var(--marine, #001C31);
  margin: 0 0 12px;
}

.tr2-lexique ol,
.tr2-lexique ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font: 400 12.5px/1.55 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
}

.tr2-lexique strong {
  color: var(--marine, #001C31);
}

.tr2-empty {
  background: #fff;
  border: 1px solid var(--filet, #E8E0DC);
  border-top: none;
  padding: 40px 24px;
  text-align: center;
}

.tr2-empty p {
  font: 400 14px/1.6 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  margin: 0 0 16px;
}

@media (max-width: 860px) {

  .tr2-prog-tete,
  .tr2-ae-h {
    grid-template-columns: minmax(0, 1fr) 90px 60px;
  }

  .tr2-prog-tete>div:nth-child(3),
  .tr2-prog-tete>div:nth-child(4),
  .tr2-ae-h>span:nth-child(2),
  .tr2-ae-h>span:nth-child(4) {
    display: none;
  }

  .tr2-cr-tete,
  .tr2-cr-row {
    grid-template-columns: minmax(0, 1fr) 90px 60px;
  }

  .tr2-cr-tete>span:nth-child(1),
  .tr2-cr-tete>span:nth-child(4),
  .tr2-cr-row>span:nth-child(1),
  .tr2-cr-row>.tr2-parts {
    display: none;
  }
}

[hidden] {
  display: none !important;
}

.tr2-hors {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rouge-fonce, #8E0A20);
  background: var(--BGadmin, #FFE4DF);
  border-radius: 3px;
  padding: 1px 5px;
}

/* justificatifs d'un EJ */
.tr2-just {
  padding: 4px 0 8px;
}

.tr2-just a {
  display: inline-block;
  margin: 2px 10px 2px 0;
  font: 400 12px/1.4 var(--texte, 'Public Sans'), sans-serif;
  color: var(--rouge, #BF0C2B);
  text-decoration: underline;
}

.tr2-form input[type="file"] {
  font: 400 12.5px/1.4 var(--texte, 'Public Sans'), sans-serif;
  padding: 6px 0;
  border: 0;
  background: none;
}

/* ================= Bilan imprimable ================= */
.bilan {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 28px 60px;
  font-family: var(--texte, 'Public Sans'), system-ui, sans-serif;
  color: var(--marine, #001C31);
  /* rouge admin (repris de .tr2, non défini ici sinon) + sa variante
     claire pour rester lisible sur un fond marine (lignes de programme) */
  --rouge: #BF0C2B;
  --rouge-clair: #FFC9C9;
}

.bilan .neg {
  color: var(--rouge, #BF0C2B);
}

.bilan-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.bilan-btn {
  background: var(--rouge, #BF0C2B);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px 18px;
  font: 600 13.5px/1 var(--texte, 'Public Sans'), sans-serif;
  cursor: pointer;
}

.bilan-btn:hover {
  background: var(--marine, #001C31);
}

.bilan-lien {
  font: 400 13px/1 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
}

.bilan-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
  background: var(--aplat, #F7F6F3);
  border: 1px solid var(--filet, #E8E0DC);
  border-radius: 4px;
  padding: 3px;
}

.bilan-toggle a {
  font: 500 12px/1 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
  padding: 6px 11px;
  border-radius: 3px;
}

.bilan-toggle a.actif {
  background: #fff;
  color: var(--marine, #001C31);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.bilan-tete {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 2px solid var(--marine, #001C31);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.bilan-logo {
  height: 56px;
  width: 56px;
  flex: none;
  object-fit: contain;
}

.bilan-sur {
  font: 500 11px/1 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardoise, #516B8F);
  margin-bottom: 8px;
}

.bilan-tete h1 {
  font: 700 22px/1.25 var(--titre, 'Space Grotesk'), sans-serif;
  margin: 0 0 6px;
}

.bilan-meta {
  font: 400 12.5px/1.5 var(--texte, 'Public Sans'), sans-serif;
  color: var(--ardoise, #516B8F);
}

.bilan-sec {
  margin: 24px 0;
}

.bilan-sec>h2 {
  font: 700 15px/1.3 var(--titre, 'Space Grotesk'), sans-serif;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--filet, #E8E0DC);
  padding-bottom: 5px;
}

/* section 3 : un seul grand tableau, une ligne de groupe par programme */
.bilan-prog-row td {
  background: var(--marine, #001C31);
  color: #fff;
  font-weight: 700;
  border-color: var(--marine, #001C31);
}

.bilan-prog-row .pg {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
}

.bilan-prog-row .bilan-note {
  color: var(--bleu-clair, #869ECE);
  font-weight: 400;
}

/* .neg est sombre par défaut (lisible sur fond blanc) : sur la ligne de
   programme (fond marine), on repasse sur la variante claire du rouge */
.bilan .bilan-prog-row .neg {
  color: var(--rouge-clair, #FFC9C9);
}

.bilan-t {
  width: 100%;
  border-collapse: collapse;
  font: 400 12px/1.45 var(--texte, 'Public Sans'), sans-serif;
  margin: 4px 0 10px;
}

.bilan-t th,
.bilan-t td {
  border: 1px solid var(--filet, #E8E0DC);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}

.bilan-t thead th {
  background: var(--aplat, #F7F6F3);
  font: 600 10.5px/1.3 var(--donnee, 'JetBrains Mono'), monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bilan-t .r {
  text-align: right;
  white-space: nowrap;
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
}

.bilan-t td.r {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
}

.bilan-t .ae,
.bilan-t .ej {
  font-family: var(--donnee, 'JetBrains Mono'), monospace;
  white-space: nowrap;
  font-size: 11px;
}

.bilan-t .ej {
  color: var(--ardoise, #516B8F);
}

.bilan-fort th,
.bilan-fort td {
  background: var(--aplat, #F7F6F3);
  font-weight: 700;
}

.bilan-cp td {
  color: var(--ardoise, #516B8F);
  font-size: 11.5px;
}

.bilan-note {
  color: var(--ardoise, #516B8F);
  font-size: 11px;
}

.bilan-synth th {
  width: 55%;
}

/* format papier propre pour l'export PDF (Ctrl+P) : décocher les
   « en-têtes et pieds de page » du navigateur laisse un rendu net avec
   la seule entête .bilan-tete. */
@page {
  size: A4;
  margin: 16mm 14mm;
}

@media print {
  .no-print {
    display: none !important;
  }

  body {
    margin: 0 !important;
    background: #fff !important;
  }

  .bilan {
    max-width: none;
    padding: 0;
  }

  .bilan-sec {
    break-inside: avoid;
  }

  .bilan-prog-row {
    break-after: avoid;
  }

  .bilan-tete {
    break-after: avoid;
  }

  .bilan-t {
    font-size: 10.5px;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  /* Histogramme : jamais de barre de défilement sur papier, tout doit
     tenir dans la largeur imprimable — quitte à ce que les groupes se
     resserrent (cf. .tr2-bars-groupe ci-dessous). L'infobulle au survol
     n'a pas de sens à l'impression, elle reste masquée (opacity: 0). */
  .tr2-bars-scroll {
    overflow: visible;
  }

  .tr2-bars-axe-zone,
  .tr2-bars-grille,
  .tr2-bars-cols {
    height: 140px;
  }

  .tr2-bars-groupes {
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .tr2-bars-groupe {
    width: 74px;
  }

  .tr2-bars-col {
    width: 12px;
  }
}