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) -->
<style>
    /* Empêche tout scroll horizontal */
    .mobile-app {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        background: #f0f0f0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* Contenu scrollable vertical uniquement */
    .mobile-content {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
    }

    /* Cartes compactes */
    .mobile-card {
        background: white;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        animation: fadeInUp 0.4s ease;
    }

    /* Animation d’apparition */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(15px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Uniformisation des champs */
    .mobile-input, .mobile-select {
        width: 100%;
        height: 48px;
        border-radius: 8px;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 16px;
        background: #fafafa;
    }

    /* Bouton connexion */
    .mobile-btn {
        width: 100%;
        height: 50px;
        border-radius: 30px;
        background: #1a73e8;
        color: white;
        font-size: 18px;
        border: none;
        animation: fadeInUp 0.5s ease;
    }

    /* Header */
    .mobile-header {
        background: #1a73e8;
        color: white;
        padding: 18px;
        text-align: center;
        font-size: 22px;
        font-family: Play-Bold;
    }

    /* Footer */
    .mobile-footer {
        text-align: center;
        padding: 10px;
        font-size: 13px;
        color: #666;
    }
</style>


<div class="mobile-app d-md-none">

    <!-- HEADER -->
    <div class="mobile-header">
        Portail Assuré
    </div>

    <!-- CONTENU -->
    <div class="mobile-content">

        <!-- Message d'erreur -->
        <?php if (isset($msgErreur) and $msgErreur>" "): ?>
            <div class="alert alert-danger text-center mobile-card">
                <?= $msgErreur ?>
            </div>
        <?php else: ?>
            <div id="div_msgErreur"></div>
        <?php endif; ?>

        <?php if($maintenance!='1'): ?>

        <!-- Langue -->
        <div class="mobile-card">
            <label for="langue">Langue</label>
            <select class="mobile-select" id="langue" name="langue"
                    onchange="javascript:changer_langue_connexion();" required>
                <?php liste_options($langues, $_SESSION['lang'], true); ?>
            </select>
        </div>

        <!-- Entité -->
        <div class="mobile-card">
            <label for="codeSociete">Entité</label>
            <input class="mobile-input" type="text" name="codeSociete" id="codeSociete"
                   value="<?= $codeSociete ?>" placeholder="Entité" autocomplete="off"
                   onchange="javascript:changer_entite_portail();" required>
        </div>

        <!-- Identifiant -->
        <div class="mobile-card">
            <label for="login">Identifiant</label>
            <input class="mobile-input" type="text" name="login" id="login"
                   value="<?= $codeUtilisateur ?>" placeholder="Identifiant"
                   autocomplete="off" required>
        </div>

        <!-- Mot de passe -->
        <div class="mobile-card">
            <label for="mdp">Mot de passe</label>
            <input class="mobile-input" type="password" name="mdp" id="mdp"
                   placeholder="Mot de passe" autocomplete="off" required>
        </div>

        <!-- Bouton -->
        <button class="mobile-btn" id="btn_connexion" name="btn_connexion">
            Connexion
        </button>

        <?php endif; ?>

    </div>

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

</div>