/* ============================================================ DealFabric Design System — 00 · Tokens Source unique de vérité. Aucune couleur en dur ailleurs. Référence : Design system/dealfabric-couleurs-hexa.md ============================================================ */ :root{ /* ---------- Couleurs · priorité 1 (90 % des cas) ---------- */ --df-ink: #173A5E; /* texte principal, titres */ --df-ink-2: #4E5C6B; /* texte secondaire, descriptions */ --df-paper: #FFFFFF; /* fond de page */ --df-alt: #EDF4F9; /* fond alterné (une section sur deux) */ --df-night: #0E1621; /* fond sombre (respiration) */ --df-gold: #C8A45E; /* CTA — un seul par écran */ --df-line: #DFE4E8; /* bordures, séparateurs */ --df-link: #2E6899; /* liens sur fond clair */ /* Constante : JAMAIS remappee par un contexte sombre. --df-ink bascule vers le texte clair dans .df-night, .df-panel et .df-card-night, ce qui est voulu pour les titres. Un aplat de bouton clair y a besoin de l encre reelle : demander var(--df-ink) y donnait du blanc casse sur du blanc. */ --df-ink-fixed: #173A5E; /* ---------- Couleurs · priorité 2 (sections sombres) ---------- */ --df-n-text: #EDF4F9; /* jamais #FFF sur --df-night */ --df-n-text-2: #97A3AE; --df-n-link: #6DA3C9; --df-n-link-h: #9CC2DC; --df-n-line: #253242; --df-n-card: #0B1E33; /* ---------- Couleurs · priorité 3 (accents ponctuels) ---------- */ --df-gold-ink: #8A6C32; /* or LISIBLE en texte sur fond clair */ --df-gold-hover: #A9853F; /* hover du bouton or */ --df-gold-soft: #D7BB84; /* or sur fond sombre : eyebrow, filet */ --df-gold-bg: #F9F3E7; /* fond très léger doré */ /* ---------- Gris froids imposés (jamais #666 / #999 / #eee) ---------- */ --df-grey: #6E7C8A; /* légendes, eyebrow, méta */ --df-grey-bg: #F0F2F4; /* fonds neutres, groupe de nav */ --df-line-alt: #CBDFEC; /* bordure sur fond --df-alt */ /* ---------- Sémantiques ---------- */ --df-ok-text: #1E5343; --df-ok-bg: #E4F1EC; --df-warn-text: #6B4610; --df-warn-bg: #FBF0DC; --df-err-text: #7A2626; --df-err-bg: #FAEAEA; --df-info-text: #1B4468; --df-info-bg: #E6EFF6; /* ---------- Dégradés de placeholder / objets ---------- */ /* Degrade bleu — fond de section, hors charte d origine. Ajoute pour la section Technologie. */ /* Degrade bleu, en pieces detachees : une classe de variante peut en deplacer la course sans retoucher les couleurs. Il n y a volontairement PAS de token « --df-blue » qui les assemblerait ici. Une propriete personnalisee est substituee la ou elle est DECLAREE, pas la ou elle est lue : compose sur :root, le degrade y figerait l angle par defaut, et la valeur deja resolue serait la seule a descendre. Redefinir l angle plus bas n aurait alors aucun effet. L assemblage se fait donc dans .df-gradient, sur l element qui porte la variante. Voir 03-layout.css. */ --df-blue-a: 84deg; /* direction de la course */ --df-blue-p1: 0.51%; /* fin du bleu clair */ --df-blue-p2: 18.75%; /* bleu intermediaire */ --df-blue-p3: 36.99%; /* debut du marine plein */ --df-obj: linear-gradient(140deg, #EDF4F9, #F9F3E7); --df-obj-2: linear-gradient(130deg, #EDF4F9, #F9F3E7); /* ---------- Typographie ---------- */ --df-font-ui: "Instrument Sans", "Inter Tight", system-ui, -apple-system, sans-serif; --df-font-text: "Inter Tight", "Instrument Sans", system-ui, sans-serif; /* Echelle des pages internes : c est celle de 41 maquettes sur 46. L accueil est plus ample, il la redefinit plus bas. */ --df-h1: clamp(32px, 3.9vw, 50px); --df-h2: clamp(26px, 3.1vw, 40px); --df-h3: 19px; --df-h4: 16px; --df-body: 15.5px; /* paragraphe courant */ --df-body-lg: 16.5px; /* chapô de section */ --df-small: 13.5px; --df-xs: 12.5px; --df-eyebrow: 11px; --df-lh-title: 1.1; --df-lh-text: 1.62; --df-ls-title: -.028em; --df-ls-eyebrow: .16em; /* ---------- Grille & rythme vertical ---------- */ --df-wrap: 1240px; /* largeur de contenu */ --df-gutter: 36px; /* gouttière latérale */ --df-sec-y: 96px; /* padding vertical d'une section */ --df-sec-y-sm: 64px; /* variante compacte */ --df-head-mb: 52px; /* sous le chapeau de section */ --df-gap: 16px; /* gap de grille par défaut */ --df-gap-lg: 30px; /* ---------- Rayons — 3 valeurs, pas une de plus ---------- */ --df-r-sm: 8px; /* champs, petits boutons, tags */ --df-r-md: 14px; /* cartes courantes */ --df-r-lg: 20px; /* grands panneaux, blocs sombres */ --df-r-btn: 7px; /* ---------- Ombres ---------- */ --df-shadow-mega: 0 26px 44px -34px rgba(14,22,33,.5); /* ---------- Transitions ---------- */ --df-t-fast: .18s; --df-t: .25s; --df-ease: cubic-bezier(.16, 1, .3, 1); /* ---------- Profondeurs ---------- */ --df-z-scrim: 15; --df-z-mega: 20; --df-z-nav: 50; } /* ------------------------------------------------------------ Contextes de couleur. Poser .df-on-night sur tout conteneur à fond sombre : les composants enfants basculent seuls, sans classe --dark. ------------------------------------------------------------ */ .df-on-night{ --df-ink: var(--df-n-text); --df-ink-2: var(--df-n-text-2); --df-paper: var(--df-n-card); --df-line: var(--df-n-line); --df-link: var(--df-n-link); --df-alt: var(--df-n-card); } .df-on-alt{ --df-paper: var(--df-alt); --df-line: var(--df-line-alt); } /* ------------------------------------------------------------ L accueil garde l echelle de sa propre maquette ------------------------------------------------------------ Elle est plus ample que celle des pages internes : c est un parti pris de la maquette d accueil, pas un ecart. Les tokens se redefinissent sur le , tout ce qu il contient suit — rien a changer dans le builder. La classe « home » vient de functions.php (wp3d_df_home_body_class), qui la pose sur la page d accueil ; Enfold pose id="top" sur body. ------------------------------------------------------------ */ #top.home{ --df-h1: clamp(34px, 4.2vw, 56px); --df-h2: clamp(28px, 3.4vw, 48px); --df-lh-title: 1.08; }