§ DS Studio · bac à sable token-driven

Édite un token. Vois tout changer.

À la manière d'ACSS : déplace un curseur ou choisis une couleur, et chaque bouton, card et section ci-dessous se repeint en direct via var(--token). Complémentaire au catalogue documentaire.

Rôle de cette page : personnaliser. Pour parcourir les composants sans quitter le studio : volet Catalogue ci-dessous (221 sections, 26 catégories). Pour la documentation complète : page Catalogue.

126 tokens · 245 classes · 221 sections cataloguées · verrou check:token-lock non-bloquant actif

PROD
Preview page
FIG · 0 · Impact d'un token

Clique un token dans l'éditeur. « Si tu changes --ink, ça impacte 224 fichiers. »

  • src/components/editorial/Callout.astro
  • src/components/editorial/Dingbat.astro
  • src/components/editorial/DropCap.astro
  • src/components/editorial/EditorialTable.astro
  • src/components/editorial/KeyMetric.astro
  • src/components/editorial/PullQuote.astro
  • src/components/editorial/Timeline.astro
  • src/components/footer/Footer.astro
  • src/components/header/Header.astro
  • src/components/sections/AboutStorySplit.astro
  • src/components/sections/AgenticTerminal.astro
  • src/components/sections/AnnouncementBanner.astro
  • src/components/sections/ArchitectureDiagram.astro
  • src/components/sections/ArticleGrid.astro
  • src/components/sections/AsymmetricServices.astro
  • src/components/sections/AuthorByline.astro
  • src/components/sections/BentoGrid.astro
  • src/components/sections/BookingEmbed.astro
  • src/components/sections/BrandedCallout.astro
  • src/components/sections/CaseCardGrid.astro
  • src/components/sections/CaseFeaturedGrid.astro
  • src/components/sections/CaseSplit.astro
  • src/components/sections/CaseSpotlight.astro
  • src/components/sections/ChallengesGrid.astro
  • src/components/sections/CodeShowcase.astro
  • src/components/sections/ComingSoonPills.astro
  • src/components/sections/ComparisonDuo.astro
  • src/components/sections/ComparisonPricingCallout.astro
  • src/components/sections/ComparisonTable.astro
  • src/components/sections/ContactForm.astro
  • src/components/sections/CourseCatalogTable.astro
  • src/components/sections/CtaBandSection.astro
  • src/components/sections/CtaFinal.astro
  • src/components/sections/CtaFormInline.astro
  • src/components/sections/CtaNewsletterFooter.astro
  • src/components/sections/CtaSplitVisual.astro
  • src/components/sections/DataTable.astro
  • src/components/sections/DecisionList.astro
  • src/components/sections/DefinitionExtract.astro
  • src/components/sections/DiagnosticStages.astro
  • src/components/sections/DirectAnswer.astro
  • src/components/sections/EcosystemPartners.astro
  • src/components/sections/EditorialCallout.astro
  • src/components/sections/EditorialDingbatRule.astro
  • src/components/sections/EditorialDropcapProse.astro
  • src/components/sections/EditorialPreview.astro
  • src/components/sections/EditorialProse.astro
  • src/components/sections/EditorialSplitGrid.astro
  • src/components/sections/EditorialTableBlock.astro
  • src/components/sections/EditorialTimeline.astro
  • src/components/sections/EditorialWriteFeed.astro
  • src/components/sections/FaqAccordion.astro
  • src/components/sections/FaqCtaAside.astro
  • src/components/sections/FaqTwoColumn.astro
  • src/components/sections/FeatureAccordion.astro
  • src/components/sections/FeatureComparisonGrid.astro
  • src/components/sections/FeatureGrid.astro
  • src/components/sections/FeatureSplitMedia.astro
  • src/components/sections/FeatureTabs.astro
  • src/components/sections/FeatureZigzag.astro
  • src/components/sections/FitColumnsSection.astro
  • src/components/sections/FooterCtaBand.astro
  • src/components/sections/GalleryMasonry.astro
  • src/components/sections/GuaranteeBlock.astro
  • src/components/sections/HeroAsymmetricGrid.astro
  • src/components/sections/HeroAtlas.astro
  • src/components/sections/HeroBaselineStats.astro
  • src/components/sections/HeroCapabilityBand.astro
  • src/components/sections/HeroCardCover.astro
  • src/components/sections/HeroCentered.astro
  • src/components/sections/HeroCenteredBand.astro
  • src/components/sections/HeroEditorialKpi.astro
  • src/components/sections/HeroEditorialMasthead.astro
  • src/components/sections/HeroFormInline.astro
  • src/components/sections/HeroFullBleed.astro
  • src/components/sections/HeroGrid12.astro
  • src/components/sections/HeroHome.astro
  • src/components/sections/HeroHubStats.astro
  • src/components/sections/HeroLiquid.astro
  • src/components/sections/HeroMagazineCover.astro
  • src/components/sections/HeroMastheadCard.astro
  • src/components/sections/HeroMediaMedallion.astro
  • src/components/sections/HeroNumeralCover.astro
  • src/components/sections/HeroOfferDetail.astro
  • src/components/sections/HeroScopeMinimap.astro
  • src/components/sections/HeroSplit.astro
  • src/components/sections/HeroSplitMedia.astro
  • src/components/sections/HeroStackRhythm.astro
  • src/components/sections/HeroSummaryRail.astro
  • src/components/sections/HeroTechSignature.astro
  • src/components/sections/HeroThinMedia.astro
  • src/components/sections/HeroTrizone.astro
  • src/components/sections/HeroTunnelStep.astro
  • src/components/sections/HorizontalShowcase.astro
  • src/components/sections/HoverRevealList.astro
  • src/components/sections/InclusionsList.astro
  • src/components/sections/IntegrationsGrid.astro
  • src/components/sections/JourneySteps.astro
  • src/components/sections/KeyMetricGrid.astro
  • src/components/sections/LearningPathList.astro
  • src/components/sections/ListIndexSection.astro
  • src/components/sections/LogoMarquee.astro
  • src/components/sections/LogoWall.astro
  • src/components/sections/ManifestoAct.astro
  • src/components/sections/ManifestoBlock.astro
  • src/components/sections/ManifestoStatement.astro
  • src/components/sections/MarqueeBand.astro
  • src/components/sections/MaturityPyramid.astro
  • src/components/sections/MediaBlock.astro
  • src/components/sections/MediaSwapBand.astro
  • src/components/sections/MethodStepline.astro
  • src/components/sections/MethodTimeline.astro
  • src/components/sections/MetricCalloutBand.astro
  • src/components/sections/MetricShift.astro
  • src/components/sections/NewsletterBand.astro
  • src/components/sections/NewsletterSignupSection.astro
  • src/components/sections/ObjectionHandler.astro
  • src/components/sections/OfferRail.astro
  • src/components/sections/OfferTierGrid.astro
  • src/components/sections/OffProof.astro
  • src/components/sections/OperatingLayer.astro
  • src/components/sections/PainPoints.astro
  • src/components/sections/PainSeverityList.astro
  • src/components/sections/PersonaAttributesGrid.astro
  • src/components/sections/PhotoCluster.astro
  • src/components/sections/PricingCards.astro
  • src/components/sections/PricingSingleHighlight.astro
  • src/components/sections/PricingTable.astro
  • src/components/sections/PricingToggle.astro
  • src/components/sections/ProblemStatement.astro
  • src/components/sections/ProcessSteps.astro
  • src/components/sections/ProductReel.astro
  • src/components/sections/PullQuoteBlock.astro
  • src/components/sections/QuoteSpotlight.astro
  • src/components/sections/RelatedCardsBand.astro
  • src/components/sections/RelatedLinks.astro
  • src/components/sections/ResourceCardGrid.astro
  • src/components/sections/RoiBand.astro
  • src/components/sections/ScrollGallery.astro
  • src/components/sections/SectorCardGrid.astro
  • src/components/sections/ServiceCatalogList.astro
  • src/components/sections/ServicesGrid.astro
  • src/components/sections/SocialProof.astro
  • src/components/sections/SpecBar.astro
  • src/components/sections/StackCards.astro
  • src/components/sections/StatBlock.astro
  • src/components/sections/StatCounter.astro
  • src/components/sections/StatementOrbit.astro
  • src/components/sections/StatsBento.astro
  • src/components/sections/StepsHorizontal.astro
  • src/components/sections/SystemFlow.astro
  • src/components/sections/TeamBioGrid.astro
  • src/components/sections/TeamCardGrid.astro
  • src/components/sections/TechCapabilitiesSpecs.astro
  • src/components/sections/TechIntegrationFlow.astro
  • src/components/sections/TechPositioningSplit.astro
  • src/components/sections/TechStackBand.astro
  • src/components/sections/TechWhenDual.astro
  • src/components/sections/TerminalMetricsStrip.astro
  • src/components/sections/TerminalMockupSection.astro
  • src/components/sections/TerminalTableSection.astro
  • src/components/sections/TestimonialBlock.astro
  • src/components/sections/TestimonialLogoMetric.astro
  • src/components/sections/TestimonialMetrics.astro
  • src/components/sections/TestimonialSingleSpotlight.astro
  • src/components/sections/TestimonialWall.astro
  • src/components/sections/TierPyramidSvg.astro
  • src/components/sections/TimelineBlock.astro
  • src/components/sections/TimelineHorizontal.astro
  • src/components/sections/TrustBadgesBand.astro
  • src/components/sections/TrustLegalSection.astro
  • src/components/sections/TunnelStepNav.astro
  • src/components/sections/UseCaseIndex.astro
  • src/components/sections/VersusCompetitors.astro
  • src/components/sections/WelcomeSection.astro
  • src/components/sections/WhyStalls.astro
  • src/components/sections/WorkflowTable.astro
  • src/components/svg/geometric/AuditMaturityTimeline.astro
  • src/components/svg/geometric/MethodeProcessDiagram.astro
  • src/components/templates/AuthorPageTemplate.astro
  • src/components/templates/EssayTemplate.astro
  • src/components/ui/atoms/PartnerLogo.astro
  • src/components/ui/atoms/TerminalCTA.astro
  • src/components/ui/molecules/AuthorByline.astro
  • src/components/ui/molecules/AuthorCard.astro
  • src/components/ui/molecules/Breadcrumb.astro
  • src/components/ui/molecules/NewsletterSignup.astro
  • src/components/ui/molecules/PainPointInline.astro
  • src/components/ui/molecules/StatRow.astro
  • src/components/ui/molecules/TableOfContents.astro
  • src/components/ui/molecules/TerminalTable.astro
  • src/components/ui/organisms/BookSession.astro
  • src/components/ui/organisms/CookiesBanner.astro
  • src/components/ui/organisms/Hero.astro
  • src/components/ui/organisms/ToolWidget.astro
  • src/pages/404.astro
  • src/pages/agence/cartographie.astro
  • src/pages/agence/methode.astro
  • src/pages/contact.astro
  • src/pages/index.astro
  • src/pages/plan-du-site.astro
  • src/pages/ressources/academy.astro
  • src/pages/ressources/index.astro
  • src/sections/bordered-pullquote/Component.astro
  • src/sections/closing-cta-band/Component.astro
  • src/sections/diagnostic-stages/Component.astro
  • src/sections/editorial-case-grid/Component.astro
  • src/sections/eeat-panel/Component.astro
  • src/sections/hero-manifesto/Component.astro
  • src/sections/hero-social-proof/Component.astro
  • src/sections/hover-reveal-words/Component.astro
  • src/sections/keyword-strip/Component.astro
  • src/sections/media-bento/Component.astro
  • src/sections/numbered-layer-list/Component.astro
  • src/sections/pricing-tabs-showcase/Component.astro
  • src/sections/prose-aside/Component.astro
  • src/sections/publications-panel/Component.astro
  • src/sections/rich-text/Component.astro
  • src/sections/signed-writing-list/Component.astro
  • src/sections/site-showcase/Component.astro
  • src/sections/sticky-scroll-storytelling/Component.astro
  • src/sections/used-service-callout/Component.astro
  • src/styles/global.css
  • src/styles/section-layouts.css

211 sections du catalogue utilisent --ink. Clique l'une d'elles : elle se charge dans l'aperçu du catalogue et hérite de tes overrides.

FIG · 0bis · Échelle fluide

Trois knobs paramétriques --fl-* pilotent l'échelle d'espacement --space-7 à --space-15 (et, par ricochet, tout le rythme de section). Chaque cran est un clamp() interpolé entre une plage de viewport. Bouge un curseur : l'échelle dérivée se recalcule en direct, sans rebuild.

Knobs pilotes

0.82

Plancher mobile de l'espacement. À 1 l'échelle est figée (aucune réduction) ; plus c'est bas, plus l'écart desktop ↔ mobile se creuse.

360

Largeur de viewport où l'échelle touche son plancher (px).

1440

Largeur de viewport où l'échelle atteint sa valeur desktop ancre (px).

Échelle dérivée --space-*

cadre : auto

Cadre redimensionnable (poignée en bas à droite) : étire-le pour simuler un viewport et voir l'interpolation clamp() entre plancher et ancre. Les barres consomment var(--space-N) ; leur largeur mesurée s'affiche à droite.

--space-7
...
--space-8
...
--space-9
...
--space-10
...
--space-11
...
--space-12
...
--space-13
...
--space-14
...
--space-15
...
01 · Atomes · 25 variants rendus

Chaque variant de chaque atome, rendu et réactif au panneau LIVE.

Kicker · tone × size

§ Tone muted
tone="muted"
§ Tone accent
tone="accent"
§ Tone dim (on dark)
tone="dim"
§ Size 10
size={10}
§ Size 14
size={14}
§ Transform none
textTransform="none"

ChapterLabel · tone

II · 2.0 · Acte II · variant muted
tone="muted"
IV · 4.0 · Acte IV · variant dim
tone="dim"

Button · variant × size

PillCTA · variant

TerminalCTA · variant × size

Bi · contenu bilingue

Rendu côté FR

<Bi fr en />

Atomes comportementaux (catalogués)

CursorDot Curseur magnétique custom (suit la souris)
ScrollProgress Barre de progression de lecture (scroll global)
ProgressBar Barre de progression générique (valeur 0..1)
SectionTransition Transition inter-sections (hairline animée)
FormErrors Liste d'erreurs de formulaire (a11y live region)
02 · Molécules · 12 rendues

Variants principaux de chaque molécule, données de démo FR.

SectionHeader · tone

IIActe II · La méthode

StatRow · tone paper / ink

+312%
Trafic organique
6 sem.
Mise en ligne
0
Dépendance no-code
24/7
Disponibilité
< 1s
LCP médian
100
Score perf

TechPillRow · kind primary / open / neutral

Astro TypeScript Tailwind Vercel

PainPointInline · severity (4)

Le site ne convertit pas.

Tunnel repensé orienté preuve.

Dépendance à un no-code fermé.

Stack ouverte, code possédé.

SEO technique négligé.

Rendu statique + données structurées.

Pas d'analytics propre.

Mesure first-party respectueuse.

NewsletterSignup · card

NewsletterSignup · inline

RelatedCards

Méthode

Notre approche

Du diagnostic à la mise en ligne.

→ Cas

Étude de cas

Un site refait en 6 semaines.

→ Offre

Audit de maturité

Mesure où vous en êtes.

→

ProofBand

Témoignage
« L'équipe a livré un site qui convertit, sans dépendance. »
Direction · PME industrielle
Mesures
+48%
Leads qualifiés
6 sem.
Délai

PricingTier · highlight

§ 01

Starter

Site vitrine orienté preuve.

2 000 € HT · forfait
  • ✓ Jusqu'à 8 pages
  • ✓ SEO technique
  • ✓ Mise en ligne 4 sem.
Démarrer
Recommandé
§ 02

Standard

Tunnel de conversion complet.

4 000 € HT · forfait
  • ✓ Pages illimitées
  • ✓ Tunnel + CRM
  • ✓ A/B testing
Recommandé
§ 03

Custom

Plateforme sur-mesure.

Sur devis
  • ✓ Architecture dédiée
  • ✓ Intégrations API
  • ✓ Support prioritaire
Nous contacter

Breadcrumb

ShareButtons

TerminalMockup · tone ink / paper

waimia · studio ◉ live

$ édite --accent → tout se repeint

waimia · studio ◉ paper

$ tone paper

03 · Sections · 14 échantillon sur 221

Rendu inline (pas iframe) pour rester réactif au token LIVE. Aperçu tronqué en hauteur. Catalogue complet des 221 sections ci-dessous ↓

hero-split grand →
Démo Hero · Split layout

L'agent IA pioche, ne réinvente pas.

Le composable W6 expose 19 sections cataloguées. Chaque section atomique, testée, validée.

Voir le catalogue →Lire la doc
problems-grid grand →

Trois frictions qui tuent votre conversion

01
Site trop lent

FCP 4,2 s. Lighthouse 34.
−7 % de conversion par seconde.

WordPress avec 40 plugins : chaque visiteur attend. Chaque seconde perdue coûte 7 % de conversions. Sans IA, impossible d'automatiser les corrections.

02
Contenu stale

1 article en 6 semaines.
Vos concurrents en publient 8/sem avec IA.

Le brief, les relectures, le SEO, la mise en ligne : 6 semaines par article. Vos concurrents IA publient 8 articles/semaine optimisés Google et GEO.

03
Leads sans relance

3 200 leads collectés.
Jamais relancés dans l'heure.

Les prospects remplissent les formulaires. Ils attendent. La conversion est 7× plus probable dans l'heure, mais personne ne rappelle. Le pipeline dort.

stat-block grand →

Signal terrain

En cinq jours, nous avions un workflow déployé et un plan d'action validé par le comité.
Direction des opérations · Cabinet conseil B2B
  • 5 jpour cibler le levier
  • 4 sem.au premier workflow
  • 1interlocuteur unique
  • MesuréROI, jamais estimé
method-timeline grand →
Méthode · 4 étapes

Le processus en quatre temps

De l'audit initial au déploiement, chaque étape produit un livrable mesurable.

  1. 01
    Audit

    Cartographie stack, données, équipe, frictions.

    Semaine 1
  2. 02
    Diagnostic

    Priorisation des chantiers par ROI mesurable.

    Semaine 2
  3. 03
    Pilote

    Premier workflow en production sous 5 jours.

    Semaines 3-4
  4. 04
    Industrialisation

    Extension à 6-10 semaines après mesure.

    Semaines 5-8
  5. 05
    Formation

    Montée en autonomie des équipes sur les agents livrés.

    Semaine 9
  6. 06
    Mesure & itération

    Boucle de mesure continue, ajustements pilotés par la donnée.

    En continu
feature-grid grand →
Démo · grille features

Trois piliers du DS Waimia

  • ▸ tokens
    Tokens canoniques

    115 tokens CSS exposés à :root. Pioche, n'invente pas.

    Voir les tokens
  • ▸ grid
    Composants atomiques

    114 composants en 7 couches Tier 1.

    Explorer
  • ▸ shield
    Anti-hallucination

    5 anti-patterns documentés avec commandes de détection.

    Lire la doc
  • ▸ layers
    Moteur de layout

    Un CSS unique porte toutes les recettes ; les composants se branchent.

    Voir le moteur
pricing-table grand →
Tarifs · démo

Trois paliers

Activation 1 500 €
  • ▸ 1 workflow
  • ▸ Audit 5 jours
  • ▸ Formation 1 jour
Démarrer
Growth 5 000 €
  • ▸ 5-8 workflows
  • ▸ Système complet 6-10 sem.
  • ▸ Support 90j
Choisir
Sur-mesure Devis
  • ▸ Workflows illimités
  • ▸ Architecture dédiée
  • ▸ Support 12 mois
Discuter
faq-accordion grand →
FAQ · 3 questions

Questions fréquentes

Q.01 Combien de temps prend un projet ?

AI Activation · 1 semaine. Growth System · 6 à 10 semaines.

Q.02 Quels sont vos tarifs ?

Diagnostic gratuit, puis grille de 2 000 à 10 000 € HT selon la maturité, sur-mesure au-delà.

Q.03 Compatible avec notre stack actuelle ?

Oui : HubSpot, Salesforce, Notion, Excel, GA4, etc.

testimonial-block grand →
Témoignages · démo

Ce que disent les clients

  • En 5 jours, on a câblé l'IA dans nos workflows. Premier ROI à 6 semaines.
    Marie L.
    COO · PME B2B Services
  • Méthodologie carrée. Mesure avant/après. On a su exactement ce qui marchait.
    Thomas R.
    CFO · ETI Industrie
comparison-table grand →

Comparatif tiers

CapacitéActivation 1 sem.Growth SystemSur-mesure
Audit complet◉◉◉
Workflows IA15-8illimité
Formation équipe◦◉◉
Support 90j◦◉◉
marquee-band grand →
proof-bar grand →
Preuves · démo design system
  • 118tokens canoniques
  • 19sections W6
  • 114composants atomic
  • 0hallucinations
services-grid grand →
FIG II · 2.0 · Acte II · La méthode
6 SERVICES · UNE COUCHE CONTINUE

Six services, appris en livrant, pas en PowerPoint.

FIG 2.01 45 min

Diagnostic 45 min

On identifie le levier métier avant la techno.

Connecteurs Audit · Cartographie · Stack mapping
→
FIG 2.02 +840 K€ pipe

Système d'acquisition

Pipeline reconnecté, qualification automatisée.

Connecteurs Google Ads · Meta · LinkedIn · GA4 · Landing
→
FIG 2.03 −35% manuel

CRM augmenté

Le CRM qui relance, qualifie et alerte, sans que vous touchiez rien.

Connecteurs HubSpot · Salesforce · Pipedrive · Outlook
→
FIG 2.04 Décide en 2 min

Lisibilité des données

Tableaux de bord temps réel : décidez en 2 minutes, pas en réunion.

Connecteurs GA4 · Search Console · SEO tools · Dashboards
→
FIG 2.05 +12h / sem

Tâches répétitives éliminées

Workflows qui tournent sans vous.

Connecteurs Workflows · Agents IA · Excel · Office
→
FIG 2.06 Souverain

Sur-mesure ETI

Architecture souveraine, quand les outils du marché butent sur votre périmètre.

Connecteurs Trust Center · Design System · Governance · VirtuoseOS
→
La couche continue qui relie les six services
cta-final grand →
FIG V · 5.0 · Acte V · Passer à l'action

Stop le théâtre. Câbler.

45 minutes. On regarde. On audite. On chiffre. Si on n'a rien à vous proposer, on le dit. On ne relance pas.

● DISPONIBLE · RÉPONSE SOUS 24H

Câbler →bonjour@waimia.com

Diagnostic gratuit · sans engagement · réponse sous 24h.

manifesto-block grand →
§ Manifeste · Viewport 01

On se méfie du théâtre IA. Le purple-glass, les cerveaux-circuits, les bento grids qui ne disent rien. On écrit en français, on lit la documentation Stripe, on livre du code le mardi et on mesure le pipeline le vendredi.

04 · Catalogue · 221 sections · 26 catégories

Toutes les sections du registry, par catégorie. Clique un type : son aperçu se charge ci-contre et hérite des tokens édités dans le panneau LIVE. Chaque type a aussi son rendu isolé (preview) et sa fiche technique (fiche) ; chaque catégorie a sa page dédiée.

About Sections 1
Banner Sections 1
Breadcrumb Sections 2
Comparison Sections 10
Contact Sections 2
Content Listing Sections 5
CTA Sections 11
Editorial Sections 11
FAQ Sections 4
Feature Sections 45
Gallery Sections 3
Hero Header Sections 51
Index Sections 5
Logo Sections 6
Manifesto Sections 4
Newsletter Sections 2
Pricing Sections 6
Process Sections 4
Stats Sections 9
Table Sections 3
Team Sections 2
Terminal Sections 5
Testimonial Sections 14
Timelines 10
Trust Sections 4
Utility Sections 1
04 bis · Atelier de section

Sélectionne un type dans le catalogue ci-dessus (ou ci-dessous le type courant), puis change son fond, sa variante ou ses textes : l'aperçu réagit en direct, sans rechargement. Le fond applique data-bg sur la section ; les composants ink-ready se repeignent instantanément.

Aperçu LIVE plein écran →

Les modifications de fond / variante / texte ne rechargent jamais ce cadre : elles manipulent directement son DOM.

05 · Doublons & dette (avant de figer le DS)
153 groupes de classes au corps identique
253 groupes de déclarations dupliqués dans les styles scoped (cross-fichiers)
15 tokens déclarés jamais consommés via var()
126 tokens dans le verrou (check:token-lock)

Verrou non-bloquant actif. Il passera bloquant via DS_TOKEN_LOCK_ENFORCE=1 quand le DS sera figé.

Tokens inutilisés (15)

--color-accent--color-accent-sur-clair--color-accent-sur-sombre--color-ink--color-ink-2--color-ink-3--color-muted--color-muted-2--color-paper--color-paper-2--color-paper-3--fl-max-vw--fl-min-vw--fl-space-shrink--space-14

Classes au corps identique (153 groupes)

Corps CSS normalisé identique = candidates à la fusion avant de figer le DS.

  • .arr.case-row 
    color:var(--accent-text);font-family:var(--font-mono);font-size:var(--text-body);justify-self:end;opacity:0;transition:opacity var(--dur-hover), transform var(-…
  • .arr.case-row 
    opacity:1;transform:translateX(6px)
  • .arr.mega-link 
    color:var(--accent-text);flex:none;font-size:var(--text-small)
  • .aside.sec-hd 
    color:var(--muted);font-size:var(--text-small);line-height:var(--leading-relaxed);max-width:420px;text-wrap:pretty
  • .auto-grid.qgrid 
    display:grid;gap:var(--gut);grid-template-columns:repeat( auto-fit, minmax(min(100%, var(--card-min, 16rem)), 1fr) )
  • .badge.k.mega-col-hd.mega-featured 
    color:var(--accent-text);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:var(--tracking-caps);text-transform:uppercase
  • .bd.mega-featured 
    color:var(--muted);font-size:var(--text-small);line-height:var(--leading-relaxed);max-width:280px
  • .bento-fluid.cols-2.cols-3.cols-4.cols-5.ec-grid.qgrid 
    grid-template-columns:1fr
  • .blur-in.clip-up.hair-draw.hero-split.reveal.reveal-fade.reveal-stagger.reveal-up.row-lines.scale-in.w 
    clip-path:none !important;filter:none !important;opacity:1 !important;transform:none !important;transition:none !important;width:100% !important
  • .blur-in.in.is-visible 
    filter:blur(0);opacity:1;transform:none
  • .book-lede.cases-client.home-typo.notes-row-text.qs-quote.sec-transition-phrase.social-proof__logo.sysarch-cap 
    font-family:var(--font-sans) !important;font-style:normal !important
  • .book-lede.home-typo.qs-quote.sysarch-cap 
    font-family:var(--font-display) !important;font-style:italic !important
  • .breadcrumb-bar.masthead-bar.util-crumbs 
    --header-height:0px;--hero-chrome-above:var(--breadcrumb-bar-h)
  • .breadcrumb-bar.util-crumbs 
    max-width:none;padding-left:0;padding-right:0
  • .breadcrumb-bar.util-crumbs 
    padding-top:var(--space-2)
  • .btn-accent.btn-primary.on-dark 
    background:var(--accent);color:#fff
  • .btn-ghost.btn-primary 
    background:var(--ink);color:var(--paper)
  • .btn-ghost.btn-primary.on-dark 
    background:var(--paper);color:var(--ink)
  • .btn-ghost.on-dark 
    border-color:var(--paper);color:var(--paper)
  • .btn-spinner.marquee.track 
    animation:none
  • .btn.btn-link 
    box-shadow:0 12px 28px rgba(var(--ink-rgb), 0.10);transform:translateY(-1px)
  • .btn.case-body.editorial-body.lift.m-sheet.mega.mega-scrim.prose 
    transition:none !important
  • .btn.lift 
    box-shadow:none !important;transform:none !important
  • .btn.m-sheet-end 
    justify-content:center;width:100%
  • .burger.is-open 
    opacity:0
  • .burger.is-open 
    transform:translateY(-2.5px) rotate(-45deg)
  • .burger.is-open 
    transform:translateY(2.5px) rotate(45deg)
  • .caret.hdr-nav-item.hdr-nav-trigger.is-open 
    transform:rotate(180deg)
  • .caret.hdr-nav-trigger 
    display:inline-block;font-size:var(--text-micro);opacity:0.55;transition:transform var(--dur-hover) var(--ease)
  • .case-body.editorial-body.prose 
    background-image:linear-gradient(var(--hairline-strong), var(--hairline-strong)), linear-gradient(var(--accent), var(--accent));background-position:0 100%, 100%…
  • .case-body.editorial-body.prose 
    background-position:0 100%, 0 100%;background-size:100% 1px, 100% 1px;color:var(--accent-text)
  • .case-row.client 
    font-family:var(--font-sans);font-size:var(--text-h2);font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:1.04
  • .case-row.client.dot.featured.hdr.m-sheet-acc-col.m-sheet-top.prose.wm 
    color:var(--accent-text)
  • .case-row.client.e-title.editorial-cell.how-row.mega-featured.sec-hd.ttl.u-serif-accent.u-serif-accent-em 
    color:var(--accent-text);font-family:var(--font-display);font-style:italic;font-weight:var(--fw-regular)
  • .case-row.dur.sector 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:0.04em;text-transform:uppercase
  • .case-row.idx 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:var(--tracking-mono)
  • .case-row.impact 
    color:var(--ink-2);font-size:var(--text-small);font-weight:var(--fw-medium)
  • .cases-client.home-typo.notes-row-text 
    font-weight:var(--fw-medium) !important
  • .cases-tbl.how-grid 
    border-top:1px solid var(--ink)
  • .cert.dot.trust-pill 
    background:var(--ink)
  • .clip-up.in.is-visible 
    clip-path:inset(0 0 0 0)
  • .col-1.col-10.col-11.col-12.col-2.col-3.col-4.col-5.col-6.col-7.col-8.col-9.col-aside.col-full-bleed.col-prose.col-pull-left.col-pull-right 
    grid-column:1 / -1
  • .col-2.qgrid.span-wide 
    grid-column:span 2
  • .col-prose.col-pull-left.col-pull-right 
    grid-column:1 / span 8
  • .cols-2.cols-3.cols-4.cols-5.ec-grid.qgrid 
    grid-template-columns:repeat(2, 1fr)
  • .cols-3.ec-grid 
    grid-template-columns:repeat(3, 1fr)
  • .cols-4.ec-grid 
    grid-template-columns:repeat(4, 1fr)
  • .cols-5.ec-grid 
    grid-template-columns:repeat(5, 1fr)
  • .compliance.dot.trust-pill 
    background:#2aa876
  • .cta.hdr 
    align-items:center;background:var(--ink);border-radius:var(--radius-pill);color:var(--paper);display:inline-flex;font-size:var(--text-small);font-weight:var(--f…
  • .cta.hdr 
    background:var(--accent);box-shadow:var(--shadow-cta-hover);color:#fff;transform:translateY(-1px)
  • .cta.hdr-end.hdr-nav.mega.mega-scrim.page-pill-btn.page-pill-l.reveal-curtain.scroll-morph__from 
    display:none
  • .cta.mega-featured 
    align-self:flex-start;margin-top:var(--space-1)
  • .desc.e-body.editorial-cell.how-row 
    color:var(--muted);font-size:var(--text-small);line-height:var(--leading-relaxed);text-wrap:pretty
  • .dot.trust-pill 
    background:var(--accent);border-radius:var(--radius-full);height:6px;width:6px
  • .draw-on-scroll.in.is-visible 
    filter:blur(0);opacity:1
  • .drop-cap-accent.page-pill-btn 
    color:var(--ink)
  • .e-go.editorial-cell 
    color:var(--accent-text);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:0.1em;margin-top:var(--space-4)
  • .e-list.editorial-cell 
    align-items:center;color:var(--ink-2);display:flex;font-size:var(--text-small);gap:var(--space-2)
  • .e-list.editorial-cell 
    border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:7px;list-style:none;margin-top:auto;padding-top:20px
  • .e-list.editorial-cell 
    color:var(--accent-text);content:"§";flex-shrink:0;font-family:var(--font-display);font-size:var(--text-small);font-style:italic
  • .e-num.editorial-cell 
    color:var(--accent-text);font-family:var(--font-display);font-size:var(--text-h1);font-style:italic;letter-spacing:-0.03em;line-height:1
  • .e-tag.editorial-cell 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:var(--tracking-caps);text-transform:uppercase
  • .e-title.editorial-cell 
    font-family:var(--font-sans);font-size:var(--text-h3);font-weight:var(--fw-medium);letter-spacing:-0.012em;line-height:var(--leading-h3);text-wrap:balance
  • .e-title.editorial-cell.faq-accordion__arrow.faq-accordion__q.faq-accordion__q-label.home-typo 
    font-family:var(--font-sans) !important;font-weight:var(--fw-medium) !important
  • .ec-grid.editorial-cell 
    border-bottom:1px solid var(--hairline);border-right:1px solid var(--hairline)
  • .editorial-cell.sec-dark 
    background:rgba(var(--paper-rgb), 0.04)
  • .editorial-cell.sec-paper 
    background:var(--paper-2)
  • .flag.m-sheet-acc-col 
    background:rgba(var(--accent-rgb), 0.08);border-radius:var(--radius-pill);color:var(--accent-text);display:inline-block;font-family:var(--font-mono);font-size:v…
  • .flag.mega-link 
    background:rgba(var(--accent-rgb), 0.08);border-radius:var(--radius-pill);color:var(--accent-text);flex:none;font-family:var(--font-mono);font-size:var(--text-s…
  • .g.m-sheet-acc-col 
    color:var(--muted);font-family:var(--font-sans);font-size:var(--text-micro);font-weight:var(--fw-regular);letter-spacing:var(--tracking-body);line-height:var(--…
  • .goal.mega-col-hd 
    color:var(--muted);font-family:var(--font-sans);font-size:var(--text-micro);font-weight:var(--fw-regular);letter-spacing:var(--tracking-body);line-height:var(--…
  • .hair-draw.hdr-nav-trigger.in.is-visible 
    width:100%
  • .hdr-nav-item.hdr-nav-trigger.is-open 
    background:rgba(var(--ink-rgb), 0.05);opacity:1
  • .hdr-nav-item.hdr-nav-trigger.row-lines.sticky-editorial 
    position:relative
  • .hdr-nav-trigger.is-active.page-pill-btn.page-pill-k 
    color:var(--accent-text);opacity:1
  • .hdr.is-scrolled 
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);background:rgba(var(--paper-rgb), 0.92);padding:10px 28px
  • .hdr.is-scrolled.wm 
    font-size:24px
  • .hdr.m-sheet-top.wm 
    color:var(--accent-text);font-style:italic
  • .hdr.wm 
    font-family:var(--font-display);font-size:28px;letter-spacing:-0.018em;transition:font-size var(--dur-base) var(--ease)
  • .home-typo.qs-quote 
    font-size:var(--text-h2) !important
  • .how-row.m-sheet-acc-col 
    border-bottom:none
  • .how-row.num 
    color:var(--accent-text);font-family:var(--font-display);font-size:var(--text-h1);font-style:italic;letter-spacing:-0.026em;line-height:0.9
  • .how-row.ttl 
    font-family:var(--font-sans);font-size:var(--text-h2);font-weight:var(--fw-medium);letter-spacing:-0.015em;line-height:var(--leading-h3);text-wrap:balance
  • .img.mega-featured 
    aspect-ratio:5/4;background:var(--paper-2);border:1px solid var(--hairline);margin-top:var(--space-2);overflow:hidden;position:relative
  • .img.mega-featured 
    height:100%;inset:0;object-fit:cover;position:absolute;width:100%
  • .in.is-visible.reveal-blur-clip 
    clip-path:inset(0 0 0 0);filter:blur(0);opacity:1;transform:translateY(0)
  • .in.is-visible.reveal-curtain 
    transform:scaleX(0)
  • .in.is-visible.reveal-fade 
    opacity:1
  • .in.is-visible.reveal-mask-up.reveal-split-letter.s-char 
    opacity:1;transform:translateY(0)
  • .in.is-visible.reveal-stagger 
    transition-delay:120ms
  • .in.is-visible.reveal-stagger 
    transition-delay:180ms
  • .in.is-visible.reveal-stagger 
    transition-delay:240ms
  • .in.is-visible.reveal-stagger 
    transition-delay:300ms
  • .in.is-visible.reveal-stagger 
    transition-delay:360ms
  • .in.is-visible.reveal-stagger 
    transition-delay:420ms
  • .in.is-visible.reveal-stagger 
    transition-delay:480ms
  • .in.is-visible.reveal-stagger 
    transition-delay:540ms
  • .in.is-visible.reveal-stagger 
    transition-delay:600ms
  • .in.is-visible.reveal-stagger 
    transition-delay:60ms
  • .in.is-visible.reveal-stagger 
    transition-delay:660ms
  • .in.is-visible.reveal-stagger 
    transition-delay:770ms
  • .in.is-visible.reveal-stagger.reveal-up.scale-in.scroll-morph__to 
    opacity:1;transform:none
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:0ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:110ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:330ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:440ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:550ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:var(--dur-trim)
  • .in.is-visible.reveal-zoom-in 
    opacity:1;transform:scale(1)
  • .in.is-visible.reveal.reveal-stagger 
    filter:blur(0);opacity:1;transform:translateY(0)
  • .in.is-visible.row-lines 
    transform:scaleX(1)
  • .is-active.page-pill-btn 
    --accent-text:var(--accent-sur-sombre);background:var(--ink);color:var(--paper)
  • .is-open.m-sheet 
    transform:translateY(0)
  • .is-open.m-sheet-acc.m-sheet-acc-body 
    max-height:2200px
  • .is-open.m-sheet-acc.m-sheet-acc-head.plus 
    color:var(--accent-text);transform:rotate(45deg)
  • .is-open.mega 
    opacity:1;pointer-events:auto;transform:translateY(0)
  • .is-open.mega-scrim 
    opacity:1;pointer-events:auto
  • .is-visible.page-pill 
    opacity:1;pointer-events:auto;transform:none
  • .item.marquee 
    color:var(--ink);font-family:var(--font-sans);font-size:var(--text-h3);font-weight:var(--fw-medium);letter-spacing:-0.01em;padding:0 26px
  • .k.m-sheet-acc-col 
    color:var(--accent-text);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:var(--tracking-caps);margin-bottom:6px;text-transform:uppercase
  • .lang-toggle.on 
    color:var(--ink);font-weight:var(--fw-medium)
  • .lang-toggle.sep 
    opacity:0.35
  • .m-sheet-acc-col.q 
    border-left:2px solid var(--accent);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-small);font-weight:var(--fw-medium);line-height:var(--lea…
  • .m-sheet-acc-col.t 
    font-family:var(--font-sans);font-size:var(--text-h3);font-weight:var(--fw-medium);letter-spacing:-0.008em;margin-bottom:10px
  • .m-sheet-acc-col.t 
    font-size:var(--text-h3);margin-bottom:var(--space-1)
  • .m-sheet-acc-head.num 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-small);letter-spacing:0.16em
  • .m-sheet-acc-head.plus 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-body);transition:transform var(--dur-hover) var(--ease)
  • .m-sheet-acc-head.ttl 
    flex:1;font-family:var(--font-sans);font-size:var(--text-h2);font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:var(--leading-h2);padding-left:14p…
  • .m-sheet-top.wm 
    font-family:var(--font-display);font-size:26px
  • .marquee.sep 
    color:var(--muted);font-size:var(--text-glyph);font-style:normal;padding:0 var(--space-1)
  • .marquee.track 
    animation:slide 95s linear infinite;display:inline-flex
  • .mega-bottom.mega-col-footer 
    border-bottom-color:var(--accent-text);color:var(--accent-text)
  • .mega-col-hd.t 
    color:var(--accent-text);font-family:var(--font-sans);font-size:var(--text-h3);font-weight:var(--fw-medium);letter-spacing:-0.01em;line-height:var(--leading-h3)
  • .mega-col.mega-col-hd 
    border-bottom:none;gap:var(--space-2);margin-bottom:var(--space-3);padding-bottom:0
  • .mega-col.mega-col-hd.t 
    font-size:var(--text-h3);letter-spacing:-0.015em;line-height:var(--leading-h3);text-wrap:balance
  • .mega-col.mega-link 
    align-items:baseline;border-bottom-color:var(--hairline);display:flex;gap:10px;padding:11px 0
  • .mega-col.mega-link 
    border-bottom-color:transparent
  • .mega-col.mega-link 
    border-bottom-color:var(--hairline)
  • .mega-featured.ttl 
    color:var(--ink);font-family:var(--font-sans);font-size:var(--text-title-lg);font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:1
  • .mega-link.sub 
    color:var(--muted);display:block;font-size:var(--text-small);font-weight:var(--fw-regular);line-height:var(--leading-lede);margin-top:3px
  • .mega-link.t 
    display:block;font-size:var(--text-small);font-weight:450;letter-spacing:var(--tracking-body)
  • .n.sec-hd 
    align-items:center;color:var(--accent-text);display:flex;font-family:var(--font-mono);font-size:var(--text-small);gap:14px;letter-spacing:var(--tracking-caps);m…
  • .on-dark.signature-grid 
    background-image:linear-gradient(to right, rgba(var(--accent-rgb), 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--accent-rgb), 0.1) 1px, tran…
  • .page-pill-btn.page-pill-k 
    color:inherit;font-weight:var(--fw-medium);opacity:0.7
  • .page-pill-btn.page-pill-l 
    color:inherit
  • .reveal-split-letter.s-char 
    display:inline-block;opacity:0;transform:translateY(105%);transition:opacity 520ms var(--ease-out, var(--ease-out)), transform 520ms var(--ease-out, var(--ease-…
  • .reveal.reveal-blur-clip.reveal-curtain.reveal-mask-up.reveal-split-letter.reveal-stagger.reveal-zoom-in.s-char 
    clip-path:none;filter:none;opacity:1;transform:none;transition:none
  • .roman.sec-hd 
    color:var(--accent-text);font-family:var(--font-display);font-size:var(--text-h2);font-style:italic;letter-spacing:-0.02em;line-height:1
  • .scroll-morph__from.scroll-morph__to 
    grid-area:1 / 1;will-change:opacity, transform
  • .span-lg.span-sm.span-wide 
    grid-column:auto;grid-row:auto
  • .start-1.start-2.start-3.start-4.start-5.start-6.start-7.start-8 
    grid-column-start:auto
  • .u-serif.u-serif-em 
    font-family:var(--font-display);font-style:italic;font-weight:var(--fw-regular)

Atelier reserve au desktop

Ces outils de composition demandent au moins 1024px de large. Ouvre l'atelier sur un ecran plus grand pour piloter le catalogue, le studio et le builder.

Retour au site →