/* ==========================================================================
   1. CONTENEUR PRINCIPAL (Card Container)
   ========================================================================== */

.los-card-epuree {
    padding: 30px 10px;
    min-height: 300px;
}

/* ==========================================================================
   2. ÉLÉMENTS ET STRUCTURE INTERNE (Content Structure)
   ========================================================================== */

/* Corps & Contenu */
.los-card-epuree .los-card-body {
    padding-left: 10px;
    padding-right: 20px;
}

.los-card-epuree .los-tuile-content {
    display: flex;
    gap: 10px;
    padding: 0;
    height: 100%;
}

.los-card-epuree .los-content-left {
    margin: 0;
    justify-content: start;
}

/* Titre */
.los-card-epuree .los-card-titre {
    padding: 0;
    background-color: unset;
    flex-direction: column;
    justify-content: baseline;
}

.los-card-epuree .los-card-titre .los-content-left {
    justify-content: start;
}

/* Texte */
#top .los-card-epuree .los-card-text {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

/* Lignes de contenu */
.los-card-epuree .los-content-line {
    gap: 10px;
    height: fit-content;
}

.los-card-epuree .los-content-line.los-ligne-pastille {
    margin-top: 10px;
}

/* Image & Media */
.los-card-epuree .los-content-image {
    padding: 0 20px;
    width: 44%;
}

.los-card-epuree .los-content-image img {
    border-radius: 0.5em;
}

/* Badges & Cercle */
.los-card-epuree .los-badge-cercle.cercle {
    margin-right: 25px;
    padding: 0;
}

.los-card-epuree .los-badge-cercle.cercle > span:last-of-type {
    padding: 0;
}

.los-card-epuree .los-badge-cercle-picto.cercle {
    margin: 0;
}

/* Bouton */
.los-card-epuree .los-tuile-btn {
    justify-content: start;
    margin-top: auto;
    margin-bottom: 5px;
}

.los-card-epuree .los-tuile-btn a {
    margin: 0;
}

/* ==========================================================================
   3. MEDIA QUERIES (Responsive Mobile)
   ========================================================================== */

@media (max-width: 768px) {

    .los-content-card.los-card-epuree {
        padding: 10px;
    }

    /* Annulation des paddings */
    .los-card-epuree .los-card-body,
    .los-card-epuree .los-content-image,
    .los-card-epuree .los-tuile-content {
        padding: 0;
    }

    /* Alignements & Typographie */
    #top .los-content-card.los-card-epuree,
    #top .los-content-card.los-card-epuree .los-card-body,
    #top .los-content-card.los-card-epuree .los-content-left,
    #top .los-content-card.los-card-epuree .los-content-right,
    #top .los-content-card.los-card-epuree .los-content-left h2,
    #top .los-content-card.los-card-epuree .los-content-right h2 {
        text-align: left;
    }

    #top .los-content-card.los-card-epuree .los-content-left {
        font-size: small;
    }

    #top .los-content-card.los-card-epuree .los-content-line {
        align-items: baseline;
    }

    /* Badges & Lignes */
    .los-card-epuree .los-badge-cercle.cercle {
        margin: auto;
        width: fit-content;
    }

    .los-card-epuree .los-content-line.los-ligne-pastille {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        gap: 5px;
    }
}