Skill Concepteur ALUR 2h · Design System & Moteur Pédagogique

STANDARD RUDY MARCIANO ALUR-2H-LIGHT-DECK v2.0

Moteur de Création de Chapitres & Modules Loi ALUR

Cette ressource intégrée au site définit le protocole obligatoire pour tout agent ou concepteur générant de nouveaux chapitres. Elle garantit l'homogénéité absolue, la force pédagogique et le rendu Zéro Scroll en Mode Clair Exécutif.

2 HEURES

Norme Homologuée

2 chapitres d'1h · 4 modules de 15 min par heure · 10 slides au total.

MODE CLAIR

Executive Light Deck

Fond gris doux, cartes blanches pures, typographie contrastée XXL.

0 SCROLL

Zéro Ascenseur

Plein écran strict sur iPhone (390x844) et ordinateur (1280x800).

LUDIQUE

Gamification & Audio

Défis tactiles, simulateurs, alertes Web Audio et réflexe Rudy Marciano.

Architecture d'une Slide Homologuée (Template)

Chaque slide doit strictement adopter ce gabarit pour respecter le ratio d'écran sans défilement :

<!-- GABARIT SLIDE OFFICIEL -->
<section id="slide-X" class="slide-pane w-full max-w-6xl h-full max-h-full bg-white text-slate-900 rounded-2xl sm:rounded-3xl border border-slate-200 shadow-xl p-3 sm:p-5 lg:p-6 flex flex-col justify-between overflow-y-auto custom-scrollbar">
    <div class="flex-1 flex flex-col justify-between space-y-1.5 sm:space-y-2.5 min-h-0">
        <!-- 1. En-tête : Badge Chapitre + Badge Article/Loi + Compteur -->
        <div class="flex items-center justify-between gap-2 flex-wrap shrink-0">
            <span class="px-2.5 py-0.5 rounded-full bg-brand-50 text-brand-700 font-extrabold border border-brand-200 text-xs">
                CHAPITRE X • MODULE X.X (15 MIN)
            </span>
            <span class="text-xs font-mono text-slate-400 font-bold">SLIDE XX / 10</span>
        </div>

        <!-- 2. Titre imposant XXL & Sous-titre juridique -->
        <div class="shrink-0">
            <h2 class="text-base sm:text-xl md:text-2xl lg:text-3xl font-black text-slate-900 tracking-tight leading-snug">
                [Titre Massif du Module]
            </h2>
            <p class="text-[10px] sm:text-xs md:text-sm text-slate-600 mt-0.5 leading-snug">
                [Référence jurisprudentielle ou légale clé]
            </p>
        </div>

        <!-- 3. Grille 3 ou 4 Métriques Choc -->
        <div class="grid grid-cols-3 gap-2 text-center shrink-0">
            <div class="bg-slate-50 border border-slate-200 rounded-xl p-2.5">
                <span class="text-xl sm:text-2xl font-black text-brand-700 font-mono block">CHIFFRE</span>
                <span class="text-xs font-bold text-slate-700 block">Libellé</span>
            </div>
            ...
        </div>

        <!-- 4. Zone Interactive Pédagogique (Défi / Simulateur / Clause) -->
        <div class="bg-slate-50 border-2 border-brand-300 rounded-xl p-2.5 space-y-1.5 shrink-0 shadow-sm">
            ...
        </div>
    </div>

    <!-- 5. Footer Réflexe Rudy Marciano -->
    <div class="pt-2 border-t border-slate-200 flex items-center justify-between text-xs text-slate-600 shrink-0 mt-1">
        <span>💡 <strong>Le Réflexe Rudy :</strong> [Conseil terrain]</span>
        <button onclick="goToSlide(X+1)" class="font-black text-brand-600 hover:text-brand-800">Module suivant →</button>
    </div>
</section>

Scripts et Outils Associés

python3 test_slide_fit.py Vérifie l'absence de scroll mobile & desktop

python3 deploy.py [nom_du_fichier.html] Déploie automatiquement sur formation-maison.fr