:root{
  --pegboard:#4B5563;
  --pegboard-dark:#363D45;
  --paper:#F7F4EC;
  --brass:#B8863B;
  --brass-light:#D4A85C;
  --ink:#24272B;
  --moss:#6B8F71;
  --moss-dim:#56705A;
  --line-dark:rgba(247,244,236,.15);
  --line-paper:rgba(36,39,43,.12);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --radius:4px;
  --header-h:64px;
  --tabbar-h:44px;
}
*{ box-sizing:border-box; }
/* Garde-fou : l'attribut natif "hidden" doit toujours l'emporter, même sur
   les éléments auxquels on donne un display:flex/grid personnalisé
   (sans ça, une règle .maclasse{display:flex} peut réafficher un élément
   que le JS a pourtant bien marqué hidden). */
[hidden]{ display:none !important; }
html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden; /* seuls les panneaux internes défilent : le header et la barre d'onglets restent fixes */
}
body{
  background-color:var(--pegboard);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  height:100vh;
}
::selection{ background:var(--brass-light); color:var(--ink); }

/* ============ HEADER (toujours visible) ============ */
header.top{
  flex-shrink:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:0 1.6rem;
  border-bottom:1px solid var(--line-dark);
  background:var(--pegboard-dark);
}
header.top .app-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--brass-light);
  letter-spacing:-.01em;
  white-space:nowrap;
  flex-shrink:0;
}
header.top .actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-shrink:0;
  margin-left:auto;
}
header.top .privacy{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--moss-dim);
  letter-spacing:.03em;
  white-space:nowrap;
  display:none;
}
@media (min-width: 620px){
  header.top .privacy{ display:inline; }
}

/* ---- menu ☰ (fichiers ouverts) ---- */
.menu-wrap{
  position:relative;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.menu-toggle{
  width:38px;
  height:38px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
}
.menu-toggle:hover{ background:var(--pegboard); }
.menu-toggle .bar{
  width:19px;
  height:2px;
  border-radius:1px;
  background:var(--brass-light);
}

.menu-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:280px;
  max-width:calc(100vw - 2rem);
  max-height:min(60vh, 420px);
  overflow-y:auto;
  background:var(--pegboard-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  box-shadow:0 16px 32px rgba(0,0,0,.4);
  z-index:70;
}
.menu-link{
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.9rem;
  color:var(--paper);
}
.menu-link:hover{ color:var(--brass-light); }
.menu-section-title{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(247,244,236,.55);
  padding:.85rem .95rem .55rem;
  border-bottom:1px dashed var(--line-dark);
}
.menu-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--line-dark);
  padding:.6rem .95rem;
  cursor:pointer;
  color:inherit;
  font-family:inherit;
}
.menu-item:last-child{ border-bottom:none; }
.menu-item:hover{ background:var(--pegboard); }
.menu-item.active{ background:var(--pegboard); }
.menu-item.active .menu-item-title{ color:var(--moss); }
.menu-item-title{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.9rem;
  color:var(--paper);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.menu-item-file{
  display:block;
  font-family:var(--font-mono);
  font-size:.66rem;
  color:rgba(247,244,236,.55);
  margin-top:.15rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.menu-empty{
  padding:.9rem .95rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:rgba(247,244,236,.55);
  line-height:1.6;
}
.menu-template{
  padding:.7rem .95rem .9rem;
  border-bottom:1px dashed var(--line-dark);
}
.menu-template-status{
  margin:0 0 .6rem;
  font-family:var(--font-body);
  font-size:.8rem;
  color:rgba(247,244,236,.75);
  line-height:1.5;
}
.menu-template-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.menu-template-btn{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:none;
  border:1px solid var(--brass-dim);
  color:var(--brass-light);
  padding:.4rem .65rem;
  border-radius:var(--radius);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.menu-template-btn:hover{ background:var(--pegboard); }
.menu-template-clear{
  border-color:rgba(247,244,236,.25);
  color:rgba(247,244,236,.6);
}
.menu-template-clear:hover{ background:var(--pegboard); color:var(--paper); }

/* ============ TAB BAR (toujours visible) ============ */
.tabbar{
  flex-shrink:0;
  height:var(--tabbar-h);
  display:flex;
  align-items:stretch;
  background:var(--pegboard);
  border-bottom:1px solid var(--line-dark);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.tab{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0 .5rem 0 .95rem;
  border-right:1px solid var(--line-dark);
  border-bottom:2px solid transparent;
  cursor:pointer;
  max-width:220px;
  flex-shrink:0;
  transition:background .15s ease;
}
.tab:hover{ background:var(--pegboard-dark); }
.tab.active{
  background:var(--pegboard-dark);
  border-bottom-color:var(--moss);
}
.tab .tab-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  color:var(--paper);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tab-close{
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:50%;
  border:none;
  background:none;
  color:rgba(247,244,236,.55);
  font-size:.85rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tab-close:hover{ background:var(--brass); color:var(--ink); }
.tab-add-wrap{
  position:relative;
  display:flex;
  flex-shrink:0;
}
.tab-add{
  width:var(--tabbar-h);
  height:100%;
  border:none;
  border-right:1px solid var(--line-dark);
  background:none;
  color:var(--brass-light);
  font-weight:700;
  font-size:1.2rem;
  cursor:pointer;
  transition:background .15s ease;
}
.tab-add:hover{ background:var(--pegboard-dark); }
.add-dropdown{
  position:fixed;
  min-width:160px;
  background:var(--pegboard-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  box-shadow:0 14px 28px rgba(0,0,0,.4);
  z-index:80;
  overflow:hidden;
}
.add-option{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--line-dark);
  padding:.6rem .9rem;
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--paper);
  cursor:pointer;
}
.add-option:last-child{ border-bottom:none; }
.add-option:hover{ background:var(--pegboard); color:var(--brass-light); }

/* ============ CORPS (le seul qui défile) ============ */
.wrap{
  display:flex;
  flex:1;
  min-height:0;
}

main.page{
  flex:1;
  overflow-y:auto;
  padding:2.2rem 4vw 5rem;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:var(--pegboard);
  background-image:radial-gradient(circle, rgba(0,0,0,.16) 1.6px, transparent 1.6px);
  background-size:34px 34px;
  background-position:17px 17px;
}

/* petit crochet de pegboard au-dessus du document, comme les cartes de l'accueil */
.sheet-peg{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:100%;
  max-width:720px;
}
.sheet-peg .peg-hook{ width:2px; height:20px; background:rgba(0,0,0,.28); }
.sheet-peg .peg-hole{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--pegboard-dark);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.5);
  margin-bottom:-1px;
}

.sheet{
  position:relative;
  max-width:720px;
  width:100%;
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:2.2rem 2.4rem 2.6rem;
  box-shadow:0 10px 20px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.12);
}
.sheet .shelfmark{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:1.1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line-paper);
}
.sheet .shelfmark #shelfmark-name{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--brass);
  letter-spacing:.08em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- rail d'icônes d'export (md / pdf / docx) ---- */
.export-rail{
  position:absolute;
  top:1.6rem;
  right:1.8rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  z-index:5;
}
.export-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
  border-radius:50%;
  border:1.5px solid currentColor;
  background:var(--paper);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 3px 6px rgba(0,0,0,.18);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.export-icon:hover{ transform:translateY(-1px); }
.export-icon-md{ color:var(--ink); }
.export-icon-md:hover{ background:var(--ink); color:var(--paper); }
.export-icon-pdf{ color:var(--moss-dim); }
.export-icon-pdf:hover{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.export-icon-docx{ color:var(--brass); }
.export-icon-docx:hover{ background:var(--brass); color:var(--paper); border-color:var(--brass); }
#content{ padding-right:4.6rem; }
.sheet .placeholder{
  color:rgba(36,39,43,.55);
  font-family:var(--font-mono);
  font-size:.9rem;
  line-height:1.8;
}

/* état vide : invite au dépôt de fichier */
.empty-state{
  max-width:460px;
  margin:0 auto;
  text-align:center;
}
.empty-state .dropzone{
  border:1px dashed rgba(36,39,43,.25);
  border-radius:var(--radius);
  padding:2.2rem 1.4rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:rgba(36,39,43,.62);
  line-height:1.8;
  transition:border-color .15s ease, background .15s ease;
}
.empty-state .dropzone.drag-over{
  border-color:var(--brass);
  background:rgba(184,134,59,.08);
  color:var(--ink);
}
.empty-state .dropzone .icon{
  font-size:1.5rem;
  display:block;
  margin-bottom:.5rem;
  color:var(--brass);
}

/* ============ ÉDITEUR (mode création, split texte / aperçu) ============ */
.editor{
  width:100%;
  max-width:1100px;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.editor-panes{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.editor-pane{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.pane-label{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(247,244,236,.6);
  margin-bottom:.4rem;
}
.editor-source-wrap{
  position:relative;
  flex:1;
  display:flex;
}
.editor-textarea{
  width:100%;
  min-height:65vh;
  resize:vertical;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-radius:var(--radius);
  box-shadow:0 10px 20px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.12);
  padding:1.2rem 4.2rem 1.2rem 1.3rem;
  font-family:var(--font-mono);
  font-size:.92rem;
  line-height:1.6;
}
.editor-textarea:focus{ outline:2px solid var(--brass-light); outline-offset:2px; }

.editor-preview-sheet{
  min-height:65vh;
  max-height:75vh;
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:1.6rem 1.8rem;
  box-shadow:0 10px 20px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.12);
  overflow-y:auto;
}

/* ============ SOMMAIRE (droite) ============ */
aside.toc{
  width:250px;
  flex-shrink:0;
  border-left:1px solid var(--line-dark);
  background:var(--pegboard-dark);
  overflow-y:auto;
}
.toc-head{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(247,244,236,.55);
  padding:1rem 1.2rem .6rem;
  border-bottom:1px dashed var(--line-dark);
}
.toc-list{ padding:.4rem 0; }
.toc-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--paper);
  opacity:.8;
  font-family:var(--font-body);
  font-size:.88rem;
  line-height:1.5;
  padding:.35rem 1.2rem;
  cursor:pointer;
  border-left:2px solid transparent;
}
.toc-item:hover{ background:var(--pegboard); border-left-color:var(--brass); opacity:1; }
.toc-item.active{ border-left-color:var(--moss); opacity:1; }
.toc-empty{
  padding:1.2rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:rgba(247,244,236,.5);
  line-height:1.7;
}

/* ============ Rendu Markdown (sur la page en papier) ============ */
.rendered h1, .rendered h2, .rendered h3, .rendered h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.25;
  letter-spacing:-.01em;
}
.rendered h1{ font-size:2.1rem; font-weight:700; margin:0 0 1rem; }
.rendered h2{ font-size:1.4rem; font-weight:600; margin-top:2rem; border-bottom:1px solid var(--line-paper); padding-bottom:.4rem; }
.rendered h3{ font-size:1.1rem; font-weight:600; margin-top:1.5rem; }
.rendered h4{ font-size:1rem; font-weight:600; margin-top:1.2rem; }
.rendered p{ font-family:var(--font-body); line-height:1.75; font-size:1rem; color:var(--ink); }
.rendered a{ color:var(--brass); text-decoration-thickness:1px; }
.rendered code{
  font-family:var(--font-mono);
  background:rgba(36,39,43,.07);
  padding:.1rem .35rem;
  border-radius:2px;
  font-size:.85em;
}
.rendered pre{
  background:var(--pegboard-dark);
  border-radius:var(--radius);
  padding:1rem;
  overflow-x:auto;
}
.rendered pre code{ background:none; padding:0; color:var(--paper); }
.rendered blockquote{
  border-left:3px solid var(--brass);
  margin:1.1rem 0;
  padding:.2rem 0 .2rem 1rem;
  color:rgba(36,39,43,.65);
  font-style:italic;
}
.rendered ul, .rendered ol{ line-height:1.75; padding-left:1.3rem; }
.rendered img{ max-width:100%; border-radius:var(--radius); }
.rendered table{ border-collapse:collapse; width:100%; margin:1rem 0; font-size:.9rem; }
.rendered th, .rendered td{ border:1px solid var(--line-paper); padding:.5rem .7rem; text-align:left; }
.rendered th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brass); }
.rendered hr{ border:none; border-top:1px dashed var(--line-paper); margin:1.8rem 0; }

/* ============ overlay plein écran (glisser-déposer global) ============ */
#drop-overlay{
  position:fixed;
  inset:0;
  background:rgba(54,61,69,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  border:3px dashed var(--brass-light);
  margin:12px;
}
#drop-overlay.visible{ display:flex; }
#drop-overlay span{
  font-family:var(--font-mono);
  color:var(--brass-light);
  font-size:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* accessibilité clavier */
.tab:focus-visible,
.toc-item:focus-visible,
.menu-toggle:focus-visible,
.menu-item:focus-visible,
.tab-close:focus-visible,
.tab-add:focus-visible,
.add-option:focus-visible,
.export-icon:focus-visible,
.menu-template-btn:focus-visible{
  outline:3px solid var(--brass-light);
  outline-offset:-3px;
}

/* ============ Responsive ============ */
@media (max-width: 760px){
  html,body{ overflow:auto; height:auto; }
  body{ height:auto; min-height:100vh; }
  header.top{ height:auto; padding:.8rem 1rem; flex-wrap:wrap; row-gap:.5rem; }
  .wrap{ flex-direction:column; }
  aside.toc{ width:100%; border-left:none; border-top:1px solid var(--line-dark); max-height:40vh; }
  main.page{ padding:2rem 5vw 2.5rem; }
  .editor-panes{ flex-direction:column; }
  .editor-textarea, .editor-preview-sheet{ min-height:45vh; max-height:none; }
}

@media (prefers-reduced-motion: reduce){
  .tab, .tab-close, .tab-add, .toc-item, .empty-state .dropzone{ transition:none; }
}