:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #121821;
  --panel-soft: #171f2a;
  --text: #f3f6f8;
  --muted: #9aa8b5;
  --line: #26313d;
  --accent: #d8e1e8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

main {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
  padding: 44px 0 64px;
}

.brand {
  display: inline-block;
  margin-bottom: 42px;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
}

header {
  margin-bottom: 34px;
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.lead {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 32px 0;
}

.card,
section,
.privacy {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.card {
  padding: 22px;
}

.value {
  display: block;
  margin-bottom: 7px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-variant-numeric: tabular-nums;
}

.label {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

section {
  margin-top: 36px;
  padding: 24px;
}

h2 {
  margin: 0 0 22px;
  font-size: 1.15rem;
  font-weight: 500;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  text-align: right;
}

td {
  padding: 13px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

th:first-child,
td:first-child {
  padding-left: 0;
  text-align: left;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.graph-cell {
  width: 35%;
}

.bar-track {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--panel-soft);
}

.bar {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

.privacy {
  margin-top: 28px;
  padding: 22px;
}

.privacy h2 {
  margin-bottom: 10px;
}

.privacy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

footer {
  margin-top: 34px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .cards {
    grid-template-columns: 1fr;
  }

  section {
    padding: 18px;
  }

  .graph-cell,
  th:nth-child(4) {
    display: none;
  }
}

.eyebrow {
  margin: 0 0 .7rem;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cards {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.two-columns {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.two-columns section {
  margin-top: 18px;
}

.section-intro,
.small {
  color: var(--muted);
  line-height: 1.55;
}

.small {
  margin-top: 16px;
  font-size: .8rem;
}

.chart {
  display: grid;
  gap: 13px;
}

.day {
  display: grid;
  grid-template-columns: 54px 1fr 210px;
  gap: 14px;
  align-items: center;
}

.day-label {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.day-values {
  color: var(--muted);
  font-size: .82rem;
  text-align: right;
}

progress {
  width: 100%;
  height: 8px;
  border: 0;
}

progress::-webkit-progress-bar {
  background: var(--panel-soft);
  border-radius: 99px;
}

progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 99px;
}

progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 99px;
}

.mini-cards {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mini-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.mini-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1.7rem;
  font-weight: 500;
}

.mini-card span {
  color: var(--muted);
  font-size: .85rem;
}

.empty {
  color: var(--muted);
  text-align: left;
}

@media (max-width: 800px) {
  .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .two-columns {
    grid-template-columns: 1fr;
  }

  .day {
    grid-template-columns: 45px 1fr;
  }

  .day-values {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 500px) {
  .cards,
  .mini-cards {
    grid-template-columns: 1fr;
  }
}

/* PUBLIC_STATS_VISUAL_V4_START */

:root {
  --stats-blue: #248cff;
  --stats-blue-light: #71b8ff;
  --stats-green: #5de59b;
  --stats-green-strong: #37d77d;
}

body {
  background:
    radial-gradient(
      circle at 18% -8%,
      rgba(36, 140, 255, .13),
      transparent 34rem
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(93, 229, 155, .07),
      transparent 30rem
    ),
    var(--bg);
}

main > header {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
}

main > header::after {
  content: "";
  display: block;
  width: 92px;
  height: 3px;
  margin-top: 24px;
  border-radius: 99px;
  background:
    linear-gradient(
      90deg,
      var(--stats-blue),
      var(--stats-green)
    );
}

.eyebrow {
  color: var(--stats-blue-light);
}

.cards .card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 50%
    ),
    var(--panel);
  box-shadow:
    0 12px 34px rgba(0,0,0,.16);
}

.cards .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--card-accent);
}

.cards .card:nth-child(1) {
  --card-accent: #248cff;
}

.cards .card:nth-child(2) {
  --card-accent: #71b8ff;
}

.cards .card:nth-child(3) {
  --card-accent: #5de59b;
}

.cards .card:nth-child(4) {
  --card-accent: #8fc6f8;
}

.cards .card .value {
  color: var(--card-accent);
  font-weight: 550;
}

section {
  background:
    linear-gradient(
      145deg,
      rgba(36,140,255,.025),
      transparent 42%
    ),
    var(--panel);
  box-shadow:
    0 10px 30px rgba(0,0,0,.10);
}

section > h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
}

section > h2::before {
  content: "";
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stats-blue);
  box-shadow:
    0 0 14px rgba(36,140,255,.45);
}

tbody tr {
  transition:
    background-color .15s ease;
}

tbody tr:hover {
  background:
    rgba(36,140,255,.045);
}

progress::-webkit-progress-value {
  background:
    linear-gradient(
      90deg,
      var(--stats-blue),
      var(--stats-green)
    );
}

progress::-moz-progress-bar {
  background:
    linear-gradient(
      90deg,
      var(--stats-blue),
      var(--stats-green)
    );
}

.mini-card {
  background:
    linear-gradient(
      145deg,
      rgba(36,140,255,.08),
      rgba(93,229,155,.025)
    ),
    var(--panel-soft);
}

.mini-card strong {
  color: var(--stats-blue-light);
}

.mini-card:nth-child(2) strong {
  color: var(--stats-green);
}

.privacy {
  border-color:
    rgba(93,229,155,.28);

  background:
    linear-gradient(
      135deg,
      rgba(36,140,255,.075),
      rgba(93,229,155,.055)
    ),
    var(--panel);
}

.privacy h2 {
  color: var(--stats-green);
}

.privacy h2::before {
  content: "●";
  margin-right: .5rem;
  color: var(--stats-green);
  font-size: .7rem;
}

footer {
  border-top:
    1px solid rgba(113,184,255,.14);
  padding-top: 22px;
}

/* PUBLIC_STATS_VISUAL_V4_END */


/* PUBLIC_STATS_SWISS_RED_V1_START */

:root {
  --stats-swiss-red: #ff0000;
}

/*
 * Signature suisse discrète :
 * le rouge complète le bleu et le vert
 * sans devenir la couleur dominante.
 */

main > header::after {
  background:
    linear-gradient(
      90deg,
      var(--stats-swiss-red) 0 24%,
      var(--stats-blue) 24% 64%,
      var(--stats-green) 64% 100%
    );
}

/*
 * Premier indicateur :
 * petite signature rouge suisse.
 */

.cards .card:nth-child(1) {
  --card-accent: var(--stats-swiss-red);
}

/* PUBLIC_STATS_SWISS_RED_V1_END */


/* PUBLIC_COUNTRIES_TWO_COLUMNS_V1_START */

.countries-section tbody {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}

.countries-section tbody tr {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  align-items: center;
}

.countries-section tbody td:last-child {
  text-align: right;
}

@media (max-width: 760px) {
  .countries-section tbody {
    grid-template-columns: 1fr;
  }
}

/* PUBLIC_COUNTRIES_TWO_COLUMNS_V1_END */


/* PUBLIC_STATS_VISITOR_CARDS_V1_START */

.visitor-cards {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );
}

.visitor-cards .card-note {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  opacity: .62;
}

/* PUBLIC_STATS_VISITOR_CARDS_V1_END */