/* ═══════════════════════════════════════════
   Filigrane PDF — Styles v2
   ═══════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:       #0a0c10;
  --surface:  #11141b;
  --surface2: #181c26;
  --surface3: #212632;
  --border:   #262c3a;
  --border-hi:#374055;
  --text:     #b4bccf;
  --text-hi:  #e6eaf4;
  --text-lo:  #636e84;
  --accent:   #5b8def;
  --accent-hi:#78a5ff;
  --accent-bg:rgba(91,141,239,.1);
  --green:    #3dbd6f;
  --red:      #e85454;
  --radius:   8px;
  --radius-lg:12px;
  --max-w:    1080px;
}

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}
.hidden { display:none !important; }
.accent { color:var(--accent); }

/* ── HERO ────────────────────────────── */
.hero {
  padding: 44px 24px 28px;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: clamp(21px, 3.5vw, 30px);
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.hero-sub {
  font-size: 14px;
  color: var(--text-lo);
  max-width: 540px;
  margin: 0 auto;
}
.trust-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-lo);
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.trust-chip svg { width:13px; height:13px; color:var(--green); flex-shrink:0; }

/* ── TOOL SECTION ────────────────────── */
.tool-section {
  border-bottom: 1px solid var(--border);
}
.tool-layout {
  display: flex;
  height: 82vh;
  min-height: 550px;
}

/* ── SIDEBAR ─────────────────────────── */
.sidebar {
  width: 350px;
  min-width: 350px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.sidebar::-webkit-scrollbar { width:5px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }

/* Upload zone */
.upload-zone {
  margin: 14px;
  padding: 28px 18px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-bg);
  outline: none;
}
.upload-zone svg { width:32px; height:32px; color:var(--text-lo); margin: 0 auto 8px; display:block; }
.upload-zone p { font-size:13px; color:var(--text-lo); line-height:1.5; }
.browse-link { color:var(--accent); font-weight:600; text-decoration:underline; cursor:pointer; }

/* Upload loaded state */
.upload-zone.loaded {
  border-style: solid;
  border-color: var(--green);
  background: rgba(61,189,111,.05);
}
.upload-zone.loaded svg { color:var(--green); }
.loaded-name { font-size:13px; color:var(--text-hi); font-weight:600; word-break:break-all; }
.loaded-meta { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.loaded-meta span { font-size:11px; color:var(--text-lo); }
.remove-btn {
  font-size:11px; color:var(--red); background:none; border:none;
  cursor:pointer; font-weight:600; padding:2px 6px; border-radius:4px;
  transition: background .15s;
}
.remove-btn:hover { background:rgba(232,84,84,.1); }

/* Upload error state (librairies CDN non chargées) */
.upload-zone.error {
  border-style: solid;
  border-color: var(--red);
  background: rgba(232,84,84,.05);
  cursor: not-allowed;
}
.upload-zone.error svg { color:var(--red); }
.error-name { font-size:13px; color:var(--text-hi); font-weight:600; }
.error-hint { font-size:11px; color:var(--text-lo); margin-top:6px; line-height:1.5; }

/* Control groups */
.ctrl-group { padding: 0 14px; margin-top: 14px; }
.ctrl-group.compact { margin-top: 8px; }
.ctrl-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-lo);
  font-weight: 600;
  margin-bottom: 8px;
}
.ctrl-label-s {
  display: block;
  font-size: 11px;
  color: var(--text-lo);
  font-weight: 500;
  margin: 8px 0 4px;
}
.ctrl-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text-hi);
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
.ctrl-input:focus { border-color: var(--accent); }
.sep { border:none; height:1px; background:var(--border); margin:14px 14px 0; }

/* Toggles */
.toggle-row { display:flex; gap:4px; flex-wrap:wrap; }
.toggle {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text-lo);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.toggle:hover { border-color:var(--border-hi); color:var(--text); }
.toggle.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

/* Range sliders */
.range-row { display:flex; align-items:center; gap:8px; }
.range-row input[type="range"] {
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:4px;
  background:var(--border); outline:none;
}
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); cursor:pointer;
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent);
}
.range-row input[type="range"]::-moz-range-thumb {
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); cursor:pointer;
  border:2px solid var(--surface);
}
.range-val {
  font-size:12px; font-weight:600; color:var(--text-hi);
  min-width:40px; text-align:right; font-variant-numeric:tabular-nums;
}

/* Color swatches */
.color-row { display:flex; gap:6px; margin-top:2px; }
.swatch {
  width:26px; height:26px; border-radius:50%;
  background:var(--c); border:2px solid transparent;
  cursor:pointer; transition:all .15s; padding:0;
}
.swatch:hover { transform:scale(1.15); }
.swatch.active {
  border-color:var(--text-hi);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text-hi);
}

/* Collapsible sections */
.collapsible {
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .25s ease, opacity .2s ease, margin .2s ease;
}
.collapsible.open {
  max-height:300px; opacity:1;
}

/* Page range */
.page-range {
  display:flex; align-items:center; gap:6px; margin-top:6px;
}
.page-range span { font-size:12px; color:var(--text-lo); }
.num-input {
  width:52px; text-align:center;
  padding:5px 6px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface2);
  color:var(--text-hi); font-size:12px; outline:none;
}
.num-input:focus { border-color:var(--accent); }

/* Action buttons */
.action-bar {
  display:flex; gap:8px; padding:14px;
  margin-top:auto; border-top:1px solid var(--border);
  background:var(--surface);
  position:sticky; bottom:0;
}
.btn-action {
  padding:9px 14px; border-radius:var(--radius);
  font-size:13px; font-weight:600; cursor:pointer;
  border:none; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex:1;
}
.btn-action:disabled { opacity:.35; cursor:not-allowed; }
.btn-action svg { width:15px; height:15px; }
.btn-action.outline {
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border);
}
.btn-action.outline:hover:not(:disabled) { background:var(--surface3); border-color:var(--border-hi); }
.btn-action.primary { background:var(--accent); color:#fff; }
.btn-action.primary:hover:not(:disabled) { background:var(--accent-hi); }

/* ── PREVIEW PANEL ───────────────────── */
.preview-panel {
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg);
  position:relative; overflow:hidden;
}
.preview-empty { text-align:center; color:var(--text-lo); padding:24px; max-width:420px; }
.preview-empty > svg { width:48px; height:48px; margin-bottom:14px; opacity:.25; display:block; margin-left:auto; margin-right:auto; }
.empty-title { font-size:15px; font-weight:700; color:var(--text-hi); margin-bottom:16px; }

/* Mini-tutoriel (3 étapes) */
.mini-tuto { list-style:none; text-align:left; display:flex; flex-direction:column; gap:12px; margin:0 auto; }
.mini-tuto li { display:flex; align-items:flex-start; gap:10px; }
.tuto-n {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent);
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.tuto-txt { font-size:13px; color:var(--text); line-height:1.5; }
.tuto-txt strong { color:var(--text-hi); font-weight:600; }
.empty-note {
  display:flex; align-items:center; gap:7px; justify-content:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--green);
}
.empty-note svg { width:14px; height:14px; flex-shrink:0; opacity:1; margin:0; color:var(--green); }

.preview-canvas-wrap {
  flex:1; display:flex;
  align-items:center; justify-content:center;
  padding:20px; width:100%; overflow:auto;
}
#previewCanvas {
  max-width:100%; max-height:100%;
  box-shadow:0 6px 32px rgba(0,0,0,.45);
  border-radius:2px; background:#fff;
}

/* Page bar */
.page-bar {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; width:100%;
  background:var(--surface); border-top:1px solid var(--border);
}
.page-bar button {
  width:30px; height:30px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.page-bar button:hover:not(:disabled) { background:var(--surface3); border-color:var(--border-hi); }
.page-bar button:disabled { opacity:.25; cursor:not-allowed; }
.page-bar button svg { width:14px; height:14px; }
.page-label {
  font-size:12px; color:var(--text-lo);
  font-weight:500; font-variant-numeric:tabular-nums;
  min-width:50px; text-align:center;
}

/* Loader */
.loader {
  position:absolute; inset:0;
  background:rgba(10,12,16,.82);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; z-index:50;
}
.spinner {
  width:28px; height:28px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .65s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loader span { font-size:13px; color:var(--text-lo); }

/* ═══ SEO CONTENT ════════════════════════ */
.content-sep { border:none; height:1px; background:var(--border); max-width:var(--max-w); margin:0 auto; }
.content {
  max-width:var(--max-w); margin:0 auto; padding:48px 24px;
}
.content h2 {
  font-size:clamp(19px,3vw,25px); font-weight:700;
  color:var(--text-hi); margin-bottom:8px; letter-spacing:-.02em;
}
.content h3 { font-size:15px; font-weight:600; color:var(--text-hi); margin-bottom:4px; }
.content > p { font-size:14px; color:var(--text); margin-bottom:20px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.step {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
}
.step-n {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.step p { font-size:13px; color:var(--text-lo); margin:0; line-height:1.55; }

/* Features */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.feat {
  display:flex; gap:12px; padding:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.feat-icon {
  width:36px; height:36px; border-radius:8px;
  background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.feat-icon svg { width:18px; height:18px; color:var(--accent); }
.feat p { font-size:13px; color:var(--text-lo); margin:0; line-height:1.5; }

/* FAQ */
.faq { display:flex; flex-direction:column; gap:8px; }
.faq details {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.faq summary {
  padding:14px 18px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--text-hi);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  transition:background .15s;
}
.faq summary:hover { background:var(--surface2); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:''; width:18px; height:18px; flex-shrink:0; margin-left:12px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23636e84' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s;
}
.faq details[open] summary::after { transform:rotate(180deg); }
.faq details p { padding:0 18px 14px; font-size:13px; color:var(--text-lo); line-height:1.65; }

/* Footer */
.site-footer {
  border-top:1px solid var(--border);
  padding:28px 24px; text-align:center;
}
.site-footer p { font-size:11px; color:var(--text-lo); }

/* ═══ RESPONSIVE ════════════════════════ */
@media (max-width:800px) {
  .tool-layout {
    flex-direction:column;
    height:auto; min-height:auto;
  }
  .sidebar {
    width:100%; min-width:unset;
    border-right:none; border-bottom:1px solid var(--border);
    max-height:55vh; overflow-y:auto;
  }
  .preview-panel { min-height:45vh; }
  .action-bar { position:static; }
  .hero { padding:32px 18px 20px; }
}