/* ─────────────────────────────────────────
   LAYOUT — sections, containers, grid
───────────────────────────────────────── */

section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  overflow: hidden;
}

/* ─── BIG GHOST SECTION NUMBERS ─── */
section::before {
  content: attr(data-bg-num);
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(120px, 20vw, 280px);
  color: rgba(255, 255, 255, 0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.histoire::before   { content: "02"; top: -20px; right: var(--gutter); }
.experiences::before{ content: "03"; top: -20px; left: var(--gutter); }
.competences::before{ content: "04"; top: -20px; right: var(--gutter); }
.formation::before  { content: "05"; top: -20px; left: var(--gutter); }
.portfolio::before  { content: "06"; top: -20px; right: var(--gutter); }
.canada::before     { content: "07"; top: -20px; left: var(--gutter); }
.contact::before    { content: "08"; top: -20px; right: var(--gutter); }

/* ─── MAX-WIDTH WRAPPERS ─── */
.histoire__wrap,
.experiences__wrap,
.competences__wrap,
.formation__wrap,
.canada__wrap,
.contact__wrap {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ─── SECTION DIVIDERS ─── */
.histoire,
.experiences,
.competences,
.formation,
.canada,
.contact {
  border-top: 1px solid var(--border);
  font-size: 15px;
}