/* tokens.css — source de vérité unique du design. Pour changer l'identité visuelle du site, modifier ce fichier et rien d'autre. */ :root { /* ---------- Couleurs ---------- */ --c-cream: #FEFAE7; /* fond principal */ --c-cream-light: #FFFEF5; /* fond de carte clair */ --c-ink: #3B001B; /* texte, prune très foncé */ --c-ink-alt: #3D001B; --c-forest: #1D322D; /* vert profond, sections sombres */ --c-olive-black: #181A12; --c-yellow: #FFE878; /* jaune principal, boutons */ --c-yellow-bright: #FFF570; --c-yellow-pale: #FAFABF; /* cartes FAQ */ --c-orange: #FF9F00; /* fond section services */ --c-orange-deep: #F4631E; --c-orange-light: #FFBF00; /* pois du motif de fond, section statistics — manque du brief (A0), relevé sur la source : radial-gradient(19px 19px, #FFBF00, #FFBF00 25%, #FF9F00 25%) */ --c-pink: #F09FA8; /* fond section FAQ */ --c-pink-light: #F6C2F4; --c-lavender: #C7CAFF; --c-purple: #CDABEB; --c-mint: #C0ECBF; --c-sand: #FAE0BE; --c-teal: #309898; --c-red: #CB0404; --c-coral: #FF7081; /* suffixe des compteurs ("+"/"%"), section statistics — manque du plan initial (défaut 3, tâche 7), relevé sur la source : rgb(255, 112, 129), Clash Display 500 */ --c-white: #FFFFFF; --c-shadow: rgba(0, 0, 0, .4); --c-scrim: rgba(0, 0, 0, .8); /* voile derrière la pop-up d'étude de cas — relevé sur la source : rgba(0, 0, 0, 0.8) */ /* ---------- Typographie ---------- */ --font-display: "Climate Crisis", system-ui, sans-serif; --font-sans: "Poppins", system-ui, sans-serif; --font-cond: "Oswald", "Poppins", system-ui, sans-serif; --font-mono: "Fragment Mono", ui-monospace, monospace; --font-clash: "Clash Display", "Poppins", system-ui, sans-serif; --font-satoshi: "Satoshi", "Poppins", system-ui, sans-serif; /* Échelle relevée sur le site source. */ --fs-12: 12px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-27: 27px; --fs-30: 30px; --fs-33: 33px; --fs-37: 37px; --fs-42: 42px; --fs-52: 52px; --fs-68: 68px; /* Titres display : fluides, bornés aux valeurs desktop mesurées. */ --fs-display-xl: clamp(2.75rem, 7.2vw, 6.5rem); --fs-display-lg: clamp(2.25rem, 5.4vw, 4.75rem); --lh-tight: 0.95; --lh-snug: 1.15; --lh-body: 1.5; /* ---------- Espacement ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px; --container: 1200px; --gutter: 40px; /* ---------- Formes ---------- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Bord festonné — géométrie relevée sur la source le 2026-08-11, aux trois paliers, sur #statistics ET #benefits (formes identiques, seule la couleur change). Une bosse n'est PAS un demi-disque seul : c'est un demi-disque de rayon --scallop-size/2 posé sur une bande pleine qui comble le reste de --scallop-h. La source pose toujours 15 bosses sur la largeur de page, d'où --scallop-size = largeur/15, et --scallop-h ≈ 0,7874 × --scallop-size. --scallop-up = de combien le bandeau remonte au-dessus de sa section ; il est plus petit que --scallop-h, donc le feston mord sur sa propre section. */ --scallop-size: 96px; --scallop-h: 75.6px; --scallop-up: 61px; /* Débord du diviseur en feuilles sur la colonne voisine. Valeur en pixels et non un rapport : la source la choisit à la main, indépendamment de l'échelle du motif (voir le commentaire de `.leaf-divider::before` dans layout.css). Relevée aux quatre paliers : 28 partout, sauf 25 en tablette. */ --leaf-overhang: 28px; --leaf-size: 46.6px; /* pas vertical du diviseur en feuilles — mesuré sur le SVG inline de la source (comparatif, bord gauche de la colonne "Croque Studio", x=692 / top≈9064 à 1440px ; viewBox 0 0 28 641, 20 motifs, pas 32 unités viewBox = 46,6px rendus) */ /* Étoile à 30 pointes des pastilles de section — relevée sur la source le 2026-08-13 (viewBox 0 0 119 118). Le MÊME tracé sert à la pastille « Services » et à la pastille « parcours » de #statistics : comparé caractère par caractère sur les deux (1029 signes, identiques), il est donc écrit une fois ici plutôt que deux dans les feuilles de section — c'est justement la répétition de tracés que le README signale. Posé en masque : la couleur reste au CSS de chaque section (violet pour Services, jaune pour parcours), le tracé ne porte aucune valeur brute. ⚠ Ne pas confondre avec `.starburst` (layout.css), qui est une primitive de rayons en conic-gradient : elle n'a pas de cœur plein, et un libellé posé en son centre y devient illisible. */ --shape-star-30: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 119 118'%3E%3Cpath d='M59.4034 0.0791016L63.1008 21.4794L70.9021 1.21163L70.3535 22.922L81.9589 4.56569L77.1854 25.7519L92.149 10.0124L83.3339 29.8602L101.081 17.3424L88.5628 35.0891L108.411 26.2741L92.6712 41.2377L113.857 36.4641L95.501 48.0696L117.211 47.521L96.9437 55.3223L118.344 59.0197L96.9437 62.7171L117.211 70.5184L95.501 69.9698L113.857 81.5753L92.6712 76.8017L108.411 91.7653L88.5628 82.9503L101.081 100.697L83.3339 88.1792L92.149 108.027L77.1854 92.2875L81.9589 113.474L70.3535 95.1174L70.9021 116.828L63.1008 96.56L59.4034 117.96L55.706 96.56L47.9047 116.828L48.4533 95.1174L36.8478 113.474L41.6214 92.2875L26.6578 108.027L35.4729 88.1792L17.7262 100.697L30.244 82.9503L10.3962 91.7653L26.1356 76.8017L4.94947 81.5753L23.3058 69.9698L1.59542 70.5184L21.8631 62.7171L0.462891 59.0197L21.8631 55.3223L1.59542 47.521L23.3058 48.0696L4.94947 36.4641L26.1356 41.2377L10.3962 26.2741L30.244 35.0891L17.7262 17.3424L35.4729 29.8602L26.6578 10.0124L41.6214 25.7519L36.8478 4.56569L48.4533 22.922L47.9047 1.21163L55.706 21.4794L59.4034 0.0791016Z'/%3E%3C/svg%3E"); /* Ombre douce, relevée sur la source le 2026-08-13 sur son panneau de navigation : `rgba(0, 0, 0, 0.05) 0px 10px 20px 0px`. C'est la seule ombre de ce type du site — partout ailleurs la source pose des ombres dures décalées, sans flou (ci-dessous). */ --shadow-soft: 0 10px 20px rgba(0, 0, 0, .05); --shadow-hard: 4px 4px 0 var(--c-ink); --shadow-hard-lg: 6px 6px 0 var(--c-ink); --shadow-hard-press: 2px 2px 0 var(--c-ink); /* ---------- Mouvement ---------- */ --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); /* départ lent, sortie sèche : les disparitions */ --ease-back: cubic-bezier(.34, 1.56, .64, 1); --marquee-duration: 32s; /* Entrée de section, relevée sur la source le 2026-08-13 (#benefits, 92 éléments enregistrés image par image à l'entrée dans la fenêtre) : le contenu monte de --reveal-rise, sans fondu, tous les éléments d'une même section ENSEMBLE (aucune cascade). Début t=43ms, mi-course t=224ms, fin t=1208ms. ⚠ COURBE ET DURÉE REPRISES le 2026-08-13, lors du réaudit de toutes les courbes. Le profil complet, relevé cette fois jusqu'à 99,5 % de la course : 26 % à 5 % de la durée, 43 % à 10, 67 % à 20, 80 % à 30, 88 % à 40, 95 % à 55, 98 % à 70, 99 % à 85, fin à 1396ms. C'est une exponentielle de constante de temps ~250ms — la MÊME famille de courbe que le zoom des projets, d'où le partage de --ease-expo. --ease-out approchait bien le début (28/47/72 contre 26/43/67) mais coupait la traîne beaucoup trop tôt : il atteignait 99,5 % en 713ms là où la source met 1396. La FAQ monte du double (deux conteneurs imbriqués sur la source, 340px cumulés) : --reveal-rise y est redéfini. */ --dur-reveal: 1400ms; --reveal-rise: 170px; /* Pop d'une lettre de titre, relevé sur la source (#benefits, 23 lettres) : échelle 0 -> 1,252 -> 1 en 1082ms, et 29,5ms de décalage d'une lettre à la suivante, en ordre de lecture (mesure : première lettre t=49ms, dernière t=698ms sur 22 intervalles). ⚠ RESSORT REPRIS le 2026-08-13. « Un dépassement à 1,252 » ne décrivait que la moitié du mouvement : la source OSCILLE. Profil complet d'une lettre, relevé image par image — 0,319 à 5 % de sa durée, 0,621 à 10, 1,154 à 20, PIC 1,252 à 28, 1,078 à 40, CREUX 0,937 à 55 (elle repasse SOUS sa taille finale), 0,978 à 70, 1,016 à 85, arrivée à 1 à 1134ms. Deux oscillations, donc, là où notre image clé unique montait et se posait sans rebond. Les images clés de `letter-pop` (layout.css) reprennent ces neuf points ; l'animation est en `linear`, la forme étant portée par les clés elles-mêmes. */ --dur-letter: 1130ms; --letter-step: 29.5ms; --letter-overshoot: 1.252; /* Durées des animations déclenchées au CLIC. Relevées sur la source le 2026-08-13, en enregistrant image par image la fin du mouvement : accordéon FAQ 524ms, accordéon Services 1027ms, galerie d'un service 1238ms, carrousel des avis 1191ms, ouverture du menu 224ms. Les quatre premières étaient toutes réglées sur --dur-base (320ms) : deux à quatre fois trop rapides. Les valeurs ci-dessous sont les durées NOMINALES qui redonnent les fins de mouvement mesurées (l'écart vient de l'amortissement de --ease-out : le dernier pixel est franchi avant la fin nominale). `--dur-accordion` vaut ici la valeur FAQ ; #services redéfinit la sienne. */ /* ⚠ La COURBE compte autant que la durée, et elle avait été manquée le 2026-08-13 au matin : seule la durée avait été corrigée. Relevé de la progression de l'ouverture (hauteur de l'item, FAQ, image par image) : 3,7 % à 41ms, 18 % à 61, 52 % à 108, 76 % à 158, 91 % à 225, 98 % à 324, fin à ~605. C'est une courbe en S — départ RETENU, milieu rapide, longue fin — là où --ease-out part au contraire à pleine vitesse : le panneau sautait de 66px dans ses 50 premières millisecondes (mesuré 198px de hauteur d'item à t=52 contre 139 sur la source), d'où l'à-coup à l'ouverture. --ease-accordion échantillonne les points relevés. Les deux accordéons partagent la même courbe, à des durées différentes (la progression de #services suit les mêmes fractions). */ /* Réponses de la FAQ : ouverture « pop », demande du 2026-08-13. ÉCART ASSUMÉ avec la source, qui déplie ses réponses en hauteur comme #services (les valeurs mesurées restent ci-dessous, elles servent toujours à #services). La place s'ouvre vite (--dur-faq-open), la bulle grossit par-dessus avec un dépassement (--dur-faq-pop sur --ease-back), et repart en dézoom rapide (--dur-faq-close). Voir faq.css pour le détail du montage. */ --dur-faq-open: 300ms; --dur-faq-pop: 420ms; --dur-faq-close: 200ms; --dur-accordion: 600ms; --ease-accordion: linear(0, 0.037 7%, 0.18 10%, 0.52 18%, 0.76 26%, 0.91 38%, 0.98 54%, 0.995 76%, 1); --dur-gallery: 1450ms; --dur-carousel: 1300ms; --dur-menu: 220ms; /* Escamotage et retour de la barre collante. Relevé sur la source le 2026-08-13, image par image, sur une impulsion de molette unique, dans les DEUX sens : la course dure ~300ms (fin à +300 en descente, +299 en remontée) et suit le même profil dans un sens comme dans l'autre — 14 % à +17ms, 53 % à +66, 80 % à +116, 98,6 % à +216. Départ retenu puis longue fin, comme ses accordéons. --ease-out partait bien plus vite (79 % là où la source est à 53 %) : la barre claquait au lieu de glisser. */ --dur-header: 300ms; --ease-header: linear(0, 0.14 6%, 0.53 22%, 0.8 39%, 0.986 72%, 1); --dur-social: 400ms; /* Survol d'une pastille du bandeau de logos : le logo s'efface, le nom du client surgit sur une étoile jaune. ⚠ Cette DURÉE est choisie, pas relevée : le bandeau de la source ne s'arrête jamais, une pastille ne reste donc pas sous le curseur assez longtemps pour un relevé image par image. 260ms sur --ease-back reprend le vocabulaire des bulles de la FAQ : ça surgit avec un léger dépassement plutôt que d'apparaître en fondu. À régler ici. (La typographie du nom, elle, est relevée — voir statistics.css.) */ --dur-logo-name: 260ms; /* Zoom de l'image d'un projet au survol : ~960ms de course sur la source, contre 320ms ici jusqu'au 2026-08-13. Profil relevé image par image, EN TEMPS PROPRE de l'animation (c'est-à-dire décompté de l'instant où elle démarre, pas du clic) : 21 % à +49ms, 43 % à +99, 69 % à +199, 84 % à +299, 96 % à +499. C'est une exponentielle de constante de temps 176ms — la même famille de courbe que ses compteurs — et --ease-expo l'échantillonne. ⚠ Deux pièges de lecture sur cette mesure : 1. La source attend ~100ms entre l'événement de pointeur et le premier mouvement (latence de son gestionnaire JS). Ce n'est pas une valeur de design et elle n'est PAS reproduite : la notre part tout de suite. Comparer les deux au même instant absolu fait donc croire à un écart de 20 points qui n'existe pas — première lecture faussée de cette façon. 2. --ease-out aurait convenu à trois points près. --ease-expo est gardée parce qu'elle est mesurée, pas parce que l'autre se voyait. */ --dur-zoom: 950ms; --ease-expo: linear(0, 0.236 5%, 0.417 10%, 0.66 20%, 0.802 30%, 0.884 40%, 0.951 55%, 0.978 70%, 0.99 85%, 1); /* Rotation du halo étoilé du process au changement d'étape. Relevée sur la source le 2026-08-13, image par image, sur trois clics : l'angle vaut 90° × numéro d'étape (0 / 90 / 180 / 270), et la course DÉPASSE sa cible d'environ 1,4 % avant de revenir — c'est le petit recul visible à l'œil. Trois clics enregistrés, mêmes chiffres : 1 → 2 : 0 → 24,9 (95ms) → 83,8 (195) → 91,33 (295) → 90,27 (396) → 90 (494) 2 → 3 : 90 → 119,2 (84) → 175,0 (184) → 181,3 (285) → 180,2 (385) → 180 (482) 3 → 1 : 180 → 118,2 (71) → 9,2 (170) → -2,56 (270) → -0,44 (371) → 0 (469) La durée ne dépend pas de la distance parcourue (~500ms pour 90° comme pour 180°) : c'est un ressort. `linear()` reprend les six points mesurés tels quels plutôt que d'approcher la courbe par une cubique — --ease-back dépasserait de 10 %, sept fois trop. Un navigateur sans `linear()` retombe sur --ease-out (voir process.css) : rotation juste, sans le recul. */ --dur-halo: 500ms; --ease-halo: linear(0, 0.277 19%, 0.931 39%, 1.0148 59%, 1.003 79%, 1); } @media (max-width: 1199px) { /* Mesuré sur la source à 1024px : bosse de feston 68.27 × 53.76, remontée 40 ; pas du diviseur en feuilles 43.2px (même SVG, mis à l'échelle par Framer). */ :root { --gutter: 32px; --leaf-size: 43.2px; --leaf-overhang: 25px; --scallop-size: 68.27px; --scallop-h: 53.76px; --scallop-up: 40px; } } @media (max-width: 809px) { /* Feston mesuré sur la source à 390px : bosse 26 × 20.47, remontée 20 — ici la remontée vaut presque toute la hauteur, le feston ne mord donc quasiment pas sur sa propre section. Le diviseur en feuilles n'existe plus sur la source à cette largeur (la carte comparatif s'empile en colonne unique, plus de bord entre deux colonnes) — 28px est une extrapolation prudente (même proportion de réduction que 1440→1024), non mesurée. À vérifier au cas par cas si une section future en a besoin en mobile. */ :root { /* --leaf-overhang repasse à 28 : la source pose -25 au SEUL palier tablette, et revient à -28 à 809 comme à 390 (relevé aux quatre paliers). */ --gutter: 20px; --leaf-size: 28px; --leaf-overhang: 28px; --scallop-size: 26px; --scallop-h: 20.47px; --scallop-up: 20px; } }