From dedbda422cc4c2417c42aacacee116b21e2adc6b Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Sat, 29 Aug 2026 06:46:19 +0200
Subject: [PATCH] Rend la page de profil compacte et sur 2 colonnes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les 5 sections (email, informations, mot de passe, codes de récupération,
suppression du compte) tenaient les unes sous les autres dans une seule
colonne étroite (560px) avec le padding/espacement par défaut de Bulma —
imposait de scroller pour tout voir. Réorganisé en grille CSS 2 colonnes
(container élargi à 980px, static/style.css : .profileGrid/.profileCol/
.profileBox) : compte/infos/suppression à gauche, sécurité (mot de passe,
codes de récupération) à droite. Champs resserrés (labels remplacés par
des placeholders, is-small partout, marges réduites), jauge de force du
mot de passe sur une ligne (.passwordChecklist-compact). Repasse en une
seule colonne sous 720px de large.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/style.css            |  19 ++++
 templates/auth/profile.html | 167 ++++++++++++++----------------------
 2 files changed, 85 insertions(+), 101 deletions(-)

diff --git a/static/style.css b/static/style.css
index a46f149e..5994b808 100644
--- a/static/style.css
+++ b/static/style.css
@@ -584,6 +584,25 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
 .passwordChecklist li::before{ content:"○"; position:absolute; left:0; }
 .passwordChecklist li.ok{ color:#4caf50; }
 .passwordChecklist li.ok::before{ content:"✓"; }
+.passwordChecklist-compact{ flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; }
+.passwordChecklist-compact li{ font-size:11px; }
+
+/* ---------- Page de profil : compacte, sur 2 colonnes ---------- */
+.profileSection{ padding-top:1.5rem; padding-bottom:1.5rem; }
+.profileContainer{ max-width:980px; }
+.profileNotif{ padding:0.6rem 0.9rem; margin-bottom:0.75rem; }
+.profileGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
+.profileCol{ display:flex; flex-direction:column; gap:14px; min-width:0; }
+.profileBox{ padding:0.85rem 1rem; }
+.profileBox-danger{ border:1px solid #b33; }
+.profileForm .field{ margin-bottom:8px; }
+.profileForm .field:last-child{ margin-bottom:0; }
+.profileForm-row{ display:flex; flex-wrap:wrap; gap:8px; }
+.profileForm-row .field{ flex:1 1 120px; margin-bottom:0; }
+.profileForm-row .field.profileForm-full{ flex-basis:100%; }
+@media (max-width:720px){
+  .profileGrid{ grid-template-columns:1fr; }
+}
 
 /* ---------- Inscription : QR code de la double authentification ---------- */
 .totpQrWrap{ background:#fff; padding:16px; border-radius:8px; display:inline-block; max-width:220px; }
diff --git a/templates/auth/profile.html b/templates/auth/profile.html
index c773e0e6..44bbd277 100644
--- a/templates/auth/profile.html
+++ b/templates/auth/profile.html
@@ -1,122 +1,87 @@
 {% extends "base.html" %}
 {% block title %}Mon profil — Forge Engine{% endblock %}
 {% block content %}
-<section class="section">
-  <div class="container" style="max-width:560px;">
-    <h1 class="title">Mon profil</h1>
+<section class="section profileSection">
+  <div class="container profileContainer">
+    <h1 class="title is-4 mb-3">Mon profil</h1>
 
     {% if error %}
-    <div class="notification is-danger">{{ error }}</div>
+    <div class="notification is-danger profileNotif">{{ error }}</div>
     {% endif %}
     {% if success %}
-    <div class="notification is-success">{{ success }}</div>
+    <div class="notification is-success profileNotif">{{ success }}</div>
     {% endif %}
 
-    <div class="box">
-      <h2 class="title is-5">Adresse email</h2>
-      <p class="hint mb-4">
-        {{ 'Compte administrateur' if user.role == 'admin' else 'Compte utilisateur' }}.
-        {% if user.role != 'admin' %}Le dossier de ton jeu ({{ user.project_slug }}) est renommé automatiquement si tu changes d'adresse.{% endif %}
-      </p>
-      <form method="post" action="{{ url_for('profile_update_email') }}" autocomplete="off">
-        <div class="field">
-          <label class="label">Nouvelle adresse email</label>
-          <div class="control"><input class="input" type="email" name="email" value="{{ user.email }}" required></div>
+    <div class="profileGrid">
+      <div class="profileCol">
+        <div class="box profileBox">
+          <h2 class="title is-6 mb-2">Adresse email</h2>
+          <p class="hint mb-2">
+            {{ 'Compte administrateur' if user.role == 'admin' else 'Compte utilisateur' }}{% if user.role != 'admin' %} — le dossier de ton jeu ({{ user.project_slug }}) suit automatiquement{% endif %}.
+          </p>
+          <form method="post" action="{{ url_for('profile_update_email') }}" autocomplete="off" class="profileForm">
+            <div class="field"><input class="input is-small" type="email" name="email" value="{{ user.email }}" placeholder="Adresse email" required></div>
+            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password"></div>
+            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Changer d'adresse email</button></div>
+          </form>
         </div>
-        <div class="field">
-          <label class="label">Mot de passe actuel</label>
-          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
-        </div>
-        <div class="field mt-4">
-          <button type="submit" class="button primary">Changer d'adresse email</button>
-        </div>
-      </form>
-    </div>
 
-    <div class="box">
-      <h2 class="title is-5">Informations</h2>
-      <form method="post" action="{{ url_for('profile_update_name') }}">
-        <div class="field">
-          <label class="label">Prénom</label>
-          <div class="control"><input class="input" type="text" name="prenom" value="{{ user.prenom }}" required></div>
+        <div class="box profileBox">
+          <h2 class="title is-6 mb-2">Informations</h2>
+          <form method="post" action="{{ url_for('profile_update_name') }}" class="profileForm profileForm-row">
+            <div class="field"><input class="input is-small" type="text" name="prenom" value="{{ user.prenom }}" placeholder="Prénom" required></div>
+            <div class="field"><input class="input is-small" type="text" name="nom" value="{{ user.nom }}" placeholder="Nom" required></div>
+            <div class="field profileForm-full"><button type="submit" class="button primary is-small is-fullwidth">Enregistrer</button></div>
+          </form>
         </div>
-        <div class="field">
-          <label class="label">Nom</label>
-          <div class="control"><input class="input" type="text" name="nom" value="{{ user.nom }}" required></div>
-        </div>
-        <div class="field mt-4">
-          <button type="submit" class="button primary">Enregistrer</button>
-        </div>
-      </form>
-    </div>
 
-    <div class="box">
-      <h2 class="title is-5">Changer de mot de passe</h2>
-      <form method="post" action="{{ url_for('profile_change_password') }}" autocomplete="off">
-        <div class="field">
-          <label class="label">Mot de passe actuel</label>
-          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
+        <div class="box profileBox profileBox-danger">
+          <h2 class="title is-6 mb-2">Supprimer mon compte</h2>
+          <p class="hint mb-2">
+            {% if user.role != 'admin' %}
+            Action définitive : ton compte ET ton jeu ({{ user.project_slug }}) seront supprimés.
+            {% else %}
+            Action définitive : ton compte sera supprimé (tes jeux existants ne sont pas touchés).
+            {% endif %}
+          </p>
+          <form method="post" action="{{ url_for('profile_delete') }}" autocomplete="off" class="profileForm">
+            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password"></div>
+            <div class="field"><input class="input is-small" type="text" name="confirm_text" placeholder='Tape "SUPPRIMER" pour confirmer' required></div>
+            <div class="field"><button type="submit" class="button is-danger is-small is-fullwidth">Supprimer définitivement mon compte</button></div>
+          </form>
         </div>
-        <div class="field">
-          <label class="label">Nouveau mot de passe</label>
-          <div class="control"><input class="input" type="password" id="password" name="new_password" required autocomplete="new-password"></div>
-        </div>
-        <div class="field">
-          <div class="passwordStrengthBar"><div class="passwordStrengthFill" id="pwFill"></div></div>
-          <ul class="passwordChecklist" id="pwChecklist">
-            <li data-check="longueur">Au moins 8 caractères</li>
-            <li data-check="majuscule">Une majuscule</li>
-            <li data-check="minuscule">Une minuscule</li>
-            <li data-check="chiffre">Un chiffre</li>
-            <li data-check="special">Un caractère spécial (ex. ! ? # -)</li>
-          </ul>
-        </div>
-        <div class="field">
-          <label class="label">Confirmer le nouveau mot de passe</label>
-          <div class="control"><input class="input" type="password" name="new_password_confirm" required autocomplete="new-password"></div>
-        </div>
-        <div class="field mt-4">
-          <button type="submit" class="button primary">Changer le mot de passe</button>
-        </div>
-      </form>
-    </div>
+      </div>
 
-    <div class="box">
-      <h2 class="title is-5">Codes de récupération 2FA</h2>
-      <p class="hint mb-4">Régénérer tes codes remplace immédiatement les 10 précédents par 10 nouveaux — les anciens ne fonctionneront plus. Les nouveaux codes ne sont affichés qu'une seule fois, juste après.</p>
-      <form method="post" action="{{ url_for('profile_regenerate_recovery_codes') }}" autocomplete="off">
-        <div class="field">
-          <label class="label">Mot de passe actuel</label>
-          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
+      <div class="profileCol">
+        <div class="box profileBox">
+          <h2 class="title is-6 mb-2">Changer de mot de passe</h2>
+          <form method="post" action="{{ url_for('profile_change_password') }}" autocomplete="off" class="profileForm">
+            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password"></div>
+            <div class="field"><input class="input is-small" id="password" type="password" name="new_password" placeholder="Nouveau mot de passe" required autocomplete="new-password"></div>
+            <div class="field">
+              <div class="passwordStrengthBar"><div class="passwordStrengthFill" id="pwFill"></div></div>
+              <ul class="passwordChecklist passwordChecklist-compact" id="pwChecklist">
+                <li data-check="longueur">8+ car.</li>
+                <li data-check="majuscule">Majuscule</li>
+                <li data-check="minuscule">Minuscule</li>
+                <li data-check="chiffre">Chiffre</li>
+                <li data-check="special">Spécial</li>
+              </ul>
+            </div>
+            <div class="field"><input class="input is-small" type="password" name="new_password_confirm" placeholder="Confirmer le nouveau mot de passe" required autocomplete="new-password"></div>
+            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Changer le mot de passe</button></div>
+          </form>
         </div>
-        <div class="field mt-4">
-          <button type="submit" class="button primary">Régénérer mes 10 codes de récupération</button>
-        </div>
-      </form>
-    </div>
 
-    <div class="box" style="border:1px solid #b33;">
-      <h2 class="title is-5">Supprimer mon compte</h2>
-      <p class="hint mb-4">
-        {% if user.role != 'admin' %}
-        Action définitive et irréversible : ton compte ET ton jeu ({{ user.project_slug }}) seront supprimés, sans possibilité de récupération.
-        {% else %}
-        Action définitive et irréversible : ton compte sera supprimé (tes jeux existants ne sont pas touchés).
-        {% endif %}
-      </p>
-      <form method="post" action="{{ url_for('profile_delete') }}" autocomplete="off">
-        <div class="field">
-          <label class="label">Mot de passe actuel</label>
-          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
+        <div class="box profileBox">
+          <h2 class="title is-6 mb-2">Codes de récupération 2FA</h2>
+          <p class="hint mb-2">Remplace immédiatement les 10 codes précédents. Les nouveaux ne s'affichent qu'une fois, juste après.</p>
+          <form method="post" action="{{ url_for('profile_regenerate_recovery_codes') }}" autocomplete="off" class="profileForm">
+            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password"></div>
+            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Régénérer mes 10 codes</button></div>
+          </form>
         </div>
-        <div class="field">
-          <label class="label">Tape "SUPPRIMER" pour confirmer</label>
-          <div class="control"><input class="input" type="text" name="confirm_text" required></div>
-        </div>
-        <div class="field mt-4">
-          <button type="submit" class="button is-danger">Supprimer définitivement mon compte</button>
-        </div>
-      </form>
+      </div>
     </div>
   </div>
 </section>