/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:#0f0f1a; color:#fff; height:100vh; overflow:hidden; }

:root {
  --sidebar-bg:#1a1a2e;
  --sidebar-width:320px;
}

/* ===== Layout ===== */
.app { display:flex; height:100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width:var(--sidebar-width); background:var(--sidebar-bg); padding:24px 20px;
  display:flex; flex-direction:column;
  overflow-y:auto; flex-shrink:0;
}
.sidebar-left { border-right:1px solid rgba(255,255,255,.06); }
.sidebar-right { border-left:1px solid rgba(255,255,255,.06); }
.sidebar-title { font-size:24px; font-weight:800; letter-spacing:2px; line-height:1.1; }
.sidebar-title span { font-weight:400; font-size:15px; color:rgba(255,255,255,.5); }
.sidebar-sub { font-size:11px; color:rgba(255,255,255,.6); margin:2px 0 16px; }

/* ===== Sidebar Sections ===== */
.sidebar-sections { display:flex; flex-direction:column; gap:8px; flex:1; }

.sidebar-section {
  border-radius:8px;
}

.section-header {
  display:flex; align-items:center; gap:6px;
  padding:10px 12px;
  font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.55); font-weight:600;
  background:rgba(255,255,255,.03);
  border-radius:8px;
  user-select:none;
  cursor:pointer;
}
.section-header::after {
  content:''; display:block; width:6px; height:6px;
  border-right:1.5px solid rgba(255,255,255,.4);
  border-bottom:1.5px solid rgba(255,255,255,.4);
  transform:rotate(45deg); transition:transform .2s;
  margin-left:auto; flex-shrink:0;
}
.sidebar-section.collapsed .section-header::after {
  transform:rotate(-45deg);
}

.section-body {
  padding:8px 4px;
  overflow:hidden; transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.sidebar-section.collapsed .section-body {
  max-height:0 !important; opacity:0; padding-top:0; padding-bottom:0;
}

/* Drag handle */
.section-drag-handle {
  cursor:grab; color:rgba(255,255,255,.2); font-size:12px;
  line-height:1; padding:0 2px 0 0; flex-shrink:0;
}
.section-drag-handle:hover { color:rgba(255,255,255,.5); }
.section-drag-handle:active { cursor:grabbing; }

/* Drag feedback */
.sidebar-section.dragging { opacity:.35; }
.sidebar-section.drag-over { box-shadow:0 -2px 0 0 rgba(102,126,234,.7); }

/* Card preview drop zone */
#card-wrapper.drop-hover { outline:2px dashed rgba(102,126,234,.6); outline-offset:6px; border-radius:4px; }

/* ===== Card Type Selector ===== */
.card-type-selector {
  display:flex; flex-direction:column; gap:4px;
}
.card-type-btn {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; background:rgba(255,255,255,.03);
  cursor:pointer; transition:background .2s, border-color .2s;
  font-family:'Poppins',sans-serif; color:#fff; text-align:left; width:100%;
}
.card-type-btn:hover { background:rgba(255,255,255,.08); }
.card-type-btn.active {
  border-color:rgba(102,126,234,.6);
  background:rgba(102,126,234,.12);
}
.card-type-btn-label {
  font-size:12px; font-weight:600; line-height:1.2;
}
.card-type-btn-desc {
  font-size:9px; color:rgba(255,255,255,.4); line-height:1.3;
}
.card-type-btn-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}

/* ===== Color Picker Grid ===== */
.color-picker-sections {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.color-picker-group {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.color-picker-group-label {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,.4);
}
.color-picker-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.color-swatch {
  width:100%; aspect-ratio:1;
  border-radius:50%;
  border:3px solid transparent;
  cursor:pointer;
  transition:border-color .2s, transform .15s;
  outline:none;
}
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.active {
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(102,126,234,.5);
}

/* ===== VX Background Picker ===== */
.vx-bg-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
.vx-bg-swatch {
  width:100%;
  aspect-ratio:1.3;
  border-radius:5px;
  border:2px solid transparent;
  cursor:pointer;
  transition:border-color .2s, transform .15s;
  position:relative;
  overflow:hidden;
  outline:none;
  background-size:cover;
  background-position:center;
}
.vx-bg-swatch:hover { transform:scale(1.08); }
.vx-bg-swatch.active {
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(102,126,234,.5);
}
.vx-bg-swatch-label {
  position:absolute;
  bottom:0; left:0; right:0;
  font-size:6.5px;
  text-align:center;
  padding:1px 2px 2px;
  background:rgba(0,0,0,.45);
  color:#fff;
  line-height:1.4;
  letter-spacing:.3px;
}

/* ===== Icon Picker Grid ===== */
.icon-picker-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.icon-picker-btn {
  aspect-ratio:1; border:2px solid rgba(255,255,255,.1); border-radius:8px;
  background:rgba(255,255,255,.05); cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding:5px; color:rgba(255,255,255,.6); transition:border-color .2s,background .2s;
}
.icon-picker-btn:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }
.icon-picker-btn.active { border-color:#667eea; background:rgba(102,126,234,.15); color:#fff; }
.icon-picker-btn svg { width:100%; height:100%; }

/* ===== Custom Color Pickers ===== */
.custom-color-grid { display:flex; flex-direction:column; gap:4px; }
.custom-color-row {
  display:flex; align-items:center; gap:8px; padding:2px 0;
}
.custom-color-label {
  font-size:10px; color:rgba(255,255,255,.5); flex:1; white-space:nowrap;
}
.custom-color-input {
  width:28px; height:28px; border:2px solid rgba(255,255,255,.15);
  border-radius:6px; cursor:pointer; background:none; padding:0;
  -webkit-appearance:none; appearance:none;
}
.custom-color-input::-webkit-color-swatch-wrapper { padding:0; }
.custom-color-input::-webkit-color-swatch { border:none; border-radius:4px; }
.custom-color-input::-moz-color-swatch { border:none; border-radius:4px; }

/* ===== Font / Size Controls ===== */
.controls-row { display:flex; flex-direction:column; gap:6px; }
.controls-row label {
  font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.45); margin-top:4px;
}
.controls-row select, .controls-row input[type=number] {
  width:100%; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px;
  background:rgba(255,255,255,.05); color:#fff; font-family:'Poppins',sans-serif; font-size:12px; outline:none;
}
.controls-row select option { background:#1a1a2e; }

.size-row { display:flex; gap:6px; align-items:center; }
.size-row input { width:1px; flex:1; text-align:center; }
.size-row .sep { color:rgba(255,255,255,.3); font-size:13px; }

/* ===== Font Size Controls ===== */
.size-control { display:flex; flex-direction:column; gap:6px; }
.size-control-row {
  display:flex; align-items:center; gap:8px;
}
.size-control-label {
  font-size:10px; color:rgba(255,255,255,.5); min-width:60px; white-space:nowrap;
}
.size-control-range {
  flex:1; -webkit-appearance:none; appearance:none; height:4px;
  background:rgba(255,255,255,.12); border-radius:2px; outline:none;
}
.size-control-range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#667eea; cursor:pointer; border:none;
}
.size-control-range::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:#667eea; cursor:pointer; border:none;
}
.size-control-val {
  font-size:10px; color:rgba(255,255,255,.4); min-width:28px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.size-control-num {
  width:48px; padding:2px 4px; text-align:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:4px; color:#ddd; font-size:10px; font-family:'Poppins',sans-serif;
  outline:none; -moz-appearance:textfield; flex-shrink:0;
}
.size-control-num::-webkit-inner-spin-button,
.size-control-num::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.size-control-num:focus { border-color:rgba(102,126,234,.5); }

/* ===== Bulk Paste Textareas ===== */
.bulk-paste-group { display:flex; flex-direction:column; gap:8px; }
.bulk-paste-label {
  font-size:10px; color:rgba(255,255,255,.5); text-transform:uppercase;
  letter-spacing:1px; margin-bottom:2px;
}
.bulk-paste-area {
  width:100%; min-height:80px; max-height:160px; resize:vertical;
  padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px;
  background:rgba(255,255,255,.05); color:#fff; font-family:'Poppins',sans-serif;
  font-size:11px; line-height:1.5; outline:none;
}
.bulk-paste-area::placeholder { color:rgba(255,255,255,.25); }
.bulk-paste-area:focus { border-color:rgba(102,126,234,.5); }
.bulk-paste-hint {
  font-size:9px; color:rgba(255,255,255,.3); line-height:1.4;
}

/* ===== Logo Upload ===== */
.logo-area { margin-top:4px; }
.logo-drop {
  border:2px dashed rgba(255,255,255,.15); border-radius:10px; padding:14px 10px;
  text-align:center; cursor:pointer; transition:border-color .2s; position:relative;
}
.logo-drop:hover { border-color:rgba(255,255,255,.35); }
.logo-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.logo-drop p { font-size:11px; color:rgba(255,255,255,.4); pointer-events:none; }
.logo-preview-wrap { display:flex; align-items:center; gap:10px; margin-top:8px; }
.logo-preview { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
.logo-preview-name { font-size:11px; color:rgba(255,255,255,.5); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logo-remove { background:none; border:none; color:#e74c3c; cursor:pointer; font-size:16px; padding:4px; }

/* ===== Buttons ===== */
.btn-group { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.btn {
  padding:10px 14px; border:none; border-radius:8px; font-family:'Poppins',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:transform .15s,opacity .15s;
}
.btn:hover { transform:translateY(-1px); opacity:.9; }
.btn-primary { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.btn-secondary { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.1); }

.sidebar-footer { margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); }
.sidebar-footer p { font-size:10px; color:rgba(255,255,255,.25); line-height:1.6; }

/* ===== Main ===== */
.main { flex:1; display:flex; align-items:center; justify-content:center; background:#16162a; overflow:auto; position:relative; }
#card-wrapper { transform:scale(var(--card-scale,.7)); transform-origin:center center; }

/* =============================================
   TTMC LOGO
   ============================================= */
.ttmc-logo {
  font-family:'Poppins',sans-serif;
  font-weight:900; font-style:italic;
  color:var(--header-bg, #333);
  font-size:14px; letter-spacing:-0.5px;
  opacity:.6;
}
.ttmc-logo sup { font-size:8px; }

/* =============================================
   CARD BASE — 936 x 735
   ============================================= */
.ttmc-card {
  width:936px; height:735px; border-radius:20px; overflow:hidden;
  font-family:inherit; position:relative;
  background:var(--card-bg, #ffffff);
}
#card-preview { box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* =============================================
   STANDARD Q&A — Tu te mets combien en...
   Dual panel: questions + responses
   ============================================= */
.card-type-standard {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 14px);
}

/* ===== Panneaux cote a cote ===== */
.card-type-standard .card-panel { flex:1; display:flex; flex-direction:column; }

.panel-inner {
  flex:1; border-radius:14px; background:var(--panel-inner-bg, var(--header-bg, #1e6e2c));
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.panel-bordered { border-style:solid; border-color:var(--border, #1e6e2c); border-width:var(--inner-border-width, 3.5px); }

/* ===== En-tete panneau ===== */
.panel-header {
  height:48px; flex-shrink:0; display:var(--header-display, flex); align-items:center; padding:0 16px; position:relative;
  background:var(--header-bg); color:var(--header-text);
}

.vx-texture {
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.12) 0%, transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.10) 0%, transparent 45%),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.09) 0%, transparent 38%),
    radial-gradient(circle at 30% 60%, rgba(255,255,255,0.07) 0%, transparent 30%);
}
.vx-texture.card-type-standard {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;
  column-gap:18px; row-gap:8px;
  padding:22px 24px 24px;
}
.vx-texture .panel-inner { border-radius:18px; border-width:0 !important; }
.vx-texture .panel-subject { display:none; }

/* ===== Varimatrax banner ===== */
.vx-banner { display:none; }
.vx-texture .vx-banner {
  display:flex; align-items:center; gap:10px;
  grid-column:1 / -1;
  color:var(--header-text, #fff);
  padding:0 4px;
}
.vx-banner-content { flex:1; min-width:0; }
.vx-banner-header {
  font-size:11px; font-weight:700; font-style:italic;
  opacity:.85; line-height:1.2;
}
.vx-banner-subject {
  display:block; width:100%; outline:none;
  font-size:20px; font-weight:900; text-transform:uppercase;
  letter-spacing:.5px; line-height:1.15;
}
.vx-banner-subject:empty::before {
  content:attr(data-placeholder); opacity:.4;
  font-style:italic; text-transform:none; font-weight:600; font-size:14px;
}
.vx-banner-icon {
  width:40px; height:40px; flex-shrink:0;
  color:var(--header-text, #fff); opacity:.7;
}
.vx-banner-icon svg { width:100%; height:100%; }
.panel-header-text { font-size:14px; font-weight:700; font-style:italic; opacity:.9; }
.panel-header-logo {
  margin-left:auto; margin-right:50px;
}
.panel-header-logo .ttmc-logo {
  color:var(--header-text); opacity:.5; font-size:16px;
}
.panel-header-icon {
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  position:absolute; right:8px; top:3px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255, var(--icon-bg-alpha, 0.12));
  color:var(--header-text);
}
.panel-header-icon svg { width:28px; height:28px; }
.panel-header-icon img { width:100%; height:100%; object-fit:cover; }

/* ===== Card Panel Icon (top-right, all card types) ===== */
.card-panel-icon {
  position:absolute; top:10px; right:10px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; z-index:10;
  color:var(--num-color, var(--header-bg, #333));
  opacity:.45;
}
.card-panel-icon svg { width:100%; height:100%; }
.card-panel-icon img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.card-panel-icon-dark { color:#fff; }

/* ===== Sujet ===== */
.panel-subject {
  padding:8px 18px; border-bottom:2.5px solid rgba(0,0,0,.1);
  display:flex; align-items:center; min-height:44px;
  flex-shrink:0;
  background:var(--panel-bg, #fff);
}
.panel-subject [contenteditable] {
  display:block; width:100%; outline:none;
  font-size:var(--subject-size, 22px); font-weight:900;
  color:#1a1a2e; text-transform:uppercase; letter-spacing:.5px; line-height:1.15;
}
.panel-subject [contenteditable]:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15);
  font-style:italic; text-transform:none; font-weight:600; font-size:15px;
}

/* ===== Questions (recto) ===== */
.panel-questions { flex:1; display:flex; flex-direction:column; padding:4px 14px 8px; background:var(--panel-bg, #fff); }
.pq-row { flex:1; display:flex; align-items:center; border-bottom:1.5px solid rgba(0,0,0,.07); }
.pq-row:last-child { border-bottom:none; }
.pq-num {
  font-size:var(--num-size, 28px); font-weight:900; width:48px;
  text-align:center; line-height:1; color:var(--num-color);
}
.pq-txt {
  flex:1; margin-left:8px; font-size:var(--question-size, 10px);
  color:#333; outline:none; min-height:14px; border:none; background:none;
  font-family:inherit; line-height:1.3;
}
.pq-txt:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-style:italic;
}

/* ===== Reponses (verso) ===== */
.panel-answers { flex:1; display:flex; flex-direction:column; padding:6px 18px; background:var(--panel-bg, #fff); }
.pa-row { flex:1; display:flex; align-items:center; border-bottom:1.5px solid rgba(0,0,0,.08); }
.pa-row:last-child { border-bottom:none; }
.pa-num {
  font-size:var(--num-size, 28px); font-weight:900; width:48px;
  text-align:center; line-height:1; color:var(--num-color);
}
.pa-txt {
  flex:1; margin-left:8px; font-size:var(--answer-size, 10px);
  color:#333; outline:none; min-height:14px; border:none; background:none;
  font-family:inherit; line-height:1.3;
}
.pa-txt:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-style:italic;
}

/* ===== Icone par panneau (Varimatrax uniquement) ===== */
.vx-panel-icon {
  display:none;
}
.vx-texture .card-panel {
  display:flex;
  flex-direction:column;
}
.vx-texture .vx-panel-icon {
  display:flex;
  align-self:flex-end;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  flex-shrink:0;
  margin-bottom:6px;
  color:var(--header-text, #fff);
  opacity:.75;
  pointer-events:none;
}
.vx-texture .vx-panel-icon svg { width:100%; height:100%; }
.vx-texture .vx-panel-icon img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ===== Watermark icone ===== */
.panel-watermark {
  position:absolute; bottom:20px; right:20px; width:80px; height:80px;
  opacity:.08; pointer-events:none; color:var(--num-color);
}
.panel-watermark svg { width:100%; height:100%; }
.panel-watermark img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* =============================================
   DEBUTER — "Hesite pas a Debuter"
   Dual panel recto/verso, kraft/ticket style
   ============================================= */
.card-type-debuter {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 14px);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(139,109,63,.08) 28px, rgba(139,109,63,.08) 29px),
    linear-gradient(135deg, #C4A265 0%, #D4B896 30%, #C9A96A 60%, #D4B896 100%);
}

.card-type-debuter .card-panel {
  flex:1; display:flex; flex-direction:column; position:relative;
}

.debuter-inner {
  flex:1;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(139,109,63,.06) 28px, rgba(139,109,63,.06) 29px),
    linear-gradient(180deg, #F5E6C8 0%, #EAD5A8 100%);
  border-radius:12px;
  border-style:solid; border-color:var(--border, #5D3A1A); border-width:var(--inner-border-width, 3px);
  display:flex; flex-direction:column;
  position:relative;
}

.debuter-border {
  flex:1; margin:8px;
  border-style:dashed; border-color:rgba(109,76,42,.3);
  border-width:calc(var(--bdr-top,3px)*0.66) calc(var(--bdr-right,3px)*0.66) calc(var(--bdr-bottom,3px)*0.66) calc(var(--bdr-left,3px)*0.66);
  border-radius:8px;
  padding:20px 28px;
  display:flex; flex-direction:column;
  position:relative;
}
.debuter-border .card-panel-icon { color:#6D4C2A; }

.debuter-header {
  text-align:center; margin-bottom:16px;
  border-bottom:2px solid rgba(109,76,42,.2);
  padding-bottom:12px;
}
.debuter-header-text {
  font-size:14px; font-weight:700; letter-spacing:2px;
  color:#8B1A1A; text-transform:uppercase;
}
.debuter-header-title {
  font-size:36px; font-weight:900; letter-spacing:3px;
  color:#1a3a6e; text-transform:uppercase; line-height:1.1;
}

.debuter-title {
  font-size:18px; font-weight:800; color:#1a1a2e;
  text-align:center; margin-bottom:12px;
  text-transform:uppercase; outline:none;
  min-height:28px;
}
.debuter-title:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.2); font-style:italic;
  text-transform:none; font-weight:600; font-size:14px;
}

.debuter-body {
  flex:1; font-size:13px; color:#333; line-height:1.6;
  outline:none; white-space:pre-wrap;
  padding:8px 0;
}
.debuter-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.debuter-footer {
  font-size:10px; color:#666; font-style:italic;
  border-top:1px solid rgba(109,76,42,.15);
  padding-top:8px; margin-top:auto;
  outline:none; min-height:20px;
}
.debuter-footer:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-size:10px;
}

.debuter-logo {
  position:absolute; bottom:8px; right:12px;
}
.debuter-logo .ttmc-logo { color:#6D4C2A; opacity:.4; }

/* =============================================
   GAGNER — "Hesite pas a Gagner"
   Dual panel recto/verso, gold/amber style
   ============================================= */
.card-type-gagner {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 14px);
  background:linear-gradient(135deg, #DAA520 0%, #E8C84A 30%, #D4A017 60%, #E8C84A 100%);
}

.card-type-gagner .card-panel {
  flex:1; display:flex; flex-direction:column; position:relative;
}

.gagner-inner {
  flex:1;
  background:linear-gradient(180deg, #F5E6C8 0%, #EDD9A6 50%, #E5CC8A 100%);
  border-radius:12px;
  border-style:solid; border-color:var(--border, #A07A08); border-width:var(--inner-border-width, 3.5px);
  padding:20px 28px;
  display:flex; flex-direction:column;
  position:relative;
}

.gagner-header {
  text-align:center;
  padding:12px 0;
  border-bottom:2.5px solid rgba(160,122,8,.25);
  margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.gagner-star {
  font-size:22px; color:#C8960C;
}
.gagner-header-text {
  font-size:16px; font-weight:900; letter-spacing:2px;
  color:#8B1A1A; text-transform:uppercase;
}

.gagner-subtitle {
  font-size:22px; font-weight:900; color:#1a3a6e;
  text-align:center; text-transform:uppercase;
  margin-bottom:14px; outline:none; min-height:30px;
  letter-spacing:1px;
}
.gagner-subtitle:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.2); font-style:italic;
  text-transform:none; font-weight:600; font-size:16px;
}

.gagner-body {
  flex:1; font-size:13px; color:#333; line-height:1.6;
  outline:none; white-space:pre-wrap;
  padding:4px 0;
}
.gagner-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.gagner-divider {
  height:2px; background:rgba(160,122,8,.2); margin:12px 0;
}

.gagner-answer-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:#8B6914; margin-bottom:4px;
}

.gagner-answer {
  font-size:13px; color:#333; line-height:1.5;
  outline:none; min-height:30px; white-space:pre-wrap;
}
.gagner-answer:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.gagner-logo {
  position:absolute; bottom:10px; right:14px;
}
.gagner-logo .ttmc-logo { color:#A07A08; opacity:.4; }

/* =============================================
   INTREPIDE — Dual panel, red/white
   Challenge (left) + Responses (right)
   ============================================= */
.card-type-intrepide {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 14px);
}

.card-type-intrepide .card-panel { flex:1; display:flex; flex-direction:column; }

.intrepide-inner {
  flex:1; border-radius:14px; background:var(--header-bg, #B71C1C);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}

.intrepide-header {
  height:52px; display:flex; align-items:center; padding:0 20px; gap:12px;
  background:var(--header-bg, #B71C1C); color:var(--header-text, #fff);
}
.intrepide-header-text {
  font-size:20px; font-weight:700; font-style:italic;
}
.intrepide-header-sub {
  font-size:12px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; opacity:.8;
}

.intrepide-title {
  font-size:22px; font-weight:900; color:#1a1a2e;
  text-transform:uppercase; letter-spacing:1px;
  padding:14px 20px 10px; outline:none; min-height:40px;
  border-bottom:2px solid rgba(0,0,0,.08);
  background:var(--panel-bg, #fff);
}
.intrepide-title:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic;
  text-transform:none; font-weight:600; font-size:16px;
}

.intrepide-body {
  flex:1; font-size:13px; color:#333; line-height:1.6;
  padding:12px 20px; outline:none; white-space:pre-wrap;
  background:var(--panel-bg, #fff);
}
.intrepide-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-style:italic; font-size:12px;
}

.intrepide-responses {
  flex:1; font-size:13px; color:#333; line-height:1.7;
  padding:14px 20px; outline:none; white-space:pre-wrap;
  background:var(--panel-bg, #fff);
}
.intrepide-responses:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-style:italic; font-size:12px;
}

.intrepide-logo {
  position:absolute; bottom:10px; right:14px;
}
.intrepide-logo .ttmc-logo { color:var(--header-bg, #B71C1C); opacity:.3; }

/* =============================================
   CHALLENGE — Orange, eclair central
   ============================================= */
.card-type-challenge {
  display:flex; flex-direction:row; gap:0; padding:var(--card-padding, 14px);
  background:linear-gradient(135deg, #F18A00 0%, #F5A623 40%, #E8850A 70%, #F5A623 100%);
}
.card-type-challenge .card-panel { flex:1; display:flex; flex-direction:column; position:relative; }

.challenge-inner {
  flex:1;
  background:linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 100%);
  border-radius:12px;
  border-style:solid; border-color:var(--border, #C97200); border-width:var(--inner-border-width, 3px);
  padding:20px 24px;
  display:flex; flex-direction:column;
  position:relative;
}

.challenge-header {
  text-align:center; margin-bottom:14px;
  border-bottom:2.5px solid rgba(200,114,0,.2);
  padding-bottom:10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.challenge-header-text {
  font-size:16px; font-weight:900; letter-spacing:2px;
  color:#8B4513; text-transform:uppercase;
}

.challenge-title {
  font-size:20px; font-weight:800; color:#1a1a2e;
  text-align:center; margin-bottom:12px;
  text-transform:uppercase; outline:none; min-height:28px;
}
.challenge-title:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.2); font-style:italic;
  text-transform:none; font-weight:600; font-size:14px;
}

.challenge-body {
  flex:1; font-size:13px; color:#333; line-height:1.6;
  outline:none; white-space:pre-wrap; padding:4px 0;
}
.challenge-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.challenge-answer-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:#8B4513; margin-bottom:4px;
  border-top:2px solid rgba(200,114,0,.15); padding-top:8px; margin-top:auto;
}

.challenge-answer {
  font-size:13px; color:#333; line-height:1.5;
  outline:none; min-height:30px; white-space:pre-wrap;
}
.challenge-answer:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.challenge-bolt {
  width:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:relative; z-index:2;
}
.challenge-bolt svg { width:36px; height:100px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

/* =============================================
   TERMINER — Violet, style celebration
   ============================================= */
.card-type-terminer {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 14px);
  background-color:#6B2D8E;
  background-image:
    repeating-conic-gradient(#4A0E6B 0% 25%, #8B3DAE 0% 50%);
  background-size:20px 20px;
}
.card-type-terminer .card-panel { flex:1; display:flex; flex-direction:column; position:relative; }

.terminer-inner {
  flex:1;
  background:linear-gradient(180deg, #F3E5F5 0%, #E1BEE7 100%);
  border-radius:12px;
  border-style:solid; border-color:var(--border, #522070); border-width:var(--inner-border-width, 3px);
  display:flex; flex-direction:column;
  position:relative;
}

.terminer-border {
  flex:1; margin:8px;
  border-style:dashed; border-color:rgba(107,45,142,.25);
  border-width:calc(var(--bdr-top,3px)*0.66) calc(var(--bdr-right,3px)*0.66) calc(var(--bdr-bottom,3px)*0.66) calc(var(--bdr-left,3px)*0.66);
  border-radius:8px;
  padding:20px 28px;
  display:flex; flex-direction:column;
  position:relative;
}
.terminer-border .card-panel-icon { color:#6B2D8E; }

.terminer-header {
  text-align:center; margin-bottom:16px;
  border-bottom:2px solid rgba(107,45,142,.2);
  padding-bottom:12px;
}
.terminer-header-text {
  font-size:14px; font-weight:700; letter-spacing:2px;
  color:#6B2D8E; text-transform:uppercase;
}
.terminer-header-title {
  font-size:36px; font-weight:900; letter-spacing:3px;
  color:#4A148C; text-transform:uppercase; line-height:1.1;
}

.terminer-title {
  font-size:18px; font-weight:800; color:#1a1a2e;
  text-align:center; margin-bottom:12px;
  text-transform:uppercase; outline:none; min-height:28px;
}
.terminer-title:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.2); font-style:italic;
  text-transform:none; font-weight:600; font-size:14px;
}

.terminer-body {
  flex:1; font-size:13px; color:#333; line-height:1.6;
  outline:none; white-space:pre-wrap; padding:8px 0;
}
.terminer-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}

.terminer-footer {
  font-size:10px; color:#666; font-style:italic;
  border-top:1px solid rgba(107,45,142,.15);
  padding-top:8px; margin-top:auto;
  outline:none; min-height:20px;
}
.terminer-footer:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.12); font-size:10px;
}

.terminer-logo {
  position:absolute; bottom:8px; right:12px;
}

/* =============================================
   TOGGLES DE VISIBILITE
   ============================================= */
.hide-numbers .pq-num,
.hide-numbers .pa-num { visibility:hidden; }

.hide-questions .pq-txt { visibility:hidden; }
.hide-answers .pa-txt { visibility:hidden; }

.hide-subject .panel-subject { visibility:hidden; }
.hide-subject .debuter-title,
.hide-subject .gagner-subtitle,
.hide-subject .intrepide-title { visibility:hidden; }

.hide-header .panel-header,
.hide-header .debuter-header,
.hide-header .gagner-header,
.hide-header .intrepide-header { visibility:hidden; }

.hide-icons .panel-header-icon,
.hide-icons .card-panel-icon { visibility:hidden; }
.hide-iconbg .panel-header-icon { background:transparent !important; }
.hide-watermark .panel-watermark,
.hide-watermark .debuter-logo,
.hide-watermark .gagner-logo,
.hide-watermark .intrepide-logo { visibility:hidden; }

/* ===== Fond transparent ===== */
.hide-background { background:transparent !important; }
.hide-background .panel-inner,
.hide-background .debuter-inner,
.hide-background .gagner-inner,
.hide-background .intrepide-inner,
.hide-background .bonusmalus-recto,
.hide-background .bonusmalus-verso { background:transparent !important; }
.hide-background .card-type-debuter,
.hide-background .card-type-gagner { background:transparent !important; }
.hide-background .panel-bordered,
.hide-background .debuter-inner,
.hide-background .debuter-border,
.hide-background .gagner-inner { border-color:transparent !important; }
.hide-background .panel-header { background:transparent !important; }
.hide-background .intrepide-header { background:transparent !important; }
.hide-background .panel-subject,
.hide-background .panel-questions,
.hide-background .panel-answers,
.hide-background .intrepide-title,
.hide-background .intrepide-body,
.hide-background .intrepide-responses { background:transparent !important; }
.hide-background .panel-subject { border-bottom-color:transparent !important; }
.hide-background .pq-row,
.hide-background .pa-row { border-bottom-color:transparent !important; }
.hide-background .gagner-divider,
.hide-background .debuter-header,
.hide-background .debuter-footer { border-color:transparent !important; }

/* ===== Masquer le template (tout sauf les calques) ===== */
.hide-template > *:not(.card-overlay) { visibility:hidden !important; }

/* ===== Recto / Verso independants ===== */
.hide-recto > .card-panel:first-child { visibility:hidden !important; }
.hide-verso > .card-panel:last-child { visibility:hidden !important; }


/* ===== Lignes entre questions/reponses ===== */
.hide-rowlines .pq-row,
.hide-rowlines .pa-row { border-bottom-color:transparent !important; }
.hide-rowlines .panel-subject { border-bottom-color:transparent !important; }
.hide-rowlines .gagner-divider { background:transparent !important; }
.hide-rowlines .debuter-header,
.hide-rowlines .terminer-header { border-bottom-color:transparent !important; }
.hide-rowlines .debuter-footer,
.hide-rowlines .terminer-footer { border-top-color:transparent !important; }
.hide-rowlines .challenge-header { border-bottom-color:transparent !important; }
.hide-rowlines .challenge-answer-label { border-top-color:transparent !important; }
.hide-rowlines .gagner-header { border-bottom-color:transparent !important; }
.hide-rowlines .intrepide-title { border-bottom-color:transparent !important; }

/* =============================================
   CUSTOM NUMBER IMAGES
   ============================================= */
.custom-num-img {
  width:100%; height:100%; object-fit:contain;
  display:block;
}
.pq-num.has-num-bg,
.pa-num.has-num-bg {
  border-radius:50%;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* =============================================
   CALQUES (overlay layers)
   ============================================= */
.card-overlay {
  position:absolute; cursor:move;
  user-select:none; -webkit-user-select:none;
}
.card-overlay-img {
  width:100%; height:100%; display:block; pointer-events:none;
  user-select:none; -webkit-user-select:none;
}
.card-overlay.overlay-locked { cursor:default; pointer-events:none; }
.card-overlay.overlay-dragging { opacity:.75; outline:2px dashed #667eea; }
.card-overlay.overlay-resizing { outline:2px solid #667eea; }

/* Resize handles */
.overlay-handle {
  position:absolute; width:12px; height:12px;
  background:#667eea; border:2px solid #fff;
  border-radius:2px; z-index:1;
  opacity:0; pointer-events:none;
  transition:opacity .15s;
}
.card-overlay:hover .overlay-handle,
.card-overlay.overlay-resizing .overlay-handle {
  opacity:1; pointer-events:auto;
}
.overlay-handle-nw { top:-6px; left:-6px; cursor:nw-resize; }
.overlay-handle-ne { top:-6px; right:-6px; cursor:ne-resize; }
.overlay-handle-sw { bottom:-6px; left:-6px; cursor:sw-resize; }
.overlay-handle-se { bottom:-6px; right:-6px; cursor:se-resize; }

/* Sidebar overlay list */
.overlay-list { display:flex; flex-direction:column; gap:4px; }
.overlay-wrap { border-radius:6px; }
.overlay-wrap.dragging { opacity:.35; }
.overlay-wrap.drag-over { box-shadow:0 -2px 0 0 rgba(102,126,234,.7); }
.overlay-item {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border-radius:6px; padding:4px 6px;
}
.overlay-drag-handle {
  cursor:grab; color:rgba(255,255,255,.2); font-size:11px;
  line-height:1; flex-shrink:0; padding:0 2px;
}
.overlay-drag-handle:hover { color:rgba(255,255,255,.5); }
.overlay-drag-handle:active { cursor:grabbing; }
.overlay-item-thumb {
  width:40px; height:30px; object-fit:cover; border-radius:3px;
  border:1px solid rgba(255,255,255,.15); flex-shrink:0;
}
.overlay-item-label {
  flex:1; font-size:.72rem; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.overlay-item-actions { display:flex; gap:2px; flex-shrink:0; }
.overlay-item-btn {
  background:none; border:none; color:#999; font-size:.7rem;
  cursor:pointer; padding:2px 4px; border-radius:3px;
}
.overlay-item-btn:hover { color:#fff; background:rgba(255,255,255,.1); }
.overlay-item-btn.active { color:#667eea; }
.overlay-size-row {
  display:flex; gap:4px; align-items:center; margin-top:4px;
}
.overlay-size-input {
  width:50px; padding:2px 4px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15); border-radius:4px;
  color:#ddd; font-size:.7rem; text-align:center;
}
.overlay-opacity-range { width:100%; height:4px; margin-top:2px; }
.overlay-empty {
  color:#666; font-size:.72rem; text-align:center; padding:8px 0;
}
.overlay-drop {
  border:2px dashed rgba(255,255,255,.15); border-radius:10px; padding:12px 10px;
  text-align:center; cursor:pointer; transition:border-color .2s; position:relative;
  margin-top:6px;
}
.overlay-drop:hover { border-color:rgba(255,255,255,.35); }
.overlay-drop.drop-active { border-color:rgba(102,126,234,.6); background:rgba(102,126,234,.06); }
.overlay-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.overlay-drop p { font-size:11px; color:rgba(255,255,255,.4); pointer-events:none; }

/* =============================================
   OCR — Extraire du texte
   ============================================= */
.ocr-section { display:flex; flex-direction:column; gap:8px; }
.ocr-drop {
  border:2px dashed rgba(255,255,255,.15); border-radius:10px; padding:12px 10px;
  text-align:center; cursor:pointer; transition:border-color .2s; position:relative;
}
.ocr-drop:hover { border-color:rgba(255,255,255,.35); }
.ocr-drop.drop-active { border-color:rgba(102,126,234,.6); background:rgba(102,126,234,.06); }
.ocr-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ocr-drop p { font-size:11px; color:rgba(255,255,255,.4); pointer-events:none; }

.ocr-file-list { display:flex; flex-direction:column; gap:3px; }
.ocr-file-item {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border-radius:6px; padding:4px 8px;
}
.ocr-file-thumb {
  width:32px; height:24px; object-fit:cover; border-radius:3px;
  border:1px solid rgba(255,255,255,.15); flex-shrink:0;
}
.ocr-file-name {
  flex:1; font-size:.7rem; color:#ccc; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ocr-file-status {
  font-size:.65rem; color:rgba(255,255,255,.35); flex-shrink:0;
}
.ocr-file-status.done { color:#27ae60; }
.ocr-file-status.processing { color:#f39c12; }
.ocr-file-status.error { color:#e74c3c; }
.ocr-file-remove {
  background:none; border:none; color:#e74c3c; cursor:pointer;
  font-size:12px; padding:0 2px; line-height:1; flex-shrink:0;
}

.ocr-lang-row {
  display:flex; align-items:center; gap:8px;
}
.ocr-lang-label {
  font-size:10px; color:rgba(255,255,255,.5); flex-shrink:0;
}
.ocr-lang-select {
  flex:1; padding:6px 8px; border:1px solid rgba(255,255,255,.1); border-radius:6px;
  background:rgba(255,255,255,.05); color:#fff; font-family:'Poppins',sans-serif;
  font-size:11px; outline:none;
}
.ocr-lang-select option { background:#1a1a2e; }

.ocr-extract-btn { margin-top:2px; }

.ocr-progress {
  display:flex; align-items:center; gap:8px;
}
.ocr-progress-bar {
  flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden;
}
.ocr-progress-fill {
  height:100%; background:linear-gradient(90deg,#667eea,#764ba2);
  border-radius:3px; width:0; transition:width .2s;
}
.ocr-progress-text {
  font-size:10px; color:rgba(255,255,255,.5); min-width:30px; text-align:right;
  font-variant-numeric:tabular-nums;
}

.ocr-output {
  width:100%; min-height:120px; max-height:300px; resize:vertical;
  padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px;
  background:rgba(255,255,255,.05); color:#fff; font-family:'Poppins',sans-serif;
  font-size:11px; line-height:1.5; outline:none;
}
.ocr-output:focus { border-color:rgba(102,126,234,.5); }

.ocr-actions { display:flex; gap:4px; }
.ocr-action-btn { flex:1; padding:6px 8px !important; font-size:11px !important; text-align:center; }

/* =============================================
   TOGGLE SWITCHES (sidebar)
   ============================================= */
.toggle-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 10px;
}
.toggle-row {
  display:flex; align-items:center; gap:6px; padding:3px 0;
}
.toggle-label {
  font-size:10px; color:rgba(255,255,255,.55); flex:1;
  white-space:nowrap; cursor:pointer; user-select:none;
}
.toggle-cb {
  width:32px; height:16px; border-radius:8px;
  background:rgba(255,255,255,.12);
  position:relative; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  outline:none; flex-shrink:0;
  transition:background .2s;
}
.toggle-cb:checked { background:#667eea; }
.toggle-cb::after {
  content:''; position:absolute; top:2px; left:2px;
  width:12px; height:12px; border-radius:50%;
  background:#fff; transition:transform .2s;
}
.toggle-cb:checked::after { transform:translateX(16px); }

/* =============================================
   IMAGE UPLOAD ROWS (sidebar)
   ============================================= */
.img-upload-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 0;
}
.img-upload-label {
  font-size:10px; color:rgba(255,255,255,.5); flex:1;
  white-space:nowrap;
}
.img-upload-btn {
  padding:4px 10px; border:1px solid rgba(255,255,255,.15);
  border-radius:6px; background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.6); font-size:10px; cursor:pointer;
  font-family:'Poppins',sans-serif; transition:background .2s;
  white-space:nowrap;
}
.img-upload-btn:hover { background:rgba(255,255,255,.1); }
.img-upload-clear {
  background:none; border:none; color:#e74c3c; cursor:pointer;
  font-size:14px; padding:2px 4px; line-height:1;
}
.img-upload-preview {
  width:28px; height:28px; border-radius:4px; object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
}
.img-upload-wrap {
  display:flex; flex-direction:column; gap:6px;
}
.num-import-row {
  display:flex; gap:4px; flex-wrap:wrap;
}
.num-mini-btn {
  width:24px; height:24px; border:1px solid rgba(255,255,255,.1);
  border-radius:4px; background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5); font-size:9px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s; position:relative; overflow:hidden;
}
.num-mini-btn:hover { background:rgba(255,255,255,.1); }
.num-mini-btn.has-img {
  border-color:rgba(102,126,234,.4); background:rgba(102,126,234,.1);
}
.num-mini-btn img {
  width:100%; height:100%; object-fit:contain; position:absolute; inset:0;
}

/* =============================================
   TOAST
   ============================================= */
.toast {
  position:fixed; bottom:32px; right:32px; background:#27ae60; color:#fff;
  padding:14px 24px; border-radius:10px; font-family:'Poppins',sans-serif;
  font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .3s ease,opacity .3s ease; z-index:1000;
  max-width:400px;
}
.toast.hidden { transform:translateY(20px); opacity:0; pointer-events:none; }
.toast.visible { transform:translateY(0); opacity:1; }

.toast-inner { display:flex; flex-direction:column; gap:8px; }
.toast-actions { display:flex; gap:8px; }
.toast-btn {
  padding:6px 14px; border:none; border-radius:6px;
  font-family:'Poppins',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; transition:opacity .15s;
}
.toast-btn:hover { opacity:.85; }
.toast-btn-yes { background:#fff; color:#27ae60; }
.toast-btn-no { background:rgba(255,255,255,.2); color:#fff; }

/* ===== Sample Modal ===== */
#sample-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
#sample-modal.visible {
  opacity:1; pointer-events:auto;
}

.sample-modal-inner {
  background:#1a1a2e; border-radius:16px; padding:28px;
  max-width:560px; width:90%; max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.sample-modal-title {
  font-size:20px; font-weight:700; margin-bottom:16px; text-align:center;
}

.sample-card-list {
  display:flex; flex-direction:column; gap:6px; margin-bottom:16px;
}
.sample-card-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; background:rgba(255,255,255,.04);
  cursor:pointer; transition:background .2s; text-align:left;
  font-family:'Poppins',sans-serif; color:#fff; width:100%;
}
.sample-card-item:hover { background:rgba(255,255,255,.1); }
.sample-dot {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
}
.sample-label {
  flex:1; font-size:13px; font-weight:600;
}
.sample-theme {
  font-size:10px; color:rgba(255,255,255,.4);
  white-space:nowrap;
}
.sample-type-badge {
  font-size:8px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.1);
  padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px;
  font-weight:600; white-space:nowrap;
}
.sample-modal-close {
  width:100%; margin-top:8px;
}

/* ===== Sample modal section headers ===== */
.sample-section-title {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.35);
  padding:8px 0 4px; margin-top:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* =============================================
   MOBILE SIDEBAR TOGGLE
   ============================================= */
.sidebar-toggle-btn {
  display:none;
  position:fixed; top:12px; z-index:1500;
  width:44px; height:44px; border-radius:10px;
  background:#1a1a2e; border:1px solid rgba(255,255,255,.15);
  color:#fff; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:background .2s;
}
.sidebar-toggle-left { left:12px; }
.sidebar-toggle-right { right:12px; }
.sidebar-toggle-btn:hover { background:#16213e; }

.sidebar-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:999;
  backdrop-filter:blur(2px);
}
.sidebar-backdrop.visible { display:block; }

/* =============================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================= */
@media (max-width:768px) {
  body { overflow:auto; height:auto; }

  .sidebar-toggle-btn { display:flex; }

  .app { flex-direction:column; height:auto; min-height:100svh; }

  /* Both sidebars become fixed drawers on mobile */
  .sidebar {
    position:fixed; top:0;
    height:100%; width:min(300px, 88vw);
    z-index:1000;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:6px 0 32px rgba(0,0,0,.55);
    padding-top:60px;
  }
  .sidebar-left {
    left:0; transform:translateX(-100%);
  }
  .sidebar-right {
    right:0; left:auto; transform:translateX(100%);
    box-shadow:-6px 0 32px rgba(0,0,0,.55);
  }
  .sidebar.open { transform:translateX(0); }

  /* Main takes full viewport */
  .main {
    width:100vw;
    height:100svh;
    flex:none;
  }

  /* Bigger touch targets for num buttons */
  .num-mini-btn { width:32px; height:32px; font-size:11px; }

  /* Toast stays readable on mobile */
  .toast { left:12px; right:12px; bottom:16px; max-width:none; font-size:13px; }

  /* Export buttons: stack properly, bigger tap area */
  .btn { padding:12px 14px; font-size:14px; }

  /* Sample modal full width */
  .sample-modal-inner { width:96%; padding:20px 16px; }
}

/* =============================================
   BONUS / MALUS — Recto blanc (coeur) + Verso noir (tête de mort)
   ============================================= */
.card-type-bonusmalus {
  display:flex; flex-direction:row; gap:var(--card-gap, 10px); padding:var(--card-padding, 0); overflow:hidden; border-radius:14px;
}

.card-type-bonusmalus .card-panel { flex:1; display:flex; flex-direction:column; position:relative; overflow:hidden; }

.bonusmalus-recto { background:#ffffff; }
.bonusmalus-verso { background:#1a1a1a; }

.bonusmalus-inner {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:28px 20px; gap:14px; position:relative; z-index:1;
}

.bonusmalus-icon {
  width:80px; height:80px; display:flex; align-items:center; justify-content:center;
}
.bonusmalus-icon svg { width:80px; height:80px; }

.bonusmalus-icon-heart { color:#e74c3c; }
.bonusmalus-icon-skull { color:#ffffff; }

.bonusmalus-label {
  font-size:28px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  text-align:center; outline:none; color:#1a1a1a; min-width:80px;
}
.bonusmalus-label:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.2); font-style:italic;
  text-transform:uppercase; font-size:22px;
}
.bonusmalus-label-dark { color:#ffffff; }
.bonusmalus-label-dark:empty::before { color:rgba(255,255,255,.25); }

.bonusmalus-body {
  font-size:13px; color:#333; line-height:1.6; text-align:center;
  outline:none; white-space:pre-wrap; width:100%;
}
.bonusmalus-body:empty::before {
  content:attr(data-placeholder); color:rgba(0,0,0,.15); font-style:italic; font-size:12px;
}
.bonusmalus-body-dark { color:#cccccc; }
.bonusmalus-body-dark:empty::before { color:rgba(255,255,255,.2); }

.bonusmalus-watermark-light { opacity:.05; color:#000; }
.bonusmalus-watermark-dark  { opacity:.08; color:#fff; }

/* =============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================= */
@media (max-width:480px) {
  .sidebar { width:92vw; }
}

/* ===== Batch Section ===== */
.batch-drop {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s;
  margin-bottom: 6px;
}
.batch-drop:hover, .batch-drop.drop-active {
  border-color: rgba(102,126,234,.6);
}
.batch-drop p {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  margin: 0;
}
.batch-json-paste {
  width: 100%;
  min-height: 70px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-family: monospace;
  padding: 6px 8px;
  box-sizing: border-box;
  resize: vertical;
}
.batch-status {
  margin-top: 10px;
}
#batch-count {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.batch-card-list {
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.batch-card-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
}
.batch-card-badge {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.batch-card-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-mode-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.batch-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
.batch-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.batch-progress-wrap {
  margin-top: 6px;
}
.batch-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.batch-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width .3s ease;
  width: 0%;
}
.batch-progress-text {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}

/* Theme override — global */
.batch-theme-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 6px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}
.batch-theme-label {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.batch-theme-select {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  padding: 3px 4px;
  min-width: 0;
}
.batch-theme-select optgroup {
  color: #ccc;
  background: #2a2a3a;
}
.batch-theme-select option {
  color: #fff;
  background: #1e1e2e;
}

/* Theme override — per card */
.batch-card-theme-select {
  flex-shrink: 0;
  width: 70px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  padding: 1px 2px;
  margin-left: auto;
}
.batch-card-theme-select optgroup {
  color: #ccc;
  background: #2a2a3a;
}
.batch-card-theme-select option {
  color: #fff;
  background: #1e1e2e;
}