/* MCC 2026 — Catalogue /seminaires : affichage en liste (par défaut).
   Complète mcc-2026-seminaires.css ; même portée .mcc2026 .m-seml-*. */
/* ── Affichage en liste (par défaut) : carte horizontale « premium » ─── */
.mcc2026 .m-seml-card__lbody,
.mcc2026 .m-seml-card__aside { display: none; }
.mcc2026 .m-seml-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mcc2026 .m-seml-grid.is-list .m-seml-card {
    flex-direction: row;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 7, 29, 0.06);
}
.mcc2026 .m-seml-grid.is-list .m-seml-card__body,
.mcc2026 .m-seml-grid.is-list .m-seml-card__attest { display: none; }
/* Vue liste : visuel carré (format 1080×1080), aligné en haut de la carte. */
.mcc2026 .m-seml-grid.is-list .m-seml-card__media { flex: 0 0 auto; width: clamp(9rem, 18vw, 13.5rem); max-width: none; aspect-ratio: 1 / 1; min-height: 0; align-self: flex-start; }
.mcc2026 .m-seml-grid.is-list .m-seml-card__lbody {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
}
.mcc2026 .m-seml-grid.is-list .m-seml-card__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
    flex: 0 0 22%;
    padding: 14px 20px;
    border-left: 1px solid var(--site-border, #eef0f2);
}
.mcc2026 .m-seml-card__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mcc2026 .m-seml-lpill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}
.mcc2026 .m-seml-lpill--univ { background: var(--site-red-soft, #fdecec); color: var(--site-red-dark, #b80000); }
.mcc2026 .m-seml-lpill--none { background: #fdf1f1; color: #6b4a4a; }
.mcc2026 .m-seml-lpill--upcoming,
.mcc2026 .m-seml-lpill--active { background: #e7f6ec; color: #13703a; }
.mcc2026 .m-seml-lpill--active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mcc2026 .m-seml-lpill--past { background: var(--site-canvas, #eef0f3); color: var(--site-muted, #4b5563); }
.mcc2026 .m-seml-card__ltitle {
    margin: 0.1rem 0 0;
    font-family: var(--m-font-display);
    font-size: 1.19rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--m-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mcc2026 .m-seml-card__lorg {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--m-navy);
    min-width: 0;
}
.mcc2026 .m-seml-card__lorg > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcc2026 .m-seml-card__ltype {
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--site-border, #d9dce1);
    border-radius: 5px;
    background: var(--site-canvas, #f5f6f8);
    font-size: 12px;
    color: var(--site-ink, #374151);
}
.mcc2026 .m-seml-card__lmeta,
.mcc2026 .m-seml-card__lfacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--site-muted, #4b5563);
}
.mcc2026 .m-seml-card__lmeta li {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding-right: 0.75rem;
    margin-right: 0.75rem;
    border-right: 1px solid var(--site-border, #e5e7eb);
}
.mcc2026 .m-seml-card__lmeta li:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.mcc2026 .m-seml-card__lfacts { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.mcc2026 .m-seml-card__lfacts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.mcc2026.m-semlist .m-seml-card__lbody svg.lucide,
.mcc2026.m-semlist .m-seml-card__aside svg.lucide { width: 15px; height: 15px; color: var(--site-muted, #6b7280); stroke-width: 1.5; }
.mcc2026 .m-seml-card__cta {
    position: static;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 40px;
    padding: 0 0.9rem;
    border: 1.5px solid var(--m-red);
    border-radius: var(--site-radius-btn, 6px);
    background: var(--site-surface, #fff);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--m-red);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.mcc2026.m-semlist .m-seml-card__cta svg.lucide { color: currentColor; }
.mcc2026 .m-seml-card:hover .m-seml-card__cta,
.mcc2026 .m-seml-card__cta:focus-visible { background: var(--m-red); color: #fff; }

@media (max-width: 900px) {
    .mcc2026 .m-seml-grid.is-list .m-seml-card { flex-wrap: wrap; }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__lbody { flex: 1 1 60%; }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__aside {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px solid var(--site-border, #eef0f2);
    }
    .mcc2026 .m-seml-card__lfacts { flex-direction: row; gap: 0.5rem 1.25rem; }
    .mcc2026 .m-seml-card__cta { width: 100%; min-height: 44px; }
}
@media (max-width: 600px) {
    .mcc2026 .m-seml-grid.is-list .m-seml-card { flex-direction: column; flex-wrap: nowrap; }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__media { flex: none; width: 100%; max-width: none; aspect-ratio: 1 / 1; min-height: 0; }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__aside { flex: none; }
}

/* ── Responsive (ajustements) ────────────────────────────────────────────
   Tablette : les trois onglets restent sur une ligne, les filtres forment
   une grille régulière. Mobile : les filets entre les infos d'une carte
   restaient seuls en bout de ligne quand la ligne se coupait → remplacés
   par un simple espacement ; tri + vues sur une seule ligne. */
@media (max-width: 900px) and (min-width: 681px) {
    .mcc2026 .m-seml-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mcc2026 .m-seml-tab { padding: 0 0.6rem; font-size: 0.84rem; text-align: center; }
    .mcc2026 .m-seml-menus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mcc2026 .m-seml-menu select { width: 100%; max-width: none; }
}
@media (max-width: 680px) {
    .mcc2026 .m-seml-card__lmeta { gap: 0.35rem 1rem; }
    .mcc2026 .m-seml-card__lmeta li { padding-right: 0; margin-right: 0; border-right: 0; }
    .mcc2026 .m-seml-bar__right { flex-wrap: nowrap; width: 100%; }
    .mcc2026 .m-seml-menu--sort { flex: 1; min-width: 0; }
    .mcc2026 .m-seml-menu--sort select { width: 100%; max-width: none; }
    .mcc2026 .m-seml-sort__label { white-space: nowrap; }
}

.mcc2026 .m-seml-card__cta { border-radius: var(--m-radius-btn, 6px); }

/* Vue liste en deux colonnes : la photo carrée (plus grande) à gauche, tous
   les détails à droite ; le domaine, le niveau et « Voir le programme »
   passent sous les détails au lieu d'une troisième colonne. */
@media (min-width: 641px) {
    .mcc2026 .m-seml-grid.is-list .m-seml-card {
        display: grid;
        grid-template-columns: clamp(12rem, 22vw, 16.5rem) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        align-items: stretch;
    }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__media {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 100%;
        align-self: stretch;
        aspect-ratio: 1 / 1;
    }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__lbody { grid-column: 2; grid-row: 1; padding: 18px 24px 8px; }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__aside {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem 1.5rem;
        padding: 12px 24px 18px;
        border-left: 0;
        border-top: 1px solid var(--site-border, #eef0f2);
        margin-inline: 24px;
        padding-inline: 0;
    }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__lfacts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
}

/* Filtres Type / Statut sur la même ligne que le tri (à gauche de la barre). */
.mcc2026 .m-seml-bar:has(.m-seml-menus--bar) { justify-content: flex-end; }
.mcc2026 .m-seml-bar .m-seml-menus--bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
@media (max-width: 640px) {
    .mcc2026 .m-seml-bar .m-seml-menus--bar { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Intervenants dans les cartes formation : photo ronde + drapeau du pays. */
.mcc2026 .m-seml-spk { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.35rem 0 0; padding: 0; }
.mcc2026 .m-seml-spk li { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mcc2026 .m-seml-spk__avatar {
    position: relative; flex: none; display: inline-grid; place-items: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--site-canvas, #eef0f3);
    color: var(--site-navy, #00071d); font-size: 0.72rem; font-weight: 700;
}
.mcc2026 .m-seml-spk__avatar > img:not(.m-seml-spk__flag) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mcc2026 .m-seml-spk__flag {
    position: absolute; right: -4px; bottom: -2px; width: 1.1rem; height: 0.8rem;
    border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 2px #fff;
}
.mcc2026 .m-seml-spk__name { font-size: 0.8rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.mcc2026 .m-seml-spk__more { font-size: 0.8rem; font-weight: 700; color: var(--site-muted, #64748b); }

/* Logo de l'université qui délivre l'attestation, à côté du badge. */
.mcc2026 .m-seml-univlogo { height: 1.9rem; width: auto; max-width: 7rem; object-fit: contain; vertical-align: middle; }
.mcc2026 .m-seml-card__pills { align-items: center; }
.mcc2026 .m-seml-card__attest .m-seml-univlogo { height: 1.3rem; margin-inline-end: 0.4rem; }

.mcc2026 .m-seml-lpill--part { background: #eef2ff; color: #3730a3; }

/* Date de la formation mise en avant (un peu plus grande que les autres infos). */
.mcc2026 .m-seml-card li.m-seml-date { font-size: 15.5px; font-weight: 700; color: var(--site-ink, #111827); }
.mcc2026.m-semlist .m-seml-card li.m-seml-date svg.lucide { width: 18px; height: 18px; color: var(--site-red-dark, #b91c1c); stroke-width: 1.75; }

/* Prix en haut à droite de la carte (vue liste), aligné sur la rangée des pastilles. */
.mcc2026 .m-seml-price {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end;
    gap: 0.25rem 0.55rem;
    margin-inline-start: auto;
    text-align: end;
}
.mcc2026 .m-seml-price__now { font-size: 1.3rem; font-weight: 800; color: var(--site-ink, #111827); white-space: nowrap; letter-spacing: -0.01em; }
.mcc2026 .m-seml-price__old { font-size: 13px; color: #9ca3af; white-space: nowrap; }
.mcc2026 .m-seml-price__badge {
    align-self: center;
    padding: 0.1rem 0.5rem; border-radius: 999px;
    background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.mcc2026 .m-seml-card__pills { align-items: center; }

/* Photo des cartes : carrée (format 1080×1080), de taille fixe, sur toute
   la hauteur de la carte : la carte fait au moins la taille de la photo,
   donc la photo remplit la colonne de gauche sans bande blanche dessous.
   (Si un contenu exceptionnellement long agrandit la carte, la photo suit
   la hauteur, recadrée, plutôt que de laisser un vide.) */
@media (min-width: 641px) {
    .mcc2026 .m-seml-grid.is-list .m-seml-card {
        --seml-photo: 19.5rem;
        grid-template-columns: var(--seml-photo) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__media {
        grid-row: 1 / 3;
        width: var(--seml-photo); height: auto; min-height: var(--seml-photo); max-height: none;
        aspect-ratio: auto; align-self: stretch;
    }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__media > img { position: absolute; inset: 0; }
}
.mcc2026 .m-seml-price__now.is-request { font-size: 1rem; font-weight: 700; color: var(--site-muted, #4b5563); }

/* Tarif étudiants et jeunes diplômés, sous le prix (sur présentation de la carte). */
.mcc2026 .m-seml-price__student {
    flex: 1 1 100%;
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.1rem 0.35rem;
    font-size: 13px; color: #1e3a8a;
}
.mcc2026 .m-seml-price__student strong { font-weight: 800; color: #1e3a8a; }
.mcc2026 .m-seml-price__student small { flex: 1 1 100%; text-align: end; font-size: 11.5px; color: var(--site-muted, #6b7280); }
.mcc2026.m-semlist .m-seml-price__student svg.lucide { width: 15px; height: 15px; color: #1e3a8a; }

/* Domaine / niveau retirés du pied de carte : le bouton reste à droite. */
.mcc2026 .m-seml-grid.is-list .m-seml-card__aside { justify-content: flex-end; }

/* Photo des cartes : TOUJOURS carrée (1080×1080) et de taille fixe, quel que
   soit le contenu : elle n'est plus étirée par la hauteur de la carte. La
   carte fait au moins la taille de la photo. */
@media (min-width: 641px) {
    .mcc2026 .m-seml-grid.is-list .m-seml-card { --seml-photo: 22rem; min-height: var(--seml-photo); }
    .mcc2026 .m-seml-grid.is-list .m-seml-card__media {
        width: var(--seml-photo); height: var(--seml-photo); min-height: 0; max-height: var(--seml-photo);
        aspect-ratio: 1 / 1; align-self: start;
    }
    /* Prix + tarif étudiant sur deux lignes compactes, à droite des pastilles. */
    .mcc2026 .m-seml-price { row-gap: 0; }
}

/* Tarif étudiant en pied de carte, à gauche du bouton. */
.mcc2026 .m-seml-student { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-inline-end: auto; padding: 0.35rem 0.8rem; border-radius: 999px; background: #eff6ff; color: #1e3a8a; font-size: 13.5px; }
.mcc2026 .m-seml-student strong { font-weight: 800; }
.mcc2026 .m-seml-student small { color: var(--site-muted, #6b7280); font-size: 12px; }
.mcc2026.m-semlist .m-seml-student svg.lucide { width: 16px; height: 16px; color: #1e3a8a; }