/* ==========================================================================
   Créer un objet
   ========================================================================== */

.compose {
  display: grid;
  min-height: calc(100dvh - 68px);
}
@media (min-width: 1000px) {
  .compose { grid-template-columns: minmax(0, 1fr) minmax(360px, 38%); }
}

.compose__form { padding: var(--s-6) var(--s-4) var(--s-9); }
@media (min-width: 700px) { .compose__form { padding-inline: var(--s-7); } }
.compose__inner { width: min(100%, 38rem); margin-inline: auto; }

/* --- progression ---------------------------------------------------------- */

.steps { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-6); flex-wrap: wrap; }
.step {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-tiny); font-weight: 600;
  color: var(--c-ink-faint);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: none; border: 0;
}
.step__dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.step.is-done { color: var(--c-success); }
.step.is-done .step__dot { background: var(--c-success); border-color: var(--c-success); color: #0C1410; }
.step.is-current { color: var(--c-ink); background: var(--c-accent-soft); }
.step.is-current .step__dot { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.step__arrow { color: var(--c-line-strong); }
@media (max-width: 560px) { .step:not(.is-current) .step__label { display: none; } }

.compose__title {
  font-family: var(--f-display);
  font-variation-settings: var(--vf-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: var(--ls-mega);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.compose__lede { color: var(--c-ink-soft); margin-bottom: var(--s-6); max-width: 34rem; }

.compose__fields { display: flex; flex-direction: column; gap: var(--s-5); }

.compose__foot {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.compose__save {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-tiny); color: var(--c-ink-faint); margin-right: auto;
}
.compose__save.is-saved { color: var(--c-success); }

/* --- choix de l'intention -------------------------------------------------- */

.picks { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .picks { gap: var(--s-3); } }

/* --- aperçu ---------------------------------------------------------------- */

.compose__preview {
  position: relative;
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in oklab, var(--object-glow) 14%, transparent) 0%, transparent 68%),
    var(--c-void);
  border-left: 1px solid var(--c-line);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: none;
  overflow-x: hidden;
}
@media (min-width: 1000px) {
  .compose__preview {
    display: block; position: sticky; top: 68px; align-self: start;
    height: calc(100dvh - 68px); overflow-y: auto;
  }
}
.compose__preview-label {
  font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink-faint); margin-bottom: var(--s-6); text-align: center;
}
.preview-card { width: min(100%, 20rem); margin-inline: auto; }

/* --- dépôt de fichiers ------------------------------------------------------ */

.dropzone {
  position: relative;
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-4);
  border: 1.5px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--c-accent) 4%, var(--c-surface));
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-ui), background-color var(--d-fast) var(--e-ui);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--c-accent) 9%, var(--c-surface));
}
.dropzone.is-over { border-style: solid; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon { color: var(--c-accent); }
.dropzone__hint { font-size: var(--t-tiny); color: var(--c-ink-faint); }

.upload-progress {
  width: 100%; height: 3px; border-radius: 3px;
  background: color-mix(in oklab, var(--c-ink) 10%, transparent);
  overflow: hidden; margin-top: var(--s-3);
}
.upload-progress span {
  display: block; height: 100%; background: var(--c-accent);
  animation: indeterminate 1.2s var(--e-ui) infinite;
}
@keyframes indeterminate {
  0% { transform: translateX(-100%) scaleX(0.4); }
  100% { transform: translateX(260%) scaleX(0.4); }
}

/* --- vignettes de médias choisis --------------------------------------------- */

.media-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--s-3);
}
.media-pick {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
}
.media-pick img, .media-pick video { width: 100%; height: 100%; object-fit: cover; }
.media-pick__badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4px 6px;
  background: rgba(6, 5, 10, 0.78);
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center;
  color: var(--c-accent);
}
.media-pick__tools {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 2px;
  opacity: 0; transition: opacity var(--d-fast) var(--e-ui);
}
.media-pick:hover .media-pick__tools, .media-pick:focus-within .media-pick__tools { opacity: 1; }
.media-pick__tools .icon-btn {
  width: 30px; height: 30px;
  background: rgba(6, 5, 10, 0.8);
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
}
.media-pick--add {
  display: grid; place-items: center; gap: 4px;
  border-style: dashed; cursor: pointer;
  color: var(--c-ink-faint);
}
.media-pick--add:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* --- gestion des médias (feuille) --------------------------------------------- */

.media-list { display: grid; gap: var(--s-3); }
.media-row {
  display: grid;
  grid-template-columns: auto 82px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.media-row__rank {
  font-family: var(--f-display); font-variation-settings: var(--vf-label);
  font-size: var(--t-small); color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums; width: 1.4rem; text-align: center;
}
.media-row__thumb {
  position: relative;
  width: 82px; height: 62px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--c-raised);
}
.media-row__thumb img, .media-row__thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-row__wave {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--c-accent);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab, var(--c-accent) 22%, transparent) 0 2px,
      transparent 2px 6px);
}
.media-row__kind {
  position: absolute; bottom: 2px; left: 2px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(6, 5, 10, 0.8);
  font-size: 9px; font-weight: 700; color: var(--c-accent);
}
.media-row__body { display: grid; gap: var(--s-2); min-width: 0; }
.media-row__body .input { min-height: 36px; padding: var(--s-2) var(--s-3); font-size: var(--t-small); }
.media-row__tools { display: flex; gap: 2px; }
.media-row__tools .icon-btn { width: 34px; height: 34px; }
.media-row__tools .icon-btn:disabled { opacity: 0.25; cursor: default; }

/* --- destinataire ------------------------------------------------------------- */

.destination-fields {
  padding: var(--s-5);
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--c-accent) 5%, transparent);
}

/* --- amorces narratives -------------------------------------------------------- */

.prompts { display: grid; gap: var(--s-3); }
.prompt-card {
  text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-ui), background-color var(--d-fast) var(--e-ui);
}
.prompt-card:hover { border-color: var(--c-line-strong); }
.prompt-card.is-selected {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--c-accent) 8%, var(--c-surface));
}
.prompt-card__q {
  display: block;
  font-family: var(--f-display); font-variation-settings: var(--vf-title);
  font-size: 1.14rem; line-height: 1.25;
}
.prompt-card__hint { display: block; font-size: var(--t-small); color: var(--c-ink-soft); margin-top: var(--s-2); }

.example {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--c-line-accent);
  font-family: var(--f-read); font-size: var(--t-small); font-style: italic;
  color: var(--c-ink-soft);
}

/* --- page « à propos » ---------------------------------------------------------- */

.about { width: var(--w-content); margin-inline: auto; padding-block: var(--s-8) var(--s-10); }
.about h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.about p { max-width: 40rem; color: var(--c-ink-soft); }
.about p + p { margin-top: var(--s-3); }
.credit-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.credit-list li { font-size: var(--t-tiny); color: var(--c-ink-faint); }
.credit-list a { color: var(--c-ink-soft); }