.mega-item{

    text-align:center;

}



.mega-item .mega-title{

    display:block;

    margin-top:10px;

}



.mega-item .mega-label{

    display:inline-block;

    margin-top:8px;

    padding:6px 12px;



    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;



    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#091133);



    border-radius:30px;



    box-shadow:

        0 3px 8px rgba(0,0,0,.15);



    transition:.3s ease;

}









/* =========================

HEADER

========================= */



.header{

    position:fixed;



    top:0;

    left:0;



    width:100%;

    height:100px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    padding:0 60px;



    z-index:1000;



    background: rgb(6 46 53);



    backdrop-filter:blur(8px);



    transition:

        top .35s ease,

        background .35s ease,

        backdrop-filter .35s ease;

}



/* =========================

HEADER VISIBLE AU SCROLL

========================= */



.header.show{

    top:0;

}



.header-wave{

position:absolute;

bottom: -20px;

left:0;

width:100%;

line-height:0;

}



.header-wave svg{

display:block;

width:100%;

height:35px;

}



.header-wave path



 {

    fill: #062e35;

}



/* =========================

LOGO

========================= */



.logo img



 {

    height: 140px;

    background-color: #fff;

    border-radius: 100%;

    padding: 0.2rem;

}



.nav-logo{

    display:none;

    text-align:center;

    margin-bottom:40px;

}



.nav-logo img{

    height:115px;

}



/* =========================

NAVIGATION DESKTOP

========================= */



.nav{

    position:static;

    transform:none;



    flex:1;



    display:flex;

    justify-content:center;

}



.nav ul{

    list-style:none;



    display:flex;

    align-items:center;

    justify-content:center;



    gap:50px;

}



.nav li{

    position:relative;

}



.nav a{

    color:#fff;

    text-decoration:none;



    font-size:18px;

    letter-spacing:2px;

    text-transform:uppercase;



    display:inline-flex;

    align-items:center;

    gap:6px;



    transition:0.3s;

}



.nav a:hover{

    opacity:0.7;

}



/* =========================

SOCIAL

========================= */



.social{

    display:flex;

    gap:20px;

}



.social img{

    width:24px;

   

}



/* =========================

CHEVRON

========================= */



.chevron{

    display:inline-block;



    width:6px;

    height:6px;



    border-right:2px solid white;

    border-bottom:2px solid white;



    transform:rotate(45deg);



    transition:transform .3s ease;



    pointer-events:none;

}



.mega-parent:hover .chevron{

    transform:rotate(-135deg);

}



/* =========================

MEGA MENU DESKTOP

========================= */



.mega-menu{

    position:absolute;



    top:90px;

    left:50%;



    transform:translateX(-50%);



    display:flex;

    gap:40px;



    padding:25px 35px;



    background:#fff;



    backdrop-filter:blur(8px);



    border-radius:8px;



    opacity:0;

    visibility:hidden;



    transition:0.25s;

}



.mega-menu::before{

    content:"";



    position:absolute;



    top:-9px;

    left:50%;



    transform:translateX(-50%);



    border-left:10px solid transparent;

    border-right:10px solid transparent;

    border-bottom:10px solid #fff;

}



@media(min-width:1001px){



    .mega-parent:hover .mega-menu{

        opacity:1;

        visibility:visible;

    }



}



.mega-item{

    display:flex;

    flex-direction:column;

    align-items:center;



    text-decoration:none;



    color:#fff;



    font-size:18px;

}



.mega-item img{

    

    height:150px;



    object-fit:cover;



    margin-bottom:8px;



    border-radius:6px;



    transition:0.3s;

}



.mega-item img:hover{

    transform:scale(1.05);

}



.mega-item span{

    color:#0a0a0a;

    text-shadow:0 0 2px #ffffff;

}



/* =========================

BURGER

========================= */



.burger{

    display:none;



    width:30px;

    height:22px;



    flex-direction:column;

    justify-content:space-between;



    cursor:pointer;



    z-index:2000;

}



.burger span{

    width:100%;

    height:3px;



    background:#fff;



    border-radius:3px;



    transition:0.35s;

}



.burger.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}



.burger.active span:nth-child(2){

    opacity:0;

}



.burger.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}



/* =========================

RESPONSIVE

========================= */



@media(max-width:1000px){



    .header{

        height:80px;

        padding:0 20px;

    }



    /* logo mobile */



    .nav-logo{

        display:block;

    }



    /* burger */



    .burger{

        display:flex;

    }



    /* navigation mobile */



    .nav{

        position:fixed;



        top:0;

        left:0;



        width:100%;

        height:100vh;



        background:rgba(0,0,0,0.92);



        transform:translateX(100%);

        transition:transform .35s ease;



        overflow-y:auto;



        padding-top:120px;

    }



    .nav.active{

        transform:translateX(0);

    }



    /* menu vertical */



    .nav ul{

        flex-direction:column;

        align-items:flex-start;



        gap:35px;



        padding-left:40px;

    }



    .nav a{

        display:inline-flex;

        align-items:center;

        gap:6px;

    }



    /* social hidden */



    .social{

        display:none;

    }



    /* mega menu mobile */



    .mega-menu{

        position:static;



        transform:none;



        opacity:1;

        visibility:visible;



        display:none;

        flex-direction:column;

        align-items:center;



        gap:20px;



        width:100%;



        padding-top:20px;

    }



    .mega-parent.open .mega-menu{

        display:flex;

    }



    .mega-parent.open .chevron{

        transform:rotate(-135deg);

    }



    /* cartes mega menu */



    .mega-item{

        display:flex;

        align-items:center;



        gap:15px;



        width:100%;

        max-width:260px;



        opacity:0;

        transform:translateY(15px);



        animation:megaFade 0.5s ease forwards;

    }



    .mega-item img{

        width:180px;

        height:110px;



        object-fit:cover;



        border-radius:6px;



        flex-shrink:0;

    }



    .mega-item:nth-child(1){

        animation-delay:0.05s;

    }



    .mega-item:nth-child(2){

        animation-delay:0.15s;

    }



    .mega-item:nth-child(3){

        animation-delay:0.25s;

    }



}



/* =========================

ANIMATIONS

========================= */



@keyframes megaFade{



    from{

        opacity:0;

        transform:translateY(15px);

    }



    to{

        opacity:1;

        transform:translateY(0);

    }



}



.header-acompte{

    margin-left:auto;

    margin-right:20px;

}



#btn-acompte{

    display:inline-block;

    background:#ff6b00;

    color:#fff;

    padding:12px 25px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.3s;

}



#btn-acompte:hover{

    background:#e65c00;

    transform:translateY(-2px);

}







/* =========================

MENU MOBILE V2

========================= */



.mobile-menu{

    display:none;

}



@media(max-width:1000px){





    .mobile-logo{



    text-align:center;



    margin-bottom:40px;

}



.icone-mobile{

    

    display: flex;

    align-items: center;



}



.mobile-panel h2{

    margin:20px 0;



    font-size:14px;



    font-weight:700;



    letter-spacing:2px;



    text-transform:uppercase;



    color:rgba(255,255,255,.5);

}



    .mobile-panel svg {

        width: 30px;

        height: 42px;

        stroke: #49c7ea;

        stroke-width: 2;

        margin-right: 20px;

        flex-shrink: 0;

        margin-top: 0rem;

    }



.mobile-panel a{

    display:flex;

    align-items:center;

}



.mobile-panel i{



    width:40px;



    margin-right:15px;



    text-align:center;



    font-size:26px;

}



.mobile-logo img{



    width:160px;

    max-width:80%;

    margin-top:-6rem;

}



        .nav{

        display:none;

    }



 .mobile-menu{



    display:block;



    position:fixed;

    top:0;

    right:-100%;



    width:100%;

    height:100vh;



    background-color:#062e35;



    background-image:url('http://lamonnaiedupeuple.fr/wp-content/uploads/2026/06/vague.png');

    background-repeat:no-repeat;

    background-position:bottom center;

    background-size:100% auto;



    z-index:99999;



    transition:right .35s ease;

}



    .mobile-menu.active{

        right:0;

    }



   .mobile-panel{



    position:absolute;



    top:0;

    left:100%;



    width:100%;

    height:100%;



    padding:120px 30px 40px;



    overflow-y:auto;



    transition:left .35s ease;

}



.mobile-panel.active{

    left:0;

}



.mobile-panel.left{

    left:-100%;

}



    .mobile-panel a{

        display:flex;

        justify-content:space-between;

        align-items:center;



        width:100%;



        padding:18px 0;



        color:#fff;

        text-decoration:none;



        font-size:22px;



        border-bottom:1px solid rgba(255,255,255,.12);

    }



}



@media(max-width:1000px){



    .header-wave{

        display:none;

    }



}





@media(max-width:1000px){



    .header-acompte{

        display:none;

    }



  .mobile-bouee-item{



    display:flex;

    align-items:center;



    gap:15px;

}



.mobile-bouee-item img{



    width:60px;

    height:60px;



    object-fit:cover;



    border-radius:8px;



    flex-shrink:0;

}



.mobile-bouee-item .mobile-arrow{



    margin-left:auto;

} 



.mobile-bouees-gallery,.mobile-bateaux-gallery{



    display:flex;



    gap:12px;



    overflow-x:auto;



    margin-top:25px;



    padding-bottom:10px;

}



.mobile-bouees-gallery img,.mobile-bateaux-gallery img{



    width:140px;



    height:80px;



    object-fit:cover;



    border-radius:10px;



    flex-shrink:0;

}



.mobile-close{



    position:absolute;



    top:25px;

    right:25px;



    color:#fff;



    font-size:42px;



    font-weight:300;



    cursor:pointer;



    z-index:999999;

}



.feature-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    text-align: center;

    margin: auto;

}



.footer-bottom {

    display: flex;

    align-items: center;

    justify-content:center!important;

    gap: 20px;

    flex-wrap: wrap;

}



.mobile-promo{



    text-align:center;



    margin:25px 0 35px;

}







.mobile-promo p{



    display:flex;



    align-items:center;



    justify-content:center;



    gap:12px;



    color:#fff;



    font-size:18px;



    line-height:1.4;



    margin-bottom:12px;

}



.mobile-promo svg{



    width:24px;



    height:24px;



    stroke:#ff8a00;



    flex-shrink:0;

}



.mobile-promo a{



    color:#ff8a00;



    text-decoration:none;



    font-weight:700;



    text-transform:uppercase;



    letter-spacing:1px;

}





/* excursion carte */



    .embs-sidebar



 {

        order: 0!important;

    }





    .embs-sidebar {

    width: 95%!important;

    overflow-y: auto;

    margin: auto;

}







#embs-carte-front {

    width: 100%;

    height: 700px;

    border-radius: 20px;

    z-index: 1;

}



.floating-book-btn {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 1!important;

    background: #ff7a00;

    color: #fff;

    padding: 15px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    font-size: 28px;

    box-shadow: 0 8px 25px rgba(0,0,0,.25);

    transition: .3s;

}







.mobile-panel::after{



    content:"";



    position:absolute;



    top:0px;

    left:0px;



    width:100%;

    height:100%;



    background-image:url('http://lamonnaiedupeuple.fr/wp-content/uploads/2026/05/bg-mouette.png');



    background-repeat:no-repeat;

    background-size:contain;



    opacity: 0.2;



    pointer-events:none;



    z-index:0;

}







.mobile-promo svg{



    width:38px!important;



    height:38px;



    stroke:#ff8a00!important;

}



.promo-icon::after{



    content:"((";



    color:#ff8a00;



    margin-left:4px;



    font-size:18px;



    position:relative;



    top:-3px;

}



.activities-grid {

    display: grid;

    grid-template-columns: 100%!important;

    justify-content: center;

    gap: 30px;

}



}









.logo img {

    height: 92px;

    background-color:transparent;

    border-radius: 0%;

    padding: 0rem;

}



/*TABLETTE*/
@media (min-width:1024px) and (max-width:1199px){
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    z-index: 10000;
   
    backdrop-filter: blur(8px);
    transition: top .35s ease, background .35s ease, backdrop-filter .35s ease;
}

.nav a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: 0.3s;
}

.header-acompte {
    margin-left: auto;
    right: 41px;
    /* display: none; */
    font-size: 12px;
    position: absolute;
}

.social {
    display: none;
    gap: 20px;
}

.mega-item img {
    height: 90px;
    object-fit: cover;
    margin-bottom: 8px;
    border-radius: 6px;
    transition: 0.3s;
}

.hero {
    position: relative;
    width: 100%;
    height: 106vh!important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-top: 6rem;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(431px, 20px))!important;
    justify-content: center;
    gap: 30px;
}

    .footer-container{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr!important;
    }

    .footer-logo img {
    width: 90px!important;
    margin-bottom: 25px;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
    background: #fff;
    border-radius: 100%;
    padding: 0.2rem;
}


.footer-social-icons

 {
    display: flex;
    gap: 1px!important;
    margin-top: 25px;
}

.footer-col h3 {
    position: relative;
    color: #ffe600;
    font-size: 12px!important;
    font-weight: 800;
    margin-bottom: 35px;
    text-transform: uppercase;
}

.footer-col a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 12px!important;
    transition: 0.3s ease;
    
}

.footer-col p {
    color: rgba(255,255,255,0.88);
    font-size: 12px!important;
    line-height: 1.7;
}

.feature-item p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 12px!important;
    line-height: 1.6;
}

    .footer-features

 {
        grid-template-columns: 1fr 1fr 1fr 1fr!important;
    }


    .footer-video {
    position: relative;
    width: 80px!important;
    height: 80px!important;
    border-radius: 50%;
    overflow: hidden;
    border-radius: 49%;
    box-shadow: 0 0 0 8px rgba(82, 219, 255, 0.05), 0 0 35px rgba(0, 191, 255, 0.18);
}


    .activity-container {
        grid-template-columns: 1fr 1fr!important;
    }

    .bouee-feature strong {
    font-size: 16px!important;
}

.bouee-icon {
    width: 20px!important;
    height: 20px!important;
    min-width: 20px!important;
    border-radius: 50%;
    background: #07286c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bouee-right {
    display:none!important;
    
    gap: 25px;
}

.pricing-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    position: absolute!important;
    top: 0%;
    right: -108%!important;
    width: 100%!important;
}

.booking-title {
    margin: 0;
    font-size: 12px!important;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.booking-input-icon i {

position: absolute;
    left: 18px;
    top: 25%;
    transform: translateY(-25%);
    font-size: 18px;
    color: #4f6b85;
    z-index: 2;
    display: none!important;
} 

.calendar, select {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    border: 1px solid #d9e3ea;
    background: #fff;
    padding: 0 40px 0px 5px!important; 
    font-size: 14px;
    color: #17324b;
    outline: none;
    transition: .3s;
}

    .evjf-booking {
        
        
        display: none!important;
    }


    
    .evjf-highlights {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.highlight-icon svg {
    width: 30px!important;
    height: 30px!important;
    stroke-width: 1.8;
}


.card-image img {
    width: 100%;
    height: auto!important;
    object-fit: cover;
    display: block;
}


.loc-cta-container {
    flex-direction: row!important;
    text-align: center;
}

.loc-cta-call {
    background: #ffc400;
    color: #07204f;
    text-decoration: none;
    border-radius: 18px;
    padding: 5px 5px!important;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    transition: .3s;
}

.loc-cta-text h2 {
    margin: 0;
    color: #ffc400;
    font-size: 25px!important;
    font-weight: 800;
}

    .contact-row-1

 {
        grid-template-columns: 1fr 1fr !important;
    }


@media (min-width:1024px) and (max-width:1199px) { 
    picture img {
        margin-top: 6rem !important;
    }


    .contact-phone-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none !important;
}

.contact-row-2 {
    grid-template-columns: 1fr 1fr!important;
}
.contact-row-3 {
    grid-template-columns: 1fr 1fr 1fr!important;
}

.embs-topbar {
    display: block!important;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px 0;
    margin-bottom: 25px;
}
}

}