/* ============================================================================ TOKENS — PORTECLOSE, Civry-la-Forêt (78). Rempli le 17/09/2026, phase 04 validée. Source : branding.md et branding/planche-de-marque.html. Les couleurs sont MESURÉES au pixel sur la bannière du 15/09, pas approchées à l’œil. ⚠️ RÉÉCRIT LE 17/08/2026. Ce qui change par rapport à la v1, et pourquoi : La v1 plafonnait le titre à 58 px face à un corps de 19 px — un rapport de 3:1. Un audit au rendu (démo Martin & Fils, luismorais.fr) contre des références de métier a montré que c'est LA cause n°1 du « ça fait template » : sans écart d'échelle, aucune hiérarchie n'est possible, tout se vaut, et la page lit comme un document habillé. Les références tiennent 10:1 à 15:1. ⛔ CE QUI N'A PAS CHANGÉ, ET NE CHANGERA PAS : la densité. Un site d'artisan est une page de conversion pour quelqu'un qui a un problème maintenant. Elle DOIT être dense. Vider la page est une erreur de preset — celui d'un portfolio de studio, pas celui d'un dépannage. (Arbitrage Saadou, 17/08 : « le fait que notre landing page soit chargée, c'est pas un problème ».) Quatre étages, et un seul se négocie : ⓪ MOLETTES — les trois réglages posés AVANT d'écrire une ligne. Ils décident des valeurs des étages ① et ②. ① IDENTITÉ — ce qui fait que le site est CELUI de ce client. Se choisit en P3, se FIGE, se rouvre par une décision écrite dans etat.md. ② RÉGLAGES — les défauts de mise en page. Ajustables à l'œil. ③ PLANCHERS — contrôlés par le gate machine. JAMAIS soumis à validation. Références : 09-bible-web/01-fondamentaux-ui.md · 08-echelle-et-composition.md 09-bible-web/motion-lab/demos/ (les patterns, mesurés) ============================================================================ */ /* ══ ⓪ LES TROIS MOLETTES ═══════════════════════════════════════════════════ On les écrit ICI, en commentaire, AVANT de remplir quoi que ce soit. Elles ne sont pas décoratives : chaque valeur ci-dessous découle d'elles, et le gate vérifie la cohérence (C50). VARIANCE : 1 = symétrie parfaite → 10 = composition libre MOTION : 1 = statique → 10 = cinématique DENSITÉ : 1 = galerie d'art → 10 = tableau de bord ── LA TABLE PAR MÉTIER (pas par « type de page ») ─────────────────────────── | Métier / situation | VARIANCE | MOTION | DENSITÉ | |---------------------------------------|----------|--------|---------| | Dépannage d'urgence (plombier, serrurier) | 5 | 4 | 7-8 | | Artisan de finition (carreleur, peintre) | 7 | 6 | 5 | | Nettoyage / extérieur (façade, toiture) | 6 | 6 | 6 | | Bâtiment gros œuvre, archives, B2B | 5 | 4 | 6 | | Démo vitrine Krescia | 8 | 7 | 5 | ⚠️ La DENSITÉ d'un artisan ne descend jamais sous 5. Le visiteur cherche un prix, une zone, un délai et un numéro : les lui cacher pour faire joli est une faute professionnelle, pas un parti pris. ➡️ PORTECLOSE : VARIANCE: 6 MOTION: 7 DENSITÉ: 6 Ligne « nettoyage / extérieur » de la table, motion poussé à 7 : le produit est un objet qui coulisse, s’ouvre et se ferme — le mouvement raconte le métier. */ :root { /* ══ ① IDENTITÉ (P3 — chaque choix cite sa référence de bibliothèque) ═════ */ /* ── Couleurs — méthode : 09-bible-web/01 §4. Répartition 60-30-10. ⛔ Fond crème / ivoire / beige INTERDIT (marqueur « défaut IA » M01). Contrôlé par le gate C24 : le build ÉCHOUE, il n'avertit plus. */ --marque: #0174CA; /* le bleu de « CLOSE » et du cadre du pictogramme. Fond des boutons : blanc dessus, 4,8:1, conforme. ⛔ jamais en texte sur le papier (4,4:1). */ --encre: #2A3B4A; /* le navy de « PORTE » et des lames. 10,5:1 sur le papier. */ --encre-2: #465059; /* le gris, mélange du navy et du papier. 7,5:1. */ --fond: #F3F5F7; /* le papier : un blanc à peine teinté de bleu. */ --surface: #FFFFFF; /* le blanc pur, réservé aux blocs posés sur le papier. */ --sombre: #2A3B4A; /* LA bande sombre, c’est son navy. Jamais du noir pur. */ --accent: #00467E; /* le bas du dégradé du logo. 8,8:1 sur le papier : c’est LUI qu’on écrit. Redéfini en bleu clair sur les fonds sombres, en fin de fichier. */ --ligne: #D7DEE4; /* les filets sur le papier. */ --ligne-nuit: #3D5062; /* les filets sur le navy. */ --danger: #B23B32; /* uniquement les erreurs de formulaire. */ /* ── Polices — MAXIMUM 2 familles. Une 3e seulement si elle a un rôle fonctionnel distinct (les chiffres). Self-hostées en woff2 : jamais de CDN. ⛔ Inter / Plus Jakarta Sans / Poppins en principale = marqueur M02. ⭐ NOUVEAU : une SERIF pour --f-titre est le défaut recommandé sur un artisan installé (« de père en fils depuis 1981 »). Une serif variable (Fraunces, Instrument Serif) porte l'ancienneté qu'une grotesque ne sait pas dire. On ne prend une grotesque en titre que si le métier est technique ou urgent. */ --f-titre: 'Bricolage Grotesque', 'Segoe UI', sans-serif; --f-texte: 'Work Sans', 'Segoe UI', sans-serif; --f-chiffre: var(--f-titre); /* → une vraie 3e famille si justifié */ /* ══ ② RÉGLAGES ══════════════════════════════════════════════════════════ */ /* ── Largeurs. --w-max reste la mesure du TEXTE, pas celle de la page. Une page dont TOUTES les sections font --w-max est le marqueur de gabarit : le gate C51 exige au moins une section en pleine largeur. */ --w-max: 1240px; --w-texte: 65ch; /* longueur de ligne — jamais au-delà */ --marge-bord: clamp(20px, 4vw, 56px); /* la gouttière, en une seule variable */ /* ── L'ÉCHELLE D'ESPACEMENT — multiples de 4. On n'écrit JAMAIS une valeur d'espacement hors de cette liste. Le gate le vérifie (B18). */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 40px; --e-8: 48px; --e-9: 64px; --e-10: 80px; --e-11: 96px; --e-12: 128px; /* Rythme des sections */ --pad-section: clamp(64px, 9vw, 140px); --gap-grille: 24px; --gap-grille-m: 16px; /* ══ L'ÉCHELLE TYPOGRAPHIQUE — LE CŒUR DE LA v2 ═════════════════════════ RÈGLE DURE (gate C50) : --fs-titre max ÷ --fs-label ≥ 10 Ici : 120 ÷ 11 = 10,9 ✅ (v1 : 58 ÷ 19 = 3,1 ❌) Le titre de page (le hero) et les titres de section sont DEUX choses. La v1 les confondait, d'où l'aplatissement. */ --fs-titre: clamp(52px, 11vw, 150px); /* LE titre de la page. 158 px à 1440, plafonné à 150. Le mot géant du hero est en `cqi` : il remplit toujours sa ligne. */ --fs-num: clamp(44px, 6.2vw, 104px); /* LES CHIFFRES, un repère d'échelle */ --fs-h2: clamp(30px, 3.6vw, 54px); /* les titres de section */ --fs-h3: clamp(22px, 2.1vw, 30px); --fs-lead: clamp(19px, 1.9vw, 25px); /* la phrase sous le titre */ --fs-body: 19px; /* PLANCHER — voir ③ */ --fs-small: 16px; --fs-label: 11px; /* LE PETIT BOUT DE L'ÉCHELLE. Sans lui, pas de contraste. */ /* Plus c'est grand, plus on serre. Ces valeurs sont impossibles sous 60 px — c'est précisément ce qui distingue un titre COMPOSÉ d'un titre AGRANDI. */ --lh-titre: 0.90; --lh-h2: 0.95; --lh-body: 1.55; --ls-titre: -0.035em; --ls-h2: -0.03em; --ls-label: 0.18em; /* uppercase = TOUJOURS espacé */ /* ── LA CASSE DE GRILLE — les décalages. Gate C51. Une grille parfaitement régulière EST le marqueur de gabarit. On décale les rangées d'une liste par ces valeurs, jamais au hasard. */ --decal-1: 0%; --decal-2: 4%; --decal-3: 8%; --decal-4: 2%; /* ── Rayons. ⚠️ 0 ou 2px par défaut : le rayon 10px + bordure 1px sur toutes les cartes est le costume générique. Un rayon ne se met que s'il vient de la marque. */ --r-bloc: 2px; --r-cta: 2px; --r-img: 2px; /* ── Ombres — 4 niveaux, TEINTÉES (jamais du noir pur). ⚠️ Une ombre ne s'anime JAMAIS directement : on peint l'ombre une fois sur un pseudo-élément et on anime son opacity (travail compositeur, zéro repeint). Voir 02-animations.md §15. */ --sh-1: 0 1px 2px rgb(0 0 0 / .06); --sh-2: 0 4px 10px rgb(0 0 0 / .08); --sh-3: 0 12px 28px rgb(0 0 0 / .12); --sh-4: 0 24px 60px rgb(0 0 0 / .18); /* ── Courbes — 09-bible-web/02 §2. `--ease-sortie` par défaut pour ce qui ENTRE. */ --ease-sortie: cubic-bezier(0, 0, .58, 1); --ease-duo: cubic-bezier(.42, 0, .58, 1); --ease-retour: cubic-bezier(.34, 1.56, .64, 1); /* le « pop » d'un badge */ --ease-expo: cubic-bezier(.22, 1, .36, 1); /* le plus premium au scroll */ /* ── Durées */ --d-micro: 160ms; /* hover, focus, changement de couleur */ --d-etat: 240ms; /* accordéon, onglet */ --d-entree: 600ms; /* apparition au scroll */ --d-titre: 950ms; /* la montée d'une ligne de titre — plus lent, exprès */ /* ══ ③ PLANCHERS (gate machine — jamais exposés en validation) ═══════════ */ --min-corps: 19px; /* 18 px absolu minimum */ --min-cible: 48px; /* toute zone cliquable */ /* contraste texte ≥ 7:1 · UI/CTA ≥ 4,5:1 — calculés par qa_gate.py C21 */ /* rapport d'échelle --fs-titre ÷ --fs-label ≥ 10 — calculé par C52 */ } /* ============================================================================ LE BUDGET DE MOTION — ce qu'on a le droit de charger, et quand. Mesuré le 17/08 sur les paquets installés dans 09-bible-web/motion-lab. RÈGLE : CSS d'abord. GSAP seulement quand il paie son poids. | Besoin | Outil | Coût | |------------------------------------------|------------------|--------| | Révélation d'un titre ligne par ligne | CSS + lignes | 0 ko | | | écrites à la main| | | Apparition d'éléments au scroll | animation-timeline: view() | 0 ko | | Survol, voile, ombre | opacity sur ::after | 0 ko | | Vignette qui suit le curseur | 16 lignes de JS | ~0 ko | | Épinglage + scrub (avant/après, process) | gsap + ScrollTrigger | 114 ko | | Découpe auto d'un texte long | SplitText | +7 ko | ⚠️ On ne charge les 114 ko QUE si la page contient au moins un effet que le CSS ne sait pas faire. Une page qui charge GSAP pour des fondus est un FAIL au gate (C53). ⚠️ GSAP est gratuit depuis avril 2025, usage commercial inclus, tous plugins compris (SplitText, MorphSVG, DrawSVG, ScrollSmoother, Flip, Observer). ============================================================================ */ /* ============================================================================ JOURNAL D'IDENTITÉ — une ligne par changement de l'étage ①, rien d'autre. AAAA-MM-JJ ce qui change · pourquoi · la référence qui le justifie ---------------------------------------------------------------------------- 2026-08-17 tokens v2 · échelle portée de 3:1 à 15:1, rayons ramenés à 2px, serif recommandée en titre, molettes introduites · audit au rendu du 17/08 + patterns mesurés dans 09-bible-web/motion-lab/demos/ 2026-09-17 identité Porteclose · navy #2A3B4A, papier #F3F5F7 et bleu #0174CA relevés au pixel sur sa bannière ; Bricolage Grotesque Bold en titre, Work Sans en texte, self-hostées ; échelle plafonnée à 120 px (H1 à 96 px sur 1440) · branding.md, validé par Saadou le 17/09 ============================================================================ */ /* ============================================================================ LES POLICES — self-hostées, jamais un CDN : une page qui attend Google Fonts attend un serveur qu'on ne maîtrise pas, et prévient Google de chaque visite. woff2 seulement, `swap` pour que le texte s'affiche avant la police. Licences OFL dans branding/fonts/. ============================================================================ */ @font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/BricolageGrotesque-Bold.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/BricolageGrotesque-Regular.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/WorkSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/WorkSans-Bold.woff2') format('woff2'); } /* ── L'ACCENT SUR FOND SOMBRE ───────────────────────────────────────────────── Le bleu profond #00467E se lit sur le papier (8,8:1) et disparaît sur le navy (1,2:1). Sur les fonds sombres l'accent devient le bleu clair : 6,1:1 sur le navy, mesuré. Une seule couleur, trois intensités — la règle de la planche. */ .section--sombre, .bande-faits, .porte--urgence { --accent: #7CC4F5; } /* ── LE CADRAGE DE LA PHOTO DU PREMIER ÉCRAN ────────────────────────────────── Ses photos vont de 1,1:1 à 1,8:1. Sans cadrage imposé, la colonne de droite change de hauteur à chaque photo qu'on remplace. 3:2 est le ratio médian des siennes : c'est celui qui coupe le moins. */ /* ── CE QUE LE SOCLE N'APPLIQUAIT PAS ───────────────────────────────────────── `--fs-lead` était déclaré dans les tokens et lu NULLE PART : base.css codait `.lead` en dur à 21 px, soit deux pixels de plus que le corps. Défaut trouvé à l'audit du 17/09. */ .lead { font-size: var(--fs-lead); line-height: 1.4; } /* Le quatrième colorway de Porteclose : son bleu à 8 %, calculé, pas en color-mix de deux variables (le gate ne sait pas lire un color-mix). */ :root { --fond-2: #E7EFF6; }