@layer layout {
  /* ---- Conteneurs ------------------------------------------------------ */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-gutter);
  }
  .container--wide { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }

  /* ---- Sections --------------------------------------------------------
     Un contexte sombre ne duplique aucun style : il REASSIGNE les tokens
     semantiques, et tous les composants heritent. */
  .section { padding-block: var(--sp-section); }
  .section--tight { padding-block: var(--sp-section-sm); }
  .site-footer {
    --c-bg: var(--c-ink-900);
    --c-bg-alt: var(--c-ink-800);
    --c-surface: var(--c-ink-800);
    --c-surface-2: var(--c-ink-700);
    --c-text: var(--c-paper);
    --c-text-muted: var(--c-text-invert-muted);
    --c-border: #333;
    --c-border-strong: #4a4a4a;
    --c-link: var(--c-gold-500);         /* 9,7:1 sur le noir */
    --c-link-hover: var(--c-gold-300);
    background: var(--c-bg);
    color: var(--c-text);
  }

  .section__head { margin-bottom: var(--sp-10); }
  .section__title { font-size: var(--fs-2xl); }
  .section__lead { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--c-text-muted); max-width: 60ch; }

  /* ---- Grilles ---------------------------------------------------------- */
  .grid { display: grid; gap: var(--sp-gap); }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

  @media (min-width: 480px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 768px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1280px) {
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---- Titres decores : le chevron du logo comme motif recurrent -------- */
  .title-slash::after {
    content: '';
    display: block;
    width: 72px;
    height: var(--bw-thick);
    margin-top: var(--sp-3);
    background: var(--g-brand);
    border-radius: var(--r-pill);
    transform: skewX(var(--chevron-skew));
  }

  .chevrons { display: flex; gap: 6px; justify-content: center; }
  .chevron {
    width: 18px;
    height: 32px;
    transform: skewX(var(--chevron-skew));
    background: var(--chevron-c, var(--c-red-500));
    border-radius: 2px;
  }
  .chevrons .chevron:nth-child(1) { --chevron-c: var(--c-gold-500); }
  .chevrons .chevron:nth-child(2) { --chevron-c: var(--c-red-500); }
  .chevrons .chevron:nth-child(3) { --chevron-c: var(--c-ink-900); }
  .site-footer .chevrons .chevron:nth-child(3) { --chevron-c: var(--c-paper); }
  .chevrons--divider { padding-block: var(--sp-8); }

  main { display: block; }
}

@layer layout {
/* Le rouge "encre" des eyebrows ne passe pas sur fond noir : l'or prend le relais. */
.theme-dark .section__eyebrow { color: var(--c-accent); }
}