/* ============ Polices ============ */
@font-face {
  font-family: "KH Interference";
  src: url("../assets/fonts/KHInterferenceTRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "KH Interference";
  src: url("../assets/fonts/KHInterferenceTRIAL-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* ============ Tokens ============ */
:root {
  /* 1u = 1px de la maquette Figma (1920 de large), mis à l'échelle de l'écran.
     cqw = largeur de <main> sans la barre de défilement (contrairement à vw) */
  --u: calc(100cqw / 1920);

  --bg: #28292b;
  --text: #fff;

  --font-display: "KH Interference", ui-monospace, monospace;
  --font-mono: "config-mono-vf", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; }

/* ============ Fond : grain + étoiles ============ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg) url("../assets/img/grain.jpg") center / cover no-repeat;
  pointer-events: none;
}

#stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 2;
  container-type: inline-size;
}

section {
  position: relative;
  overflow: hidden;
}

/* Avant l'init de GSAP, on cache ce qui va être animé */
.js [data-reveal] { visibility: hidden; }

/* ============ Hero ============ */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: calc(600 * var(--u));
  display: grid;
  place-items: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--u));
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(110 * var(--u));
  line-height: normal;
  text-transform: uppercase;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(64 * var(--u));
  line-height: normal;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ============ Qui suis-je ? ============ */
.about {
  height: calc(1400 * var(--u));
}

.about__text {
  position: absolute;
  left: calc(228 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(724 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 500;
}

.about__school {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  line-height: normal;
  opacity: 0.8;
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  line-height: 1.6;
}
.about__bio p { opacity: 0.8; }

/* Cadrage identique à Figma : cadre 870×2547 avec l'image recadrée dedans */
.about__photo {
  position: absolute;
  left: calc(50% + 8 * var(--u));
  top: calc(-106 * var(--u));
  width: calc(870 * var(--u));
  height: calc(2547 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.about__photo img {
  position: absolute;
  left: -91.66%;
  top: -1.38%;
  width: 277.87%;
  height: 94.91%;
  max-width: none;
}

.tag {
  position: absolute;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  opacity: 0.8;
}

.tag--creative { opacity: 1; }
.tag--uxui { text-align: center; }

.tag--creative { left: calc(1708 * var(--u)); top: calc(97 * var(--u)); }
.tag--age      { left: calc(1116 * var(--u)); top: calc(129 * var(--u)); width: calc(132 * var(--u)); }
.tag--video    { left: calc(1708 * var(--u)); top: calc(373 * var(--u)); }
.tag--uxui     { left: calc(1748 * var(--u)); top: calc(739 * var(--u)); width: calc(132 * var(--u)); }

/* ============ Textes communs ============ */
.note,
.caption,
.project__lead,
.done__text {
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: calc(28 * var(--u));
  letter-spacing: calc(-0.6 * var(--u));
}

/* ============ Sections projets ============ */
.project {
  min-height: calc(var(--h) * var(--u));
}

.container {
  width: calc(1168 * var(--u));
  margin: 0 auto;
}

.project__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: calc(981 * var(--u));
  padding-top: calc(340 * var(--u));
}

.project__intro {
  display: flex;
  flex-direction: column;
  gap: calc(43 * var(--u));
  width: calc(725 * var(--u));
}

.project__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(59.72 * var(--u));
  line-height: calc(56 * var(--u));
  letter-spacing: calc(-1.493 * var(--u));
}

.project__lead {
  min-height: calc(168 * var(--u));
  padding-top: calc(7 * var(--u));
}

.project__aside {
  display: flex;
  flex-direction: column;
  width: calc(355 * var(--u));
}
.project__aside--gap { gap: calc(29 * var(--u)); }

.project__done {
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--u));
  width: calc(1020 * var(--u));
  min-height: calc(441 * var(--u));
}

.project--short .project__done { min-height: 0; }

.done__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(39.81 * var(--u));
  line-height: calc(44 * var(--u));
  letter-spacing: calc(-0.9953 * var(--u));
}

.done__text { padding-top: calc(7 * var(--u)); }

.done__text--loose {
  font-weight: 500;
  line-height: 1.6;
  opacity: 0.8;
}
.done__text--loose p + p { margin-top: 1.6em; }

/* Image recadrée dans un cadre */
.frame {
  position: relative;
  flex: none;
  width: calc(var(--w, 355) * var(--u));
  height: calc(364 * var(--u));
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--grow { flex: 1; width: auto; }

.frame--expo img {
  position: absolute;
  left: calc(-50.9 * var(--u));
  top: calc(19.4 * var(--u));
  width: calc(488.7 * var(--u));
  height: calc(325.8 * var(--u));
}

.frame--logo { background: #000; }
.frame--logo img {
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(-8.5 * var(--u));
  width: calc(1007 * var(--u));
  height: calc(402.7 * var(--u));
  max-width: none;
}

.caption {
  padding-top: calc(7 * var(--u));
  text-align: center;
}
.caption--small {
  font-size: calc(16.67 * var(--u));
  letter-spacing: calc(-0.4168 * var(--u));
}
.caption--left { text-align: left; }

.gallery__row {
  display: flex;
  gap: calc(25 * var(--u));
}
.gallery__row--flush { gap: 0; }
.gallery > .caption { margin-top: calc(29 * var(--u)); }

.media { margin-top: calc(var(--mt, 0) * var(--u)); }
.media > .caption { margin-top: calc(var(--cap, 29) * var(--u)); }
.media > .caption--top { margin: 0 0 calc(103 * var(--u)); }

.video {
  display: block;
  width: 100%;
  aspect-ratio: 1168 / 657;
  background: #000;
}

.poster {
  width: 100%;
  height: calc(1642 * var(--u));
  object-fit: cover;
}

/* Alfred : vidéos carrées + machine interactive */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(168 * var(--u));
  margin-top: calc(var(--mt) * var(--u));
}
.video--square {
  aspect-ratio: 1;
  object-fit: cover;
}
.video--locked { pointer-events: none; }
.video--dragon { aspect-ratio: 1280 / 1168; } /* format réel de la vidéo : pas de bandes noires */
.caption--tight { margin-top: calc(10 * var(--u)); }

.try__title { margin-top: calc(389 * var(--u)); }
.try {
  width: calc(1169 * var(--u));
  height: calc(1169 * var(--u));
  margin: calc(44 * var(--u)) 0 0 calc(-1 * var(--u));
}
.try iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.otna__cover {
  width: calc(443 * var(--u));
  height: calc(308 * var(--u));
  object-fit: contain;
}

/* ============ Cartes postales ============ */
.postcards {
  height: calc(2737 * var(--u));
  padding-top: calc(360 * var(--u));
}

.postcards__myth {
  position: relative;
  width: calc(1613 * var(--u));
  height: calc(814 * var(--u));
  margin-left: calc(80 * var(--u));
}
.postcards__intro {
  position: absolute;
  left: calc(148 * var(--u));
  top: calc(50% - 38 * var(--u));
  translate: 0 -50%;
  width: calc(724 * var(--u));
  opacity: 0.8;
}
.postcards__cp {
  position: absolute;
  left: calc(1036 * var(--u));
  width: calc(577 * var(--u));
  height: calc(814 * var(--u));
  object-fit: cover;
}

.postcards__variants {
  position: relative;
  width: calc(1467 * var(--u));
  height: calc(735 * var(--u));
  margin: calc(360 * var(--u)) 0 0 calc(226 * var(--u));
}
.postcards__variants figure {
  position: absolute;
  left: calc(3 * var(--u));
  width: calc(428 * var(--u));
}
.postcards__variants figure:nth-child(2) { left: calc(524 * var(--u)); width: calc(421 * var(--u)); }
.postcards__variants figure:nth-child(3) { left: calc(1039 * var(--u)); }
.postcards__variants img {
  width: 100%;
  height: calc(594 * var(--u));
  object-fit: cover;
}
.postcards__variants .postcards__negatif img { height: calc(585 * var(--u)); }
.postcards__variants figcaption {
  position: absolute;
  top: calc(652 * var(--u));
  left: 0;
}

/* ============ Mockup ============ */
.mockup { height: calc(1488 * var(--u)); }
.mockup__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mockup__label {
  position: absolute;
  z-index: 1;
  left: calc(228 * var(--u));
  top: calc(88 * var(--u));
  width: calc(343 * var(--u));
}

/* ============ Korporate ============ */
.korporate { height: calc(1330 * var(--u)); }
.korporate > * { position: absolute; }
.korporate__label { left: calc(228 * var(--u)); top: calc(96 * var(--u)); }
.korporate__word {
  left: calc(50% - 702.5 * var(--u));
  top: calc(440 * var(--u));
  width: calc(1405 * var(--u));
}
.korporate__shapes-text {
  left: calc(1412 * var(--u));
  top: calc(920 * var(--u));
  width: calc(367 * var(--u));
}
.korporate__shapes {
  left: calc(1495 * var(--u));
  top: calc(1074 * var(--u));
  width: calc(201 * var(--u));
  height: auto;
}

/* ============ Analyse typo ============ */
.typo { height: calc(1680 * var(--u)); }
.typo > *,
.typo__diagram > * { position: absolute; }
.typo__diagram { inset: 0; }

.typo__label { left: calc(228 * var(--u)); top: calc(292 * var(--u)); }

.typo__font {
  top: calc(413 * var(--u));
  width: calc(350 * var(--u));
  height: auto;
}
.typo__font--futura  { left: calc(229 * var(--u)); }
.typo__font--stop    { left: calc(784 * var(--u)); }
.typo__font--bauhaus { left: calc(1342 * var(--u)); }

.typo__credit {
  left: calc(672 * var(--u));
  top: calc(661 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.typo__guides {
  left: calc(80 * var(--u));
  top: calc(805 * var(--u));
  width: calc(1760 * var(--u));
  height: calc(245 * var(--u));
}
.typo__word {
  left: calc(50% - 869.5 * var(--u));
  top: calc(808 * var(--u));
  width: calc(1739 * var(--u));
}

.typo__dot { width: calc(53 * var(--u)); }
.typo__dot--1 { left: calc(79 * var(--u));   top: calc(961 * var(--u)); width: calc(49 * var(--u)); }
.typo__dot--2 { left: calc(1484 * var(--u)); top: calc(854 * var(--u)); }
.typo__dot--3 { left: calc(1736 * var(--u)); top: calc(851 * var(--u)); }
.typo__dot--4 { left: calc(1736 * var(--u)); top: calc(954 * var(--u)); }
.typo__dot--5 { left: calc(989 * var(--u));  top: calc(851 * var(--u)); }

.typo__axis {
  left: calc(561 * var(--u));
  top: calc(929.5 * var(--u));
  width: calc(136 * var(--u));
  height: 1px;
  rotate: -90deg;
}

.typo__tag {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.typo__tag--serif    { left: calc(26 * var(--u));   top: calc(1063 * var(--u)); }
.typo__tag--axis     { left: calc(564 * var(--u));  top: calc(819 * var(--u)); }
.typo__tag--end      { left: calc(914 * var(--u));  top: calc(819 * var(--u)); }
.typo__tag--contrast { right: calc(128 * var(--u)); top: calc(1007 * var(--u)); } /* calé à droite : la mono est plus large que la Quicksand de Figma */

.typo__col { top: calc(1166 * var(--u)); width: calc(428 * var(--u)); }
.typo__col--1 { left: calc(80 * var(--u)); }
.typo__col--2 { left: calc(746 * var(--u)); }
.typo__col--3 { left: calc(1412 * var(--u)); }

/* ============ Posters ============ */
.specimen { height: calc(1502 * var(--u)); }
.specimen__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.specimen__label {
  position: absolute;
  left: calc(1349 * var(--u));
  top: calc(89 * var(--u));
  width: calc(343 * var(--u));
}

.moon { height: calc(1278 * var(--u)); }
.moon__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moon__label {
  position: absolute;
  left: calc(228 * var(--u));
  top: calc(80 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.6;
}

/* ============ Fin ============ */
.end {
  display: grid;
  place-items: center;
  height: calc(456 * var(--u));
}

/* ============ Bouton musique (fixe, en haut à gauche) ============ */
/* Au repos : carré avec l'icône. Au survol : panneau avec le texte et le slider de volume. */
.sound {
  /* 1b = 1px du composant Figma, borné pour rester lisible */
  --b: clamp(0.6px, 100vw / 1920, 1px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* position de l'icône (le rond) : elle ne bouge jamais, même quand le panneau s'ouvre */
  --top: calc(40 * var(--b));
  --left: calc(210 * var(--b)); /* l'icône s'aligne sur la colonne de texte (228 px de la maquette) */
  position: fixed;
  z-index: 10;
  top: var(--top);
  left: var(--left);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--b));
  width: calc(100 * var(--b));
  height: calc(100 * var(--b));
  padding: 0;
  overflow: hidden;
  background: var(--bg) url("../assets/img/grain.jpg") center / cover;
  transition: width 0.4s var(--ease), height 0.4s var(--ease), padding 0.4s var(--ease),
    top 0.4s var(--ease), left 0.4s var(--ease),
    opacity 0.4s, translate 0.4s var(--ease), visibility 0s;
}

/* Disparaît à partir de la section « Composition Illustrator » */
.sound.is-hidden {
  opacity: 0;
  translate: 0 calc(-24 * var(--b));
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s, translate 0.4s var(--ease), visibility 0s 0.4s;
}

.sound__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: calc(100 * var(--b));
  height: calc(100 * var(--b));
  padding: 0;
  border: 0;
  color: var(--text);
  background: none;
  font: 700 calc(16 * var(--b)) / normal var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
  transition: width 0.4s var(--ease), padding 0.4s var(--ease);
}
.sound__toggle:focus-visible,
.sound__volume:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 4px;
}

.sound__label,
.sound__volume {
  opacity: 0;
  transition: opacity 0.2s;
}

/* Panneau ouvert : survol à la souris ou navigation au clavier */
@media (hover: hover) {
  .sound:hover {
    top: calc(var(--top) - 8 * var(--b));
    left: calc(var(--left) - 40 * var(--b)); /* compense les marges qui poussent l'icône */
    width: calc(398 * var(--b));
    height: calc(154 * var(--b));
    padding: calc(8 * var(--b)) calc(8 * var(--b)) calc(24 * var(--b));
  }
  .sound:hover .sound__toggle {
    width: calc(382 * var(--b));
    padding: 0 calc(32 * var(--b));
  }
  .sound:hover .sound__label,
  .sound:hover .sound__volume {
    opacity: 1;
    transition-delay: 0.15s;
  }
}
.sound:has(:focus-visible) {
  top: calc(var(--top) - 8 * var(--b));
  left: calc(var(--left) - 40 * var(--b));
  width: calc(398 * var(--b));
  height: calc(154 * var(--b));
  padding: calc(8 * var(--b)) calc(8 * var(--b)) calc(24 * var(--b));
}
.sound:has(:focus-visible) .sound__toggle {
  width: calc(382 * var(--b));
  padding: 0 calc(32 * var(--b));
}
.sound:has(:focus-visible) .sound__label,
.sound:has(:focus-visible) .sound__volume { opacity: 1; }

.sound__icon {
  position: relative;
  flex: none;
  width: calc(100 * var(--b));
  height: calc(100 * var(--b));
  border-radius: 50%;
  overflow: hidden;
}

.sound__waves {
  position: absolute;
  left: calc(14 * var(--b));
  top: calc(24 * var(--b));
  width: calc(75 * var(--b));
  height: calc(55 * var(--b));
  overflow: visible;
}

.sound__dot {
  position: absolute;
  left: calc(34 * var(--b));
  top: calc(41 * var(--b));
  width: calc(20 * var(--b));
  height: calc(20 * var(--b));
  border-radius: 50%;
  background: #fff;
}

/* En lecture : le point clignote (0,8 s visible / 0,8 s caché, comme dans Figma) */
.sound.is-playing .sound__dot { animation: sound-blink 1.6s steps(1) infinite; }

@keyframes sound-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sound.is-playing .sound__dot { animation: none; }
}

/* Slider de volume : trait blanc arrondi + curseur « anneau coupé » du Figma */
.sound__volume {
  --thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14'%3E%3Cellipse cx='8.25' cy='7' rx='6.75' ry='7' fill='%23fff'/%3E%3Cellipse cx='8.25' cy='7' rx='3.75' ry='3.9' fill='%23000'/%3E%3Crect y='4.67' width='15' height='4.67' fill='%23000'/%3E%3Crect y='5.5' width='15' height='3' fill='%23fff'/%3E%3C/svg%3E");
  flex: none;
  width: calc(318 * var(--b));
  height: calc(14 * var(--b));
  margin: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sound__volume::-webkit-slider-runnable-track {
  height: calc(3 * var(--b));
  border-radius: 99px;
  background: #fff;
}
.sound__volume::-moz-range-track {
  height: calc(3 * var(--b));
  border-radius: 99px;
  background: #fff;
}
.sound__volume::-webkit-slider-thumb {
  width: calc(15 * var(--b));
  height: calc(14 * var(--b));
  margin-top: calc(-5.5 * var(--b));
  border: 0;
  background: var(--thumb) center / contain no-repeat;
  -webkit-appearance: none;
}
.sound__volume::-moz-range-thumb {
  width: calc(15 * var(--b));
  height: calc(14 * var(--b));
  border: 0;
  border-radius: 0;
  background: var(--thumb) center / contain no-repeat;
}

/* ============ Mobile ============ */
@media (max-width: 767px) {
  :root { --u: calc(100cqw / 600); }

  .about {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 64px 16px 0;
  }

  .about__text {
    position: static;
    translate: none;
    width: auto;
    font-size: 15px;
    gap: 32px;
  }
  .about__school { gap: 16px; }
  .about__bio { gap: 16px; }

  .about__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 40px;
  }
  .tag {
    position: static;
    width: auto !important;
    font-size: 18px;
    text-align: left;
  }
  .tag br { display: none; }

  .about__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 120vw;
    margin-top: 24px;
  }
  .about__photo img {
    left: -50%;
    top: -8%;
    width: 200%;
    height: auto;
  }

  /* Projets : tout passe en une colonne */
  .project { min-height: 0; padding-bottom: 96px; }
  .container { width: auto; padding: 0 16px; }
  .project__header {
    flex-direction: column;
    gap: 32px;
    min-height: 0;
    padding-top: 96px;
  }
  .project__intro,
  .project__aside,
  .project__done { width: 100%; }
  .project__intro { gap: 20px; }
  .project__title { font-size: 30px; line-height: 1.1; letter-spacing: -0.5px; }
  .done__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.4px; }
  .note,
  .caption,
  .project__lead,
  .done__text { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
  .project__lead { min-height: 0; }
  .project__done { min-height: 0; margin-top: 56px; gap: 16px; }

  .gallery { margin-top: 48px; }
  .gallery__row { flex-direction: column; gap: 12px; }
  .frame,
  .frame--grow { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .frame--expo img,
  .frame--logo img { position: static; width: 100%; height: 100%; }
  .frame--logo img { object-fit: contain; }

  .media,
  .duo { margin-top: 48px; }
  .media > .caption--top { margin-bottom: 16px; }
  .poster { height: auto; }
  .duo { grid-template-columns: 1fr; gap: 32px; }
  /* Sur mobile : pas d'expérience Alfred (seulement les vidéos) ni de poster scientifique illisible */
  .try__title,
  .try,
  .media--poster { display: none; }
  .otna__cover { width: 100%; height: auto; }

  /* Sections visuelles : on garde les proportions de la maquette */
  .postcards,
  .mockup,
  .korporate,
  .typo,
  .specimen,
  .moon,
  .end { --u: calc(100cqw / 1920); }

  .postcards { height: auto; padding: 96px 16px 0; }
  .postcards__myth { display: flex; flex-direction: column; gap: 24px; width: auto; height: auto; margin: 0; }
  .postcards__intro { position: static; translate: none; width: auto; }
  .postcards__cp { position: static; width: 100%; height: auto; }
  .postcards__variants {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: auto;
    height: auto;
    margin: 48px 0 0;
  }
  .postcards__variants figure { position: static; width: auto !important; }
  .postcards__variants img,
  .postcards__variants .postcards__negatif img { height: auto; }
  .postcards__variants figcaption { position: static; margin-top: 6px; font-size: 12px; }

  .mockup { height: auto; padding-top: 96px; }
  .mockup__img { position: static; height: auto; }
  .mockup__label { position: static; width: auto; padding: 0 16px; }

  .korporate { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 96px 16px 0; }
  .korporate > * { position: static; }
  .korporate__word { width: 100%; }
  .korporate__shapes-text { width: auto; }
  .korporate__shapes { width: 100px; }

  .typo { height: auto; display: flex; flex-direction: column; gap: 24px; padding: 96px 16px 0; }
  .typo > * { position: static; }
  .typo__font { width: 100%; max-width: 260px; }
  .typo__credit { font-size: 15px; white-space: normal; }
  .typo__diagram {
    position: relative;
    height: calc(1100 * var(--u));
    margin: calc(-790 * var(--u)) -16px 0;
    pointer-events: none;
  }
  /* on ne garde que le mot, sans les annotations du schéma */
  .typo__diagram > :not(.typo__word) { display: none; }
  .typo__col { width: auto; }

  .specimen { height: auto; padding-top: 96px; }
  .specimen__img { position: static; }
  .specimen__label { position: static; width: auto; padding: 16px 16px 0; }

  .moon__label { font-size: 13px; }

  .end { height: 240px; }

  .sound {
    --top: 12px;
    --left: calc(16px - 18 * var(--b));
  }
  .sound__toggle { font-size: 11px; }
}