@layer page {
    /* ================================
       HERO SECTION - DYNAMIC SCROLL
       ================================ */
    .hero {
        /* Variables CSS pilotées par JS pour l'effet de scroll */
        --hero-progress: 0;
        --hero-image-width: calc(100% - (100% - 300px) * var(--hero-progress));
        --hero-text-opacity: var(--hero-progress);
        --hero-text-translate: calc(20px * (1 - var(--hero-progress)));
    }

    /* ================================
       RESPONSIVE
       ================================ */
    @media (width < 800px) {
        .hero {
            /* Sur mobile, l'image passe de 100% à 220px */
            --hero-image-width: calc(100% - (100% - 220px) * var(--hero-progress));

        }
    }

    /* ================================
       DESSIN TECHNIQUE - SPA STYLES
       Page principale et fragments
       ================================ */
    /* ================================
       VUES / TRANSITIONS
       ================================ */

    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        min-height: 400px;
    }

    .hero-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 40px;
        width: 100%;
        max-width: 900px;
    }

    .hero-image {
        flex: 0 0 auto;
        width: var(--hero-image-width);
        max-width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-image img {
        width: 100%;
        height: auto;
    }

    .hero-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transform: translateY(var(--hero-text-translate));
    }

    .hero-text h1 {
        margin: 0;
    }

    .hero-text p {
        margin: 0;
    }

    /* ================================
       NAVIGATION SECTION
       ================================ */

    /* ================================
       FRAGMENT SECTION
       ================================ */
    .hub-group {
        gap: 24px;
    }

    @media (width < 800px) {
        .hero-content {
            flex-direction: column;

        }
        .hero-text {
            align-items: center;

        }
    }

    .hero-image img {
        border-radius: var(--local-radius-technical-image);
        box-shadow: var(--local-shadow-technical-image);
    }

    .hero-text {
        opacity: var(--hero-text-opacity);
    }

    .hero-text h1 {
        font-size: var(--canon-size-title);
        color: var(--raw-color-black-90);
        font-weight: 700;
    }

    .hero-text p {
        font-size: var(--canon-size-body);
        color: var(--raw-color-black-70);
        line-height: var(--canon-leading-body);
    }

    @media (width < 800px) {
        .hero-content {
            text-align: center;

        }
    }

    .hero-content {
        transition: gap 0.1s ease-out;
    }

    .hero-image {
        transition: width 0.1s ease-out;
    }

    .hero-text {
        transition: opacity 0.1s ease-out, transform 0.1s ease-out;
        pointer-events: none;
    }

    /* Activer les interactions quand le texte est visible */
    .hero[data-hero-scrolled] .hero-text {
        pointer-events: auto;
    }

}