/* ══════════════════════════════════════════════════════════════
   ALTERED CARD FORGE — forge-plugin.css  (intégration native au site)

   Principe :
   - PAS de boîte à hauteur fixe / scroll interne (effet "iframe").
     Le contenu suit le flux normal de la page : c'est la PAGE qui défile.
   - L'aperçu (canvas) est en position: sticky → il reste visible pendant
     qu'on fait défiler la longue colonne de réglages.
   - On NE surcharge PAS les composants Bootstrap (accordéon, form-control,
     dropdown, boutons, .modal) → le thème du site gère contraste + dark mode.
   - Seuls la mise en page + les widgets propres à la forge sont stylés ici,
     scopés sous .forge-app, sur les tokens du site (--sand/--primary/--neutral).

   (style.css d'origine n'est PAS chargé : réservé au backup index.html.)
══════════════════════════════════════════════════════════════ */

.forge-app {
  --preview-w: clamp(280px, 30%, 440px);
  --acf-sticky-top: 76px;          /* offset sous le header sticky (réglé par JS) */

  --accent:      var(--primary-500);
  --accent-glow: color-mix(in srgb, var(--primary-400) 22%, transparent);
  --text:        var(--neutral-800);
  --text-muted:  var(--neutral-500);
  --text-label:  var(--neutral-600);
  --danger:      var(--bs-danger, #dc3545);

  display: block;
  color: var(--text);
}
.forge-app, .forge-app *, .forge-app *::before, .forge-app *::after { box-sizing: border-box; }

/* ── En-tête de page : titre + actions (intégré, pas de barre/box) ── */
.forge-app .forge-header {
  border-bottom: 1px solid var(--sand-300);
  padding-bottom: 0.85rem;
}
.forge-app .nav-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* États boutons éditeur (toggle par app.js) → vert plein quand actif */
.forge-app .btn-nav-editor.btn-active,
.forge-app .btn-nav-editor.btn-saved {
  background: var(--bs-success, #198754);
  border-color: var(--bs-success, #198754);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT : aperçu sticky (gauche) + réglages en hauteur naturelle (droite)
══════════════════════════════════════════════════════════════ */
.forge-app .main-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;     /* indispensable pour que le sticky fonctionne */
}

/* ── Aperçu : sticky, suit le défilement ───────────────────── */
.forge-app .preview-pane {
  flex: 0 0 var(--preview-w);
  position: sticky;
  top: var(--acf-sticky-top, 76px);
  align-self: flex-start;
  display: flex;
  justify-content: center;
}
.forge-app .canvas-wrapper { position: relative; width: 100%; display: flex; justify-content: center; }
.forge-app #cardCanvas {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--acf-sticky-top, 76px) - 1.5rem);
  display: block;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 14px 40px rgba(0,0,0,0.22);
  cursor: crosshair;
}
.forge-app .preview-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sand-100) 55%, transparent); border-radius: 14px;
}

/* ── Réglages : flux naturel, pleine hauteur du contenu ───── */
.forge-app .settings-pane { flex: 1 1 auto; min-width: 0; }
.forge-app .settings-inner { padding: 0; }
/* L'accordéon lui-même est stylé par le thème du site ; on ajoute juste l'espacement */
.forge-app #settingsAccordion { display: flex; flex-direction: column; gap: 6px; }
/* Section éditeur : liseré vert distinctif */
.forge-app .editor-accordion-item { border-left: 3px solid var(--bs-success, #198754) !important; }

/* ── Overlay carte (mode éditeur) ──────────────────────────── */
.forge-app .editor-overlay {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; pointer-events: none; opacity: 0.5; z-index: 10; border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   BLOCS D'ÉLÉMENTS (spécifiques forge)
══════════════════════════════════════════════════════════════ */
.forge-app .element-block {
  background: var(--sand-50);
  border: 1px solid var(--sand-300);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.forge-app .element-block:hover { border-color: var(--neutral-300); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.forge-app .element-block:last-child { margin-bottom: 0; }
.forge-app .element-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.forge-app .element-title { font-size: 0.74rem; font-weight: 700; color: var(--primary-500); text-transform: uppercase; letter-spacing: 0.06em; }
.forge-app .vis-toggle { background: none; border: none; color: var(--text-muted); padding: 0; font-size: 0.9rem; cursor: pointer; transition: color 0.2s; line-height: 1; }
.forge-app .vis-toggle:hover { color: var(--text); }
.forge-app .vis-toggle.hidden-el { color: var(--danger); }

.forge-app .form-label-sm { font-size: 0.74rem; color: var(--text-label); margin-bottom: 0.2rem; display: block; font-weight: 600; }
.forge-app .section-sep {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 0.35rem 0 0.25rem; border-bottom: 1px solid var(--sand-300); margin-bottom: 0.45rem;
}

.forge-app .file-input-wrapper { position: relative; display: flex; align-items: center; gap: 0.4rem; }
.forge-app .file-preview-thumb { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; border: 1px solid var(--neutral-300); display: none; }
.forge-app .file-preview-thumb.loaded { display: block; }
.forge-app .frame-status { font-size: 0.72rem; padding: 0.15rem 0.4rem; border-radius: 4px; }

.forge-app .canvas-coords {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: #fff; font-size: 0.68rem; font-family: monospace;
  padding: 2px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap;
}
.forge-app .canvas-wrapper:hover .canvas-coords { opacity: 1; }

.forge-app #qrContainer { position: fixed; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; z-index: -1; }

/* ══════════════════════════════════════════════════════════════
   SLIDERS
══════════════════════════════════════════════════════════════ */
.forge-app .slider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.forge-app .slider-group { display: flex; flex-direction: column; }
.forge-app .slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1px; }
.forge-app .slider-val { font-size: 0.72rem; font-weight: 700; color: var(--primary-500); min-width: 32px; text-align: right; }
.forge-app .form-range { width: 100%; height: 22px; padding: 0; accent-color: var(--primary-500); cursor: pointer; }
.forge-app input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.forge-app .btn-slider-lock, .forge-app .btn-slider-reset {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 4px;
  transition: color 0.15s, background 0.15s; flex-shrink: 0; line-height: 1;
}
.forge-app .btn-slider-lock { font-size: 0.68rem; }
.forge-app .btn-slider-reset { font-size: 0.64rem; }
.forge-app .btn-slider-lock:hover, .forge-app .btn-slider-reset:hover { color: var(--primary-500); background: var(--sand-200); }
.forge-app .btn-slider-lock.locked { color: var(--primary-500); }
.forge-app .btn-slider-lock.locked:hover { color: var(--danger); }

.forge-app .color-picker-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.forge-app .color-picker-input { width: 38px !important; height: 30px; padding: 2px 3px; flex-shrink: 0; }
.forge-app .color-preset-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--neutral-300); cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.12s, border-color 0.12s; }
.forge-app .color-preset-swatch:hover { transform: scale(1.18); border-color: var(--primary-500); }
.forge-app .btn-rte-color { width: 26px; height: 24px; padding: 1px 2px; border: 1px solid var(--neutral-300); border-radius: 4px; background: none; cursor: pointer; flex-shrink: 0; }
.forge-app .btn-rte-color:hover { border-color: var(--primary-500); }
.forge-app .rte-color-swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--neutral-300); cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.12s, border-color 0.12s; }
.forge-app .rte-color-swatch:hover { transform: scale(1.2); border-color: var(--primary-500); }

.forge-app .fontstyle-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.forge-app .btn-group-fontstyle { display: flex; gap: 3px; }
.forge-app .btn-fontstyle {
  width: 30px; height: 26px; padding: 0; background: var(--sand-100); border: 1px solid var(--sand-300);
  border-radius: 5px; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; transition: all 0.15s;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif;
}
.forge-app .btn-fontstyle:hover { border-color: var(--neutral-300); color: var(--text); }
.forge-app .btn-fontstyle.active { background: var(--accent-glow); border-color: var(--primary-500); color: var(--primary-500); }

/* ══════════════════════════════════════════════════════════════
   ICON PICKER
══════════════════════════════════════════════════════════════ */
.forge-app .icon-picker-wrap { margin-top: 0.4rem; border: 1px solid var(--sand-300); border-radius: 6px; overflow: hidden; }
.forge-app .icon-picker-header { display: flex; align-items: center; justify-content: space-between; background: var(--sand-200); padding: 0.3rem 0.6rem; cursor: pointer; user-select: none; transition: background 0.15s; }
.forge-app .icon-picker-header:hover { background: var(--sand-300); }
.forge-app .icon-picker-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-label); }
.forge-app .icon-picker-toggle-icon { font-size: 0.72rem; color: var(--text-muted); transition: transform 0.2s; }
.forge-app .icon-picker-wrap.open .icon-picker-toggle-icon { transform: rotate(180deg); }
.forge-app .icon-picker-body { display: none; padding: 0.5rem; background: var(--sand-50); max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
.forge-app .icon-picker-wrap.open .icon-picker-body { display: block; }
.forge-app .icon-group-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin: 0.4rem 0 0.25rem; }
.forge-app .icon-group-label:first-child { margin-top: 0; }
.forge-app .icon-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.2rem; }
.forge-app .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: var(--sand-100); border: 1px solid var(--sand-300); border-radius: 6px; cursor: pointer;
  font-size: 15px; transition: all 0.15s; color: var(--text); padding: 0; line-height: 1; position: relative;
}
.forge-app .icon-btn:hover { background: var(--accent-glow); border-color: var(--primary-500); color: var(--primary-500); transform: scale(1.12); z-index: 2; }
.forge-app .icon-btn i.fak, .forge-app .icon-btn i.fa-kit { font-size: 15px; pointer-events: none; }

.forge-app .text-accent { color: var(--primary-500); }
.forge-app .divider { border-color: var(--sand-300); }

/* ══════════════════════════════════════════════════════════════
   ÉDITEUR DE TEXTE RICHE
══════════════════════════════════════════════════════════════ */
.forge-app .rte-wrapper { border: 1px solid var(--sand-300); border-radius: 7px; overflow: hidden; margin-bottom: 0.4rem; background: var(--sand-50); }
.forge-app .rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--sand-200); border-bottom: 1px solid var(--sand-300); flex-wrap: wrap; }
.forge-app .rte-sep { width: 1px; height: 16px; background: var(--neutral-300); margin: 0 3px; }
.forge-app .btn-rte {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted);
  font-size: 0.85rem; cursor: pointer; transition: all 0.15s; font-family: Georgia, 'Times New Roman', serif; line-height: 1;
}
.forge-app .btn-rte:hover { background: var(--sand-100); border-color: var(--sand-300); color: var(--text); }
.forge-app .btn-rte:active { background: var(--accent-glow); border-color: var(--primary-500); color: var(--primary-500); }
.forge-app .rte-editor {
  min-height: 72px; max-height: 180px; overflow-y: auto; padding: 0.45rem 0.55rem; background: var(--sand-50);
  color: var(--text); font-size: 0.85rem; line-height: 1.5; outline: none; scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent; word-break: break-word;
}
.forge-app .rte-editor:focus { background: var(--sand-100); }
.forge-app .rte-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; font-style: italic; }
.forge-app .rte-editor b, .forge-app .rte-editor strong { color: var(--primary-500); }
.forge-app .rte-editor i, .forge-app .rte-editor em { color: var(--neutral-700, #3d3226); }
.forge-app .rte-editor u { text-decoration: underline; text-underline-offset: 2px; }
.forge-app .rte-editor s, .forge-app .rte-editor strike { color: var(--text-muted); }
.forge-app .altered-icon-span { display: inline-block; font-size: 1em; user-select: all; cursor: default; color: var(--primary-500); }

/* ══════════════════════════════════════════════════════════════
   MODALES CUSTOM (.fcm-* / .ejm-*) — non Bootstrap, stylées via tokens
══════════════════════════════════════════════════════════════ */
.fcm-backdrop {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.fcm-backdrop.visible { opacity: 1; pointer-events: all; }
.fcm-dialog {
  background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 12px;
  padding: 1.25rem 1.4rem 1.1rem; max-width: 380px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3); transform: translateY(10px); transition: transform 0.18s; margin: auto; color: var(--neutral-800);
}
.fcm-backdrop.visible .fcm-dialog { transform: translateY(0); }
.fcm-dialog--wide { max-width: 560px; }
.fcm-dialog--xl { max-width: 720px; }
.ejm-tabs { display: flex; gap: .4rem; margin-bottom: .75rem; }
.ejm-tab { flex: 1; padding: .3rem .5rem; font-size: .78rem; border: 1px solid var(--sand-300); border-radius: 5px; background: transparent; color: var(--neutral-500); cursor: pointer; transition: background .15s, color .15s; }
.ejm-tab:hover { background: var(--sand-200); color: var(--neutral-800); }
.ejm-tab--active { background: var(--primary-400); border-color: var(--primary-400); color: #1a1206; font-weight: 600; }
.ejm-pre { font-family: monospace; font-size: .74rem; line-height: 1.5; background: var(--sand-100); border: 1px solid var(--sand-300); border-radius: 6px; padding: .75rem; max-height: 55vh; overflow-y: auto; white-space: pre; color: var(--neutral-800); margin-bottom: .85rem; user-select: text; }
.fcm-help-body { font-size: 0.85rem; color: var(--neutral-600); line-height: 1.6; margin-bottom: 1rem; }
.fcm-help-body h6 { font-size: 0.82rem; font-weight: 700; color: var(--neutral-800); margin: 0.85rem 0 0.2rem; }
.fcm-help-body ul { margin: 0; padding-left: 1.2rem; }
.fcm-help-body li { margin-bottom: 0.2rem; }
.fcm-help-body .fcm-help-warn { background: var(--notice-warning-bg, #fef3c7); border-left: 3px solid var(--notice-warning-border, #f59e0b); border-radius: 0 5px 5px 0; padding: 0.5rem 0.75rem; margin: 0.5rem 0 0.75rem; font-size: 0.8rem; color: var(--notice-warning-text, #92400e); line-height: 1.5; }
.fcm-help-body .chip { display: inline-block; background: var(--sand-100); border: 1px solid var(--sand-300); border-radius: 5px; padding: 0 0.35rem; font-size: 0.74rem; font-weight: 600; color: var(--primary-500); vertical-align: middle; }
.fcm-title { font-size: 0.98rem; font-weight: 700; color: var(--primary-500); margin-bottom: 0.4rem; }
.fcm-desc { font-size: 0.82rem; color: var(--neutral-600); margin-bottom: 1rem; line-height: 1.5; }
.fcm-actions { display: flex; flex-direction: column; gap: 0.45rem; }
.fcm-btn { width: 100%; padding: 0.5rem 0.8rem; border-radius: 7px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-align: left; transition: all 0.15s; line-height: 1.4; }
.fcm-btn-secondary { background: var(--sand-200); border-color: var(--sand-300); color: var(--neutral-800); }
.fcm-btn-secondary:hover { border-color: var(--primary-500); background: var(--accent-glow); color: var(--primary-500); }
.fcm-btn-danger { background: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, transparent); border-color: color-mix(in srgb, var(--bs-danger, #dc3545) 40%, transparent); color: var(--bs-danger, #dc3545); }
.fcm-btn-danger:hover { background: color-mix(in srgb, var(--bs-danger, #dc3545) 22%, transparent); border-color: var(--bs-danger, #dc3545); }
.fcm-btn-ghost { background: transparent; border-color: transparent; color: var(--neutral-500); }
.fcm-btn-ghost:hover { color: var(--neutral-800); background: var(--sand-200); }

/* ══════════════════════════════════════════════════════════════
   MOBILE (< 992px) — colonnes empilées, aperçu non sticky
══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .forge-app .main-layout { flex-direction: column; gap: 1rem; }
  .forge-app .preview-pane { position: static; flex: 0 0 auto; width: 100%; max-width: 100%; }
  .forge-app #cardCanvas { max-height: 62vh; margin: 0 auto; }
  .forge-app .settings-pane { width: 100%; }
}
@media (max-width: 575.98px) {
  .forge-app #cardCanvas { max-height: 70vh; }
  .forge-app .slider-row { grid-template-columns: 1fr; }
}