/* Le labo de maths : style de base des cours et des éléments créés par labo.js.
   Chaque cours peut changer ces variables dans son propre :root pour son thème. */
:root {
  --labo-texte: #1d232b;
  --labo-discret: #5b6573;
  --labo-carte: #ffffff;
  --labo-carte-2: #f3f5f8;
  --labo-bord: #d6dbe2;
  --labo-accent: #2457d6;
  --labo-sur-accent: #ffffff;
  --labo-juste: #1c8a4c;
  --labo-faux: #c8372d;
  --labo-indice: rgba(214, 160, 20, .12);
  --labo-indice-bord: rgba(214, 160, 20, .5);
  --labo-correction: rgba(36, 87, 214, .06);
  --labo-correction-bord: rgba(36, 87, 214, .35);
  --labo-police: system-ui, -apple-system, "Segoe UI", sans-serif;
  --labo-police-titre: var(--labo-police);
  --labo-police-calcul: ui-monospace, Menlo, Consolas, monospace;
  --labo-rayon: 12px;
}

[hidden] { display: none !important; }
sub { font-size: .75em; line-height: 0; vertical-align: -.25em; }

/* ---------- Le cours, caché derrière « Afficher le cours » ---------- */
details.cours {
  border: 1px solid var(--labo-bord);
  border-radius: var(--labo-rayon);
  background: var(--labo-carte);
  margin: 0 0 16px;
}
details.cours > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px 12px 40px;
  position: relative;
  font-weight: 600;
  color: var(--labo-accent);
  border-radius: var(--labo-rayon);
}
details.cours > summary::-webkit-details-marker { display: none; }
details.cours > summary::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 1.15em;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
}
details.cours[open] > summary::before { transform: rotate(45deg); }
details.cours[open] > summary { border-bottom: 1px solid var(--labo-bord); border-radius: var(--labo-rayon) var(--labo-rayon) 0 0; }
details.cours > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.cours > :last-child { margin-bottom: 14px; }

/* ---------- Exercices ---------- */
.exercice {
  border: 1px solid var(--labo-bord);
  border-radius: var(--labo-rayon);
  background: var(--labo-carte);
  padding: 14px;
  margin: 0 0 14px;
  min-width: 0;
}
.exercice.labo-reussi { border-color: var(--labo-juste); }
/* Avant labo.js, l'indice et la correction restent cachés. */
.exercice:not(.labo-pret) .indice,
.exercice:not(.labo-pret) .correction { display: none; }

.exercice .enonce { margin-bottom: 10px; }

/* QCM : une colonne sur téléphone, deux sur grand écran */
.exercice .choix {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) { .exercice .choix { grid-template-columns: 1fr 1fr; } }
.exercice .choix > li { min-width: 0; }
.labo-choix {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  color: var(--labo-texte);
  background: var(--labo-carte-2);
  border: 1px solid var(--labo-bord);
  border-radius: 9px;
  padding: 9px 11px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.labo-choix:disabled { cursor: default; }
.labo-lettre {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: .85em;
  opacity: .8;
}
.labo-texte { min-width: 0; font-family: var(--labo-police-calcul); font-size: .95em; }
.labo-choix.labo-faux { border-color: var(--labo-faux); opacity: .55; text-decoration: line-through; animation: labo-secoue .3s; }
.labo-choix.labo-juste { border-color: var(--labo-juste); background: color-mix(in srgb, var(--labo-juste) 14%, transparent); opacity: 1; }

/* Saisie d'une valeur */
.labo-etiquette { display: block; font-size: .9em; color: var(--labo-discret); margin-bottom: 4px; }
.labo-ligne { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.labo-champ {
  width: 8em;
  min-width: 0;
  font: 600 17px var(--labo-police-calcul);
  color: var(--labo-texte);
  background: var(--labo-carte-2);
  border: 1px solid var(--labo-bord);
  border-radius: 8px;
  padding: 8px 10px;
}
.labo-champ.labo-faux { border-color: var(--labo-faux); animation: labo-secoue .3s; }
.labo-champ.labo-juste { border-color: var(--labo-juste); }
.labo-signe {
  font: 700 18px var(--labo-police-calcul);
  min-width: 44px;
  color: var(--labo-texte);
  background: var(--labo-carte-2);
  border: 1px solid var(--labo-bord);
  border-radius: 8px;
  cursor: pointer;
}

/* Boutons */
.labo-bouton {
  font: 600 15px var(--labo-police);
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--labo-accent);
  background: var(--labo-accent);
  color: var(--labo-sur-accent);
  cursor: pointer;
}
.labo-bouton.labo-secondaire { background: transparent; color: var(--labo-accent); }
.labo-bouton.labo-attention { border-color: var(--labo-faux); color: var(--labo-faux); }
.labo-bouton:disabled, .labo-signe:disabled { opacity: .45; cursor: default; }
.labo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.labo-points { margin-left: auto; font-weight: 700; color: var(--labo-discret); }
.labo-reussi .labo-points { color: var(--labo-juste); }

.labo-retour { margin: 8px 0 0; min-height: 1.2em; font-size: .95em; }
.labo-retour:empty { display: none; }
.labo-retour.labo-ok { color: var(--labo-juste); font-weight: 600; }
.labo-retour.labo-ko { color: var(--labo-faux); }

/* Indice et correction */
.exercice .indice {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--labo-indice);
  border: 1px solid var(--labo-indice-bord);
}
.exercice .correction {
  margin: 10px 0 0;
  padding: 10px 11px 10px 14px;
  border-radius: 9px;
  background: var(--labo-correction);
  border: 1px solid var(--labo-correction-bord);
  list-style: none;
  display: grid;
  gap: 4px;
}
.exercice .correction::before {
  content: "Correction";
  font-weight: 700;
  font-size: .85em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--labo-discret);
}
.exercice .correction > li { overflow-wrap: anywhere; }
.exercice .correction > li.resultat { font-weight: 700; color: var(--labo-accent); }

/* ---------- Bas de page : score et prochain cours ---------- */
.labo-bilan {
  border: 2px solid var(--labo-bord);
  border-radius: var(--labo-rayon);
  background: var(--labo-carte);
  padding: 16px;
  margin: 24px 0;
  text-align: center;
}
.labo-bilan-titre { margin: 0 0 6px; font-family: var(--labo-police-titre); }
.labo-score { margin: 0; font-size: 1.2em; }
.labo-score b { font-size: 2em; color: var(--labo-accent); font-variant-numeric: tabular-nums; }
.labo-bilan p { margin: 6px 0 0; }
.labo-faits, .labo-bareme { color: var(--labo-discret); font-size: .9em; }
.labo-attente { color: var(--labo-faux); font-size: .9em; }
.labo-prochain { font-weight: 600; }

/* ---------- Liens vers le tableau de bord (haut et bas du cours) ---------- */
.labo-haut {
  background: var(--labo-carte);
  border-bottom: 1px solid var(--labo-bord);
  padding: 6px 16px;
  font-family: var(--labo-police);
  font-size: 14px;
}
.labo-tdb { color: var(--labo-accent); font-weight: 600; text-decoration: none; }
.labo-tdb:hover, .labo-tdb:focus-visible { text-decoration: underline; }
.labo-bilan .labo-tdb { display: inline-block; margin-top: 12px; }

/* ---------- Bandeau (mode professeur, alertes) ---------- */
.labo-bandeau {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff6d6;
  color: #4a3a00;
  border-bottom: 1px solid #e6cf7a;
  font: 14px/1.4 system-ui, sans-serif;
  padding: 6px 16px;
}
.labo-bandeau p { margin: 2px 0; }

/* Mode ?exercice=<id> */
.labo-seul body { padding-block: 8px; }

@keyframes labo-secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .labo-choix, .labo-champ, details.cours > summary::before { animation: none !important; transition: none !important; }
}