v1.6.0

Design system · v1.0

Une marque.
Toutes les pages.

La référence unique pour concevoir n'importe quelle page du site ou écran de l'app Le Permis Libre. Tout part du site actuel ; chaque composant ajouté pour l'app et les nouvelles pages est dessiné dans le même langage visuel.

13 composants documentés App mobile + site web Lisible par un agent IA

Développeurs & agents IA

Le contrat

Ces règles priment sur tout le reste de la page. Si un exemple semble les contredire, la règle gagne.

Règles non négociables
  1. Un seul CSS. Charger lpl-fonts.css puis lpl-components.css (ou copier les balises <style id="lpl-fonts"> et <style id="lpl-system-css"> de cette page). Le CSS propre à une page ne fait que de la mise en page : il ne redéfinit ni couleur, ni police, ni rayon, ni ombre.
  2. Aucune valeur en dur. Pas de #hex, pas de px de rayon ou d'ombre inventés. Couleurs via les tokens sémantiques --color-* ; espacements via --space-* ; rayons via --r-* / --pill.
  3. Rose = action. Une seule action principale .btn-primary visible par écran (ou par section sur le web), toujours framboise, y compris pour l'option recommandée d'une confirmation. Le noir sert aux actions fortes secondaires. Le rose ne sert jamais à signaler une erreur.
  4. Toujours une touche framboise. Le framboise est la couleur n°1 de la marque : chaque bloc (section, carte, modale, bandeau, pop-up) en porte au moins une petite touche (bouton, étoile, lettre alternative, icône ou chip).
  5. Des visages, pas des initiales. Une pastille de profil affiche toujours une photo. L'initiale n'est qu'un secours. Les contenus d'onglets et les sections de contenu portent au moins un élément visuel (photo d'humain, tuile, chiffre en grand).
  6. Erreur = orange, toujours avec icône + texte. Comme le feu orange : « à revoir », jamais punitif. L'erreur prend l'orange soutenu (--orange-2 / --orange-3) : fond blanc, contour et pastille d'icône orange, étiquette orange pleine. La pêche pâle (--peach-0) est réservée à l'accompagnement (conseil, astuce, aide humaine) et n'exprime jamais une erreur. Succès = citron (--color-success-*). Sélection = encre. Pas de rouge dans le système.
  7. Grands aplats : encre, blanc ou crème, rien d'autre. La page est crème ; sections, bandes, colonnes de tableau, grandes cartes : blanc, crème ou encre. Les couleurs ne remplissent que de petits éléments : le framboise et la pêche peuvent faire de petits aplats (tuile de mosaïque, carte d'argument, encart de conseil, remarque) ; le citron, jamais d'aplat, seulement des touches (coche, pastille, étiquette). Jamais une section rose, pêche ou citron, jamais une colonne surlignée en citron pâle. Pas de gris, pas de dégradé décoratif.
  8. Une couleur dit toujours quelque chose. Framboise = la voix de la marque et l'action ; citron = ce qui est acquis, validé, disponible ; orange et pêche = l'humain, l'accompagnement, l'attention ; encre = le calme, le sérieux, la mise en valeur ; rose pâle = la route. Avant de colorer une carte, vérifier que sa couleur correspond à son contenu. Sinon : carte blanche et un élément de couleur qui porte le sens (une pastille, une icône, une illustration).
  9. Le citron est un accent, jamais un fond. Un seul élément citron par bloc (une pastille, un trait, une lettre). Pas de tuile ni de carte citron, pas de tag citron à côté de barres citron. Les barres de données et les traits de progression prennent le citron clair (--lime-1) ; le citron vif (--lime-2) reste aux petites pastilles « fait ». Une tendance positive (« +12 % ») se met en .chip-brand.
  10. Sur fond encre, les couleurs passent en clair. Orange et citron prennent leur teinte claire (--peach-1, --lime-1) sur un fond encre ; le framboise reste la couleur qui signale l'élément important (le point à retravailler, l'action).
  11. La route est toujours fluide. Deux virages au plus, larges : le rayon d'un virage est toujours plus grand que la largeur de la route. Elle entre et sort toujours par les bords du conteneur, comme si elle continuait. Sur un petit format (post, bannière, carte), on garde la même courbe douce et on réduit --road-width, on n'ajoute pas de virages.
  12. Emak pour les titres, Poppins pour le reste. Emak 900 majuscules : .display. Emak 700 casse normale : .title, .title-s, noms, chiffres .num. Jamais Emak dans un paragraphe, un bouton, un champ ou un label.
  13. Une lettre alternative par grand titre. Dans un .display, entourer une seule lettre de <span class="alt"> : elle prend le glyphe alternatif Emak. Choisir une lettre sans accent ni cédille (les alternatives couvrent A–Z seulement). Deux couleurs possibles : rose framboise sur fond clair, citron clair sur fond encre (automatique). Jamais blanc, orange ou pêche. Jamais deux lettres.
  14. Arrondi partout. Boutons, chips, segmented, header : --pill. Champs, listes, menus : --r-s. Cartes : --r-m. Grandes cartes : --r-l. Blocs de section : --r-xl. Aucune surface à angles droits.
  15. Accessible par défaut. Cibles ≥ 44 px. Ne jamais retirer le focus visible. États exprimés en ARIA (aria-pressed, aria-selected, aria-current, aria-invalid, aria-expanded). Toute animation doit s'arrêter avec prefers-reduced-motion.
  16. Icônes du sprite uniquement. <svg class="icon" aria-hidden="true"><use href="#i-nom"/></svg>, trait 2 px. Pas d'emoji dans l'interface (seule exception : ★ dans une note).
  17. Copier le markup des fiches tel quel. Structure, classes et attributs ARIA compris. Remplacer le texte et les images, pas l'ossature.
  18. Composant manquant ? L'assembler à partir des composants et tokens existants. Ne jamais créer de nouvelle couleur, police, rayon ou ombre. Nommer la classe selon la convention ci-dessous et le signaler dans la livraison.

Arbre de décision

Les questions qu'on se pose en construisant une page, et la réponse du système.

Quel bouton ?

  • Action principale de l'écran → .btn-primary (+ .arr si elle fait avancer).
  • Action forte secondaire sur fond clair → .btn-ink.
  • Action secondaire discrète → .btn-ghost.
  • Sur photo ou fond de couleur → .btn-white / .btn-white-rose.
  • Positive sur fond sombre → .btn-lime. Accompagnement humain → .btn-peach.
  • Destructive (annuler une leçon, supprimer) → .btn-ink avec un libellé explicite, dans une .modal-confirm.
  • Navigation dans le texte → .link ; retour → .back-link.

Quel champ ?

  • 2 à 4 options exclusives courtes → .seg.
  • Options qui méritent une explication → .choice (radio).
  • Plusieurs choix possibles → .check ou .chip-filter.
  • Plus de 6 options → select.field-input.
  • Une date → .cal ; une heure → .slots.
  • Un nombre petit → .qty ; une plage → .range.
  • Texte libre → .field (label flottant).

Quelle surface ?

  • Page → crème --color-bg.
  • Contenu groupé → .card blanche.
  • Zone en creux dans une carte → --color-surface-sunken.
  • Moment fort, message de marque → .dark-block encre.
  • Marketing : 3-4 arguments → .pcard, couleur choisie selon le sens de l'argument (sinon .pcard-paper + un élément coloré qui l'illustre). Jamais dans l'app transactionnelle.

Quel retour à l'utilisateur ?

  • Erreur d'un champ → .field[data-invalid] + .field-error.
  • Message lié au contenu, persistant → .callout.
  • Confirmation d'une action, éphémère → .toast.
  • Décision bloquante → .modal-confirm.
  • Rien à afficher → .empty. Chargement → .skel.

Conventions de code
QuoiConventionExemple
ComposantNom court, sans préfixe (hérité de la home V6).btn .card .field
Variante.composant-variante, toujours avec la classe de baseclass="btn btn-primary btn-sm"
Élément enfant.composant-partie, utilisé seul.field-label .modal-head
État interactifAttribut ARIA natif en prioritéaria-pressed="true" aria-current="page"
État métierdata-state / data-resultdata-state="done" data-result="correct"
État JS sans équivalent ARIA.is-*.is-scrolled .is-open
Fond sombreModificateur .on-darkclass="eyebrow on-dark"
UtilitairesListe fermée.wrap .section .section-tight .section-head .split .band .band-inverse .flow .cluster .grid-12 .grid-auto .center .muted .sr .divider
Contexte sombreSur .card-inverse .band-inverse .dark-block .footer (ou .on-dark-context), les tokens de texte et de trait sont redéfinis : les composants s'adaptent seuls<div class="card card-inverse"><p class="lead">
Documentation.sg-* : ne jamais copier.sg-comp .sg-canvas

Checklist avant de livrer une page
  1. Aucune couleur, police, ombre ou rayon déclaré en dehors de lpl-components.css.
  2. Un seul .btn-primary visible par écran.
  3. Chaque .display a au plus une lettre .alt.
  4. Toutes les images ont un alt descriptif (vide si décoratives) et des dimensions width/height.
  5. Tous les champs ont un <label> lié ; les erreurs sont reliées par aria-describedby.
  6. Navigation complète au clavier, focus toujours visible, ordre logique.
  7. Rendu vérifié à 390 px, 900 px et 1280 px de large. Pas de défilement horizontal.
  8. Avec prefers-reduced-motion: reduce, plus rien ne bouge en boucle.
  9. Textes relus : tutoiement côté élève, chiffres au format français, espaces insécables avant : ; ? ! €.

Versioning de la charte

Journal des décisions

Chaque série du labo de feedback ajuste la charte. Ce qui est validé entre dans le système, ce qui est refusé devient une règle.

Voir les 25 décisions
VersionSourceDécisionEffet dans le système
1.1Labo série 1 · P1 refuséeGrands aplats uniquement encre, blanc ou crème. Pas de section rose.Règle 05 réécrite. Bandes : .band (blanc) et .band-inverse (encre) seulement.
1.1Labo série 1 · P1 refuséeLettre alternative : glyphe Emak uniquement, rose framboise ou citron clair.Règle 07 réécrite. Citron automatique sur fond encre.
1.1Labo série 1 · P2 validée avec réserveMosaïque validée ; dans les tuiles de couleur, l'info importante en grand.Nouveau composant .bento avec .bt-big / .bt-text.
1.1Labo série 1 · P3 refuséeJamais de grand aplat citron pâle, y compris pour surligner une colonne..table .is-lpl : cadre encre 2 px et en-tête encre, sans fond.
1.1Labo série 1 · P4, P5, P6, P8 validéesFormulaire à côté d'un bloc encre, formules à pilules de couleur, parcours en 3 feux, magazine.Patterns validés ; nouveaux composants .road, .mag.
1.1Labo série 1 · P7 non notéeFond pêche de section contraire à la nouvelle règle des aplats.Corrigée sur fond blanc dans l'archive.
1.2Labo série 2 · 6/6 validéesSurvol des champs soudés : le fond et les filets restent, contour encre ajouté..field-group réécrit (bordure réelle).
1.2Labo série 2 · P5Badge de réussite de l'élève en framboise, pas en citron.Nouveau .chip-brand. Citron = validation d'un élément ; framboise = statut, fierté.
1.2Labo série 3 · 6/6 validéesPhoto de témoignage floue refusée.Règle images : jamais de photo affichée plus grande que sa taille d'origine.
1.2Labo série 3 · P5Trop de citron sur fond encre.Puces de liste blanches sur fond encre ; citron limité à la lettre alternative et aux pastilles.
1.2Labo série 3 · P6Il manque de l'espace avant le pied de page..footer a une marge haute fixe.
1.3Labo séries 4 à 8 · 20/20 validéesToujours une touche framboise par bloc (pop-up cookies, P5-4).Nouvelle règle 04 du contrat.
1.3Labo série 5 · P1CTA framboise conservé, même dans une confirmation.L'option recommandée en framboise ; l'action destructive en bouton secondaire.
1.3Labo série 7 · P4Toujours des photos dans les pastilles de profil.Toutes les initiales remplacées par des miniatures ; règle 05.
1.3Labo série 4 · P2, P3Onglets trop sages ; liste sans couleur.Contenu d'onglet toujours visuel ; étiquettes de couleur sur les cartes photo.
1.3Labo série 8 · P4Planning validé.Nouveau composant .agenda.
1.4Labo séries 9 · P1, P3 et 10 · P2Trop de citron : tuile « on recrute », gros ronds de frise, barres + tag.Règle « citron = accent ». Étapes faites : rond 26 px + trait citron clair. Barres .progress-lime en citron clair. Tendance en .chip-brand.
1.4Labo série 10 · P1Photo du moniteur trop petite.Nouveau motif .photo-tilt : carré incliné de 2°, droit au survol de la carte.
1.4Labo série 12 · P1, P3, P4La courbe de la route n'est pas fluide.Règle « route fluide » ; tracés des petits formats redessinés.
1.4Labo série 13 · P3Le champ devient gris une fois rempli.Saisie automatique du navigateur neutralisée : le champ garde son fond blanc.
1.5Labo série 14 · P2Le délai de réponse du conseiller en citron clair.Une info rassurante (rapide, disponible) prend .chip-lime.
1.5Labo série 17 · P4Route plus large et qui continue hors du cadre ; orange clair sur encre ; framboise pour le point important.Règle « sur fond encre, les couleurs passent en clair ». Route : elle déborde toujours du conteneur.
1.5Principes de la charteAucun rapport entre la couleur des cartes et leur contenu.Règle « une couleur dit toujours quelque chose ». Cartes de principes refaites : blanches, chacune avec un élément qui illustre son idée dans la bonne couleur.
1.6Revue des couleursLa pêche portait deux sens (aide et erreur).Erreur = orange soutenu sur fond blanc ; pêche pâle = accompagnement uniquement.
1.6Revue des proportionsLe citron est moins utilisé que la pêche : la pêche peut faire des petits aplats, le citron jamais.Hiérarchie : crème > blanc > encre > framboise > pêche > citron.

L'esprit

Quatre principes

01

Direct et chaleureux

On parle comme un bon moniteur : simple, encourageant, jamais condescendant. Des phrases courtes. Des titres qui claquent.

Framboise : la voix de la marque.
02

Sans surprise

Le prix, les étapes, ce qui reste à faire : toujours visibles. Une interface qui rassure avant de vendre.

Citron : ce qui est acquis, vérifié.
03

La route comme fil

La route framboise pâle qui serpente, le feu tricolore, le compteur d'étapes : la progression vers le permis structure tout.

Framboise pâle : la route, toujours en fond.
04

Énergie maîtrisée

Des micro-mouvements à ressort, de la couleur franche, mais un fond calme et une seule action à la fois.

Encre : le calme ; framboise : l'unique action.

Les briques

Fondations

Tokens, typographie, espace, forme, mouvement, grille, icônes, images. Tous les composants en découlent.

Couleurs

Trois niveaux de tokens. Les primitives sont la palette brute (home V6, inchangée : aucune couleur ajoutée). Les sémantiques donnent un rôle : c'est ce qu'on utilise dans tout nouveau code. Les alias gardent les anciens noms de la home pour la compatibilité.

Framboise

La voix de la marque et l'action. Framboise 2 = bouton principal, lettre alternative, statut de fierté. Framboise 1 = accent sur fond encre. Framboise 0 = la route, fond de pastille d'icône. Framboise 4 = très sombre (en test).

Framboise 0--rose-0#FFCCDE
Framboise 1--rose-1#FF80AD
Framboise 2--rose-2#E80053
Framboise 3--rose-3#B20040
Framboise 4--rose-4#260D16

Citron

Ce qui est acquis, validé, disponible. Un seul élément citron par bloc, jamais en fond. Citron 1 = étiquette, barres, lettre alternative sur encre ; citron 2 = petites pastilles « fait » ; jamais de texte citron sur clair.

Citron 0--lime-0#F6FFCC
Citron 1--lime-1#EAFF80
Citron 2--lime-2#BAE800
Citron 3--lime-3#8FB200
Citron 4--lime-4#21260D

Pêche

Pêche pâle (0) et pêche (1) : l'humain, l'accompagnement, le conseil. Orange soutenu (2, 3) : uniquement le signal d'erreur (« à revoir », comme le feu orange), sur fond blanc, et les étoiles de notation. Pêche 4 = très sombre (en test). Texte orange interdit sur fond clair.

Pêche 0--peach-0#FFE9CB
Pêche 1--peach-1#FFCA80
Pêche 2 (orange)--orange-2#E88700
Pêche 3--orange-3#B26800
Pêche 4--orange-4#261C0D

Encre et neutres

Le crème est le fond de page. Le blanc est réservé aux surfaces posées dessus (cartes, champs). L'encre fait le texte, les blocs sombres de mise en valeur, la sélection et le calme.

Encre--ink#13121A
Encre 2--ink-2#25212F
Crème--cream#FCF7F3
Blanc--paper#FFFFFF
Texte atténué--color-text-mutedencre 64 %

Proportions

  1. Crème · très grand. Le fond de toutes les pages.
  2. Blanc · grand. Le fond des cartes, des bandes, des champs.
  3. Encre · grand. Le texte, et le fond des blocs et cartes de mise en valeur.
  4. Framboise · moyen. La couleur la plus présente après les fonds : bouton principal, lettre alternative, mots clés, highlights, étiquettes de statut.
  5. Pêche · petit. Peut être en aplat sur des petits blocs : remarque, conseil, encart d'accompagnement, tuile. Orange soutenu réservé aux erreurs.
  6. Citron · très petit. Les petites touches de validation (coches, étapes faites, « disponible »), la lettre alternative sur encre. Jamais en aplat.

Si une page paraît « colorée », c'est qu'elle a trop d'accents ; si le citron s'y voit plus que la pêche, c'est qu'il est mal utilisé.

Tokens sémantiques — à utiliser

Token CSSValeurRôle / règle
--color-bgvar(--cream)
= #FCF7F3		Fond de page.
--color-surfacevar(--paper)
= #FFFFFF		Cartes, champs, modales.
--color-surface-sunkenvar(--cream)
= #FCF7F3		Zones en creux dans une carte (options, récap, plages de dates).
--color-surface-inversevar(--ink)
= #13121A		Blocs sombres (offre, CTA final, toast).
--color-textvar(--ink)
= #13121A		Texte principal (17:1 sur crème).
--color-text-mutedrgba(var(--ink-rgb),.64)Texte secondaire (5,5:1 sur crème). Ne pas descendre plus bas.
--color-text-inversevar(--cream)
= #FCF7F3		Texte sur surface sombre.
--color-text-inverse-mutedrgba(var(--cream-rgb),.72)Texte secondaire sur surface sombre.
--color-text-on-actionvar(--paper)
= #FFFFFF		Texte sur bouton rose.
--color-borderrgba(var(--ink-rgb),.10)Séparateurs, contours décoratifs.
--color-border-strongrgba(var(--ink-rgb),.22)Bouton ghost, cartes cliquables au repos.
--color-border-inputrgba(var(--ink-rgb),.48)Contour des champs de saisie (≥ 3:1, WCAG 1.4.11).
--color-border-selectedvar(--ink)
= #13121A		Sélection : contour 2 px encre (option choisie, jour, carte active).
--color-action-primaryvar(--rose-2)
= #E80053		UNE action principale par vue. Boutons, liens d'action, onglet actif.
--color-action-primary-hovervar(--rose-3)
= #B20040		Survol / pression de l'action principale.
--color-action-secondaryvar(--ink)
= #13121A		Action secondaire forte (btn-ink), sélection.
--color-highlightvar(--lime-1)
= #EAFF80		Mise en avant positive : badge, chip, soulignement citron.
--color-highlight-strongvar(--lime-2)
= #BAE800		Barres de progression positives, pastille « disponible ».
--color-carevar(--peach-1)
= #FFCA80		Accompagnement, humain, conseiller.
--color-ratingvar(--orange-2)
= #E88700		Étoiles de notation uniquement.
--color-focusvar(--rose-2)
= #E80053		Anneau de focus clavier (3 px, décalage 3 px).
--color-success-bgvar(--lime-0)
= #F6FFCC		Fond succès.
--color-success-bordervar(--lime-2)
= #BAE800		Bordure / pastille succès.
--color-success-textvar(--lime-4)
= #21260D		Texte succès.
--color-error-bgvar(--paper)
= #FFFFFF		Fond erreur : blanc. Le signal vient de l'orange soutenu (contour, icône, pastille). La pêche pâle est réservée à l'accompagnement.
--color-error-bordervar(--orange-3)
= #B26800		Contour d'un champ ou d'une option en erreur (4,3:1, ≥ 3:1 requis).
--color-error-accentvar(--orange-2)
= #E88700		Pastilles, barres, contour d'encart en erreur. Jamais pour du texte.
--color-error-iconvar(--orange-3)
= #B26800		Icône d'erreur.
--color-error-textvar(--orange-4)
= #261C0D		Texte d'erreur (14:1 sur pêche pâle). Le signal vient de l'icône et du contour orange.
--color-info-bgvar(--paper)
= #FFFFFF		Fond information (neutre).
--color-info-bordervar(--color-border-strong)
= rgba(var(--ink-rgb),.22)		Bordure information.
--color-disabled-bgrgba(var(--ink-rgb),.06)Fond désactivé.
--color-disabled-textrgba(var(--ink-rgb),.40)Texte désactivé (exempté de contraste, mais toujours accompagné d'une raison).
--color-trackrgba(var(--ink-rgb),.08)Rail des barres de progression, notes, curseurs.
--color-overlayrgba(var(--ink-rgb),.45)Voile derrière modales et menus.

Contrastes vérifiés

PaireRatioUsage autorisé
Encre sur crème17,5Tout texte
Texte atténué sur crème5,5Texte secondaire. Ne jamais descendre sous 64 % d'opacité.
Blanc sur framboise 24,6Texte de bouton (AA)
Framboise 3 sur blanc7,1Texte rose (liens retour, labels)
Encre sur citron 116,9Chips, badges, boutons citron
Orange 4 sur pêche 014,2Texte d'erreur
Orange 3 sur blanc4,3Contour de champ en erreur, icône d'erreur (≥ 3:1). Pas de petit texte.
Orange 2 sur blanc2,7Interdit pour du texte. Étoiles et icônes seulement.
Citron 2 sur blanc1,4Interdit pour du texte. Barres, pastilles, fonds.
Contour de champ sur blanc3,2Bordure de champ (WCAG 1.4.11)
  • Le rose pour ce qui se clique et fait avancer : bouton principal, onglet actif, focus, lettre alternative.
  • Du rose pour signaler un problème, ou plusieurs boutons roses côte à côte.
  • L'orange pour ce qui est à revoir : champ mal rempli, mauvaise réponse, paiement refusé. Toujours avec une icône et une phrase qui dit quoi faire.
  • Ajouter un rouge : le système n'en a pas. L'orange suffit, l'erreur est rare.
  • Le citron pour ce qui est acquis : économies, étapes validées, bonne réponse, disponibilité.
  • Du texte citron, orange ou pêche sur fond clair : illisible.

Typographie

Emak (500, 700, 900) porte la voix de la marque : grands titres en majuscules, titres de carte, chiffres. Poppins (400, 500, 600, 700) porte tout le reste. Les tailles sont fluides (clamp()) : un même token sert du mobile au desktop.

.display.h-impactEmak 900 · 58→147 px · interligne 0,9
CTA final, couverture

Pour de bon.

.display.h1Emak 900 · 43→94 px · 0,94
Titre de page (1 par page)

Ton permis.

.display.h2Emak 900 · 51→106 px
Titre de grande section

À ton rythme

.display.h3Emak 900 · 42→74 px
Titre de section

Nos moniteurs

.display.h-screenEmak 900 · 32→50 px
Titre d'écran dans l'app

On prend la route ?

.titleEmak 700 · 24→32 px · casse normale
Titre de carte, de bloc

Ton chemin vers le permis

.title-sEmak 700 · 19 px
Question FAQ, nom, option

Combien coûte une heure de conduite ?

.eyebrowPoppins 600 · 12,5 px · +14 % · majuscules · étoile framboise
Sur-titre de section

Le code de la route

.leadPoppins 400 · 18→21 px · atténué
Chapô sous un titre

L'app qui te prépare. Le moniteur qui te suit. Le prix qui ne te plume pas.

bodyPoppins 400 · 16→17 px · 1,55
Texte courant

Tu réserves tes leçons quand tu veux, avec le moniteur de ton choix, près de chez toi. Annulation gratuite jusqu'à 48 h avant.

.labelPoppins 600 · 15 px
Label de champ, ligne de liste

Choisir un jour

.body-s / .caption14 px / 12,5 px
Aide, métadonnées

Leçon d'1 h · Lyon 7e · Boîte automatique

.numEmak 900 · chiffres tabulaires
Prix, notes, compteurs

519 € 4,93/5

Token CSSValeurRôle / règle
--step--20.75rem12 px — mentions légales, compteurs.
--step--10.875rem14 px — texte secondaire, labels compacts.
--step-0clamp(1rem,.96rem + .2vw,1.0625rem)16→17 px — texte courant.
--step-1clamp(1.125rem,1.05rem + .4vw,1.3125rem)18→21 px — chapô (lead).
--step-2clamp(1.5rem,1.3rem + .9vw,2rem)24→32 px — titre de carte (Emak 700).
--step-3clamp(2rem,1.55rem + 1.9vw,3.1rem)32→50 px — titre d'écran app / H3 web.
--step-4clamp(2.6rem,1.9rem + 3.2vw,4.6rem)42→74 px — titre de section.
--step-5clamp(3.2rem,2rem + 5.6vw,6.6rem)51→106 px — grand titre de section (H2 home).
--step-6clamp(3.6rem,1.8rem + 9vw,9.2rem)58→147 px — titre d'impact (CTA final).
Token CSSValeurRôle / règle
--font-display"Emak","Poppins",system-ui,sans-serifEmak — titres, chiffres, noms. Graisses 500/700/900.
--font-body"Poppins",system-ui,-apple-system,"Segoe UI",sans-serifPoppins — tout le reste. Graisses 400/500/600/700.
  • Un seul .h1 par page. Les titres d'écran de l'app utilisent .h-screen.
  • Emak dans un bouton, un label, un paragraphe ou un menu.
  • Couper les grands titres en phrases courtes avec un point : « Ton permis. Pour de bon. »
  • Mettre deux lettres .alt dans un titre, ou en mettre une dans un .title de carte.

Espacements

Échelle sur une base de 4 px (ajout : la home en valeurs libres). Les marges de section et de grande carte sont fluides. Règle simple : 4-8 px à l'intérieur d'un élément, 12-24 px entre éléments d'un groupe, 32-64 px entre groupes, --space-section entre sections.

1
2
3
4
5
6
8
10
12
16
20
24
30
Token CSSValeurRôle / règle
--space-00pxEspacement 0px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-14pxEspacement 4px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-28pxEspacement 8px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-312pxEspacement 12px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-416pxEspacement 16px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-520pxEspacement 20px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-624pxEspacement 24px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-728pxEspacement 28px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-832pxEspacement 32px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-1040pxEspacement 40px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-1248pxEspacement 48px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-1456pxEspacement 56px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-1664pxEspacement 64px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-2080pxEspacement 80px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-2496pxEspacement 96px (base 4 px). AJOUT : la home n'avait pas d'échelle.
--space-30120pxEspacement 120px (base 4 px). AJOUT : la home n'avait pas d'échelle.
Token CSSValeurRôle / règle
--gutterclamp(16px,2.2vw,28px)Marge latérale et gouttière de grille.
--max1280pxLargeur max du contenu web.
--max-text68chLargeur max d'un paragraphe.
--space-sectionclamp(64px,8vw,120px)Padding vertical d'une section web.
--space-section-tightclamp(40px,5vw,72px)Padding vertical d'une section compacte.
--space-cardclamp(22px,2.6vw,34px)Padding intérieur des grandes cartes.
--tap44pxTaille minimale de cible tactile.
--app-bar-h64pxHauteur de la barre supérieure de l'app.
--tab-bar-h72pxHauteur de la barre d'onglets de l'app (hors safe-area).
Token CSSValeurRôle / règle
--z-base0
--z-sticky20Éléments sticky dans le flux.
--z-header50Header web, barres de l'app.
--z-dropdown60Menus, popovers.
--z-sheet80Bottom sheets.
--z-modal90Modales.
--z-toast100Toasts.

Rayons

La marque est ronde. Plus une surface est grande, plus son rayon est grand. Sous 640 px, --r-l passe à 26 px et --r-xl à 32 px automatiquement.

--r-xs 10 px
badges, tooltip
--r-s 16 px
champs, listes
--r-m 24 px
cartes, photos
--r-l 36 px
grandes cartes
--r-xl 52 px
blocs de section
--pill
boutons, chips

Élévation

Trois niveaux, tous teintés encre (jamais de noir pur). Une carte au repos est en s, elle monte en m au survol. l est réservé à ce qui flotte au-dessus de la page.

--shadow-s
carte au repos, header
--shadow-m
survol, flottant, réservation
--shadow-l
modale, menu, toast
Token CSSValeurRôle / règle
--shadow-s0 1px 2px rgba(var(--ink-rgb),.06),0 6px 18px rgba(var(--ink-rgb),.08)Élévation 1 — cartes au repos, header.
--shadow-m0 2px 6px rgba(var(--ink-rgb),.08),0 18px 44px rgba(var(--ink-rgb),.14)Élévation 2 — survol, éléments flottants, carte de réservation.
--shadow-l0 6px 16px rgba(var(--ink-rgb),.12),0 30px 70px rgba(var(--ink-rgb),.22)Élévation 3 — modales, menus, popovers, toasts. AJOUT.

Mouvement

Le ressort (--ease-spring) est la signature : boutons qui se soulèvent, curseurs qui rebondissent, flèches qui avancent. Les apparitions utilisent --ease-out. Rien ne bouge sans raison, et tout s'arrête avec prefers-reduced-motion (géré dans le CSS du système).

Survole-moi Ressort Survol : translateY(−2 px) scale(1,03) en 450 ms ressort. Flèche : +3 px.
Token CSSValeurRôle / règle
--ease-springlinear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0776 19.24%,1.0916 21.2%,1.0895 23.3%,1.0644 27.09%,1.0116 33.2%,.9934 38.3%,.9937 42.3%,1.0004 51%,1)Rebond signature (boutons, curseurs, cartes). Alias historique : --spring.
--ease-outcubic-bezier(.2,.8,.2,1)Entrées, ouvertures, apparitions.
--ease-in-outcubic-bezier(.45,.05,.55,.95)Boucles et balayages lents.
Token CSSValeurRôle / règle
--dur-1150msMicro : couleur, opacité, hover.
--dur-2250msStandard : fond, bordure, focus.
--dur-3450msRessort : transformations, curseurs.
--dur-4650msOuverture de panneaux, modales, accordéons.
  • Animer transform et opacity uniquement.
  • Animer width, height, top : ça saccade sur mobile.
  • Mettre en pause toute boucle (marquee, carrousel) au survol et au focus.
  • Lancer une animation en boucle sans bouton pause ni respect du mouvement réduit.

Grille & breakpoints

Quatre points de rupture (la home en utilisait treize : ils sont normalisés ici). Contenu web centré dans .wrap (1280 px max, gouttière fluide). L'app est conçue sur un écran de référence de 390 × 844, une seule colonne, marges de 20 px.

NomLargeurCe qui change
sm≤ 640 pxTéléphone. Une colonne. Rayons l/xl réduits. Champs de formulaire empilés.
md≤ 900 pxTablette portrait. Hero et blocs en 2 colonnes passent en 1. Les rails horizontaux deviennent défilables au doigt.
lg≤ 1080 pxLa nav du header se replie dans le menu burger. Carte de réservation sous le contenu.
xl≥ 1280 pxLargeur max du contenu atteinte.
/* Breakpoints LPL — les media queries n'acceptent pas les variables CSS : utiliser ces valeurs exactes. */
@media (max-width:640px)  { /* sm */ }
@media (max-width:900px)  { /* md */ }
@media (max-width:1080px) { /* lg */ }
/* Contenu web */
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--space-section)}

Icônes

Un trait de 2 px, extrémités rondes, grille de 24, couleur héritée (currentColor). Le style est compatible Lucide : pour une icône absente du sprite, prendre celle de Lucide du même nom. Tailles : 16 (dans un chip), 18-20 (bouton, ligne de liste), 24 (barre d'onglets, liste d'équipements), 48 (état vide).

i-homeAccueil
i-bookCode / cours
i-carConduite
i-bagBoutique
i-userProfil
i-usersParents / groupe
i-helpAide
i-bellNotifications
i-calendarDate / planning
i-clockHeure / durée
i-pinLieu
i-searchRechercher
i-heartFavori
i-starNote
i-checkValidé
i-xFermer
i-chevron-leftPrécédent
i-chevron-rightSuivant / ouvrir
i-chevron-downDéplier
i-arrow-rightAller (CTA)
i-arrow-leftRetour
i-plusAjouter
i-minusRetirer
i-infoInformation
i-alertAvertissement
i-alert-circleErreur
i-check-circleSuccès
i-fileDocument
i-uploadDéposer un fichier
i-phoneTéléphone
i-messageMessage
i-headsetConseiller
i-slidersFiltres / réglages
i-logoutSe déconnecter
i-walletPaiement / CPF
i-euroPrix
i-shieldGarantie / agréé
i-awardDiplômé d'État
i-wheelVolant / leçon
i-gear-manualBoîte manuelle
i-gear-autoBoîte automatique
i-graduationExamen
i-roadParcours
i-trashSupprimer
i-editModifier
i-sharePartager
i-menuMenu
i-lockSécurisé
i-eyeVoir
i-expandAgrandir
i-videoVidéo / cours
i-sparkleProchaine étape
i-refreshRecommencer
i-externalLien externe
i-thumbs-upValider
i-thumbs-downRefuser
i-playLire
i-copyCopier
i-giftParrainage
i-cookieCookies
i-filterFiltrer

Utilisation

<!-- 1. Coller le sprite (fichier lpl-icons.svg) une fois, juste après <body>. -->
<!-- 2. Puis partout : -->
<svg class="icon" aria-hidden="true"><use href="#i-calendar"/></svg>
<!-- Icône seule porteuse de sens (ex. bouton icône) : le libellé va sur le bouton -->
<button class="icon-btn" type="button" aria-label="Aide"><svg class="icon" aria-hidden="true"><use href="#i-help"/></svg></button>
Sprite complet (lpl-icons.svg)
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="lpl-logo" viewBox="0 0 2426 206"><g fill="currentColor" transform="translate(-254.125 0)"><path d="M2341.31 50.5485V79.1609H2410.94V124.305H2341.31V153.235H2425.88V198.061H2290.77V5.72266H2425.88V50.5485H2341.31Z"/><path d="M2205.14 5.72266C2218.93 5.72266 2230.79 8.16002 2240.76 13.0347C2250.72 17.6975 2258.55 23.8442 2264.28 31.4736C2270.21 39.1043 2274.13 47.5818 2276.05 56.9072C2278.17 66.2327 2278.17 75.4527 2276.05 84.5662C2274.13 93.6796 2270.11 102.157 2263.96 109.999C2257.82 117.629 2249.76 123.669 2239.8 128.12L2277.63 198.061H2226.13L2191.79 135.115H2178.44V198.061H2128.21V5.72266H2205.14ZM2201.65 104.277C2207.59 104.065 2212.46 102.581 2216.28 99.8251C2220.3 97.0704 2223.27 93.6796 2225.18 89.6529C2227.08 85.625 2227.93 81.3862 2227.72 76.9355C2227.72 72.2728 2226.66 68.0341 2224.54 64.2193C2222.42 60.1926 2219.24 56.9072 2215 54.3645C2210.97 51.8205 2205.89 50.5485 2199.74 50.5485H2178.44V104.277H2201.65Z"/><path d="M2114.99 147.83C2115.2 152.281 2114.35 157.791 2112.45 164.362C2110.53 170.931 2106.72 177.29 2101 183.436C2095.49 189.582 2087.54 194.776 2077.16 199.014C2066.98 203.465 2053.41 205.69 2036.47 205.69V159.275C2046.85 159.275 2054.9 158.215 2060.62 156.095C2066.56 153.765 2069.21 150.903 2068.57 147.512C2067.94 143.908 2065.82 141.154 2062.21 139.246C2058.61 137.339 2054.59 135.219 2050.13 132.888C2045.89 130.556 2041.87 127.483 2038.05 123.668C2034.24 119.853 2031.69 114.343 2030.42 107.137C2029.57 100.779 2030 95.1625 2031.69 90.2877C2033.39 85.413 2035.2 80.9623 2037.1 76.9356C2039.22 72.9076 2041.02 69.0929 2042.5 65.4901C2043.99 61.6754 2043.88 57.7541 2042.18 53.7273C2041.13 50.9726 2039.11 48.958 2036.14 47.6872C2033.18 46.2033 2029.79 45.4619 2025.98 45.4619C2018.13 45.4619 2009.86 47.8992 2001.18 52.7739C2008.59 64.2182 2014.64 77.3583 2019.3 92.1945C2024.17 106.819 2026.61 122.079 2026.61 137.975C2026.61 149.419 2025.23 159.381 2022.48 167.858C2019.93 176.336 2016.43 183.436 2011.98 189.158C2007.54 194.669 2002.45 198.802 1996.72 201.557C1991 204.313 1985.07 205.69 1978.92 205.69C1971.72 205.69 1964.62 203.783 1957.62 199.968C1950.63 196.153 1944.38 190.536 1938.86 183.118C1933.35 175.701 1928.91 166.481 1925.51 155.459C1922.33 144.227 1920.96 131.192 1921.38 116.356C1921.81 103.216 1923.5 91.5585 1926.47 81.3863C1929.64 71.0009 1933.15 62.0994 1936.96 54.6807C1933.99 53.1979 1930.81 52.0314 1927.42 51.1834C1924.24 50.1246 1920.63 49.594 1916.61 49.594V3.81474C1935.69 3.81474 1952.75 8.79485 1967.79 18.7563C1970.76 16.4255 1974.47 14.2002 1978.92 12.0802C1983.37 9.74944 1988.24 7.73608 1993.55 6.0401C1998.84 4.13213 2004.46 2.64936 2010.4 1.58937C2016.54 0.529387 2022.58 0 2028.52 0C2039.53 0 2050.13 2.22536 2060.31 6.67609C2070.48 11.1268 2078.96 19.2869 2085.74 31.1551C2090.62 40.0565 2092.74 47.7926 2092.1 54.3633C2091.67 60.7208 2090.19 66.4435 2087.65 71.5302C2085.11 76.405 2082.56 80.7503 2080.02 84.565C2077.69 88.3798 2077.05 92.0891 2078.12 95.6918C2079.17 98.8706 2081.6 101.52 2085.42 103.64C2089.24 105.759 2093.26 108.408 2097.5 111.588C2101.96 114.767 2105.87 119.112 2109.26 124.622C2112.87 130.132 2114.77 137.868 2114.99 147.83ZM1976.05 151.009C1978.6 151.009 1980.29 149.419 1981.14 146.24C1982.21 142.85 1982.52 138.61 1982.1 133.524C1981.67 128.226 1980.62 122.503 1978.92 116.356C1977.23 109.999 1974.89 103.957 1971.92 98.2346C1969.8 103.533 1968.33 109.363 1967.48 115.72C1966.84 121.867 1966.74 127.59 1967.16 132.888C1967.79 137.975 1968.86 142.319 1970.34 145.922C1971.83 149.314 1973.73 151.009 1976.05 151.009Z"/><path d="M1903.95 5.72266V198.061H1853.41V5.72266H1903.95Z"/><path d="M1840.22 153.235V198.061H1706.7V5.72266H1756.92V153.235H1840.22Z"/><path d="M1621.78 128.437C1623.25 137.126 1622.31 145.711 1618.92 154.188C1615.53 162.665 1610.12 170.296 1602.7 177.078C1595.28 183.86 1586.17 189.371 1575.35 193.61C1564.55 197.637 1552.58 199.65 1539.44 199.65C1520.78 199.65 1504.35 196.259 1490.16 189.476C1475.96 182.483 1464.09 173.582 1454.55 162.772L1473.62 115.085C1478.08 120.808 1483.17 125.788 1488.88 130.026C1494.82 134.053 1500.86 137.338 1507.01 139.882C1513.15 142.425 1519.3 144.333 1525.44 145.604C1531.8 146.664 1537.63 147.195 1542.94 147.195C1550.78 147.195 1557.23 146.24 1562.32 144.333C1567.63 142.213 1570.48 139.352 1570.91 135.749C1571.54 132.57 1571.11 130.026 1569.64 128.12C1568.36 126.212 1566.24 124.622 1563.28 123.35C1560.53 121.866 1557.03 120.701 1552.79 119.853C1548.76 119.006 1544.31 118.158 1539.44 117.31C1516.54 113.071 1498.64 106.183 1485.71 96.6459C1472.77 86.8965 1466.42 74.2857 1466.63 58.8135C1466.63 56.4828 1466.95 53.5148 1467.59 49.9121C1468.22 46.3093 1469.39 42.4946 1471.09 38.4679C1472.99 34.4399 1475.53 30.4132 1478.71 26.3865C1482.1 22.3597 1486.45 18.757 1491.74 15.577C1497.26 12.1863 1503.83 9.43153 1511.45 7.31156C1519.3 5.1928 1528.63 4.13281 1539.44 4.13281C1552.16 4.13281 1563.28 5.08619 1572.81 6.99417C1582.36 8.90093 1590.3 11.1263 1596.66 13.6703C1603.01 16.001 1607.78 18.2264 1610.97 20.3464C1614.14 22.2543 1615.84 23.3131 1616.05 23.5251L1597.29 71.2123C1587.76 62.5229 1577.9 56.4828 1567.72 53.092C1557.77 49.7001 1548.76 48.0053 1540.71 48.0053C1534.13 48.0053 1528.73 48.9587 1524.49 50.8667C1520.25 52.5614 1517.81 54.7868 1517.18 57.5428C1516.12 61.7815 1517.61 65.1722 1521.63 67.715C1525.66 70.2589 1531.6 72.2723 1539.44 73.7563C1547.27 75.4511 1555.65 77.359 1564.55 79.4778C1573.45 81.3858 1581.82 84.2471 1589.66 88.0619C1597.72 91.8766 1604.71 96.9633 1610.64 103.322C1616.58 109.469 1620.29 117.84 1621.78 128.437Z"/><path d="M1441.91 5.72266V198.061H1391.35V5.72266H1441.91Z"/><path d="M1378.34 5.72266V198.061H1328.12V114.768L1289.64 198.061H1246.09L1207.62 114.768V198.061H1157.39V5.72266H1207.62L1268.03 136.068L1328.12 5.72266H1378.34Z"/><path d="M1127.7 141.79C1130.25 146.24 1132.79 150.585 1135.33 154.825C1138.1 158.851 1141.06 162.666 1144.24 166.269L1110.85 198.06C1105.98 192.762 1101.63 187.357 1097.83 181.846C1094.22 176.336 1090.94 171.038 1087.97 165.951C1084.79 160.441 1081.92 155.778 1079.38 151.963C1076.83 148.147 1074.08 145.075 1071.12 142.743C1068.37 140.2 1065.18 138.399 1061.58 137.339C1057.97 136.067 1053.42 135.431 1047.91 135.431V89.6518C1055.75 89.6518 1062.64 88.1678 1068.57 85.201C1074.71 82.2331 1079.6 78.6303 1083.19 74.3916C1086.8 69.9409 1088.92 65.3835 1089.55 60.7208C1090.4 56.0581 1089.55 52.138 1087.01 48.958C1084.04 45.5673 1079.49 43.8725 1073.35 43.8725C1067.62 43.8725 1060.63 45.5673 1052.36 48.958C1044.09 52.35 1034.66 58.0727 1024.07 66.1261C1031.48 84.565 1035.62 102.156 1036.46 118.9C1037.52 135.643 1035.83 150.479 1031.38 163.407C1027.14 176.125 1020.46 186.297 1011.35 193.928C1002.24 201.557 991.321 205.372 978.605 205.372C964.193 205.372 952.854 200.921 944.587 192.02C936.534 182.906 931.766 171.25 930.282 157.05C929.01 142.638 931.342 126.742 937.275 109.363C943.21 91.7705 953.066 74.3916 966.842 57.2247C964.086 52.986 961.225 48.958 958.258 45.1433C955.291 41.3285 952.006 37.6192 948.403 34.0165L980.512 0.635991C988.778 9.53745 995.772 17.9083 1001.49 25.751C1012.52 17.6975 1024.7 11.4442 1038.05 6.99348C1051.41 2.33076 1064.44 0 1077.16 0C1086.05 0 1094.33 1.27198 1101.96 3.81474C1109.58 6.35749 1116.16 10.3854 1121.67 15.8949C1128.45 22.4656 1132.9 29.4603 1135.02 36.8778C1137.34 44.2953 1138.1 51.6074 1137.25 58.8141C1136.61 65.8075 1134.8 72.5902 1131.84 79.1609C1128.88 85.5184 1125.69 91.2411 1122.3 96.3279C1119.13 101.203 1115.94 105.229 1112.77 108.408C1109.8 111.588 1107.79 113.389 1106.72 113.813C1110.75 117.84 1114.35 122.079 1117.54 126.53C1120.71 130.98 1124.1 136.067 1127.7 141.79ZM979.876 158.321H980.512C982.632 158.321 984.433 157.155 985.917 154.825C987.612 152.493 988.884 149.207 989.732 144.968C990.58 140.73 990.897 135.643 990.685 129.708C990.473 123.775 989.52 117.31 987.824 110.316C984.221 116.675 981.36 122.715 979.241 128.438C977.333 134.159 976.061 139.246 975.425 143.696C974.79 147.935 974.79 151.433 975.425 154.189C976.273 156.731 977.757 158.109 979.876 158.321Z"/><path d="M832.24 50.5485V79.1609H901.863V124.305H832.24V153.235H916.805V198.061H781.691V5.72266H916.805V50.5485H832.24Z"/><path d="M697.652 5.72266C713.76 5.72266 727.112 9.32661 737.709 16.5321C748.519 23.5268 756.572 32.3216 761.871 42.9191C767.382 53.5165 770.136 65.0673 770.136 77.5715C770.136 90.0769 767.382 101.628 761.871 112.224C756.572 122.821 748.519 131.723 737.709 138.93C727.112 145.923 713.76 149.42 697.652 149.42H669.994V198.061H619.763V5.72266H697.652ZM692.248 104.594C701.573 104.594 708.566 101.84 713.229 96.329C718.104 90.6063 720.541 84.3542 720.541 77.5715C720.541 70.79 718.104 64.6433 713.229 59.1326C708.566 53.4099 701.573 50.5485 692.248 50.5485H669.994V104.594H692.248Z"/><path d="M451.389 50.5485V79.1609H521.012V124.305H451.389V153.235H535.954V198.061H400.84V5.72266H535.954V50.5485H451.389Z"/><path d="M387.649 153.235V198.061H254.125V5.72266H304.356V153.235H387.649Z"/><path d="M2546.24 154.527H2479.35V199.187C2479.35 199.371 2479.5 199.521 2479.69 199.521H2501.24C2526.09 199.521 2546.24 179.377 2546.24 154.527Z"/><path d="M2680 6.16992H2479.35V51.1631H2635.01C2659.86 51.1631 2680 31.0189 2680 6.16992Z"/><path d="M2614.33 80.3496H2479.35V125.343H2569.34C2594.19 125.343 2614.33 105.199 2614.33 80.3496Z"/></g></symbol>
  <symbol id="lpl-star" viewBox="0 0 344 348"><path fill="currentColor" d="M171.847 0C172.256 0.418375 173.508 10.9991 173.76 12.5858C175.136 21.4211 177.133 30.1483 179.736 38.7029C186.251 60.8024 196.542 81.6076 210.152 100.198C238.217 138.013 279.029 164.382 325.037 174.427C331.762 175.965 336.744 176.575 343.434 177.587C303.197 181.531 265.147 197.766 234.457 224.087C204.205 250.795 183.45 286.61 175.319 326.135C174.04 332.305 172.603 340.717 172.167 347.05C171.664 345.957 170.036 337.117 169.611 335.092C168.728 330.915 167.657 326.78 166.399 322.697C158.593 295.825 145.471 270.792 127.812 249.087C101.301 216.737 65.6318 193.155 25.4833 181.434C17.806 179.191 7.925 176.62 0 175.808C32.3675 168.869 63.6868 158.037 90.9055 138.736C102.599 130.506 113.171 120.788 122.356 109.829C146.893 80.6429 165.455 37.5191 171.847 0Z"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24"><!-- Accueil --><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5"/></symbol>
  <symbol id="i-book" viewBox="0 0 24 24"><!-- Code / cours --><path d="M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z"/><path d="M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z"/></symbol>
  <symbol id="i-car" viewBox="0 0 24 24"><!-- Conduite --><path d="M5 17H3v-5l2.2-5.2A2 2 0 0 1 7 5.5h10a2 2 0 0 1 1.8 1.3L21 12v5h-2"/><path d="M3 12h18"/><circle cx="7.5" cy="17" r="2"/><circle cx="16.5" cy="17" r="2"/><path d="M9.5 17h5"/></symbol>
  <symbol id="i-bag" viewBox="0 0 24 24"><!-- Boutique --><path d="M5.2 7h13.6l1 14H4.2z"/><path d="M9 10V6a3 3 0 0 1 6 0v4"/></symbol>
  <symbol id="i-user" viewBox="0 0 24 24"><!-- Profil --><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24"><!-- Parents / groupe --><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M16 4.1a4 4 0 0 1 0 7.8M22 21a7 7 0 0 0-4.5-6.5"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24"><!-- Aide --><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></symbol>
  <symbol id="i-bell" viewBox="0 0 24 24"><!-- Notifications --><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24"><!-- Date / planning --><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></symbol>
  <symbol id="i-clock" viewBox="0 0 24 24"><!-- Heure / durée --><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><!-- Lieu --><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24"><!-- Rechercher --><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></symbol>
  <symbol id="i-heart" viewBox="0 0 24 24"><!-- Favori --><path class="icon-heart" d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24"><!-- Note --><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></symbol>
  <symbol id="i-check" viewBox="0 0 24 24"><!-- Validé --><path d="M20 6 9 17l-5-5"/></symbol>
  <symbol id="i-x" viewBox="0 0 24 24"><!-- Fermer --><path d="M18 6 6 18M6 6l12 12"/></symbol>
  <symbol id="i-chevron-left" viewBox="0 0 24 24"><!-- Précédent --><path d="m15 18-6-6 6-6"/></symbol>
  <symbol id="i-chevron-right" viewBox="0 0 24 24"><!-- Suivant / ouvrir --><path d="m9 18 6-6-6-6"/></symbol>
  <symbol id="i-chevron-down" viewBox="0 0 24 24"><!-- Déplier --><path d="m6 9 6 6 6-6"/></symbol>
  <symbol id="i-arrow-right" viewBox="0 0 24 24"><!-- Aller (CTA) --><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
  <symbol id="i-arrow-left" viewBox="0 0 24 24"><!-- Retour --><path d="M19 12H5M11 18l-6-6 6-6"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24"><!-- Ajouter --><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-minus" viewBox="0 0 24 24"><!-- Retirer --><path d="M5 12h14"/></symbol>
  <symbol id="i-info" viewBox="0 0 24 24"><!-- Information --><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></symbol>
  <symbol id="i-alert" viewBox="0 0 24 24"><!-- Avertissement --><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></symbol>
  <symbol id="i-alert-circle" viewBox="0 0 24 24"><!-- Erreur --><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></symbol>
  <symbol id="i-check-circle" viewBox="0 0 24 24"><!-- Succès --><circle cx="12" cy="12" r="10"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24"><!-- Document --><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></symbol>
  <symbol id="i-upload" viewBox="0 0 24 24"><!-- Déposer un fichier --><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5M12 3v12"/></symbol>
  <symbol id="i-phone" viewBox="0 0 24 24"><!-- Téléphone --><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.7a2 2 0 0 1 1.7 2z"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24"><!-- Message --><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></symbol>
  <symbol id="i-headset" viewBox="0 0 24 24"><!-- Conseiller --><path d="M3 14v-2a9 9 0 0 1 18 0v2"/><path d="M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2z"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24"><!-- Filtres / réglages --><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24"><!-- Se déconnecter --><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24"><!-- Paiement / CPF --><path d="M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/><path d="M21 11h-4a2 2 0 0 0 0 4h4z"/></symbol>
  <symbol id="i-euro" viewBox="0 0 24 24"><!-- Prix --><path d="M18 7a7 7 0 1 0 0 10"/><path d="M4 10h9M4 14h9"/></symbol>
  <symbol id="i-shield" viewBox="0 0 24 24"><!-- Garantie / agréé --><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></symbol>
  <symbol id="i-award" viewBox="0 0 24 24"><!-- Diplômé d'État --><circle cx="12" cy="8" r="6"/><path d="M15.5 13 17 22l-5-3-5 3 1.5-9"/></symbol>
  <symbol id="i-wheel" viewBox="0 0 24 24"><!-- Volant / leçon --><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="2"/><path d="M12 14v8M10 12H2.2M14 12h7.8"/></symbol>
  <symbol id="i-gear-manual" viewBox="0 0 24 24"><!-- Boîte manuelle --><circle cx="6" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v10M12 7v10M18 7v5H6"/></symbol>
  <symbol id="i-gear-auto" viewBox="0 0 24 24"><!-- Boîte automatique --><rect x="3" y="3" width="18" height="18" rx="4"/><path d="m8.5 16 3.5-9 3.5 9M10 13h4"/></symbol>
  <symbol id="i-graduation" viewBox="0 0 24 24"><!-- Examen --><path d="M22 10 12 5 2 10l10 5z"/><path d="M6 12v5c3 2 9 2 12 0v-5"/></symbol>
  <symbol id="i-road" viewBox="0 0 24 24"><!-- Parcours --><path d="M4 21 8 3M20 21 16 3M12 4v3M12 10v4M12 17v3"/></symbol>
  <symbol id="i-trash" viewBox="0 0 24 24"><!-- Supprimer --><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></symbol>
  <symbol id="i-edit" viewBox="0 0 24 24"><!-- Modifier --><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z"/></symbol>
  <symbol id="i-share" viewBox="0 0 24 24"><!-- Partager --><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"/></symbol>
  <symbol id="i-menu" viewBox="0 0 24 24"><!-- Menu --><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
  <symbol id="i-lock" viewBox="0 0 24 24"><!-- Sécurisé --><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></symbol>
  <symbol id="i-eye" viewBox="0 0 24 24"><!-- Voir --><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol>
  <symbol id="i-expand" viewBox="0 0 24 24"><!-- Agrandir --><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></symbol>
  <symbol id="i-video" viewBox="0 0 24 24"><!-- Vidéo / cours --><rect x="2" y="6" width="14" height="12" rx="2"/><path d="m22 8-6 4 6 4z"/></symbol>
  <symbol id="i-sparkle" viewBox="0 0 24 24"><!-- Prochaine étape --><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></symbol>
  <symbol id="i-refresh" viewBox="0 0 24 24"><!-- Recommencer --><path d="M3 12a9 9 0 0 1 15.5-6.3L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.3L3 16M3 21v-5h5"/></symbol>
  <symbol id="i-external" viewBox="0 0 24 24"><!-- Lien externe --><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></symbol>
  <symbol id="i-thumbs-up" viewBox="0 0 24 24"><!-- Valider --><path d="M7 10v12"/><path d="M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.6l-2.3 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.8a2 2 0 0 0 1.8-1.1L12 2a3.1 3.1 0 0 1 3 3.9z"/></symbol>
  <symbol id="i-thumbs-down" viewBox="0 0 24 24"><!-- Refuser --><path d="M17 14V2"/><path d="M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.6l2.3-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.8a2 2 0 0 0-1.8 1.1L12 22a3.1 3.1 0 0 1-3-3.9z"/></symbol>
  <symbol id="i-play" viewBox="0 0 24 24"><!-- Lire --><path d="M7 4v16l13-8z"/></symbol>
  <symbol id="i-copy" viewBox="0 0 24 24"><!-- Copier --><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
  <symbol id="i-gift" viewBox="0 0 24 24"><!-- Parrainage --><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5"/></symbol>
  <symbol id="i-cookie" viewBox="0 0 24 24"><!-- Cookies --><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5z"/><path d="M8.5 8.5h.01M16 15.5h.01M12 12h.01M11 17h.01M7 14h.01"/></symbol>
  <symbol id="i-filter" viewBox="0 0 24 24"><!-- Filtrer --><path d="M3 5h18l-7 8v6l-4 2v-8z"/></symbol>
</svg>

Photos & illustrations

De vraies personnes : élèves et moniteurs du réseau, en situation (au volant, sur la piste, avec l'app). Lumière naturelle, sourires sincères, cadrage serré. Les photos sont toujours arrondies (--r-m ou --r-l) et jamais en noir et blanc.

Un moniteur et son élève souriants au volant
Au volant : moniteur + élève, complicité.
Un moniteur explique une manœuvre sur une piste
Apprentissage : geste, explication.
Une élève réserve sa leçon depuis l'app
L'app dans la vraie vie.
  • Portraits de moniteurs en carré, fond neutre, visage centré (avatars, cartes).
  • Photos de banque d'images génériques, mains sur un volant sans visage, voitures seules. Photo agrandie au-delà de sa taille d'origine (floue).
  • Illustrations 3D (dossier, portefeuille, calendrier, volant, livre…) pour l'app : une par écran maximum, en tête de contenu.
  • Mélanger illustration 3D et photo dans la même carte.

Tous les tokens

Le bloc :root complet, tel qu'il figure en tête de lpl-components.css. La version JSON (format W3C Design Tokens) est dans lpl-tokens.json et dans la balise <script id="lpl-tokens"> de cette page.

:root — tokens CSS
:root{
  /* 1. PRIMITIVES — valeurs brutes. Ne pas les utiliser directement dans un composant si un token sémantique existe. */
  --rose-0:#FFCCDE;
  --rose-1:#FF80AD;
  --rose-2:#E80053;
  --rose-3:#B20040;
  --rose-4:#260D16;
  --lime-0:#F6FFCC;
  --lime-1:#EAFF80;
  --lime-2:#BAE800;
  --lime-3:#8FB200;
  --lime-4:#21260D;
  --peach-0:#FFE9CB;
  --peach-1:#FFCA80;
  --orange-2:#E88700;
  --orange-3:#B26800;
  --orange-4:#261C0D;
  --ink:#13121A;
  --ink-2:#25212F;
  --cream:#FCF7F3;
  --paper:#FFFFFF;
  --ink-rgb:19,18,26;
  --cream-rgb:252,247,243;
  --paper-rgb:255,255,255;
  --rose-rgb:232,0,83;
  --lime-rgb:186,232,0;
  --orange-rgb:232,135,0;
  --font-display:"Emak","Poppins",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step--2:0.75rem;
  --step--1:0.875rem;
  --step-0:clamp(1rem,.96rem + .2vw,1.0625rem);
  --step-1:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-3:clamp(2rem,1.55rem + 1.9vw,3.1rem);
  --step-4:clamp(2.6rem,1.9rem + 3.2vw,4.6rem);
  --step-5:clamp(3.2rem,2rem + 5.6vw,6.6rem);
  --step-6:clamp(3.6rem,1.8rem + 9vw,9.2rem);
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-30:120px;
  --r-xs:10px;
  --r-s:16px;
  --r-m:24px;
  --r-l:36px;
  --r-xl:52px;
  --pill:999px;
  --shadow-s:0 1px 2px rgba(var(--ink-rgb),.06),0 6px 18px rgba(var(--ink-rgb),.08);
  --shadow-m:0 2px 6px rgba(var(--ink-rgb),.08),0 18px 44px rgba(var(--ink-rgb),.14);
  --shadow-l:0 6px 16px rgba(var(--ink-rgb),.12),0 30px 70px rgba(var(--ink-rgb),.22);
  --ease-spring:linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0776 19.24%,1.0916 21.2%,1.0895 23.3%,1.0644 27.09%,1.0116 33.2%,.9934 38.3%,.9937 42.3%,1.0004 51%,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --dur-1:150ms;
  --dur-2:250ms;
  --dur-3:450ms;
  --dur-4:650ms;

  /* 2. SÉMANTIQUES — rôles. À utiliser dans tout nouveau code. */
  --color-bg:var(--cream);
  --color-surface:var(--paper);
  --color-surface-sunken:var(--cream);
  --color-surface-inverse:var(--ink);
  --color-text:var(--ink);
  --color-text-muted:rgba(var(--ink-rgb),.64);
  --color-text-inverse:var(--cream);
  --color-text-inverse-muted:rgba(var(--cream-rgb),.72);
  --color-text-on-action:var(--paper);
  --color-border:rgba(var(--ink-rgb),.10);
  --color-border-strong:rgba(var(--ink-rgb),.22);
  --color-border-input:rgba(var(--ink-rgb),.48);
  --color-border-selected:var(--ink);
  --color-action-primary:var(--rose-2);
  --color-action-primary-hover:var(--rose-3);
  --color-action-secondary:var(--ink);
  --color-highlight:var(--lime-1);
  --color-highlight-strong:var(--lime-2);
  --color-care:var(--peach-1);
  --color-rating:var(--orange-2);
  --color-focus:var(--rose-2);
  --color-success-bg:var(--lime-0);
  --color-success-border:var(--lime-2);
  --color-success-text:var(--lime-4);
  --color-error-bg:var(--paper);
  --color-error-border:var(--orange-3);
  --color-error-accent:var(--orange-2);
  --color-error-icon:var(--orange-3);
  --color-error-text:var(--orange-4);
  --color-info-bg:var(--paper);
  --color-info-border:var(--color-border-strong);
  --color-disabled-bg:rgba(var(--ink-rgb),.06);
  --color-disabled-text:rgba(var(--ink-rgb),.40);
  --color-track:rgba(var(--ink-rgb),.08);
  --color-overlay:rgba(var(--ink-rgb),.45);
  --text-display:var(--font-display);
  --text-body:var(--font-body);
  --gutter:clamp(16px,2.2vw,28px);
  --max:1280px;
  --max-text:68ch;
  --space-section:clamp(64px,8vw,120px);
  --space-section-tight:clamp(40px,5vw,72px);
  --space-card:clamp(22px,2.6vw,34px);
  --tap:44px;
  --app-bar-h:64px;
  --tab-bar-h:72px;
  --z-base:0;
  --z-sticky:20;
  --z-header:50;
  --z-dropdown:60;
  --z-sheet:80;
  --z-modal:90;
  --z-toast:100;

  /* 3. ALIAS — noms hérités de la home V6, conservés pour compatibilité. Ne pas utiliser dans du nouveau code. */
  --display:var(--font-display);
  --body:var(--font-body);
  --spring:var(--ease-spring);
  --text:var(--color-text);
  --muted:var(--color-text-muted);
  --muted-2:var(--color-text-muted);
  --line:var(--color-border);
  --on-dark:var(--color-text-inverse);
  --on-dark-muted:var(--color-text-inverse-muted);
  --sand:var(--cream);
  --rose-2-deep:var(--rose-3);
  --orange-2-deep:var(--orange-3);
  --lime-deep:var(--lime-3);
  --lime-text:var(--lime-4);
  --orange-text:var(--orange-4);
}

Alias hérités de la home V6

Toujours valides pour que la home actuelle continue de fonctionner. Ne pas les utiliser dans du nouveau code.

Token CSSValeurRôle / règle
--displayvar(--font-display)
= "Emak","Poppins",system-ui,sans-serif		Alias home → --font-display.
--bodyvar(--font-body)
= "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif		Alias home → --font-body.
--springvar(--ease-spring)
= linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0776 19.24%,1.0916 21.2%,1.0895 23.3%,1.0644 27.09%,1.0116 33.2%,.9934 38.3%,.9937 42.3%,1.0004 51%,1)		Alias home → --ease-spring.
--textvar(--color-text)
= #13121A		Alias home → --color-text.
--mutedvar(--color-text-muted)
= rgba(var(--ink-rgb),.64)		Alias home → --color-text-muted.
--muted-2var(--color-text-muted)
= rgba(var(--ink-rgb),.64)		Alias home (aligné sur --muted en sept. 2026).
--linevar(--color-border)
= rgba(var(--ink-rgb),.10)		Alias home → --color-border.
--on-darkvar(--color-text-inverse)
= #FCF7F3		Alias home → --color-text-inverse.
--on-dark-mutedvar(--color-text-inverse-muted)
= rgba(var(--cream-rgb),.72)		Alias home.
--sandvar(--cream)
= #FCF7F3		Alias home.
--rose-2-deepvar(--rose-3)
= #B20040		Alias home.
--orange-2-deepvar(--orange-3)
= #B26800		Alias home.
--lime-deepvar(--lime-3)
= #8FB200		Alias home.
--lime-textvar(--lime-4)
= #21260D		Alias home : texte sur citron.
--orange-textvar(--orange-4)
= #261C0D		Alias home : texte sur pêche.

Les mots

Le ton LPL

Un moniteur sympa qui sait de quoi il parle. Tutoiement côté élève, vouvoiement côté parents.

Règles d'écriture

SituationOuiNon
Grand titreTon permis. Pour de bon.Obtenez votre permis de conduire facilement
Bouton principalJe m'inscris · Réserver ma leçon · Lancer la sérieValider · Soumettre · Cliquez ici
Bouton secondaireVoir les tarifs · Plus tardAnnuler (si rien n'est annulé)
Erreur de champIl manque ton numéro de téléphone.Champ obligatoire · Erreur 422
État videAucune leçon prévue. On en réserve une ?Aucune donnée
ConfirmationC'est réservé ! Mer. 28 oct. à 9:00 avec Arouna.Opération effectuée avec succès
DestructifAnnuler cette leçon ? Tu seras remboursé en crédit d'heure.Êtes-vous sûr ?
ParentsLe permis de votre enfant, sans mauvaise surprise.Le permis de ton enfant

Formats

DonnéeFormatExemple
PrixEspace insécable avant €, pas de décimales si ronde519 € · 52,50 € · dès 519 € en 4× sans frais
NoteVirgule décimale, sur 54,93/5 · ★ 4,9
Grand nombreEspace fine insécable par millier+620 000 élèves · 464 477 notes
Date courteJour abrégé + jour + mois abrégémer. 28 oct.
Heure24 h, deux-points dans l'app ; « h » dans le texte09:00 · 18h–19h
DuréeChiffre + unité courte1 h · 20 h de conduite · 4 questions
TéléphoneGroupes de deux04 26 22 91 77
PonctuationEspace insécable avant : ; ? !On prend la route ?

La bibliothèque

Composants

Chaque fiche suit le même plan : à quoi il sert, quand ne pas l'utiliser, anatomie, classes, états, tokens, accessibilité, exemples rendus avec leur code exact, à faire / à éviter.

Index

Version lisible machine : <script type="application/json" id="lpl-component-index">.

ComposantClassesPlateformeSource
Bouton.btn .btn-primary .btn-ink .btn-lime…app · webhome-v6
Bouton icône.icon-btn .icon-btn-plain .icon-btn-outline .icon-btn-ink…app · webhome-v6 + app
Lien.link .link-plain .back-linkapp · webhome-v6 + app
Champ texte.field .field-control .field-input .field-label…app · webnouveau
Champs soudés.field-group .span-2app · webnouveau
Carte de choix.choice .choice-mark .choice-body .choice-aside…app · webhome-v6 (.gear) + app (quiz)
Segmented.seg .seg-on-paper .seg-rose .seg-blockapp · webhome-v6 (.seg, .toggle)
Barre supérieure.app-bar .app-bar-title .is-scrolledappapp + home-v6
Barre d'onglets.tab-bar .badge-dotappapp
Chip & badge.chip .chip-lime .chip-rose .chip-peach…app · webhome-v6
Carte.card .card-lg .card-flat .card-sunken…app · webhome-v6 + app
Liste & lignes.list .list-row .tile .tile-lime…app · webapp
Encart & alerte.callout .callout-body .callout-success .callout-error…app · webapp

Actions

Ce sur quoi on clique pour agir ou naviguer.

Actions

Bouton .btn

Déclenche une action. Forme pilule, ressort au survol, rond fléché .arr quand l'action fait avancer dans un parcours.

  • App
  • Web
  • Home V6
  • Stable
Utiliser pour
Inscrire, réserver, payer, lancer une série, passer à l'étape suivante, ouvrir une modale.
Ne pas utiliser pour
Naviguer vers une autre page dans un texte (.link), filtrer (.chip-filter), choisir une option (.seg, .choice).
Anatomie
Conteneur pilule · libellé (Poppins 600, 15 px) · rond fléché optionnel .arr (30 px) ou icône à gauche (18 px).
Variantes
primary rose · ink · lime · peach · white · white-rose · ghost. Pas de variante « danger » : une action destructive se fait en ink dans une modale de confirmation. Tailles sm 36 px · défaut 44 px · lg 60 px. block pleine largeur. shine reflet (1 seul par page, CTA héros).
États
Survol (soulèvement + flèche +3 px) · actif (scale .98) · focus (anneau framboise 3 px) · disabled / aria-disabled · chargement aria-busy="true" (le rond devient un spinner).
Tokens
--color-action-primary, --color-action-primary-hover, --pill, --tap, --ease-spring, --dur-3.
Accessibilité
<button type="button"> pour une action, <a href> pour une navigation. Le rond fléché est décoratif (aria-hidden). Hauteur min. 44 px. Un bouton désactivé doit être accompagné d'un texte qui explique pourquoi.
Variantes — sur fond crème
Code HTML
<div class="sg-row">
  <button class="btn btn-primary" type="button">Je m'inscris <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  <button class="btn btn-ink" type="button">Réserver une leçon <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  <button class="btn btn-ghost" type="button">Voir les tarifs</button>
  <button class="btn btn-white" type="button">Plus tard</button>
  <button class="btn btn-peach" type="button">Parler à un conseiller <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
</div>
Sur fond sombre ou coloré
Code HTML
<div class="sg-row">
  <button class="btn btn-lime" type="button">Je calcule mon budget <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  <button class="btn btn-white-rose" type="button">Je m'inscris <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  <button class="btn btn-ghost on-dark" type="button">En savoir plus</button>
</div>
Tailles, icône, pleine largeur
Code HTML
<div class="sg-col" style="max-width:420px">
  <div class="sg-row">
    <button class="btn btn-primary btn-sm" type="button">Petit <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
    <button class="btn btn-primary" type="button">Défaut <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
    <button class="btn btn-primary btn-lg" type="button">Grand <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  </div>
  <button class="btn btn-ink" type="button"><svg class="icon" aria-hidden="true"><use href="#i-calendar"/></svg> Ajouter à mon agenda</button>
  <button class="btn btn-primary btn-block" type="button">Lancer ma première série <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
</div>
États
Code HTML
<div class="sg-row">
  <button class="btn btn-primary" type="button" disabled>Simuler un dossier complet <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
  <button class="btn btn-primary" type="button" aria-busy="true">Paiement en cours <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></button>
</div>
  • Un seul bouton rose visible ; les autres actions en ink, ghost ou white.
  • Deux .btn-primary côte à côte, ou un bouton rose pour « Annuler ».
  • Un verbe à l'infinitif ou à la 1re personne : « Réserver », « Je m'inscris ».
  • Le rond fléché sur un bouton qui ferme ou annule : il signifie « avancer ».

Actions

Bouton icône .icon-btn

Action compacte représentée par une seule icône : aide, fermer, favori, précédent/suivant, menu.

  • App
  • Web
  • Home V6
  • Stable
Utiliser pour
Actions universellement comprises par leur icône, dans une barre ou sur une image.
Ne pas utiliser pour
Une action principale ou ambiguë : préférer un .btn avec libellé.
Variantes
Défaut blanc ombré · plain transparent · outline contour · ink (icône citron) · sm 32 px.
États
Survol fond crème · actif scale .94 · aria-pressed="true" (le cœur se remplit en framboise) · disabled.
Accessibilité
aria-label obligatoire, à l'infinitif (« Fermer », « Ajouter aux favoris »). 44 × 44 px minimum, sm seulement si une zone cliquable plus large l'entoure.
Variantes
Code HTML
<div class="sg-row">
  <button class="icon-btn" type="button" aria-label="Aide"><svg class="icon" aria-hidden="true"><use href="#i-help"/></svg></button>
  <button class="icon-btn icon-btn-outline" type="button" aria-label="Précédent"><svg class="icon" aria-hidden="true"><use href="#i-chevron-left"/></svg></button>
  <button class="icon-btn icon-btn-outline" type="button" aria-label="Suivant"><svg class="icon" aria-hidden="true"><use href="#i-chevron-right"/></svg></button>
  <button class="icon-btn icon-btn-plain" type="button" aria-label="Fermer"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button>
  <button class="icon-btn icon-btn-ink" type="button" aria-label="Ajouter"><svg class="icon" aria-hidden="true"><use href="#i-plus"/></svg></button>
  <button class="icon-btn" type="button" aria-label="Ajouter aux favoris" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="#i-heart"/></svg></button>
  <button class="icon-btn icon-btn-sm icon-btn-outline" type="button" aria-label="Partager"><svg class="icon" aria-hidden="true"><use href="#i-share"/></svg></button>
</div>

Formulaires

Saisir, choisir, réserver. Label flottant, contour net, sélection en encre.

Formulaires

Champ texte .field

Saisie d'une valeur. Le label est dans le champ et remonte quand on écrit. Couvre aussi textarea et select.

  • App
  • Web
  • Nouveau
Anatomie
.field (colonne) › .field-control (cadre blanc 60 px, --r-s) › input.field-input + label.field-label juste après l'input (le CSS en dépend) › puis .field-hint et/ou .field-error.
États
Repos (contour 1,5 px encre 48 %) · survol (encre) · focus (contour 2 px encre + halo) · rempli (label remonté) · erreur .field[data-invalid] + aria-invalid="true" (fond pêche, contour et icône orange) · désactivé.
Règle du placeholder
L'input doit avoir placeholder=" " (un espace) : c'est ce qui permet au label de rester en bas quand le champ est vide. Le texte d'exemple va dans .field-hint.
Tokens
--color-border-input, --color-border-selected, --color-error-*, --r-s.
Accessibilité
<label for> lié à l'id de l'input. Aide et erreur reliées par aria-describedby. Bon type et autocomplete (email, tel, given-name, postal-code…). L'erreur s'affiche à la sortie du champ ou à l'envoi, jamais pendant la frappe.
États

On t'envoie la confirmation de chaque leçon ici.

Il manque des chiffres : 10 au total.

Code HTML
<div class="form" style="max-width:420px">
  <div class="field">
    <div class="field-control">
      <input class="field-input" id="f-prenom" type="text" placeholder=" " autocomplete="given-name">
      <label class="field-label" for="f-prenom">Prénom</label>
    </div>
  </div>
  <div class="field">
    <div class="field-control">
      <input class="field-input" id="f-email" type="email" placeholder=" " value="camille@exemple.fr" autocomplete="email" aria-describedby="f-email-hint">
      <label class="field-label" for="f-email">E-mail</label>
    </div>
    <p class="field-hint" id="f-email-hint">On t'envoie la confirmation de chaque leçon ici.</p>
  </div>
  <div class="field" data-invalid>
    <div class="field-control">
      <input class="field-input" id="f-tel" type="tel" placeholder=" " value="06 12 34" autocomplete="tel" aria-invalid="true" aria-describedby="f-tel-err">
      <label class="field-label" for="f-tel">Téléphone</label>
    </div>
    <p class="field-error" id="f-tel-err"><svg class="icon" aria-hidden="true"><use href="#i-alert-circle"/></svg> Il manque des chiffres : 10 au total.</p>
  </div>
  <div class="field">
    <div class="field-control">
      <input class="field-input" id="f-neph" type="text" placeholder=" " value="Attribué après l'inscription" disabled>
      <label class="field-label" for="f-neph">Numéro NEPH</label>
    </div>
  </div>
</div>
Icône, select, textarea
Code HTML
<div class="form" style="max-width:420px">
  <div class="field">
    <div class="field-control">
      <span class="field-adorn field-adorn-start"><svg class="icon" aria-hidden="true"><use href="#i-pin"/></svg></span>
      <input class="field-input" id="f-ville" type="text" placeholder=" " autocomplete="address-level2">
      <label class="field-label" for="f-ville">Ville ou code postal</label>
    </div>
  </div>
  <div class="field">
    <div class="field-control">
      <select class="field-input" id="f-boite">
        <option>Automatique</option><option>Manuelle</option>
      </select>
      <label class="field-label" for="f-boite">Boîte de vitesses</label>
    </div>
  </div>
  <div class="field">
    <div class="field-control">
      <textarea class="field-input" id="f-projet" placeholder=" " rows="4"></textarea>
      <label class="field-label" for="f-projet">Ton projet, en quelques mots</label>
    </div>
  </div>
</div>
  • Message d'erreur qui dit quoi faire : « Il manque des chiffres : 10 au total. »
  • Signaler l'erreur seulement par la couleur, ou en rose.
  • Formulaire court : on demande le strict nécessaire, le reste plus tard.
  • Un placeholder à la place du label.

Formulaires

Champs soudés .field-group

Plusieurs critères réunis dans un seul cadre, chacun ouvrant un sélecteur (date, heure, lieu, boîte). Le cœur de la carte de réservation.

  • App
  • Web
  • Nouveau
Anatomie
Grille 2 colonnes. Chaque cellule est un <button> : <b> libellé en petites capitales + <span> valeur (.is-set quand renseignée). .span-2 pour une cellule pleine largeur.
États
Cellule active : aria-expanded="true" → contour encre 2 px. Survol : fond crème.
Accessibilité
Chaque cellule est un vrai bouton qui ouvre un popover, une modale ou une bottom sheet (aria-haspopup="dialog", aria-expanded). Le nom accessible combine libellé et valeur.
Réserver une leçon
Code HTML
<div class="field-group" style="max-width:380px">
  <button type="button" aria-haspopup="dialog" aria-expanded="true"><b>Date</b><span class="is-set">mer. 28 oct.</span></button>
  <button type="button" aria-haspopup="dialog" aria-expanded="false"><b>Heure</b><span>Choisir</span></button>
  <button type="button" class="span-2" aria-haspopup="dialog" aria-expanded="false"><b>Point de rendez-vous</b><span class="is-set">Gare Part-Dieu, Lyon 3e</span></button>
</div>

Formulaires

Carte de choix .choice

Option riche (titre + explication) à sélectionner : boîte manuelle/automatique, formule, réponse de quiz. Sélection = contour encre, comme sur la home.

  • App
  • Web
  • Home V6
  • Stable
Anatomie
label.choice › input (radio ou checkbox, masqué visuellement) › .choice-mark (rond, ou carré avec .is-multi) › .choice-body (b + small) › .choice-aside optionnel (prix).
États
Repos · survol · sélectionné (input:checked → contour 2 px encre, fond crème) · bonne réponse data-result="correct" (citron) · à revoir data-result="incorrect" (orange) · désactivé.
Variantes
Liste verticale (quiz, formules) · .choice-grid + .choice-tile (tuiles avec icône : boîte de vitesses, profil).
Tokens
--color-border-selected, --color-surface-sunken, --color-success-*, --color-error-*.
Accessibilité
Toujours un vrai <input> dans un <label>, regroupés dans un <fieldset> avec <legend>. Le résultat du quiz est annoncé en texte (pas seulement en couleur) dans une zone aria-live.
Choix d'une boîte (tuiles)
Ta boîte de vitesses
Code HTML
<fieldset class="fieldset" style="max-width:460px">
  <legend>Ta boîte de vitesses</legend>
  <div class="choice-grid">
    <label class="choice choice-tile"><input type="radio" name="boite" checked><svg class="icon" aria-hidden="true"><use href="#i-gear-auto"/></svg><span class="choice-body"><b>Automatique</b><small>Plus rapide à apprendre, dès 13 h.</small></span></label>
    <label class="choice choice-tile"><input type="radio" name="boite"><svg class="icon" aria-hidden="true"><use href="#i-gear-manual"/></svg><span class="choice-body"><b>Manuelle</b><small>Conduire toutes les voitures, dès 20 h.</small></span></label>
  </div>
</fieldset>
Formules (liste avec prix)
Choisis ta formule
Code HTML
<fieldset class="fieldset" style="max-width:460px">
  <legend>Choisis ta formule</legend>
  <div class="flow" style="--flow-gap:10px">
    <label class="choice"><input type="radio" name="formule"><span class="choice-mark"></span><span class="choice-body"><b>Code en ligne</b><small>Cours, séries et examen blanc illimités.</small></span><span class="choice-aside">29 €</span></label>
    <label class="choice"><input type="radio" name="formule" checked><span class="choice-mark"></span><span class="choice-body"><b>Permis auto</b><small>Code + 20 h de conduite + examen.</small></span><span class="choice-aside">519 €</span></label>
  </div>
</fieldset>
Réponses de quiz — sélection, bonne réponse, à revoir
En agglomération, quelle distance latérale minimale dois-je laisser au cycliste ?
1 mètreBonne réponse : 1 m en ville, 1,50 m hors agglomération.
50 centimètresÀ revoir : c'est trop près.
Code HTML
<fieldset class="fieldset" style="max-width:460px">
  <legend>En agglomération, quelle distance latérale minimale dois-je laisser au cycliste ?</legend>
  <div class="flow" style="--flow-gap:10px">
    <label class="choice"><input type="radio" name="q2" checked><span class="choice-mark"></span><span class="choice-body"><b>50 centimètres</b></span></label>
    <label class="choice"><input type="radio" name="q2"><span class="choice-mark"></span><span class="choice-body"><b>1 mètre</b></span></label>
    <div class="choice" data-result="correct"><span class="choice-mark"></span><span class="choice-body"><b>1 mètre</b><small>Bonne réponse : 1 m en ville, 1,50 m hors agglomération.</small></span></div>
    <div class="choice" data-result="incorrect"><span class="choice-mark"></span><span class="choice-body"><b>50 centimètres</b><small>À revoir : c'est trop près.</small></span></div>
  </div>
</fieldset>
  • Sélection en encre ; réponse juste en citron ; réponse à revoir en orange avec une explication.
  • Marquer la sélection en rose (le rose est réservé à l'action).

Formulaires

Segmented .seg

Bascule entre 2 à 4 vues ou modes exclusifs : Élève / Parents, Par mois / Total, Manuelle / Auto / 100 % en ligne.

  • App
  • Web
  • Home V6
  • Stable
Variantes
Défaut sur crème (pastille encre) · .seg-on-paper sur blanc ombré · .seg-rose pastille rose (tarifs uniquement : ex-.toggle de la home) · .seg-block pleine largeur (app).
États
aria-pressed="true" (bascule de mode) ou aria-selected="true" (si utilisé comme onglets avec role="tablist").
Accessibilité
Groupe role="group" + aria-label. Libellés courts (1-2 mots). Au-delà de 4 options, utiliser .tabs ou .cat-bar.
Variantes
Code HTML
<div class="sg-col">
  <div class="seg" role="group" aria-label="Je suis">
    <button type="button" aria-pressed="true">Élève</button>
    <button type="button" aria-pressed="false">Parents</button>
  </div>
  <div class="seg seg-on-paper seg-rose" role="group" aria-label="Affichage du prix">
    <button type="button" aria-pressed="true">Par mois (4×)</button>
    <button type="button" aria-pressed="false">Prix total</button>
  </div>
  <div class="seg seg-block" role="group" aria-label="Type de formule" style="max-width:390px">
    <button type="button" aria-pressed="false">Manuelle</button>
    <button type="button" aria-pressed="true">Auto</button>
    <button type="button" aria-pressed="false">100 % en ligne</button>
  </div>
</div>

Navigation

Se repérer et changer d'écran, dans l'app comme sur le site.

Navigation · App

Barre supérieure .app-bar

En-tête fixe de chaque écran de l'app : logo ou titre, aide, avatar. Verre dépoli crème, se détache avec un filet au défilement.

  • App
  • Nouveau
Variantes
Racine (onglet principal) : logo + aide + avatar. Détail : bouton retour + titre centré + action. Le lien « ← Retour » texte se place alors dans le contenu, pas dans la barre.
Comportement
position:sticky ; ajouter .is-scrolled dès que le contenu défile. Respecte safe-area-inset-top.
Accessibilité
Dans un <header>. L'avatar est un lien vers le profil avec aria-label="Mon profil".
Racine et détail

Au volant avec Arouna

Code HTML
<div class="sg-col" style="max-width:390px">
  <header class="app-bar">
    <a class="logo" href="#c-app-bar" aria-label="Le Permis Libre — accueil"><svg class="logo-svg" viewBox="0 0 2426 206" aria-hidden="true" focusable="false"><use href="#lpl-logo"/></svg></a>
    <a class="icon-btn" href="#c-app-bar" aria-label="Aide"><svg class="icon" aria-hidden="true"><use href="#i-help"/></svg></a>
    <a class="avatar avatar-lg" href="#c-app-bar" aria-label="Mon profil" style="--size:44px"><img src="/img/a-camille.webp" alt="" width="96" height="96"></a>
  </header>
  <header class="app-bar is-scrolled">
    <a class="icon-btn icon-btn-plain" href="#c-app-bar" aria-label="Retour"><svg class="icon" aria-hidden="true"><use href="#i-chevron-left"/></svg></a>
    <h1 class="app-bar-title">Au volant avec Arouna</h1>
    <button class="icon-btn icon-btn-plain" type="button" aria-label="Partager"><svg class="icon" aria-hidden="true"><use href="#i-share"/></svg></button>
  </header>
</div>

Navigation · App

Barre d'onglets .tab-bar

Navigation principale de l'app, en bas de l'écran : Accueil, Code, Conduite, Boutique, Profil. Onglet actif en rose avec un trait au-dessus.

  • App
  • Nouveau
Règles
3 à 5 onglets, toujours les mêmes, toujours visibles sur les écrans racine. Masquée dans les parcours plein écran (quiz, réservation, paiement). Icône 24 px + libellé 12 px, jamais d'icône seule.
États
aria-current="page" → framboise 2, trait 3 px, icône plus épaisse. Notification : .badge-dot sur l'icône.
Accessibilité
<nav aria-label="Navigation principale">. Cibles de 56 px de haut. Respecte safe-area-inset-bottom.
Onglet Accueil actif, notification sur Conduite
Code HTML
<nav class="tab-bar" aria-label="Navigation principale" style="max-width:390px;position:relative">
  <a href="#c-tab-bar" aria-current="page"><svg class="icon" aria-hidden="true"><use href="#i-home"/></svg>Accueil</a>
  <a href="#c-tab-bar"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg>Code</a>
  <a href="#c-tab-bar"><svg class="icon" aria-hidden="true"><use href="#i-car"/></svg><span class="badge-dot" aria-hidden="true"></span>Conduite<span class="sr"> (nouveau)</span></a>
  <a href="#c-tab-bar"><svg class="icon" aria-hidden="true"><use href="#i-bag"/></svg>Boutique</a>
  <a href="#c-tab-bar"><svg class="icon" aria-hidden="true"><use href="#i-user"/></svg>Profil</a>
</nav>

Affichage

Présenter de l'information : cartes, listes, badges, médias, données.

Affichage

Chip & badge .chip .badge-count

Étiquette courte non cliquable : statut, argument, catégorie. Compteur et pastille de notification.

  • App
  • Web
  • Home V6
  • Stable
Couleur selon le sens
lime acquis, positif, prix · peach humain, garantie · rose nouveauté marketing · ink mise en avant forte · white sur photo · soft neutre. Statuts : success (citron) / error (orange) ; « en attente » en soft.
Ne pas utiliser pour
Un filtre cliquable → .chip-filter. Plus de 3 chips d'affilée sur une même carte.
Accessibilité
Texte en clair (pas uniquement couleur). Un .badge-count sur une icône est doublé d'un texte .sr (« 3 notifications »).
Chips
Diplômé d'État Conseiller dédié Nouveau Le plus choisi ★ 4,93/5 · 464 477 notes Lyon 7e
Validé En attente Refusé Économise 820 €
Code HTML
<div class="sg-col">
  <div class="sg-row">
    <span class="chip chip-lime"><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg> Diplômé d'État</span>
    <span class="chip chip-peach">Conseiller dédié</span>
    <span class="chip chip-rose">Nouveau</span>
    <span class="chip chip-ink">Le plus choisi</span>
    <span class="chip chip-white">★ 4,93/5 · 464 477 notes</span>
    <span class="chip chip-soft">Lyon 7e</span>
  </div>
  <div class="sg-row">
    <span class="chip chip-sm chip-success"><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg> Validé</span>
    <span class="chip chip-sm chip-soft"><svg class="icon" aria-hidden="true"><use href="#i-clock"/></svg> En attente</span>
    <span class="chip chip-sm chip-error"><svg class="icon" aria-hidden="true"><use href="#i-alert-circle"/></svg> Refusé</span>
    <span class="chip chip-lime chip-tilt">Économise 820 €</span>
  </div>
</div>
Badges
3
Code HTML
<div class="sg-row">
  <span class="badge-count">3</span>
  <span class="badge-dot" aria-hidden="true"></span>
  <span class="has-badge"><button class="icon-btn" type="button" aria-label="Notifications, 2 nouvelles"><svg class="icon" aria-hidden="true"><use href="#i-bell"/></svg></button><span class="badge-count" aria-hidden="true">2</span></span>
</div>

Affichage

Carte .card .pcard

Conteneur de contenu groupé. .card blanche pour tout l'app et les contenus web ; .pcard de couleur pour les arguments marketing.

  • App
  • Web
  • Home V6
  • Stable
Variantes
.card (r-m, 24 px) · .card-lg (r-l, padding fluide) · .card-flat (filet sans ombre) · .card-sunken (crème, dans une autre carte) · .card-inverse (encre) · .card-next (« Ta prochaine étape », avec la route). Marketing : .pcard-lime|rose|peach|ink. · .pcard : la couleur suit le sens de l'argument — pcard-rose l'action, l'app, la marque ; pcard-peach l'humain, l'accompagnement ; pcard-ink le sérieux, le prix, la garantie ; pcard-paper + un élément coloré quand aucune couleur ne colle. pcard-lime est déconseillée (citron jamais en fond).
Carte cliquable
.card-link + un seul lien principal avec .stretched : toute la carte devient cliquable sans imbriquer de liens.
Tokens
--color-surface, --shadow-s → --shadow-m au survol, --r-m/--r-l, --space-card.
Accessibilité
Un titre (h2-h4 selon la hiérarchie) en tête de carte. Pas de bouton dans une carte entièrement cliquable.
Prochaine étape (accueil de l'app)

Ta prochaine étape

Le code, c'est parti.

4 questions pour faire le premier pas. Tu as tout pour y arriver.

Lancer ma première série
Code HTML
<div class="card card-next" style="max-width:390px">
  <svg class="route" viewBox="0 0 390 420" preserveAspectRatio="none" aria-hidden="true" style="--road-width:64px"><path class="tarmac" d="M320 -20 C250 80 380 160 300 240 S250 360 330 460"/><path class="center" d="M320 -20 C250 80 380 160 300 240 S250 360 330 460"/></svg>
  <p class="eyebrow" style="margin:0">Ta prochaine étape</p>
  <h2 class="display" style="font-size:2.2rem;max-width:8em">Le code, c'est parti.</h2>
  <p style="max-width:15em">4 questions pour faire le premier pas. Tu as tout pour y arriver.</p>
  <a class="btn btn-primary" href="#c-card" style="align-self:flex-start">Lancer ma première série <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
Cartes de contenu

Ton chemin vers le permis

1/4

Code, conduite, examen : tout est suivi ici.

Voir le détail
Guide

Avant ta première leçon

Ce qu'il faut apporter, comment ça se passe, qui sera là.

Un coup de pouce. Un grand pas.

Ton permis financé avec ton CPF, sans avance de frais.

Vérifier mes droits
Code HTML
<div class="sg-cols">
  <div class="card">
    <div class="card-head"><h3 class="title" style="font-size:1.4rem">Ton chemin vers le permis</h3><span class="chip chip-sm chip-lime">1/4</span></div>
    <p class="muted">Code, conduite, examen : tout est suivi ici.</p>
    <div class="card-foot"><a class="link-plain" href="#c-card">Voir le détail</a></div>
  </div>
  <div class="card card-link">
    <span class="chip chip-sm chip-peach" style="align-self:flex-start">Guide</span>
    <h3 class="title" style="font-size:1.4rem"><a class="stretched" href="#c-card">Avant ta première leçon</a></h3>
    <p class="muted">Ce qu'il faut apporter, comment ça se passe, qui sera là.</p>
  </div>
  <div class="card card-inverse">
    <h3 class="title" style="font-size:1.4rem;color:var(--lime-1)">Un coup de pouce. Un grand pas.</h3>
    <p class="muted">Ton permis financé avec ton CPF, sans avance de frais.</p>
    <div class="card-foot"><a class="btn btn-lime btn-sm" href="#c-card">Vérifier mes droits <span class="arr" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a></div>
  </div>
</div>
Cartes marketing (web)
01

L'app

Code, réservation, suivi : tout dans ta poche.

02

Le moniteur

Diplômé d'État, noté par ses élèves, près de chez toi.

03

Le prix

Connu à l'avance. En 4× sans frais.

Code HTML
<div class="sg-cols">
  <div class="pcard pcard-rose"><span class="k">01</span><h3 class="title">L'app</h3><p>Code, réservation, suivi : tout dans ta poche.</p></div>
  <div class="pcard pcard-peach"><span class="k">02</span><h3 class="title">Le moniteur</h3><p>Diplômé d'État, noté par ses élèves, près de chez toi.</p></div>
  <div class="pcard pcard-ink"><span class="k">03</span><h3 class="title">Le prix</h3><p>Connu à l'avance. En 4× sans frais.</p></div>
</div>
  • Dans l'app : cartes blanches uniquement, la couleur vient des chips et des boutons.
  • Empiler des cartes dans des cartes (sauf .card-sunken).

Affichage

Liste & lignes .list .list-row

Lignes cliquables groupées dans une carte : menu du profil, réglages, leçons à venir, documents.

  • App
  • Web
  • Nouveau
Anatomie
ul.list › li › a.list-row (ou button) › .tile (icône 40 px, teinte optionnelle) · .lr-body (b + small) · .lr-end (valeur, chip, chevron).
Variantes
.is-danger (déconnexion, suppression : tuile pêche, icône orange) · .list-inset (sans carte, dans une modale).
Accessibilité
Une ligne = un seul élément interactif. Hauteur min. 64 px. Chevron décoratif.
Menu du profil
Code HTML
<ul class="list" style="max-width:390px">
  <li><a class="list-row" href="#c-list-row"><span class="tile tile-lime"><svg class="icon" aria-hidden="true"><use href="#i-file"/></svg></span><span class="lr-body"><b>Mon dossier</b><small>2 pièces sur 3</small></span><span class="lr-end"><span class="chip chip-sm chip-error">À compléter</span><svg class="icon chev" aria-hidden="true"><use href="#i-chevron-right"/></svg></span></a></li>
  <li><a class="list-row" href="#c-list-row"><span class="tile tile-rose"><svg class="icon" aria-hidden="true"><use href="#i-wallet"/></svg></span><span class="lr-body"><b>Ma formule</b><small>Permis auto · 20 h</small></span><span class="lr-end"><svg class="icon chev" aria-hidden="true"><use href="#i-chevron-right"/></svg></span></a></li>
  <li><a class="list-row" href="#c-list-row"><span class="tile tile-peach"><svg class="icon" aria-hidden="true"><use href="#i-headset"/></svg></span><span class="lr-body"><b>Aide et contact</b><small>Un conseiller te répond 7j/7</small></span><span class="lr-end"><svg class="icon chev" aria-hidden="true"><use href="#i-chevron-right"/></svg></span></a></li>
  <li><button class="list-row is-danger" type="button"><span class="tile"><svg class="icon" aria-hidden="true"><use href="#i-logout"/></svg></span><span class="lr-body"><b>Se déconnecter</b></span></button></li>
</ul>

Retours & superpositions

Informer, confirmer, alerter, demander une décision.

Retours

Encart & alerte .callout

Message persistant lié au contenu : information, réussite, erreur, conseil. .banner pour un bandeau pleine largeur en haut de page.

  • App
  • Web
  • Nouveau
Variantes
Info (blanc, contour) · success citron · error pêche + contour orange · care pêche plein sans contour (conseil humain) · demo pointillés (données fictives).
Anatomie
Icône 22 px · .callout-body (b titre optionnel + p) · action ou bouton fermer optionnels.
Accessibilité
Erreur apparue après une action : role="alert". Information qui apparaît dynamiquement : role="status". Statique : aucun rôle. Toujours une icône ET un texte explicite.
Variantes

Annulation gratuite jusqu'à 48 h avant la leçon.

Dossier complet

Toutes tes pièces sont validées. Tu peux réserver ta première leçon.

Plus que 2 h disponibles

Ajoute des heures pour continuer à réserver.

Un doute sur ton financement ?

Un conseiller t'appelle gratuitement. Être rappelé

Créneaux fictifs pour essayer le parcours de réservation.

Code HTML
<div class="flow" style="max-width:520px;--flow-gap:12px">
  <div class="callout"><svg class="icon" aria-hidden="true"><use href="#i-info"/></svg><div class="callout-body"><p>Annulation gratuite jusqu'à 48 h avant la leçon.</p></div></div>
  <div class="callout callout-success"><svg class="icon" aria-hidden="true"><use href="#i-check-circle"/></svg><div class="callout-body"><b>Dossier complet</b><p>Toutes tes pièces sont validées. Tu peux réserver ta première leçon.</p></div></div>
  <div class="callout callout-error"><svg class="icon" aria-hidden="true"><use href="#i-alert"/></svg><div class="callout-body"><b>Plus que 2 h disponibles</b><p>Ajoute des heures pour continuer à réserver.</p></div></div>
  <div class="callout callout-error" role="alert"><svg class="icon" aria-hidden="true"><use href="#i-alert-circle"/></svg><div class="callout-body"><b>Paiement refusé</b><p>Ta banque a refusé la transaction. Essaie une autre carte.</p></div></div>
  <div class="callout callout-care"><svg class="icon" aria-hidden="true"><use href="#i-headset"/></svg><div class="callout-body"><b>Un doute sur ton financement ?</b><p>Un conseiller t'appelle gratuitement. <a class="link" href="#c-callout">Être rappelé</a></p></div></div>
  <div class="callout callout-demo"><svg class="icon" aria-hidden="true"><use href="#i-eye"/></svg><div class="callout-body"><p>Créneaux fictifs pour essayer le parcours de réservation.</p></div></div>
</div>
Bandeau
Code HTML
<div class="banner">Rentrée : <b>−10 %</b> sur le pack code + conduite jusqu'au 15 novembre. <a href="#c-callout">J'en profite</a></div>
Premier jet. Suite prévue après ta validation : date picker, créneaux, quantité, slider, recherche, checkbox/radio/switch, onglets, catégories, fil d'Ariane, pagination, progression, étapes, header web, menu mobile, avatar, notation & avis, carte photo, fiche moniteur, inclus, checklist dossier, stats, prix, récap panier, carte de réservation, galerie, accordéon, tableau, état vide, skeleton, modale, bottom sheet, menu, tooltip, toast, hero, route, marquee, bloc sombre, polaroid, feu tricolore, footer — puis gabarits (écran d'app, page web) et recettes (réservation, quiz, panier, dossier).