/* docs/DESIGN.md #8.8 — messages d'état. */
@layer components {
  .notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .notice--info {
    background: var(--cream-deep);
    border-left: 6px solid var(--forest);
    color: var(--forest);
  }

  .notice--success {
    background: var(--forest);
    color: var(--cream);
  }

  .notice--error {
    background: var(--terracotta-deep);
    color: var(--cream);
  }

  .notice--full {
    background: var(--wood);
    color: var(--cream);
  }

  .notice__title {
    font-weight: 800;
    text-transform: uppercase;
  }
}