/* ═══ DESIGN TOKENS — partagés par toutes les pages OptimizIA.xyz ═══
   Union des variables utilisées dans le projet. Chaque page peut redéfinir
   localement (cascade respectée), mais aucune valeur ne diverge actuellement. */
:root {
    /* Orange — énergie, action */
    --orange: #F97316;
    --orange-hover: #EA580C;
    --orange-dark: #C2410C;
    --orange-light: rgba(249, 115, 22, 0.08);
    --orange-glow: rgba(249, 115, 22, 0.22);
    --orange-glow-strong: rgba(249, 115, 22, 0.35);

    /* Bleu — confiance, profondeur */
    --blue: #3B82F6;
    --blue-hover: #2563EB;
    --blue-dark: #1D4ED8;
    --blue-deep: #1E3A5F;
    --blue-light: rgba(59, 130, 246, 0.07);
    --blue-glow: rgba(59, 130, 246, 0.18);

    /* Fonds */
    --bg: #FAFBFE;
    --bg-alt: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-dark: #0F172A;

    /* Texte */
    --text: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-inverse: #F8FAFC;

    /* Bordures & ombres */
    --border: rgba(15, 23, 42, 0.08);
    --border-hover: rgba(249, 115, 22, 0.35);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.14);
    --shadow-orange: 0 8px 32px rgba(249, 115, 22, 0.2);
    --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);

    /* Layout */
    --max-w: 1200px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 100px;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ═══ RESET & BASE communs ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }