<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Tarifs Poste Tunisienne — Desktop</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root {
    --primary: #003DA5;
    --primary-dark: #002A75;
    --primary-light: #0050D0;
    --accent: #FEBF17;
    --accent-dark: #B88800;
    --bg: #F7F9FC;
    --surface-card: #FFFFFF;
    --text-dark: #0A1F3D;
    --text-muted: #6B7280;
    --border: #E5EAF0;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', sans-serif; }
  body {
    background: #f5f5f7;
    min-height: 100vh;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
  }
  body.lang-ar * { font-family: 'Cairo', 'Nunito', sans-serif; }
  .phone {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bg);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    overflow: hidden;
    position: relative;
  }
  .notch { display: none; }
  .app { padding-top: 0; min-height: 700px; }
  
  /* Desktop layout: 2 columns */
  .body {
    display: grid !important;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    padding: 24px !important;
  }
  .body > .toggle { grid-column: 1 / -1; }
  .body > #colis-section { grid-column: 1; }
  .body > #paquets-section { grid-column: 1; }
  .body > #result-section { grid-column: 2; grid-row: 2 / 5; }
  .body > #footer-section { grid-column: 1 / -1; }
  
  @media (max-width: 768px) {
    .body { grid-template-columns: 1fr !important; padding: 16px !important; }
    .body > * { grid-column: 1 !important; }
  }
  
  .toggle { max-width: 380px; }
  .country-row { padding: 14px 16px !important; }
  .country-row .flag { font-size: 32px !important; }
  .country-row .name { font-size: 17px !important; }
  .chips { gap: 10px !important; }
  .chip { padding: 12px 18px !important; font-size: 15px !important; }
  .result { padding: 32px !important; }
  .result-price { font-size: 64px !important; }
  .card { padding: 18px 20px !important; }
  .trust-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);padding:6px 10px 6px 6px;border-radius:99px;font-size:11px;font-weight:700;color:white}
  .trust-badge img{height:24px;width:auto}
  .footer-trust{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:var(--bg-soft);border-top:1px solid var(--border)}
  .footer-trust img{height:36px;width:auto}
  .footer-trust span{font-size:12px;color:var(--text-light);font-weight:600}
  .appbar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
  }
  .lang-pill {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .lang-pill:hover { background: rgba(255,255,255,0.28); }
  .body { padding: 16px; }
  .toggle {
    background: #ECE9F2;
    border-radius: 14px;
    padding: 4px;
    display: flex;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  }
  .toggle-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    color: var(--text-muted);
  }
  .toggle-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 10px rgba(0,80,160,0.30);
  }
  .toggle-btn .emoji { font-size: 24px; display: block; margin-bottom: 4px; }
  .toggle-btn .label { font-size: 14px; font-weight: 700; }
  .card {
    background: var(--surface-card);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(10,31,61,0.06);
    border: 1px solid var(--border);
  }
  .card-title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
  }
  .country-row {
    display: flex; align-items: center;
    padding: 6px 0;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .country-row:hover { opacity: 0.75; }
  .country-row .flag { font-size: 28px; margin-right: 10px; margin-left: 10px; }
  .country-row.rtl .flag { margin-right: 0; margin-left: 10px; }
  .country-row .name { font-size: 16px; font-weight: 600; flex: 1; color: var(--text-dark); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-dark);
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .chip:hover:not(.active) { border-color: var(--primary); }
  .chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 3px 8px rgba(0,80,160,0.25);
  }
  .tranche-info {
    margin-top: 12px;
    padding: 10px 14px;
    background: #F4F1E9;
    border-radius: 10px;
    font-size: 12px;
    color: #4F4500;
    display: flex; align-items: center; gap: 8px;
    border-left: 3px solid var(--accent);
  }
  .result {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(0,80,160,0.25);
    position: relative;
    overflow: hidden;
  }
  .result::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: rgba(254,191,23,0.10);
    border-radius: 50%;
  }
  .result.no-price {
    background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  }
  .result-label {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  .result-price {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
  }
  .result-price-unit { font-size: 18px; font-weight: 700; margin-left: 6px; }
  .result-main { display: flex; align-items: center; gap: 12px; }
  .result-divider { width: 1px; height: 50px; background: rgba(255,255,255,.25); }
  .result-carrier { flex: 1; }
  .result-carrier-label { font-size: 9px; opacity: 0.7; letter-spacing: 0.8px; font-weight: 700; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
  .result-carrier-name { font-size: 15px; font-weight: 800; line-height: 1.15; }
  .result-sub {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 12px;
    display: flex; align-items: center; gap: 8px;
    position: relative;
  }
  .footer {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: flex;
    gap: 8px;
  }
  .modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
  }
  .modal-overlay.active { display: block; }
  .modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 480px;
    background: white;
    border-radius: 20px;
    max-height: 85vh;
    display: none;
    flex-direction: column;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  @media (max-width: 600px) {
    .modal {
      top: auto; bottom: 0;
      transform: translateX(-50%);
      max-width: 100%;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    }
  }
  .modal.active { display: flex; }
  .modal-handle {
    width: 40px; height: 4px;
    background: #d9d9d9;
    border-radius: 2px;
    margin: 8px auto;
  }
  .modal-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .modal-title { font-size: 18px; font-weight: 800; color: var(--text-dark); }
  .modal-search-wrap { position: relative; padding: 0 16px 8px; }
  .modal-search-wrap input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    background: #F1F4F9;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
  }
  .modal-search-wrap input:focus { border-color: var(--primary); }
  .modal-search-icon {
    position: absolute;
    left: 28px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .modal-list { flex: 1; overflow-y: auto; max-height: 60vh; }
  .modal-item {
    display: flex; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .modal-item:hover { background: #F7F9FC; }
  .modal-item .flag { font-size: 26px; margin-right: 12px; margin-left: 12px; }
  .modal-item .name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text-dark); }
  .modal-item .region { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  .modal-item .badge { margin-left: 8px; font-size: 12px; color: var(--primary); font-weight: 700; }
  .modal-item .badge.nd { color: #ccc; }
  .modal-item .code { font-size: 10px; color: var(--text-muted); margin-left: 4px; font-weight: 700; }
  .lang-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .lang-option:hover { background: #F7F9FC; }
  .lang-option:last-child { border-bottom: none; }
  .loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-muted); }
  .theme-banner {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .theme-banner .dot { color: var(--accent); }
  .note-banner {
    max-width: 420px;
    margin: 16px auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
  }
  .note-banner .ar { font-family: 'Cairo'; direction: rtl; }
</style>
</head>
<body>

<div class="phone">
  <div class="notch"></div>
  <div class="app">
    
    <div class="appbar">
      <img src="logos/poste-logo-small.png" alt="La Poste Tunisienne" style="height:36px;width:auto;margin-right:8px;">
      <span style="flex:1;" id="appbar-title">Tarifs La Poste TN</span>
      <div class="trust-badge">
        <span>Officiel</span>
      </div>
      <div class="lang-pill" id="lang-pill" onclick="openLangPicker(event)">
        <span style="font-size:14px;">🌐</span>
        <span id="lang-label" style="font-weight:800;">FR</span>
        <span style="font-size:10px;opacity:0.7;">▾</span>
      </div>
    </div>
    <div class="body" id="app-body">
      <div class="loading">Chargement…</div>
    </div>
  </div>
</div>

<!-- note-banner removed for desktop -->

<div class="modal-overlay" id="modal-overlay" onclick="closeAnyModal()"></div>

<!-- Modale : sélection pays -->
<div class="modal" id="modal-country">
  <div class="modal-handle"></div>
  <div class="modal-header">
    <div class="modal-title" id="modal-country-title">Choisir un pays</div>
    <div style="color:var(--text-muted);font-size:12px;font-weight:600;"><span id="count">0</span> pays</div>
  </div>
  <div class="modal-search-wrap">
    <span class="modal-search-icon">🔍</span>
    <input id="search" type="text" placeholder="Rechercher…" oninput="renderModalList()">
  </div>
  <div class="modal-list" id="modal-list"></div>
</div>

<!-- Modale : sélection langue -->
<div class="modal" id="modal-lang">
  <div class="modal-handle"></div>
  <div class="modal-header">
    <div class="modal-title" id="modal-lang-title">🌐 Langue</div>
  </div>
  <div id="lang-options"></div>
</div>

<script>
const I18N = {
  fr: {
    appbar: 'Tarifs La Poste TN',
    service_label: (s) => s === 'colis' ? 'Colis' : 'Paquet',
    pick_country: 'Choisir un pays',
    search: 'Rechercher…',
    country_label: 'Pays de destination',
    weight_label: 'Poids',
    tranche_label: 'Tranche appliquée',
    tarif: 'Tarif',
    select_country: 'Sélectionner un pays',
    no_colis: (n) => `${n} : tarif Colis non disponible (pays hors Europe).`,
    no_paquet: (n) => `${n} : tarif Paquet non disponible.`,
    with_weight: (n, w) => `${n} · ${w}`,
    no_price: 'Sélectionnez un pays',
    carrier_label: 'TRANSPORTEUR',
    footer_colis: 'Source : Circulaire officielle 2021 — Tarifs Colis Postaux pour les pays européens.',
    footer_colis_2: 'Pour les pays non-européens (Colis), contactez votre bureau de poste.',
    footer_paquet: 'Source : Circulaire officielle 2019 — Tarifs Paquets Internationaux Marchandises.',
    footer_paquet_2: 'Pour les poids > 1.5 kg (Paquets), contactez votre bureau de poste.',
  },
  en: {
    appbar: 'Tunisian Post — Rates',
    service_label: (s) => s === 'colis' ? 'Parcel' : 'Parcel (Goods)',
    pick_country: 'Choose a country',
    search: 'Search…',
    country_label: 'Destination country',
    weight_label: 'Weight',
    tranche_label: 'Applied tranche',
    tarif: 'Rate',
    select_country: 'Select a country',
    no_colis: (n) => `${n} : parcel rate unavailable (non-European country).`,
    no_paquet: (n) => `${n} : parcel rate unavailable.`,
    with_weight: (n, w) => `${n} · ${w}`,
    no_price: 'Select a country first',
    carrier_label: 'CARRIER',
    footer_colis: 'Source: 2021 official circular — Parcel rates for European countries.',
    footer_colis_2: 'For non-European countries (parcel), contact your post office.',
    footer_paquet: 'Source: 2019 official circular — International goods parcel rates.',
    footer_paquet_2: 'For weights > 1.5 kg (parcel), contact your post office.',
  },
  ar: {
    appbar: 'التعريفات البريدية - البريد التونسي',
    service_label: (s) => s === 'colis' ? 'طرود' : 'رزم',
    pick_country: 'اختر الوجهة',
    search: 'بحث…',
    country_label: 'بلد الوجهة',
    weight_label: 'الوزن',
    tranche_label: 'الشريحة المطبقة',
    tarif: 'التسعيرة',
    select_country: 'اختر بلداً',
    no_colis: (n) => `${n} : لا تتوفر تعريفة الطرود (بلد غير أوروبي).`,
    no_paquet: (n) => `${n} : لا تتوفر تعريفة الرزم.`,
    with_weight: (n, w) => `${n} · ${w}`,
    no_price: 'اختر بلداً أولاً',
    carrier_label: 'الناقل',
    footer_colis: 'المصدر: المنشور الرسمي 2021 - تعريفات الطرود للبلدان الأوروبية.',
    footer_colis_2: 'للبلدان غير الأوروبية (طرود)، اتصل بمكتب البريد.',
    footer_paquet: 'المصدر: المنشور الرسمي 2019 - تعريفات الرزم الدولية (بضائع).',
    footer_paquet_2: 'للأوزان > 1.5 كغ (رزم)، اتصل بمكتب البريد.',
  },
};

const state = {
  service: 'colis',
  lang: 'fr',
  countryCode: 'FR',
  countryFlag: '🇫🇷',
  weight: 250,
};

let COUNTRIES = [];
let TARIFS_PAQUETS = {};
let TARIFS_COLIS = {};
let CARRIERS = {};
const COUNTRY_BY_CODE = {};

function T(key, ...args) {
  const entry = I18N[state.lang] || I18N.fr;
  const val = entry[key];
  return typeof val === 'function' ? val(...args) : val;
}

function nameOf(c) {
  return c['name_' + state.lang] || c.name_fr || c.name_fr;
}

function flagEmoji(iso2) {
  if (!iso2 || iso2.length !== 2) return '🌍';
  const a = iso2.charCodeAt(0);
  const b = iso2.charCodeAt(1);
  if (a < 65 || a > 90 || b < 65 || b > 90) return '🌍';
  return String.fromCodePoint(0x1F1E6 + (a - 65)) +
         String.fromCodePoint(0x1F1E6 + (b - 65));
}

async function loadData() {
  try {
    const r = await fetch('./data.json');
    const data = await r.json();
    COUNTRIES = data.countries;
    TARIFS_PAQUETS = data.tarifs_paquets;
    TARIFS_COLIS = data.tarifs_colis;
    CARRIERS = data.carriers || {};
    COUNTRIES.forEach(x => { COUNTRY_BY_CODE[x.code] = x; });
    applyLangToBody();
    renderLangPill();
    render();
  } catch(e) {
    document.getElementById('app-body').innerHTML =
      `<div style="padding:20px;color:#c00;">Erreur de chargement des données: ${e.message}</div>`;
  }
}

function applyLangToBody() {
  document.body.classList.toggle('lang-ar', state.lang === 'ar');
  document.documentElement.lang = state.lang;
  document.documentElement.dir = state.lang === 'ar' ? 'rtl' : 'ltr';
  document.getElementById('appbar-title').textContent = T('appbar');
}

function getPriceColis(code, kg) {
  const e = TARIFS_COLIS[code];
  if (!e) return null;
  if (kg < 3) return e.prix_3kg;
  if (kg > 10) return e.prix[7] + (kg - 10) * e.par_kg;
  return e.prix[kg - 3];
}

function getPricePaquet(code, grams) {
  const arr = TARIFS_PAQUETS[code];
  if (!arr) return null;
  const tranches = [250, 500, 1000, 1500];
  for (let i = 0; i < tranches.length; i++) {
    if (grams <= tranches[i]) return arr[i];
  }
  return null;
}

function getPrice() {
  if (state.service === 'colis') return getPriceColis(state.countryCode, state.weight);
  return getPricePaquet(state.countryCode, state.weight);
}

function trancheLabel() {
  if (state.service === 'colis') {
    return state.weight - 1 + '–' + state.weight + ' kg';
  }
  const t = [250, 500, 1000, 1500];
  const lbl = ['0–250 g', '250–500 g', '500–1000 g', '1000–1500 g'];
  for (let i = 0; i < t.length; i++) {
    if (state.weight <= t[i]) return lbl[i];
  }
  return '> 1500 g';
}

function weightLabel() {
  if (state.service === 'colis') return state.weight + ' kg';
  if (state.weight >= 1000) return (state.weight / 1000) + ' kg';
  return state.weight + ' g';
}

function chips() {
  if (state.service === 'colis') return [3, 4, 5, 6, 7, 8, 9, 10];
  return [250, 500, 1000, 1500];
}

function chipLabel(g) {
  if (state.service === 'colis') return g + ' kg';
  if (g >= 1000) return (g / 1000) + ' kg';
  return g + ' g';
}

function setService(s) { state.service = s; state.weight = (s === 'colis') ? 3 : 250; render(); }
function setWeight(g) { state.weight = g; render(); }
function setLang(lang) {
  state.lang = lang;
  closeAnyModal();
  renderLangPill();
  render();
}

function renderLangPill() {
  const labels = { fr: 'FR', en: 'EN', ar: 'ع' };
  document.getElementById('lang-label').textContent = labels[state.lang] || 'FR';
}

function openModal() {
  document.getElementById('modal-lang').classList.remove('active');
  document.getElementById('modal-country').classList.add('active');
  document.getElementById('modal-overlay').classList.add('active');
  document.getElementById('count').textContent = COUNTRIES.length;
  document.getElementById('modal-country-title').textContent = T('pick_country');
  document.getElementById('search').placeholder = T('search');
  renderModalList();
}

function openLangPicker(e) {
  e && e.stopPropagation();
  document.getElementById('modal-country').classList.remove('active');
  const opts = [
    { code: 'fr', label: 'Français', sub: 'France' },
    { code: 'en', label: 'English', sub: 'International' },
    { code: 'ar', label: 'العربية', sub: 'تونس', rtl: true },
  ];
  const html = opts.map(o => `
    <div class="lang-option" onclick="setLang('${o.code}')" dir="${o.rtl ? 'rtl' : 'ltr'}">
      <span style="font-size:18px;font-weight:800;color:${state.lang === o.code ? 'var(--primary)' : 'var(--text-muted)'};">${o.code.toUpperCase()}</span>
      <div style="flex:1;">
        <div style="font-size:16px;font-weight:700;color:var(--text-dark);${o.rtl ? 'font-family:Cairo;' : ''}">${o.label}</div>
        <div style="font-size:12px;color:var(--text-muted);">${o.sub}</div>
      </div>
      ${state.lang === o.code ? '<span style="color:var(--primary);font-size:20px;">✓</span>' : ''}
    </div>
  `).join('');
  document.getElementById('lang-options').innerHTML = html;
  const titles = { fr: 'Langue', en: 'Language', ar: 'اللغة' };
  document.getElementById('modal-lang-title').textContent = '🌐 ' + titles[state.lang];
  document.getElementById('modal-lang').classList.add('active');
  document.getElementById('modal-overlay').classList.add('active');
}

function closeAnyModal() {
  document.getElementById('modal-country').classList.remove('active');
  document.getElementById('modal-lang').classList.remove('active');
  document.getElementById('modal-overlay').classList.remove('active');
}

function selectCountry(c) {
  state.countryCode = c.code;
  state.countryFlag = flagEmoji(c.code);
  closeAnyModal();
  render();
}

function renderModalList() {
  const q = document.getElementById('search').value.toLowerCase().trim();
  const list = COUNTRIES.filter(c => {
    if (!q) return true;
    return nameOf(c).toLowerCase().includes(q) ||
           c.name_fr.toLowerCase().includes(q) ||
           (c.name_en || '').toLowerCase().includes(q) ||
           (c.name_ar || '').includes(q) ||
           c.code.toLowerCase().includes(q);
  });
  const html = list.map(c => {
    const has = state.service === 'colis' ? !!TARIFS_COLIS[c.code] : !!TARIFS_PAQUETS[c.code];
    const name = nameOf(c);
    let nameDisplay = escapeHtml(name);
    if (q) {
      const idx = nameDisplay.toLowerCase().indexOf(q);
      if (idx >= 0) {
        nameDisplay = nameDisplay.substring(0, idx)
          + '<mark style="background:#FEBF17;color:#003DA5;padding:0 2px;border-radius:2px;">'
          + nameDisplay.substring(idx, idx + q.length)
          + '</mark>'
          + nameDisplay.substring(idx + q.length);
      }
    }
    return `
      <div class="modal-item" onclick='selectCountry(${JSON.stringify(c).replace(/'/g, "\\'")})' dir="${state.lang === 'ar' ? 'rtl' : 'ltr'}">
        <span class="flag">${flagEmoji(c.code)}</span>
        <div style="flex:1;">
          <div class="name" style="${state.lang === 'ar' ? 'font-family:Cairo;' : ''}">${nameDisplay}</div>
          <div class="region">${(c.region || '').replace(/_/g, ' ')}</div>
        </div>
        <span class="code">${c.code}</span>
        ${has ? '<span class="badge">✓</span>' : '<span class="badge nd">ND</span>'}
      </div>
    `;
  }).join('');
  const listEl = document.getElementById('modal-list');
  listEl.innerHTML = html;
  listEl.scrollTop = 0;
  const countEl = document.getElementById('count');
  if (countEl) {
    if (q) {
      countEl.parentElement.innerHTML = `<span id="count">${list.length}</span> / ${COUNTRIES.length} pays`;
    } else {
      countEl.parentElement.innerHTML = `<span id="count">${COUNTRIES.length}</span> pays`;
    }
  }
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

function render() {
  if (typeof document === 'undefined') return;
  applyLangToBody();

  const price = getPrice();
  const has = price !== null && price > 0;
  const serviceLabel = T('service_label', state.service);
  const serviceEmoji = state.service === 'colis' ? '📦' : '🚚';
  const country = COUNTRY_BY_CODE[state.countryCode];
  const countryName = country ? nameOf(country) : '—';
  const isRtl = state.lang === 'ar';

  const chipsHtml = chips().map(g => `
    <div class="chip ${g === state.weight ? 'active' : ''}" onclick="setWeight(${g})">${chipLabel(g)}</div>
  `).join('');

  let subtitle;
  if (!has) {
    subtitle = state.service === 'colis'
      ? `${state.countryFlag} ${T('no_colis', countryName)}`
      : `${state.countryFlag} ${T('no_paquet', countryName)}`;
  } else {
    subtitle = `${state.countryFlag} ${T('with_weight', countryName, weightLabel())}`;
  }

  const footer = state.service === 'colis' ? T('footer_colis') : T('footer_paquet');
  const footer2 = state.service === 'colis' ? T('footer_colis_2') : T('footer_paquet_2');

  const html = `
    <div class="toggle">
      <div class="toggle-btn ${state.service === 'colis' ? 'active' : ''}" onclick="setService('colis')">
        <span class="emoji">📦</span>
        <span class="label">${T('service_label', 'colis')}</span>
      </div>
      <div class="toggle-btn ${state.service === 'paquet' ? 'active' : ''}" onclick="setService('paquet')">
        <span class="emoji">🚚</span>
        <span class="label">${T('service_label', 'paquet')}</span>
      </div>
    </div>

    <div class="card">
      <div class="card-title"><span>🚩</span> ${T('country_label')}</div>
      <div class="country-row ${isRtl ? 'rtl' : ''}" onclick="openModal()" dir="${isRtl ? 'rtl' : 'ltr'}">
        <span class="flag">${state.countryFlag}</span>
        <span class="name" style="${isRtl ? 'font-family:Cairo;' : ''}">${country ? countryName : T('select_country')}</span>
        <span style="color:var(--text-muted);">▾</span>
      </div>
    </div>

    <div class="card">
      <div class="card-title"><span>⚖️</span> ${T('weight_label')}</div>
      <div class="chips">${chipsHtml}</div>
      <div class="tranche-info" dir="${isRtl ? 'rtl' : 'ltr'}">
        <span>ℹ️</span>
        <span><b>${T('tranche_label')}:</b> ${trancheLabel()}</span>
      </div>
    </div>

    <div class="result ${has ? '' : 'no-price'}">
      <div class="result-label">${T('tarif')} ${serviceLabel}</div>
      <div class="result-main">
          <div>
            <span class="result-price">${has ? price : '—'}</span>
            <span class="result-price-unit">DT</span>
          </div>
          <div class="result-divider"></div>
          <div class="result-carrier">
            <div class="result-carrier-label">🚚 ${T('carrier_label')}</div>
            <div class="result-carrier-name">${(() => { const c = CARRIERS[state.countryCode]; if (!c) return '—'; return state.service === 'colis' ? (c.name_colis || c.name) : c.name; })()}</div>
          </div>
        </div>
      <div class="result-sub" dir="${isRtl ? 'rtl' : 'ltr'}">
        <span>${serviceEmoji}</span>
        <span>${subtitle}</span>
      </div>
    </div>

    <div class="footer" dir="${isRtl ? 'rtl' : 'ltr'}">
      <span class="footer-icon">💡</span>
      <span>${footer}<br>${footer2}</span>
    </div>
  `;
  document.getElementById('app-body').innerHTML = html;
}

loadData();
</script>

<div style="max-width:1100px;margin:16px auto 0;text-align:center;color:var(--text-muted);font-size:13px;">
  💻 Version Desktop — Basculez entre les modes avec les onglets, choisissez le pays et le poids. Appuyez sur <b>🌐 FR</b> en haut pour changer de langue (AR/FR/EN).
</div></body>
</html>
