@font-face {
    font-family: 'CCMonsterMash';
    src: url('../fonts/CC-Monster-Mash.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Prater';
    src: url("../fonts/PraterSansPro.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Prater';
    src: url("../fonts/PraterSansPro-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/Stolzl-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: normal;
}

:root {
    --mid-pink: #d1576b;
    --dark-purple: #3b102b;
    --background-color: #f1f4ea;
    --color-text-dark: #3c1835;
    --CCMonsterMash: 'CCMonsterMash';
    --Prater: 'Prater', sans-serif;
    --Stolzl: 'Stolzl', sans-serif;
    --font-size-p:1rem;
    --margin-inline-1: 5vw;
    --margin-left-jeu: 5vw;
    --common-border: 60px;
    --half-border: 0px 0px 60px 60px;
    --swiper-theme-color: var(--mid-pink);
}

* {box-sizing:border-box;}

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

body {
    margin:0;
    padding:0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: white;
    background-color: var(--background-color);
    & p, & a, & li {
        font-family: var(--Prater);
        text-decoration: none;
    }
    & p {
        font-size: var(--font-size-p);
        line-height: 1.2;
        max-width: 70%;
    }
    & .heading {
        font-family: var(--CCMonsterMash);
        font-weight: normal;
        line-height: 1.2;
    }
    & h2 {
        font-family: var(--Prater);
        font-weight: normal;
    }
    & a.commande {
        position:relative;
        &[href*="youtube.com"] {
            padding-left:4rem;
            &::before {
                content:'\f144';font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:250%;
            }
        }
        &[href*="commander"] {
            padding-left:2.5rem;
            &::before {
                content:'\f04b';font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:100%;
            }
        }
        &.cart-link {
            & .cart-count {
                position: absolute;
                top: -8px;
                right: -8px;
                background: var(--color-text-dark);
                color: #fff;
                font-size: 11px;
                font-weight: bold;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                & .cart-count:empty, & .cart-count[data-count="0"] {
                    display: none;
                }
            }
            &:has(.cart-count) {
                animation: shakeCart 10s infinite forwards;
            }
        }
    }
    & main {
        z-index: 0;
        & .ouverture-cartes {
            --widthImage: 200px;
            --heightContainer: auto;
            --espaceRestant: calc(var(--widthContainer) - var(--widthImage));
            --nbImg: 4;
            & img {
                position: absolute;
                width: var(--widthImage);
                transition: left 0.5s ease-in-out;
                &:first-of-type {
                    position: relative;
                    z-index: 5;
                    left: calc(50% - 100px);
                    position: absolute;
                }
                &:not(:first-of-type) {
                    left: calc(50% - 100px);
                }
                &:nth-of-type(2) {
                    z-index: 4;
                }
                &:nth-of-type(3) {
                    z-index: 3;
                }
                &:nth-of-type(4) {
                    z-index: 2;
                }
                &:nth-of-type(5) {
                    z-index: 1;
                }
            }
            &.in-view {
                & img {
                    &:hover {
                        z-index: 10;
                    }
                    &:first-of-type {
                        left: 0;
                    }
                    &:nth-of-type(2) {
                        left: calc(var(--espaceRestant) / var(--nbImg));
                    }
                    &:nth-of-type(3) {
                        left: calc(var(--espaceRestant) / var(--nbImg) * 2);
                    }
                    &:nth-of-type(4) {
                        left: calc(var(--espaceRestant) / var(--nbImg) * 3);
                    }
                    &:nth-of-type(5) {
                        left: var(--espaceRestant);
                    }
                }
            }
            &.direction-cartes-right {
                &.in-view {
                    & img {
                        &:hover {
                            z-index: 10;
                        }
                    }
                }

                & img {
                    &:nth-of-type(1) {
                        z-index: 1;
                    }
                    &:nth-of-type(2) {
                        z-index: 2;
                    }
                    &:nth-of-type(3) {
                        z-index: 3;
                    }
                    &:nth-of-type(4) {
                        z-index: 4;
                    }
                }
            }
        }
    }
}
.center {
    align-content:center;text-align:center;align-items:center;
}
#Pink {
    color:var(--mid-pink);
}
a {
    text-decoration:none;
}
#Un {
    background:url('../img/bg-header-kouba.jpg') no-repeat bottom right #0c150f;background-size:contain;
    height: 80vh;
    position: relative;
    z-index: 0;
    & header nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        & img {
            height: 100px;
            width: auto;
            margin-left: 2.5vw;
            margin-top: -2.73vh;
        }
        & label {
            position: fixed;
            top: 3.5rem;
            right: 2rem;
            font-size: 1.6rem;
            border-radius: 50%;
            background: var(--mid-pink);
            z-index: 99;
            padding: .5rem;
            aspect-ratio: 1;
            display: none;
            align-items: center;
            justify-content: center;
            line-height: 1;
            width: 2rem;
            & + input {
                display: none;
            }
            &::before {
                content: '\f0c9';font-family: "Font Awesome 6 Free";font-weight: 900;color: white;
            }
        }
        & ul {
            display: flex;
            margin-inline: 1.25vw;
            & li {
                display: flex;
                & a {
                    color: white;
                    font-family: var(--Prater), sans-serif;
                    font-size: 23px;
                }
                &::after {
                    content: '|';
                    color: white;
                    margin-inline: 1vw;
                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                    font-size: 25px;
                }
                &:last-child::after {
                    content: none;
                }
            }
        }
    }

    & header+div:not(.produit) {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding:10vh 0 0 8rem;
        gap:1.4rem;

        & .heading {
            font-size:1.4rem;margin:0;
            & span {
                display: block;
                font-size: 1.1rem;font-family: var(--Prater);
                & strong {
                    color: var(--mid-pink);
                }
            }
        }

        & div {
            display: flex;

            &:has(#Inline) {
                align-items: center;justify-content: flex-start;gap:1rem;
            }

            & img.pictos-header {
                width:13rem;height:auto;
            }

            & img.tetes-de-mort {
                width:5rem;margin-right:1rem;
            }

            & p {
                margin-block: auto;
                font-family: var(--Prater);
                font-size:var(--font-size-p);
                max-width:100%;
            }

            & #Inline {
                display: flex;
                flex-direction: column;
                align-content: center;

                & * {
                    margin-block: 0;
                }

                & p:nth-of-type(1) {
                    font-size: 25px;
                    margin-top: 1.36vh;
                }

                & p:nth-of-type(2) {
                    font-size: 20px;
                }
            }

            &+div {
                margin-top: 0px;
            }
        }

        & div:nth-of-type(2) {
            & p {
                font-size: 20px;
                font-family: var(--Prater);
            }
        }
    }
}

#Deux {
    position: relative;
    border-radius: var(--half-border);
    margin-inline: var(--margin-inline-1);
    margin-top: 0;
    margin-bottom: 5.47vh;
    padding-inline: 4rem;
    padding-bottom:18rem;
    background-color: var(--color-text-dark);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../img/pattern.png") repeat-y top center;
        border-radius: var(--half-border);
        mix-blend-mode: multiply;
        z-index: 0;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        background: #814E2C;
        background: radial-gradient(circle, #e75b7ec5 0%, #8f607d 100%) center center no-repeat;
        mix-blend-mode: soft-light;

        border-radius: var(--half-border);

        z-index: 1;
    }

    & .grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;

        margin-top: 0px;

        &.regles-pdf {
            grid-template-columns: 1fr;width:100%;
            & .cell {
                margin-inline: auto;text-align: center;
                & a.commande {
                    text-transform:uppercase;
                }
            }
        }

        & .cell {
            display: inline;
            padding: 10px;
            margin: 10px;

            & figure:has(img.boite-de-jeu) {
                position: relative;
                width: 60%;
                height: auto;
                margin:0 auto;
                & img {
                    width:calc(100% + 5rem);
                    max-width:calc(100% + 5rem);
                    height: auto;
                    margin-left: -5rem;
                }
                & figcaption {
                    position: absolute;
                    background:url('../img/bg-bulle.png') no-repeat center center;
                    background-size: contain;
                    aspect-ratio:622/551;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-family: var(--CCMonsterMash);
                    top:5rem;
                    right:-1rem;
                    padding: 1.4rem;
                    line-height: 1;
                    & span {
                        font-size:3rem;
                    }
                }
            }
            &.video-jeu {
                &::after {
                    content: '';position: absolute;top: 0;right:calc(13px - var(--margin-inline-1));width: 100%;height: 100%;background: url('../img/illustration-kouba.png') no-repeat bottom right;background-size:contain;z-index:-1;
                }
            }
            & #jeu {
                & h2 {
                    margin-top:0;
                }
            }
            & iframe {
                aspect-ratio: 16/9;
                border-radius:calc(var(--common-border) / 2);margin-top:2rem;
            }
        }
        &.les-cartes {
            grid-template-columns:1fr;
            & .cell {
                margin-inline:auto;text-align:center;
                & h2 {
                    text-transform:uppercase;color:var(--mid-pink);
                }
                & p {
                    margin-inline:auto;max-width:30rem;
                }
                & img {
                    position:absolute;max-width:40rem;left:50%;transform:translateX(-50%);
                }
            }
        }
    }

    & a.commande {
        display: inline-block;
        margin-top: 1.36vh;
    }
}

#video-cartes {
    color: var(--color-text-dark);
    & h3 {
        font-family: var(--Prater);color:var(--mid-pink);text-transform:uppercase;margin-bottom:0;font-size:1.4rem;
        & + p {
            margin-top:0;
        }
    }
    & .grid {
        position:relative;z-index:4;display:grid;grid-template-columns:1fr;margin-inline:0;margin-top:13rem;gap:1rem;padding:0;margin-inline:0;text-align:center;
        & p {
            margin-inline:auto;max-width:45rem;
        }
        & a.commande {
            margin:2rem auto;display:block;width:fit-content;
        }
    }
    & video {
        width:100%;aspect-ratio:1916/620;
    }
}

#malediction {
    margin-top:-1rem;position:relative;margin-inline:var(--margin-inline-1);font-size:25px;z-index:-2;padding-top:2rem;background-color:var(--color-text-dark);color:white;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/pattern.png) repeat-y top center;
        border-radius: var(--common-border);
        mix-blend-mode: multiply;
        z-index: -3;
    }
    & .grid {
        position:relative;z-index:4;display:grid;grid-template-columns:1fr;margin-inline:0;gap:1rem;padding:0;margin-inline:0;
        &.grid-x-2 {
            grid-template-columns:1fr 1fr;grid-template-rows:auto auto;margin-inline: var(--margin-inline-1);
        }
        & .cell {
            display:inline;padding:10px;text-align:left;
            & img.titre-malediction {
                width:100%;height:auto;max-width:400px;margin-inline:auto;
            }
            & h2 {
                font-size:1.6rem;color:white;text-align:center;margin:2rem auto;
            }
            & h3 {
                font-size:1.4rem;color:#3eb2a7;margin-bottom:0;text-transform:uppercase;font-family:var(--Prater);
                & + p {
                    margin-top:0;
                }
            }
            & p {
                text-align:left;margin-inline:0 auto;max-width:45rem;
            }
            & iframe {
                width:100%;height:auto;aspect-ratio:16/9;border-radius:25px;
            }
            & .commande {
                margin:0 auto 2rem auto;display:block;width:fit-content;background:#3eb2a7;
            }
            & figure {
                position:relative;width:60%;height:auto;margin:0 auto;
                & img {
                    width:calc(100% + 5rem);max-width:calc(100% + 5rem);height:auto;margin-left:-5rem;
                }
                & figcaption {
                    position: absolute;
                    background:url('../img/bg-bulle-malediction.png') no-repeat center center;
                    background-size: contain;
                    aspect-ratio:622/551;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-family: var(--CCMonsterMash);
                    top:5rem;
                    right:-1rem;
                    padding: 1.4rem;
                    line-height: 1;
                    & span {
                        font-size:3rem;
                    }
                }
            }
        }
    }
}

@keyframes scroll {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}

#Trois {
    position: relative;
    z-index: -2;
    border-radius: var(--common-border);
    border-top-left-radius:0;
    border-top-right-radius:0;
    margin-inline: var(--margin-inline-1);
    margin-top:-2rem;
    font-size: 25px;
    background-color: var(--color-text-dark);
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../img/pattern.png") repeat-y top center;
        border-radius: var(--common-border);
        mix-blend-mode: multiply;
        z-index: -3;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #814E2C;
        background: radial-gradient(circle, #e75b7ec5 0%, #8f607d 100%) center center no-repeat;
        mix-blend-mode: soft-light;

        border-radius: var(--common-border);

        z-index: -1;
    }


    & div#Block {
        position: relative;
        z-index: 5;
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        margin-left: 7vw;
        margin-right: 4vw;
        gap: 2vw;

        & div {
            margin-top: 13.69vh;
        }

        & h2 {
            font-size: 30px;
            margin-bottom: 0;
        }

        & img[src*="paquet2.png"] {
            position: relative;
            z-index: 1;
            width: 100%;
            height: auto;

            margin-top: -20vh;
            margin-bottom: 5vh;
        }

        & p {
            font-size: 14px;
        }
    }

    & #regles {
        position: relative;
        z-index: 1;
        display: block;

        margin-top: 0;

        & img {
            width: 30%;
            height: auto;

            margin-inline: 0.5vw;
        }

        & .heading {
            color: var(--mid-pink);
            font-size: 35px;
        }

        & img:last-child {
            margin-top: 5vh;
            margin-bottom: -22vh;
            margin-inline: auto;
            width: 35%;
            height: auto;
        }

        & .swiper {
            width: 90%;
            height: 220px;

            z-index: 20;

            padding-inline: 30px;
            padding-bottom: 25px;

            & .swiper-button-next::after,
            & .swiper-button-prev::after {
                font-size: 30px;
                color: var(--mid-pink);
            }

            & .swiper-button-prev {
                left: 0;
            }

            & .swiper-button-next {
                right: 0;
            }

            & .swiper-scrollbar {
                display: none;
            }

            & .swiper-horizontal {
                bottom: var(--swiper-pagination-bottom, -5px);
            }


            & .swiper-slide {
                text-align: center;
                justify-content: center;
                align-content: center;
                box-sizing: border-box;

                & iframe {
                    max-width: 100%;
                    height: 100%;
                    aspect-ratio: 16 / 9;

                    border-radius: 25px;
                }
            }
        }
    }
}

#joueurs {
    color: var(--color-text-dark);
    display: block;
    margin-top: 4vh;
    margin-bottom: 2vh;
    & p {
        margin-inline:auto;
    }
    & img {
        margin-block: 4.10vh;
        width: 15%;
        height: auto;
        margin-inline: 1.25vw;
        & :last-child {
            margin-bottom: 1.36vh;
        }
    }
    & .heading {
        margin-top: 17vh;
        color: var(--mid-pink);
        font-size: 50px;
    }
    & #avis {
        & p:first-of-type {
            color: var(--mid-pink);
            font-size: 23px;
        }

        & p:nth-of-type(2) {
            font-size: 20px;
        }
    }
    & .swiper {
        width: 80%;
        height: 250px;
        margin:2rem auto 1rem;
        padding-inline: 22px;
        padding-bottom: 2rem;
        & .swiper-button-next::after, & .swiper-button-prev::after {
            font-size: 30px;
            color: var(--mid-pink);
        }
        & .swiper-button-prev {
            left: 0;
        }
        & .swiper-button-next {
            right: 0;
        }
        & .swiper-scrollbar {
            display: none;
        }
        & .swiper-wrapper {
            gap: 1rem;
        }
        & .swiper-slide {
            background: #dde0d5;
            border-radius: 20px;
            text-align: center;
            justify-content: center;
            align-content: center;
            box-sizing: border-box;
            padding-block:10px;
            padding-inline:22px;
            & h3 {
                color:var(--mid-pink);font-family:var(--Prater);font-size:.9rem;line-height:1;
            }
            & p {
                font-size:13px;max-width:100%;
            }
        }
    }
}

#contact {
    margin-bottom:0;
    & p {
        color:var(--mid-pink);margin-inline:auto;
        & #Lien-Facebook {
            color:black;
        }
    }
    #Lien {
        display: block;
    }
}

#Quatre {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-inline: var(--margin-inline-1);
    background-color: var(--color-text-dark);
    border-radius: var(--common-border);
    padding-top: 1rem;margin-top:2rem;margin-bottom:2rem;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../img/pattern.png") repeat-y top center;
        border-radius: var(--common-border);
        mix-blend-mode: multiply;
        z-index: -3;
    }
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #814E2C;
        background: radial-gradient(circle, #e75b7ec5 0%, #8f607d 100%) center center no-repeat;
        mix-blend-mode: soft-light;

        border-radius: var(--common-border);

        z-index: -1;
    }
    & p {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 2.73vh;
        color:white;
    }
    & .heading {
        color: var(--mid-pink);
        font-family: var(--CCMonsterMash);
        font-size:2rem;
    }
    #commander {
        position:relative;display:block;z-index:2;padding-top:2rem;
        --swiper-pagination-color: white;
        --swiper-pagination-bullet-inactive-color: var(--mid-pink);
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-navigation-sides-offset: 0;
        & h2 {
            margin-bottom:.25rem;
        }
        & h2 + p {
            font-family:var(--Prater), sans-serif;
            font-size:1.2rem;color:white;
        }
        & .grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 5rem;
            gap: 2rem;
            & .cell {
                display: inline;
                & .product-price {
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: center;
                    & .button {
                        background-color: var(--mid-pink);
                        color: white;
                        padding: 8px 15px;
                        border-radius: 20px;
                        font-size:1.2rem;
                        text-transform: uppercase;
                        font-family:var(--CCMonsterMash), sans-serif;
                        position: relative;
                        white-space: nowrap;
                        z-index: 2;
                    }
                    & .price {
                        position: relative;
                        z-index: 1;
                        background-color: white;
                        color: var(--mid-pink);
                        border-radius: 20px;
                        font-size:1.2rem;
                        font-family: var(--CCMonsterMash), sans-serif;
                        padding: 6px 20px 5px 85px;
                        margin-left: -75px;
                        width: fit-content;
                    }
                    & .added_to_cart.wc-forward {
                        position: absolute;
                        display: flex;
                        flex-direction: column;
                        text-decoration: none;
                        margin-top: 60px;
                        color: white;
                    }
                }
                & img {
                    background-color: white;
                    border-radius: 40px;
                    max-width: 80%;
                    margin-inline: auto;
                    aspect-ratio: 308 / 373;
                    object-fit: contain;
                }
                & .product-description {
                    min-height:90px;
                }
                & p {
                    font-size:.9rem;
                    font-family: var(--Prater), sans-serif;
                    line-height: 1.2;
                    justify-content: center;
                    align-content: center;
                }
                &:has(.product) {
                    width:calc(100%/4 - 2rem);
                }
                & h2 {
                    color:#f1f4ea;margin-bottom:0;text-transform:uppercase;font-size:1.2rem;
                }
            }
            & .swiper-pagination {
                position:relative;
            }
        }
    }
    #faq {
        position: relative;
        z-index:1;
        background-position: top center;
        border-radius: var(--common-border);
        margin-top: -20rem;
        margin-bottom: 6.84vh;
        padding-top:20rem;
        & details {
            background-color: var(--background-color);
            color: var(--color-text-dark);
            font-size: 25px;
            font-family: var(--Prater), sans-serif;
            width: 60vw;
            padding-top: 5px;
            padding-bottom: 12px;
            border-radius: 30px;
            margin-block: 1.36vh;
            margin-inline: auto;
            & summary {
                list-style: none;cursor: pointer;font-size: 1.2rem;
            }
            & p {
                font-family: var(--Prater);
                margin-bottom: 0px;width:100%;
            }
        }
        & .heading:first-of-type {
            margin-top: 110px;
        }
        & .heading:nth-of-type(2) {
            margin-block: 40px;
        }
        & .grid {
            display: grid;
            grid-template-columns: repeat(5, auto);
            grid-template-rows: repeat(2, auto);
            grid-template-areas:
                "img1 img2 img3 img6 img7"
                "img1 img4 img5 img6 img7";
            row-gap: 10px;
            width: 80%;
            height: auto;
            margin-inline: auto;
            margin-top: 5.4vh;
            margin-bottom: 2.73vh;
            justify-content: center;
            align-items: center;
            & img {
                width: 90%;
                height: auto;
                display: block;
                margin: auto;
                border-radius: 35px;
                object-fit: cover;
                object-position: center;
                &.img1 {
                    grid-area: img1;
                    aspect-ratio: 9 / 16;
                }
                &.img2 {
                    grid-area: img2;
                    aspect-ratio: 1.24 / 1;
                }
                &.img3 {
                    grid-area: img3;
                    aspect-ratio: 1.24 / 1;
                }
                &.img4 {
                    grid-area: img4;
                    aspect-ratio: 1.24 / 1;
                }
                &.img5 {
                    grid-area: img5;
                    aspect-ratio: 1.24 / 1;
                }
                &.img6 {
                    grid-area: img6;
                    aspect-ratio: 9 / 16;
                }
                &.img7 {
                    grid-area: img7;
                    aspect-ratio: 9 / 16;
                }
            }
        }

        & img[src*="logo-kouba.png"] {
            display: block;
            width: 10%;
            height: auto;
            margin-top: 2.73vh;
            padding-bottom: 2.73vh;
            margin-inline: auto;
        }

        & img[src*="personnages-bas.png"] {
            position: absolute;
            z-index: 10;
            display: block;
            margin-top: -413px;
            left: auto;
            right: -5vw;
            width: 45%;
            height: auto;
        }
        & + p {
            color:white;
            & a {
                color:white;
            }
        }
    }
}

a.commande {
    background-color: var(--mid-pink);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 20px;
    font-family: var(--CCMonsterMash), sans-serif;
}

.logo-rose {
    display: inline-block;
    background-color: var(--mid-pink);
    color: white;
    border-radius:50%;
    aspect-ratio: 1;
    width: 2rem;
    line-height: 2;
}

a.logo-blanc {
    display: inline-block;
    background-color: white;
    color: var(--dark-purple);
    color: rgba(0, 0, 0, 1);
    border-radius: 50%;
    aspect-ratio: 1;
    width: 2rem;
    line-height: 2;
    text-align: center;
}

.fa-solid.logo-blanc {
    padding: 8px;
    background-color: white;
    border-radius: 30px;
}

#Lien1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-right: 1.3vw;
    translate: 0px 5px;
    & a {
        display: inline-block;
    }
}



/* Panier */

body.page-template-default:not(.woocommerce-page) {
    & #Un {
        background:#0c150f;
        height:auto;
        & section {
            max-width:80%;margin-inline:auto;padding:5rem;
            & p {
                max-width:100%;
            }
            & a {
                color: var(--mid-pink);
            }
        }
        & h1 {
            font-family: var(--CCMonsterMash);
            color: var(--mid-pink);
            font-size: 2.5rem;
        }
    }
}
body.page-template-page-cart {

    & #Un {

        font-family: var(--Prater);
        color: white;
        border-radius: 0;

        &::before,
        &::after,
        & div:empty:nth-of-type(1) {
            border-radius: 0;
        }

        & div:empty:nth-of-type(2) {
            display: none;
        }

        & header+div:not(.produit) {

            & div {
                width: 100%;

                & * {
                    margin: inherit;
                }

                & .woocommerce-notices-wrapper {
                    flex: 1 0 100%;
                    display: inline;

                    & .woocommerce-error, & .woocommerce-info, & .woocommerce-message {
                        margin-block: 10px;
                        width:90%;
                        margin-inline: auto;background: white;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        border-color: var(--mid-pink);
                        & a {
                            color: #515151;
                        }
                        &::before {
                            color: var(--mid-pink);
                        }
                    }

                    &:empty {
                        display: none;
                    }

                }

                & form.woocommerce-cart-form {
                    display: block;width: 100%;flex:1 0 100%;padding: 0 1rem;
                }

                & .cart-empty {
                    width: 50%;
                    margin-inline: auto;
                    display: flex;
                    flex-direction: column;
                }

                & .return-to-shop {
                    margin-inline: auto;
                }
            }

            & div:nth-of-type(2) {
                & p {
                    font-size: 14px;
                    margin-block: 10px;
                }
            }
        }

        & .woocommerce-cart-container {
            max-width: 95%;
            position: relative;
            left: 2%;
            margin: 0;

            & .woocommerce {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;

                background: white;
                left: 0;
                border-radius: 20px;
                color: var(--color-text-dark);

                margin-block: 10px;

                & a.remove {
                    color: var(--color-text-dark) !important;

                    &:hover {
                        color: white !important;
                        background-color: var(--dark-purple);
                    }
                }

                & .quantity {
                    & input {
                        border-radius: 5px;
                        line-height: 2;
                        background: white;
                        border: 1px solid var(--mid-pink);
                        text-align: right;
                        font-size: 1.2rem;
                        font-family: var(--Prater);
                        width: 3rem;
                        display: block;
                        aspect-ratio: 1;
                    }
                }
            }
        }

        & form {
            flex: 1 0 60%;
        }

        & form,
        table {
            margin: 0;
            margin-block: 20px;
            border: none;
            text-decoration: none;

            & a {
                color: var(--color-text-dark);
            }

            & .shipping-calculator-button {
                font-family: var(--color-text-dark);
            }

            & td {
                text-align: left;
                border: none;
                margin-inline: 10px;

                &[data-title="Expédition"] {
                    font-family: var(--Stolzl);
                    background: var(--background-color);
                }

                & img {
                    width: 10rem;
                    height: auto;
                }

                &.actions {
                    & .coupon {
                        justify-content: center;
                        margin-inline: 10px;

                        & .input-text {
                            width: auto;
                        }

                        & #coupon-error-notice {
                            font-family: var(--Stolzl);
                            align-self: center;
                        }
                    }

                    & button {
                        width: auto;
                        &[name="update_cart"] {
                            display: block;margin-inline:auto;width: fit-content;
                        }
                    }
                }
            }
            & tr.cart_item > td {
                border-top:1px solid var(--mid-pink);
            }
        }

        & div.wc-proceed-to-checkout {
            & a {
                color: white;
                align-content: center;
                margin: auto!important;
                background-color: var(--mid-pink);
                border-radius: 20px;
                font-family:var(--CCMonsterMash);text-transform: uppercase;
            }
        }
        & .cart-collaterals {
            position:relative;
            flex: 1 0 35%;
            max-width: 100%;
            background-color: var(--color-text-dark);
            padding: 10px;
            border-radius: 20px;
            margin: 1rem;
            color:white;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(../img/pattern.png) repeat-y top center;
                border-radius: var(--half-border);
                mix-blend-mode: multiply;
                z-index: 0;
            }
            & input {
                color: var(--mid-pink);
            }
            & .cart_totals {
                position: relative;
                flex-direction: column;
                max-width: 100%;
                & th {
                    border: none;
                }
                & td, & li, & ul, & p {
                    width:100%;margin:0;
                    &[data-title="Total"] {
                        font-size: 2rem;
                    }
                    & * {
                        font-family: var(--Prater);
                    }
                    &.woocommerce-shipping-destination, & .woocommerce-shipping-calculator {
                        display: none;
                    }
                }
            }
        }
    }
}

/* Vérification de la commande */

body.woocommerce-checkout {

    & #Un {

        font-family: var(--Prater);
        color: white;
        border-radius: 0;

        &::before, &::after {
            border-radius: 0;
        }

        & header+div:not(.produit) {
            & div {
                & * {
                    border: none;
                }
            }
        }

        & div:empty:nth-of-type(1) {
            border-radius: 0;
            background: none;
        }

        & div:empty:nth-of-type(2) {
            display: none;
        }

        & .grid-container {
            max-width: 95%;
            position: relative;
            left: 2%;
            margin: 0;
            background-color: white;
            color: var(--color-text-dark);

            border-radius: 20px;

            & .content {
                padding:2rem;margin-top:1rem;
                & .woocommerce {
                    & .woocommerce-notice {
                        text-align:center;color: var(--mid-pink);max-width:100%;margin-bottom: 3rem;
                    }
                    & ul.order_details {
                        width:fit-content;margin:0 auto 2rem;padding:0;
                    }
                    & a {
                        color:var(--mid-pink);
                    }
                }
            }

            & div.wc-block-components-main {
                padding: 10px;

                & .wc-block-components-form {
                    padding: 20px;
                    font-family: var(--Stolzl);
                    font-weight: 300;

                    & h2 {
                        color: var(--color-text-dark);
                        font-weight: 500;
                        font-size: 25px;
                        font-family: var(--Prater);
                    }

                    & button {
                        background-color: var(--mid-pink);
                        border-radius: 30px;
                        align-content: center;
                        margin: 0;
                        width: auto;

                        border: none;

                        & .wc-block-components-checkout-place-order-button__text {
                            color: white;
                            font-family: var(--CCMonsterMash);
                            font-size: 25px;
                            padding: 0px 10px 0px 10px;
                        }
                    }

                    & p {
                        font-family: var(--Stolzl);
                    }
                }
            }

            & .wc-block-checkout {
                padding:1rem;

                & .wp-block-woocommerce-checkout-order-summary-block {
                    position: relative;
                    background-color:var(--color-text-dark);
                    color: white;
                    border: none;
                    border-radius: 20px;
                    margin: 10px;
                    margin-top: 0;
                    padding: 1rem;
                    & > div {
                        position: relative;
                        z-index: 1;
                    }
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: url(../img/pattern.png) repeat-y top center;
                        border-radius: var(--half-border);
                        mix-blend-mode: multiply;
                        z-index: 0;
                    }

                    & .wc-block-components-totals-wrapper {
                        padding: 10px;

                        font-family: var(--Prater);
                        font-size: 15px;

                        background: none;

                        & h3 {
                            font-family: var(--Prater);
                            font-size: 25px;
                            color: white;
                        }

                        & p {
                            font-family: var(--Stolzl);
                            font-size:.7rem;

                        }
                    }

                    & .wc-block-components-checkout-order-summary__title {
                        margin-top: 0;
                    }

                    & .wc-block-components-checkout-order-summary__title-text {
                        font-size: 24px;
                        font-family: var(--Prater);
                        color: white;
                        padding-top: 5px;
                        margin-top: 0;
                    }

                    & .wc-block-components-shipping-placeholder__value {
                        font-family: var(--Stolzl);
                    }
                }
            }
        }
    }
}

body.single-product {
    & #Un {
        background:#0c150f;height:auto;
        & .produit {
            margin-inline:5rem;background:var(--background-color);border-radius:var(--common-border);padding:2rem;color:var(--color-text-dark);margin-top:1rem;
            & h1 {
                color:var(--mid-pink);text-transform:uppercase;font-size:2rem;margin-top:0;font-family:var(--CCMonsterMash);
            }
            & p.price {
                background-color: white;
                color: var(--mid-pink);
                border-radius: 20px;
                font-size:1.2rem;
                font-family: var(--CCMonsterMash), sans-serif;
                padding: 6px 20px;
                margin:1rem auto 1rem 0;
                width: fit-content;
                display: block;
            }
            & form.cart {
                display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;
                & .quantity {
                    & input {
                        border-radius: 5px;
                        line-height: 2;
                        background: white;
                        border: 1px solid var(--mid-pink);
                        text-align: right;
                        font-size: 1.2rem;
                        font-family: var(--Prater);
                        width: 3rem;
                        display: block;
                        aspect-ratio: 1;
                    }
                }
                & button.single_add_to_cart_button {
                    background-color: var(--mid-pink);
                    color: white;
                    padding: 8px 15px;
                    border-radius: 20px;
                    font-size:1.2rem;
                    text-transform: uppercase;
                    font-family:var(--CCMonsterMash), sans-serif;
                }
            }
        }
        & .row {
            display:flex;gap:2rem;align-items:center;justify-content:center;
            & .col-lg-6 {
                width:50%;
            }
            &.similar-products {
                padding-bottom:5rem;text-align:center;
                & h2 {
                    color:var(--mid-pink);text-transform:uppercase;text-align:center;
                }
                & h3 {
                    color:#f1f4ea;margin-bottom:0;text-transform:uppercase;font-size:1.2rem;
                }
                & .price {
                    background-color: white;
                    color: var(--mid-pink);
                    border-radius: 20px;
                    font-size:1.2rem;
                    font-family: var(--CCMonsterMash), sans-serif;
                    padding: 6px 20px;
                    margin:1rem auto;
                    width: fit-content;
                    display: block;
                }
                & img {
                    background-color: white;
                    border-radius: 40px;
                    max-width: 80%;
                    margin-inline: auto;
                    aspect-ratio: 308 / 373;
                    object-fit: contain;
                }
            }
        }
    }
}


.wc-block-components-radio-control__description, .wc-block-components-radio-control__label, .wc-block-components-radio-control__secondary-description, .wc-block-components-radio-control__secondary-label {
    font-family: var(--Prater);
    font-size: 1.4rem;
    color:var(--mid-pink);
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-components-order-summary .wc-block-components-order-summary-item__description p {
    display:none;
}


/* Responsive */

@media screen and (max-width:1550px) {
    #Quatre {
        & #commander {
            & .grid {
                margin:0 2rem;
                & .cell {
                    & .product-price {
                        transform: scale(0.825);
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1280px)  {
    #Un {
        height:auto;padding-bottom:4rem;
    }
}

@media screen and (max-width:1024px) {
    #Un {
        background-size:cover;
        &::before {
            content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#000000a8;z-index:0;
        }
        & > * {
            position:relative;z-index:1;
        }
        & header+div:not(.produit) {
            width:100%;
        }
    }
    #Quatre {
        & #commander {
            & .grid {
                & .cell {
                    & .product-price {
                        transform: scale(0.85);
                    }
                }
            }
        }
    }
    body.page-template-page-cart {
        & #Un {
            & .woocommerce-cart-container {
                left:0;padding:0;margin:1rem auto;
                & .woocommerce {
                    padding: 2rem;
                }
            }
        }
    }
}

@media screen and (max-width:930px) {
    body {
        & #Un {
            & header {
                & nav {
                    flex-wrap: wrap;
                    width: 100%;
                    align-items: flex-start;
                    justify-content: flex-start;
                }
            }
            & header+div:not(.produit) {
                padding: 4rem;
            }
        }
        &.woocommerce-checkout {
            & #Un {
                & header {
                    & nav {
                        & ul {
                            display:none;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:640px) {
    body {
        & h2 {
            text-align:center;font-size:1.2rem;
        }
        & p {
            max-width:100%;
        }
        & #Un {
            height:auto;z-index: 999999;padding-top:4rem;
            &::before {
                background:#000000be;
            }
            &::after {
                position:relative;display:block;z-index:1;background:url('../img/bg-header-kouba.jpg') no-repeat center center;background-size:cover;width:100%;height:auto;aspect-ratio:1920/1151;
            }
            & #Lien1 {
                position: fixed;top: 0;left: 0;width: 100%;z-index: 999;background: #070907;translate: 0;padding: .5rem;padding-right: 3.5rem;
                & .logo-blanc {
                    display: none;
                }
                &::before {
                    content: '';
                    position: absolute;
                    top:.5rem;
                    left:-5.5rem;
                    width:5rem;
                    height:auto;
                    aspect-ratio: 256/115;
                    background: url('../img/logo-kouba.png') no-repeat center center;
                    background-size: contain;
                    transition:left .25s ease;
                }
            }
            & header {
                z-index:9999;
                & nav {
                    flex-wrap:wrap;width:100%;align-items:flex-start;justify-content:center;
                    & label {
                        position: fixed;
                        top: .3rem;
                        right: .3rem;
                        font-size: 1.6rem;
                        border-radius: 50%;
                        background: var(--mid-pink);
                        z-index: 99;
                        padding: .5rem;
                        aspect-ratio: 1;
                        align-items: center;
                        justify-content: center;
                        line-height: 1;
                        width: 2.6rem;
                        height: 2.6rem;
                        line-height: 1;
                        display: flex;
                        &:has(+ input:checked) {
                            &::before {
                                content: '\f00d';
                            }
                        }
                        & + input {
                            display: none;
                            & + ul {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: var(--color-text-dark);
                                z-index: 98;
                                margin:0;
                                padding:0;
                                gap: 1rem;
                                pointer-events:none;
                                opacity:0;
                                transition: opacity .25s ease;
                                & li {
                                    &::after {
                                        content: none;
                                    }
                                }
                            }
                            &:checked + ul {
                                pointer-events:auto;
                                opacity:1;
                            }
                        }
                    }            
                    & img {
                        height:auto;width:16rem;margin:1rem auto;transition: transform .25s ease;
                    }
                }
                & + div:not(.produit) {
                    width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:2rem;gap:1rem;
                    & .heading {
                        text-align:center;font-size:1.2rem;
                    }
                    & div {
                        &:has(#Inline) {
                            gap:1rem;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;
                        }
                        &:nth-of-type(2) {
                            width:100%;align-items:center;justify-content:center;
                        }
                        & + div {
                            width:100%;align-items:center;justify-content:center;
                        }
                    }                        
                }
            }
        }
        & #Deux {
            padding:0;margin-bottom:0;
            & a.commande {
                display:block;margin-top:2rem;margin-inline:auto;width:fit-content;
            }
            & .grid {
                grid-template-columns:1fr;
                & .cell {
                    & figure:has(img.boite-de-jeu) {
                        width:100%;
                        & img {
                            width:100%;max-width:100%;height:auto;margin-left:0;
                        }
                    }
                    &.video-jeu {
                        &::after {
                            display:none;
                        }
                    }
                }
                &.les-cartes {
                    & .cell {
                        & img {
                            position:relative;width:100%;left:0;transform:none;margin-bottom:-50%;
                        }
                    }
                }
            }
        }
        & #video-cartes {
            padding-inline:2rem;
            & .grid {
                margin-top:10rem;
            }
            & video {
                width:calc(100% + 4rem);margin-left:-2rem;aspect-ratio:2/1;object-fit:cover;
            }
        }
        & #malediction {
            & .grid {
                &.grid-x-2 {
                    grid-template-columns:1fr;grid-template-rows:auto;margin-inline:0;
                }
                & .cell {
                    text-align:center;
                    & p {
                        text-align:center;
                    }
                    & figure {
                        width:100%;height:auto;margin:0 auto;margin-bottom: 3rem;
                        & img {
                            width:100%;max-width:100%;height:auto;margin-left:0;
                        }
                        & figcaption {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
        & #Trois {
            & #regles {
                padding-bottom:2rem;
                & img:last-child {
                    margin-top:2rem;margin-bottom:-10rem;width:100%;
                }
            }
        }
        & #joueurs {
            margin-top:0;margin-bottom:0;padding:2rem;
            & .heading {
                font-size:2rem;
            }
            & .swiper {
                width:100%;padding-inline:0;
            }
        }
        & #Quatre {
            & #commander {
                & .grid {
                    margin:0 2rem;gap:1rem;flex-wrap:wrap;
                    & .cell {
                        &:has(.product) {
                            width:100%;
                        }
                    }
                }
            }
            & #faq {
                margin-bottom:0;
                & .grid {
                    width:90%;
                    &:has(.img1) {
                        scroll-snap-type: x mandatory;scroll-padding: 20px;overflow-x: scroll;grid: none;flex-direction: row;display: flex;align-items: center;justify-content: flex-start;
                        & img {
                            aspect-ratio: 9 / 16!important;scroll-snap-align: start;
                        }
                    }
                }
                & details {
                    width:90%;
                }
                & img[src*="logo-kouba.png"] {
                    width:10rem;margin:2rem auto;padding:0;padding-bottom:2rem;
                }
            }
        }
        &.page-template-page-cart {
            & #Un {
                &::after {
                    content:none;
                }
                & form, & table {
                    & tr.cart_item > td {
                        border:0;margin:0 1rem;padding:0;display:flex;justify-content:space-between;
                        &.product-remove {
                            margin:0;line-height:1;padding:0;
                            & a.remove {
                                margin-inline:auto 0;
                            }
                        }
                        & span:has(bdi), & a {
                            margin-inline:0;
                            & bdi {
                                margin-inline:0;
                            }
                        }
                    }
                    & td {
                        &.actions {
                            & .coupon {
                                margin-inline:0;flex-direction:column;
                            }
                        }
                        & img {
                            width:100%;height:auto;
                        }
                    }
                }
                & table.cart {
                    & .product-thumbnail {
                        display:block;margin:0 auto;padding:0;
                        &::before {
                            content:none;
                        }
                    }
                    & .product-quantity {
                        display:flex;justify-content:space-between;
                        & div.quantity {
                            width:auto;margin:0;
                        }
                    }
                }
                & .woocommerce {
                    & .cart-collaterals {
                        & .cart_totals {
                            & table {
                                margin:0;
                                & td {
                                    margin:0;padding:0;display:flex;justify-content:space-between;width:100%;
                                }
                            }
                            & .wc-proceed-to-checkout {
                                margin:0;padding:0;
                            }
                        }
                    }
                }
            }
        }
        &.woocommerce-checkout {
            & #Un {
                & header {
                    & nav {
                        & ul {
                            display:none;
                        }
                    }
                }
                & .grid-container {
                    & .wc-block-checkout {
                        & .wp-block-woocommerce-checkout-order-summary-block {
                            margin:0;margin-bottom:2rem;
                        }
                    }
                }
            }
        }
        &.woocommerce-checkout {
            & #Un {
                & .grid-container {
                    & .content {
                        padding:1rem;
                    }
                    & .wc-block-checkout {
                        padding:0;
                    }
                }
                & .wc-block-checkout__sidebar {
                    margin-bottom:0;
                }
            }
        }
        &.scrolled {
            & #Un {
                & #Lien1 {
                    &::before {
                        left:.5rem;
                    }
                }
                & header {
                    & nav {
                        & img {
                            transform:scale(0);
                        }
                    }
                }
            }
        }
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__image>img {
        max-width:108px;width:108px;
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
        display:none;
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
        margin-top:0;padding-bottom:16px;width:98px;
    }
}

/* if ios */
@supports (-webkit-touch-callout: none) {
    body {
        & video {
            pointer-events: none;
        }
    }
}

@keyframes shakeCart {
    0% {transform: rotate(0deg) scale(1);}
    87.5% {transform: rotate(0deg) scale(1);}
    90% {transform: rotate(-15deg) scale(1.2);}
    92.5% {transform: rotate(15deg) scale(1.2);}
    95% {transform: rotate(-15deg) scale(1.2);}
    97.5% {transform: rotate(15deg) scale(1.2);}
    100% {transform: rotate(0deg) scale(1);}
}