/* assets/styles/etape-form.css
 * Styles spécifiques au formulaire d'étape (templates/etape/form.html.twig).
 * Pour l'instant : panneau d'aperçu de la modale "Diff IA".
 */
.ai-diff-pane { max-height: 60vh; overflow: auto; background: var(--cx-surface, var(--bs-body-bg)); }
.ai-diff ins { background: rgba(40, 167, 69, .18); color: inherit; text-decoration: none; padding: 0 .15rem; border-radius: 2px; }
.ai-diff del { background: rgba(220, 53, 69, .18); color: inherit; text-decoration: line-through; padding: 0 .15rem; border-radius: 2px; }
[data-bs-theme="dark"] .ai-diff ins { background: rgba(40, 167, 69, .35); }
[data-bs-theme="dark"] .ai-diff del { background: rgba(220, 53, 69, .35); }

/* Blocs de modification cliquables (accepter / refuser individuellement). */
.ai-hunk { cursor: pointer; border-radius: 3px; outline: 1px dashed transparent; padding: 0 1px; transition: background-color .1s, outline-color .1s; }
.ai-hunk:hover { outline-color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), .06); }
.ai-hunk:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* Refusé : on masque le nouveau texte et on rend l'original normal (= conservé). */
.ai-hunk[data-state="reject"] ins { display: none; }
.ai-hunk[data-state="reject"] del { background: transparent; text-decoration: none; color: inherit; padding: 0; opacity: .85; }

/* En-tête collant du formulaire (nom de l'étape + « ? ») : fond opaque, la barre
   d'outils collante de l'éditeur se place juste dessous (toolbar_sticky_offset,
   tinymce/index.js). Hauteur fixe (titre sur une ligne) : ce décalage ne bouge pas
   quand le nom change. */
.etape-aide-collante { background: var(--bs-body-bg); }
.etape-entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.etape-entete-titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etape-entete-titre:empty::before { content: attr(data-vide); color: var(--bs-secondary-color); }

/* Éditeur seul au centre, tous les autres champs dans un volet à droite (≥ xl),
   collant sous la barre d'aide et arrêté au-dessus de la barre d'actions.
   Sous xl : une colonne dans l'ordre titre → contenu → paramètres (le volet
   s'efface, ses deux parties se placent de part et d'autre de l'éditeur). */
.etape-edition { display: flex; flex-direction: column; }
.etape-edition-volet { display: contents; }
.etape-volet-identite { order: 1; }
.etape-edition-principal { order: 2; }
.etape-volet-parametres { order: 3; margin-top: 1.5rem; }

@media (min-width: 1200px) {
  .etape-edition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 28%, 23rem);
    gap: 1.5rem;
    align-items: start;
  }
  .etape-edition-principal { grid-column: 1; grid-row: 1; }
  .etape-volet-parametres { margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
  .etape-edition-volet {
    grid-column: 2;
    grid-row: 1;
    display: block;
    position: sticky;
    top: 4.25rem; /* sous l'en-tête collant (3.5rem) */
    max-height: calc(100vh - 9.5rem); /* arrêté au-dessus de la barre d'actions */
    overflow-y: auto;
    overscroll-behavior: contain; /* en bout de volet, la molette ne fait pas défiler la page */
    scrollbar-width: thin;
    padding: 1rem 1rem 0;
    background: var(--cx-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
  }
  /* Zone de dépôt compacte, empilée : le volet est étroit. */
  .etape-edition-volet .document-dropzone { flex-direction: column; gap: .5rem; padding: 1rem; text-align: center; }
  .etape-edition-volet .document-dropzone-icon { width: 40px; height: 40px; font-size: 1.15rem; }
}

.etape-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* Actions toujours visibles en bas de l'écran (≥ md : sur téléphone, les boutons
   flottants du bas de l'écran les recouvriraient). */
@media (min-width: 768px) {
  .etape-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: .75rem 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -.75rem 1rem -1rem rgba(1, 15, 64, .35);
  }
}