<!-- ============================================================
     ÉTAPE 1 — Informations de la formation
     ============================================================ -->

/* ============================================================
   LAYOUT 2 COLONNES
   ============================================================ */
.formation-root {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
  font-family: 'DM Sans', sans-serif;
  color: #0f0f0f;
}

.formation-left  { display: flex; flex-direction: column; gap: 12px; }
.formation-right { position: sticky; top: 24px; }

/* ============================================================
   STEPPER
   ============================================================ */
.stepper {
  display: flex; background: #fff;
  border: 1px solid #e8e8e4; border-radius: 16px; overflow: hidden;
}

.step {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; position: relative;
}
.step + .step::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); height: 60%; width: 1px; background: #e8e8e4;
}

.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.step.active  .step-num { background: #111112; color: #fff; }
.step.inactive .step-num { background: #f0f0ee; color: #9a9a9a; }

.step-info { display: flex; flex-direction: column; gap: 1px; }
.step-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.step.active  .step-label { color: #111112; }
.step.inactive .step-label { color: #9a9a9a; }
.step-sublabel { font-size: 0.72rem; color: #9a9a9a; }

/* ============================================================
   CARDS FORMULAIRE
   ============================================================ */
.form-card { background: #fff; border-radius: 16px; border: 1px solid #e8e8e4; overflow: hidden; }

.form-card-header {
  padding: 14px 20px; border-bottom: 1px solid #e8e8e4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.form-card-title {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: #9a9a9a;
}

.optional-badge {
  font-size: 0.68rem; color: #b0b0aa; font-style: italic;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}

.form-card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   CHAMPS
   ============================================================ */
.field-group  { display: flex; flex-direction: column; gap: 5px; }
.field-label  { font-size: 0.78rem; font-weight: 600; color: #0f0f0f; }
.field-desc   { font-size: 0.72rem; color: #9a9a9a; line-height: 1.4; }

.field-input, .field-textarea {
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
  padding: 9px 12px; border: 1.5px solid #e8e8e4; border-radius: 8px;
  color: #0f0f0f; outline: none; width: 100%; transition: border-color 0.15s;
  background: #fff; box-sizing: border-box;
}
.field-input:focus, .field-textarea:focus { border-color: #2563eb; }
.field-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

/* Validation error state */
.field-input.input-error, .field-textarea.input-error { border-color: #ef4444 !important; background: #fff5f5; }
.field-error-msg { font-size: 0.72rem; color: #ef4444; margin-top: 2px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.field-with-unit { display: flex; align-items: center; gap: 8px; }
.field-unit { font-size: 0.78rem; color: #9a9a9a; white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   EXEMPLE TRIGGER
   ============================================================ */
.example-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none; width: fit-content;
}
.example-trigger-icon { font-size: 1.2rem; line-height: 1; }
.example-trigger-text {
  font-size: 0.8rem; color: #9a9a9a;
  text-decoration: underline; text-underline-offset: 2px;
}
.example-trigger:hover .example-trigger-text { color: #2563eb; }

/* ============================================================
   UPLOAD
   ============================================================ */
.upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #111112; color: #fff;
  border-radius: 8px; font-size: 0.78rem; font-family: 'DM Sans', sans-serif;
  font-weight: 500; cursor: pointer; transition: background 0.15s;
  border: none; width: fit-content;
}
.upload-btn:hover { background: #3B3B3B; }
.upload-status { font-size: 0.72rem; color: #9a9a9a; margin-top: 4px; }

/* ============================================================
   TAGS COMPÉTENCES
   ============================================================ */
.tag-input-wrapper { display: flex; gap: 8px; }

.tag-input {
  flex: 1; padding: 9px 12px; border: 1.5px solid #e8e8e4;
  border-radius: 8px; font-size: 0.85rem; font-family: 'DM Sans', sans-serif;
  outline: none; transition: border-color 0.15s; background: #fff; color: #0f0f0f;
}
.tag-input:focus { border-color: #111112; }

.tag-add-btn {
  padding: 9px 16px; background: #111112; color: #fff; border: none;
  border-radius: 8px; font-size: 0.78rem; font-family: 'DM Sans', sans-serif;
  cursor: pointer; font-weight: 500; transition: background 0.15s; white-space: nowrap;
}
.tag-add-btn:hover { background: #3B3B3B; }

.tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.tag-item {
  display: flex; align-items: center; gap: 6px; background: #2563eb;
  border-radius: 7px; padding: 5px 12px; font-size: 0.75rem; color: #fff;
}
.tag-remove { cursor: pointer; font-weight: bold; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1; }
.tag-remove:hover { color: #fff; }

/* ============================================================
   RICH TEXT
   ============================================================ */
.richtext-wrapper { border: 1.5px solid #e8e8e4; border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.richtext-wrapper:focus-within { border-color: #2563eb; }

.richtext-toolbar {
  display: flex; gap: 2px; padding: 6px 8px;
  background: #fafaf8; border-bottom: 1px solid #e8e8e4; flex-wrap: wrap;
}

.rt-btn {
  padding: 4px 8px; background: none; border: none; border-radius: 5px;
  cursor: pointer; font-size: 0.78rem; font-family: 'DM Sans', sans-serif;
  font-weight: 600; color: #555; transition: background 0.1s, color 0.1s; line-height: 1.4;
}
.rt-btn:hover { background: #e8e8e4; color: #111; }

.richtext-editor {
  min-height: 120px; padding: 12px; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; line-height: 1.6; color: #0f0f0f;
}
.richtext-editor ul, .richtext-editor ol { padding-left: 20px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.faq-item {
  background: #fafaf8; border: 1px solid #e8e8e4; border-radius: 10px;
  padding: 12px 14px; position: relative;
}
.faq-item-question { font-size: 0.82rem; font-weight: 600; color: #0f0f0f; margin-bottom: 4px; padding-right: 24px; }
.faq-item-answer { font-size: 0.78rem; color: #6b6b6b; line-height: 1.4; }
.faq-item-remove {
  position: absolute; top: 10px; right: 12px; background: none;
  border: none; color: #9a9a9a; cursor: pointer; font-size: 13px; line-height: 1;
}
.faq-item-remove:hover { color: #ef4444; }

.faq-add-zone {
  background: #fafaf8; border: 1.5px dashed #e8e8e4;
  border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
}

.faq-add-btn {
  padding: 9px; background: #111112; color: #fff; border: none;
  border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: background 0.15s; width: 100%;
}
.faq-add-btn:hover { background: #3B3B3B; }

/* ============================================================
   BOUTON ÉTAPE SUIVANTE
   ============================================================ */
.next-step-btn {
  padding: 13px 28px; background: #111112; color: #fff; border: none;
  border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
  font-weight: 600; cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; gap: 8px; align-self: flex-start;
}
.next-step-btn:hover { background: #3B3B3B; }
.next-step-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   PREVIEW CARD (sticky droite)
   ============================================================ */
.preview-card { background: #fff; border-radius: 16px; border: 1px solid #e8e8e4; overflow: hidden; }

.preview-header {
  padding: 12px 16px; border-bottom: 1px solid #e8e8e4;
  display: flex; align-items: center; justify-content: space-between;
}
.preview-header-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9a9a9a; }

.preview-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.preview-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Icon + thème */
.preview-icon-row { display: flex; align-items: center; gap: 10px; }

.preview-theme-badge {
  display: flex; align-items: center; gap: 5px;
  background: #f5f5f3; border: 1px solid #e8e8e4;
  border-radius: 8px; padding: 5px 10px;
}
.preview-theme-text { font-size: 0.82rem; font-weight: 700; color: #111112; min-width: 16px; }

.preview-icon-wrapper {
  position: relative; width: 42px; height: 42px; flex-shrink: 0;
}

/* CSS-only contour : cercle blanc avec double bordure + ombre portée */
.preview-icon-circle {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #d0d0cc;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px #e4e4e0;
  z-index: 2;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.preview-icon-inner {
  width: 60%; height: 60%; object-fit: contain; z-index: 1; border-radius: 50%;
}

.preview-icon-placeholder {
  width: 40%; height: 40%; background: #e4e4e0; border-radius: 50%;
}

/* Titre */
.preview-titre {
  font-size: 1rem; font-weight: 700; line-height: 1.3; color: #111112; min-height: 22px;
}
.preview-titre-empty { color: #ccc; font-weight: 400; font-size: 0.85rem; }

/* Rating */
.preview-rating { display: flex; flex-direction: column; gap: 3px; }
.preview-rating-label { font-size: 0.72rem; font-weight: 600; color: #0f0f0f; }
.preview-rating-row { display: flex; align-items: center; gap: 6px; }
.preview-stars { display: flex; gap: 1px; }
.preview-star { font-size: 0.8rem; }
.preview-avis { font-size: 0.72rem; color: #9a9a9a; }

/* Cover */
.preview-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; display: block; }
.preview-cover-placeholder {
  width: 100%; aspect-ratio: 16/9; background: #f0f0ee; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: #b0b0aa; font-style: italic;
}

/* Description courte */
.preview-desc { font-size: 0.78rem; line-height: 1.5; color: #555; min-height: 16px; }
.preview-desc-empty { color: #ccc; font-style: italic; }

/* Stats */
.preview-stats {
  background: #fafaf8; border: 1px solid #e8e8e4;
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.preview-stat-row { display: flex; align-items: center; gap: 8px; }
.preview-stat-icon { font-size: 0.95rem; flex-shrink: 0; }
.preview-stat-text { font-size: 0.78rem; color: #555; }

/* Prix */
.preview-prix-btn {
  width: 100%; padding: 11px;
  background: #111112; color: #fff; border-radius: 10px;
  text-align: center; font-size: 0.88rem; font-weight: 700; line-height: 1.4;
}

/* Formateur */
.preview-formateur {
  border: 1px solid #e8e8e4; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.preview-formateur-top { display: flex; align-items: center; gap: 10px; }
.preview-formateur-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid #e8e8e4; flex-shrink: 0; background: #f0f0ee;
}
.preview-formateur-infos { display: flex; flex-direction: column; gap: 2px; }
.preview-formateur-name { font-size: 0.85rem; font-weight: 700; color: #111112; }
.preview-formateur-headline { font-size: 0.72rem; color: #9a9a9a; font-style: italic; }

.preview-services { display: flex; gap: 6px; flex-wrap: wrap; }
.preview-service-badge {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 20px; font-size: 0.7rem; font-weight: 600;
}
.preview-service-badge.coaching  { background: #fff0db; color: #b45309; }
.preview-service-badge.freelance { background: #dbeafe; color: #1d4ed8; }

.preview-voir-fiche { font-size: 0.72rem; color: #2563eb; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; width: fit-content; }

/* ============================================================
   POPUPS
   ============================================================ */
.popup-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;
}
.popup-overlay.active { display: flex; }

.popup-box {
  background: #fff; border-radius: 16px; padding: 24px 32px 32px 32px;
  max-width: 620px; width: 90%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Sticky close button stays visible while scrolling */
.popup-close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  font-size: 20px; cursor: pointer; color: #888; font-weight: bold;
  line-height: 1; background: none; border: none;
  margin-bottom: 4px;
  z-index: 10;
  flex-shrink: 0;
}
.popup-close:hover { color: #111; }
.popup-title { font-weight: 700; font-size: 1.05rem; color: #111; margin-bottom: 24px; }
.popup-example { margin-bottom: 24px; }
.popup-example-label {
  font-weight: 600; font-size: 0.78rem; color: #2563eb;
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}
.popup-example p { font-size: 0.88rem; line-height: 1.5; color: #111; margin: 0 0 8px 0; }
.popup-example-images { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.popup-example-img-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.72rem; color: #9a9a9a; }
.popup-example-img-item img {
  width: 64px; height: 64px; object-fit: contain; border-radius: 8px;
  border: 1px solid #e8e8e4; background: #fafaf8; padding: 6px;
}
.popup-divider { border: none; border-top: 1px solid #eee; margin: 20px 0; }

@media (max-width: 900px) {
  .formation-root  { grid-template-columns: 1fr; }
  .formation-right { position: static; }
  .field-row       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}


/* ============================================================
   DR-COURSE STEP 2 — CSS
   DM Sans · #111112 · #2563eb · blanc · gris léger
   ============================================================ */

.builder-root *, .builder-root *::before, .builder-root *::after { box-sizing: border-box; }

.builder-root {
  font-family: 'DM Sans', sans-serif;
  color: #111112;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── STEPPER ── */
.stepper { display:flex; background:#fff; border:1px solid #e8e8e4; border-radius:16px; overflow:hidden; }
.step { flex:1; display:flex; align-items:center; gap:12px; padding:16px 24px; position:relative; }
.step + .step::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:60%; width:1px; background:#e8e8e4; }
.step-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
.step.done   .step-num { background:#22c55e; color:#fff; }
.step.active .step-num { background:#111112; color:#fff; }
.step-info { display:flex; flex-direction:column; gap:2px; }
.step-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.step.done   .step-label { color:#22c55e; }
.step.active .step-label { color:#111112; }
.step-sublabel { font-size:.72rem; color:#9a9a9a; }

/* ── CHAPTER LIST ── */
.chapter-list { display:flex; flex-direction:column; gap:20px; }

/* ── CHAPTER CARD ── */
.chapter-card { background:#fff; border:1.5px solid #e0e7ff; border-radius:16px; overflow:hidden; }
.chapter-card.drag-over { box-shadow:0 0 0 2px #2563eb; }
.chapter-card.dragging  { opacity:.5; }

.chapter-header {
  padding:14px 20px; background:#f8faff;
  border-bottom:1px solid #e0e7ff;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.chapter-drag-handle { cursor:grab; color:#93c5fd; font-size:1.1rem; flex-shrink:0; user-select:none; }
.chapter-drag-handle.disabled { cursor:default; opacity:.3; }

.chapter-badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#2563eb; flex-shrink:0; white-space:nowrap; }

.chapter-title-input {
  font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:600;
  padding:6px 12px; border:1.5px solid #dbeafe; border-radius:8px;
  color:#111112; outline:none; background:#fff; flex:1; min-width:160px;
  transition:border-color .15s;
}
.chapter-title-input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.chapter-title-input:disabled { background:transparent; border-color:transparent; color:#6b7280; cursor:default; }

.chapter-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.chapter-meta-item {
  display:flex; align-items:center; gap:4px;
  background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px;
  padding:4px 10px; font-size:.72rem; color:#2563eb; font-weight:600;
}

.chapter-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.btn-delete-chapter { background:none; border:none; cursor:pointer; padding:5px 8px; border-radius:6px; color:#d1d5db; font-size:1rem; transition:color .15s,background .15s; }
.btn-delete-chapter:hover { color:#ef4444; background:#fff1f2; }

/* ── MODULES LIST ── */
.modules-list { padding:12px 16px; display:flex; flex-direction:column; gap:8px; }

/* ── BOUTON AJOUTER MODULE ── */
.btn-add-module-row { padding:4px 16px 16px; }
.btn-add-module-main {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 16px;
  background:#fff; color:#2563eb;
  border:1.5px dashed #93c5fd; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.btn-add-module-main:hover { background:#eff6ff; border-style:solid; }

/* ── MODULE ITEM ── */
.module-item {
  background:#fff; border:1.5px solid #e8e8e4; border-radius:12px;
  overflow:hidden; transition:border-color .15s;
}
.module-item:hover { border-color:#c7d2fe; }
.module-item.is-required { border-color:#bfdbfe; background:#f8fbff; }
.module-item.locked-upload { border-color:#fbbf24; }
.module-item.dragging  { opacity:.4; }
.module-item.drag-over { box-shadow:0 0 0 2px #2563eb; }

/* ── MODULE HEADER ── */
.module-header {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; cursor:pointer;
  background:transparent; transition:background .1s;
}
/* pas de hover sur module-header */

.module-drag-handle { cursor:grab; color:#cbd5e1; font-size:.9rem; flex-shrink:0; user-select:none; }
.module-drag-handle.disabled { cursor:default; opacity:.3; }

.module-order-badge {
  width:22px; height:22px; border-radius:50%;
  background:#111112; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700; flex-shrink:0;
}
.module-item.is-required .module-order-badge { background:#2563eb; }

.module-title-display { font-size:.85rem; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#111112; }
.module-title-display.empty { color:#9ca3af; font-style:italic; }

.module-status-pill { font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.status-idle      { background:#f3f4f6; color:#6b7280; }
.status-uploading { background:#fef3c7; color:#b45309; }
.status-checking  { background:#ede9fe; color:#7c3aed; }
.status-uploaded  { background:#dcfce7; color:#15803d; }
.status-error     { background:#fee2e2; color:#b91c1c; }
.status-required  { background:#dbeafe; color:#1d4ed8; }

.module-chevron { font-size:.7rem; color:#9ca3af; transition:transform .2s; flex-shrink:0; }
.module-item.open .module-chevron { transform:rotate(180deg); }

/* ── MODULE BODY ── */
.module-body {
  display:none; flex-direction:column; gap:0;
  border-top:1px solid #f1f5f9;
}
.module-item.open .module-body { display:flex; }

/* Titre full-width */
.module-title-section {
  padding:16px 18px 0;
}

/* Grid 2 col */
.module-grid {
  display:grid; grid-template-columns:1fr 1.8fr; gap:0;
  border-top:1px solid #f1f5f9; margin-top:14px;
}

.module-col-left {
  padding:16px 18px;
  border-right:1px solid #f1f5f9;
  display:flex; flex-direction:column; gap:12px;
}

.module-col-right { padding:16px 18px; }

/* ── CHAMPS ── */
.module-field { display:flex; flex-direction:column; gap:6px; }
.module-label { font-size:.7rem; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.06em; }

.module-input {
  font-family:'DM Sans',sans-serif; font-size:.85rem;
  padding:9px 12px; border:1.5px solid #e5e7eb; border-radius:8px;
  color:#111112; outline:none; background:#fff; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.module-input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.module-input:disabled { background:#f8fafc; color:#94a3b8; }
.module-input.error { border-color:#ef4444; }

/* Durée : DM Mono bien lisible */
.dur-input {
  font-family:'DM Mono', monospace !important;
  font-size:.95rem !important;
  letter-spacing:.08em;
  text-align:center;
  padding:10px 12px;
}

/* ── ZONE UPLOAD ── */
.upload-zone {
  border:1.5px dashed #d1d5db; border-radius:10px;
  background:#fafafa; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s, background .2s;
}
.upload-zone.has-video { border-style:solid; border-color:#86efac; background:#f0fdf4; }

.upload-btn-row { display:flex; align-items:center; gap:12px; }

.upload-file-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; background:#111112; color:#fff;
  border:none; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600;
  cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s;
}
.upload-file-btn:hover    { background:#374151; }
.upload-file-btn:disabled { opacity:.5; cursor:not-allowed; }

.upload-filename { font-family:'DM Mono',monospace; font-size:.72rem; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

.upload-progress-bar { width:100%; height:5px; background:#e5e7eb; border-radius:20px; overflow:hidden; }
.upload-progress-fill { height:100%; background:#2563eb; border-radius:20px; transition:width .3s ease; width:0%; }
.upload-progress-fill.success { background:#22c55e; }
.upload-progress-fill.error   { background:#ef4444; }

.upload-status-text { font-size:.74rem; color:#6b7280; font-weight:500; min-height:16px; }

/* Player Vimeo — affiché à droite dans la 2e colonne */
.upload-vimeo-player {
  width:100%; aspect-ratio:16/9;
  border-radius:8px; border:none; background:#0f0f0f; display:block;
}

/* ── ACTIONS MODULE ── */
.module-actions-row {
  display:flex; align-items:center;
  padding:10px 18px 14px; border-top:1px solid #f1f5f9;
}
.module-delete-btn {
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:500;
  color:#ef4444; display:flex; align-items:center; gap:5px;
  padding:4px 0; transition:opacity .15s;
}
.module-delete-btn:hover { opacity:.7; }
.module-fixed-note { font-size:.7rem; color:#9ca3af; font-style:italic; }

/* ── BONUS SECTION ── */
.bonus-section { border-top:1px dashed #bfdbfe; padding:14px 0 4px; margin:4px 0; display:flex; flex-direction:column; gap:10px; }
.bonus-label { font-size:.68rem; font-weight:700; color:#2563eb; text-transform:uppercase; letter-spacing:.08em; }
.bonus-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.btn-add-bonus {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; background:#eff6ff; color:#2563eb;
  border:1.5px solid #bfdbfe; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.btn-add-bonus:hover { background:#dbeafe; }

.btn-see-examples {
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.75rem; color:#6b7280;
  display:flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:6px; transition:color .15s, background .15s;
}
.btn-see-examples:hover { color:#111112; background:#f3f4f6; }
.bonus-hint { font-size:.72rem; color:#9ca3af; }

/* ── ADD CHAPTER BTN ── */
.btn-add-chapter {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 20px;
  background:#fff; color:#374151;
  border:1.5px dashed #d1d5db; border-radius:16px;
  font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.btn-add-chapter:hover { background:#f9fafb; border-color:#9ca3af; border-style:solid; }

/* ── BOTTOM BAR ── */
.builder-bottom {
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:16px 20px;
  background:#fff; border:1px solid #e8e8e4; border-radius:16px;
}
.btn-save {
  padding:10px 20px; background:#f3f4f6; color:#374151;
  border:1.5px solid #e5e7eb; border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.btn-save:hover { background:#e5e7eb; }
.btn-publish {
  padding:10px 22px; background:#2563eb; color:#fff;
  border:none; border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700;
  cursor:pointer; transition:background .15s;
}
.btn-publish:hover { background:#1d4ed8; }

/* ── POPUP / CONFIRM ── */
.popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; align-items:center; justify-content:center; }
.popup-overlay.active { display:flex; }
.popup-box { background:#fff; border-radius:16px; padding:24px 28px 28px; max-width:500px; width:92%; max-height:85vh; overflow-y:auto; display:flex; flex-direction:column; }
.popup-close-row { display:flex; justify-content:flex-end; margin-bottom:6px; }
.popup-close-btn { background:none; border:none; font-size:18px; cursor:pointer; color:#9ca3af; padding:2px 6px; border-radius:4px; transition:color .1s; }
.popup-close-btn:hover { color:#111112; }
.popup-title    { font-weight:700; font-size:1rem; color:#111112; margin-bottom:6px; }
.popup-subtitle { font-size:.78rem; color:#6b7280; margin-bottom:16px; }
.example-list { display:flex; flex-direction:column; gap:8px; }
.example-item-static { padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.85rem; color:#374151; background:#f9fafb; }
.confirm-actions { display:flex; gap:8px; margin-top:20px; justify-content:flex-end; }
.btn-confirm-cancel { padding:8px 18px; background:#f3f4f6; color:#374151; border:1.5px solid #e5e7eb; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; cursor:pointer; }
.btn-confirm-delete { padding:8px 18px; background:#ef4444; color:#fff; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; cursor:pointer; }
.btn-confirm-delete:hover { background:#dc2626; }

/* ── TOAST ── */
.builder-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#111112; color:#fff; padding:10px 22px; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:500;
  z-index:99999; opacity:0; pointer-events:none; transition:opacity .3s; white-space:nowrap;
}
.builder-toast.show { opacity:1; }

/* ── Durée input erreur message ── */
.dur-error-msg {
  font-size:.72rem; color:#ef4444; font-weight:500; margin-top:4px;
  display:none;
}
.dur-error-msg.visible { display:block; }

/* ── Inputs totaux cachés ── */
#input-total-modules, #input-total-duration { display:none; }

/* ── RESPONSIVE ── */
@media (max-width:700px) {
  .module-grid { grid-template-columns:1fr; }
  .module-col-left { border-right:none; border-bottom:1px solid #f1f5f9; padding-bottom:14px; }
  .chapter-meta { flex-wrap:wrap; }
}