.page-result .main {
    padding-top: calc(var(--u) * 55);
}

.result-final {
    width: calc(var(--u) * 289);
    margin-bottom: calc(var(--u) * 16);
    view-transition-name: resultat;
}

.result-banner {
    position: relative;
    width: 100%;
    margin-top: auto;
    margin-bottom: calc(var(--u) * 90);
    view-transition-name: bandeau;
    animation: banner-in .7s .25s both cubic-bezier(.2, .8, .3, 1);
}

.result-banner img {
    width: 100%;
}

/* Zone cliquable posée sur le logo Envie de bien manger du bandeau */
.result-banner-link {
    position: absolute;
    left: 38.5%;
    top: 54.4%;
    width: 23%;
    height: 33.8%;
    border-radius: calc(var(--u) * 3);
    animation: glow 2s 1.2s ease-in-out infinite;
    transition: transform .2s;
}

.result-banner-link:hover {
    transform: scale(1.06);
}

::view-transition-new(bandeau) {
    animation: banner-in .6s .1s both cubic-bezier(.2, .8, .3, 1);
}

::view-transition-old(bandeau) {
    animation: none;
    opacity: 0;
}

::view-transition-group(resultat) {
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@keyframes banner-in {
    from { opacity: 0; transform: translateY(calc(var(--u) * 60)); }
    to { opacity: 1; transform: none; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 rgb(241 195 110 / 0); }
    50% { box-shadow: 0 0 0 calc(var(--u) * 3) rgb(241 195 110 / .9); }
}