Update public/index.html

public/index.html

@@ -6,6 +6,18 @@
     <title>PixelDrive</title>
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#4f46e5">
+    <!-- ✅ OPEN GRAPH : bannière visible dans WhatsApp/Messages/Discord, PAS sur le site -->
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="PixelDrive">
+    <meta property="og:title" content="PixelDrive — Stockage cloud chiffré Zero-Knowledge">
+    <meta property="og:description" content="Importez, chiffrez (AES-256-GCM) et partagez vos fichiers en toute confidentialité.">
+    <meta property="og:image" content="https://nathmen12-pixel-drive.hf.space/banner.png">
+    <meta property="og:url" content="https://nathmen12-pixel-drive.hf.space/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="PixelDrive — Stockage cloud chiffré">
+    <meta name="twitter:description" content="Partage sécurisé de fichiers chiffrés.">
+    <meta name="twitter:image" content="https://nathmen12-pixel-drive.hf.space/banner.png">
+    <link rel="icon" type="image/png" href="/banner.png">
     <style>
         :root { --bg-dark:#0f0f13; --bg-panel:#18181b; --bg-hover:#27272a; --primary:#6366f1; --primary-hover:#4f46e5; --text-main:#f4f4f5; --text-muted:#a1a1aa; --border:#27272a; --danger:#ef4444; --success:#22c55e; --radius:8px; --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --sidebar-width:260px; }
         * { box-sizing:border-box; margin:0; padding:0; outline:none; -webkit-tap-highlight-color:transparent; }
@@ -39,6 +51,21 @@
         .nav-item { display:flex; align-items:center; gap:0.75rem; padding:0.875rem; border-radius:var(--radius); color:var(--text-muted); cursor:pointer; margin-bottom:0.25rem; font-weight:500; }
         .nav-item.active { background:var(--primary); color:white; }
         .nav-section { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin:1.5rem 0 0.5rem 0.75rem; font-weight:600; }
+
+        .sidebar-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:0.75rem; }
+        .avatar-btn { width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--primary); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+        .avatar-btn img { width:100%; height:100%; object-fit:cover; }
+        .avatar-initial { color:white; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
+        .avatar-initial.big { font-size:1.5rem; }
+        .footer-info { flex:1; min-width:0; display:flex; flex-direction:column; }
+        .footer-username { font-size:0.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .footer-sub { font-size:0.7rem; color:var(--text-muted); }
+        .avatar-preview { width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+        .avatar-preview img { width:100%; height:100%; object-fit:cover; }
+        .settings-avatar-row { display:flex; gap:1rem; align-items:center; margin-bottom:1.25rem; }
+        .settings-section { margin-bottom:1.25rem; }
+        .owner-badge img { width:14px; height:14px; border-radius:50%; object-fit:cover; vertical-align:-2px; margin-right:4px; }
+
         main { flex:1; display:flex; flex-direction:column; min-width:0; }
         .toolbar { padding:0.75rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:var(--bg-panel); gap:0.5rem; flex-shrink:0; }
         .breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:600; flex:1; min-width:0; overflow:hidden; }
@@ -128,6 +155,11 @@
         .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:90; }
         .sidebar-overlay.active { display:block; }
 
+        body.light { --bg-dark:#f5f5f6; --bg-panel:#ffffff; --bg-hover:#ececee; --text-main:#17171b; --text-muted:#5b5b66; --border:#d8d8de; }
+        body.light .card-thumb { background:#e8e8ec; }
+        body.light .card-thumb.folder-thumb { background:#e0e0e6; }
+        body.light .form-input, body.light .share-input, body.light .share-link-input, body.light .sort-select { background:#f0f0f2; }
+
         @media (max-width:768px) {
             .menu-btn { display:flex; }
             .user-badge { display:none; }
@@ -166,27 +198,28 @@
         <symbol id="icon-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></symbol>
         <symbol id="icon-user-plus" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></symbol>
         <symbol id="icon-menu" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></symbol>
+        <symbol id="icon-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.01a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.01a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.01a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></symbol>
     </svg>
 
     <div id="auth-screen">
         <div class="auth-card">
             <div class="auth-header"><h1><svg class="icon"><use href="#icon-drive"></use></svg> PixelDrive</h1></div>
             <div id="login-form">
-                <div class="form-group"><label>Utilisateur</label><input type="text" id="login-user" class="form-input" autocomplete="username"></div>
-                <div class="form-group"><label>Mot de passe</label><input type="password" id="login-pass" class="form-input" autocomplete="current-password"></div>
-                <button class="btn" onclick="app.login()">Se connecter</button>
-                <div class="auth-switch">Pas de compte ? <a onclick="app.toggleAuth('register')">S'inscrire</a></div>
+                <div class="form-group"><label data-i18n="username">Utilisateur</label><input type="text" id="login-user" class="form-input" autocomplete="username"></div>
+                <div class="form-group"><label data-i18n="password">Mot de passe</label><input type="password" id="login-pass" class="form-input" autocomplete="current-password"></div>
+                <button class="btn" onclick="app.login()"><span data-i18n="login_btn">Se connecter</span></button>
+                <div class="auth-switch" id="switch-login"></div>
             </div>
             <div id="register-form" style="display:none;">
-                <div class="form-group"><label>Utilisateur</label><input type="text" id="reg-user" class="form-input"></div>
-                <div class="form-group"><label>Mot de passe</label><input type="password" id="reg-pass" class="form-input"></div>
-                <div class="form-group"><label>Confirmer</label><input type="password" id="reg-pass2" class="form-input"></div>
+                <div class="form-group"><label data-i18n="username">Utilisateur</label><input type="text" id="reg-user" class="form-input"></div>
+                <div class="form-group"><label data-i18n="password">Mot de passe</label><input type="password" id="reg-pass" class="form-input"></div>
+                <div class="form-group"><label data-i18n="confirm_pass">Confirmer</label><input type="password" id="reg-pass2" class="form-input"></div>
                 <div class="form-group" style="display:flex;align-items:center;gap:0.75rem;">
                     <input type="checkbox" id="reg-tos" style="width:20px;height:20px;accent-color:var(--primary);">
-                    <label for="reg-tos" style="margin:0;font-size:0.875rem;">J'accepte les <a href="#" onclick="app.showTos(false); return false;">CGU</a></label>
+                    <label for="reg-tos" style="margin:0;font-size:0.875rem;"><span data-i18n="tos_accept">J'accepte les CGU</span> · <a href="#" onclick="app.showTos(false); return false;">CGU</a></label>
                 </div>
-                <button class="btn" onclick="app.register()">Créer compte</button>
-                <div class="auth-switch">Déjà un compte ? <a onclick="app.toggleAuth('login')">Se connecter</a></div>
+                <button class="btn" onclick="app.register()"><span data-i18n="register_btn">Créer compte</span></button>
+                <div class="auth-switch" id="switch-register"></div>
             </div>
         </div>
     </div>
@@ -205,25 +238,38 @@
         <div class="sidebar-overlay" onclick="app.toggleSidebar()"></div>
         <div class="main-container">
             <aside id="sidebar">
-                <div class="nav-section">Navigation</div>
-                <div class="nav-item active" onclick="app.navTo('files')" id="nav-files"><svg class="icon"><use href="#icon-folder"></use></svg> Mes Fichiers</div>
-                <div class="nav-item" onclick="app.navTo('shared')" id="nav-shared"><svg class="icon"><use href="#icon-share"></use></svg> Partagés</div>
-                <div class="nav-item" onclick="app.navTo('recent')" id="nav-recent"><svg class="icon"><use href="#icon-clock"></use></svg> Récents</div>
+                <div class="nav-section" data-i18n="nav_section">Navigation</div>
+                <div class="nav-item active" onclick="app.navTo('files')" id="nav-files"><svg class="icon"><use href="#icon-folder"></use></svg> <span data-i18n="nav_files">Mes Fichiers</span></div>
+                <div class="nav-item" onclick="app.navTo('shared')" id="nav-shared"><svg class="icon"><use href="#icon-share"></use></svg> <span data-i18n="nav_shared">Partagés</span></div>
+                <div class="nav-item" onclick="app.navTo('recent')" id="nav-recent"><svg class="icon"><use href="#icon-clock"></use></svg> <span data-i18n="nav_recent">Récents</span></div>
+                <div class="sidebar-footer">
+                    <button class="avatar-btn" onclick="app.openSettings()" aria-label="Profil">
+                        <img id="avatar-img" alt="" style="display:none;">
+                        <span id="avatar-initial" class="avatar-initial">?</span>
+                    </button>
+                    <div class="footer-info">
+                        <span class="footer-username" id="footer-username">User</span>
+                        <span class="footer-sub" data-i18n="settings">Paramètres</span>
+                    </div>
+                    <button class="btn-icon" onclick="app.openSettings()" title="Paramètres" data-i18n-title="settings">
+                        <svg class="icon"><use href="#icon-settings"></use></svg>
+                    </button>
+                </div>
             </aside>
             <main>
                 <div class="toolbar">
                     <div class="breadcrumb" id="breadcrumb"><span onclick="app.goRoot()">Mes Fichiers</span></div>
                     <div class="actions" id="toolbar-actions">
-                        <button class="btn-primary" onclick="document.getElementById('file-input').click()"><svg class="icon icon-sm"><use href="#icon-upload"></use></svg> <span class="text">Uploader</span></button>
+                        <button class="btn-primary" onclick="document.getElementById('file-input').click()"><svg class="icon icon-sm"><use href="#icon-upload"></use></svg> <span class="text" data-i18n="upload">Uploader</span></button>
                         <input type="file" id="file-input" style="display:none;" multiple onchange="app.handleUpload(this)">
-                        <button class="btn-icon" onclick="app.createFolder()"><svg class="icon"><use href="#icon-plus"></use></svg></button>
+                        <button class="btn-icon" onclick="app.createFolder()" title="Nouveau Dossier" data-i18n-title="new_folder"><svg class="icon"><use href="#icon-plus"></use></svg></button>
                         <select id="sort-select" class="sort-select" onchange="app.setSort(this.value)">
-                            <option value="name-asc">Nom (A-Z)</option>
-                            <option value="name-desc">Nom (Z-A)</option>
-                            <option value="size-desc">Taille</option>
-                            <option value="date-desc">Date</option>
+                            <option value="name-asc" data-i18n="sort_name_asc">Nom (A-Z)</option>
+                            <option value="name-desc" data-i18n="sort_name_desc">Nom (Z-A)</option>
+                            <option value="size-desc" data-i18n="sort_size">Taille</option>
+                            <option value="date-desc" data-i18n="sort_date">Date</option>
                         </select>
-                        <button class="btn-icon" onclick="app.refresh()"><svg class="icon"><use href="#icon-refresh"></use></svg></button>
+                        <button class="btn-icon" onclick="app.refresh()" title="Rafraîchir" data-i18n-title="refresh"><svg class="icon"><use href="#icon-refresh"></use></svg></button>
                     </div>
                 </div>
                 <div class="file-area" id="file-area"></div>
@@ -231,10 +277,9 @@
         </div>
     </div>
 
-    <!-- ✅ OVERLAY UPLOAD MULTI avec vitesse -->
     <div id="upload-overlay">
         <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;">
-            <strong>Transfert <span id="upload-count"></span></strong>
+            <strong><span data-i18n="transfer">Transfert</span> <span id="upload-count"></span></strong>
             <button class="btn-icon" style="width:32px;height:32px;" onclick="app.cancelUpload()"><svg class="icon icon-sm"><use href="#icon-x"></use></svg></button>
         </div>
         <div class="progress-bar-bg"><div class="progress-bar-fill" id="upload-progress"></div></div>
@@ -248,8 +293,8 @@
         <div class="modal">
             <div id="preview-container"></div>
             <div class="preview-controls">
-                <button class="btn btn-secondary" onclick="app.closePreview()">Fermer</button>
-                <button class="btn btn-primary" id="preview-download-btn"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> Télécharger</button>
+                <button class="btn btn-secondary" onclick="app.closePreview()"><span data-i18n="close">Fermer</span></button>
+                <button class="btn btn-primary" id="preview-download-btn"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> <span data-i18n="download">Télécharger</span></button>
             </div>
         </div>
     </div>
@@ -257,53 +302,51 @@
     <div class="modal-overlay" id="share-modal" onclick="if(event.target === this) app.closeShare()">
         <div class="modal">
             <div class="modal-header">
-                <div class="modal-title"><svg class="icon"><use href="#icon-share"></use></svg> Partager le fichier</div>
+                <div class="modal-title"><svg class="icon"><use href="#icon-share"></use></svg> <span data-i18n="share_title">Partager le fichier</span></div>
                 <button class="close-modal" onclick="app.closeShare()"><svg class="icon"><use href="#icon-x"></use></svg></button>
             </div>
             <div class="share-section">
-                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-eye"></use></svg> Lien de prévisualisation</label>
-                <p class="share-hint">Page web avec lecteur intégré</p>
+                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-eye"></use></svg> <span data-i18n="share_preview">Lien de prévisualisation</span></label>
+                <p class="share-hint" data-i18n="share_preview_hint">Page web avec lecteur intégré</p>
                 <div class="share-input-group">
-                    <input type="text" id="share-preview-url" readonly class="form-input share-input" value="Génération...">
+                    <input type="text" id="share-preview-url" readonly class="form-input share-input" value="...">
                     <button class="btn-icon share-copy-btn" data-type="preview"><svg class="icon"><use href="#icon-link"></use></svg></button>
                 </div>
             </div>
             <div class="share-section">
-                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> Lien de téléchargement direct</label>
-                <p class="share-hint">Télécharge le fichier immédiatement</p>
+                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> <span data-i18n="share_dl">Lien de téléchargement direct</span></label>
+                <p class="share-hint" data-i18n="share_dl_hint">Télécharge le fichier immédiatement</p>
                 <div class="share-input-group">
-                    <input type="text" id="share-download-url" readonly class="form-input share-input" value="Génération...">
+                    <input type="text" id="share-download-url" readonly class="form-input share-input" value="...">
                     <button class="btn-icon share-copy-btn" data-type="download"><svg class="icon"><use href="#icon-link"></use></svg></button>
                 </div>
             </div>
             <div class="share-section">
-                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-link"></use></svg> Code d'intégration HTML</label>
-                <p class="share-hint">À coller sur un site web ou un forum</p>
+                <label class="share-label"><svg class="icon icon-sm"><use href="#icon-link"></use></svg> <span data-i18n="share_embed">Code d'intégration HTML</span></label>
+                <p class="share-hint" data-i18n="share_embed_hint">À coller sur un site web ou un forum</p>
                 <div class="share-input-group">
-                    <input type="text" id="share-embed-code" readonly class="form-input share-input" value="Génération...">
+                    <input type="text" id="share-embed-code" readonly class="form-input share-input" value="...">
                     <button class="btn-icon share-copy-btn" data-type="embed"><svg class="icon"><use href="#icon-link"></use></svg></button>
                 </div>
             </div>
-            <div class="share-footer">Ces liens expirent dans 7 jours</div>
+            <div class="share-footer" data-i18n="share_expiry">Ces liens expirent dans 7 jours</div>
         </div>
     </div>
 
-    <!-- ✅ CGU EMBEDDÉE (iframe tos.html) -->
     <div class="modal-overlay" id="tos-modal">
         <div class="modal">
             <div class="modal-header">
-                <div class="modal-title">Conditions Générales d'Utilisation</div>
+                <div class="modal-title" data-i18n="tos_title">Conditions Générales d'Utilisation</div>
                 <button class="close-modal" onclick="app.hideTos()"><svg class="icon"><use href="#icon-x"></use></svg></button>
             </div>
             <iframe id="tos-frame" src="/tos.html" class="tos-frame" title="CGU PixelDrive"></iframe>
             <div style="display:flex;gap:1rem;">
-                <button class="btn btn-secondary" style="flex:1;" onclick="app.hideTos()">Annuler</button>
-                <button class="btn btn-primary" id="tos-accept-btn" style="display:none;flex:1;" onclick="app.acceptTos()">J'accepte</button>
+                <button class="btn btn-secondary" style="flex:1;" onclick="app.hideTos()"><span data-i18n="cancel">Annuler</span></button>
+                <button class="btn btn-primary" id="tos-accept-btn" style="display:none;flex:1;" onclick="app.acceptTos()"><span data-i18n="tos_accept_btn">J'accepte</span></button>
             </div>
         </div>
     </div>
 
-    <!-- ✅ DIALOGUE CUSTOM (remplace confirm/prompt natifs) -->
     <div class="modal-overlay" id="dialog-modal">
         <div class="modal" style="max-width:420px;">
             <div class="modal-header"><div class="modal-title" id="dialog-title"></div></div>
@@ -312,24 +355,128 @@
                 <input type="text" id="dialog-input" class="form-input">
             </div>
             <div class="dialog-actions">
-                <button class="btn btn-secondary" id="dialog-cancel" onclick="app._dialogClose(false)">Annuler</button>
+                <button class="btn btn-secondary" id="dialog-cancel" onclick="app._dialogClose(false)"><span data-i18n="cancel">Annuler</span></button>
                 <button class="btn" id="dialog-ok" onclick="app._dialogClose(true)">Confirmer</button>
             </div>
         </div>
     </div>
 
+    <div class="modal-overlay" id="settings-modal" onclick="if(event.target === this) app.closeSettings()">
+        <div class="modal" style="max-width:460px;">
+            <div class="modal-header">
+                <div class="modal-title"><svg class="icon"><use href="#icon-settings"></use></svg> <span data-i18n="settings">Paramètres</span></div>
+                <button class="close-modal" onclick="app.closeSettings()"><svg class="icon"><use href="#icon-x"></use></svg></button>
+            </div>
+            <div class="settings-section">
+                <label class="share-label" data-i18n="profile">Profil</label>
+                <div class="settings-avatar-row">
+                    <div class="avatar-preview"><img id="settings-avatar-img" alt="" style="display:none;"><span id="settings-avatar-initial" class="avatar-initial big">?</span></div>
+                    <div style="flex:1;display:flex;flex-direction:column;gap:0.5rem;">
+                        <button class="btn" style="padding:0.6rem;" onclick="document.getElementById('avatar-input').click()"><span data-i18n="change_avatar">Changer l'avatar</span></button>
+                        <input type="file" id="avatar-input" accept="image/*" style="display:none;" onchange="app.uploadAvatar(this)">
+                        <button class="btn btn-secondary" style="padding:0.6rem;" onclick="app.removeAvatar()"><span data-i18n="remove_avatar">Retirer</span></button>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-section">
+                <label class="share-label" data-i18n="language">Langue</label>
+                <select id="set-lang" class="form-input" onchange="app.setLang(this.value)"><option value="fr">Français</option><option value="en">English</option></select>
+            </div>
+            <div class="settings-section">
+                <label class="share-label" data-i18n="theme">Thème</label>
+                <select id="set-theme" class="form-input" onchange="app.setTheme(this.value)"><option value="dark" data-i18n="theme_dark">Sombre</option><option value="light" data-i18n="theme_light">Clair</option></select>
+            </div>
+            <div class="settings-section">
+                <label class="share-label" data-i18n="default_sort">Tri par défaut</label>
+                <select id="set-sort" class="form-input" onchange="app.setDefSort(this.value)">
+                    <option value="name-asc" data-i18n="sort_name_asc">Nom (A-Z)</option>
+                    <option value="name-desc" data-i18n="sort_name_desc">Nom (Z-A)</option>
+                    <option value="size-desc" data-i18n="sort_size">Taille</option>
+                    <option value="date-desc" data-i18n="sort_date">Date</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
     <div id="context-menu">
-        <div class="ctx-item" id="ctx-preview"><svg class="icon icon-sm"><use href="#icon-eye"></use></svg> Aperçu</div>
-        <div class="ctx-item" id="ctx-download"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> Télécharger</div>
-        <div class="ctx-item" id="ctx-share"><svg class="icon icon-sm"><use href="#icon-link"></use></svg> Lien public</div>
-        <div class="ctx-item" id="ctx-share-user"><svg class="icon icon-sm"><use href="#icon-user-plus"></use></svg> Partager à un utilisateur</div>
+        <div class="ctx-item" id="ctx-preview"><svg class="icon icon-sm"><use href="#icon-eye"></use></svg> <span data-i18n="ctx_preview">Aperçu</span></div>
+        <div class="ctx-item" id="ctx-download"><svg class="icon icon-sm"><use href="#icon-download"></use></svg> <span data-i18n="ctx_download">Télécharger</span></div>
+        <div class="ctx-item" id="ctx-share"><svg class="icon icon-sm"><use href="#icon-link"></use></svg> <span data-i18n="ctx_link">Lien public</span></div>
+        <div class="ctx-item" id="ctx-share-user"><svg class="icon icon-sm"><use href="#icon-user-plus"></use></svg> <span data-i18n="ctx_share_user">Partager à un utilisateur</span></div>
         <div class="ctx-sep"></div>
-        <div class="ctx-item" id="ctx-remove" style="color:var(--danger);"><svg class="icon icon-sm"><use href="#icon-x"></use></svg> Retirer de ma liste</div>
-        <div class="ctx-item" id="ctx-delete" style="color:var(--danger);"><svg class="icon icon-sm"><use href="#icon-trash"></use></svg> Supprimer</div>
+        <div class="ctx-item" id="ctx-remove" style="color:var(--danger);"><svg class="icon icon-sm"><use href="#icon-x"></use></svg> <span data-i18n="ctx_remove">Retirer de ma liste</span></div>
+        <div class="ctx-item" id="ctx-delete" style="color:var(--danger);"><svg class="icon icon-sm"><use href="#icon-trash"></use></svg> <span data-i18n="ctx_delete">Supprimer</span></div>
     </div>
 
     <div id="toast-container"></div>
 
+    <!-- ✅ TRADUCTIONS INTÉGRÉES (FR / EN) — plus de fichier externe -->
+    <script>
+    window.I18N = {
+        fr: {
+            nav_section: 'Navigation', nav_files: 'Mes Fichiers', nav_shared: 'Partagés', nav_recent: 'Récents',
+            upload: 'Uploader', new_folder: 'Nouveau Dossier', refresh: 'Rafraîchir',
+            sort_name_asc: 'Nom (A-Z)', sort_name_desc: 'Nom (Z-A)', sort_size: 'Taille', sort_date: 'Date',
+            username: 'Utilisateur', password: 'Mot de passe', confirm_pass: 'Confirmer',
+            login_btn: 'Se connecter', register_btn: 'Créer compte',
+            no_account: "Pas de compte ? S'inscrire", have_account: 'Déjà un compte ? Se connecter',
+            tos_accept: "J'accepte les CGU",
+            sec_shared_me: 'Partagés avec moi', sec_my_shares: 'Mes partages utilisateurs (gestion)', sec_my_links: 'Mes liens publics',
+            empty_folder: 'Dossier vide', empty_shared: 'Rien ne vous a été partagé', empty_my_shares: 'Aucun partage actif', empty_links: 'Aucun lien public', loading: 'Chargement...',
+            ctx_preview: 'Aperçu', ctx_download: 'Télécharger', ctx_link: 'Lien public', ctx_share_user: 'Partager à un utilisateur', ctx_remove: 'Retirer de ma liste', ctx_delete: 'Supprimer',
+            share_title: 'Partager le fichier', share_preview: 'Lien de prévisualisation', share_preview_hint: 'Page web avec lecteur intégré',
+            share_dl: 'Lien de téléchargement direct', share_dl_hint: 'Télécharge le fichier immédiatement',
+            share_embed: "Code d'intégration HTML", share_embed_hint: 'À coller sur un site web ou un forum', share_expiry: 'Ces liens expirent dans 7 jours',
+            close: 'Fermer', cancel: 'Annuler', download: 'Télécharger',
+            tos_title: "Conditions Générales d'Utilisation", tos_accept_btn: "J'accepte",
+            settings: 'Paramètres', profile: 'Profil', change_avatar: "Changer l'avatar", remove_avatar: 'Retirer',
+            language: 'Langue', theme: 'Thème', theme_dark: 'Sombre', theme_light: 'Clair', default_sort: 'Tri par défaut',
+            transfer: 'Transfert', folder: 'Dossier',
+            st_pending: 'En attente', st_uploading: 'Envoi...', st_processing: 'Traitement...', st_ready: 'Prêt', st_error: 'Erreur',
+            t_copied: 'Lien copié !', t_deleted: 'Supprimé', t_removed: 'Retiré', t_revoked: 'Partage révoqué', t_folder_created: 'Dossier créé',
+            t_avatar_saved: 'Avatar mis à jour', t_avatar_removed: 'Avatar retiré', t_lang_changed: 'Langue modifiée',
+            dlg_logout_title: 'Déconnexion', dlg_logout_msg: 'Voulez-vous vraiment vous déconnecter ?',
+            dlg_remove_msg: "Vous perdrez l'accès à cet élément partagé.", dlg_links_msg: 'Tous les liens publics de ce fichier seront révoqués.',
+            dlg_delete_msg: 'Supprimer définitivement', revoke: 'Révoquer',
+            expires: 'Expire le', shared_on: 'Partagé le', shared_with: 'partagé avec'
+        },
+        en: {
+            nav_section: 'Navigation', nav_files: 'My Files', nav_shared: 'Shared', nav_recent: 'Recent',
+            upload: 'Upload', new_folder: 'New Folder', refresh: 'Refresh',
+            sort_name_asc: 'Name (A-Z)', sort_name_desc: 'Name (Z-A)', sort_size: 'Size', sort_date: 'Date',
+            username: 'Username', password: 'Password', confirm_pass: 'Confirm',
+            login_btn: 'Log in', register_btn: 'Create account',
+            no_account: 'No account? Sign up', have_account: 'Already have an account? Log in',
+            tos_accept: 'I accept the Terms',
+            sec_shared_me: 'Shared with me', sec_my_shares: 'My user shares (management)', sec_my_links: 'My public links',
+            empty_folder: 'Empty folder', empty_shared: 'Nothing shared with you', empty_my_shares: 'No active shares', empty_links: 'No public links', loading: 'Loading...',
+            ctx_preview: 'Preview', ctx_download: 'Download', ctx_link: 'Public link', ctx_share_user: 'Share with a user', ctx_remove: 'Remove from my list', ctx_delete: 'Delete',
+            share_title: 'Share file', share_preview: 'Preview link', share_preview_hint: 'Web page with embedded player',
+            share_dl: 'Direct download link', share_dl_hint: 'Downloads the file immediately',
+            share_embed: 'HTML embed code', share_embed_hint: 'Paste on a website or forum', share_expiry: 'These links expire in 7 days',
+            close: 'Close', cancel: 'Cancel', download: 'Download',
+            tos_title: 'Terms of Service', tos_accept_btn: 'I accept',
+            settings: 'Settings', profile: 'Profile', change_avatar: 'Change avatar', remove_avatar: 'Remove',
+            language: 'Language', theme: 'Theme', theme_dark: 'Dark', theme_light: 'Light', default_sort: 'Default sort',
+            transfer: 'Transfer', folder: 'Folder',
+            st_pending: 'Pending', st_uploading: 'Uploading...', st_processing: 'Processing...', st_ready: 'Ready', st_error: 'Error',
+            t_copied: 'Link copied!', t_deleted: 'Deleted', t_removed: 'Removed', t_revoked: 'Share revoked', t_folder_created: 'Folder created',
+            t_avatar_saved: 'Avatar updated', t_avatar_removed: 'Avatar removed', t_lang_changed: 'Language changed',
+            dlg_logout_title: 'Log out', dlg_logout_msg: 'Do you really want to log out?',
+            dlg_remove_msg: 'You will lose access to this shared item.', dlg_links_msg: 'All public links for this file will be revoked.',
+            dlg_delete_msg: 'Permanently delete', revoke: 'Revoke',
+            expires: 'Expires', shared_on: 'Shared on', shared_with: 'shared with'
+        }
+    };
+    window.getLang = () => localStorage.getItem('pd_lang') || 'fr';
+    window.t = (k) => { const L = window.I18N[getLang()] || {}; return L[k] !== undefined ? L[k] : (window.I18N.fr[k] !== undefined ? window.I18N.fr[k] : k); };
+    window.applyI18n = () => {
+        document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.getAttribute('data-i18n')); });
+        document.querySelectorAll('[data-i18n-ph]').forEach(el => { el.placeholder = t(el.getAttribute('data-i18n-ph')); });
+        document.querySelectorAll('[data-i18n-title]').forEach(el => { el.title = t(el.getAttribute('data-i18n-title')); });
+        document.documentElement.lang = getLang();
+    };
+    </script>
     <script src="/app.js"></script>
 </body>
 </html>