/* Page d'accueil : complète /legal/style.css (couleurs et typographie communes). */
main.site { max-width: 1040px; }
nav.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: .95rem; }
nav.top .brand { font-size: 1.15rem; }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-bottom: 48px; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.hero h1 { font-size: 2.6rem; }
.lead { font-size: 1.15rem; color: var(--muted); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }
.store { display: inline-block; padding: 12px 20px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.store.soon { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
img { max-width: 100%; height: auto; border-radius: 22px; }
.phone { width: 300px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
section { margin: 48px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.grid .card { margin: 0; }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }
.shots { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.shots img { width: 220px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.split { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.split img { width: 200px; border-radius: 40px; }
.cols { columns: 2; column-gap: 32px; }
.cols li { break-inside: avoid; margin-bottom: 6px; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--muted); margin: 8px 0 0; }
footer a { color: var(--muted); }
@media (max-width: 720px) {
  .hero, .split { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .phone { width: 240px; justify-self: center; }
  .split img { justify-self: center; }
  .cols { columns: 1; }
  .shots img { width: 46%; }
}