/* ============================================================
   formations.css
   Styles des cartouches de formations (résultats de recherche).
   Dépend de : common.css
   ============================================================ */


/* ============================================================
   CARTOUCHE FORMATIONS — BASE
   ============================================================ */

.cartouche__mainLink {
    display: block;
    width: 100%;
    min-width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
}

.cartouche__mainLink:hover {
    box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.5);
}

.cartouche__container {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.cartouche__body {
    width: 100%;
    min-height: 100px;
    background: transparent linear-gradient(264deg, #c2e9fb 0, #a6c9fd 100%) 0 0 no-repeat padding-box;
    display: flex;
    flex-direction: column;
    padding: 15px 10px 10px;
}

.mobile__cartouche__body__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cartouche__badge__wrapper {
    display: flex;
    gap: 4px;
}

.cartouche__badge__wrapper:has(.cartouche__badge:not(.hidden)) {
    margin-bottom: 10px;
}

.cartouche__badge {
    height: 22px;
    width: fit-content;
    padding: 0 8px;
    border-radius: 15px;
    font-size: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.cartouche__badge.new        { background: #c8094f; }
.cartouche__badge.promotion  { background: #f02878; }
.cartouche__badge.top        { background: #097fc2; }
.cartouche__badge.cpf        { background: #0c4391; }
.cartouche__badge.atlas      { background: #523e92; }
.cartouche__badge.fne        { background: #1b2649; }

.cartouche__body__title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cartouche__body__title h2 {
    font-size: 14px;
    color: #192963;
    font-weight: 700;
    margin-bottom: 10px;
}

.cartouche__body__title p {
    font-size: 12px;
    color: #2f2933;
}

.cartouche__footer {
    height: 50px;
    background: #ececec;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 6px 10px;
}

.cartouche__footer__info {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.cartouche__footer__notes__wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cartouche__footer__notes__wrapper * {
    font-size: 11px;
    font-weight: 600;
    color: #272a36;
    padding: 0;
}

.cartouche__footer__notes__wrapper img {
    width: 15px;
    height: 15px;
    position: relative;
    top: 1.5px;
}


/* ============================================================
   MEDIA QUERIES
   ============================================================ */

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

@media (max-width: 340px) {
    .cartouche__body {
        padding: 10px 6px 8px;
        min-height: 80px;
    }

    .cartouche__footer {
        padding: 6px;
        height: 44px;
    }

    .cartouche__footer__info {
        gap: 8px;
    }

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

    .cartouche__footer__notes__wrapper {
        gap: 6px;
    }

    .cartouche__footer__notes__wrapper * {
        font-size: 9px;
    }

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

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

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

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

/* ---- max-width: 976px ---- */

@media (max-width: 976px) {
    .cartouche__formations .cartouche__footer {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

/* ---- min-width: 977px ---- */

@media (min-width: 977px) {
    .cartouche__body {
        min-height: 110px;
        flex-direction: row;
        padding: 14px 16px 16px;
    }

    .cartouche__logo__right__wrapper {
        width: 90px;
        height: calc(100% + 14px);
        margin-right: 20px;
        border-radius: 0 0 6px 6px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -14px;
        box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.5);
    }

    .cartouche__logo__right__wrapper img {
        width: 95%;
        height: auto;
    }

    .cartouche__body__title {
        padding-right: 20px;
    }

    .cartouche__body__title h2 {
        font-size: 16px;
        margin-bottom: 6px;
    }

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

    .cartouche__body__right {
        width: fit-content;
        height: 100%;
        display: flex;
    }

    .cartouche__logo__cpf__wrapper {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .cartouche__logo__cpf__wrapper img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .cartouche__like__wrapper {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .cartouche__body__headLike {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .cartouche__body__headLike img {
        height: 20px;
        width: 20px;
    }

    .cartouche__badge__wrapper {
        width: 170px;
        flex-grow: 1;
        justify-content: flex-end;
        margin-bottom: 0 !important;
    }

    .cartouche__footer {
        height: 32px;
        flex-direction: row;
        align-items: center;
        padding: 0 14px;
    }

    .cartouche__footer__notes__wrapper {
        gap: 4px;
    }

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

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

/* ---- min-width: 1281px ---- */

@media (min-width: 1281px) {
    .cartouche__mainLink {
        margin-bottom: 24px;
    }

    .cartouche__body {
        min-height: 100px;
        padding: 16px 20px 16px 26px;
    }

    .cartouche__body__title {
        padding-right: 20px;
    }

    .cartouche__body__title h2 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .cartouche__body__title p {
        font-size: 13px;
    }

    .cartouche__logo__cpf__wrapper {
        width: 68px;
        height: 68px;
        margin-right: 16px;
    }

    .cartouche__badge__wrapper {
        width: 250px;
        gap: 4px;
    }

    .cartouche__badge {
        height: 24px;
        padding: 0 14px;
        font-size: 13px;
    }

    .cartouche__footer {
        height: 35px;
        padding: 0 20px 0 26px;
    }

    .cartouche__footer__info {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .cartouche__footer__info * {
        font-size: 13px;
    }

    .cartouche__footer__notes__wrapper {
        gap: 6px;
    }

    .cartouche__footer__notes__wrapper * {
        font-size: 11px;
    }

    .cartouche__footer__notes__wrapper img {
        width: 15px;
        height: 15px;
        position: relative;
        top: 1px;
    }

    .cartouche__logo__right__wrapper {
        height: calc(100% + 20px);
        top: -20px;
    }
}

/* ---- min-width: 1537px ---- */

@media (min-width: 1537px) {
    .cartouche__mainLink {
        margin-bottom: 30px;
    }

    .cartouche__body {
        min-height: 122px;
        padding: 20px 26px 20px 32px;
    }

    .cartouche__body__title * {
        font-size: 16px;
    }

    .cartouche__body__title h2 {
        font-size: 20px;
    }

    .cartouche__logo__cpf__wrapper {
        width: 82px;
        height: 82px;
    }

    .cartouche__like__wrapper .cartouche__body__headLike img {
        height: 24px;
        width: 24px;
    }

    .cartouche__badge__wrapper {
        width: 310px;
        gap: 6px;
    }

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

    .cartouche__footer {
        height: 44px;
        padding: 0 26px 0 32px;
    }

    .cartouche__footer__info {
        gap: 40px;
    }

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

    .cartouche__footer__notes__wrapper {
        gap: 6px;
    }

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

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

    .cartouche__container.cartouche__formations .cartouche__footer__info p:first-child {
        display: none;
    }

    .cartouche__container.cartouche__formations .cartouche__footer__notes__wrapper p:last-child {
        display: none;
    }
}

/* ---- min-width: 1601px ---- */

@media (min-width: 1601px) {
    .cartouche__container.cartouche__formations .cartouche__footer__info p:first-child {
        display: block;
    }
}

/* ---- min-width: 1720px ---- */

@media (min-width: 1720px) {
    .cartouche__container.cartouche__formations .cartouche__footer__notes__wrapper p:last-child {
        display: block;
    }
}