/* Positif Design */

@font-face {
  font-family: Montserrat;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --red: #f9233e;
  --ink: #303030;
  --text: #676767;
  --black: #000;
  --night: #0d0f0d;
  --paper: #f6f6f6;
  --line: #dedede;
  --page: 1100px;
  --gutter: 45px;
  --header: 100px;
}

@media (width < 1200px) { :root { --page: 950px; } }
@media (width < 1000px) { :root { --page: 768px; } }
@media (width < 768px) { :root { --page: 600px; } }
@media (width < 600px) { :root { --page: 420px; --gutter: 15px; } }
@media (width < 480px) { :root { --page: 300px; } }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 14px/26px Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (width < 1000px) { body:not(.home) { min-height: calc(100dvh + 100px); } }
main { flex: 1; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .1s linear; }
p { margin: 0; line-height: 28px; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h4, h5, h6 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }

.icon { width: 1em; height: 1em; fill: currentColor; }
.wrap { width: var(--page); max-width: 100%; margin-inline: auto; }

.button {
  display: inline-block;
  height: 45px;
  padding: 0 23px;
  border: 3px solid currentColor;
  background: transparent;
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  line-height: 39px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .1s linear, background-color .1s linear, border-color .1s linear;

  &:hover { background: var(--red); border-color: var(--red); color: #fff; }
  &.on-dark { color: #fff; }
  @media (width < 768px) { padding-inline: 14px; }
}

/* Header */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--header);
  color: var(--ink);
  transition: background-color .2s, height .2s;

  @media (width >= 1000px) {
    &.is-stuck {
      position: fixed;
      height: 60px;
      background: #fff;
      box-shadow: 0 1px 3px rgb(0 0 0 / .11);
      animation: drop-in .3s ease-out;

      .logo img { height: 50px; }
    }
  }

  @media (width < 1000px) {
    position: relative;
    background: #fff;
  }
}

/* Over a dark photo or a dark home section, the header switches to its light version. */
@media (width >= 1000px) {
  .home .site-header[data-tone="dark"],
  body:has(.banner, .banner-photo) .site-header:not(.is-stuck) {
    background: linear-gradient(rgb(0 0 0 / .6), rgb(0 0 0 / 0));
    color: #fff;

    .logo-dark { display: none; }
    .logo-light { display: block; }

    .header-contact, .header-contact a { color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
    .header-contact a:hover { color: var(--red); }
  }
}

@keyframes drop-in { from { transform: translateY(-100%); } }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 17px;
  width: min(1100px, 100% - 2 * var(--gutter));
  height: 100%;
  margin-inline: auto;
  position: relative;
}

.logo {
  margin-right: auto;

  img { height: 90px; width: auto; transition: height .2s; }
  .logo-mobile, .logo-light { display: none; }

  @media (width < 1000px) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    .logo-dark { display: none; }
    .logo-mobile { display: block; height: 70px; }
  }
}

.header-contact {
  @media (width < 1000px) { margin-right: 21px; }
  @media (width < 768px) { display: none; }
  a { color: var(--ink); }
  a:hover { color: var(--red); }
}

.menu-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding-left: 8px;

  &:hover { opacity: .8; }
  i, i::before, i::after {
    display: block;
    width: 13px;
    height: 2px;
    background: currentColor;
    transition: transform .3s ease-in-out;
  }
  i { position: relative; }
  i::before, i::after { content: ""; position: absolute; left: 0; }
  i::before { top: -4px; }
  i::after { top: 4px; }

  @media (width < 1000px) {
    i, i::before, i::after { width: 16px; }
  }
}

/* Full-screen menu */

.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(13 15 13 / .9);
  color: #fff;
  opacity: 0;
  backdrop-filter: blur(8px);
  cursor: pointer; /* Anywhere that isn't a link closes the menu. */
  transition: opacity .3s ease-in-out, display .3s allow-discrete, overlay .3s allow-discrete;

  &[open] { opacity: 1; display: grid; place-items: center; }
  @starting-style { &[open] { opacity: 0; } }
  &::backdrop { background: none; }

  li {
    display: flex;
    justify-content: center;
    transition: opacity .35s ease, translate .35s ease;
    transition-delay: calc(var(--i) * 35ms);
    @starting-style { opacity: 0; translate: 0 14px; }
  }

  .menu-bar {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1100px, 100% - 2 * var(--gutter));
    height: var(--header);
    margin-inline: auto;
  }
  .menu-bar img { width: auto; height: 60px; }
  .menu-close i { background: transparent; }
  .menu-close i::before { top: 0; transform: rotate(-45deg); background: #fff; }
  .menu-close i::after { top: 0; transform: rotate(45deg); background: #fff; }

  nav { width: 100%; pointer-events: none; }
  nav a {
    position: relative;
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition: color .15s;

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 8px;
      height: 3px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease-out;
    }
    &:hover::after, &:focus-visible::after, &[aria-current]::after { transform: scaleX(1); }
    &:hover { color: #fff; }
  }
  @media (width < 600px) { nav a { font-size: 17px; } }
}

/* Page banners */

.banner {
  position: relative;
  display: grid;
  place-content: center;
  height: 354px;
  background: #222 center top / cover no-repeat;
  background-attachment: fixed;
  color: #fff;
  text-align: center;

  h1 {
    width: var(--page);
    max-width: 100%;
    padding-top: 43px;
    font-size: 35px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  h1::after {
    content: "";
    display: block;
    width: 91px;
    height: 1px;
    margin: 14px auto 10px;
    background: #fff;
  }

  @media (width < 1000px) {
    height: 163px;
    h1 { padding-top: 0; font-size: 40px; line-height: 50px; }
  }
  @media (width < 768px) {
    height: 126px;
    h1 { font-size: 30px; line-height: 40px; }
  }
  @media (width < 600px) {
    height: 66px;
    background-attachment: scroll;
    h1 { font-size: 20px; line-height: 25px; }
    h1::after { display: none; }
  }
}

.banner-photo {
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;

  img { grid-area: 1 / 1; width: 100%; }
  h1 {
    grid-area: 1 / 1;
    width: var(--page);
    max-width: 100%;
    padding-top: 43px;
    font-size: 35px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  @media (width < 1000px) { h1 { padding-top: 0; font-size: 40px; line-height: 50px; } }
  @media (width < 768px) { h1 { font-size: 30px; line-height: 40px; } }
  @media (width < 600px) { h1 { font-size: 20px; line-height: 25px; } }
}

/* Home */

.loader {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: #1c1c1c;
  transition: opacity .3s, visibility .3s;
  animation: loader-off .3s 1.2s forwards; /* Clears even if a browser extension delays the script. */

  &.is-done { opacity: 0; visibility: hidden; }
}

.stripes {
  display: flex;
  gap: 3px;
  height: 60px;

  i {
    width: 6px;
    background: var(--red);
    animation: stretch 1.2s infinite ease-in-out;
  }
  i:nth-child(2) { animation-delay: -1.1s; }
  i:nth-child(3) { animation-delay: -1s; }
  i:nth-child(4) { animation-delay: -.9s; }
  i:nth-child(5) { animation-delay: -.8s; }
}

@keyframes stretch {
  0%, 40%, 100% { transform: scaleY(.4); }
  20% { transform: scaleY(1); }
}
@keyframes loader-off { to { opacity: 0; visibility: hidden; } }

/* Stacked cards: each section sticks, the next slides over it. Scrolling stays native. */
.stop { display: none; }

@media (width >= 768px) and (height >= 600px) {
  :root { --offset: 0px; }
  /* No CSS snapping: it fights smooth-scroll extensions. js/site.js settles on a card instead. */
  html:has(.home) { scroll-behavior: auto; scrollbar-width: none; }
  .home { background: var(--night); }
  .home .site-header { position: fixed; }

  .home-slides {
    position: relative;
    margin-top: var(--offset);
    timeline-scope: --card-2, --card-3, --card-4, --card-5, --card-6, --card-7;
  }

  .stop {
    display: block;
    position: absolute;
    top: calc(var(--n) * (100dvh - var(--offset)));
    width: 1px;
    height: calc(100dvh - var(--offset));
    pointer-events: none;
  }

  .home-slides .slide {
    position: sticky;
    top: var(--offset);
    height: calc(100dvh - var(--offset));
    min-height: 0;
    overflow: clip;
    box-shadow: 0 -18px 50px rgb(0 0 0 / .3);
  }
  .home-slides .slide:first-of-type { box-shadow: none; }

  .home-slides .slide-grid img {
    width: auto;
    max-height: calc(100dvh - var(--offset) - var(--top, 0px) - 40px);
    margin-inline: auto;
  }

  .home .slide-arrow:not([hidden]) { display: block; }
}

@media (768px <= width < 1000px) and (height >= 600px) {
  :root { --offset: 100px; }
}

/* Bulb section: the photo's glass shards sat behind the header text, so the whole
   explosion is scaled down into the bottom right and its top and left fade into the dark. */
@media (width >= 1000px) and (height >= 600px) {
  .home-slides .slide:nth-of-type(2) {
    align-content: start;
    background-image: none;

    &::before {
      content: "";
      position: absolute;
      inset: 14% 0 0 14%;
      background: var(--photo) center / cover no-repeat;
      mask-image: linear-gradient(to bottom, transparent, #000 22%), linear-gradient(to right, transparent, #000 22%);
      mask-composite: intersect;
      pointer-events: none;
    }

    .wrap { position: relative; z-index: 1; }
    .slide-grid > div:last-child { padding-top: calc(14dvh + 64px); }
    .slide-grid img {
      max-width: 86%;
      max-height: calc(86dvh - 104px);
      margin-right: -20px;
      margin-left: auto;
    }
  }
}

/* Section picker: a plain arrow on the right edge. It turns black or white to suit the section behind it. */
.toc {
  --panel: 230px;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 13;
  display: flex;
  align-items: center;
  color: var(--ink);
  translate: var(--panel) -50%;
  transition: translate .25s ease-out, color .2s;

  &.on-dark { color: #fff; }
  &.is-open { translate: 0 -50%; }
  @media (hover: hover) { &:hover:not(.is-shut) { translate: 0 -50%; } }
}

.toc-list {
  flex: none;
  width: var(--panel);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: rgb(255 255 255 / .82);
  backdrop-filter: blur(6px);
  text-align: right;
  transition: background-color .2s;

  a {
    display: block;
    padding: 8px 16px;
    border-right: 2px solid transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .7;
    transition: opacity .1s, border-color .1s;

    &:hover, &:focus-visible, &.on { opacity: 1; }
    &.on { border-right-color: var(--red); }
  }
}
.toc.on-dark .toc-list { background: rgb(13 15 13 / .7); }

.toc-tab {
  flex: none;
  order: -1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 60px;
  color: inherit;
  font-size: 26px;

  .icon { animation: nudge 2.2s ease-in-out infinite; transition: rotate .25s; }
}
.toc.is-open .toc-tab .icon { rotate: 180deg; animation: none; }
@media (hover: hover) {
  .toc:hover .toc-tab .icon { animation: none; }
  .toc:hover:not(.is-shut) .toc-tab .icon { rotate: 180deg; }
}

@keyframes nudge {
  0%, 55%, 100% { translate: 2px 0; }
  20% { translate: -4px 0; }
  38% { translate: 0 0; }
  46% { translate: -2px 0; }
}

/* The card underneath recedes as the next one arrives, tied to the scroll position. */
@supports (animation-timeline: view()) {
  @media (width >= 768px) and (height >= 600px) and (prefers-reduced-motion: no-preference) {
    .stop:nth-of-type(2) { view-timeline-name: --card-2; }
    .stop:nth-of-type(3) { view-timeline-name: --card-3; }
    .stop:nth-of-type(4) { view-timeline-name: --card-4; }
    .stop:nth-of-type(5) { view-timeline-name: --card-5; }
    .stop:nth-of-type(6) { view-timeline-name: --card-6; }
    .stop:nth-of-type(7) { view-timeline-name: --card-7; }

    .slide:nth-of-type(1) { --next: --card-2; }
    .slide:nth-of-type(2) { --next: --card-3; }
    .slide:nth-of-type(3) { --next: --card-4; }
    .slide:nth-of-type(4) { --next: --card-5; }
    .slide:nth-of-type(5) { --next: --card-6; }
    .slide:nth-of-type(6) { --next: --card-7; }

    .slide:not(:last-of-type) {
      transform-origin: 50% 40%;
      animation: card-recede linear both;
      animation-timeline: var(--next);
      animation-range: entry 0% entry 100%;
    }
    .slide:not(:last-of-type)::after {
      content: "";
      position: absolute;
      inset: 0;
      background: #000;
      opacity: 0;
      pointer-events: none;
      animation: card-dim linear both;
      animation-timeline: var(--next);
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes card-recede { to { transform: scale(.92); border-radius: 20px; } }
@keyframes card-dim { to { opacity: .55; } }

.slide {
  position: relative;
  display: grid;
  align-content: safe center;
  min-height: 100dvh;
  background: var(--tone, #f7f7f7) var(--photo) center / cover no-repeat;

  h2 {
    color: var(--black);
    font-size: 46px;
    font-weight: 700;
    line-height: 63.7px;
    letter-spacing: 6px;
    text-transform: uppercase;
  }
  h2:last-of-type { margin-bottom: 30px; }
  @media (width < 480px) { h2 { font-size: 34px; line-height: 46px; letter-spacing: 3px; } }
  p + .button { margin-top: 46px; }
  p + p { margin-top: 14px; }

  /* A dark veil behind the text keeps it readable on busy photos. */
  &.is-dark {
    --tone: var(--night);
    background-image: linear-gradient(90deg, rgb(0 0 0 / .75), rgb(0 0 0 / .4) 50%, rgb(0 0 0 / .08)), var(--photo);
    h2, p { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / .6); }

    @media (width < 768px) {
      background-image: linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / .55)), var(--photo);
    }
  }

  overflow-x: clip;

  @media (width <= 600px) {
    min-height: 0;
    padding-block: 30px;
  }
}

.slide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;

  > div { padding-top: var(--top, 0); padding-bottom: var(--bottom, 0); }
  img { width: 100%; }

  @media (width < 768px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.slide-end {
  text-align: center;

  h1 { color: #fff; font-size: 30px; font-weight: 700; line-height: 37.5px; }
  h1 a:hover { color: var(--red); }
  p { margin-top: 51px; color: #fff; }

  .social { justify-content: center; margin-top: 15px; }
  .social a {
    display: grid;
    place-items: center;
    width: 102px;
    height: 102px;
    margin: 11px;
    border: 3px solid #2b2b2b;
    background: var(--night);
    color: #fff;
    font-size: 48px;
    transition: color .3s ease-out, border-color .3s ease-out;
  }
  .social a:hover { color: var(--red); border-color: var(--red); }
}

.social { display: flex; }

.slide-arrow {
  display: none;
  position: fixed;
  left: 50%;
  z-index: 10;
  translate: -50%;
  color: #393939;
  font-size: 40px;
  transition: opacity .3s ease-in-out;

  &.up { top: calc(var(--offset, 0px) + 30px); z-index: 25; }
  &.down { bottom: 30px; }
  &:hover { opacity: .6; }
}
.home[data-tone="dark"] .slide-arrow { color: #fff; }

.js .reveal { opacity: 0; transition: opacity .8s ease; }
.js .reveal.is-in { opacity: 1; }
.js .reveal.from-top { translate: 0 -40px; transition: opacity .7s ease-in-out, translate .7s ease-in-out; }
.js .reveal.from-top.is-in { translate: 0; }

/* Réalisations */

.gallery { padding-top: 32px; }
@media (width < 1000px) { .gallery { padding-top: 0; } }

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 49px;

  button {
    padding: 0 22px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .1s;

    &:hover, &[aria-pressed="true"] { color: var(--red); }
    @media (width < 600px) { padding-inline: 10px; }
  }
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 22px;
  align-items: start;

  @media (width < 1200px) { gap: 21px 19px; }
  @media (width < 600px) { grid-template-columns: 1fr; row-gap: 23px; }
}

.project {
  position: relative;
  overflow: hidden;
  view-transition-name: var(--vt);

  &[hidden] { display: none; }
  img { width: 100%; }

  .overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 10px;
    background: rgb(21 21 21 / .78);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity .4s ease-in-out;
  }
  &:hover .overlay, &:focus-within .overlay { opacity: 1; }

  h5 {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 700;
    line-height: 23.57px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  h5 a:hover { color: var(--red); }
  .category { font-size: 13px; font-weight: 500; line-height: 22px; }
  .actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
  .actions .button {
    height: 36px;
    padding-inline: 18px;
    color: #fff;
    font-size: 10px;
    line-height: 30px;
  }
}

.more { padding-block: 40px; text-align: center; }
.more[hidden] { display: none; }
.more .button { border-color: var(--line); }
.more .button:hover { border-color: var(--red); }

.zoom {
  max-width: 94vw;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;

  &::backdrop { background: rgb(0 0 0 / .85); }
  img { max-width: 94vw; max-height: 90vh; width: auto; }
  p { color: #fff; font-size: 13px; }
  button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 34px;
    height: 34px;
    background: var(--red);
    color: #fff;
    font-size: 20px;
    line-height: 1;
  }
}

/* Project page */

.project-page {
  padding-top: 60px;
  @media (width < 1000px) { padding-top: 0; }
}

.project-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;

  .photos { padding-bottom: 8px; }
  .photos img { width: calc(100% - 20px); margin-bottom: 18px; }
  .details { padding-left: 20px; }
  h6 { color: var(--black); font-size: 18px; font-weight: 400; line-height: 27.7px; }
  .info { margin-bottom: 18px; }

  @media (width < 600px) {
    grid-template-columns: 1fr;
    .photos img { width: 100%; }
    .details { padding-left: 0; }
  }
}

.share {
  position: relative;
  color: var(--ink);

  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  summary:hover { color: var(--red); }
  ul { display: flex; gap: 14px; margin-top: 4px; font-size: 18px; }
  a:hover { color: var(--red); }
}

.pager {
  display: flex;
  justify-content: space-between;
  height: 78px;
  margin-bottom: 8px;
  padding: 28px 11px 0 0;

  a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--line);
    color: #b4b4b4;
    font-size: 18px;
    transition: color .1s, border-color .1s;
  }
  a:hover { color: var(--red); border-color: var(--red); }
}

/* Historique */

.article {
  padding-top: 87px;
  padding-bottom: 95px;
  background: #fff;

  h4 {
    margin-bottom: 70px;
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
    line-height: 24.75px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
  }
  strong { font-weight: 700; }
  .rule { height: 28px; margin-top: 45px; background: #efefef; }
}

/* Contact: the map leads, with enough of the page below it showing to invite a scroll. */
.contact-page .site-header { background: #fff; }
.contact-page main { padding-top: var(--header); }
@media (width < 1000px) { .contact-page main { padding-top: 0; } }

.map { position: relative; height: clamp(340px, calc(100dvh - 240px), 680px); background: #e5e3df; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The page scrolls over the map until someone clicks it. */
.js .map { cursor: pointer; }
.js .map iframe { pointer-events: none; }
.js .map.is-active { cursor: auto; }
.js .map.is-active iframe { pointer-events: auto; }
.js .map::after {
  content: "Cliquez pour utiliser la carte";
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50%;
  padding: 8px 14px;
  background: rgb(13 15 13 / .8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.js .map:hover::after { opacity: 1; }
.js .map.is-active::after { opacity: 0; }

.contact {
  padding-block: 48px;
  background: #fff;
}

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

.contact-columns {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr);
  gap: 56px;
  align-items: start;

  @media (width < 1000px) { gap: 36px; }
  @media (width < 768px) { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  h5 {
    margin-bottom: 13px;
    color: var(--black);
    font-size: 15px;
    font-weight: 700;
    line-height: 23.57px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .gap { margin-top: 14px; }
  p a:hover, .social a:hover { color: var(--red); }
  .social { gap: 22px; margin-top: 12px; padding-left: 6px; color: var(--text); font-size: 28px; }
  .chat { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; border-color: #25d366; background: #25d366; color: #fff; }
  .chat:hover { background: #1ebe5b; border-color: #1ebe5b; }
}

.form {
  .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    @media (width < 600px) { grid-template-columns: minmax(0, 1fr); }
  }
  .wide { grid-column: 1 / -1; }

  label {
    display: block;
    color: var(--black);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  input, textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 14px 15px 11px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    outline: 0;
    background: #f3f3f3;
    color: var(--ink);
    font: 400 14px/20px Montserrat, system-ui, sans-serif;
    transition: border-color .1s linear;

    &:focus { border-bottom-color: var(--black); }
    &:user-invalid { border-bottom-color: var(--red); }
  }
  textarea { min-height: 130px; resize: vertical; }
  .button { margin-top: 20px; }
  .button:disabled { opacity: .5; cursor: wait; }
  .trap { position: absolute; left: -9999px; }
  .message { margin-top: 20px; padding: 10px 14px; border: 2px solid var(--red); color: var(--black); }
  .message[hidden] { display: none; }
  .message.ok { border-color: #398f14; }
}

/* 404 */

.lost {
  padding-block: 70px 80px;
  text-align: center;

  h2 { color: var(--black); font-size: 30px; font-weight: 700; line-height: 40px; letter-spacing: 3px; text-transform: uppercase; }
  p { margin-block: 20px 35px; }
}

/* Footer */

.site-footer {
  padding: 15px 0;
  background: var(--night);
  color: #c9c9c9;
  font-size: 12px;
  line-height: 22px;
  text-align: center;

  @media (width < 600px) { padding: 0; line-height: 35px; }
}

.whatsapp {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 18;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
  transition: transform .2s, box-shadow .2s;

  &:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgb(37 211 102 / .5); }
  @media (width < 600px) { right: 16px; bottom: 16px; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 30;
  translate: -50%;
  padding: 10px 18px;
  background: var(--night);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
}

.to-top {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 15;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid #e8e8e8;
  border-radius: 50%;
  color: #b0b0b0;
  font-size: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, color .2s, border-color .2s;

  &.is-on { opacity: 1; pointer-events: auto; }
  &:hover { border-color: var(--red); color: var(--red); }
}

/* Touch screens have no hover, so project titles sit under the photo and the card is the link. */
@media (hover: none), (width < 768px) {
  .banner { background-attachment: scroll; }

  .project {
    overflow: visible;

    .overlay {
      position: static;
      display: block;
      padding: 10px 0 0;
      background: none;
      color: var(--ink);
      text-align: left;
      opacity: 1;
    }
    h5 { margin-bottom: 2px; font-size: 14px; line-height: 20px; letter-spacing: 1px; }
    h5 a::after { content: ""; position: absolute; inset: 0; }
    .category { color: var(--text); font-size: 12px; }
    .actions { display: none; }
  }
}

/* Phones. Everything here is scoped to small screens, so the desktop site is untouched. */
@media (width < 768px) {
  :root { --page: calc(100vw - 40px); --header: 84px; }

  .button {
    height: auto;
    min-height: 45px;
    padding: 10px 18px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 2px;
    text-align: center;
    white-space: normal;
  }

  .logo .logo-mobile { height: 58px; }

  .menu {
    nav a { font-size: 16px; line-height: 46px; letter-spacing: 1.5px; }
    .menu-bar { height: var(--header); }
    .menu-bar img { height: 44px; }
  }

  .banner {
    height: 130px;
    h1 { padding-top: 0; font-size: 22px; line-height: 28px; }
    h1::after { display: none; }
  }
  .banner-photo {
    img { height: 130px; object-fit: cover; }
    h1 { padding-inline: 12px; font-size: 22px; line-height: 28px; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
  }

  /* Home: text first, readable over the photo, no desktop spacing. */
  .js .reveal, .js .reveal.from-top { opacity: 1; translate: 0; transition: none; }
  .home-slides .slide {
    min-height: 0;
    padding-block: 44px;
    background-position: center;
  }
  .home-slides .slide:not(.is-dark) {
    background-image: linear-gradient(rgb(255 255 255 / .84), rgb(255 255 255 / .84)), var(--photo);
  }
  .home-slides .slide.is-dark {
    background-image: linear-gradient(rgb(0 0 0 / .68), rgb(0 0 0 / .68)), var(--photo);
  }
  .home-slides .slide h2 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.25; letter-spacing: 2px; }
  .home-slides .slide p { line-height: 26px; }
  .home-slides .slide p + .button { margin-top: 26px; }

  .home-slides .slide-grid {
    gap: 28px;
    > div { padding-block: 0; }
    > div:has(h2) { order: -1; }
    img { width: auto; max-height: 56vh; margin-inline: auto; }
  }

  .slide-end {
    h1 { font-size: 22px; line-height: 32px; overflow-wrap: anywhere; }
    .social { gap: 12px; margin-top: 26px; }
    .social a { width: 64px; height: 64px; margin: 0; font-size: 28px; }
    p { margin-top: 32px; }
  }

  /* Réalisations */
  .filters {
    gap: 4px 16px;
    margin-block: 24px;
    button { padding: 6px 0; font-size: 13px; }
  }
  .more { padding-block: 32px; }

  /* Project pages */
  .project-page { padding-top: 24px; }
  .project-columns {
    grid-template-columns: minmax(0, 1fr);
    .photos img { width: 100%; }
    .details { padding-left: 0; }
  }
  .pager { padding-right: 0; }

  /* Historique, contact */
  .article { padding-block: 40px 56px; h4 { margin-bottom: 32px; } }
  .map { height: 52dvh; min-height: 280px; }
  .contact { padding-block: 32px 40px; }
  .form .fields { grid-template-columns: minmax(0, 1fr); }
  .form .button { width: 100%; }
  .contact-columns .chat { justify-content: center; width: 100%; }
  .lost h2 { font-size: 24px; line-height: 32px; letter-spacing: 2px; }

  .toc {
    top: auto;
    bottom: 76px;
    translate: var(--panel) 0;
    &.is-open { translate: 0 0; }
    @media (hover: hover) { &:hover:not(.is-shut) { translate: 0 0; } }
  }
  .toc-tab { height: 52px; }

  .whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 26px; }
  .to-top { right: 18px; bottom: 80px; width: 46px; height: 46px; font-size: 18px; }
}