/* ============================================
   FORMATIONS COMPONENT - Formations Section
   ============================================ */

.formations-section-fullwidth {
    padding-left: 0;
    padding-right: 0;
}

.formations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.formations-list-fullwidth {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-lg) auto;
    width: 100%;
    max-width: 1200px;
}

.formations-category-filter {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    height: 72px;
    width: min(100%, 238px);
}

.formations-category-filter__trigger {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: .6rem;
    padding: .4rem .75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--gray-200));
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 245, 253, .96));
    box-shadow: 0 12px 30px rgba(136, 106, 181, .08);
    color: var(--gray-800);
    cursor: pointer;
    font-weight: 650;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.formations-category-filter__trigger > :first-child { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, white); color: var(--primary-700); flex: 0 0 2.35rem; }
.formations-category-filter__trigger span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.formations-category-filter__chevron { color: var(--primary-700); font-size: .75rem; transition: transform .2s ease; }
.formations-category-filter.is-open .formations-category-filter__chevron { transform: rotate(180deg); }
.formations-category-filter__trigger:hover, .formations-category-filter__trigger:focus-visible, .formations-category-filter.is-open .formations-category-filter__trigger { border-color: color-mix(in srgb, var(--primary) 38%, var(--gray-300)); box-shadow: 0 16px 36px rgba(136, 106, 181, .14); outline: 0; transform: translateY(-1px); }
.formations-category-filter__menu { position: absolute; z-index: 30; top: calc(100% + .5rem); right: 0; display: none; width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 2rem)); padding: .45rem; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--gray-200)); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 18px 38px rgba(48, 32, 69, .18); }
.formations-category-filter.is-open .formations-category-filter__menu { display: grid; gap: .2rem; }
.formations-category-filter__menu button { width: 100%; padding: .7rem .8rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--gray-700); cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.formations-category-filter__menu button:hover, .formations-category-filter__menu button:focus-visible { background: color-mix(in srgb, var(--primary) 10%, white); color: var(--primary-700); outline: 0; }
.formations-category-filter__menu button[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary-700); }
.formations-category-filter select {
    width: 100%;
    min-width: 0;
    padding: .65rem 2rem .65rem 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5a7f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .25rem center;
    color: var(--gray-800);
    font-weight: 600;
    cursor: pointer;
    outline: 0;
    text-overflow: ellipsis;
}

.formations-search-panel {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.formations-search-panel .formations-search-box {
    flex: 1 1 auto;
}

.formation-card-full {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.formation-card-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--primary-200);
}

.formations-pagination .page-item.active .page-link,
.formations-pagination .page-link[aria-current="page"] {
    color: #ffffff !important;
    opacity: 1;
    text-shadow: none;
    font-weight: 700;
}

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

@media (max-width: 768px) {
    .formations-list {
        gap: var(--space-lg);
        margin-top: var(--space-lg);
    }

    .formations-list-fullwidth {
        gap: var(--space-md);
        margin: var(--space-md) auto;
    }

    .formations-search-panel { align-items: stretch; flex-direction: column; }
    .formations-category-filter { width: 100%; height: 65px; }
}