/* ============================================================
   common-cartouche.css
   Styles partagés entre formations.css et certifications.css.
   Dépend de : common.css
   Chargé sur : pages formations ET pages certifications
   ============================================================ */


/* ============================================================
   CARTOUCHE — STRUCTURE DE 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;
}

/* Body : base mobile (colonne) */
.cartouche__body {
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    padding: 15px 10px 10px;
}

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


/* ============================================================
   BADGES
   ============================================================ */

.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; }


/* ============================================================
   BODY — TITRE & CONTENU
   ============================================================ */

.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;
}


/* ============================================================
   FOOTER — ÉLÉMENTS PARTAGÉS
   ============================================================ */

.cartouche__footer {
    background: #ececec;
    display: flex;
    align-items: flex-start;
    padding: 6px 10px;
}

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

.cartouche__footer__info * {
    font-size: 12px;
    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;
    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__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;
    }
}

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

@media (min-width: 977px) {
    /* Body passe en ligne */
    .cartouche__body {
        min-height: 110px;
        flex-direction: row;
        padding: 14px 16px 16px;
    }

    /* Logo éditeur à gauche */
    .cartouche__logo__right__wrapper {
        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;
    }

    /* Section droite (logo CPF + like + badges) */
    .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;
    }

    /* Footer */
    .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__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 {
        height: 24px;
        padding: 0 14px;
        font-size: 13px;
    }

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

    .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__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 {
        height: 30px;
        padding: 0 17px;
        font-size: 16px;
    }

    .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;
    }
}