Voici l'historique de notre précédente jointe en fichier historique.txt conversation qui a porté sur le deloveloppement du de l'agence de voyage TRANS BONY VOYAGES, tu m'as déjà fourni le code que j'utilise, je veux que tu t'en souvienne avec présicion car j'aimerai qu'on apporte des amelioration.
Voici le dernier code fourni pour la page reservation.php, seulement quand quand je sélectionne la date et la ville de depart les voyages n'apparraissent pas seulement le message d'erreur "Erreur: Failed to fetch" alors que le webservice n'a pas de problème, ça passe très très bien avec postman, ça passe très bien aussi avec "https://wstransbony.zuaconnexion.com/ws/testvoyages.php?" avec les paramètres préfixés "{"date":"2025-08-19","depart":"Pointe-Noire"}, alors fais en sorte que les voyages apparraissent avec "'https://wstransbony.zuaconnexion.com/ws/voyages.php'"

<?php include 'header.php'; ?>

<!-- Modal du contrat original -->
<div class="modal" id="contractModal" style="display: flex;">
    <div class="modal-content">
        <h3>Nos conditions générales de réservation de billet en ligne</h3>
        <div class="terms-content">
            <p class="important-note">*Tant que vous n'avez pas validé le paiement votre réservation ne sera pas pris en compte et vous devez vous présenter à l'agence avec votre billet électronique.*</p>
            
            <ol>
                <li>Rassurez-vous que les informations saisies au formulaire précedent sont cellles du voyageur ;</li>
                <li>Vous devez acheter le billet pour autant de personnes que vous êtes, une personne = un billet ;</li>
                <li>Si vous avez un enfant, n'oubliez pas d'acheter son billet (de 0 à 4 ans = 2000F CFA) ;</li>
                <li>Vous ne pourrez monter que dans le site d'embarquement que vous avez choisi, autrement vous n'aurez pas accès (par exemple, si vous avez acheté le billet pour "LA FRONTIERE", allez monter au site la frontière) ;</li>
                <li>Si vous voulez reporter votre voyage, prière de signaler l'agence 24h avant le jour du voyage sinon vous serez contraints de payer une pénalité de 1.500F par billet ;</li>
                <li>Pour toute annulation vous payerez une pénalité de 1.500F par billet et le remboursement se fait 2 jours après ;</li>
                <li>Le billet est valable pour une periode 2 semaines ;</li>
                <li>Il ne vous est permis qu'un sac de vêtement de 20Kg, tout excedant vous sera taxé par service fret ;</li>
                <li>Nous nous degageons de tout bagage non enregistré.</li>
            </ol>
        </div>
        <div class="terms-footer">
            <div class="btn-group">
                <button class="btn btn-accent" onclick="declineContract()">Je refuse</button>
                <button class="btn" onclick="acceptContract()">J'accepte le contrat</button>
            </div>
        </div>
    </div>
</div>

<section class="reservation" id="reservationSection" style="display: none;">
    <div class="container">
        <div class="section-header">
            <h2>Réserver votre billet</h2>
            <p>Remplissez les informations nécessaires pour réserver votre voyage</p>
        </div>

        <!-- Étape 1: Recherche de voyage -->
        <div class="reservation-step active" id="step1">
            <div class="step-header">
                <h2>Étape 1: Choisissez votre voyage</h2>
                <p>Sélectionnez votre ville de départ et la date de voyage</p>
            </div>
            
            <form id="searchForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="departure">Ville de départ</label>
                        <select id="departure" name="departure" class="styled-select" required>
                            <option value="">Sélectionnez une ville</option>
                            <option value="Brazzaville">Brazzaville</option>
                            <option value="Pointe-Noire">Pointe-Noire</option>
                            <option value="Dolisie">Dolisie</option>
                            <option value="Nkayi">Nkayi</option>
                            <option value="Madingou">Madingou</option>
                            <option value="Loutété">Loutété</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="date">Date du voyage</label>
                        <input type="date" id="date" name="date" class="styled-input" required>
                    </div>
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn">Rechercher</button>
                </div>
            </form>
        </div>

        <!-- Étape 2: Liste des voyages disponibles -->
        <div class="reservation-step" id="step2">
            <div class="step-header">
                <h2>Étape 2: Sélectionnez votre trajet</h2>
                <p>Choisissez parmi les voyages disponibles</p>
                <p id="selectedDateDisplay" class="selected-info"></p>
            </div>
            
            <div id="travelList" class="travel-list">
                <!-- Contenu chargé dynamiquement -->
            </div>
            
            <div class="btn-group">
                <button class="btn" onclick="showStep(1)">Retour</button>
            </div>
        </div>

        <!-- Étape 3: Informations du passager -->
        <div class="reservation-step" id="step3">
            <div class="step-header">
                <h2>Étape 3: Informations du passager</h2>
                <p>Remplissez les informations du voyageur</p>
                <p id="selectedItineraryDisplay" class="selected-info"></p>
            </div>
            
            <form id="passengerForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="lastName">Nom</label>
                        <input type="text" id="lastName" name="lastName" class="styled-input" required>
                    </div>
                    <div class="form-group">
                        <label for="firstName">Prénom</label>
                        <input type="text" id="firstName" name="firstName" class="styled-input" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">Téléphone</label>
                    <input type="tel" id="phone" name="phone" class="styled-input" required>
                </div>
                <div class="form-group">
                    <label for="ticketType">Type de billet</label>
                    <select id="ticketType" name="ticketType" class="styled-select" required>
                        <option value="adult">Adulte (à partir de 11 ans)</option>
                        <option value="child">Enfant (de 5 à 10 ans)</option>
                        <option value="infant">Petit enfant (de 0 à 4 ans)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="destination">Destination</label>
                    <select id="destination" name="destination" class="styled-select" required>
                        <!-- Rempli dynamiquement -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="arrivalPoint">Site d'arrivée</label>
                    <select id="arrivalPoint" name="arrivalPoint" class="styled-select" required>
                        <!-- Rempli dynamiquement -->
                    </select>
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn">Suivant</button>
                    <button type="button" class="btn btn-secondary" onclick="showStep(2)">Retour</button>
                </div>
            </form>
        </div>

        <!-- Étape 4: Paiement -->
        <div class="reservation-step" id="step4">
            <div class="step-header">
                <h2>Étape 4: Paiement</h2>
                <p>Finalisez votre réservation en effectuant le paiement</p>
            </div>
            
            <div class="payment-summary">
                <p>Montant du billet: <span id="ticketAmount">0</span> FCFA</p>
                <p>Frais de service: <span id="serviceFee">1,000</span> FCFA</p>
                <p class="total">Total à payer: <span id="totalAmount">0</span> FCFA</p>
                <p class="note">Le supplément sert à compenser les frais de retrait et de la logistique.</p>
            </div>
            
            <div class="terms-check">
                <input type="checkbox" id="terms" checked disabled>
                <label for="terms">J'accepte les conditions générales</label>
            </div>
            
            <div class="payment-methods">
                <h4>Payer par:</h4>
                <div class="methods">
                    <div class="method" onclick="processPayment('momo')">
                        <img src="images/mtn-momo.png" alt="MTN MoMo">
                    </div>
                    <div class="method" onclick="processPayment('airtel')">
                        <img src="images/airtel-money.png" alt="Airtel Money">
                    </div>
                </div>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-secondary" onclick="showStep(3)">Retour</button>
            </div>
        </div>
    </div>
</section>

<script>
// Configuration des webservices
const WEB_SERVICES = {
    VOYAGES: 'https://wstransbony.zuaconnexion.com/ws/voyages.php',
    TARIFS: 'https://wstransbony.zuaconnexion.com/ws/tarifsOnline.php',
    SITES: 'https://wstransbony.zuaconnexion.com/ws/sitesArrivees.php'
};

// Variables globales
const SERVICE_FEE = 1000;
let currentStep = 1;
let selectedDeparture = '';
let selectedDate = '';
let selectedTravel = null;
let currentTarif = 0;

// Fonction pour appeler les webservices
async function callWebService(url, data) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data),
            mode: 'cors',
            credentials: 'omit'
        });

        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(`Erreur ${response.status}: ${errorText}`);
        }

        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            throw new Error('Réponse non-JSON reçue');
        }

        return await response.json();
    } catch (error) {
        console.error(`Erreur avec ${url}:`, error);
        throw error;
    }
}

// Gestion du contrat
function acceptContract() {
    document.getElementById('contractModal').style.display = 'none';
    document.getElementById('reservationSection').style.display = 'block';
    
    // Définir la date par défaut (demain)
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    document.getElementById('date').value = tomorrow.toISOString().split('T')[0];
    
    window.scrollTo(0, 0);
}

function declineContract() {
    window.location.href = 'index.php';
}

// Gestion des étapes
function showStep(step) {
    document.querySelectorAll('.reservation-step').forEach(el => {
        el.classList.remove('active');
    });
    document.getElementById(`step${step}`).classList.add('active');
    currentStep = step;
    window.scrollTo(0, 0);
}

// Recherche des voyages
async function fetchTravels(departure, date) {
    try {
        showLoading('travelList', 'Recherche des voyages en cours...');
        
        const data = await callWebService(WEB_SERVICES.VOYAGES, {
            date: date,
            depart: departure
        });

        if (!Array.isArray(data)) {
            throw new Error('Format de données invalide');
        }

        if (data.length > 0) {
            displayTravels(data);
        } else {
            showNoTravelMessage(departure, date);
        }
    } catch (error) {
        showError('travelList', `Erreur: ${error.message}`);
    }
}

function displayTravels(travels) {
    const travelList = document.getElementById('travelList');
    travelList.innerHTML = '';
    
    travels.forEach(travel => {
        const card = document.createElement('div');
        card.className = 'travel-card';
        card.innerHTML = `
            <h4>${travel.Depart} → ${travel.Arrivee}</h4>
            <p><strong>Départ:</strong> ${travel.Heure}</p>
            <p><strong>Formalités:</strong> ${travel.Formalite}</p>
            <p class="embarkation-site"><strong>Embarquement:</strong> <u>${travel.Site}</u></p>
            <button class="btn" onclick="selectTravel(
                ${travel.IDVOYAGES},
                '${travel.Depart}',
                '${travel.Arrivee}',
                '${travel.Heure}',
                '${travel.Formalite}',
                '${travel.Site}'
            )">Réserver</button>
        `;
        travelList.appendChild(card);
    });
}

function showNoTravelMessage(departure, date) {
    document.getElementById('travelList').innerHTML = `
        <div class="no-travel">
            <p>Aucun voyage disponible pour ${departure} le ${formatDate(date)}</p>
            <button class="btn" onclick="showStep(1)">Changer les critères</button>
        </div>
    `;
}

// Gestion des tarifs
async function fetchTarifs(depart, arrivee, ticketType) {
    try {
        const data = await callWebService(WEB_SERVICES.TARIFS, {
            depart: depart,
            arrivee: arrivee
        });

        if (!Array.isArray(data) || data.length === 0) {
            return getDefaultPrice(ticketType);
        }

        const tarif = data[0];
        switch(ticketType) {
            case 'adult': return tarif.Prix || 10000;
            case 'child': return tarif.PrixEnfant || 5000;
            case 'infant': return tarif.PrixAssurance || 2000;
            default: return 10000;
        }
    } catch (error) {
        console.error('Erreur tarifs:', error);
        return getDefaultPrice(ticketType);
    }
}

// Gestion des sites d'arrivée
async function fetchSitesArrivee(depart, arrivee) {
    try {
        const data = await callWebService(WEB_SERVICES.SITES, {
            depart: depart,
            arrivee: arrivee
        });

        if (Array.isArray(data) && data.length > 0) {
            return data.map(item => item.Arrivee || item.Depart);
        }
        return ['Fond tiété Mpaka', 'La Frontiere', 'Plateaux de 15 ans'];
    } catch (error) {
        console.error('Erreur sites:', error);
        return ['Fond tiété Mpaka', 'La Frontiere', 'Plateaux de 15 ans'];
    }
}

// Fonctions utilitaires
function showLoading(elementId, message) {
    document.getElementById(elementId).innerHTML = `
        <div class="loading">
            <div class="spinner"></div>
            <p>${message}</p>
        </div>
    `;
}

function showError(elementId, message) {
    document.getElementById(elementId).innerHTML = `
        <div class="error-message">
            <div class="error-icon">!</div>
            <p>${message}</p>
            <button class="btn retry-btn" onclick="window.location.reload()">
                Réessayer
            </button>
        </div>
    `;
}

function getDefaultPrice(ticketType) {
    switch(ticketType) {
        case 'adult': return 10000;
        case 'child': return 5000;
        case 'infant': return 2000;
        default: return 10000;
    }
}

function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleDateString('fr-FR');
}

// Événements
document.getElementById('searchForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    selectedDeparture = document.getElementById('departure').value;
    selectedDate = document.getElementById('date').value;
    document.getElementById('selectedDateDisplay').textContent = `Date: ${formatDate(selectedDate)}`;
    await fetchTravels(selectedDeparture, selectedDate);
    showStep(2);
});

document.getElementById('passengerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    showLoading('step3', 'Calcul en cours...');
    
    const ticketType = document.getElementById('ticketType').value;
    const destination = document.getElementById('destination').value;
    
    try {
        const [tarif, sites] = await Promise.all([
            fetchTarifs(selectedTravel.depart, destination, ticketType),
            fetchSitesArrivee(selectedTravel.depart, destination)
        ]);
        
        currentTarif = tarif;
        document.getElementById('ticketAmount').textContent = tarif.toLocaleString('fr-FR');
        document.getElementById('totalAmount').textContent = (tarif + SERVICE_FEE).toLocaleString('fr-FR');
        
        const arrivalSelect = document.getElementById('arrivalPoint');
        arrivalSelect.innerHTML = '';
        sites.forEach(site => {
            const option = document.createElement('option');
            option.value = site;
            option.textContent = site;
            arrivalSelect.appendChild(option);
        });
        
        showStep(4);
    } catch (error) {
        showError('step3', `Erreur: ${error.message}`);
    }
});

function selectTravel(id, depart, arrivee, heure, formalite, site) {
    selectedTravel = {
        id: id,
        depart: depart,
        arrivee: arrivee,
        heure: heure,
        formalite: formalite,
        site: site
    };
    
    document.getElementById('destination').innerHTML = `
        <option value="${arrivee}">${arrivee}</option>
    `;
    
    document.getElementById('selectedItineraryDisplay').textContent = 
        `${depart} → ${arrivee} | Départ: ${heure} (Formalité: ${formalite})`;
    
    showStep(3);
}

function processPayment(method) {
    const paymentData = {
        travel: selectedTravel,
        passenger: {
            nom: document.getElementById('lastName').value,
            prenom: document.getElementById('firstName').value,
            telephone: document.getElementById('phone').value,
            typeBillet: document.getElementById('ticketType').value
        },
        payment: {
            method: method,
            amount: currentTarif + SERVICE_FEE
        }
    };
    
    console.log('Données de paiement:', paymentData);
    alert(`Paiement ${method} simulé!`);
    // Ici: redirection vers le vrai système de paiement
}

// Initialisation
document.getElementById('date').valueAsDate = new Date();
</script>

<style>
/* Styles du modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

.terms-content {
    margin: 20px 0;
    line-height: 1.6;
}

.important-note {
    color: #e74c3c;
    font-weight: bold;
    margin: 15px 0;
}

.terms-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Styles des étapes */
.reservation-step {
    display: none;
}

.reservation-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Loading */
.loading {
    text-align: center;
    padding: 2rem;
}

.spinner {
    border: 4px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top: 4px solid #0056b3;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cartes de voyage */
.travel-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.embarkation-site u {
    text-decoration-color: #ffc107;
}

/* Erreurs */
.error-message {
    background: #ffebee;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.error-icon {
    background: #d32f2f;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.retry-btn {
    margin-top: 1rem;
    background: #d32f2f;
    color: white;
}

/* Champs de formulaire */
.styled-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: #f9f9f9;
    color: #000;
}

.styled-input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0,86,179,0.1);
}

.styled-select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: #f9f9f9 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 10px center;
    background-size: 1em;
    color: #000;
    appearance: none;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
</style>

<?php include 'footer.php'; ?>

Maintenant pour la petite popup je veux que les boutons  " Je refuse" et "J'accepte le contrat" soit visible même sans scroller tout le texte du contrat (parce que le client peut être un non habitué de la technologie et ne sait pas qu'il faut scroller et ne sait pas comment avancer, l'idée est de permettre que n'importe qui arrive à réserver sans l'aide de quelqu'un d'autre), Donc que le client ait la possibilité de scroller pour lire tout le contrat mais en voyant clairement les boutons sur lesquels il peut déjà appuyer même s'il ne lit pas tout le contrat.

Change le style des zone de saisie des champs de saisie parce qu'avec l'arrière plan blanc les zone de saisie ne sont pas visible et les écrits aussi, donc met un contour sur les zones de saisies avec un fond distinct afin d'être visible et remarquable et aussi à la selection de la date de voyage que les écrits soient en noir afin que le client voit la date prise et aussi à la saisi des informations dans le formulaire quand le client saisit le nom, prénom, téléphone et autre et que cela soit ecrit en noir aussi, ou encore je demande que tu changes le backgroud des si tu n'arrives pas à change le style ou la couleur des champs

Après avoir sélectionner le départ et la date de voyage pour afficher les voyages, consomme mon webservice qui renvoit un json des voyages disponibles à l'adresse "https://wstransbony.zuaconnexion.com/ws/voyages.php" avec des paramètres sélectionnés par exemple ""{"date":"2025-08-19","depart":"Pointe-Noire"}" en utilisant la methode POST. S'il y a des voyages disponibles tu affiches les voyages en fonction de cela sinon tu affiches un message comme "Désolé aucun voyage n'est disponible en ligne en ce jour (date choisi) au départ de (depart choisi)

Le site d'embarquement du voyage doit être écrit en gras avec un soulignement jaune pour attirer directement l'attention du client car il ne peut être embarqué que dans ce site, pas un autre

Quand on sélectionne la destionation on doit alimenter la liste site d'arrivée en consommant mon webservice qui renvoit un json des sites d'arrivée du de la destionation à l'adresse "https://wstransbony.zuaconnexion.com/ws/sitesArrivees.php" en utilisant le paramètre du site d'arrivée sélectionné par exemple '{"destination":"BRAZZAVILLE"}' (destination : valeur sélectionnée dans la liste déroulante du site d'arrivée) toujours en methode POST

Après avoir choisi la destination et le type de billet pour afficher la tarification au qui suit, il faut consommer mon webservice qui renvoit un json de la tarification disponibles à l'adresse "https://wstransbony.zuaconnexion.com/ws/tarifsOnline.php",  en utilisant le paramètre du site d'arrivée sélectionné par exemple '{"depart":"OUESSO","arrivee":"BRAZZAVILLE"}' (depart : valeur sélectionnée dans la liste déroulante du départ, arrivee : valeur sélectionnée dans la liste déroulante du site d'arrivée) toujours en methode POST. C'est pour avoir le tarif correspondant au depart sélectionner et la destination choisie, le type de billet est à "Adulte" on prend le montant dans la rubrique "Prix" si le type de billet choisi est enfant on prend le montant "PrixEnfant" et si le type est "Petit enfant" on prend le montant situé dans "PrixAssurance". Déclare en suite une variable ou constant qui contiendra le supplement à payer pour le service en ligne par exemple "1.000 F CFA" qui sera ajouté au prix du billet et de là tu affiches prix du billet, Frais de service (valeur de la variable) et total à payer = Prix du billet + Frais du service.

En même temps en contruit la structure des fichiers json du profil voyageur 

Pour créer des ID en entier long, j'utilise un algo de Ma fonction DonneID qui est une fonction windev, tu va la convertir en php pour avoir un ID compatible à mon système

PROCÉDURE DonneID()
nMataille est un entier = Taille(gnMonID)
nMataille2 est un entier = nMataille
nMataille -= 1
SI nMataille = 0 ALORS
	nMataille = 1
FIN

InitHasard()

nNombreAléatoire est un entier
nNombreAléatoire = Hasard(0, 99)

sMonID est une chaîne
sMonID = DateDuJour()[[3 À 8]] + Maintenant() + gnMonID[[nMataille À nMataille2]] + nNombreAléatoire + Maintenant()[[8 À 8]]

RENVOYER sMonID

un json Profil qui sera dynamiquement comme suit :
"{ "IDPROFILE":250818133954777537, "IDDEPARTEMENTS":0, "Login":"", "PM":"", "Telephone":"066719170", "RecoveryPassword":"", "Nom":"ROLDE", "Prenom":"Tsouari", "Type":1, "Archiver":false, "Departement":"", "Localite":"", "Quartier":"", "Num":"0", "Rue":"", "Adresse":"", "GPSLatitude":"", "GPSLongitude":"", "ProfileOk":false, "Sexe":true, "IDTemp":"250818133954777537", "genreNormal":0, "IDARRONDISSEMENTS":0, "IDAGENCES":1, "Date":"2025-08-18", "Heure":"13:39:00.000", "SuggererZZ":false, "Numero":"250818133954777537", "PEM":false, "PEP":false, "PPC":"", "RecevoirSMS":true, "DateHeureCree":"2025-08-18T13:39:54.772", "DateHeureModif":"2025-08-18T13:39:54.772", "AdMac":"00:e9:3a:10:8a:04", "ASynchroniser":"00:e9:3a:10:8a:04", "Autre1":"", "Autre2":"", "Autre3":"" }"

Dont : "IDPROFILE" = Valeur de la fonction DonneID(), "Telephone" = le numero de téléphone saisie dans le formulaire, "Nom" = le nom saisi dans le formulaire, "Prenom" = me prénom saisi dans le formulaire, "Heure" = l'heure d'achat du billet, "IDTemp" = "IDPROFILE" , "IDAGENCES" = 1, "Date" = date du jour, "Numero" = "IDPROFILE", "DateHeureCree" = dateheure au moment de l'achat,  "DateHeureModif" = dateheure au moment de l'achat, "AdMac" = "10:e9:3a:10:8a:04" , "ASynchroniser" = "10:e9:3a:10:8a:04", le reste des champs du json Profil gardent les valeurs par defaut contenu dans l'exemple.
Le json Profil doit être envoyé au webservice https://wstransbony.zuaconnexion.com/ws/voyageurp1.php? en methode post

un json Voyageur qui sera dynamiquement comme suit :
{ "IDVOYAGEURS":250818133955517671, "IDPROFILVendeur":7, "Date":"2025-08-18", "Heure":"13:39:00.000", "IDVOYAGES":250818074417647874, "IDPROFILE":250818133954777537, "IDAGENCES":1, "Depart":"Pointe-noire", "Arrivee":"Brazzaville", "Type":1, "Qte":1, "Total":12000, "MontantEnvoye":12000, "Valider":true, "Voyage":"Pointe-noire - Brazzaville", "Agence":"", "PrixUnit":12000, "IDTemp":"2025081813395549", "Archiver":false, "Regler":false, "ArretReglement":false, "DateL":"2025-08-18", "HeureL":"13:39:00.000", "Nom":"", "Sexe":false, "Latitude":"Guichet", "Longitude":"", "Categorie":1, "deplacement":"", "IDVOYAGESTransfere":0, "AnnulerV":false, "NumeroTicket":"081906105549 - 1", "IDDEPART":2, "IDARRIVEE":1, "Arret":"LA FRONTIERE", "Autre1":"Present(e)", "Autre2":"Pointe-noire", "Autre3":"", "Autre4":"", "Autre5":"", "IDPROFILEPenalite":0, "PositionArrivee":1, "Fidele":false, "DateHeureCree":"2025-08-18T13:39:55.511", "DateHeureModif":"2025-08-18T13:39:55.511", "AdMac":"00:e9:3a:10:8a:04", "ASynchroniser":"00:e9:3a:10:8a:04", "Autre6":"", "Autre7":"", "NbreImpression":1, "RaisonDoubleImpression":"", "NbreModif":0, "RaisonDoubleModification":"", "NumeroTalon":"", "ADesColis":false, "TelephoneVoyageur":"", "NomPrenomClient":"", "Telephone":"" }

Dont : "IDVOYAGEURS" =  Valeur de la fonction DonneID(), "IDPROFILVendeur" = 7, "Date" = date du jour, "Heure" = l'heure d'achat du billet, "IDVOYAGES" = valeur du champs IDVOYAGES du voyage séléctionné, "IDPROFILE" = même valeur "IDPROFILE" du fichier json Profil,  "IDAGENCES" = 1, "Depart" valeur champs Depart du voyage séléctionné, "Arrivee" = valeur sélectionné sur la liste déroulante arrivée, "Type" = valeur du type de billet sélectionné, si le type est adulte la valeur est 1, si cest enfant la valeur est 2 sinon 3, "Qte" = 1, "Total" = montant du billet (en fonction du type de billet selon que la tarification est renvoyé par le webservice) , "MontantEnvoye" = montant à payer, c'est-à-dire le montant du billet et les frais du service, "PrixUnit" = "Total" , "Valider" = false, "Voyage" = valeur du champs Description du voyage sélectionné , "DateL":" = date du jour, "IDTemp" = valeur de "IDVOYAGEURS", "NumeroTicket" = "" , "IDDEPART" = 1, "IDARRIVEE" = 2, "Arret" = valeur sélectionné dans la liste déroulante du site d'arrivée, "DateHeureCree" = dateheure au moment de l'achat,  "DateHeureModif" = dateheure au moment de l'achat, "AdMac" = "10:e9:3a:10:8a:04" , "ASynchroniser" = "10:e9:3a:10:8a:04", "NbreImpression":0, le reste des champs du json Profil gardent les valeurs par defaut contenu dans l'exemple.
Le json Profil doit être envoyé au webservice https://wstransbony.zuaconnexion.com/ws/voyageurp2.php? en methode post

Une fois le json Profil envoyé avec succès, enregistre la valeur "IDPROFILE" comme cookie persistant du coté du client, ceci permettra au client d'acceder à la liste de ces billets achetés, cette valeur "IDPROFILE" servira d'identifiant du client, il n'aura donc pas besoin de se connecter avec un compte et mot de passe pour acceder à son espace billets

Le json Voyageur est envoyé si et seulement si le json Profil a été envoyé avec succès en appuyant sur l'un des logo de paiement (MTN ou Airtel Money)
Si le bouton de paiement appuyé est MTN MoMo le champs "Autre6": du json voyageur = "mtn" sinon si c'est Artel Money "Autre6": = airtel

Quand je quitte une etape à une autre si c'est possible il faut faut scroller le site vers le haut pour voir les champs de debut en haut de l'étape.

Je joins un fichier ws.text contenant la structure de mes webservices afin que tu vois comment le consommer parfaitement avec les paramètres requis.


Stp commente chaque etape du code pour me permettre de comprendre le code et debogguer si possible