/* =====================================================
   Proximitoria - Style Principal
   ===================================================== */

/* === VARIABLES CSS === */
:root {
  /* ========================================
     CHARTE CHROMATIQUE PREMIUM
     Harmonie split-complémentaire autour de l'orange
     ======================================== */

  /* Couleurs principales - Orange Raffiné (Artisans) */
  --primary-orange: #D4842B;           /* Orange sophistiqué, tons ambrés */
  --primary-orange-dark: #B86F1F;      /* Hover/Active - ambre profond */
  --primary-orange-light: #F5DFC4;     /* Backgrounds subtils - crème */
  --primary-orange-muted: #E8A854;     /* Accent secondaire - or doux */

  /* Couleurs principales - Vert Sobre (Commerciaux) */
  --primary-green: #2A7D6E;            /* Vert raffiné, moins saturé */
  --primary-green-dark: #1E5F53;       /* Hover/Active */
  --primary-green-light: #D4EDE8;      /* Backgrounds subtils */

  /* Couleurs d'accent - Harmonie Split-Complémentaire */
  --accent-navy: #1A2B4A;              /* Navy profond */
  --accent-teal: #2A5B5E;              /* Teal sobre */
  --accent-cream: #FAF6F1;             /* Blanc chaud */

  /* Palette de Neutres - Tons Chauds */
  --neutral-950: #0F1419;              /* Quasi-noir chaud */
  --neutral-900: #1A1F26;              /* Backgrounds sombres */
  --neutral-800: #2D333B;              /* Texte principal foncé */
  --neutral-700: #424A55;              /* Texte secondaire */
  --neutral-600: #5C6370;              /* Texte atténué */
  --neutral-500: #7A8290;              /* Placeholders */
  --neutral-400: #9CA3AF;              /* Bordures */
  --neutral-300: #C8CCD3;              /* Bordures légères */
  --neutral-200: #E2E5E9;              /* Séparateurs subtils */
  --neutral-100: #F0F2F4;              /* Backgrounds légers */
  --neutral-50: #F8F9FA;               /* Backgrounds subtils */
  --white: #FFFFFF;

  /* Aliases pour compatibilité */
  --dark-blue: var(--neutral-950);
  --dark-blue-light: var(--neutral-900);
  --gray-900: var(--neutral-950);
  --gray-800: var(--neutral-800);
  --gray-700: var(--neutral-700);
  --gray-600: var(--neutral-600);
  --gray-500: var(--neutral-500);
  --gray-400: var(--neutral-400);
  --gray-300: var(--neutral-300);
  --gray-200: var(--neutral-200);
  --gray-100: var(--neutral-100);
  --gray-50: var(--neutral-50);

  /* Couleurs sémantiques - Raffinées */
  --success: #2D8A5F;                  /* Vert forêt sobre */
  --success-light: #E8F5EE;
  --warning: #C67D2E;                  /* Ambre chaud */
  --warning-light: #FDF4E8;
  --error: #C74444;                    /* Rouge atténué */
  --error-light: #FDECEC;
  --info: #3366A6;                     /* Bleu profond */
  --info-light: #E8F0FA;

  /* ========================================
     TYPOGRAPHIE PREMIUM
     ======================================== */

  /* Familles de polices */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tailles de texte */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Poids de police */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Letter-spacing Premium */
  --tracking-tight: -0.02em;           /* Titres */
  --tracking-normal: 0;                /* Corps */
  --tracking-wide: 0.02em;             /* Sous-titres */
  --tracking-wider: 0.08em;            /* Labels, eyebrows */

  /* Line-height */
  --leading-tight: 1.15;               /* Grands titres */
  --leading-snug: 1.25;                /* Sous-titres */
  --leading-normal: 1.6;               /* Corps */
  --leading-relaxed: 1.75;             /* Texte long */

  /* ========================================
     ESPACEMENTS
     ======================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ========================================
     SHADOWS - Système Premium
     ======================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.14);

  /* Shadows colorées */
  --shadow-orange: 0 8px 24px rgba(212, 132, 43, 0.2);
  --shadow-orange-lg: 0 16px 48px rgba(212, 132, 43, 0.25);
  --shadow-green: 0 8px 24px rgba(42, 125, 110, 0.2);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-orange);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-orange-dark);
}

ul, ol {
  list-style: none;
}

/* === TYPOGRAPHIE PREMIUM === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-950);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-6);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-3);
}

p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

strong {
  font-weight: var(--font-semibold);
}

/* === CLASSES UTILITAIRES === */

/* Highlights de texte */
.highlight {
  color: var(--primary-orange);
}

.highlight-green {
  color: var(--primary-green);
}

.highlight-gradient {
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Eyebrow - Style Premium */
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-orange);
  margin-bottom: var(--space-4);
}

.eyebrow-accent {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--primary-orange);
  margin-right: var(--space-3);
  vertical-align: middle;
}

/* Intro/Subtitle */
.intro {
  font-size: var(--text-xl);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

/* Alignement */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Tailles de texte */
.text-sm {
  font-size: var(--text-sm);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

/* Couleurs de texte */
.text-gray {
  color: var(--neutral-500);
}

.text-muted {
  color: var(--neutral-600);
}

.text-dark {
  color: var(--neutral-950);
}

.text-white {
  color: var(--white);
}

/* Margins */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

/* Visibilité */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

/* Animations Premium */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Selection */
::selection {
  background-color: var(--primary-orange-light);
  color: var(--neutral-950);
}