/* public/css/style.css - Styles globaux et variables */

/* ===== VARIABLES CSS ===== */
:root {
    /* Couleurs principales */
    --primary-green: #2C5530;
    --secondary-green: #4A7C59;
    --accent-green: #7BA05B;
    --light-green: #A8D8A8;
    --dark-green: #1E3A20;
    
    /* Couleurs neutres */
    --white: #FFFFFF;
    --light-gray: #F8FAF8;
    --gray-100: #F7F8F9;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6C737F;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    
    /* Couleurs système */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;
    
    /* Typographie */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Espacements */
    --spacer: 1rem;
    --spacer-0: 0;
    --spacer-1: 0.25rem;
    --spacer-2: 0.5rem;
    --spacer-3: 0.75rem;
    --spacer-4: 1rem;
    --spacer-5: 1.25rem;
    --spacer-6: 1.5rem;
    --spacer-8: 2rem;
    --spacer-10: 2.5rem;
    --spacer-12: 3rem;
    --spacer-16: 4rem;
    --spacer-20: 5rem;
    --spacer-24: 6rem;
    
    /* Rayons de bordure */
    --border-radius-sm: 0.375rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-2xl: 1.5rem;
    --border-radius-full: 9999px;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    
    /* Points de rupture */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== STYLES GLOBAUX ===== */
* {
    box-sizing: border-box;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* ===== UTILITAIRES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }

.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }

.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }

.gap-1 { gap: var(--spacer-1); }
.gap-2 { gap: var(--spacer-2); }
.gap-3 { gap: var(--spacer-3); }
.gap-4 { gap: var(--spacer-4); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacer-1); }
.mb-2 { margin-bottom: var(--spacer-2); }
.mb-3 { margin-bottom: var(--spacer-3); }
.mb-4 { margin-bottom: var(--spacer-4); }

.py-2 { padding: var(--spacer-2) 0; }
.py-3 { padding: var(--spacer-3) 0; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-sticky { position: sticky; }

.w-100 { width: 100%; }

.rounded { border-radius: var(--border-radius); }
.rounded-start { border-radius: var(--border-radius) 0 0 var(--border-radius); }
.rounded-end { border-radius: 0 var(--border-radius) var(--border-radius) 0; }
.rounded-circle { border-radius: 50%; }

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

.shadow-sm { box-shadow: var(--shadow-sm); }

/* ===== MISE EN PAGE PRINCIPALE ===== */
.main-content {
    min-height: calc(100vh - 120px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-flex { display: flex !important; }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

@media (min-width: 1025px) {
    .d-lg-inline { display: inline !important; }
}