/* Même thème que les leçons (_commun/style.css, mode lab). */
:root {
  --lab-bg: #10161d;
  --lab-panel: #1a2330;
  --lab-ink: #e8eef6;
  --lab-muted: #93a0b4;
  --lab-line: #2a3648;
  --lab-accent: #2dd4bf;
  --lab-warn: #fbbf24;
  --lab-ok: #4ade80;
  --radius: 14px;
  --sans: "Segoe UI", "Candara", "Calibri", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--lab-ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, #1a3a3a 0%, transparent 50%),
    radial-gradient(900px 400px at 110% 0%, #3a2416 0%, transparent 45%),
    var(--lab-bg);
  line-height: 1.55;
  font-size: 17px;
}
.wrap {
  width: 100%;
  max-width: min(94rem, 96vw);
  margin: 0 auto;
  padding: 28px 20px 88px;
}
.wrap-prof { max-width: 1320px; margin: 0 auto; }

.banniere-v2 {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  background: #3a2416;
  color: #fdba74;
  border-bottom: 1px solid #7c4a1e;
}
.cms-app { display: grid; gap: 16px; }
.cms-app[hidden], #cms-tableau[hidden] { display: none !important; }
.cms-top {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.cms-seq-choix {
  display: grid; gap: 4px; font-size: 0.82rem; font-weight: 750; color: var(--lab-muted);
  min-width: min(100%, 28rem);
}
.cms-niv-choix { min-width: 8rem; max-width: 10rem; }
.cms-seq-choix select {
  width: 100%; background: #0b1016; color: var(--lab-ink);
  border: 1px solid var(--lab-line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 1rem; font-weight: 650;
}
.cms-hint { margin: 0; }
.cms-fiche, .cms-editeur {
  background: #121a25; border: 1px solid var(--lab-line);
  border-radius: 14px; padding: 14px 16px 16px;
}
.cms-fiche h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cms-fiche-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.cms-edit { display: grid; gap: 8px; }
.cms-edit label, .cms-fiche label {
  display: grid; gap: 3px; font-size: 0.82rem; color: var(--lab-muted);
}
.cms-edit label.cms-check, .cms-fiche label.cms-check {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--lab-ink); font-size: 0.86rem;
}
.cms-edit input, .cms-edit textarea, .cms-edit select,
.cms-new-sea input, .cms-block input, .cms-block textarea {
  width: 100%; background: #0b1016; color: var(--lab-ink);
  border: 1px solid var(--lab-line); border-radius: 8px; padding: 6px 8px; font: inherit;
}
.cms-ref { margin: 6px 0 0; border: 1px solid var(--lab-line); border-radius: 10px; padding: 6px 10px; }
.cms-ref summary { cursor: pointer; font-weight: 750; color: #fdba74; }
.cms-ref-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin-top: 8px;
  max-height: 28rem; overflow: auto; padding-bottom: 6px;
}
.cms-bloc-titre { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: #7ee7d8; }
.cms-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; margin: 0 0 4px; color: var(--lab-ink); }
.cms-check input, .cms-edit label.cms-check input, .cms-fiche label.cms-check input {
  width: auto; flex: 0 0 auto; margin-top: 3px;
}
.cms-check-mini { font-size: 0.8rem; }
.cms-ref-conn { margin-top: 8px; display: grid; gap: 2px; max-height: 28rem; overflow: auto; }
.cms-conn-new { margin-top: 8px; }
.cms-extra-ligne {
  display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.4fr) auto;
  gap: 8px; align-items: center; margin: 0 0 8px;
}
.cms-extra-ligne input {
  width: 100%; background: #0b1016; color: var(--lab-ink);
  border: 1px solid var(--lab-line); border-radius: 8px; padding: 6px 8px; font: inherit;
}
#cms-extras, #cms-notes, .cms-corbeille { margin: 0 0 14px; }
#cms-extras > summary, #cms-notes > summary, .cms-corbeille > summary { cursor: pointer; font-weight: 750; color: #fdba74; }
.cms-seq-bloc {
  margin: 0 0 16px;
  padding: 12px 12px 8px;
  border: 1px solid #3b4d66;
  border-radius: 14px;
  background: #121a25;
}
.cms-seq-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.ord-btns { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.btn-ord { min-width: 36px; padding: 6px 8px; }
.cms-seq-tete h4, .cms-seq-bloc h4 { margin: 0 0 4px; font-size: 1.02rem; }
.cms-vider { margin-top: 8px; }
.cms-rect {
  background: #0d141c; border: 1px solid var(--lab-line); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; cursor: pointer;
}
.cms-rect:hover { border-color: #2dd4bf; }
.cms-rect strong { display: block; margin: 0 0 4px; }
.cms-rect p { margin: 0 0 8px; }
.cms-notes-mini { font-size: 0.82rem; color: #fdba74; }
.cms-creer-niv { margin-top: 8px; width: 100%; }
.cms-corb-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; }
#cms-niv-modale {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: #0b1118cc;
}
#cms-niv-modale .box {
  background: #1a2330; border: 1px solid var(--lab-line); border-radius: 16px;
  padding: 18px; min-width: 280px;
}
#cms-niv-modale p { margin: 0 0 12px; font-weight: 750; }
.cms-pages { margin: 10px 0 0; }
.cms-tabs-wrap { display: grid; gap: 10px; }
.cms-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.cms-tab {
  display: flex; align-items: stretch; gap: 2px;
  background: #0d141c; border: 1px solid var(--lab-line); border-radius: 10px;
}
.cms-tab.on { border-color: #2dd4bf; background: #134039; }
.cms-tab > button[data-act=sel-seance] {
  border: 0; background: transparent; color: inherit; font: inherit;
  font-weight: 700; padding: 8px 12px; cursor: pointer; text-align: left;
}
.cms-tab-ord { display: flex; flex-direction: column; }
.cms-mini-btn {
  padding: 2px 8px !important; font-size: 0.78rem !important; min-width: 0;
  border: 0; background: transparent; color: var(--lab-muted); cursor: pointer;
}
.cms-mini-btn:disabled { opacity: 0.35; cursor: default; }
.cms-new-sea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cms-new-sea input { max-width: 28rem; }
.cms-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 12px; padding: 8px;
  background: #0d141c; border: 1px solid var(--lab-line); border-radius: 12px;
}
.cms-toolbar-lab { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7ee7d8; padding: 0 6px; }
.cms-tool {
  border: 1px solid var(--lab-line); background: #121a25; color: var(--lab-ink);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.cms-tool:hover { border-color: #2dd4bf; color: #7ee7d8; }
.ta-g { text-align: left; }
.ta-c { text-align: center; }
.ta-d { text-align: right; }
.cms-fmt { display: inline-flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.cms-fmt[hidden] { display: none !important; }
.cms-fmt button {
  border: 1px solid var(--lab-line); background: #0f1620; color: var(--lab-ink);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit;
}
.cms-legacy { font-size: 0.88rem; color: #fdba74; }
.cms-paper {
  --lab-cours-bg: #14100c;
  --lab-cours-ink: #efeae3;
  --lab-cours-title: #fff7ee;
  --lab-cours-label: #ffc48a;
  --lab-cours-border: #d4783a;
  max-width: min(94rem, 96vw); margin: 0 auto;
  background: #10161d; border: 1px solid var(--lab-line);
  border-radius: 16px; padding: 22px 22px 36px; min-height: 22rem;
}
.cms-kicker { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7ee7d8; font-weight: 800; }
.cms-h1 { margin: 0 0 16px; font-size: 1.7rem; line-height: 1.2; }
.cms-paper-vide { text-align: center; padding: 28px 8px; border: 1px dashed var(--lab-line); border-radius: 12px; }
.cms-ce {
  min-height: 1.3em; outline: none; border-radius: 6px; padding: 2px 4px;
}
.cms-ce:focus { box-shadow: 0 0 0 2px #2dd4bf55; background: #0b101680; }
.cms-ce:empty::before { content: attr(data-ph); color: #64748b; font-weight: 500; }
.cms-block { position: relative; margin: 0; padding: 14px 6px 8px; border-radius: 12px; }
.cms-block:hover, .cms-block:focus-within { outline: 1px dashed #2dd4bf55; }
.cms-block-chrome {
  position: absolute; top: -6px; right: 8px; z-index: 3;
  display: none; gap: 2px; align-items: center;
  background: #0d141c; border: 1px solid var(--lab-line); border-radius: 999px;
  padding: 2px 8px 2px 10px; font-size: 0.72rem; font-weight: 800; color: #7ee7d8;
}
.cms-block:hover .cms-block-chrome, .cms-block:focus-within .cms-block-chrome { display: flex; }
.cms-gap {
  height: 14px; display: flex; align-items: center; justify-content: center;
}
.cms-gap button {
  width: 22px; height: 22px; border-radius: 999px; opacity: 0;
  border: 1px solid #2dd4bf; background: #134039; color: #7ee7d8;
  font-weight: 900; cursor: pointer; line-height: 1;
}
.cms-gap:hover button, .cms-gap button:focus { opacity: 1; }
.cms-paper .probleme {
  background: linear-gradient(135deg, #16332f, #1f2937);
  border: 1px solid #2dd4bf55; border-radius: 16px; padding: 16px 18px; margin: 0 0 14px;
}
.cms-paper .probleme.societe {
  background: var(--lab-cours-bg); border: 3px solid var(--lab-cours-border);
  color: var(--lab-cours-ink); box-shadow: 0 0 0 4px #d4783a22;
}
.cms-paper .lab-k { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--lab-cours-label); }
.cms-paper .probleme.societe .cms-ce { font-size: 1.22rem; font-weight: 700; color: var(--lab-cours-title); }
.cms-paper .cas-ligne { margin: 12px 0 0; font-size: 0.95rem; color: #d9d0c4; }
.cms-paper .question-seance {
  border-left: 5px solid var(--lab-cours-border); background: var(--lab-cours-bg);
  color: var(--lab-cours-ink); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 0 0 10px;
}
.cms-paper .consigne {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px;
  background: #121a25; border: 1px solid var(--lab-line); border-radius: 14px; padding: 14px 16px;
}
.cms-paper .consigne .num {
  width: 52px; height: 52px; border-radius: 14px; background: var(--lab-accent); color: #06221e;
  font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
}
.cms-paper .consigne [data-f=meta] { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7ee7d8; }
.cms-paper .consigne [data-f=titre] { font-size: 1.02rem; font-weight: 750; color: var(--lab-ink); }
.cms-paper .consigne [data-f=texte] { color: var(--lab-muted); }
.cms-paper .consigne-pas { margin: 8px 0 8px 1.15em; padding: 0; }
.cms-paper .consigne-interdit { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #3a1820; color: #fecdd3; }
.cms-paper .lecon {
  background: var(--lab-cours-bg); border: 2px solid var(--lab-cours-border);
  border-radius: 16px; padding: 14px 16px 12px; color: var(--lab-cours-ink);
}
.cms-paper .lecon-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--lab-cours-label); margin: 0 0 8px; }
.cms-paper .lecon h2 { font-size: 1.02rem; margin: 1.15em 0 0.35em; color: var(--lab-cours-title); }
.cms-paper .lecon h2:first-of-type { margin-top: 0.35em; }
.cms-paper .lecon .cms-ce[data-f=html] { min-height: 6rem; }
.cms-paper .cms-html-bloc .cms-ce { min-height: 4rem; }
.cms-quiz { background: #121a25; border: 1px solid var(--lab-line); border-radius: 14px; padding: 12px 14px; }
.cms-q { border-top: 1px solid var(--lab-line); padding: 8px 0; display: grid; gap: 4px; }
.cms-rep { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.cms-fig { display: grid; gap: 8px; margin: 0; }
.cms-img-apercu { max-width: 100%; border-radius: 10px; display: block; }
.cms-img-vide {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--lab-line); border-radius: 12px; color: var(--lab-muted); font-size: 0.9rem; padding: 12px;
}
.cms-html-bloc { border: 1px dashed var(--lab-line); border-radius: 12px; padding: 8px; min-height: 4rem; }
.cms-code-lab { display: grid; gap: 4px; font-size: 0.82rem; color: var(--lab-muted); }
.cms-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }
.cms-gadget { background: #121a25; border: 1px solid var(--lab-line); border-radius: 14px; padding: 14px 16px; }
.cms-pied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cms-palette {
  position: absolute; z-index: 80; width: 260px;
  background: #1a2330; border: 1px solid var(--lab-line); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 40px #0008;
}
.cms-palette button {
  display: grid; width: 100%; text-align: left; gap: 1px;
  border: 0; background: transparent; color: inherit; font: inherit;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.cms-palette button span { font-size: 0.75rem; color: var(--lab-muted); }
.cms-palette button:hover { background: #134039; }

.prof-onglets {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px; padding: 6px;
  background: #121a25; border: 1px solid var(--lab-line); border-radius: 999px;
}
.prof-onglets button {
  border: 0; background: transparent; color: var(--lab-muted);
  font: inherit; font-weight: 750; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.prof-onglets button.on, .prof-onglets button:hover {
  background: #134039; color: #7ee7d8;
}
.prof-vue[hidden] { display: none !important; }
.divers-form { max-width: 36rem; }
.divers-form input[type="number"] { max-width: 8rem; }
.divers-check { display: flex; align-items: center; gap: 10px; font-weight: 750; cursor: pointer; }
.divers-check input { width: 1.1rem; height: 1.1rem; }
.niv-filtre {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
}
.niv-filtre .btn { min-width: 4.2rem; }
.niveaux-cols {
  display: grid; grid-template-columns: 1fr;
  gap: 18px; align-items: start;
}
.niveau-col[hidden] { display: none !important; }
.niveau-col h3 {
  margin: 0 0 10px; color: #fdba74; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.95rem;
}
.seq-titre, .sea-titre {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit;
  font: inherit; cursor: pointer; padding: 0;
  border-radius: 8px;
}
.seq-titre:hover, .sea-titre:hover { color: #7ee7d8; }
.etat-seq { margin: 0 0 8px; font-size: 0.86rem; font-weight: 650; }
.ouv-classes {
  grid-column: 1 / -1;
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: #0d141c;
  border: 1px solid var(--lab-line);
  border-radius: 12px;
}
.ouv-classes[hidden] { display: none !important; }
.ouv-classes p { margin: 0 0 8px; font-size: 0.86rem; color: var(--lab-muted); }
.ouv-classes .ouv-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ouv-classes label {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 10px;
  border: 1px solid var(--lab-line); border-radius: 999px;
  background: #121a25; font-size: 0.86rem; font-weight: 700; cursor: pointer;
}
.ouv-classes label.on { border-color: #2dd4bf; color: #7ee7d8; }
.ouv-classes label input { width: 1rem; height: 1rem; margin: 0; }
.ouv-classes .ouv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seq-card {
  margin: 0 0 14px;
  outline: 1px solid #3b4d66;
  outline-offset: 0;
}
.seq-card.seq-off .seance-liste { opacity: 0.42; }
.seq-off-msg {
  color: #fdba74; font-size: 0.86rem; font-weight: 650;
  margin: 0 0 8px; line-height: 1.35;
}
.seq-off-msg[hidden] { display: none !important; }
.seq-head {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px;
}
.seance-liste { list-style: none; padding: 0; margin: 0; }
.seance-liste li {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--lab-line);
  font-size: 0.92rem;
}
@media (max-width: 700px) {
  .seance-liste li { grid-template-columns: 1fr 1fr; }
}
.seance-liste .btn { padding: 6px 10px; font-size: 0.82rem; }
.prog-annee {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.prog-tuile {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 6.2rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--lab-line);
  background: var(--lab-panel);
  color: inherit;
  text-decoration: none;
}
a.prog-tuile:hover { border-color: #2dd4bf; color: inherit; }
.prog-tuile.on { border-color: #2dd4bf55; background: #134039; }
.prog-tuile.off { opacity: 0.7; border-style: dashed; }
.prog-tuile b {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lab-accent);
}
.prog-tuile span {
  font-weight: 750;
  font-size: 0.88rem;
  line-height: 1.25;
}
.prog-tuile em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--lab-muted);
}
.prog-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prog-table th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lab-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--lab-line);
  font-weight: 750;
}
.prog-table td {
  padding: 10px;
  border-bottom: 1px solid var(--lab-line);
  vertical-align: middle;
}
.prog-table td:first-child {
  font-weight: 800;
  color: var(--lab-accent);
  width: 2.4em;
}
.prog-table td:nth-child(3),
.prog-table td:nth-child(4) { white-space: nowrap; }
.prog-table td:nth-child(4) { width: 4.2em; }
.prog-table td strong { display: block; }
.prog-table td .muted { display: block; font-size: 0.82rem; margin-top: 2px; }
.prog-table a { color: var(--lab-accent); text-decoration: none; }
.prog-table a:hover { text-decoration: underline; }
.prog-prevue { opacity: 0.72; }
.prog-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.prog-dots a,
.prog-dots span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}
.prog-dots a { background: #134039; color: #7ee7d8; }
.prog-dots a:hover { background: #1a5c52; text-decoration: none; }
.prog-dots span {
  background: #0b1016;
  color: var(--lab-muted);
  border: 1px dashed var(--lab-line);
}
.prog-seances { margin-top: 10px; }
.prog-seances li { grid-template-columns: 1fr auto; }
.prog-seq h2 { font-size: 1.15rem; margin: 0 0 6px; }
.btn-code-oral {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.03em; font-weight: 800;
}

.site-top {
  position: sticky; top: 0; z-index: 90;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  min-height: 46px; padding: 6px clamp(16px, 3vw, 40px);
  background: rgba(13, 20, 28, 0.88);
  border-bottom: 1px solid #2a364866;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.86rem; font-weight: 750;
}
.site-top .nav-gauche, .site-top .nav-droite {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.site-top .nav-droite { margin-left: auto; }
.site-top a, .site-top .lien-sortie {
  color: #e8eef6; text-decoration: none;
  border-radius: 999px; padding: 5px 11px;
  border: 0; background: transparent; font: inherit; font-weight: 750; cursor: pointer;
}
.site-top a:hover, .site-top a.on, .site-top .lien-sortie:hover { background: #134039; color: #7ee7d8; }
.site-top a.brand {
  background: #2dd4bf; color: #06221e;
}
.site-top .menu-cours { position: relative; }
.site-top .menu-cours > summary {
  list-style: none; cursor: pointer;
  border-radius: 999px; padding: 5px 11px;
}
.site-top .menu-cours > summary::-webkit-details-marker { display: none; }
.site-top .menu-cours > summary::marker { content: ""; }
.site-top .menu-cours:hover > summary,
.site-top .menu-cours[open] > summary,
.site-top .menu-cours.on > summary { background: #134039; color: #7ee7d8; }
.site-top .menu-cours-liste {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 95;
  min-width: 132px; padding: 6px;
  background: #1a2330; border: 1px solid var(--lab-line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.site-top .menu-cours-liste a { display: block; }
.site-top a.connexion {
  background: #c45c26; color: #fff;
}
.site-top a.connexion.on, .site-top a.connexion:hover { background: #e07030; color: #fff; }
.site-top .btn-ajouter-eleve {
  border: 0; border-radius: 999px; padding: 5px 11px;
  background: #1e2936; color: #e8eef6;
  font: inherit; font-weight: 750; font-size: 0.8rem; cursor: pointer;
}
.site-top .btn-ajouter-eleve:hover { background: #134039; color: #7ee7d8; }
.site-top .site-groupe {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 750; color: #c5d0dc; max-width: 340px;
}
.site-top .site-groupe b { color: #fdba74; }
.site-top .btn-groupe-quitter-mini {
  border: 0; background: transparent; color: #93a0b4;
  font: inherit; font-size: 0.75rem; font-weight: 750;
  padding: 4px 8px; border-radius: 999px; cursor: pointer;
}
.site-top .btn-groupe-quitter-mini:hover { background: #3a1820; color: #fecdd3; }

.cms-page-ligne {
  padding: 10px 0;
  border-bottom: 1px solid var(--lab-line);
}
.cms-page-ligne:last-child { border-bottom: 0; }

.accueil-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 8px 0 0;
}
.accueil-grid h3 { margin-top: 0; color: #fdba74; font-size: 1.05rem; }
.accueil-grid .card p:last-child { margin-bottom: 0; }

a { color: var(--lab-accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 2rem; letter-spacing: -0.03em; }
h2 { font-size: 1.35rem; margin-top: 1.6em; }
p { margin: 0 0 0.85em; }

.kicker {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lab-accent); font-weight: 700; margin-bottom: 8px;
}
.kicker a { color: var(--lab-accent); }
.hero {
  border-radius: 22px; padding: 28px 26px;
  background: linear-gradient(135deg, #103a36 0%, #1b2430 55%, #3a2416 140%);
  color: #f7f3ea;
}
.hero h1 { color: #fff; }
.hero .kicker { color: #7ee7d8; }
.hero p { margin: 0; }

.card {
  background: var(--lab-panel);
  border: 1px solid var(--lab-line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; padding: 10px 16px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--lab-accent); color: #06221e; text-decoration: none;
}
.btn.secondary { background: #314155; color: var(--lab-ink); }
.btn.warn { background: var(--lab-warn); color: #2a1a00; }
.btn.danger { background: #b42318; color: #fff; }
.accomp-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.accomp-onglets button {
  border: 1px solid var(--lab-line); background: #121a25; color: inherit;
  border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 750; cursor: pointer;
}
.accomp-onglets button.on { border-color: #2dd4bf; background: #134039; color: #7ee7d8; }
.accomp-ajout { margin: 0 0 16px; }
.accomp-ajout label { display: block; font-size: 0.82rem; font-weight: 750; margin: 0 0 6px; }
.accomp-ajout input {
  min-width: 16rem; max-width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--lab-line); background: #0f1620; color: inherit; font: inherit;
}
.comptes-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comptes-actions form { margin: 0; }
.btn.ghost {
  background: transparent; color: var(--lab-accent);
  border: 1.5px solid currentColor;
}

input, select, textarea {
  width: 100%; font: inherit; padding: 9px 11px; border-radius: 10px;
  border: 1.5px solid var(--lab-line); background: #0f1620; color: var(--lab-ink);
}
label { font-weight: 650; display: block; margin: 0 0 6px; }
.field { margin: 0 0 12px; }

.pseudo {
  font-size: 1.8rem; font-weight: 800; letter-spacing: 0.02em;
  background: #134039; border: 2px dashed var(--lab-accent);
  border-radius: 14px; padding: 14px; text-align: center; color: #7ee7d8;
}
.nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.muted { color: var(--lab-muted); }
.small { font-size: 0.9rem; }
.ok { color: var(--lab-ok); font-weight: 700; }
.err { color: #fb7185; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { border: 1px solid var(--lab-line); padding: 8px 9px; text-align: left; vertical-align: top; }
th { background: #243142; }
td { background: #121a25; }

.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: #134039; color: var(--lab-accent);
}
.bar { height: 8px; background: var(--lab-line); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--lab-accent); }
.suivi-home {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin: 18px 0 8px;
}
@media (max-width: 800px) { .suivi-home { grid-template-columns: 1fr; } }
.suivi-seq h2, .suivi-prog h2 { margin-top: 0; }
.suivi-pct { font-weight: 800; margin: 8px 0 4px; }
.suivi-note { font-weight: 800; margin: 10px 0 2px; color: var(--lab-accent); }
.suivi-lignes { list-style: none; padding: 0; margin: 12px 0 0; }
.suivi-lignes li { margin: 0 0 12px; }
.suivi-lignes li > span { display: inline-block; margin-right: 8px; font-weight: 650; }
.suivi-lignes .bar { margin-top: 6px; }

.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .badges { grid-template-columns: 1fr; } }
.badge {
  display: flex; gap: 12px; align-items: center;
  border-radius: 14px; padding: 12px 14px;
  border: 1px solid var(--lab-line); background: var(--lab-panel);
}
.badge .ico {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.badge.on { border-color: #2dd4bf55; }
.badge.on .ico { background: #134039; color: var(--lab-ok); }
.badge.off { opacity: 0.55; }
.badge.off .ico { background: #243142; color: var(--lab-muted); }

footer.site { margin-top: 40px; font-size: 0.85rem; color: var(--lab-muted); }
footer.site a { color: var(--lab-accent); }

.notice {
  background: #2a1c10; border: 1px solid #fdba74; border-radius: 14px;
  padding: 12px 14px; font-size: 0.95rem; color: #f4e8c8;
}
.notice a { color: #fdba74; }
span.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lab-ok); }

.seq-suivi {
  background: var(--lab-panel);
  border: 1px solid #3b4d66;
  border-radius: 16px;
  padding: 14px 16px 8px;
  margin: 0 0 16px;
}
.seq-suivi h2 { margin: 0 0 4px; }

.dash-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin: 0 0 8px;
}
.dash-top h2 { margin: 0; }
.dash-clock {
  font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; color: #7ee7d8;
}
.dash-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin: 0 0 14px;
}
.dash-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-classes button {
  border: 1.5px solid var(--lab-line); background: #121a25; color: var(--lab-ink);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 750; cursor: pointer;
}
.dash-classes button.on, .dash-classes button:hover {
  background: #134039; color: #7ee7d8; border-color: #2dd4bf66;
}
.seance-en-cours {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: #2a1c10; border: 1px solid #fdba7466; color: #fde68a; font-weight: 700;
}
.dash-stats {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin: 0 0 14px; font-size: 0.92rem; color: var(--lab-muted);
}
.dash-stats b { color: var(--lab-ink); font-size: 1.05rem; }
.dash-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.dash-card {
  background: var(--lab-panel); border: 1px solid var(--lab-line);
  border-radius: 16px; padding: 12px 14px;
}
.dash-card.live { border-color: #2dd4bf88; box-shadow: 0 0 0 1px #2dd4bf33; }
.dash-card.done { border-color: #4ade8055; }
.dash-card.lecon-ok {
  border-color: #e08a40;
  box-shadow: 0 0 0 1px #e08a4033;
  background: #1c1610;
}
.dash-card.appel {
  background: #3f3208;
  border-color: #facc15;
  box-shadow: 0 0 0 2px #facc15, 0 0 22px #facc1544;
}
.dash-card.demande {
  background: #0c2744;
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px #38bdf8, 0 0 22px #38bdf866;
}
.dash-card .dash-appel {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #1b2430; background: #facc15;
  display: inline-block; border-radius: 999px; padding: 3px 10px;
}
.dash-card .dash-demande {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #082f49; background: #38bdf8;
  display: inline-block; border-radius: 999px; padding: 3px 10px;
}
.dash-card .dash-vu { margin-top: 8px; width: 100%; padding: 6px 10px; font-size: 0.82rem; }
.dash-card .dash-lecon-ok {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffc48a;
}
.dash-card .who {
  display: block; color: var(--lab-ink); text-decoration: none;
  font-weight: 800; font-size: 1.05rem;
}
.dash-card .who:hover { color: #7ee7d8; }
.dash-card .pseudo-ligne { margin: 2px 0 8px; font-size: 0.82rem; color: var(--lab-muted); }
.dash-card .dash-groupe {
  margin: -4px 0 8px; font-size: 0.78rem; font-weight: 750; color: #fdba74;
}
.dash-card .pct { font-weight: 800; margin: 6px 0 2px; }
.dash-card .dash-note { margin: 0 0 4px; font-size: 0.85rem; font-weight: 800; color: var(--lab-accent); }
.dash-card .page { margin: 0; font-size: 0.88rem; color: var(--lab-muted); }
.dash-card .dash-q {
  margin: 4px 0 0; font-size: 0.82rem; font-weight: 650; color: #f4e8c8;
  min-height: 1.3em;
}
.dash-card .bar > i { transition: width .35s ease; }
.dash-card .codes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dash-card .codes span {
  font-size: 0.72rem; font-weight: 800;
  background: #134039; color: var(--lab-accent); padding: 2px 7px; border-radius: 999px;
}
.dash-card .ago { margin: 8px 0 0; font-size: 0.75rem; color: var(--lab-muted); }
.dash-card.live .ago { color: #4ade80; font-weight: 800; }
.dash-card .dash-valider {
  margin-top: 10px; width: 100%; padding: 7px 10px; font-size: 0.82rem;
}
.dash-card .dash-validee {
  margin: 10px 0 0; font-weight: 800; color: var(--lab-ok);
}
#vue-suivi:fullscreen, #vue-suivi:-webkit-full-screen {
  background: var(--lab-bg); padding: 20px 24px 40px; overflow: auto;
}
.prog-seq h4, .prog-couverture h4 {
  margin: 14px 0 6px; font-size: 0.86rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fdba74;
}
.prog-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.code-tag {
  display: inline-block; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  background: #134039; color: #7ee7d8; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.prog-liste { margin: 0 0 10px; padding-left: 1.15em; font-size: 0.9rem; }
.prog-liste li { margin: 0 0 4px; }
.prog-blocs { margin: 0 0 12px; padding-left: 1.15em; font-size: 0.9rem; }
.table-scroll { overflow-x: auto; margin: 0 0 8px; }
table.matrice { font-size: 0.78rem; }
table.matrice th:first-child { min-width: 220px; font-weight: 650; }
table.matrice th:first-child .muted { display: block; font-weight: 500; margin-top: 2px; }
table.matrice td, table.matrice thead th:not(:first-child) { text-align: center; width: 2.4em; }
.prog-couverture { margin: 0 0 16px; }
.seq-fermee { opacity: 0.78; }
.seq-fermee h2 { color: #c5d0dc; }

ol.parcours { list-style: none; padding: 0; margin: 0 0 22px; }
ol.parcours li {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--lab-line); border-radius: 12px;
  margin: 0 0 8px; background: var(--lab-panel);
}
ol.parcours li.done { border-color: #4ade8055; }
ol.parcours li.lock { opacity: 0.62; }
ol.parcours li.lock span:first-child { font-weight: 650; }
ol.parcours a { color: var(--lab-accent); }
ol.parcours .js-recommencer {
  margin-left: 8px; padding: 4px 10px; font-size: 0.8rem;
}
#recommencer-modale,
#validee-modale {
  position: fixed; inset: 0; z-index: 92;
  background: #0b1016cc; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#recommencer-modale .box,
#validee-modale .box {
  background: #1a2330; color: #e8eef6; border-radius: 18px;
  padding: 22px 20px 16px; max-width: 420px; width: 100%;
  border: 1px solid #2a3648;
}
#recommencer-modale h2,
#validee-modale h2 { margin: 0 0 8px; font-size: 1.15rem; }
#recommencer-modale p,
#validee-modale p { margin: 0 0 10px; color: #93a0b4; }
#recommencer-modale .actions,
#validee-modale .actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
#recommencer-modale .btn,
#validee-modale .btn {
  border: 0; border-radius: 999px; padding: 10px 16px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: #2dd4bf; color: #06221e; text-decoration: none;
  display: inline-flex; align-items: center;
}
#recommencer-modale .btn.ghost,
#validee-modale .btn.ghost { background: #314155; color: #e8eef6; }
#recommencer-modale .btn:disabled { opacity: 0.55; cursor: wait; }

ul { padding-left: 1.2em; }
form { margin: 0; }
