/* ================================================================
   ANRDI COPYRIGHT (c) 2026 — ALL RIGHTS RESERVED - AUTHOR: LYAM
================================================================ */
:root {
    /* Palette de Couleurs (Inspiration AFNIC / Fluent 2) */
    --color-primary-900: #0C2D6B;
    --color-primary-800: #1E40AF;
    --color-primary-700: #2563EB; /* Couleur principale */
    --color-primary-600: #3B82F6;
    --color-primary-500: #60A5FA;
    --color-primary-100: #DBEAFE;
    --color-primary-50: #EFF6FF;

    --color-gray-900: #111827;
    --color-gray-800: #1F2937;
    --color-gray-700: #374151;
    --color-gray-600: #4B5563;
    --color-gray-500: #6B7280;
    --color-gray-400: #9CA3AF;
    --color-gray-300: #D1D5DB;
    --color-gray-200: #E5E7EB;
    --color-gray-100: #F3F4F6;
    --color-gray-50: #F9FAFB;

    --color-success: #16A34A;
    --color-error: #DC2626;
    --color-warning: #EA580C;
    --color-info: #0369A1;

    /* Espacements (Base 8px) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Typographie */
    --font-main: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-title: "Satoshi", "Inter", sans-serif;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;

    /* Radius & Shadows */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 36px rgba(8, 21, 40, 0.11);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);

    /* Aliases composants (anrdi.css — préfixe --c-*) */
    --c-navy: #081528;
    --c-navy-800: #0D1D38;
    --c-navy-700: #132545;
    --c-navy-600: #1A3060;
    --c-navy-500: #204080;
    --c-blue: #1941A5;
    --c-blue-l: #2655C8;
    --c-blue-xl: #3A6AE0;
    --c-blue-pale: #E6EDFF;
    --c-blue-pale2: #D0DFFF;
    --c-red: #BE2D2D;
    --c-red-pale: #FDEAEA;
    --c-white: #FFFFFF;
    --c-surface: #F3F6FC;
    --c-surface-2: #E8EDF8;
    --c-gray-50: #F8FAFB;
    --c-gray-100: #EDF1F8;
    --c-gray-200: #D4DCEA;
    --c-gray-300: #B0BDD4;
    --c-gray-400: #8097B8;
    --c-gray-500: #5C7499;
    --c-gray-600: #3E5578;
    --c-gray-700: #243555;
    --c-gray-800: #0D1D38;
    --c-success: #047857;
    --c-error: #BE2D2D;
    --c-warning: #92400E;
    --f-display: var(--font-title);
    --f-body: var(--font-main);
    --f-mono: "JetBrains Mono", "Fira Code", monospace;
    --r-sm: 2px;
    --r-md: 5px;
    --r-lg: 9px;
    --r-xl: 14px;
    --r-2xl: 22px;
    --r-full: 9999px;
    --sh-xs: 0 1px 2px rgba(8, 21, 40, 0.05);
    --sh-sm: 0 1px 4px rgba(8, 21, 40, 0.07);
    --sh-md: 0 4px 18px rgba(8, 21, 40, 0.09);
    --sh-lg: var(--shadow-lg);
    --sh-xl: 0 20px 52px rgba(8, 21, 40, 0.14);
    --sh-blue: 0 0 0 3px rgba(25, 65, 165, 0.2);
    --g-blue: linear-gradient(135deg, #1941A5 0%, #143398 100%);
    --g-navy: linear-gradient(160deg, #081528 0%, #0D1D38 100%);
    --g-tri: linear-gradient(90deg, #002395 33.33%, #EDEDED 33.33%, #EDEDED 66.66%, #ED2939 66.66%);
    --t-fast: 110ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --header-h: 100px;
    --container: 1200px;
    --sidebar-w: 256px;

    /* Aliases certification (préfixe --ds-*) */
    --ds-primary: var(--color-primary-700);
    --ds-primary-50: var(--color-primary-50);
    --ds-primary-100: var(--color-primary-100);
    --ds-primary-300: var(--color-primary-500);
    --ds-primary-600: var(--color-primary-600);
    --ds-primary-700: var(--color-primary-700);
    --ds-primary-800: var(--color-primary-800);
    --ds-gray-50: var(--color-gray-50);
    --ds-gray-200: var(--color-gray-200);
    --ds-gray-300: var(--color-gray-300);
    --ds-gray-500: var(--color-gray-500);
    --ds-gray-600: var(--color-gray-600);
    --ds-gray-700: var(--color-gray-700);
    --ds-gray-900: var(--color-gray-900);
    --ds-shadow-lg: var(--shadow-lg);
    --ds-font-family: var(--font-main);
}

/* Utilitaires de mise en page pour la documentation */
.docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-2xl);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

@media (max-width: 1024px) {
    .docs-layout { grid-template-columns: 1fr; }
}

.page-hero {
    background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-info) 100%);
    color: white;
    padding: var(--spacing-3xl) 0;
    margin-bottom: var(--spacing-2xl);
}

.page-hero .section-label {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
    color: var(--color-primary-100);
}