:root{
    --blue:#4a9cc0;
    --blue-dark:#246f8d;
    --green:#55a62d;
    --ink:#111;
    --soft:#eaf4f7;
}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;padding-top: 120px;}
/* =====================================================
   NAVBAR - NOVA ADVENTOURS
===================================================== */
/* =====================================================
   NOVA ADVENTOURS
   HEADER / NAVBAR
===================================================== */


/* =====================================================
   NAVBAR
===================================================== */

.site-nav {

    background: #ffffff;

    padding: 25px 0;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

    z-index: 1000;
}


/* =====================================================
   CONTAINER
===================================================== */

.site-nav .container {

    display: flex;

    align-items: center;
}


/* =====================================================
   LOGO
===================================================== */

.navbar-brand {

    display: flex;

    align-items: center;

    padding: 0;

    margin: 0;
}


.logo-navbar {

    /*
       SEUL LE LOGO EST GRAND
    */

    width: 250px;

    height: 70px;

    object-fit: contain;

    object-position: left center;

    display: block;

    transition:
        transform .3s ease;
}


/* Hover logo */

.navbar-brand:hover .logo-navbar {

    transform: scale(1.02);
}


/* =====================================================
   MENU
===================================================== */

.navbar-nav {

    align-items: center;

    margin-left: auto;

    gap: 8px;
}


.nav-link {

    position: relative;

    color: #145b66 !important;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 1.2px;

    padding: 10px 12px !important;

    text-decoration: none;

    transition:
        color .25s ease,
        font-weight .25s ease;
}


/* =====================================================
   LIGNE SOUS LE TEXTE
===================================================== */

.nav-link::after {

    content: "";

    position: absolute;

    left: 12px;

    right: 12px;

    bottom: 3px;

    height: 2px;

    background: #0066cc;

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform .30s ease;
}


/* =====================================================
   HOVER MENU
===================================================== */

.nav-link:hover {

    color: #0066cc !important;

    font-weight: 700;
}


.nav-link:hover::after {

    transform: scaleX(1);
}


/* =====================================================
   PAGE ACTIVE
===================================================== */

.nav-link.active {

    color: #0066cc !important;

    font-weight: 700;
}


.nav-link.active::after {

    transform: scaleX(1);
}


/* =====================================================
   CONTACT US
===================================================== */

.nav-contact {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 20px;

    background: #0066cc;

    border: 2px solid #0066cc;

    border-radius: 30px;

    color: #ffffff !important;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .8px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* =====================================================
   CONTACT HOVER
===================================================== */

.nav-contact:hover {

    background: #ffffff;

    border-color: #0066cc;

    color: #0066cc !important;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(0, 102, 204, .20);
}


/* =====================================================
   CONTACT PAGE ACTIVE
===================================================== */

.nav-contact.active {

    background: #0066cc;

    border-color: #0066cc;

    color: #ffffff !important;
}


/* =====================================================
   MOBILE BUTTON
===================================================== */

.navbar-toggler {

    border: 1px solid #145b66;

    padding: 7px 10px;

    border-radius: 7px;

    background: #ffffff;
}


.navbar-toggler:focus {

    box-shadow:
        0 0 0 3px rgba(242, 140, 40, .20);
}


/* =====================================================
   MOBILE ICON
===================================================== */

.navbar-toggler-icon {

    background-image: url(
        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23145b66' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"
    );
}


/* =====================================================
   SCROLL
===================================================== */

.site-nav.scrolled {

    background: #ffffff;

    padding: 6px 0;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .12);
}


/*
   IMPORTANT :
   Le menu ne change PAS de taille.
   Seul le logo devient légèrement plus petit
   au scroll.
*/

.site-nav.scrolled .logo-navbar {

    width: 230px;

    height: 65px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 991px) {

    .site-nav {

        padding: 8px 0;

        background: #ffffff;
    }


    .site-nav .container {

        flex-wrap: wrap;
    }


    /* Logo mobile */

    .logo-navbar {

        width: 210px;

        height: 62px;
    }


    /* Menu mobile */

    .navbar-collapse {

        width: 100%;

        margin-top: 12px;

        padding: 10px;

        background: #ffffff;

        border-top:
            1px solid rgba(20, 91, 102, .12);

        border-radius: 0 0 10px 10px;

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .08);
    }


    .navbar-nav {

        width: 100%;

        gap: 2px !important;

        margin-left: 0;
    }


    .nav-link {

        width: 100%;

        padding: 12px 15px !important;

        border-radius: 6px;

        font-size: 14px;
    }


    /* Pas de ligne animée sur mobile */

    .nav-link::after {

        display: none;
    }


    /* Hover mobile */

    .nav-link:hover,
    .nav-link.active {

        background:
            rgba(0, 102, 204, .07);
    }


    /* Contact mobile */

    .nav-contact {

        width: 100%;

        margin-top: 8px;

        padding: 11px 20px;
    }


    /* Logo au scroll */

    .site-nav.scrolled .logo-navbar {

        width: 200px;

        height: 58px;
    }

}


/* =====================================================
   PETIT MOBILE
===================================================== */

@media (max-width: 575px) {

    .logo-navbar {

        width: 190px;

        height: 57px;
    }


    .navbar-toggler {

        padding: 6px 9px;
    }


    .site-nav.scrolled .logo-navbar {

        width: 180px;

        height: 54px;
    }

}

.hero{min-height:100vh;background:linear-gradient(rgba(30,10,5,.42),rgba(20,8,3,.78)),url('../images/MENABE.jpeg') center/cover;display:flex;align-items:center;justify-content:center;color:#fff}
.hero h1{font-size:clamp(2rem,5vw,4rem);letter-spacing:4px;text-align:center}
.section-bg{background:linear-gradient(rgba(65,158,202,.92),rgba(195,231,240,.92)),url('https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?auto=format&fit=crop&w=2200&q=80') center/cover fixed}
.section{padding:80px 0;background:#4b9fc1; }
.section-title{font-weight:800;letter-spacing:2px}
.package-card{background:#4b9fc1;border:3px solid #ffffff;border-radius:14px;overflow:hidden;transition:.25s;height:auto;box-shadow:0 12px 25px rgba(0,0,0,.15)}
.package-card:hover{transform:translateY(-6px)}
.package-card img{height:180px;width:100%;object-fit:cover}
.package-card .photo{position:relative}
.package-card .photo:after{content:"";position:relative;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.package-card .photo .overlay-title{position:absolute;top:14px;left:0;right:0;color:#fff;text-align:center;font-weight:800;z-index:2;letter-spacing:1px}
.price-badge{position:absolute;right:-3px;bottom:-12px;background:#fff;padding:7px 14px;border-radius:8px 0 0 8px;color:var(--blue-dark);font-weight:800;z-index:3}
.package-body{padding:14px 14px 20px;font-size:.9rem}
.package-body ul{padding-left:18px;margin-bottom:0}
.btn-main{background:var(--green);border:0;color:#fff;border-radius:30px;padding:11px 28px;font-weight:700;letter-spacing:1px}
.btn-main:hover{background:#438a22;color:#fff}
.page-hero{padding:150px 0 70px;color:#fff;background-position:center;background-size:cover}
.page-hero.packages{background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),url('../images/WhatsApp\ Image\ 2026-09-03\ at\ 08.36.21.jpeg')}
.page-hero.blog{background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),url('https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=80')}
.page-hero.gallery{background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),url('https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=80')}
.page-hero.about{background-image:linear-gradient(rgba(0,0,0,.48),rgba(0,0,0,.58)),url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=2200&q=80')}
.detail-section{background:#4b9fc1}
.itinerary-item{background:#999;border:3px solid #111;border-radius:18px;padding:9px 15px;font-weight:700;margin-bottom:9px}
.service-box{background:#fff;border-radius:0 0 20px 20px;padding:25px}
.service-title{display:inline-block;background:#4b9fc1;color:#fff;border-radius:25px;padding:8px 20px;font-size:.85rem;font-weight:800}
.destination-card{background:#4b9fc1;border-radius:20px;overflow:hidden;height:100%;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.destination-card img{width:100%;height:210px;object-fit:cover}
.destination-card .p{padding:18px;font-weight:600}
.gallery-grid img{width:100%;height:270px;object-fit:cover;border:5px #ffffff;border-radius:12px;cursor:pointer;transition:.25s}
.gallery-grid img:hover{transform:scale(1.02)}
.about-bg{ background: #2f7d8f;}
.contact-bg{background:linear-gradient(rgba(25,90,30,.7),rgba(15,60,20,.82)),url('https://images.unsplash.com/photo-1528150177508-7cc0c36cda5c?auto=format&fit=crop&w=2200&q=80') center/cover fixed}
.form-panel,.contact-panel{background:#aaa;border:3px solid #ffffff;border-radius:8px;padding:25px}
.form-control,.form-select{border:3px solid #111;border-radius:4px}
.feature-pill{background:#006476;border-radius:25px;color:#fff;padding:8px 20px;font-weight:800;display:inline-block}
.blog-card{border:3px solid #ffffff;border-radius:14px;overflow:hidden;height:100%;background:#fff}
.blog-card img{height:220px;width:100%;object-fit:cover}
.blog-card .content{padding:20px}
.footer{background:#173b45;color:#dcebef}
.footer a{display:block;color:#dcebef;text-decoration:none;margin-bottom:8px}
.footer a:hover{color:#fff}
.brand-footer{font-size:1.5rem;font-weight:800}.brand-footer span{color:#55a62d}
.admin-body{background:#f4f6f8}
.admin-sidebar{min-height:100vh;background:#123943;color:#fff}
.admin-sidebar a{color:#d9eef2;text-decoration:none;display:block;padding:12px 15px;border-radius:8px}
.admin-sidebar a:hover{background:#246f8d}
@media(max-width:767px){.hero{min-height:78vh}.section{padding:55px 0}.package-card img{height:210px}.page-hero{padding-top:120px}.gallery-grid img{height:220px}}
.site-nav .nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: #006476;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.site-nav .nav-link:hover {
    color: #006476 !important;
}

.site-nav .nav-link:hover::after {
    width: 70%;
}

.site-nav .nav-link.active {
    color: #006476 !important;
}

/* =================================
   HOME GALLERY SLIDER
================================= */

.gallery-slider-wrapper {
    position: relative;
    padding: 0 50px;
}

.gallery-slider {
    display: flex;
    gap: 24px;
    overflow: hidden;
    scroll-behavior: smooth;
}

.gallery-slide {
    flex: 0 0 calc(25% - 18px);
}

/* Image */

.gallery-home-card {
    position: relative;
    height: 230px;
    overflow: hidden;
    border-radius: 18px;
    background: #eee;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10);
}

.gallery-home-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-home-card:hover img {
    transform: scale(1.08);
}

/* Texte sur image */

.gallery-home-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 35px 15px 15px;
    background: linear-gradient(
        transparent,
        rgba(0,0,0,0.75)
    );
}

.gallery-home-overlay span {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

/* Flèches */

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #ff8c00;
    color: #fff;
    z-index: 5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-arrow:hover {
    background: #000;
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
    left: 0;
}

.gallery-next {
    right: 0;
}

/* =================================
   TABLETTE
================================= */

@media (max-width: 991px) {

    .gallery-slide {
        flex: 0 0 calc(50% - 12px);
    }

}

/* =================================
   MOBILE
================================= */

@media (max-width: 576px) {

    .gallery-slider-wrapper {
        padding: 0 40px;
    }

    .gallery-slider {
        gap: 15px;
    }

    .gallery-slide {
        flex: 0 0 100%;
    }

    .gallery-home-card {
        height: 220px;
    }

}


.btn-view-details {
    background-color: #ffffff;
    color: #246f8d;
    border: 1px solid #246f8d;
    font-weight: 600;
}

.btn-view-details:hover {
    background-color: #246f8d;
    color: #ffffff;
}

.btn-view-details {
    background-color: #ffffff;
    color: #246f8d;
    border: 1px solid #246f8d;
    font-weight: 600;
}

.btn-view-details:hover {
    background-color: #246f8d;
    color: #ffffff;
}


.btn-site {
    background: #fff;
    border: 1px solid #246f8d;
    color: #246f8d;
    border-radius: 30px;
    padding: 6px 20px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-site:hover {
    background: #246f8d;
    border-color: #246f8d;
    color: #fff;
}

.btn-sitee {
    background: #246f8d;
    border: 1px solid #246f8d;
    color: #fff;
    border-radius: 30px;
    padding: 6px 20px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-sitee:hover {
    background: #fff;
    border-color: #246f8d;
    color: #246f8d;
}
.text-blue {
    color: #246f8d;
}



.blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.blog-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card .content {
    padding: 20px;
}

.blog-card h3 {
    color: #246f8d;
    font-weight: 700;
}

.blog-card p {
    margin-bottom: 18px;
}


.blog-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.blog-slider {
    display: flex;
    gap: 24px;
    overflow: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

.blog-slide {
    flex: 0 0 calc(33.333% - 16px);
}

.blog-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: #f28c28;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all .3s ease;
}

.blog-arrow:hover {
    background: #d96f0b;
    transform: translateY(-50%) scale(1.08);
}

.blog-prev {
    left: -22px;
}

.blog-next {
    right: -22px;
}

@media (max-width: 991px) {
    .blog-slide {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 575px) {
    .blog-slide {
        flex: 0 0 100%;
    }

    .blog-prev {
        left: 5px;
    }

    .blog-next {
        right: 5px;
    }
}

.package-card {
    position: relative;
}

/* Titre flottant entre image et texte */
.blog-title-floating {
    position: relative;
    z-index: 10;

    width: fit-content;
    max-width: 90%;

    margin: -20px auto 10px;

    padding: 8px 25px;

    background: #246f8d;

    color: #fff;


    border-radius: 10px;

    font-size: 16px;
    font-weight: 700;

    text-align: center;

}


.hero-intro {
  position: absolute;
  left: 2rem;
  bottom: -6.5rem;
  max-width: 38rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  font-family: "Montserrat", sans-serif;
}

.hero-intro__title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
}

.hero-intro__text {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 768px) {
  .hero-intro { left: 1.25rem; right: 1.25rem; bottom: 1.5rem; }
  .hero-intro__title,
  .hero-intro__text { font-size: .9rem; }
}