/*
 * Papillote — l'atelier (#atelier/<id>) : barre d'outils, puis trois zones sur ordinateur (plan, formulaire,
 * aperçu). Sur tablette, l'aperçu passe sous le formulaire ; sur téléphone, tout s'empile et un message
 * rappelle que l'édition fine demande un écran plus large.
 * Pendant une cuisson par l'IA, un bandeau de progression s'affiche au-dessus des trois zones.
 */

.pa-workshop {
  padding: var(--pa-space-4) var(--pa-space-4) var(--pa-space-10);
  max-width: 100rem;
  margin-inline: auto;
}

.pa-workshop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3) var(--pa-space-4);
  margin-bottom: var(--pa-space-4);
}

.pa-workshop__title {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--pa-font-title);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pa-workshop__title:focus {
  outline: none;
}

.pa-workshop__title:focus-visible {
  outline: 3px solid var(--pa-focus, var(--pa-accent));
  outline-offset: 4px;
}

.pa-workshop__status {
  font-size: var(--pa-text-sm);
  color: var(--pa-ink-soft);
}

.pa-workshop__narrow {
  margin-bottom: var(--pa-space-4);
}

@media (min-width: 48rem) {
  .pa-workshop__narrow {
    display: none;
  }
}

.pa-workshop__layout {
  display: grid;
  gap: var(--pa-space-5);
  align-items: start;
}

/* Aucune colonne ne déborde sur sa voisine, quel que soit le navigateur ou le zoom. */
.pa-workshop__layout > * {
  min-width: 0;
}

.pa-workshop__outline {
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 4px;
}

@media (min-width: 48rem) {
  .pa-workshop__layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }

  .pa-workshop__preview {
    grid-column: 2;
  }
}

@media (min-width: 75rem) {
  .pa-workshop__layout {
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) 21rem;
  }

  .pa-workshop__preview {
    grid-column: 3;
    position: sticky;
    top: calc(72px + var(--pa-space-4)); /* sous l'en-tête collant */
  }
}

.pa-workshop__outline,
.pa-workshop__form {
  padding: var(--pa-space-4);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
}

.pa-workshop__form {
  display: grid;
  gap: var(--pa-space-4);
  padding: var(--pa-space-5);
}

.pa-workshop__zone-title {
  margin-bottom: var(--pa-space-3);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pa-ink-soft);
}

.pa-workshop__form-title {
  font-family: var(--pa-font-title);
  font-size: 1.35rem;
}

.pa-workshop__form-title:focus {
  outline: none;
}

.pa-workshop__pair {
  display: grid;
  gap: var(--pa-space-4);
}

@media (min-width: 62rem) {
  .pa-workshop__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.pa-workshop__preview {
  display: grid;
  justify-items: center;
  gap: var(--pa-space-3);
}


/* Éditeur de texte riche (TinyMCE) : mêmes arrondis et même bordure que les autres champs */
.pa-workshop__form .tox-tinymce {
  border: 1.5px solid var(--pa-line-strong);
  border-radius: var(--pa-radius-md);
}

.pa-workshop__form .tox-tinymce:focus-within {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

.pa-input--short {
  max-width: 8rem;
}

/* Plan : présentation, chapitres numérotés, écrans */
.pa-outline,
.pa-outline__screens {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pa-outline__chapter {
  margin-top: var(--pa-space-3);
}

.pa-outline__screens {
  margin-left: var(--pa-space-5);
  padding-left: var(--pa-space-2);
  border-left: 2px solid var(--pa-line);
}

.pa-outline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-1);
}

.pa-outline__item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--pa-space-2);
  min-width: 0;
  min-height: 40px;
  padding: var(--pa-space-1) var(--pa-space-2);
  border: 0;
  border-radius: var(--pa-radius-sm);
  background: transparent;
  color: var(--pa-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pa-outline__item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-outline__item:hover {
  background: var(--pa-paper-deep);
}

.pa-outline__item[aria-current="true"] {
  background: var(--pa-accent-soft);
  color: var(--pa-accent);
  font-weight: 700;
}

.pa-outline__item--chapter {
  font-weight: 700;
}

.pa-outline__number {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-ink);
  color: var(--pa-surface);
  font-size: var(--pa-text-xs);
}

/* Outils de l'élément choisi : sur leur propre ligne, pour ne jamais déborder du plan */
.pa-outline__tools {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
  gap: var(--pa-space-1);
  padding-bottom: var(--pa-space-1);
}

.pa-icon-button--small {
  width: 32px;
  height: 32px;
}

.pa-icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.pa-outline__danger[data-confirm="oui"] {
  border-color: var(--pa-danger);
  background: var(--pa-danger-soft);
  color: var(--pa-danger);
}

.pa-outline__add {
  margin: var(--pa-space-1) 0 0 var(--pa-space-5);
}

.pa-outline__add > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 36px;
  padding: 0 var(--pa-space-2);
  border-radius: var(--pa-radius-sm);
  color: var(--pa-ink-soft);
  font-size: var(--pa-text-sm);
  cursor: pointer;
  list-style: none;
}

.pa-outline__add > summary::-webkit-details-marker {
  display: none;
}

.pa-outline__add > summary:hover {
  color: var(--pa-accent);
}

.pa-outline__menu {
  display: grid;
  gap: 2px;
  margin-top: var(--pa-space-1);
  padding: var(--pa-space-1);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-md);
  background: var(--pa-surface-raised);
}

.pa-outline__menu button {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 36px;
  padding: 0 var(--pa-space-2);
  border: 0;
  border-radius: var(--pa-radius-sm);
  background: transparent;
  color: var(--pa-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pa-outline__menu button:hover {
  background: var(--pa-accent-soft);
}

.pa-outline__add-chapter {
  margin-top: var(--pa-space-4);
}

/* Questions : un bloc par question, réponses en lignes, catégories et sous-titres en listes */
.pa-question {
  display: grid;
  gap: var(--pa-space-4);
  padding: var(--pa-space-4);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-paper);
}

.pa-question__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
}

.pa-question__title {
  font-family: var(--pa-font-title);
  font-size: 1.15rem;
}

.pa-question__group {
  display: grid;
  gap: var(--pa-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pa-question__list {
  display: grid;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-answer {
  display: grid;
  gap: var(--pa-space-1);
}

.pa-answer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-answer__main > .pa-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.pa-answer__correct {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: var(--pa-target-min);
  font-size: var(--pa-text-sm);
  white-space: nowrap;
}

.pa-answer__correct input {
  width: 20px;
  height: 20px;
  accent-color: var(--pa-success);
}

.pa-answer__category {
  flex: 0 1 12rem;
  width: auto;
}

.pa-answer__rank {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-ink);
  color: var(--pa-surface);
  font-size: var(--pa-text-xs);
  font-weight: 700;
}

.pa-answer__tools {
  display: inline-flex;
  gap: var(--pa-space-1);
}

.pa-answer__feedback > summary {
  width: fit-content;
  min-height: 28px;
  font-size: var(--pa-text-sm);
  color: var(--pa-ink-soft);
  cursor: pointer;
}

.pa-answer__feedback[open] > summary {
  margin-bottom: var(--pa-space-1);
}

.pa-question__category-label {
  flex: 0 0 8rem;
  margin: 0;
}

.pa-question__add {
  display: grid;
  gap: var(--pa-space-2);
  padding-top: var(--pa-space-2);
  border-top: 1px dashed var(--pa-line-strong);
}

.pa-question__add-type {
  width: auto;
  min-width: 14rem;
}

/* Fichiers d'une vidéo : nom du fichier actuel et bouton de choix (le champ de fichier est dans le bouton) */
.pa-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3);
}

.pa-file__name {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-text-sm);
  overflow-wrap: anywhere;
}

.pa-file__choose:focus-within {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

.pa-track {
  display: grid;
  gap: var(--pa-space-3);
  padding: var(--pa-space-3);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-md);
}

.pa-track > .pa-button {
  justify-self: start;
}

.pa-question__group > .pa-button,
.pa-question > .pa-button,
.pa-workshop__form > .pa-button {
  justify-self: start;
}

/* Sections du formulaire de présentation, nombre de badges dans le plan, conditions d'un badge */
.pa-workshop__section {
  margin-top: var(--pa-space-3);
  padding-top: var(--pa-space-4);
  border-top: 1px solid var(--pa-line);
  font-family: var(--pa-font-title);
  font-size: 1.15rem;
}

.pa-outline__badges {
  margin-top: var(--pa-space-4);
  padding-top: var(--pa-space-3);
  border-top: 1px solid var(--pa-line);
}

.pa-outline__count {
  flex: none;
  margin-left: auto;
  padding: 0 var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-paper-deep);
  color: var(--pa-ink-soft);
  font-size: var(--pa-text-xs);
  font-weight: 700;
}

.pa-condition__kind {
  flex: 0 1 13rem;
  width: auto;
}

.pa-condition__screen {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

/* Colonne de gauche : le plan, puis « À vérifier ». La piste ne prend jamais la largeur d'un long titre
   (sinon le plan passe sous le formulaire) : les titres sont coupés avec « … ». */
.pa-workshop__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pa-space-4);
  align-content: start;
  min-width: 0;
}

.pa-workshop__side > * {
  min-width: 0;
}

.pa-checks__count {
  margin-left: var(--pa-space-1);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.pa-checks {
  display: grid;
  gap: 2px;
  max-height: 22rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.pa-checks__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-2);
  width: 100%;
  min-height: 40px;
  padding: var(--pa-space-2);
  border: 0;
  border-radius: var(--pa-radius-sm);
  background: transparent;
  color: var(--pa-ink);
  font: inherit;
  font-size: var(--pa-text-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.pa-checks__item:hover {
  background: var(--pa-paper-deep);
}

.pa-checks__item > .pa-icon {
  flex: none;
  margin-top: 1px;
}

.pa-checks__item[data-level="error"] > .pa-icon {
  color: var(--pa-danger);
}

.pa-checks__item[data-level="warning"] > .pa-icon {
  color: var(--pa-warning);
}

.pa-checks__item strong {
  display: block;
  font-weight: 700;
}

.pa-checks__ok {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-sm);
  color: var(--pa-success);
}

/* Fenêtre des versions */
.pa-versions {
  display: grid;
  gap: var(--pa-space-2);
  margin: var(--pa-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.pa-versions .pa-my-publication strong {
  display: block;
}

.pa-versions .pa-my-publication strong::first-letter {
  text-transform: uppercase;
}

/* Glisser-déposer : élément saisi estompé, repère de l'endroit d'arrivée */
.pa-outline__item[draggable="true"] {
  cursor: grab;
}

.pa-outline__item--dragging {
  opacity: 0.45;
}

[data-drop="before"] {
  box-shadow: 0 -3px 0 var(--pa-accent);
}

[data-drop="after"] {
  box-shadow: 0 3px 0 var(--pa-accent);
}

[data-drop="inside"] {
  outline: 2px dashed var(--pa-accent);
  outline-offset: -2px;
}

/* Cuisson par l'IA : bandeau de progression au-dessus des trois zones */
.pa-cooking {
  display: grid;
  gap: var(--pa-space-3);
  margin-bottom: var(--pa-space-4);
  border-top: 5px solid var(--pa-tone);
}

.pa-cooking__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3) var(--pa-space-4);
}

.pa-cooking__spinner {
  color: var(--pa-raspberry);
}

.pa-cooking__done-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pa-mint-soft);
  color: var(--pa-mint);
}

.pa-cooking__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.pa-cooking__title {
  font-size: var(--pa-text-xl);
}

.pa-cooking__status {
  margin: 0;
  font-weight: 700;
}

.pa-cooking__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-cooking__chapter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 36px;
  padding: 4px var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  border: 1px solid var(--pa-line);
  background: var(--pa-surface);
  font-size: var(--pa-text-sm);
}

.pa-cooking__chapter-icon {
  display: grid;
  color: var(--pa-ink-soft);
}

.pa-cooking__chapter-state {
  color: var(--pa-ink-soft);
}

.pa-cooking__chapter[data-state="writing"] {
  border-color: var(--pa-raspberry);
  background: var(--pa-raspberry-soft);
}

.pa-cooking__chapter[data-state="writing"] .pa-cooking__chapter-icon {
  color: var(--pa-raspberry);
}

.pa-cooking__chapter[data-state="done"] {
  border-color: var(--pa-mint);
  background: var(--pa-mint-soft);
}

.pa-cooking__chapter[data-state="done"] .pa-cooking__chapter-icon {
  color: var(--pa-mint);
}

.pa-cooking__chapter[data-state="failed"] {
  border-color: var(--pa-danger);
  background: var(--pa-danger-soft);
}

.pa-cooking__chapter[data-state="failed"] .pa-cooking__chapter-icon,
.pa-cooking__chapter[data-state="failed"] .pa-cooking__chapter-state {
  color: var(--pa-danger);
}

.pa-cooking .pa-hint {
  margin: 0;
}

/* Barre « Retravailler avec l'IA » du formulaire */
.pa-ai-tools {
  display: grid;
  gap: var(--pa-space-3);
  margin: var(--pa-space-3) 0 var(--pa-space-5);
  padding: var(--pa-space-4);
  border-radius: var(--pa-radius-md);
  border: 1px solid var(--pa-violet);
  background: var(--pa-violet-soft);
}

.pa-ai-tools__title {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-lg);
}

.pa-ai-tools__title .pa-icon {
  color: var(--pa-violet);
}

.pa-ai-tools__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

.pa-ai-tools__pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-1);
}

.pa-ai-tools .pa-select {
  width: auto;
  max-width: 15rem;
  min-height: 36px;
  padding-block: 4px;
}

.pa-ai-tools .pa-hint {
  margin: 0;
}

.pa-ai-tools__mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-ai-tools__mode .pa-hint {
  font-weight: 700;
}

.pa-ai-action__prompt {
  margin-right: auto;
}

/* Fenêtre de proposition : avant et après côte à côte, l'un sous l'autre sur téléphone */
.pa-ai-action__status {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  min-height: 4rem;
}

.pa-ai-action__status .pa-spinner {
  color: var(--pa-raspberry);
}

.pa-ai-action__status p {
  margin: 0;
  font-weight: 700;
}

.pa-compare {
  display: grid;
  gap: var(--pa-space-4);
}

@media (min-width: 48rem) {
  .pa-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pa-compare__side {
  display: grid;
  align-content: start;
  gap: var(--pa-space-3);
  min-width: 0;
  padding: var(--pa-space-4);
  border-radius: var(--pa-radius-md);
  border: 1px solid var(--pa-line);
  background: var(--pa-paper);
}

.pa-compare__side[data-side="after"] {
  border: 2px solid var(--pa-violet);
  background: var(--pa-surface);
}

.pa-compare__side h3 {
  font-size: var(--pa-text-lg);
}

.pa-compare__content {
  display: grid;
  gap: var(--pa-space-2);
  overflow-wrap: anywhere;
}

.pa-compare__content p,
.pa-compare__content ul,
.pa-compare__content ol {
  margin: 0;
}

.pa-compare__kind {
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pa-ink-soft);
}

.pa-compare__answers {
  display: grid;
  gap: var(--pa-space-1);
  padding-left: var(--pa-space-5);
}

.pa-compare__mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-paper-deep);
  font-size: var(--pa-text-xs);
  font-weight: 700;
}

.pa-compare__mark[data-mark="correct"] {
  background: var(--pa-mint-soft);
  color: var(--pa-success);
}

.pa-compare__mark[data-mark="new"] {
  background: var(--pa-violet-soft);
  color: var(--pa-violet);
}

.pa-compare__feedback,
.pa-compare__explanation {
  display: block;
  font-size: var(--pa-text-sm);
  color: var(--pa-ink-soft);
}

.pa-compare__screens {
  display: grid;
  gap: var(--pa-space-3);
  margin: 0;
  padding-left: var(--pa-space-5);
}

.pa-compare__screens li {
  display: grid;
  gap: var(--pa-space-1);
}


/* Plan de l'atelier : pictogramme coloré du type de question */
.pa-outline__picto {
  display: grid;
  flex: none;
  color: var(--pa-qtype);
}

.pa-outline__picto .pa-picto {
  stroke-width: 3;
}

/* Couvertures proposées */
.pa-covers {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pa-covers__list {
  display: grid;
  gap: var(--pa-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cinq ou six illustrations par thème : trois colonnes dès que la place le permet. */
@media (min-width: 30rem) {
  .pa-covers__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pa-covers__item {
  display: block;
  padding: 0;
  border: 2px solid var(--pa-line);
  border-radius: var(--pa-radius-sm);
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--pa-duration-fast), transform var(--pa-duration-fast);
}

.pa-covers__item:hover {
  border-color: var(--pa-accent);
}

.pa-covers__item[aria-pressed="true"] {
  border-color: var(--pa-accent);
  box-shadow: 0 0 0 3px var(--pa-raspberry-soft);
}

.pa-covers__item:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

.pa-covers__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.pa-covers__theme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-2);
}

.pa-covers__theme .pa-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Transcription d'une vidéo : outils (récupérer, importer) et état de la recherche */
.pa-transcript__tools {
  margin-block: var(--pa-space-1) var(--pa-space-2);
}

.pa-transcript__status:empty {
  display: none;
}