/* ========================================================================== TRAME — Design tokens Toutes les valeurs ci-dessous sont MESURÉES dans le fichier Figma (recensement des fills, strokes, rayons et espacements sur 1 677 nœuds). Le nombre entre parenthèses = nombre d'occurrences dans la maquette. Remplace axiom-tokens.css, qui contenait des estimations. ========================================================================== */ :root { /* ---------- Surfaces --------------------------------------------------- Trois niveaux de profondeur, pas deux comme je le pensais. */ --tr-surface-base: #06060E; /* (86) fond de page le plus profond */ --tr-surface-section: #0D0D1C; /* (134) sections alternées */ --tr-surface-card: #13131F; /* (259) cartes — la surface dominante */ --tr-surface-overlay: rgba(6, 6, 14, 0.95); /* ---------- Marque ----------------------------------------------------- */ --tr-primary: #FF5F1F; /* (345 fills + textes) */ /* ⚠️ Texte clair sur cet orange = 3.04:1, sous le seuil AA. Deux issues : texte foncé #2D2D2D (4.53:1), ou fond #DB3B00 pour garder du texte blanc (4.53:1). Voir la note en fin de fichier. */ --tr-primary-wash: rgba(255, 95, 31, 0.10); /* (63) fonds de badge */ --tr-primary-veil: rgba(255, 95, 31, 0.20); --tr-primary-border: rgba(255, 95, 31, 0.20); /* (31) */ --tr-glow: 0 0 32px rgba(255, 95, 31, 0.45), 0 0 80px rgba(255, 95, 31, 0.20); --tr-gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 95, 31, 0.18) 0%, transparent 70%); /* ---------- Accents catégoriels --------------------------------------- La palette est dérivée de Tailwind : violet-600, sky-500, emerald-600, amber-600, rose-600, cyan-500. Bon à savoir — ça veut dire que les valeurs sont déjà cohérentes entre elles, inutile de les retoucher. */ --tr-violet: #7C3AED; /* UI/UX, Branding */ --tr-violet-wash: rgba(124, 58, 237, 0.13); --tr-sky: #0EA5E9; /* Web & Application */ --tr-sky-wash: rgba(14, 165, 233, 0.13); --tr-emerald: #059669; /* SEO / GEO / AEO */ --tr-emerald-wash: rgba(5, 150, 105, 0.13); --tr-amber: #D97706; /* Consulting */ --tr-amber-wash: rgba(217, 119, 6, 0.13); --tr-rose: #E11D48; --tr-cyan: #06B6D4; /* ---------- États d'interaction --------------------------------------- Absents des maquettes statiques, ajoutés pour les composants. */ --tr-primary-hover: #E84C0F; --tr-card-hover: #1C1B27; --tr-border-hover: rgba(255, 255, 255, 0.16); /* ---------- Texte ------------------------------------------------------ Le gris est de loin la couleur la plus utilisée du site (917 nœuds). C'est un gris violacé, pas neutre — détail qui compte sur ce fond. */ /* ⚠️ ACCESSIBILITÉ — #6B6B8A donne 3.59:1 sur les cartes en mode sombre. C'est sous le seuil WCAG AA de 4.5:1 pour le texte courant, et c'est la couleur la plus utilisée du site. #7B7B9A atteint 4.51:1 en conservant la teinte violacée. Décommenter pour corriger. */ --tr-text-muted: #6B6B8A; /* (917) corps de texte par défaut */ /* --tr-text-muted: #7B7B9A; */ --tr-text: #EDEDF5; /* (284) titres et texte fort */ --tr-text-pure: #FFFFFF; /* (68) réservé aux contrastes maximaux */ --tr-text-accent: #FF5F1F; /* (169) */ /* ---------- Bordures --------------------------------------------------- Une seule bordure sur tout le site, 462 occurrences. */ --tr-border: rgba(255, 255, 255, 0.07); --tr-border-accent: rgba(255, 95, 31, 0.20); /* ---------- Typographie ------------------------------------------------ Les trois familles sont confirmées et toutes gratuites (Google Fonts). Variable fonts : un seul woff2 par famille. */ --tr-font-display: "Bricolage Grotesque", system-ui, sans-serif; --tr-font-body: "DM Sans", system-ui, -apple-system, sans-serif; --tr-font-mono: "JetBrains Mono", ui-monospace, monospace; /* Graisses réellement employées : Bricolage Bold + SemiBold, DM Sans Regular/Medium/SemiBold/Italic, JetBrains Regular/Medium/Bold */ --tr-text-xs: 0.75rem; /* 12 */ --tr-text-sm: 0.875rem; /* 14 */ --tr-text-base: 1rem; /* 16 */ --tr-text-lg: 1.125rem; /* 18 */ --tr-text-xl: 1.25rem; /* 20 */ --tr-text-2xl: 1.5rem; /* 24 */ --tr-text-3xl: 2rem; /* 32 */ --tr-text-4xl: 2.5rem; /* 40 */ --tr-text-5xl: 3.5rem; /* 56 */ --tr-text-6xl: 4.5rem; /* 72 — H1 accueil */ /* Version fluide pour le responsive — le Figma est en desktop fixe, ces bornes sont ma proposition, à valider au premier rendu. */ --tr-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem); --tr-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); --tr-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); --tr-leading-tight: 1.04; /* mesuré : 72px / 74.88px */ --tr-leading-normal: 1.5; /* mesuré : 16px / 24px */ --tr-leading-relaxed: 1.75; --tr-tracking-tight: -0.025em; /* mesuré : -1.8px sur 72px */ --tr-tracking-wide: 0.12em; /* eyebrows monospace capitales */ /* ---------- Espacement ------------------------------------------------- Échelle réelle relevée sur les gaps d'auto-layout, par fréquence : 8 (119), 12 (110), 6 (77), 16 (70), 10 (65), 4 (54), 2 (24), 32 (22), 20 (19), 24 (19), 40 (1). C'est une base 2, pas une base 4 — la maquette utilise 6 et 10. */ --tr-space-3xs: 2px; --tr-space-2xs: 4px; --tr-space-xs: 6px; --tr-space-sm: 8px; --tr-space-ms: 10px; --tr-space-md: 12px; --tr-space-lg: 16px; --tr-space-xl: 20px; --tr-space-2xl: 24px; --tr-space-3xl: 32px; --tr-space-4xl: 40px; --tr-space-5xl: 48px; --tr-space-6xl: 64px; --tr-section-y: clamp(4rem, 3rem + 5vw, 6rem); --tr-container: 1280px; --tr-container-narrow: 760px; --tr-gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem); /* ---------- Rayons ----------------------------------------------------- 16px écrase tout (382 nœuds). 12px en second (41), 8px marginal (6). Le "pill" est un rayon max, à traduire en 999px. */ --tr-radius-sm: 8px; --tr-radius-md: 12px; --tr-radius-lg: 16px; /* défaut : boutons, cartes, champs */ --tr-radius-xl: 24px; --tr-radius-pill: 999px; /* (189) badges, tags, filtres */ /* ---------- Ombres et mouvement ---------------------------------------- */ --tr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --tr-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --tr-ease: cubic-bezier(0.4, 0, 0.2, 1); --tr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tr-fast: 150ms; --tr-base: 250ms; --tr-slow: 400ms; --tr-z-sticky: 100; --tr-z-overlay: 500; --tr-z-modal: 1000; /* ---------------------------------------------------------------------- Animations Valeurs de départ de l'apparition au défilement. Le « type » d'animation n'est qu'un jeu de ces variables : une seule transition dans le CSS, pas de bibliothèque de keyframes à entretenir. Le personnalisateur, les blocs Gutenberg et l'onglet Style d'Elementor surchargent ces valeurs — sur :root pour le site, sur un conteneur pour une section. L'héritage fait le reste. ---------------------------------------------------------------------- */ --tr-anim-opacite: 0; --tr-anim-x: 0px; --tr-anim-y: 18px; --tr-anim-echelle: 1; --tr-anim-rotation: 0deg; --tr-anim-flou: 0px; --tr-anim-duree: 620ms; --tr-anim-delai: 0ms; --tr-anim-ease: var(--tr-ease-out); --tr-anim-distance: 18px; --tr-anim-cascade: 70; /* millisecondes, sans unité : lu par le script */ /* Effets au survol. */ --tr-survol-y: -3px; --tr-survol-echelle: 1; --tr-survol-rotation: 0deg; --tr-survol-ombre: none; --tr-survol-duree: 320ms; --tr-survol-duree-img: 620ms; --tr-survol-zoom-img: 1.05; --tr-survol-btn-y: -2px; --tr-survol-btn-fleche: 3px; --tr-survol-icone: 1.08; --tr-survol-icone-rot: 0deg; --tr-survol-souligne: 0; --tr-pulse-duree: 2.2s; /* ---------------------------------------------------------------------- En-tête Toutes ces valeurs sont surchargées par le personnalisateur (Apparence → Personnaliser → TRAME — En-tête). Celles-ci sont le repli quand aucun réglage n'a encore été enregistré. ---------------------------------------------------------------------- */ --tr-entete-fond: #0A0A12; --tr-entete-bordure: #1F1F2E; --tr-entete-espace: 18px; /* marge au-dessus et en dessous */ --tr-entete-flou: 14px; /* effet de verre au défilement */ --tr-logo-max: 220px; /* largeur maximale du logo */ --tr-logo-h-mobile: 26px; --tr-nav-taille: 15px; --tr-nav-espace: 28px; --tr-cta-rayon: 999px; /* pilule par défaut */ --tr-cta-fond: #FF5F1F; /* Bande de chiffres à fond dégradé. Le dégradé se compose depuis --tr-primary-rgb : changer la couleur de marque le recolore d'un coup. */ --tr-bande-fond: var(--tr-surface-section); --tr-bande-intensite: 0.16; /* opacité du dégradé */ --tr-bande-angle: 135deg; /* Fenêtre modale des projets. */ /* Bandeau image : hauteur par défaut, surchargée par le module. */ --tr-bandeau-h: 52vh; /* Rang d'un badge flottant, posé en style inline par le rendu. Sert à décaler son apparition et son flottement — d'où l'absence de limite au nombre de badges. */ --tr-badge-rang: 0; /* Même principe pour les cartes d'une liste : le rang décale l'entrée. */ --tr-carte-rang: 0; --tr-modal-flou: 10px; --tr-modal-voile: 0.72; /* Logos clients du bandeau défilant. */ --tr-logo-hauteur: 34px; --tr-logo-opacite: 0.65; --tr-logo-gris: 1; /* 1 = désaturé, 0 = couleurs d'origine */ --tr-logo-survol: 1.06; /* Mots en rotation dans les titres. */ --tr-mots-duree: 2200ms; /* temps d'affichage de chaque mot */ --tr-mots-transition: 480ms; /* durée du fondu entre deux mots */ --tr-mots-distance: 0.5em; /* amplitude du glissement vertical */ } @media (prefers-reduced-motion: reduce) { :root { --tr-fast: 0ms; --tr-base: 0ms; --tr-slow: 0ms; /* Toute personnalisation d'animation s'efface devant la préférence système : le mouvement déclenche des troubles vestibulaires réels. */ --tr-anim-opacite: 1; --tr-anim-x: 0px; --tr-anim-y: 0px; --tr-anim-echelle: 1; --tr-anim-rotation: 0deg; --tr-anim-flou: 0px; --tr-anim-duree: 0ms; --tr-anim-delai: 0ms; --tr-anim-cascade: 0; --tr-survol-y: 0px; --tr-survol-echelle: 1; --tr-survol-rotation: 0deg; --tr-survol-duree: 0ms; --tr-survol-zoom-img: 1; --tr-survol-btn-y: 0px; --tr-survol-btn-fleche: 0px; --tr-survol-icone: 1; } }