body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Le layout global est géré par banniere.css */
.dixkm-main {
  width: 100%;
}
.container {
  max-width: 1200px;
  margin: 0 0 2rem 0;
  padding: 0 0 2rem;
}
h1 { color: #0066cc; margin-top: 1.5rem; }
.back-link { display: inline-block; margin-bottom: 1rem; color: #0066cc; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Formulaire */
.form-section {
  background: #fafafa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 2rem;
}
.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
label span {
  font-weight: 500;
  font-size: 0.9rem;
}
input[type="number"], select {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 5ch;
}
select {
  width: auto;
  min-width: 10ch;
}
button {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
button:hover {
  background: #0052a3;
}

/* Résultat */
.result-section {
  display: none;
  background: #e8f4f8;
  padding: 2rem;
  border-radius: 8px;
  border: 2px solid #0066cc;
  margin-bottom: 2rem;
}
.result-section.show {
  display: block;
}
.result-section h2 {
  margin-top: 0;
  color: #0066cc;
}
.result-text {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.stat {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stat-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #0066cc;
}
.stat-sub {
  font-size: 0.9rem;
  color: #777;
  margin-top: 0.25rem;
}

/* Podium */
.podium-wrapper { margin-top:1.5rem; }
.podium-block { margin:2rem 0; background:#ffffff; border:1px solid #e0e0e0; border-radius:8px; padding:1rem 1.25rem; }
.podium-block h3 { margin:0 0 1rem; font-size:1.3rem; color:#0066cc; }
.podium-cols { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.podium-cols h4 { margin:0 0 0.5rem; font-size:1rem; color:#004b8f; }
.podium-cols ol { margin:0; padding-left:1.2rem; }
.podium-cols li { margin:0.4rem 0; font-size:0.95rem; }
.podium-note { margin-top:0.75rem; font-size:0.75rem; color:#666; }
@media (max-width:600px){ .podium-block { padding:0.85rem; } }

/* Info section */
.info-section {
  background: #fafafa;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-top: 2rem;
}
.info-section h2 {
  color: #0066cc;
  margin-top: 0;
}
.info-section h3 {
  color: #333;
  margin-top: 1.5rem;
}
.info-section p {
  line-height: 1.8;
  color: #444;
}
.info-section ul {
  line-height: 1.8;
  color: #444;
}

/* Footer styles are now in index.css */

/* Stats banner */
.stats-banner {
  background: #e8f4f8;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1rem;
  color: #333;
}
/* Chart section */
.chart-section {
  margin: 2rem 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
}
.chart-section h3 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: #0066cc;
}
.chart-container {
  position: relative;
  height: 800px;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .chart-container {
    height: 600px;
  }
}