Refocus responsive layouts on compact desktop use

DESIGN_SYSTEM.md

@@ -159,6 +159,8 @@ Regles :
 
 Les heroes de la page d'accueil et des pages jeux utilisent le meme style via `.hero` et `.game-hero`.
 
+Sur la page d'accueil, le hero conserve deux colonnes en fenêtre large. Jusqu'à `1024px`, le groupe des deux statistiques passe sous le texte et les actions, aligné à gauche. Les deux cartes restent côte à côte tant que leur largeur le permet.
+
 Caracteristiques :
 
 - fond commun nebula sombre ;
@@ -205,7 +207,7 @@ Style courant :
 - l'engrenage Configuration ouvre un panneau pleine largeur sous l'en-tête, nommé par `aria-controls` / `aria-expanded`. Il regroupe conditionnellement Espace, Guide, réglages propres à l'outil et Données (import/export) ; ouvrir l'ajout ferme Configuration et réciproquement ;
 - dans Configuration, Espace et Données partagent la première ligne en deux colonnes. Espace affiche directement le sélecteur compact dont le placeholder décrit l'action. Les réglages propres à l'outil et la liaison Guide occupent toute la largeur en dessous ; si Espace est absent, Données utilise toute la première ligne ;
 - le panneau Configuration reste une surface intégrée à l'outil : un seul contour discret, des sous-sections sans effet de carte imbriquée, séparées uniquement par des filets légers, avec libellés et contrôles compacts ;
-- sur mobile, l'en-tête se répartit sur deux lignes compactes et les sections/champs de Configuration passent en une colonne, dans l'ordre Espace, Données puis réglages spécifiques.
+- en fenêtre compacte, l'en-tête se répartit sur deux lignes et les sections/champs de Configuration passent en une colonne, dans l'ordre Espace, Données puis réglages spécifiques.
 
 Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code.
 
@@ -339,7 +341,7 @@ Regles UI :
 - les actions de nœud utilisent des boutons icônes : ajout, repli, suppression, déplacement ;
 - le bouton de déplacement doit rester clairement visible sur les cards compactes, notamment les nœuds `Texte` et `Checklist` ;
 - la progression d'un parent doit rester agrégée et lisible sans afficher une formule détaillée dans la carte ;
-- en panneau latéral ou mobile, l'arbre passe en une colonne sans scroll horizontal.
+- en panneau latéral ou fenêtre compacte, l'arbre passe en une colonne sans scroll horizontal.
 
 ### Combos
 
@@ -389,7 +391,7 @@ Regles UI :
 - la creation de mémo est masquee par defaut et s'ouvre via le bouton `+` du header d'outil ;
 - réorganisation des cartes par poignée de drag & drop compacte ;
 - bande deroulante visible uniquement quand elle est active et qu'au moins un mémo ou une alerte de planificateur existe ; elle affiche tous les mémos dans l'outil, peut intégrer les tâches non effectuées proches du reset depuis un ou tous les planificateurs de la même toolbox, et reste fixée en bas des pages complètes de cette toolbox ainsi que des pages du jeu qui lui est associé ;
-- la bande fixe laisse le contenu verticalement accessible, suit la largeur disponible et remonte au-dessus de la navigation mobile.
+- la bande fixe laisse le contenu verticalement accessible et suit la largeur disponible entre la sidebar et le bord droit.
 
 ### Calque De Dessin
 
@@ -456,12 +458,13 @@ Regles :
 - la categorie active commence par un mini-hero descriptif, sans compteur decoratif ;
 - chaque fiche commence par le titre, l'icone, le badge de categorie et une description directe de l'outil ;
 - l'exemple interactif reste visible en permanence et centre horizontalement ;
-- les reperes de boutons propres a l'outil sont places a gauche de l'exemple, puis empiles au-dessus sur mobile ;
+- les reperes de boutons propres a l'outil sont places a gauche de l'exemple, puis empiles au-dessus dans la disposition compacte jusqu'a `1024px` ;
 - les reperes sont groupes par categorie de controles de l'outil, avec apercu visuel du bouton et label court ;
 - les descriptions de reperes sont reservees aux comportements non evidents, par exemple un bouton qui agit sur toute la ligne ou une action de drag & drop ;
 - les fonctionnalites detaillees et formats d'import texte sont presentes sous l'exemple dans un panneau repliable pour ne pas alourdir la lecture avant manipulation ;
 - les controles propres au catalogue, comme la reinitialisation d'une demo, ne sont pas documentes comme fonctionnalites de l'outil ;
-- sur mobile, le sommaire devient un bloc normal place avant les fiches, sans position sticky.
+- en fenêtre compacte jusqu'a `1024px`, le sommaire devient un bloc normal place avant les fiches, sans position sticky ;
+- sur l'accueil, cette même disposition masque l'illustration de la section « Origine du nom » et sa séparation verticale pour privilégier le dialogue.
 
 ## 11. Boutons
 
@@ -590,7 +593,7 @@ Filtres :
 - les options directes avec libellé suivent la largeur naturelle de leur contenu ; lorsqu’elles passent en icône seule, elles retrouvent une largeur compacte commune ;
 - la recherche des barres horizontales est plafonnée à `260px` afin de ne pas étirer inutilement les filtres ;
 - `nds-active-filters` forme une seconde section compacte dans la barre principale, séparée sur toute la largeur par un trait doré semi-transparent sans ombre ; la section haute conserve les 10 px de padding vertical de la barre, tandis que la section basse se limite à 4 px ; elle affiche un badge fermable par recherche ou critère actif, dont le bouton retire uniquement le filtre correspondant ;
-- les barres sont sticky sous la topbar sur desktop, reviennent à la ligne et redeviennent statiques sur mobile ;
+- les barres sont sticky sous la topbar en fenêtre large, reviennent à la ligne et redeviennent statiques en fenêtre compacte ;
 - reset avec bouton icône `rubber`.
 
 Tableaux :
@@ -616,7 +619,7 @@ Outil Tableau :
 - La barre d'espaces se place entre le hero de la toolbox et les contrôles de disposition, dans la page complète comme dans le drawer lié à un jeu.
 - Quand seul l'espace par défaut existe, son onglet est masqué et le bouton `Nouvel espace` reste aligné à droite. À partir de deux espaces, la liste devient un `tablist` horizontal scrollable et l'ajout prend la forme d'un bouton `+` placé immédiatement après le dernier onglet.
 - L'espace actif reprend les surfaces et focus des radio-button groups. Les onglets ciblés par un outil affichent un soulignement doré ; les espaces secondaires disposent d'une poignée de réordonnancement distincte avec un retrait à gauche.
-- Le réordonnancement des onglets reprend l'indicateur d'insertion doré des outils, positionné à gauche ou à droite selon la destination. Les actions de renommage et suppression restent groupées à droite et passent sous les onglets sur mobile.
+- Le réordonnancement des onglets reprend l'indicateur d'insertion doré des outils, positionné à gauche ou à droite selon la destination. Les actions de renommage et suppression restent groupées à droite et passent sous les onglets en fenêtre étroite.
 
 Les toolboxes sont locales et stockees dans le navigateur.
 
@@ -656,13 +659,19 @@ Modales :
 Drawer toolbox :
 
 - le bouton de topbar associe icone et texte visible : « Afficher la toolbox » quand le drawer est ferme, puis « Masquer la toolbox » lorsqu'il est ouvert ;
-- panneau lateral ancre a droite, ouvert a `700px` et redimensionnable uniquement vers une largeur superieure ;
-- le shell reserve toujours `700px` au panneau : toute largeur supplementaire recouvre la partie droite de la page sans la reduire davantage ;
+- à partir de `1440px`, le panneau lateral est ancre a droite, ouvert a `700px` et redimensionnable uniquement vers une largeur superieure ;
+- à partir de `1440px`, le shell reserve toujours `700px` au panneau : toute largeur supplementaire recouvre la partie droite de la page sans la reduire davantage ;
 - la page reste visible et interactive, sans backdrop bloquant ni fermeture au clic exterieur ;
-- sous `700px`, le panneau occupe `100vw`, ne reserve plus d'espace lateral et masque sa poignee de redimensionnement ;
+- sous `1440px`, la topbar propose une bascule « Guide / Toolbox » à la taille standard des groupes de boutons ; chaque vue occupe toute la zone de contenu et la poignée de redimensionnement est masquée ;
+- le guide et la toolbox restent montés après leur première ouverture en mode compact afin de conserver filtres, saisies et positions de défilement ; la vue masquée est retirée du parcours clavier et de l'arbre d'accessibilité ;
+- la sidebar mesure `72px` jusqu'à `1024px`, puis `248px` jusqu'au passage en panneau latéral ;
 - la largeur revient a `700px` a chaque ouverture et n'est pas persistee ;
 - les actions internes ne doivent pas fermer le drawer sauf action explicite.
 
+La cible responsive est une fenêtre d'ordinateur de second écran. Les parcours sont validés à partir de `768px`. Il n'existe pas de navigation dédiée au téléphone ; sous la largeur validée, l'application reste accessible sans garantie de confort.
+
+Quand la zone utile d'une page toolbox passe sous `900px`, les outils sont forcés sur une seule colonne et le sélecteur une/deux colonnes est masqué. La préférence de disposition reste enregistrée et redevient applicable lorsque la largeur le permet.
+
 Notifications internes :
 
 - pas d'alerte navigateur ;
@@ -882,7 +891,7 @@ conserve un marqueur d'état lorsque la liste est associée et expose `aria-expa
 et `aria-controls`. Le bouton NDS
 « Associer à la page » / « Dissocier » expose `aria-pressed` ; activer une liste
 dissocie la précédente. Le switch « Masquer les cochés » est désactivé sur les listes
-non associées. Les commandes sont centrées et reviennent à la ligne sur mobile ;
+non associées. Les commandes sont centrées et reviennent à la ligne en fenêtre étroite ;
 le nombre de correspondances figure dessous. Une liste active devenue incompatible
 garde ses commandes avec un message explicite.
 Un encart compact placé en haut à droite du header du guide expose un sélecteur dès