move to indexedb and add about page

DESIGN_SYSTEM.md

@@ -139,7 +139,19 @@ Style courant :
 
 Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code.
 
-## 8. Boutons
+## 8. Panneaux De Section
+
+Les grandes sections non repetitives, comme le dialogue d'origine et les sections de presentation, utilisent `.nebula-panel`.
+
+Style courant :
+
+- fond semi-transparent `rgba(16, 20, 38, 0.42)` ;
+- bordure statique identique aux outils en etat normal ;
+- accent dore leger en bas/droite ;
+- pas de hover sur les panneaux de lecture ;
+- implementation via le mixin `gold-panel-frame` dans `website/src/styles/_mixins.scss`.
+
+## 9. Boutons
 
 ### Primary
 
@@ -189,7 +201,7 @@ Les icones utilisent `currentColor` via `.ui-icon`.
 - hover danger : icone blanche + glow rouge discret ;
 - utiliser les SVG de `website/public/static/icons`.
 
-## 9. Formulaires Et Checkbox
+## 10. Formulaires Et Checkbox
 
 Inputs et textareas :
 
@@ -207,7 +219,7 @@ Checkbox :
 - etat coche avec gradient dore/violet et coche blanche ;
 - spacing adapte dans les filtres.
 
-## 10. Navigation
+## 11. Navigation
 
 Sidebar :
 
@@ -218,7 +230,7 @@ Sidebar :
 
 Le nom de marque affiche `Sokko` en blanc et `G` en dore. Au hover, `Sokko` anime vers le dore de droite a gauche puis revient au hover out.
 
-## 11. Filtres Et Tableaux
+## 12. Filtres Et Tableaux
 
 Filtres :
 
@@ -234,7 +246,7 @@ Tableaux :
 - bordures fines ;
 - lisibilite prioritaire sur la decoration.
 
-## 12. Toolboxes
+## 13. Toolboxes
 
 Les toolboxes sont locales et stockees dans le navigateur.
 
@@ -244,12 +256,12 @@ Regles UI :
 - image de jeu si associee a un jeu ;
 - icone editable si toolbox libre ;
 - action importer/exporter clairement identifiee ;
-- quota localStorage visible en bas de page/panneau ;
+- budget IndexedDB recommande visible en bas de page/panneau, avec quota navigateur reel seulement informatif ;
 - import/export global disponibles.
 
 Les cards toolbox doivent garder une taille compacte. L'image/icone de cover est cliquable.
 
-## 13. Donnees Jeux
+## 14. Donnees Jeux
 
 Le contenu editorial editable doit rester dans :
 
@@ -259,7 +271,7 @@ Le contenu editorial editable doit rester dans :
 
 Les retours a la ligne `\n` du JSON doivent etre rendus correctement. Le JSX ne doit pas contenir de contenu editorial long si une entree JSON existe deja.
 
-## 14. Modales Et Drawer
+## 15. Modales Et Drawer
 
 Modales :
 
@@ -274,7 +286,7 @@ Drawer toolbox :
 - overlay floute leger ;
 - les actions internes ne doivent pas fermer le drawer sauf action explicite.
 
-## 15. Scrollbars
+## 16. Scrollbars
 
 Les scrollbars reprennent l'ancien rendu :
 
@@ -304,7 +316,7 @@ Les scrollbars reprennent l'ancien rendu :
 
 Ne pas ajouter de rail noir visible ni de double bordure pres des panneaux.
 
-## 16. Images Et Assets
+## 17. Images Et Assets
 
 Regles :
 
@@ -317,7 +329,7 @@ Regles :
 - les categories de jeu utilisent des images representatives, entieres et bien cadrees ;
 - eviter les images trop grandes dans les cards.
 
-## 17. Accessibilite
+## 18. Accessibilite
 
 Minimum attendu :
 
@@ -329,7 +341,7 @@ Minimum attendu :
 - modales avec `role="dialog"` et `aria-modal="true"` ;
 - ne pas transmettre une information uniquement par couleur.
 
-## 18. A Eviter
+## 19. A Eviter
 
 - accents dores partout ;
 - hover trop lumineux sur tous les elements ;