@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root{
  --bg:#0b1020;
  --panel:#11172a;
  --line:#1e2740;
  --text:#e7ecf7;
  --muted:#9aa6c7;
  --brand:#7aa0ff;
  --ok:#2ecc71;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

html{
  background: #0b1020; /* anti flash blanc */
}

body{
  margin: 0;
  font-family:'Open Sans',system-ui,Arial,sans-serif;
  color: var(--text);
  background: transparent; /* IMPORTANT */
}

.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* 100% stable, pas de répétition */
  background:
    radial-gradient(1400px 800px at 20% -10%, #162048 0%, #0b1020 70%),
    #0b1020;

  background-repeat: no-repeat;
  background-position: top center;
}

a{ color:inherit; text-decoration:none; }

/* ===== UI basics ===== */

.btn{
  background:#1a2340;
  border:1px solid var(--line);
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.ok{ background:#1f3b2b; border-color:#1f5a3f; }
.btn.danger{ background:#3a1f25; border-color:#5a1f2a; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.input{
  background:#0e1430;
  border:1px solid var(--line);
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  width:100%;
}

.badge{
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
}
.badge.draft{ background:#2a2430; }
.badge.pub{ background:#20382b; border-color:#2e6b4a; }

.muted{
  color:var(--muted);
  font-size:13px;
}

/* ===== Topbar ===== */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(11,16,32,.85), rgba(11,16,32,.65));
  border-bottom:1px solid var(--line);
}
.topbar .row{
  max-width:1400px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar .sub{
  font-size:12px;
  color:var(--muted);
  opacity:0.9;
}

.titleInput{
  background:#0e1430;
  border:1px solid var(--line);
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  min-width:260px;
}

/* ===== Layout ===== */

.container{
  max-width:1400px;
  margin:0 auto;
  padding:16px;
  background: transparent;
}

.editorGrid{
  display:grid;
  grid-template-columns: minmax(560px, 3fr) 2fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 900px){
  .editorGrid{ grid-template-columns: 1fr; }
}

/* ===== Panels ===== */

.canvas, .sidebar{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.canvasHead, .sidebarHead{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.sep{
  height:1px;
  background:var(--line);
  margin:10px 0;
}

.shareBox{
  padding:10px;
  display:grid;
  gap:8px;
}

/* ===== Dropzone ===== */

.dropzone{
  border:1px dashed #2a3550;
  border-radius:12px;
  padding:12px;
  text-align:center;
  color:var(--muted);
  cursor:pointer;
}

/* ===== Frame / slide ===== */

.frame{
  position: relative;
  background: #0b1020;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* important pour éviter débordements */
}

/* Media responsive et stable */
.slide{
  width: 100%;
  height: auto;            /* ? garde le ratio */
  max-width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform .2s ease;
  object-fit: contain;     /* ? évite les déformations */
}

.slide[hidden]{
  display:none !important;
}

.mediaVideo{
  background:#000;
}

/* ===== Loading ===== */

.loadingOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:.15s;
}
.loadingOverlay.show{ opacity:1; pointer-events:auto; }

.spinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ===== Hotspot ===== */

.hotspot{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  cursor:pointer;
  z-index:6;

  /* centre rouge */
  background:#ff3b3b;
  border:2px solid #7a0000;

  /* pulse blanc */
  box-shadow:
    0 0 0 0 rgba(255,255,255,.9),
    0 0 0 6px rgba(255,255,255,.35),
    0 10px 24px rgba(0,0,0,.35);

  animation: hotspotPulse 1.6s infinite;
}

@keyframes hotspotPulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(255,255,255,.9),
      0 0 0 6px rgba(255,255,255,.35),
      0 10px 24px rgba(0,0,0,.35);
  }
  70%{
    box-shadow:
      0 0 0 12px rgba(255,255,255,0),
      0 0 0 6px rgba(255,255,255,.2),
      0 10px 24px rgba(0,0,0,.35);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 6px rgba(255,255,255,.35),
      0 10px 24px rgba(0,0,0,.35);
  }
}

/* ===== Bubble ===== */

.bubble{
  position:absolute;
  max-width:360px;
  min-width:220px;
  z-index:7;
  background: linear-gradient(180deg, #141b2a, #0f1522);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  color:#fff;
  font-size:13px;
  line-height:1.45;
  backdrop-filter: blur(6px);
}

/* ?? Pas de flèche, pas de point noir */
.bubble:after{
  display:none !important;
}

.bubble textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0b1020;
  color:#fff;
  padding:8px;
}

/* ===== Steps list ===== */

.steps{ display:grid; gap:8px; padding:10px; }

.stepItem{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#0e1430;
  cursor:pointer;
}
.stepItem.active{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(122,160,255,.25);
}

.stepThumb{ width:72px; height:56px; object-fit:cover; display:block; }
.stepThumbVideo{
  width:72px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(122,160,255,.28), rgba(0,0,0,0)),
    rgba(255,255,255,.05);
  color:#dbe6ff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
}

.stepBody{ padding:6px 8px; }

.stepTitle{
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stepSub{ font-size:12px; color:var(--muted); }

.stepActions{ display:flex; gap:4px; padding-right:6px; }

/* ===== Empty states ===== */

.canvas.empty .frame{ display:none; }
.canvas.empty .emptyState{ display:block; }

.emptyState{
  border:1px solid var(--line);
  border-radius:16px;
  background: linear-gradient(180deg, #11172a, #0b1020);
  box-shadow: var(--shadow);
  padding:28px;
  text-align:left;
  display:none;
  margin:16px;
}

.emptyState h2{
  margin:0 0 10px 0;
  font-size:20px;
  font-weight:800;
}

.emptyState p{
  margin:0 0 16px 0;
  color:var(--muted);
  line-height:1.5;
}

.emptyActions{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.emptyHint{
  font-size:12px;
  color:var(--muted);
  opacity:0.9;
}

.stepsEmpty{
  color:var(--muted);
  font-size:13px;
  padding:10px;
  border:1px dashed var(--line);
  border-radius:12px;
  background: rgba(255,255,255,0.02);
  margin:12px;
}

/* ===== Hints ===== */

.editorHints{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 16px 14px 16px;
}

.editorHint{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(255,255,255,0.03);
}

/* ===== HOME visiteurs ===== */

.hero{
  max-width:1100px;
  margin:70px auto 40px;
  padding:0 20px;
  text-align:center;
  background: transparent;
}

.hero h1{
  font-size:42px;
  margin:0 0 12px;
}

.heroSub{
  color:var(--muted);
  font-size:18px;
  margin-bottom:24px;
}

.heroActions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.demoGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  margin-top:24px;
}

.demoCard{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.demoCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}

.demoThumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

.demoBody{
  padding:12px;
}

.demoBody strong{
  display:block;
  margin-bottom:6px;
}

.demoThumb{
  height:140px;
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,0.04);
  border-bottom:1px solid var(--line);
}

.demoThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Fallback si jamais un guide n'a pas encore d'image */
.demoThumbPlaceholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(122,160,255,.25), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.demoThumbBadge{
  font-size:12px;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.25);
  color: var(--text);
}

/* ===== UX fixes: steps, editor mobile, home mobile ===== */
.stepItem{
  grid-template-columns: 72px minmax(0,1fr) auto;
}

.stepBody{
  min-width:0;
}

.stepTitle{
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.25;
  max-height:3em;
}

.stepActions{
  flex-shrink:0;
  align-items:center;
}

.canvasHead label{
  display:flex;
  align-items:center;
  gap:8px;
}

@media (max-width: 720px){
  .container{ padding:12px; }

  .frame{
    min-height:260px;
  }

  .bubble{
    min-width:0;
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    font-size:12px;
    padding:10px;
  }

  .bubble textarea{
    min-height:88px;
  }

  .stepItem{
    grid-template-columns: 62px minmax(0,1fr) auto;
    gap:6px;
  }

  .stepThumb,
  .stepThumbVideo{
    width:62px;
    height:52px;
  }

  .stepActions .btn.small{
    padding:5px 7px;
    font-size:11px;
  }

  .titleInput{
    min-width:0;
    width:100%;
  }

  .dropzone{
    width:100%;
  }
}

@media (max-width: 640px){
  .hero h1{
    font-size:30px;
    line-height:1.1;
  }

  .heroSub{
    font-size:16px;
  }

  .demoGrid{
    grid-template-columns: 1fr;
    gap:12px;
  }
}

/* ===== UX polish: autosave state and touch comfort ===== */
.bubbleActions{
  border-top:1px solid var(--line);
  padding-top:8px;
}

.bubbleActions .muted{
  opacity:.95;
}

@media (max-width: 720px){
  .topbar .row .btn{
    min-height:36px;
  }

  .stepItem,
  .stepActions .btn,
  .thumbItem,
  .btn,
  .dropzone{
    touch-action:manipulation;
  }
}