/* === Reset, base, layout général === */
        /* --- 2. RESET & BASE --- */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            /* Supprime la surbrillance bleue native au toucher sur WebKit /
               Chromium. Les indicateurs :focus-visible restent gérés par les
               composants pour préserver la navigation au clavier. */
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-body);
            color: var(--text-primary);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s ease, color 0.3s ease;
            line-height: 1.6;
        }

        /* --- 3. LAYOUT --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
            width: 100%;
        }

        .main-content {
            flex-grow: 1;
            padding: 2rem 0;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            min-width: 0;
            max-width: 100%;
        }

        .shortcuts-grid {
            display: grid;
            /* minmax(0,1fr) : la colonne peut rétrécir sous la largeur min-content
               de la carte → jamais de débordement sur petits écrans. */
            grid-template-columns: minmax(0, 1fr);
            gap: 1.25rem;
        }

        .sidebar,
        .sidebar-section,
        .main-area {
            min-width: 0;
            max-width: 100%;
        }