/* ARIANE  Variables CSS, couleurs, thème clair/sombre, base */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-secondary: white;
            --text-primary: #333;
            --text-secondary: #666;
            --border-color: rgba(0, 0, 0, 0.1);
            --card-bg: white;
            --tab-bg: white;
            --tab-text: #333;
            --tab-inactive-bg: #f0f0f0;
            --circle-color: #667eea;
            --circle-text: white;
            --circle-bg-light: rgba(102, 126, 234, 0.2);
        }

        html.dark-mode {
            --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            --bg-secondary: #2d2d44;
            --text-primary: #e0e0e0;
            --text-secondary: #aaa;
            --border-color: rgba(255, 255, 255, 0.1);
            --card-bg: #2d2d44;
            --tab-bg: #1a1a2e;
            --tab-text: #e0e0e0;
            --tab-inactive-bg: #404060;
            --circle-color: #7c3aed;
            --circle-text: white;
            --circle-bg-light: rgba(124, 58, 237, 0.25);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--bg-primary);
            min-height: 100vh;
            padding: 20px;
            color: var(--text-primary);
            transition: background 0.3s, color 0.3s;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }