@layer components {
    .expertises-fullscreen {
        /* On s'assure que la section prend tout l'écran */
        height: 100vh;
        min-height: 700px;
    }

    .expertise-column {
        cursor: pointer;
        /* Les colonnes se partagent l'espace équitablement au départ */
    }

    /* Animation du texte qui monte au survol */
    .expertise-column h3 {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: var(--font-display);
    }

    /* Petit effet de ligne qui s'anime sous le titre */
    .expertise-column .expertises-details {
        transform: translateY(20px);
        transition: all 0.5s ease-out;
    }

    .expertise-column:hover .expertises-details {
        transform: translateY(0);
    }

    /* Responsive : On passe en stack horizontal sur mobile */
    @media (max-width: 768px) {
        .expertises-fullscreen {
            flex-direction: column;
        }
        .expertise-column:hover {
            flex: 2 !important;
        }
    }
}