/* Shared by every project page: the "Retour à l'accueil" link.
   Same language as the home page boxes: white, 1px black rule, monospace. */

.back-button {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.back-button__arrow {
  transition: transform 0.2s ease;
}

.back-button:hover {
  background: #000;
  color: #fff;
}

.back-button:hover .back-button__arrow {
  transform: translateX(-3px);
}

.back-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* In the sticky top bar of small screens the link shrinks to its arrow. */
@media (max-width: 1023px) {
  .back-button {
    padding: 4px 10px;
    margin-left: var(--gutter);
  }

  .back-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Contact buttons (home + end of each project) ---------- */

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid #000;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn:focus-visible {
  outline: 2px solid #3a5ce8;
  outline-offset: 3px;
}

.btn--primary {
  background: #000;
  color: #fff;
}

.btn--primary:hover { background: #222; }

.btn__meta { font-weight: 400; }

/* Variants for the dark band at the bottom of project pages. */
.btn--light {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.btn--outline-light {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); }

.btn--light:focus-visible,
.btn--outline-light:focus-visible { outline-color: #fff; }

/* ---------- End of project: contact + navigation ---------- */

.project-end {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: stretch;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
}

.project-end__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 540px;
}

.project-end__title {
  margin: 0;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1.8px;
}

.project-end__text {
  margin: 0;
  font-weight: 500;
  font-size: 17px;
  line-height: 27px;
}

.project-end__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

/* ---------- Image zoom ---------- */

.zoomable {
  cursor: zoom-in;
}

.zoomable:focus-visible {
  outline: 3px solid #3a5ce8;
  outline-offset: 3px;
}


/* ---------- Project facts (role, team, tools) under the hero pills ---------- */

.project-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
}

.project-facts dt {
  color: var(--accent-ink, #333);
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-facts dd {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

/* Sidebar title over the dark band at the bottom of project pages (class set by script.js). */
.brand__title { transition: color 0.2s ease; }
.is-on-dark .brand__title { color: #fff; }

/* ---------- Sommaire (all project pages) ----------
   Same language as the rest of the site: white box, 1px black rule,
   monospace for sections, accent colour of the project for the current entry. */

.toc {
  position: relative;
  width: 100%;
  border: 1px solid #000;
  background: #fff;
  font-family: "Inter", system-ui, sans-serif;
}

.toc__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #000;
}

.toc__title {
  color: #000;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.toc__progress {
  color: var(--accent-ink, #000);
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.toc__list {
  margin: 0;
  padding: 8px 0 10px;
  list-style: none;
}

.toc__item--section:not(:first-child) {
  margin-top: 6px;
}

.toc__item > a {
  display: block;
  padding: 4px 16px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.toc__item--section > a {
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 20px;
}

.toc__item--sub > a {
  padding-left: 30px;
  color: #4a4a4a;
  font-size: 13px;
  line-height: 18px;
}

.toc__item > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toc__item > a:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
}

/* Section being read: accent colour. Exact entry: accent colour + a 3px rule on the left. */
.toc__item--section.is-active > a,
.toc__item.is-current > a {
  color: var(--accent-ink, #000);
}

.toc__item.is-current > a {
  box-shadow: inset 3px 0 0 var(--accent-ink, #000);
}

/* ---------- Inline image zoom ----------
   The large image opens below the block that holds the thumbnail, across the column. */

.inline-zoom {
  display: grid;
  grid-template-rows: 0fr;
  align-self: stretch;
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.3s ease;
}

.inline-zoom.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.inline-zoom__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.inline-zoom__close {
  align-self: flex-end;
  padding: 4px 10px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.inline-zoom__close:hover {
  background: #000;
  color: #fff;
}

.inline-zoom__close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.inline-zoom__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 85vh;
  border: 1px solid #000;
  background: #fff;
  object-fit: contain;
  cursor: zoom-out;
}

.inline-zoom__caption {
  margin: 0;
  color: #333;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.zoomable.is-open {
  outline: 2px solid var(--accent-ink, #000);
  outline-offset: 3px;
  cursor: zoom-out;
}

@media (prefers-reduced-motion: reduce) {
  .inline-zoom { transition: none; }
}

/* ---------- Cards in the case studies (findings, solutions, results) ----------
   Intel One Mono, like the notes. Monospace is wider, so sizes are slightly smaller
   than the original Inter to keep similar line lengths. Scoped to .content so the
   home page project cards are not affected. */

.content .card .card__title,
.content .card .h5 {
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.03em;
}

.content .card .card__text,
.content .card .p2 {
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.content .card .card__label,
.content .card .reco-label {
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
}