General
Colors
Fond clair
Theme colors
bg-primary
bg-primary-subtle
text-primary
text-primary-emphasis
bg-accent
bg-accent-subtle
text-accent
text-accent-emphasis
bg-success
bg-success-subtle
text-success
text-success-emphasis
bg-primary
bg-primary-subtle
text-primary
text-primary-emphasis
bg-accent
bg-accent-subtle
text-accent
text-accent-emphasis
bg-success
bg-success-subtle
text-success
text-success-emphasis
Typography
display-1
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1>
Bootstrap heading 1
Bootstrap heading 2
Bootstrap heading 3
Bootstrap heading 4
Bootstrap heading 5
Bootstrap heading 6
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil. This is a link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil.
<p class="lead">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, at?
Spacing
1
2
3
4
5
6
7
8
Border radius
Échelle d'arrondi par taille de l'élément. Règle de cascade : un élément imbriqué doit avoir un radius inférieur à son parent (sinon il "déborde" visuellement).
rounded-2
0.375rem (default)
Petits éléments fonctionnels (inputs, badges).
rounded-3
0.5rem
Éléments imbriqués (card-img, photo dans une card).
rounded-4
1rem — default cards
Cards standard. Appliqué d'office via $card-border-radius.
rounded-5
2rem
Containers immersifs (hero, CTA majeur, section décorative).
Cas spéciaux : rounded-pill pour boutons (déjà appliqué via $btn-border-radius) et badges arrondis, rounded-circle pour avatars.
Components
Avatars
Badges
Buttons
btn-{size}
btn-{color}
disabled
lift and shadow-{color}
bg-gradient
btn-outline-{color}
disabled
subtle
socials-{name}
btn-icon
Shadows
Shapes
components/_shapes.scss
Curve horizontal 1
Curve horizontal 2
Curve horizontal 3
Angle horizontal 1
Wave horizontal 1
Straight horizontal 1
Curve vertical
Angle vertical
Patterns
Blocs composés réutilisables, extraits des pages canoniques. Reprendre tels quels et ajuster le contenu.
Section dark atmosphère
Section d'ambiance utilisée pour les hero, les blocs d'emphase et les transitions de page. Combine fond du body et dégradé décoratif bg-dual-gradient avec thème sombre forcé.
- Conteneur :
<section class="bg-body bg-dual-gradient" data-bs-theme="dark"> - Si la section suit une autre section claire, ajouter
pt-0et unshapeen haut (voir Shapes) pour la transition. - Ajouter un
shape shape-bottomavant</section>pour terminer en douceur sur la section suivante. - Source canonique :
accueil.html— Hero, Pourquoi nous, Se former, Témoignages.
Titre d'ambiance
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section header
En-tête de section, deux variantes selon l'intention. Centré pour les sections « catalogue » qui s'adressent à tous (services, articles, livres). Asymétrique pour les sections « narratives » où le titre porte une affirmation et le lead l'argumente.
Un titre accrocheur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Wrapper : row justify-content-center + col-md-10 col-lg-8 text-center
Un titre
en deux temps
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Wrapper : row align-items-end + deux col-lg-6
Value card transparent
Carte « valeur » utilisée pour les listes de qualités, d'engagements ou de bénéfices. Volontairement légère (transparente, sans bordure) pour ne pas alourdir une section déjà chargée. Le hover révèle un fond bg-lightest qui matérialise l'interactivité sans casser le rythme visuel.
- Classes :
card bg-transparent border-0 hover-style h-100 - Style inline obligatoire :
style="--hover-bg: var(--bs-body-bg-lightest);" - Empiler dans
row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 anim-staggerpour l'animation séquentielle. - Source canonique :
accueil-final.html— section « Pourquoi nous ».
Accessibilité
Accessible et clair sans jargon inutile.
Pragmatisme
Solutions pratiques applicables à votre réalité.
Expérience
Plus de 15 ans pour une compréhension fine.
Actions & liens
Doctrine d'usage des boutons et liens, basée sur l'intention de l'action. La section Buttons ci-dessus inventorie les classes ; ici on dit quand employer quoi.
Hiérarchie des actions
Du plus engageant au plus discret. Une seule action principale par section. Dans un hero, toujours coupler primaire + secondaire pour donner le choix sans forcer.
btn btn-lg btn-primary
CTA majeur de la page ou de la section (hero, fin de section, CTA final).
btn btn-secondary (taille au choix)
« Voir plus », alternative, navigation en bas de liste. Ne lutte pas avec la principale.
(Survoler la carte)
Notre expertiselink-primary (lien pur, pas de btn)
Card parent en hover-group + stretched-link sur le lien pour rendre toute la carte cliquable. Le label est wrappé dans un <span class="hover-underline"> qui s'anime au survol de la carte. Icône arrow-up-right en suffixe. Le font-weight: semibold est appliqué automatiquement à tous les liens dans une .card (règle globale dans _custom-styles.scss).
Pourquoi un span ? stretched-link et hover-underline utilisent tous deux le pseudo-élément ::after du <a> et entrent en conflit s'ils sont sur le même élément. Le span isole l'underline du stretched-link.
Le droit bouge vite : tenez-vous au courant pour réagir à temps.
a.hover-underline
Dans le corps d'un texte ou d'un meta. Soulignement uniquement au hover.
Conventions d'icônes
Bibliothèque Lucide (utilisée partout). Taille width="1em" height="1em" pour qu'elle suive le font-size du bouton, et aria-hidden="true" systématique (le texte du bouton porte déjà le sens).
chevron-down
Ancre interne, scroll vers une autre section de la même page (« Nos services » dans le hero).
arrow-up-right
Navigation vers une autre page ou lien sortant. Utilisé sur les CTA in-card et les liens du type « Notre expertise ».
headset
CTA prise de contact / RDV / consultation. Réservé au CTA final ou à l'accroche RDV.
Règles transverses
stretched-linkrend tout le conteneur parent (la card) cliquable : à mettre sur un seul lien par card, sinon les autres deviennent inactifs.- Dans le hero, toujours primaire + alternative (secondaire ou ancre interne) pour ne pas mettre le visiteur au pied du mur.
- Sur fond coloré (card primary, section dark), garder le contraste :
btn-secondaryoubtn-primaryselon le thèmedata-bs-themeappliqué — ne pas hardcodertext-white. - Pas de label vide : un bouton sans texte doit avoir
aria-labelet la classebtn-icon.
Scribble underline
Soulignement décoratif animé pour mettre en valeur un mot-clé dans un titre. Le SVG est injecté par scribble.js, l'animation se déclenche au scroll (désactivée si prefers-reduced-motion).
scribble-primary ou scribble-primary-light. Pas de scribble-accent, scribble-info, scribble-light, etc. — le scribble est un marqueur de marque, il porte la couleur de marque.
Variantes de forme (scribble-01 à scribble-03) — choisir selon le rythme visuel de la page :
Droit accessible au quotidien
Nos derniers articles
Se former avec nous
- Wrapper :
<span class="scribble scribble-0[1-3] scribble-primary">mot-clé</span> - Réserver à un mot ou groupe court dans un titre, jamais sur du corps de texte.
- Un seul scribble par titre, deux maximum par section pour ne pas saturer.