/* Lil' Cloud — Personnalisation */
.lcp, .lcp-cta {
  --lcp-ink: var(--lc-ink, #1e2b4a);
  --lcp-accent: var(--lc-accent, #2a6fb0);
  --lcp-cream: var(--lc-cream, #fff8ef);
  --lcp-sky: #eaf4ff;
  --lcp-good: #1e8a55;
  --lcp-warn: #b8741a;
  --lcp-bad: #b42355;
}

/* Bouton fiche produit */
.lcp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0; }
.lcp-cta__btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem;
  border: 3px solid var(--lcp-ink); border-radius: 999px; background: #fff; color: var(--lcp-ink);
  font-weight: 800; text-decoration: none; box-shadow: 0 0.25rem 0 var(--lcp-ink); transition: transform .15s ease;
}
.lcp-cta__btn:hover, .lcp-cta__btn:focus-visible { transform: translateY(-2px); color: var(--lcp-ink); background: var(--lcp-sky); }
.lcp-cta__hint { font-size: 0.9rem; opacity: .8; }

/* Éditeur */
.page-lcperso-editor #wrapper .container, .page-lcperso-editor .page-content { max-width: 1440px; }
.lcp { color: var(--lcp-ink); display: grid; gap: 0.75rem; }
.lcp__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.lcp__pieces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lcp__piece {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.9rem; border-radius: 999px;
  border: 2px solid var(--lcp-ink); background: #fff; font-weight: 700; cursor: pointer;
}
.lcp__piece.is-active { background: var(--lcp-accent); border-color: var(--lcp-accent); color: #fff; }
.lcp__piece span { min-width: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--lcp-cream); color: var(--lcp-ink); font-size: 0.75rem; }
.lcp__history { display: flex; align-items: center; gap: 0.4rem; }
.lcp__icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--lcp-ink); background: #fff; font-size: 1.2rem; cursor: pointer; }
.lcp__icon:disabled { opacity: .35; cursor: default; }
.lcp__guides { margin: 0 0 0 0.5rem; font-weight: 700; }

.lcp__body {
  display: grid; grid-template-columns: 5.5rem 15rem minmax(0, 1fr) 16rem; gap: 0.75rem; align-items: start;
}
.lcp__tools { display: grid; gap: 0.5rem; }
.lcp__tool {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.6rem 0.3rem; border: 2px solid var(--lcp-ink);
  border-radius: 1rem; background: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.lcp__tool span { font-size: 1.25rem; line-height: 1; }
.lcp__tool.is-active { background: var(--lcp-sky); border-color: var(--lcp-accent); box-shadow: 0 0 0 2px var(--lcp-accent); }
.lcp__panel, .lcp__props { background: #fff; border: 2px solid var(--lcp-ink); border-radius: 1.25rem; padding: 1rem; display: grid; gap: 0.75rem; }
.lcp__pane { display: grid; gap: 0.75rem; }
.lcp__h { font-family: Fredoka, Nunito, sans-serif; font-size: 1.05rem; margin: 0; }
.lcp__help { font-size: 0.82rem; opacity: .75; margin: 0; }
.lcp__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }
.lcp__swatches--sm { grid-template-columns: repeat(8, 1fr); margin-top: 0.25rem; }
.lcp__swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(30, 43, 74, .25); cursor: pointer; padding: 0; }
.lcp__swatch.is-active { border: 3px solid var(--lcp-ink); box-shadow: 0 0 0 2px #fff inset; }
.lcp__custom-color { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin: 0; }
.lcp__drop {
  display: grid; gap: 0.25rem; justify-items: center; text-align: center; padding: 1.25rem 0.75rem; margin: 0;
  border: 2px dashed var(--lcp-accent); border-radius: 1rem; background: var(--lcp-sky); cursor: pointer; font-size: 0.85rem;
}
.lcp__drop.is-over { background: #fff; }
.lcp__progress { height: 6px; border-radius: 3px; background: #e3e7ef; overflow: hidden; }
.lcp__progress span { display: block; height: 100%; width: 0; background: var(--lcp-accent); transition: width .2s; }
.lcp__msg { font-size: 0.85rem; margin: 0; }
.lcp__msg--error { color: var(--lcp-bad); font-weight: 700; }
.lcp__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.lcp__thumb { aspect-ratio: 1; padding: 0.2rem; border: 2px solid #d9dde6; border-radius: 0.75rem; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/12px 12px; cursor: pointer; }
.lcp__thumb:hover { border-color: var(--lcp-accent); }
.lcp__thumb img { width: 100%; height: 100%; object-fit: contain; }

.lcp__stage { display: grid; justify-items: center; gap: 0.5rem; background: var(--lcp-cream); border: 2px solid var(--lcp-ink); border-radius: 1.25rem; padding: 0.5rem; min-height: 22rem; }
.lcp__canvas { display: block; touch-action: none; cursor: grab; border-radius: 0.5rem; max-width: 100%; }
.lcp__canvas:active { cursor: grabbing; }
.lcp__stage-help { font-size: 0.78rem; opacity: .7; margin: 0; text-align: center; }

.lcp__field { display: grid; gap: 0.2rem; font-weight: 700; font-size: 0.85rem; margin: 0; }
.lcp__check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.88rem; margin: 0; }
.lcp__check input { margin-top: 0.2rem; }
.lcp__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lcp__quality { margin: 0; padding: 0.4rem 0.7rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.85rem; }
.lcp__quality--good { background: #d9f5e6; color: var(--lcp-good); }
.lcp__quality--warn { background: #fff1c2; color: var(--lcp-warn); }
.lcp__quality--bad { background: #ffd6e6; color: var(--lcp-bad); }
.lcp__layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.lcp__layer { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 2px solid #d9dde6; border-radius: 0.75rem; background: #fff; text-align: left; font-size: 0.85rem; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lcp__layer.is-active { border-color: var(--lcp-accent); background: var(--lcp-sky); }
.lcp__dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.lcp__dot--good { background: var(--lcp-good); }
.lcp__dot--warn { background: var(--lcp-warn); }
.lcp__dot--bad { background: var(--lcp-bad); }

.lcp__bottom {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; background: #fff; border: 2px solid var(--lcp-ink); border-radius: 1.25rem; box-shadow: 0 -0.25rem 1rem rgba(30, 43, 74, .08);
}
.lcp__variant { display: flex; gap: 0.5rem; }
.lcp__qty { width: 5rem; }
.lcp__price { margin: 0; font-size: 1.2rem; }
.lcp__price small { display: block; font-size: 0.8rem; opacity: .7; }

.lcp__dialog { width: min(36rem, calc(100vw - 1.5rem)); border: 3px solid var(--lcp-ink); border-radius: 1.5rem; padding: 1.5rem; background: var(--lcp-cream); color: var(--lcp-ink); box-shadow: 0 0.5rem 0 var(--lcp-ink); }
.lcp__dialog::backdrop { background: rgba(30, 43, 74, .45); }
.lcp__checks { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.4rem; }
.lcp__check-item { padding: 0.5rem 0.8rem 0.5rem 2rem; border-radius: 0.75rem; position: relative; background: #fff; font-size: 0.9rem; }
.lcp__check-item::before { position: absolute; left: 0.7rem; font-weight: 800; }
.lcp__check-item--good::before { content: "✓"; color: var(--lcp-good); }
.lcp__check-item--warn::before { content: "!"; color: var(--lcp-warn); }
.lcp__check-item--bad::before { content: "×"; color: var(--lcp-bad); }
.lcp__check-item--bad { background: #ffd6e6; }
.lcp__attest { padding: 0.75rem; background: #fff; border-radius: 1rem; margin: 0.5rem 0; }
.lcp__dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

@media (max-width: 1199.98px) {
  .lcp__body { grid-template-columns: 5rem 14rem minmax(0, 1fr); }
  .lcp__props { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .lcp__body { grid-template-columns: 1fr; }
  .lcp__tools { grid-template-columns: repeat(3, 1fr); order: 2; }
  .lcp__stage { order: 1; min-height: 0; }
  .lcp__panel { order: 3; }
  .lcp__props { order: 4; }
  .lcp__tool { grid-auto-flow: column; justify-content: center; }
  .lcp__bottom { border-radius: 1rem 1rem 0 0; margin: 0 -0.75rem; }
}

.lcp [hidden], .lcp-cta [hidden] { display: none !important; }

/* Modes Création / Aperçu */
.lcp__modes { display: inline-flex; padding: 0.2rem; border: 2px solid var(--lcp-ink); border-radius: 999px; background: #fff; }
.lcp__mode { border: 0; background: none; padding: 0.35rem 0.9rem; border-radius: 999px; font-weight: 800; cursor: pointer; color: var(--lcp-ink); }
.lcp__mode.is-active { background: var(--lcp-ink); color: #fff; }
.lcp__edit, .lcp__views { display: grid; justify-items: center; gap: 0.5rem; width: 100%; }
.lcp__view-canvas { display: block; max-width: 100%; height: auto; border-radius: 0.75rem; background: #fff; }
.lcp__view-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.lcp__view-thumb { width: 4rem; height: 4rem; padding: 0.15rem; border: 2px solid #d9dde6; border-radius: 0.75rem; background: #fff; cursor: pointer; }
.lcp__view-thumb.is-active { border-color: var(--lcp-accent); box-shadow: 0 0 0 2px var(--lcp-accent); }
.lcp__view-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* 1.4.0 — les colonnes ne débordent plus de leur cadre */
.lcp__body { grid-template-columns: 5.5rem 14rem minmax(0, 1fr) minmax(16rem, 19rem); }
.lcp__body > *, .lcp__panel > *, .lcp__props > *, .lcp__pane > * { min-width: 0; }
.lcp__panel, .lcp__props { box-sizing: border-box; max-width: 100%; overflow: hidden; }
.lcp__props input[type=range], .lcp__props select, .lcp__props input[type=text], .lcp__props textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.lcp__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.lcp__actions > * { min-width: 0; width: 100%; margin: 0 !important; padding: 0.35rem 0.4rem; font-size: 0.8rem; line-height: 1.2; white-space: normal; }
.lcp__layers li { min-width: 0; }
.lcp__layer { max-width: 100%; box-sizing: border-box; }
.lcp__layer > span:not(.lcp__dot), .lcp__layer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcp__quality { overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
  .lcp__body { grid-template-columns: 5rem 14rem minmax(0, 1fr); }
  .lcp__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .lcp__body { grid-template-columns: minmax(0, 1fr); }
  .lcp__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}