/* === Le journal des wipes ===========================================
   L'histoire de la ruche : le wipe en cours en tête (où on en est, ses totaux), la tendance wipe après wipe (une
   mesure au choix), les records, puis la frise des wipes passés. Même DA que la Carte : panneaux sombres, liserés
   dorés, hexagones, le miel pour ce qui l'emporte. */

.journal-page {
  /* Beaucoup de chiffres et de titres : le crème clair, adouci, ne flashe pas */
  --parchment: #e3d4b4;
  --up: #7fbf6a;
  --down: var(--red-text);
}
.journal-section {
  margin-top: 40px;
}
.journal-section[hidden],
.journal-now[hidden] {
  display: none;
}
.journal-delta {
  color: var(--text-soft);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
}
.journal-delta.is-up {
  color: var(--up);
}
.journal-delta.is-down {
  color: var(--down);
}

/* --- Le wipe en cours --- */
.journal-now {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 26px 28px;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--honey);
  background:
    radial-gradient(ellipse at 95% 0%, rgba(var(--honey-rgb), 0.14), transparent 55%),
    var(--panel-gradient),
    var(--grain);
}
.journal-now:has(.state-card) {
  padding: 0;
  border: 0;
  background: none;
}
.journal-now__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px);
  gap: 22px;
  align-items: center;
}
.journal-now__hex {
  display: grid;
  place-items: center;
  width: 72px;
  height: 82px;
  background: linear-gradient(160deg, #e0a445, #9a6420);
  clip-path: var(--hex);
}
.journal-now__hex b {
  color: var(--honey-ink);
  font: 900 1.5rem "Roboto Condensed", sans-serif;
}
.journal-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red-text);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.journal-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-text);
  animation: journal-live 1.6s ease-out infinite;
}
@keyframes journal-live {
  from {
    box-shadow: 0 0 0 0 rgba(var(--red-text-rgb), 0.8);
  }
  to {
    box-shadow: 0 0 0 9px rgba(var(--red-text-rgb), 0);
  }
}
.journal-now h2 {
  margin: 2px 0;
  color: var(--parchment);
  font: 900 var(--fs-section)/1.1 "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.journal-now small {
  color: var(--text-soft);
}
.journal-now__days p {
  margin: 0;
  color: var(--text-soft);
}
.journal-now__days b {
  color: var(--parchment);
  font: 900 1.9rem/1 "Roboto Condensed", sans-serif;
}
.journal-now__bar {
  margin: 10px 0 6px;
}
.journal-now__bar i {
  background: linear-gradient(90deg, #b07a2a, var(--honey));
}
.journal-now__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.journal-figure {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  background: var(--row-gradient);
}
.journal-figure i {
  color: var(--gold);
}
.journal-figure strong {
  color: var(--parchment);
  font: 900 1.7rem/1.1 "Roboto Condensed", sans-serif;
}
.journal-figure small {
  font-size: 0.9rem;
}
.journal-figure__then {
  color: var(--text-soft);
  font-size: 0.84rem;
}
.journal-now__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  color: var(--gold);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.journal-now__link:hover {
  color: var(--honey);
}

/* --- La tendance : une mesure au choix, une barre par wipe passé --- */
.journal-trend {
  padding: 18px 20px 14px;
  border: 1px solid var(--line-gold);
  background-image: var(--panel-gradient), var(--grain);
}
.journal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.journal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--shadow-rgb), 0.28);
  color: var(--text);
  font: 700 0.9rem Roboto, sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.journal-tab i {
  color: var(--text-soft);
}
.journal-tab:hover {
  border-color: var(--gold);
}
.journal-tab.is-on {
  border-color: var(--honey);
  background: rgba(var(--honey-rgb), 0.14);
  color: var(--parchment);
}
.journal-tab.is-on i {
  color: var(--honey);
}
/* Le cadre du tracé, incrusté : plus sombre, liseré intérieur ; l'échelle à gauche, les barres à droite (elles
   défilent s'il y a beaucoup de wipes). Les rangées des deux côtés sont les mêmes : étiquette, valeur, barre, date. */
.journal-plot {
  --rows: 16px 18px 220px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 6px;
  padding: 12px 14px 8px 10px;
  /* Un creux comme ceux de Soutenir : un voile sombre, une lueur chaude en haut, pas de noir plein */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--gold-rgb), 0.08), transparent 70%),
    rgba(var(--shadow-rgb), 0.28);
  box-shadow: inset 0 0 22px #0008, inset 0 0 0 1px rgba(var(--gold-rgb), 0.14);
}
.journal-axis {
  display: grid;
  grid-template-rows: var(--rows);
  row-gap: 4px;
  min-width: 44px;
}
.journal-axis__track {
  position: relative;
  grid-row: 3;
}
.journal-axis__track span {
  position: absolute;
  right: 4px;
  color: var(--text-soft);
  font: 600 0.8rem Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
.journal-bars {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.journal-bar {
  display: grid;
  flex: 1 0 60px;
  grid-template-rows: var(--rows);
  row-gap: 4px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.journal-bar b {
  color: var(--parchment);
  font: 800 0.9rem "Roboto Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
}
.journal-bar__track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Les repères, d'une barre à l'autre sans coupure : une ligne à chaque quart (la base, plus marquée) */
  border-bottom: 1px solid #ffffff38;
  background: linear-gradient(#ffffff14 1px, transparent 1px) 0 0 / 100% 25%;
}
.journal-bar:hover .journal-bar__track {
  background-color: #ffffff06;
}
.journal-bar__track i {
  display: block;
  width: min(70%, 46px);
  min-height: 3px; /* une toute petite valeur reste visible */
  background: linear-gradient(var(--text-soft), #6f675b);
  transition: height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}
.journal-bar.is-best .journal-bar__track i,
.journal-bar:hover .journal-bar__track i {
  background: linear-gradient(#f0b85a, #b07a2a);
}
.journal-bar.is-low .journal-bar__track i {
  background: linear-gradient(#c9564a, var(--red-dark));
}
/* L'étiquette des extrêmes, au-dessus de la valeur */
.journal-bar em {
  justify-self: center;
  align-self: end;
  font: 900 0.8rem "Roboto Condensed", sans-serif;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.journal-bar.is-best em {
  color: var(--honey);
}
.journal-bar.is-low em {
  color: var(--red-text);
}
.journal-bar small {
  color: var(--text-soft);
  font-size: 0.82rem;
  white-space: nowrap;
}
@keyframes journal-bar {
  from {
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}

/* --- À l'écran (toggleOnScreen : is-visible) : chaque bloc s'anime, et de nouveau à chaque retour --- */
.journal-trend.is-visible .journal-bar__track i {
  animation: journal-bar 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.journal-trend .journal-bar b,
.journal-trend .journal-bar em {
  opacity: 0;
}
.journal-trend.is-visible .journal-bar b,
.journal-trend.is-visible .journal-bar em {
  animation: journal-fade 0.6s ease-out both;
  animation-delay: calc(0.6s + var(--i, 0) * 90ms);
}
.journal-record {
  opacity: 0;
}
.journal-records.is-visible .journal-record {
  animation: journal-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.journal-item__card,
.journal-item__node {
  opacity: 0;
}
.journal-item.is-visible .journal-item__card {
  animation: journal-slide 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.journal-item.is-visible .journal-item__node {
  animation: journal-pop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  animation-delay: 0.2s;
}
.journal-now__bar i {
  transform: scaleX(0);
  transform-origin: left;
}
.journal-now.is-visible .journal-now__bar i {
  animation: journal-fill 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.journal-now .journal-figure {
  opacity: 0;
}
.journal-now.is-visible .journal-figure {
  animation: journal-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.journal-now.is-visible .journal-figure:nth-child(2) {
  animation-delay: 0.12s;
}
.journal-now.is-visible .journal-figure:nth-child(3) {
  animation-delay: 0.24s;
}
.journal-now.is-visible .journal-figure:nth-child(4) {
  animation-delay: 0.36s;
}
@keyframes journal-fade {
  to {
    opacity: 1;
  }
}
@keyframes journal-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journal-slide {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journal-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journal-fill {
  to {
    transform: none;
  }
}

/* --- Les records --- */
.journal-records {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.journal-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line-gold);
  background-image: var(--panel-gradient), var(--grain);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.journal-record:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.journal-record__hex {
  display: grid;
  grid-row: 1 / 4;
  place-items: center;
  width: 42px;
  height: 48px;
  background: rgba(var(--honey-rgb), 0.16);
  color: var(--gold);
  font: 900 1rem "Roboto Condensed", sans-serif;
  clip-path: var(--hex);
}
.journal-record strong {
  color: var(--parchment);
  font: 900 1.7rem/1.1 "Roboto Condensed", sans-serif;
}
.journal-record small {
  color: var(--text);
  font-size: 0.92rem;
}
.journal-record__when {
  color: var(--gold);
  font-size: 0.86rem;
}

/* --- La frise des wipes passés --- */
.journal-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 70px;
  list-style: none;
}
.journal-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 33px;
  width: 2px;
  background: linear-gradient(var(--honey), rgba(var(--honey-rgb), 0.12));
}
.journal-item {
  position: relative;
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--head) + var(--banner, 0px) + 20px);
}
.journal-item__node {
  position: absolute;
  top: 16px;
  left: -60px;
  display: grid;
  place-content: center;
  width: 48px;
  height: 54px;
  background: var(--gold);
  color: var(--parchment);
  font: 900 0.8rem/1.05 "Roboto Condensed", sans-serif;
  text-align: center;
  white-space: nowrap;
  clip-path: var(--hex);
}
.journal-item__node small {
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.journal-item__node::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: linear-gradient(160deg, #3a3024, #211b14);
  clip-path: var(--hex);
}
.journal-item__node {
  isolation: isolate;
}
.journal-item__card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 10px 22px;
  align-items: start;
  padding: 18px 22px;
  border: 1px solid var(--line-gold);
  background-image: var(--panel-gradient), var(--grain);
}
/* La fiche visée (clic sur une barre ou un record) : elle reglisse en place et s'éclaire */
.journal-timeline .journal-item.is-flash .journal-item__card {
  animation: journal-slide 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both, journal-flash 1.6s ease-out;
}
@keyframes journal-flash {
  from {
    border-color: var(--honey);
    box-shadow: 0 0 0 1px var(--honey), 0 0 30px rgba(var(--honey-rgb), 0.35);
  }
}
.journal-item__card h3 {
  margin: 0;
  color: var(--parchment);
  font: 900 var(--fs-card) "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
/* Le titre tient les deux rangées : les chiffres puis la ligne PNJ / morts s'empilent à côté, sans vide. À gauche,
   la tuile de la date (le jour en grand, le mois dessous) */
.journal-item__card header {
  display: flex;
  grid-row: span 2;
  gap: 14px;
  align-items: flex-start;
}
.journal-item__date {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  padding: 6px 0 7px;
  border: 1px solid var(--line-gold);
  border-top: 3px solid var(--honey);
  background: linear-gradient(110deg, rgba(50, 42, 32, 0.92), rgba(27, 23, 18, 0.96));
  color: var(--gold);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.journal-item__date b {
  color: var(--honey);
  font: 900 1.6rem/1 "Roboto Condensed", sans-serif;
  letter-spacing: 0;
}
.journal-item__card header small {
  display: block;
  color: var(--text-soft);
  font-size: 0.92rem;
  white-space: nowrap;
}
/* La durée, toujours sur sa ligne : toutes les fiches ont la même tête */
.journal-item__length {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 2px 9px;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--text);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.journal-item__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.journal-item__figures > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 10px;
  align-items: center;
}
/* L'icône du chiffre, dans un petit hexagone doré */
.journal-item__icon {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 34px;
  height: 38px;
  background: rgba(var(--gold-rgb), 0.13);
  color: var(--gold);
  font-size: 0.85rem;
  clip-path: var(--hex);
}
.journal-item__figures small {
  display: block;
  color: var(--text-soft);
  font-size: 0.88rem;
}
.journal-item__figures p {
  margin: 0;
}
.journal-item__figures b {
  margin-right: 6px;
  color: var(--parchment);
  font: 900 1.5rem "Roboto Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
}
.journal-item__extra {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.journal-item__extra i {
  margin-right: 7px;
  color: #8a7a5c;
}
/* Une fiche sur deux un cran plus claire : la frise se lit mieux */
.journal-item:nth-child(even) .journal-item__card {
  background-image: linear-gradient(110deg, rgba(60, 50, 37, 0.94), rgba(33, 28, 21, 0.97)), var(--grain);
}
.journal-item__badges {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
}
.journal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--honey);
  color: var(--honey-ink);
  font: 900 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journal-note {
  margin: 28px 0 0;
}

@media (max-width: 1100px) {
  .journal-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journal-item__card {
    grid-template-columns: 1fr;
  }
  .journal-item__card header {
    grid-row: auto;
  }
  .journal-item__extra {
    grid-column: 1;
  }
}
@media (max-width: 760px) {
  .journal-now {
    padding: 20px 18px;
  }
  .journal-now__head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .journal-now__days {
    grid-column: 1 / -1;
  }
  .journal-now__figures,
  .journal-item__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journal-records {
    grid-template-columns: 1fr;
  }
  .journal-timeline {
    padding-left: 54px;
  }
  .journal-timeline::before {
    left: 19px;
  }
  .journal-item__node {
    left: -54px;
    width: 42px;
    height: 48px;
  }
  .journal-plot {
    --rows: 16px 18px 170px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journal-page *,
  .journal-page *::before {
    animation: none !important;
  }
  .journal-bar__track i,
  .journal-now__bar i {
    transform: none;
  }
  .journal-trend .journal-bar b,
  .journal-trend .journal-bar em,
  .journal-record,
  .journal-item__card,
  .journal-item__node,
  .journal-now .journal-figure {
    opacity: 1;
  }
}

/* Mobile : deux chiffres par ligne ; un libellé long (« Constructions ») se coupe au lieu de déborder de sa colonne */
.journal-item__figures > div {
  min-width: 0;
}
.journal-item__figures small {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Téléphone : les chiffres d'un wipe (2 colonnes) tiennent dans la leur. Un grand nombre ne se coupe pas (« 123 456 ») :
   plus petit, l'icône aussi, et la variation passe dessous s'il le faut (contrôle des pages, 11 oct.). */
@media (max-width: 520px) {
  .journal-item__figures {
    gap: 12px 8px;
  }
  .journal-item__figures > div {
    gap: 0 8px;
  }
  .journal-item__icon {
    width: 28px;
    height: 32px;
  }
  .journal-item__figures p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
  }
  .journal-item__figures b {
    margin-right: 0;
    font-size: 1.2rem;
  }
}