/* ============================================================
   TOP-FORMATIONS BANNER
   Section "Formations les plus demandées"
   ============================================================ */

/*
 * Le navigateur définit [hidden] { display: none } sans !important.
 * Une règle auteur (ex. Divi : section { display: block }) peut l'écraser.
 * Cette règle garantit que banner.hidden = true masque réellement la section.
 */
#topFormationsBanner[hidden],
.top-formations__item .Ref {
    display: none !important;
}

.top-formations__banner {
    background: #3b455e;
    border-radius: 8px;
    padding: 24px 20px;
    margin-bottom: 24px;
}


.top-formations__banner > header {
    display: block;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 24px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-weight: 400;
}
.top-formations__banner > header > b {
    font-weight: 700;
}

.top-formations__banner > header::after {
    content: '';
    display: block;
    width: 134px;
    height: 8px;
    background: #097FC2;
    margin-top: 18px;
}
/* ── Liste : mobile/tablette  1 colonne, desktop 3 ────────── */

.top-formations__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.top-formations__item {width: 100%;}

.top-formations__item .cartouche__mainLink {
    margin-bottom: 10px;
}




/* Desktop/Tablette */
@media (min-width: 1200px) {
    .top-formations__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .top-formations__item {
        flex: none;
        min-width: 0;
    }
    /* Annule le flex-basis 100% du 3e item en tablette */
    .top-formations__item:last-child {
        flex-basis: auto;
    }

    .top-formations__banner .form__card {
        min-height: 100%;
    }
}

@media (min-width: 1201px) {
    .top-formations__banner > header { font-size:36px;}
    .top-formations__banner .form__card {
        display: grid;
        border-radius: 6px;
        min-height: auto; /* écrase min-height 150px de common-cartouche.css */
        background: transparent linear-gradient(264deg, #c2e9fb 0, #a6c9fd 100%) 0 0 no-repeat padding-box;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas:
            "badges   funding"
            "title    title"
            "status   status"
            "footer   footer";
    }
    .top-formations__item .form__card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
        transition: box-shadow 0.15s ease;
    }

    .top-formations__item .cartouche__footer__info {
        flex: 1;
    }
    .top-formations__banner {
        padding: 32px 32px;
    }
    .top-formations__header h2 {
        font-size: 22px;
    }
    
    .top-formations__item .form__card:not(.has-logo) > *{padding-left:16px;}

    .top-formations__item .form__titre {padding:0 16px;}

    /* Badges (NEW/TOP/PROMO) + pastilles financement (mobile) */
    .top-formations__item .form__badges {
        grid-area: badges;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px 0 16px 16px;
        margin-bottom:0;
        min-width: auto;
    }



    /* ── Surcharges CSS scopées .top-formations__item ────────────── */

    /* Réinitialise le margin-bottom hérité de .cartouche__mainLink */
    .top-formations__item .cartouche__mainLink {
        margin-bottom: 0;
    }

    /* Force visible : Prix et Durée (masqués mobile par défaut) */
    .top-formations__item .Price,
    .top-formations__item .Duration {
        display: block !important;
    }

    /* Masque : Réf., Modalité, Note/Étoiles, badges financement mobile */
    .top-formations__item .Ref,
    .top-formations__item .Modality,
    .top-formations__item .cartouche__footer__notes__wrapper,
    .top-formations__item .form__funding > span {
        display: none !important;
    }

    /* Réinitialise le margin-bottom hérité de .cartouche__mainLink */
    .top-formations__item .cartouche__mainLink {
        margin-bottom: 0;
    }

    /* Force visible : Prix et Durée (masqués mobile par défaut) */
    .top-formations__item .Price,
    .top-formations__item .Duration {
        display: block !important;
    }

    /* Masque : Réf., Modalité, Note/Étoiles, badges financement mobile */
    .top-formations__item .Ref,
    .top-formations__item .Modality,
    .top-formations__item .cartouche__footer__notes__wrapper,
    .top-formations__item .form__funding > span {
        display: none !important;
    }
    
    .top-formations__item > .form__card {max-height:210px;grid-template-rows:70px minmax(58px, 1fr) 1fr auto;}

    .top-formations__item .form__titre {font-size:16px;height:58px;min-height:0;max-height:58px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

    .top-formations__item .form__status,
    .top-formations__item .cartouche__footer__info p  {font-size:12px;}

    .top-formations__item .form__funding {
        padding:12px 16px 12px 8px;
        justify-content: flex-end;
        flex-wrap:nowrap;
    }
    .top-formations__item .form__funding > img {max-width:auto;max-height:90%;}
    
    .top-formations__item .cartouche__badge {
        height: 20px;
        padding: 0 8px;
        font-size: 10px;
    } 
}

@media (min-width:1600px) {   
    .top-formations__item > .form__card {max-height:232px;grid-template-rows:80px minmax(64px, 1fr) 1fr auto;}
}

@media (min-width:1700px) {   
    .top-formations__item .cartouche__badge {
        height: 24px;
        padding: 0 14px;
        font-size: 13px;
    }
}

@media (min-width:1800px) { 
    .top-formations__item > .form__card {grid-template-rows:86px minmax(64px, 1fr) 1fr auto;}

    .top-formations__item .form__titre {font-size:18px;height:64px;max-height:64px;}

    .top-formations__item .form__status,
    .top-formations__item .cartouche__footer__info p {font-size:14px;}
    
    .top-formations__item  .cartouche__badge {
        height: 30px;
        padding: 0 17px;
        font-size: 16px;
    }
}