@font-face {
  font-family: "Surt";
  src: url("assets/fonts/Surt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Surt";
  src: url("assets/fonts/Surt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --gris: #687278;
  --noir: #212426;
  --blanc: #ffffff;
  --blanc2: #eceff1;
  --blanc3: #9ca2a6;

  --tile: #fafafa;
  --learn: #918e8d;
  --dark: #2c2c2c;
  --dark-2: #3f3f3f;
  --line: #505050;
  --label: #979797;
  --on-dark: rgba(241, 236, 236, 0.9);

  --col: min(70rem, calc(100% - 2 * clamp(2rem, 6.25vw, 5rem)));
  --gap-tile: 1rem;
  --gap-row: 0.89744rem;
  --gap-project: 10rem;
  --radius: 0.25rem;
  --margin: 1rem;
  --top: 2.0625rem;
}

*, *::before, *::after { box-sizing: border-box; }

* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: "Surt", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, h1, h2, h3, ul, figure, blockquote, dl { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; }

.sr-only {
  position: absolute;
  width: 0.0625rem; height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nav */

.topbar {
  position: fixed;
  top: var(--top);
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 10;
  width: min(29.3125rem, calc(100% - 2 * var(--margin)));
}
.nav {
  border-radius: 0.5rem;
  background: var(--dark);
  color: var(--on-dark);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: #eee;
}
.nav__brand img { width: 3.5775rem; height: 1.21875rem; }

.nav__cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  padding: 0.4375rem 1rem 0.5rem;
  margin: -0.375rem;
  margin: calc(-1 * round(nearest, 0.375rem, 1px));
  border: 0.375rem solid transparent;
  border-width: round(nearest, 0.375rem, 1px);
  border-radius: 0.625rem;
  background: #595959 padding-box;
  color: var(--blanc);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__cta.is-pressed { transform: scale(0.96); }
.nav__cta-label { white-space: nowrap; }
.menu-icon { --step: 0.2300rem; --spin: 0.7s; --fly: 0.2s; display: grid; grid-template-columns: repeat(3, 0.1644rem); gap: 0.0656rem; transition: transform var(--spin) cubic-bezier(0.25, 1, 0.5, 1); }
.menu-icon i { width: 0.1644rem; height: 0.1644rem; border-radius: 0.03rem; background: currentColor; transition: transform var(--fly) cubic-bezier(0.4, 0, 0.1, 1), opacity 0.2s ease-out; }
.nav__cta[aria-expanded="true"] .menu-icon { transform: rotate(90deg); }
.nav__cta[aria-expanded="true"] .menu-icon i:nth-child(even) { opacity: 0; transition: transform var(--fly) cubic-bezier(0.4, 0, 0.1, 1) var(--d), opacity 0.12s ease-in calc(var(--d) + 0.14s); }
.nav__cta[aria-expanded="true"] .menu-icon i:nth-child(2) { --d: 0s; transform: translateY(var(--step)) scale(0); }
.nav__cta[aria-expanded="true"] .menu-icon i:nth-child(6) { --d: 0.015s; transform: translateX(calc(-1 * var(--step))) scale(0); }
.nav__cta[aria-expanded="true"] .menu-icon i:nth-child(8) { --d: 0.03s; transform: translateY(calc(-1 * var(--step))) scale(0); }
.nav__cta[aria-expanded="true"] .menu-icon i:nth-child(4) { --d: 0.045s; transform: translateX(var(--step)) scale(0); }
@media (prefers-reduced-motion: reduce) { .menu-icon, .menu-icon i { transition: none; } }

.nav__panel {
  touch-action: pan-y;
  max-height: calc(100dvh - var(--top) - 2.4375rem - 1rem);
  overflow-y: auto;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.375rem 1rem 1rem;
}
.nav__panel[hidden] { display: none; }

.nav__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
}
.nav__label { font-size: 0.875rem; color: var(--label); }

.lang-switch {
  --sw-bg: var(--dark-2);
  --sw-on: #595959;
  --sw-active: var(--blanc);
  --sw-idle: var(--label);
  display: inline-flex;
  padding: 0.125rem;
  border-radius: 0.375rem;
  background: var(--sw-bg);
  font-size: 0.75rem;
  line-height: 1;
}
.lang-switch__item {
  position: relative;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--sw-idle);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lang-switch__item[aria-current] { background: var(--sw-on); color: var(--sw-active); }
.nav__text { font-size: 0.875rem; }

.people { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.person { display: flex; flex-direction: column; gap: 0.75rem; transition: opacity 0.15s linear; }
.person:active { opacity: 0.55; }
.person:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; border-radius: 0.25rem; }
.person__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  background: var(--on-dark);
  object-fit: cover;
}
.person__txt { position: relative; display: flex; flex-direction: column; height: 2.1875rem; }
.person__name { font-size: 0.875rem; }
.person__role, .person__follow { font-size: 0.75rem; }

.nav__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.nav__mail {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  transition: opacity 0.2s ease;
}
.copy { position: relative; display: inline-block; flex: none; width: 0.75rem; height: 0.75rem; margin-left: 0.5rem; vertical-align: -0.0625rem; color: var(--label); }
.nav__mail .copy { margin-left: 0; vertical-align: baseline; }
a[href^="mailto:"] { white-space: nowrap; }
.copy__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1), filter 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.copy__icon--check { opacity: 0; transform: scale(0.25); filter: blur(4px); }
a.is-copied .copy__icon--copy { opacity: 0; transform: scale(0.25); filter: blur(4px); }
a.is-copied .copy__icon--check { opacity: 1; transform: none; filter: none; }
a.is-copied .copy { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .copy__icon, .copy__icon--check, a.is-copied .copy__icon--copy { transform: none; filter: none; }
}
.socials { display: flex; align-items: center; gap: 0.5rem; }
.socials a { position: relative; display: block; transition: opacity 0.2s ease; }
.socials img { width: 1rem; height: auto; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  touch-action: none;
  background: rgba(255, 255, 255, 0.66);
}
.nav-overlay[hidden] { display: none; }

/* Hero */

.hero {
  padding: 8.5rem var(--margin) 0;
  text-align: center;
}
.br-m { display: none; }
.hero h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  background: linear-gradient(to bottom, #2c2c2c, #595959);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Work */

.work {
  width: var(--col);
  margin: 5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-project);
}

.project { display: flex; flex-direction: column; gap: var(--gap-tile); }

a.tile { display: block; }
.tile {
  overflow: hidden;
  border-radius: var(--radius);
  background: #eee;
}
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile--ui { background: #f9f9f9; }
.tile--ui video { object-fit: contain; }
.tile--tool { position: relative; background: #f2f0eb; }
.tile__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.5s ease; }
.tile__frame.is-ready { opacity: 1; }
.tile--full { aspect-ratio: 16 / 9; }
.tile--half { aspect-ratio: 552.82 / 739.04; }

.row, .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-row); }

.tile--quote, .tile--about {
  aspect-ratio: 1120 / 399.36;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tile);
}
.tile--quote { aspect-ratio: auto; gap: 3rem; padding: 4rem var(--margin); }
.tile--about { aspect-ratio: auto; gap: 1rem; padding: 2rem var(--margin); background: none; }

.quote {
  width: 34.25rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.quote blockquote { font-size: 1.5rem; letter-spacing: 0.03rem; color: #2c2c2c; }
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.02rem;
}
.quote figcaption img {
  width: 3rem;
  height: 3rem;
  border-radius: 0.22437rem;
  object-fit: cover;
}
.quote figcaption > span { display: flex; flex-direction: column; }
.quote__name { color: #2c2c2c; }
.quote__role { color: rgba(44, 44, 44, 0.5); }

.about-teaser {
  width: 46.5545rem;
  max-width: calc(100% - 2 * var(--margin));
  margin-bottom: 2rem;
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.06rem;
  text-align: center;
  color: #2c2c2c;
}
.tile__label { font-size: 1rem; line-height: 1.2; color: #575757; }

.learn-more {
  position: relative;
  display: block;
  padding: 0.39263rem 0.89744rem 0.44869rem;
  border: 0;
  border-radius: 0.22437rem;
  background: var(--learn);
  color: var(--blanc);
  font-size: 0.67306rem;
  line-height: 1;
  letter-spacing: 0.01346rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.learn-more:active { transform: scale(0.96); }

.project .tile, .tile--about { cursor: pointer; }

.cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--dark);
  color: var(--label);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);
  transition: opacity 0.18s ease;
  will-change: transform;
}
.cursor-tag.is-visible { opacity: 1; }

@media (hover: hover) {
  .project .tile img, .project .tile video { transition: transform 0.9s var(--out); }
  .project .tile:hover img, .project .tile:hover video { transform: scale(1.015); }
  .quote blockquote { transition: color 0.35s ease; }
  .tile--quote:hover blockquote { color: #787878; }
  .tile--about .about-teaser { transition: color 0.35s ease; }
  .tile--about:hover .about-teaser { color: #787878; }
}
.tile:focus-visible, .learn-more:focus-visible, .nav__cta:focus-visible,
.arrow:focus-visible, .nav__mail:focus-visible, .lang-switch a:focus-visible, .socials a:focus-visible {
  outline: 2px solid var(--gris);
  outline-offset: 2px;
}

/* Intro */

@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-drop { from { translate: 0 -1rem; } }
@keyframes intro-rise { from { translate: 0 2rem; } }

@media (prefers-reduced-motion: no-preference) {
  body.intro .topbar { animation: intro-fade 0.6s ease-in-out backwards, intro-drop 0.8s var(--out) backwards; }
  body.intro .hero h1 { animation: intro-fade 1.1s ease-in-out backwards, intro-rise 1.3s var(--out) backwards; }
  body.intro .work > .project:first-child > .tile:nth-child(2) { animation: intro-fade 1.1s ease-in-out 0.08s backwards, intro-rise 1.3s var(--out) 0.08s backwards; }
  body.intro .work > .project:first-child > .tile:nth-child(3) { animation: intro-fade 1.1s ease-in-out 0.16s backwards, intro-rise 1.3s var(--out) 0.16s backwards; }
}

/* Footer */

.footer {
  width: min(46.3125rem, calc(100% - 2 * var(--margin)));
  margin: var(--gap-project) auto 0;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-project);
  text-align: center;
}
.contact h2 { font-size: 1rem; color: var(--dark); }

.contact {
  width: min(17.875rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.795rem;
}
.contact a, .contact li { color: #575757; }
.contact li { font-size: 0.875rem; }
.contact a { transition: color 0.2s ease; }
.legal { font-size: 0.75rem; line-height: 1.5; }
.legal li, .legal a { color: var(--label); }
.legal a { transition: color 0.2s ease; }
.contact a[href^="mailto:"] { position: relative; }
.contact .copy { position: absolute; top: 50%; left: 100%; margin: -0.375rem 0 0 0.5rem; opacity: 0; transition: opacity 0.2s ease; }
.contact a:focus-visible .copy, .contact a.is-copied .copy { opacity: 1; }
@media (hover: hover) {
  .contact a:hover .copy { opacity: 1; }
}

/* Couche (fiche projet, About) */

html.has-layer, html.has-nav { overflow: hidden; overscroll-behavior: none; }
html.has-layer .topbar, html.has-nav .topbar { touch-action: none; }

.layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--top) + 2.4375rem + 0.5rem) 1rem 1rem;
  pointer-events: none;
}
.layer[hidden] { display: none; }
.layer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  pointer-events: auto;
  touch-action: none;
}
.layer__panel {
  position: relative;
  width: min(29.3125rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--dark);
  color: var(--on-dark);
  pointer-events: auto;
}
.layer__panel:focus { outline: none; }
.layer__body { display: grid; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.layer__body > * { grid-area: 1 / 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; touch-action: pan-y; overflow-wrap: break-word; }
.layer__body > [hidden] { display: none; }
.layer__body > .sheet > * { flex-shrink: 0; }

.arrow:focus-visible { outline: 0.125rem solid var(--on-dark); outline-offset: 0.125rem; }

.sheet {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-radius: 0.5rem;
  background: var(--dark);
  color: var(--on-dark);
}
.js body[data-layer-page] > * { visibility: hidden; animation: reveal 0s 3s forwards; }
@keyframes reveal { to { visibility: visible; } }

body[data-layer-page] > .sheet { width: min(29.3125rem, calc(100% - 2rem)); margin: 1rem auto; }

.standalone {
  width: min(29.3125rem, calc(100% - 2rem));
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gris);
}
.standalone a { text-decoration: underline; text-underline-position: from-font; }
.standalone__lang { align-self: flex-start; }
.standalone__brand { color: var(--noir); font-weight: 600; text-decoration: none !important; }
.standalone ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; margin: 0; }
.standalone li + li::before { content: "/"; margin-right: 0.5rem; }

.sheet__header--center { justify-content: center; }
.sheet--article .sheet__header {
  position: sticky;
  top: -1rem;
  z-index: 2;
  align-items: flex-start;
  min-height: 0;
  height: 3.5625rem;
  margin: -1rem -1rem -1.5625rem;
  padding-top: 1rem;
  background: linear-gradient(to bottom, var(--dark), rgba(44, 44, 44, 0));
  pointer-events: none;
}
.sheet--article .sheet__back { pointer-events: auto; }
.sheet__back {
  position: relative;
  display: block;
  padding: 0.4375rem 1rem 0.5rem;
  border-radius: 0.25rem;
  background: #595959;
  color: var(--blanc);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet__back:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

.sheet__cover img { display: block; width: 100%; height: auto; aspect-ratio: 437 / 230; object-fit: cover; border-radius: 0.25rem; background: var(--on-dark); }

.sheet--article { --pad: 1.5rem; padding-bottom: 2rem; color: var(--blanc); }
.rich__top { display: flex; flex-direction: column; gap: 0.5rem; }
.rich__head { display: flex; flex-direction: column; gap: 1.5rem; padding: 0.25rem var(--pad) 0; }
.rich__date { font-size: 0.875rem; color: var(--label); }
.rich__title { font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.02em; }
.rich__lead { font-size: 1rem; }
.rich__text { font-size: 0.875rem; }

.prose { display: flex; flex-direction: column; gap: 1.5rem; padding: 0 var(--pad); }
.sheet .prose h2 { margin-top: 0.5rem; font-size: 1rem; color: var(--blanc); }
.prose p { font-size: 1rem; }
.prose figure { margin: 0 calc(-1 * var(--pad)); }
.prose img { display: block; width: 100%; height: auto; border-radius: 0.25rem; background: var(--on-dark); }
.prose figcaption { margin: 0.5rem var(--pad) 0; font-size: 0.75rem; color: var(--label); }

.qa { display: flex; flex-direction: column; gap: 2rem; padding: 0 var(--pad); }
.qa__turn { display: flex; flex-direction: column; gap: 0.5rem; }
.qa__who { font-size: 0.875rem; color: var(--label); }
.qa__q { font-weight: 600; }
.qa__q, .qa__a { font-size: 1rem; }

.rich__author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: fit-content;
  margin: 0 var(--pad);
  font-size: 0.75rem;
  transition: opacity 0.15s linear;
}
.rich__author:active { opacity: 0.55; }
.rich__author:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; border-radius: 0.25rem; }
.rich__author img { width: 3rem; height: 3rem; border-radius: 0.25rem; object-fit: cover; }
.rich__author-txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.rich__author-role, .person__role { color: var(--label); }
.rich__author-follow, .person__follow {
  position: absolute;
  inset: auto 0 0;
  text-align: left;
  color: var(--label);
  opacity: 0;
  transform: translateY(0.5rem);
}
.person__follow { inset: 1.3125rem 0 auto; text-align: left; }
.rich__author:focus-visible .rich__author-name, .person:focus-visible .person__name { color: var(--label); }
.rich__author:focus-visible .rich__author-role, .person:focus-visible .person__role { opacity: 0; transform: translateY(-0.5rem); }
.rich__author:focus-visible .rich__author-follow, .person:focus-visible .person__follow { opacity: 1; transform: none; }
@media (hover: hover) {
  .rich__author-name, .person__name { transition: color 0.3s ease; }
  .rich__author-role, .person__role { transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0.09s; }
  .rich__author-follow, .person__follow { transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0s; }
  .rich__author:hover .rich__author-name, .person:hover .person__name { color: var(--label); }
  .rich__author:hover .rich__author-role, .person:hover .person__role { opacity: 0; transform: translateY(-0.5rem); transition-delay: 0s; }
  .rich__author:hover .rich__author-follow, .person:hover .person__follow { opacity: 1; transform: none; transition-delay: 0.09s; }
}

.sheet__block { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.25rem; border-top: 1px solid var(--line); }
.sheet--about .sheet__block { padding-top: 0; border-top: 0; }
.sheet--about .sheet__block--ruled { padding-top: 0.25rem; border-top: 1px solid var(--line); }

.accordion { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
.accordion__item { padding-bottom: 0.375rem; border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #ddd9d9;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; border-radius: 0.125rem; }
.accordion__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.accordion__bar { transform-box: fill-box; transform-origin: center; transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s cubic-bezier(0.2, 0, 0, 1); }
.accordion__item.is-open .accordion__bar { transform: scaleY(0); opacity: 0; }
.accordion__body { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; color: #979797; }
.accordion__body p { color: #ddd9d9; }
.accordion__body ul { list-style: disc; padding-left: 1.3125rem; }
@media (hover: hover) { .accordion summary:hover { color: var(--blanc); } }
@media (prefers-reduced-motion: reduce) { .accordion__bar { transition: none; } }

.sheet__header { display: flex; align-items: center; min-height: 1.5rem; }
.sheet__title { font-size: 1.5rem; line-height: 1; color: #f1ecec; }
.sheet__title img { height: auto; max-width: 100%; filter: brightness(0) invert(1); }
.sheet h2 { font-size: 0.875rem; color: var(--label); }
.sheet__text { font-size: 0.875rem; color: #f1ecec; }
.sheet__text--flow { display: flex; flex-direction: column; gap: 1.5rem; }

.sheet__head { display: flex; align-items: center; justify-content: space-between; }

.arrows { display: flex; gap: 0.25rem; align-items: center; }
.arrows[hidden] { display: none; }
.arrow {
  position: relative;
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.arrow svg { display: block; }
.arrow circle { fill: #6e6e6e; }
.arrow path { fill: none; stroke: #cfcfcf; stroke-width: 0.8; }
.arrow:disabled { opacity: 0.5; cursor: default; }

.journal__track {
  gap: 0.5rem;
  overscroll-behavior-x: none;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.journal__track::-webkit-scrollbar { display: none; }
.entry {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--dark-2);
}
.entry img {
  width: 11rem;
  height: 7.8125rem;
  flex-shrink: 0;
  background: #eee;
  object-fit: cover;
}
.entry__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.entry__date { font-size: 0.75rem; color: #858585; }
.entry__title { font-size: 1rem; color: #fbfbfb; }
a.entry .entry__title { transition: opacity 0.2s ease; }

.services__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.services__with { max-width: 12.625rem; font-size: 0.75rem; text-align: right; color: #575757; }
.services__body { font-size: 0.875rem; }
.services { display: flex; flex-direction: column; gap: 0; color: var(--label); }

.slider { --h: 15.625rem; position: relative; border-radius: 0.25rem; overflow: hidden; }
.slider--project .slider__track { height: auto; }
.slider--project .slider__track img, .slider--project .slider__track video { height: auto; aspect-ratio: 5 / 3; }
.slider--about .slider__track { height: auto; }
.slider--about .slider__track img { height: auto; aspect-ratio: 1400 / 736; }
.slider__track {
  gap: 0.5rem;
  overscroll-behavior-x: none;
  height: var(--h);
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 0.125rem;
  background: var(--dark);
}
.slider__track::-webkit-scrollbar { display: none; }
.is-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.is-dragging { cursor: grabbing; }
.no-snap { scroll-snap-type: none !important; }
.is-draggable img, .is-draggable a { -webkit-user-drag: none; }
.slider__track img, .slider__track video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; border-radius: 0.25rem; }
.slider__dots {
  position: absolute;
  left: 50%;
  bottom: 0.625rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--dark-2);
}
.slider__dots[hidden] { display: none; }
.slider__dots i {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: #6e6e6e;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.slider__dots i.is-active { width: 1rem; background: #d9d9d9; }

/* Page 404 (provisoire, à dessiner) */

.notfound {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem var(--margin);
  text-align: center;
}
.notfound h1 { font-size: 1.5rem; line-height: 1.2; color: #736f6f; }
.notfound a:not(.learn-more) { text-decoration: underline; text-underline-position: from-font; }
.notfound__brand img { width: 3.5775rem; height: auto; }

/* Témoignages : bouton clair */

.tile--quote .learn-more, .tile--about .learn-more, .notfound .learn-more {
  padding: 0.625rem 1rem;
  border-radius: 0.25rem;
  background: #eee;
  color: #575757;
  font-size: 0.875rem;
  letter-spacing: 0.0175rem;
}

/* Toucher : zones de toucher étendues, survols réservés à la souris, retour à l'appui */

html { -webkit-tap-highlight-color: transparent; }
.nav__cta:focus-visible { outline-offset: -0.25rem; }

.arrow::after { content: ""; position: absolute; inset: -0.6875rem -0.125rem; }
.socials a::after { content: ""; position: absolute; inset: -0.5rem -0.25rem; }
.lang-switch__item::after { content: ""; position: absolute; inset: -0.375rem 0; }
.learn-more::after { content: ""; position: absolute; inset: -0.5rem; }
.sheet__back::after { content: ""; position: absolute; inset: -0.375rem -0.25rem; }

@media (hover: hover) {
  .nav__cta:hover { background: #6a6a6a padding-box; }
  .learn-more:hover { background: #7d7a79; }
  .tile--quote .learn-more:hover, .tile--about .learn-more:hover, .notfound .learn-more:hover { background: #e3e3e3; }
  .sheet__back:hover { background: #6a6a6a; }
  a.lang-switch__item:hover { color: var(--sw-active); }
  .nav__mail:hover, .socials a:hover { opacity: 0.7; }
  .contact a:hover { color: var(--noir); }
  .legal a:hover { color: #575757; }
  a.entry:hover .entry__title { opacity: 0.7; }
}

.sheet__back:active, .arrow:not(:disabled):active { transform: scale(0.96); }
.nav__mail:active, .socials a:active, .lang-switch a:active { opacity: 0.55; }

@keyframes pending { to { opacity: 0.6; } }
.is-loading { animation: pending 0.2s linear 0.12s forwards; }

/* Mobile : d'après le Figma 1060:16593 (393 px) */

@media (max-width: 720px) {
  .sheet--article { --pad: 0.5rem; }
  .nav__cta-label { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); }
  html { font-size: clamp(14px, 4.0712vw, 17.6px); }
  :root {
    --margin: 24px;
    --top: 24px;
    --gutter: 8px;
    --col: calc(100% - 2 * var(--margin));
    --gap-tile: 0.28125rem;
    --gap-row: 0.28125rem;
    --gap-project: 6rem;
  }
  .br-d { display: none; }
  .br-m { display: inline; }
  .hero {
    padding-top: 8.1875rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .hero h1 { grid-column: 2 / 12; }
  .hero h1 {
    font-size: 1.125rem;
    letter-spacing: 0.0225rem;
    background: linear-gradient(to bottom, #2c2c2c, #595959);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .work { margin-top: 3.875rem; }
  .work, .project, .row, .pair {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .work > *, .project > *, .row > *, .pair > * { grid-column: 1 / -1; }
  .tile--quote, .tile--about {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--gutter);
    align-content: center;
    justify-items: center;
    padding: 4rem 0;
  }
  .tile--quote > *, .tile--about > * { grid-column: 2 / 12; }
  .tile--quote { row-gap: 3rem; }
  .quote { width: 100%; }
  .quote blockquote { font-size: 1.125rem; letter-spacing: 0.0225rem; }
  .quote figcaption { font-size: 0.875rem; letter-spacing: 0.0175rem; }
  .tile--about { row-gap: 0; padding: 2rem 0; }
  .tile__label { margin-bottom: 0.3375rem; font-size: 0.875rem; line-height: 1.5; }
  .about-teaser { max-width: 100%; margin-bottom: 2.8125rem; font-size: 2rem; letter-spacing: 0.04rem; }
  .layer { padding: calc(var(--top) + 2.4375rem + 0.5rem) var(--margin) 1rem; }
  .slider__track { height: auto; }
  .slider__track img, .slider__track video { height: auto; aspect-ratio: 298 / 195; object-fit: cover; }
  .sheet__cover img { aspect-ratio: 4 / 3; }
  .layer .sheet { gap: 1.5rem; }
  .entry { gap: 0.5rem; border-radius: 0.25rem; background: #575757; }
  .entry img { width: calc((100% - 0.5rem) / 2); height: auto; aspect-ratio: 176 / 125; border-radius: 0.157rem; }
  .entry__text { flex: 1; min-width: 0; gap: 0.25rem; padding-top: 0; }
  .entry__title { font-size: 0.875rem; }
}

/* Écrans bas (téléphone en paysage) : barre plus près du haut */

@media (max-height: 500px) and (orientation: landscape) {
  :root { --top: 0.75rem; }
}

/* Écran tactile : comportements d'application */

@media (pointer: coarse) {
  html { touch-action: manipulation; overscroll-behavior-y: none; }
  a, button { -webkit-touch-callout: none; }
  .topbar, .tile, .learn-more, .arrow, .slider, .entry, .person, .lang-switch {
    -webkit-user-select: none;
    user-select: none;
  }
  .project .tile, .tile--about { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
  .project .tile:active, .tile--about:active { transform: scale(0.992); }
  a.entry { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
  a.entry:active { transform: scale(0.98); }
}