@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&display=swap');

html {
    cursor: grab;
}

body {
    margin: 0;
    padding: 0;
}

.mapboxgl-control-container {
    display: none;
}

#map {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
}

.mapboxgl-popup {
    max-width: 400px;
    font:
        12px/20px 'Helvetica Neue',
        Arial,
        Helvetica,
        sans-serif;
}

.mapboxgl-canvas .hidden-layer {
    transition: opacity 0.5s ease-out;
    opacity: 0;
    visibility: hidden;
}

.mapboxgl-canvas .visible-layer {
    transition: opacity 0.5s ease-in;
    opacity: 1;
    visibility: visible;
}


#features {
    height: 100vh;
    /* justify-content: end; */
    font-family: sans-serif;
    /* display: flex; */
    justify-content: end;
}

section {
    line-height: 25px;
    /* opacity: 0.25; */
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu {
    padding: 1.5vh 1.5vw;
    background-color: #cccccc00;
    width: 100px;
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
}

.toggle-container {
    display: none;
}

/* Hide encepagement sections by default on mobile */
@media screen and (max-width: 768px) {
    .encepagement {
        /* display: none; */
        width: fit-content !important;
    }

    .toggle-container {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 1000;
        display: flex;
        align-items: center;
        background-color: white;
        padding: 5px 10px;
        border-radius: 20px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        height: 30px;
        width: 50px;

    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 25px;
        height: 15px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        right: 34px;
        bottom: 19px;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
        width: 0;
    }

    .slider img.grape-icon {
        position: absolute;
        width: 18px;
        height: 18px;
        top: 3px;
        left: 4px;
        transition: .4s;
        border-radius: 50%;
        background-color: #9B601A;
        padding: 7px;
    }

    input:checked+.slider {
        background-color: #2196F3;
    }

    input:checked+.slider img.grape-icon {
        transform: translateX(30px);
    }


    .slide-menu.visible {
        right: 50px;
        position: absolute;
    }

    .slide-menu.hidden {
        left: -250px;
        position: absolute;

    }

}

/* Style pour les téléphones en mode portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .appellation {
        display: flex;
        flex-direction: column;
    }

    .hamburger-container {
        display: none !important;
    }


    .encepagement {
        position: relative;
        display: flex;
        width: 100%;
        top: 0;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        bottom: auto !important;
    }

    #encepagement-container {
        display: flex;
        justify-content: center;
        transform: translate(50vw, -100vh);
    }

    .encepagement ul {
        display: flex;
        flex-direction: column;
    }


    .toggle-container {
        right: 40vw;
        bottom: 5vh;
        background: #171b3287;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(9.7px);
        -webkit-backdrop-filter: blur(9.7px);
    }

    .compass-container {
        transform: translate(110px, -20px);
    }

    #menu div {
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        top: 50px;
        right: 10px;
        justify-content: center;
        align-items: center;
    }

    #menu section {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #menu img {
        width: 80px;
        /* Ajustez la taille de l'image si nécessaire */
        height: auto;
        padding: 5px;
        display: inline-block;
    }

    #menu .appellation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        right: 50px;
        /* Ajouter un espace entre les appellations */
    }

    #menu .chateau {
        margin-bottom: 90px;
        /* Ajouter un espace entre les châteaux */
    }


    #watermark {
        bottom: 20px !important;
    }
}

#menu li {
    list-style: none;
}

section.active {
    opacity: 1;
}

#features button,
#features img {
    cursor: pointer;

}

#watermark {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    opacity: 0.7;
}

/* CSS */


.fly {
    display: none;
    position: fixed;
}

@media screen and (orientation: landscape) {
    .fly {
        display: block;
        position: relative;
        margin: 0px auto;
        width: 5vw;
        padding: 10px;
        border: none;
        border-radius: 3px;
        text-align: center;
        min-width: 85px;
        line-height: 15px;
    }


    .encepagement ul {
        display: flex;
        flex-direction: column;
    }



    .chateau {
        padding: 10px 10px !important;
        width: 90px;
        height: 90px;
        display: flex !important;
    }

    .toggle-container {
        right: 130px;
        bottom: 25px;
    }
}

input {
    display: none;
}

#encepagement-container {
    position: fixed;
    bottom: 0;
}

.encepagement {
    height: fit-content;
    align-items: end;
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 20px;

}

ul p {
    margin: 0;
}

.encepagement div {
    background: #171b3287;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    margin: 20px;
    border-radius: 50px;
    display: none;
    width: 270px;

}

.encepagement div.active {
    display: block;
}

.encepagement ul {
    font-family: "Lexend Exa", sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: rgb(225, 225, 225);
    position: relative;
    touch-action: manipulation;
    display: inline-flex;
    padding: 0;
    width: auto;
    padding: 5px 25px;
}


.encepagement li {
    list-style: none;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.encepagement li span {
    min-width: 20px;
    height: 7px;
    border-radius: 4px;
    margin-right: 10px;
}

/* Style for the watermark */
#watermark {
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 1000;
    opacity: 0.7;
    /* Adjust opacity as needed */
}

.cabernet-sauvignon {
    background-color: #BF303C;
}

.merlot {
    background-color: #73091D;
}

.cot {
    background-color: #6100c2;
}

.cab-franc {
    background-color: #e958c5;
}

.verdot {
    background-color: #2e19b7;
}

.malbec {
    background-color: #05033e;
}

.chardonnay {
    background-color: #b6b683;
}

.carmenere,
.grenache {
    background-color: #3c0a44;
}

.gros-manseng {
    background-color: #f1f100;
}

.colombard {
    background-color: #7da108;
}

.viognier,
.harslevelu {
    background-color: #696901;
}

.cf-cs {
    background-color: #f73535;
    opacity: 0.8;
    background-image: linear-gradient(to right, #040dbc, #040dbc 7.5px, #f73535 7.5px, #f73535);
    background-size: 15px 100%;
}

.merlot-cf {
    background-color: #f73535;
    opacity: 0.8;
    background-image: linear-gradient(to right, #6c6fca, #6c6fca 7.5px, #f73535 7.5px, #f73535);
    background-size: 15px 100%;
}
.merlot-cs {
    background-color: #fa8585;
    opacity: 0.8;
    background-image: linear-gradient(to right, #6c6fca, #6c6fca 7.5px, #fa8585 7.5px, #fa8585);
    background-size: 15px 100%;
}

.semillon-sb {
    background-color: #a6c000;
    opacity: 0.8;
    background-image: linear-gradient(to right, #533a00, #533a00 7.5px, #a6c000 7.5px, #a6c000);
    background-size: 15px 100%;
}

.old-vines {
    background-color: #fa8585;
    opacity: 0.8;
    background-image: linear-gradient(to right, #05033e, #05033e 7.5px, #fa8585 7.5px, #fa8585);
    background-size: 15px 100%;
}

.sauvignon-blanc,
.zeta {
    background-color: #a6c000;
}

.sauvignon-gris {
    background-color: #005127;
}

.semillon,
.furmint,
.zinfandel {
    background-color: #533a00;
}

.muscadelle {
    background-color: #00a35d;
}

.jacheres {
    background-color: #20d2e9;
}

select,
option {
    position: absolute;
}

#appellation-name {
    position: fixed;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-family: "forum";
    font-weight: 100;
    letter-spacing: 5px;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 1000;

    pointer-events: none;
    /* Pour que le texte ne bloque pas les interactions */
    opacity: 0;
    transition: all 4s cubic-bezier(.19, 1, .22, 1);
}

#appellation-name.visible {
    opacity: 1;
}

#appellation-name.hidden {
    opacity: 0;
}



#chateau-name {
    position: fixed;
    text-align: center;
    text-transform: uppercase;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 1.2em;
    font-weight: 200;
    letter-spacing: 5px;
    color: white;
    padding: 10px 20px;
    z-index: 1000;
    font-family: 'lexend exa', sans-serif;
    text-align: center;
    pointer-events: none;
    animation-fill-mode: forwards;
    opacity: 0;
    background: #171b3287;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    width: fit-content;
    border-radius: 100px !important;
    /* Pour éviter que le texte interfère avec les interactions de la carte */
}

.compass-container {
    position: fixed;
    bottom: 20px;
    right: 60px;
    width: 30px;
    height: auto;
    z-index: 9999;
    /* Pour s'assurer que la boussole est au-dessus de la carte */
}

.compass {
    width: 100%;
    height: auto;
    transform: rotate(0deg);
    /* Initialiser la rotation à 0 degrés */
    transition: transform 0.5s ease;
    /* Transition douce pour les rotations */
}


/* Styles pour le menu hamburger */
.hamburger-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #0A1734;
}

.hamburger-icon {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    width: 100%;
    height: 3px;
    background-color: #F99C2A;
    border-radius: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hamburger-icon.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-icon.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Styles pour le menu slide */
.slide-menu {
    height: 100%;
    z-index: 9999;
    transition: left 0.3s ease;
    position: absolute;
}

.slide-menu.visible {
    right: -0;
    position: absolute;
    bottom: -40px;

}

.slide-menu.hidden {
    left: -250px;
    position: absolute;

}

#external-link-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    z-index: 1000;
}

#link-container {
    position: absolute;
    display: none;
    margin-top: 20px;
    margin-bottom: 20px;
    bottom: 1%;
    left: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50px;
    position: fixed;


}


#link-container a {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    align-items: center;
}

.link {
    background: #171b3287;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border-radius: 50px;
    width: 50px;
    height: 50px;
}

/* Styles pour l'écran de chargement */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #171b32;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    /* Toujours au-dessus */
    overflow: hidden;
}

/* Style du logo */
#loading-logo {
    width: 200px;
    /* Taille initiale du logo */
    opacity: 0;
    /* Initialement invisible */
    animation: zoomFade 3s ease-out forwards;
}

/* Animation pour le logo */
@keyframes zoomFade {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}


.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: fit-content;
    min-width: 200px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    left: 110px;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    background: #171b3287;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border-radius: 1000px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;

}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltiptext {
    font-family: 'lexend';
    color: rgb(219, 219, 219);
    font-size: 12px;
}


.circular-menu {
    position: fixed;
    top: 1em;
    left: 1em;
    z-index: 1;
}

.circular-menu svg {
    transform: translate(1em, 0.4em);
}

.flag img {
    width: 20px;
    filter: grayscale(1);
    transition: ease-in-out 0.5s;
}

.circular-menu .floating-btn {
    display: block;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background-color: #0A1734;
    box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);
    color: hsl(0, 0%, 100%);
    text-align: center;
    line-height: 3.9;
    cursor: pointer;
    outline: 0;
}

.circular-menu.active .floating-btn {
    box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}

.circular-menu .floating-btn:active {
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
}

.circular-menu .floating-btn i {
    font-size: 1.3em;
    transition: transform .2s;
}

.circular-menu.active .floating-btn i {
    transform: rotate(-45deg);
}

.circular-menu:after {
    display: block;
    content: ' ';
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    transition: all .3s ease;
}

.circular-menu.active:after {
    transform: scale3d(5.5, 5.5, 1);
    transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.flag:hover img {
    filter: grayscale(0);
    transition: ease-in-out 0.5s;
}

.circular-menu .items-wrapper {
    padding: 0;
    margin: 0;
}

.circular-menu .menu-item {
    position: absolute;
    top: .2em;
    right: .2em;
    z-index: -1;
    display: block;
    text-decoration: none;
    color: #0A1734;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    text-align: center;
    line-height: 3;
    border: #F99C2A 0.2em solid;
    background-color: #0a1734c6;
    transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
    background-color: hsla(0, 0%, 0%, .3);
}

.circular-menu.active .menu-item {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
    transform: translate3d(0, 4em, 0);
}

.circular-menu.active .menu-item:nth-child(2) {
    transform: translate3d(3em, 2.6em, 0);
}

.circular-menu.active .menu-item:nth-child(3) {
    transform: translate3d(4.3em, -0.4em, 0);
}

.circular-menu.active .menu-item:nth-child(4) {
    transform: translate3d(4.6em, 5.8em, 0);
}

.circular-menu.active .menu-item:nth-child(5) {
    transform: translate3d(7em, 3em, 0);
}

.circular-menu.active .menu-item:nth-child(6) {
    transform: translate3d(8em, -0.4em, 0);
}