/* ============================================================
   base.css — jetons de design, reset, typographie de base.
   Ordre de chargement : fonts → base → layout → components.
   ============================================================ */

:root {
  /* ---- couleurs ---- */
  --ink:        #101216;   /* fond principal */
  --ink-2:      #15181D;   /* surfaces (cartes, formulaire) */
  --ink-3:      #1B1F26;   /* surface survolée */
  --ink-4:      #0C0E11;   /* pied de page */
  --line:       rgb(255 255 255 / 9%);
  --line-2:     rgb(255 255 255 / 16%);
  --orange:     #FF6A00;
  --amber:      #FFA51F;
  --text:       #F0F0F2;   /* 17.6:1 sur --ink */
  --text-2:     #B9BDC5;   /* 9.4:1  sur --ink */
  --text-3:     #AFB3BB;   /* 8.4:1  sur --ink */
  --muted:      #8C9098;   /* 5.9:1  sur --ink — plancher AA, ne pas assombrir */

  /* ---- typographie ---- */
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- mesures ---- */
  --wrap:       1180px;
  --pad:        clamp(20px, 5vw, 40px);
  --header-h:   68px;
  --radius:     6px;
  --radius-sm:  4px;

  /* ---- animation ---- */
  --ease:       cubic-bezier(.2, .7, .3, 1);

  color-scheme: dark;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* garde-fou : aucun élément ne doit déborder */
}

img,
svg,
canvas { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button { font: inherit; }

/* ---------- typographie ---------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Dégradé orange appliqué au texte, avec repli si background-clip:text
   n'est pas supporté (le texte reste alors lisible en orange plein). */
.grad {
  color: var(--orange);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad {
    background: linear-gradient(96deg, var(--orange), var(--amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- accessibilité ---------- */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : visible uniquement au clavier */
.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 18px;
  background: var(--orange);
  color: #14161A;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}

.skip-link:focus-visible { transform: none; }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}