---
---
<h1 class="text-3xl font-bold mb-6 border-b pb-4">Les Clés</h1>
<p class="mb-6">Ceci est notre langage pour capturer les pensées rapidement. Chaque symbole a une intention.</p>

<div class="space-y-8">
    <section>
        <h2 class="text-xl font-bold text-slate-700 border-b pb-2 mb-4">Symboles de Base</h2>
        <ul class="space-y-4 text-lg">
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">•</span><span>Tâche à faire</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-green-600">X</span><span>Tâche terminée</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-blue-600">&gt;</span><span>Tâche reportée (migrée)</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-orange-600">&lt;</span><span>Tâche planifiée (calendrier)</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">○</span><span>Événement</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">–</span><span>Note / Idée</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-slate-400"><s>•</s></span><span>Tâche annulée</span></li>
        </ul>
    </section>

    <section>
        <h2 class="text-xl font-bold text-slate-700 border-b pb-2 mb-4">Signifiants de Priorité (Préfixes)</h2>
        <p class="text-sm text-slate-500 mb-4">Placés à gauche du symbole de base pour ajouter du contexte.</p>
        <ul class="space-y-4 text-lg">
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-red-500">*</span><span>Priorité absolue</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-yellow-500">!</span><span>Inspiration, Eurêka !</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-green-700">$</span><span>Aspect financier</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">👁️</span><span>À explorer / Rechercher</span></li>
        </ul>
    </section>

    <section>
        <h2 class="text-xl font-bold text-slate-700 border-b pb-2 mb-4">Souffle de Vie (Bien-être & Réflexion)</h2>
        <ul class="space-y-4 text-lg">
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">△</span><span>Leçon apprise, réflexion</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl text-pink-500">♡</span><span>Moment de gratitude</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">⭘</span><span>En attente (dépend de qqn d'autre)</span></li>
            <li class="flex items-center"><span class="w-8 text-center font-mono text-xl">⚓</span><span>Rituel, habitude ancrée</span></li>
        </ul>
    </section>

    <section class="mt-12 pt-6 border-t">
        <h3 class="text-lg font-semibold mb-2">Exemple d'utilisation :</h3>
        <div class="p-4 bg-slate-50 rounded-lg text-slate-700 font-mono">
            <p>* • Finaliser le projet A</p>
            <p>$ – Penser à renouveler l'abonnement</p>
            <p>! △ La patience est la forme la plus douce du courage.</p>
            <p>○ Passer faire coucou à Sofia en métropole</p>
        </div>
    </section>
</div>