:root {
  --bleu-fonce: #1b4b8f;
  --bleu-moyen: #4a90c4;
  --rouge: #e8502f;
  --turquoise: #00a08a;
  --magenta: #c4479b;
  --encre: #1c1c1c;
  --papier: #ffffff;
  --carte: #f7f7f5;
  --trait: #e3e3e0;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  max-width: 46rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--papier);
  line-height: 1.6;
}

header { border-bottom: 3px solid var(--rouge); padding-bottom: 1rem; margin-bottom: 2.5rem; }

.marque {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  color: var(--bleu-fonce);
  margin: 0;
  letter-spacing: -0.02em;
}

.baseline { color: var(--turquoise); font-weight: 600; margin: 0.25rem 0 0; }

h1 { font-size: clamp(1.5rem, 5vw, 2rem); color: var(--bleu-fonce); margin: 0 0 0.75rem; }

.intro { margin-bottom: 3rem; }
.intro p { font-size: 1.05rem; margin: 0; }

h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rouge);
  margin: 0 0 1rem;
}

.operation {
  background: var(--carte);
  border-left: 5px solid var(--bleu-moyen);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.operation.venir { border-left-color: var(--trait); opacity: 0.75; }

.etiquette {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--magenta);
  margin: 0 0 0.25rem;
}

.operation.venir .etiquette { color: #8a8a86; }

.operation h3 { font-size: 1.35rem; color: var(--bleu-fonce); margin: 0 0 0.5rem; }
.operation p { margin: 0 0 0.5rem; }
.statut { font-weight: 600; color: var(--turquoise); margin: 0.75rem 0 0; }

footer {
  border-top: 1px solid var(--trait);
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: #5a5a5a;
}
footer p { margin: 0.2rem 0; }
.version { color: #8a8a8a; }

@media (prefers-color-scheme: dark) {
  :root { --encre: #ececec; --papier: #141414; --carte: #1e1e1e; --trait: #333; }
  .marque, h1, .operation h3 { color: var(--bleu-moyen); }
  footer { color: #a0a0a0; }
}