:root {
        --primary-orange: #FF6B35;
        --primary-dark: #df4107;
        --secondary-blue: #4A90A4;
        --text-dark: #2E2E2E;
        --light-gray: #FDFDFD;
    }

    body {
        font-family: "Montserrat", Tahoma, Geneva, Verdana, sans-serif;
        color: var(--text-dark);
        overflow-x: hidden;
        height: 100vh;
        /* background-image: url('../img/xav-flow_background_circle.png');
           background-image: url('../img/lake-annecy-1681821605t4P.jpg');*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #f5f5f5;

    }

    .btn-primary {
        --bs-btn-color: var(--light-gray);
        --bs-btn-bg: var(--primary-orange);
        --bs-btn-border-color: var(--primary-orange);
        --bs-btn-hover-color: var(--light-gray);
        --bs-btn-hover-bg: var(--primary-dark);
        --bs-btn-hover-border-color: var(--primary-dark);
        --bs-btn-focus-shadow-rgb: 49, 132, 253;
        --bs-btn-active-color: var(--light-gray);
        --bs-btn-active-bg: var(--primary-orange);
        --bs-btn-active-border-color: var(--primary-orange);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--light-gray);
        --bs-btn-disabled-bg: var(--primary-orange);
        --bs-btn-disabled-border-color: var(--primary-orange);
    }

    .text-primary {
        color: var(--primary-orange) !important;
    }

    .text-secondary {
        color: var(--secondary-blue) !important;
    }

    .bg-white {
        background-color: #fff;
    }

    .hero-section {
        height: 100vh;
        overflow-y: hidden;
    }


    .hero-title {
        font-family: "Permanent Marker", cursive;
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .visuel_wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .background-circle {
        position: absolute;
        width: 40vw;
        height: 40vw;
        border-radius: 50%;
        z-index: 0;
        background: rgba(255, 255, 255, 0.17);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .coach-figure {
        position: relative;
        z-index: 2;
        height: 100vh;
        width: 100%;
    }

    .btn-lg {
        min-width: 230px;
    }

    .coach-figure img {
        position: absolute;
        left: 10%;
        right: 0;
        margin-inline: auto;
        width: fit-content;
        width: auto;
        height: 100vw;
    }

    .benefit-badge {
        position: absolute;
        background: white;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 2;
        font-size: 18px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .benefit-badge:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 14px;
    }

    .longevite {
        top: 10vh;
        right: 70px;
        animation: float 3s ease-in-out infinite;
    }

    .souplesse {
        top: 25vh;
        right: 10px;
        animation: float 3s ease-in-out infinite 0.5s;
    }

    .sante {
        bottom: 30vh;
        right: 20px;
        animation: float 3s ease-in-out infinite 1s;
    }

    .mobilite {
        top: 20vh;
        left: 50px;
        animation: float 3s ease-in-out infinite 1.5s;
    }

    .coaching {
        bottom: 35vh;
        left: 30px;
        animation: float 3s ease-in-out infinite 2s;
    }


    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-5px);
        }
    }

    @media (max-width: 768px) {
        .benefit-badge {
            font-size: 14px;
            padding: 8px 15px;
        }

        .coach-text {
            font-size: 32px;
        }
    }


    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.5rem;
        }

        .hero-section {
            padding: 2rem 0;
        }
    }