@font-face {
    font-family: 'light'; 
    src: 
        url(/assets/fonts/Balboa-UltraLight/font.ttf) 
        format('truetype'); /* format('truetype'): nos asegura de q el formato se agregue de esa*/  
}

@font-face {
    font-family: 'medium'; 
    src: 
        url(/assets/fonts/Balboa-Medium/font.ttf) 
        format('truetype'); /* format('truetype'): nos asegura de q el formato se agregue de esa*/  
}

/* ************** Custom Properties ************** */
:root {
    --first-color: #fba00b;
    --second-color: #000;
    --second-color-opacity: rgb(0, 0, 0, 0.9);
    --third-color: #fff;
    --btn-color: #fba00b;
    --btn-color-hover: #e68e00;
    --input-color: #fff;
    --bcg-color: #003838;
    --txt-color: #fff;
    --comments-color: #f2f5ef;
    --line-color: #a0a39e;
    --font: "light", sans-serif;
    --header-height: 4rem;
    --header-height-mobile: 3.5rem;
    --header-height-tablet: 4rem;
    --bar-height: 4rem;
    --box-shadow-color: #e4ebdf;
    --box-shadow-second-color: #d3dfca;
    --footer-txt-color: #454743;
}

/* ******************** Reset ******************** */
html {
    box-sizing: border-box;
    font-family: var(--font);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    outline: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none !important;
    list-style: none !important;
}

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

/* ******************** Utilities ******************* */

.box-shadow-1 {
    box-shadow: 0 -10px 40px 20px;
}

.font-medium {
    font-family: 'medium' !important;
}

.font-light {
    font-family: var(--font) !important;
}

input[type="checkbox"] {
    accent-color: #FBA00B;
    margin-right: 7px;
}

.link { color: #fba00b !important; }

/* ******************** Styles ads ******************** */

.mn_ads_slider {
    background-color:var(--box-shadow-color);
}

.mn_ads_slider-2 {
    background-color:var(--box-shadow-second-color);
}

.mn_ads {
    padding-bottom: 3rem;
}

.ads_title {
    font-family: medium;
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 3rem 1.3rem .2rem;
    text-align: center;
}

.ads_title_ {
    font-family: medium;
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 3rem 1.3rem .2rem;
    text-align: center;
}

.ads_description {
    font-size: 1.2rem;
    font-weight: bolder;
    text-align: center;
}

.ads_img {
    margin: 0 auto 1.2rem;
    padding: 1.2rem 0;
    width: 95%;
}

.list_img {
    margin: 2rem auto 0;
    width: 80%;
}

:is(.FAI_logos, .logo_stores) >*:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.FAI_logos {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    padding-top: 1rem;
}

:is(.ads_orange,
.ads_free) {
    align-self: center;
    text-align: center;
    flex-basis: 50%;
}

:is(.ads_prime) {
    align-self: center;
    text-align: center;
    flex-basis: 70%;
}

:is(.ads_orange,
.ads_free, .ads_prime) a {
    display: block;
}

:is(.ads_orange,
.ads_free) img {
    width: 40%;
}

:is(.ads_orange,
.ads_free) img {
    width: 60%;
}

.logo_stores {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.app_store {
    height: 99%;
}

.app_google {
    height: 100%;
}

.app_store,
.app_google {
    padding: 1em;
    max-height: 5rem;
}

/* ****************** General style ******************* */
.mn_categories,
.mn_faq_slider {
    padding-top: 5em;
}

/*        EFFET FLOU SUR 1ER BLOC - A Modifier sélecteur si on change les blocs de place */
.first_bloc {
    box-shadow: 0 0 30px 30px var(--box-shadow-color);
    background-color:var(--box-shadow-color);
    width: 100vw;
}

/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {
    
    .mn_ads {
        margin: auto;
        width: 80%;
    }
    
    .ads_title {
        font-size: 2.6rem;
    }
    .ads_title_ {
        font-size: 2.6rem;
    }
    
    .ads_description {
        font-size: 1.25rem;
    }

    .list_img {
        display: flex;
        justify-content: center;
    }
    
    .list_img > * {
        flex-basis: 50%;
    }

    :is(.app_store,
    .app_google) {
        height: auto;
    }
    
    :is(.ads_orange,
    .ads_free) img {
        width: 60%;
    }

    :is(.ads_prime) img {
        width: 80%;
    }

    .logo_stores {
        align-items: center;
    }

}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {
    
    .mn_ads {
        max-width: 960px;
    }
    
    .ads_title {
        font-size: 3.5rem;
    }
    .ads_title_ {
        font-size: 3.5rem;
    }
    
    .ads_description {
        font-size: 1.7rem;
    }
}

/* ****************** Bar - ad ******************* */

.mn_bar-ad_slider, .mn_category_slider {
    background-color:var(--box-shadow-color);
}

    .mn_bar-ad {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
    }

        .bar-ad {
            border: solid medium var(--box-shadow-color);
            background-color: #ffffff7d;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: .5em;
        }

            .check_icon {
                color: var(--first-color);
                font-weight: 400;
                padding: 0 .5rem;
            }

/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .bar-ad {
        display: flex;
        align-items: center;
    }

        .check_icon {
            padding: .5rem;
        }
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .mn_bar-ad {
        display: flex;
        flex-wrap: nowrap;
    }

        .bar-ad:nth-child(1) {
            display: flex;
            justify-content: flex-end;
        }

        .bar-ad:nth-child(3) {
            display: flex;
            justify-content: flex-start;
        }

        .bar-ad {
            border: 0;
            font-size: 1.2rem;
        }

}

.mn_cards_slider {
    background-color:var(--box-shadow-color);
}

    .mn_cards {
        display: flex;
        width: 65%;
        margin: auto;
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

        .cards {
            padding: 1rem;
            background-color: var(--comments-color);
            border-radius: .5rem;
            cursor: pointer;
        }

            .title {
                text-align: center;
            }

            .text_1 {
                text-align: center;
                font-size: 2rem;
            }

            .text_2 {
                text-align: center;
                font-size: .7rem;
                padding-bottom: .5rem;
            }

            .button1 {
                background-color: var(--first-color);
                border-radius: 10px;
                width: 50%;
                font-size: .7rem;
                padding: .3rem 1rem;
                margin: 0 auto;
                text-align: center;
                color: var(--third-color);
            }

        .cards:hover {
            outline: solid thin var(--first-color);
            box-shadow: 5px 3px 10px -4px var(--first-color);
        }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .mn_cards {
        width: 50%;
    }

        .cards {
            border-radius: .8rem;
        }

            .cards p:nth-child(2) {
                font-size: 2.2rem;
            }

            .cards p:nth-child(3) {
                font-size: .9rem;
            }

            .cards a > div {
                font-size: .9rem;
            }

}

/* ****************** @media tablet pro: 1024px ******************* */


@media (min-width: 1024px) {

    .mn_cards {
        max-width: 960px;
        flex-direction: row;
        width: 80%;
        justify-content: space-between;
        padding-top: 2.5rem;
    }

        .cards {
            width: 35%;
        }

}

/* ******************** Styles category ******************** */


    .categories_title {
        text-align: center;
        font-family: medium;
        font-size: 1.6rem;
        line-height: 1.2;
        padding: .1rem .8rem;
    }

    .categories_description {
        text-align: center;
        font-size: 1.2rem;
        font-family: medium;
        line-height: 1.2;
        padding: .4rem 1.5rem;
    }

/* ******************** Categories hunting ******************** */

.slider {
    width: 90%;
    height: 9.5rem;
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .65rem .65rem 0;
}

    .slide_track {
        display: flex;
        width: calc(220px * 12);
        animation: slider 60s linear infinite;
    }
  
    .slide_track:hover {
        animation-play-state: paused;
        pointer-events: auto;
      }      

        .slide {
            height: 7.5rem;
            width: 220px;
            display: flex;
            align-items: center;
            padding-right: .65rem;
            perspective: 100px; 
        }

            .slide a {
                display: flex;
            }

                .slide h4 {
                    color: var(--third-color);
                    position: absolute;
                    z-index: 2;
                    bottom: 0;
                    padding: .65rem;
                    font-weight: initial;
                    font-size: 1.2rem;
                }

                .slide img {
                    width: 100%;
                    transition: transform 10s;
                    border-radius: 12px;
                    margin: auto;
                }

                .slide img:hover {
                    transform: translateZ(20px);
                }
  
  @keyframes slider {
    0% { transform: translateX(0);}
    100% { transform: translateX(calc(-220px * 6));}
  }

  /* ******************** Categories fishing ******************** */

.slider_fishing {
    width: 90%;
    height: 7.5rem;
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .slide_track_fishing {
        display: flex;
        width: calc(220px * 12);
        animation: slider_fishing 60s linear reverse infinite;
    }
  
    .slide_track_fishing:hover {
        animation-play-state: paused;
        pointer-events: auto;
      }      
  
  @keyframes slider_fishing {
    0% { transform: translateX(0);}
    100% { transform: translateX(calc(-220px * 6));}
  }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .mn_categories {
        width: 80%;
        margin: auto;
    }

        .categories_title {
            font-size: 2.6rem;
        }

        .categories_description {
            font-size: 1.25rem;
        }

}


/* ****************** @media tablet pro: 1024px ******************* */

  @media (min-width: 1024px) {

    .mn_categories {
        max-width: 960px;
    }

        .categories_title {
            font-size: 3.5rem; 
        }

        .categories_description {
            font-size: 1.7rem;
        }

}

/* ***************** Styles Comments ***************** */

.mn_comment, .mn_comment_slider {
    background-color:var(--box-shadow-color);
}

    .comment_title {
        font-family: medium;
        font-size: 1.5rem;
        line-height: 1.8;
        text-align: center;
    }

    .card {
        display: flex;
        flex-wrap: wrap;
        width: 92%;
        margin: 1.25rem auto;
        background-color: #ffffff7d;
        border-radius: .6rem;
        padding: .6rem;
    }

        .stars {
            width: 100%;
        }

            .frame_stars {
                width: clamp(60px, 100%, 200px);
                padding: .3rem .6rem .3rem;
            }

                .frame_stars svg {
                    width: 10%;
                    height: 10%;
                }

        .comments {
            font-size: .9rem;
            text-align: justify;
            line-height: 1.2;
            padding: .3rem .6rem .3rem;
            width: 100%;
        }

        .user_comment {
            display: flex;
            padding: 0 .3em;
            width: 100%;
        }

            .user_img {
                flex-basis: 20%;
                padding: .3rem;
            }

                .frame_img {
                    width: clamp( 50px, 80%, 100px);
                }

            .user_contenu {
                flex-basis: 80%;
                align-self: center;
                padding: 0 .3rem;
                flex-grow: 1;
            }

                .user_contenu h4 {
                    font-weight: bold;
                    font-size: 1rem;
                }

                .user_contenu p {
                    font-size: .9rem;
                }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .mn_comment_slider {
        padding-bottom: 1rem;
    }

        .mn_comment {
            width: 80%;
            margin: auto;
        }

            .comment_title {
                font-size: 2.6rem;
            }

            .comment_content {
                display: flex;
            }

                .card {
                    width: 30%;
                    box-shadow: 10px 8px 15px -5px rgb(221, 221, 221);

                }

                    .frame_stars svg {
                        width: 12%;
                        height: 12%;
                    }

                    .user_img {
                        flex-basis: 35%;
                    }

                    .user_contenu {
                        flex-basis: 65%;
                    }

                        .user_contenu h4 {
                            font-size: .9rem;
                        }

                        .user_contenu p {
                            font-size: .8rem;
                        }

                hr {
                    border: 0;
                }
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .mn_comment {
        max-width: 960px;
    }

        .comment_title {
            font-size: 3.5rem;
        }

        .user_img {
            flex-basis: 40%;
        }

        .user_contenu {
            flex-basis: 60%;
        }

            .user_contenu h4 {
                font-size: 1.1rem;
            }

            .user_contenu p {
                font-size: 1rem;
            }
}
/* ******************** Styles FAQ's ******************** */

.mn_faq_slider {
    background-color:var(--box-shadow-color);
}

    .faq_title {
        font-family: medium;
        font-size: 1.5rem;
        line-height: 1.8;
        text-align: center;
        padding-bottom: 1rem;
    }

    .faqs_titles {
        display: flex;
        font-weight: bold;
        justify-content: space-between;
        padding: .9rem;
        cursor: pointer;
    }

        .faqs_titles h4 {
            align-self: center;
            flex-basis: 85%;
            flex-grow: 1;
            font-size: 1.2rem;
        }
        @media (max-width: 320px) {
            .faqs_titles h4 {
                font-size: 1rem;
            }
            }

        .faq_btn {
            display: grid;
            flex-basis: 15%;
            height: 100%;
            padding: 0.4em;
            place-content: center;
            transition: 0.1s;
        }

            .faq_btn svg {
                height: 1.2em;
                width: 1.2em;
            }

        .btn_rotate {
            transform: rotate(45deg); 
        }

    .faqs_contents {
        font-size: 1.2rem;
        line-height: 1.3;
        text-align: justify;
        padding: .3rem .9rem;
        height: fit-content;
        opacity: 1;
        transition:  all 300ms ease-in-out;
    }

    .none {
        position: absolute;
        top: -399vh;
        transition: all .3s;
        opacity: 0;
        pointer-events: none;
    }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {
    
    .mn_faq {
        width: 80%;
        margin: auto;
    }

    .faq_title {
        font-size: 2.6rem;
    }

    .faqs_titles h4 {
        font-size: 1.5rem;
    }

    .faq_btn {
        padding: 1em;
    }

        .faq_btn svg {
            height: 1.35em;
            width: 1.35em;
        }

}


/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .mn_faq {
        max-width: 960px;
    }

        .faq_title {
            font-size: 3.5rem;
        }

            .faqs_titles h4 {
                font-size: 1.8rem;
            }

            .faq_btn svg {
                height: 1.5em;
                width: 1.5em;
            }

}

/* ******************** Styles film ******************** */

.mn_film_slider {
    background-color:var(--box-shadow-color);
}

    .films_title {
        font-family: medium;
        font-size: 1.6rem;
        line-height: 1.3;
        text-align: center;
        padding: 3rem 1.2rem .5rem;
    }

    .films_description {
        font-size: 1.2rem;
        font-weight: bolder;
        text-align: center;
    }

    .films_hunting_fishing {
        display: flex;
        flex-wrap: wrap;
        gap: .2rem .5rem;
        /* gap: 2% 2%; */
        height: 100%;
        justify-content: center;
        margin: 1.4rem auto 0;
        transition: 0.3s;
        width: 98%;
    }

        .film {
            /* padding-bottom: 1.5rem; */
            transition: transform 330ms ease-in-out;
            width: 31%;
        }

        .film:hover {
            transform: scale(1.02);
        }

        .film img {
            box-shadow: 5px -3px 10px -4px gray;
        }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {
    
    .mn_films {
        width: 80%;
        margin: auto;
    }

        .films_title{
            font-size: 2.6rem;
        }

        .films_description {
            font-size: 1.25rem;
        }
    
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .mn_films {
        max-width: 960px;
    }

        .films_title{
            font-size: 3.5rem;
        }

        .films_description {
            font-size: 1.7rem;
        }
}

/* ***************** Styles Footer ***************** */

.copyright {
    text-align: center;
    margin-top: 0px;
    padding: 12px 0 46px 0;
}

.ft_footer_slider {
    border-top: solid thin var(--line-color);
    background-color:var(--box-shadow-color);
}

.ft_footer {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px 80px;
}

.footer_logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

    .ft_logo {
        margin: auto;
        width: 40%;
    }

        .frame_ft_logo {
            margin: auto;
            width: clamp(70px, 100%, 150px);
        }

    .container_apple_google {
        margin: auto;
        padding-bottom: 30px;
        width: 80%;
    }

        .frame_apple_google {
            display: flex;
            justify-content: center;
            margin: auto;
            width: clamp(100px, 100%, 300px);
        }
        
        .apple {
            padding-right: 5px;
        }
        
        .google {
            padding-left: 5px;
        }
        
        .apple img {
            height: 50px;
            width: 150px;
        }

        .google img {
            height: 50px;
            width: 150px;
        }

    .footer_zone300 {
        padding: 10px;
        line-height: 1.6;
        max-height: 220px;
    }

    .h3 {
        font-weight: normal;
    }
        .h3_title {
            font-family: 'medium';
            font-weight: normal;
            font-size: 1.3rem;
        }

        .footer_zone300 {
                list-style: none !important;
            }

            .li_content {
                list-style: none;
                text-decoration: none;
            }

            .footer_zone300 li a {
                list-style: none;
                text-decoration: none;
            }

            .footer_zone300 li a:hover {
                color: #fba00b !important;
            }

                .link_content {
                    /* font-weight: 600; */
                    color: var(--footer-txt-color);
                }

        .footer_zone300_social {
            width: 10rem;
        }

        .footer_container {
            width: 100%;
        }

            .frame_footer {
                display: flex;
                justify-content: space-between;
                width: clamp(30px, 100%, 150px);
            }

                .facebook_footer,
                .instagram_footer,
                .youtube_footer,
                .tiktok_footer {
                    padding: 2px;
                    width: 100%;
                }

                    .facebook_footer svg,
                    .instagram_footer svg, 
                    .youtube_footer svg,
                    .tiktok_footer svg {
                        fill: var(--footer-txt-color);
                        flex-grow: 1;
                    }


/* ****************** @media mini téléphone: max400px ******************* */

@media (max-width: 400px) {
    .footer_logo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: auto;
    }
    
    .apple img {
        height: 34px;
        width: 108px;
    }

    .google img {
        height: 34px;
        width: 108px;
    }
}

/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {
    .ft_footer {
        margin: auto;
        justify-content: space-around;
        padding: 15px 20px;
        /* padding-top: 2rem;
        padding-bottom: 3.5rem; */
    }

        .footer_logo {
            margin: -17px 0 0 0;
            width: 20%;
        }

            .ft_logo {
                width: 100%;
            }

            .container_apple_google {
                max-width: 150px;
                width: 100%;
            }

                .frame_apple_google {
                    flex-wrap: wrap;
                }

                    .apple {
                        padding-right: 0;
                    }

                    .google {
                        padding-left: 0;
                    }

            .h3_title {
                font-size: 1rem;
            }

                .link_content {
                    font-weight: normal;

                }
            
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .ft_footer {
        max-width: 1440px;
    }

    .footer_zone300 {
        padding: 20px;
    }

        .h3_title {
            font-size: 1.1rem;
        }

            .link_content {
                font-weight: normal;
            }
            
        .facebook_footer:hover,
        .instagram_footer:hover,
        .youtube_footer:hover,
        .tiktok_footer:hover {
            opacity: 90%;
        }

}

/* ****************** Email ******************* */

.email_news_letter_container
{
    max-width: 640px;
    padding-bottom: 4rem;
    margin: auto;
    width: 80%;
}

.email_text {
    color: rgb(172, 172, 172);
    margin: 1em 0;
}

.mn_email > #btn_email
{
    flex-basis: 25%;
    background-color: var(--btn-color);
    border-radius: 3px;
    text-align: center;
    color: white;
    display: block;
    width: 200px;
    margin: 20px auto;
}

.mn_email > * > div
{
    padding: 15px;
    border: none;
}

.mn_email > * > input
{
    padding: 16px;
    border: none;
}

.mn_email > .email_input 
{
    flex-grow: 1;
}

.mn_email > .email_input input
{
    width: 100%;
    border-radius: 3px;
}

.mn_email .btn_center
{
    text-align: center;
    display: block;
    max-width: 150px;
    background: var(--btn-color);
    border-radius: 3px;
    color: white;
    cursor: pointer;
    margin: auto;
    padding: 1rem;
    transition: 0.3s;
}

    .mn_email .btn_center:hover
    {
        background: var(--btn-color-hover);
    }

.news_letter
{
    margin-top: 25px;
    display: flex;
}

.news_letter input[type=checkbox]
{
    cursor: pointer;
}

.news_letter label
{
    margin-left: 10px;
    color: rgb(172, 172, 172);
    cursor: pointer;
}


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .email_news_letter_container
    {
        width:100%;
    }

    .mn_email {
         width: 100%;
         display: flex;
    }

    .mn_email > #btn_email {
        border-radius: 0 3px 3px 0;
        cursor: pointer; 
        margin: 0 auto;
        transition: 0.3s;
    }

    .mn_email >  #btn_email:hover {
        background-color: var(--btn-color-hover);
    }
    
    .mn_email > .email_input input
    {
        border-radius: 3px 0 0 3px;
    }

} 

/* ****************** Navbar-bottom ******************* */
/* .nv_bar { */
    .nav_bottom_flex {
    /* align-items: center; */
    background-color: var(--second-color-opacity);
    border-radius: 5px;
    bottom: 0;
    color: #fff;
    display: flex;
    font-family: 'light';
    justify-content: space-between;
    left: 0;
    line-height: 1 !important;
    /* height: var(--bar-height); */
    padding: 10px;
    position: fixed;
    width: 100%;
    z-index: 99;
}

    .nav_space_left {
       width: 30%; 
    }
    
    .nav_bt_btn {
        display: flex;
        gap: 2%;
        width: 65%;
    }

    .nv_bar_contact {
        align-items: center;
        display: flex;
        gap: 2%;
        height: 100%;
        justify-content: space-around;
        margin: auto;
        width: 50%;
    }

        .frame_bar_contact {
            display: flex;
            justify-content: space-around;
        }

            .nv_bar_circle {
                align-items: center;
                /* border: thin solid var(--third-color); */
                border-radius: 100%;
                display: flex;
                height: 50px;
                justify-content: center;
                width: 50px;
            }

        .nv_bar_offer_btn
        {
            width: 50%;
            z-index: 1;
        }

        .nv_bar_offer_btn a 
        {
            border-radius: 5px;
            background: var(--btn-color);
            color: white;
            display: block;
            filter: alpha(opacity=100);
            opacity: 1;
            padding: 15px 5px;
            text-align: center;
        }

            .offers_bar {
                font-size: 1rem !important;
                color: var(--txt-color);
                padding: .9rem;
                text-align: center;
                background-color: var(--btn-color);
                border-radius: .1rem;
                opacity: 1;
            }

@media (min-width: 768px) {
    .nav_bottom_flex
    {
        justify-content: space-around;
    }
    .frame_bar_contact {
        gap: 40%;
    }
    .nav_bt_btn {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .nav_bottom_flex{
        display: none;
    }
}

/* ****************** Navbar-Top ******************* */

.nv_navbar {
    background-color: var(--second-color-opacity);
    border-radius: .2rem;
    color: #fff;
    display: flex;
    font-family: 'light'; 
    justify-content: space-between;
    left: 0;
    line-height: 1 !important;
    padding: 10px;
    position: fixed;
    top: 0;
    /* height: var(--header-height-mobile); */
    width: 100%;
    z-index: 99;
}
    .nv_frame_cnx {
        display: flex;
        gap: 2%;
        justify-content: space-around;
        max-height: 40px;
}

    .nv_frame_cnx a 
    {
        display: block;
        height: 100%;
        margin: auto;
        padding: 0.7rem !important;
        text-align: center;
        width: 100%;
    }
    
    .nv_frame_cnx a div
    {
        text-align: center;
    }

    .nv_navbar_logo {
        align-items: center;
        display: flex;
        justify-content: center;
        overflow: hidden;
        width: 30%;
    }

        .nv_frame_logo {
            width: clamp(50px, 80%, 150px);
        }

    .nv_navbar_contact {
        display: none;
    }

    .nv_navbar_connection {
        width: 65%;
    }
    
    .nv_navbar_btn {
        background-color: var(--btn-color);
        border-radius: .2rem;
        color: white;
        display: none;
        transition: 0.3s;
        width: 50%;
    }

        .btn_offers {
            margin: auto;
        }

            .offers {
                padding: .7rem 2.5rem;
                font-size: 1rem !important;
            }

        .nv_navbar_login {
            border: solid thin var(--third-color);
            border-radius: .2rem;
            color: white;
            display: flex;
            transition: 0.3s;
            width: 50%;
        }
          
        .nv_frame_cnx .shop_btn
        {
            display: flex;
        }

        .nv_frame_cnx .shop_btn:hover
        {
            color: black;
        }

        .nv_frame_cnx .shop_btn div:nth-child(1)
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .nv_frame_cnx .shop_btn div:nth-child(2)
        {
            width: 100%;
            text-align: center;
        }

        .nv_navbar_shop {
            border: solid thin var(--third-color);
            border-radius: .2rem;
            color: white;
            display: flex;
            flex-direction: row;
            height: 40px;
            transition: all 0.7s;
            width: 50%;
        }

        .nv_navbar_shop path
        {
            transition: 0.3s;
        }

            .link_login {
                margin: auto;
            }

                .connection {
                    /* padding: .7rem 1rem; */
                }

                /* Pour désactiver les bugs liés aux librairies externes */
                .nv_frame_cnx div:hover {
                    color: #fff !important;
                }
                .nv_frame_cnx div a:hover {
                    color: #fff !important;
                }
/* ****************** @media Mini mobiles: 360px ******************* */
/* @media (max-width: 367px) {
    .nv_bar_offer_btn > a > div
    {
        font-size: 1rem;
        font-weight: 100;
    }

} */

@media (max-width: 366px) {
    .nv_navbar_connection
    {
        font-size: 0.8rem;
    }

    .nv_frame_cnx div {
        padding-top: 2px;
    }

    .shop_btn svg {
        height: 17px;
        padding-right: 3px;
        padding-bottom: 2px;
        width: 15px;
    }
}

/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {
    .nv_navbar
    {
        justify-content: space-around;
    }
    .shop_btn{
        display: none;
    }
    .nv_navbar_connection {
        width: 50%;
    }
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .nv_frame_logo {
        width: clamp(50px, 40%, 150px);
    } 

    .nv_navbar_contact {
        display: flex;
        justify-content: space-around;
        width: 20%;
    }

        .contact_email_nav {
            display: flex;
            flex-basis: 20%;
            justify-content: center;
            align-items: center;
        }

            .frame_contact_email {
                width: clamp(15px, 100%, 50px);
            }

        .contact_phone_nav {    
            flex-basis: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .frame_contact_phone {
                width: clamp(15px, 100%, 250px);
                display: flex;
                justify-content: flex-end;
            }

                .phone_nav {
                    justify-content: end;
                }

                .numero_nav {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 13px;
                }

                    .numero_nav a {
                        color: var(--third-color);
                        font-size: 1.2rem;
                    }

    .nv_navbar_connection {
        margin: auto 0;
        width: 30%;
    }

    .nv_navbar_shop:hover
    {
        background-color: white;
        color: black;
    }

    .nv_navbar_shop:hover path
    {
        fill: black;
    }

    .nv_navbar_login:hover {
        background-color: white;
        color: black; 
    }

    /* .nv_frame_cnx:hover {
        color: black !important;
    }

    .nv_frame_cnx a:hover {
        color: black !important;
    }

    .nv_frame_cnx a div:hover {
        color: black !important;
    } */

    /* Pour désactiver les bugs liés aux librairies externes */
    .nv_frame_cnx div:hover {
        color: black !important;
    }
    .nv_frame_cnx div a:hover {
        color: black !important;
    }


        /* .nv_frame_cnx {
            display: flex;
            justify-content: space-around;
            gap: 2%;
        } */
        /* width: clamp(50px, 100%, 400px); */

        .nv_frame_cnx .shop_btn
        {
            display: flex;
        }

        .nv_frame_cnx .shop_btn div:nth-child(1)
        {
            display: flex;
            justify-content: center;
            align-items: center;
            /* padding: 0 0.4rem; */
        }
        .nv_frame_cnx .shop_btn div:nth-child(2)
        {
            /* padding: 0.7rem 0.4rem; */
            width: 100%;
            text-align: center;
        }

        .nv_frame_cnx a div {
            /* padding: 0.7rem 0.4rem; */
        }

        /* background-color: var(--btn-color); */
        .nv_navbar_btn {
            width: 45%;
            border-radius: .2rem;
            display: flex;
            /* padding: 0; */
            transition: 0.3s;
        }

        .nv_navbar_btn:hover{ background-color: var(--btn-color-hover) }

            .btn_offers {
                margin: auto;
            }

            .offers {
                padding: .7rem 2.5rem;
                font-size: 1rem !important;
            }

        .nv_navbar_login {
            margin: 0;
            padding: 0;
            width: 45%;
        }

        .nv_navbar_shop {
            width: 45%;
            margin: 0;
            display: flex;
        }
            .connection {
                /* padding: .7rem 2rem; */
                font-size: 1rem !important;
            }
}
    




/* ****************** Title - offre ******************* */

.mn_title_offre_slider {
    background-color:var(--box-shadow-color);
}

    .mn_title_offre_logo {
        width: 100%;
        padding-top: 6.5rem;
    }

        .frame_title_offre_logo {
            width: clamp(100px, 40%, 250px);
            margin-left: auto;
            margin-right: auto;
        }

    .mn_title_offre_content {
        color: var(--second-color);
        font-family: 'medium';
        font-size: 2rem;
        padding: 0 .5rem;
        text-align: center;
        margin-top: 5%;
        line-height: 1.4;
    }

    .mn_title_offre_label {
        padding-top: .5rem;
        padding-bottom: 1rem;
        text-align: center;
    }

        .mn_title_offre_label label {
            color: var(--second-color);
            font-size: 1rem !important;
        }

.mn_title_offre 
{
    padding-top: 30px;
}
/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .mn_title_offre {
        width: 80%;
        margin: auto;
    }

        .mn_title_offre_logo {
            width: 50%;
            margin: auto;
        }

        .mn_title_offre_content {
            font-size: 2.8rem;
            text-transform: none;
        }
        
            .mn_title_offre_label label {
                font-size: 1.2rem;
            }
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) { 

        .mn_title_offre {
            max-width: 960px;
        }

        .mn_title_offre_content {
            font-size: 3.5rem;
            margin-top: 1.5rem;
        }

            .mn_title_offre_label {
                padding-bottom: 2em;
            }

                .mn_title_offre_label label {
                    font-size: 2rem;
                }

}



/* ****************** Title ******************* */

    .mn_title_logo {
        width: 100%;
        padding-top: 6.5rem;
    }

        .frame_title_logo {
            width: clamp(100px, 40%, 250px);
            margin-left: auto;
            margin-right: auto;
        }

    .mn_title_content {
        color: var(--txt-color);
        font-family: var(--font);
        font-size: 1.8rem;
        padding: 0 .5rem;
        /* text-transform: uppercase; */
        text-align: center;
        margin-top: 5%;
        line-height: 1.4;
    }

    .mn_title_label {
        padding-top: .5rem;
        padding-bottom: 1rem;
        text-align: center;
    }

        .mn_title_label label {
            color: var(--third-color);
            font-size: 1.25rem;
        }


/* ****************** @media Mini tablet: 768px ******************* */

@media (min-width: 768px) {

    .mn_title {
        width: 80%;
        margin: auto;
    }

        .mn_title_content {
            font-size: 2.5rem;
            /* text-transform: none; */
        }
        
            .mn_title_label label {
                font-size: 1.45rem;
            }
}

/* ****************** @media tablet pro: 1024px ******************* */

@media (min-width: 1024px) {

    .mn_title {
        max-width: 960px;
    }

    .mn_title_content {
        font-size: 4rem;
    }

    .mn_title_label label {
        font-size: 1.5rem;
    }

}

.mn_price_slider {
    background-color:var(--box-shadow-color);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

    .description {

        text-align: center;
        padding-bottom: .3rem;
    }

    .images {
        display: flex;
        justify-content: center;
    }
    

/* ****************** @media Mini tablet: 768px ******************* */


/* ****************** @media tablet pro: 1024px ******************* */

/*********** SLIDER HEADER ****************/

#nw_header_special_trial {
    font-size: 20px;
    margin: 4vh 4vw -4vh 4vw;
    text-align: center;
}

@media ( min-width: 768px ) {
    #nw_header_special_trial {
        font-size: 26px;
    }
}

@media ( min-width: 1000px ) {
    #nw_header_logo {
        padding-top: 20vh !important;
    }

    #nw_header_special_trial {
        font-size: 32px;
    }
}

.nw_header_slider {
    /* background: linear-gradient( to bottom, #001212 80%, #003838 ); */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;    
}

    .nw_header_slider img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        opacity: 0;
        transition: opacity 2s;
        z-index: 0;
        width: 100vw;
    }

    .nw_header_slider img.show {
        opacity: 1;
        transition: opacity 2s;
        width: 100vw;
    }

#nw_header_slider_phone_plus,
#nw_header_slider_tab,
#nw_header_slider_web,
#nw_header_slider_web_plus {
    display: none;
}

#nw_header_slider_phone {
    display: block;
}

@media ( min-width: 360px ) {
    #nw_header_slider_phone,
    #nw_header_slider_tab,
    #nw_header_slider_web,
    #nw_header_slider_web_plus {
        display: none;
    }

    #nw_header_slider_phone_plus {
        display: block;
    }
}

@media ( min-width: 576px ) {
    #nw_header_slider_phone,
    #nw_header_slider_phone_plus,
    #nw_header_slider_web,
    #nw_header_slider_web_plus {
        display: none;
    }

    #nw_header_slider_tab {
        display: block;
    }
}

@media ( min-width: 992px ) {
    #nw_header_slider_phone,
    #nw_header_slider_phone_plus,
    #nw_header_slider_tab,
    #nw_header_slider_web_plus {
        display: none;
    }

    #nw_header_slider_web {
        display: block;
    }
}

@media ( min-width: 1200px ) {
    #nw_header_slider_phone,
    #nw_header_slider_phone_plus,
    #nw_header_slider_tab,
    #nw_header_slider_web {
        display: none;
    }

    #nw_header_slider_web_plus {
        display: block;
    }
}



/* *********** POPUP INFO ************** */
.blur {
    filter: blur(4px);
    -webkit-filter: blur(4px);
    position: relative;
    z-index: 1;   
}

#popup-info-mask {
    height: 100vh;
    position: fixed;
    width: 100vw;
    z-index: 2;
}

#popup-info-content {
    background-color: #003838;
    color: #fff;
    display: flex;  
    height: 455px;
    left: 50vw;
    position: fixed;
    top: 50vh;
    transform: translate( -50%, -50% );
    width: 737px;
    z-index: 2;      
}

#popup-info-content-sm {
    background-color: #003838;
    color: #fff;
    display: flex;
    flex-direction: column;  
    height: 430px;
    left: 50vw;
    position: fixed;
    top: 50vh;
    transform: translate( -50%, -50% );
    width: 309px;
    z-index: 2;     
}

#popup-info-body,
#popup-info-body-sm {
    align-items: center;
    display: flex;
    flex-direction: column;   
}

#popup-info-body {
    width: 60%;
}

#popup-info-img {
    width: 40%;
}

#popup-info-body-sm {
    height: 60%;
}

#popup-info-img-sm {
    height: 40%;
}

    #popup-info-body img,
    #popup-info-body-sm img {
        display: inline-block;
        height: 42px;    
    }

#popup-info-img-full img,
#popup-info-img-full-sm img {
    width: 100%;
}

#popup-info-part-1 {
    padding: 64px 0;
}

#popup-info-part-1-sm {
    padding: 26px 0;
}

#popup-info-part-2 {
    font-size: 24px;
}

#popup-info-part-2-sm {
    font-size: 18px;
}

#popup-info-part-3 {
    padding: 7px 0;
    font-size: 40px;
}

#popup-info-part-3-sm {
    padding: 7px 0;
    font-size: 28px;
}

#popup-info-part-4 {
    font-size: 24px;
}

#popup-info-part-4-sm {
    font-size: 18px;
}

#popup-info-part-5 { 
    font-size: 24px;
    padding-bottom: 7px;
    padding-top: 64px;
}

#popup-info-part-5-sm { 
    font-size: 16px;
    padding-bottom: 7px;
    padding-top: 26px;
}

#popup-info-part-6 {
    font-size: 24px;
    padding-bottom: 128px;
}

#popup-info-part-6-sm {
    font-size: 16px;
    padding-bottom: 26px;
}

#popup-info-close-btn,
#popup-info-close-btn-sm {
    background-color: #fba00b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    position: absolute;
    right: -13px;
    top: -13px;
    width: 26px;
}

#popup-info-content,
#popup-info-content-sm,
#popup-info-close-btn:hover,
#popup-info-close-btn-sm:hover {
    cursor: pointer;
}

@media ( max-width: 992px ) {
    #popup-info-content {
        display: none;
    }

    #popup-info-content-sm {
        display: flex;
    }    
}

@media ( min-width: 992px ) {
    #popup-info-content {
        display: flex;
    }

    #popup-info-content-sm {
        display: none;
    }    
}

/* Pour contrecarrer les hidden sur les pages */
.hidden {
    visibility: visible !important; }