:root { --bleu: #058FCF; --navy: #07122D; --fond: #f6f8fb; --texte: #1d2433; --gris: #6b7385; --vert: #1f8a4c; --rouge: #c0392b; --bord: #dfe4ec; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; color: var(--texte); background: var(--fond); line-height: 1.6; }
header { background: var(--navy); color: #fff; }
.bandeau { max-width: 1100px; margin: auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.marque { color: #fff; text-decoration: none; font-weight: 700; }
.marque small { font-weight: 400; opacity: .75; margin-left: 6px; }
header nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
header nav a, header .lien { color: #fff; text-decoration: none; font: inherit; }
header nav a:hover { text-decoration: underline; }
.moi { opacity: .8; }
main { max-width: 1100px; margin: auto; padding: 24px 16px 48px; }
footer { text-align: center; color: var(--gris); font-size: .85em; padding: 24px 16px; }
a { color: var(--bleu); }
h1 { color: var(--navy); line-height: 1.25; }
h2 { color: var(--navy); }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 18px 20px; margin: 16px 0; }
.etroite { max-width: 460px; margin: 24px auto; }
.texte { max-width: 760px; }
form label { display: block; margin: 12px 0; font-weight: 600; }
form label.case, form label.choix { font-weight: 400; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
input[type=checkbox], input[type=radio] { display: inline; width: auto; margin-right: 6px; }
button, .bouton { display: inline-block; background: var(--bleu); color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.lien { background: none; padding: 0; font-weight: 400; }
form.enligne { display: inline; margin-right: 8px; }
form.enligne button { background: var(--navy); margin: 4px 0; }
.erreur { color: var(--rouge); font-weight: 600; }
ol.modules { list-style: none; padding: 0; }
ol.modules li a { display: flex; gap: 16px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; margin: 10px 0; color: inherit; text-decoration: none; }
ol.modules li a:hover { border-color: var(--bleu); }
ol.modules .num { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; font-weight: 700; }
ol.modules .ferme .num { background: var(--gris); }
.etat { color: var(--gris); }
.fil { color: var(--gris); font-size: .9em; margin-bottom: 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--bord); margin-bottom: 20px; }
.onglets a { padding: 8px 14px; text-decoration: none; border-radius: 6px 6px 0 0; color: var(--navy); }
.onglets a.actif { background: var(--navy); color: #fff; }
fieldset.question { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 18px; margin: 14px 0; }
fieldset.question legend { font-weight: 600; padding: 0 6px; }
.score { font-size: 1.3em; }
.correction { border-left: 4px solid var(--bord); padding: 4px 14px; margin: 12px 0; background: #fff; }
.correction.juste { border-color: var(--vert); }
.correction.faux { border-color: var(--rouge); }
.explication { color: var(--gris); }
li.juste { color: var(--vert); } li.faux { color: var(--rouge); }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--bord); padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: #eef2f7; }
.defile { overflow-x: auto; }
table.suivi td small { line-height: 1.35; display: block; }
tr.inactif { opacity: .5; }
pre { white-space: pre-wrap; background: #f2f4f8; padding: 10px; border-radius: 6px; }
details { margin: 6px 0; }
.evaluation { border-top: 1px dashed var(--bord); margin-top: 12px; padding-top: 6px; }
.evaluation input[size] { display: inline-block; width: 5em; }
code { word-break: break-all; }
@media (max-width: 600px) { main { padding: 16px; } .bandeau { padding: 10px 16px; } }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
ul.resultats { list-style: none; padding: 0; }
li.resultat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin: 8px 0; }
.prise { color: var(--gris); font-style: italic; white-space: nowrap; }
.alerte { border-left: 4px solid var(--bleu); }
.alerte .bouton { margin-left: 8px; }
.attente { color: var(--gris); font-style: italic; }
details > summary.bouton { list-style: none; margin: 8px 0; }
details > summary.bouton::-webkit-details-marker { display: none; }
.echange .entete { margin-top: 0; }
.versions { margin-left: 16px; opacity: .8; }
.succes { color: var(--vert); font-weight: 600; }
fieldset.profil { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 16px; margin: 16px 0; }
fieldset.profil legend { font-weight: 700; padding: 0 6px; }
.apercu { background: #FFF4D6; color: #5A4500; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; font-size: .95em; }
.apercu button { background: var(--navy); padding: 6px 14px; }
ol.modules li .carte-module { display: flex; gap: 16px; background: #f1f3f6; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; margin: 10px 0; color: var(--gris); cursor: not-allowed; }
ol.modules li.ferme .num { background: #b8bfcc; }
ol.modules .num { font-size: .85em; }