Refine local backup modal and permission flow

website/public/data/site.json

@@ -1816,19 +1816,20 @@
     "autoBackup": {
       "eyebrow": "Sauvegarde locale",
       "title": "Sauvegarde automatique",
-      "description": "Cette fonctionnalité n’est pas disponible dans tous les navigateurs. Les sauvegardes restent locales à ce navigateur et ne sont envoyées à aucun serveur.",
+      "description": "La sauvegarde automatique suit les modifications confirmées de vos toolboxes et crée des fichiers JSON dans le dossier choisi. Ces fichiers restent sur votre appareil et ne sont envoyés à aucun serveur. Cette fonctionnalité n’est pas disponible dans tous les navigateurs.",
       "compatibleLabel": "Navigateurs compatibles",
       "browsers": [
         "Opera GX",
         "Google Chrome",
         "Microsoft Edge"
       ],
-      "permissionTitle": "Fonctionnement de l’autorisation",
-      "permissionDescription": "Opera GX peut redemander l’accès après la fermeture du navigateur. Pour des raisons de sécurité, la popup système ne peut apparaître qu’après un clic de votre part.",
+      "permissionTitle": "Comment fonctionne la sauvegarde",
+      "permissionDescription": "L’application mémorise si vos toolboxes ont changé depuis la dernière sauvegarde. Opera GX peut redemander l’accès au dossier après la fermeture du navigateur ; la popup système ne peut apparaître qu’après un clic de votre part.",
       "permissionSteps": [
-        "Si l’accès est toujours accordé, la vérification et la sauvegarde éventuelle restent silencieuses.",
-        "L’application mémorise localement les modifications confirmées. Si l’accès a expiré, une alerte vous propose alors de les sauvegarder.",
-        "Cliquez sur « Sauvegarder » dans cette alerte : le navigateur redemande l’accès, puis l’application vérifie le dossier avant toute écriture."
+        "Après chaque modification confirmée d’une toolbox, une sauvegarde est marquée comme nécessaire.",
+        "Au prochain démarrage, si le dossier est encore accessible, sa vérification et la sauvegarde éventuelle restent silencieuses.",
+        "Si l’accès a expiré, une alerte apparaît lorsqu’une sauvegarde est nécessaire. Son bouton « Sauvegarder » ferme immédiatement l’alerte et ouvre la demande d’autorisation d’Opera GX.",
+        "Après autorisation, l’application vérifie le fichier du jour et le contenu de la dernière version. Elle écrit un nouveau fichier uniquement si nécessaire."
       ],
       "reminderMessage": "Des modifications ont été détectées dans vos toolboxes. Voulez-vous créer une sauvegarde locale ?",
       "reminderAction": "Sauvegarder",

website/src/components/ToolboxModals.jsx

@@ -1,5 +1,6 @@
 // Rôle : fournit les modales globales liées aux toolboxes et confirmations.
 import { useEffect, useState } from "react";
+import { flushSync } from "react-dom";
 import { Icon } from "./Icon.jsx";
 import { lockBodyScroll } from "../utils/bodyScrollLock.js";
 
@@ -35,8 +36,8 @@ export function NotificationToast({ id, message, durationMs = 120000, actionLabe
     <div className={`notification-toast nds-toast${actionLabel && onAction ? " has-action" : ""}`} role="status">
       <span>{message}</span>
       {actionLabel && onAction && <button className="nds-button notification-toast-action" data-size="xs" data-variant="primary" type="button" onClick={() => {
+        flushSync(() => onClose(id));
         onAction();
-        onClose(id);
       }}>{actionLabel}</button>}
       <button className="nds-icon-button" data-size="xs" type="button" onClick={() => onClose(id)} aria-label="Fermer l'alerte" title="Fermer">
         <Icon name="close" />
@@ -95,7 +96,7 @@ export function AutoBackupModal({ backup, content, onClose }) {
   return (
     <div className="confirm-modal-root auto-backup-modal-root">
       <div className="confirm-backdrop nds-modal-backdrop" onClick={onClose} />
-      <section className="confirm-modal nds-modal auto-backup-modal" role="dialog" aria-modal="true" aria-labelledby="auto-backup-title">
+      <section className="confirm-modal nds-modal auto-backup-modal themed-scrollbar" role="dialog" aria-modal="true" aria-labelledby="auto-backup-title">
         <header className="auto-backup-modal-header">
           <div>
             <p className="eyebrow">{content.eyebrow}</p>

website/src/styles/overlays/_modals.scss

@@ -31,8 +31,8 @@
   margin-bottom: var(--space-6);
 }
 
-.auto-backup-modal {
-  width: min(620px, calc(100vw - 32px));
+.auto-backup-modal.nds-modal {
+  width: min(760px, calc(100vw - 32px));
   max-height: min(760px, calc(100vh - 32px));
   overflow-y: auto;
 }