/* Filtre Atelier */ 

    .ateliers-filtres-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .filtres-bar {
        background: var(--wp--preset--color--bg-creme-sable);
        padding: 1.5rem;
        border-radius: 10px;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }

    .filtres-row {
display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
    }

    .filtre-groupe {
        display: flex;
        flex-direction: column;
    }

    .filtre-groupe label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .filtre-select,
    .filtre-date,
    .filtre-autocomplete {
        padding: 0.75rem;
        border: 1px solid var(--wp--preset--color--text-color);
        border-radius: 5px;
        font-size: 1rem;
        background: var(--wp--preset--color--bg-creme-pale);
        transition: border-color 0.3s ease;
    }

    .filtre-select:focus,
    .filtre-date:focus,
    .filtre-autocomplete:focus {
        outline: none;
        border-color: var(--wp--preset--color--bleu-matisse, #007cba);
    }

    .btn-reset-filtres {
        display: flex;
        align-items: center;
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
        gap:.5rem;
        background: transparent;
        border: transparent;
        color: var(--wp--preset--color--text-color);
        opacity: .3;
        border: none;
        cursor: pointer;
      line-height: 0.8;
        font-weight: normal;
        transition: opacity 0.3s ease;
    }

    .btn-reset-filtres:hover {
        color: var(--wp--preset--color--text-color);
        opacity: 1;
    }

    .ateliers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .atelier-card {
        padding: 1rem;
        border-radius: 6px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none;
        color: inherit;
        position: relative;
        height: 420px;
    }

    .atelier-card-link {
        position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
    }

.atelier-card-content {
    flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.detail-card-link {
   
    margin-top: auto;
}
.detail-card-link span {
    transition: all 0.3s ease;
 display: inline-flex;
 gap:.5rem;
    border-bottom: 1px solid var(--wp--preset--color--text-color);

}
.detail-card-link span:after {
    content:"";
 display: inline-block;
    width: 24px;
    height: 24px;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.293 17.293L12.707 18.707L19.414 12L12.707 5.29297L11.293 6.70697L15.586 11H6V13H15.586L11.293 17.293Z' fill='%23303030'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color:var(--wp--preset--color--text-color);
}

.atelier-card:hover .detail-card-link span {
    color:var(--wp--preset--color--orange);
    border-bottom-color:var(--wp--preset--color--orange);
}
.atelier-card:hover .detail-card-link span:after {
    background-color:var(--wp--preset--color--orange);
}



    .meta-atelier-type {
        position: absolute;
        top:.5rem;
        left: .5rem;
        z-index: 1000;
        background-color: white;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .meta-atelier-type svg {
        max-width: 24px;
        height: auto;
    }

    .atelier-card .detail-card-excerpt {
        display: none;
    }

    .atelier-card:hover .detail-card-excerpt {
        display: block;
    } 

    .atelier-card:hover .atelier-card-image {
        height: 110px;
    }

    .meta-public, .meta-price {
        font-size:.75rem;
        color:var(--wp--preset--color--neutral);
        display:flex;
        align-items:center;
        gap:4px;
    }
    .meta-price {
        background-color: var(--wp--preset--color--orange);
        color:white;
        padding: 2px 4px;
        border-radius: 3px;
    }




    .atelier-card .pills {
        position: absolute;
        top:10px;
        right: 5px;
        padding: 3px 10px;
        border-radius:20px;
        font-size:.75rem;
        text-transform: uppercase;
        font-weight:bold;
        background-color:#fff;
        z-index: 1;
    }

    .pills.bg-alert {
        background-color:red;
        color:#fff;
    }

    .atelier-card.terminated .atelier-card-image,
    .atelier-card.terminated .atelier-card-content {
        opacity: .6;
    }

    .atelier-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        text-decoration: none;
        background-color:#fff;
        color: inherit;
    }

    .atelier-card a {
        text-decoration:none;
    }

    .atelier-card-image {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius:6px;
        transition: all 0.3s ease;
    }

    .atelier-card-content {
        padding: 6px;
    }

    .atelier-card-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: var(--wp--preset--color--text, #333);
        font-family: var(--wp--preset--font-family--sora);
    }
    .atelier-card-info {
        margin: 0 0 .5rem 0;
        font-size: .75rem;
        color:var(--wp--preset--color--neutral);

    }

    .atelier-meta {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        font-size: 0.9rem;
        justify-content: space-between;
    }

    .atelier-card-sessions {
        background: #f0f8ff;
        padding: 0.75rem;
        border-radius: 5px;
        margin-top: 1rem;
    }

    .atelier-card-sessions strong {
        color: var(--wp--preset--color--bleu-matisse, #007cba);
    }

    .session-item {
        margin: 0.25rem 0;
    }

    .ateliers-loading {
        text-align: center;
        padding: 2rem;
        font-style: italic;
        color: #666;
    }

    .no-results {
        text-align: center;
        padding: 3rem 2rem;
        color: #666;
        background: #f8f9fa;
        border-radius: 10px;
        margin-top: 1rem;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .ateliers-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .filtres-row {
            grid-template-columns: 1fr;
        }
        
        .ateliers-grid {
            grid-template-columns: 1fr;
        }
    }




  /* Autocomplete styling */


.ui-autocomplete {
    max-height: 200px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999 !important;
    max-width: 300px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ui-menu-item {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ui-menu-item-wrapper {
    padding: 8px 12px;
    cursor: pointer;
    display: block;
    color: #333;
}

.ui-menu-item-wrapper:hover,
.ui-state-active {
    background-color: #f0f0f0;
    color: #000;
}

.ui-helper-hidden-accessible {
    position: absolute;
    left: -9999px;
}







 /* Styles pour le sélecteur de vue */
        .calendrier-view-selector {
            display: flex;
            max-width:1400px;
            margin:auto;
            gap: 10px;
            justify-content: space-between;         
            border-radius: 8px;
            box-sizing:border-box;
        }
        .calendrier-view-selector div {
             display: flex;
             gap: 10px;
        }

         .calendrier-view-selector div.view-mode-switch {
            gap:0;
         }



        .btn-view-mode {
            display:flex;
            text-decoration:none;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: transparent;
            border: 1px solid var(--wp--preset--color--text-color);
            border-radius: 30px;
            color: var(--wp--preset--color--text-color);
            font-family: var(--wp--preset--font-family--sora);
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

            .btn-view-mode.btn-view-liste {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            }
            .btn-view-mode.btn-view-calendar {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            }

        .btn-view-mode.active {
        border: 1px solid var(--wp--preset--color--text-color);
            background:var(--wp--preset--color--text-color);
            color: white;
        }