/* ============================================================================ OPAQ — site de NS Production — tokens.css ---------------------------------------------------------------------------- DEUX directions de design, UN seul HTML. Le HTML et le JS sont identiques d'une direction à l'autre : seules ces variables et style.css changent. html[data-theme="planche"] → A « Planche contact » (docs/design-directions.md §4) html[data-theme="salle"] → B « Salle sombre » (docs/design-directions.md §3) Les valeurs des deux palettes et des deux jeux de polices sont RECOPIÉES du document de direction, pas réinventées. Les noms sont des rôles (bg, ink, signal…), jamais des teintes : c'est ce qui permet de permuter les deux habillages sans toucher une ligne de balisage. base.css n'est jamais modifié ; tout passe par ici et par style.css. Aperçu de l'autre direction sans toucher au HTML : index.html?theme=salle ============================================================================ */ /* ============================================================================ LES POLICES, SERVIES PAR CE SITE ---------------------------------------------------------------------------- Aucune requête vers Google : les fichiers sont dans assets/fonts/ et partent du même domaine que la page (docs/securite.md, §RGPD). Ce sont les polices de la direction MONTRÉE, « Salle sombre » ; celles du thème Planche — Newsreader et Schibsted Grotesk — ne sont pas servies : le jour où on montre ce thème-là, il faudra les télécharger dans assets/fonts/ et les déclarer ici, à la suite. TROIS FAMILLES, TROIS RÔLES, ET PAS UNE DE PLUS. Instrument Serif les TITRES (--font-display). Un serif de labeur contemporain, dessiné pour les grands corps : c'est lui qui donne son ton aux trois thèmes de l'accueil et à toutes les têtes de page. Une seule graisse, 400, et son italique — la famille n'en a pas d'autre, et c'est très bien ainsi : un titre de ce corps n'a pas besoin d'être gras. Archivo TOUT LE RESTE : le texte courant, les libellés en capitales, les numéros. Elle est variable, 400 à 700. Poppins 300 UNE PHRASE, et une seule : le slogan de l'ouverture (--font-slogan, dans les invariants plus bas). Ce n'est pas un troisième alphabet de page, c'est la LETTRE DE LA CARTE DE VISITE de Noé — voir le bloc @font-face qui la déclare, et assets/fonts/README.md. JetBrains Mono a QUITTÉ le site. Elle portait les libellés et les numéros, et sa largeur fixe les étirait : à côté d'un titre serif, ce mono-là faisait un troisième alphabet dans la page. Les libellés reviennent donc à Archivo, en capitales espacées de 0.12em, à 12-13 px — c'est la lettre du texte courant, ramassée et espacée, et la page n'a plus que deux voix. Une famille = UN fichier, sauf l'italique du serif, qui est toujours un second dessin. Sous-ensemble LATIN seul — la plage exacte que servait Google. Le site est en français : le latin étendu, le grec, le cyrillique et le vietnamien ne servaient à personne. font-display: swap — le texte s'affiche tout de suite dans la police du système, et bascule à l'arrivée du fichier. Graisses relevées dans base.css et style.css, thème salle, et elles seules : Instrument Serif 400 — et rien d'autre : partout où le socle demandait du 600 ou du 700 sur un titre, style.css le ramène à 400, faute de quoi le navigateur fabriquerait un faux gras. Archivo 400 texte courant et méta · 500 numéros et navigation · 600 libellés capitales, bouton, libellé de champ · 700 mot d'accès Poppins 300, et style.css l'excepte nommément de la règle qui ramène les titres à 400. ============================================================================ */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* L'italique est un SECOND DESSIN, pas une inclinaison de la romaine : sans lui, le navigateur pencherait les lettres droites et le résultat se voit. Il n'est PAS préchargé — rien ne l'emploie encore dans la page ; il est là pour que le jour où un mot doit être mis en italique, la fonte existe. */ @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* LA TROISIÈME FONTE, ET ELLE NE SERT QU'À UNE PHRASE : le slogan de l'ouverture de l'accueil. Ce n'est pas un troisième alphabet de page, c'est la LETTRE DE LA MARQUE — celle de la petite phrase imprimée sur la carte de visite de NS Visual, sous le monogramme. Le client a demandé que le site ouvre sur cette phrase-là ; l'écrire dans une autre lettre que sa carte, c'était la citer de travers. Poppins, et pas Montserrat : les deux sont des géométriques à « a » d'un seul étage, mais relevées sur la carte redressée et mises à la longueur de la phrase imprimée, ce sont les proportions de Poppins qui tombent dessus — même hauteur d'x (celle de Montserrat est nettement plus haute et rend la ligne plus grasse à longueur égale), mêmes bols circulaires, même rythme de mots d'un bout de la phrase à l'autre. UNE SEULE FACE, 300. La famille en compte neuf ; le site n'en sert qu'une, parce qu'une seule phrase l'emploie. Le fichier « latin » suffit à cette phrase-là (à et é sont dans U+0000-00FF) ; le latin étendu est déclaré derrière lui pour que le jour où le slogan change, aucune lettre ne manque — son unicode-range fait qu'il n'est JAMAIS téléchargé tant que rien ne l'appelle. Seul le « latin » est préchargé. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Invariants : rythme, échelle, espaces (identiques aux deux directions) - */ :root { --lh-display: 1.06; /* LA LETTRE DE LA MARQUE, commune aux deux directions — et c'est voulu : ce n'est pas un choix d'habillage, c'est la lettre de la carte de visite de Noé. Elle ne sert QU'AU SLOGAN de l'ouverture (le h1 de .ecran), seul sur l'image depuis le lot 11 : les titres restent au --font-display de la direction, le texte au --font-text. */ --font-slogan: 'Poppins', system-ui, sans-serif; /* LE VOILE des panneaux de l'accueil — les trois thèmes et le devis. C'est un APLAT posé sur la photo de fond, jamais un dégradé et jamais un filtre : il baisse l'image d'un ton, il ne la retouche pas (la colorimétrie de Noé est sa signature). --voile est son opacité au repos, --voile-survol celle qu'il prend quand le pointeur entre dans le panneau mais pas dans le cadre (style.css, « le cadre qui s'efface »). Les valeurs ci-dessous sont celles d'avant le lot 12 ; la direction Salle les remplace plus bas. */ --voile-teinte: #0A0A0B; --voile: 0.5; --voile-survol: 0.15; --step-1: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); /* h4 */ --step-2: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); /* h3 */ --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem); /* h2 de section */ --step-5: clamp(3rem, 2rem + 5vw, 6rem); /* display géant */ --container: 1180px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; --section-y: clamp(var(--space-5), 7vw, var(--space-7)); --dur-fast: 0.2s; --color-success: #1E7F4F; --color-error: #B42318; } /* ============================================================================ A — « PLANCHE CONTACT » (design-directions.md §4) Papier neutre, grille dense de vignettes numérotées, filets 1 px, aucune ombre, aucun arrondi. Le signal #B8442A est le feutre de sélection : trois emplois par page au maximum. ============================================================================ */ html[data-theme="planche"] { /* Couleurs — §4, recopiées telles quelles */ --color-bg: #F2F2F1; --color-surface: #FFFFFF; /* La surface des cartes de tarifs.html (lot 16) : sur le papier, il n'y a rien de plus clair que le blanc — c'est la surface elle-même. */ --color-surface-carte: #FFFFFF; /* Le mode papier de tarifs.html (lot 17) : sur le papier, les cartes sont déjà du papier — elles gardent la surface et l'encre de la direction. */ --papier-fond: #FFFFFF; --papier-encre: #141414; --papier-muet: #6E6B66; --papier-filet: rgba(20, 20, 20, 0.15); --papier-champ: #FFFFFF; --color-ink: #141414; --color-muted: #6E6B66; --color-line: rgba(20, 20, 20, 0.16); --color-accent: #141414; --color-accent-ink: #F2F2F1; --color-dark: #141414; --color-dark-ink: #F2F2F1; --color-signal: #B8442A; /* Typographie — §4 */ --font-display: 'Schibsted Grotesk', system-ui, sans-serif; --font-text: 'Newsreader', Georgia, serif; --font-label: 'Schibsted Grotesk', system-ui, sans-serif; /* rôle : libellés */ --tracking-display: -0.015em; --tracking-label: 0.1em; --step-4: clamp(2.75rem, 2rem + 4.2vw, 5.5rem); /* le nom est l'accroche */ --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem); --lh-text: 1.62; /* Mise en page — §4 */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 0; --radius-sm: 0; --radius-pill: 0; --shadow: none; --nav-height: 62px; /* Mouvement — §4 : rien sur la grille, une seule transition (la visionneuse) */ --dur: 0.35s; --ease: cubic-bezier(.2, .7, .2, 1); --reveal-y: 0px; --reveal-dur: var(--dur); --reveal-pas: 0s; /* la grille du papier n'apparaît pas : rien à décaler */ /* Rôles propres à la galerie */ --planche-max: 1440px; /* la planche est plus large que le texte */ --planche-pad: var(--gutter); /* elle reste dans la marge de papier */ --planche-gap-x: clamp(0.5rem, 1.6vw, 1.1rem); --planche-gap-y: clamp(1.5rem, 3vw, 2.5rem); --cadre-filet: 1px; /* le filet autour de chaque tirage */ } /* ============================================================================ B — « SALLE SOMBRE » (design-directions.md §3) Noir, aucun cadre et aucun fond autour de l'image, titres en serif, libellés et numéros en Archivo capitales. Fondu 0.4 s à l'entrée, rien d'autre. Aucune lueur, aucun verre dépoli, aucun dégradé, aucune ombre colorée. Seule la bande d'ambiance de l'accueil reste bord à bord : sur du noir elle ne se distingue plus par sa couleur, c'est sa largeur qui la signale. ============================================================================ */ html[data-theme="salle"] { /* Couleurs — §3, recopiées telles quelles, à une exception mesurée près (le gris secondaire, voir ci-dessous). */ --color-bg: #0A0A0B; --color-surface: #141416; /* LA SURFACE DES CARTES DE TARIFS.HTML (lot 16) : un cran au-dessus de --color-surface, dans la même famille de gris, pour que les cartes et la carte du formulaire se détachent du noir de la page sans devenir grises. Le site reste sombre ; ce sont les photos des cartes qui apportent la lumière. Valeur réglée sur captures parmi cinq, de #141416 à #252426 (README, « La page Tarifs »). */ --color-surface-carte: #1C1B1D; /* LE MODE PAPIER DE TARIFS.HTML (lot 17, classe tarifs--papier sur ) : les cartes et la carte du formulaire passent en blanc cassé sur la page sombre. Aucune couleur nouvelle pour la carte et son encre — ce sont l'encre et le fond de la direction, inversés. Deux valeurs seulement s'ajoutent, et toutes deux sont mesurées : --papier-muet le gris secondaire sur le papier : #5E5C59 tient 5,9:1 sur #F2F0EC et 6,7:1 sur le blanc des champs (4,5 exigé) ; --papier-champ le blanc des champs du formulaire. Les filets sont l'encre à 15 %. */ --papier-fond: var(--color-ink); --papier-encre: var(--color-bg); --papier-muet: #5E5C59; --papier-filet: rgba(10, 10, 11, 0.15); --papier-champ: #FFFFFF; --color-ink: #F2F0EC; /* §3 donne #8A8A8F. Mesuré sur le fond réel, il tient à 5,76:1 — au-dessus de la barre — mais les légendes sont en mono de 12 px, capitales et interlettrées : à ce corps-là 5,76 se devine plus qu'il ne se lit. Relevé à 7,61:1, soit moins de la moitié du contraste de l'encre (17,39:1) : le gris reste franchement secondaire, il devient seulement lisible. */ --color-muted: #A0A0A6; --color-line: rgba(242, 240, 236, 0.14); /* PLUS D'ACCENT DE COULEUR — lot 12, demande du client après la présentation du 10 septembre. Le teal sourd #3A6F66 du §3 est retiré du site montré : il tenait trois rôles (le fond d'un bouton plein, l'anneau de focus, le survol d'un lien) et, dans une page où chaque panneau est une photo, il faisait une quatrième couleur qui n'était à personne. Les deux rôles sont repris par l'encre et le fond de la palette : un bouton devient un pavé blanc à texte noir, un anneau de focus devient blanc — plus visible sur du noir que le teal ne l'était — et un survol monte du gris à l'encre. Aucune valeur nouvelle : ce sont --color-ink et --color-bg. La direction A garde SON signal (#B8442A) : elle n'est pas montrée, et on ne mélange pas les deux directions. */ --color-accent: #F2F0EC; --color-accent-ink: #0A0A0B; --color-dark: #000000; --color-dark-ink: #F2F0EC; --color-signal: #F2F0EC; /* Typographie — §3, révisée au lot 8 : le titre passe au SERIF. Le §3 donnait Archivo pour tout, et JetBrains Mono pour la signature des libellés. L'accueil s'ouvre maintenant sur un slogan posé plein cadre : un grotesque de labeur y disait « interface », là où il faut « auteur ». Instrument Serif ne sert QUE les titres ; Archivo garde le texte et reprend les libellés, que le mono étirait. */ --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-text: 'Archivo', system-ui, sans-serif; /* Le rôle est resté « mono » dans les feuilles ; la fonte, elle, ne l'est plus. C'est le même alphabet que le texte, en capitales espacées : ces deux variables ne se distinguent plus que par ce qu'elles nomment. */ --font-mono: 'Archivo', system-ui, sans-serif; --font-label: 'Archivo', system-ui, sans-serif; /* Un serif de titre ne se resserre pas comme un grotesque : à -0.02em ses empattements se touchaient dans les grands corps. */ --tracking-display: -0.01em; --tracking-label: 0.12em; /* Même échelle de titre que sur le papier : le nom est l'accroche dans les deux directions, il n'y a aucune raison qu'il soit plus petit ici. */ --step-4: clamp(2.75rem, 2rem + 4.2vw, 5.5rem); --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem); --lh-text: 1.55; /* Mise en page — §3 */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 0; --radius-sm: 0; --radius-pill: 0; --shadow: none; --nav-height: 76px; /* Mouvement — §3. --dur est la durée des trois fondus de la direction (le mur, la barre, la visionneuse) et ne bouge pas. L'APPARITION D'UNE PIÈCE a la sienne : à 0.4 s et 10 px, le mouvement se devinait plus qu'il ne se voyait, et la page semblait seulement clignoter en défilant. 0.6 s et 16 px, c'est la même sobriété mais elle se lit ; --reveal-pas est l'écart d'une pièce à l'autre DANS UNE MÊME RANGÉE (galerie.js, poseDecalages). */ --dur: 0.4s; --ease: cubic-bezier(.2, .7, .2, 1); --reveal-y: 16px; --reveal-dur: 0.6s; --reveal-pas: 0.06s; /* L'écart entre les trois nœuds d'un THÈME de l'accueil — titre, ligne, cadre. Plus large que celui des pièces d'une rangée (60 ms) : là il s'agissait de désolidariser quatre images de même taille, ici de faire lire trois blocs de poids très différents, dans l'ordre. */ --theme-pas: 0.08s; /* Rôles propres à la galerie. Le mur de la salle est bâti comme celui de la planche — même largeur utile, même marge de page — avec DEUX écarts assumés, décidés parce que ses fonds bleus clairs se perdent sur du noir : l'image doit être plus grande (trois colonnes au lieu de quatre, voir style.css) et le mur plus serré (espacements réduits d'un tiers). */ --planche-max: 1440px; --planche-pad: var(--gutter); --planche-gap-x: clamp(0.35rem, 1.05vw, 0.75rem); --planche-gap-y: clamp(1rem, 2vw, 1.65rem); --cadre-filet: 0px; /* La hauteur de rangée du mur. Au-dessus de 768 px, le mur n'est plus une grille de colonnes mais une suite de RANGÉES JUSTIFIÉES : chaque rangée a une hauteur commune, et la largeur d'une pièce découle de son format (2:3, 3:2, 9:16, 16:9). --mur-h est la hauteur visée ; le nombre de pièces par rangée s'en déduit, et la rangée s'étire ensuite jusqu'aux deux marges. C'est ce qui supprime les trous sous les pièces horizontales. Valeur de départ, pas hauteur imposée : la rangée réelle s'en écarte de ce qu'il faut pour tomber juste. */ --mur-h: 300px; /* LE VOILE MONTE DE 0.5 À 0.72 — lot 12, demande du client. D'un panneau à l'autre les trois photos de fond n'ont pas la même dominante : le sport est presque noir, la mode est une image claire (des stores et une main en pleine lumière), le portrait est un fond de studio franchement bleu. À 0.5, la page changeait donc de couleur à chaque écran — c'est le reproche qui a été fait, « les couleurs sont trop mélangées ». Relevé sur la bande de fond qui dépasse du cadre, à 1440, en luminance sur 255 et en écart des canaux (la couleur) : sport mode portrait voile 0.5 L27 c1 L75 c3 L50 c43 voile 0.65 L23 c1 L55 c2 L38 c30 voile 0.72 L19 c1 L46 c1 L32 c24 ← retenu voile 0.8 L17 c1 L36 c1 L26 c18 0.65 laissait la mode deux fois plus claire que le sport et le portrait encore bleu ; 0.8 éteignait le sport, qui n'était plus qu'un aplat. À 0.72, les trois tombent dans le même ton sombre et on devine encore la photo — le sujet, le cadrage, les masses — mais plus sa couleur. C'est justement ce que rend le survol, qui redescend le voile à 0.15 : la couleur est ce qu'on va CHERCHER, elle n'est plus ce qu'on subit. La teinte, elle, est le fond de page lui-même : un voile d'une autre couleur serait un filtre, et la colorimétrie de Noé est sa signature. */ --voile-teinte: var(--color-bg); --voile: 0.72; } @media (min-width: 1200px) { html[data-theme="salle"] { --mur-h: 360px; } } /* 420 px seulement à partir de 1400. Entre 1200 et 1399, cette hauteur-là ne laissait plus tenir que deux pièces par rangée : la rangée s'étirait alors bien au-delà de la hauteur visée, et le mur perdait son grain. À 360, il en tient trois d'un bout à l'autre du palier. */ @media (min-width: 1400px) { html[data-theme="salle"] { --mur-h: 420px; } }