@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

html,
body {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
  color: #000000;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  display: block;
  min-height: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.only-mobile {
  display: none;
}

.viewport {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 24px 16px;
  box-sizing: border-box;
}

/*
  Maquette desktop 1920×1080.
  --s = facteur / 1920.
  Max = 1600px. En dessous : paliers fixes.
*/
.stage {
  --s: 0.83333333; /* 1600 / 1920 */
  position: relative;
  width: calc(1920 * var(--s) * 1px);
  height: calc(1080 * var(--s) * 1px);
  flex-shrink: 0;
  background: #ffffff;
}

@media (max-width: 1599px) {
  .stage {
    --s: 0.66666667; /* 1280 / 1920 */
  }
}

@media (max-width: 1279px) {
  .stage {
    --s: 0.53333333; /* 1024 / 1920 */
  }
}

@media (max-width: 1023px) {
  .stage {
    --s: 0.4; /* 768 / 1920 */
  }
}

.frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.frames-mobile {
  display: none;
}

.logo-akwity {
  position: absolute;
  left: calc(687 * var(--s) * 1px);
  top: calc(104 * var(--s) * 1px);
  width: calc(552 * var(--s) * 1px);
  height: calc(239 * var(--s) * 1px);
  object-fit: contain;
  object-position: center center;
  z-index: 2;
  display: block;
}

.body-copy {
  position: absolute;
  left: calc(505 * var(--s) * 1px);
  top: calc(431 * var(--s) * 1px);
  width: calc(910 * var(--s) * 1px);
  z-index: 2;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(30 * var(--s) * 1px);
  line-height: calc(36.5 * var(--s) * 1px);
  letter-spacing: -0.01em;
  color: #000000;
}

.body-copy p + p {
  margin-top: calc(36.5 * var(--s) * 1px);
}

.brand {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.brand a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand img {
  display: block;
  object-fit: contain;
  object-position: center center;
}

.brand-label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: calc(30 * var(--s) * 1px);
  line-height: 1.2;
  color: #000000;
  text-align: center;
  white-space: nowrap;
}

.brand-serial {
  left: calc(188 * var(--s) * 1px);
  top: calc(660 * var(--s) * 1px);
  width: calc(275 * var(--s) * 1px);
}

.brand-serial img {
  width: calc(254 * var(--s) * 1px);
  height: calc(244 * var(--s) * 1px);
  margin:
    calc(13 * var(--s) * 1px)
    calc(10 * var(--s) * 1px)
    calc(28 * var(--s) * 1px);
}

.brand-serial .brand-label {
  margin-top: 0;
  width: calc(406 * var(--s) * 1px);
}

.brand-tre {
  left: calc(1463 * var(--s) * 1px);
  top: calc(756 * var(--s) * 1px);
  width: calc(288 * var(--s) * 1px);
}

.brand-tre img {
  width: calc(282 * var(--s) * 1px);
  height: calc(154 * var(--s) * 1px);
  margin:
    calc(7 * var(--s) * 1px)
    calc(3 * var(--s) * 1px)
    calc(29 * var(--s) * 1px);
}

.brand-tre .brand-label {
  margin-top: 0;
  width: calc(406 * var(--s) * 1px);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  min-height: 235px;
  padding: 0 3.2rem;
  background-color: #111b21;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.site-footer__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 32px;
}

.site-footer__address {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

.site-footer__address a,
.site-footer__address a:visited,
.site-footer__address a:hover,
.site-footer__address a:active {
  color: #ffffff;
}

.site-footer__logos {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0;
}

.site-footer__logos li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.site-footer__logos img {
  display: block;
  width: 80px;
  height: auto;
  object-fit: contain;
  object-position: top center;
  margin: 0 10px 0 0;
}

.site-footer__logos li:last-child img {
  /* height: 36px; */
  width: 100px;
  margin-right: 0;
}

/* =========================================================
   MOBILE — maquette 390×700 (Smartphone_AKWITY_V1)
   ========================================================= */
@media (max-width: 767px) {
  .only-desktop {
    display: none;
  }

  .only-mobile {
    display: inline;
  }

  .viewport {
    padding: 0;
    align-items: center;
    height: 100vh;
    height: 100svh;
  }

  .stage {
    --s: 1;
    width: 100%;
    max-width: 390px;
    height: auto;
    aspect-ratio: 390 / 700;
    margin: 0 auto;
    container-type: inline-size;
    container-name: stage;
  }

  .frames-desktop {
    display: none;
  }

  .frames-mobile {
    display: block;
  }

  .logo-akwity {
    left: calc(64 / 390 * 100%);
    top: calc(34 / 700 * 100%);
    width: calc(262 / 390 * 100%);
    height: calc(126 / 700 * 100%);
  }

  .body-copy {
    left: calc(57 / 390 * 100%);
    top: calc(172 / 700 * 100%);
    width: calc(277 / 390 * 100%);
    font-size: 4.10256cqw; /* 16/390 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .body-copy p + p {
    margin-top: 0.9em;
  }

  .brand-serial {
    left: calc(126 / 390 * 100%);
    top: calc(389 / 700 * 100%);
    width: calc(137 / 390 * 100%);
  }

  .brand-serial img {
    width: 100%;
    height: auto;
    aspect-ratio: 137 / 142;
    margin: 0;
  }

  .brand-serial .brand-label {
    margin-top: calc(3 / 700 * 100%);
    width: calc(203 / 137 * 100%);
    font-size: 3.84615cqw; /* 15/390 */
  }

  .brand-tre {
    left: calc(132 / 390 * 100%);
    top: calc(567 / 700 * 100%);
    width: calc(137 / 390 * 100%);
  }

  .brand-tre img {
    width: 100%;
    height: auto;
    aspect-ratio: 137 / 87;
    margin: 0;
  }

  .brand-tre .brand-label {
    margin-top: calc(10 / 700 * 100%);
    width: calc(203 / 137 * 100%);
    font-size: 3.84615cqw; /* 15/390 */
  }

  /* Footer mobile */
  .site-footer {
    padding: 0 1rem;
    min-height: 235px;
  }

  .site-footer__inner {
    max-width: 390px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
  }

  .site-footer__address {
    white-space: normal;
  }

  .site-footer__logos {
    width: 100%;
    align-items: start;
    justify-content: center;
    margin-top: 1.7rem;
  }

  .site-footer__logos img {
    width: 60px;
    height: auto;
    margin: 0 10px 0 0;
  }

  .site-footer__logos li:last-child img {
    width: 90px;
    height: auto;
    margin-right: 0;
  }
}