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 */
.marathon-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;
}
button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 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-title {
  font-size: 1.5rem;
  color: #0066cc;
  margin-bottom: 1rem;
  font-weight: bold;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.result-card {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
}
.result-card-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.result-card-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #0066cc;
}
.result-card-sub {
  font-size: 0.9rem;
  color: #888;
  margin-top: 0.25rem;
}

/* 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;
}

/* 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; } }

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

/* Masquer spinners des input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* SEO Marathon */
.seo-marathon { margin-top:2.5rem; background:#ffffff; border:1px solid #e0e0e0; border-radius:8px; padding:1.5rem; line-height:1.7; }
.seo-marathon h2 { margin-top:0 !important; font-size:1.6rem !important; color:#0066cc; }
.seo-marathon h3 { margin-top:2rem !important; font-size:1.15rem !important; color:#004b8f; }
.seo-marathon h4 { font-size:1.1rem !important; color:#1e40af; margin-top:0; }
.seo-marathon p { margin:0 0 1rem; color:#333; font-size:1rem; }
.seo-marathon ul { margin:0 0 1.2rem 1.2rem; }
.seo-marathon li { margin-bottom:0.5rem; }
.seo-marathon .key-metrics { display:grid; gap:0.75rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin:1rem 0 1.5rem; }
.seo-marathon .metric { background:#f8fafc; border:1px solid #dbe3eb; border-radius:6px; padding:0.6rem 0.75rem; font-size:0.85rem; }
.seo-marathon .metric strong { display:block; font-size:0.9rem; color:#0052a3; }
.seo-marathon .info-box h4 { margin-top:0; color:#1e40af; font-size:1.1rem !important; }
.seo-marathon .info-box p { margin-bottom:0.75rem; font-size:1rem; }
.seo-marathon .info-box ul { margin:0.5rem 0; padding-left:1.5rem; }
.faq-block details { margin-bottom:0.75rem; border:1px solid #d8d8d8; border-radius:6px; padding:0.6rem 0.75rem; background:#fafafa; }
.faq-block summary { cursor:pointer; font-weight:600; }
.anchor-nav { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 0 1.25rem; }
.anchor-nav a { background:#eef6ff; color:#0052a3; padding:0.35rem 0.6rem; border-radius:4px; font-size:0.75rem; text-decoration:none; }
.anchor-nav a:hover { background:#d9ecff; }

/* Graphique de distribution */
.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;
  }
}