/*=========================================================
              VTC MANANGE PRESTIGE
                  VOYAGE V5
        Compatible avec STYLE V11
=========================================================*/


/*=========================================================
                    HERO VOYAGE
=========================================================*/

.hero-voyage{

    padding-top:170px;

    padding-bottom:120px;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at top right,
            rgba(123,46,255,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(123,46,255,.10),
            transparent 40%
        ),
        var(--black);

}


.hero-voyage::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(123,46,255,.12);

    filter:blur(100px);

    top:-250px;

    right:-180px;

    pointer-events:none;

}


.hero-voyage .hero-grid{

    position:relative;

    z-index:2;

}


.hero-voyage .hero-content{

    position:relative;

    z-index:2;

}


.hero-voyage .hero-content h1{

    max-width:700px;

}


.hero-voyage .hero-content h1 span{

    color:var(--primary);

}


.hero-voyage .hero-content p{

    max-width:650px;

}


.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    margin-bottom:20px;

    border-radius:50px;

    background:rgba(123,46,255,.12);

    border:1px solid rgba(123,46,255,.35);

    color:var(--secondary);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.4px;

}


.hero-features{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

    margin-top:45px;

    max-width:650px;

}


.hero-features div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:14px 12px;

    border-radius:14px;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    color:var(--gray);

    font-size:.9rem;

    transition:var(--transition);

}


.hero-features div:hover{

    transform:translateY(-5px);

    border-color:rgba(123,46,255,.4);

    color:var(--white);

}


.hero-features i{

    color:var(--secondary);

}


.hero-voyage .hero-image{

    position:relative;

    animation:none;

}


.hero-voyage .hero-image img{

    width:100%;

    min-height:500px;

    object-fit:cover;

    border-radius:26px;

    box-shadow:0 35px 70px rgba(0,0,0,.5);

}


/*=========================================================
                  OUTILS DU VOYAGE
=========================================================*/

.travel-tools{

    background:var(--black-light);

}


.travel-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}


.travel-card{

    position:relative;

    display:block;

    padding:35px 28px;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

}


.travel-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

}


.travel-card:hover{

    transform:translateY(-10px);

    border-color:rgba(123,46,255,.35);

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

}


.travel-card:hover::before{

    transform:scaleX(1);

}


.travel-icon{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:var(--white);

    font-size:26px;

    box-shadow:0 15px 35px rgba(123,46,255,.3);

}


.travel-card h3{

    color:var(--white);

    margin-bottom:15px;

}


.travel-card p{

    font-size:.98rem;

    line-height:1.8;

    margin-bottom:25px;

}


.card-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-weight:600;

}


.card-link i{

    transition:var(--transition);

}


.travel-card:hover .card-link i{

    transform:translateX(5px);

}


/*=========================================================
                  SERVICES VOYAGE
=========================================================*/

.travel-services{

    background:var(--black);

}


.travel-service{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    margin-bottom:110px;

}


.travel-service:last-child{

    margin-bottom:0;

}


.travel-service.reverse{

    direction:rtl;

}


.travel-service.reverse > *{

    direction:ltr;

}


.travel-image{

    position:relative;

    overflow:hidden;

    border-radius:26px;

}


.travel-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:26px;

    transition:var(--transition);

}


.travel-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    background:linear-gradient(
        180deg,
        transparent,
        rgba(123,46,255,.18)
    );

    pointer-events:none;

}


.travel-image:hover img{

    transform:scale(1.04);

}


.travel-text h2{

    margin:18px 0 25px;

}


.travel-text p{

    line-height:1.9;

    margin-bottom:30px;

    max-width:600px;

}


.travel-text .btn-primary{

    min-width:220px;

}


/*=========================================================
                CALCULATEUR ITINERAIRE
=========================================================*/

.route-planner{

    background:var(--black-light);

}


.planner-card{

    max-width:950px;

    margin:0 auto;

    padding:45px;

}


.planner-inputs{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:30px;

}


.input-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.input-group label{

    color:var(--white);

    font-weight:600;

}


.input-group label i{

    color:var(--secondary);

    margin-right:6px;

}


.input-group input{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:var(--black-light);

    color:var(--white);

    font-size:1rem;

    transition:var(--transition);

}


.input-group input::placeholder{

    color:var(--gray-dark);

}


.input-group input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(123,46,255,.15);

}


.planner-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}


.planner-buttons button{

    min-width:240px;

}


.quick-destinations{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}


.quick-destination{

    padding:11px 18px;

    border-radius:50px;

    background:rgba(123,46,255,.10);

    border:1px solid rgba(123,46,255,.25);

    color:var(--secondary);

    font-size:.9rem;

    transition:var(--transition);

}


.quick-destination:hover{

    background:var(--primary);

    color:var(--white);

    transform:translateY(-3px);

}


/*=========================================================
                DESTINATIONS
=========================================================*/

.popular-destinations{

    background:var(--black);

}


.destinations-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}


.destination-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    transition:var(--transition);

}


.destination-card:hover{

    transform:translateY(-10px);

    border-color:rgba(123,46,255,.35);

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

}


.destination-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:var(--transition);

}


.destination-card:hover img{

    transform:scale(1.06);

}


.destination-content{

    padding:28px;

}


.destination-content h3{

    color:var(--white);

    margin-bottom:15px;

}


.destination-content p{

    font-size:.95rem;

    line-height:1.8;

    margin-bottom:25px;

    min-height:85px;

}


.btn-travel{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    padding:14px 20px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:var(--white);

    font-weight:600;

    transition:var(--transition);

}


.btn-travel:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(123,46,255,.35);

}


/*=========================================================
                  POURQUOI NOUS
=========================================================*/

.why-choose{

    background:var(--black-light);

}


.advantages-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}


.advantage-card{

    position:relative;

    padding:38px 28px;

    text-align:center;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

}


.advantage-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}


.advantage-card:hover{

    transform:translateY(-10px);

    border-color:rgba(123,46,255,.35);

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

}


.advantage-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:var(--white);

    font-size:25px;

    box-shadow:0 15px 35px rgba(123,46,255,.3);

}


.advantage-card h3{

    color:var(--white);

    margin-bottom:15px;

}


.advantage-card p{

    line-height:1.8;

}


/*=========================================================
                        FAQ
=========================================================*/

.travel-faq{

    background:var(--black);

}


.faq-container{

    max-width:950px;

    margin:0 auto;

}


.faq-item{

    margin-bottom:15px;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    overflow:hidden;

    transition:var(--transition);

}


.faq-item:hover{

    border-color:rgba(123,46,255,.35);

}


.faq-item summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px 28px;

    color:var(--white);

    font-weight:600;

    cursor:pointer;

    list-style:none;

}


.faq-item summary::-webkit-details-marker{

    display:none;

}


.faq-item summary::after{

    content:"+";

    color:var(--secondary);

    font-size:1.7rem;

    flex-shrink:0;

}


.faq-item[open] summary::after{

    content:"−";

}


.faq-item p{

    padding:0 28px 25px;

    line-height:1.8;

}


.faq-contact{

    margin-top:40px;

    padding:40px;

    text-align:center;

    background:linear-gradient(
        135deg,
        rgba(123,46,255,.18),
        rgba(93,31,212,.08)
    );

    border:1px solid rgba(123,46,255,.25);

    border-radius:22px;

}


.faq-contact h3{

    color:var(--white);

    margin-bottom:12px;

}


.faq-contact p{

    margin-bottom:25px;

}


/*=========================================================
                    CTA FINAL
=========================================================*/

.travel-cta{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            rgba(9,9,9,.94),
            rgba(93,31,212,.78)
        ),

        url("../images/voyage/cta-background.webp")
        center/cover no-repeat;

}


.travel-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(166,108,255,.25),
            transparent 40%
        );

}


.travel-cta-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}


.travel-cta-content h2{

    color:var(--white);

    font-size:clamp(2.3rem,5vw,4rem);

    margin:20px 0;

}


.travel-cta-content h2 span{

    color:var(--secondary);

}


.travel-cta-content p{

    max-width:720px;

    margin:0 auto 35px;

}


.cta-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:35px;

}


.cta-features div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px;

    border-radius:14px;

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

    border:1px solid rgba(255,255,255,.08);

    color:var(--white);

    backdrop-filter:blur(10px);

}


.cta-features i{

    color:var(--secondary);

}


.travel-cta .hero-buttons{

    justify-content:center;

}


/*=========================================================
                    CONTACT RAPIDE
=========================================================*/

.travel-contact{

    background:var(--black-light);

}


.travel-contact .contact-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:60px;

}


.contact-content h2{

    margin:18px 0 20px;

}


.contact-actions{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.contact-action{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:var(--black-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:16px;

    transition:var(--transition);

}


.contact-action:hover{

    transform:translateX(6px);

    border-color:rgba(123,46,255,.35);

}


.contact-action > i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:var(--primary);

    color:var(--white);

}


.contact-action div{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.contact-action strong{

    color:var(--white);

}


.contact-action span{

    color:var(--gray-dark);

    font-size:.85rem;

}


/*=========================================================
                    FOOTER COMPATIBLE V11
=========================================================*/

.site-footer{

    background:#050505;

    padding:90px 0 25px;

    border-top:1px solid rgba(255,255,255,.06);

}


.site-footer .footer-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:50px;

    margin-bottom:55px;

}


.site-footer .footer-logo{

    display:block;

    width:180px;

    margin-bottom:22px;

}


.site-footer .footer-logo img{

    width:100%;

}


.site-footer .footer-column h3{

    margin-bottom:22px;

    color:var(--white);

}


.site-footer .footer-column p,

.site-footer .footer-column li{

    color:var(--gray);

}


.site-footer .footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.site-footer .footer-column li{

    display:flex;

    align-items:center;

    gap:12px;

}


.site-footer .footer-column li i{

    width:18px;

    color:var(--primary);

}


.site-footer .footer-column a:hover{

    color:var(--secondary);

}


.site-footer .footer-bottom{

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


.site-footer .footer-bottom p{

    color:var(--gray-dark);

    font-size:.9rem;

}


.site-footer .footer-bottom > div{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}


.site-footer .footer-bottom a{

    color:var(--secondary);

}


/*=========================================================
                BOUTON RETOUR HAUT
=========================================================*/

#scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:var(--white);

    font-size:20px;

    box-shadow:0 18px 40px rgba(123,46,255,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:var(--transition);

    z-index:9999;

}


#scrollTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


#scrollTop:hover{

    transform:translateY(-6px);

}


/*=========================================================
                    RESPONSIVE
=========================================================*/

@media (max-width:1200px){

    .travel-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .destinations-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .advantages-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .travel-service{

        gap:45px;

    }

}


@media (max-width:992px){

    .hero-voyage{

        padding-top:145px;

    }


    .hero-voyage .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero-voyage .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-voyage .hero-buttons{

        justify-content:center;

    }


    .hero-features{

        max-width:700px;

        margin-left:auto;

        margin-right:auto;

    }


    .hero-voyage .hero-image{

        order:initial;

        max-width:700px;

        width:100%;

        margin:auto;

    }


    .travel-service,

    .travel-service.reverse{

        grid-template-columns:1fr;

        direction:ltr;

        gap:35px;

    }


    .travel-service .travel-image{

        max-width:750px;

        width:100%;

        margin:auto;

    }


    .travel-service .travel-text{

        text-align:center;

    }


    .travel-text p{

        margin-left:auto;

        margin-right:auto;

    }


    .travel-contact .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }


    .site-footer .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media (max-width:768px){

    .hero-voyage{

        padding-top:125px;

        padding-bottom:80px;

    }


    .hero-voyage .hero-content h1{

        font-size:2.4rem;

    }


    .hero-features{

        grid-template-columns:repeat(2,1fr);

    }


    .hero-voyage .hero-image img{

        min-height:320px;

    }


    .travel-grid{

        grid-template-columns:1fr;

    }


    .travel-service{

        margin-bottom:80px;

    }


    .travel-image img{

        height:300px;

    }


    .planner-card{

        padding:30px 22px;

    }


    .planner-inputs{

        grid-template-columns:1fr;

    }


    .planner-buttons{

        flex-direction:column;

    }


    .planner-buttons button{

        width:100%;

    }


    .destinations-grid{

        grid-template-columns:1fr;

    }


    .advantages-grid{

        grid-template-columns:1fr;

    }


    .cta-features{

        grid-template-columns:1fr;

    }


    .travel-cta{

        padding:90px 0;

    }


    .travel-cta .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }


    .travel-cta .hero-buttons a{

        width:100%;

    }


    .site-footer .footer-grid{

        grid-template-columns:1fr;

    }


    .site-footer .footer-bottom{

        flex-direction:column;

        text-align:center;

    }


    .site-footer .footer-bottom > div{

        justify-content:center;

    }

}


@media (max-width:576px){

    .hero-features{

        grid-template-columns:1fr 1fr;

        gap:10px;

    }


    .hero-features div{

        font-size:.8rem;

        padding:12px 8px;

    }


    .hero-voyage .hero-content h1{

        font-size:2.2rem;

    }


    .travel-card{

        padding:30px 24px;

    }


    .travel-image img{

        height:250px;

    }


    .faq-item summary{

        padding:20px;

        font-size:.95rem;

    }


    .faq-item p{

        padding:0 20px 20px;

    }


    .faq-contact{

        padding:30px 20px;

    }


    .contact-action{

        padding:16px;

    }


    #scrollTop{

        right:18px;

        bottom:18px;

        width:50px;

        height:50px;

    }

}


/*=========================================================
                ACCESSIBILITÉ
=========================================================*/

@media (prefers-reduced-motion:reduce){

    .hero-voyage .hero-image{

        animation:none !important;

    }


    .travel-card,

    .destination-card,

    .advantage-card,

    .travel-image img,

    .btn-primary,

    .btn-secondary{

        transition:none !important;

    }

}