:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#111;
  --muted:#666;
  --border:#dcdfe4;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --radius:14px;
  --selected:#7aa7ff;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(246,247,249,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  display:flex;
  gap:12px;
  align-items:center;
}

.brand{
  font-weight:900;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  white-space: nowrap;
  padding:6px 14px;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
  width:100%;
}

label{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}

select, input[type="text"]{
  height:36px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  min-width:150px;
  font-size:13px;
}

.btn{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:800;
}

.btn.primary{
  border-color:#b7c6ff;
}

.btn.file{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.file input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.app{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:16px;
  padding:14px;
  align-items:start;
}

@media (max-width:1280px){
  .app{ grid-template-columns:1fr; }
}

.board-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.hint{
  font-size:13px;
  color:var(--muted);
}

.spreads{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  align-items:flex-start;
}

.spread{
  display:flex;
  gap:6px;
  position:relative;
}

.spread.insert-before::before,
.spread.insert-after::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  width:10px;
  background:#2f6fff;
  border-radius:10px;
  z-index:999;
  box-shadow:
  0 0 0 3px rgba(47,111,255,.22),
  0 0 12px rgba(47,111,255,.35);
  pointer-events:none;

  /* animation */
  opacity:0;
  transform:scaleY(.6);
  transition:
    opacity .12s ease,
    transform .12s ease;
}

.spread.insert-before::before,
.spread.insert-after::after{
  opacity:1;
  transform:scaleY(1);
}



/* centre dans le gap de 48px */

.spread.insert-before::before{
  left:-24px;
  transform:translateX(-50%);
}

.spread.insert-after::after{
  right:-24px;
  transform:translateX(50%);
}

.page{
  position:relative;
}

.page.drop-target{
  outline:2px solid rgba(47,111,255,.28);
  outline-offset:-2px;
}




.spread.selected{
  outline:2px solid var(--selected);
  outline-offset:6px;
  border-radius:10px;
}

.spread.selected .page{
  box-shadow:var(--shadow);
}

.spread.drag-source{
  opacity:.65;
}

.page{
  width:205px;
  height:170px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}

.page.solo{
  width:416px;
}



.page-inner{
  position:relative;
  width:100%;
  height:100%;
}

.page-num{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:900;
  color:rgba(0,0,0,.72);
  z-index:20;
}

.placeholder-head{
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  height:34px;
  background:#eef0f4;
  border:1px solid rgba(0,0,0,.05);
  border-radius:8px;
  z-index:2;
}

.placeholder-dash{
  position:absolute;
  left:16px;
  top:24px;
  width:10px;
  height:2px;
  background:#555;
  border-radius:2px;
  z-index:3;
}

/* éditorial */
.editorial-block{
  position:absolute;
  z-index:6;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  padding:8px;
  overflow:hidden;
}

.editorial-head{
  font-size:13px;
  font-weight:900;
  padding:12px 10px;
  min-height:50px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:1.1;
  margin-bottom:8px;
}

.editorial-fill{
  position:absolute;
  inset:0;
  background:#fff;
}

.editorial-text{
  position:relative;
  z-index:2;
  font-size:11px;
  line-height:1.25;
  color:#222;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  cursor:text;
  user-select:text;
}

.editorial-text.empty{
  color:var(--muted);
  font-style:italic;
}

.inline-editor{
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  padding:8px 10px;
  font-size:12px;
  outline:none;
}

/* pubs */
.pub-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.pub-block{
  position:absolute;
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:8px;
  overflow:hidden;
}

.pub-label{
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  color:#111;
  background:rgba(255,255,255,.78);
  padding:4px 6px;
  border-radius:8px;
  max-width:100%;
}

.pub-full{ left:0; top:0; width:100%; height:100%; }
.pub-half-top{ left:0; top:0; width:100%; height:50%; }
.pub-half-bottom{ left:0; bottom:0; width:100%; height:50%; }
.pub-half-left{ left:0; top:0; width:50%; height:100%; }
.pub-half-right{ right:0; top:0; width:50%; height:100%; }
.pub-quarter-tl{ left:0; top:0; width:50%; height:50%; }
.pub-quarter-tr{ right:0; top:0; width:50%; height:50%; }
.pub-quarter-bl{ left:0; bottom:0; width:50%; height:50%; }
.pub-quarter-br{ right:0; bottom:0; width:50%; height:50%; }

/* sidebar */
.sidebar{
  position:sticky;
  top:60px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

@media (max-width:1280px){
  .sidebar{ position:static; }
}

.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}

.panel-title{
  font-weight:900;
  margin-bottom:10px;
}

.categories,
.pub-templates{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.category-tile,
.pub-template{
  width:154px;
  min-height:58px;
  border-radius:12px;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  cursor:grab;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.category-tile .tname,
.pub-template .tname{
  font-weight:950;
  font-size:13px;
  line-height:1.15;
}

.category-tile .tsub,
.pub-template .tsub{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

.panel-footnote{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

.statusbar{
  padding:10px 14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

.context-menu{
  position:fixed;
  z-index:1000;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 18px 42px rgba(0,0,0,.16);
  padding:6px;
}

.context-menu.hidden{
  display:none;
}

.context-menu button{
  width:100%;
  border:0;
  background:#fff;
  text-align:left;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}

.context-menu button:hover{
  background:#f3f6fb;
}



#printRoot{
  display:none;
}

@page{
  size:A4 landscape;
  margin:6mm;
}

@media print {
html, body{
  background:#fff !important;
  overflow:visible !important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

  body.printing-cdf .topbar,
  body.printing-cdf .app,
  body.printing-cdf .statusbar,
  body.printing-cdf .context-menu{
    display:none !important;
  }

  body.printing-cdf #printRoot{
    display:block !important;
  }

  body.printing-cdf{
    margin:0 !important;
    padding:0 !important;
  }

.print-root{
  width:100%;
  height:auto;
  box-sizing:border-box;
  break-inside:avoid-page;
  page-break-inside:avoid;
}



  .print-title{
    font-size:14px;
    font-weight:900;
    color:#111;
    margin:0 0 10px 0;
    line-height:1.2;
  }

  .print-spread-grid{
    display:grid;
    grid-template-columns:repeat(6, max-content);
    column-gap:20px;
    row-gap:12px;
    align-items:start;
  }

  .print-spread{
    display:flex;
    gap:4px;
    align-items:flex-start;
  }

  .print-page{
    position:relative;
    width:76px;
    height:89px;
    border:1px solid #333;
    border-radius:2px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
    break-inside:avoid;
  }

  .print-page-inner{
    position:relative;
    width:100%;
    height:100%;
  }

  .print-page-num{
    position:absolute;
    left:50%;
    bottom:4px;
    transform:translateX(-50%);
    font-size:8px;
    font-weight:900;
    color:#222;
    z-index:20;
  }

  .print-placeholder-head{
    position:absolute;
    left:5px;
    right:5px;
    top:5px;
    height:9px;
    background:#eceff3;
    border:1px solid rgba(0,0,0,.08);
    border-radius:3px;
    z-index:2;
  }

  .print-placeholder-dash{
    position:absolute;
    left:10px;
    top:10px;
    width:6px;
    height:1px;
    background:#666;
    border-radius:2px;
    z-index:3;
  }

  .print-cat{
    position:absolute;
    left:5px;
    right:5px;
    top:5px;
    min-height:10px;
    padding:2px 5px;
    border-radius:3px;
    border:1px solid rgba(0,0,0,.08);
    font-size:6px;
    font-weight:900;
    line-height:1.1;
    z-index:8;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

.print-text{
  position:absolute;
  left:6px;
  right:6px;
  top:30px;
  bottom:14px;
  font-size:6px;
  line-height:1.15;
  color:#222;
  overflow:hidden;
  z-index:8;
}

  .print-text.empty{
    color:#777;
    font-style:italic;
  }

  .print-pub-layer{
    position:absolute;
    inset:0;
    z-index:4;
  }

  .print-pub{
    position:absolute;
    border:1px solid rgba(0,0,0,.08);
    box-sizing:border-box;
    overflow:hidden;
    padding:2px;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .print-pub-label{
    font-size:5px;
    font-weight:800;
    line-height:1.1;
    color:#111;
    background:rgba(255,255,255,.82);
    padding:1px 3px;
    border-radius:3px;
    display:inline-block;
    max-width:100%;
  }

  .print-pub.pub-full{ left:0; top:0; width:100%; height:100%; }
  .print-pub.pub-half-top{ left:0; top:0; width:100%; height:50%; }
  .print-pub.pub-half-bottom{ left:0; bottom:0; width:100%; height:50%; }
  .print-pub.pub-half-left{ left:0; top:0; width:50%; height:100%; }
  .print-pub.pub-half-right{ right:0; top:0; width:50%; height:100%; }
  .print-pub.pub-quarter-tl{ left:0; top:0; width:50%; height:50%; }
  .print-pub.pub-quarter-tr{ right:0; top:0; width:50%; height:50%; }
  .print-pub.pub-quarter-bl{ left:0; bottom:0; width:50%; height:50%; }
  .print-pub.pub-quarter-br{ right:0; bottom:0; width:50%; height:50%; }
}

.print-page-overlay{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.print-page-overlay-badge{
  position:absolute;
  top:3px;
  right:3px;
  z-index:10;
  font-size:5px;
  font-weight:900;
  color:#111;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  padding:1px 4px;
  line-height:1.1;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}









.overlay-stats{
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  color:#333;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}

.page-overlay{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
}

.page-overlay-badge{
  position:absolute;
  top:6px;
  right:6px;
  z-index:10;
  font-size:10px;
  font-weight:900;
  color:#111;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  padding:2px 6px;
  pointer-events:none;
}



body.mode-fred .sidebar {
  display: none;
}

body.mode-fred #btnNew,
body.mode-fred #btnExport,
body.mode-fred .file,
body.mode-fred #btnSave,
body.mode-fred #btnDeleteIssue {
  display: none;
}


.last-editor{
  font-size:12px;
  font-weight:700;
  color:#555;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}


.context-sep{
  border:0;
  border-top:1px solid var(--border);
  margin:6px 4px;
}


.page.status-selected{
  box-shadow: 0 0 0 3px rgba(47,111,255,.45), var(--shadow);
}

.page,
.page *:not(.editorial-text):not(.inline-editor) {
  user-select: none;
  -webkit-user-select: none;
}


.auth-gate{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(180deg,#f8f9fc 0%,#eef2f8 100%);
}

.auth-card{
  width:min(460px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(16,24,40,.12);
  padding:28px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}

.auth-badge{
  width:46px;
  height:46px;
  border-radius:14px;
  background:#0f172a;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,23,42,.20);
}

.auth-brand strong{
  display:block;
  font-size:20px;
}

.auth-brand span{
  display:block;
  color:var(--muted);
  font-size:14px;
  margin-top:2px;
}

.auth-form{
  display:grid;
  gap:14px;
}

.auth-form input{
  width:100%;
}

.auth-submit{
  width:100%;
  margin-top:6px;
}

.auth-error{
  min-height:20px;
  color:#b42318;
  font-size:13px;
  font-weight:700;
}