:root {
  --site-pad: 18px;
}

/* ── Placeholder pages Play et Make ─────────────────────────────────────────── */
.page-placeholder {
  position: absolute;
  inset: 0;
  background: white;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  pointer-events: auto;
}

.page-placeholder p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #1C1C1E;
  text-align: center;
  margin: 0;
}

.page-placeholder a {
  font-size: 14px;
  font-weight: 400;
  color: #1C1C1E;
  text-decoration: none;
  opacity: 0.4;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.2s ease;
}

.page-placeholder a:hover {
  opacity: 1;
}

/* SEO : contenu lisible par Google, invisible visuellement */

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

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* empêche le pull-to-refresh mobile */
  background: #fff;
  color: #1C1C1E;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
}

.nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 0 0 48px;
  z-index: 200;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}

.nav a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #1C1C1E;
  line-height: 1.6;
  text-decoration: none;
  pointer-events: auto;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: color 0.25s ease;
}

.nav a:hover {
  opacity: 0.45;
}

/* Lien actif dans la couche blend : texte et dot cachés — nav-color s'en charge seul */
.nav a.active {
  color: transparent;
}
.nav a.active::before {
  display: none;
}

/* ── Nav couleur — superposé au nav blend, sans mix-blend-mode ─────────────────
   Affiche uniquement le lien actif dans sa couleur exacte.
   Les liens inactifs sont transparents (le nav blend les gère). */
.nav-color {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 0 0 48px;
  z-index: 201;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}

.nav-color a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: transparent;
  line-height: 1.6;
  text-decoration: none;
}

.nav-color a.active {
  color: var(--nav-text-color, transparent);
}

.nav-color a.active::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--nav-dot-color, transparent);
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.contact-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 0 48px 48px;
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
}

.contact-footer span,
.contact-footer a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: white;
  line-height: 1.6;
  text-decoration: none;
  pointer-events: auto;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
}

.contact-footer span:hover,
.contact-footer a:hover {
  opacity: 0.45;
}

@font-face {
  font-family: 'DraftingMono';
  src: url('/about/DraftingMono-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.game-section {
  --nav-h: 160px;
  --scroll-hint-h: 15px;
  width: min(100vw, calc((100vh - var(--nav-h) - var(--scroll-hint-h)) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-top: var(--nav-h);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: white;
  box-shadow: 0 0 0 3px white, inset 0 0 0 3px white;
}

/* ── Scroll hint (chevron bas, page Play) ───────────────────────────── */
#scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  animation: scroll-hint-bounce 2s ease-in-out infinite;
  z-index: 50;
  line-height: 0;
}
#scroll-hint:hover {
  animation-play-state: paused;
  opacity: 1;
}
#scroll-hint:hover polyline {
  stroke-width: 2.5;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.3; }
  50%       { transform: translateX(-50%) translateY(5px); opacity: 0.85; }
}

/* ── Knobs ──────────────────────────────────────────────────── */
.knob-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.knob-canvas {
  display: block;
  width: 48px;
  height: 48px;
  pointer-events: auto;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1.0),
    0 0 8px 3px rgba(255, 255, 255, 0.7),
    -4px -4px 5px rgba(255, 255, 255, 1.0),
    4px 4px 6px rgba(0, 0, 0, 0.38);
}

.knob-label {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #1C1C1E;
  letter-spacing: 0.03em;
  pointer-events: none;
  user-select: none;
}

/* Page About — conteneur scrollable : bio + texte de transition, puis tout le
   contenu visuel (ex-Look). Scrollable comme l'était Look. */
#page-about {
  position: fixed;
  inset: 0;
  background: #fff;
  overflow-y: scroll;
  overflow-x: clip;
  overscroll-behavior: none; /* empêche le pull-to-refresh sur ce conteneur scrollable */
}

#page-read {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* ── Read abstract view ─────────────────────────────────────────────────── */
#read-abstract {
  position: absolute;
  inset: 0;
  padding: 40px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#read-abstract-inner {
  width: 550px;
  max-width: 100%;
  flex: 0 0 auto;   /* hauteur = contenu → centré verticalement par #read-abstract */
  display: flex;
  flex-direction: column;
}

.read-lang {
  flex: 1;
  display: flex;
  flex-direction: column;
}


.read-header {
  min-height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 12px;
}

.read-header-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.read-body-section {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* flux naturel : texte puis bouton */
}

/* Plus utilisé comme conteneur flex — juste un no-op dans le flow */
.read-body-middle {
  display: contents;
}

.read-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: #1C1C1E;
}

.read-year {
  font-size: 13px;
  font-weight: 400;
  color: #3700FF;
  letter-spacing: 0.02em;
}
.read-year-link {
  color: inherit;
  text-decoration: none;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.25s ease;
}
.read-year-link:hover {
  opacity: 0.45;
}

.read-lang-btn {
  position: absolute;
  top: calc(1.5rem + 20px);
  right: 48px;
  width: 48px;
  height: 48px;
  background: #1C1C1E;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  letter-spacing: 0.05em;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.3s ease, transform 0.3s ease;
  user-select: none;
  z-index: 10;
}

.read-lang-btn:hover {
  background: #3700FF;
  transform: translateY(-2px);
}

/* ── Switch de langue global : rond noir unique qui cycle EN → FR → 中 ───────
   Même style que .read-lang-btn (hero + Read). */
.lang-cycle {
  position: absolute;
  top: calc(1.5rem + 20px);
  right: 48px;
  width: 40px;
  height: 40px;
  background: #1C1C1E;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 0.75rem/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  letter-spacing: 0.05em;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: background 0.25s ease;
  user-select: none;
  z-index: 10;
}
.lang-cycle:hover {
  background: #3700FF;
}

.hero-lang-cycle:hover {
  transform: translateY(-50%);
}

/* ── Hero header — nom + tagline dans le tiers haut (zone sans brins) ─────── */
.hero-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 23vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px;
  z-index: 2;
  pointer-events: none;
}

.hero-lang-cycle {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.hero-name-text {
  font: 500 24px/1.3 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
  margin: 0;
}

.hero-subtitle-text {
  font: 400 13px/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
  letter-spacing: 0.02em;
  margin: 10px 0 0;
}

/* ── Hero arrow btn — même style que .hero-sound-circle ─────────────────── */
#hero-arrow-btn {
  position: absolute;
  bottom: 31px;                /* ARROW_BOTTOM_MARGIN(55) - BTN_RADIUS(24) = 31px */
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: #1C1C1E;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  pointer-events: auto;
  z-index: 10;
  transition: background 0.3s ease;
}

#hero-arrow-btn:hover {
  background: #48484a;
}

.hero-swipe-label {
  font: 400 9px/1.25 'Inter', 'PingFang SC', sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  color: white;
  pointer-events: none;
  margin-top: 4px;
}

/* ── Make info button + video ────────────────────────────────────────────── */
/* ── Play info button ────────────────────────────────────────────────────── */
#play-info-wrap {
  position: fixed;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  z-index: 410;
  display: none;
  width: 40px;
}
#play-info-btn {
  width: 40px;
  height: 40px;
  background: #E0004B;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  position: relative;
  z-index: 1;
}
#play-info-btn:hover { background: #ff1a60; }
#play-info-panel {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.18s ease;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
  border: 1px solid #1C1C1E;
  border-radius: 14px;
  padding: 18px 22px;
  width: 470px;
}
#play-info-panel.open {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.play-info-caption {
  margin: 0;
  font: 400 12px/1.65 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
}
.play-info-emph { color: #E0004B; }
#play-info-panel .look-info-lang { border-color: rgba(0,0,0,0.2); color: rgba(0,0,0,0.4); }
#play-info-panel .look-info-lang.active { background: #1d1d1f; border-color: #1d1d1f; color: white; }
#play-info-panel .look-info-lang:hover:not(.active) { border-color: rgba(0,0,0,0.5); color: rgba(0,0,0,0.7); }

#make-info-wrap {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  z-index: 410; /* au-dessus du cover vidéo Make (#make-cover, z-index 400) */
  display: none;
  width: 40px;
}

#make-info-btn {
  width: 40px;
  height: 40px;
  background: #8957FF;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  position: relative;
  z-index: 1;
}

#make-info-btn:hover {
  background: #a87dff;
}

#make-info-panel {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.18s ease;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
  border: 1px solid #1C1C1E;
  border-radius: 14px;
  padding: 18px 22px;
  width: 470px;
}

#make-info-panel.open {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.make-info-caption {
  margin: 0;
  font: 400 12px/1.65 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
}
.make-info-emph { color: #8957FF; }

/* Overrides look-info-lang pour fond blanc (Make + Note) */
#make-info-panel .look-info-lang,
#note-info-panel .look-info-lang {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.4);
}
#make-info-panel .look-info-lang.active,
#note-info-panel .look-info-lang.active {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: white;
}
#make-info-panel .look-info-lang:hover:not(.active),
#note-info-panel .look-info-lang:hover:not(.active) {
  border-color: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.7);
}

#make-info-video {
  display: block;
  width: 480px;
  margin-left: -27px;
  height: auto;
  border-radius: 10px;
  /* Fondu sur les 4 bords — proportionnellement court */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}

/* ── Note page (Few Notes) ───────────────────────────────────────────────── */
/* Centrage identique à #make-cover → la .game-section est centrée dans la page */
#page-note {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image cadrée comme la vidéo de Make (.game-section), affichée en entier (contain) */
#note-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 5;
}

/* Texte du haut — même style/colonne que #intro-text / #make-text */
#note-text {
  position: absolute;
  top: 69.4px;
  left: var(--text-anchor-left, 24px);
  max-width: 550px;
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: white;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
}

#intro-text,
#make-text {
  max-width: 550px;
  text-wrap: pretty;
  hyphens: none;
}

/* Bouton i — calqué sur #make-info, couleur Note (#3F777B) */
#note-info-wrap {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  z-index: 410;
  display: none; /* affiché par note-info.js sur la page Note */
  width: 40px;
}
#note-info-btn {
  width: 40px;
  height: 40px;
  background: #3F777B;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  position: relative;
  z-index: 1;
}
#note-info-btn:hover { background: #4f9298; }
#note-info-panel {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.18s ease;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
  border: 1px solid #1C1C1E;
  border-radius: 14px;
  padding: 18px 22px;
  width: 470px;
}
#note-info-panel.open {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.note-info-caption {
  margin: 0;
  font: 400 12px/1.65 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
}
.note-emph { font-weight: 600; color: #3F777B; }

/* ── About page ──────────────────────────────────────────────────────────── */
.about-inner {
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 18px 0;
  margin-bottom: -110px;
}

/* Texte de transition (cursus graphique → numérique), entre le bio et le visuel */
.about-path {
  font: 500 24px/1.3 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
  margin: 140px 0 0;
}

.about-name {
  font: 500 24px/1.3 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
  margin: 0;
}

.about-photo {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0 0;
}

.about-role {
  font: 300 13px/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #8e8e93;
  margin: 10px 0 0;
  letter-spacing: 0.02em;
}

.about-bio {
  font: 400 14px/1.75 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #1d1d1f;
  margin: 36px 0 0;
}

.about-bio p {
  margin: 0 0 1.2em;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

/* Liens inline dans la bio — gardent la couleur de leur classe (.about-green…),
   sans soulignement, curseur du site. */
.about-bio a {
  text-decoration: none;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.2s ease;
}
.about-bio a:hover {
  opacity: 0.6;
}

.about-links {
  display: flex;
  gap: 12px;
  margin: 32px 0 0;
}

.about-links a {
  display: inline-block;
  padding: 9px 24px;
  background: #ffffff;
  color: #1d1d1f;
  border: 1.5px solid #1d1d1f;
  border-radius: 20px;
  font: 400 13px/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-links a:hover {
  background: #1d1d1f;
  color: #ffffff;
}

.about-red {
  color: #E0004B;
}

.about-purple {
  color: #8957FF;
}

.about-blue {
  color: #3700FF;
}

.about-green {
  color: #3F777B;
}

.about-copy {
  font: 300 11px/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #aeaeb2;
  margin: 0;
  padding: 80px 40px 60px; /* pied de page, après le contenu visuel */
  text-align: center;
}

/* ── Hero tagline pill ────────────────────────────────────────────────────── */
.hero-tagline {
  position: absolute;
  margin: 0;
  padding: 7px 12px;
  font: 300 13px/1 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: #ffffff;
  background: #1d1d1f;
  border: 1.5px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  z-index: 5;
  transition: none;
}

.hero-tagline:hover {
  background: #ffffff;
  color: #1d1d1f;
  border-color: #1d1d1f;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Hero sound zone — texte + bouton cercle ────────────────────────────── */
#hero-sound-btn {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 19px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  color: #1d1d1f;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  pointer-events: none;        /* le bouton lui-même ne capte pas — voir .hero-sound-circle */
  user-select: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#hero-sound-btn.sound-active {
  opacity: 0;
  pointer-events: none;
}

.hero-sound-label {
  pointer-events: none;
}

/* Cercle — même style que .read-lang-btn */
.hero-sound-circle {
  width: 48px;
  height: 48px;
  background: #1C1C1E;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  pointer-events: auto;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-sound-circle:hover {
  background: #48484a;
}



.read-abstract-body,
.read-abstract-body p,
.read-abstract-body em,
.read-title {
  user-select: text;
  -webkit-user-select: text;
}

.read-abstract-body {
  margin-top: 24px;    /* gap sous le titre */
  margin-bottom: 22px; /* gap avant le bouton */
}

.read-abstract-body p {
  font-size: 13.5px;
  line-height: 1.75;
  color: #1C1C1E;
  margin-bottom: 14px;
}

.read-abstract-body p:last-child {
  margin-bottom: 0;
}

.read-expand-btn {
  display: block;
  margin-left: auto;
  padding: 9px 24px;
  background: #3700FF;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 13.5px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-weight: 400;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
  user-select: none;
}

.read-expand-btn:hover { opacity: 0.75; }

#smart-cities-iframe {
  outline: 3px solid white;
  box-shadow: inset 0 0 0 3px white;
}

.look-section {
  --nav-h: 160px;
  --gap: 1.395%;
  padding-top: var(--nav-h);
  padding-bottom: 160px;
  width: min(100vw, calc((100vh - var(--nav-h)) * 16 / 9));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gap);
  align-items: start;
}

.section-title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #1C1C1E;
  margin-bottom: 20px;
  align-self: center;
  white-space: nowrap;
}

.typo-zone {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
}

.typo-zone .typo-img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}


/* Wrapper générique pour les sections avec titre */
.look-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gap);
  align-items: start;
  margin-top: 220px;
}

/* BD grid — commenté temporairement
.bd-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.395%;
}
.bd-grid .img-wrap { position: relative; }
.bd-grid .span2 { grid-column: span 2; }
.bd-grid img { width: 100%; height: auto; display: block; }
.bd-grid .img-wrap::after {
  content: ''; position: absolute; inset: -2px;
  background: #fff; transition: opacity 0.4s ease; pointer-events: none;
}
.bd-grid .img-wrap.revealed::after { opacity: 0; }
*/

/* Zone screenshots + peau fusionnées */
.screens-zone {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gap);
  row-gap: 160px;
  align-items: start;
  margin-top: 220px;
}

.screen-pair {
  display: grid;
  position: relative;
  z-index: 1;   /* au-dessus des .peau-img (z-index:0) dans screens-zone */
  z-index: 2;
}

.screen-pair.screen-left-land {
  grid-column: 1 / 5;
}

.screen-pair.screen-right-land {
  grid-column: 3 / 7;
}

.screen-pair.screen-left-port {
  grid-column: 1 / 4;
}

.screen-pair.screen-right-port {
  grid-column: 4 / 7;
}

.screen-pair img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
}

.screen-pair img.screen-b {
  visibility: hidden;
}

.screen-pair.swapped img.screen-a {
  visibility: hidden;
}

.screen-pair.swapped img.screen-b {
  visibility: visible;
}

.peau-img {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: block;
  z-index: 2;   /* au-dessus du SVG typo, sous .section-title (z-index:3) */
}

.wayana-wrap {
  grid-column: 1 / 6;
  position: relative;
}

.wayana-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* .wayana-magnifier (désactivé) {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid #fff;
  pointer-events: none;
  display: none;
  background-image: url('/look/wayana/wayana1.jpg');
  background-repeat: no-repeat;
  box-sizing: border-box;
} */


/* Hair grid — commenté temporairement
.hair-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1.395%;
  row-gap: calc(min(100vw, (100vh - 222px) * 16 / 9) * 0.01395);
  margin-top: 160px;
  overflow: visible;
}
.hair-grid .h1 { grid-column: 4 / 6; }
.hair-grid .h2 { grid-column: 2 / 4; }
.hair-wrap {
  width: 100%;
  aspect-ratio: 3924 / 2914;
  position: relative;
  overflow: hidden;
}
.hair-wrap img {
  position: absolute;
  width: calc(100% * 2914 / 3924);
  height: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
*/

/* pointer-events: none → le parent reçoit tous les events souris */
.game-section iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none;
}

/* ── Vidéo-preview (jeu pas encore jouable) ─────────────────────────────────
   Couvre le cadre du jeu. Source 16:9 = ratio du .game-section sur desktop →
   object-fit: cover remplit sans déformation. */
.game-section video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  z-index: 5;
}

/* Vire le bouton Picture-in-Picture / overlay de contrôles natif au survol. */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none;
}

/* ── Messages « version … à venir » (Play + Make) ───────────────────────────
   Alignés à gauche sur la même colonne que #intro-text / #make-text, via la
   variable --text-anchor-left posée par game-bridge.js.
   position: fixed → même origine que l'intro-text (viewport). */
#play-incoming,
#make-incoming {
  position: fixed;
  left: var(--text-anchor-left, 24px);
  bottom: 30px;
  margin: 0;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #1C1C1E;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  z-index: 401; /* au-dessus du cover blanc #make-cover (z-index 400) */
}

/* ── Make en mode vidéo-preview ──────────────────────────────────────────────
   Cover blanc plein écran : masque le blob + les knobs et porte la vidéo. */
#make-cover {
  position: absolute;
  inset: 0;
  background: white;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
#make-cover .game-section,
#page-note .game-section {
  margin-top: 0;
  /* Desktop : descend la vidéo/image de 30px (centrée puis décalée vers le bas).
     Réinitialisé sur mobile (voir media query coarse). */
  transform: translateY(30px);
}

#make-cover .game-section {
  overflow: hidden;
}


#game-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

#game-overlay.clickable {
  pointer-events: auto;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
}

#game-overlay.fade-out {
  opacity: 0;
}

/* ── Look footer ────────────────────────────────────────────────────────── */
.look-footer {
  grid-column: 2 / 6;
  margin-top: 370px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.look-footer-name {
  font-size: 22px;
  font-weight: 500;
  color: #3A3A3C;
  user-select: text;
  -webkit-user-select: text;
}

.look-footer-role {
  font-size: 13px;
  font-weight: 400;
  color: #1C1C1E;
}

.look-footer-tag,
.look-footer-tag:visited,
.look-footer-tag:link {
  color: #3F777B;
  text-decoration: none;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.2s ease;
}

.look-footer-tag:hover {
  opacity: 0.5;
}

.look-footer-dot {
  color: #1C1C1E;
}

.look-footer-links {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.look-footer-btn {
  display: inline-block;
  padding: 9px 24px;
  background: #3F777B;
  border: none;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 400;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: white;
  text-decoration: none;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: opacity 0.2s ease;
}

.look-footer-btn:hover {
  opacity: 0.75;
}

.look-footer-year {
  font-size: 11px;
  font-weight: 400;
  color: #1C1C1E;
  opacity: 0.25;
  margin-top: 32px;
}

#loading-orbit {
  position: relative;
  width: 0;
  height: 0;
  animation: loading-spin 3.5s linear infinite;
}

@keyframes loading-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbit-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  left: -3.5px;
  top: -3.5px;
  background: #1C1C1E;
  border-radius: 50%;
  animation: orbit-pulse 2s ease-in-out infinite;
}

@keyframes orbit-pulse {
  0%, 100% { transform: translateY(-18px); }
  50%       { transform: translateY(-36px); }
}

/* ── Make video loading overlay ─────────────────────────────────────────────── */
/* ── Make video carousel ────────────────────────────────────────────────── */
#make-video-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#make-video-track video {
  position: relative;
  inset: auto;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
#make-video-prev,
#make-video-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#make-video-prev::before { content: '←'; font-size: 16px; }
#make-video-next::before { content: '→'; font-size: 16px; }
/* Desktop — même position que i + 30px vers le bas, miroir gauche/droite */
#make-video-prev { left: 48px; top: calc(50% + 120px); }
#make-video-next { right: 48px; top: calc(50% + 120px); }
#make-video-prev:hover,
#make-video-next:hover { background: rgba(0, 0, 0, 0.5); }
#make-video-prev.hidden,
#make-video-next.hidden { opacity: 0; pointer-events: none; }

#make-video-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#make-video-overlay.visible {
  display: flex;
}

#make-video-overlay.fade-out {
  opacity: 0;
}

#make-loading-orbit {
  position: relative;
  width: 0;
  height: 0;
  animation: loading-spin 3.5s linear infinite;
}

/* ── Look info button ───────────────────────────────────────────────────────── */
#look-info-wrap {
  position: fixed;
  right: 22px;
  z-index: 250;
  display: none;
  width: 40px;
}

#look-info-btn {
  width: 40px;
  height: 40px;
  background: #1d1d1f; /* noir apple (avant : teal #3F777B) */
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  position: relative;
  z-index: 1;
}

#look-info-btn:hover {
  background: #2c2c2e;
}

#look-info-panel {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.18s ease;
  width: 420px;
  background: #1C1C1E;
  color: white;
  border-radius: 16px;
  padding: 22px 24px 20px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

#look-info-panel.open {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.look-info-langs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.look-info-lang {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  letter-spacing: 0.05em;
  cursor: url('/assets/cursor.svg') 10 10, crosshair;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.look-info-lang.active {
  background: white;
  border-color: white;
  color: #1C1C1E;
}

.look-info-lang:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.75);
}

.look-info-content {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  user-select: text;
  -webkit-user-select: text;
}

/* ── Swipe hint mobile (page Play) ──────────────────────────────────────────── */
#mobile-swipe-hint {
  display: none;
}

@keyframes swipe-hint-pulse {
  0%, 100% { color: #aeaeb2; }
  50%       { color: #1d1d1f; }
}

/* ── Éléments mobiles — masqués par défaut (desktop) ────────────────────────── */
#mobile-page-name {
  display: none;
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 200;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  line-height: 1.6;
  color: white;
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}

/* ── Mobile portrait ─────────────────────────────────────────────────────────── */
@media (pointer: coarse) and (max-aspect-ratio: 1/1) {

  /* Compositing hint — les pages peuvent être transformées pendant le drag TikTok */
  .page, #page-hero {
    will-change: transform;
  }

  /* Mobile : éloigne « Mon parcours » de la section Typographie mauresque
     (annule la marge négative desktop et ajoute de l'espace après le texte). */
  .about-inner {
    margin-bottom: 60px;
    padding-top: 60px;
  }

  /* ── Nav desktop → masqué ──────────────────────────────────────────────── */
  .nav,
  .nav-color {
    display: none !important;
  }

  .contact-footer {
    display: none !important;
  }

  /* ── Scroll hint desktop → masqué ─────────────────────────────────────── */
  #scroll-hint {
    display: none !important;
  }

  /* ── Swipe hint mobile ──────────────────────────────────────────────────── */
  #mobile-swipe-hint {
    display: block;
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    white-space: nowrap;
    pointer-events: none;
    animation: swipe-hint-pulse 2s ease-in-out infinite;
  }

  /* ── Nom de page mobile ────────────────────────────────────────────────── */
  #mobile-page-name {
    display: block;
  }

  /* ── Messages « version … à venir » — remontés pour ne pas entrer en conflit
     avec le swipe hint (bottom: 28px) en bas d'écran. ──────────────────────── */
  #play-incoming,
  #make-incoming {
    bottom: 72px;
  }

  /* ── Play — vidéo-preview en format carré, centrée verticalement ────────── */
  .game-section {
    width: 100vw;
    aspect-ratio: 1 / 1;
    margin-top: calc((100vh - 100vw) / 2); /* centre le carré dans la hauteur */
  }

  /* L'offset desktop des 30px ne s'applique pas sur mobile */
  #make-cover .game-section,
  #page-note .game-section {
    transform: none;
  }

  /* Vidéo Make : ratio 16/9 (pas de bandes vides) → bord à bord, moins haute */
  #make-cover .game-section {
    aspect-ratio: 16 / 9;
  }

  .game-section iframe {
    pointer-events: none; /* le parent route les touches via postMessage */
  }

  /* Vidéo 16:9 dans un carré → contain (pas de crop, bandes blanches haut/bas) */
  .game-section video {
    object-fit: contain;
  }

  /* Vidéo du jeu (Play) : crop carré centré — remplit le carré, rogne les côtés
     gauche/droite (object-position 50% par défaut). Hauteur inchangée. */
  #game-video {
    object-fit: cover;
  }

  /* ── Overlay touch — couvre tout page-play, gère swipe + forward joystick ── */
  #touch-overlay {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: auto;
    touch-action: none;
  }

  /* ── Knobs volume → masqués (fonctions gardées dans le menu pause Godot) ── */
  #vol-knobs {
    display: none !important;
  }

  /* ── Texte Play ("I design music…") → haut de page, knobs absents ──────── */
  #intro-text {
    top: 52px !important;
    bottom: auto !important;
    left: 24px !important;
    right: 24px;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ── Bouton navigation mobile (cercle flèche, Play uniquement) ──────────── */
  #mobile-nav-btn {
    display: none;
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: #1C1C1E;
    color: white;
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 400;
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  #mobile-nav-btn[data-active="1"] {
    display: flex;
  }

  #mobile-nav-btn:active {
    background: #48484a;
  }

  /* ── Texte Make ("Turn these knobs…") ──────────────────────────────────── */
  #make-text,
  #note-text {
    top: 52px !important;
    bottom: auto;
    left: 24px !important;
    right: 24px;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ── Read ───────────────────────────────────────────────────────────────── */
  #read-abstract {
    padding: 60px 24px 80px;
    overflow: hidden;
    align-items: flex-start;
  }

  #read-abstract-inner {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .read-lang {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Bouton langue (hero + Read) : collé au coin haut-droite sur mobile */
  .lang-cycle {
    top: 14px;
    right: 14px;
  }

  .hero-header {
    padding: 0 24px;
  }

  .hero-lang-cycle {
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
  }

  .read-header {
    height: auto;
    gap: 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  .read-title {
    font-size: 18px;
  }

  .hero-name-text {
    font-size: 18px;
  }

  .read-body-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* display:contents est buggé sur iOS Safari — forcé en block flex sur mobile */
  .read-body-middle {
    display: block !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .read-abstract-body {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    column-count: 1;
    overflow: hidden;
    height: 100%;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .read-abstract-body p {
    font-size: 13px;
  }

  .read-expand-btn {
    margin-left: 0;
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: 16px;
  }

  /* ── Look ───────────────────────────────────────────────────────────────── */
  /* smart-cities iframe désactivé sur mobile (WebGL p5.js trop lourd) */
  #smart-cities-iframe {
    display: none !important;
  }

  .look-section {
    --nav-h: 56px;
    width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 80px;
  }

  /* !important : écrase les inline style="margin-top:370px" des look-blocks */
  .look-block {
    margin-top: 56px !important;
  }

  /* SVG Moorish Typography : 80px plus bas sur mobile */
  .typo-zone .typo-img {
    margin-top: 80px;
  }

  /* Moorish Typography — titre aligné à gauche comme les autres titres */
  .typo-zone .section-title {
    left: 0 !important;
  }

  /* Titres de section sur une ligne (pas de retour à la ligne dans la grille) */
  .look-section .section-title {
    grid-column: 1 / -1 !important;
  }

  /* Non-Linear Collage : canvas pleine largeur, espacement réduit */
  #bloc-canvas {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }

  #bloc2-canvas {
    grid-column: 1 / -1 !important;
    margin-top: 20px !important;
  }

  /* Life Screenshots — !important pour inline margin-top:220px */
  #life-screenshots-title {
    margin-top: 40px !important;
  }

  /* Images internes BPS et Wayana — inline margin-top:160px sur img ET picture */
  #look-bps img,
  #look-bps picture {
    margin-top: 20px !important;
  }

  #look-wayana > img,
  #look-wayana > picture {
    margin-top: 20px !important;
  }

  .screens-zone {
    margin-top: 12px !important;
    row-gap: 24px;
  }

  .screen-pair.screen-left-land,
  .screen-pair.screen-right-land,
  .screen-pair.screen-left-port,
  .screen-pair.screen-right-port {
    grid-column: 1 / -1;
  }

  /* Mobile : toutes les images A et B visibles et alignées, aucune interaction */
  .screen-pair {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .screen-pair img,
  .screen-pair img.screen-b,
  .screen-pair.swapped img.screen-a,
  .screen-pair.swapped img.screen-b {
    grid-area: auto;
    width: 100%;
    display: block;
    visibility: visible;
  }

  .wayana-wrap {
    grid-column: 1 / -1;
  }

  .look-footer {
    grid-column: 1 / -1;
    margin-top: 56px !important;
  }

  /* ── Look info panel — adapté mobile ───────────────────────────────────── */
  #look-info-wrap {
    right: 16px;
  }

  #look-info-panel {
    width: calc(100vw - 88px);
    right: 48px;
  }

  /* ── Hero pill — centrée horizontalement, plus basse sur mobile ────────── */
  .hero-tagline {
    color: #1d1d1f !important;
    background: #ffffff !important;
  }

  /* ── Nom de page mobile — flex avec compteur centré ──────────────────── */
  #mobile-page-name {
    display: flex;
    left: 0;
    right: 0;
    padding: 0 24px;
    align-items: center;
    position: fixed;
  }

  #mobile-page-counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
  }

  /* ── Play info — bas à droite sur mobile (comme Make) ──────────────────── */
  #play-info-wrap {
    top: auto;
    bottom: 24px;
    right: 16px;
    transform: none;
  }
  #play-info-panel {
    right: 0;
    top: auto;
    bottom: 50px;
    transform: scale(0.88);
    transform-origin: right bottom;
    width: calc(100vw - 32px);
  }
  #play-info-panel.open { transform: scale(1); }

  /* Boutons prev/next — centrés sur la vidéo, marges bord sur mobile */
  #make-video-prev,
  #make-video-next {
    top: 50%;
    transform: translateY(-50%);
  }
  #make-video-prev { left: 16px; }
  #make-video-next { right: 16px; }

  /* ── Make info — bas à droite sur mobile ──────────────────────────────── */
  #make-info-wrap {
    top: auto;
    bottom: 24px;
    right: 16px;
    transform: none;
  }


  #make-info-panel {
    right: 0;
    top: auto;
    bottom: 50px;
    transform: scale(0.88);
    transform-origin: right bottom;
    width: calc(100vw - 32px);
  }

  #make-info-panel.open {
    transform: scale(1);
  }

  #make-info-video {
    width: 100%;
    margin-left: 0;
  }

  .make-info-caption {
    width: 100%;
    padding-left: 16px;
  }

  /* ── Note info — bas à droite sur mobile (comme Make) ─────────────────── */
  #note-info-wrap {
    top: auto;
    bottom: 24px;
    right: 16px;
    transform: none;
  }
  #note-info-panel {
    right: 0;
    top: auto;
    bottom: 50px;
    transform: scale(0.88);
    transform-origin: right bottom;
    width: calc(100vw - 32px);
  }
  #note-info-panel.open { transform: scale(1); }
}

/* ── Desktop — la vidéo Make / image Note gardent une marge latérale minimale.
   Les textes restent alignés sur --text-anchor-left (ancre JS commune avec Play). */
@media (pointer: fine) {
  #make-cover .game-section {
    width: calc(0.56 * min(
      calc(100vw - 2 * 80px),
      calc((100vh - 175px) * 16 / 9)
    ));
  }

  #page-note .game-section {
    width: calc(0.672 * min(
      calc(100vw - 2 * 80px),
      calc((100vh - 175px) * 16 / 9)
    ));
  }

  /* Vidéo Play : réduite à 90% */
  #page-play .game-section {
    width: calc(0.9 * min(100vw, (100vh - 160px - 15px) * 16 / 9));
  }

  /* About : visuels (typo, BPS, collages, Wayana) avec de vraies marges */
  #page-about .look-section {
    width: calc(0.55 * min(100vw, (100vh - var(--nav-h)) * 16 / 9));
    padding-top: 40px;
    padding-bottom: 90px;
  }

  /* Typo mauresque : marges réduites → déborde la colonne, reste centrée */
  #page-about .typo-zone {
    width: 145%;
    margin-left: -22.5%;
    margin-right: -22.5%;
  }

  /* Espacement vertical rescalé (~0.55×) pour suivre la taille des images.
     !important : écrase les margin-top inline de index.html (370px / 160px). */
  #page-about .look-block {
    margin-top: 205px !important;
  }
  #page-about .look-block picture,
  #page-about #bloc2-canvas {
    margin-top: 90px !important;
  }
}