@media (min-width: 768px) and (max-width: 1024px) {
    

    .animation-wrapper {
        display: none;
    }

    
}


@media (max-width: 767px) {

    nav .cta-primary {
        display: none;
    }
    
    html, body {
        height: 100dvh;
        height: 100svh;
        width: 100%;
    }

    main {
        height: 100dvh;
        height: 100svh;
    }

    .ecran-01 {
        height: 100dvh;
        height: 100svh;
        min-height: unset;
    }

    .ecran-02 {
        height: 100dvh;
        height: 100svh;
    }

    .volet-droit,
    .volet-gauche {
        height: 100dvh;
        height: 100svh;
    }

    .hero-content-wrapper {
        height: 100dvh;
        height: 100svh;
    }

    .hero-content {
        flex-direction: column;
        height: 410px;
    }

    .sceau-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75%;
    }

    .sceau img {
        width: 120%;
    }

    .ray {
        stroke-width: 0.3;
    }


    .ecran-01 .cta-primary {
        bottom: 24px;
    }

    .ecran-02 {
        display: none;
    }

    .ecran-02-mobile {
        display: block;

        background-color: white;
        height: 100dvh;
        height: 100svh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .mention {
        position: relative;
        top: initial;
        left: initial;
        right: initial;
        bottom: initial;
        transform: none;
        z-index: auto;
    }

    .alcove-content-wrapper .alcove-logo {
        width: 200px;
    }

    .alcove-content-wrapper {
        width: 100%;
        padding: 20px;
    }

    .alcove-content {
        width: 100%;
        text-wrap: pretty;
    }

    .alcove-content p {
        font-size: clamp(16px, calc(16 / 390 * 100dvw), 18px);
    }

    .mention {
        color: var(--color-primary);
        margin-top: 40px;
        gap: 2px;
        width: 100%;
        padding: 0;
    }

    .mention p {
        font-size: 11px;
    }

    .ecran-02-mobile .cta-primary {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;
    }

    .ecran-02-mobile .alcove-content-wrapper {
        padding-bottom: 80px;
    }

    }