@charset "UTF-8";

@font-face {
  font-style: normal;
  font-weight: 100 900;
  font-family: "ABC Diatype";
  src: url("../fonts/ABCDiatypePlusVariable-Trial.ttf") format("truetype");
}

@property --sky-top {
  syntax: "<color>";
  inherits: false;
  initial-value: #1f4a7c;
}

@property --sky-high {
  syntax: "<color>";
  inherits: false;
  initial-value: #456990;
}

@property --sky-low {
  syntax: "<color>";
  inherits: false;
  initial-value: #f2b792;
}

@property --sky-bottom {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff9a23;
}

body {
  --sky-top: #1f4a7c;
  --sky-high: #456990;
  --sky-low: #f2b792;
  --sky-bottom: #ff9a23;
  --accent-orange: #ff8a56;
  font-family: "ABC Diatype", Arial, sans-serif;
  overflow-x: hidden;
  overflow-y: scroll;
  background:
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-high) 43%,
      var(--sky-low) 76%,
      var(--sky-bottom) 100%
    )
    fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-high) 43%,
    var(--sky-low) 76%,
    var(--sky-bottom) 100%
  );
  opacity: 1;
  transition: opacity 520ms ease;
}

body::after {
  content: none;
}

body.has-sky-gradient::before,
body.has-sky-cycle::before {
  opacity: 1;
}

body.has-sky-gradient,
body.has-sky-cycle {
  background:
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-high) 43%,
      var(--sky-low) 76%,
      var(--sky-bottom) 100%
    )
    fixed;
}

body.has-sky-gradient .home > div,
body.has-sky-cycle .home > div {
  background-color: transparent !important;
}

body.has-sky-cycle::before {
  animation: sky-cycle 70s ease-in-out forwards;
}

@keyframes sky-cycle {
  0% {
    --sky-top: #1f4a7c;
    --sky-high: #456990;
    --sky-low: #f2b792;
    --sky-bottom: #ff9a23;
  }

  18% {
    --sky-top: #07142d;
    --sky-high: #0d2147;
    --sky-low: #1b2f5f;
    --sky-bottom: #3d2a52;
  }

  42% {
    --sky-top: #030713;
    --sky-high: #081733;
    --sky-low: #111f43;
    --sky-bottom: #1a1b34;
  }

  66% {
    --sky-top: #030713;
    --sky-high: #081733;
    --sky-low: #111f43;
    --sky-bottom: #1a1b34;
  }

  80% {
    --sky-top: #07142d;
    --sky-high: #102044;
    --sky-low: #192a50;
    --sky-bottom: #322342;
  }

  89% {
    --sky-top: #18355c;
    --sky-high: #355b7c;
    --sky-low: #776f7c;
    --sky-bottom: #b46f68;
  }

  100% {
    --sky-top: #4f8fc2;
    --sky-high: #8ec3d8;
    --sky-low: #ffd0a0;
    --sky-bottom: #ff8f55;
  }
}

@keyframes crash-rise {
  from {
    transform: translateY(clamp(8rem, 16vw, 15rem));
  }

  to {
    transform: translateY(clamp(2rem, 6vw, 7rem));
  }
}


.home {
  position: relative;
  z-index: 28;
  height: 112vh;
  background-color: transparent;
}

.home > div {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: transparent;
}

.avion {
  --home-text-size: clamp(6rem, 19.6vw, 24rem);
  --home-plane-width: clamp(16rem, 53vw, 61rem);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(96vw, 1900px);
  min-height: clamp(18rem, 42vw, 44rem);
  transform: translateY(clamp(2.5rem, 6vh, 5.5rem));
}

.image-avion {
  position: absolute;
  top: clamp(-2.5rem, -1vw, -0.5rem);
  left: 50%;
  z-index: 2;
  width: var(--home-plane-width);
  transform: translateX(-50%);
  pointer-events: none;
}

.avion-intact {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 180ms ease;
}

.texte {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: var(--accent-orange);
  font-family: "ABC Diatype", Arial, sans-serif;
  font-size: var(--home-text-size);
  font-weight: 560;
  line-height: 0.78;
  letter-spacing: 0;
  transition: color 180ms ease;
}

.chrono {
  position: fixed;
  top: 0.6vw;
  left: 1vw;
  z-index: 30;
  color: var(--accent-orange);
  font-family: "ABC Diatype", Arial, sans-serif;
  font-size: clamp(2.8rem, 4vw, 5.4rem);
  font-weight: 560;
  line-height: 0.9;
  letter-spacing: 0;
  pointer-events: none;
}

.crash {
  height: 112vh;
  pointer-events: none;
}

.home.crash > div {
  background-color: transparent !important;
}

.crash .texte {
  color: var(--accent-orange);
  transition: color 0ms linear;
}

.responsive-stage--mobile {
  display: none;
}

.mobile-object-grid {
  display: none;
}

.person {
  --person-cell-width: clamp(7.4rem, 9vw, 11.2rem);
  --person-cell-height: clamp(7.4rem, 8.9vw, 11rem);
  --person-figure-width: 100%;
  --person-figure-height: calc(var(--person-cell-height) * 0.98);
  --person-grid-gap-x: clamp(0.95rem, 1.45vw, 2rem);
  --person-grid-gap-y: clamp(1.25rem, 1.85vw, 2.6rem);
  --person-column-gap: clamp(5.5rem, 6.5vw, 8rem);
  --person-frame-padding-x: clamp(1.4rem, 2.4vw, 3rem);
  --person-frame-padding-y: clamp(3rem, 3.8vw, 5rem);
  --section-title-size: clamp(28px, 4vw, 64px);
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: flex-start;
  gap: 3vw;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-top: clamp(-28rem, -31vw, -18rem);
  padding: 3vw;
  padding-top: clamp(9rem, 13vw, 13rem);
  box-sizing: border-box;
  background-color: transparent;
}

.person-column {
  display: flex;
  flex-direction: column;
  gap: var(--person-column-gap);
  min-width: 0;
}

.mineur,
.equipage,
.etranger,
.professionnel,
.privee,
.onsaitpas {
  position: relative;
  display: grid;
  gap: var(--person-grid-gap-y) var(--person-grid-gap-x);
  align-items: center;
  align-content: center;
  justify-content: stretch;
  justify-items: stretch;
  width: 100%;
  padding: var(--person-frame-padding-y) var(--person-frame-padding-x);
  border: 4px solid var(--accent-orange);
  border-radius: 4vw;
  box-sizing: border-box;
  overflow: visible;
}

.mineur > div,
.equipage > div,
.etranger > div,
.professionnel > div,
.privee > div,
.onsaitpas > div {
  --extinction-delay: 0s;
  --extinction-duration: 3s;
  --person-light-strength: 0;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--person-cell-height);
  min-width: 0;
}

.mineur {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: mineur;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.equipage {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: equipage;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.etranger {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: etranger;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.professionnel {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: professionnel;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.privee {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: privee;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.onsaitpas {
  --person-columns: 2;
  --person-frame-width: calc(
    var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-cell-width) + var(--person-cell-width) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-grid-gap-x) +
      var(--person-grid-gap-x) + var(--person-frame-padding-x) +
      var(--person-frame-padding-x)
  );
  grid-area: onsaitpas;
  align-self: start;
  align-content: start;
  grid-template-columns: repeat(
    var(--person-columns),
    minmax(0, 1fr)
  );
  grid-auto-rows: var(--person-cell-height);
}

.mineur img,
.equipage img,
.etranger img,
.professionnel img,
.privee img,
.onsaitpas img {
  display: block;
  max-width: 100%;
  width: var(--person-figure-width);
  height: var(--person-figure-height);
  object-fit: contain;

  transform: scale(calc(1 + var(--person-light-strength) * 0.11));
  transition:
    filter 420ms ease,
    transform 420ms ease;
}

body.has-sky-cycle
  .person
  :is(.mineur, .equipage, .etranger, .professionnel, .privee, .onsaitpas)
  > div:not(.survi-1):not(.survi-2):not(.survi-3):not(.survi-4)
  img {
  filter: grayscale(1) saturate(0) contrast(0.9) brightness(1);
  transition:
    filter var(--extinction-duration) ease-in-out var(--extinction-delay),
    transform 420ms ease;
}

body.has-sky-cycle
  .person
  :is(.mineur, .equipage, .etranger, .professionnel, .privee, .onsaitpas)
  > div.is-extinction-pending
  img {
  filter: none !important;
  transition: none;
}

body.has-sky-cycle
  .person
  :is(.mineur, .equipage, .etranger, .professionnel, .privee, .onsaitpas)
  > div.is-extinction-complete:not(.survi-1):not(.survi-2):not(.survi-3):not(.survi-4)
  img {
  filter: grayscale(1) saturate(0) contrast(0.9) brightness(1);
  transition: none;
}

.section-title {
  position: absolute;
  top: clamp(-8.4rem, -7.2vw, -5.2rem);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0;
  background-color: transparent;
  color: var(--accent-orange);
  font-family: "ABC Diatype", Arial, sans-serif;
  font-size: var(--section-title-size);
  font-weight: 700;
  line-height: 0.95;
  text-align: center;
  text-transform: none;
  transform: translateX(-50%);
  white-space: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

.mineur .section-title,
.equipage .section-title,
.etranger .section-title {
  top: clamp(-6.2rem, -5.4vw, -3.8rem);
}

.equipage .section-title {
  max-width: calc(100vw - 3rem);
  top: clamp(-7.2rem, -6.2vw, -4.4rem);
  white-space: nowrap;
}

.equipage.is-section-title-wrapped .section-title {
  top: clamp(-8.9rem, -7.8vw, -5.6rem);
}

.professionnel .section-title,
.privee .section-title {
  top: clamp(-10.2rem, -8.6vw, -6.4rem);
}

.onsaitpas .section-title {
  top: calc(
    -1 *
      (
        var(--person-column-gap) / 2 +
          var(--section-title-size) * 0.95 * var(--section-title-lines, 1) / 2
      )
  );
}

.onsaitpas.is-section-title-wrapped {
  --section-title-lines: 2;
}

.professionnel,
.privee {
  margin-top: clamp(1.2rem, 2vw, 2.8rem);
}

body.has-sky-gradient .section-title {
  background-color: transparent;
}

.survi-1 img,
.survi-2 img,
.survi-3 img,
.survi-4 img {
  transform: scale(calc(1 + var(--person-light-strength) * 0.2));
}

.mineur > div,
.equipage > div,
.etranger > div,
.professionnel > div,
.privee > div,
.onsaitpas > div {
  cursor: pointer;
  transform: scale(1);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.person-name-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  color: var(--accent-orange);
  font-family: "ABC Diatype", Arial, sans-serif;
  font-size: clamp(0.18rem, 0.46vw, 0.36rem);
  font-weight: 650;
  line-height: 0.95;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.04);
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(0.2, 0, 0.2, 1),
    opacity 220ms ease 940ms;
}

.mineur > div:hover,
.equipage > div:hover,
.etranger > div:hover,
.professionnel > div:hover,
.privee > div:hover,
.onsaitpas > div:hover,
.mineur > div.is-person-hovered,
.equipage > div.is-person-hovered,
.etranger > div.is-person-hovered,
.professionnel > div.is-person-hovered,
.privee > div.is-person-hovered,
.onsaitpas > div.is-person-hovered {
  z-index: 20;
  transform: scale(1.08);
  transition-duration: 280ms;
  transition-delay: 0ms;
}

.mineur > div:hover img,
.equipage > div:hover img,
.etranger > div:hover img,
.professionnel > div:hover img,
.privee > div:hover img,
.onsaitpas > div:hover img,
.mineur > div.is-person-hovered img,
.equipage > div.is-person-hovered img,
.etranger > div.is-person-hovered img,
.professionnel > div.is-person-hovered img,
.privee > div.is-person-hovered img,
.onsaitpas > div.is-person-hovered img {
  opacity: 0;
}

.mineur > div:hover .person-name-content,
.equipage > div:hover .person-name-content,
.etranger > div:hover .person-name-content,
.professionnel > div:hover .person-name-content,
.privee > div:hover .person-name-content,
.onsaitpas > div:hover .person-name-content,
.mineur > div.is-person-hovered .person-name-content,
.equipage > div.is-person-hovered .person-name-content,
.etranger > div.is-person-hovered .person-name-content,
.professionnel > div.is-person-hovered .person-name-content,
.privee > div.is-person-hovered .person-name-content,
.onsaitpas > div.is-person-hovered .person-name-content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(6.5);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0ms linear;
  transition-delay: 0ms;
}

body.has-morning-light
  .person
  :is(.mineur, .equipage, .etranger, .professionnel, .privee, .onsaitpas)
  > div:not(.survi-1):not(.survi-2):not(.survi-3):not(.survi-4)
  img {
  filter: grayscale(1) saturate(0) contrast(0.9) brightness(1);
}

.plane {
  --plane-map-ratio: calc(3715.33 / 800);
  --plane-visible-height: 165vh;
  --plane-map-width: var(--plane-visible-height);
  --plane-map-length: calc(var(--plane-map-width) * var(--plane-map-ratio));
  --plane-scroll-extra: 28vw;
  display: none;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  margin-top: 0;
  overflow: hidden;
}

.plane-sticky {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.plane-map {
  display: block;
  position: absolute;
  top: calc((100vh - var(--plane-map-width)) / 2 + 2vh);
  left: 0;
  width: var(--plane-map-width);
  max-width: none;
  height: var(--plane-map-length);
  margin-left: 0;
  aspect-ratio: 800 / 3715.33;
  border: 0;
  transform: translateX(var(--plane-map-offset, 0px)) rotate(90deg) scaleY(-1);
  transform-origin: top left;
}

@media (max-width: 600px) {
  .avion {
    --home-text-size: clamp(4.8rem, 24vw, 8.8rem);
    --home-plane-width: calc(var(--home-text-size) * 2.05);
    width: 92vw;
    transform: translateY(clamp(-2rem, -3vh, -0.8rem));
  }

  .image-avion {
    top: clamp(2.2rem, 8vw, 3.4rem);
  }

  .person {
    --person-cell-width: clamp(8rem, 40vw, 14rem);
    --person-cell-height: clamp(8rem, 38vw, 13rem);
    --person-figure-width: 100%;
    --person-figure-height: calc(var(--person-cell-height) * 0.98);
    display: grid !important;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
    justify-items: center;
    margin-top: clamp(-24rem, -36vh, -11rem);
    padding: clamp(0.5rem, 2vw, 1.25rem) clamp(1rem, 3vw, 2rem)
      clamp(2rem, 6vw, 4rem);
  }

  .section-title {
    display: none;
  }

  .person-column {
    display: none;
  }

  .mobile-object-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--person-cell-height);
    gap: clamp(1rem, 4vw, 1.8rem) clamp(1rem, 4vw, 1.8rem);
    width: 100%;
  }

  .mobile-object {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--person-cell-height);
  }

  .mobile-object.is-mobile-object-named {
    cursor: pointer;
  }

  .mobile-object.is-mobile-object-named:hover,
  .mobile-object.is-mobile-object-named.is-mobile-object-hovered,
  .mobile-object.is-mobile-object-named:focus {
    z-index: 30;
  }

  .mobile-object img {
    display: block;
    max-width: 100%;
    width: var(--person-figure-width);
    height: var(--person-figure-height);
    object-fit: contain;
    transition:
      filter 420ms ease,
      opacity 220ms ease,
      transform 420ms ease;
  }

  body.has-sky-cycle .mobile-object:not(.is-mobile-object-survivor) img,
  body.has-morning-light .mobile-object:not(.is-mobile-object-survivor) img {
    filter: grayscale(1) saturate(0) contrast(0.9) brightness(1);
  }

  body.has-sky-cycle .mobile-object:not(.is-mobile-object-survivor) img {
    transition:
      filter var(--object-extinction-duration) ease-in-out
        var(--object-extinction-delay),
      opacity 220ms ease,
      transform 420ms ease;
  }

  body.has-sky-cycle .mobile-object.is-extinction-pending img {
    filter: none !important;
    transition: none;
  }

  body.has-sky-cycle
    .mobile-object.is-extinction-complete:not(.is-mobile-object-survivor)
    img {
    filter: grayscale(1) saturate(0) contrast(0.9) brightness(1);
    transition: none;
  }

  .mobile-object-name-content {
    position: absolute;
    top: 50%;
    left: var(--object-name-x, 50%);
    z-index: 4;
    box-sizing: border-box;
    max-width: calc(100vw - 6rem);
    padding-inline: 3rem;
    color: var(--accent-orange);
    font-family: "ABC Diatype", Arial, sans-serif;
    font-size: clamp(0.32rem, 1.6vw, 0.48rem);
    font-weight: 650;
    line-height: 0.9;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 220ms ease 90ms;
  }

  .mobile-object.is-mobile-object-named:hover img,
  .mobile-object.is-mobile-object-named.is-mobile-object-hovered img,
  .mobile-object.is-mobile-object-named:focus img {
    opacity: 0;
  }

  .mobile-object.is-mobile-object-named:hover .mobile-object-name-content,
  .mobile-object.is-mobile-object-named.is-mobile-object-hovered
    .mobile-object-name-content,
  .mobile-object.is-mobile-object-named:focus .mobile-object-name-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(5.2);
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0ms linear;
  }

  .mineur,
  .equipage,
  .etranger,
  .professionnel,
  .privee,
  .onsaitpas {
    display: contents;
    padding: 0;
    border: 0;
  }

  .mineur > div,
  .equipage > div,
  .etranger > div,
  .professionnel > div,
  .privee > div,
  .onsaitpas > div {
    width: 100%;
    height: var(--person-cell-height);
  }

  .mineur img,
  .equipage img,
  .etranger img,
  .professionnel img,
  .privee img,
  .onsaitpas img {
    max-width: 100%;
    width: var(--person-figure-width);
    height: var(--person-figure-height);
  }
}

@media (max-width: 460px) {
  .person {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 340px) {
  .person {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 601px) {
  .responsive-stage--desktop {
    display: none !important;
  }

  .responsive-stage--mobile {
    display: block !important;
    width: 100vw;
  }

  .responsive-stage--mobile.plane {
    width: 100vw;
  }

  .plane img,
  .plane-map {
    display: block;
    width: var(--plane-map-width);
    max-width: none;
    height: var(--plane-map-length);
    margin-left: 0;
  }

  .plane h2 {
    display: flex;
    position: sticky;
    left: 0;
    z-index: 10;
    justify-content: center;
    width: 100vw;
    font-family: "ABC Diatype", Arial, sans-serif;
    font-size: 6vw;
    font-weight: 650;
    color: var(--accent-orange);
    text-align: center;
    text-transform: none;
    padding-top: clamp(1.5rem, 4vw, 4rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
    margin-bottom: 0;
    background-color: transparent;
  }

}

@media (min-width: 601px) and (max-width: 1000px) {
  .responsive-stage--desktop {
    display: grid !important;
  }

  .responsive-stage--mobile {
    display: none !important;
  }

  .person {
    --person-cell-width: clamp(3.7rem, 8.2vw, 5.9rem);
    --person-cell-height: clamp(3.6rem, 7.6vw, 5.4rem);
    --person-figure-width: 100%;
    --person-figure-height: calc(var(--person-cell-height) * 0.98);
    --person-grid-gap-x: clamp(0.35rem, 1vw, 0.75rem);
    --person-grid-gap-y: clamp(0.55rem, 1.4vw, 1rem);
    --person-column-gap: clamp(5rem, 8vw, 7rem);
    --person-frame-padding-x: clamp(0.65rem, 1.8vw, 1.15rem);
    --person-frame-padding-y: clamp(1.2rem, 3vw, 2rem);
    --section-title-size: clamp(28px, 4vw, 64px);
    gap: clamp(5rem, 8vw, 7rem) clamp(1rem, 3vw, 2rem);
    margin-top: clamp(-14rem, -22vh, -8rem);
    padding: clamp(6.5rem, 11vw, 8.5rem) clamp(1rem, 2.5vw, 1.8rem)
      clamp(2rem, 5vw, 3.5rem);
    overflow-x: hidden;
  }

  .mineur,
  .equipage,
  .etranger,
  .professionnel,
  .privee,
  .onsaitpas {
    border-width: clamp(0.2rem, 0.55vw, 0.31rem);
    border-radius: clamp(1.5rem, 4vw, 2.5rem);
  }

  .section-title {
    top: clamp(-6.6rem, -7vw, -4.2rem);
    font-size: var(--section-title-size);
  }

  .mineur .section-title,
  .equipage .section-title,
  .etranger .section-title {
    top: clamp(-4.8rem, -5vw, -3rem);
  }

  .equipage .section-title {
    max-width: calc(100vw - 2rem);
    top: clamp(-5.5rem, -5.8vw, -3.5rem);
    white-space: normal;
  }

  .equipage.is-section-title-wrapped .section-title {
    top: clamp(-6.9rem, -7.1vw, -4.5rem);
  }

  .professionnel .section-title,
  .privee .section-title {
    top: clamp(-8.2rem, -8.6vw, -5.4rem);
  }

  .onsaitpas .section-title {
    top: calc(
      -1 *
        (
          var(--person-column-gap) / 2 +
            var(--section-title-size) * 0.95 * var(--section-title-lines, 1) /
            2
        )
    );
  }

  .professionnel,
  .privee {
    margin-top: clamp(0.8rem, 1.8vw, 1.8rem);
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  .equipage .section-title {
    max-width: calc(100% - 1.5rem);
  }
}