/* ═══════════════════════════════════════
   ATELIER D'INFORMATIQUE — CSS Variables
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Colors */
  --bg:         #0e0e0e;
  --bg-2:       #141414;
  --bg-3:       #1a1a1a;
  --surface:    #1e1e1e;
  --surface-2:  #242424;
  --border:     rgba(255,255,255,0.07);
  --border-2:   rgba(255,255,255,0.12);

  --orange:     #f05a1a;
  --orange-dim: rgba(240,90,26,0.15);
  --orange-glow:rgba(240,90,26,0.35);
  --white:      #ffffff;
  --white-80:   rgba(255,255,255,0.8);
  --white-50:   rgba(255,255,255,0.5);
  --white-20:   rgba(255,255,255,0.2);
  --white-08:   rgba(255,255,255,0.08);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing */
  --nav-h: 72px;
  --section-py: clamp(80px, 10vw, 140px);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 60px);

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:999px;

  /* Shadows */
  --shadow-card: 0 4px 30px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px rgba(240,90,26,0.25);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 4px; }

/* Selection */
::selection { background: var(--orange); color: white; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Utility */
.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;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-display); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }