/*
Theme Name:   Astra Child
Theme URI:    http://topdarija.fr
Description:  Astra Child Theme
Author:       Topdarija
Author URI:   http://topdarija.fr
Template:     astra
Version:      1.0.0
*/

/* Styles pour la page Espace Membre */
.espace-membre-container {
    margin: 30px auto;
    padding: 20px;
}

/* === Styles pour la liste des leçons === */
.espace-membre-container.lecon-list {
    max-width: 1200px; /* Largeur maximale du conteneur */
    display: block; /* Assure que le conteneur prend toute la largeur */
}

.lecon-intro {
    margin-bottom: 20px;
}

.lecon-intro p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #333;
}

.lecons-liste {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne */
    justify-content: flex-start; /* Aligne les cartes à gauche */
    gap: 20px; /* Espace entre les cartes */
    width: 100%; /* Assure que la liste prend toute la largeur */
}

.lecon-card {
    flex: 1 0 calc(20% - 16px); /* 5 colonnes par ligne avec espace */
    box-sizing: border-box;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative; /* Permet de positionner le cadenas et le label validé */
    min-width: 150px; /* Ajusté pour mieux s'adapter à 5 colonnes */
    max-width: calc(20% - 16px); /* Correspond au flex-basis */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Permet au bouton d'être en bas */
    min-height: 300px; /* Fixe une hauteur minimale pour uniformiser les cartes */
}

.lecon-card h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.lecon-card p {
    font-size: 1em;
    color: #666;
}

.lecon-card a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.lecon-card a.button:hover {
    background-color: #005177;
}

.lecon-card:hover {
    background-color: #e0e0e0; /* Couleur au survol */
    transform: translateY(-5px); /* Effet de levée au survol */
}

/* Styles pour les leçons verrouillées */
.lecon-card.verrouille {
    opacity: 0.6; /* Opacité réduite */
    cursor: not-allowed;
}

.lecon-card.verrouille:hover {
    transform: none;
    background-color: #f5f5f5;
}

.lecon-card.verrouille::before {
    content: "\1F512"; /* Unicode pour le cadenas fermé 🔒 */
    font-size: 2em;
    color: #a00;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Fixer le bouton en bas de la carte */
.lecon-card-footer {
    margin-top: auto;
}

/* Styles pour le label "Validée !" */
.validated-message {
    display: flex;
    align-items: center;
    background-color: #28a745; /* Vert */
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 10px; /* Espacement par rapport au contenu */
}

.validated-message::before {
    content: "\2714"; /* Unicode pour la coche verte ✔ */
    margin-right: 5px;
}

/* Styles pour les cartes validées */
.lecon-card.validated {
    border-color: #28a745; /* Bordure verte */
    background-color: #e6ffe6; /* Fond légèrement vert */
}

/* Fixation des styles pour le contenu de la leçon */
.espace-membre-container.lecon-content {
    max-width: 800px; /* Limite la largeur de la leçon */
    margin: 30px auto;
    padding: 20px;
}

.espace-membre-container.lecon-content p {
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #333;
}

/* Styles pour l'introduction de la leçon */
.lecon-intro {
    margin-bottom: 20px;
}

.lecon-intro p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #333;
    text-align: left;
}

/* Titre de la leçon */
.lesson-title {
    text-align: center;
    font-size: 2em;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #333;
    font-weight: bold;
}

/* Contenu de la leçon */
.lecon-content {
    margin-bottom: 30px;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
}

/* Bouton pour revenir aux leçons */
.espace-membre-container.lecon-content .button {
    display: block;
    text-align: center;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 20px auto;
}

.espace-membre-container.lecon-content .button:hover {
    background-color: #005177;
}

/* Styles pour le quiz */
.lecon-quiz {
    margin-top: 40px;
}

.lecon-quiz h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em; /* Taille ajustée pour cohérence */
}

.quiz-question {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.quiz-question p {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1em;
}

.quiz-question label {
    display: block;
    margin-bottom: 8px;
    font-size: 1em;
}

#quiz-form {
    margin-bottom: 20px;
}

#submit-quiz {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745; /* Couleur verte pour valider */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#submit-quiz:hover {
    background-color: #218838;
}

#quiz-result {
    margin-top: 20px;
    font-size: 1.2em;
    color: #0073aa;
    text-align: center;
}

.locked-message {
    display: block;
    margin-top: 10px;
    font-size: 1em;
    color: #a00;
    text-align: center;
}

.icon-lock {
    margin-right: 5px;
}

/* Ajustement du menu si nécessaire */
#primary {
    width: 100%;
}

/* S'assurer que le contenu principal prend toute la largeur */
.ast-container {
    max-width: 100%;
}

/* S'assurer que les éléments ne débordent pas sur les petits écrans */
@media (max-width: 1200px) {
    .lecon-card {
        flex: 1 0 calc(25% - 16px); /* 4 colonnes par ligne */
        max-width: calc(25% - 16px);
    }
}

@media (max-width: 992px) {
    .lecon-card {
        flex: 1 0 calc(33.333% - 16px); /* 3 colonnes par ligne */
        max-width: calc(33.333% - 16px);
    }
}

@media (max-width: 768px) {
    .lecon-card {
        flex: 1 0 calc(50% - 16px); /* 2 colonnes par ligne */
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 576px) {
    .lecon-card {
        flex: 1 0 100%; /* 1 colonne par ligne */
        max-width: 100%;
    }
}