/* --- STYLES DE BASE POUR LA GRILLE --- */
.lerno-formations-gallery.grid {
    display: grid;
    gap: 1.25rem; /* 20px */
}

/* --- Barre de filtres --- */
.lerno-filter-bar {
    padding: 1rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
}
.lerno-filter-bar-inner {
    max-width: 80rem; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) { /* md: */
    .lerno-filter-bar-inner {
        flex-direction: row;
        align-items: center;
    }
}
.lerno-search-wrapper {
    position: relative;
    width: 100%;
}
@media (min-width: 768px) { /* md: */
    .lerno-search-wrapper {
        width: 33.333333%; /* w-1/3 */
    }
}
.lerno-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem; /* py-2 pl-10 pr-4 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #cbd5e1; /* border-slate-300 */
}
.lerno-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #2678ff; /* ring-2 focus:ring-[#2678ff] */
}
.lerno-search-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding-left: 0.75rem; /* pl-3 */
    display: flex;
    align-items: center;
    pointer-events: none;
    color: #2678ff;
}
.lerno-search-icon i, .lerno-search-icon svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}
.lerno-filter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}
.lerno-filter-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    margin-right: 0.5rem; /* mr-2 */
}
.filter-btn {
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    font-size: 0.875rem; /* text-sm */
    background-color: white;
    border: 1px solid #cbd5e1; /* border-slate-300 */
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.filter-btn:hover {
    background-color: #eff6ff; /* hover:bg-blue-50 */
    border-color: #93c5fd; /* hover:border-blue-300 */
}
.filter-btn.active {
    background-color: #2678ff;
    color: white;
    border-color: #2678ff;
}

/* --- Cartes de formation --- */
.formation-card {
    background-color: white;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.formation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.card-image-wrapper {
    position: relative;
    overflow: hidden;
}
.card-image {
    width: 100%;
    height: 14rem; /* h-56 */
    object-fit: cover;
    transition: transform 0.3s ease;
}
.formation-card:hover .card-image {
    transform: scale(1.05);
}
.card-content {
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
p.card-category {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #2678ff;
}
.card-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #334155; /* text-slate-800 */
    flex-grow: 1;
}
p.card-duration {
    font-size: 0.875rem; /* text-sm */
    margin-top: 1rem; /* mt-4 */
    color: #64748b; /* text-slate-500 */
    display: inline-flex;
    align-items: center;
}
.icon-clock {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    display: inline-block;
    margin-right: 0.25rem; /* mr-1 */
}
.card-button {
    margin-top: 1.5rem; /* mt-6 */
    display: inline-block;
    text-align: center;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    color: white;
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    background-image: linear-gradient(to right, #2678ff, #3edeff);
    transition: opacity 0.2s ease;
    text-decoration: none;
}
.card-button:hover {
    opacity: 0.9;
}