/* docs/DESIGN.md #5 — mise en page des pages publiques réelles (hors styleguide). */
@layer pages {
  .footer {
    padding-block: var(--space-7);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-7);
  }

  @media (width < 56.25rem) {
    .footer__grid {
      grid-template-columns: 1fr;
    }
  }

  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer__nav a {
    color: var(--cream);
    text-decoration: none;
  }

  .hero {
    padding-block: var(--space-8);
  }

  .hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .hero__photo-wrap {
    position: relative;
  }

  .section-split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
    align-items: center;
  }

  @media (width < 56.25rem) {
    .section-split {
      grid-template-columns: 1fr;
    }
  }

  .facts-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .facts-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .facts-list li::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 3px;
    background: var(--terracotta-deep);
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-6);
  }

  .team-member__photo {
    aspect-ratio: 1 / 1;
    border-radius: 0;
  }

  .team-member__name {
    font-weight: 800;
    margin-top: var(--space-3);
  }

  .team-member__role {
    color: var(--ink-muted);
  }

  .service-detail {
    padding-block: var(--space-6);
    border-bottom: 2px solid var(--cream-deep);
  }

  .service-detail:last-child {
    border-bottom: none;
  }

  .service-detail__offers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-block: var(--space-4);
  }

  .service-detail__offer {
    font-weight: 800;
  }

  .form-page {
    padding-block: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }

  .form-row > * {
    flex: 1 1 14rem;
  }

  .error-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .error-summary a {
    color: inherit;
  }

  .status-page {
    padding-block: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  @media print {
    .site-header, .site-nav, .mobile-cta, .footer {
      display: none;
    }

    body {
      color: var(--forest);
    }
  }

  .legal-page {
    padding-block: var(--space-8);
    max-width: var(--measure);
  }
}