/* Sounday. Une seule feuille pour toutes les pages.
   Dans l'esprit des pages produit de Teenage Engineering : gris clair, une
   grotesque légère en minuscules, des phrases courtes centrées, et l'objet au
   milieu. L'objet ici, c'est le SD–1, l'appareil sur lequel on joue. */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #eeeeec;
  --ink: #1a1a1a;
  --grey: #8e8e8a;
  --soft: #555;
  --orange: #ff4f00;
  --blue: #2f6fd6;
  --gut: clamp(16px, 2.4vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 17px/1.4 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }
h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: 300; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */

.top { display: flex; align-items: flex-start; gap: clamp(22px, 3.4vw, 48px); padding: 22px var(--gut); color: var(--grey); }
.mark { font-size: 26px; line-height: .95; }
.menu { display: flex; gap: clamp(22px, 3.4vw, 48px); }
.menu a { display: flex; gap: 10px; }
.menu svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu b { display: block; font-weight: 300; font-size: 24px; line-height: 1; }
.menu small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.25; }
.top a:hover { color: var(--ink); }

/* ---------- Les pages ---------- */

.hero { padding: 40px var(--gut) 0; text-align: center; }
.hero h1 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.01em; }
.hero p { margin: 10px auto 0; max-width: 34em; color: var(--grey); font-size: 16px; }

.name { padding: 90px var(--gut) 0; text-align: center; }
.name h2 { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(34px, 3.4vw, 46px); }
.name p { margin-top: 16px; font-size: clamp(22px, 2.2vw, 30px); }
.name .body { max-width: 440px; margin: 22px auto 0; font-size: 17px; }

.tag { font-size: 12px; line-height: 1; border: 1px solid currentColor; padding: 2px 5px 3px; }

.index { display: grid; grid-template-columns: 300px repeat(2, minmax(0, 1fr)); gap: 0 40px; padding: 130px var(--gut) 0; }
.index h2 { font-size: 48px; line-height: 1; }
.index ul { list-style: none; font-size: 23px; line-height: 1.4; }
.index a:hover { color: var(--orange); }
.index a::after { content: ' →'; color: var(--orange); }
.index .soon { color: #a9a9a4; }
.index .soon small { font-size: 11px; letter-spacing: .06em; margin-left: 8px; vertical-align: 3px; }

.notice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 110px var(--gut) 0; font-size: 13px; line-height: 1.45; color: var(--soft); }
.notice h3 { grid-column: 1 / -1; text-align: center; font-size: clamp(30px, 3vw, 40px); color: var(--ink); padding-bottom: 20px; }
.notice p + p { margin-top: 10px; }
.notice b { font-weight: 500; color: var(--ink); }

.specs { padding: 130px var(--gut) 0; text-align: center; font-size: 13px; line-height: 1.5; text-transform: uppercase; color: var(--soft); }
.cta { display: block; padding-top: 50px; text-align: center; font-size: 20px; color: var(--blue); }
.cta:hover { color: var(--orange); }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 30px; padding: 120px var(--gut) 26px; font-size: 12px; color: var(--grey); }
.foot a:hover { color: var(--ink); }

.lost { padding: 120px var(--gut) 0; text-align: center; }
.lost h1 { font-size: clamp(34px, 4vw, 52px); }
.lost a { display: inline-block; margin-top: 22px; font-size: 20px; color: var(--blue); }

/* ---------- Le SD–1 ----------
   Toutes les mesures sont en cqw, des centièmes de la largeur de l'appareil :
   il garde ses proportions à toutes les tailles. */

.rig { container-type: inline-size; width: min(1000px, 100% - 2 * var(--gut)); margin: 46px auto 0; }

/* ---------- L'Activité Discord ----------
   Le défi du jour se lit sur l'écran du SD–1. À côté, une colonne façon
   notice : les joueurs du salon, chacun avec un petit écran où ses réponses
   montent comme le vumètre, puis les séries du salon. */

.bar { display: flex; align-items: center; gap: 18px; padding: 16px var(--gut); font-size: 15px; }
.who { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.who img { width: 28px; height: 28px; border-radius: 50%; }
.no { margin-left: auto; color: var(--grey); }

.table { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; padding: 10px var(--gut) 30px; }
.table .rig { width: min(1000px, 100%); margin: 0 auto; }
.crew { font-size: 15px; }
.crew h2 { padding-bottom: 12px; font-size: 15px; color: var(--grey); }
.players { list-style: none; margin: 0; padding: 0; }
.players li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px 10px; padding: 12px 0; border-top: 1px solid #d6d6d2; }
.players img { width: 26px; height: 26px; border-radius: 50%; }
.players .player-name { overflow: hidden; white-space: nowrap; }
.players b { font-weight: 300; font-size: 20px; font-variant-numeric: tabular-nums; }

.meter { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 2px; height: 30px; padding: 6px 8px; border-radius: 5px; background: linear-gradient(#151515, #0b0b0b); box-shadow: 0 0 0 3px #9d9c97; }
.meter i { flex: 1; height: 3px; background: #3a3a3a; }
.meter i:nth-child(5n):not(:last-child) { margin-right: 6px; }
.meter .c-p { height: 100%; background: #f4f4f2; }
.meter .c-g { height: 50%; background: #f4f4f2; }
.meter .c-m { background: var(--orange); }

.invite { display: block; width: 100%; padding: 12px 0; border-top: 1px solid #d6d6d2; text-align: left; }
.invite::before { content: '+'; margin-right: 8px; color: var(--orange); }
.invite:hover { color: var(--orange); }

.streaks { margin: 26px 0 0; }
.streaks div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #d6d6d2; }
.streaks dt { color: var(--grey); }
.streaks dd { margin: 0; }

@media (max-width: 900px) {
  .table { grid-template-columns: minmax(0, 1fr); }
  .crew { order: 2; }
}

.sd {
  display: grid;
  grid-template-columns: 1fr 24cqw;
  grid-template-areas: "screen knobs" "keys keys" "name grille";
  gap: 3cqw 3.4cqw;
  padding: 3.4cqw 3.4cqw 2.6cqw;
  border-radius: 3cqw;
  background: linear-gradient(#e3e2de, #cbcac5);
  box-shadow:
    inset 0 0 0 1px #b3b2ad,
    inset 0 2px 0 1px rgba(255, 255, 255, .7),
    0 3cqw 5cqw -1cqw rgba(0, 0, 0, .18),
    0 .6cqw 1cqw rgba(0, 0, 0, .08);
  user-select: none;
  -webkit-user-select: none;
}

/* L'appareil se pose à l'ouverture de la page. */
@media (prefers-reduced-motion: no-preference) {
  .sd { animation: sd-in .9s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes sd-in {
  from { opacity: 0; transform: translateY(2.4cqw) scale(.985); }
}

.sd-grille {
  grid-area: grille;
  height: 3.9cqw;
  align-self: center;
  background: radial-gradient(circle, #55554f 0 32%, transparent 36%) 0 0 / 1.2cqw 1.3cqw;
}

/* La dalle sous une vitre : un reflet oblique, fixe, par-dessus le canvas. */
.sd-screen {
  grid-area: screen;
  position: relative;
  padding: .7cqw;
  border-radius: 1.1cqw;
  background: linear-gradient(#a6a5a0, #959490);
  box-shadow: inset 0 .2cqw .4cqw rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6);
}
.sd-screen::after {
  content: '';
  position: absolute;
  inset: .7cqw;
  border-radius: .6cqw;
  background: linear-gradient(115deg, rgba(255, 255, 255, .035) 0 24%, transparent 24.2%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  pointer-events: none;
}
.sd-screen canvas { display: block; width: 100%; aspect-ratio: 33 / 19; border-radius: .6cqw; background: #0b0b0b; cursor: ew-resize; touch-action: none; }

/* À droite, par ordre d'usage : FREQ, le potard qu'on tourne sans arrêt,
   puis VOL et son vumètre, plus petits, puis EQ et OK. */
.sd-knobs {
  grid-area: knobs;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: space-between;
  justify-items: center;
  gap: 1.6cqw 1.4cqw;
}
.knob { grid-column: 1 / -1; display: grid; justify-items: center; gap: .9cqw; cursor: grab; touch-action: none; }
.knob:active { cursor: grabbing; }
.knob span { font-size: 1.15cqw; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; color: var(--soft); }
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 12.4cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #dddcd8, #b6b5b0 78%, #a3a29d);
  box-shadow: 0 .35cqw 0 #a5a49f, inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
/* La graduation, sur les 270° de course. */
.ring::before {
  content: '';
  position: absolute;
  inset: -1.3cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, #8e8d88 0 1.2deg, transparent 1.2deg 27deg);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89%), conic-gradient(from -136.5deg, #000 0 273deg, transparent 0);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent 88%, #000 89%) intersect, conic-gradient(from -136.5deg, #000 0 273deg, transparent 0);
}
.knob:hover .ring { transform: translateY(-.15cqw); }
.cap {
  position: relative;
  width: 8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 .3cqw .5cqw rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .45);
  transform: rotate(var(--a, 0deg));
  transition: transform .12s cubic-bezier(.2, .8, .2, 1);
}
.cap i { position: absolute; left: 50%; top: .6cqw; width: .5cqw; height: 1.7cqw; margin-left: -.25cqw; border-radius: 1cqw; background: #fff; }
.cap--b { background: radial-gradient(circle at 40% 35%, #5b8ff0, #1f56b8); }
.cap--w { background: radial-gradient(circle at 40% 35%, #fff, #d4d4d0); }
.cap--w i { background: #333; }

.sd-vol { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.6cqw; }
.sd-vol .ring { width: 7.6cqw; }
.sd-vol .ring::before { inset: -1cqw; }
.sd-vol .cap { width: 4.8cqw; }
.sd-vol .cap i { top: .4cqw; width: .4cqw; height: 1.1cqw; margin-left: -.2cqw; }
/* Le vumètre : des segments imprimés dans le gris, sombres quand le son
   passe, orange en haut. */
.sd-vu {
  position: relative;
  width: .9cqw;
  height: 7.6cqw;
  margin-bottom: 2cqw;
  background: #c3c2bd;
  -webkit-mask: repeating-linear-gradient(to top, #000 0 .55cqw, transparent .55cqw .76cqw);
  mask: repeating-linear-gradient(to top, #000 0 .55cqw, transparent .55cqw .76cqw);
}
.sd-vu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #2a2a28 0 72%, var(--orange) 72%);
  clip-path: inset(calc((1 - var(--v, 0)) * 100%) 0 0);
}

.sd-key {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: .9cqw;
  background: linear-gradient(#f5f4f0, #dedcd7);
  box-shadow: inset 0 0 0 1px #b5b4af, 0 .35cqw 0 #a9a8a3;
  font-size: 1.25cqw;
  font-weight: 400;
  color: #333;
  transition: transform .09s cubic-bezier(.3, .7, .4, 1), box-shadow .09s, background .2s, color .2s;
}
.sd-key:active { transform: translateY(.3cqw); box-shadow: inset 0 0 0 1px #b5b4af, 0 .05cqw 0 #a9a8a3; }
.sd-key small { position: absolute; top: .7cqw; left: .9cqw; font-size: .95cqw; color: #777; }
.sd-fn { width: 100%; height: 5.6cqw; aspect-ratio: auto; text-transform: uppercase; letter-spacing: .06em; }
.led { position: absolute; top: .8cqw; right: .8cqw; width: .8cqw; aspect-ratio: 1; border-radius: 50%; background: #9c9b96; transition: background .15s, box-shadow .15s; }
.is-on .led, [aria-pressed="true"] .led { background: var(--orange); box-shadow: 0 0 .8cqw var(--orange); }

/* OK est la touche qu'on presse le plus : orange, comme sur les appareils TE.
   Quand l'appareil attend, elle appelle d'un halo qui s'élargit. */
.sd-ok { background: linear-gradient(#ff6a26, #f04800); color: #fff; box-shadow: inset 0 0 0 1px #d94300, 0 .35cqw 0 #b83a00; }
.sd-ok:active { box-shadow: inset 0 0 0 1px #d94300, 0 .05cqw 0 #b83a00; }
@media (prefers-reduced-motion: no-preference) {
  .sd-ok.is-ready { animation: sd-call 1.6s ease-out infinite; }
}
@keyframes sd-call {
  from { box-shadow: inset 0 0 0 1px #d94300, 0 .35cqw 0 #b83a00, 0 0 0 0 rgba(255, 79, 0, .45); }
  to { box-shadow: inset 0 0 0 1px #d94300, 0 .35cqw 0 #b83a00, 0 0 0 1.4cqw rgba(255, 79, 0, 0); }
}

/* Les genres passent au second plan : touches plus basses, le genre joué
   reste enfoncé et allume sa diode. */
.sd-keys { grid-area: keys; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; }
.sd-keys .sd-key { aspect-ratio: auto; height: 4.8cqw; padding-top: .4cqw; font-size: 1.3cqw; color: #555; }
.sd-keys .led { top: .7cqw; right: .9cqw; width: .6cqw; }
.sd-keys .sd-key[aria-pressed="true"] { transform: translateY(.22cqw); background: linear-gradient(#e9e8e3, #d6d4cf); box-shadow: inset 0 0 0 1px #aeada8, inset 0 .2cqw .3cqw rgba(0, 0, 0, .08), 0 .13cqw 0 #a9a8a3; color: var(--ink); }

.sd-name { grid-area: name; display: flex; align-items: center; gap: 1cqw; font-size: 2.6cqw; color: #333; }
.sd-name span { font-size: 1.1cqw; line-height: 1; border: 1px solid currentColor; padding: .2cqw .5cqw .3cqw; }

.sd-credit { min-height: 1.5em; margin-top: 18px; text-align: center; font-size: 12px; color: var(--grey); }

.keys { margin-top: 26px; text-align: center; font-size: 12px; color: var(--grey); }

/* L'appareil debout, sur un téléphone : l'écran en haut, FREQ, VOL, EQ et OK
   sur une rangée, puis les genres. Le vumètre ne tient pas : il saute. */
@container (max-width: 560px) {
  .sd {
    grid-template-columns: 1fr;
    grid-template-areas: "screen" "knobs" "keys" "name";
    gap: 4.4cqw;
    padding: 4.4cqw;
    border-radius: 6cqw;
  }
  .sd-grille, .sd-vu { display: none; }
  .sd-screen { padding: 1.2cqw; border-radius: 2.4cqw; }
  .sd-screen::after { inset: 1.2cqw; border-radius: 1.2cqw; }
  .sd-screen canvas { aspect-ratio: 4 / 3; border-radius: 1.2cqw; }
  .sd-knobs { grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: center; gap: 2.4cqw; }
  .knob, .sd-vol { grid-column: auto; gap: 1.4cqw; }
  .ring { width: 16cqw; box-shadow: 0 .6cqw 0 #a5a49f, inset 0 1px 0 rgba(255, 255, 255, .6); }
  .ring::before { inset: -2cqw; }
  .cap { width: 10.4cqw; }
  .cap i { top: .9cqw; width: .9cqw; height: 2.8cqw; margin-left: -.45cqw; }
  .sd-vol .ring { width: 12cqw; }
  .sd-vol .ring::before { inset: -1.6cqw; }
  .sd-vol .cap { width: 7.6cqw; }
  .sd-vol .cap i { top: .7cqw; width: .7cqw; height: 2cqw; margin-left: -.35cqw; }
  .knob span { font-size: 2.4cqw; }
  .sd-fn { width: 100%; height: 13cqw; font-size: 2.8cqw; }
  .sd-keys { gap: 1.8cqw; }
  .sd-keys .sd-key { height: 11cqw; padding: 1.6cqw .6cqw 0; font-size: 2.7cqw; line-height: 1.15; text-align: center; }
  .sd-key { border-radius: 1.8cqw; font-size: 3cqw; box-shadow: inset 0 0 0 1px #b5b4af, 0 .6cqw 0 #a9a8a3; }
  .sd-ok { box-shadow: inset 0 0 0 1px #d94300, 0 .6cqw 0 #b83a00; }
  .sd-key small { top: 1.2cqw; left: 1.6cqw; font-size: 2.1cqw; }
  .led { top: 1.6cqw; right: 1.6cqw; width: 1.6cqw; }
  .sd-keys .led { top: 1.4cqw; right: 1.6cqw; width: 1.2cqw; }
  .sd-name { font-size: 4.6cqw; gap: 2cqw; }
  .sd-name span { font-size: 2.4cqw; padding: .4cqw 1cqw .6cqw; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 760px) {
  .menu small { display: none; }
  .menu svg { width: 32px; height: 32px; }
  .menu b { font-size: 20px; }
  .mark { font-size: 22px; }
  .index { grid-template-columns: 1fr; gap: 20px; padding-top: 90px; }
  .index ul { font-size: 21px; }
  .notice { grid-template-columns: 1fr 1fr; }
  .keys { display: none; }
}