/* =============================================================================
   PAPETERIE — l'habillage commun aux deux éditeurs
   =============================================================================
   Repris de l'éditeur de flyer pour que le client ne soit pas dépaysé : mêmes
   panneaux, mêmes boutons, mêmes fenêtres. Seule la couleur d'accent change,
   et elle vient d'une variable posée par la page (--accent).
   ============================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #1a1d2e; color: #f3f6fa;
  height: 100vh; overflow: hidden;
}

#back-btn {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  background: #c0392b; color: #fff; padding: 8px 16px;
  border-radius: 8px; text-decoration: none; font-weight: 700; font-size: .9em;
}

.app { display: flex; height: 100vh; }

/* ------------------------------------------------------------ PANNEAUX */
.sidebar-left, .sidebar-right {
  width: 250px; min-width: 250px; background: #12151f;
  display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-left  { border-right: 3px solid var(--accent); }
.sidebar-right { width: 260px; min-width: 260px; border-left: 3px solid var(--accent); }

.sidebar-header { padding: 50px 14px 10px; background: #0e1016; text-align: center; border-bottom: 1px solid #222; }
.sidebar-header h2 { font-size: .95em; color: var(--accent); margin-top: 6px; }
.sidebar-section { padding: 10px 14px; border-bottom: 1px solid #1e2235; }
.sidebar-section h3 {
  font-size: .76em; color: var(--accent); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px;
}

.sb-btn {
  background: #1e2235; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: #f3f6fa; padding: 7px 8px; border-radius: 7px; cursor: pointer;
  font-size: .8em; font-family: 'Montserrat', sans-serif; transition: all .2s;
  text-align: center; width: 100%; margin-bottom: 5px; display: block;
}
.sb-btn:hover, .sb-btn.active { background: var(--accent); color: #fff; }

.form-row { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.form-row label { font-size: .74em; color: #aaa; min-width: 42px; }
.form-row input[type=text], .form-row input[type=number], .form-row select, .form-row textarea {
  background: #1e2235; border: 1px solid #333; color: #f3f6fa; padding: 5px 6px;
  border-radius: 6px; font-size: .78em; flex: 1; font-family: 'Montserrat', sans-serif;
}
.form-row input[type=color] { width: 30px; height: 26px; border: none; border-radius: 5px; cursor: pointer; }
.form-row input[type=range] { flex: 1; }

.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dim-btn {
  background: #1e2235; border: 1px solid #333; color: #f3f6fa; padding: 7px 4px;
  border-radius: 7px; cursor: pointer; font-size: .7em; text-align: center;
  transition: all .2s; font-family: 'Montserrat', sans-serif; line-height: 1.4;
}
.dim-btn:hover, .dim-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.bg-colors { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.bg-swatch { width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
             border: 2px solid #33384d; transition: all .2s; }
.bg-swatch:hover { border-color: #fff; transform: scale(1.15); }

/* -------------------------------------------------------------- CENTRE */
.main { flex: 1; display: flex; flex-direction: column; background: #1a1d2e; overflow: hidden; }
.top-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; background: #0e1016; border-bottom: 2px solid var(--accent);
  flex-shrink: 0; flex-wrap: wrap;
}
.top-bar-btn {
  display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px;
  border: none; cursor: pointer; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: .8em; transition: all .2s; color: #fff;
}
.tb-photo { background: #2980b9; } .tb-photo:hover { background: #2471a3; }
.tb-ia    { background: #8e44ad; } .tb-ia:hover    { background: #7d3c98; }
.tb-save  { background: #09ab7c; } .tb-save:hover  { background: #07926a; }
.tb-designs { background: #16a085; } .tb-designs:hover { background: #138a72; }
.tb-cart  { background: #c0392b; } .tb-cart:hover  { background: #a93226; }

.canvas-zone {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; overflow-y: auto; overflow-x: hidden;
  gap: 10px; padding: 16px 0;
}
.canvas-wrap { position: relative; box-shadow: 0 10px 40px #0008; }
.canvas-wrap canvas { display: block; }
.info-format { font-size: .76em; color: #8a90a0; }

/* -------------------------------------------------------------- CALQUES */
.layers-section { flex: 1; overflow-y: auto; padding: 10px 14px; border-top: 1px solid #1e2235; min-height: 120px; }
.el-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #1e2235; border-radius: 6px; padding: 5px 8px; margin-bottom: 3px;
  font-size: .75em; cursor: pointer; border-left: 3px solid transparent;
}
.el-item:hover { background: #252a40; }
.el-item.selected { border-left-color: var(--accent); }
.el-actions button { background: none; border: none; color: #aaa; cursor: pointer; padding: 1px 3px; font-size: .85em; }
.el-actions button:hover { color: var(--accent); }

/* -------------------------------------------------------------- FENÊTRES */
.modal-overlay { display: none; position: fixed; inset: 0; background: #000a; z-index: 2000;
                 align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal-box {
  background: #12151f; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px; padding: 22px; width: 640px; max-width: 96vw; max-height: 90vh; overflow-y: auto;
}
.modal-box h3 { color: var(--accent); margin-bottom: 14px; font-size: 1em; }
.modal-actions { display: flex; gap: 8px; margin-top: 10px; }
.modal-actions button { flex: 1; padding: 9px; border-radius: 7px; border: none;
  font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; }
.btn-cancel-m { background: #333; color: #aaa; }
.btn-gen { background: #8e44ad; color: #fff; }

.designs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.design-card { background: #1e2235; border-radius: 8px; overflow: hidden; border: 1px solid #333; }
.design-card img { width: 100%; object-fit: contain; background: #fff; max-height: 180px; }
.design-card-info { padding: 7px 8px; font-size: .74em; color: #aaa; }
.design-card-info strong { color: #f3f6fa; display: block; margin-bottom: 4px; }
.design-card-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.design-card-actions button { font-size: .7em; padding: 4px 8px; border-radius: 5px; border: none;
  cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; }

.coche { display: flex; gap: 7px; align-items: center; font-size: .76em; color: #c7ccd6; cursor: pointer; }
.coche input { width: auto; }
.aide { font-size: .7em; color: #666; margin-top: 4px; line-height: 1.5; }