style: élargir la zone de contenu de 1100px à 1400px

Header, contenu principal et footer alignés à 1400px pour mieux
utiliser l'espace horizontal sur les écrans larges.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/static/app.css

@@ -11,7 +11,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { overflow-y: scroll; } /* scrollbar toujours présente → pas de décalage entre pages */
+html { overflow-y: scroll; scrollbar-gutter: stable; }
 body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
 main { flex: 1; }
 a { color: var(--blue); text-decoration: none; }
@@ -20,7 +20,7 @@ code { background: #e8eef7; padding: .1rem .4rem; border-radius: 4px; font-size:
 
 /* ── Header ─────────────────────────────────────────────────────── */
 header { background: var(--blue-dark); color: #fff; }
-.header-inner { max-width: 1100px; margin: 0 auto; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
+.header-inner { max-width: 1400px; margin: 0 auto; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
 
 .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: 1.1rem; text-decoration: none; white-space: nowrap; }
 .brand strong { font-weight: 800; }
@@ -50,7 +50,7 @@ header { background: var(--blue-dark); color: #fff; }
 .btn-logout-icon:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
 
 /* ── Mise en page ─────────────────────────────────────────────── */
-main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
+main { max-width: 1400px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
 
 /* ── Carte générique ──────────────────────────────────────────── */
 .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.8rem; }
@@ -265,7 +265,7 @@ main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: fl
 
 /* ── Footer ─────────────────────────────────────────────────────────── */
 footer { background: var(--blue-dark); color: rgba(255,255,255,.6); margin-top: auto; }
-.footer-inner { max-width: 1100px; margin: 0 auto; padding: .9rem 1.5rem;
+.footer-inner { max-width: 1400px; margin: 0 auto; padding: .9rem 1.5rem;
                 display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
 .footer-brand { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.85);
                 font-size: .88rem; text-decoration: none; }

app/templates/preview_image.html

@@ -72,8 +72,12 @@
         'ExposureProgram':'Programme','MeteringMode':'Mesure',
         'Orientation':'Orientation','Artist':'Auteur',
         'Copyright':'Copyright', 'ColorSpace':'Espace colorimétrique',
+        'XResolution':'Résolution X','YResolution':'Résolution Y',
+        'ResolutionUnit':'Unité résolution',
         'GPS':'Coordonnées GPS',
       } %}
+      {% set color_spaces = {1: 'sRGB', 2: 'Adobe RGB', 65535: 'Non calibré'} %}
+      {% set resolution_units = {1: 'Sans unité', 2: 'pouces', 3: 'cm'} %}
       {% for key, val in meta.exif.items() %}
       <div class="meta-item">
         <span class="meta-label">{{ labels.get(key, key) }}</span>
@@ -81,6 +85,10 @@
           {% if key == 'GPS' and val %}
             <a href="https://www.openstreetmap.org/?mlat={{ val.split(',')[0].strip() }}&mlon={{ val.split(',')[1].strip() }}&zoom=15"
                target="_blank" rel="noopener">{{ val }}</a>
+          {% elif key == 'ColorSpace' %}
+            {{ color_spaces.get(val | int, val) }}
+          {% elif key == 'ResolutionUnit' %}
+            {{ resolution_units.get(val | int, val) }}
           {% else %}
             {{ val }}
           {% endif %}