assure/Vue/Ajaxconnexioncookie/french.php

<?php 
	$maintenance = $societeusersaas['maintenance'];
	if($maintenance=='1')
	{
		$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
	}
?>

<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
<div class="d-none d-md-block">
	<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
		Portail Assuré
	</span>

	<?php if (isset($msgErreur) and $msgErreur>" "): ?>
		<div class="text-center p-t-10">
			<h4 class="txt3">
				<div class="col-12 alert alert-danger">
				<?= $msgErreur ?>
				</div>	
			</h4>
		</div>
	<?php else: ?>
		<div class="text-center p-t-10" id="div_msgErreur">

		</div>
	<?php endif; ?> 				 

	<?php if($maintenance!='1'): ?>
		<div class="wrap-input100">
			<label for="langue">Langue</label>
			<select class="form-select" id="langue" name="langue"
					
					required autocomplete="off" onchange="javascript:changer_langue_connexion();">
				<?php liste_options($langues, $_SESSION['lang'], true); ?>
			</select> 
		</div>
		

		<div class="wrap-input100">
			<div class="wrap-input100 validate-input" data-validate="Enter Entity">
				<label for="codeSociete">Entité</label>
				<input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
				placeholder="Entité" style="text-align:center;" required AUTOCOMPLETE="off" 
				onChange="javascript:changer_entite_portail();" >
			</div>
		</div>

		<div id="div_login_portail" class="wrap-input100">
			<div class="wrap-input100 validate-input" data-validate="Enter username">
				<label for="login">Identifiant</label>
				<input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	placeholder="Identifiant" style="text-align:center;" required AUTOCOMPLETE="off">
			</div>
		</div>

		<div class="wrap-input100 validate-input" data-validate="Enter password">
			<label for="mdp">Mot de passe</label>
			<input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" style="text-align:center;" required	AUTOCOMPLETE="off">
		</div>

		<div class="container-login100-form-btn">
			<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
				Connexion
			</button>
		</div>

		<div class="footer">
			Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
		</div>
	<?php endif; ?> 
</div>

<!-- Affichage mobile (cartes) -->
<div class="d-md-none">
    <!-- Copie exacte de la logique desktop, juste adaptée pour mobile -->
    <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px; display: block; font-size: 22px; text-align: center;">
        Portail Assuré
    </span>

    <?php if (isset($msgErreur) and $msgErreur>" "): ?>
        <div class="text-center p-t-10" style="margin-bottom: 15px;">
            <h4 class="txt3">
                <div class="col-12 alert alert-danger" style="padding: 10px; font-size: 14px;">
                    <?= $msgErreur ?>
                </div>	
            </h4>
        </div>
    <?php else: ?>
        <div class="text-center p-t-10" id="div_msgErreur" style="margin-bottom: 15px;"></div>
    <?php endif; ?>  

    <?php if($maintenance!='1'): ?>
    <!-- TOUTE LA STRUCTURE EST IDENTIQUE, SEULEMENT LES STYLES SONT AJUSTÉS POUR MOBILE -->
    <div class="wrap-input100" style="margin-bottom: 15px;">
        <label for="langue">Langue</label>
        <select class="form-select" id="langue" name="langue"
                style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
                required autocomplete="off" onchange="javascript:changer_langue_connexion();">
            <?php liste_options($langues, $_SESSION['lang'], true); ?>
        </select> 
    </div>
    

    <div class="wrap-input100" style="margin-bottom: 15px;">
        <div class="wrap-input100 validate-input">
            <label for="codeSociete">Entité</label>
            <input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
            placeholder="Entité" 
            style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
            required AUTOCOMPLETE="off" 
            onChange="javascript:changer_entite_portail();" >
        </div>
    </div>

    <div id="div_login_portail" class="wrap-input100" style="margin-bottom: 15px;">
        <div class="wrap-input100 validate-input">
            <label for="login">Identifiant</label>
            <input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	
            placeholder="Identifiant" 
            style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
            required AUTOCOMPLETE="off">
        </div>
    </div>

    <div class="wrap-input100 validate-input" style="margin-bottom: 20px;">
        <label for="mdp">Mot de passe</label>
        <input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" 
        style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
        required AUTOCOMPLETE="off">
    </div>

    <div class="container-login100-form-btn" style="margin-bottom: 20px;">
        <button name="btn_connexion" id="btn_connexion" class="btn login-btn"
                style="width: 100%; height: 45px; background: #7D4FFE; color: white; font-size: 18px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box;">
            Connexion
        </button>
    </div>

    <div class="footer" style="position: relative; bottom: auto; left: auto; font-size: 11px; text-align: center; padding: 10px; width: 100%; box-sizing: border-box;">
        Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
    </div>
    <?php endif; ?> 
</div>

<!-- STYLE CRITIQUE POUR ÉVITER TOUT DÉBORDEMENT -->
<style>
    /* RESET COMPLET POUR MOBILE */
    .d-md-none {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    .d-md-none > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
    }
    
    /* CONTENEUR PRINCIPAL SANS DÉBORDEMENT */
    .d-md-none {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 15px !important;
        min-height: 100vh !important;
    }
    
    /* GARANTIR QUE TOUT TIENT DANS L'ÉCRAN */
    .wrap-input100 {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    /* LES LABELS ET INPUTS S'ADAPTENT */
    .d-md-none label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
        font-size: 12pt !important;
    }
    
    .d-md-none input,
    .d-md-none select,
    .d-md-none .login-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* EMPÊCHER LE ZOOM SUR MOBILE */
    .d-md-none input,
    .d-md-none select {
        font-size: 16px !important;
    }
    
    /* CORRECTION SPÉCIFIQUE POUR LE FOOTER */
    .d-md-none .footer {
        position: static !important;
        margin-top: 20px !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* POUR LES TRÈS PETITS ÉCRANS */
    @media screen and (max-width: 320px) {
        .d-md-none {
            padding: 10px !important;
        }
        
        .login100-form-title {
            font-size: 20px !important;
        }
        
        .d-md-none input,
        .d-md-none select {
            height: 38px !important;
            padding: 6px 10px !important;
        }
        
        .login-btn {
            height: 42px !important;
            font-size: 16px !important;
        }
    }
    
    /* POUR LES TABLETTES EN MODE PORTRAIT */
    @media screen and (min-width: 480px) and (max-width: 767px) {
        .d-md-none {
            max-width: 400px !important;
            margin: 0 auto !important;
        }
    }
</style>

<script>
// IMPORTANT: MÊME LOGIQUE JAVASCRIPT QUE LE DESKTOP
// Les IDs sont identiques, donc les fonctions JavaScript existantes 
// fonctionneront directement avec cette version mobile

// Assurer que le bouton a le même comportement
document.getElementById('btn_connexion')?.addEventListener('click', function(e) {
    // La logique existante dans votre application s'appliquera automatiquement
    // car les IDs des champs sont identiques à la version desktop
    console.log('Connexion mobile - mêmes IDs que desktop');
});

// Correction pour garantir que tout s'affiche correctement
window.addEventListener('load', function() {
    // Vérifier et corriger tout débordement
    const mobileContainer = document.querySelector('.d-md-none');
    if (mobileContainer) {
        // Forcer le recalcul des dimensions
        mobileContainer.style.width = '100%';
        mobileContainer.style.overflowX = 'hidden';
        
        // Vérifier chaque élément pour éviter le débordement
        const allElements = mobileContainer.querySelectorAll('*');
        allElements.forEach(el => {
            el.style.maxWidth = '100%';
            el.style.boxSizing = 'border-box';
        });
    }
});
</script>