/* ========================================================================== COGESTIM — RÉFÉRENCE DESIGN CONSOLIDÉE · SOURCE UNIQUE DE VÉRITÉ (figée) -------------------------------------------------------------------------- Extrait des 3 pages (Home / Acheter / Courtage) puis figé après arbitrage. Destiné à Claude Code (WordPress · templates PHP · blocs ACF). RÈGLE : tout composant référence ces tokens, JAMAIS une valeur en dur. Les 11 ambiguïtés relevées ont été TRANCHÉES (voir COGESTIM-DESIGN-REFERENCE.md). Aucune valeur ambiguë résiduelle. Deux couches de nommage : 1. Tokens CANONIQUES — --cog-* (primitives) · --color-* (rôles) · --radius-*, --shadow-*, --space-*, etc. À consommer en priorité dans le code neuf. 2. Alias de COMPATIBILITÉ (--paper, --red, --grad, --sec-y, …) — conservés car l'existant les référence ; ils pointent vers les canoniques. Aucune valeur dupliquée : changer une primitive suffit. ========================================================================== */ :root{ /* ====================================================================== 1. COULEURS — PRIMITIVES DE MARQUE ====================================================================== */ --cog-paper: #FAFAF7; /* fond de page (blanc cassé chaud) */ --cog-paper-warm: #F0EBE3; /* fond de section alterné (.warm) */ --cog-paper-deep: #E8E1D2; /* fond placeholder / vignette image */ --cog-ink: #1A1A1F; /* texte principal + fond footer */ --cog-ink-soft: #4A4A52; /* texte courant / paragraphes */ --cog-ink-mute: #6E6E76; /* ⭑ A8 : assombri (ex-#8A8A92) — 3.2:1→4.6:1 sur paper = AA en petit corps */ --cog-rule: #DDD5C7; /* filet / bordure standard */ --cog-rule-soft: #E8E2D6; /* §2 TRANCHÉ : valeur canonique unique (#EBE5D9 supprimée) */ --cog-night: #5A5A59; /* section sombre de marque (Pantone Cool Gray 11) */ --cog-night-2: #4A4A49; /* shade interne section sombre */ --cog-red: #A80A2E; /* rouge Cogestim — accent primaire */ --cog-magenta: #C02286; /* magenta Cogestim — 2e pôle du dégradé */ --cog-on-dark: #F5F0E8; /* §4 TRANCHÉ : ton clair UNIQUE sur fond sombre (#F8F4EC supprimé) */ --cog-white: #FFFFFF; /* survols pleins / états actifs pastille */ /* --- ⭑ Passe 1 — primitives promues (audit A2/A5/A6) ----------------- */ --cog-fav: #E11D48; /* cœur favoris — rôle fonctionnel, hors palette de marque (A2) */ --cog-rose-soft: #FBEAEC; /* widget contact : fond d'accent doux (A6) */ --cog-rose-deep: #8A3A52; /* widget contact : texte sur rose-soft (A6) */ --cog-sand: #B7AC99; /* widget contact : filets / inactifs sur warm (A6) */ --cog-bg-scene-dark: #262534; /* placeholder image sur fond sombre (A5) */ --cog-avatar-mauve: #6B5B73; /* widget : teinte avatar-initiales #2, hors palette de marque (passe 8) */ /* ====================================================================== 2. COULEURS — RÔLES SÉMANTIQUES (à consommer dans les composants) ====================================================================== */ --color-bg: var(--cog-paper); --color-bg-alt: var(--cog-paper-warm); --color-bg-placeholder: var(--cog-paper-deep); --color-bg-dark: var(--cog-night); --color-bg-footer: var(--cog-ink); --color-text: var(--cog-ink); --color-text-body: var(--cog-ink-soft); --color-text-muted: var(--cog-ink-mute); --color-text-on-dark: var(--cog-on-dark); --color-primary: var(--cog-red); --color-primary-2: var(--cog-magenta); --color-border: var(--cog-rule); --color-border-soft: var(--cog-rule-soft); --color-border-strong: var(--cog-ink); /* --- États — §7 TRANCHÉ : palette complète, tons désaturés accordés au chaud --- Sert la validation (front estimation Alpine, formulaire fiche custom). */ --color-success: #3E9B6B; --color-success-soft: #E7F1EA; /* vert dispo — promu officiel */ --color-error: #9E4A3C; --color-error-soft: #F4E6E1; /* brique chaude désaturée (pas de rouge web cru) */ --color-warning: #B27A34; --color-warning-soft: #F3E9D8; /* ambre chaud désaturé */ --color-info: #5F6B71; --color-info-soft: #E9EDEE; /* ardoise sourde */ /* --- Statuts d'annonce (page Acheter) — §11 TRANCHÉ : trois statuts distincts --- « Réservé » = ambre (warning) · « Vendu/Loué » = gris désaturé · « À vendre » = neutre marque. Fini les trois gris sombres quasi identiques. */ --status-neuf: var(--grad-45); /* « Nouveauté » — surface dégradée */ --status-projet: var(--cog-red); /* « Projet » — texte + bordure rouge sur paper */ --status-reserve: var(--cog-ink); /* « RÉSERVÉ » — noir charte (= chiffre actif de nav/pagination) */ --status-vendu: #6E6E72; /* « Vendu/Loué » — gris désaturé */ --status-vente: var(--cog-ink); /* « À vendre » — neutre marque */ --status-scrim: rgba(20,18,22,.42); /* voile photo réservé/vendu */ /* --- Alphas utilitaires récurrents (rgb = primitive correspondante) ---- */ --ink-a06: rgba(26,26,31,.06); --ink-a55: rgba(26,26,31,.55); --on-dark-a50: rgba(245,240,232,.5); --on-dark-a70: rgba(240,235,227,.70); --red-glow: rgba(168,10,46,.55); --magenta-glow:rgba(192,34,134,.6); /* ⭑ Passe 8 (convergence formulaires) : alphas de --cog-red / blanc pur, manquants à l'échelle fermée §A7 (qui ne couvre que --cog-ink/--cog-on-dark). Copies statiques (comme --red-glow ci-dessus) — pas de color-mix() ici pour rester cohérent avec le reste du fichier. */ --primary-a04: rgba(168,10,46,.04); --primary-a30: rgba(168,10,46,.3); --white-a70: rgba(255,255,255,.7); /* --- ⭑ A7 : échelle FERMÉE d'alphas — tout nouveau voile s'arrondit au niveau le plus proche. Les alias historiques ci-dessus (--ink-a06, --ink-a55, --on-dark-a50/a70) restent en place (compat, à migrer). --- */ --cog-ink-a05: rgba(26,26,31,.05); --cog-ink-a10: rgba(26,26,31,.10); --cog-ink-a35: rgba(26,26,31,.35); --cog-ink-a55: rgba(26,26,31,.55); --cog-ink-a70: rgba(26,26,31,.72); --cog-on-dark-a10: rgba(240,235,227,.10); --cog-on-dark-a30: rgba(240,235,227,.30); --cog-on-dark-a50: rgba(240,235,227,.50); --cog-on-dark-a90: rgba(240,235,227,.90); /* --- Icônes — doctrine simplifiée (17/07), remplace les 3 rôles de couleur --- 1. L'icône adopte TOUJOURS la couleur de son texte adjacent (note grise — --icon-muted, erreur — --color-error, item noir — --icon-strong). Deux exceptions uniques, signature de marque : pin de localisation et check de validation — toujours --icon-accent, quelle que soit la couleur du texte. 2. Pastille de fond réservée aux éléments CLIQUABLES (.circle-cta, favori, boutons téléphone, toggles). Toute icône informative est nue, sans cercle ni fond. Jamais --red/--ink en dur. Les flèches de CTA ne sont pas des icônes : elles suivent le système .link (dégradé). */ --color-rating: #F2A900; /* étoiles note Google — arbitrage 21/07 (option étoiles texte muted écartée) */ --icon-strong: var(--cog-ink); --icon-muted: var(--cog-ink-mute); --icon-accent: var(--cog-red); --icon-on-dark: var(--cog-on-dark); /* icône claire sur pastille pleine --ink (ex. wz-status-pill .ok, wz-lock-badge) */ /* --- Icônes — passe bibliothèque 22/07 : source Lucide (SVG inline), graisse unique et échelle à 4 tokens, réglés par le conteneur (jamais en dur sur le ). */ --icon-stroke: 1.5; --icon-sm: 16px; /* informatif inline : loc, specs, chips, checklists, notes */ --icon-md: 18px; /* commandes : boutons, champs, actions de carte */ --icon-lg: 22px; /* tuiles de réassurance, « voir plus » galerie */ --icon-xl: 32px; /* marqueur de carte (pin) uniquement */ /* ====================================================================== 3. DÉGRADÉS — §1 & §6 TRANCHÉS Deux angles canoniques UNIQUEMENT. Le 118° du widget est ramené à 45°. --grad-45 est un token STATIQUE du :root (plus de dépendance au JS Tweaks). ====================================================================== */ --grad: linear-gradient(90deg, var(--cog-red) 0%, var(--cog-magenta) 100%); /* texte · traits · bandeaux */ --grad-45: linear-gradient(45deg, var(--cog-red) 0%, var(--cog-magenta) 100%); /* surfaces pleines : boutons, pastilles, badges */ /* ⭑ A4 : « paysage nuit » — défini UNE fois, consommé par Home + Courtage */ --cog-grad-scene: linear-gradient(180deg, #1C2128 0%, #2E3540 26%, #5B5A5A 46%, #806B56 55%, #6A4A3A 60%, #2A2018 70%, #15110D 100%); /* Hauteurs de hero — §2.8 : deux hauteurs selon la portée fonctionnelle du hero (outil/CTA de conquête vs identité de page seule), tranché session 31/08 (planche « Hero réduit — Hauteurs et règle »). */ --cog-hero-h-full: min(94vh,900px); /* hero plein — Courtage/Agence/Carrière */ --cog-hero-h-display: 100svh; /* hero display — Home seule (25/09, §2.8 amendé : 100svh plein viewport) */ --cog-hero-h-editorial: min(58vh,560px); /* hero éditorial — .hero--editorial, planche Direction 28/08 */ --hero-h-full: var(--cog-hero-h-full); --hero-h-display: var(--cog-hero-h-display); --hero-h-editorial: var(--cog-hero-h-editorial); /* ====================================================================== 4. TYPOGRAPHIE — §9 TRANCHÉ : système mono-famille (Source Sans 3). Classes .serif/.sans supprimées. Un serif display éventuel = ajout délibéré futur, pas un recâblage. Poids chargés : 300 / 400 / 500 / 600 (+ italique 300, 400). ====================================================================== */ --font-sans: 'Source Sans 3','Frutiger LT Pro','Helvetica Neue',Arial,sans-serif; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fs-h1: clamp(60px, 8.6vw, 134px); --lh-h1:.96; --ls-h1:-.02em; /* 300 */ --fs-h2: clamp(34px, 3.8vw, 58px); --lh-h2:1.08; --ls-h2:-.015em; /* 400 */ --fs-h3: clamp(24px, 2.5vw, 34px); --lh-h3:1.15; --ls-h3:-.005em; /* 500 */ --fs-h4: 22px; --lh-h4:1.2; --ls-h4:-.002em; /* 500 */ --fs-body:16px; --lh-body:1.7; --fs-body-lg:17.5px; --fs-base:16px; --lh-base:1.65; --fs-lab:12px; --ls-lab:.18em; --fs-micro:12px; --ls-micro:.16em; --fs-cap:14px; --ls-cta:.04em; /* lien-CTA / bouton — casse de phrase */ --ls-cta-caps:.08em; /* CTA « VOIR TOUT » — capitales */ /* ⭑ Passe 8 (convergence formulaires) : tailles verrouillées par la charte, hors des 8 crans de corps fermés (§B1) — nommées plutôt qu'arrondies. */ --cog-fs-cta: 14px; /* .link, .btn, .navlist a, .fcol-new a */ --cog-fs-cta-caps: 13px; /* .link.caps */ --cog-fs-field: 15px; /* saisie .field-in (underline & boxed) */ --cog-fs-sf-value: 15.5px; /* valeur .sf>select/.sf>input/.fr-trigger (barre de filtres) — audit field-range 31/07 */ --cog-fs-sf-value-mobile: 17px; /* même valeur, cran mobile modale de filtres */ --cog-fs-legal: 13.5px; /* mention légale / .consent label — amendement 04/08 */ --cog-fs-card-title: 18.5px; /* .card-title (listing) — amendement 04/08 */ /* --- ⭑ B1 : échelle de CORPS fermée — 8 crans. Tout corps existant s'arrondit au cran le plus proche lors des passes 2-6. NB --fs-cap historique = 14px ; le cran fermé est 14.5px (±0.5px, signalé — imperceptible). ---------------------------------------- */ /* Amendement bibliothèque 04/08 : échelle relevée (body 16→18px, plancher 13px). */ --cog-fs-2xs: 13px; --cog-fs-xs: 13px; --cog-fs-lab: 13.5px; --cog-fs-sm: 15px; --cog-fs-cap: 16px; --cog-fs-body: 18px; --cog-fs-body-lg: 19.5px; --cog-fs-h4: 22px; --cog-fs-sup: .8em; /* ⭑ B2 : H1 de page — clamp UNIQUE (médiane des 3 clamps constatés) */ --cog-fs-h1-page: clamp(30px, 3.6vw, 52px); /* ⭑ B4 : prix — 2 rôles nommés */ --cog-fs-price-card: 27px; --cog-fs-price-fiche: clamp(30px, 3.4vw, 44px); /* --- ⭑ B3 : letter-spacing — 6 crans fermés (déco .34/.42/.46 — --cog-ls-display) */ --cog-ls-tight: -.015em; --cog-ls-cta: .04em; --cog-ls-cta-caps: .08em; --cog-ls-lab: .16em; --cog-ls-lab-lg: .18em; --cog-ls-display: .22em; /* ⭑ Passe 8 (convergence formulaires) : label de champ CAPS — distinct de --cog-ls-lab (.16em, méta de carte). Aligné sur la fiche-bien, seul endroit qui l'utilisait déjà en dur avant cette passe. */ --cog-ls-field-lab: .1em; /* ====================================================================== 5. ESPACEMENTS & LAYOUT — §3 TRANCHÉ Deux tokens de rythme officiels. La densité s'active via la classe opt-in .page--dense (voir bas de fichier), JAMAIS par un override global silencieux. ====================================================================== */ --layout-maxw: 1280px; --space-gutter: clamp(24px, 5vw, 80px); --space-section-y: clamp(64px, 7vw, 120px); /* rythme global — essai resserrement 27/08 */ --space-section-y-dense: clamp(48px, 5.5vw, 88px); /* variante dense (pages service) — essai resserrement 27/08 */ --space-2:6px; --space-3:9px; --space-4:12px; --space-5:14px; --space-6:18px; --space-7:22px; --space-8:28px; --space-10:36px; --space-12:48px; --space-16:72px; /* ⭑ C3 : padding des blocs internes (fiche) — nommé */ --cog-space-block-y: clamp(30px, 3.2vw, 44px); /* ⭑ E2 : contrôles ronds — échelle fermée (mapping : 32/34→sm · 38/40/42/46→md · 52→lg) */ --cog-control-sm: 36px; --cog-control-md: 44px; --cog-control-lg: 52px; /* ⭑ Constante de composant — .field-range (panneau de bornes ancré, audit 31/07) */ --fr-panel-w: 352px; /* ====================================================================== 6. RAYONS — Décision 17/07 : échelle réduite à 4 valeurs. 0 littéral (angles vifs) · --radius-sm · --radius-pill · --radius-full. ====================================================================== */ --radius-sm: 6px; /* boxé : champs, textarea, barres de recherche, encarts éditoriaux, panneaux, cartes de sélection */ --radius-pill: 48px; /* pilules : boutons, chips, tags, compteurs, toggles */ --radius-full: 50%; /* cercles : avatars, boutons circulaires, favoris */ /* ====================================================================== 7. OMBRES ====================================================================== */ --shadow-header: 0 6px 24px -8px rgba(26,26,31,.08), 0 2px 6px -2px rgba(26,26,31,.04); --shadow-card: 0 30px 60px -38px rgba(26,26,31,.30); --shadow-float: 0 24px 60px -46px rgba(26,26,31,.40); --shadow-panel: 0 24px 60px -24px rgba(26,26,31,.35); --shadow-btn: 0 12px 30px -14px var(--red-glow); --shadow-btn-hover:0 16px 36px -14px var(--magenta-glow); --shadow-widget: 0 24px 64px -22px rgba(26,26,31,.38), 0 6px 18px -10px rgba(26,26,31,.18); --shadow-widget-fab:0 14px 34px -12px rgba(26,26,31,.40), 0 3px 10px -4px rgba(26,26,31,.22); /* ⭑ D5 : modale / lightbox — ombre unique nommée */ --cog-shadow-modal: 0 40px 90px -30px rgba(0,0,0,.50); /* ⭑ D4 : état focus SYSTÉMIQUE — tous champs & contrôles */ --cog-focus-ring: 0 0 0 3px var(--cog-ink-a05); --cog-focus-ring-dark: 0 0 0 3px var(--cog-on-dark-a30); /* ⭑ DÉPRÉCIÉ (17/07) : token de focus de l'ancienne variante .field--underline, supprimée le 17/07 (variante unique .field--boxed sur tout le site). Plus aucun consommateur — conservé provisoirement pour trace, à retirer au prochain nettoyage de tokens. Tous les champs utilisent --cog-focus-ring. */ --cog-focus-line: 0 2px 0 0 var(--color-text), 0 4px 10px -6px var(--cog-ink-a10); /* ====================================================================== 8. TRANSITIONS ====================================================================== */ --ease-out:cubic-bezier(.2,.7,.2,1); /* signature : liens, filet nav, image carte */ --ease-pop:cubic-bezier(.2,.8,.2,1); /* remplissage pastille ronde */ --dur-fast:.3s; --dur-base:.4s; --dur-slow:.5s; --transition-base: all var(--dur-base) var(--ease-out); /* ====================================================================== 9. BREAKPOINTS — §12 TRANCHÉ : set canonique (documentaire). CSS n'accepte pas var() en @media : ces tokens servent de référence (SCSS/PHP). 920px reste la bascule dure du menu de navigation. ⭑ C1/C2 : SET FERMÉ — 560 · 768 · 920 (nav) · 1024 · 1280. Mapping des valeurs historiques (passes 2-6) : 480 / 520 / 600 → 560 640 / 680 / 720 / 760 / 780 → 768 820 / 840 / 860 / 880 / 900 → 920 960 / 980 / 1080 → 1024 ====================================================================== */ --bp-sm:560px; --bp-md:768px; --bp-lg:920px; --bp-xl:1024px; --bp-2xl:1280px; /* ====================================================================== 10. Z-INDEX ====================================================================== */ --z-header:100; --z-popover:400; --z-widget:1200; --z-modal:1200; --z-panel:3000; /* ====================================================================== 11. ALIAS DE COMPATIBILITÉ (existant → canoniques). NE PAS étendre. À terme, migrer le code vers les tokens canoniques puis retirer ce bloc. ====================================================================== */ --paper:var(--cog-paper); --paper-warm:var(--cog-paper-warm); --paper-deep:var(--cog-paper-deep); --ink:var(--cog-ink); --ink-soft:var(--cog-ink-soft); --ink-mute:var(--cog-ink-mute); --rule:var(--cog-rule); --rule-soft:var(--cog-rule-soft); --night:var(--cog-night); --night-2:var(--cog-night-2); --red:var(--cog-red); --magenta:var(--cog-magenta); --sans:var(--font-sans); --maxw:var(--layout-maxw); --gut:var(--space-gutter); --sec-y:var(--space-section-y); /* dense via .page--dense uniquement */ } /* §3 — Densité opt-in : hérite par les pages service. Usage :
…
*/ .page--dense{ --sec-y: var(--space-section-y-dense); }