Enhance QR scanning interface by adjusting CSS for improved layout and centering of the QR camera view on open. Introduce JavaScript function to focus the QR camera view upon opening and ensure proper sizing of the QR box. Increment version code to 4.72.802 to reflect these changes.

css/style.css

@@ -3394,21 +3394,49 @@ a.ms1-trad-link.btn-aide-trad{
     color:#6f42c1;
 }
 
+/* MSIN-4401 — À l'ouverture, la caméra QR doit dominer l'écran (pas en bas hors vue). */
+.inscr-gestion-panel--qr[open]{
+    margin-bottom:16px;
+}
+
+.inscr-gestion-panel--qr[open] .inscr-gestion-panel__body{
+    padding:10px 8px 14px;
+}
+
 .inscr-gestion-qr-hint{
-    margin:0 0 8px;
+    margin:0 auto 8px;
+    text-align:center;
+    max-width:min(100%, 92vw, 70vh);
 }
 
 .inscr-gestion-qr-reader-wrap{
-    max-width:100%;
+    width:min(100%, 92vw, 70vh);
+    max-width:min(100%, 92vw, 70vh);
+    max-height:70vh;
     margin:0 auto;
+    scroll-margin-top:12px;
+    scroll-margin-bottom:12px;
+    border-radius:6px;
+    overflow:hidden;
+    background:#111;
 }
 
 .inscr-gestion-qr-reader-wrap #inscr-gestion-qr-reader{
-    width:100%;
+    width:100% !important;
+    min-height:min(70vh, 92vw);
 }
 
+.inscr-gestion-qr-reader-wrap #inscr-gestion-qr-reader video,
 .inscr-gestion-qr-reader-wrap video{
+    width:100% !important;
+    max-height:70vh !important;
+    object-fit:cover;
     border-radius:4px;
+    display:block;
+}
+
+.inscr-gestion-qr-reader-wrap img{
+    max-width:100%;
 }
 
 .inscr-gestion-bib-scan-toggle.is-active{

js/v2/inscr-gestion.js

@@ -350,6 +350,19 @@
             });
         }
 
+        function focusQrCameraView() {
+            var wrap = document.getElementById('inscr-gestion-qr-reader-wrap');
+            if (!wrap) {
+                return;
+            }
+            // MSIN-4401 — ramener la "carte" caméra au centre dès l'ouverture (mobile + desktop).
+            try {
+                wrap.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});
+            } catch (e) {
+                wrap.scrollIntoView(true);
+            }
+        }
+
         function startQrScanner() {
             if (qrStarting || qrCamera || !qrReaderEl || !qrPanel.open) {
                 return;
@@ -357,6 +370,7 @@
             qrStarting = true;
             hideQrFeedback();
             lastQrRaw = '';
+            focusQrCameraView();
 
             loadHtml5Qrcode().then(function () {
                 if (!qrPanel.open) {
@@ -367,15 +381,23 @@
                     ? {formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE]}
                     : undefined;
                 qrCamera = new Html5Qrcode('inscr-gestion-qr-reader', config);
+                var qrboxSize = function (viewfinderWidth, viewfinderHeight) {
+                    var edge = Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.72);
+                    edge = Math.max(180, Math.min(edge, 320));
+                    return {width: edge, height: edge};
+                };
                 return qrCamera.start(
                     {facingMode: 'environment'},
-                    {fps: 8, qrbox: {width: 220, height: 220}},
+                    {fps: 8, qrbox: qrboxSize, aspectRatio: 1},
                     onQrDecoded
                 );
             }).catch(function () {
                 showQrFeedback('danger', qrPanel.getAttribute('data-qr-msg-camera') || '');
             }).then(function () {
                 qrStarting = false;
+                if (qrPanel.open) {
+                    window.setTimeout(focusQrCameraView, 80);
+                }
             });
         }
 

php/inc_settings.php

@@ -7,7 +7,7 @@
  * Constantes *
  *
  **************/
-define('_VERSION_CODE', '4.72.801');
+define('_VERSION_CODE', '4.72.802');
 define('_DATE_CODE', '2026-07-13');
 //MSIN-4290
 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');