.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-8); }
.section--first { padding-top: var(--s-7); }
.section--alt { background: var(--c-surface-alt); }
.section--dark { background: var(--c-email); color: var(--c-craie); }
.section--dark h2, .section--dark h3 { color: var(--c-craie); }

.section__head { max-width: 46rem; margin-bottom: var(--s-6); }
.section__lede { color: var(--c-ink-muted); font-size: var(--t-lg); }
.section--dark .section__lede { color: color-mix(in srgb, var(--c-craie) 78%, transparent); }

.eyebrow {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-bronze);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--c-laiton); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; align-items: center; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (min-width: 860px) {
  .grid--2 { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-7); }
}
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* --- En-tête --- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s-3);
}
.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--c-email);
  display: grid; place-items: center;
}
.brand__mark img { width: 20px; height: 20px; }
.brand__name {
  font-family: var(--f-display); font-weight: var(--w-black);
  font-size: var(--t-lg); color: var(--c-ink); letter-spacing: var(--ls-display);
}
.brand__module { font-weight: var(--w-semibold); color: var(--c-ink-muted); }

.site-nav { display: none; gap: var(--s-5); align-items: center; }
.site-nav a {
  text-decoration: none; font-weight: var(--w-semibold); font-size: var(--t-sm);
  color: var(--c-ink-muted);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-ink); }

.site-header__aside { display: none; align-items: center; gap: var(--s-5); }

.nav-toggle {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-sm); border: 1px solid var(--c-line);
}
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--c-ink);
}
.nav-toggle__icon::before { transform: translateY(-6px); }
.nav-toggle__icon::after { transform: translateY(4px); }
.nav-toggle__icon { position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after { position: absolute; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-header__aside { display: flex; }
  .site-nav { display: flex; }
}

.site-header__aside[data-open="true"] {
  display: flex; position: absolute; inset-inline: 0; top: 100%;
  flex-direction: column; align-items: stretch; gap: var(--s-4);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
  padding: var(--s-5);
}
.site-header__aside[data-open="true"] .site-nav {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
}

/* --- Pied de page --- */
.site-footer { background: var(--c-email); color: var(--c-craie); padding-block: var(--s-7) var(--s-5); }
.site-footer .brand__name { color: var(--c-craie); }
.site-footer .brand__mark { background: var(--c-craie); }
.site-footer .brand__mark img { filter: invert(1); }
.site-footer__grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr; padding-bottom: var(--s-6);
  border-bottom: 1px solid color-mix(in srgb, var(--c-craie) 18%, transparent);
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr; } }
.site-footer__tagline { margin-top: var(--s-3); color: color-mix(in srgb, var(--c-craie) 70%, transparent); max-width: 38ch; }
.site-footer__nav-title {
  font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--c-laiton); margin-bottom: var(--s-3);
}
.site-footer__nav { display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer__nav a { text-decoration: none; color: color-mix(in srgb, var(--c-craie) 85%, transparent); }
.site-footer__nav a:hover { color: var(--c-laiton); }
.site-footer__inner { padding-top: var(--s-5); }
.site-footer__inner--split {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between;
  font-size: var(--t-sm); color: color-mix(in srgb, var(--c-craie) 60%, transparent);
}