/* ============================================================
   VivAccess — Tokens (charte graphique officielle)
   Variables de marque, polices, reset.
   Ces couleurs sont FIXES (charte). Les "ambiances" ne font
   que recomposer leur mise en scène (voir ambiance-*.css).
   ============================================================ */

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish-Light.woff2') format('woff2'),
       url('../fonts/Mulish-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish-Regular.woff2') format('woff2'),
       url('../fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish-Bold.woff2') format('woff2'),
       url('../fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Couleurs de marque (charte) ---- */
  --violet:        #6000D9;   /* Violet principal */
  --violet-2:      #9D47F6;   /* Violet secondaire */
  --violet-deep:   #3d0088;   /* Violet profond (ancrage) */
  --bleu:          #005EFF;   /* Bleu principal */
  --bleu-2:        #00B5DF;   /* Bleu secondaire */
  --noir:          #202020;
  --blanc:         #FFFFFF;

  /* ---- Neutres ---- */
  --paper:         #FAFAFB;
  --surface:       #FFFFFF;
  --ink-900:       #202020;
  --ink-700:       #3a3540;
  --ink-500:       #6b6577;
  --ink-300:       #cdc8d4;
  --ink-200:       #e6e2ec;
  --ink-100:       #f3f0f7;
  --border:        #e6e2ec;

  /* ---- Hooks d'ambiance (réassignés dans ambiance-*.css) ---- */
  --hero-bg:        linear-gradient(135deg, #6000D9 0%, #7a1ce0 38%, #9D47F6 72%, #00B5DF 100%);
  --hero-fg:        #ffffff;
  --hero-muted:     rgba(255,255,255,0.92);
  --hero-eyebrow:   rgba(255,255,255,0.82);
  --impact-bg:      var(--violet);
  --cta-bg:         linear-gradient(135deg, #6000D9, #9D47F6 70%, #00B5DF);
  --section-alt:    var(--ink-100);
  --photo-tint:     0;          /* opacité d'un voile violet sur les photos (0 = naturel) */
  --frame-radius:   24px;

  /* ---- Type ---- */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Rayons / ombres / motion ---- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(32,32,32,0.05);
  --shadow-md: 0 6px 22px rgba(96,0,217,0.10);
  --shadow-lg: 0 18px 50px rgba(96,0,217,0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  240ms;

  /* ---- Layout ---- */
  --width-page:      1180px;
  --width-page-wide: 1300px;
  --width-reading:   65ch;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}