.parcours-aleatoire {
    --parcours-accent: #1f6fa9;
    --parcours-pale: #eef8fb;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 1rem;
}

.parcours-aleatoire h2 { text-align: center; }
.parcours-retour { margin-top: 0; }
.parcours-grille { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; }
.parcours-navigation { border-right: 1px solid #ccd9df; padding-right: 1rem; }
.parcours-navigation .boutonExercice { display: block; width: 100%; min-height: 2.35rem; margin: 0 0 0.35rem; border: 1px solid var(--parcours-accent); border-radius: 5px; background: #fff; color: #174f77; font: inherit; cursor: pointer; }
.parcours-navigation .boutonExercice:hover,
.parcours-navigation .boutonExercice:focus-visible { background: #fff2ca; }
.parcours-navigation .boutonExercice.active { background: #bdf2ad; font-weight: 700; }
.parcours-navigation .boutonExercice.reussi { padding-left: 2rem; background-image: url("/images/parcours/iconeOK3.jpg"); background-position: 0.45rem center; background-repeat: no-repeat; }
.parcours-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem; border-radius: 6px; background: var(--parcours-pale); }
.parcours-actions button,
.boutonValider,
.boutonCode,
.boutonCopierCode,
.certification button { min-height: 2.35rem; padding: 0.45rem 0.7rem; border: 1px solid var(--parcours-accent); border-radius: 5px; background: #fff; color: #174f77; font: inherit; cursor: pointer; }
.boutonCode { width: 100%; margin-top: 0.8rem; }
#zoneEnonce { min-height: 10rem; padding: 1rem 0; font-size: 1.1rem; }
.indication, .reponse, .solution { margin-top: 0.75rem; padding: 0.7rem; border-left: 4px solid #47a1b8; background: #f7fbfc; }
.solution { color: #16798b; }
#zoneReponse { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
#zoneReponseVariable { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.formulaireNombre, .formulaireFormule, .certification input { min-height: 2.2rem; box-sizing: border-box; padding: 0.35rem 0.5rem; border: 2px solid #2c8151; border-radius: 5px; font: inherit; }
.formulaireNombre { width: 6rem; }
.formulaireFormule { width: min(22rem, 65vw); }
.mathJax { min-width: 4rem; }
.erreur-formule, .certification-invalide { color: #b42318; }
.certification-valide { color: #237a3b; }
#zoneVerdict { min-height: 1.5rem; font-weight: 700; }
#zoneCode { display: block; min-width: 0; flex: 1; overflow-wrap: anywhere; color: #b42318; font-family: Consolas, monospace; user-select: all; }
.certification-code { display: flex; align-items: center; gap: 0.65rem; }
.boutonCopierCode { min-width: 6rem; min-height: 2.75rem; flex: 0 0 auto; }
#zoneCopie { min-height: 1.5rem; margin: 0.35rem 0 0; color: #237a3b; }
.certification-saisie { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.certification input { flex: 1; }

.catalogue-parcours { display: grid; gap: 0.55rem; margin: 0.75rem 0 1rem; padding: 0; list-style: none; }
.catalogue-niveau + .catalogue-niveau { margin-top: 1.15rem; }
.catalogue-niveau h4 { margin: 0 0 0.4rem; color: #174f77; }
.carte-parcours { display: flex; min-height: 3.5rem; box-sizing: border-box; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.65rem 0.8rem; border: 1px solid #ccd9df; border-radius: 7px; background: #f7fbfc; color: #174f77; text-decoration: none; }
.carte-parcours:hover, .carte-parcours:focus-visible { border-color: #1f6fa9; background: #eef8fb; }
.carte-parcours span { color: #625a56; font-size: 0.9em; }

@media (max-width: 700px) {
    .parcours-aleatoire { padding-inline: 0.8rem; }
    .parcours-grille { grid-template-columns: 1fr; }
    .parcours-navigation { border-right: 0; border-bottom: 1px solid #ccd9df; padding: 0 0 0.8rem; }
    #colonneBoutons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
    .parcours-navigation .boutonExercice { margin: 0; }
    .parcours-actions { align-items: stretch; }
    .parcours-actions button { flex: 1 1 45%; }
    .certification-code { align-items: stretch; flex-direction: column; }
    .boutonCopierCode { width: 100%; }
    .certification-saisie { flex-direction: column; }
}