/* QCM STI2D — direction "instrument de labo" : sobre, lisible, sans distraction.
   Palette : paillasse claire, encre bleu nuit, accent cobalt, mono pour les mesures. */
:root {
  --paper: #eef2f4;
  --card: #ffffff;
  --ink: #1b2733;
  --muted: #5c6b78;
  --accent: #2456e0;
  --ok: #0e9a6b;
  --ko: #d63b3b;
  --line: #d7dee3;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, .display { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.01em; }
a { color: var(--accent); }

header.site {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
header.site .logo { font-family: var(--mono); font-size: 14px; color: var(--muted); text-decoration: none; }
header.site .logo b { color: var(--ink); }
main { max-width: 680px; margin: 0 auto; padding: 24px 16px 60px; }

/* --- accueil --- */
.matieres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.matieres a {
  display: block; padding: 18px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 600;
  transition: border-color .15s, transform .15s;
}
.matieres a:hover, .matieres a:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.matieres a.mix { border-style: dashed; color: var(--accent); }

/* --- quiz --- */
.meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.meta .tag { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }

/* Signature : jauge de difficulté façon règle graduée */
.jauge { display: inline-flex; gap: 3px; }
.jauge i { width: 9px; height: 14px; border-radius: 2px; background: var(--line); }
.jauge i.on { background: var(--accent); }

.question {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; margin: 16px 0; font-size: 19px; font-weight: 600;
}
.choix { display: grid; gap: 10px; }
.choix button {
  text-align: left; padding: 14px 16px; font: inherit; font-size: 17px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.choix button:hover:enabled, .choix button:focus-visible { border-color: var(--accent); }
.choix button:disabled { cursor: default; opacity: .92; }
.choix button.bonne { border-color: var(--ok); background: #e9f7f1; }
.choix button.mauvaise { border-color: var(--ko); background: #fbecec; }

.feedback { margin-top: 16px; padding: 16px; border-radius: 10px; display: none; }
.feedback.ok { display: block; background: #e9f7f1; border: 1px solid var(--ok); }
.feedback.ko { display: block; background: #fbecec; border: 1px solid var(--ko); }
.feedback .verdict { font-weight: 700; margin-bottom: 6px; }
.feedback .ia { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.feedback .ia .etiquette { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.suite { margin-top: 18px; text-align: right; }
.suite button, .pin button {
  padding: 12px 22px; font: inherit; font-weight: 700; color: #fff;
  background: var(--accent); border: 0; border-radius: 10px; cursor: pointer;
}
.serie { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* --- parent --- */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px; }
th { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; }
td.mesure { font-family: var(--mono); }
.barres { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin: 12px 0 4px; }
.barres .b { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px; }
.barres-x { display: flex; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.barres-x span { flex: 1; text-align: center; }
.erreur-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.erreur-item .ou { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pin { max-width: 320px; margin: 80px auto; text-align: center; }
.pin input { font: inherit; font-size: 22px; text-align: center; letter-spacing: .3em; padding: 10px; width: 100%; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.alerte { color: var(--ko); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.tableau { width:100%; border-collapse:collapse; margin:0 0 28px; font-size:.92rem; }
.tableau th { text-align:left; font-family:var(--mono, monospace); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; color:#5b6b78; padding:6px 10px;
  border-bottom:2px solid #1b2733; }
.tableau td { padding:7px 10px; border-bottom:1px solid #d5dde2; }
.tableau .ok-ligne td:nth-child(2) { color:#0e9a6b; font-weight:600; }
.tableau .ko-ligne td:nth-child(2) { color:#d63b3b; font-weight:600; }
.v-ok { color:#0e9a6b; font-weight:600; } .v-ko { color:#d63b3b; font-weight:600; }
.q-tronquee { color:#41505c; }
.tableau a { color:#2456e0; }

.tag.decouverte { background:#f4e9d0; color:#8a6d1a; border-color:#d9c690; }
.fiche-lien { margin:10px 0 0; } .fiche-lien a { color:#2456e0; font-weight:600; }
.acces-cours { margin-top:26px; } .acces-cours a { color:#2456e0; font-weight:600; }
.fiche h1 { margin-bottom:14px; } .fiche h2 { font-size:1.02rem; margin:20px 0 6px; color:#1b2733; }
.fiche p { line-height:1.55; margin:0 0 10px; }
.lien-retour { color:#2456e0; font-size:.9rem; }
.toggle { border:1px solid #b9c4cc; background:#fff; color:#5b6b78; border-radius:14px;
  padding:3px 12px; cursor:pointer; font-family:inherit; font-size:.82rem; }
.toggle.on { background:#0e9a6b; border-color:#0e9a6b; color:#fff; }
.en-cours { color:#b07d10; font-weight:600; } .muet { color:#8a97a1; }
.aide-notions { color:#5b6b78; font-size:.9rem; margin:-8px 0 12px; }
.notions td form { margin:0; }

.illustration { display:flex; justify-content:center; margin:14px 0 4px;
  background:#fff; border:1px solid #d5dde2; border-radius:10px; padding:10px; }

.form-scan { display:flex; flex-direction:column; gap:12px; max-width:420px; margin:0 0 26px; }
.form-scan select, .tuteur-config select { padding:10px; border:1px solid #b9c4cc;
  border-radius:8px; font-family:inherit; font-size:.95rem; background:#fff; }
.btn-photo { display:block; text-align:center; padding:14px; border:2px dashed #2456e0;
  border-radius:10px; color:#2456e0; font-weight:600; cursor:pointer; }
.btn-photo input { display:none; }
.tuteur-config { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tuteur-config select { flex:1; min-width:180px; }
.chat { background:#fff; border:1px solid #d5dde2; border-radius:12px; padding:14px;
  height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:85%; padding:10px 14px; border-radius:12px; line-height:1.45;
  white-space:pre-wrap; font-size:.95rem; }
.msg.eleve { align-self:flex-end; background:#2456e0; color:#fff; border-bottom-right-radius:3px; }
.msg.tuteur { align-self:flex-start; background:#eef2f4; color:#1b2733; border-bottom-left-radius:3px; }
.msg.attente { color:#8a97a1; font-style:italic; }
.chat-saisie { display:flex; gap:10px; margin-top:12px; }
.chat-saisie textarea { flex:1; padding:10px; border:1px solid #b9c4cc; border-radius:8px;
  font-family:inherit; font-size:.95rem; resize:none; }
.transcript { background:#fff; border:1px solid #d5dde2; border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:8px; margin-bottom:26px; }
.transcript .msg { max-width:100%; }
.proposee { background:#fff; border:1px solid #d5dde2; border-radius:10px;
  padding:12px 16px; margin-bottom:14px; }
.proposee ul { margin:6px 0; padding-left:20px; }
@media (min-width: 900px) { .chat { height: 58vh; } .fiche { max-width:760px; } }

/* ---- accueil : poste de pilotage ---- */
.pilotage { background:#141d26; color:#e8eef2; border-radius:14px;
  padding:22px 22px 20px; margin:6px 0 30px; }
.pilotage-haut { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pilotage h1 { color:#fff; margin:0 0 14px; }
.serie-chip { font-family:var(--mono, monospace); font-size:.78rem; color:#141d26;
  background:#0e9a6b; padding:4px 10px; border-radius:12px; white-space:nowrap; }
.jauge-jour { display:flex; gap:3px; margin:4px 0 16px; }
.jauge-jour i { flex:1; height:26px; border-radius:2px; background:#243140; }
.jauge-jour i.plein { background:#2456e0; animation:allume .3s both; animation-delay:var(--d); }
.jauge-jour i.plein.fini { background:#0e9a6b; }
@keyframes allume { from { transform:scaleY(.2); opacity:0; } to { transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .jauge-jour i.plein { animation:none; } }
.pilotage-bas p { margin:0 0 14px; color:#b9c6d0; line-height:1.5; }
.cta { display:inline-block; background:#2456e0; color:#fff; font-weight:700;
  padding:12px 26px; border-radius:9px; text-decoration:none; }
.cta:active { transform:translateY(1px); }

.titre-rail { margin:0 0 12px; }
.rail { list-style:none; margin:0 0 26px; padding:0; position:relative; }
.rail::before { content:""; position:absolute; left:19px; top:16px; bottom:16px;
  width:2px; background:#c6d0d8; }
.rail li { position:relative; margin:0 0 10px; }
.rail a { display:block; background:#fff; border:1px solid #d5dde2; border-radius:10px;
  padding:12px 14px 12px 54px; text-decoration:none; color:#1b2733; }
.rail a:hover { border-color:#2456e0; }
.rail-num { position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:#1b2733; color:#fff;
  font-family:var(--mono, monospace); font-size:.8rem; display:flex;
  align-items:center; justify-content:center; }
.rail-nom { display:block; font-weight:700; }
.rail-desc { display:block; color:#5b6b78; font-size:.88rem; margin-top:2px; }
.pied-accueil { display:flex; gap:22px; }
.pied-accueil a { color:#2456e0; font-size:.9rem; }
.video-tuto { width:100%; max-width:820px; border-radius:12px; border:1px solid #d5dde2;
  background:#141d26; display:block; margin:0 0 12px; }
@media (min-width:900px) {
  .rail { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  .rail::before { display:none; }
  .rail li { margin:0; }
}

.boutons-photo { display:flex; gap:10px; }
.boutons-photo .btn-photo { flex:1; padding:12px 6px; font-size:.9rem; }
.vignettes { display:flex; flex-wrap:wrap; gap:8px; }
.vignette { position:relative; width:72px; height:96px; }
.vignette img { width:100%; height:100%; object-fit:cover; border-radius:8px;
  border:1px solid #d5dde2; }
.vignette button { position:absolute; top:-7px; right:-7px; width:22px; height:22px;
  border-radius:50%; border:none; background:#d63b3b; color:#fff; font-size:.75rem;
  cursor:pointer; line-height:1; }

.btn-suppr { border:none; background:none; cursor:pointer; font-size:1rem; opacity:.55; }
.btn-suppr:hover { opacity:1; }

.bandeau-formatif { background:#fdf6e3; border:1px solid #e6d9a8; color:#7a6320;
  border-radius:9px; padding:9px 14px; font-size:.88rem; margin:0 0 14px; }
.tag.niveau-1 { background:#e7f5ee; color:#0e9a6b; border-color:#bfe4d2; }
.tag.niveau-2 { background:#e8eefb; color:#2456e0; border-color:#c4d2f2; }
.tag.niveau-3 { background:#f7e9ee; color:#a52a5a; border-color:#e6c3d1; }
.ligne-verdict { margin:6px 0; }
.ligne-verdict a { color:#2456e0; }

.profils { display:flex; flex-wrap:wrap; gap:16px; }
.profil { display:flex; flex-direction:column; align-items:center; gap:6px;
  background:#fff; border:1px solid #d5dde2; border-radius:12px; padding:18px 22px;
  min-width:120px; text-decoration:none; color:#1b2733; }
.profil:hover { border-color:#2456e0; }
.profil-avatar { width:54px; height:54px; border-radius:50%; background:#2456e0;
  color:#fff; font-size:1.5rem; font-weight:700; display:flex; align-items:center;
  justify-content:center; }
.profil-nom { font-weight:700; }
.profil-classe { font-size:.8rem; color:#5b6b78; }

.form-limites { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.form-limites input, .form-limites select { padding:7px 9px; border:1px solid #b9c4cc;
  border-radius:7px; font-family:inherit; font-size:.85rem; }

.carte-enfant { background:#fff; border:1px solid #d5dde2; border-radius:12px;
  padding:14px 18px; margin:16px 0; }
.ligne-partage { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.ligne-partage select { padding:5px 8px; border:1px solid #b9c4cc; border-radius:7px;
  font-size:.83rem; }

/* --- administration (v5.3) --- */
.adm-stats { display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 18px; }
.adm-stat { background:#fff; border:1px solid #d5dde2; border-radius:12px; padding:14px 20px; min-width:130px; text-align:center; }
.adm-stat b { display:block; font-size:1.4rem; color:#1b2733; }
.adm-stat span { color:#5b6b78; font-size:.82rem; }
.adm-barres { display:flex; gap:4px; align-items:flex-end; height:110px; margin:8px 0 20px; background:#fff; border:1px solid #d5dde2; border-radius:10px; padding:10px 12px 4px; box-sizing:content-box; }
.adm-barre { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.adm-barre i { display:block; width:70%; background:#2456e0; border-radius:3px 3px 0 0; }
.adm-barre i.ia { background:#0e9a6b; }
.adm-barre span { font-size:.62rem; color:#8a97a1; margin-top:3px; }
tr.inactif { opacity:.5; }

/* --- v5.7 : lisibilité et consignes IA --- */
.tableau { display:block; overflow-x:auto; max-width:100%; }
.tableau th { white-space:nowrap; }
.tableau td .toggle, .tableau td button, .tableau td select { white-space:nowrap; }
.tableau td .form-limites { flex-wrap:wrap; row-gap:6px; }
.nb { white-space:nowrap; }
.toggle { white-space:nowrap; }
.adm-stat b { white-space:nowrap; }
.filtres { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.details-ia { background:#fff; border:1px solid #d5dde2; border-radius:10px;
  padding:10px 14px; margin:10px 0; }
.details-ia summary { cursor:pointer; font-weight:600; }
.form-consignes { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.form-consignes textarea { padding:8px 10px; border:1px solid #b9c4cc; border-radius:8px;
  font-family:inherit; font-size:.85rem; width:100%; box-sizing:border-box; }
.form-consignes button { align-self:flex-start; }
.prompt-ia { background:#f4f7f9; border:1px solid #e0e7ec; border-radius:8px;
  padding:10px 12px; font-size:.78rem; white-space:pre-wrap; word-break:break-word; }

main.large { max-width: 1500px; }

button.profil { cursor:pointer; font-family:inherit; }