/*
 * Mises en situation SSIAP (DEC-126) — liste des scénarios, préfixe mes-.
 * L'exercice est une page autonome (assets/mises_en_situation/).
 * DEC-128 : banque de questions du formateur, préfixe os-.
 */

.mes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
}

a.carte.mes-scenario {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.mes-image {
    display: block;
    aspect-ratio: 16 / 8;
    background: #0e1b2b center / cover no-repeat;
}

.mes-corps {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    padding: 1rem 1.25rem 1.25rem;
}

.mes-corps h2 {
    margin: 0;
    font-size: 1.1rem;
}

.mes-corps p {
    margin: 0;
}

.mes-suivi {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: .5rem;
}

/* DEC-128 : banque de questions en lecture pour le formateur (préfixe os-). */
.os-questions {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: question;
}

.os-questions > li {
    counter-increment: question;
}

.os-enonce {
    font-weight: 600;
    margin: 0 0 .75rem;
}

.os-enonce::before {
    content: counter(question) ". ";
    color: var(--couleur-texte-attenue, #64748b);
}

.os-choix {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .4rem;
}

.os-choix li {
    padding: .5rem .75rem;
    border: 1px solid var(--couleur-bordure, #e2e8f0);
    border-radius: 10px;
}

.os-choix li.os-correct {
    border-color: var(--couleur-succes-bordure, #abefc6);
    background: var(--couleur-succes-fond, #ecfdf3);
}

/* DEC-130 : une section par programme (SSIAP, SST). */
.mes-section + .mes-section {
    margin-top: 2rem;
}

.mes-section-titre {
    margin: 0 0 .75rem;
}

.mes-avertissement {
    margin: 0 0 1rem;
}

.mes-theme {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--couleur-texte-attenue, #5b6b7c);
}