/* ========================================================= Rivmont — design system Source unique des couleurs, de la typographie, des espacements, des largeurs et de la pile d'empilement. Rien ne doit être codé en dur ailleurs. ========================================================= */ :root{ /* ---------- couleurs ---------- Le noir a ses jetons NOMMÉS, comme le marbre (`--marble-*`) : ce sont eux que les jetons sémantiques (`--bg`, `--ink`…) portent à la racine, et eux qu'une surface noire posée dans une section claire redéfinit — le CTA final vit dans `#method`, en marbre, et rebascule au noir par ses jetons, sans une couleur en dur. */ --night:#000000; --night-ink:#F2F1EB; --night-ink-soft:#A6A49A; --night-muted:#79776F; --night-faint:#4A4842; --night-line:rgba(242,241,235,.15); --night-line-soft:rgba(242,241,235,.08); --bg:var(--night); --bg-raise:#0A0A09; /* surfaces légèrement décollées du fond */ --panel:rgba(255,255,255,.035); --panel-hover:rgba(255,255,255,.065); --ink:var(--night-ink); /* texte principal */ --ink-soft:var(--night-ink-soft);/* texte secondaire */ --muted:var(--night-muted); /* labels, microcopie */ --faint:var(--night-faint); /* texte décoratif, numéros */ /* ---------- l'accent ---------- Bleu franc, et il se comporte à l'inverse du citron vert qu'il remplace : celui-ci était très lumineux (0,79), celui-là est sombre (0,12). Un seul jeton ne peut donc plus servir à tout. --accent la marque. Aplats, filets, bordures, états, logo. 3,4:1 sur le noir — au-dessus du seuil de 3:1 des objets graphiques, en dessous des 4,5:1 du texte. --accent-ink texte posé SUR l'accent. Blanc, 6,2:1. --accent-text l'accent employé LUI-MÊME comme texte sur le noir — index de section, mots pivots, survols. 6,6:1. Employer `--accent` pour du texte sur fond sombre le rendrait illisible : c'est la seule règle à retenir de cette rampe. Le logo fait exception et garde `--accent` — un logotype n'est pas soumis aux seuils de contraste, et c'est là que la couleur de marque doit être exacte. */ --accent:#0048FF; /* Deux variantes d'aplat, et elles ne servent pas au même fond. `lift` éclaircit — c'est le survol sur fond sombre, où assombrir ferait reculer le bouton au lieu de le réveiller. `deep` assombrit, pour l'accent posé sur une surface claire (la carte ivoire du manifesto). Les deux gardent du blanc lisible dessus. */ --accent-lift:#2D62FF; /* survol des aplats, sur fond sombre */ --accent-deep:#003AD1; /* l'accent sur une surface claire */ --accent-ink:#FFFFFF; /* texte posé sur l'accent */ --night-accent-text:#5C8CFF; /* …sur le noir, nommé pour la même raison que `--night-*` */ --accent-text:var(--night-accent-text); /* l'accent quand il est le texte */ /* Sol de la scène 3D — le seul endroit du site qui n'est pas noir, et il doit l'être : la sculpture est plus sombre que son fond, donc il lui faut un fond. `lift` est la respiration au point d'où vient la lumière, `floor` le noir vers lequel elle retombe. Trois jetons pour doser d'un seul endroit ; monter `lift` fait virer la scène au gris, ce que `docs/DESIGN.md` proscrit — c'est le garde-fou. */ --hero-lift:rgba(35,38,45,.25); --hero-mid:rgba(12,12,14,.18); --hero-floor:#050506; /* Le bord d'attaque du panneau qui recouvre le hero. C'est un **alias** du sol de la scène, pas une seconde valeur : le panneau doit entrer sur exactement le noir qu'il recouvre, et deux valeurs à garder accordées se désaccordent au premier réglage. Calculé plutôt que réglé à l'œil. Le fond du hero est un dégradé radial sous un vignettage, donc sa valeur dépend de l'endroit : composé au bas de l'écran en 1512×860, il vaut rgb(5,5,6) au centre et rgb(4,4,4) dans les angles — soit le sol, à un point près sur 255. Le noir du site, lui, est à zéro : l'écart est faible en valeur absolue (ΔL* ≈ 1,9) mais c'est un bord franc en mouvement, et c'est exactement ce qui se lisait comme une coupure. Le panneau retombe ensuite sur `--bg` — voir `.section--panel` dans `layout.css`. */ --panel-top:var(--hero-floor); /* Le même bord, mais à mi-course. Le fond du hero n'est pas uniforme : son dégradé radial est centré à 45 % de la hauteur, donc la couture traverse une bande plus claire en passant par le milieu de l'écran. Composé au même endroit — dégradé sur le sol, puis vignettage —, il y vaut rgb(10,11,13). Un aplat unique se serait vu là, et seulement là : c'est le seul moment où l'écart atteint ΔL* 3. Valeur calculée, pas relevée à l'œil, et vérifiée sur sept points de la course : l'écart au fond réel reste sous 2 sur 255 partout. Elle ne dépend pas du format, ce qui évitera de la redécliner par point de rupture : le même calcul en 375×812 donne rgb(11,11,13). Le dégradé est défini en pourcentages, donc il se met à l'échelle avec l'écran au lieu de se recentrer. */ --panel-peak:#0A0B0D; /* Le voile du manifesto — la seule surface bleue du site. C'est ce qui recouvre le hero quand il se floute : trois taches sombres qui dérivent lentement l'une sur l'autre, plus un noir de fond vers lequel tout retombe. Elles ne sont PAS `--accent`. L'accent est une couleur de marque réservée aux filets, aux aplats de bouton et aux états ; posé en grand aplat de fond il crie, et `docs/DESIGN.md` l'interdit explicitement. Ce sont des bleus de nuit, désaturés, dont la luminance reste sous celle du texte crème pour que la phrase tienne son contraste par-dessus — le plus clair est à 1,9 %, le crème à 88 %, soit 17:1. Doser d'ici et nulle part ailleurs. Monter la saturation fait virer la section au bleu roi de fond d'écran, ce qui est exactement le registre à éviter. */ --wash-deep:#04060D; /* le noir bleuté vers lequel tout retombe */ --wash-1:rgba(16,38,92,.72); /* la tache principale, la plus haute */ --wash-2:rgba(9,24,66,.68); /* sa contre-partie, plus froide et basse */ --wash-3:rgba(28,44,86,.42); /* l'éclaircie, très diffuse */ /* ---------- la surface claire ---------- La seconde surface du site, celle du panneau qui recouvre le hero. Ce n'est ni du blanc ni le crème du texte : un **blanc de carrière**, désaturé et franchement plus sombre que `--ink`, pour qu'il se lise comme une matière et non comme du papier. Le crème du site est chaud et lumineux (L* 94) ; celui-ci descend à L* 91 et perd la moitié de sa saturation. Il reste très légèrement chaud : un gris froid se battrait avec le bronze des mains, qui est la seule image de la section. Les valeurs d'encre ne sont pas celles du fond sombre inversées, elles sont recalculées. `--marble-muted` en particulier a été assombri : le `--muted` du thème sombre donne 4,6:1 sur le noir, son symétrique naïf serait tombé à 3,2:1 sur cette surface. À 4,7:1, la parité est tenue. Contrastes mesurés sur `--marble` : encre 16:1, encre douce 5,9:1, accent 6,7:1. L'accent, lui, ne se recalcule pas : `--accent-deep` existe déjà pour ça — « l'accent posé sur une surface claire ». */ --marble:#E9E7E1; --marble-ink:#0B0B0A; --marble-ink-soft:#55534D; --marble-muted:#66645E; --marble-faint:#AAA8A1; --marble-line:rgba(11,11,10,.18); --marble-line-soft:rgba(11,11,10,.10); --line:var(--night-line); --line-soft:var(--night-line-soft); /* La trame de colonnes — le repère architectural du hero, repris par le procédé. Plus discrète qu'un filet : elle se voit sans se lire. */ --grid-line:rgba(255,255,255,.055); /* ---------- typographie ---------- */ --sans:'Manrope',-apple-system,'Segoe UI',sans-serif; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --fs-display:clamp(52px,8.4vw,138px); /* H1 du hero */ --fs-h2:clamp(38px,5.6vw,92px); --fs-h3:clamp(23px,2.5vw,38px); --fs-lead:clamp(16px,1.25vw,20px); --fs-body:clamp(15px,1.05vw,17px); --fs-label:11px; --fs-micro:9.5px; --lh-display:.93; --lh-heading:1.02; --lh-body:1.75; --tr-label:.24em; /* interlettrage des labels capitales */ --tr-wide:.2em; /* ---------- espacements ---------- */ --s-3xs:clamp(6px,.5vw,9px); --s-2xs:clamp(9px,.8vw,14px); --s-xs:clamp(14px,1.2vw,20px); --s-sm:clamp(20px,1.8vw,30px); --s-md:clamp(30px,2.8vw,48px); --s-lg:clamp(46px,4.2vw,76px); --s-xl:clamp(74px,7vw,124px); --s-2xl:clamp(110px,11vw,190px); --s-3xl:clamp(150px,16vw,280px); --section-y:var(--s-2xl); /* respiration verticale d'une section */ /* ---------- largeurs ---------- */ --gutter:clamp(20px,3.1vw,56px); --pad:var(--gutter); /* alias hérité du hero */ --container:1560px; --header-h:clamp(72px,8vh,104px); --measure:62ch; /* longueur de ligne confortable */ /* ---------- mouvement ---------- */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:.25s; --dur:.45s; --dur-slow:.9s; /* ---------- empilement ---------- Une seule échelle pour tout le site : canvas WebGL au fond, contenu au-dessus, puis header, menu plein écran, modales. */ /* LA COURSE DES PANNEAUX DE #method, en hauteurs d'écran : les portes et les quatre temps. 350 svh × .79 — la fin de l'ancienne course (.79 → 1, la carte 04 qui grandissait et le CTA en rideau) est devenue la course du musée, ci-dessous ; les quatre temps gardent exactement leur longueur. */ --method-seq:276.5svh; /* LA COURSE DU MUSÉE, à la suite : la carte 04 se fige, la caméra pousse sur le tableau, le musée prend sa place et la caméra recule jusqu'à l'image entière, le CTA s'écrit à droite. Plus courte sous 1240 px. `ui/panels.js` la lit par une sonde (`.panels__museum-probe`). */ --museum-seq:200svh; /* LA PAUSE : une fois le musée plein cadre et le CTA écrit, la scène reste collée le temps de lire, avant de se décoller sur le pied de page — sans elle, le noir basculait sur le footer dès le dernier mot. `--mq` reste à 1 pendant cette course. */ --museum-hold:40svh; /* LA PISTE ENTIÈRE — lue par deux sections : `.panels` (sa course) et `.process` (la queue de sa piste, `--process-tail`, pendant laquelle la scène des mains reste collée avec son titre sous les panneaux). Un seul jeton pour que les deux ne puissent pas diverger. */ --method-track:calc(var(--method-seq) + var(--museum-seq) + var(--museum-hold)); /* L'AVANCE DES PANNEAUX : la scène des panneaux se colle — et son balayage commence — cette hauteur avant la fin du relais des mains, dont la fin était creuse (la boîte a fini de remonter à .75 du relais, rien jusqu'à 1). Retirée de la queue du procédé, pas de sa piste : le relais garde sa longueur, seul le point de collage des panneaux avance. 30 svh = de .77 à 1 du relais (1,3 écran). */ --panels-early:30svh; /* La fin de la piste où la barre repasse au noir. Elle valait les 2 derniers % plus l'écran de décollage, quand le cadre noir du CTA recouvrait la barre ; le musée est sombre de bord à bord et la barre y reste transparente jusqu'au pied de page : zéro. Le jeton reste, les repères du header (`.process__clear`, `.process__light--end`, `.panels__light`) le lisent toujours. */ --method-dark:0svh; --z-canvas:0; --z-content:1; --z-sticky:2; --z-header:50; --z-menu:60; --z-modal:70; } @media (max-width:1240px){ :root{--museum-seq:160svh} } /* Points de rupture (les media queries ne lisent pas les variables) : 560px exception locale — grille des métriques en une colonne 760px mobile -> tablette 1000px tablette -> petit desktop (bascule nav / menu plein écran) 1240px petit desktop -> desktop Les garder synchronisés entre les feuilles. Le hero ajoute une règle d'orientation — (max-width:1000px) and (orientation:portrait) — pour basculer sa composition côte à côte en composition empilée. Voir docs/DESIGN.md. */