/* =========================================================
   🏆 FORMATION SPORT 94 — BASE.CSS
   Design System + Reset + Typographie + Accessibilité
   Version Production 2026
   ========================================================= */

/* =========================================================
   ORDRE GLOBAL DES LAYERS
   ---------------------------------------------------------
   Important :
   - base       = fondations du site
   - layout     = structure, header, footer, grilles
   - components = boutons, cartes, FAQ, formulaires
   - utilities  = petites classes utilitaires
   ========================================================= */

@layer base, layout, components, utilities;

/* =========================================================
   @layer base
   ========================================================= */

@layer base {

  /* =======================================================
     DESIGN TOKENS — COULEURS, ESPACEMENTS, RAYONS, OMBRES
     ======================================================= */

  :root {
    /* -----------------------------------------------------
       Couleurs primitives — identité visuelle
       ----------------------------------------------------- */

    --primary: #0A1F44;
    --primary-dark: #06152F;
    --primary-soft: #F4F8FD;

    --accent: #C19A5B;
    --accent-dark: #8F6A34;
    --accent-light: #E6CEA0;
    --accent-soft: rgba(193, 154, 91, .10);

    --accent-gradient: linear-gradient(
      135deg,
      #8F6A34 0%,
      #C19A5B 35%,
      #E6CEA0 60%,
      #B58542 80%,
      #7B5827 100%
    );

    /* -----------------------------------------------------
       Fonds et surfaces
       ----------------------------------------------------- */

    --bg: #FFFFFF;
    --bg-alt: #F8FAFC;
    --surface: #FFFFFF;
    --surface-alt: #FCFDFE;

    /* -----------------------------------------------------
       Textes
       ----------------------------------------------------- */

    --text: #0F172A;
    --text-soft: #475467;
    --muted: #667085;

    /* -----------------------------------------------------
       Bordures
       ----------------------------------------------------- */

    --border: #E4E7EC;
    --border-strong: #D0D5DD;
    --border-accent: rgba(193, 154, 91, .30);

    /* -----------------------------------------------------
       États / alertes
       ----------------------------------------------------- */

    --red-fr: #D92D20;
    --success: #027A48;
    --warning: #B54708;

    /* -----------------------------------------------------
       Ombres
       ----------------------------------------------------- */

    --shadow-xs: 0 2px 8px rgba(16, 24, 40, .04);
    --shadow-sm: 0 4px 14px rgba(16, 24, 40, .05);
    --shadow: 0 12px 32px rgba(16, 24, 40, .08);
    --shadow-premium: 0 24px 64px rgba(16, 24, 40, .12);

    /* -----------------------------------------------------
       Rayons
       ----------------------------------------------------- */

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* -----------------------------------------------------
       Largeurs de conteneurs
       ----------------------------------------------------- */

    --container: 1240px;
    --container-sm: 980px;
    --container-xs: 760px;

    /* -----------------------------------------------------
       Système d’espacement
       ----------------------------------------------------- */

    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* -----------------------------------------------------
       Transitions
       ----------------------------------------------------- */

    --transition-fast: .2s ease;
    --transition: .35s cubic-bezier(.4, 0, .2, 1);

    /* -----------------------------------------------------
       Focus accessibilité
       ----------------------------------------------------- */

    --focus: var(--accent);

    /* -----------------------------------------------------
       Tokens sémantiques — utilisation recommandée
       ----------------------------------------------------- */

    --color-bg-main: var(--bg);
    --color-bg-alt: var(--bg-alt);

    --color-surface-main: var(--surface);
    --color-surface-alt: var(--surface-alt);

    --color-text-main: var(--text);
    --color-text-soft: var(--text-soft);
    --color-text-muted: var(--muted);
    --color-heading: var(--text);

    --color-border-default: var(--border);
    --color-border-strong: var(--border-strong);
    --color-border-accent: var(--border-accent);

    --color-link: var(--accent);
    --color-link-hover: var(--accent-dark);

    --color-btn-primary: var(--accent);
    --color-card-border: var(--border-accent);

    --color-focus-ring: var(--focus);
    --color-danger: var(--red-fr);
  }

  /* =======================================================
     RESET MODERNE
     ======================================================= */

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

  html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  overflow-x: hidden;
}

  body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(1rem, .22vw + .96rem, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-main);
  background: var(--color-bg-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  img {
    border-style: none;
  }

  iframe {
    max-width: 100%;
    border: 0;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  button,
  input,
  select,
  textarea {
    margin: 0;
  }

  textarea {
    resize: vertical;
  }

  table {
    border-collapse: collapse;
  }

  ul,
  ol {
    padding-left: 1.25rem;
  }

  strong,
  b {
    font-weight: 800;
  }

  ::selection {
    background: var(--accent);
    color: #FFFFFF;
  }

  /* =======================================================
     TYPOGRAPHIE GLOBALE
     ======================================================= */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 1rem;
    color: var(--color-heading);
    font-weight: 900;
    line-height: 1.15;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2.2rem, 9vw, 4.3rem);
    letter-spacing: -.035em;
  }

  h2 {
    font-size: clamp(1.7rem, 6vw, 2.8rem);
    letter-spacing: -.025em;
  }

  h3 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
  }

  h4 {
    font-size: 1.1rem;
  }

  p {
    margin: 0 0 1rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  .lead {
    font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem);
    line-height: 1.7;
    color: var(--color-text-soft);
  }

  small {
    font-size: .875rem;
  }

  /* =======================================================
     LIENS
     ======================================================= */

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: from-font;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-link-hover);
  }

  a:active {
    color: var(--accent-dark);
  }

  /* =======================================================
     ACCESSIBILITÉ — FOCUS GLOBAL
     ======================================================= */

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
  }

  :where(input, select, textarea):focus-visible {
    border-color: var(--accent);
  }

  /* =======================================================
     FORMULAIRES — BASE MINIMALE
     Les styles avancés iront dans components.css
     ======================================================= */

  input,
  select,
  textarea {
    max-width: 100%;
    background: #FFFFFF;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  label {
    font-weight: 700;
    color: var(--text);
  }

  /* =======================================================
     MÉDIAS — ACCESSIBILITÉ MOUVEMENT
     ======================================================= */

 @media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

  /* =======================================================
     RESPONSIVE TYPOGRAPHIQUE DE BASE
     ======================================================= */

  @media (max-width: 980px) {
    h1 {
      font-size: clamp(1.9rem, 6vw, 3.2rem);
    }

    h2 {
      font-size: clamp(1.4rem, 5vw, 2.3rem);
    }

    .lead {
      font-size: 1.05rem;
    }
  }

  @media (max-width: 640px) {
    body {
      font-size: .98rem;
    }
  }

  /* =======================================================
     IMPRESSION — BASE
     Les éléments à masquer iront aussi dans les fichiers dédiés
     ======================================================= */

  @media print {
    html {
      scroll-behavior: auto;
    }

    body {
      color: #000000;
      background: #FFFFFF;
    }

    a {
      color: #000000;
      text-decoration: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #000000;
    }
  }
}