.evjf-hero{



    width:95%;

    max-width:1400px;



    margin:40px auto;



    display:grid;



    grid-template-columns:

        520px

        1fr

        340px;



    gap:25px;

     margin-top: 10rem;

    align-items:stretch;

}













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

BLOCS

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



.evjf-gallery,

.evjf-content{



    background:#fff;



    border-radius:28px;



    overflow:hidden;



    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}



.evjf-booking{



    background:#072d6c;



    border-radius:28px;



    



    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

}



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

GALERIE

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



.gallery-main{



    position:relative;

}



.gallery-main img{



    width:100%;

    display:block;



    aspect-ratio:16/10;



    object-fit:cover;

}



.gallery-nav{



    position:absolute;



    top:50%;



    transform:translateY(-50%);



    width:42px;

    height:42px;



    border:none;



    border-radius:50%;



    background:#082f69;



    color:#fff;



    display:flex;

    align-items:center;

    justify-content:center;



    cursor:pointer;



    z-index:5;

}



.gallery-nav svg{



    width:18px;

    height:18px;



    stroke-width:2.5;

}



.prev{

    left:15px;

}



.next{

    right:15px;

}



.gallery-thumbs{



    display:flex;



    justify-content:center;



    gap:12px;



    padding:18px 15px 12px;

}



.gallery-thumbs img{



    width:80px;

    height:55px;



    object-fit:cover;



    border-radius:8px;



    cursor:pointer;



    border:2px solid transparent;



    transition:.2s;

}



.gallery-thumbs img.active{



    border-color:#f7c600;

}



.gallery-dots{



    display:flex;



    justify-content:center;



    gap:8px;



    padding:0 0 18px;

}



.gallery-dots span{



    width:8px;

    height:8px;



    border-radius:50%;



    background:#d7dce4;

}



.gallery-dots span.active{



    background:#1f7ae0;

}



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

CONTENU

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







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

BOOKING

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







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

TABLETTE

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



@media(max-width:1200px){



    .evjf-hero{



        grid-template-columns:

            1fr

            1fr;

    }



    .evjf-booking{



        grid-column:1/-1;



        min-height:auto;

    }

}



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

MOBILE

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



@media(max-width:768px){



    .evjf-hero{



        width:94%;



        grid-template-columns:1fr;



        gap:20px;

        margin-top: 6rem;

    }



    .evjf-gallery,

    .evjf-content,

    .evjf-booking{



        min-height:auto;

    }



    .gallery-nav{



        width:38px;

        height:38px;

    }



    .gallery-thumbs{



        gap:8px;

    }



    .gallery-thumbs img{



        width:65px;

        height:45px;

    }



    .evjf-booking{



        padding:25px;

    }

}







/*block 2 */



.evjf-content{



    padding:25px;

}



.evjf-badge{



    display:inline-block;



    padding:8px 14px;



    background:#e8f4ff;



    color:#4da3df;



    border-radius:20px;



    font-size:11px;



    font-weight:700;



    text-transform:uppercase;

}



.evjf-title{



    margin:15px 0 10px;



    color:#0c2f68;



    font-size:20px;



    line-height:1.1;



    font-weight:800;

}



.evjf-subtitle{



    color:#3aa6ef;



    font-size:17px;



    font-style:italic;



    margin-bottom:25px;

}



.evjf-line{



    width:70px;

    height:4px;



    background:#f3c100;



    border-radius:50px;



    margin-bottom:30px;

}



.evjf-description {

    color: #222;

    font-size: 17px;

    line-height: 1.6;

    margin-bottom: 60px;

}



.evjf-features{



    display:grid;



    grid-template-columns:1fr 1fr;



    gap:25px;

}



.evjf-feature{



    display:flex;



    gap:15px;

}



.feature-icon{



    width:42px;

    height:42px;



    border-radius:50%;



    background:#0c2f68;



    color:#fff;



    display:flex;

    align-items:center;

    justify-content:center;



    flex-shrink:0;

}



.feature-icon svg{



    width:22px;

    height:22px;

}



.feature-text h4{



    margin:0 0 5px;



    color:#0c2f68;



    font-size:18px;

}



.feature-text p{



    margin:0;



    color:#444;



    font-size:15px;



    line-height:1.5;

}



@media(max-width:768px){



    .evjf-title{



        font-size:36px;

    }



    .evjf-subtitle{



        font-size:20px;

    }



    .evjf-features{



        grid-template-columns:1fr;

    }

}





/*block 3 */



.evjf-booking{



    background:#062d6a;



    border-radius:28px;



    padding:40px 30px;



    color:#fff;



    text-align:center;

}



.booking-title{



    margin:0;



    font-size:20px;

    margin-bottom: 2rem!important;
    font-weight:800;



    letter-spacing:1px;

}



.booking-line{



    width:70px;

    height:3px;



    background:#15c6ff;



    margin:15px auto 35px;



    border-radius:50px;

}



.booking-phone{



    display:flex;



    justify-content:center;

    align-items:center;



    gap:15px;



    margin-bottom:25px;

}



.booking-phone-icon{



    width:55px;

    height:55px;



    border-radius:50%;



    background:#fff;



    color:#062d6a;



    display:flex;

    align-items:center;

    justify-content:center;

}



.booking-phone-icon svg{



    width:26px;

    height:26px;

}



.booking-phone span{



    font-size:28px;



    font-weight:700;

}



.booking-text{



    color:#ffd400;



    font-weight:600;



    line-height:1.6;



    margin-bottom:30px;

}



.booking-divider{



    height:1px;



    background:rgba(255,255,255,.25);



    margin:30px 0;

}



.booking-benefits{



    display:flex;



    flex-direction:column;



    gap:18px;



    text-align:left;

}



.booking-benefit{



    display:flex;



    align-items:center;



    gap:12px;

}



.booking-benefit svg{



    width:18px;

    height:18px;



    color:#ffd400;

}



.booking-btn{



    margin-top:60px;



    display:flex;



    align-items:center;

    justify-content:center;



    gap:10px;



    width:100%;



    height:60px;



    background:#ffd400;



    color:#062d6a;



    text-decoration:none;



    font-weight:800;



    border-radius:12px;



    transition:.25s;

}



.booking-btn:hover{



    transform:translateY(-2px);

}



.booking-btn svg{



    width:20px;

    height:20px;

}



.booking-footer{



    margin-top:35px;



    display:flex;



    justify-content:center;



    gap:10px;



    align-items:flex-start;



    color:#fff;

}



.booking-footer svg{



    width:12px;

    height:12px;



    color:#15c6ff;



    margin-top:5px;

}



.booking-footer span{



    line-height:1.6;

}



@media(max-width:768px){



    .booking-phone span{



        font-size:24px;

    }



    .evjf-booking{



        padding:30px 20px;

    }

}





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

BLOC 4 - ACTIVITÉS DISPONIBLES

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



.evjf-activities{



    width:98%;

    max-width:72%;



    margin:40px auto;



    background:#fff;



    border-radius:24px;



    padding:15px 20px;



    box-shadow:

    0 5px 20px rgba(0,0,0,.05);

}



.evjf-activities h2{



    text-align:center;



    color:#17316f;



    font-size:22px;



    font-weight:800;



    margin:0 0 18px;

}



.activities-grid-evjf{



    display:grid;



    grid-template-columns:

        repeat(6,1fr);



    gap:14px;

}



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

CARTE ACTIVITÉ

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



.activity-card-evjf{



    background:#fff;



    border-radius:14px;



    overflow:hidden;



    text-decoration:none;



    box-shadow:

    0 2px 10px rgba(0,0,0,.08);



    transition:.25s;



    display:flex;



    flex-direction:column;

}



.activity-card-evjf{



    transform:translateY(-3px);

}



.activity-card-evjf img{



    width:100%;



    height:150px;



    



    display:block;

}



.activity-content-evjf{



    padding:10px 12px 6px;
    height: 50px;

}



.activity-content-evjf h3{



    margin:0;



    color:#17316f;



    font-size:18px;



    font-weight:800;



    line-height:1.2;

}



.activity-content-evjf p{



    margin:6px 0 0;



    color:#4f95e6;



    font-size:12px;



    font-weight:600;

}



.activity-arrow{



    width:28px;

    height:28px;



    border-radius:50%;



    background:#17316f;



    color:#fff;



    display:flex;

    align-items:center;

    justify-content:center;



    margin:-34px 12px 10px auto;

}



.activity-arrow svg{



    width:14px;

    height:14px;

}



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

PACK

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



.activity-pack{



    background:#fff;



    border:2px dashed #d7dde7;



    border-radius:14px;



    text-decoration:none;



    color:#17316f;



    min-height:154px;



    display:flex;



    flex-direction:column;



    justify-content:center;



    align-items:center;



    text-align:center;



    padding:15px;

}



.activity-pack > svg{



    width:42px;

    height:42px;



    color:#4ea2e8;



    margin-bottom:10px;

}



.activity-pack h3{



    margin:0;



    font-size:16px;



    line-height:1.2;



    font-weight:800;



    color:#17316f;

}



.activity-pack p{



    margin:10px 0 0;



    font-size:13px;



    line-height:1.4;



    color:#17316f;

}



.activity-pack span{



    width:34px;

    height:34px;



    border-radius:50%;



    background:#ffd400;



    color:#17316f;



    display:flex;

    align-items:center;

    justify-content:center;



    margin-top:14px;

}



.activity-pack span svg{



    width:16px;

    height:16px;

}



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

TABLETTE

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



@media(max-width:1200px){



    .activities-grid-evjf{



        grid-template-columns:

            repeat(3,1fr);

    }

}



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

MOBILE

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



@media(max-width:768px){



    .evjf-activities{



        padding:15px;

         width: 98%;

    max-width: 94%;

    }



 



    .activities-grid-evjf{



        grid-template-columns:1fr;

    }



    .activity-card-evjf img{



        height:180px;

    }



    .evjf-activities h2{



        font-size:18px;

    }

}





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

SECTION INFORMATIONS

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



.evjf-highlights{



    width:95%;

    max-width:1400px;



    margin:40px auto;



    display:grid;



    grid-template-columns:

        repeat(3,1fr);



    gap:20px;

}



.highlight-card{



    background:#fff;



    border-radius:22px;



    padding:25px;



    display:flex;



    align-items:center;



    gap:20px;



    box-shadow:

    0 5px 20px rgba(0,0,0,.05);

}



.highlight-icon{



    flex-shrink:0;



    color:#3ea0e5;

}



.highlight-icon svg{



    width:70px;

    height:70px;



    stroke-width:1.8;

}



.highlight-content{



    flex:1;

}



.highlight-content h3{



    margin:0;



    color:#17316f;



    font-size:24px;



    font-weight:800;

}



.highlight-line{



    width:60px;

    height:3px;



    background:#f5c400;



    border-radius:50px;



    margin:10px 0 15px;

}



.highlight-content p{



    margin:0;



    color:#17316f;



    font-size:15px;



    line-height:1.6;

}



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

TABLETTE

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



@media(max-width:1200px){



    .evjf-highlights{



        grid-template-columns:1fr;

    }

}

 

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

MOBILE

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



@media(max-width:768px){



    .highlight-card{



        flex-direction:column;



        text-align:center;

    }



    .highlight-line{



        margin:10px auto 15px;

    }



    .highlight-icon svg{



        width:40px;

        height:40px;

    }



    .highlight-content h3{



        font-size:20px;

    }



    

}