/**************************/
/******* Events Page ******/
/**************************/

/* Styles pour la section Retraites thématiques */
.home-events{
    padding: 75px 0px;
    background-color: var(--purple-primary);
}
.home-events h3{
    color: var(--white);
}
.home-events .nav-tabs{
    border-color: var(--white);
}
.home-events .nav-tabs .nav-item .nav-link{
    color: #A9A9A9;
    border: none;
}
.home-events .nav-tabs .nav-item .nav-link.active{
    color: var(--white)!important;
    background: transparent;
    border: none;
    font-weight: bold;
}
.home-events .events-list{
    color: var(--white);
}
.home-events .events-list .events-item{
    padding: 24px 0px;
}
.home-events .events-list span{
    display: block;  
    color: #A9A9A9; 
}
.home-events .events-list strong{
    display: block;   
}
.home-events .events-list .btn-primary{
    border: 1px solid var(--white);
    color: var(--white);
    background: transparent;
    width: 100%;
    padding: 8px 0px;
}
.home-events .no-events{
    display: none;
    font-size: 24px;
    color: var(--white);
    margin-top: 25px;
}

@media only screen and (max-width:992px){
    .home-events .events-list .events-item{
        text-align: center;
    }
    .home-events .events-list .order-sm-3,
    .home-events .events-list .order-sm-4{
        margin-top: 15px;
    }
}
@media only screen and (max-width:768px){
    .home-events .nav-tabs .nav-item .nav-link{
        font-size: 14px;
    }
}
@media only screen and (max-width:576px){
    .home-events .events-list .order-sm-1{
        margin-top: 15px;
    }
    .home-events .events-list .order-sm-2{
        margin-top: 15px;
    }
    .home-events .events-list .order-sm-3{
        margin-top: 0px;
    }
    .home-events .events-list .order-sm-4{
        margin-top: 15px;
    }
    .nav-tabs .nav-item {
        width: 100%;
        text-align: center;
    }
    .nav-tabs .nav-item .nav-link {
        width: 100%;
        text-align: center;
        padding: 6px 0px;
    }
}
.home-events .events-list .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.home-events .events-list .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.home-events .events-list .card-header {
    background: #fff;
    border: none;
    padding: 1rem;
    border-radius: 12px 12px 0 0;
}

.home-events .events-list .card-body {
    border-radius: 0 0 12px 12px;
    padding: 1.5rem 1rem;
}

.home-events .events-list .card-header .fas {
    opacity: 0.7;
    font-size: 0.875rem;
}

.home-events .events-list .card-title {
    color: var(--primary-color, #5F2C70) !important;
    font-weight: 600;
    font-size: 1.1rem;
}

.home-events .events-list .card-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.home-events .events-list .price-range {
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.5rem 0;
}

.home-events .events-list .price-range span {
    font-size: 1.1rem;
    color: var(--primary-color, #5F2C70) !important;
}

.home-events .events-list .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
}

.home-events .events-list .btn-outline-primary {
    border-color: var(--primary-color, #5F2C70);
    color: var(--primary-color, #5F2C70);
}

.home-events .events-list .btn-outline-primary:hover {
    background-color: var(--primary-color, #5F2C70);
    border-color: var(--primary-color, #5F2C70);
    color: #fff;
}

.home-events .events-list .btn-primary {
    background-color: var(--primary-color, #5F2C70);
    border-color: var(--primary-color, #5F2C70);
}

.home-events .events-list .btn-primary:hover {
    background-color: #4a1f5a;
    border-color: #4a1f5a;
}

.home-events .events-list .card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.home-events .events-list .card:nth-child(2) {
    animation-delay: 0.1s;
}

.home-events .events-list .card:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive */
@media (max-width: 768px) {
    .home-events .events-list .card-header {
        padding: 0.75rem;
    }
    
    .home-events .events-list .card-header .d-flex > div {
        font-size: 0.875rem;
    }
    
    .home-events .events-list .card-title {
        font-size: 1rem;
    }
    
    .home-events .events-list .card-text {
        font-size: 0.85rem;
    }
}
#eventsHero{
    height:600px;
}
#eventsHero.page-header{
    background: url('../../medias/frontend/webp/events-header.webp') center/cover no-repeat;
}
#eventsHero h1{
    padding-right:25px;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    #eventsHero{
        height:350px;
    }
    #eventsHero h1{
        padding-right:0px;
    }
    #eventsHero.page-header {
        padding-top: 200px;
        background: url('../../medias/frontend/webp/events-header-768.webp') center/cover no-repeat;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
    #eventsHero.page-header {
        background: url('../../medias/frontend/webp/events-header-480.webp') center/cover no-repeat;
    }
}

.events-title{
    padding:75px 0px 0px 0px;
}
.events-title h2{
    padding:0px 125px;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    .events-title{
        padding:55px 0px 0px 0px;
    }
    .events-title h2{
        padding:0px;
    }
    .events-title svg{
        width:100%;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
}
@media only screen and (max-width:320px){
}

.events-intro{
    padding-top:75px;
    padding-bottom:75px;
    background-image:url('/public/assets/medias/frontend/webp/bg-right-1.webp');
    background-position: right center;
    background-repeat: no-repeat;
}
.events-intro ul {
    list-style: none;
    padding-left: 15px;
}
.events-intro ul li {
    position: relative;
    padding-left: 24px; 
    margin-bottom:6px;
}
.events-intro ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.278 0.217309C12.9838 -0.0742744 12.5089 -0.0721557 12.2173 0.222041C11.9257 0.516238 11.9278 0.991107 12.222 1.28269L13.985 3.03C14.7005 3.73914 15.1913 4.22718 15.5234 4.64071C15.6313 4.77509 15.7155 4.8934 15.7809 5L0.75 5C0.335786 5 0 5.33579 0 5.75C0 6.16422 0.335786 6.5 0.75 6.5L15.7809 6.5C15.7155 6.6066 15.6313 6.72491 15.5234 6.85929C15.1913 7.27282 14.7005 7.76086 13.985 8.47L12.222 10.2173C11.9278 10.5089 11.9257 10.9838 12.2173 11.278C12.5089 11.5722 12.9838 11.5743 13.278 11.2827L15.0727 9.5039C15.7487 8.83395 16.3011 8.28641 16.6929 7.79854C17.1004 7.29121 17.3953 6.77628 17.4741 6.15816C17.4914 6.02265 17.5 5.88632 17.5 5.75C17.5 5.61368 17.4914 5.47735 17.4741 5.34184C17.3953 4.72372 17.1004 4.20878 16.6929 3.70146C16.3011 3.21358 15.7487 2.66604 15.0727 1.99609L13.278 0.217309Z' fill='%235F2C70'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.events-why{
    padding-bottom:75px;
    background-image:url('/public/assets/medias/frontend/webp/bg-left-1.webp');
    background-position:left center;
    background-repeat:no-repeat;
}
.events-why .row{
    padding-bottom:50px
}
.events-why ul {
    list-style: none;
    padding-left: 15px;
}
.events-why ul li {
    position: relative;
    padding-left: 24px; 
    margin-bottom:6px;
}
.events-why ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.278 0.217309C12.9838 -0.0742744 12.5089 -0.0721557 12.2173 0.222041C11.9257 0.516238 11.9278 0.991107 12.222 1.28269L13.985 3.03C14.7005 3.73914 15.1913 4.22718 15.5234 4.64071C15.6313 4.77509 15.7155 4.8934 15.7809 5L0.75 5C0.335786 5 0 5.33579 0 5.75C0 6.16422 0.335786 6.5 0.75 6.5L15.7809 6.5C15.7155 6.6066 15.6313 6.72491 15.5234 6.85929C15.1913 7.27282 14.7005 7.76086 13.985 8.47L12.222 10.2173C11.9278 10.5089 11.9257 10.9838 12.2173 11.278C12.5089 11.5722 12.9838 11.5743 13.278 11.2827L15.0727 9.5039C15.7487 8.83395 16.3011 8.28641 16.6929 7.79854C17.1004 7.29121 17.3953 6.77628 17.4741 6.15816C17.4914 6.02265 17.5 5.88632 17.5 5.75C17.5 5.61368 17.4914 5.47735 17.4741 5.34184C17.3953 4.72372 17.1004 4.20878 16.6929 3.70146C16.3011 3.21358 15.7487 2.66604 15.0727 1.99609L13.278 0.217309Z' fill='%235F2C70'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    .events-intro{
        background-size:50%;
    }
    .events-why{
        background-size:50%;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
}
@media only screen and (max-width:320px){
}

.events-featured{
    height:400px;
    background-size:cover;
    background-position:center center;
    border-radius:var(--radius);
    position: relative;
    z-index: 1;
    padding:45px;
    margin-top:75px;
    color:var(--white);
}
.events-featured::before {
    content: "";
    position: absolute;
    border-radius:var(--radius);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(37, 8, 49, 1) 40%, rgba(37, 8, 49, 0.8) 60%, rgba(37, 8, 49, 0.2) 100%);
    z-index: -1;
}
.events-featured .container {
    position: relative;
    z-index: 2;
}
.events-featured h3{
    color:var(--white);
    margin-bottom:25px;
}
.events-featured p{
    margin-bottom:50px;
}
.events-featured div{
    margin-bottom:50px;
}
.events-featured div svg{
     
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .events-featured{
        height:400px;
        padding:25px;
    }
    .events-featured p{
        margin-bottom:25px;
    }
    .events-featured div{
        margin-bottom:25px;
    }
}
@media only screen and (max-width:320px){
}

.events-search{
    padding-top:75px;
    padding-bottom:75px;
}

#eventsSearchForm .datepicker-range-end{
    border:none!important;
}

.events-results{
    min-height:1000px;
    padding-bottom:75px;
}

.events-featured-search{
    background-image:url('/public/assets/medias/frontend/webp/bg-right-1.webp');
    background-position:right center;
    background-repeat:no-repeat;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    #eventsSearchForm .datepicker-range-start,
    #eventsSearchForm .datepicker-range-end{
        border:none!important;
    }
    #eventsSearchForm .datepicker-range-start{
        border-bottom:1px solid #D9D9D9!important;
    }
    #eventsSearchForm .btn{
        display:block;
        width:100%;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .events-featured-search{
        background-size:50%;
    }
}
@media only screen and (max-width:320px){
}

.events-about{
    padding:0px 0px 75px 0px;
    position:relative;
}
.events-results-about{
    background-image:url('/public/assets/medias/frontend/webp/bg-left-1.webp');
    background-position:left center;
    background-repeat:no-repeat;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .events-results-about{
        background-size:50%;
    }
}
@media only screen and (max-width:320px){
}

/**************************/
/**** Event Single Page ***/
/**************************/
.event-intro{
    position:relative;
}

.event-intro-content{
    padding:60px 80px 60px 60px;
    max-width:720px;
    margin-left:auto;
}

.event-intro .main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:450px;
}

@media only screen and (max-width:1440px){
    .event-intro-content{
        padding:50px 60px 50px 40px;
    }
}
@media only screen and (max-width:1200px){
    .event-intro-content{
        padding:40px 40px 40px 30px;
    }
}
@media only screen and (max-width:992px){
    .event-intro-content{
        padding:40px 20px;
        max-width:100%;
        margin-left:0;
    }
    .event-intro .main-image{
        min-height:350px;
    }
}
@media only screen and (max-width:768px){

}
@media only screen and (max-width:580px){
}
@media only screen and (max-width:480px){
    #defaultHeroTitle.page-header{
        height:100px!important;
    }
    .event-intro-content{
        padding:30px 15px;
    }
    .event-intro .main-image{
        min-height:280px;
    }
}

.event-details{
    background-color:#ede3cf;
    padding:75px 0px;
}

.event-details ul,
.event-details ol {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
}

.event-details ul {
    list-style-position: inside;
    padding-left: 0;
}

.event-details ol {
    list-style-position: inside;
    padding-left: 0;
}

.event-details li {
    margin-bottom: 8px;
}

.event-animators{
    padding:75px 0px;
}
.event-animators .animator-name{
    font-size:18px;
    font-weight:bold;
    margin-bottom:12px;
}
.event-animators .animator-title{
    font-weight:bold;
    font-style:italic;
    margin-bottom:12px;
}
.event-animators .animator-bio{
    
}

.event-benefices{
    background-color:#ede3cf;
    padding:75px 0px;
}

.event-faqs{
    padding:75px 0px;
}

.event-faqs .accordion-item {
    border: none;
    border-bottom: 1px solid #e0e0e0; /* Ligne subtile en bas */
    border-radius: 0;
    margin-bottom: 10px;
    background-color: transparent; /* Pas de fond */
}
.event-faqs .accordion-button {
    background-color: transparent;
    color: #2c3e50; /* Texte bleu foncé élégant */
    font-weight: 600;
    padding: 20px 0;
    box-shadow: none;
}
.event-faqs .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #2c3e50;
}
.event-faqs .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232c3e50'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); /* Flèche personnalisée */
}
.event-faqs .accordion-button:focus {
    box-shadow: none;
}
.event-faqs .accordion-body {
    color: #4a4a4a; /* Texte gris foncé */
    padding: 15px 0 25px;
    line-height: 1.6;
}

.youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cta-section {
    padding: 40px 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cta-section h2 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.cta-section p {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 25px;
}
.cta-section .btn {
    background-color: var(--white); 
    color: var(--purple-primary);
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.cta-section .btn:hover {
    background-color: var(--purple-secondary);
    color:var(--white);
}

.img-cover{
    width: 400px;
    height: 500px;
    object-fit: cover;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:580px){
    .img-cover{
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}