* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #1f2430;
  background: #f6f7fb;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: #1f2430;
  color: #fff;
}
.topbar .brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}
.topbar nav a, .topbar nav .link-btn {
  color: #cfd4e2;
  text-decoration: none;
  margin-left: 1rem;
}
.link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.admin-badge {
  color: #7fd18a;
  margin-left: 1rem;
}
.inline-form { display: inline; }

main { padding: 1.5rem; }

.hero { max-width: 640px; margin: 3rem auto; text-align: center; }
.hero h1 { margin-bottom: 0.5rem; }
.hero form.inline-form { margin: 0 0.4rem; }

.primary-btn {
  background: #3b5bdb;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}
.primary-btn:hover { background: #2f4bc0; }
.primary-btn.icon-only { padding: 0.5rem 0.7rem; font-size: 1.1rem; line-height: 1; }

.login-box {
  max-width: 320px;
  margin: 3rem auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.login-box form { display: flex; flex-direction: column; gap: 0.75rem; }
.login-box label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 0.25rem; }
.login-box input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
.error { color: #c92a2a; }

.accounts-page { max-width: 720px; margin: 0 auto; }
.accounts-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.accounts-card h2 { margin-top: 0; font-size: 1.05rem; }
.inline-form-stack { display: flex; flex-direction: column; gap: 0.75rem; max-width: 320px; }
.inline-form-stack label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 0.25rem; }
.inline-form-stack input, .inline-form-stack select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
.accounts-table { width: 100%; border-collapse: collapse; }
.accounts-table th, .accounts-table td { text-align: left; padding: 0.4rem 0.3rem; border-bottom: 1px solid #eee; }
.accounts-table th { color: #868e96; font-weight: 600; font-size: 0.85rem; }

.gantt-page { max-width: 100%; }
.gantt-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.gantt-header #gantt-name {
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid transparent;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  background: transparent;
  flex: 0 1 400px;
}
.gantt-header #gantt-name:hover, .gantt-header #gantt-name:focus {
  border-color: #ccc;
  background: #fff;
}
.save-status { color: #868e96; font-size: 0.85rem; }
.save-status.pending { font-size: 1rem; color: #f08c00; }
.save-status.saved { font-size: 1rem; color: #2f9e44; }

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.zoom-level {
  min-width: 3.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #495057;
}

.gantt-scroll {
  overflow-x: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.gantt-table { border-collapse: collapse; width: max-content; }
.gantt-table th, .gantt-table td {
  border-bottom: 1px solid #eee;
  padding: 0.3rem 0.4rem;
  vertical-align: middle;
  white-space: nowrap;
}
.gantt-table th { background: #f1f3f8; position: sticky; top: 0; z-index: 2; }

.col-drag, .col-name, .col-start, .col-end, .col-progress, .col-actions {
  position: sticky;
  background: #fff;
  z-index: 1;
}
.gantt-table th.col-drag, .gantt-table th.col-name, .gantt-table th.col-start, .gantt-table th.col-end,
.gantt-table th.col-progress, .gantt-table th.col-actions {
  z-index: 3;
  background: #f1f3f8;
}
.col-drag { left: 0; min-width: 28px; width: 28px; text-align: center; }
.col-name { left: 28px; min-width: 220px; }
.col-start { left: 248px; min-width: 110px; }
.col-end { left: 358px; min-width: 110px; }
.col-progress { left: 468px; min-width: 70px; }
.col-actions { left: 538px; min-width: 110px; box-shadow: 2px 0 4px rgba(0,0,0,0.05); }

.drag-handle {
  cursor: grab;
  color: #adb5bd;
  user-select: none;
  display: inline-block;
}
.drag-handle:active { cursor: grabbing; }
tr.drag-over-row { outline: 2px solid #3b5bdb; outline-offset: -2px; }

.task-name-input {
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem;
  width: 100%;
}
.task-name-input:hover, .task-name-input:focus { border-color: #ccc; }

.indent-spacer { display: inline-block; }

.gantt-table .date-input, .gantt-table input[type="number"] {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.2rem;
  width: 100%;
}
.gantt-table .date-input { text-align: center; }
.gantt-table .date-input.input-invalid {
  border-color: #c92a2a;
  background: #fff5f5;
}
.gantt-table input[type="number"] { width: 55px; }

.icon-btn {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  margin-right: 0.15rem;
}
.icon-btn:hover { background: #f1f3f8; }

.timeline-header { position: relative; height: 28px; }
.timeline-cell { position: relative; height: 32px; }
.timeline-bar {
  position: absolute;
  top: 6px;
  height: 20px;
  border-radius: 4px;
  background: #c7d2fe;
  cursor: grab;
}
.timeline-bar:active { cursor: grabbing; }
.timeline-bar-fill {
  height: 100%;
  background: #3b5bdb;
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}
.bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
}
.bar-handle-left { left: -2px; }
.bar-handle-right { right: -2px; }
.bar-handle:hover { background: rgba(31, 36, 48, 0.25); border-radius: 4px; }
.duration-label {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(31, 36, 48, 0.55);
  padding: 0 4px;
  border-radius: 3px;
  pointer-events: none;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #eee;
  font-size: 0.7rem;
  color: #868e96;
  padding-left: 3px;
}

.whiteboard-page { display: flex; flex-direction: column; height: calc(100vh - 4.5rem); }
.whiteboard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.whiteboard-header #whiteboard-name {
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid transparent;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  background: transparent;
  flex: 0 1 400px;
}
.whiteboard-header #whiteboard-name:hover, .whiteboard-header #whiteboard-name:focus {
  border-color: #ccc;
  background: #fff;
}

.wb-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.wb-viewport.panning { cursor: grabbing; }
.wb-viewport.drawing { cursor: crosshair; }
.wb-viewport.drag-over { outline: 3px dashed #3b5bdb; outline-offset: -3px; }
.wb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 3000px;
  background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
  background-size: 24px 24px;
  transform-origin: 0 0;
}

.wb-pencil-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.icon-btn.active { background: #3b5bdb; color: #fff; border-color: #3b5bdb; }

.wb-preview-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 3000px;
  overflow: visible;
  pointer-events: none;
}
.wb-line-svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.wb-line-svg.dragging { opacity: 0.7; }
.wb-line { pointer-events: stroke; cursor: move; }
.wb-line-svg.selected .wb-line { filter: drop-shadow(0 0 2px #3b5bdb) drop-shadow(0 0 2px #3b5bdb); }
.wb-line-svg.multi-selected .wb-line { filter: drop-shadow(0 0 3px #3b5bdb) drop-shadow(0 0 3px #3b5bdb) drop-shadow(0 0 3px #3b5bdb); }
.wb-line-preview { pointer-events: none; }

.wb-line-endpoint {
  display: none;
  fill: #fff;
  stroke: #3b5bdb;
  stroke-width: 2;
  cursor: move;
  pointer-events: all;
}
.wb-line-svg.selected .wb-line-endpoint { display: block; }

.wb-element {
  position: absolute;
  border: 1px solid #adb5bd;
  border-radius: 4px;
  background: #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #495057;
  cursor: move;
  user-select: none;
}
.wb-element.dragging { opacity: 0.7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.wb-element.selected { outline: 2px solid #3b5bdb; outline-offset: 1px; }
.wb-element.multi-selected { outline: 3px solid #3b5bdb; outline-offset: 1px; }

.wb-minimap {
  position: absolute;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  z-index: 50;
  cursor: pointer;
}
.wb-minimap:hover { background: rgba(0, 0, 0, 0.12); }
.wb-minimap-h { left: 8px; right: 18px; bottom: 5px; height: 8px; }
.wb-minimap-v { top: 8px; bottom: 18px; right: 5px; width: 8px; }
.wb-minimap-thumb {
  position: absolute;
  background: rgba(59, 91, 219, 0.6);
  border-radius: 4px;
  pointer-events: none;
}
.wb-minimap:hover .wb-minimap-thumb, .wb-minimap.dragging .wb-minimap-thumb { background: rgba(59, 91, 219, 0.85); }
.wb-minimap-h .wb-minimap-thumb { top: 0; bottom: 0; }
.wb-minimap-v .wb-minimap-thumb { left: 0; right: 0; }

.wb-marquee {
  display: none;
  position: fixed;
  z-index: 900;
  border: 1px solid #3b5bdb;
  background: rgba(59, 91, 219, 0.12);
  pointer-events: none;
}

.wb-text-element {
  background: #fff;
  border-width: 1px;
  border-style: solid;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.wb-text-content {
  flex: 1;
  padding: 0.5rem;
  overflow: auto;
  outline: none;
  cursor: move;
  white-space: pre-wrap;
  word-break: break-word;
}
.wb-text-element.editing .wb-text-content { cursor: text; user-select: text; }
.wb-text-element.editing { cursor: default; }
.wb-text-content div { min-height: 1em; }
.wb-text-content ul { margin: 0; padding-left: 1.4em; }
.wb-text-content li { min-height: 1em; }

.wb-text-reactions {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.wb-reaction-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.wb-reaction-count { color: #495057; font-weight: 600; }
.wb-reaction-badge.voted { border-color: #3b5bdb; background: #edf1ff; }

.wb-image-element {
  background: none;
  border: none;
  padding: 0;
}
.wb-image-element img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

.wb-table-element {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #adb5bd;
  padding: 0;
  overflow: auto;
  cursor: default;
}
.wb-table-grip {
  flex: 0 0 auto;
  text-align: center;
  padding: 2px;
  color: #adb5bd;
  cursor: move;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 0.7rem;
  user-select: none;
}
.wb-table { border-collapse: collapse; flex: 1; width: 100%; height: 100%; table-layout: fixed; }
.wb-table td {
  border: 1px solid #dee2e6;
  padding: 0.3rem 0.4rem;
  min-width: 50px;
  outline: none;
  vertical-align: top;
  word-break: break-word;
  white-space: pre-wrap;
}
.wb-table td:focus { background: #eef2ff; }

.wb-resize-handle {
  display: none;
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #3b5bdb;
  cursor: nwse-resize;
}
.wb-element.selected .wb-resize-handle { display: block; }

.wb-toolbar {
  display: none;
  position: fixed;
  z-index: 1000;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.35rem;
}
.wb-toolbar .wb-tb-input {
  width: 55px;
  padding: 0.2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.wb-toolbar input[type='color'] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.wb-toolbar .wb-tb-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}
.wb-toolbar .wb-tb-toggle:nth-child(4) { font-style: italic; }
.wb-toolbar .wb-tb-toggle-italic { font-style: italic; }
.wb-toolbar .wb-tb-underline { text-decoration: underline; }
.wb-toolbar .wb-tb-strikethrough { text-decoration: line-through; }
.wb-toolbar .wb-tb-toggle.active { background: #3b5bdb; color: #fff; border-color: #3b5bdb; }
.wb-toolbar .wb-tb-action {
  height: 28px;
  padding: 0 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}
.wb-toolbar .wb-tb-action:hover { background: #f1f3f8; }

.wb-context-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
}
.wb-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #1f2430;
}
.wb-context-menu button:hover { background: #f1f3f8; }
.wb-context-menu-separator { height: 1px; background: #eee; margin: 0.25rem 0.2rem; }

/* ---- Kanban ---- */
.kanban-page { max-width: 100%; }
.kanban-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.kanban-header #kanban-name {
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid transparent;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  background: transparent;
  flex: 0 1 400px;
}
.kanban-header #kanban-name:hover, .kanban-header #kanban-name:focus {
  border-color: #ccc;
  background: #fff;
}

.kanban-board {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.kanban-column {
  flex: 0 0 260px;
  background: #eceff5;
  border-radius: 8px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 10rem);
}
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.kanban-column-title {
  flex: 1;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
  background: transparent;
  min-width: 0;
}
.kanban-column-title:hover, .kanban-column-title:focus {
  border-color: #ccc;
  background: #fff;
}
.kanban-column-handle {
  cursor: grab;
  color: #868e96;
  font-size: 0.95rem;
  user-select: none;
  flex: 0 0 auto;
  padding: 0 0.15rem;
}
.kanban-column-header .icon-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.75rem;
  flex: 0 0 auto;
}
.kanban-column.dragging {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
.kanban-column-placeholder {
  flex: 0 0 auto;
  border: 2px dashed #adb5bd;
  border-radius: 8px;
  background: rgba(173, 181, 189, 0.15);
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  min-height: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kanban-add-card-btn {
  margin-top: 0.5rem;
  background: none;
  border: 1px dashed #adb5bd;
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  color: #495057;
}
.kanban-add-card-btn:hover { background: #fff; }

.kanban-card {
  position: relative;
  background: #fff3bf;
  border-radius: 6px;
  padding: 0.5rem 0.5rem 0.4rem 1.4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.kanban-card.dragging {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
.kanban-card-handle {
  position: absolute;
  left: 0.15rem;
  top: 0.4rem;
  cursor: grab;
  color: #868e96;
  font-size: 0.9rem;
  user-select: none;
}
.kanban-card-text {
  min-height: 1.4em;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
}
.kanban-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.kanban-card-toolbar input[type='color'] {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.kanban-card-delete {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
}

.kanban-card-placeholder {
  border: 2px dashed #adb5bd;
  border-radius: 6px;
  background: rgba(173, 181, 189, 0.15);
}

.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: #fff;
  border-left: 1px solid #dde1e8;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.history-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #dde1e8;
}
.history-panel-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
}
.history-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.8rem;
}
.history-empty { color: #868e96; font-size: 0.9rem; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f8;
}
.history-entry:last-child { border-bottom: none; }
.history-entry-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #868e96;
  margin-bottom: 0.15rem;
}
.history-entry-actor { font-weight: 600; color: #495057; }
.history-entry-summary { font-size: 0.88rem; color: #1f2430; }

.cours-page { display: flex; flex-direction: column; height: calc(100vh - 4.5rem); }
.cours-layout { flex: 1; display: flex; gap: 1rem; min-height: 0; }

.cours-tree {
  flex: 0 0 280px;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0.75rem;
}
.cours-tree-root, .cours-tree ul { list-style: none; margin: 0; padding-left: 0.9rem; }
.cours-tree-root { padding-left: 0; }
.cours-tree-item { margin: 0.15rem 0; }
.cours-tree-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  color: #1f2430;
  font-family: inherit;
}
.cours-tree-btn:hover:not(:disabled) { background: #f1f3f8; }
.cours-tree-level-1 > .cours-tree-btn { font-weight: 700; }
.cours-tree-level-2 > .cours-tree-btn { font-weight: 500; }
.cours-tree-level-3 > .cours-tree-btn { font-size: 0.9rem; color: #495057; }
.cours-tree-btn.current { background: #edf1ff; }
.cours-tree-btn.live { outline: 2px solid #3b5bdb; outline-offset: -2px; }
.cours-tree-btn.locked { color: #ced4da; cursor: not-allowed; }

.cours-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  overflow-y: auto;
}

.cours-topic-list { list-style: none; padding: 0; }
.cours-topic-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #dde1e8;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.cours-topic-btn:hover { background: #f1f3f8; border-color: #3b5bdb; }

.cours-waiting { color: #868e96; font-size: 1.1rem; text-align: center; margin-top: 3rem; }

.cours-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cours-doc-title { font-weight: 600; color: #495057; }

.cours-resync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff3bf;
  border: 1px solid #f5c518;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.cours-resync-banner[hidden] { display: none; }

.cours-slide h2 { margin-top: 0; }
.cours-slide-body img { max-width: 100%; border-radius: 6px; }

.qcm-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  z-index: 900;
}
.qcm-panel[hidden] { display: none; }
.qcm-panel h3 { margin-top: 0; font-size: 1rem; }

.qcm-countdown {
  position: fixed;
  top: 12px;
  right: 16px;
  background: #1f2430;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  z-index: 950;
}
.qcm-countdown[hidden] { display: none; }

.qcm-seconds-label { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; font-size: 0.85rem; }
.qcm-seconds-label input { width: 60px; }

.qcm-roster { list-style: none; padding: 0; margin: 0.5rem 0; max-height: 150px; overflow-y: auto; }
.qcm-roster li { padding: 0.15rem 0; font-size: 0.9rem; }

.qcm-progress-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; margin: 0.5rem 0; }
.qcm-progress-table th, .qcm-progress-table td { border: 1px solid #eee; padding: 0.2rem 0.35rem; text-align: center; }
.qcm-cell-validated { color: #2f9e44; font-weight: 700; }
.qcm-cell-deferred { color: #f08c00; }
.qcm-cell-not_seen { color: #ced4da; }

.qcm-remaining { font-weight: 600; }

.qcm-question-label { font-weight: 700; margin-bottom: 0.25rem; }
.qcm-options { list-style: none; padding: 0; margin: 0.5rem 0; }
.qcm-options li { padding: 0.2rem 0; }
.qcm-question-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.qcm-question-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: #c92a2a; margin-right: auto; }

.qcm-result-question { padding: 0.75rem 0; border-bottom: 1px solid #f1f3f8; }
.qcm-result-question:last-child { border-bottom: none; }
.qcm-result-options { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.qcm-result-options li { padding: 0.15rem 0; }
.qcm-result-options li.correct { color: #2f9e44; font-weight: 600; }

.admin-warning {
  background: #fff5f5;
  border: 1px solid #ffc9c9;
  color: #c92a2a;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}