/* === La fréquentation (frequentation.html) ===========================
   En ce moment (tuiles, les dernières 24 h), quand venir jouer (la semaine en créneaux, les meilleurs, semaine /
   week-end, soirée / journée), puis le bloc commun du wipe (components/population.css), en pleine largeur. Même DA
   que le journal : panneaux bruns à grain, creux en voile sombre, barres incrustées. */

.population-page {
  --parchment: #e3d4b4; /* adouci, comme le journal : beaucoup de chiffres */
}
.pop-section {
  margin-top: 40px;
}
.pop-section:first-child {
  margin-top: 0;
}
.pop-section[hidden] {
  display: none;
}
.pop-panel {
  padding: 22px 24px;
  border: 1px solid var(--line-gold);
  background-image: var(--panel-gradient), var(--grain);
}
.pop-empty {
  margin: 0;
  color: var(--text-soft);
}
.pop-gauge i {
  background: linear-gradient(90deg, #b07a2a, var(--honey));
  transform-origin: left;
}
/* Le titre du bloc du wipe : en libellé au-dessus de son panneau, comme « En ce moment » et « Quand venir jouer »
   (le titre du bloc commun, fait pour l'accueil, est masqué ici) */
.pop-k--wipe {
  margin-top: 40px;
}
.pop-k--wipe + .pop-section {
  margin-top: 0;
}
.population-page .population__head h2 {
  display: none;
}
/* Le bloc du wipe : toute la largeur, sur le même fond que les autres */
.population-page .population {
  max-width: none;
  margin-top: 0;
  background-image: var(--panel-gradient), var(--grain);
  border-color: var(--line-gold);
  box-shadow: none;
}

/* --- En ce moment --- */
.pop-now {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 22px 28px;
  align-items: stretch;
}
.pop-now__tiles {
  display: grid;
  gap: 10px;
}
.pop-tile {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  background: linear-gradient(110deg, rgba(50, 42, 32, 0.92), rgba(27, 23, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(var(--sheen-rgb), 0.05), inset 0 0 22px rgba(var(--shadow-rgb), 0.4);
}
.pop-tile small {
  color: var(--text-soft);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pop-tile strong {
  color: var(--parchment);
  font: 900 1.9rem/1.1 "Roboto Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
}
.pop-tile > span {
  color: var(--text-soft);
  font-size: 0.88rem;
}
.pop-tile .pop-gauge {
  margin-top: 6px;
}
.pop-tile em {
  margin-top: 4px;
  color: #8f8473;
  font-size: 0.8rem;
  font-style: normal;
}
.pop-tile.is-live strong::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 10px;
  border-radius: 50%;
  background: #5cc27a;
  vertical-align: middle;
  animation: pop-live 1.6s ease-out infinite;
}
@keyframes pop-live {
  from {
    box-shadow: 0 0 0 0 #5cc27acc;
  }
  to {
    box-shadow: 0 0 0 9px #5cc27a00;
  }
}
/* Les dernières 24 h, dans un creux : une phrase, l'échelle à gauche, la courbe et ses repères */
.pop-day {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 230px;
  padding: 14px 16px 34px;
  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);
}
.pop-ranges {
  display: flex;
  gap: 4px;
}
.pop-range {
  padding: 5px 11px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--shadow-rgb), 0.28);
  color: var(--text);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pop-range:hover {
  border-color: var(--gold);
}
.pop-range.is-on {
  border-color: var(--honey);
  background: rgba(var(--honey-rgb), 0.16);
  color: var(--parchment);
}

.pop-day__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.pop-day__scale {
  position: relative;
  width: 26px;
  height: 180px;
}
.pop-day__scale span {
  position: absolute;
  right: 0;
  color: var(--text-soft);
  font: 600 0.8rem Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
.pop-day__chart {
  position: relative;
  height: 180px;
  cursor: crosshair;
  touch-action: pan-y;
}
.pop-day svg {
  display: block;
  width: 100%;
  height: 180px;
}
/* Le pic et « maintenant » : un point et une étiquette au-dessus */
.pop-day__mark {
  position: absolute;
  pointer-events: none;
}
.pop-day__mark i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #15110c;
  border-radius: 50%;
  background: var(--honey);
  transform: translate(-50%, -50%);
}
.pop-day__mark b {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding: 2px 7px;
  background: #15110ce6;
  color: var(--parchment);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pop-day__mark.is-now b {
  transform: translateX(-100%);
  color: #5cc27a;
}
.pop-day__mark.is-now i {
  background: #5cc27a;
}
/* La ligne qui suit le pointeur, son point sur la courbe et sa bulle */
.pop-day__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(var(--parchment-rgb), 0.5);
  pointer-events: none;
}
.pop-day__cursor[hidden] {
  display: none;
}
.pop-day__cursor i {
  position: absolute;
  top: var(--y);
  width: 11px;
  height: 11px;
  border: 2px solid #15110c;
  border-radius: 50%;
  background: var(--parchment);
  transform: translate(-50%, -50%);
}
.pop-day__cursor b {
  position: absolute;
  top: calc(var(--y) - 34px);
  left: 10px;
  padding: 4px 9px;
  border: 1px solid var(--line-gold);
  background: #1d1813f2;
  color: var(--parchment);
  font: 700 0.8rem Roboto, sans-serif;
  white-space: nowrap;
  box-shadow: 0 8px 18px #000a;
}
.pop-day__cursor.is-left b {
  right: 10px;
  left: auto;
}
.pop-day__grid {
  fill: none;
  stroke: #ffffff12;
}
.pop-day__then {
  fill: none;
  stroke: rgba(var(--parchment-rgb), 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}
.pop-day__legend {
  margin: 24px 0 0 !important;
}
.pop-day__line {
  fill: none;
  stroke: var(--honey);
  stroke-width: 2;
  stroke-linejoin: round;
}
.pop-day__ticks {
  position: absolute;
  right: 0;
  bottom: -24px;
  left: 0;
  height: 16px;
}
.pop-day__ticks span {
  position: absolute;
  color: var(--text-soft);
  font: 600 0.8rem Roboto, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* La première et la dernière heure restent dans le cadre */
.pop-day__ticks span:first-child {
  transform: none;
}
.pop-day__ticks span:last-child {
  transform: translateX(-100%);
}
.pop-day .pop-empty {
  align-self: center;
  text-align: center;
}

/* --- Quand venir jouer : la semaine en créneaux, à côté les meilleurs et les comparaisons --- */
.pop-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}
.pop-week {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.pop-week__hour {
  color: var(--text-soft);
  font: 600 0.8rem Roboto, sans-serif;
  white-space: nowrap;
}
.pop-week__day {
  color: var(--text);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  transition: color 0.15s;
}
/* Le jour et l'heure de la case survolée s'allument */
.pop-week__day.is-lit,
.pop-week__hour.is-lit {
  color: var(--honey);
}
.pop-week__hour.is-lit:empty::after {
  content: "•";
}
/* Un créneau : plus il y a de monde en moyenne, plus il est miel (le vide, hachuré : pas de relevé) */
.pop-week__cell {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--honey) calc(var(--v) * 100%), rgba(var(--shadow-rgb), 0.32));
  box-shadow: inset 0 1px 0 rgba(var(--sheen-rgb), 0.06), inset 0 -1px 0 rgba(var(--shadow-rgb), 0.35);
  transition: transform 0.15s;
}
.pop-week__cell:hover {
  outline: 1px solid var(--parchment);
  transform: scale(1.15);
}
.pop-week__cell.is-empty {
  background: repeating-linear-gradient(135deg, rgba(var(--sheen-rgb), 0.05) 0 2px, transparent 2px 5px), rgba(var(--shadow-rgb), 0.25);
}
.pop-week__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pop-week__legend i {
  width: 120px;
  height: 8px;
  background: linear-gradient(90deg, rgba(var(--shadow-rgb), 0.32), var(--honey));
  box-shadow: var(--well-shadow);
}
/* La grille et, dessous, le mot sur les créneaux calmes : il prend toute la hauteur restante, à la hauteur de la
   colonne de droite */
.pop-rhythm__grid {
  display: flex;
  flex-direction: column;
}
.pop-rhythm__note {
  margin-top: 18px;
}
/* La note qui présente un graphique : de l'air avant le graphique (étiquettes des heures, valeurs, axe) */
.pop-day__lede {
  margin-bottom: 14px;
}
.pop-rhythm__side h3 {
  margin: 0 0 12px;
  color: var(--parchment);
  font: 900 var(--fs-card) "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.pop-best {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pop-best li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pop-best__rank {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 38px;
  background: rgba(var(--honey-rgb), 0.16);
  color: var(--gold);
  font: 900 0.95rem "Roboto Condensed", sans-serif;
  clip-path: var(--hex);
}
.pop-best li:first-child .pop-best__rank {
  background: var(--honey);
  color: var(--honey-ink);
}
.pop-best b,
.pop-calm b {
  display: block;
  color: var(--parchment);
  font: 800 0.98rem Roboto, sans-serif;
}
.pop-best small,
.pop-calm small {
  color: var(--text-soft);
  font-size: 0.84rem;
}
.pop-calm {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ffffff12;
}
.pop-calm > span {
  display: block;
  color: var(--text-soft);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pop-split {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ffffff12;
}
.pop-split > small {
  color: var(--text-soft);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pop-split > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  color: var(--text);
  font-size: 0.88rem;
}

.pop-split > div {
  cursor: help;
}
.pop-split b {
  color: var(--parchment);
  font: 900 1rem "Roboto Condensed", sans-serif;
  text-align: right;
}

/* Les joueurs, jour par jour : une barre par jour, la part des nouveaux en miel au pied */
.pop-bars {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.pop-bars__day {
  display: grid;
  flex: 1 0 34px;
  grid-template-rows: 18px 170px 18px;
  gap: 4px;
  text-align: center;
  cursor: help;
}
.pop-bars__day b {
  color: var(--parchment);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
}
.pop-bars__track {
  position: relative;
  background: var(--well);
  box-shadow: var(--well-shadow);
}
.pop-bars__track i {
  position: absolute;
  right: 3px;
  bottom: 0;
  left: 3px;
  display: block;
  height: var(--h);
  background: linear-gradient(var(--text-soft), #6f675b);
  box-shadow: var(--fill-shadow);
}
.pop-bars__track s {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--n);
  background: linear-gradient(#f0b85a, #b07a2a);
  text-decoration: none;
}
.pop-bars__day:hover .pop-bars__track i {
  outline: 1px solid var(--parchment);
}
.pop-bars__day small {
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}
/* Sous les dates des barres, pas par-dessus (la légende de la courbe remonte, celle-ci non) */
.pop-bars__legend {
  margin: 24px 0 0 !important;
}
.pop-bars__legend .is-unique::before {
  border-top-color: var(--text-soft);
}
.pop-bars__legend .is-new::before {
  border-top: 2px solid var(--honey);
}
/* Tes heures : la grille en crème (les tiennes, pas celles de la ruche), ou de quoi te connecter */
.pop-week--mine .pop-week__cell {
  background: color-mix(in srgb, #e9dcc0 calc(var(--v) * 100%), rgba(var(--shadow-rgb), 0.32));
}
.pop-week--mine .pop-week__cell.is-empty {
  background: rgba(var(--shadow-rgb), 0.25);
}
.pop-mine__fav {
  margin-top: 18px !important;
}
.pop-mine__login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.pop-mine__login p {
  margin: 0;
  color: var(--text);
}

/* La bulle commune (watchTips) : suit le pointeur */
.pop-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  max-width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--line-gold);
  background: #1d1813f2;
  color: var(--parchment);
  font: 600 0.82rem Roboto, sans-serif;
  box-shadow: 0 10px 22px #000b;
  pointer-events: none;
}
.pop-tip[hidden] {
  display: none;
}

/* --- À l'écran (toggleOnScreen : is-visible) : les jauges se remplissent, la courbe se trace, les créneaux
   s'allument, à chaque retour --- */
.pop-section .pop-gauge i {
  transform: scaleX(0);
}
.pop-section.is-visible .pop-gauge i {
  animation: pop-fill 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.pop-section .pop-week__cell {
  opacity: 0;
}
.pop-section.is-visible .pop-week__cell {
  animation: pop-cell 0.6s ease-out both;
  animation-delay: calc(var(--v) * 0.6s);
}
.pop-section .pop-day svg {
  clip-path: inset(0 100% 0 0);
}
.pop-section.is-visible .pop-day svg {
  animation: draw-in 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) both; /* packages/theme */
}
@keyframes pop-fill {
  to {
    transform: none;
  }
}
@keyframes pop-cell {
  to {
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .pop-now,
  .pop-rhythm {
    grid-template-columns: 1fr;
  }
  .pop-now__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .pop-panel {
    padding: 18px 16px;
  }
  .pop-now__tiles {
    grid-template-columns: 1fr;
  }
  .pop-week {
    grid-template-columns: 30px repeat(24, minmax(0, 1fr));
    gap: 2px;
  }
  .pop-week__hour {
    font-size: 0.8rem;
  }
  /* Sur 7 jours, un jour sur deux sous la courbe : ils se chevauchaient */
  .pop-day__plot[data-range="7d"] .pop-day__ticks span:nth-child(even) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .population-page * {
    animation: none !important;
  }
  .pop-section .pop-gauge i {
    transform: none;
  }
  .pop-section .pop-week__cell {
    opacity: 1;
  }
  .pop-section .pop-day svg {
    clip-path: none;
  }
}