*{box-sizing:border-box}body{margin:0;background:#0b0d12;color:#f5f7fb;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:1100px;margin:auto;padding:32px 20px 60px}header{display:flex;gap:16px;align-items:center;margin-bottom:28px}.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#171b24;font-size:30px}h1{margin:0;font-size:30px}header p{margin:5px 0;color:#9aa3b2}.panel,.result-grid article,.columns article,.concept,.score-card{background:#121620;border:1px solid #252b38;border-radius:18px;padding:20px}.panel{margin-bottom:22px}label{display:block;margin:14px 0 7px;font-size:13px;color:#aab2c0}input,textarea{width:100%;background:#0d1017;border:1px solid #2b3240;border-radius:10px;color:#fff;padding:12px;font:inherit;outline:none}input:focus,textarea:focus{border-color:#6d78ff}.grid{display:grid;grid-template-columns:1fr 150px;gap:14px}button{margin-top:18px;width:100%;padding:14px;border:0;border-radius:12px;background:#fff;color:#0b0d12;font-weight:800;font-size:15px;cursor:pointer}button:disabled{opacity:.5;cursor:wait}#status{margin-top:12px;color:#9aa3b2}.hidden{display:none}.score-card{text-align:center;margin-bottom:14px}.score-card span{display:block;color:#aab2c0;font-size:13px}.score-card strong{font-size:52px;display:inline-block;margin-top:4px}.score-card small{color:#8d96a6}.scores{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:14px}.score{background:#121620;border:1px solid #252b38;border-radius:14px;padding:13px;text-align:center}.score b{display:block;font-size:24px}.score span{font-size:11px;color:#8f98a8}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.concept{margin-top:14px;border-color:#3a4160}h2{font-size:16px;margin:0 0 10px}p,li{color:#c4cad4;line-height:1.55}ul{padding-left:20px;margin:8px 0 0}@media(max-width:800px){.scores{grid-template-columns:repeat(4,1fr)}.columns,.result-grid{grid-template-columns:1fr}}
/* =========================================================
   LECTEUR VIDEO — FORMAT COMPACT
========================================================= */

.video-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.video-preview video {
  display: block;

  /* Taille maximale du lecteur */
  width: min(320px, 100%);

  /* Empêche la vidéo de devenir énorme */
  max-height: 520px;

  /* Garde le format original */
  height: auto;

  /* Rien n'est coupé */
  object-fit: contain;

  border-radius: 16px;

  background: #000;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.25);
}


/* Informations sous la vidéo */

.video-info {
  width: min(320px, 100%);

  display: flex;
  flex-direction: column;

  gap: 4px;

  margin-top: 10px;

  text-align: center;
}

.video-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-info span {
  font-size: 13px;
  opacity: 0.65;
}


/* Sur petit écran */

@media (max-width: 600px) {

  .video-preview video {
    width: min(280px, 90vw);
    max-height: 500px;
  }

  .video-info {
    width: min(280px, 90vw);
  }

}


/* =========================================================
   VIRAL STUDIO — TIMELINE ANALYSIS
========================================================= */

#timelineAnalysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.timeline-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.timeline-time {
  font-size: 18px;
  font-weight: 800;
}

.timeline-score {
  font-size: 18px;
  font-weight: 800;
}

.timeline-observation,
.timeline-problem,
.timeline-recommendation,
.timeline-editing-action {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

.timeline-observation p,
.timeline-problem p,
.timeline-recommendation p,
.timeline-editing-action p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.timeline-editing-action {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.timeline-editing-action strong {
  font-weight: 800;
}

.timeline-empty {
  padding: 20px;
  text-align: center;
  opacity: .7;
}