html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
  overflow-x: hidden;
  width: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden],
template {
  display: none;
}

a {
  background-color: #0000;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub,
sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.has-touch * {
  background-attachment: scroll !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.embed:before,
.embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.embed:after {
  clear: both;
}

.embed-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.embed-video iframe,
.embed-video object,
.embed-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button,
[type="button"],
[type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.inline-block {
  max-width: 100%;
  display: inline-block;
}

.row:before,
.row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.row:after {
  clear: both;
}

.row .row {
  margin-left: 0;
  margin-right: 0;
}

.col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.col .col {
  padding-left: 0;
  padding-right: 0;
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.6667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333%;
}

.col-5 {
  width: 41.6667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333%;
}

.col-8 {
  width: 66.6667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333%;
}

.col-11 {
  width: 91.6667%;
}

.col-12 {
  width: 100%;
}

.hidden-main {
  display: none !important;
}

@media screen and (min-width: 1920px) {
  .image.about {
    position: static;
    inset: 7% 0% 0% auto;
  }
}
@media screen and (max-width: 991px) {
  .hidden-main {
    display: inherit !important;
  }

  .hidden-medium {
    display: none !important;
  }

  .col-medium-1 {
    width: 8.33333%;
  }

  .col-medium-2 {
    width: 16.6667%;
  }

  .col-medium-3 {
    width: 25%;
  }

  .col-medium-4 {
    width: 33.3333%;
  }

  .col-medium-5 {
    width: 41.6667%;
  }

  .col-medium-6 {
    width: 50%;
  }

  .col-medium-7 {
    width: 58.3333%;
  }

  .col-medium-8 {
    width: 66.6667%;
  }

  .col-medium-9 {
    width: 75%;
  }

  .col-medium-10 {
    width: 83.3333%;
  }

  .col-medium-11 {
    width: 91.6667%;
  }

  .col-medium-12 {
    width: 100%;
  }

  .col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .hidden-main,
  .hidden-medium {
    display: inherit !important;
  }

  .hidden-small {
    display: none !important;
  }

  .col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .col-small-1 {
    width: 8.33333%;
  }

  .col-small-2 {
    width: 16.6667%;
  }

  .col-small-3 {
    width: 25%;
  }

  .col-small-4 {
    width: 33.3333%;
  }

  .col-small-5 {
    width: 41.6667%;
  }

  .col-small-6 {
    width: 50%;
  }

  .col-small-7 {
    width: 58.3333%;
  }

  .col-small-8 {
    width: 66.6667%;
  }

  .col-small-9 {
    width: 75%;
  }

  .col-small-10 {
    width: 83.3333%;
  }

  .col-small-11 {
    width: 91.6667%;
  }

  .col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .hidden-main,
  .hidden-medium,
  .hidden-small {
    display: inherit !important;
  }

  .hidden-tiny {
    display: none !important;
  }

  .col {
    width: 100%;
  }

  .col-tiny-1 {
    width: 8.33333%;
  }

  .col-tiny-2 {
    width: 16.6667%;
  }

  .col-tiny-3 {
    width: 25%;
  }

  .col-tiny-4 {
    width: 33.3333%;
  }

  .col-tiny-5 {
    width: 41.6667%;
  }

  .col-tiny-6 {
    width: 50%;
  }

  .col-tiny-7 {
    width: 58.3333%;
  }

  .col-tiny-8 {
    width: 66.6667%;
  }

  .col-tiny-9 {
    width: 75%;
  }

  .col-tiny-10 {
    width: 83.3333%;
  }

  .col-tiny-11 {
    width: 91.6667%;
  }

  .col-tiny-12 {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .nav-brand {
    padding-left: 10px;
  }
}

.nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

@media screen and (max-width: 767px) {
  .nav-brand {
    padding-left: 10px;
  }
}

@font-face {
  font-family: Cabinetgrotesk Variable;
  src: url("../fonts/CabinetGrotesk-Variable.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Redhatdisplay Variable;
  src: url("../fonts/RedHatDisplay-Variable.woff2")
    format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Redhatdisplay;
  src: url("../fonts/RedHatDisplay-VariableItalic.woff2")
    format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --dark-grey: #161617;
  --font-family-title: "Cabinetgrotesk Variable", Arial, sans-serif;
  --white: white;
  --height-text-h3: 35px;
  --font-family-text: "Redhatdisplay Variable", Arial, sans-serif;
  --grey: #ffffff80;
  --size-text-h3: 16px;
  --white-alpha-20: #fff3;
  --size-text-titles-mobile: 50px;
  --size-title-main: 65px;
  --height-title-main: 75px;
  --height-text-titles-mobile: 55px;
  --size-title-h2-bis: 35px;
  --black: black;
  --enfants: #281d72;
  --hamani: #593c8a;
  --escape-app: #a0844b;
  --font-family-text-italic: Redhatdisplay, Arial, sans-serif;
}

.layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.embed-youtube {
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.embed-youtube:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

body {
  background-color: var(--dark-grey);
}

h1 {
  font-family: var(--font-family-title);
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

h2 {
  font-family: var(--font-family-title);
  color: var(--white);
  font-size: var(--height-text-h3);
  text-align: right;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 50px;
}

h3 {
  font-family: var(--font-family-text);
  color: var(--grey);
  font-size: var(--size-text-h3);
  line-height: var(--height-text-h3);
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
}

p {
  font-family: var(--font-family-text);
  color: var(--white);
  font-size: var(--size-text-h3);
  margin-bottom: 10px;
  line-height: 28px;
}

img {
  display: inline-block;
}

.logo-link {
  z-index: 1;
}

.logo-link:hover {
  opacity: 0.8;
}

.logo-link:active {
  opacity: 0.7;
}

.logo-link.current {
  padding-bottom: 1px;
}

.nav-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-wrap.mobile {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--dark-grey);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
}

.nav-items {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #fff;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center stretch;
  display: flex;
}

.nav-item {
  opacity: 1;
  font-family: var(--font-family-title);
  color: var(--grey);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-style: none none solid;
  border-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 430;
  line-height: 28px;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-item:hover {
  opacity: 1;
  color: #fff;
}

.nav-item:active {
  opacity: 0.8;
}

/* Roll au survol, sur le menu desktop et le footer : le libellé monte de toute sa
   hauteur pendant qu'un double identique arrive du bas. Le duplicata est posé par
   assets/js/nav.js, les pages n'ont rien à porter ; sans JavaScript le lien reste
   un lien simple, juste sans animation. */
.nav-item-roll {
  /* Hauteur de la fenêtre de rognage. La hauteur de ligne héritée (28px pour 16px de
     texte dans la nav) laissait le libellé visible ~6px au-delà de sa ligne avant
     d'être coupé ; cette valeur la remplace et serre la coupe à 0,1em au-dessus des
     capitales de Cabinet Grotesk, qui montent à 0,68em au-dessus de la ligne de base.
     Le reste passe sous celle-ci, où les seuls jambages sont ceux des crochets de
     [LAB]. Ne pas descendre à line-height: 1 : la zone de texte de cette police fait
     1,15em, elle serait rognée en haut comme en bas. */
  --roll-height: 0.97em;
  display: block;
  position: relative;
  overflow: hidden;
  /* La fenêtre se recentre dans la hauteur de ligne qu'elle remplace : le texte reste
     exactement où il était et le lien garde sa hauteur, seul le rognage se resserre.
     Le calcul vaut pour les trois hauteurs de ligne que croisent ces liens (28px dans
     la nav, 35px et 20px pour le footer selon le breakpoint). */
  margin-top: calc((1lh - var(--roll-height)) / 2);
  margin-bottom: calc((1lh - var(--roll-height)) / 2);
  /* La zone de rognage est élargie à droite sans décaler la mise en page : sur le
     lien de la page courante, en italique, le dernier glyphe penche au-delà de sa
     chasse et serait coupé net par l'overflow. Le pire cas mesuré est le T final
     d'ABOUT et de CONTACT, qui dépasse de 0,15em. */
  padding-right: 0.16em;
  margin-right: -0.16em;
}

.nav-item-roll span {
  display: block;
  line-height: var(--roll-height);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Le double attend juste sous le libellé. Hors flux, il ne compte ni dans la
   hauteur ni dans la largeur du lien, et suit un éventuel retour à la ligne. */
.nav-item-roll span + span {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.nav-item:hover .nav-item-roll span,
.nav-item:focus-visible .nav-item-roll span {
  transform: translateY(-100%);
}

.nav-item.current {
  opacity: 1;
  text-transform: uppercase;
  border: 0 #fff3;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  line-height: 28px;
  font-style: italic;
}

.nav-item.current:hover {
  opacity: 0.8;
  color: #ffffff80;
}

.nav-item.current:active {
  opacity: 0.7;
  color: #32343a;
}

/* Pilules « → Explore ALL » et « → Get in touch ». Au survol, un fond blanc balaie le bouton de
   la gauche vers la droite, dans le sens de la flèche, qui avance de son côté ; le libellé passe
   au sombre à mesure que le fond le recouvre. Comme pour le roll des libellés de nav,
   assets/js/nav.js ne fait que poser le markup — la bande de remplissage, la flèche dans son
   propre élément, et le libellé en double — et toute l'animation est en CSS ; sans JavaScript la
   classe .pill n'est pas posée et la pilule garde son inversion, en fondu. */
.nav-item.highlight {
  border: 1px solid var(--white);
  color: var(--white);
  text-transform: uppercase;
  border-radius: 9999px;
  margin-top: 40px;
  padding-left: 15px;
  padding-right: 15px;
  /* `position` place le libellé au-dessus de la bande de remplissage, `overflow` fait rogner
     celle-ci par le rayon de la pilule. La transition de couleur ne sert plus qu'au repli sans
     JavaScript. Auparavant seule la durée était redéfinie, sur la propriété héritée de .nav-item
     (`color`) : le fond du survol claquait d'un coup. */
  position: relative;
  overflow: hidden;
  transition:
    color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
    background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  display: block;
}

.nav-item.highlight:hover,
.nav-item.highlight:focus-visible {
  background-color: var(--white);
  color: var(--dark-grey);
  text-decoration: none;
}

/* Une fois le markup posé par le JS, le fond uni et l'inversion en fondu laissent la place au
   balayage et au libellé en double. */
.nav-item.highlight.pill:hover,
.nav-item.highlight.pill:focus-visible {
  background-color: #0000;
  color: var(--white);
}

/* La bande part du bord gauche, dans le sens de la flèche. Un `scaleX` plutôt qu'une largeur :
   la transformation est prise en charge par le compositeur, sans recalcul de mise en page à
   chaque image. */
.pill-fill {
  position: absolute;
  inset: 0;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-item.highlight.pill:hover .pill-fill,
.nav-item.highlight.pill:focus-visible .pill-fill {
  transform: scaleX(1);
}

/* Sans `position`, le libellé serait peint sous la bande. */
.pill-text {
  position: relative;
}

/* Le libellé sombre, posé par-dessus le clair et découvert exactement au rythme du fond : une
   lettre à cheval sur le bord de la bande est donc sombre du côté blanc et claire de l'autre.
   Le fondu d'une seule couleur, lui, laissait le libellé en gris à mi-course, illisible sur les
   deux moitiés à la fois. `inset` cale la copie sur la boîte de la pilule et `padding: inherit`
   lui redonne les marges internes de celle-ci : le libellé retombe au pixel près sur l'autre,
   quelle que soit la taille de texte du breakpoint. */
.pill-text-over {
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--dark-grey);
  /* La copie se superpose au libellé : sans cela, une sélection à la souris le prendrait deux
     fois. */
  user-select: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-item.highlight.pill:hover .pill-text-over,
.nav-item.highlight.pill:focus-visible .pill-text-over {
  clip-path: inset(0 0 0 0);
}

/* La flèche avance d'un quart de cadratin, en restant dans la pilule : le libellé ne bouge pas,
   seul l'écart entre les deux se resserre. */
.pill-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-item.highlight.pill:hover .pill-arrow,
.nav-item.highlight.pill:focus-visible .pill-arrow {
  transform: translateX(0.25em);
}

.nav-item.highlight.lab {
  font-size: var(--size-text-h3);
  line-height: var(--height-text-h3);
}

.nav-item.work,
.nav-item.footer {
  color: var(--white);
}

.nav-item.footer.current {
  text-transform: uppercase;
  font-size: 16px;
  font-style: italic;
}

.nav-item.footer.legal {
  color: var(--grey);
}

/* Initiales « SG. » de la nav desktop. 24px pour se détacher des liens (16px) sans
   dépasser la hauteur de ligne qu'ils imposent à la barre : line-height laissé à 28px,
   donc la nav garde exactement la même hauteur qu'avec le nom complet. */
.logo {
  font-family: var(--font-family-title);
  color: var(--white);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 300;
  line-height: 28px;
  text-decoration: none;
  display: block;
}

.logo.mobile {
  font-size: 35px;
  display: block;
}

.logo.mobile.hide {
  display: block;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 75px;
  position: relative;
}

.container.home {
  height: 100vh;
  padding-top: 0;
  padding-bottom: 60px;
}

.container.home-project {
  padding-top: 0;
  padding-bottom: 0;
}

.container.about {
  padding-bottom: 0;
}

.wrap-intro {
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.separator {
  background-color: var(--white-alpha-20);
  height: 1px;
  margin-bottom: 0;
}

.column-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.link-selected-project {
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.selected-project-img {
  object-fit: cover;
  width: 852vw;
  height: 400px;
}

.wrap-selected-project-arrow {
  z-index: 3;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  padding: 20px;
  display: flex;
  position: absolute;
}

.arrow {
  object-fit: fill;
  width: 20px;
  height: 20px;
  display: block;
}

.grid-expertise {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-contact {
  text-align: left;
  font-size: 73px;
  font-weight: 300;
  line-height: 80px;
}

.wrap-footer {
  justify-content: space-between;
  align-items: center;
  padding: 40px 75px;
  display: flex;
}

.copyrights {
  font-family: var(--font-family-text);
  color: var(--grey);
  font-size: var(--size-text-h3);
  font-weight: 400;
}

.wrap-footer-links {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}

.preloader {
  z-index: 9999;
  background-color: var(--dark-grey);
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.preloader-bloc {
  z-index: 50;
  position: relative;
}

.columns-1-selected-projects {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.wrap-projects-columns {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-rows: auto;
  grid-template-columns: 0.5fr 0.5fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  padding-top: 45px;
  padding-bottom: 45px;
  display: grid;
}

.heading-selected-projects {
  font-size: var(--size-title-main);
  line-height: var(--height-title-main);
  text-transform: none;
  font-weight: 300;
}

.title-left {
  text-align: left;
}

.text-span-white {
  color: var(--white);
}

.paragraph {
  font-family: var(--font-family-title);
  color: var(--white);
  font-size: 30px;
  line-height: var(--height-text-h3);
  text-align: left;
  font-weight: 300;
}

.project-banner-img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

.title_project {
  color: var(--white);
  font-size: 44px;
  font-weight: 400;
  line-height: 62px;
}

.project-wrap-presentation {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 20px;
}

.column-project {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.column-project-left {
  padding-left: 0;
}

.column-project-right {
  padding-right: 0;
}

.grid-project-spec {
  grid-template:
    "Area Area"
    / 1fr 1fr 1fr 1fr 1fr;
  padding-top: 30px;
  padding-bottom: 30px;
}

.project-description-title {
  font-family: var(--font-family-text);
  color: var(--grey);
  font-size: var(--size-text-h3);
  line-height: 20px;
}

.project-description-title.h2 {
  line-height: var(--height-text-h3);
}

.grid-project-description {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-img-project {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  margin-top: 10px;
  display: grid;
}

.grid-img-project._3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-img-project._4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-img-project._5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-img-project.multi {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

.image {
  z-index: 0;
  object-fit: cover;
}

.image.about {
  position: absolute;
  inset: 7% 0% 0% auto;
}

.image.gif-full-width {
  width: 100%;
}

/* Vidéos de projet hébergées sur le site, posées dans les mêmes grilles que les images.
   Le reset donne `max-width: 100%` aux <img> mais pas aux <video> : sans lui, la largeur
   du fichier (1080px) sert de taille minimale à la colonne `1fr` de .grid-img-project, qui
   écrase alors sa voisine. `height: auto` laisse les attributs width/height ne servir qu'à
   réserver le ratio avant le chargement, au lieu de figer une hauteur en pixels. */
video.image {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Vidéo dont le cadrage ne suit pas celui de sa voisine dans la grille. `object-fit: cover`,
   hérité de .image, ne rogne que si la boîte a un autre ratio que le fichier, et le
   `height: auto` ci-dessus rendrait à la vidéo le sien : c'est donc `--crop-ratio`, posé en
   style inline comme le `padding-top` des embeds, qui impose le ratio visé — celui des
   vidéos voisines, pour que la ligne se termine droit. */
video.image.crop {
  aspect-ratio: var(--crop-ratio);
}

.container-img-alternate {
  margin-bottom: 60px;
}

.container-img-alternate.plt {
  margin-bottom: 0;
  padding-top: 10px;
}

.img-alternate {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 10px;
  display: grid;
}

.img-alternate.left {
  grid-template-rows: auto;
}

.img-alternate.right {
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1.5fr;
}

.img-alternate.jeff-mills {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  display: grid;
}

.text-span-grey {
  color: var(--grey);
  font-style: normal;
}

.lottie-anim {
  width: 30px;
}

.column-intro {
  padding-bottom: 60px;
}

.column-intro-left {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.column-intro-right {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  padding-left: 10px;
  padding-right: 0;
  display: flex;
}

.text.poem {
  font-style: italic;
  font-weight: 400;
}

/* Le titre portait sa couleur non pas ici mais sur trois `span.text-highlight` qui couvraient
   la totalité de son texte : le gris déclaré à ce niveau ne colorait donc aucun caractère. Les
   spans retirés, la couleur revient sur le titre lui-même, au même rendu. */
.heading-title {
  color: var(--white);
  text-transform: uppercase;
  font-size: 125px;
  line-height: 120px;
}

/* Surtitre des sections de la home. Il n'avait aucune règle à lui et tenait son apparence du
   style par défaut de h3, où il était écrit ; repassé en <p> — il annonçait le h2 qui le suit
   tout en le précédant dans le plan de la page —, il porte maintenant ce style lui-même. */
.tag {
  font-family: var(--font-family-text);
  color: var(--grey);
  font-size: var(--size-text-h3);
  line-height: var(--height-text-h3);
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
}

/* Même bascule pour les deux textes de l'intro, eux aussi écrits en h3 alors qu'ils ne
   titrent rien. `.paragraph` portait déjà tout son style, `.text-span-grey` seulement sa
   couleur : l'alignement et l'interligne que lui donnait h3 sont repris ici. Le
   `max-width: 479px` plus bas repasse `.text-span-grey` à gauche, et prime sur ces règles
   puisqu'il vient après, à spécificité égale. */
.intro-meta {
  line-height: var(--height-text-h3);
  text-align: right;
}

/* La marge haute de h3, que `p` remet à zéro. */
.column-intro .paragraph,
.column-intro .intro-meta {
  margin-top: 10px;
}

.grid-works {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 40px;
}

.selected-project-text-title {
  z-index: 9999;
  font-family: var(--font-family-title);
  color: var(--white);
  text-transform: none;
  font-size: 40px;
  line-height: 45px;
}

.selected-project-text-title.text {
  font-family: var(--font-family-text);
  font-size: var(--size-text-h3);
  text-transform: none;
}

.wrap-selected-project-text {
  z-index: 9999;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  padding: 15px;
  display: none;
  position: absolute;
  inset: 0%;
}

.nav {
  z-index: 50;
  width: 100vw;
  position: sticky;
  top: 0;
}

.desktop-nav {
  background-image: linear-gradient(180deg, var(--dark-grey) 12%, #16161700);
  justify-content: center;
  align-items: center;
  padding: 20px 75px;
  display: flex;
  position: sticky;
  top: 0;
}

/* Flou progressif du contenu qui défile sous la nav desktop, repris du « progressive
   blur » de palominoprod.com : sept couches empilées dont le rayon double (0,1 →
   6,4px), chacune masquée par une bande qui remonte, si bien que le flou croît vers le
   haut de la barre sans marche visible. Une seule couche masquée par un dégradé ne
   suffirait pas : le flou y resterait uniforme et seule son opacité varierait, ce qui
   se voit comme une arête. Les couches sont posées par assets/js/nav.js (sans
   JavaScript la barre garde son seul dégradé) et leur nombre y est en dur : une couche
   ajoutée ici doit l'être aussi là-bas. Le z-index négatif les place sous le contenu de
   la barre, mais au-dessus de son dégradé, qu'elles floutent avec le reste — sans effet
   visible, un dégradé restant lui-même une fois flou. */
.nav-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Nettement plus haut que la barre (88px), comme les 130px de la référence pour un
     header de 75 : le flou a ainsi la place de s'éteindre avant le bas de la zone. */
  height: 150px;
  z-index: -1;
  pointer-events: none;
}

.nav-blur span {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  /* Les pourcentages partent du bas : chaque couche n'agit que sur sa bande, et les
     bandes se chevauchent pour que le passage de l'une à l'autre ne se voie pas. */
  mask-image: linear-gradient(
    to top,
    #0000 var(--from),
    #000 var(--in),
    #000 var(--out),
    #0000 var(--to)
  );
}

.nav-blur span:nth-child(1) { --blur: 0.1px; --from: 0%;  --in: 10%;  --out: 30%;  --to: 40%; }
.nav-blur span:nth-child(2) { --blur: 0.2px; --from: 10%; --in: 20%;  --out: 40%;  --to: 50%; }
.nav-blur span:nth-child(3) { --blur: 0.4px; --from: 15%; --in: 30%;  --out: 50%;  --to: 60%; }
.nav-blur span:nth-child(4) { --blur: 0.8px; --from: 20%; --in: 40%;  --out: 60%;  --to: 70%; }
.nav-blur span:nth-child(5) { --blur: 1.6px; --from: 40%; --in: 60%;  --out: 80%;  --to: 90%; }
.nav-blur span:nth-child(6) { --blur: 3.2px; --from: 60%; --in: 80%;  --out: 100%; --to: 100%; }
.nav-blur span:nth-child(7) { --blur: 6.4px; --from: 70%; --in: 100%; --out: 100%; --to: 100%; }

.mobile-nav {
  background-image: linear-gradient(180deg, var(--dark-grey) 10%, #16161700);
  justify-content: space-between;
  align-items: stretch;
  width: auto;
  height: auto;
  padding: 20px;
  display: none;
}

.mobile-nav-top {
  z-index: 50;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: sticky;
  top: 0;
}

.mobile-nav-drop {
  z-index: 40;
  background-color: var(--dark-grey);
  width: 100vw;
  height: 100dvh;
  display: block;
  position: fixed;
  inset: 0%;
  overflow: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-wrap-left-align {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  display: flex;
}
.mobile-nav-wrap-social {
  padding-top: 30px;
  padding-bottom: 10px;
  display: flex;
  flex-flow: column;
  align-items: start;
  justify-content: end;
}

.nav-center {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.title-main-project {
  color: var(--white);
  font-size: var(--size-title-main);
  line-height: var(--height-title-main);
  text-align: left;
  font-weight: 300;
}

.about-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.about-list-lines {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.25fr 1.25fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.about-list-item {
  color: var(--grey);
  font-size: var(--size-text-h3);
  line-height: var(--height-text-h3);
  text-align: left;
  display: block;
}

.wrap-about {
  margin-top: 40px;
  margin-bottom: 40px;
}

.div-legal {
  margin-bottom: 40px;
}

.wrapper-lab-items {
  flex-flow: wrap;
  margin-top: 40px;
  display: flex;
}

.lab-items {
  max-width: 33.3%;
  position: relative;
}

.image-wrapper {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  flex-flow: column;
}

.image-wrapper.text-painting {
  padding-top: 0;
  padding-left: 0;
  padding-right: 10px;
}

.wrap-image-full {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

/* Alignement sur la ligne de base plutôt que sur le centre des boîtes : le copyright
   (20px de hauteur de ligne) et le lien legal (28px + 20px de padding) n'ont pas la même
   hauteur, et les centrer laissait un demi-pixel d'écart aux largeurs où la ligne du lien
   passe à 35px. Sur la baseline, les deux textes reposent sur la même ligne à toute
   largeur. */
.wrap-footer-legals {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: baseline;
  display: flex;
}

.slider {
  height: auto;
  display: block;
}

.slide-nav {
  padding-top: 10px;
  font-size: 10px;
  line-height: 28px;
}

.text-painting {
  padding-top: 10px;
  padding-bottom: 10px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 80vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 400px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

@media screen and (max-width: 1045px) {
  .logo-link.current {
    flex: 1;
  }
  .image.about {
    width: 48vw;
    position: absolute;
    inset: 7% 0% 0% auto;
  }
  .mobile-nav-wrap-left-align {
    flex-flow: column;
    justify-content: end;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }
  .nav-wrap {
    margin-right: 0;
  }
  .nav-items {
    flex-direction: row;
    justify-content: space-between;
  }
  .nav-item.footer.menu {
    padding: 2px 20px;
    color: var(--white-alpha-20);
  }
  .nav-item {
    font-family: var(--font-family-title);
    text-align: left;
    text-transform: uppercase;
    flex: 0 auto;
    font-size: 30px;
    line-height: 35px;
    padding: 5px 20px;
    transition:
      background-color 0.4s,
      color 0.4s;
  }
  .nav-item.current {
    color: var(--grey);
    font-size: 30px;
    padding: 10px 20px;
    font-style: italic;
  }
  .mobile-nav-wrap-social {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: end;
  }
  .nav-item:hover {
    background-color: #0000;
  }

  .nav-item:active {
    background-color: #eef0f3;
  }

  .nav-item.highlight {
    font-size: 20px;
    line-height: 30px;
  }

  .nav-item.highlight.lab {
    font-size: var(--size-text-h3);
  }

  .nav-item.footer {
    font-size: var(--size-text-h3);
    line-height: var(--height-text-h3);
    text-transform: uppercase;
  }

  .container {
    padding: 40px 20px;
  }

  .container.home {
    height: auto;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .wrap-footer {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }

  .wrap-projects-columns {
    grid-template-columns: 0.75fr 0.5fr;
  }

  .heading-selected-projects {
    font-size: 45px;
    line-height: 50px;
  }

  .menu-button {
    padding: 0;
  }

  .menu-button.open {
    background-color: #0000;
  }

  .lottie-anim {
    width: 30px;
  }

  .column-intro {
    justify-content: center;
    align-items: flex-end;
    display: flex;
  }

  .heading-title {
    font-size: 70px;
    line-height: 80px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: flex;
  }

  .mobile-nav-drop {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .logo-link {
    padding-left: 0;
  }
  .mobile-nav-wrap-left-align {
    flex-flow: column;
    justify-content: end;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }
  .nav-items {
    flex-direction: row;
    justify-content: space-between;
  }
  .nav-item.current {
    color: var(--grey);
    font-size: 30px;
    padding: 10px 20px;
    font-style: italic;
  }
  .nav-item.footer.menu {
    padding: 2px 20px;
    color: var(--white-alpha-20);
  }
  .nav-item.footer.menu {
    padding: 2px 20px;
    color: var(--white-alpha-20);
  }

  .nav-item {
    font-family: var(--font-family-title);
    text-align: left;
    text-transform: uppercase;
    flex: 0 auto;
    font-size: 30px;
    line-height: 35px;
    padding: 5px 20px;
    transition:
      background-color 0.4s,
      color 0.4s;
  }

  .nav-item:hover {
    background-color: #0000;
  }

  .nav-item.highlight {
    font-size: var(--size-text-h3);
  }

  .nav-item.work {
    line-height: 35px;
  }

  .nav-item.footer {
    font-size: var(--size-text-h3);
    line-height: var(--height-text-h3);
    text-transform: uppercase;
    padding: 10px 0;
  }

  .container.home {
    height: auto;
    padding: 0px 20px;
  }

  .text-contact {
    font-size: 45px;
    line-height: 50px;
  }

  .wrap-footer {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .wrap-projects-columns {
    grid-template-columns: 1fr 0.75fr;
  }

  .title-left {
    font-weight: 300;
  }

  .title_project {
    line-height: 40px;
  }

  .lottie-anim {
    width: 30px;
  }

  .mobile-nav {
    padding: 20px;
  }

  .mobile-nav-drop {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  h3 {
    text-align: left;
  }

  .logo-link.current {
    flex: 0 auto;
  }

  .nav-wrap {
    background-color: var(--dark-grey);
  }

  .nav-wrap.mobile {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100vw;
  }
  .mobile-nav-wrap-social {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: end;
  }

  .nav-items {
    background-color: #16161700;
    flex-direction: row;
    justify-content: space-between;
    display: flex;
  }

  .nav-item {
    font-family: var(--font-family-title);
    text-align: left;
    text-transform: uppercase;
    flex: 0 auto;
    font-size: 30px;
    line-height: 35px;
    padding: 5px 20px;
    transition:
      background-color 0.4s,
      color 0.4s;
  }

  .nav-item:hover {
    background-color: #0000;
  }

  .nav-item.current {
    color: var(--grey);
    font-size: 30px;
    padding: 10px 20px;
    font-style: italic;
  }

  .nav-item.highlight {
    font-size: var(--size-text-h3);
    line-height: var(--height-text-h3);
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-item.highlight.lab {
    margin-top: 0;
  }

  .nav-item.work {
    text-align: left;
  }

  .nav-item.work.current {
    opacity: 100;
    color: var(--white);
    font-size: 30px;
    font-style: italic;
    transition-property: none;
  }
  .nav-item.footer.menu {
    padding: 2px 20px;
    color: var(--white-alpha-20);
  }

  .nav-item.footer {
    font-family: var(--font-family-title);
    text-align: center;
    text-transform: uppercase;
    padding: 0 10px;
    font-size: 16px;
    line-height: 20px;
  }

  .nav-item.footer.legal {
    order: -1;
    padding-top: 20px;
  }

  .logo {
    display: none;
  }

  .logo.mobile,
  .logo.mobile.hide {
    display: block;
  }

  .container {
    padding: 30px 10px;
  }

  .container.home {
    height: auto;
    padding: 0px 10px;
  }

  .wrap-intro {
    height: auto;
  }

  .column-2 {
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .grid-expertise {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .text-contact {
    font-size: var(--size-text-titles-mobile);
    line-height: 50px;
  }

  .wrap-footer {
    flex-flow: column;
    justify-content: space-between;
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .copyrights {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
  }

  .wrap-footer-links {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 40px;
    display: grid;
  }

  .wrap-projects-columns {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .wrap-projects-columns.contact {
    padding-top: 0;
    padding-bottom: 0;
  }

  .columns-2-selected-projects {
    order: -1;
  }

  .heading-selected-projects {
    font-size: var(--height-text-titles-mobile);
    line-height: var(--height-text-titles-mobile);
    text-align: left;
  }

  .title-left {
    font-size: var(--size-title-h2-bis);
    line-height: var(--height-text-titles-mobile);
    margin-top: 0;
  }

  .paragraph {
    font-family: var(--font-family-text);
    font-size: var(--size-text-h3);
    line-height: var(--height-text-h3);
    font-weight: 400;
  }

  .title_project {
    text-align: left;
    margin-bottom: 0;
    line-height: 55px;
  }

  .project-wrap-presentation {
    padding-top: 0;
  }

  .column-project {
    flex-flow: column;
  }

  .column-project-right {
    padding-left: 0;
  }

  .grid-project-spec {
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1.75fr;
    grid-auto-columns: 0.25fr;
    display: flex;
  }

  .project-description-title {
    text-align: left;
    order: 1;
  }

  .project-description-title.h2 {
    line-height: var(--height-text-h3);
  }

  .grid-project-description {
    flex-flow: column;
    display: flex;
  }

  /* `._3` seul ne se replie pas : comportement hérité de l'export, qui convient aux images
     larges de Hanami et Fade Away. `.fold-2` lui ajoute le repli des grilles `._4` et `._5`,
     pour les lignes de portraits, sans rien changer partout ailleurs. */
  .grid-img-project._3.fold-2,
  .grid-img-project._4,
  .grid-img-project._5 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-img-project.multi {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .image.about {
    width: 100vw;
    position: static;
    inset: auto 0% -2%;
  }

  .img-alternate.left {
    flex-flow: column;
    display: flex;
  }

  .text-span-grey {
    font-family: var(--font-family-text);
    text-align: left;
  }

  .menu-button {
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }

  .menu-button.open {
    flex: none;
  }

  .lottie-anim {
    width: 30px;
  }

  .column-intro {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .column-intro-right {
    justify-content: flex-start;
    align-items: flex-end;
    height: auto;
    padding-left: 0;
    display: block;
  }

  .heading-title {
    font-size: 15vw;
    line-height: 95%;
  }

  .grid-works {
    grid-template-columns: 1fr;
  }

  .wrap-selected-project-text {
    display: none;
  }

  .nav {
    width: 100vw;
    height: auto;
    position: sticky;
    inset: 0% 0% auto;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    background-image: linear-gradient(180deg, var(--dark-grey) 10%, #16161700);
    width: auto;
    height: auto;
    padding: 20px;
    display: flex;
  }

  .mobile-nav-top {
    z-index: 50;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: sticky;
    top: 0;
  }

  .mobile-nav-drop {
    z-index: 40;
    background-color: var(--dark-grey);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: none;
    overflow: hidden !important;
  }

  .mobile-nav-wrap-left-align {
    flex-flow: column;
    justify-content: end;
    align-items: flex-start;
    height: 100vh;
    display: flex;
  }

  .mobile-nav-wrap-social {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: end;
  }

  .title-main-project {
    font-size: var(--size-text-titles-mobile);
    line-height: var(--height-text-titles-mobile);
  }

  .about-list {
    padding-top: 0;
    padding-bottom: 0;
  }

  .about-list-lines {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1.75fr 1fr;
  }

  .about-list-item {
    margin-top: 0;
    overflow: visible;
  }

  .about-list-item.expertise {
    display: block;
    text-align: right;
  }

  .tag {
    margin-top: 0;
  }

  .wrapper-lab-items {
    flex-flow: column;
    display: flex;
  }

  .lab-items {
    max-width: none;
  }

  .wrap-image-full {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  /* En colonne, `baseline` retomberait sur `flex-start` et collerait les deux lignes à
     gauche : on reprend le centrage horizontal. */
  .wrap-footer-legals {
    flex-flow: column;
    align-items: center;
  }

  .slide-nav {
    padding-top: 19px;
    font-size: 5px;
  }
}

#node-a5b2e6a1-ae66-e37f-b2ba-e94b67b1c70a-b763cedd,
#node-_565281f6-b29e-bd1c-cde8-94ea844a5b56-b763cedd,
#node-d3643728-d51d-d188-6bd0-b0a42124f27d-b763cedd {
  justify-self: end;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-ee46117a {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-ee46117a {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-ee46117a {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-ee46117a,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-ee46117a {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_2d70a509-2f21-5cff-1d3b-a77d0e6710ef-ee46117a,
#node-af08caad-5335-04af-b817-e9cccc32fa9c-ee46117a,
#node-b6eed32f-29cf-340d-4c8c-c0c0e7040ecc-ee46117a {
  place-self: stretch stretch;
}

#node-_48085090-a0c5-6d59-611f-295ff12fcff0-ee46117a {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: stretch stretch;
}

#node-_48085090-a0c5-6d59-611f-295ff12fcff1-ee46117a,
#node-_443263b8-3b6e-14e1-2c90-ef491dbe7d8c-ee46117a,
#node-_443263b8-3b6e-14e1-2c90-ef491dbe7d8d-ee46117a,
#node-_443263b8-3b6e-14e1-2c90-ef491dbe7d8e-ee46117a,
#node-_443263b8-3b6e-14e1-2c90-ef491dbe7d8f-ee46117a,
#node-_443263b8-3b6e-14e1-2c90-ef491dbe7d90-ee46117a,
#node-_7335a731-663f-419e-ab9d-a14fec0841e7-ee46117a,
#node-_7335a731-663f-419e-ab9d-a14fec0841e8-ee46117a,
#node-_7fd12ffc-bd7f-642a-c11b-dd5a6ce0972a-ee46117a,
#node-_7fd12ffc-bd7f-642a-c11b-dd5a6ce09729-ee46117a,
#node-_4aee756e-0074-e1a4-949a-47b020f51605-ee46117a,
#node-e9ed6fb6-96a7-a4e2-580e-96b4956efc35-ee46117a {
  place-self: stretch stretch;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-583d1475 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-583d1475 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-583d1475 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-583d1475,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-583d1475 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-da59b52a-3f39-899f-4712-eeda67105a3e-a7067acb,
#node-a35613a5-8d2f-63ef-b04e-f05264664976-a7067acb,
#node-a35613a5-8d2f-63ef-b04e-f0526466497d-a7067acb,
#node-a35613a5-8d2f-63ef-b04e-f05264664984-a7067acb,
#node-a35613a5-8d2f-63ef-b04e-f0526466498b-a7067acb,
#node-_2083f8ca-906c-0fac-3d23-abcbaba3f35c-a7067acb,
#node-_2083f8ca-906c-0fac-3d23-abcbaba3f363-a7067acb {
  justify-self: end;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-d74e1340 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-d74e1340 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-d74e1340 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-d74e1340,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-d74e1340 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-73ecaf3d {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-73ecaf3d {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-73ecaf3d {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-73ecaf3d,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-73ecaf3d {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-b1e766c8 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-b1e766c8 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-b1e766c8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-b1e766c8,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-b1e766c8 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-7e6cbff4 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-7e6cbff4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-7e6cbff4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-7e6cbff4,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-7e6cbff4 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-9003e805 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-9003e805 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-9003e805 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-9003e805,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-9003e805 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_8b75aab3-7de7-73d1-8b96-ad838a2437f4-9003e805,
#node-_8b75aab3-7de7-73d1-8b96-ad838a2437f5-9003e805,
#node-_8b75aab3-7de7-73d1-8b96-ad838a2437f6-9003e805 {
  place-self: stretch stretch;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-fa1e7b79 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-fa1e7b79 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-fa1e7b79 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-fa1e7b79,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-fa1e7b79 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_688c8ca4-1917-34e7-a067-91b3ab1f7798-fa1e7b79,
#node-_688c8ca4-1917-34e7-a067-91b3ab1f7799-fa1e7b79,
#node-_688c8ca4-1917-34e7-a067-91b3ab1f779c-fa1e7b79,
#node-_688c8ca4-1917-34e7-a067-91b3ab1f779b-fa1e7b79 {
  place-self: stretch stretch;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-958a51ac {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-958a51ac {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-958a51ac {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-958a51ac,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-958a51ac {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-a3760244-372c-a756-fde2-efa770033a5c-958a51ac {
  place-self: stretch stretch;
}

#node-a3760244-372c-a756-fde2-efa770033a5d-958a51ac {
  place-self: auto;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-f5df85be {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-f5df85be {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-f5df85be {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-f5df85be,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-f5df85be {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-74081d25 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-74081d25 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-74081d25 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-74081d25,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-74081d25 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-be479c76 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-be479c76 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-be479c76 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-be479c76,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-be479c76 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-e05ebccf {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-e05ebccf {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-e05ebccf {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-e05ebccf,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-e05ebccf {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa7-543de013 {
  grid-area: Area;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaa9-543de013 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#node-_4778df55-ee04-5015-3715-5cd7494dcaab-543de013 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#node-c539c902-7bec-314c-2858-01655b9aabf9-543de013,
#node-_91017e02-7bdd-5573-3488-82bf31cd8b35-543de013 {
  grid-area: span 2 / span 2 / span 2 / span 2;
  justify-self: start;
}

@media screen and (max-width: 479px) {
  #node-_35e2332f-00b9-871b-87b6-fbe387d00b20-993cac93 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-ee46117a {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-ee46117a {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-583d1475 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-583d1475 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-d74e1340 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-d74e1340 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-73ecaf3d {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-73ecaf3d {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-b1e766c8 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-b1e766c8 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-7e6cbff4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-7e6cbff4 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-9003e805 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-9003e805 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-fa1e7b79 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-fa1e7b79 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-958a51ac {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-958a51ac {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-f5df85be {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-f5df85be {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-74081d25 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-74081d25 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-be479c76 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-be479c76 {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-e05ebccf {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-e05ebccf {
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaa9-543de013 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #node-_4778df55-ee04-5015-3715-5cd7494dcaab-543de013 {
    justify-self: start;
  }
}

.menu-button {
  cursor: pointer;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 30px;
  height: 30px;
  position: relative;
  display: block;
}

/* Deux barres horizontales superposées au centre, la seconde tournée à -90° :
   c'est le + au repos. Dimensions reprises de l'icône d'origine, dont le carré
   de 740 unités valait 30px (trait de 60 unités = 2,4px, barre = 28,7px). */
.menu-icon-bar {
  background-color: var(--white);
  width: 28.7px;
  height: 2.4px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.2px 0 0 -14.35px;
}

/* La barre verticale pivote de 90° vers la droite pour former le −, et revient
   à la verticale par le chemin inverse à la fermeture. Une transition plutôt que
   des keyframes : le retour est alors le miroir exact de l'aller, et l'icône ne
   peut pas rester figée sur le − si une classe n'est pas retirée. */
.menu-icon-bar:nth-child(2) {
  transform: rotate(-90deg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-button.open .menu-icon-bar:nth-child(2) {
  transform: rotate(0deg);
}

/* Libellés de page du menu burger : plus grands, centrés dans la hauteur de l'écran et un peu
   plus espacés, le bloc social restant ancré en bas. Les règles sont scopées au panneau — les
   `.nav-item` des media queries plus haut portent aussi les liens du footer — et posées ici,
   après elles, pour passer devant `.nav-item.current` et `.nav-item.work.current`, qui
   rappellent l'ancienne taille. Rien n'est animé ici : le déroulé du panneau reste écrit en
   inline par assets/js/nav.js. */
@media screen and (max-width: 1045px) {
  /* 35px dès 389px de large, soit tous les téléphones courants ; en dessous la taille suit la
     largeur, sans quoi « Interactive & Visual Experience » passe à trois lignes et la liste,
     bloc social compris, dépasse la hauteur d'un 360x640 ou d'un 320x568. Hauteur de ligne
     et marges internes suivent, en em. */
  .mobile-nav .mobile-nav-wrap-left-align > .nav-item {
    font-size: clamp(28px, 9vw, 35px);
    line-height: 1.15;
    padding-top: 0.23em;
    padding-bottom: 0.23em;
  }

  /* Les deux marges auto se partagent l'espace libre à parts égales : le groupe de libellés se
     centre entre le haut de la zone et le bloc social, qui reste en bas. Le padding retire de
     cet espace la bande occupée par la barre — 20px de marge, 30px d'icône, 20px de marge —,
     affichée par-dessus le panneau : le centrage part donc de son bas. La boîte garde sa
     hauteur (box-sizing: border-box), le bloc social ne bouge pas. Sur un écran trop court les
     marges retombent à 0 et c'est `flex-start` qui reprend la main : le contenu déborde alors
     par le bas, jamais par le haut, où il serait passé sous la barre sans retour possible (le
     panneau rogne son débordement sous 480px). */
  .mobile-nav .mobile-nav-wrap-left-align {
    justify-content: flex-start;
    padding-top: 70px;
  }

  .mobile-nav .mobile-nav-wrap-left-align > .nav-item:first-child {
    margin-top: auto;
  }

  .mobile-nav .mobile-nav-wrap-social {
    margin-top: auto;
  }
}

@media screen and (max-width: 479px) {
  /* Sous 480px, la hauteur du panneau passait à 100vh, qui dépasse l'écran sur iOS tant que
     la barre d'URL est visible : le panneau faisant 100dvh et rognant son débordement, le bas
     du bloc social serait passé hors champ. */
  .mobile-nav .mobile-nav-wrap-left-align {
    height: 100dvh;
  }
}

[data-slider] {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.slider-track {
  display: flex;
  will-change: transform;
}

.slider-slide {
  flex: 0 0 100%;
  width: 100%;
}

.slider-slide img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.slide-nav {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.slider-dot {
  cursor: pointer;
  background-color: #2226;
  border: 0;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  padding: 0;
}

.slider-dot.active {
  background-color: #fff;
}