/* Sobbo : le même visuel se déplie dans le livre, puis s’agrandit. */
.project-sobbo {
  height: 270svh;
  scroll-margin-top: var(--top-h);
  --book-rim: clamp(2px, .24vw, 4px);
}

.project-sobbo .book-block {
  background: #859568;
  box-shadow: inset 0 0 0 1px #6b7f54;
  transform: translateZ(-6px);
}

.project-sobbo .project-screen figcaption {
  color: #3d332a;
  font-size: .8rem;
  font-weight: 550;
}

.project-sobbo .project-image-open:focus-visible,
.salon-gallery .project-image-open:focus-visible {
  outline: 3px solid var(--corail);
  outline-offset: 4px;
}

html.calm .project-sobbo .book-rig > .project-screen {
  max-width: 980px;
  margin-inline: auto;
}

html.calm .project-sobbo .project-description {
  display: block;
}

/* Salon : commandes et légende hors de la capture. */
#projet-salon {
  --salon-w: min(1560px, 100%, max(245px, calc((100svh - var(--top-h) - 235px) * 2056 / 1175)));
}

#projet-salon .salon-details {
  padding-block: clamp(24px, 4svh, 54px) 4px;
}

#projet-salon .f-salon-title h3 {
  font-size: clamp(2rem, 4.3vw, 4rem);
}

#projet-salon .f-salon-intro {
  margin-top: 8px;
}

.salon-gallery {
  padding-top: 14px;
}

.f-salon .salon-gallery > .salon-views {
  max-width: var(--salon-w);
  margin: 0 auto 10px;
}

.f-salon .salon-gallery > .salon-views button {
  min-height: 44px;
}

#projet-salon .f-salon-band {
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
}

#projet-salon .f-salon-band .f-credit {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: start;
  padding-top: 0;
}

.salon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: flex-start;
}

.salon-actions .f-link {
  min-height: 44px;
  padding-block: 0;
  text-align: start;
}

.f-salon-caption {
  min-height: 0;
}

.salon-track[data-passage-on="true"] .salon-gallery > .salon-views {
  opacity: var(--pass-context, 1);
}

/* Le détail démarre sur la vue entière. Le zoom rend les pixels de l’original consultables. */
.project-dialog-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.project-dialog-zoom {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.project-dialog-zoom[aria-pressed="true"] {
  color: #edf4ef;
  background: #153d3e;
}

.project-dialog-view:not(.is-zoomed) img {
  min-width: 0;
}

.project-dialog-view.is-zoomed {
  max-height: 64svh;
  overflow: auto;
  overscroll-behavior: contain;
}

.project-dialog-view.is-zoomed img {
  width: auto;
  min-width: 100%;
  max-width: none;
}

.project-dialog-copy h3 {
  scroll-margin-top: 80px;
}

.dialog-captures {
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: clamp(12px, 3vw, 28px);
}

@media (max-width: 720px) {
  #projet-salon { --salon-w: 100%; }

  .f-salon .salon-gallery > .salon-views {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .f-salon .salon-gallery > .salon-views button {
    justify-content: center;
    padding: 6px 4px;
    font-size: .8rem;
    line-height: 1.16;
    text-align: center;
  }

  #projet-salon .f-salon-band {
    grid-template-columns: 1fr;
  }

  .project-sobbo .project-context h3 {
    margin-bottom: 10px;
  }

  .project-sobbo .project-intent {
    margin-bottom: 8px;
  }

  .project-sobbo .project-status {
    margin-top: 10px;
  }
}

@media (max-width: 440px) {
  .dialog-captures {
    grid-template-columns: minmax(0, 215px);
    justify-content: center;
    gap: 22px;
  }
}

@media (max-height: 545px) and (min-width: 721px) {
  .project-sobbo .project-context h3 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 12px;
  }

  .project-sobbo .project-kind {
    margin-bottom: 8px;
  }

  .project-sobbo .project-context .project-intent {
    display: block;
    margin-bottom: 4px;
  }

  .project-sobbo .project-description {
    display: none;
  }
}