Article
Card par défaut
Bordure légère, fond surface, idéal pour des listings denses.
Phase 2 — tokens
1. Couleurs
Échantillonnées depuis le CSS production de agilea-group.com (2026-04-27).
primary
#E96622
primary-dark
#C5511A
primary-light
#F6C2A7
primary-tint
#FCE8DE
dark
#55473F
muted
#8A7E72
surface
#FFFFFF
surface-alt
#F4F4F4
border
#D9D9D9
Phase 2 — typo
2. Typographie
Poppins via Google Fonts (300–800 + italic 400).
x-heading level=1
Embarquez vos équipes dans une transformation durable
x-heading level=2 eyebrow
Next transformation
Les parcours hybrides
x-heading level=3
Section intermédiaire
body — text-base
Depuis près de 15 ans, nos clients font confiance à AGILEA pour transformer durablement leur supply chain et leur management de projet par le flux.
Poppins weights
300 — Poppins Light
400 — Poppins Regular
500 — Poppins Medium
600 — Poppins SemiBold
700 — Poppins Bold
800 — Poppins ExtraBold
400 italic — emphasis on transformation
Phase 4 — components
3. x-button
Variants (primary / outline / dark / secondary / ghost), 3 sizes, lien ou bouton selon la prop href.
Phase 4 — components
4. x-heading
Niveaux 1–6 (taille/poids dérivés), props eyebrow, align, tone, as. <em> à l'intérieur du titre passe automatiquement en italic.
Phase 4
Titre niveau 1 avec un accent italic
centered
Titre niveau 2 centré
Titre niveau 3
Sur fond sombre
Titre tone=white
Phase 4 — components
5. x-icon
Wrapper SVG inline avec props size et label (accessibilité). Icône fournie via le slot.
xs
sm
md
lg
xl
Phase 4 — components
6. x-counter
Affichage statique pour Phase 4. Animation au scroll en Phase 6.
750+
Projets
300+
Clients
5000+
Stagiaires formés
10%
CA en R&D
Phase 4 — components
7. x-card
Variants default / shadow / accent / dark. Toute la card devient cliquable si href est posé.
Featured
Card à ombre
Pour des items mis en avant qui doivent légèrement décoller du fond.
Highlight
Card teintée
Utilise primary-tint pour cadrer une thématique ou un CTA secondaire.
Sur fond sombre
Card dark
Pour les sections sombres du site.
Lien
Card cliquable
La card entière est un lien — survolez pour voir l'élévation.
Phase 4 — components
8. x-logo-cloud & x-logo-carousel
Deux présentations partageant la même API. Cloud pour grille statique, carousel pour défilement horizontal (scroll-snap, JS-free).
x-logo-cloud columns=4
x-logo-carousel
Phase 4 — components
9. x-navigation
Wrapper sémantique autour de wp_nav_menu. Fallback explicite si aucun menu n'est encore assigné.
Phase 4 — primitives
11. x-section & x-container
Tout sur cette page utilise déjà x-section + x-container. Voici les variantes de fond.
background=surface-alt
Section sur fond gris alterné
background=primary-tint
Section teintée orange clair
background=dark
Section sombre — texte blanc
background=primary