/* ================= E6 : écran de transition entre deux journées, choix de la carte du bac à sable ================= */
#tr-box { position: relative; display: flex; gap: calc(var(--u) * 7); align-items: flex-start; padding: calc(var(--u) * 6) calc(var(--u) * 7);
  max-width: calc(100vw - var(--u) * 12); max-height: calc(100vh - var(--u) * 12); overflow: auto; }
#tr-map { image-rendering: pixelated; display: block; box-shadow: 0 0 0 var(--u) var(--ink), 0 0 0 calc(var(--u) * 2) var(--paper), calc(var(--u) * 3) calc(var(--u) * 3) 0 calc(var(--u) * 2) rgba(0, 0, 0, .45); }
#tr-box .tr-right { width: calc(var(--u) * 130); }
#tr-box .tr-date { font: calc(var(--u) * 5)/1 'Silk', monospace; color: var(--sun); text-transform: uppercase; margin-bottom: calc(var(--u) * 2); }
#tr-box h2 { font-size: calc(var(--u) * 7.5); }
#tr-box .tr-where { color: var(--dim); margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
#tr-box .tr-where b { color: var(--paper); font-weight: 400; }
/* coupures de presse : papier journal, légère rotation par pas d'un pixel (décalages, pas de transform flou) */
.tr-press { display: grid; gap: calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 3); }
.tr-press .clip { background: #ece4d0; color: #241e2c; padding: calc(var(--u) * 2.5) calc(var(--u) * 3.5); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #000a, inset 0 calc(var(--u) * -1) 0 #cfc3a6; }
.tr-press .clip.c1 { margin-left: calc(var(--u) * 5); background: #e6ddc6; }
.tr-press .clip.c2 { margin-left: calc(var(--u) * 2); background: #f0e9d8; }
.tr-press .clip i { display: block; font: calc(var(--u) * 3.2)/1.2 'Silk', monospace; font-style: normal; text-transform: uppercase; color: #8a2a2a; border-bottom: var(--u) solid #241e2c; padding-bottom: var(--u); margin-bottom: calc(var(--u) * 1.5); }
.tr-press .clip b { display: block; font: calc(var(--u) * 4.4)/1.15 'Pixelify', monospace; font-weight: 700; }
.tr-press .clip span { display: block; font: calc(var(--u) * 3.6)/1.3 'Pixelify', monospace; color: #4a4052; margin-top: var(--u); }
.tr-conseq { margin: 0 0 calc(var(--u) * 2); padding-left: calc(var(--u) * 5); color: #ffb0a0; }
.tr-intro { color: var(--paper); margin: 0; }
@media (max-aspect-ratio: 4/3) { #tr-box { flex-direction: column; } }

#bac-maps { margin-bottom: calc(var(--u) * 4); }
#bac-maps .sub { margin-bottom: calc(var(--u) * 2); }
#bac-maps .maps { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.mapb { font: calc(var(--u) * 4)/1 'Pixelify', monospace; color: var(--paper); background: var(--bg2); border: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3);
  box-shadow: inset 0 0 0 var(--u) #5a4f72; cursor: pointer; }
.mapb.on { background: #3a6a48; box-shadow: inset 0 0 0 var(--u) #8fd0a0; }
.mapb.sel { background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 var(--u) var(--ink); }