update docs and agents

DESIGN_SYSTEM.md

@@ -139,7 +139,61 @@ Style courant :
 
 Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code.
 
-## 8. Panneaux De Section
+### Outils En Deux Colonnes
+
+Les outils avec controles a gauche et resultats a droite doivent reutiliser les classes generiques `tool-split-*`.
+
+Exemples actuels :
+
+- calculateur ;
+- timer.
+
+Regles :
+
+- ratio de base 35 / 65 entre controles et resultats ;
+- panneau gauche compact, sans hauteur artificielle inutile ;
+- panneau droit scrollable uniquement quand l'utilisateur active le switch dedie ;
+- hauteur scrollable cible : environ 450 px ;
+- boutons reset, copie, scroll et tri alignes en haut a droite du panneau de resultats ;
+- edition inline des libelles plutot que boutons ou alertes navigateur ;
+- styles specifiques autorises uniquement pour la logique propre a l'outil.
+
+### Timer
+
+Le timer combine chronometre a etapes et comptes a rebours multiples.
+
+Regles UI :
+
+- tabs compactes avec icones uniquement et tooltips ;
+- chronometre avec centiemes visibles en plus petit dans le timer principal ;
+- les temps sauvegardes gardent une taille uniforme ;
+- compte a rebours sans centiemes ;
+- types visibles : `Duree`, `Heure precise`, `Pattern horaire`, `Intervalle` ;
+- les libelles au-dessus des champs `hh:mm:ss` restent accessibles en `sr-only`, mais ne sont pas visibles ;
+- les boutons de controle utilisent les icones `play-circle`, `pause-circle`, `record-circle`, `stop-circle`, `refresh`, `sort-time`, `scrollable`.
+
+Alertes timer :
+
+- switch a 3 etats par compte a rebours : aucune alerte, alerte si la toolbox est visible, alerte globale site ;
+- le garde-fou ne se base pas sur le temps restant, mais sur la frequence configuree ;
+- le garde-fou bloque uniquement les comptes a rebours recurrents (`Pattern horaire`, `Intervalle`) si la repetition est inferieure a 5 minutes ;
+- un `Pattern horaire` comme `X:24:X` cible `hh:24:00` et se repete toutes les heures.
+
+## 8. Tabs Et Switchs
+
+Tabs :
+
+- utiliser le composant commun quand un outil doit alterner entre plusieurs modes ;
+- icones seules quand les labels sont evidents ou fournis en tooltip ;
+- etat actif sobre : bordure doree, fond legerement dore/violet, pas de gros glow.
+
+Switchs :
+
+- les switchs binaires utilisent l'icone a gauche et le rail a droite quand ils controlent un mode technique comme `scrollable` ;
+- les switchs a plusieurs etats doivent rester compacts, avec icones et tooltips ;
+- les etats desactives doivent etre clairement attenues et sans etat actif dore.
+
+## 9. Panneaux De Section
 
 Les grandes sections non repetitives, comme le dialogue d'origine et les sections de presentation, utilisent `.nebula-panel`.
 
@@ -151,7 +205,7 @@ Style courant :
 - pas de hover sur les panneaux de lecture ;
 - implementation via le mixin `gold-panel-frame` dans `website/src/styles/_mixins.scss`.
 
-## 9. Boutons
+## 10. Boutons
 
 ### Primary
 
@@ -201,7 +255,7 @@ Les icones utilisent `currentColor` via `.ui-icon`.
 - hover danger : icone blanche + glow rouge discret ;
 - utiliser les SVG de `website/public/static/icons`.
 
-## 10. Formulaires Et Checkbox
+## 11. Formulaires Et Checkbox
 
 Inputs et textareas :
 
@@ -219,7 +273,12 @@ Checkbox :
 - etat coche avec gradient dore/violet et coche blanche ;
 - spacing adapte dans les filtres.
 
-## 11. Navigation
+Accessibilite :
+
+- utiliser `.sr-only` pour conserver un label utile sans l'afficher ;
+- ne pas retirer les labels accessibles au profit du visuel uniquement.
+
+## 12. Navigation
 
 Sidebar :
 
@@ -230,7 +289,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.
 
-## 12. Filtres Et Tableaux
+## 13. Filtres Et Tableaux
 
 Filtres :
 
@@ -246,7 +305,7 @@ Tableaux :
 - bordures fines ;
 - lisibilite prioritaire sur la decoration.
 
-## 13. Toolboxes
+## 14. Toolboxes
 
 Les toolboxes sont locales et stockees dans le navigateur.
 
@@ -261,7 +320,7 @@ Regles UI :
 
 Les cards toolbox doivent garder une taille compacte. L'image/icone de cover est cliquable.
 
-## 14. Donnees Jeux
+## 15. Donnees Jeux
 
 Le contenu editorial editable doit rester dans :
 
@@ -271,7 +330,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.
 
-## 15. Modales Et Drawer
+## 16. Modales, Drawer Et Notifications
 
 Modales :
 
@@ -286,7 +345,18 @@ Drawer toolbox :
 - overlay floute leger ;
 - les actions internes ne doivent pas fermer le drawer sauf action explicite.
 
-## 16. Scrollbars
+Notifications internes :
+
+- pas d'alerte navigateur ;
+- utiliser les toasts internes globaux ;
+- position configurable gauche/droite via le switch de la page toolboxes ;
+- une nouvelle alerte s'empile au-dessus des precedentes ;
+- limite visible : 5 toasts ;
+- a la 6e alerte, fermer la plus ancienne ;
+- duree d'affichage cible : 2 minutes, fermeture manuelle possible ;
+- style plus visible que les confirmations simples : bordure conique animee, pulse leger, arrivee depuis le cote configure.
+
+## 17. Scrollbars
 
 Les scrollbars reprennent l'ancien rendu :
 
@@ -316,7 +386,7 @@ Les scrollbars reprennent l'ancien rendu :
 
 Ne pas ajouter de rail noir visible ni de double bordure pres des panneaux.
 
-## 17. Images Et Assets
+## 18. Images Et Assets
 
 Regles :
 
@@ -329,7 +399,7 @@ Regles :
 - les categories de jeu utilisent des images representatives, entieres et bien cadrees ;
 - eviter les images trop grandes dans les cards.
 
-## 18. Accessibilite
+## 19. Accessibilite
 
 Minimum attendu :
 
@@ -341,7 +411,7 @@ Minimum attendu :
 - modales avec `role="dialog"` et `aria-modal="true"` ;
 - ne pas transmettre une information uniquement par couleur.
 
-## 19. A Eviter
+## 20. A Eviter
 
 - accents dores partout ;
 - hover trop lumineux sur tous les elements ;