/* Maison Kôssi (marque fictive) — styles propres à : histoire. Chargée après styles.css, qui déclare l’ordre des couches. */
@layer pages {
  /* ---------- Notre maison ---------- */
  .timeline-h { display: grid; gap: var(--s-5); list-style: none; padding: 0; } @media (min-width: 48em) { .timeline-h { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64em) { .timeline-h { grid-template-columns: repeat(6, 1fr); gap: var(--s-4); } }
  .timeline-h li { border-block-start: 3px solid var(--color-or); padding-block-start: var(--s-3); display: grid; gap: var(--s-1); align-content: start; } .timeline-h b { font-family: var(--font-display); font-weight: 600; color: var(--color-indigo); } .timeline-h span { font-size: var(--fs-small); color: var(--color-doux); }
  .process { display: grid; gap: var(--s-4); counter-reset: p; list-style: none; padding: 0; } @media (min-width: 48em) { .process { grid-template-columns: repeat(5, 1fr); } }
  .process li { counter-increment: p; display: grid; gap: var(--s-2); align-content: start; } .process li::before { content: counter(p); display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--color-indigo); color: var(--color-or); font-family: var(--font-display); font-weight: 600; } .process strong { font-weight: 700; } .process span { font-size: var(--fs-small); color: var(--color-doux); }
  .price-bar { display: flex; inline-size: 100%; block-size: 3rem; border-radius: 999px; overflow: hidden; } .price-bar i { display: block; inline-size: var(--w); background: var(--c); } .price-bar svg { inline-size: 100%; block-size: 100%; }
  .legend { display: grid; gap: var(--s-1); list-style: none; padding: 0; margin-block: var(--s-4); } .legend li { display: flex; align-items: center; gap: var(--s-3); } .legend i { inline-size: 0.9rem; block-size: 0.9rem; border-radius: 3px; background: var(--c); flex: none; }
  .team { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; } @media (min-width: 48em) { .team { grid-template-columns: repeat(4, 1fr); } }
  .team li { padding: var(--s-4); border-radius: var(--radius); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); display: grid; gap: 0.15rem; } .team b { font-weight: 700; } .team span { font-size: var(--fs-small); color: var(--color-doux); }
  .commit { display: grid; gap: var(--s-3); list-style: none; padding: 0; } @media (min-width: 48em) { .commit { grid-template-columns: repeat(3, 1fr); } }
  .commit li { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--color-papier); border-inline-start: 4px solid var(--color-or); }
}