/* ==================================================
   BASE — Variables + Reset + Global
================================================== */

/* ==================================================
   0) VARIABLES
================================================== */
:root {
  /* thème */
  --clr-accent: #8a6bff;
  --clr-accent-text: #b9afff;
  --clr-bg-start: #0c0b0d;
  --clr-bg-mid: #15131b;
  --clr-bg-end: #59497b;
  --ff-heading: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* layout */
  --container: 75rem; /* largeur max du contenu */
  --gutter: 1.5rem; /* marge latérale */
  --overlap: 7rem; /* chevauchement des cartes sur le hero */

  /* social bar */
  --social-size: 40px; /* diamètre des pastilles */

  /* about: chemin du SVG de fond */
  --about-bg: url("/images/bg/about-bg.svg");
}

/* ==================================================
   1) RESET + FOND GLOBAL
================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--ff-heading);
  color: #fff;
  background: linear-gradient(
      180deg,
      var(--clr-bg-start) 0%,
      var(--clr-bg-mid) 40%,
      var(--clr-bg-end) 100%
    )
    fixed;
  overflow-x: hidden;
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Baseline Lighthouse : h1 dans un élément de sectionnement */
:where(article, aside, nav, section) h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1.1;
}

/* ==================================================
   Accessibilité motion (global)
================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}