/* © 2026 Philippe Roussille */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ══ Variables ══════════════════════════════════════════════════════ */
:root {
  /* Interface */
  --tb-bg:      #1C3B4A;
  --tb-surface: #234557;
  --tb-border:  #2a5166;
  --tb-muted:   #7fafc0;
  --tb-mid:     #4a7a8e;
  --tb-fg:      #ffffff;
  --ed-fg:      #e2e8f0;
  --ed-caret:   #D4511A;
  --ed-border:  #2a5166;
  /* Document */
  --doc-fg:     #1e293b;
  --doc-subtle: #64748b;
  --doc-link:   #2e86ab;
  --a4-logo-color: #D4511A;
  /* Highlighter */
  --hl-accent: #D4511A;
  --hl-code:   #9fc5d0;
  /* Boîtes (partagées doc + diapos) */
  --bx-définition: #3b82f6;
  --bx-attention:  #f59e0b;
  --bx-info:       #06b6d4;
  --bx-exemple:    #22c55e;
  --bx-remarque:   #8b5cf6;
  --bx-solution:   #10b981;
  /* Contenu (accent unique doc + diapos) */
  --accent:     #D4511A;
  --fond:       #1C3B4A;
  --fond-moyen: #234557;
  --fond-léger: #2a5166;
  --fond-slide: #ffffff;
  --fond-code:  #1e2d35;
  --gray-text:  rgba(255,255,255,.55);
}

html, body {
  height: 100vh;
  font-family: 'Lato', system-ui, sans-serif;
  background: var(--tb-bg);
  color: var(--tb-fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══ Toolbar ════════════════════════════════════════════════════════ */
#toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 48px;
  background: var(--tb-bg);
  border-bottom: 2px solid var(--accent);
  flex-shrink: 0;
}
#toolbar .brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--tb-fg);
  flex-shrink: 0;
}

/* Mode toggle */
.mode-toggle {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,.08);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
.mode-btn {
  padding: 4px 14px;
  background: transparent;
  color: var(--tb-muted);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.mode-btn:hover { color: var(--tb-fg); }
.mode-active { background: var(--tb-surface) !important; color: var(--tb-fg) !important; }

/* Toolbar buttons */
.tb-btn {
  padding: 5px 12px;
  background: transparent;
  color: var(--tb-muted);
  border: 1px solid var(--tb-border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.tb-btn:hover { background: rgba(0,0,0,.07); color: var(--tb-fg); }
.tb-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
#btn-pj.active    { background: #8b5cf6; border-color: #8b5cf6; color: white; }
#btn-theme.active { background: #f59e0b; border-color: #f59e0b; color: white; }
#btn-help.active  { background: var(--tb-surface); color: var(--tb-fg); }

#doc-toolbar, #slides-toolbar { display: flex; align-items: center; gap: 6px; }
#doc-toolbar.hidden, #slides-toolbar.hidden { display: none !important; }

.btn-pdf-doc {
  padding: 5px 14px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-pdf-doc:hover { background: #2563eb; }

.btn-present {
  padding: 6px 18px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-present:hover { background: color-mix(in srgb, var(--accent) 80%, #000); }

/* ══ Depot (dans panneau fichiers) ══════════════════════════════════ */
#depot-bar[hidden] { display: none; }
.depot-chemin { font-family: var(--mono, monospace); color: var(--tb-muted, #94a3b8); font-size: .78rem; }
.depot-raison-input {
  flex: 1; min-width: 0;
  padding: .2rem .5rem; font-size: .78rem;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px; color: var(--tb-fg, #f8fafc); outline: none;
}
.depot-raison-input:focus { border-color: var(--accent, #3b82f6); }
.depot-otp-input {
  flex: 1; min-width: 0;
  padding: .2rem .5rem; font-size: .78rem; font-family: monospace; letter-spacing: .05em;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px; color: var(--tb-fg, #f8fafc); outline: none;
}
.depot-otp-input:focus { border-color: var(--accent, #3b82f6); }
.depot-save-btn {
  padding: .2rem .7rem; font-size: .8rem; font-weight: 600;
  background: var(--accent, #3b82f6); color: #fff;
  border: none; border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: opacity .15s;
}
.depot-save-btn:hover:not(:disabled) { opacity: .85; }
.depot-save-btn:disabled { opacity: .55; cursor: default; }

/* ══ Tab bar ════════════════════════════════════════════════════════ */
#tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  padding: 4px 8px 0;
  gap: 2px;
  overflow-x: auto;
  flex-shrink: 0;
  min-height: 34px;
}
#tab-bar::-webkit-scrollbar { height: 3px; }
#tab-bar::-webkit-scrollbar-thumb { background: var(--tb-border); border-radius: 2px; }

#tab-bar .tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  color: var(--tb-muted);
  white-space: nowrap;
  max-width: 200px;
  min-width: 80px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-bottom: none;
  transition: background 0.1s, color 0.1s;
}
#tab-bar .tab:hover { background: rgba(0,0,0,.05); color: var(--tb-fg); }
#tab-bar .tab.active { background: var(--tb-surface); color: var(--tb-fg); border-color: var(--tb-border); }
.tab-name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tab-close {
  background: none; border: none;
  color: var(--tb-mid); cursor: pointer;
  font-size: 11px; padding: 0; line-height: 1;
  opacity: 0; flex-shrink: 0;
}
#tab-bar .tab:hover .tab-close, #tab-bar .tab.active .tab-close { opacity: 1; }
.tab-close:hover { color: var(--tb-fg); }
.tab-new {
  background: none; border: none;
  color: var(--tb-muted); cursor: pointer;
  font-size: 20px; padding: 0 8px;
  align-self: center; line-height: 1;
  transition: color 0.1s; flex-shrink: 0;
}
.tab-new:hover { color: var(--tb-fg); }

/* ══ Panels ═════════════════════════════════════════════════════════ */
#files-panel, #help-panel, #theme-panel, #pj-panel, #fm-panel {
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  flex-shrink: 0;
}

/* Files panel */
#files-panel { padding: 8px 16px; }
.files-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.files-recent-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tb-mid); margin-bottom: 5px;
}
#recent-list { display: flex; gap: 6px; flex-wrap: wrap; }
.recent-entry {
  display: flex; align-items: center; gap: 8px;
  background: var(--tb-surface); border: 1px solid var(--tb-border);
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
  transition: border-color 0.15s; max-width: 240px;
}
.recent-entry:hover { border-color: var(--tb-muted); }
.recent-entry .re-info { flex: 1; min-width: 0; }
.recent-entry .re-name { font-size: 12px; color: var(--tb-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-entry .re-date { font-size: 10px; color: var(--tb-mid); margin-top: 1px; }
.recent-entry .re-del {
  background: none; border: none; color: var(--tb-mid);
  cursor: pointer; font-size: 12px; padding: 0 2px; flex-shrink: 0; line-height: 1;
}
.recent-entry .re-del:hover { color: var(--tb-fg); }
.recent-empty { font-size: 12px; color: var(--tb-mid); }

/* Help panel */
#help-panel { padding: 10px 16px; overflow-x: auto; }
.help-cols { display: flex; gap: 24px; min-width: max-content; }
.help-section { flex-shrink: 0; }
.help-title {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tb-mid); margin-bottom: 5px;
}
.help-table { border-collapse: collapse; }
.help-table td {
  padding: 1px 8px 1px 0; font-size: 11px;
  color: var(--tb-muted); vertical-align: top; white-space: nowrap;
}
.help-table td:first-child { color: var(--tb-fg); }
.help-table code {
  font-family: 'Source Code Pro', 'Menlo', monospace; font-size: 10.5px;
  background: rgba(0,0,0,.08); padding: 0 3px; border-radius: 3px;
}

/* Theme panel */
#theme-panel {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.theme-section { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.theme-section-label {
  font-size: 9px; color: var(--tb-mid);
  text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0; margin-right: 2px;
}
.preset-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.preset-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 2px solid transparent; padding: 0;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.preset-dot:hover { transform: scale(1.25); }
.preset-dot.active { border-color: var(--tb-fg); box-shadow: 0 0 0 1px var(--tb-border); }
.theme-sep {
  width: 1px; height: 30px;
  background: var(--tb-border); margin: 0 6px; flex-shrink: 0;
}
.theme-vsep { width: 1px; height: 22px; background: var(--tb-border); margin: 0 4px; flex-shrink: 0; }
.color-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; flex-shrink: 0; }
.color-pick input[type=color] {
  width: 22px; height: 22px; border: 1px solid var(--tb-border); border-radius: 4px;
  cursor: pointer; padding: 1px; -webkit-appearance: none; appearance: none; background: none;
}
.color-pick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick input[type=color]::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-pick span { font-size: 9px; color: var(--tb-muted); font-family: system-ui; white-space: nowrap; }


/* PJ panel */
#pj-panel {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#pj-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#pj-toolbar label {
  font-size: 12px; color: var(--tb-muted); cursor: pointer;
  padding: 4px 10px; border-radius: 5px; border: 1px solid var(--tb-border);
  transition: all 0.15s;
}
#pj-toolbar label:hover { background: var(--tb-border); color: var(--tb-fg); }
#pj-file-input { display: none; }
#pj-toolbar .pj-hint { font-size: 11px; color: var(--tb-mid); }
#pj-grid { display: flex; flex-wrap: wrap; gap: 6px; }
#pj-panel.drag-over { outline: 2px dashed var(--tb-muted); outline-offset: -4px; }
.pj-entry {
  display: flex; align-items: center; gap: 6px;
  background: var(--tb-bg); border: 1px solid var(--tb-border);
  border-radius: 5px; padding: 4px 8px; font-size: 12px; color: var(--tb-muted);
}
.pj-entry .pj-name { color: var(--tb-fg); font-family: monospace; }
.pj-entry .pj-size { color: var(--tb-mid); font-size: 10px; }
.pj-entry button { background: none; border: none; color: var(--tb-mid); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.pj-entry button:hover { color: var(--tb-fg); }
.pj-empty { font-size: 12px; color: var(--tb-mid); }
.pj-link { color: #3b82f6; text-decoration: underline; cursor: pointer; }
.pj-missing { color: #ef4444; font-style: italic; }

/* Hint diapos */
#doc-hint-row {
  background: var(--tb-surface); border-bottom: 1px solid var(--tb-border);
  padding: 8px 32px; font-size: .75rem; color: var(--tb-mid); flex-shrink: 0;
}
#doc-hint-row.hidden { display: none !important; }
#doc-hint-row code {
  font-family: 'Source Code Pro', monospace; color: var(--tb-muted);
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px;
}

/* ══ Main split ══════════════════════════════════════════════════════ */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ══ Editor ══════════════════════════════════════════════════════════ */
#editor-wrap {
  width: var(--editor-w, 50%);
  min-width: 0; flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--ed-border);
  background: var(--tb-surface);
  overflow: hidden;
}
#editor-wrap.pane-hidden { display: none !important; }
#editor-wrap.pane-solo   { width: 100% !important; border-right: none; }

#editor-hl {
  position: absolute; top: 0; left: 0; width: 100%;
  overflow: visible;
  pointer-events: none; user-select: none;
  font-family: 'Source Code Pro', 'Menlo', monospace;
  font-size: 13px; line-height: 1.7;
  padding: 20px; white-space: pre-wrap; word-break: break-word;
  color: var(--ed-fg); tab-size: 2;
}
#editor {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 20px;
  font-family: 'Source Code Pro', 'Menlo', monospace;
  font-size: 13px; line-height: 1.7;
  border: none; resize: none; outline: none;
  background: transparent; color: transparent; caret-color: var(--ed-caret);
  z-index: 1; tab-size: 2;
  white-space: pre-wrap; word-break: break-word;
}
#editor::placeholder { color: var(--tb-mid); }

/* Split handle */
#split-handle {
  width: 5px; flex-shrink: 0;
  background: var(--tb-border); cursor: col-resize;
  transition: background 0.15s; position: relative; z-index: 1;
}
#split-handle:hover, #split-handle.dragging { background: var(--tb-muted); }
#split-handle.hidden-handle { display: none !important; }

/* Preview wrap */
#preview-wrap {
  flex: 1; min-width: 0; overflow-y: auto; background: white;
}
#preview-wrap.pane-hidden { display: none !important; }

/* Normal preview */
#preview { padding: 40px 24px; }

/* ── Prévisualisation diapo (mode diapos, panneau droit) ── */
#preview-wrap.diapo-wrap { background: var(--fond, #1C3B4A); overflow: hidden; }
#preview.diapo-preview {
  height: 100%; box-sizing: border-box;
  padding: 16px; display: flex; align-items: center; justify-content: center;
}
.slide-preview-wrap {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
}
.slide-preview-wrap .slide-body { flex: 1; min-height: 0; overflow: hidden; }

/* ══ Prose (doc mode) ════════════════════════════════════════════════ */
.prose {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10.5pt; line-height: 1.7;
  color: var(--doc-fg); max-width: 650px; margin: 0 auto;
}
.prose #doc-header {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 1.8em; padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-family: system-ui, sans-serif;
}
.prose #doc-header .dh-main { flex: 1; }
.prose #doc-header .titre { font-size: 15pt; font-weight: bold; line-height: 1.2; }
.prose #doc-header .sous-titre { font-size: 11pt; margin-top: 4px; color: var(--doc-subtle); }
.prose #doc-header .dh-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.prose #doc-header .sous-sous-titre { font-size: 9.5pt; color: var(--doc-subtle); }
.prose #doc-header .auteur { font-size: 9.5pt; color: var(--doc-subtle); font-style: italic; }
.prose #doc-header .date-doc { font-size: 9pt; color: var(--doc-subtle); opacity: 0.7; }
.doc-cover {
  display: flex; justify-content: flex-end; gap: 18px;
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
  font-family: system-ui; font-size: 9pt; color: #475569;
}
.doc-cover .cover-auteur { font-style: italic; }
.doc-cover .cover-date   { color: #94a3b8; }
.doc-cover .cover-public { color: #94a3b8; font-style: italic; }

.prose .toc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 16px; margin-bottom: 1.5em; font-family: system-ui; }
.prose .toc .toc-label { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; margin-bottom: 6px; }
.prose .toc .toc-entry { font-size: 9.5pt; color: #1e293b; line-height: 1.6; }
.prose .toc .toc-h2 { padding-left: 1em; color: #334155; }
.prose .toc .toc-h3 { padding-left: 2em; color: #475569; font-size: 9pt; }

.prose h1 { font-size: 14pt; font-family: system-ui; margin: 1.6em 0 0.5em; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
.prose h2 { font-size: 12pt; font-family: system-ui; margin: 1.3em 0 0.4em; }
.prose h3 { font-size: 11pt; font-family: system-ui; margin: 1em 0 0.3em; }
.prose p { margin: 0.5em 0; }
.prose strong { font-weight: bold; }
.prose em { font-style: italic; }
.prose ul, .prose ol { margin: 0.5em 0; padding-left: 1.6em; }
.prose li { margin: 0.25em 0; }
.prose code {
  font-family: 'Source Code Pro', 'Menlo', monospace; font-size: 8.5pt;
  background: #f1f5f9; padding: 1px 5px; border-radius: 3px; border: 1px solid #e2e8f0;
}
.prose pre {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 14px 18px; overflow-x: auto; margin: 0.8em 0;
}
.prose pre code { background: none; border: none; padding: 0; font-size: 9pt; line-height: 1.6; }
.prose blockquote {
  border-left: 3px solid var(--doc-subtle); padding: 2px 0 2px 1em;
  color: var(--doc-subtle); margin: 0.8em 0;
}
.prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.5em 0; }
.prose a { color: var(--doc-link); }

/* Page break */
.prose .page-break { border: none; border-top: 2px dashed #cbd5e1; margin: 1.5em 0; position: relative; }
.prose .page-break::after {
  content: '+++'; position: absolute; top: -0.65em; left: 50%;
  transform: translateX(-50%); background: white; padding: 0 10px;
  font-size: 8.5pt; color: #94a3b8; font-family: monospace;
}
.a4-body .page-break { display: none; }

/* Code blocks (doc) */
.prose .code-block { margin: 0.8em 0; }
.prose .code-block pre { margin: 0; border-radius: 0 0 6px 6px; border-top: none; }
.code-title-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #e2e8f0; border: 1px solid #e2e8f0; border-radius: 6px 6px 0 0;
  padding: 4px 10px; font-family: 'Source Code Pro', 'Menlo', monospace;
  font-size: 8pt; color: #475569;
}
.code-btn-grp { display: flex; gap: 3px; align-items: center; }
.code-dl-btn {
  background: none; border: 1px solid #94a3b8; border-radius: 4px;
  padding: 1px 7px; font-size: 8pt; line-height: 1.2; color: #475569;
  cursor: pointer; transition: all 0.15s;
}
.code-dl-btn:hover { background: #1e293b; color: white; border-color: #1e293b; }
.code-title-bar span:empty { display: none; }
.code-title-bar:has(span:empty) { justify-content: flex-end; }
@media print { .code-btn-grp { display: none; } }

/* Boîtes doc (prose) */
.prose .slide-box {
  border-left: 4px solid; border-radius: 4px; padding: 10px 14px;
  margin: 0.8em 0; background: #f8fafc;
}
.prose .slide-box .box-title {
  font-family: system-ui; font-weight: 700; font-size: 9pt;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.prose .slide-box .box-body p  { margin: 0.3em 0; }
.prose .slide-box .box-body ul { margin: 0.3em 0; padding-left: 1.4em; }
.prose .slide-box .box-body li { margin: 0.15em 0; }
.prose .box-définition { border-color: var(--bx-définition); }
.prose .box-définition .box-title { color: var(--bx-définition); }
.prose .box-attention  { border-color: var(--bx-attention); }
.prose .box-attention  .box-title { color: var(--bx-attention); }
.prose .box-info       { border-color: var(--bx-info); }
.prose .box-info       .box-title { color: var(--bx-info); }
.prose .box-exemple    { border-color: var(--bx-exemple); }
.prose .box-exemple    .box-title { color: var(--bx-exemple); }
.prose .box-remarque   { border-color: var(--bx-remarque); }
.prose .box-remarque   .box-title { color: var(--bx-remarque); }
.prose .box-solution   { border-color: var(--bx-solution); }
.prose .box-solution   .box-title { color: var(--bx-solution); }

/* Médias doc */
.prose .media-wrap { margin: 0.8em 0; }
.prose .media-img img { max-width: 100%; height: auto; display: block; }
.prose .media-caption { font-size: 9pt; color: var(--doc-subtle); margin-top: 4px; font-style: italic; }

/* Colonnes doc */
.prose .col-wrap { display: flex; gap: 24px; margin: 0.8em 0; align-items: flex-start; }
.prose .col { flex: 1; min-width: 0; }
.prose .col > *:first-child { margin-top: 0; }
.prose .col > *:last-child  { margin-bottom: 0; }

/* Mermaid doc */
.prose .mermaid-wrap { margin: 0.8em 0; overflow-x: auto; }
.prose .mermaid-wrap svg { max-width: 100%; height: auto; }

/* Tableaux doc */
.prose table { border-collapse: collapse; width: 100%; margin: 0.8em 0; font-size: 9.5pt; font-family: system-ui; }
.prose th, .prose td { padding: 5px 10px; text-align: left; }
.prose thead tr { border-bottom: 2px solid var(--accent); }
.prose tbody tr { border-bottom: 1px solid #e2e8f0; }
.prose tbody tr:last-child { border-bottom: none; }
.prose th { font-weight: 700; }
.prose table.table-bordered { border: 1px solid #cbd5e1; }
.prose table.table-bordered th, .prose table.table-bordered td { border: 1px solid #cbd5e1; }
.prose table.table-bordered thead tr { border-bottom: none; background: #f1f5f9; }
.prose table.table-bordered tbody tr { border-bottom: none; }

/* ══ Vue A4 ══════════════════════════════════════════════════════════ */
#a4-view {
  display: flex; flex-direction: column; align-items: center;
  gap: 32px; padding: 36px; background: #4b5563;
  min-height: 100%; transform-origin: top left;
}
.a4-page {
  width: 794px; min-height: 1123px; background: white;
  box-shadow: 0 6px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column; padding: 64px 72px; flex-shrink: 0;
}
.a4-hdr {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--accent);
  margin-bottom: 18px; flex-shrink: 0;
}
.a4-hdr .logo-txt {
  font-size: 10.5pt; font-weight: 800; font-family: system-ui;
  color: var(--a4-logo-color); border: 2px solid var(--a4-logo-color);
  padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; line-height: 1.4;
}
.a4-hdr img.logo-img { height: 34px; width: auto; flex-shrink: 0; }
.a4-hdr .hdr-meta { flex: 1; overflow: hidden; }
.a4-hdr .hdr-matière { font-size: 7pt; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-hdr .hdr-titre { font-size: 10pt; font-weight: 700; font-family: system-ui; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-hdr .hdr-sous-titre { font-size: 8.5pt; font-family: system-ui; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.a4-hdr .hdr-sous-sous-titre { font-size: 7.5pt; font-family: system-ui; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.a4-hdr .hdr-num { font-size: 9pt; font-family: system-ui; color: #64748b; white-space: nowrap; flex-shrink: 0; }
.a4-body { flex: 1; }
.a4-body.prose { max-width: none; margin: 0; }
.a4-ftr {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #e2e8f0;
  display: flex; justify-content: flex-end; align-items: center;
  font-size: 8.5pt; font-family: system-ui; color: #94a3b8;
  flex-shrink: 0; min-height: 28px;
}

/* ══ Syntax highlighting ═════════════════════════════════════════════ */
.hl-fm        { color: var(--tb-mid); }
.hl-fm-delim  { color: var(--hl-accent); font-weight: 700; }
.hl-h1        { color: var(--hl-accent); font-weight: 700; }
.hl-h2        { color: color-mix(in srgb, var(--hl-accent) 70%, var(--ed-fg)); font-weight: 700; }
.hl-h3        { color: color-mix(in srgb, var(--hl-accent) 50%, var(--ed-fg)); font-weight: 600; }
.hl-fence     { color: #81b29a; }
.hl-code      { color: var(--hl-code); }
.hl-pagebreak { color: var(--hl-accent); font-weight: 700; }
.hl-box-définition { color: #3b82f6; }
.hl-box-attention  { color: #f59e0b; }
.hl-box-info       { color: #06b6d4; }
.hl-box-exemple    { color: #22c55e; }
.hl-box-remarque   { color: #8b5cf6; }
.hl-box-solution   { color: #10b981; }
.hl-box-colonnes   { color: #81b29a; }
.hl-box-tableau    { color: #8cc4d6; }
.hl-box-mermaid    { color: #a78bfa; }
.hl-box-centre     { color: #81b29a; }
.hl-bullet    { color: var(--hl-accent); }
.hl-quote     { color: color-mix(in srgb, var(--ed-fg) 45%, transparent); font-style: italic; }
.hl-bold      { color: #e0c8a0; font-weight: 700; }
.hl-italic    { font-style: italic; }
.hl-strike    { opacity: .45; text-decoration: line-through; }
.hl-incode    { color: #81b29a; }
.hl-math      { color: #f0a500; }
.hl-link      { color: var(--doc-link, #60a5fa); }
.hl-pj        { color: #7ecfe8; }
.hl-directive { color: #a78bfa; }
.hl-pause     { color: var(--hl-accent); }
.hl-lead      { color: color-mix(in srgb, var(--hl-accent) 75%, var(--ed-fg)); }
.hl-table     { color: #8cc4d6; }

/* ══ Load modal ══════════════════════════════════════════════════════ */
#load-modal, #depot-push-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
#depot-push-box {
  background: #182530; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  width: min(480px,96vw); padding: 1.2rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: .7rem;
}
#load-box {
  background: #182530; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  width: min(500px,96vw); box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden;
}
#load-box-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#load-box-header h2 { font-size: .95rem; font-weight: 600; color: #fff; }
#load-close {
  background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: color .12s;
}
#load-close:hover { color: #fff; }
#load-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 8px; }
.load-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.5); font-size: .85rem; padding: 10px 14px; cursor: pointer;
  transition: color .15s, border-color .15s; margin-bottom: -1px; font-family: inherit;
}
.load-tab.active { color: #fff; border-bottom-color: var(--accent); }
.load-tab:hover:not(.active) { color: rgba(255,255,255,.8); }
.load-section { padding: 20px; }
.load-section.hidden { display: none; }
.load-url-row { display: flex; gap: 10px; }
#load-url-input {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px; padding: 9px 12px; color: #fff; font-size: .88rem;
  font-family: 'Source Code Pro', monospace; outline: none; transition: border-color .15s;
}
#load-url-input:focus { border-color: var(--accent); }
#load-url-error {
  margin-top: 10px; padding: 9px 12px;
  background: rgba(220,50,50,.15); border: 1px solid rgba(220,50,50,.35);
  border-radius: 6px; color: #f87171; font-size: .82rem; line-height: 1.5;
}
.load-file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 36px 20px; border: 2px dashed rgba(255,255,255,.18);
  border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s;
  color: rgba(255,255,255,.5); text-align: center;
}
.load-file-drop:hover, .load-file-drop.drag-over { border-color: var(--accent); background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
.load-file-drop span { font-size: .88rem; }
#load-url-btn { white-space: nowrap; }

/* btn-primary / btn-ghost (for modals) */
.btn-primary {
  background: var(--accent); color: #fff; border: none; padding: 8px 18px;
  border-radius: 4px; font-family: inherit; font-size: .9rem; cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, #000); }
.btn-ghost {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15); padding: 6px 14px; border-radius: 4px;
  font-family: inherit; font-size: .85rem; cursor: pointer; transition: background .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.18); }

/* ══ PRESENTATION VIEW (overlay) ════════════════════════════════════ */
/* Slide CSS variables scoping */
/* Console presenter : hérite du thème éditeur */
#pres-hdr, #pr-side, #pres-nav, #pr-notes-editor {
  --accent:     var(--ed-caret);
  --fond:       var(--tb-bg);
  --fond-moyen: var(--tb-surface);
  --fond-léger: var(--tb-border);
}

#pres-view {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  flex-direction: column;
  font-family: 'Lato', sans-serif;
}
#pres-view.active { display: flex; }

/* Top header bar */
#pres-hdr {
  height: 46px; min-height: 46px; background: var(--fond);
  border-bottom: 2px solid var(--accent);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 16px; flex-shrink: 0; z-index: 100;
}
#pres-hdr #pr-title { font-size: .88rem; font-weight: 300; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
#pres-hdr #pr-clock { font-family: 'Source Code Pro', monospace; font-size: 1rem; font-weight: 700; letter-spacing: .05em; padding: 3px 10px; border-radius: 5px; background: #1d1d1f; color: #34c759; flex-shrink: 0; }
#pres-hdr button { height: 30px; border-radius: 15px; border: none; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: .82rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; transition: background .15s; }
#pres-hdr button:hover { background: rgba(255,255,255,.22); color: #fff; }
#pres-hdr #btn-quick-edit { width: 30px; padding: 0; }
#pres-hdr #btn-toggle-sidebar { width: 30px; padding: 0; }
#pres-hdr #btn-sync-proj { padding: 0 8px; }
#pres-hdr #btn-edit { background: var(--accent); color: #fff; }
#pres-hdr #btn-edit:hover { background: color-mix(in srgb, var(--accent) 80%, #000); }
#student-badge { display: none; align-items: center; gap: 5px; font-size: .72rem; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 3px 9px; white-space: nowrap; user-select: none; }
.pill-btn { width: auto !important; border-radius: 12px !important; padding: 0 10px !important; font-size: .72rem !important; gap: 5px; white-space: nowrap; }

/* Slide area */
#slide-wrap { flex: 1; position: relative; overflow: hidden; min-height: 0; background: #000; }
#slideshow { position: absolute; inset: 0; overflow: hidden; }
#slide-num {
  display: none; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.65); font-size: .78rem;
  background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 10px;
  pointer-events: none; z-index: 5;
}
#pr-ann-canvas { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#pr-ann-canvas.active { pointer-events: auto; }
#pr-ptr-dot {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%,-50%); pointer-events: none; display: none; z-index: 20;
  background: #ef4444; box-shadow: 0 0 0 3px #ef444440, 0 0 10px 4px #ef444470;
  transition: left .05s linear, top .05s linear;
}

/* Navigation bar */
#pres-nav {
  height: 42px; min-height: 42px; background: var(--accent);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 16px; flex-shrink: 0;
}
#pres-nav .f-author { font-size: .8rem; color: rgba(255,255,255,.85); font-variant: small-caps; letter-spacing: 1px; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
#pres-nav .f-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
#pres-nav .f-right  { display: flex; align-items: center; gap: 6px; min-width: 0; justify-content: flex-end; flex-shrink: 0; }
#pres-nav button { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.2); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; flex-shrink: 0; }
#pres-nav button:hover    { background: rgba(255,255,255,.38); transform: scale(1.1); }
#pres-nav button:disabled { opacity: .3; cursor: default; transform: none !important; }
#progress-wrap { flex: 1; max-width: 260px; height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
#pbar { height: 100%; background: #fff; border-radius: 2px; transition: width .32s ease; }
#pres-nav .f-counter { font-size: .8rem; color: rgba(255,255,255,.75); font-variant: tabular-nums; white-space: nowrap; }

/* Slide element */
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateX(55px); }
.slide.active { opacity: 1; pointer-events: all; transform: translateX(0); transition: opacity .3s ease, transform .3s ease; }
.top-bar { display: flex; height: 48px; min-height: 48px; }
.section-tabs { display: flex; background: var(--fond); }
.section-tabs .tab { display: flex; align-items: center; padding: 0 20px; font-size: 11px; color: var(--gray-text); border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; user-select: none; }
.section-tabs .tab:not(.on):hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.section-tabs .tab.on { background: var(--accent); color: #fff; }
.orange-fill { flex: 1; background: var(--accent); display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; }
.slide-entete { flex: 1; min-width: 0; padding-left: 14px; overflow: hidden; }
.slide-entete-titre { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.slide-entete-sub { font-size: 9px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.slide-logo-bar  { width: auto; object-fit: contain; flex-shrink: 0; display: block; }
.slide-logo-cover { position: absolute; bottom: 24px; right: 28px; width: auto; object-fit: contain; }
.content-row { display: flex; flex: 1; min-height: 0; }
.subnav { width: 210px; min-width: 210px; background: var(--fond-moyen); padding: 20px 0 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sub-item { font-size: 10.5px; color: var(--gray-text); padding: 6px 16px; line-height: 1.4; cursor: pointer; transition: color .12s, background .12s; }
.sub-item:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }
.sub-item.on { color: #fff; font-weight: 700; }
.main-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Slide body */
.slide-body { flex: 1; overflow-y: auto; padding: 48px 56px 32px; background: var(--fond-slide); color: #1e293b; }
.slide-body.cover { background: linear-gradient(135deg, var(--fond) 0%, var(--fond-léger) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; color: #fff; }
.slide-body.cover.has-cover-img { flex-direction: row; gap: 52px; padding: 40px 64px; text-align: left; align-items: center; justify-content: center; }
.slide-body.cover.has-cover-img .cover-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.slide-body.cover.has-cover-img .hero-box { text-align: left; }
.cover-img { max-height: 55%; max-width: 38%; width: auto; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.slide-body.sec-intro { background: var(--accent); display: flex; align-items: flex-end; padding: 48px 56px; color: #fff; }
.slide-body.sec-intro h2 { font-size: 2.2rem; font-weight: 300; color: #fff; }
.slide-body.outro { background: var(--fond); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.outro h2 { font-size: 2rem; font-weight: 300; margin-bottom: 32px; }
.outro ul  { list-style: none; font-size: 1.15rem; line-height: 2.5; color: rgba(255,255,255,.8); }

/* Cover typography */
.hero-box { background: var(--accent); border-radius: 3px; padding: 36px 52px; max-width: 580px; box-shadow: 0 8px 40px rgba(0,0,0,.3); margin-bottom: 32px; }
.c-matière { font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 2px 8px; display: inline-block; margin-bottom: 10px; }
.hero-box h1 { font-size: 2rem; font-weight: 300; color: #fff; line-height: 1.25; }
.hero-box .sub { font-size: 1rem; color: rgba(255,255,255,.88); margin-top: 8px; font-weight: 300; }
.hero-box .subsub { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: 6px; font-weight: 300; font-style: italic; }
.c-author { font-size: 1.1rem; color: rgba(255,255,255,.85); letter-spacing: 2px; font-variant: small-caps; margin-bottom: 6px; }
.c-school  { font-size: .9rem; color: rgba(255,255,255,.55); }

/* Slide content */
.slide-title { font-size: 1.55rem; font-weight: 300; color: var(--fond); margin-bottom: 26px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.slide-body del { text-decoration: line-through; opacity: .55; }
.lead { font-size: 1.05rem; line-height: 1.7; color: #2a2a2a; margin-bottom: 20px; }
ul.bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
ul.bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.6; color: #2a2a2a; }
ul.bullets li::before { content: ''; width: 9px; height: 9px; min-width: 9px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.sub-label { font-size: 1rem; font-weight: 700; color: var(--fond); margin: 20px 0 10px; }
:is(#slideshow, .slide-preview-wrap) pre { font-family: 'Source Code Pro', monospace; font-size: .87rem; background: var(--fond-code); color: #cde; border-radius: 4px; padding: 18px 22px; margin: 16px 0; overflow-x: auto; line-height: 1.7; }
blockquote { border-left: 4px solid var(--accent); padding: 10px 20px; margin: 18px 0; font-style: italic; font-size: 1.05rem; color: #444; background: color-mix(in srgb, var(--accent) 8%, white); border-radius: 0 4px 4px 0; }
.data-table { border-collapse: collapse; width: 100%; max-width: 600px; margin: 16px 0; font-size: .95rem; }
.data-table th { text-align: left; padding: 8px 16px; border-bottom: 2px solid var(--fond); color: var(--fond); font-weight: 700; font-size: .88rem; }
.data-table td { padding: 9px 16px; border-bottom: 1px solid #e0e0e0; }
.data-table tr:last-child td { border-bottom: none; }
.pipeline { font-family: 'Source Code Pro', monospace; font-size: .85rem; background: var(--fond-code); color: #cde; border-radius: 4px; padding: 22px 28px; margin: 16px 0; line-height: 2; }
.pipeline .arrow { color: var(--accent); font-weight: 700; }
.pipeline .lbl   { color: #81b29a; }

/* Progressive reveal */
.step { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.step.shown { opacity: 1; transform: translateY(0); }
#pres-view.no-anim .step { transition: none; }
#pres-view.no-anim #pbar { transition: none; }

/* Mermaid slides */
.mermaid-wrap { margin: 16px 0; text-align: center; }
.mermaid-wrap svg { max-width: 100%; height: auto; }

/* Math */
.katex-display { margin: 1em 0; overflow-x: auto; }
.katex { font-size: 1.05em; }
.math-fallback { font-family: 'Source Code Pro', monospace; opacity: .7; }

/* Code block slides */
:is(#slideshow, .slide-preview-wrap) .code-block,
.code-morph {
  border-radius: 6px; overflow: hidden; margin: 16px 0;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
:is(#slideshow, .slide-preview-wrap) .code-block pre,
.code-morph pre { margin: 0; border-radius: 0; }
.code-title {
  background: var(--accent);
  color: rgba(255,255,255,.9);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 5px 14px; opacity: .95;
}
.code-morph .code-title { display: block; }
.cm-line { display: block; line-height: 1.7; }
pre.with-ln { padding-left: 0; }
pre.with-ln code { counter-reset: ln; display: block; padding: 18px 22px 18px 0; }
pre.with-ln .cm-line { padding-left: 3.8em; position: relative; }
pre.with-ln .cm-line::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 3em; text-align: right; color: rgba(255,255,255,.25); font-size: .82em; line-height: inherit; user-select: none; pointer-events: none; }
.cm-line.cm-removing { background: rgba(255,80,80,.18); opacity: 0; transition: opacity .22s ease, background .15s ease; }
.cm-line.cm-appearing { opacity: 0; background: rgba(80,200,100,.15); }
.cm-line.cm-appearing.cm-appear { opacity: 1; transition: opacity .28s ease; }
.step:has(> .cm-transition) { opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; pointer-events: none; }

/* Boîtes slides */
:is(#slideshow, .slide-preview-wrap) .slide-box { border-radius: 6px; margin: 14px 0; overflow: hidden; border-left: 4px solid; font-size: .95rem; }
.box-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 14px; opacity: .95; }
.box-body { padding: 10px 14px; }
.box-body p  { margin: 0 0 6px; line-height: 1.6; }
.box-body p:last-child { margin-bottom: 0; }
.box-body ul { margin: 4px 0; padding-left: 18px; }
.box-body li { margin-bottom: 4px; line-height: 1.5; }
.box-définition { --bx: var(--bx-définition); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-définition .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-définition .box-title::before { content: '📖 '; }
.box-attention { --bx: var(--bx-attention); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-attention .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-attention .box-title::before { content: '⚠ '; }
.box-info { --bx: var(--bx-info); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-info .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-info .box-title::before { content: 'ℹ '; }
.box-exemple { --bx: var(--bx-exemple); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-exemple .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-exemple .box-title::before { content: '▶ '; }
.box-remarque { --bx: var(--bx-remarque); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-remarque .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-remarque .box-title::before { content: '💡 '; }
.box-solution { --bx: var(--bx-solution); border-color: var(--bx); background: color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-solution .box-title { background: color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color: color-mix(in srgb,var(--bx) 80%,#000); }
.box-solution .box-title::before { content: '✓ '; }

/* Media blocks slides */
.media-wrap { margin: 14px 0; }
.media-wrap img   { max-width: 100%; max-height: 300px; border-radius: 4px; object-fit: contain; display: block; }
.media-wrap video { max-width: 100%; max-height: 300px; border-radius: 4px; display: block; }
.media-wrap audio { width: 100%; max-width: 480px; display: block; }
.media-wrap iframe { width: 100%; aspect-ratio: 16/9; max-height: 300px; border: none; border-radius: 4px; display: block; }
.media-img, .media-audio { display: flex; flex-direction: column; align-items: center; }
.media-video { display: flex; justify-content: center; }
.media-caption { font-size: .78rem; color: #888; margin-top: 6px; text-align: center; font-style: italic; }
.inline-img   { max-height: 1.3em; vertical-align: middle; object-fit: contain; }
.inline-media { height: 1.3em; vertical-align: middle; }

/* Columns slides */
.col-wrap { display: flex; gap: 28px; width: 100%; margin: 8px 0; align-items: flex-start; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.col .media-wrap { margin: 6px 0; }
.media-centre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 8px 0; }

/* Grid overlay */
#grid-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(14,24,32,.97); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#grid-overlay.open { opacity: 1; pointer-events: all; }
#grid-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
#grid-title { font-size: .9rem; color: rgba(255,255,255,.55); font-variant: small-caps; letter-spacing: 2px; }
#grid-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
#grid-close:hover { background: var(--accent); }
#grid-cells { flex: 1; overflow-y: auto; padding: 20px 24px 24px; display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; align-content: start; }
.grid-cell { border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid rgba(255,255,255,.08); transition: border-color .18s, transform .18s, box-shadow .18s; box-shadow: 0 3px 10px rgba(0,0,0,.5); background: #1a2a35; display: flex; flex-direction: column; }
.grid-cell:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.6); border-color: rgba(255,255,255,.3); }
.grid-cell.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent),0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.grid-cell.done-cell { border-color: rgba(100,200,100,.5); }
.gc-preview { width: 100%; position: relative; overflow: hidden; background: #fff; flex-shrink: 0; }
.gc-clone { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
.gc-clone .step { opacity: 1!important; transform: none!important; transition: none!important; }
.gc-clone .slide { opacity: 1!important; transform: none!important; position: relative!important; pointer-events: none!important; }
.gc-label-bar { padding: 6px 10px 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: rgba(255,255,255,.04); }
.gc-label-text { font-size: 10px; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.gc-label-num  { font-size: 9px; color: rgba(255,255,255,.3); font-variant: tabular-nums; flex-shrink: 0; }
.gc-done-badge { font-size: 9px; color: rgba(100,220,100,.85); font-weight: 700; flex-shrink: 0; }

/* PDF overlay */
#pdf-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(14,24,32,.85); backdrop-filter: blur(4px); align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
#pdf-overlay.active { display: flex; }
#pdf-overlay p { color: #fff; font-size: 1rem; font-weight: 300; letter-spacing: .5px; }
.pdf-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quick edit */
#qe-overlay { position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
#qe-overlay[hidden] { display: none !important; }
#qe-panel { width: 100%; height: var(--qe-h, 48vh); max-height: calc(100vh - 60px); background: #111c24; border-top: 2px solid var(--accent); display: flex; flex-direction: column; animation: qe-up .18s ease; }
#qe-resize { height: 7px; flex-shrink: 0; cursor: row-resize; background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; user-select: none; }
#qe-resize::after { content: ''; width: 36px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .15s; }
#qe-resize:hover::after, #qe-resize.dragging::after { background: var(--accent); }
@keyframes qe-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
#qe-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; gap: 12px; }
#qe-title { font-size: .82rem; color: rgba(255,255,255,.65); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qe-hint { font-size: .7rem; color: rgba(255,255,255,.3); white-space: nowrap; }
.qe-actions .btn-ghost { padding: 5px 12px; font-size: .8rem; }
#qe-textarea { flex: 1; resize: none; border: none; outline: none; min-height: 0; background: #0d1721; color: #c8d8e0; font-family: 'Source Code Pro', monospace; font-size: .88rem; line-height: 1.75; padding: 16px 28px; tab-size: 2; white-space: pre; }
#qe-textarea::selection { background: rgba(100,180,220,.3); }

/* Presenter sidebar */
#pr-body { flex: 1; display: grid; min-height: 0; grid-template-columns: 1fr 300px; grid-template-rows: 1fr; overflow: hidden; }
#pr-body.no-sidebar { grid-template-columns: 1fr; }
#pr-body.no-sidebar #pr-side { display: none; }
#pr-main { display: flex; flex-direction: column; overflow: hidden; }
#pr-side { background: var(--fond); border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
.pr-card { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.pr-card-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.4); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.pr-card.collapsible .pr-card-label { cursor: pointer; user-select: none; margin-bottom: 0; }
.pr-card.collapsible .pr-card-body  { display: none; margin-top: 8px; }
.pr-card.collapsible.open .pr-card-body { display: block; }
.pr-chevron { transition: transform .2s; display: inline-block; font-style: normal; font-size: .8rem; }
.pr-card.collapsible.open .pr-chevron { transform: rotate(90deg); }
#pr-preview-next-wrap { background: #0a1218; border-radius: 4px; overflow: hidden; }
#pr-preview-next { position: relative; overflow: hidden; }
.pr-pag { font-size: 1.2rem; font-weight: 700; text-align: center; color: #fff; padding: 4px 0; letter-spacing: .03em; }
.pr-nav-row { display: flex; gap: 6px; margin-top: 8px; }
.pr-nav-row .btn-ghost { flex: 1; text-align: center; justify-content: center; padding: 7px 8px; font-size: .82rem; }
.pr-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.pr-tools .btn-ghost { padding: 6px 10px; font-size: .8rem; }
.pr-tools .btn-ghost.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pr-swatches { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.pr-swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; flex-shrink: 0; }
.pr-swatch.on    { outline-color: var(--accent); }
.pr-swatch:hover { outline-color: rgba(255,255,255,.5); }
.pr-swatch.on:hover { outline-color: var(--accent); }
.pr-size-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pr-size-row span { font-size: .72rem; color: var(--gray-text); }
.pr-size-row input[type=range] { flex: 1; accent-color: var(--accent); }
.pr-size-val { font-size: .72rem; color: var(--gray-text); min-width: 20px; text-align: right; }
#pr-plan { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; gap: 1px; }
.pr-plan-special { font-size: .72rem; color: rgba(255,255,255,.4); padding: 3px 8px; cursor: pointer; border-radius: 3px; transition: background .12s, color .12s; }
.pr-plan-special:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.pr-plan-special.on { color: var(--accent); font-weight: 700; }
.pr-plan-sec { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.75); padding: 5px 8px 2px; cursor: pointer; border-radius: 3px; margin-top: 4px; transition: background .12s; }
.pr-plan-sec:first-child { margin-top: 0; }
.pr-plan-sec:hover { background: rgba(255,255,255,.08); }
.pr-plan-sec.on { color: var(--accent); }
.pr-plan-slide { font-size: .72rem; color: rgba(255,255,255,.45); padding: 2px 8px 2px 18px; cursor: pointer; border-radius: 3px; transition: background .12s, color .12s; }
.pr-plan-slide:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); }
.pr-plan-slide.on { color: var(--accent); font-weight: 600; }
.pr-notes-text { white-space: pre-wrap; font-size: .8rem; line-height: 1.6; max-height: 150px; overflow-y: auto; color: rgba(255,255,255,.8); }
.pr-notes-empty { color: var(--gray-text); font-style: italic; }
.pr-sw-display { font-family: 'Source Code Pro', monospace; font-size: 1.3rem; font-weight: 700; text-align: center; padding: 8px; border-radius: 6px; background: #1d1d1f; color: #34c759; letter-spacing: .08em; margin-bottom: 8px; }
.pr-sw-row { display: flex; gap: 6px; }
.pr-sw-row .btn-ghost { flex: 1; text-align: center; justify-content: center; padding: 6px 6px; font-size: .78rem; }

/* Notes editor modal */
#pr-notes-editor { position: fixed; inset: 0; z-index: 600; background: #0e1820; overflow-y: auto; padding: 24px; display: none; }
#pr-notes-editor.visible { display: block; }
.pr-ne-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pr-ne-header h2 { font-size: 1rem; font-weight: 600; color: #fff; }
.pr-ne-entry { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.pr-ne-entry .ne-lbl { width: 160px; padding: 7px 10px; font-size: .78rem; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-family: 'Source Code Pro', monospace; }
.pr-ne-entry textarea { flex: 1; height: 68px; resize: vertical; padding: 7px 10px; font-size: .82rem; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(255,255,255,.07); color: #fff; font-family: inherit; outline: none; }
.pr-ne-entry textarea:focus { border-color: var(--accent); }

/* Media manager (dans le panneau PJ) */
.media-empty { width: 100%; text-align: center; color: var(--gray-text); font-size: .88rem; padding: 40px 0; line-height: 2; }
.media-card { width: 160px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.media-card:hover { border-color: rgba(255,255,255,.22); }
.media-preview { height: 90px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); overflow: hidden; }
.media-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.media-type-icon { font-size: 2rem; opacity: .6; user-select: none; }
.media-info { padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.media-name { font-size: .76rem; font-weight: 600; color: #c8d8e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 3px; padding: 1px 2px; transition: background .12s; }
.media-name:hover { background: rgba(255,255,255,.1); }
.media-meta { font-size: .68rem; color: var(--gray-text); }
.media-actions { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; }
.media-btn { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); border-radius: 4px; font-size: .8rem; padding: 4px 6px; cursor: pointer; text-align: center; transition: background .12s; }
.media-btn:hover { background: rgba(255,255,255,.16); }
.media-btn-del:hover { background: rgba(220,38,38,.3); border-color: rgba(220,38,38,.5); color: #fca5a5; }
.media-rename-input { width: 100%; background: rgba(0,0,0,.4); border: 1px solid var(--accent); color: #fff; border-radius: 3px; padding: 2px 4px; font-size: .76rem; font-family: inherit; outline: none; }
.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* Slides PDF print */
@media print {
  html, body { height: auto !important; overflow: visible !important; display: block !important; }
  body > *:not(#pres-view) { display: none !important; }
  #pres-view.pdf-printing { display: block !important; height: auto !important; }
  #pres-view.pdf-printing #pres-hdr,
  #pres-view.pdf-printing #pres-nav,
  #pres-view.pdf-printing #pr-side,
  #pres-view.pdf-printing #grid-overlay,
  #pres-view.pdf-printing #pr-ann-canvas,
  #pres-view.pdf-printing #pr-ptr-dot,
  #pres-view.pdf-printing #slide-num { display: none !important; }
  #pres-view.pdf-printing #pr-body,
  #pres-view.pdf-printing #pr-main { display: block !important; height: auto !important; }
  #pres-view.pdf-printing #slide-wrap { display: block !important; height: auto !important; overflow: visible !important; position: static !important; }
  #pres-view.pdf-printing #slideshow { position: static !important; height: auto !important; overflow: visible !important; }
  #pres-view.pdf-printing .slide { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; transition: none !important; overflow: hidden !important; page-break-after: always !important; break-after: page !important; break-inside: avoid !important; }
  #pres-view.pdf-printing .slide[data-pdf-skip] { display: none !important; }
  #pres-view.pdf-printing .step { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pres-view.pdf-printing .cm-transition { display: none !important; }
  *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* FM panel */
#fm-panel {
  padding: 8px 0 8px 16px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
#fm-groups {
  display: flex;
  align-items: flex-start;
  flex: 1;
  overflow-x: auto;
  gap: 0;
  padding-bottom: 2px;
}
.fm-vsep { width: 1px; height: 44px; background: var(--tb-border); margin: 0 10px; flex-shrink: 0; align-self: center; }
.fm-group { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.fm-group-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tb-mid); margin-bottom: 2px;
}
.fm-field { display: flex; align-items: center; gap: 4px; }
.fm-label { font-size: 10px; color: var(--tb-muted); min-width: 56px; flex-shrink: 0; }
.fm-del {
  background: none; border: none; color: var(--tb-mid);
  cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.fm-del:hover { color: var(--tb-fg); }
.fm-input-color {
  width: 22px; height: 22px; border: 1px solid var(--tb-border);
  border-radius: 4px; cursor: pointer; padding: 1px;
  -webkit-appearance: none; appearance: none; background: none;
}
.fm-input-color::-webkit-color-swatch-wrapper { padding: 0; }
.fm-input-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.fm-input-select {
  background: var(--tb-surface); border: 1px solid var(--tb-border);
  color: var(--tb-fg); font-size: 11px;
  padding: 2px 4px; border-radius: 4px; cursor: pointer;
}
.fm-input-text, .fm-input-number {
  background: var(--tb-surface); border: 1px solid var(--tb-border);
  color: var(--tb-fg); font-size: 11px;
  padding: 2px 6px; border-radius: 4px; width: 110px;
}
.fm-input-number { width: 60px; }
.fm-input-text:focus, .fm-input-number:focus, .fm-input-select:focus {
  outline: none; border-color: var(--accent);
}
.fm-range-wrap { display: flex; align-items: center; gap: 4px; }
.fm-input-range { width: 80px; cursor: pointer; accent-color: var(--accent); }
.fm-range-val { font-size: 10px; color: var(--tb-muted); min-width: 24px; }
.fm-add-zone { position: relative; flex-shrink: 0; align-self: center; padding: 0 16px 0 10px; }
#fm-add-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--tb-bg); border: 1px solid var(--tb-border);
  border-radius: 6px; padding: 6px; min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto;
}
.fm-add-section { display: flex; flex-direction: column; gap: 1px; }
.fm-add-cat {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tb-mid); padding: 5px 6px 2px;
}
.fm-add-item {
  background: none; border: none; color: var(--tb-muted); font-size: 11px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer; text-align: left;
}
.fm-add-item:hover { background: var(--tb-surface); color: var(--tb-fg); }
.fm-add-empty { font-size: 11px; color: var(--tb-mid); padding: 6px 8px; }

/* Doc PDF print */
@page { size: A4; margin: 0; }
@media print {
  body.a4-active #toolbar, body.a4-active #tab-bar, body.a4-active #pj-panel,
  body.a4-active #editor-wrap, body.a4-active #split-handle { display: none !important; }
  body.a4-active { display: block !important; height: auto !important; }
  body.a4-active #main { display: block !important; height: auto !important; overflow: visible; }
  body.a4-active #preview-wrap { overflow: visible; flex: none; height: auto; }
  body.a4-active #preview-wrap { background: white; }
  body.a4-active #a4-view { background: none !important; padding: 0 !important; gap: 0 !important; zoom: 1 !important; transform: none !important; }
  body.a4-active .a4-page { box-shadow: none !important; min-height: unset; height: 297mm; }
}