/* ==========================================================================
   doc.css — styles du mode « document » (mémoire technique) Terideal.
   Fichier AUTONOME : chargé par public/index.html (rendu à l'écran) ET inliné
   par le serveur dans la page d'export PDF (/api/export-pdf). Ne dépend pas
   de styles.css : les variables de charte nécessaires sont (re)définies ici,
   à l'identique.
   ========================================================================== */

:root {
  --doc-brand-nuit: #4a0e1a;
  --doc-brand: #9b172d;
  --doc-brand-vif: #c9364e;
  --doc-creme: #f6f5f0;
  --doc-creme-fonce: #eeece4;
  --doc-encre: #241712;
  --doc-encre-doux: #575756;
  --doc-encre-pale: #8f8d8a;
  --doc-trait: #e3e1d8;
  --doc-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --doc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --doc-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- Feuille A4 ----------------------------------------------------------- */

.doc-sheet {
  background: #fff;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 62px) clamp(28px, 5vw, 66px) clamp(40px, 5vw, 70px);
  border: 1px solid var(--doc-trait);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(74, 14, 26, .05), 0 18px 44px rgba(74, 14, 26, .10);
  color: var(--doc-encre);
  font-family: var(--doc-sans);
  font-size: .98rem;
  line-height: 1.62;
}

/* --- En-tête : logo + titre du marché ------------------------------------- */

.doc-header {
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--doc-brand);
}
.doc-header .doc-logo,
.doc-header .doc-logo svg,
.doc-header img.doc-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}
.doc-kicker {
  margin: 0 0 6px;
  font-family: var(--doc-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--doc-encre-doux);
}
.doc-title {
  margin: 0;
  font-family: var(--doc-serif);
  font-weight: 400;
  font-size: 1.72rem;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--doc-brand-nuit);
}

/* --- Corps du document ---------------------------------------------------- */

.doc-body p { margin: 0 0 1em; }
.doc-body strong { color: var(--doc-brand-nuit); font-weight: 650; }

.doc-body h1, .doc-body h2 {
  position: relative;
  margin: 1.9em 0 .9em;
  padding-bottom: .45em;
  font-family: var(--doc-serif);
  font-weight: 400;
  font-size: 1.42rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--doc-brand);
}
.doc-body h1::after, .doc-body h2::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 42px; height: 2px;
  background: var(--doc-brand-vif);
}
.doc-body > h2:first-child, .doc-body section > h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 1.6em 0 .5em; font-size: 1.04rem; font-weight: 700; color: var(--doc-brand-nuit); }
.doc-body h4 {
  margin: 1.4em 0 .4em;
  font-family: var(--doc-mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--doc-encre-doux); font-weight: 500;
}

.doc-body ul, .doc-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.doc-body li { margin-bottom: .45em; }
.doc-body li::marker { color: var(--doc-brand-vif); }

.doc-body blockquote {
  margin: 1.2em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 2px solid var(--doc-brand-vif);
  font-family: var(--doc-serif);
  font-style: italic;
  color: var(--doc-encre-doux);
}
.doc-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--doc-trait); }

.doc-body .table-wrap, .doc-body .tableWrapper { overflow-x: auto; margin: 0 0 1.2em; }
.doc-body table {
  width: 100%;
  margin: 0 0 1.2em;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.45;
}
.doc-body th, .doc-body td {
  border: 1px solid var(--doc-trait);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-body th p, .doc-body td p { margin: 0; }
.doc-body th {
  background: var(--doc-creme);
  font-family: var(--doc-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--doc-brand);
}
.doc-body tbody tr:nth-child(even) { background: rgba(36, 23, 18, .018); }

/* --- Encart [PHOTO : …] --------------------------------------------------- */

.photo-slot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 1.2em 0;
  padding: 16px 18px;
  background: var(--doc-creme);
  border: 2px dashed var(--doc-trait);
  border-radius: 8px;
  color: var(--doc-encre-doux);
}
.photo-slot-ico { font-size: 1.35rem; line-height: 1; flex: none; }
.photo-slot-txt { font-style: italic; font-size: .92rem; line-height: 1.5; }
.photo-slot-inline {
  display: inline-block;
  padding: .05em .5em;
  background: var(--doc-creme);
  border: 1px dashed var(--doc-trait);
  border-radius: 6px;
  font-style: italic;
  font-size: .92em;
  color: var(--doc-encre-doux);
}

/* --- Barre d'actions + toolbar d'édition (écran uniquement) ---------------- */

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto 14px;
}
.doc-edit-hint {
  font-family: var(--doc-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--doc-encre-doux);
}
.doc-edit-hint::before { content: '✎ '; color: var(--doc-brand); }

.doc-toolbar {
  position: sticky;
  top: 74px;
  z-index: 30;
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--doc-trait);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(74, 14, 26, .05), 0 10px 28px rgba(74, 14, 26, .08);
}
.doc-toolbar button {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--doc-encre-doux);
  cursor: pointer;
}
.doc-toolbar button:hover { background: var(--doc-creme); color: var(--doc-brand-nuit); }
.doc-toolbar button.on { background: var(--doc-creme-fonce); color: var(--doc-brand); border-color: var(--doc-trait); }

/* --- Édition (Tiptap ou repli contenteditable) ----------------------------- */

.doc-body .ProseMirror { outline: none; }
.doc-body[contenteditable='true'] { outline: none; }
.doc-body .ProseMirror-selectednode { outline: 2px solid var(--doc-brand-vif); outline-offset: 2px; }
.doc-body .ProseMirror .photo-slot { cursor: default; }

/* Curseur de fin pendant le streaming (repris du motif .streaming existant). */
.doc-section.streaming { min-height: 1.2em; }

/* --- Export serveur (/api/export-pdf) ------------------------------------- */

body.doc-export { margin: 0; background: #fff; }
body.doc-export .doc-sheet {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 10.5pt;
}
body.doc-export .doc-header { margin-bottom: 24px; }
body.doc-export table, body.doc-export .photo-slot, body.doc-export blockquote { break-inside: avoid; }
body.doc-export h1, body.doc-export h2, body.doc-export h3 { break-after: avoid; }

/* --- Impression navigateur (repli window.print du front) ------------------- */

@media print {
  body.doc-active .topbar, body.doc-active #hero, body.doc-active #roadmap,
  body.doc-active .site-foot, body.doc-active #tabs, body.doc-active .section-head,
  body.doc-active #input-zone, body.doc-active .run-row, body.doc-active #timeline,
  body.doc-active #panel-tabs, body.doc-active #panels,
  body.doc-active .doc-toolbar, body.doc-active .doc-actions { display: none !important; }

  body.doc-active { background: #fff; }
  body.doc-active #demo { max-width: none; padding: 0; }
  body.doc-active #stage { display: block; }
  body.doc-active .doc-sheet {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.doc-active .doc-body table, body.doc-active .photo-slot { break-inside: avoid; }
  body.doc-active .doc-body h1, body.doc-active .doc-body h2, body.doc-active .doc-body h3 { break-after: avoid; }
}