/*
|--------------------------------------------------------------------------
| Cartes uniformisées
|--------------------------------------------------------------------------
|
| La feuille est volontairement chargée après les CSS propres aux pages.
| Elle reprend la géométrie des cartes Cours et Activités de l’accueil.
*/

.courses-grid,
.quiz-grid,
.science-grid,
.youth-grid,
.resource-disease-grid {
    align-items: stretch;
    box-sizing: border-box;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 1120px;
    width: 100%;
}

/* Toutes les cartes et publicités occupent exactement la même cellule. */
.course-card,
.quiz-card,
.science-card,
.youth-card,
.resource-disease-grid > .module-card,
.courses-grid > .sv-ad-card,
.quiz-grid > .sv-ad-card,
.science-grid > .sv-ad-card,
.youth-grid > .sv-ad-card,
.resource-disease-grid > .sv-ad-card {
    border-radius: 18px !important;
    box-sizing: border-box !important;
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
    min-width: 0;
    overflow: hidden !important;
    width: 100% !important;
}

/* Aspect commun */
.course-card,
.quiz-card,
.science-card,
.youth-card,
.resource-disease-grid > .module-card {
    background: #fff;
    border: 1px solid #dce4ef;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    padding: 15px 18px !important;
    position: relative;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.course-card:hover,
.quiz-card:hover,
.science-card:hover,
.youth-card:hover,
.resource-disease-grid > .module-card:hover {
    border-color: #bfd1eb;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .11);
    transform: translateY(-3px);
}

/* Images de fond, jamais une zone séparée. */
.course-card-media,
.science-card-media,
.youth-card-media {
    border-radius: inherit !important;
    height: 100% !important;
    inset: 0 !important;
    margin: 0 !important;
    opacity: .18;
    overflow: hidden;
    pointer-events: none;
    position: absolute !important;
    width: 100% !important;
    z-index: 0;
}

.course-card-media::after,
.science-card-media::after,
.youth-card-media::after {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.36) 0%,
        rgba(255,255,255,.78) 48%,
        rgba(255,255,255,.97) 100%
    );
    content: "";
    inset: 0;
    position: absolute;
}

.course-card-media img,
.science-card-media img,
.youth-card-media img {
    display: block;
    height: 100% !important;
    object-fit: cover;
    width: 100% !important;
}

.course-card-media > span,
.science-card-media > span,
.youth-card-media > span:not(.youth-format) {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Structure interne fixe
|--------------------------------------------------------------------------
*/

/* Cours, activités et techniques */
.course-card-body,
.science-card-body {
    display: grid !important;
    grid-template-rows: 24px auto minmax(0, 1fr) 54px;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    position: relative;
    row-gap: 6px;
    z-index: 2;
}

/* Articles jeunesse */
.youth-card-body {
    display: grid !important;
    grid-template-rows: 24px auto minmax(0, 1fr) 54px;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    position: relative;
    row-gap: 6px;
    z-index: 2;
}

/* Quiz */
.quiz-card {
    display: grid !important;
    grid-template-rows: 24px auto minmax(0, 1fr) 16px 46px;
    row-gap: 4px;
    padding-bottom: 6px !important;
}

/* Maladies : aucune zone bouton, davantage de place pour le texte. */
.resource-disease-grid > .module-card {
    display: grid !important;
    grid-template-rows: 24px auto minmax(0, 1fr);
    row-gap: 7px;
}

/*
|--------------------------------------------------------------------------
| Badges compacts
|--------------------------------------------------------------------------
*/

.course-card-tags,
.quiz-card-tags,
.science-card-tags,
.youth-tags,
.resource-disease-grid .module-badges {
    align-items: center;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    height: 24px;
    margin: 0 !important;
    min-height: 24px !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    z-index: 3;
}

.course-card-tags > *,
.quiz-card-tags > *,
.science-card-tags > *,
.youth-tags > *,
.resource-disease-grid .module-badges > * {
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: 46%;
    overflow: hidden;
    padding: 6px 9px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-card-tags > *:nth-child(n+3),
.quiz-card-tags > *:nth-child(n+3),
.science-card-tags > *:nth-child(n+3),
.youth-tags > *:nth-child(n+3),
.resource-disease-grid .module-badges > *:nth-child(n+3) {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Titres et descriptions
|--------------------------------------------------------------------------
*/

.course-card h2,
.quiz-card h2,
.science-card h2,
.youth-card h2,
.resource-disease-grid .module-card h2 {
    align-self: start;
    color: #0f172a;
    display: -webkit-box !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-height: 50px;
    min-height: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.course-card p,
.quiz-card p,
.science-card p,
.youth-card-body > p,
.resource-disease-grid .module-card > p {
    align-self: start;
    color: #475569 !important;
    display: -webkit-box !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    text-overflow: ellipsis;
    visibility: visible !important;
    z-index: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.resource-disease-grid .module-card > p {
    -webkit-line-clamp: 6;
}

/*
|--------------------------------------------------------------------------
| Zones d’action fixes
|--------------------------------------------------------------------------
*/

.course-card-footer,
.science-card-footer,
.youth-card-footer {
    align-items: center !important;
    align-self: end;
    display: grid !important;
    grid-template-columns: 1fr;
    height: 54px;
    justify-items: center;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    position: relative;
    width: 100%;
    z-index: 4;
}

.course-card-footer small,
.science-card-footer small,
.youth-card-footer > span,
.youth-author {
    display: none !important;
}

.course-card-footer .btn,
.science-card-footer .btn,
.youth-card-footer .btn,
.quiz-card-button {
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    display: inline-flex !important;
    height: 46px;
    justify-content: center;
    margin: 0 auto !important;
    max-width: 100%;
    min-height: 46px;
    padding: 8px 24px !important;
    text-align: center;
    width: auto !important;
}

.quiz-card-duration {
    align-self: end;
    color: #64748b;
    font-size: 11px !important;
    line-height: 1;
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    text-align: center;
    white-space: nowrap;
}

.quiz-card-button {
    align-self: end !important;
    margin-bottom: 0 !important;
    transform: translateY(2px);
}

.youth-format {
    display: none !important;
}

.laboratory-plus-star {
    z-index: 5;
}

/*
|--------------------------------------------------------------------------
| Publicités
|--------------------------------------------------------------------------
*/

.courses-grid > .sv-ad-card,
.quiz-grid > .sv-ad-card,
.science-grid > .sv-ad-card,
.youth-grid > .sv-ad-card,
.resource-disease-grid > .sv-ad-card {
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
}

.courses-grid > .sv-ad-card .sv-ad-body,
.quiz-grid > .sv-ad-card .sv-ad-body,
.science-grid > .sv-ad-card .sv-ad-body,
.youth-grid > .sv-ad-card .sv-ad-body,
.resource-disease-grid > .sv-ad-card .sv-ad-body {
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 15px 18px !important;
}

/*
 * Publicités écrites : le texte suit naturellement le titre au lieu d'être
 * réparti dans une grille verticale qui repoussait le paragraphe vers le bas.
 * Le CTA reste ancré en bas grâce au margin-top:auto.
 */
.courses-grid > .sv-ad-card.sv-ad-text .sv-ad-body,
.quiz-grid > .sv-ad-card.sv-ad-text .sv-ad-body,
.science-grid > .sv-ad-card.sv-ad-text .sv-ad-body,
.youth-grid > .sv-ad-card.sv-ad-text .sv-ad-body,
.resource-disease-grid > .sv-ad-card.sv-ad-text .sv-ad-body {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}

.courses-grid > .sv-ad-card .sv-ad-body h3,
.quiz-grid > .sv-ad-card .sv-ad-body h3,
.science-grid > .sv-ad-card .sv-ad-body h3,
.youth-grid > .sv-ad-card .sv-ad-body h3,
.resource-disease-grid > .sv-ad-card .sv-ad-body h3 {
    display: -webkit-box;
    margin: 0 !important;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.courses-grid > .sv-ad-card .sv-ad-body p,
.quiz-grid > .sv-ad-card .sv-ad-body p,
.science-grid > .sv-ad-card .sv-ad-body p,
.youth-grid > .sv-ad-card .sv-ad-body p,
.resource-disease-grid > .sv-ad-card .sv-ad-body p {
    display: -webkit-box;
    font-size: 15px !important;
    line-height: 1.42 !important;
    margin: 0 0 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.courses-grid > .sv-ad-card .sv-ad-cta,
.quiz-grid > .sv-ad-card .sv-ad-cta,
.science-grid > .sv-ad-card .sv-ad-cta,
.youth-grid > .sv-ad-card .sv-ad-cta,
.resource-disease-grid > .sv-ad-card .sv-ad-cta {
    align-self: center;
    justify-self: center;
    margin: auto 0 0 !important;
}

/*
|--------------------------------------------------------------------------
| Accueil : Articles jeunesse et Techniques de laboratoire
|--------------------------------------------------------------------------
|
| Les cartes Cours et Activités de l’accueil restent la référence.
*/

.home-youth-article-card,
.home-lab-card {
    box-sizing: border-box;
    display: grid !important;
    grid-template-rows: 24px auto minmax(0, 1fr) 46px;
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
    overflow: hidden !important;
    padding: 15px 18px !important;
    row-gap: 6px;
}

.home-youth-article-card .home-card-tags,
.home-lab-card .home-card-tags {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    height: 24px;
    margin: 0 !important;
    min-height: 24px;
    overflow: hidden;
}

.home-youth-article-card .home-card-tags > *,
.home-lab-card .home-card-tags > * {
    flex: 0 0 auto;
    font-size: 11px !important;
    line-height: 1;
    margin: 0;
    max-width: 46%;
    overflow: hidden;
    padding: 6px 9px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-youth-article-card .home-card-tags > *:nth-child(n+3),
.home-lab-card .home-card-tags > *:nth-child(n+3) {
    display: none;
}

.home-youth-article-card h3,
.home-lab-card h3 {
    display: -webkit-box;
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-youth-article-card p,
.home-lab-card p {
    display: -webkit-box;
    font-size: 15px !important;
    line-height: 1.42 !important;
    margin: 0 !important;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.home-youth-article-card small {
    display: none !important;
}

.home-youth-article-card .button,
.home-lab-card .button {
    align-items: center;
    align-self: end;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    justify-self: center;
    margin: 0 !important;
    min-height: 46px;
    padding: 8px 24px !important;
    width: auto !important;
}

/* Responsive */
@media (max-width: 820px) {
    .courses-grid,
    .quiz-grid,
    .science-grid,
    .youth-grid,
    .resource-disease-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-mobile-carousel > .home-youth-article-card,
    .home-mobile-carousel > .home-lab-card {
        flex: 0 0 86%;
        height: 300px !important;
        max-height: 300px !important;
        min-height: 300px !important;
        min-width: 86%;
    }
}

@media (max-width: 620px) {
    .course-card,
    .quiz-card,
    .science-card,
    .youth-card,
    .resource-disease-grid > .module-card,
    .courses-grid > .sv-ad-card,
    .quiz-grid > .sv-ad-card,
    .science-grid > .sv-ad-card,
    .youth-grid > .sv-ad-card,
    .resource-disease-grid > .sv-ad-card {
        height: 300px !important;
        max-height: 300px !important;
        min-height: 300px !important;
        padding-inline: 15px !important;
    }

    .courses-grid > .sv-ad-card,
    .quiz-grid > .sv-ad-card,
    .science-grid > .sv-ad-card,
    .youth-grid > .sv-ad-card,
    .resource-disease-grid > .sv-ad-card {
        padding: 0 !important;
    }
}

/* V4.3 — cartes de cours : deux badges compacts, niveau + matière. */
.course-card .course-card-tags{
    align-items:center!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    height:24px!important;
    min-height:24px!important;
    overflow:hidden!important;
}
.course-card .course-card-tags>*{
    display:inline-flex!important;
    align-items:center!important;
    flex:0 1 auto!important;
    max-width:calc(50% - 3px)!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.course-card .course-card-tags>*:nth-child(n+3){display:none!important}