<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="google-site-verification" content="64a6odnKoyBZq1qJIKh0vduOWwe2i-2Az0Ir8PrnV_8" />
<meta name="google-site-verification" content="9fHu1XaWFQlTT-0FOsZzF1Tg_aM67uNvC5wXS4kfoMo" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0">
<meta name="theme-color" content="#000000">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<meta name="description" content="bara Daloa : trouvez un prestataire, artisan ou commerçant près de chez vous à Daloa. Plombier, coiffeur, menuisier, électricien, boutiques et plus encore.">
<meta name="keywords" content="bara Daloa, prestataire Daloa, artisan Daloa, plombier Daloa, coiffeur Daloa, menuisier Daloa, service Daloa, annuaire Daloa">
<title>bara Daloa | Trouvez un prestataire à Daloa</title>
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/assets/icons/icon-192.png">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
<link rel="canonical" href="https://daloa.pages.dev/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="bara Daloa">
<meta property="og:title" content="bara Daloa | Trouvez un prestataire à Daloa">
<meta property="og:description" content="Trouvez un prestataire, artisan ou commerçant près de chez vous à Daloa : plombier, coiffeur, menuisier, électricien et plus encore.">
<meta property="og:url" content="https://daloa.pages.dev/">
<meta property="og:image" content="https://daloa.pages.dev/assets/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="bara Daloa - Trouvez un prestataire à Daloa">
<meta property="og:locale" content="fr_FR">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="bara Daloa | Trouvez un prestataire à Daloa">
<meta name="twitter:description" content="Trouvez un prestataire, artisan ou commerçant près de chez vous à Daloa.">
<meta name="twitter:image" content="https://daloa.pages.dev/assets/logo.png">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "bara Daloa",
  "description": "Annuaire et marketplace de prestataires, artisans et commerçants à Daloa, Côte d'Ivoire.",
  "image": [
    "https://daloa.pages.dev/assets/logo.png",
    "https://daloa.pages.dev/assets/logo.png"
  ],
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Daloa",
    "addressRegion": "Haut-Sassandra",
    "addressCountry": "CI"
  },
  "areaServed": "CI",
  "url": "https://daloa.pages.dev/"
}
</script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="bara Daloa">
<meta name="mobile-web-app-capable" content="yes">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<script type="module" src="firebase-init.js"></script>
<script type="module" src="sante-map-bridge.js"></script>
</head>
<body>

<div class="app-shell">

  <!-- ================= HOME ================= -->
  <div class="screen-view visible" id="view-home">
    <div class="topbar">
      <div class="brand"><img class="brand-logo" src="assets/logo.png" alt="bara Daloa" decoding="async"></div>
      <div class="topbar-actions">
        <span id="topbar-account-slot"></span>
        <button class="icon-btn" onclick="showView('info')" aria-label="À propos de bara Daloa"><i class="fa-solid fa-circle-info"></i></button>
        <button class="icon-btn accent" onclick="toggleDarkMode()" aria-label="Changer le thème de couleur" id="topbar-theme-btn"><i class="fa-solid fa-palette"></i></button>
        <button class="icon-btn" onclick="showView('favorites')" aria-label="Favoris"><i class="fa-solid fa-heart" style="color:var(--orange);"></i></button>
        <button class="icon-btn" onclick="showView('cart')" aria-label="Panier" style="position:relative;"><i class="fa-solid fa-cart-shopping"></i><span class="cart-badge" id="cart-badge-home" style="display:none;">0</span></button>
        <button class="icon-btn" onclick="openSupportFromBell()" aria-label="Notifications"><i class="fa-regular fa-bell"></i><span class="dot" id="bell-dot" style="display:none;"></span></button>
      </div>
    </div>
    <div class="install-banner" id="install-banner" style="display:none;">
      <div class="install-banner-icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
      <div class="install-banner-text">
        <div class="install-banner-title">Installer bara Daloa</div>
        <div class="install-banner-sub">Accès rapide depuis votre écran d'accueil</div>
      </div>
      <button class="install-banner-btn" onclick="handleInstallClick()">Installer</button>
      <button class="install-banner-close" onclick="dismissInstallBanner()" aria-label="Fermer"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div class="scroll" id="home-scroll">
      <div class="stories-bar" id="home-stories"></div>
      <h1 class="home-title">Trouvez le bon prestataire à Daloa</h1>
      <p class="home-sub">Là-bas, on trouve tous les profils : des professionnels près de chez vous pour tous vos besoins.</p>
      <button class="home-search-cta" onclick="showView('search')" style="display:flex; align-items:center; gap:10px; width:100%; margin:4px 0 14px; padding:14px 16px; border:none; border-radius:14px; background:var(--orange); color:#fff; font-weight:700; font-size:14.5px; text-align:left;">
        <i class="fa-solid fa-magnifying-glass"></i>
        <span>Chercher un plombier, un menuisier, un coiffeur…</span>
      </button>
      <button class="home-search-cta" onclick="openTrackingEntry()" style="display:flex; align-items:center; gap:12px; width:100%; margin:0 0 14px; padding:14px 16px; border:none; border-radius:14px; background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.08)); color:var(--text-main); font-weight:700; font-size:14.5px; text-align:left; position:relative;">
        <span style="width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--green); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(34,197,94,.35);"><i class="fa-solid fa-truck-fast" style="color:#fff; font-size:15px;"></i></span>
        <span style="flex:1; min-width:0;">
          <span style="display:block;">Suivre une livraison</span>
          <span style="display:block; font-weight:600; font-size:11.5px; color:var(--muted); margin-top:1px;">Position du livreur en temps réel</span>
        </span>
        <span style="display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px; background:rgba(34,197,94,.15); color:var(--green); font-weight:800; font-size:10px; flex-shrink:0;"><span class="pulse-dot" style="width:6px; height:6px;"></span>DIRECT</span>
      </button>
      <div class="hero-scroll" id="hero-scroll"></div>
      <div class="hero-dots" id="hero-dots"></div>

      <div class="section-row"><h2>Catégories populaires</h2></div>
      <div class="cat-scroll" id="home-cat-scroll"></div>

      <div class="section-row"><h2>Prestataires recommandés</h2><button class="see-all" onclick="showView('search')">Voir tout <i class="fa-solid fa-chevron-right"></i></button></div>
      <div class="prov-scroll" id="home-prov-scroll"></div>

      <div class="reco-section-title"><i class="fa-solid fa-wand-magic-sparkles"></i>Recommandé pour vous</div>
      <div class="prov-scroll" id="home-reco-scroll"></div>

      <div class="section-row"><h2>Fil d'actualité</h2></div>
      <div class="home-feed-tabs">
        <button class="home-feed-tab" data-feed-tab="foryou" onclick="setHomeFeedTab('foryou')">Pour vous</button>
        <button class="home-feed-tab" data-feed-tab="following" onclick="setHomeFeedTab('following')">Abonnements</button>
      </div>
      <div class="home-cat-tabs" id="home-cat-tabs"></div>
      <div class="feed-list" id="home-prov-all"></div>

      <div class="section-row" style="margin-top:8px;"><h2>Publications des utilisateurs</h2></div>
      <div class="feed-list" id="home-feed-vertical"></div>
      <div class="feed-vertical-sentinel" id="home-feed-sentinel"></div>
    </div>
    <div id="bottomnav-home"></div>
    <button class="home-scrolltop-btn" id="home-scrolltop-btn" onclick="scrollHomeToTop()" aria-label="Retour en haut"><i class="fa-solid fa-arrow-up"></i></button>
    <button class="home-fab" id="home-fab-createprofile" aria-label="Mon profil">
      <i class="fa-solid fa-user"></i>
    </button>
  </div>
  <div class="screen-view" id="view-search">
    <div class="search-header"><h1>Explorer</h1></div>
    <div style="padding:0 20px;">
      <div class="search-bar" style="margin:10px 0 0;">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input id="search-input" placeholder="Nom, métier..." oninput="renderSearchResults()">
        <button class="search-go" style="background:var(--navy); position:relative;" onclick="openFilterSheet()"><i class="fa-solid fa-sliders"></i><span class="dot" id="filter-active-dot" style="display:none;"></span></button>
      </div>
    </div>
    <div class="explore-tiles" id="explore-tiles" style="display:none;"></div>
    <button id="verified-filter-btn" onclick="toggleVerifiedFilter()" style="display:flex; align-items:center; gap:6px; margin:14px 20px 8px; padding:7px 12px; border-radius:20px; border:1.5px solid var(--orange); background:transparent; color:var(--orange); font-size:12.5px; font-weight:700; width:fit-content;">
      <i class="fa-solid fa-shield-halved"></i> Prestataires vérifiés uniquement
    </button>
    <div class="chips" id="search-chips"></div>
    <div class="result-count" id="result-count"></div>
    <div class="scroll"><div class="prov-grid" id="result-list"></div></div>
    <div id="bottomnav-search"></div>
  </div>

  <!-- ================= PUBLISH ================= -->
  <div class="screen-view" id="view-publish">
    <div class="pub-header"><h1 id="pub-header-title">Publier un service</h1><p id="pub-header-sub">Proposez vos compétences aux habitants de Daloa.</p></div>
    <div class="scroll">
      <form class="pub-form" onsubmit="return submitPublish(event)">
        <div class="form-section-title"><span class="num">1</span><span>Ton profil</span></div>
        <div class="field">
          <label>Type de compte</label>
          <div class="acct-type-toggle" id="acct-type-toggle">
            <button type="button" class="acct-type-btn" data-type="service" onclick="setAccountType('service')"><i class="fa-solid fa-toolbox"></i>Prestataire<br>de service</button>
            <button type="button" class="acct-type-btn" data-type="shop" onclick="setAccountType('shop')"><i class="fa-solid fa-shop"></i>Commerçant<br>(catalogue)</button>
          </div>
          <p class="field-hint" id="acct-type-hint">Un prestataire propose ses compétences. Un commerçant vend des produits depuis un catalogue.</p>
        </div>

        <div class="form-section-title"><span class="num">2</span><span id="pub-section2-title">Détails du service</span></div>
        <div class="field">
          <label>Photos du service</label>
          <div class="upload-box" id="upload-box">
            <input type="file" id="pub-photos" accept="image/*" multiple onchange="handlePhotoSelect(event)">
            <i class="fa-solid fa-camera"></i><span>Ajouter des photos</span>
          </div>
          <div class="photo-preview-strip" id="photo-preview-strip"></div>
        </div>
        <div class="field"><label id="pub-title-label">Titre du service</label><input id="pub-title" placeholder="Ex : Installation électrique"></div>
        <div class="field"><label>Catégorie</label>
          <select id="pub-cat"></select>
        </div>
        <div class="field-row">
          <div class="field"><label>Prix (FCFA)</label><input id="pub-price" placeholder="Ex : 10000" inputmode="numeric"></div>
          <div class="field" id="pub-stock-field" style="display:none;"><label>Stock disponible</label><input id="pub-stock" placeholder="Ex : 25" inputmode="numeric"></div>
        </div>
        <div class="field">
          <label id="pub-desc-label">Description</label>
          <textarea rows="3" id="pub-desc" placeholder="Décrivez votre service en quelques mots..."></textarea>
          <p class="field-hint">Précise ce que tu proposes, ton expérience, tes horaires : ça rassure le client avant même qu'il t'écrive.</p>
        </div>

        <button type="submit" class="publish-btn">Publier le service</button>
        <p class="publish-success" id="publish-success" style="display:none;">✓ Service publié avec succès</p>
      </form>
    </div>
    <div id="bottomnav-publish"></div>
  </div>

  <!-- ================= MESSAGES ================= -->
  <div class="screen-view" id="view-messages">
    <div class="msg-header"><h1>Messages</h1></div>
    <div class="scroll"><div class="msg-list" id="msg-list"></div></div>
    <div id="bottomnav-messages"></div>
  </div>

  <!-- ================= CHAT ================= -->
  <div class="screen-view" id="view-chat">
    <div class="chat-header">
      <button class="back" onclick="leaveChat()"><i class="fa-solid fa-arrow-left"></i></button>
      <div class="avatar" id="chat-av"></div>
      <div class="who"><b id="chat-name"></b><span id="chat-role"></span></div>
    </div>
    <div class="chat-body" id="chat-body"></div>
    <div class="chat-input-row">
      <input id="chat-input" placeholder="Écrire un message..." onkeydown="if(event.key==='Enter') sendChat()">
      <button class="chat-send" onclick="sendChat()"><i class="fa-solid fa-paper-plane"></i></button>
    </div>
  </div>

  <!-- ================= PROFILE (me) ================= -->
  <div class="screen-view" id="view-profile">
    <div class="profile-hero">
      <div class="profile-map" id="me-hero-map"></div>
      <div class="profile-map-overlay"></div>
      <a class="gmaps-btn" id="me-gmaps-btn" href="https://www.google.com/maps/search/?api=1&query=Daloa%2C%20C%C3%B4te%20d%27Ivoire" target="_blank" rel="noopener" onclick="event.stopPropagation();"><i class="fa-brands fa-google"></i>Google Maps</a>
      <div class="profile-topbar">
        <span></span>
        <button class="icon-btn dark" onclick="openSettingsSheet()"><i class="fa-solid fa-gear"></i></button>
      </div>
      <div class="profile-avatar-wrap" id="me-avatar-wrap"></div>
    </div>
    <div class="scroll" id="me-body"></div>
    <div id="bottomnav-profile"></div>
  </div>

  <!-- ================= PROFILE (view other) ================= -->
  <div class="screen-view" id="view-viewprofile">
    <div class="profile-hero">
      <div class="profile-map" id="vp-hero-map"></div>
      <div class="profile-map-overlay"></div>
      <a class="gmaps-btn" id="vp-gmaps-btn" href="https://www.google.com/maps/search/?api=1&query=Daloa%2C%20C%C3%B4te%20d%27Ivoire" target="_blank" rel="noopener" onclick="event.stopPropagation();"><i class="fa-brands fa-google"></i>Google Maps</a>
      <button class="livemap-btn" id="vp-livemap-btn" style="display:none;" onclick="event.stopPropagation(); viewProviderPosition(this.dataset.pid, event)"><i class="fa-solid fa-satellite-dish"></i>Carte en direct</button>
      <div class="profile-topbar">
        <button class="icon-btn dark" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
        <button class="icon-btn dark"><i class="fa-solid fa-ellipsis"></i></button>
      </div>
      <div class="profile-avatar-wrap" id="vp-avatar-wrap"></div>
    </div>
    <div class="scroll" id="vp-body"></div>
  </div>

  <!-- ================= INFO / À PROPOS ================= -->
  <div class="screen-view" id="view-info">
    <div class="cart-header">
      <button class="back" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>À propos de bara Daloa</h1>
    </div>
    <div class="scroll" id="info-body">
      <div style="padding:18px 20px 40px;">
        <div style="text-align:center; margin-bottom:22px;">
          <img src="assets/logo.png" alt="bara Daloa" style="width:64px; height:64px; border-radius:16px; margin-bottom:10px;">
          <div style="font-weight:700; font-size:16px; color:var(--text-main);">bara Daloa</div>
          <div style="font-size:12.5px; color:var(--muted); margin-top:4px;">« Bara » veut dire « travail » — l'appli qui rassemble tous les acteurs du travail à Daloa.</div>
        </div>

        <div style="background:rgba(255,255,255,0.7); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;">
          <div style="font-weight:700; font-size:13.5px; color:var(--text-main); margin-bottom:6px;"><i class="fa-solid fa-bullseye" style="color:var(--orange); margin-right:7px;"></i>Notre but</div>
          <div style="font-size:12.5px; color:var(--muted); line-height:1.6;">Mettre en relation, en un clic, les habitants de Daloa avec les prestataires et commerçants de leur quartier : couturiers, plombiers, coiffeurs, boutiques, restaurateurs... Là-bas, on trouve tous les profils, sans intermédiaire.</div>
        </div>

        <div style="background:rgba(255,255,255,0.7); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;">
          <div style="font-weight:700; font-size:13.5px; color:var(--text-main); margin-bottom:10px;"><i class="fa-solid fa-list-check" style="color:var(--orange); margin-right:7px;"></i>Comment ça marche</div>
          <div style="display:flex; gap:10px; margin-bottom:10px;"><div style="width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;">1</div><div style="font-size:12.5px; color:var(--muted); line-height:1.5;">Parcourez les catégories ou faites une recherche depuis l'accueil.</div></div>
          <div style="display:flex; gap:10px; margin-bottom:10px;"><div style="width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;">2</div><div style="font-size:12.5px; color:var(--muted); line-height:1.5;">Ouvrez un profil pour voir ses services, ses photos et les avis d'autres clients.</div></div>
          <div style="display:flex; gap:10px;"><div style="width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;">3</div><div style="font-size:12.5px; color:var(--muted); line-height:1.5;">Contactez-le directement par message ou WhatsApp pour convenir des détails.</div></div>
        </div>

        <div style="background:rgba(255,255,255,0.7); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;">
          <div style="font-weight:700; font-size:13.5px; color:var(--text-main); margin-bottom:6px;"><i class="fa-solid fa-store" style="color:var(--orange); margin-right:7px;"></i>Vous êtes prestataire ou commerçant ?</div>
          <div style="font-size:12.5px; color:var(--muted); line-height:1.6;">Appuyez sur le bouton « + » en bas de l'écran pour créer gratuitement votre profil et le rendre visible immédiatement à tout Daloa.</div>
        </div>

        <button onclick="openSupportFromBell()" style="width:100%; padding:13px; border:none; border-radius:14px; background:var(--orange); color:#fff; font-weight:700; font-size:13.5px;"><i class="fa-regular fa-comments" style="margin-right:7px;"></i>Une question ? Écrire au support</button>

        <div style="display:flex; gap:10px; margin-top:14px;">
          <button onclick="showView('cgu')" style="flex:1; padding:11px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text-main); font-weight:700; font-size:12px;"><i class="fa-solid fa-file-contract" style="margin-right:6px; color:var(--orange);"></i>CGU</button>
          <button onclick="showView('privacy')" style="flex:1; padding:11px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text-main); font-weight:700; font-size:12px;"><i class="fa-solid fa-user-shield" style="margin-right:6px; color:var(--orange);"></i>Confidentialité</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= CGU ================= -->
  <div class="screen-view" id="view-cgu">
    <div class="cart-header">
      <button class="back" onclick="showView('info')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Conditions d'utilisation</h1>
    </div>
    <div class="scroll">
      <div style="padding:18px 20px 40px; font-size:12.5px; color:var(--muted); line-height:1.7;">
        <p style="color:var(--text-main); font-weight:700; font-size:14px; margin-bottom:10px;">Conditions générales d'utilisation de bara Daloa</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">1. Objet.</b> bara Daloa est une application qui met en relation les habitants de Daloa avec des prestataires de services et des commerçants locaux. L'application ne fournit elle-même aucun service ni produit : elle sert uniquement d'annuaire et d'espace de mise en contact.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">2. Comptes.</b> Toute personne peut créer gratuitement un profil (client, prestataire ou commerçant) en renseignant des informations exactes. L'utilisateur est responsable des informations qu'il publie et des échanges qu'il engage avec les autres utilisateurs.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">3. Transactions.</b> Les commandes, réservations et paiements se négocient directement entre le client et le prestataire ou commerçant (en personne, par appel, WhatsApp ou message). bara Daloa n'intervient pas dans ces transactions et n'en garantit ni le prix, ni la qualité, ni l'exécution.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">4. Contenu publié.</b> Chaque utilisateur reste responsable des photos, descriptions et avis qu'il publie. Tout contenu trompeur, offensant ou frauduleux peut être supprimé et le compte concerné suspendu.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">5. Avis.</b> Les avis doivent refléter une expérience réelle. Les avis mensongers ou diffamatoires peuvent être retirés.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">6. Responsabilité.</b> bara Daloa met tout en œuvre pour assurer la disponibilité de l'application mais ne peut garantir un fonctionnement continu et sans erreur.</p>
        <p style="margin-bottom:0;"><b style="color:var(--text-main);">7. Modifications.</b> Ces conditions peuvent évoluer ; les utilisateurs seront informés des changements importants au sein de l'application.</p>
      </div>
    </div>
  </div>

  <!-- ================= CONFIDENTIALITÉ ================= -->
  <div class="screen-view" id="view-privacy">
    <div class="cart-header">
      <button class="back" onclick="showView('info')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Politique de confidentialité</h1>
    </div>
    <div class="scroll">
      <div style="padding:18px 20px 40px; font-size:12.5px; color:var(--muted); line-height:1.7;">
        <p style="color:var(--text-main); font-weight:700; font-size:14px; margin-bottom:10px;">Politique de confidentialité de bara Daloa</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">1. Données collectées.</b> Selon votre usage, l'application peut collecter : nom, numéro de téléphone/WhatsApp, quartier, photos de profil et de services, position approximative ou précise (si vous l'autorisez), messages échangés avec d'autres utilisateurs, avis publiés, et un identifiant technique de compte.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">2. Utilisation des données.</b> Ces informations servent à afficher votre profil aux autres utilisateurs, permettre la recherche et la mise en relation (proximité, catégories), et assurer le fonctionnement du panier, des commandes, des réservations et de la messagerie interne.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">3. Partage.</b> Les informations d'un profil public (nom, services, avis, quartier) sont visibles par tous les utilisateurs de l'application. Le numéro de téléphone n'est communiqué que si vous choisissez de le partager pour être contacté. Aucune donnée n'est vendue à des tiers.</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">4. Conservation.</b> Les données sont conservées tant que le compte existe. La suppression de compte peut être demandée auprès du support depuis la page « À propos ».</p>
        <p style="margin-bottom:12px;"><b style="color:var(--text-main);">5. Localisation.</b> La géolocalisation précise n'est utilisée que si vous l'activez, afin d'afficher les prestataires les plus proches de vous.</p>
        <p style="margin-bottom:0;"><b style="color:var(--text-main);">6. Vos droits.</b> Vous pouvez à tout moment modifier votre profil, réinitialiser vos données locales depuis les réglages, ou contacter le support pour toute question relative à vos données.</p>
      </div>
    </div>
  </div>

  <!-- ================= PANIER ================= -->
  <div class="screen-view" id="view-cart">
    <div class="cart-header">
      <button class="back" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Mon panier</h1>
    </div>
    <div class="scroll" id="cart-body"></div>
    <div id="cart-total-bar-wrap"></div>
  </div>

  <!-- ================= MES COMMANDES ================= -->
  <div class="screen-view" id="view-orders-mine">
    <div class="cart-header">
      <button class="back" onclick="showView('profile')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Mes commandes</h1>
    </div>
    <div class="scroll" id="orders-mine-body"></div>
  </div>

  <!-- ================= COMMANDES REÇUES ================= -->
  <div class="screen-view" id="view-orders-received">
    <div class="cart-header">
      <button class="back" onclick="showView('profile')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Commandes reçues</h1>
    </div>
    <div class="scroll" id="orders-received-body"></div>
  </div>

  <!-- ================= MES RÉSERVATIONS ================= -->
  <div class="screen-view" id="view-reservations-mine">
    <div class="cart-header">
      <button class="back" onclick="showView('profile')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Mes réservations</h1>
    </div>
    <div class="scroll" id="reservations-mine-body"></div>
  </div>

  <!-- ================= RÉSERVATIONS REÇUES ================= -->
  <div class="screen-view" id="view-reservations-received">
    <div class="cart-header">
      <button class="back" onclick="showView('profile')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Réservations reçues</h1>
    </div>
    <div class="scroll" id="reservations-received-body"></div>
  </div>

  <!-- ================= FAVORIS ================= -->
  <div class="screen-view" id="view-favorites">
    <div class="cart-header">
      <button class="back" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Favoris</h1>
    </div>
    <div class="scroll"><div class="feed-list" id="favorites-body"></div></div>
  </div>

  <!-- ================= TOUS LES CATALOGUES ================= -->
  <div class="screen-view" id="view-allcatalogs">
    <div class="cart-header">
      <button class="back" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Tous les catalogues</h1>
    </div>
    <div class="scroll"><div id="allcatalogs-body" style="padding:12px 14px 26px;"></div></div>
  </div>

  <!-- Bouton flottant vers la fonctionnalité Taxi (app indépendante, chargée dans une
       fenêtre plein écran depuis /taxi/index.html). Déplaçable comme l'était l'ancien
       fab "Mon profil", pour que l'utilisateur puisse le sortir du passage si besoin. -->
  <button class="sante-fab" id="sante-fab" onclick="openSanteApp()" aria-label="Ouvrir Santé à Daloa">
    <span>🧑‍⚕️</span>
  </button>
  <button class="taxi-fab" id="taxi-fab" onclick="openTaxiApp()" aria-label="Ouvrir Daloa Taxi">
    <span>🚕</span>
  </button>

  <button class="floating-cart-btn" id="floating-cart-btn" onclick="showView('cart')" style="display:none;" aria-label="Voir le panier">
    <span class="fcb-icon"><i class="fa-solid fa-cart-shopping"></i><span class="fcb-count" id="floating-cart-count">0</span></span>
    <span class="fcb-info">
      <span class="fcb-label" id="floating-cart-label">0 article</span>
      <span class="fcb-total" id="floating-cart-total">0 FCFA</span>
    </span>
    <i class="fa-solid fa-chevron-right fcb-arrow"></i>
  </button>

  <div class="toast" id="toast"><i class="fa-solid fa-circle-check"></i><span id="toast-text"></span></div>

  <div class="map-view-overlay" id="map-view-overlay">
    <div class="map-view-topbar">
      <button class="icon-btn dark" onclick="closeLiveMap()" aria-label="Fermer la carte"><i class="fa-solid fa-arrow-left"></i></button>
      <div class="map-view-title">Carte en direct<small>Prestataires localisés autour de vous</small></div>
      <div style="display:flex; gap:8px;">
        <button class="icon-btn dark" onclick="locateMe()" aria-label="Me localiser"><i class="fa-solid fa-location-crosshairs"></i></button>
        <button class="icon-btn dark" id="map-style-btn" onclick="toggleMapStyle()" aria-label="Changer le style de carte"><i class="fa-solid fa-earth-africa"></i></button>
      </div>
    </div>
    <div style="position:relative; flex:1; min-height:0;">
      <div id="live-map-canvas"></div>
      <div class="map-search-wrap" id="map-search-wrap">
        <div class="map-search-bar">
          <i class="fa-solid fa-magnifying-glass"></i>
          <input id="map-search-input" placeholder="Chercher un prestataire par nom..." autocomplete="off" oninput="renderMapSearchResults()" onfocus="renderMapSearchResults()" onblur="hideMapSearchResultsDelayed()">
          <button type="button" class="map-search-clear" id="map-search-clear" onclick="clearMapSearch()" aria-label="Effacer la recherche"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="map-search-results" id="map-search-results"></div>
      </div>
      <div class="map-loading-overlay hidden" id="map-loading-overlay">
        <div class="map-loading-radar"><i class="fa-solid fa-location-dot"></i></div>
        <div class="map-loading-text" id="map-loading-text">Localisation des prestataires autour de vous…</div>
      </div>
      <div class="map-empty-hint" id="map-empty-hint">Aucun prestataire n'a encore partagé sa position précise sur la carte.</div>
      <div class="map-transport-toggle" id="map-transport-toggle">
        <button type="button" class="map-transport-btn active" id="map-transport-foot" onclick="switchTransportProfile('foot')"><i class="fa-solid fa-person-walking"></i>À pied</button>
        <button type="button" class="map-transport-btn" id="map-transport-car" onclick="switchTransportProfile('car')"><i class="fa-solid fa-motorcycle"></i>Moto / Auto</button>
        <button type="button" class="map-transport-cancel" id="map-transport-cancel" onclick="clearDistanceLine()" aria-label="Annuler le raccourci"><i class="fa-solid fa-xmark"></i></button>
      </div>
      <div class="map-proximity-banner" id="map-proximity-banner"><i class="fa-solid fa-flag-checkered"></i>Vous êtes arrivé à proximité du vendeur !</div>
      <button type="button" class="map-selfshare-btn" id="map-selfshare-btn" onclick="toggleLiveSharing()"></button>
    </div>
    <div class="map-legend-pill" id="map-legend-pill">Chargement...</div>
  </div>

  <!-- ================= SUIVRE UNE LIVRAISON : saisie du code ================= -->
  <div class="screen-view" id="view-trackentry">
    <div class="cart-header">
      <button class="back" onclick="showView('home')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Suivre une livraison</h1>
    </div>
    <div class="scroll">
      <div style="padding:22px 20px 0; text-align:center;">
        <div style="width:74px; height:74px; margin:6px auto 16px; border-radius:20px; background:var(--orange); display:flex; align-items:center; justify-content:center;">
          <i class="fa-solid fa-truck-fast" style="font-size:30px; color:#fff;"></i>
        </div>
        <h2 style="font-size:18px; margin:0 0 6px;">Entrez votre code de suivi</h2>
        <p style="font-size:13px; color:var(--muted); margin:0 0 22px; line-height:1.5;">Le code vous est envoyé par votre livreur, quelle que soit votre commande (bara Daloa, WhatsApp, téléphone, boutique...).</p>
        <input type="text" id="track-code-input" placeholder="BD-582941" maxlength="14" autocapitalize="characters"
          style="width:100%; text-align:center; letter-spacing:1.5px; font-size:19px; font-weight:800; padding:15px; border:2px solid var(--line); border-radius:14px; background:transparent; color:var(--text-main); margin-bottom:14px;"
          oninput="this.value=this.value.toUpperCase();" onkeydown="if(event.key==='Enter') submitTrackingCode();">
        <div id="track-entry-error" style="display:none; color:#E0453B; font-size:12.5px; font-weight:600; margin:-4px 0 14px;"></div>
        <button type="button" class="action-btn call" style="width:100%; justify-content:center; padding:14px;" onclick="submitTrackingCode()" id="track-submit-btn">
          <i class="fa-solid fa-magnifying-glass-location"></i>Suivre le livreur
        </button>
      </div>
      <div style="margin:26px 20px 20px; padding:16px; border:1px solid var(--line); border-radius:14px;">
        <div style="font-weight:700; font-size:13px; margin-bottom:4px;"><i class="fa-solid fa-circle-question" style="color:var(--orange); margin-right:6px;"></i>Où trouver mon code ?</div>
        <div style="font-size:12.5px; color:var(--muted); line-height:1.5;">Le code vous est communiqué par le livreur ou le vendeur au moment de l'envoi de votre commande (message, appel ou reçu).</div>
      </div>
      <button type="button" onclick="openTrackingCreate()" style="display:block; width:calc(100% - 40px); margin:0 20px 24px; padding:13px; border:1px dashed var(--line); border-radius:14px; background:transparent; color:var(--muted); font-weight:700; font-size:12.5px;">
        <i class="fa-solid fa-motorcycle" style="color:var(--orange); margin-right:6px;"></i>Vous êtes le livreur ? Créer un code de livraison
      </button>
    </div>
  </div>

  <!-- ================= CRÉER UN CODE DE LIVRAISON (côté livreur) ================= -->
  <div class="screen-view" id="view-trackcreate">
    <div class="cart-header">
      <button class="back" onclick="showView('trackentry')"><i class="fa-solid fa-arrow-left"></i></button>
      <h1>Créer un code de livraison</h1>
    </div>
    <div class="scroll" id="trackcreate-body"></div>
  </div>

  <!-- ================= SUIVRE UNE LIVRAISON : carte temps réel ================= -->
  <div class="map-view-overlay" id="track-map-overlay">
    <div class="map-view-topbar">
      <button class="icon-btn dark" onclick="minimizeTrackingMap()" aria-label="Réduire le suivi"><i class="fa-solid fa-arrow-left"></i></button>
      <div class="map-view-title">Suivi de livraison<small id="track-map-code-sub"></small></div>
      <div style="display:flex; gap:8px;">
        <button class="icon-btn dark" id="track-map-style-btn" onclick="toggleTrackMapStyle()" aria-label="Changer le style de carte"><i class="fa-solid fa-earth-africa"></i></button>
        <button class="icon-btn dark" onclick="recenterTrackingMap()" aria-label="Recentrer"><i class="fa-solid fa-location-crosshairs"></i></button>
      </div>
    </div>
    <div style="position:relative; flex:1; min-height:0;">
      <div id="track-map-canvas"></div>
      <div class="map-proximity-banner" id="track-proximity-banner"><i class="fa-solid fa-flag-checkered"></i>Votre livreur est à proximité !</div>
      <div id="track-offline-banner" style="display:none; position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#3a2a10; color:#f5c453; font-size:11.5px; font-weight:700; padding:8px 14px; border-radius:10px; z-index:600; white-space:nowrap;">
        <i class="fa-solid fa-triangle-exclamation"></i> Position du livreur indisponible momentanément
      </div>
    </div>
    <div id="track-status-card" style="background:var(--glass-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); border-radius:20px 20px 0 0; padding:16px 18px 20px; margin-top:-16px; position:relative; z-index:2;"></div>
  </div>

  <!-- ================= PARTAGE DE POSITION (livreur) : carte plein écran ================= -->
  <div class="map-view-overlay" id="trackcreate-map-overlay">
    <div class="map-view-topbar">
      <button class="icon-btn dark" onclick="minimizeDriverMap()" aria-label="Réduire"><i class="fa-solid fa-arrow-left"></i></button>
      <div class="map-view-title">Partage de position<small id="trackcreate-map-code-sub"></small></div>
      <div style="display:flex; gap:8px;">
        <button class="icon-btn dark" id="trackcreate-map-style-btn" onclick="toggleCreateMapStyle()" aria-label="Changer le style de carte"><i class="fa-solid fa-earth-africa"></i></button>
        <button class="icon-btn dark" onclick="recenterDriverMap()" aria-label="Recentrer"><i class="fa-solid fa-location-crosshairs"></i></button>
      </div>
    </div>
    <div style="position:relative; flex:1; min-height:0;">
      <div id="trackcreate-map-canvas"></div>
      <div class="map-proximity-banner" id="trackcreate-proximity-banner"><i class="fa-solid fa-flag-checkered"></i>Vous êtes à proximité du destinataire</div>
    </div>
    <div style="background:var(--glass-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); border-radius:20px 20px 0 0; padding:16px 18px 20px; margin-top:-16px; position:relative; z-index:2; text-align:center;">
      <div id="trackcreate-distance" style="font-size:13px; font-weight:700; color:var(--text-main); margin-bottom:10px;"></div>
      <button type="button" class="action-btn call" style="width:100%; justify-content:center; padding:12px; margin-bottom:8px;" onclick="markDeliveryDone()"><i class="fa-solid fa-check"></i>Marquer comme livrée</button>
      <button type="button" style="width:100%; padding:10px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--muted); font-weight:700; font-size:12px;" onclick="stopDriverSharing()">Arrêter le partage</button>
    </div>
  </div>

</div>

<script src="app.js"></script>

</body>
</html>
