diff --git a/index.html b/index.html
index 912a370..776b3bc 100644
--- a/index.html
+++ b/index.html
@@ -37,17 +37,24 @@
             margin: 0 auto;
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            justify-content: center;
             padding: 0 2rem;
         }
         
+        .logo {
+        cursor: pointer;
+        }
+
         .logo img {
-            height: 65px;
+        height: 65px;
         }
         
         .lang-selector {
             display: flex;
+            justify-content: center;
+            align-items: center;
             gap: 10px;
+            flex-wrap: wrap;
         }
         
         .lang-btn {
@@ -149,24 +156,33 @@
         }
         
         .code {
-            font-size: 2.2rem;
+            font-size: 2.5rem;
             font-weight: bold;
             color: var(--gsk-orange);
-            letter-spacing: 4px;
+            letter-spacing: 2px;
             margin: 1rem 0;
             background: white;
             padding: 15px;
             border-radius: 8px;
-            display: none; /* caché par défaut */
+            display: none;
+            text-align: center;
         }
+
+        .accept-checkbox {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        margin-top: 3px;
+       }
         
         .accept-label {
             display: inline-flex;
-            align-items: center;
+            align-items: flex-start;
             gap: 10px;
             font-size: 1.2rem;
-            margin-bottom: 1rem;
-            cursor: pointer;
+           margin-bottom: 1rem;
+           cursor: pointer;
+           text-align: left;
         }
         
         footer {
@@ -178,8 +194,76 @@
         }
         
         @media (max-width: 768px) {
-            .hero-content h1 { font-size: 2.2rem; }
-        }
+
+    .header-content {
+        padding: 0 1rem;
+    }
+
+    .logo img {
+        height: 50px;
+    }
+
+    .hero {
+        height: auto;
+        padding: 2rem 1rem;
+    }
+
+    .hero-content h1 {
+        font-size: 2rem;
+    }
+
+    .hero-content p {
+        font-size: 1.15rem !important;
+        margin-bottom: 1.5rem !important;
+    }
+
+    .lang-selector {
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+        max-width: 350px;
+        margin: 0 auto;
+    }
+
+    .lang-btn {
+        width: 100%;
+        font-size: 1.1rem !important;
+        padding: 14px !important;
+    }
+
+
+    .content {
+        padding: 0 1rem;
+        margin: 1.5rem auto;
+    }
+
+    .safety-text {
+        padding: 1.25rem;
+    }
+
+    .safety-text h2 {
+        font-size: 1.5rem;
+    }
+
+    ul li {
+        font-size: 1rem;
+    }
+
+    .confirmation {
+        padding: 1.25rem;
+        font-size: 1rem;
+    }
+
+    .code {
+        font-size: 1.8rem;
+        letter-spacing: 2px;
+        word-break: break-word;
+    }
+
+    footer {
+        padding: 1.5rem 1rem;
+    }
+}
     </style>
 </head>
 <body>
@@ -188,11 +272,6 @@
             <div class="logo">
                 <img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
             </div>
-            <div class="lang-selector">
-                <button class="lang-btn active" data-lang="fr">🇫🇷 Français</button>
-                <button class="lang-btn" data-lang="en">🇬🇧 English</button>
-                <button class="lang-btn" data-lang="es">🇪🇸 Español</button>
-            </div>
         </div>
     </header>
 
@@ -201,22 +280,30 @@
         <div class="hero-content">
             <h1>Bienvenue chez GSK</h1>
             <p style="font-size: 1.5rem; margin-bottom: 2.5rem;">Sélectionnez votre langue pour consulter les règles de sécurité</p>
-            <div class="lang-selector" style="justify-content: center;">
-                <button class="lang-btn" onclick="selectLanguage('fr')" style="padding: 14px 32px; font-size: 1.15rem;">🇫🇷 Français</button>
-                <button class="lang-btn" onclick="selectLanguage('en')" style="padding: 14px 32px; font-size: 1.15rem;">🇬🇧 English</button>
-                <button class="lang-btn" onclick="selectLanguage('es')" style="padding: 14px 32px; font-size: 1.15rem;">🇪🇸 Español</button>
-            </div>
+    <div class="lang-selector">
+        <button class="lang-btn" data-lang="fr" onclick="selectLanguage('fr')">
+            🇫🇷 Français
+        </button>
+
+        <button class="lang-btn" data-lang="en" onclick="selectLanguage('en')">
+            🇬🇧 English
+        </button>
+
+        <button class="lang-btn" data-lang="es" onclick="selectLanguage('es')">
+            🇪🇸 Español
+        </button>
+    </div>
         </div>
     </section>
 
     <!-- Français -->
-    <div id="content-fr" class="content active">
+    <div id="content-fr" class="content">
         <div style="text-align:center; margin-bottom: 2rem;">
             <h1 style="color:#f36f21;">Règles de sûreté à l’intention des visiteurs</h1>
         </div>
         
         <div class="video-container">
-            <video controls autoplay loop playsinline>
+            <video controls playsinline>
                 <source src="https://gsk.labbej27.fr/video-securite.mp4" type="video/mp4">
                 Votre navigateur ne supporte pas la lecture vidéo.
             </video>
@@ -251,7 +338,7 @@
         </div>
         
         <div class="video-container">
-            <video controls autoplay loop playsinline>
+            <video controls playsinline>
                 <source src="https://gsk.labbej27.fr/video-securiteen.mp4" type="video/mp4">
                 Your browser does not support video playback.
             </video>
@@ -287,7 +374,7 @@
         </div>
         
         <div class="video-container">
-            <video controls autoplay loop playsinline>
+            <video controls playsinline>
                 <source src="https://gsk.labbej27.fr/video-securitees.mp4" type="video/mp4">
                 Tu navegador no admite la reproducción de vídeo.
             </video>
@@ -346,30 +433,62 @@
         }
 
         function selectLanguage(lang) {
-            document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
-            document.getElementById(`content-${lang}`).classList.add('active');
-            
-            document.querySelectorAll('.lang-btn').forEach(btn => {
-                btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
-            });
-            
-            setTimeout(() => {
-                document.getElementById(`content-${lang}`).scrollIntoView({ behavior: 'smooth' });
-            }, 150);
-        }
 
+    stopAllVideos();
+
+    document.querySelectorAll('.content').forEach(c =>
+        c.classList.remove('active')
+    );
+
+    document.getElementById(`content-${lang}`)
+        .classList.add('active');
+
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.classList.toggle(
+            'active',
+            btn.getAttribute('data-lang') === lang
+        );
+    });
+
+    const activeVideo =
+        document.querySelector(`#content-${lang} video`);
+
+    if (activeVideo) {
+        activeVideo.play();
+    }
+
+    setTimeout(() => {
+        document.getElementById(`content-${lang}`)
+            .scrollIntoView({ behavior: 'smooth' });
+    }, 150);
+}
+
+        // Arrête toutes les vidéos lors du changement de langue
+        function stopAllVideos() {
+    document.querySelectorAll('video').forEach(video => {
+        video.pause();
+        video.currentTime = 0;
+    });
+}
         // Gestion des cases à cocher
         function setupCheckboxes() {
             document.querySelectorAll('.accept-checkbox').forEach(checkbox => {
                 const codeDiv = checkbox.closest('.confirmation').querySelector('.code');
                 
                 checkbox.addEventListener('change', function() {
-                    if (this.checked) {
-                        codeDiv.style.display = 'inline-block';
-                    } else {
-                        codeDiv.style.display = 'none';
-                    }
-                });
+    if (this.checked) {
+        codeDiv.style.display = 'inline-block';
+
+        setTimeout(() => {
+            codeDiv.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+            });
+        }, 100);
+    } else {
+        codeDiv.style.display = 'none';
+    }
+});
             });
         }
 
