/* ==========================================================================
   LE SITE NU — pièce propre, 22/08.
   Demande du PO après une journée de correctifs empilés : « un site vierge,
   avec juste navigation et contenu, rien d'autre ».
   RIEN du projet n'entre ici : ni tokens, ni voiles, ni décor, ni marque
   fixe, ni theme-color, ni color-scheme, ni amorce, ni plancher. Aucun
   élément en `position: fixed` ou `sticky` — c'est le point.
   Ce qu'on cherche : ce que fait iOS 26 TOUT SEUL avec une page ordinaire et
   une navigation par glissement. Tout ce qu'on verra dans une bande d'écran
   vient donc du navigateur, jamais de nous. C'est la question du 20/08 sur
   apple.com, posée proprement.
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; color: #111; }
/* ⚠️ LE CLIP DOIT AUSSI VIVRE SUR LA RACINE — mesuré le 24/08 : avec le clip
   sur body seul, le viewport de MISE EN PAGE s'élargit quand même au contenu
   (innerWidth 413 pour un écran de 375, rechargement franc compris), et tout
   le chrome fixe (`left:0; right:0`) se dimensionne sur ces 413 px : le
   chevron est sortait à moitié de l'écran. Un fixe a pour bloc englobant le
   viewport, pas body — le clip de body ne le protège pas. `clip` et jamais
   `hidden` : pas de conteneur de défilement (doctrine fiche.css l.50). */
html { overflow-x: clip; }
body {
    /* Urbanist EN TÊTE — doute PO du 24/08 soir, vérifié fondé : le labo
       était né sur la pile système et tout /nu/ se jugeait en SF. Les
       @font-face sont chargés par NuBase (fontsource 200→700) ; le système
       reste le repli le temps du chargement. */
    font: 17px/1.55 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    /* ⚠️ `clip` ET PAS `hidden` — règle portée de global.css (site) le 24/08,
       quand le mur de salle est arrivé dans l'arbre : ses images de pièces
       (absolues, `max-width: none`, plus larges que l'écran de 38 px) font
       déborder le document, et SANS ceci toute la page panote latéralement —
       constat PO « on a des éléments qui scrollent horizontalement ». Sur
       mobile, le viewport de mise en page s'élargit alors au scrollWidth et
       le chrome fixe (site-brand mesuré à 413 px) part avec lui.
       `clip` rogne sans fabriquer de conteneur de défilement : les sticky et
       les panes du glisseur restent calés — `hidden` les casserait (doctrine
       de fiche.css, l.50). */
    overflow-x: clip;
}
.page { padding: 24px 20px 80px; }
/* `div.nu-h1` : le titre de niveau 1 du rendu qui NE porte PAS le <h1> (un seul
   h1 par page, 04/10 : téléphone et bureau sont tous deux dans le document).
   `div:where(.nu-h1)` a la spécificité d'un `h1` ; partout où une règle vise
   `h1`, elle le vise aussi. La première ligne rend le gras que le navigateur
   donne de lui-même à un h1. */
:where(div.nu-h1) { font-weight: bold; }
h1, div:where(.nu-h1) { font-size: 30px; line-height: 1.15; margin-bottom: 6px; letter-spacing: -0.01em; }
.sur { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #666; margin-bottom: 10px; }
p { margin: 0 0 16px; max-width: 34em; }
h2 { font-size: 21px; margin: 28px 0 8px; }
.repere { font-variant-numeric: tabular-nums; color: #888; font-size: 13px; margin-bottom: 20px; }
nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 8px; }
nav a {
    display: inline-block; padding: 12px 16px; border: 1px solid #111;
    border-radius: 999px; color: #111; text-decoration: none; font-size: 15px;
}
.bloc { height: 62vh; background: #ececec; border-radius: 4px; margin: 18px 0;
        display: flex; align-items: center; justify-content: center; color: #999; font-size: 13px; }
/* La seule chose qui bouge : la pane du glissement. Volontairement calquée sur
   celle du site (fixed, débord de 140 px pour atteindre les bords physiques,
   opaque) — c'est l'objet qu'on veut observer. */
.pane {
    position: fixed; top: -140px; left: 0; right: 0;
    height: calc(100lvh + 280px); padding-top: 140px;
    background: #fff; overflow: hidden; z-index: 5; will-change: transform;
}