/* ===== VARIABLES ET RÉINITIALISATION ===== */
    :root {
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --primary-light: #dbeafe;
        --secondary: #8b5cf6;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --light: #f9fafb;
        --dark: #1f2937;
        --gray: #6b7280;
        --light-gray: #f3f4f6;
        --border: #e5e7eb;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --radius: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.5rem;
        --transition: all 0.3s ease;
    }

    * {
        box-sizing: border-box;
    }


    /* ===== STRUCTURE PRINCIPALE ===== */
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

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

    /* ===== EN-TÊTE DE PAGE ===== */
    .header-center {
        text-align: center;
        margin-bottom: 3rem;
        padding: 5rem 3rem;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow);
        border: 1px solid rgba(147, 197, 253, 0.3);
    }

    .header-center h1 {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--dark);
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .header-center p {
        font-size: 1.125rem;
        color: black;
        max-width: 600px;
        margin: 0 auto;
    }