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

/* Thème par défaut : bleu */
:root {
  --tb-bg:      #16243d;
  --tb-surface: #1e3050;
  --tb-border:  #2b4368;
  --tb-muted:   #8fa9cf;
  --tb-mid:     #5878a6;
  --tb-fg:      #ffffff;
  --ed-fg:      #e4ecf7;
  --ed-caret:   #4d9cff;
  --ed-border:  #2b4368;
  --accent:     #3b82f6;

  --hl-accent:  #4d9cff;
  --hl-code:    #9fc5d0;
}

/* Sarcelle / orange (thème historique) */
:root[data-theme="sarcelle"] {
  --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;
  --accent:     #D4511A;
  --hl-accent:  #D4511A;
  --hl-code:    #9fc5d0;
}

/* Ardoise / cyan */
:root[data-theme="ardoise"] {
  --tb-bg:      #1e2228;
  --tb-surface: #272c34;
  --tb-border:  #363c45;
  --tb-muted:   #9aa6b2;
  --tb-mid:     #5b6673;
  --tb-fg:      #f1f5f9;
  --ed-fg:      #e2e8f0;
  --ed-caret:   #22d3ee;
  --ed-border:  #363c45;
  --accent:     #06b6d4;
  --hl-accent:  #22d3ee;
  --hl-code:    #93c5b5;
}

/* Clair (papier) */
:root[data-theme="clair"] {
  --tb-bg:      #e9ecf1;
  --tb-surface: #f4f6f9;
  --tb-border:  #cdd5e0;
  --tb-muted:   #5a6b80;
  --tb-mid:     #93a1b3;
  --tb-fg:      #1c2733;
  --ed-fg:      #1c2733;
  --ed-caret:   #2563eb;
  --ed-border:  #cdd5e0;
  --accent:     #2563eb;
  --hl-accent:  #2563eb;
  --hl-code:    #0f766e;
}
/* Couleurs de coloration à assombrir sur fond clair */
:root[data-theme="clair"] .hl-fence,
:root[data-theme="clair"] .hl-reponse { color: #7c3aed; }
:root[data-theme="clair"] .hl-bold    { color: #b45309; }
:root[data-theme="clair"] .hl-mermaid { color: #047857; }
:root[data-theme="clair"] .hl-annot   { color: #64748b; }
:root[data-theme="clair"] .hl-token   { color: #b45309; }

html, body {
  height: 100vh;
  font-family: 'Source Code Pro', monospace;
  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;
}
.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;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.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); }
.tb-select {
  padding: 5px 8px;
  background: var(--tb-surface);
  color: var(--tb-fg);
  border: 1px solid var(--tb-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.tb-select:hover { border-color: var(--tb-muted); }
.pts-badge {
  padding: 4px 10px;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--tb-fg);
  font-family: inherit;
  flex-shrink: 0;
}
.btn-pdf {
  background: #3b82f6;
  color: white !important;
  border-color: #3b82f6 !important;
  font-weight: 600;
}
.btn-pdf:hover { background: #2563eb !important; }

/* ══ Help panel ═════════════════════════════════════════════════ */
#help-panel {
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  padding: 10px 16px;
  overflow-x: auto;
  flex-shrink: 0;
}
.help-cols { display: flex; gap: 32px; 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: 2px 8px 2px 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', monospace; font-size: 10.5px;
  background: rgba(0,0,0,.12); padding: 0 4px; border-radius: 3px;
}

/* ══ Pièces jointes ═════════════════════════════════════════════ */
#pj-panel {
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  padding: 12px 16px;
  flex-shrink: 0;
}
.pj-drop {
  display: block;
  border: 1.5px dashed var(--tb-border);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  color: var(--tb-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.pj-drop:hover, .pj-drop.pj-drag {
  border-color: var(--accent);
  color: var(--tb-fg);
  background: rgba(0,0,0,.12);
}
#pj-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pj-empty { color: var(--tb-mid); font-size: 12px; }
.pj-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: 5px;
  padding: 4px 8px;
}
.pj-key {
  font-family: 'Source Code Pro', monospace; font-size: 11.5px;
  color: var(--tb-fg); background: rgba(0,0,0,.18);
  padding: 1px 5px; border-radius: 3px;
}
.pj-meta { flex: 1; color: var(--tb-mid); font-size: 10.5px; }
.pj-del {
  background: transparent; border: none; color: var(--tb-muted);
  cursor: pointer; font-size: 13px; padding: 0 4px; line-height: 1;
}
.pj-del:hover { color: var(--accent); }
.pj-syntax { margin-top: 10px; color: var(--tb-muted); font-size: 11px; }
.pj-syntax code {
  font-family: 'Source Code Pro', monospace; font-size: 10.5px;
  background: rgba(0,0,0,.18); padding: 0 4px; border-radius: 3px; color: var(--tb-fg);
}

/* ══ Main split — position absolute, le plus fiable ═════════════ */
#main {
  position: relative;
  flex: 1;
  height: 0;      /* Firefox : sans ça flex:1 ne borne pas la hauteur */
  min-height: 0;
  overflow: hidden;
}

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

#editor-hl {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; user-select: none;
  font-family: 'Source Code Pro', 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', 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 {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--editor-w, 45%);
  width: 5px;
  background: var(--tb-border); cursor: col-resize;
  transition: background 0.15s;
  z-index: 2;
}
#split-handle:hover, #split-handle.dragging { background: var(--tb-muted); }
#split-handle.hidden-handle { display: none !important; }

#preview-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: calc(var(--editor-w, 45%) + 5px);
  overflow-y: auto;
}
#preview-wrap.pane-hidden { display: none !important; }
#preview-wrap.pane-solo   { left: 0; }

/* ══ Syntax highlight ════════════════════════════════════════════ */
.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: #a78bfa; }
.hl-code     { color: var(--hl-code); }
.hl-bold     { color: #e0c8a0; font-weight: 700; }
.hl-italic   { font-style: italic; }
.hl-bullet   { color: var(--hl-accent); }
.hl-pagebreak { color: var(--hl-accent); font-weight: 700; }
.hl-reponse  { color: #a78bfa; font-weight: 600; }
.hl-mermaid  { color: #6ee7b7; }
.hl-annot    { color: #94a3b8; font-style: italic; }
.hl-token    { color: #fbbf24; font-weight: 600; }

/* ══ Preview ═════════════════════════════════════════════════════ */
#preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 36px;
}

/* ══ En-tête examen ══════════════════════════════════════════════ */
.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid #333;
  margin-bottom: 28px;
}
.exam-date { font-weight: 700; }

/* ══ Page de garde ═══════════════════════════════════════════════ */
.garde-title {
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14pt;
  font-weight: 400;
  padding: 8px 0;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  margin: 60px 0 40px;
}

.garde-anon-wrap {
  margin-bottom: 32px;
}
.garde-anon-text {
  font-size: 10.5pt;
  margin-bottom: 10px;
}
.garde-anon-box {
  width: 100%;
  height: 80px;
  background: #e8e8e8;
  border: 1px solid #bbb;
}
.sc { font-variant: small-caps; }

.garde-copie-nom {
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  letter-spacing: 0.06em;
  padding: 8px 0;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin: 32px 0;
}

.garde-info-box {
  border: 1.5px solid #555;
  padding: 10px 16px 14px;
  margin: 20px 0;
  font-size: 10.5pt;
  line-height: 1.65;
}
.garde-info-box ul {
  margin: 6px 0 0 0;
  padding-left: 1.1em;
  list-style: none;
}
.garde-info-box li {
  margin-bottom: 4px;
}
/* Retrait suspendu : le tiret « pend » dans le padding du <ul>, le texte coule
   normalement (pas de display:flex, qui scinderait <strong>/texte en colonnes). */
.garde-info-box li::before {
  content: '-';
  display: inline-block;
  width: 1.1em;
  margin-left: -1.1em;
}

.garde-attention {
  border: 1.5px solid #555;
  padding: 8px 14px;
  font-size: 10.5pt;
  line-height: 1.6;
  margin-top: 12px;
}

.garde-blanche-text {
  font-size: 10.5pt;
  margin-top: auto;
  margin-bottom: auto;
}

/* ══ Corps de l'examen ═══════════════════════════════════════════ */
.exam-body-content {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  line-height: 1.65;
  color: #1a1a1a;
}
.exam-body-content p { margin: 0.5em 0; text-align: justify; }
.exam-body-content strong { font-weight: 700; }
.exam-body-content em { font-style: italic; }
.exam-body-content ul, .exam-body-content ol {
  margin: 0.5em 0;
  padding-left: 2em;
}
.exam-body-content li { margin: 0.3em 0; }
.exam-body-content code {
  font-family: 'Source Code Pro', monospace;
  font-size: 9pt;
  background: #f0f0f0;
  padding: 1px 4px;
  border-radius: 2px;
}
.exam-body-content pre {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: 'Source Code Pro', monospace;
  font-size: 9pt;
  overflow-x: auto;
  margin: 0.8em 0;
}
.exam-body-content pre code { background: none; padding: 0; }
.exam-body-content img { max-width: 100%; height: auto; display: block; margin: 0.6em auto; }

/* Titres style académique */
.exam-body-content h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14pt;
  font-weight: 700;
  margin: 1.6em 0 0.5em;
  padding-bottom: 2px;
}
.exam-body-content h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 12pt;
  font-weight: 700;
  margin: 1.3em 0 0.4em;
}
.exam-body-content h3 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11.5pt;
  font-weight: 700;
  margin: 1em 0 0.3em;
}

/* ══ Annotations barème/temps ════════════════════════════════════ */
.annot {
  font-size: 9pt;
  font-weight: 400;
  font-style: italic;
  color: #666;
  white-space: nowrap;
}
.exam-body-content h1 .annot,
.exam-body-content h2 .annot,
.exam-body-content h3 .annot {
  float: right;
  margin-left: 1em;
  font-size: 10pt;
}

/* ══ Zone de réponse ═════════════════════════════════════════════ */
.reponse-wrap { margin: 0.6em 0 1em; }

.reponse-label-bar {
  background: #d8d8d8;
  border: 1px solid #aaa;
  border-bottom: none;
  padding: 3px 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 10.5pt;
  font-weight: 700;
}

.reponse-box {
  border: 1px solid #aaa;
  padding: 4px 10px 4px;
  background: white;
}

.reponse-ligne {
  height: 22px;
  border-bottom: 1px dotted #999;
}
.reponse-ligne:last-child { border-bottom: none; }

/* ══ Dépassement de page ═════════════════════════════════════════ */
.page-overflow {
  outline: 3px solid #ef4444;
  outline-offset: -3px;
}
.page-overflow::after {
  content: '⚠ Dépassement';
  position: absolute;
  bottom: 6px;
  right: 10px;
  background: #ef4444;
  color: white;
  font-size: 8.5pt;
  font-family: 'Source Code Pro', monospace;
  padding: 2px 7px;
  border-radius: 3px;
  pointer-events: none;
}

/* ══ Brouillon ═══════════════════════════════════════════════════ */
.brouillon-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.brouillon-title {
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  color: #bbb;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
}

/* ══ Mermaid diagrams ════════════════════════════════════════════ */
.mermaid { margin: 0.8em 0; text-align: center; }
.mermaid svg { max-width: 100%; height: auto; }

/* ══ Preview background ══════════════════════════════════════════ */
#preview-wrap { background: #4b5563; }

.a4-page {
  width: 794px;
  min-height: 1123px;
  background: white;
  color: #1a1a1a;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  line-height: 1.55;
  box-shadow: 0 6px 32px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  padding: 56px 64px;
  flex-shrink: 0;
  position: relative;
}

.a4-page .exam-header { margin-bottom: 0; }

.a4-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.a4-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #ccc;
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 9.5pt;
  color: #666;
  flex-shrink: 0;
}
.exam-header--qr { align-items: center; }
.qr-cell  { flex-shrink: 0; text-align: center; }
.qr-svg svg { width: 48px; height: 48px; display: block; margin: 0 auto; }
.qr-label {
  font-family: 'Source Code Pro', monospace;
  font-size: 5.5pt;
  color: #555;
  text-align: center;
  margin-top: 1px;
  letter-spacing: 0.03em;
}

/* Pages de garde A4 */
.a4-page .garde-title { margin: 24px 0 20px; }
.a4-page .garde-anon-wrap { margin-bottom: 20px; }
.a4-page .garde-anon-box { height: 120px; }
.a4-page .garde-blanche-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prévisualisation : une seule copie visible */
.a4-page[data-copy]:not([data-copy="1"]) { display: none; }

/* ══ Print ════════════════════════════════════════════════════════ */
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { display: block !important; height: auto !important; overflow: visible !important; }
  #toolbar, #help-panel, #editor-wrap, #split-handle { display: none !important; }
  #main, #preview-wrap, #preview {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
    gap: 0 !important;
    left: 0 !important;
  }
  .a4-page {
    box-shadow: none !important;
    width: 210mm !important;
    height: 297mm !important;
    min-height: unset !important;
    padding: 18mm 20mm !important;
    page-break-after: always;
    break-after: page;
    position: relative !important;
  }
  .a4-page:last-child { page-break-after: auto; break-after: auto; }
  .a4-page[data-copy] { display: flex !important; }

  *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}