Cet outil règle l'apparence du site : couleurs, palettes, contours, vidéos.
Connecte-toi avec ton compte GitHub pour y accéder.
Design system PrepaStrat
version 2026-08-05-a
Règle l'apparence, regarde l'aperçu à droite : il utilise les feuilles de style du
site lui-même. Rien ne part en ligne tant que tu n'as pas cliqué sur « Publier sur le
site », en bas de cette colonne.
Tous les réglages sont dans le bloc à onglets, à droite :
Général pour ce qui s'applique à tout le site (marque, typographie, arrondis, menu),
puis un onglet par page. Les quatre derniers onglets forment le
parcours d'inscription — entrée, formules, paiement, validation d'adresse ;
ils sont livrés sans couleur propre et suivent donc la marque.
✅ Aucune clé à saisir. Tu te connectes avec ton compte GitHub — il sert
uniquement à prouver qui tu es. C'est le serveur PrepaStrat qui écrit sur le site, après avoir
vérifié chaque valeur. Il n'accepte que des couleurs, des nombres et des adresses de vidéo :
aucun code ne peut passer par ici.
🔴 Ceci est une maquette, pas le vrai site. Les vraies pages sont sur un autre
domaine : impossible de les prévisualiser ici. Les composants sont redessinés avec les mêmes
tokens et les mêmes relations qu'en production — mais seul le site fait foi. … Aperçu de la page : …
Configuration
Marque
La couleur principale du site. Le survol et la teinte de fond en sont déduits ;
décoche pour les régler à la main.
--ps-accent
-hover
-tint
Texte, bords, surfaces
Les gris du site : titres, textes secondaires, bords de cartes et fonds de panneaux.
--ps-text
-soft
--ps-border
-surface-soft
Typographie
La police de tout le site.
⚠️ La police doit être disponible sur le site LearnWorlds. L'aperçu ici
charge les polices depuis Google Fonts ; si la tienne n'est pas installée côté LearnWorlds,
le site retombera sur la suivante de la liste.
Arrondis
Les rayons de coin, partout sur le site.
↳ le liseré suit tout seul (rayon − 2px)
Téléphone — respiration
Sur téléphone, LearnWorlds garde les mêmes grands espaces que sur ordinateur :
le contenu arrive très bas. Ces deux réglages resserrent, uniquement sous 768 px.
↳ mesuré sur la page Formations : 90 px d'origine, le titre commençait 50 px plus bas
⚠️ Les sections que tu as réglées à 0 dans le Site Builder ne bougent pas :
ton réglage par section reste prioritaire. Ce curseur ne touche que les sections restées au format par défaut.
Menu — couleur des pictos
Une couleur par entrée du menu, décidée une fois et identique sur tout le site.
Décochée, l'entrée reprend la couleur principale de la marque.
Profil et Déconnexion n'y figurent pas : ce sont des entrées de compte,
elles restent volontairement sobres.
Tableau de bord du membre — le bouton de chaque tuile prend la couleur de SA page
Votre grade
Analyste
Les bases sont posées, continuez sur cette lancée.
18 %global
Cartes des membres — exemples inventés, pas de vrais membres
Le business sense est une compétence essentielle en entretien de conseil.
4 Leçons
1.3 – Maîtriser les types d'études de cas
1.4 – Astuces pour l'étude de cas
1.5 – Les réflexes fondamentaux
Pastilles de champs (fiches secteur / études de cas)
Cours fermés — ce que voit un visiteur sans accès
S'abonner
La carte est floutée, pas remplacée. On reconnaît le cours, on ne peut pas l'ouvrir :
le clic mène à l'offre au lieu de l'écran d'accès refusé de LearnWorlds.
Trois personnes ne le voient jamais : un abonné, un étudiant d'école partenaire dont
l'adresse est validée, et n'importe qui sur un cours réellement ouvert — le webinaire gratuit
reste cliquable.
Un compte dont l'adresse n'est pas validée voit le cadenas, mais le clic l'envoie vers la
page de validation, pas vers le paiement : il n'a rien à acheter, il a un lien à cliquer.
Le parcours d'inscription — quatre pages qui se passent le relais
/inscription
L'adresse décide
Domaine d'école partenaire → formulaire gratuit. Toute autre adresse → l'offre.
/formules
Le choix
Deux formules, deux boutons. C'est le seul endroit où la trimestrielle est atteignable.
/payment
Le paiement
Page de LearnWorlds, habillée à la charte. Le compte se crée ici, pas avant.
/email-verification-pending
La validation
L'adresse doit être prouvée. C'est elle qui déclenche l'accès d'une école.
🔴 Ces quatre pages n'ont que leur COULEUR de réglable ici — pas de contour :
aucune ne porte de cartes, sauf Formules dont les deux offres en acceptent un.
Les textes et les prix de la page Formules ne se règlent pas ici non plus :
ils s'écrivent en lignes clé : valeur
dans un bloc de texte de la page, depuis le Site Builder de LearnWorlds.
⚠️ Renommer l'une de ces pages casse la chaîne en silence. Les slugs
inscription et
formules sont écrits dans le code du
site : une page renommée perd sa couleur, son habillage, et les liens qui y mènent tombent en
404. Le bandeau d'alerte au-dessus du bouton « Publier » signale les slugs devenus introuvables.
Page d'entrée — maquette : la vraie page est servie par LearnWorlds
prepastrat.learnworlds.com/inscription
Rejoindre PrepaStrat
Entrez votre adresse e-mail : si votre école est partenaire, votre accès est déjà ouvert.
Toute autre adresseDirection la page des formules. Le compte se créera pendant le paiement.
Cette page oriente, elle n'autorise pas. Aller directement au formulaire ne donne
aucun accès : c'est l'étiquette posée sur l'adresse validée qui ouvre les cours.
Les deux formules — tout y est peint à la couleur de la page
prepastrat.learnworlds.com/formules
Mensuel
99 € / mois
Sans engagement
Accès à tout le catalogue
Résiliable à tout moment
Choisir
−15 %
Trimestriel
84 € / mois
252 € tous les 3 mois
Accès à tout le catalogue
Le tarif le plus bas
Choisir
⚠️ Les prix affichés ci-dessus ne sont pas lus dans LearnWorlds : la plateforme
ne permet pas de les récupérer depuis une autre page. Ils s'écrivent dans le bloc de texte de la page
Formules. Changer un tarif dans LearnWorlds sans corriger ce bloc fait mentir la page
— l'étudiant verra toutefois le vrai prix à l'écran de paiement avant de valider.
Le bouton de chaque formule porte son identifiant de plan. Sans lui, LearnWorlds
sélectionne la formule mensuelle en silence et la trimestrielle devient inatteignable :
si un plan est recréé côté LearnWorlds, son identifiant change et le bouton mène à la mauvaise offre.
Dernier écran avant de payer — page de LearnWorlds, seulement habillée
prepastrat.learnworlds.com/payment
Vos informations
Paiement
bloc bancaire — cadre Stripe, intouché
Payer 99 €
Formation PrepaStrat Conseil
FormuleMensuel
Renouvellementchaque mois
Total99 €
Rien n'est touché au paiement lui-même. Le bloc bancaire vit dans un cadre fourni
par le prestataire : on habille ce qui l'entoure, jamais lui. Ce qui a été retiré de cet écran :
les boutons de connexion sociale (proposer de se ré-authentifier au moment où l'on sort sa carte),
un cadre d'image produit vide, et deux polices étrangères à la charte.
Validation de l'adresse — le premier écran après l'inscription
Ouvrez-le pour activer votre compte. Pensez à regarder dans les indésirables.
Renvoyer l'e-mailJ'ai déjà validé
C'est l'écran le plus important du parcours d'école. L'étiquette qui ouvre l'accès
d'un étudiant est posée à la validation de l'adresse, pas à l'inscription : tant que ce
lien n'est pas cliqué, un compte @essec.edu
n'a aucun cours. « J'ai déjà validé » recharge la page : juste après le clic sur le lien reçu,
la page servie annonce encore un compte en attente pendant quelques instants.