/* ============================================================================ DEVISALY — COUCHE 1 : LES JETONS ---------------------------------------------------------------------------- Source unique des couleurs, des échelles typographiques, des espacements, des rayons et des durées. Aucune autre feuille n'écrit une couleur en dur : si une page a besoin d'une teinte absente d'ici, c'est le jeton qui manque. ⚠️ REFONTE VISUELLE (étape 7). La palette n'est plus une mesure de l'écran : c'est celle des flyers, et c'est elle qui commande. Papier #fbfaf6, encre #0a0b10, bronze #9a6a24, bronze clair #c9a97a, terracotta #a8432a. Aucun gris bleuté, aucun dégradé bleu-vert : les anciens jetons (--azur, --jade, --bleu) sont ramenés au bronze ou au terracotta, et les noms hérités (--fond, --encre, --ambre, --r-m…) restent des ALIAS des nouveaux. Une feuille qui n'a pas encore été reprise ne peut donc pas dériver du papier. ⚠️ L'APPARIEMENT TYPOGRAPHIQUE EST CELUI DU TRACT : P052 (Palatino, celui des titres du flyer) pour les titres, Inter pour le texte. Le tract compose ses accroches en Palatino Bold et sa réponse en Palatino Italique : le site fait pareil, à l'écran. ========================================================================== */ /* Inter est une police VARIABLE (axe wght 100-900) : une seule déclaration couvre toutes les graisses, un seul fichier de 47 Ko au lieu de quatre. */ @font-face {font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/inter-400-normal-latin.woff2') format('woff2');} /* ⚠️ RATTRAPAGE MÉTRIQUE D'INTER (refonte étape 3). Le texte se composait d'abord dans la police système, puis se réajustait à l'arrivée d'Inter : sur une page de 96 lignes de tableau, ce basculement valait 0,049 de CLS. */ @font-face {font-family: 'Inter-fallback'; font-style: normal; font-weight: 100 900; src: local('Arimo'), local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 107%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%;} /* --- LA SERIF DES TITRES : P052, sous-ensemble latin (19 Ko par graisse) ---- Trois graisses seulement : le tract n'en utilise pas d'autres. Le 600 est préchargé par `_design.html` (c'est lui qui porte les h1), l'italique aussi (l'accroche du héros) : sans préchargement, la bascule vaut du CLS sur le plus gros bloc de la page. */ @font-face {font-family: 'P052'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/serif/p052-400-normal-latin.woff2') format('woff2');} @font-face {font-family: 'P052'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/serif/p052-400-italic-latin.woff2') format('woff2');} @font-face {font-family: 'P052'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/serif/p052-600-normal-latin.woff2') format('woff2');} :root { /* --- la palette des flyers ------------------------------------------ */ --papier: #fbfaf6; /* le fond de page, le papier du tract */ --papier-2: #f3eee3; /* la nappe : un papier plus soutenu */ --blanc: #ffffff; /* les surfaces posées sur le papier */ --encre: #0a0b10; /* 18,8:1 sur le papier */ --encre-2: #3a342c; /* le texte secondaire, 11,8:1 */ --encre-3: #6b6154; /* les légendes, 5,8:1 */ --bronze: #9a6a24; /* le bronze de la marque, 4,5:1 */ --bronze-clair: #c9a97a; /* les puces, les filets décorés */ --bronze-fonce: #8a5c1a; /* le bronze du TEXTE fin : 5,0:1 sur la nappe */ --terracotta: #a8432a; /* l'accent unique : liens actifs, appels */ --terracotta-fonce: #7e2f1c; --succes: #26624a; /* l'état d'un formulaire accepté */ --filet: rgb(10 11 16 / .14); /* le trait de 1 px, jamais un gris bleu */ --filet-fort: rgb(10 11 16 / .34); --filet-2: rgb(10 11 16 / .07); /* --- les alias hérités : même teinte, autre nom --------------------- */ --fond: var(--papier); --fond-2: var(--papier-2); --surface: var(--blanc); --encre-titre: var(--encre); --encre-28: rgb(10 11 16 / .40); --encre-45: rgb(10 11 16 / .58); --encre-70: rgb(10 11 16 / .72); --ambre: var(--bronze); --ambre-clair: var(--bronze-clair); --ambre-cta: var(--terracotta); --ambre-cta-fonce: var(--terracotta-fonce); --terre: var(--terracotta); --terre-clair: #c2644a; --terre-fonce: var(--terracotta-fonce); --sourd: var(--encre-3); /* Les trois teintes froides de l'ancien thème n'ont plus de bleu : elles pointent le bronze et le terracotta, pour qu'aucune page ne sorte en gris bleuté si un bloc les appelle encore. */ --azur: var(--bronze); --jade: var(--bronze); --bleu: var(--terracotta); /* --- la typographie ------------------------------------------------- */ --serif: 'P052', 'Palatino Linotype', 'URW Palladio L', Palatino, 'Iowan Old Style', Georgia, serif; --police: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Roboto Mono', monospace; --t-heros: clamp(2.5rem, 1.55rem + 4.3vw, 4.75rem); /* 40 → 76 px */ --t-section: clamp(1.75rem, 1.32rem + 1.9vw, 2.875rem); /* 28 → 46 px */ /* ⚠️ LE TITRE D'UNE PAGE INTÉRIEURE N'EST PAS CELUI DE L'ACCUEIL (étape 10). Les hubs, les pages locales et les articles prenaient --t-heros : un h1 de 76 px sur « Prix plombier 2026 », exactement la taille du héros d'accueil. Deux effets, tous les deux mesurés : la page n'avait plus de hiérarchie (l'accueil ne dominait plus rien), et le prix tombait sous le premier écran de 1 200 px. --t-page garde le serré éditorial en laissant l'accueil seul au sommet : 32 → 52 px. */ --t-page: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); /* 32 → 52 px */ --t-sous: clamp(1.125rem, 1.06rem + .42vw, 1.375rem); /* 18 → 22 px */ --t-lecture: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); /* 22 → 28 px, le h2 DANS un article */ --t-corps: 1.0625rem; /* 17 px */ --t-petit: .9375rem; /* 15 px */ --t-micro: .875rem; /* 14 px */ --t-label: .75rem; /* 12 px, le surtitre capitales */ --lh-heros: 1.02; --lh-titre: 1.08; --lh-corps: 1.62; --lh-lecture: 1.7; /* un texte long se lit plus lâche qu'une page */ --tr-titre: -.012em; /* une serif n'a pas besoin d'être serrée comme une sans */ /* ⚠️ UNSLOP (9 novembre) : le tracking large était le tic du template. Le surtitre respire de 2 centièmes, pas de 16 ; l'espacement large reste réservé aux seuls titres d'affichage (--tr-titre). */ --tr-label: .02em; --tr-corps: -.002em; /* --- l'espacement : une échelle, sept pas --------------------------- */ --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4rem; --e-7: 6rem; --rythme: clamp(4rem, 3.1rem + 3.6vw, 6.5rem); /* la respiration entre sections */ --largeur: 1120px; /* le conteneur de lecture */ --conteneur: var(--largeur); --marge: clamp(20px, 5vw, 56px); /* une seule marge latérale */ --rail: var(--marge); --gouttiere: var(--marge); /* --- les rayons : le papier n'a pas de bulles ----------------------- */ --r: 3px; --r-s: 3px; --r-m: 3px; --r-l: 3px; --r-objet: 3px; --r-carte: 3px; --r-pilule: 8px; /* étiquettes et champs : un rectangle adouci */ /* --- LA PROFONDEUR (refonte visuelle, étape 8) ----------------------- ⚠️ Une ombre grise sur du papier salit : toutes les ombres sont teintées du brun de l'encre (48 35 16), jamais d'un gris bleuté. Quatre plans, et c'est tout : le plan posé (1), le plan levé (2), l'objet qui flotte (3), la scène du héros (4). Une page qui a besoin d'un cinquième plan a un problème de composition, pas de jeton. ⚠️ Chaque ombre est MULTIPLE : un contact net de 1 px (ce qui touche le papier), une diffusion moyenne (ce qui se détache), une diffusion large (ce qui prend la lumière). Une seule couche donne toujours une vignette grise ; trois couches donnent un objet. */ --teinte-ombre: 48 35 16; --ombre-1: 0 1px 1px rgb(var(--teinte-ombre) / .05), 0 2px 6px -2px rgb(var(--teinte-ombre) / .10); --ombre-2: 0 2px 4px -1px rgb(var(--teinte-ombre) / .07), 0 12px 24px -12px rgb(var(--teinte-ombre) / .18), 0 28px 48px -36px rgb(var(--teinte-ombre) / .22); --ombre-3: 0 6px 14px -8px rgb(var(--teinte-ombre) / .14), 0 28px 50px -22px rgb(var(--teinte-ombre) / .22), 0 60px 90px -60px rgb(var(--teinte-ombre) / .28); --ombre-4: 0 10px 20px -12px rgb(var(--teinte-ombre) / .18), 0 48px 80px -36px rgb(var(--teinte-ombre) / .26), 0 110px 140px -90px rgb(var(--teinte-ombre) / .30); --ombre-s: var(--ombre-1); --ombre-m: var(--ombre-2); --ombre-l: var(--ombre-3); /* le liseré de lumière : la tranche éclairée du papier, en haut de l'objet */ --lisere: inset 0 1px 0 0 rgb(255 255 255 / .85); --relief: var(--lisere); /* les deux lueurs : blanche sur les surfaces, bronze derrière les objets */ --lueur: radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / .92), rgb(255 255 255 / 0) 64%); --lueur-bronze: radial-gradient(58% 52% at 50% 46%, rgb(201 169 122 / .30), rgb(201 169 122 / 0) 72%); /* la feuille de derrière, dans la scène du héros */ --plan-bronze: linear-gradient(155deg, rgb(201 169 122 / .20), rgb(201 169 122 / .05)); --halo-bronze: 0 0 0 1px rgb(201 169 122 / .40), 0 0 46px -14px rgb(154 106 36 / .38); /* la perspective des cartes : une seule valeur pour tout le site */ --perspective: 1400px; /* le grain du papier, 3 % : une texture, pas une trame */ /* ⚠️ Le grain est un bruit dont seule l'ALPHA varie : des taches sombres à 2 % sur le papier, pas un voile gris. C'est ce qui évite le mix-blend-mode, donc une couche de composition plein écran à chaque défilement sur mobile. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); /* --- le mouvement --------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --t-ui: 200ms; --t-appui: 120ms; --t-surface: 320ms; --d-court: .2s; --d-long: .35s; /* --- anciennes échelles, conservées pour les blocs non repris ------- */ --f-display: var(--t-heros); --f-titre: var(--t-section); --f-sous-titre: var(--t-sous); --f-corps: var(--t-corps); --f-petit: var(--t-petit); } /* Le contraste renforcé : les légendes passent de 5,8:1 à 11,8:1. */ @media (prefers-contrast: more) { :root {--encre-3: var(--encre-2); --filet: rgb(10 11 16 / .34); --filet-2: rgb(10 11 16 / .18);} }