/* =========================================================
   LIFTERLMS - CATALOGUE DES COURS
   Blocksy Child Theme
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.llms-loop {
    max-width: 1150px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE DES COURS
   --------------------------------------------------------- */

.llms-loop-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}


/* ---------------------------------------------------------
   CARTE DU COURS
   --------------------------------------------------------- */

.llms-loop-item {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Effet au survol */

.llms-loop-item:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10);
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.llms-loop-item-content {
    padding: 0 !important;
}


/* ---------------------------------------------------------
   LIEN
   --------------------------------------------------------- */

.llms-loop-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}


/* ---------------------------------------------------------
   IMAGE DU COURS
   --------------------------------------------------------- */

.llms-loop-link > img {
    display: block !important;

    width: 100% !important;
    height: 170px !important;

    margin: 0 !important;

    object-fit: cover;

    background: #f3f5f7;
}


/* ---------------------------------------------------------
   IMAGE PLACEHOLDER
   --------------------------------------------------------- */

.llms-loop-link > img.llms-placeholder {
    opacity: 0.35;
}


/* ---------------------------------------------------------
   PROGRESSION
   --------------------------------------------------------- */

.llms-progress {
    position: relative;

    margin: -12px 18px 0 !important;
    padding: 8px 10px !important;

    background: #ffffff !important;

    border-radius: 8px !important;

    /*box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);*/

    z-index: 5;
	width: auto;
	align-items: center;
}


/* Barre de progression */

.llms-progress-bar {
    width: 100% !important;
    height: 5px !important;

    margin: 0 !important;

    background: #e8ebef !important;

    border-radius: 10px !important;

    overflow: hidden;
}


/* Progression réalisée */

.progress-bar-complete {
    height: 100% !important;

    background: #42a875 !important;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   PETITE PASTILLE %
   --------------------------------------------------------- */

.progress__indicator {

    position: absolute !important;

    top: -30px !important;
    right: 25px !important;

    width: 30px !important;
    height: 30px !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    background: #f4f6f8 !important;

   /* color: #59636f !important;*/

    border: 2px solid #ffffff !important;

    border-radius: 50% !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    line-height: 1 !important;
}


/* ---------------------------------------------------------
   TITRE DU COURS
   --------------------------------------------------------- */

.llms-loop-title {

    margin: 20px 20px 18px !important;

    padding: 0 !important;

    color: #172033 !important;

    font-size: 20px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

/*.llms-loop-item-footer {

    display: flex !important;

    align-items: center;

    justify-content: flex-end;

    margin: 0 20px !important;

    padding: 13px 0 17px !important;

    border-top: 1px solid #edf0f3 !important;
}*/


/* ---------------------------------------------------------
   AUTEUR
   --------------------------------------------------------- */

.llms-author {
    display: none !important;
}


/* ---------------------------------------------------------
   NOMBRE DE LEÇONS
   --------------------------------------------------------- */

.llms-meta.llms-lessons-count {
    margin: 0 !important;
}

.llms-meta.llms-lessons-count p {

    margin: 0 !important;

    font-size: 0 !important;

    color: #68717d;
}


/* Nombre */

.llms-meta.llms-lessons-count .lessons-count {

    font-size: 13px !important;

    font-weight: 600 !important;

    color: #5f6874 !important;
}


/* Remplace le texte anglais */

.llms-meta.llms-lessons-count .lessons-count::after {

    content: " leçons";

    font-weight: 400;
}


/* ---------------------------------------------------------
   TITRE DE LA PAGE
   --------------------------------------------------------- */

.page-title {

    max-width: 1150px;

    margin: 35px auto 35px !important;

    color: #172033 !important;

    font-size: 38px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 900px) {

    .llms-loop-list {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .llms-loop-list {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .llms-loop-link > img {

        height: 180px !important;
    }


    .page-title {

        font-size: 32px !important;

        margin-bottom: 28px !important;
    }

}