/* Feuille de la page : aucune règle en ligne, la CSP du site n'autorise que 'self'. */
@font-face { font-family: "Space Grotesk"; src: url("./vendor/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
@font-face { font-family: "IBM Plex Sans"; src: url("./vendor/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "IBM Plex Sans"; src: url("./vendor/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "IBM Plex Sans"; src: url("./vendor/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("./vendor/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("./vendor/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: block; }

/* Jetons de la charte (studio-drekky-papers/charte-graphique/tokens.json) */
:root {
  --paper: #f7f2e6;
  --paper-dim: #efe6d1;
  --arc: #e4d8bc;
  --line: #dcd3bd;
  --ink: #1c2523;
  --muted: #4a5654;
  --muted-2: #5f6a68;
  --ardoise: #3c565d;
  --terracotta: #bc6a4a;
  --terracotta-fort: #a0553f;
  --display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --marge: 4.2vmin;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font-family: var(--body);
  -webkit-font-smoothing: antialiased; }
body { background: var(--paper); }
canvas { display: block; position: absolute; inset: 0; }
.etiquette { font-family: var(--mono); font-size: max(11px, 1.15vmin); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 400; }

#texte { position: absolute; top: var(--marge); left: var(--marge); width: min(42vmin, 520px); pointer-events: none; }
#texte .rubrique { display: flex; align-items: center; gap: 12px; color: var(--terracotta-fort); }
#texte .rubrique::before { content: ""; width: 26px; height: 2px; background: var(--terracotta); }
h1 { margin: 1.6vmin 0 0; font-family: var(--display); font-weight: 600; letter-spacing: -.025em;
  font-size: 5.4vmin; line-height: 1.04; text-wrap: balance; }
h1 em { font-style: normal; color: var(--terracotta); }
.chapeau { margin: 1.6vmin 0 0; font-size: max(13px, 1.65vmin); line-height: 1.55; color: var(--muted); }

#heure { margin-top: 3vmin; }
#horloge { font-family: var(--display); font-weight: 600; letter-spacing: -.04em; font-size: 11.5vmin; line-height: .9;
  font-variant-numeric: tabular-nums; margin-top: .6vmin; }
#mesures { margin-top: 2.4vmin; display: grid; gap: 1.1vmin; }
#mesures div { border-top: 1px solid var(--line); padding-top: .9vmin; display: flex; justify-content: space-between;
  align-items: baseline; gap: 2vmin; }
#mesures b { font-family: var(--display); font-weight: 600; font-size: 3.2vmin; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
#mesures b.repos { color: var(--terracotta); }

/* La courbe repose sur un bandeau de papier, séparé de la maquette par un filet. */
#bandeau { position: absolute; left: 0; right: 0; bottom: 0; height: calc(10.5vmin + var(--marge) * .8 + 6vmin);
  background: var(--paper); border-top: 1px solid var(--line); }
#pouls { position: absolute; left: var(--marge); right: var(--marge); bottom: calc(var(--marge) * .8); height: 10.5vmin; }
#pouls svg { width: 100%; height: 100%; overflow: visible; }
#pouls .titre { position: absolute; left: 0; top: -2.6vmin; }
#pouls .graduation { font-family: var(--mono); font-size: 11px; fill: var(--muted-2); letter-spacing: .08em; }
.legende { display: flex; gap: 2.4vmin; margin-top: 1.4vmin; }
.legende span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: 0; background: var(--ardoise); }
.legende .vers-manhattan::before { background: var(--terracotta); }
#source { position: absolute; right: var(--marge); top: var(--marge); text-align: right; font-size: max(10px, 1vmin); }
#source a { color: inherit; text-underline-offset: 3px; }
/* Les captures (vidéo, images) se passent du lien vers les mentions. */
.capture #source .mentions { display: none; }

#renvois { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
#renvois svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.renvoi { position: absolute; white-space: nowrap; background: rgba(247, 242, 230, .92); padding: 4px 7px 3px;
  border-radius: 3px; }
.renvoi .etiquette { color: var(--ink); font-weight: 500; font-size: max(10px, 1.1vmin); }
.renvoi b { display: block; font-family: var(--display); font-weight: 600; font-size: 2.4vmin; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.renvoi b small { font-family: var(--body); font-weight: 400; font-size: 1.35vmin; color: var(--muted); letter-spacing: 0; }

/* Écran large mais bas (1920 × 900, ordinateur portable) : la colonne s'élargit et les
   mesures passent à côté de l'heure, sinon la dernière glissait sous le bandeau. */
@media (min-aspect-ratio: 4/3) and (max-height: 960px) {
  #texte { width: min(60vmin, 700px); }
  #heure { display: flex; align-items: flex-end; gap: 4vmin; }
  #mesures { margin-top: 0; flex: 1; gap: .8vmin; }
  #mesures div { display: block; padding-top: .6vmin; }
  #mesures b { display: block; font-size: 2.8vmin; }
}

/* Portrait (4:5, téléphone) : le texte en haut, sur toute la largeur. */
@media (max-aspect-ratio: 1/1) {
  #texte { width: auto; right: var(--marge); }
  h1 { font-size: 6.4vmin; }
  #heure { margin-top: 2.4vmin; display: flex; align-items: flex-end; gap: 5vmin; }
  #horloge { font-size: 14vmin; }
  #mesures { margin-top: 0; flex: 1; }
  /* Les sources se rangent dans le bandeau, à hauteur du titre de la courbe. */
  #source { top: auto; bottom: calc(var(--marge) * .8 + 12vmin); z-index: 2; font-size: max(9.5px, .95vmin); }
}

/* Téléphone (portrait étroit) : les tailles plancher en pixels ne suivent plus les vmin.
   Les sources passent sous la courbe, sur toute la largeur, et le bandeau s'agrandit d'autant. */
@media (max-aspect-ratio: 1/1) and (max-width: 640px) {
  :root { --marge: 16px; }
  /* Le texte sur un bandeau de papier, comme la courbe en bas : les tracés de la maquette
     ne passent plus derrière les chiffres. */
  #texte { top: 0; left: 0; right: 0; padding: var(--marge); background: var(--paper);
    border-bottom: 1px solid var(--line); }
  #source { left: var(--marge); right: var(--marge); bottom: 8px; text-align: left; font-size: 9px;
    letter-spacing: .08em; line-height: 1.5; }
  #pouls { bottom: 84px; height: 52px; }
  #pouls .titre { top: -20px; }
  #bandeau { height: 164px; }
}