/* ============================================================
   formations.css
   Styles des cartouches formations — structure grid unifiée.
   Dépend de : common-ssr.css, common-cartouche.css
   ============================================================ */


/* ============================================================
   FORM__CARD — BASE (mobile-first, ≤ 976px)
   ============================================================ */

.form__card {
    display: grid;
    overflow: hidden;
    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";
	min-height:130px;
}

/* Badges (NEW/TOP/PROMO) + pastilles financement (mobile) */
.form__badges {
    grid-area: badges;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    padding: 15px 0 0 10px;
    margin-bottom:-7px;
}
.form__badges:empty ~ .form__funding{padding-left:10px;}

/* Pastilles financement  */
.form__funding {
    grid-area: funding;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 15px 4px 0;
    margin-bottom:-7px;
}

.form__funding:empty {display: none;}
.form__funding > img {display:none;}
.form__funding > p {display:inline-block;}

.form__badges:not(:has(.cartouche__badge)) {
    padding: 0;
}

/* Pastilles financement — visibles mobile, masquées desktop */
.form__badges__financement {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Titre */
.form__titre {
    grid-area: title;
    font-size: 14px;
    color: #192963;
    font-weight: 700;
    margin: 0;
    padding: 15px 10px 10px;
	min-height:50px;
}

/* Statut (FORMATION CERTIFIANTE / COURS OFFICIEL) */
.form__status {
    grid-area: status;
    font-size: 12px;
    color: #2f2933;
    margin: 0;
    padding: 10px;
}

.form__status:empty {
    padding: 0;
}

/* Footer */
.form__footer {
    grid-area: footer;
    background: #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
	margin-top:10px;
}

.cartouche__footer__info p {
    font-size: 12px;
    font-weight: 700;
    color: #272a36;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

/* footer : données masquées pour mobile */
.Modality,
.Price{display:none;}


/* ---- max-width: 340px ---- */

@media (max-width: 340px) {
    .form__footer {
        padding: 4px 6px;
    }

    .cartouche__footer__info {
        gap: 6px;
    }

    .cartouche__footer__info p {
        font-size: 9px;
    }
}


/* ---- max-width: 380px ---- */

@media (max-width: 380px) {
    .cartouche__footer__info {
        gap: 10px;
    }

    .cartouche__footer__info p {
        font-size: 11px;
    }
}

@media (min-width: 500px) {
	.Price{display:block;}
}


/* ============================================================
   MIN-WIDTH: 977px — DESKTOP
   ============================================================ */

@media (min-width: 977px) {

    /* Avec logo : 3 colonnes */
    .form__card {
        grid-template-columns: 3fr auto 1fr;
        grid-template-areas:
            "title  funding  badges"
            "status funding  ."
            "footer footer   footer";
    }

    /* Logo — flush top, fond blanc, ombre */
    .form__funding {
        padding: 12px 8px;
    }
    .form__funding > img {display:block;max-width:70px;max-height:70px;}
    .form__funding > span {display:none;}

    /* Badges — ancrés en haut à droite */
    .form__badges {
        align-self: start;
        padding: 14px 14px 0 14px;
        justify-content: flex-end;
        align-items: flex-start;
        min-width: 170px;
    }

    /* Titre */
    .form__titre {
        font-size: 16px;
        align-self: start;
        padding: 14px 16px 4px 14px;
		min-height:60px;
    }

    /* Statut */
    .form__status {
        font-size: 14px;
        align-self: start;
        padding: 10px 16px 14px 14px;
		min-height:20px;
    }

    /* Footer */
    .form__footer {
        height: 32px;
        padding: 0 14px;
    }

    /* Modalité visible desktop */
    .Modality {
        display: block;
    }

    /* Notes visibles desktop (masquées mobile via common-ssr.css) */
    .cartouche__footer__notes__wrapper {
        gap: 4px;
    }

    .cartouche__footer__notes__wrapper p {
        font-size: 12px;
    }

    .cartouche__footer__notes__wrapper img {
        width: 12px;
        height: 12px;
        top: 1.5px;
    }
}


/* ============================================================
   MIN-WIDTH: 1281px
   ============================================================ */

@media (min-width: 1281px) {
	
    .form__card {
		grid-template-columns: 2fr auto 1fr;
	}
	
	.form__titre {
		min-height:50x;
    }
}


/* ============================================================
   MIN-WIDTH: 1537px
   ============================================================ */

@media (min-width: 1537px) {
    .form__funding > img {max-width:82px;max-height:82px;}

    .form__badges {
        min-width: 310px;
        gap: 6px;
        padding-top: 20px;
    }

    .form__badges > .cartouche__badge {
        height: 30px;
        padding: 0 17px;
        font-size: 16px;
    }

    .form__titre {
        font-size: 20px;
        padding-top: 20px;
		min-height:84px;
    }

    .form__card:not(.has-logo) .form__titre {
        padding-left: 32px;
    }

    .form__status {
        padding-bottom: 20px;
    }

    .form__card:not(.has-logo) .form__status {
        padding-left: 32px;
    }

    .form__footer {
        height: 44px;
        padding: 0 26px 0 32px;
		margin-top:20px;
    }

    .cartouche__footer__info {
        gap: 40px;
    }

    .cartouche__footer__info p {
        font-size: 16px;
    }

    .cartouche__footer__notes__wrapper p {
        font-size: 14px;
    }

    .cartouche__footer__notes__wrapper img {
        width: 18px;
        height: 18px;
        top: 2px;
    }
}


@media (max-width: 976px) {
    .search__input__desk {
        display: none;
    }
}