/* Hero Buttons */
.hero-btns-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    position: relative;
    border-radius: 5px;
    border: 4px solid var(--vert);
}

.hero-btns-wrapper::before {
    content: "";
    background: var(--vert);
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(var(--btn-width, 50%) + 2px);
    height: calc(100% + 2px);
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 3px;
}

/* Position du ::before selon le bouton actif */
.hero-btns-wrapper[data-active="0"]::before {
    left: -1px;
}

.hero-btns-wrapper[data-active="1"]::before {
    left: calc(var(--btn-width, 50%) - 1px);
}

.hero-btns-wrapper a {
    color: var(--vert);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 40px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    transition: color 0.5s ease;
}

.hero-btns-wrapper a.active {
    color: var(--beige-clair);
}

.hero-btns-wrapper a .french-text {
    font-size: 2em;
}

.hero-btns-wrapper a .basque-text {
    font-size: 1.2em;
    font-weight: 400;
}

.bihotz-btn {
    color: var(--beige-clair);
    border: 4px solid var(--beige-clair);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:fit-content;
    gap: 10px;
    padding: 10px 80px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    transition: all 0.5s ease;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    border-radius:5px;
    margin:auto;
}

.bihotz-btn:hover {
    background-color:var(--beige-clair);
    color:var(--vert);
}

.bihotz-btn .french-text {
    font-size: 2em;
}

.bihotz-btn .basque-text {
    font-size: 1.2em;
    font-weight: 400;
}



/* Basque Section - Icônes flottantes */
.basque-section {
    position: relative;
    overflow: hidden;
}

.basque-icons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.basque-floating-icon {
    position: absolute;
    opacity: 0.15;
    pointer-events: none;
    will-change: transform, top;
    /* Filtre pour transformer en --beige-clair (#F4EBD0) */
    filter: brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(400%) hue-rotate(10deg) brightness(103%) contrast(90%);
}

/* Qui Sommes Nous - Icônes flottantes */
.qui-sommes-nous {
    position: relative;
    overflow: hidden;
}

.qsn-icons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.qsn-floating-icon {
    position: absolute;
    pointer-events: none;
    will-change: transform, top;
    /* Filtre pour transformer en --vert (#284A29) */
    filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(80deg) brightness(95%) contrast(90%);
}

.qsn-heading {
    font-size:200px;
    color:var(--beige);
}


.jeremy-img-wrapper,
.marjolaine-img-wrapper {
    position:relative;
}

.jeremy-img-wrapper .jeremy-icon {
    position:absolute;
    top:-4%;
    left:42%;
    animation: sparkle 2s ease-in-out infinite;
    transform-origin: center center;
    width:20%;
    height:auto;
}

.marjolaine-img-wrapper .marjolaine-icon {
    position:absolute;
    top:30%;
    left:24%;
    transform-origin: bottom left;
    animation: drink 2s infinite steps(1);
    width:20%;
    height:auto;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(15deg);
    }
    50% {
        transform: scale(0.9) rotate(-10deg);
    }
    75% {
        transform: scale(1.15) rotate(10deg);
    }
}

@keyframes drink {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-20deg);
    }
}

.team-title-container {
    position:absolute;
    min-width:100%;
    bottom:0;
    left:50%;
    transform:translateX(-50%) translateY(50%) rotate(-4deg);
}

.team-title-wrapper {
    display:flex;
    flex-direction:column;
    color:var(--beige-clair);
    background:var(--vert);
    font-family: 'Oswald';
    font-weight:bold;
    border-radius:5px;
    align-items:center;
    text-align:center;
    justify-content:center;
    padding:20px 40px;
    line-height:normal;
    text-transform:uppercase;
    white-space:nowrap;
}

.team-title-wrapper .team-name {
    font-size:5em;
}
.team-title-wrapper .team-title {
    font-size:2.3em;
}

.team-description-container {
    
}

.team-description-container .team-description-wrapper {
    position:relative;
}

.team-description-container .team-description-wrapper .team-description {
    background:var(--vert);
    border-radius:5px;
    color:var(--beige-clair);
    padding:40px;
    font-weight:normal;
    z-index:1;
    position:relative;
}
.team-description-container .team-description-wrapper .team-description-repeater {
    background:var(--beige);
    border-radius:5px;
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:100%;
    z-index:0;
}

.opening-hours {
    display:flex;
    flex-direction:column;
    color:var(--beige-clair);
    max-width:500px;
    margin:auto;
    margin-top:50px;
}

.opening-hours .opening-hours-day {
    display:flex;
    flex-direction:row;
}

.opening-hours .opening-hours-day .opening-hours-weekdays {
    font-weight:bold;
    text-align:left;
    flex:1;
    border-right:2px dashed var(--beige-clair);
}

.opening-hours .opening-hours-day .opening-hours-time {
    text-align:right;
    flex:1;
}


/* Responsive - Tablette */
@media (max-width: 980px) {
    .hero-btns-wrapper a {
        padding: 15px 0;
        gap: 8px;
    }

    .hero-btns-wrapper a .french-text {
        font-size: 1.8em;
    }

    .hero-btns-wrapper a .basque-text {
        font-size: 1.2em;
    }

    .bihotz-btn {
        padding: 10px 40px;
    }

    .bihotz-btn .french-text {
        font-size: 1.8em;
    }

    .bihotz-btn .basque-text {
        font-size: 1.2em;
    }
    .team-title-wrapper .team-name {
        font-size:3em;
    }
    .team-title-wrapper .team-title {
        font-size:1.5em;
    }

    .marjolaine-description-container {
        margin-top:100px;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .hero-btns-wrapper {
        flex-direction: column;
    }

    .hero-btns-wrapper::before {
        width: calc(100% + 2px);
        height: var(--btn-height, 50%);
        transition: top 0.5s ease;
    }

    .hero-btns-wrapper[data-active="0"]::before {
        top: -1px;
        left: -1px;
    }

    .hero-btns-wrapper[data-active="1"]::before {
        top: calc(var(--btn-height, 50%) - 1px);
        left: -1px;
    }

    .hero-btns-wrapper a {
        padding: 12px 20px;
        gap: 5px;
    }

    .hero-btns-wrapper a .french-text {
        font-size: 1.3em;
    }

    .hero-btns-wrapper a .basque-text {
        font-size: 1em;
    }

    .bihotz-btn .french-text {
        font-size: 1.3em;
    }

    .bihotz-btn .basque-text {
        font-size: 1em;
    }
    .team-title-wrapper .team-name {
        font-size:2em;
    }
    .team-title-wrapper .team-title {
        font-size:1.2em;
    }
}