/**
 * Exercices en front office.
 *
 * Feuille propre à l'outil, chargée après celle du plugin dont elle reprend
 * les variables : un exercice suit donc la couleur de son parcours.
 */

/* ---------------------------------------------------------------------------
   Carte d'un exercice
   --------------------------------------------------------------------------- */

/* La structure vient de Bootstrap : la feuille ne fait que la raccorder aux
   couleurs du parcours et corriger ce que le thème pourrait imposer. */
.moocs .moocs-exercice {
	border-color: var(--moocs-border);
}

.moocs .moocs-exercice__header {
	gap: 0.75rem;
	background: var(--moocs-surface-alt);
	border-bottom-color: var(--moocs-border);
}

.moocs .moocs-exercice__title {
	margin: 0;
	font-size: 1.25rem;
}

/* La pastille ne se laisse pas écraser par un titre long. */
.moocs .moocs-exercice__status {
	flex: 0 0 auto;
}

.moocs .moocs-exercice__intro {
	margin-bottom: 1.25rem;
}

.moocs .moocs-exercice__intro > *:last-child,
.moocs .moocs-exercice__excerpt {
	margin-bottom: 0;
}

.moocs .moocs-exercice__footer {
	gap: 0.75rem;
	background: var(--moocs-surface-alt);
	border-top-color: var(--moocs-border);
}

.moocs .moocs-exercice__remaining {
	color: var(--moocs-text-muted);
	font-size: 0.875rem;
}

.moocs .moocs-exercice__closed {
	margin-bottom: 0;
}

/* Le rendu et la carte du visiteur gardent leurs actions dans le corps : ils
   n'ont pas de pied de carte, une seule action leur suffit. */
.moocs .moocs-exercice__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Questions
   --------------------------------------------------------------------------- */

.moocs .moocs-exercice__question {
	border-color: var(--moocs-border);
}

/* Le numéro et l'énoncé s'alignent par le haut : un énoncé de deux lignes ne
   décentre pas sa pastille. */
.moocs .moocs-exercice__question-header {
	align-items: flex-start;
	background: var(--moocs-surface-alt);
	border-bottom-color: var(--moocs-border);
}

/* La pastille du numéro suit la couleur du parcours, comme le reste. */
.moocs .moocs-exercice__question-header .badge.text-bg-primary {
	background: var(--moocs-primary) !important;
	color: var(--moocs-primary-contrast) !important;
}

.moocs .moocs-exercice__question-text {
	min-width: 0;
}

/* La consigne accompagne l'énoncé sans rivaliser avec lui. */
.moocs .moocs-exercice__hint {
	display: block;
	margin-top: 0.15rem;
	color: var(--moocs-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.moocs .moocs-exercice__choices .form-check {
	padding-block: 0.15rem;
}

.moocs .moocs-exercice__choices .form-check:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Correction
   --------------------------------------------------------------------------- */

.moocs .moocs-exercice-resultat__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
}

.moocs .moocs-exercice-resultat__message {
	margin-top: 0.75rem;
}

.moocs .moocs-exercice-resultat__message > *:last-child {
	margin-bottom: 0;
}

.moocs .moocs-exercice-resultat__list {
	margin: 0 0 1.25rem;
	padding: 0;
}

.moocs .moocs-exercice-resultat__item {
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--moocs-border);
	border-left-width: 4px;
	border-radius: var(--moocs-radius);
}

/* La bordure de gauche porte le verdict : elle se lit avant le texte. */
.moocs .moocs-exercice-resultat__item--juste {
	border-left-color: var(--bs-success, #198754);
}

.moocs .moocs-exercice-resultat__item--faux {
	border-left-color: var(--bs-danger, #dc3545);
}

.moocs .moocs-exercice-resultat__question {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.moocs .moocs-exercice-resultat__item--juste .moocs-exercice-resultat__mark {
	color: var(--bs-success, #198754);
}

.moocs .moocs-exercice-resultat__item--faux .moocs-exercice-resultat__mark {
	color: var(--bs-danger, #dc3545);
}

.moocs .moocs-exercice-resultat__choices {
	margin: 0;
	padding: 0;
}

.moocs .moocs-exercice-resultat__choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0;
	color: var(--moocs-text-muted);
}

/* Les modalités attendues et celles que le participant a cochées ressortent ;
   les autres restent en retrait, elles n'apprennent rien. */
.moocs .moocs-exercice-resultat__choice--attendu,
.moocs .moocs-exercice-resultat__choice--coche {
	color: var(--moocs-text);
}

.moocs .moocs-exercice-resultat__feedback {
	flex: 1 0 100%;
	margin-top: 0.25rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--moocs-border);
	color: var(--moocs-text-muted);
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Avertissement destiné à l'éditeur
   --------------------------------------------------------------------------- */

.moocs .moocs-exercice-notice {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	color: #8a5700;
}

/* ---------------------------------------------------------------------------
   Rendu déposé
   --------------------------------------------------------------------------- */

.moocs .moocs-exercice__field {
	margin-bottom: 1.25rem;
}

.moocs .moocs-exercice__field .form-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.moocs .moocs-exercice__erreur {
	margin-bottom: 1.25rem;
}

/* Le dépôt précédent est posé dans un cadre : on distingue ce qui a été rendu
   de ce qu'on s'apprête à rendre. */
.moocs .moocs-exercice-depot {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--moocs-surface-alt);
	border: 1px solid var(--moocs-border);
	border-left: 4px solid var(--moocs-primary);
	border-radius: var(--moocs-radius);
}

.moocs .moocs-exercice-depot__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.moocs .moocs-exercice-depot__titre {
	font-weight: 700;
}

.moocs .moocs-exercice-depot__date {
	color: var(--moocs-text-muted);
	font-size: 0.875rem;
}

.moocs .moocs-exercice-depot__fichier {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
}

.moocs .moocs-exercice-depot__texte > *:first-child {
	margin-top: 0;
}

.moocs .moocs-exercice-depot__texte > *:last-child {
	margin-bottom: 0;
}