1. Comprendre la formule CSS clamp()

CALIBRAGE FLUIDE & RESPONSIVE

Notre Titre Maître de Page (H1) :

clamp(2rem, 3.2vw, 3rem)

La fonction CSS clamp(minimum, dynamique, maximum) permet à un texte de s'adapter automatiquement à la largeur de l'écran du visiteur, tout en garantissant des garde-fous stricts pour ne jamais être ni trop petit, ni trop grand.

✦ 2rem (Minimum = 32px) : Même sur le plus petit smartphone (320px de large), le titre reste imposant et lisible sans jamais descendre sous 32px.
✦ 3.2vw (Taille dynamique = 3.2% de l'écran) : Sur tablette et PC portable, le texte grandit proportionnellement à la fenêtre sans saut brutal.
✦ 3rem (Maximum = 48px) : Sur un très grand moniteur (1920px ou 4K), le titre plafonne à 48px pour ne jamais écraser le reste de l'écran.

Équivalence en Pixels réels selon l'écran :

Appareil	Largeur écran	Taille réelle
Smartphone	375 px	32 px (2rem)
Tablette portrait	768 px	32 px
PC portable standard	1280 px	41 px
Grand écran Desktop	1440 px	46 px
Écran large (Full HD+)	1920 px +	48 px (3rem max)

2. Échelle Typographique Harmonisée

HIÉRARCHIE VISUELLE STRICTE

Niveau & Balise	Police & Graisse	Formule CSS	Équivalent Pixels	Rôle dans la page
H1 / Page Title	`Syne` (Medium 500)	`clamp(2rem, 3.2vw, 3rem)`	32px à 48px	Titre principal unique de page (modèle calqué sur Sébastien Bages / À propos). Blanc pur (#fff), Medium 500, sans point final, sans graisse 700/800 déformante.
H2 / Section Title	`Syne` (Semi-Bold 600)	`clamp(1.4rem, 2.2vw, 1.85rem)`	22.4px à 32px	Grands axes narratifs (ex: Trajectoires 01, 02, 03). Blanc pur, aligné gauche.
H3 / Carte Majeure	`Syne` (Semi-Bold 600)	`1.15rem à 1.25rem`	18.4px à 23.2px	Titres d'encarts structurants ou grands blocs fonctionnels.
H4 / Titre de service	`Syne` (SemiBold 600)	`1.05rem` (fixe)	16.8px	En-tête de carte empilée, titres de solutions ou d'étapes.
Sur-titre (Eyebrow)	`JetBrains Mono` (700)	`0.82rem` (fixe)	13px	Catégorie haute, majuscules, espacement lettre 0.12em, couleur Or (#c5a059).
Sous-titre (Hero Lead)	`Plus Jakarta Sans` (500)	`clamp(1.1rem, 1.3vw, 1.25rem)`	17.6px à 20px	Phrase d'accroche sous le H1. Couleur Or doux ou Blanc cassé.
Corps de texte (Body)	`Plus Jakarta Sans` (400)	`0.95rem` à `1rem`	15.2px à 16px	Texte de description. Justifié sur paragraphes longs, interligne 1.65 à 1.75.
Notes & Légendes (Small)	`Plus Jakarta Sans` (400)	`0.82rem` à `0.85rem`	13px à 13.6px	Délais de réponse, mentions légales, informations contextuelles discrètes.

Aperçu visuel en direct de la hiérarchie :

BALISE H1 · TITRE MAÎTRE DE PAGE font-family: 'Syne' · clamp(2rem, 3.2vw, 3rem) · color: #ffffff

Solutions Numériques Sur-Mesure

BALISE H2 · GRAND TITRE DE SECTION / TRAJECTOIRE font-family: 'Syne' · clamp(1.4rem, 2.2vw, 2rem) · color: #ffffff

01 Le Piège du « Presque »

BALISE H3 · TITRE DE BLOC OU MATRICE font-family: 'Syne' · clamp(1.15rem, 1.5vw, 1.45rem) · color: #ffffff

Ce que vous y gagnez concrètement en tant que prescripteur

BALISE H4 / EN-TÊTE DE CARTE font-family: 'Syne' · 1.05rem (16.8px) · color: #ffffff

Automatisation de processus administratifs & légaux

Traitement automatisé de dossiers, génération de rapports réglementaires conformes et contrôle documentaire.

PARAGRAPHE NARRATIF (LEAD & CORPS DE TEXTE) font-family: 'Plus Jakarta Sans' · 1.08rem · Justifié sans césure

Les progiciels et suites généralistes du marché disposent de dizaines de fonctionnalités et font presque tout ce dont vous avez besoin. C'est précisément dans ce « presque » que viennent se nicher vos plus grandes pertes de temps : une tâche qui reste manuelle, une information à ressaisir d'un outil à l'autre, un contrôle dispersé ou une obligation réglementaire non couverte.

3. Palette Chromatique Officielle

SOUVERAINETÉ, PROFONDEUR & CONTRASTE

Fond Noir Base

#0C0D10

Arrière-plan principal de toutes les pages. Profondeur souveraine.

Surface Carte

#13151A

Fond des cartes, formulaires et panneaux semi-transparents.

Dégradé Marque

Vert ➔ Cyan ➔ Bleu

Grands chiffres (01, 02, 03), survol des en-têtes de menu, accents.

Blanc Titane

#FFFFFF

100% des titres (H1, H2, H3), boutons pill principaux d'action.

Or Numismatique

#C5A059

Sous-titres d'audience, badges de prestige, sur-titres mono.

Gris Acier

#9496A1

Corps de texte secondaire, liens de menu au repos.

Bordure Subtile

rgba(255,255,255, 0.08)

Lignes de séparation et contours de cartes élégants.

4. Règles d'Or Graphiques & Éditoriales

CE QU'IL FAUT FAIRE & NE SURTOUT PAS FAIRE

✕ À PROSCRIRE STRICTEMENT

⛔ Aucun titre de page en vert ou en couleur : tous les titres H1, H2 et H3 doivent obligatoirement être blancs (#ffffff).
⛔ Aucun rectangle arrondi vert avec point : les pilules tags avec puce verte (« [ • Mon tag ] ») sont interdites.
⛔ Aucun point final à la fin des titres : ne jamais écrire « Solutions sur-mesure. » mais « Solutions sur-mesure ».
⛔ Aucune lueur néon verte criarde : les effets box-shadow vert fluo au focus sont proscrits. Les focus restent fins et discrets.
⛔ Aucun centrage des titres de page (hors index) : les titres et sous-titres ne doivent jamais être centrés (text-align: center; margin: 0 auto;).
⛔ Aucune justification sur les titres : les titres et sous-titres sont systématiquement alignés à gauche.
⛔ Aucun titre de bloc artificiel : proscrire « Présentation Studio », « Expertise 01 », « Module A ».

✓ STANDARDS EXIGÉS

✔ Largeur de conteneur standardisée à 1 400 px (max-width: 1400px; padding: 160px 48px ...;) sur toutes les pages (calquée sur À propos) pour supprimer les ruptures de gabarit.
✔ Alignement strict à gauche des en-têtes : titres H1 et sous-titres de page démarrent tous à gauche sur la même coordonnée visuelle.
✔ Titres en police Syne 100% blancs (graisse Medium 500) avec un letter-spacing resserré (-0.03em) pour un rendu architectural sobre.
✔ Espaces insécables ( ) obligatoires entre chaque chiffre et sa valeur (ex: 78 %, 1 500 €, 12 minutes, 40 ans, 1er salarié) et avant les deux-points.
✔ Cartes de services empilées verticalement : pleine largeur, aérées, les unes en dessous des autres pour éviter les colonnes étriquées.
✔ Justification sélective et élégante : réservée aux paragraphes narratifs longs, sans césure de mots disgracieuse (hyphens: none).
✔ Boutons Pills blancs sobres : fond blanc pur au repos, texte noir, survol légèrement grisé sans néon.
✔ Pied de page avec watermark LOASPULSE visible et synchronisé sur 100% des pages.

5. Bibliothèque de Composants Clés

ÉLÉMENTS RÉUTILISABLES TESTÉS

Sélecteur de Langue (Header FR / EN)

Boutons d'Action (Pills)

Action Principale → Action Secondaire

Carte de Service / Fonctionnalité (Pleine Largeur)

Rémunération & Rétrocession financière

Percevez une commission directe attractive sur chaque licence ou déploiement DUERP Go ! souscrit par vos clients recommandés, dans la limite d'un volume défini de dossiers mensuels conventionnés.

Encart Citation / Déclaration Fondateur

« Les entreprises doivent réaliser toujours davantage de traitements administratifs, souvent imposés par la réglementation. Dans les petites structures en particulier, il faut parfois faire des choix et laisser certaines obligations de côté simplement pour continuer à faire fonctionner l'activité. »