/* The site's plain pages (scripts/pages.ts, credits.html): the studio's black and white. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --bg: #090b10;
  --ink: #f0f3fa;
  --muted: #a1a9ba;
  --line: rgba(240, 243, 250, 0.14);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* the sea of dots at the foot of the page, as on the site */
body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(44vh, 400px);
  background: url("/assets/sea-wide.webp") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%);
  mask-image: linear-gradient(to bottom, transparent, #000 50%);
  pointer-events: none;
}
@media (orientation: portrait) {
  body::after {
    background-image: url("/assets/sea-tall.webp");
  }
}
a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  background: linear-gradient(var(--bg) 62%, transparent);
  font-size: 15px;
}
.logo {
  display: block;
  width: 36px;
  height: 36px;
}
.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* the home page's glass "A" (src/lib/barGlass.ts), with room around it for its tilt and bevels */
.logo {
  position: relative;
}
.logo .glass {
  position: absolute;
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  display: block;
  pointer-events: none;
}
.logo.glassy svg {
  visibility: hidden;
}
main,
.after {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 72px max(20px, env(safe-area-inset-right, 0px)) 56px max(20px, env(safe-area-inset-left, 0px));
}
/* (a work's page: its title on the same left edge as its screens) */
main:has(h1.work) {
  max-width: 1320px;
}
h1 {
  font-size: clamp(36px, 7.4vw, 70px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 32px;
}
h1.work {
  font-size: clamp(38px, 9.4vw, 112px);
  letter-spacing: -0.03em;
}
h2 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
p + p {
  margin-top: 14px;
}
.lead {
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.muted {
  color: var(--muted);
}
.big {
  display: inline-block;
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ways {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
}
mark {
  background: var(--ink);
  color: var(--bg);
  padding: 0 6px;
  border-radius: 3px;
}
.shots {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
}
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #06070a;
}
.after {
  max-width: 1320px;
}
.next {
  display: block;
  font-size: clamp(38px, 8vw, 84px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.next span {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.after p {
  margin-top: 40px;
}
.foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
  color: rgb(240 243 250 / 0.78);
  text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg);
  font-size: 14px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.foot a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .foot a:hover {
    color: var(--ink);
  }
}
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* the contact page: the Earth on its side, the title and the essentials on a few fine lines
   (src/lib/contactForm.ts) */
.with-globe::after {
  content: none;
}
.globe {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.globe canvas {
  position: absolute;
  top: 50%;
  right: -7vw;
  width: min(66vw, 118vh);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.globe canvas[data-on="true"] {
  opacity: 1;
}
.with-globe main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: min(540px, 39vw);
  margin: 0 0 0 clamp(20px, 7vw, 120px);
  padding: 0 0 24px;
}
.with-globe .foot {
  border-top: 0;
  background: linear-gradient(to bottom, transparent, rgb(9 11 16 / 0.9) 45%);
}
.ask {
  margin-bottom: clamp(18px, 3vh, 30px);
  font-size: clamp(34px, min(4.6vw, 8vh), 68px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.short[hidden],
.done[hidden] {
  display: none;
}
.short {
  position: relative;
  overflow: hidden;
  padding: 12px 24px 76px;
  border-radius: 14px;
  background: #08090d url("/assets/form-ceramique.webp") center bottom / cover no-repeat;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 0 0 1px rgb(240 243 250 / 0.22), 0 3px 0 #3b3d43, 0 26px 60px rgb(0 0 0 / 0.62);
}
.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  transition: opacity 0.4s ease;
}
.line {
  position: relative;
  min-width: 0;
  border-bottom: 1px solid rgb(240 243 250 / 0.42);
}
.line:focus-within,
.line:has([aria-invalid="true"]) {
  border-bottom-color: #fff;
}
.line.wide {
  grid-column: 1 / -1;
}
.line input,
.line select,
.line textarea {
  display: block;
  width: 100%;
  padding: 16px 0 15px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  caret-color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  resize: none;
  field-sizing: content;
}
.line input::placeholder,
.line textarea::placeholder {
  color: var(--ink);
  opacity: 0.92;
}
.line input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s;
}
.line select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  cursor: pointer;
}
.line select option {
  color: #090b10;
  background: #f0f3fa;
}
.pick::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 23px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
/* the list of needs: the phone's own list can't be dressed, so ours opens inside the card
   (src/lib/contactForm.ts) */
.pick[data-enhanced] select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.pick [data-pick-button] {
  display: block;
  width: 100%;
  padding: 16px 20px 15px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.018em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.short [data-pick-list] {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 14px;
  background: #08090d;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0.2s;
}
.short [data-pick-list][data-open="true"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}
.short [data-pick-head] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgb(240 243 250 / 0.42);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.short [data-pick-close] {
  margin: -10px -10px -10px 0;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.short [data-pick-options] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  column-gap: 24px;
}
.short [data-pick-option] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgb(240 243 250 / 0.16);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.short [data-pick-option]::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.short [data-pick-option][aria-selected="true"]::after {
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .short [data-pick-option]:hover {
    border-bottom-color: var(--ink);
  }
}
.short [data-pick-option]:focus-visible,
.short [data-pick-close]:focus-visible,
.pick [data-pick-button]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.short small {
  display: block;
  padding-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
}
.short small[hidden] {
  display: none;
}
.send {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.send span {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .send:hover span {
    transform: translateX(5px);
  }
}
.send:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.short[data-sending] .fields {
  opacity: 0.3;
}
.short[data-sending] .send {
  cursor: default;
  font-weight: 500;
}
.load {
  height: 1px;
  margin-top: 2px;
  overflow: hidden;
  background: rgb(240 243 250 / 0.18);
  opacity: 0;
}
.load i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.short[data-sending] .load {
  opacity: 1;
}
.short[data-sending] .load i {
  transform: none;
  transition: transform var(--wait) cubic-bezier(0.45, 0, 0.55, 1);
}
.ask[data-done],
.done {
  animation: arrive 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.done p {
  margin-bottom: 12px;
  font-size: 20px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.done [hidden] {
  display: none;
}
.done a {
  font-size: 18px;
}
.direct {
  margin-top: 16px;
  font-size: 15px;
  color: rgb(240 243 250 / 0.76);
}
@media (orientation: portrait) {
  .globe canvas {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -70vw;
    width: 150vw;
    transform: translateX(-50%);
  }
  .with-globe main {
    justify-content: flex-start;
    max-width: none;
    margin: 0;
    padding: 18px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px));
  }
  .ask {
    margin-bottom: 12px;
    font-size: 34px;
  }
  .short {
    padding: 6px 18px 60px;
  }
  .fields {
    column-gap: 16px;
  }
  .line input,
  .line select,
  .line textarea {
    padding: 13px 0 12px;
    font-size: 16.5px;
  }
  .pick::after {
    top: 18px;
  }
  .pick [data-pick-button] {
    padding: 13px 20px 12px 0;
    font-size: 16.5px;
  }
  .short [data-pick-list] {
    padding: 4px 18px 8px;
  }
  .short [data-pick-options] {
    column-gap: 16px;
  }
  .short [data-pick-option] {
    font-size: 15.5px;
  }
  .send {
    margin-top: 6px;
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe canvas {
    transition: none;
  }
  .ask[data-done],
  .done {
    animation: none;
  }
}

/* the pages people find through Google: the crafts, the sectors, the method, the questions, the
   journal (scripts/pages.ts) */
main ul,
main ol {
  margin-top: 12px;
  padding-left: 1.2em;
}
main li + li {
  margin-top: 6px;
}
main p a,
main li a {
  text-decoration: underline;
}
.crumbs {
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--muted);
}
.crumbs a {
  text-decoration: none;
}
.crumbs span[aria-hidden] {
  margin: 0 6px;
  opacity: 0.6;
}
/* an article (Hugo's pick, "la légende"): its top as wide as the journal, the picture across with its
   caption and reading time; the text under it in the usual narrow column */
main:has(h1.article) {
  max-width: 1320px;
}
.atop .k {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
h1.article {
  max-width: 14em;
  margin: 12px 0 22px;
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}
.atop .lead {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}
.atop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-top: 44px;
  border-radius: 4px;
  background: #06070a;
}
.atop .cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.aread {
  max-width: 720px;
  margin: 56px auto 0;
}
/* the reading (Hugo's pick, "l'avant / après"): plain titles, and CULT's pairs as one picture each with a
   handle to slide from one to the other */
.aread h2 {
  margin: 56px 0 12px;
  padding: 0;
  border: 0;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.aread .ba {
  position: relative;
  margin: 24px 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #06070a;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.aread .ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.aread .ba img + img {
  clip-path: inset(0 0 0 var(--x, 50%));
}
.aread .ba .h {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 2px;
  margin-left: -1px;
  background: #eceef2;
}
.aread .ba .h::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eceef2;
  color: #0b0d12;
  font-size: 16px;
  transform: translate(-50%, -50%);
}
.aread .ba .t {
  position: absolute;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 11, 16, 0.72);
  font-size: 12px;
}
.aread .ba .t.l {
  left: 12px;
}
.aread .ba .t.r {
  right: 12px;
}
.aread .ba input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.aread .ba:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.aread p.cap {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
/* an article's end (Hugo's picks): on a computer the three others as a board, then the contact form in
   boxes; on a phone the form first, then the three small, a square picture and a title each */
.aend {
  display: flex;
  flex-direction: column;
  margin-top: 96px;
}
main .alist h2 {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}
main .aend ul.row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aend .talk {
  margin-top: 96px;
}
@media (max-width: 760px) {
  .aend {
    margin-top: 64px;
  }
  .aend .talk {
    order: 1;
    margin-top: 0;
  }
  .aend .alist {
    order: 2;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  main .alist h2 {
    display: none;
  }
  main .aend ul.row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .aend ul.row a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-content: center;
  }
  .aend ul.row img {
    grid-row: 1 / 3;
    aspect-ratio: 1;
  }
  .aend ul.row .k {
    align-self: end;
    margin-top: 0;
  }
  .aend ul.row .k span + span {
    display: none;
  }
  .aend ul.row strong {
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0;
  }
}
@media (max-width: 760px) {
  .atop img {
    aspect-ratio: 4 / 3;
    margin-top: 32px;
  }
  .atop .cap {
    flex-direction: column;
    gap: 2px;
  }
  .aread {
    margin-top: 40px;
  }
}
/* a list of works or links, as cards */
main ul.cards {
  list-style: none;
  padding: 0;
  margin: 28px 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
main ul.cards li + li {
  margin-top: 0;
}
.cards a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 12px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cards img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #06070a;
}
.cards strong {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cards span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.cards em {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cards.text a {
  padding: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .cards a:hover {
    border-color: rgb(240 243 250 / 0.4);
    background: rgb(240 243 250 / 0.03);
  }
}
/* a work's page: its need and what was made, side by side when there is room */
.story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 48px;
  max-width: 1100px;
  margin: 16px 0 40px;
}
.story > div {
  min-width: 0;
}
/* the method's four steps */
main ol.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 12px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
main .steps li + li {
  margin-top: 0;
}
.steps li::before {
  content: "0" counter(step);
  grid-row: span 2;
  color: var(--muted);
  font-size: 15px;
  padding-top: 4px;
}
.steps strong {
  font-size: 22px;
  font-weight: 500;
}
.steps span {
  color: var(--muted);
}
/* the questions, each opened in place */
.faq {
  margin: 24px 0 40px;
}
.faq details {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 20px;
  font-weight: 500;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--muted);
  transition: transform 0.3s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin-top: 10px;
  color: var(--muted);
}
.foot nav + nav {
  opacity: 0.8;
}
.also {
  margin-top: 16px;
}
main ul.cards + p,
main ul.cards + h2 {
  margin-top: 48px;
}

/* the crafts' page (Hugo's picks): on a computer, a mosaic of five real works, the first two larger,
   the words laid on the picture; on a phone, one under the other, each with its picture, its words,
   its works and its link */
main:has(.crafts) {
  max-width: 1320px;
}
main:has(.crafts) .lead {
  max-width: 40ch;
}
.go {
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
main ul.crafts {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
main ul.crafts li + li {
  margin-top: 0;
}
.crafts li {
  grid-column: span 2;
}
.crafts li:nth-child(-n + 2) {
  grid-column: span 3;
}
/* six crafts: the two large ones, then the four others in one row */
main ul.crafts:has(li:nth-child(6)) {
  grid-template-columns: repeat(12, 1fr);
}
.crafts:has(li:nth-child(6)) li {
  grid-column: span 3;
}
.crafts:has(li:nth-child(6)) li:nth-child(-n + 2) {
  grid-column: span 6;
}
.crafts a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 320px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.crafts li:nth-child(-n + 2) a {
  min-height: 440px;
}
.crafts img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.crafts a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(9 11 16 / 0.96) 0%, rgb(9 11 16 / 0.88) 30%, rgb(9 11 16 / 0.3) 62%, rgb(9 11 16 / 0));
}
.crafts strong {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.crafts .l {
  margin-top: 6px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.crafts .k,
.crafts .title,
.crafts .go,
.phone-only {
  display: none;
}
.desk-only {
  margin-top: 48px;
}
@media (hover: hover) and (pointer: fine) {
  .crafts a:hover img {
    transform: scale(1.05);
  }
}
@media (max-width: 760px) {
  .phone-only {
    display: block;
    margin-top: 24px;
  }
  .desk-only {
    display: none;
  }
  main ul.crafts {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin-top: 40px;
  }
  .crafts a {
    min-height: 0 !important;
    padding: 0;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .crafts a::after,
  .crafts .name {
    display: none;
  }
  .crafts img {
    position: static;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
    border-radius: 10px;
  }
  .crafts .k,
  .crafts .title,
  .crafts .go {
    display: block;
  }
  .crafts .k {
    font-size: 13px;
    color: var(--muted);
  }
  .crafts strong {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.1;
  }
  .crafts .l {
    margin-top: 0;
    font-size: 16px;
  }
}

/* a craft's page (Hugo's pick, "l'affiche") */
main:has(.affiche) {
  max-width: 1320px;
}
/* the crafts' titles without capitals, as drawn (Hugo's pick, "comme Référencement") */
.affiche h1 {
  max-width: 14em;
  margin-bottom: 20px;
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}
.affiche .lead {
  max-width: 42ch;
}
.affiche .hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-top: 40px;
  border-radius: 12px;
  background: #06070a;
}
.affiche .read {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  margin-top: 56px;
}
.toc {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.toc a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.toc a[aria-current="true"],
.toc a:first-child:not(:has(~ a[aria-current])) {
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover {
    color: var(--ink);
  }
}
.sections {
  display: grid;
  gap: 44px;
  max-width: 62ch;
}
.sections section {
  scroll-margin-top: 96px;
}
.sections h2 {
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
}
.sections p {
  color: var(--muted);
}
.affiche > h2 {
  margin-top: 72px;
}
main ul.wk {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
main ul.wk li + li {
  margin-top: 0;
}
.wk a {
  display: grid;
  gap: 4px;
  text-decoration: none;
}
.wk img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #06070a;
  transition: opacity 0.3s ease;
}
.wk strong {
  font-weight: 500;
}
.wk span {
  font-size: 14px;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .wk a:hover img {
    opacity: 0.85;
  }
}
main .others a {
  text-decoration: none;
}
.others span {
  margin: 0 8px;
  color: var(--muted);
}
.affiche > p:last-child {
  margin-top: 56px;
}
@media (max-width: 760px) {
  .affiche .hero {
    aspect-ratio: 4 / 3;
  }
  .affiche .read {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
  }
  .toc {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -20px;
    padding-right: 20px;
  }
  .toc::-webkit-scrollbar {
    display: none;
  }
  .toc a {
    flex: none;
    white-space: nowrap;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: 14px;
    color: var(--ink);
  }
  main ul.wk {
    grid-template-columns: 1fr 1fr;
  }
}
.others a {
  white-space: nowrap;
}

/* a sector's page (Hugo's pick, "le casting"): each work as a large row, its picture beside what we
   made for it; on a phone, the picture above the words */
main:has(h1.sector) {
  max-width: 1320px;
}
main:has(h1.sector) > p {
  max-width: 62ch;
}
main:has(h1.sector) > .lead {
  max-width: 42ch;
}
/* a sector's page (Hugo's pick, "le casting, adouci"): the title without capitals, each work a row on a
   fine line, the end as on the crafts (the form in boxes, then the other sectors and the crafts) */
h1.sector {
  max-width: 15em;
  margin-bottom: 20px;
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}
main:has(h1.sector) > .lead {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
}
main:has(h1.sector) > p:not(.lead):not(.others) {
  margin-top: 16px;
}
main:has(h1.sector) > h2 {
  margin: 88px 0 22px;
  padding: 0;
  border: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
main:has(h1.sector) .casting .row,
main:has(h1.sector) .casting .row:first-child {
  gap: clamp(24px, 4vw, 56px);
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
main:has(h1.sector) .casting .row img {
  border-radius: 4px;
}
main:has(h1.sector) .casting .k {
  letter-spacing: 0;
  text-transform: none;
}
main:has(h1.sector) .casting strong {
  margin: 6px 0 12px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
}
main:has(h1.sector) .casting ul {
  margin-bottom: 14px;
  font-size: 15px;
}
main:has(h1.sector) .casting .go {
  text-decoration: underline;
  text-underline-offset: 4px;
}
main:has(h1.sector) .talk {
  margin-top: 96px;
}
main:has(h1.sector) > p.others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  max-width: none;
  margin-top: 56px;
  font-size: 16px;
}
main:has(h1.sector) > p.others a {
  color: var(--muted);
  text-decoration: none;
}
.casting {
  margin-top: 8px;
}
.casting .row:first-child {
  border-top: 0;
  padding-top: 24px;
}
.casting .row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.casting .row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  background: #06070a;
}
.casting .k {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.casting strong {
  display: block;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 8px 0 14px;
}
.casting ul {
  margin: 0 0 18px;
  padding-left: 1.1em;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .casting .row img {
    transition: opacity 0.3s ease;
  }
  .casting .row:hover img {
    opacity: 0.86;
  }
}
@media (max-width: 760px) {
  .casting .row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 36px 0;
  }
}

/* the method's page (Hugo): the home page's "how a project goes", the same (components/Closing.tsx):
   four cards of black paper, set apart and tilted, a line of dots moving through them, a reflection
   crossing each title as it comes */
main:has(.how) {
  max-width: 1320px;
}
.how {
  --caps-track: -0.022em;
  position: relative;
  container-type: inline-size;
}
.how::before {
  content: "";
  display: block;
  /* (the stage's height, 700 of its 1400 wide, as on the home page) */
  padding-top: 50%;
}
.how h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.86cqw;
  margin: 0;
  font-size: 3.29cqw;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  text-align: center;
}
.how .thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.how .thread path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 0.1 9;
  animation: how-run 6s linear infinite paused;
}
.how[data-on="true"] .thread path {
  animation-play-state: running;
}
@keyframes how-run {
  to {
    stroke-dashoffset: -91;
  }
}
.how ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.how li {
  position: absolute;
  container-type: inline-size;
  width: 23%;
  aspect-ratio: 3 / 2;
  margin: 0;
  transform: rotate(var(--r));
  border-radius: 0.64cqw;
  box-shadow:
    0 0 0 1px rgb(240 243 250 / 0.26),
    0 3px 0 #33353b,
    0 1.86cqw 4cqw rgb(0 0 0 / 0.62);
}
.how li:nth-child(1) {
  left: 0.5%;
  top: 16.07cqw;
}
.how li:nth-child(2) {
  left: 25.5%;
  top: 31.07cqw;
}
.how li:nth-child(3) {
  left: 50.5%;
  top: 15cqw;
}
.how li:nth-child(4) {
  left: 75.5%;
  top: 30cqw;
}
.how li img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.how li > div {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 4.8cqw;
}
.how li h2 {
  margin: 0;
  padding: 0 0 0.12em;
  border: 0;
  font-size: 7.6cqw;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  line-height: 1.06;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(105deg, var(--ink) 34%, #fff 44%, #fff 48%, #6d7079 62%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.9s cubic-bezier(0.45, 0, 0.55, 1);
}
.how li[data-seen="true"] h2 {
  background-position: 0 0;
}
.how li p {
  margin: 0.3cqw 0 0;
  font-size: 4.3cqw;
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: rgb(240 243 250 / 0.86);
  text-wrap: pretty;
}
.how + script + .lead {
  margin-top: 56px;
}
/* on a phone, as on the home page's phone: the cards one under the other, left and right in turn */
@container (max-width: 700px) {
  .how h1 {
    font-size: 7.7cqw;
    padding-top: 0;
  }
}
@media (max-width: 700px) {
  .how::before {
    /* (814 of its 350 wide) */
    padding-top: 232%;
  }
  .how li {
    width: 60%;
    border-radius: 2.6cqw;
    box-shadow:
      0 0 0 1px rgb(240 243 250 / 0.26),
      0 3px 0 #33353b;
  }
  .how li:nth-child(n) {
    top: calc(40cqw + var(--t) * 48cqw);
    left: 0;
  }
  .how li:nth-child(1) {
    --t: 0;
  }
  .how li:nth-child(2) {
    --t: 1;
  }
  .how li:nth-child(3) {
    --t: 2;
  }
  .how li:nth-child(4) {
    --t: 3;
  }
  .how li:nth-child(2n) {
    left: 40%;
  }
  .how li h2 {
    font-size: 8.1cqw;
  }
  .how li p {
    font-size: 5.5cqw;
    line-height: 1.2;
  }
  .how .thread path {
    animation: none;
  }
}

/* the method's steps in detail (Hugo's pick, "les grandes phrases"): each step in one very large
   sentence, left then right, its detail small under it */
.phrases {
  margin-top: 40px;
}
.phrases section {
  padding: 6vh 0;
}
.phrases span {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
main .phrases h2 {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 14em;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}
.phrases p {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
}
.phrases section:nth-child(even) {
  text-align: right;
}
.phrases section:nth-child(even) h2,
.phrases section:nth-child(even) p {
  margin-left: auto;
}
.phrases + h2 {
  margin-top: 56px;
}

/* the questions (Hugo's pick, "deux colonnes"): each question in capitals on the left, its answer on
   the right, all open, no lines, only room between them */
main:has(h1.questions) {
  max-width: 1320px;
}
main:has(h1.questions) .lead {
  max-width: 40ch;
}
.qa {
  display: grid;
  gap: 56px;
  margin-top: 72px;
}
.qa section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
}
main .qa h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.qa p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 18px;
}
main p.ask {
  margin-top: 88px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}
.qa .nw {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .qa {
    gap: 40px;
    margin-top: 48px;
  }
  .qa section {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
main p.ask a {
  color: var(--ink);
}

/* the journal (Hugo's pick, "la une", as drawn): "Journal" and its sentence on one line, the article à
   la une's picture across the page with a small caption, then its title large and its summary beside it */
main:has(h1.journal) {
  max-width: 1320px;
}
.jtop {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 36px;
}
h1.journal {
  margin: 0;
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}
main .jtop .lead {
  max-width: 30ch;
  margin: 0;
  font-size: 17px;
  color: var(--muted);
  text-align: right;
}
.une {
  display: block;
  color: inherit;
  text-decoration: none;
}
.une img,
ul.row img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #06070a;
}
.une img {
  aspect-ratio: 21 / 9;
  border-radius: 4px;
}
.une .cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.une .g {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: 28px;
}
main .une h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
.une p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
}
.une .go {
  display: inline-block;
  margin-top: 18px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* the other articles (Hugo's pick, "la planche"): the pictures side by side and tall, the kind, the day
   and the title small under each; on a phone one under the other, across */
main h2.jlist {
  margin: 72px 0 22px;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}
main ul.row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
main ul.row li {
  margin: 0;
  padding: 0;
}
main ul.row li::before {
  content: none;
}
ul.row a {
  display: block;
  color: inherit;
  text-decoration: none;
}
ul.row img {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
}
ul.row .k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
ul.row strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  .une img,
  ul.row img {
    transition: opacity 0.3s ease;
  }
  .une:hover img,
  ul.row a:hover img {
    opacity: 0.86;
  }
}
@media (max-width: 760px) {
  .jtop {
    flex-direction: column;
    align-items: start;
    gap: 14px;
    margin-bottom: 28px;
  }
  main .jtop .lead {
    text-align: left;
  }
  .une img {
    aspect-ratio: 4 / 3;
  }
  .une .g {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }
  main h2.jlist {
    margin-top: 56px;
  }
  main ul.row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  ul.row img {
    aspect-ratio: 4 / 3;
  }
  ul.row strong {
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

/* the studio (Hugo's pick, "l'atelier", as it was drawn): a large picture of the studio's own site,
   the studio's sentence beside its line, then its six crafts in pictures */
main:has(h1.studio) {
  max-width: 1320px;
}
h1.studio {
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
img.atelier {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-top: 48px;
  border-radius: 10px;
  background: #06070a;
}
.say {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  margin-top: 56px;
}
main .say p {
  margin: 0;
  color: var(--muted);
}
main .say p.lead {
  max-width: none;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}
main ul.tiles {
  list-style: none;
  padding: 0;
  margin: 72px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
main ul.tiles li {
  margin: 0;
  padding: 0;
}
main ul.tiles li::before {
  content: none;
}
.tiles a {
  display: grid;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.tiles img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: #06070a;
}
.tiles strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
  text-transform: uppercase;
}
main ul.tiles + p {
  margin-top: 80px;
}
@media (hover: hover) and (pointer: fine) {
  .tiles img {
    transition: opacity 0.3s ease;
  }
  .tiles a:hover img {
    opacity: 0.86;
  }
}
@media (max-width: 760px) {
  img.atelier {
    aspect-ratio: 4 / 3;
  }
  .say {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  main ul.tiles {
    grid-template-columns: 1fr 1fr;
    gap: 20px 10px;
  }
  .tiles strong {
    font-size: 15px;
  }
}

/* the works and the missing page (Hugo's pick, "le casting", as the sectors') */
main:has(h1.works),
main:has(h1.missing) {
  max-width: 1320px;
}
h1.works {
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.casting .row p {
  margin: 0 0 18px;
  max-width: 46ch;
  color: var(--muted);
}
main p.n404 {
  margin: 0;
  font-size: clamp(90px, 18vw, 240px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: var(--ink);
}
h1.missing {
  margin-top: 18px;
  font-size: clamp(26px, 3.4vw, 44px);
}
main:has(h1.works) .casting strong,
main:has(h1.missing) .casting strong {
  font-weight: 600;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

/* the SEO craft's top (Hugo's pick, "la recherche"): searches written one by one in a large bar */
.affiche .search {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1100px;
  margin-top: 48px;
  padding: 22px 28px;
  border: 1px solid rgba(240, 243, 250, 0.14);
  border-radius: 999px;
  background: #0f1219;
  font-size: clamp(20px, 2.8vw, 40px);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.affiche .search svg {
  flex: none;
  width: 0.9em;
  height: 0.9em;
  color: #a1a9ba;
}
.affiche .search .q::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.affiche .under {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.affiche .under .lead {
  margin: 0;
}
.affiche .under .hero {
  margin-top: 0;
  aspect-ratio: 16 / 10;
}
@media (max-width: 760px) {
  .affiche .search {
    margin-top: 32px;
    padding: 14px 18px;
  }
  .affiche .under {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }
}

/* the SEO craft's cards (Hugo's picks): on a computer "les marches", six cards side by side, each a
   step higher, the last lit in the offer's green; on a phone "la lumière" in a pile, each card coming
   to rest on the one before with its title still showing */
.affiche h2.did {
  margin: 72px 0 24px;
  padding: 0;
  border: 0;
}
.affiche ul.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.affiche ul.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 22px 18px;
  border-radius: 16px;
  box-shadow: 0 -14px 28px -12px rgba(0, 0, 0, 0.7);
}
/* no numbers on the cards (Hugo) */
.affiche ul.steps li::before {
  content: none;
}
/* Hugo's pick, "le nuancier": dark to light like a swatch fan, the last card the lightest whatever their
   number (four cards, as drawn for the other crafts: two darks, then the two lights) */
.affiche ul.steps li { background: #141821; }
.affiche ul.steps li:nth-last-child(5) { background: #1d222d; }
.affiche ul.steps li:nth-last-child(4) { background: #2b313d; }
.affiche ul.steps li:nth-last-child(3) { background: #474e5c; }
.affiche ul.steps li:nth-last-child(2) { background: #a3aab6; color: #0b0d12; }
.affiche ul.steps li:nth-last-child(1) { background: #eceef2; color: #0b0d12; }
.affiche ul.steps li:nth-last-child(3) span { color: rgba(240, 243, 250, 0.72); }
.affiche ul.steps li:nth-last-child(-n + 2) span { color: rgba(11, 13, 18, 0.66); }
.affiche ul.steps li:first-child:nth-last-child(4) { background: #1d222d; }
.affiche ul.steps li:nth-child(2):nth-last-child(3) { background: #2b313d; }
.affiche ul.steps li:nth-child(2):nth-last-child(3) span { color: var(--muted); }
/* the marches: from 220px to 420px, whatever the number of cards */
.affiche ul.steps li { min-height: calc(220px + (var(--i, 1) - 1) * 200px / (var(--n, 6) - 1)); }
.affiche ul.steps strong {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.affiche ul.steps span {
  margin-top: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .affiche ul.steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .affiche ul.steps li:nth-child(n) {
    min-height: 200px;
  }
}
@media (max-width: 760px) {
  .affiche h2.did {
    margin-top: 48px;
  }
  .affiche ul.steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* room for the whole pile to hold a moment, every title showing, before it leaves */
  .affiche ul.steps::after {
    content: "";
    flex: none;
    height: 200px;
  }
  .affiche ul.steps li:nth-child(n) {
    position: sticky;
    min-height: 168px;
    padding: 22px 22px 22px;
  }
  /* each card stops under the site's bar, low enough for the titles above it to show */
  .affiche ul.steps li:nth-child(n) { top: calc(76px + (var(--i, 1) - 1) * 74px); }
  /* a card lets go when its bottom margin meets the list's end: each margin reaches the same line, so
     the pile leaves all at once instead of the last card sliding over the titles; the next card's
     negative top margin takes the space back (12px apart in the flow) */
  .affiche ul.steps li:nth-child(n) {
    margin: calc(12px - (var(--n, 6) - var(--i, 1) + 1) * 74px) 0 calc((var(--n, 6) - var(--i, 1)) * 74px);
  }
  .affiche ul.steps li:first-child { margin-top: 0; }
  .affiche ul.steps strong {
    font-size: 21px;
  }
  .affiche ul.steps span {
    font-size: 15px;
  }
}

/* the SEO craft's strategy (Hugo's pick, the 21st "squeeze" carousel redrawn for Aria) */
.affiche .loop {
  margin-top: 88px;
}
.loop h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.loop .intro {
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}
.loop .head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.loop .ctl{display:flex;gap:8px;flex:none}
.loop .ctl button{width:44px;height:44px;border:0;border-radius:12px;background:var(--lit);color:#0b0c10;display:grid;place-items:center;cursor:pointer;transition:opacity .2s,transform .2s}
.loop .ctl button:hover{opacity:.88}
.loop .ctl button:active{transform:scale(.96)}
.loop .ctl svg{width:16px;height:16px}
.loop .sq{--lit:#c8e06e;container-type:inline-size;--h:clamp(240px,30cqi,380px);--gap:14px;--slat:10px;--sgap:8px;--ms:1000ms;--ease:cubic-bezier(.16,1,.3,1);--hero:calc(var(--h) * 16 / 9);--room:calc(100cqi - var(--hero) - var(--sgap) - 3 * var(--gap) - var(--slat))}
.loop .view{height:var(--h);overflow:hidden;touch-action:pan-y}
.loop .strip{display:flex;height:100%;width:max-content}
.loop .card{position:relative;flex:none;height:100%;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#0f1219;box-shadow:inset 0 0 0 1px var(--line);transition:width var(--ms) var(--ease),margin-left var(--ms) var(--ease),border-radius var(--ms) var(--ease);font:inherit;color:inherit;text-align:left}
.loop .card.slim{border-radius:5px}
.loop .card.front{cursor:default}
.loop .art{position:absolute;inset:0 auto 0 50%;width:var(--hero);min-width:100%;transform:translateX(-50%);container-type:size;overflow:hidden}
.loop .ov{position:absolute;left:0;right:0;bottom:0;padding:18% 22px 18px;background:linear-gradient(to top,rgba(6,7,10,.85),transparent);font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;opacity:0;transition:opacity var(--ms) var(--ease);pointer-events:none}
.loop .card.front .ov{opacity:1}
.loop .copy{display:grid;margin-top:26px}
.loop .copy>div{grid-area:1/1;display:flex;justify-content:space-between;align-items:start;gap:40px;opacity:0;visibility:hidden;transition:opacity var(--ms) var(--ease),visibility var(--ms)}
.loop .copy>div.on{opacity:1;visibility:visible}
.loop .copy p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:46rem;text-wrap:pretty}
.loop .copy p b{font-weight:500}
.loop .copy p span{color:var(--muted)}
.loop .copy .dots{display:flex;gap:6px;padding-top:12px;flex:none}
.loop .copy .dots i{width:6px;height:6px;border-radius:3px;background:rgba(240,243,250,.2);transition:width .4s,background .4s}
.loop .copy .dots i.on{width:22px;background:var(--ink)}
.loop .a1{background:radial-gradient(80% 90% at 50% 30%,#171c28,#0b0e14)}
.loop .a1 .sbar{position:absolute;left:12cqw;right:12cqw;top:24cqh;height:17cqh;border-radius:99px;border:1px solid rgba(240,243,250,.18);background:#11151e;display:flex;align-items:center;gap:3cqw;padding:0 4cqw;font-size:min(7cqh,4.2cqw);letter-spacing:-.01em}
.loop .a1 .sbar svg{width:1em;height:1em;color:var(--muted);flex:none}
.loop .a1 .sbar i{display:inline-block;width:2px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-.15em;animation:loop-blink 1s steps(1) infinite}
@keyframes loop-blink{50%{opacity:0}}
.loop .a1 ul{position:absolute;left:12cqw;right:12cqw;top:44cqh;list-style:none;padding:2cqh 4cqw;border-radius:3.5cqh;background:#0e1219;border:1px solid var(--line);font-size:min(5.2cqh,3.2cqw);color:var(--muted);line-height:2}
.loop .a1 ul b{color:var(--ink);font-weight:500}
.loop .a2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
@media (max-width:760px){.loop .a2 img{object-position:88% 50%}}
.loop .a3{background:radial-gradient(70% 60% at 50% 58%,rgba(240,243,250,.05),transparent 70%),radial-gradient(120% 90% at 50% 0%,#151a25,#0a0d13)}
.loop .a3 .q{position:absolute;left:50%;top:7cqh;transform:translateX(-50%);display:flex;align-items:center;gap:1.4cqw;padding:2.2cqh 3.2cqw;border-radius:99px;background:rgba(240,243,250,.06);border:1px solid rgba(240,243,250,.14);font-size:min(4.6cqh,2.6cqw);color:var(--ink);white-space:nowrap}
.loop .a3 .q svg{width:1em;height:1em;color:var(--muted)}
.loop .a3 .pile{position:absolute;left:50%;top:56%;width:min(78cqw,120cqh);transform:translate(-50%,-50%);perspective:900px}
.loop .a3 .ghost{position:absolute;left:0;right:0;height:100%;border-radius:2.6cqh;background:#121621;border:1px solid rgba(240,243,250,.07)}
.loop .a3 .ghost.g1{transform:translateY(-8.5cqh) scale(.93);opacity:.8}
.loop .a3 .ghost.g2{transform:translateY(-16cqh) scale(.86);opacity:.45}
.loop .a3 .ghost.g3{transform:translateY(8.5cqh) scale(.93);opacity:.6}
.loop .a3 .ghost i{display:block;height:2cqh;border-radius:2cqh;background:rgba(240,243,250,.08);margin:4cqh 4cqw 0;width:50%}
.loop .a3 .g{position:relative;padding:4.4cqh 4cqw;border-radius:2.6cqh;background:linear-gradient(180deg,#1a2030,#121722);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(240,243,250,.16),0 3cqh 8cqh -2cqh rgba(0,0,0,.85);font-family:Arial,sans-serif;transform:rotateX(8deg)}
.loop .a3 .site{display:flex;gap:1.4cqw;align-items:center;font-size:min(4cqh,2.4cqw);color:#bdc1c6}
.loop .a3 .site u{text-decoration:none;width:6cqh;height:6cqh;border-radius:50%;background:#000;display:grid;place-items:center;font-size:3.4cqh;font-weight:700;color:#fff;flex:none;box-shadow:0 0 0 1px var(--line)}
.loop .a3 .site small{display:block;color:#9aa0a6;font-size:.9em}
.loop .a3 .t{color:#99c3ff;font-size:min(6.2cqh,3.6cqw);margin:2cqh 0 1.2cqh;line-height:1.22}
.loop .a3 .d{color:#bdc1c6;font-size:min(4.2cqh,2.5cqw);line-height:1.5}
.loop .a3 .tag{position:absolute;right:3cqw;top:-2.6cqh;padding:.8cqh 1.8cqw;border-radius:99px;background:var(--lit);color:#0b0c10;font-family:"Instrument Sans",system-ui,sans-serif;font-size:min(3.4cqh,2cqw);font-weight:500}
.loop .a4{background:#0a0d13;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.loop .a4 .code{position:absolute;left:8cqw;right:8cqw;top:50%;transform:translateY(-50%);font-size:min(4.6cqh,2.5cqw);line-height:1.55}
.loop .a4 .file{color:var(--muted);font-family:"Instrument Sans",system-ui,sans-serif;font-size:min(4cqh,2.4cqw);margin-bottom:3cqh;display:flex;justify-content:space-between}
.loop .a4 .ln{display:grid;grid-template-columns:4cqw minmax(0,1fr) auto;gap:2cqw;padding:1.6cqh 2cqw;border-radius:1.4cqh}
.loop .a4 .ln.del{background:rgba(255,107,107,.1);color:#ffb3b3}
.loop .a4 .ln.add{background:rgba(200,224,110,.12);color:#e3f0b4;margin-top:1.2cqh}
.loop .a4 .ln em{font-style:normal;opacity:.7}
.loop .a4 .ln small{font-family:"Instrument Sans",system-ui,sans-serif;font-size:.85em;opacity:.8;align-self:center}
@media (max-width:760px){.loop .a1 .sbar{left:6cqw;right:6cqw;top:22cqh;height:14cqh;font-size:5.6cqw}.loop .a1 ul{left:6cqw;right:6cqw;top:41cqh;font-size:4.4cqw;padding:2cqh 5cqw}.loop .a3 .q{font-size:4.2cqw;padding:1.8cqh 4cqw;top:9cqh}.loop .a3 .pile{width:88cqw}.loop .a3 .g{padding:3.4cqh 5cqw}.loop .a3 .site{font-size:3.6cqw}.loop .a3 .site u{width:7cqw;height:7cqw;font-size:3.8cqw}.loop .a3 .t{font-size:5.6cqw}.loop .a3 .d{font-size:4cqw}.loop .a3 .tag{font-size:3.4cqw;padding:.8cqh 3cqw}.loop .a4 .code{left:5cqw;right:5cqw;font-size:4.2cqw}.loop .a4 .file{font-size:3.6cqw;flex-direction:column;gap:1cqh}.loop .a4 .ln{grid-template-columns:4cqw minmax(0,1fr) auto}}
@media (max-width:760px){.loop .sq{--h:340px;--gap:6px;--slat:10px;--sgap:6px;--hero:calc(100cqi - 64px)}}
@media (max-width:760px){.loop .head{flex-direction:column;align-items:start}.loop .ctl{display:none}.loop .copy>div{flex-direction:column;gap:16px}.loop .copy .dots{padding-top:0}.loop .ov{padding:30% 16px 14px}}

/* a craft's last blocks under one real picture (Hugo's pick for the SEO craft, "la légende") */
.affiche figure.legend {
  margin: 96px 0 0;
}
.affiche figure.legend img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 58%;
  border-radius: 4px;
}
.affiche figure.legend figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.affiche figure.legend figcaption a {
  color: var(--ink);
}
.affiche .legend-text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}
.affiche .legend-text h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
}
.affiche .legend-text p {
  color: var(--muted);
  font-size: 16px;
}
@media (max-width: 760px) {
  .affiche figure.legend {
    margin-top: 64px;
  }
  .affiche figure.legend img {
    aspect-ratio: 4 / 3;
  }
  .affiche figure.legend figcaption {
    flex-direction: column;
    gap: 4px;
  }
  .affiche .legend-text {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
}

/* the SEO craft's works (Hugo's pick, "la planche") */
.affiche h2.board-h {
  margin: 96px 0 22px;
  padding: 0;
  border: 0;
  font-weight: 400;
}
.affiche ul.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.affiche ul.board li {
  margin: 0;
}
.affiche ul.board a {
  display: block;
  text-decoration: none;
}
.affiche ul.board img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: #06070a;
}
.affiche ul.board .cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.affiche ul.board .cap b {
  font-weight: 400;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .affiche ul.board a:hover .cap span {
    color: var(--ink);
  }
}
/* the SEO craft ends on the contact form itself (Hugo), his pick "les cases": the sentence at the left,
   the form at the right as a sheet of boxes on fine lines, each with its small title; then "ou" and the
   studio's two direct buttons */
.talk {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-top: 112px;
  padding-top: 32px;
  border-top: 1px solid rgba(240, 243, 250, 0.14);
}
.talk h2.ask {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.talk-say > p {
  margin: 0;
  max-width: 30ch;
  color: var(--muted);
}
.talk-form {
  min-width: 0;
}
.short.cases {
  padding: 0;
  border: 1px solid rgba(240, 243, 250, 0.14);
  border-radius: 16px;
  background: none;
  box-shadow: none;
}
.short.cases .fields {
  column-gap: 0;
}
.short.cases .line {
  padding: 14px 22px 4px;
  border-bottom: 1px solid rgba(240, 243, 250, 0.14);
  transition: background 0.3s ease;
}
.short.cases .line:nth-child(odd):not(.wide) {
  border-right: 1px solid rgba(240, 243, 250, 0.14);
}
.short.cases .line:focus-within,
.short.cases .line:has([aria-invalid="true"]) {
  border-bottom-color: rgba(240, 243, 250, 0.14);
  background: #141821;
}
.short.cases label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: text;
}
.short.cases .line input,
.short.cases .line textarea,
.short.cases .pick [data-pick-button] {
  padding: 6px 0 12px;
  font-size: 18px;
}
.short.cases .line input::placeholder,
.short.cases .line textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.short.cases .pick::after {
  right: 24px;
  top: 44px;
}
.short.cases .pick [data-pick-button] {
  padding-right: 26px;
}
.short.cases .send {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  width: auto;
  height: 56px;
  margin: 16px;
  padding: 0 8px 0 26px;
  border-radius: 999px;
  background: #eceef2;
  color: #0b0d12;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.3s ease;
}
.short.cases .send span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0b0d12;
  color: #eceef2;
}
@media (hover: hover) and (pointer: fine) {
  .short.cases .send:hover {
    background: #fff;
  }
}
.short.cases .load {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  margin: 0;
}
.short.cases small {
  padding-bottom: 10px;
  font-size: 13px;
}
.short.cases [data-pick-list] {
  padding: 8px 22px 14px;
  background: #0d1017;
}
.talk .or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.talk .or::before,
.talk .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(240, 243, 250, 0.22);
}
.reach {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.reach-b {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.reach-b svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.reach-b.full {
  background: #eceef2;
  color: #0b0d12;
}
.reach-b.ring {
  border: 1px solid rgba(240, 243, 250, 0.22);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .reach-b.full:hover {
    background: #fff;
  }
  .reach-b.ring:hover {
    border-color: var(--ink);
  }
}
.affiche .board-end {
  margin-top: 72px;
  text-align: center;
}
.affiche .board-end p {
  margin: 0;
}
.affiche .board-end .others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 24px;
  font-size: 16px;
}
.affiche .board-end .others a {
  color: var(--muted);
  text-decoration: none;
}
@media (max-width: 760px) {
  .affiche h2.board-h {
    margin-top: 72px;
  }
  .affiche ul.board {
    grid-template-columns: 1fr 1fr;
  }
  .affiche ul.board .cap {
    flex-direction: column;
    gap: 0;
  }
  /* the phone's scale (Hugo): the name and the e-mail across, the phone and the need side by side,
     16px and more so iOS never zooms, a full-width "Envoyer" for the thumb */
  .talk {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 72px;
    padding-top: 28px;
  }
  .talk h2.ask {
    margin-bottom: 12px;
  }
  .short.cases .line {
    padding: 12px 16px 2px;
  }
  .short.cases .line:nth-child(1):not(.wide),
  .short.cases .line:nth-child(2) {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .short.cases label {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .short.cases .line input,
  .short.cases .line textarea,
  .short.cases .pick [data-pick-button] {
    padding: 4px 0 11px;
    font-size: 17px;
  }
  .short.cases .pick::after {
    right: 18px;
    top: 38px;
  }
  .short.cases .send {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 24px);
    height: 54px;
    margin: 12px;
  }
  .short.cases .load {
    left: 12px;
    right: 12px;
    bottom: 6px;
  }
  .short.cases [data-pick-list] {
    padding: 6px 16px 12px;
  }
  .reach-b {
    height: 50px;
    padding: 0 14px;
  }
  .affiche .board-end {
    margin-top: 48px;
  }
}