:root {
    --bg-orange: #FF5200;
    --bg-cream: #ffffe3;
    --olive: #BAC964;
    --yellow: #FFD338;
    --brown: #923E1E;
    --dark: rgb(43 26 16);
    --beige: #F2E3C5;
    --black: #2B1A10;
    --heroFade: 1;
}

html, body {
    margin: 0;
    background: var(--bg-orange);
    font-size: 16px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
}

.ivory-ll {
    font-family: "Ivory LL TT","Playfair Display", "Times New Roman", serif, sans-serif;
    font-weight: 300;
}

.centra-mono {
    font-family: "Centra Mono","IBM Plex Mono", "Courier New", serif, sans-serif;
}

.sro {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    width: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
}

h2, h3 {
    font-weight: 300;
    color: var(--dark);
    font-size: 2rem;
    text-align: center;
    padding-bottom: 1rem;
    margin: 0;
}

.button,
.button-article {
    margin-top: 1rem;
    padding: .5rem 1.5rem;
    border-width: 0.0625rem;
    border-style: solid;
    border-radius: 9999px;
    text-decoration: none;
    background-color: transparent;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.button-article {
    text-decoration: none;
}

.button-article:hover, .button:hover {
    background-color: black;
    color: white;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: .75rem 1rem;
    background: #fff;
    color: #000;
    z-index: 2000;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-orange);
}

nav {
    border-bottom: 0.0625rem solid #000;
    display: grid;
    width: 100%;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    padding: 1rem;
}

.logoImg {
    max-height: 2.25rem;
}

.nav > img.logoImg {
    display: block;
    justify-self: center;
}

a.icon {
    text-decoration: none;
    color: black;
}

@media (max-width: 38rem) {
    .icon {
        display: block;
        width: 2rem;
        height: 2rem;
        text-indent: -99999px;
        overflow: hidden;
        white-space: nowrap;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #find-us {
        background-image: url("../../img/svg/menu.svg");
        justify-self: start;
    }

    #about {
        background-image: url("../../img/svg/instagram.svg");
        justify-self: end;
    }

}

@media (min-width: 40rem) {
    nav.nav {
        grid-template-columns: auto 1fr auto;
        border-bottom: none;
        font-size: 1.5rem;
        padding-inline: 3.25rem;
    }

}

.intro {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.img-intro {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--heroFade);
    transition: opacity 120ms linear;
}

.intro-label {
    position: fixed;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    letter-spacing: .12em;
    text-align: center;
    pointer-events: none;
    opacity: var(--heroFade);
    transition: opacity 120ms linear;
    white-space: nowrap;
}

.img-intro img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(30rem, 62vw);
    max-height: 40rem;
    height: auto;
    border-radius: 1.0625rem;
    opacity: 0;
    will-change: opacity;
}


.img-intro img.animation {
    animation-name: introIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.2, .9, .2, 1);
    animation-fill-mode: forwards;
}

.img-intro img.animation:nth-child(1) {
    animation-delay: 0s;
}

.img-intro img.animation:nth-child(2) {
    animation-delay: 2.5s;
}

.img-intro img.animation:nth-child(3) {
    animation-delay: 5s;
}

.img-intro img.animation:nth-child(4) {
    animation-delay: 7.5s;
}

@keyframes introIn {
    from {
        opacity: 0;
        filter: blur(0.375rem);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.head-1 {
    z-index: 2;
    transform: translate(-50%, -50%) rotate(0.21deg);
}

.head-2 {
    z-index: 3;
    transform: translate(-50%, -50%) translate(22px, -18px) rotate(8deg);
}

.head-3 {
    z-index: 4;
    transform: translate(-50%, -50%) translate(-22px, 18px) rotate(-8deg);
}

.head-4 {
    z-index: 5;
    transform: translate(-50%, -50%) rotate(0.21deg);
}

section:not(.intro) {
    position: relative;
    z-index: 5;
}

.presentation {
    background-color: var(--bg-cream);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem 1rem 6rem;
}

img.ea {
    object-fit: cover;
    max-width: min(15rem, 100%);
    margin: 6rem auto 3rem;
}

p.text {
    font-weight: 300;
    line-height: 1.2;
    padding-inline: 1rem;
    font-size: clamp(24px, calc(24px + (48 - 24) * ((100vw - 320px) / (1280 - 320))), 48px);
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 40rem) {
    img.ea {
        max-width: 17.5rem
    }

    p.text {
        padding: 0 8rem;
    }
}

@media (min-width: 65rem) {
    img.ea {
        max-width: 23.75rem;
    }
}

@media (min-width: 106.25rem) {
    img.ea {
        max-width: 23.75rem;
    }

    p.text {
        padding-left: 21.25rem;
        padding-right: 21.25rem;
    }
}

.cocktails-section,
.project-overview {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--bg-cream);
    padding: 1rem 1rem 6rem;
    gap: 1rem;
    width: 100%;
    z-index: 10;
}

.yellow {
    background-color: var(--yellow);
}

.coffee-color {
    background-color: var(--brown);
}

.beige {
    background-color: var(--beige);
}

.green {
    background-color: var(--olive);
}

.cocktail-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 1rem 1rem 0;
    border-radius: 1.69rem;
}

.title_cocktail {
    color: var(--dark);
    font-weight: 300;
    font-size: 1.5rem;
    margin: 0;
}

.description {
    color: var(--dark);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4;
    padding-top: 2rem;
}

.button-article {
    color: var(--dark);
    border: 1px solid currentColor;
    font-weight: 300;
    font-size: 1.25rem;
    margin: 3rem 0;
}

.white-text { color: #fff; }

.button-article:hover,
.cocktail-card:hover .button-article {
    background: #000;
    color: #fff;
    border-color: #000;
}

.cocktail-card:hover .button-article.white-text {
    background: #fff;
    color: var(--brown);
    border-color: #fff;
}

.image-shape {
    border: .5rem solid var(--bg-cream);
    border-radius: 0.875rem;
}

.cocktail-image {
    position: relative;
    width: 100%;
    max-width: 26.25rem;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
}

.cocktail-image .image-shape {
    position: absolute;
    inset: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
}

.cocktail-image .hover {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .cocktail-image .hover {
        display: block;
        position: absolute;
        opacity: 0;
        transition: opacity 250ms ease;
        pointer-events: none;
        inset: 2rem;
        width: calc(100% - 4rem);
    }

    .cocktail-image .image-shape:not(.hover) {
        transition: opacity 250ms ease;
    }

    .cocktail-card:hover .cocktail-image .hover {
        opacity: 1;
    }

    .cocktail-card:hover .cocktail-image .image-shape:not(.hover) {
        opacity: 0;
    }

    .cocktail-card:hover .button-article {
        background-color: black;
        color: white;
    }
}

.cocktails-section .title, .overview-text {
    grid-column: 1 / -1;
    margin: 0;
    padding-bottom: 1rem;
}

.demonstration {
    flex-direction: column;
    padding-left: 1rem;
    position: relative;
    padding-right: 1rem;
    padding-top: 1rem;
}

@media (min-width: 58.125rem) {
    .cocktails-section,
    .project-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        padding: 1.5rem 1.5rem 6rem;
    }

    .cocktail-card,
    .demo-frame {
        padding: 1.5rem;
    }

    .cocktail-image, .img-before, .img-after {
        width: 100%;
        display: grid;
        place-items: center;
    }

    .image-shape {
        width: min(21.25rem, 100%);
        height: auto;
    }

    .cocktails-section .title {
        text-align: left;
        margin-left: 0;
    }
}

.container.demonstration {
    padding: 1rem;
    border-radius: 2.25rem;
    display: grid;
    gap: 1rem;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 32.5rem;
    margin: 0 auto;
    aspect-ratio: 1554 / 2050;
    border-radius: 1.6875rem;
    overflow: hidden;
}

.slider-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img-before {
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.img-after {
    z-index: 1;
}

.container {
    position: relative;
    overflow: hidden;
    border-radius: 1.6875rem;
    --position: 50%;
}

.slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 5;
}

.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: 0.1875rem;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    background: #fff;
}

.slider-button {
    position: absolute;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    z-index: 7;
    pointer-events: none;
    background: #fff;
    border-radius: 999px;
    padding: .5rem;
}

p.final-text {
    font-size: 1rem;
}

.last_img {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem 0 3.5rem;
}

.last_img .all-img {
    display: block;
    height: auto;
    border: .5rem solid var(--beige);
    border-radius: 0.875rem;
    justify-self: center;
}

.last_img .all-img:nth-child(1) {
    width: min(92%, 38.75rem);
}

.last_img .all-img:nth-child(2) {
    width: min(76%, 28.75rem);
    justify-self: start;
}

.last_img .all-img:nth-child(3) {
    width: min(70%, 26.25rem);
    transform: translateX(3.375rem);
}

.last_img .all-img:nth-child(4) {
    width: min(82%, 32.5rem);
    justify-self: start;
}

.last_img .all-img:nth-child(5) {
    width: min(84%, 32.5rem);
}



@media (min-width: 81rem) {
    .last_img {
        position: relative;
        display: block;
        width: min(100%, 68rem);
        min-height: 62rem;
        margin: 0 auto;
        padding: 1.5rem 0 3.5rem;
    }

    .last_img .all-img {
        position: absolute;
    }

    .last_img .all-img:nth-child(1) {
        width: 20rem;
        top: 0;
        left: 31rem;
    }

    .last_img .all-img:nth-child(2) {
        width: 17rem;
        top: 14rem;
        right: 38rem;
    }

    .last_img .all-img:nth-child(3) {
        width: 15rem;
        top: 37rem;
        right: 58rem;
    }

    .last_img .all-img:nth-child(4) {
        width: 14rem;
        top: 36rem;
        left: 35rem;
    }

    .last_img .all-img:nth-child(5) {
        width: 14rem;
        top: 42rem;
        left: 55rem;
    }
}


@media (min-width: 180rem) {
    .last_img {
        position: relative;
        display: block;
        width: min(100%, 68rem);
        min-height: 62rem;
        margin: 0 auto;
        padding: 1.5rem 0 3.5rem;
    }

    .last_img .all-img {
        position: absolute;
    }

    .last_img .all-img:nth-child(1) {
        width: 30rem;
        top: 0;
        left: 31rem;
    }

    .last_img .all-img:nth-child(2) {
        width: 30rem;
        top: 1rem;
        right: 66rem;
    }

    .last_img .all-img:nth-child(3) {
        width: 20rem;
        top: 32rem;
        right: 41rem;
    }

    .last_img .all-img:nth-child(4) {
        width: 22rem;
        top: 25rem;
        left: 49rem;
    }

    .last_img .all-img:nth-child(5) {
        width: 15em;
        top: 18rem;
        left: 78rem;
    }
}

.newsletter {
    background: var(--bg-cream);
    place-items: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    padding-bottom: 6rem;

}

.note {
    background: var(--yellow);
    border: .1rem solid var(--black);
    border-radius: 0.1875rem;
    transform: rotate(7deg);
    width: min(92vw, 27.875rem);
    aspect-ratio: 16 / 9;
}

.note__title {
    text-align: start;
    font-size: 1.5rem;
    margin: 0;
    padding: 1rem;
}

p.note__title {
    padding-bottom: 1rem;
}

.note__subtitle {
    margin: 0;
    font-size: clamp(.8rem, 1.4vw, 1rem);
    line-height: 1.2;
    padding: 1rem;

}

.note__row {
    display: flex;
    border-top: 0.0625rem solid var(--black);
    margin-top: .40rem;
}

.note__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .75rem .75rem;
    width: 100%;
}

button.note__btn {
    border: 0;
    background: var(--black);
    color: var(--yellow);
    padding: .75rem 1rem;
    cursor: pointer;
}

.img-desktop {
    display: none;
    background-color: var(--bg-cream);
}

@media (min-width: 38rem) {
    .mobile-img {
        display: none;
    }

    .img-desktop {
        display: block;
        width: 100%;
        position: relative;
    }
}

footer {
    padding: 1rem;
    background-color: var(--bg-cream);
    border-top: 0.0625rem solid var(--black);
    position: relative;
}

.footer-links {
    display: flex;
    flex-direction: column;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    padding-bottom: 3rem;
}

.style-conditions-footer,
.style-infos-footer {
    text-decoration: inherit;
    line-height: 1.4;
    color: var(--black);
}

.style-infos-footer {
    font-size: 1.5rem;
    font-weight: 300;
}

.style-conditions-footer {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    padding-top: .5rem;
}

@media (min-width: 38rem) {
    footer {
        padding: 1.5rem 3rem 1rem;
        border-top: none;
    }

    .justify-between {
        display: flex;
        justify-content: space-between;
    }

    .footer-links {
        flex-direction: row;
        gap: 1.5rem;
    }

    .footer-links a {
        white-space: nowrap;
    }
}

.mobile-img {
    width: 100%;
}