diff --git a/Bootstrap_new/css/style-portail.css b/Bootstrap_new/css/style-portail.css
index ca788989..3b2cb169 100644
--- a/Bootstrap_new/css/style-portail.css
+++ b/Bootstrap_new/css/style-portail.css
@@ -2,56 +2,36 @@
    INTER SANTÉ — LOGIN UI (ONLY)
    ============================================================ */
 
-/* RESET & FULLSCREEN */
-html, body { height: 100%; margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background: #000; }
+/* RESET */
+html, body { height: 100%; margin: 0; overflow: hidden; background: #000; color: #fff; font-family: 'Segoe UI', sans-serif; }
 
-.portal-main-wrapper { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
+.portal-container { position: relative; width: 100vw; height: 100vh; }
 
-/* SLIDESHOW SYSTEM */
-.portal-bg-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
-.slides img { width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0; transition: opacity 1.2s ease-in-out; }
-.slides img.active { opacity: 1; position: relative; }
-.portal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%); }
+/* SLIDE AREA (Full Background) */
+.slide-container { position: absolute; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
+.slides img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
+.slides img:not(.active) { top: 0; left: -100%; } /* Position de départ pour ton JS */
 
-/* THE GLASS CARD (IMAGE 1 LOOK) */
-.auth-glass-card { 
-    width: 100%; 
-    max-width: 420px; 
-    padding: 40px; 
-    background: rgba(255, 255, 255, 0.05); 
-    backdrop-filter: blur(20px); 
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.1); 
-    border-radius: 20px; 
-}
+/* LOGIN AREA (Centered) */
+.login-wrapper { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(0,0,0,0.6); }
+.login-box { width: 400px; padding: 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; }
 
-.auth-portal-title { color: #e5e5e5; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem; }
+/* TYPO & FORMS */
+.portal-title { color: #e5e5e5; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; }
+.lbl-erp { font-size: 11px; text-transform: uppercase; color: #bbb; font-weight: 600; }
+.input-dark, .select-dark { background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; padding: 12px !important; }
+.btn-login { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; }
+.btn-login:hover { background: #fff; color: #000; }
+.forgot-link { font-size: 11px; color: #888; text-decoration: none; }
+.portal-footer { font-size: 11px; color: #666; }
 
-/* DARK INPUTS */
-.lbl-saas { color: #aaa; font-size: 11px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; display: block; }
+/* TES ANIMATIONS ORIGINALES (Indispensables pour ton JS) */
+@keyframes next1 { from { left: 0% } to { left: -100% } }
+@keyframes next2 { from { left: 100% } to { left: 0% } }
+@keyframes prev1 { from { left: 0% } to { left: 100% } }
+@keyframes prev2 { from { left: -100% } to { left: 0% } }
 
-.input-group-dark { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; display: flex; align-items: center; }
-.input-group-dark .input-group-text { background: transparent; border: none; color: #777; padding: 12px 15px; }
-.input-group-dark .form-control { background: transparent !important; border: none; color: #fff !important; font-size: 14px; padding: 12px; }
-.input-group-dark .form-control:focus { box-shadow: none; }
-
-.select-dark { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 10px !important; font-size: 14px !important; padding: 12px !important; }
-.select-dark option { background: #1a1a1a; }
-
-.forgot-pwd-link { font-size: 11px; color: #777; text-decoration: none; transition: 0.3s; }
-.forgot-pwd-link:hover { color: #fff; }
-
-/* BUTTON */
-.btn-login-saas { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: 0.4s; }
-.btn-login-saas:hover { background: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
-
-/* FOOTER & DOTS */
-.portal-footer-block { font-size: 11px; color: rgba(255, 255, 255, 0.3); }
-.portal-footer-block strong { color: rgba(255, 255, 255, 0.6); }
-
-.dotsContainer { position: absolute; bottom: 30px; display: flex; gap: 10px; }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: 0.3s; }
-.dot.active { background: #fff; transform: scale(1.3); }
-
-/* ALERTS */
-.alert-danger-glass { background: rgba(220, 53, 69, 0.15); color: #ea868f; }
\ No newline at end of file
+/* INDICATORS */
+.dotsContainer { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 15; }
+.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; }
+.dot.active { background: #fff; }
\ No newline at end of file
diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index ff9d7252..779b0a19 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -1,66 +1,44 @@
 <?php 
     $maintenance = $societeusersaas['maintenance'];
-    // Récupération des cookies pour éviter la perte de données
     $codeUtilisateur = (isset($_COOKIE['codeUtilisateur'])) ? $_COOKIE['codeUtilisateur'] : "";
     $codeSociete     = (isset($_COOKIE['codeSociete']))     ? $_COOKIE['codeSociete'] : "";
 ?>
 
-<div class="text-center mb-4">
-    <h2 class="auth-portal-title">Portail Gestionnaire</h2>
-</div>
+<h2 class="portal-title text-center mb-4">Portail Gestionnaire</h2>
 
 <?php if (isset($msgErreur) && $msgErreur > ""): ?>
-    <div class="alert alert-danger-glass border-0 small text-center mb-3">
-        <i class="fas fa-exclamation-triangle me-2"></i><?= $msgErreur ?>
-    </div>
+    <div class="alert alert-danger border-0 small text-center mb-3"><?= $msgErreur ?></div>
 <?php endif; ?>
 
-<div id="div_msgErreur"></div>
-
 <?php if($maintenance != '1'): ?>
-    <div class="auth-fields">
-        <div class="mb-3">
-            <label class="lbl-saas">Langue</label>
-            <select class="form-select select-dark" id="langue" name="langue" onchange="changer_langue_connexion();">
-                <?php liste_options($langues, $_SESSION['lang'], true); ?>
-            </select>
-        </div>
-
-        <div class="mb-3">
-            <label class="lbl-saas">Entité</label>
-            <div class="input-group-dark">
-                <span class="input-group-text"><i class="fas fa-building"></i></span>
-                <input class="form-control" type="text" name="codeSociete" id="codeSociete" 
-                       value="<?= $codeSociete ?>" required onchange="changer_entite_portail();">
-            </div>
-        </div>
-
-        <div class="mb-3">
-            <label class="lbl-saas">Identifiant</label>
-            <div class="input-group-dark">
-                <span class="input-group-text"><i class="fas fa-user-circle"></i></span>
-                <input class="form-control" type="text" name="login" id="login" 
-                       value="<?= $codeUtilisateur ?>" required>
-            </div>
-        </div>
-
-        <div class="mb-4">
-            <div class="d-flex justify-content-between align-items-center">
-                <label class="lbl-saas">Mot de passe</label>
-                <a href="MotDePasseOublie" class="forgot-pwd-link">Oublié ?</a>
-            </div>
-            <div class="input-group-dark">
-                <span class="input-group-text"><i class="fas fa-lock"></i></span>
-                <input class="form-control" type="password" name="mdp" id="mdp" required>
-            </div>
-        </div>
-
-        <button name="btn_connexion" id="btn_connexion" class="btn btn-login-saas w-100 fw-bold text-uppercase py-3">
-            Connexion
-        </button>
+    <div class="mb-3">
+        <label class="lbl-erp">Langue</label>
+        <select class="form-select select-dark" id="langue" name="langue" onchange="changer_langue_connexion();">
+            <?php liste_options($langues, $_SESSION['lang'], true); ?>
+        </select>
     </div>
+
+    <div class="mb-3">
+        <label class="lbl-erp">Entité</label>
+        <input class="form-control input-dark" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>" required onchange="changer_entite_portail();">
+    </div>
+
+    <div class="mb-3">
+        <label class="lbl-erp">Identifiant</label>
+        <input class="form-control input-dark" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>" required>
+    </div>
+
+    <div class="mb-4">
+        <div class="d-flex justify-content-between">
+            <label class="lbl-erp">Mot de passe</label>
+            <a href="MotDePasseOublie" class="forgot-link">Oublié ?</a>
+        </div>
+        <input class="form-control input-dark" type="password" name="mdp" id="mdp" required>
+    </div>
+
+    <button name="btn_connexion" id="btn_connexion" class="btn btn-login w-100 fw-bold py-3">Connexion</button>
 <?php endif; ?>
 
-<footer class="portal-footer-block text-center mt-5">
+<footer class="portal-footer text-center mt-5">
     <p>&copy; <?= date('Y') ?> <strong>INTER SANTE</strong>. Tous droits réservés.</p>
 </footer>
\ No newline at end of file
diff --git a/Vue/portail.php b/Vue/portail.php
index f23c1410..93dc328c 100755
--- a/Vue/portail.php
+++ b/Vue/portail.php
@@ -1,56 +1,104 @@
-<?php 
-defined('APP_VERSION') || define('APP_VERSION', date('YmdHi'));
-?>
+<?php defined('APP_VERSION') || define('APP_VERSION', date('YmdHi')); ?>
 <!doctype html>
-<html lang="<?= (isset($_SESSION['lang']) && $_SESSION['lang'] == "en_US") ? 'en' : 'fr' ?>">
+<html lang="<?= ($_SESSION['lang'] == "en_US") ? 'en' : 'fr' ?>">
 <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <base href="<?= $racineWeb ?>">
-    <title><?= $titre ?></title>
-    
+    <title>INTER SANTE - Portail</title>
     <link rel="icon" href="Bootstrap_new/images/favicon.ico"/>
     <link href="Bootstrap_new/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    
     <link href="Bootstrap_new/css/style-portail.css?ver=<?= APP_VERSION ?>" rel="stylesheet">
 </head>
-
 <body>
-    <div class="portal-main-wrapper">
-        <div class="portal-bg-slideshow">
+    <div class="portal-container">
+        <div class="slide-container">
             <div class="slides">
-                <img src="assets/img/slides/image01.jpg" class="active">
-                <img src="assets/img/slides/image02.jpg">
-                <img src="assets/img/slides/image03.jpg">
-                <img src="assets/img/slides/image04.jpg">
-                <img src="assets/img/slides/image05.jpg">
-                <img src="assets/img/slides/image06.jpg">
-                <img src="assets/img/slides/image07.jpg">
-                <img src="assets/img/slides/image08.jpg">
-                <img src="assets/img/slides/image09.jpeg">
+                <img src="assets/img/slides/image01.jpg" class="active" attr="0">
+                <img src="assets/img/slides/image02.jpg" attr="1">
+                <img src="assets/img/slides/image03.jpg" attr="2">
+                <img src="assets/img/slides/image04.jpg" attr="3">
+                <img src="assets/img/slides/image05.jpg" attr="4">
+                <img src="assets/img/slides/image06.jpg" attr="5">
+                <img src="assets/img/slides/image07.jpg" attr="6">
+                <img src="assets/img/slides/image08.jpg" attr="7">
+                <img src="assets/img/slides/image09.jpeg" attr="8">
+            </div>
+            <div class="buttons">
+                <span class="next"></span>
+                <span class="prev"></span>
+            </div>
+            <div class="dotsContainer">
+                <?php for($i=0; $i<9; $i++): ?>
+                    <div class="dot <?= ($i==0)?'active':'' ?>" attr='<?= $i ?>'></div>
+                <?php endfor; ?>
             </div>
-            <div class="portal-overlay"></div>
         </div>
 
-        <div class="portal-auth-container">
-            <div class="auth-glass-card shadow-lg">
+        <div class="login-wrapper">
+            <div class="login-box shadow-lg">
                 <div id="div_contenu_portail">
                     <?= $contenu ?>
                 </div>
             </div>
         </div>
-
-        <div class="dotsContainer">
-            <?php for($i=0; $i<9; $i++): ?>
-                <div class="dot <?= ($i==0)?'active':'' ?>" attr='<?= $i ?>'></div>
-            <?php endfor; ?>
-        </div>
     </div>
 
     <script src="Bootstrap_new/js/jquery.min.js"></script>
     <script src="Bootstrap_new/js/bootstrap.bundle.min.js"></script>
-    <script src="Bootstrap_new/js/fonctions-portail.js?ver=<?= APP_VERSION ?>"></script>
+    <script>
+        let slideImages = document.querySelectorAll('.slides img');
+        let next = document.querySelector('.next');
+        let prev = document.querySelector('.prev');
+        let dots = document.querySelectorAll('.dot');
+        var counter = 0;
+
+        next.addEventListener('click', slideNext);
+        function slideNext(){
+            slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
+            if(counter >= slideImages.length-1){ counter = 0; } else { counter++; }
+            slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
+            indicators();
+        }
+
+        prev.addEventListener('click', slidePrev);
+        function slidePrev(){
+            slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
+            if(counter <= 0){ counter = slideImages.length-1; } else { counter--; }
+            slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
+            indicators();
+        }
+
+        function autoSliding(){
+            deletInterval = setInterval(timer, 3000);
+            function timer(){ slideNext(); indicators(); }
+        }
+        autoSliding();
+
+        const container = document.querySelector('.slide-container');
+        container.addEventListener('mouseover', () => { clearInterval(deletInterval); });
+        container.addEventListener('mouseout', autoSliding);
+
+        function indicators(){
+            for(i = 0; i < dots.length; i++){ dots[i].className = dots[i].className.replace(' active', ''); }
+            dots[counter].className += ' active';
+        }
+
+        function switchImage(currentImage){
+            currentImage.classList.add('active');
+            var imageId = currentImage.getAttribute('attr');
+            if(imageId > counter){
+                slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
+                counter = imageId;
+                slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
+            } else if(imageId < counter){
+                slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
+                counter = imageId;
+                slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
+            }
+            indicators();
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file