.elementor-2396 .elementor-element.elementor-element-f8de5fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:5%;--padding-bottom:5%;--padding-left:08%;--padding-right:08%;}.elementor-2396 .elementor-element.elementor-element-f8de5fb:not(.elementor-motion-effects-element-type-background), .elementor-2396 .elementor-element.elementor-element-f8de5fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ae55e11 );background-image:url("/wp-content/uploads/2024/10/2560x1920_AMS2.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2396 .elementor-element.elementor-element-64d852b .elementor-heading-title{font-family:"Figtree", Sans-serif;font-size:64px;font-weight:700;line-height:64px;letter-spacing:-2px;color:var( --e-global-color-ae55e11 );}.elementor-2396 .elementor-element.elementor-element-7ce0ac4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-2396 .elementor-element.elementor-element-7ce0ac4:not(.elementor-motion-effects-element-type-background), .elementor-2396 .elementor-element.elementor-element-7ce0ac4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ae55e11 );}.elementor-2396 .elementor-element.elementor-element-5892c63{--display:flex;--padding-top:0%;--padding-bottom:0%;--padding-left:8%;--padding-right:08%;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2396 .elementor-element.elementor-element-3183818{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-2396:not(.elementor-motion-effects-element-type-background), body.elementor-page-2396 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2396 .elementor-element.elementor-element-5892c63{--content-width:1199px;}}@media(max-width:1024px){.elementor-2396 .elementor-element.elementor-element-f8de5fb{--padding-top:03%;--padding-bottom:03%;--padding-left:05%;--padding-right:05%;}.elementor-2396 .elementor-element.elementor-element-64d852b .elementor-heading-title{font-size:30px;letter-spacing:-1px;}.elementor-2396 .elementor-element.elementor-element-5892c63{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-2396 .elementor-element.elementor-element-f8de5fb{--min-height:100px;}.elementor-2396 .elementor-element.elementor-element-64d852b .elementor-heading-title{font-size:30px;line-height:34px;letter-spacing:-1px;}.elementor-2396 .elementor-element.elementor-element-7ce0ac4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2396 .elementor-element.elementor-element-5892c63{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for text-editor, class: .elementor-element-4720f2c */div#posts-container .e-loop-item{
    margin: 20px 0px;
}


    
    
    

div#select-project,
div#select-salle,
div#select-ville {
    width: 18%;
}


form#filter-form {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}



  input#date-filter-display,
div#select-project p,
form#filter-form select {
    width: 100%;
    height: 50px;
    background: transparent;
    color: #242424;
    border: 0px;
    border-bottom: 2px solid #242424;
    display: flex;
    align-items: flex-end;
    padding: 10px 10px 10px 10px!important;
    line-height: 25px;
    max-width: 400px;
    outline: none;
    cursor: pointer;
    appearance: none; /* Remove the default dropdown arrow */
    -webkit-appearance: none; /* Remove the default dropdown arrow for Safari */
    -moz-appearance: none; /* Remove the default dropdown arrow for Firefox */
     /* Space for the custom arrow */
     /* Optional: For better padding */
    font-size: 15px;
    box-sizing: border-box;
    background-image: url('/wp-content/uploads/2025/06/down-chevron-black.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 14px; /* Adjust size of the arrow */
    border-radius: 0px;
}

form#filter-form select:focus {
  
  outline: none;
}






button#reset-filters {
    background: #fff;
    padding: 12px;
    border: 0px;
    color: #222;
    font-size:16px;
    line-height:12px;
    height: 100%;
    top: 0px;
    position: relative;
}

 
 

 /* Modal styles */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.custom-modal-content {
    background-color: #dcdddd;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.custom-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #000000;
}

.custom-modal-close:hover {
    color: #000;
}

.custom-modal h5 {
    margin: 20px 0;
    font-size: 18px;
    color: #333;
}

.custom-modal-button {
    display: flex;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: 8px;
    fill: var(--e-global-color-ae55e11);
    color: var(--e-global-color-ae55e11);
    background-color: #242424;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #242424;
    border-radius: 100px 100px 100px 100px;
    padding: 10px 30px 10px 30px;
     flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 145px;
    gap: 8px;
    
    transition: all .3s;
}

.custom-modal-button:hover {
    background-color: #e5e5e5;
    color: #242424!important;
    
    transition: all .3s;
}
 




/* Spinner Overlay Styles */
#spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it's above all other elements */
}
 
 
 
 
 
 
.spinner {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    top: 80px;
}
.spinner::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 2px solid #000;
    animation: prixClipFix 10s linear infinite;
}




    @keyframes rotate {
      100%   {transform: rotate(360deg)}
    }

    @keyframes prixClipFix {
        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
 @media only screen and (max-width: 1200px) {


form#filter-form {
     justify-content: flex-start;
     align-items: center;
     flex-direction: row;
     flex-wrap: wrap;
     align-content: center;
     gap: 20px;
     display: flex;
}

div#select-ville,
div#select-salle,
div#select-date,
div#select-project {
    width: 21%;
}

div#select-project p,
form#filter-form select  {width: 95%!important;}

button#reset-filters {
    position: relative;
    top: 10px;
}

}




 @media only screen and (max-width: 992px) {
 
div#select-ville,
div#select-salle,
div#select-date,
div#select-project {
    width: 45%;
    margin: 10px;
}

 

button#reset-filters {
    position: relative;
    top: 20px;
    width: 97%;
}


     
form#filter-form {
   justify-content: space-between;
   max-width: 720px;
   margin: auto;
   display: flex;
}
input#date-filter-display,
     div#select-project p,
form#filter-form select  {width: 100%!important;}


}



 .billetterie-status-filter {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .status-label {
        color: #333;
        margin: 0;
        white-space: nowrap;
        font-size: 15px;
    }
    
    .status-options {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .status-pill {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        gap: 6px;
        font-size: 14px;
        color: #6c757d;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .status-pill:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }
    
    .status-pill-active,
    .status-pill:has(input:checked) {
        background: #28a745;
        border-color: #28a745;
        color: white;
    }

   
    .status-pill:last-child:has(input:checked) {
        background: #d4727b;
        border-color: #d4727b;
        color: white;
    }

.status-pill:has(input:checked) .status-dot-red,
.status-pill:has(input:checked) .status-dot-green {
    background: #fff;
}

    
    .status-pill.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f8f9fa;
        color: #adb5bd;
    }
    
    .status-pill.disabled:hover {
        background: #f8f9fa;
        border-color: #e9ecef;
    }
    
    .status-pill input[type="radio"] {
        display: none;
    }
    
    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
    }
    
    .status-dot-black {
        background-color: #333;
    }
    
    .status-dot-green {
        background-color: #28a745;
    }
    
    .status-dot-red {
        background-color: #dc3545;
    }
    
    .status-text {
        font-weight: 500;
    }
    
    .status-count {
        font-weight: 600;
        margin-left: 2px;
    }
    
    /* Responsive design */
    @media (max-width: 768px) {
        .billetterie-status-filter {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .status-options {
            gap: 6px;
        }
        
        .status-pill {
            padding: 5px 10px;
            font-size: 13px;
        }
    }


 @media only screen and (max-width: 767px) {
 
div#select-ville,
div#select-salle,
div#select-date,
div#select-project {
    width: 100%;
    margin: 10px;
}

 

button#reset-filters {
    position: relative;
    top: 20px;
    width: 97%;
}


     
form#filter-form {
   
    justify-content: center;
    
    max-width: 320px;
    margin: auto;
}
input#date-filter-display,
     div#select-project p,
form#filter-form select  {width: 100%!important;}


}/* End custom CSS */
@media (max-width:1024px){.elementor-2396 .elementor-element.elementor-element-f8de5fb:not(.elementor-motion-effects-element-type-background), .elementor-2396 .elementor-element.elementor-element-f8de5fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("/wp-content/uploads/2024/10/2560x1920_AMS2-1600.webp")}}