(function () {
  'use strict';

/* =========================
   AUTH LOCAL (INVITÉ / PREMIUM) — SANS SERVEUR
   - Invité: accès limité (ex: pas de personnalisation du bouton crise)
   - Premium: accès complet (déverrouillage via mot de passe local)
   - Sécurité: PBKDF2 + AES-GCM, stockage IndexedDB
========================= */

const AUTH_DB_NAME = 'EPI_AUTH_DB';
const AUTH_DB_STORE = 'auth';
const AUTH_DB_VERSION = 1;

const AUTH_CFG = {
  pbkdf2Iterations: 210000,
  saltBytes: 16,
  aesKeyBits: 256,
  sessionIdleMinutes: 10,
};

let AUTH_STATE = {
  role: 'guest',      // 'guest' | 'premium'
  unlockedAt: 0,
  passKey: null,      // en mémoire
  masterKey: null     // en mémoire
};

// --- Style injecté (pour .locked + séparateur “— — —”) ---
(function injectAuthGuestStyles() {
  try {
    if (document.getElementById('authGuestStyles')) return;
    const css = `
      .locked { opacity:.55; filter: grayscale(.2); }
      .menu-sep-guest { margin:10px 0; padding:6px 10px; border-radius:10px; opacity:.55;
        font-size:12px; letter-spacing:.2em; }
      .locked-hint { font-size:12px; opacity:.85; margin-top:6px; }
    `;
    const style = document.createElement('style');
    style.id = 'authGuestStyles';
    style.textContent = css;
    document.head.appendChild(style);
  } catch(e) {}
})();

// ---------- IndexedDB helpers ----------
function authOpenDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(AUTH_DB_NAME, AUTH_DB_VERSION);
    req.onupgradeneeded = () => {
      const db = req.result;
      if (!db.objectStoreNames.contains(AUTH_DB_STORE)) {
        db.createObjectStore(AUTH_DB_STORE, { keyPath: 'id' });
      }
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}
async function authDBGet(id) {
  const db = await authOpenDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(AUTH_DB_STORE, 'readonly');
    const st = tx.objectStore(AUTH_DB_STORE);
    const req = st.get(id);
    req.onsuccess = () => resolve(req.result || null);
    req.onerror = () => reject(req.error);
  });
}
async function authDBPut(obj) {
  const db = await authOpenDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(AUTH_DB_STORE, 'readwrite');
    const st = tx.objectStore(AUTH_DB_STORE);
    const req = st.put(obj);
    req.onsuccess = () => resolve(true);
    req.onerror = () => reject(req.error);
  });
}

// ---------- WebCrypto helpers ----------
function bufToB64(buf) {
  const bytes = new Uint8Array(buf);
  let binary = '';
  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
  return btoa(binary);
}
function b64ToBuf(b64) {
  const binary = atob(b64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return bytes.buffer;
}
function strToBuf(s) { return new TextEncoder().encode(String(s)).buffer; }
function bufToStr(buf) { return new TextDecoder().decode(new Uint8Array(buf)); }
function randomBytes(n) { const a = new Uint8Array(n); crypto.getRandomValues(a); return a.buffer; }

async function pbkdf2KeyFromPassword(password, saltBuf, iterations) {
  const baseKey = await crypto.subtle.importKey('raw', strToBuf(password), 'PBKDF2', false, ['deriveKey']);
  return crypto.subtle.deriveKey(
    { name: 'PBKDF2', salt: new Uint8Array(saltBuf), iterations, hash: 'SHA-256' },
    baseKey,
    { name: 'AES-GCM', length: AUTH_CFG.aesKeyBits },
    false,
    ['encrypt', 'decrypt']
  );
}
async function aesGcmEncrypt(key, plaintextBuf) {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, plaintextBuf);
  return { ivB64: bufToB64(iv.buffer), ctB64: bufToB64(ct) };
}
async function aesGcmDecrypt(key, ivB64, ctB64) {
  const iv = new Uint8Array(b64ToBuf(ivB64));
  const ct = b64ToBuf(ctB64);
  return crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct);
}

// ---------- Auth core + SAFE (token 2 appareils optionnel, ne bloque jamais) ----------

// (1) Option 2 appareils (token) : activable sans bloquer l’app
const PREMIUM_TOKEN_ID = 'premium_token_v1';
const DEVICE_ID_KEY = 'epi_device_id_v1';
const MAX_DEVICES = 2;

// Base64 safe helpers (pas de escape/unescape => moins d’erreurs)
function _toB64FromBuf(buf) {
  const bytes = new Uint8Array(buf);
  let s = '';
  for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
  return btoa(s);
}
function _toBufFromB64(b64) {
  const bin = atob(b64);
  const bytes = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  return bytes.buffer;
}
function _b64JsonEncode(obj) {
  const json = JSON.stringify(obj);
  const buf = new TextEncoder().encode(json).buffer;
  return _toB64FromBuf(buf);
}
function _b64JsonDecode(b64) {
  const buf = _toBufFromB64(b64);
  const json = new TextDecoder().decode(new Uint8Array(buf));
  return JSON.parse(json);
}

// Device ID local (stable)
async function getOrCreateDeviceId() {
  try {
    const existing = localStorage.getItem(DEVICE_ID_KEY);
    if (existing) return existing;
  } catch (e) {}

  const id = (crypto.randomUUID ? crypto.randomUUID() : ('dev-' + Math.random().toString(16).slice(2) + Date.now()));
  try { localStorage.setItem(DEVICE_ID_KEY, id); } catch (e) {}
  return id;
}

// --- Token crypto ---
// ⚠️ Tout est dans try/catch au moment de l’usage : aucun impact sur le démarrage
async function _deriveTokenKey(password, saltBuf, iterations) {
  const baseKey = await crypto.subtle.importKey(
    'raw',
    new TextEncoder().encode(String(password)),
    'PBKDF2',
    false,
    ['deriveKey']
  );
  return crypto.subtle.deriveKey(
    { name: 'PBKDF2', salt: new Uint8Array(saltBuf), iterations, hash: 'SHA-256' },
    baseKey,
    { name: 'AES-GCM', length: 256 },
    false,
    ['encrypt', 'decrypt']
  );
}

async function _encTokenWithPwd(password, payloadObj) {
  const salt = crypto.getRandomValues(new Uint8Array(16));
  const iterations = (AUTH_CFG && AUTH_CFG.pbkdf2Iterations) ? AUTH_CFG.pbkdf2Iterations : 210000;
  const key = await _deriveTokenKey(password, salt.buffer, iterations);

  const iv = crypto.getRandomValues(new Uint8Array(12));
  const pt = new TextEncoder().encode(JSON.stringify(payloadObj)).buffer;
  const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, pt);

  // token = base64(JSON)
  return _b64JsonEncode({
    v: 1,
    saltB64: _toB64FromBuf(salt.buffer),
    iter: iterations,
    ivB64: _toB64FromBuf(iv.buffer),
    ctB64: _toB64FromBuf(ct)
  });
}

async function _decTokenWithPwd(password, tokenStr) {
  const tokenObj = _b64JsonDecode(tokenStr);
  if (!tokenObj || tokenObj.v !== 1) throw new Error('Token invalide.');

  const saltBuf = _toBufFromB64(tokenObj.saltB64);
  const iv = new Uint8Array(_toBufFromB64(tokenObj.ivB64));
  const ct = _toBufFromB64(tokenObj.ctB64);
  const iterations = tokenObj.iter || 210000;

  const key = await _deriveTokenKey(password, saltBuf, iterations);
  const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct);
  return JSON.parse(new TextDecoder().decode(new Uint8Array(pt)));
}

// Créer/maj token sur appareil (ne bloque jamais si erreur)
async function createOrUpdatePremiumToken(password, deviceName = '') {
  const myId = await getOrCreateDeviceId();
  const name = (deviceName || navigator.userAgent || 'Appareil').slice(0, 60);

  let payload = null;
  try {
    const saved = localStorage.getItem(PREMIUM_TOKEN_ID);
    if (saved) payload = await _decTokenWithPwd(password, saved);
  } catch (e) {
    payload = null; // token cassé => on repart propre
  }

  if (!payload) payload = { v: 1, createdAt: Date.now(), devices: [] };
  if (!Array.isArray(payload.devices)) payload.devices = [];

  if (!payload.devices.some(d => d.id === myId)) {
    if (payload.devices.length >= MAX_DEVICES) {
      throw new Error(`Limite ${MAX_DEVICES} appareils atteinte. Révoque un appareil pour en ajouter un autre.`);
    }
    payload.devices.push({ id: myId, name, addedAt: Date.now() });
  }

  const tokenStr = await _encTokenWithPwd(password, payload);
  try { localStorage.setItem(PREMIUM_TOKEN_ID, tokenStr); } catch (e) {}
  return { tokenStr, payload };
}

// Import token sur 2e appareil
async function importPremiumToken(password, tokenStr, deviceName = '') {
  const myId = await getOrCreateDeviceId();
  const name = (deviceName || navigator.userAgent || 'Appareil').slice(0, 60);

  const payload = await _decTokenWithPwd(password, tokenStr);
  if (!Array.isArray(payload.devices)) payload.devices = [];

  if (!payload.devices.some(d => d.id === myId)) {
    if (payload.devices.length >= MAX_DEVICES) {
      const list = payload.devices.map(d => `• ${d.name || d.id}`).join('\n');
      throw new Error(`Limite ${MAX_DEVICES} appareils atteinte.\nAppareils actuels:\n${list}`);
    }
    payload.devices.push({ id: myId, name, addedAt: Date.now() });
  }

  const updatedTokenStr = await _encTokenWithPwd(password, payload);
  try { localStorage.setItem(PREMIUM_TOKEN_ID, updatedTokenStr); } catch (e) {}
  return { updatedTokenStr, payload };
}

// Vérifie autorisation device via token (si token existe)
// 🔒 SAFE: si token illisible => on n’empêche pas la connexion (on évite de bloquer l’app)
async function tokenAllowsThisDevice(password) {
  let saved = null;
  try { saved = localStorage.getItem(PREMIUM_TOKEN_ID); } catch (e) { saved = null; }
  if (!saved) return true;

  try {
    const payload = await _decTokenWithPwd(password, saved);
    const myId = await getOrCreateDeviceId();
    return Array.isArray(payload.devices) && payload.devices.some(d => d.id === myId);
  } catch (e) {
    return true; // token cassé => ne bloque pas l’app
  }
}

// ---------- Auth core ----------
async function authHasPremiumSetup() {
  const rec = await authDBGet('premium_v1');
  return !!rec;
}

async function authSetupPremium(password) {
  if (!password || String(password).length < 6) throw new Error('Mot de passe trop court (min 6).');

  // (optionnel) créer/maj token — NE BLOQUE PAS la création si erreur
  try { await createOrUpdatePremiumToken(password, 'Appareil 1'); } catch (e) {}

  const saltBuf = randomBytes(AUTH_CFG.saltBytes);
  const iterations = AUTH_CFG.pbkdf2Iterations;
  const passKey = await pbkdf2KeyFromPassword(password, saltBuf, iterations);

  const masterKey = await crypto.subtle.generateKey(
    { name: 'AES-GCM', length: AUTH_CFG.aesKeyBits },
    true,
    ['encrypt','decrypt']
  );
  const verifier = await aesGcmEncrypt(passKey, strToBuf('OK'));

  const rawMaster = await crypto.subtle.exportKey('raw', masterKey);
  const encMasterKey = await aesGcmEncrypt(passKey, rawMaster);

  await authDBPut({
    id: 'premium_v1',
    version: 1,
    saltB64: bufToB64(saltBuf),
    iterations,
    verifier,
    encMasterKey
  });

  AUTH_STATE.role = 'premium';
  AUTH_STATE.passKey = passKey;
  AUTH_STATE.masterKey = masterKey;
  AUTH_STATE.unlockedAt = Date.now();
  authUpdateHeaderUI();
}

async function authLoginPremium(password) {
  // (optionnel) token 2 appareils : si token existe et interdit => bloquer
  const allowed = await tokenAllowsThisDevice(password);
  if (!allowed) throw new Error(`Cet appareil n’est pas autorisé (max ${MAX_DEVICES}).`);

  const rec = await authDBGet('premium_v1');
  if (!rec) throw new Error('Aucun premium configuré sur cet appareil.');

  const saltBuf = b64ToBuf(rec.saltB64);
  const passKey = await pbkdf2KeyFromPassword(password, saltBuf, rec.iterations || AUTH_CFG.pbkdf2Iterations);

  try {
    const pt = await aesGcmDecrypt(passKey, rec.verifier.ivB64, rec.verifier.ctB64);
    if (bufToStr(pt) !== 'OK') throw new Error('Verifier mismatch');
  } catch {
    throw new Error('Mot de passe incorrect.');
  }

  const rawMaster = await aesGcmDecrypt(passKey, rec.encMasterKey.ivB64, rec.encMasterKey.ctB64);
  const masterKey = await crypto.subtle.importKey('raw', rawMaster, { name: 'AES-GCM' }, true, ['encrypt','decrypt']);

  AUTH_STATE.role = 'premium';
  AUTH_STATE.passKey = passKey;
  AUTH_STATE.masterKey = masterKey;
  AUTH_STATE.unlockedAt = Date.now();
  authUpdateHeaderUI();
}

function authLogout() {
  AUTH_STATE.role = 'guest';
  AUTH_STATE.passKey = null;
  AUTH_STATE.masterKey = null;
  AUTH_STATE.unlockedAt = 0;
  authUpdateHeaderUI();
}

function isPremium() {
  return AUTH_STATE.role === 'premium' && !!AUTH_STATE.masterKey;
}

// ---------- Invité: verrouiller “Personnaliser le bouton” + séparateur “— — —” ----------
function authApplyAccessRules() {
  // ✅ ton menu réel = <nav class="sidebar-nav"> (pas "sidebarMenu")
  const menu =
    document.querySelector('.sidebar-nav') ||
    document.getElementById('sidebarMenu') ||
    document.querySelector('#sidebar nav') ||
    document.querySelector('.sidebar nav') ||
    document.querySelector('#sidebar') ||
    document.querySelector('nav');

  if (menu) {
    let sep = menu.querySelector('.menu-sep-guest');
    if (!sep) {
      sep = document.createElement('div');
      sep.className = 'menu-sep-guest';
      sep.textContent = '— — —';
      menu.appendChild(sep);
    }
    sep.style.display = isPremium() ? 'none' : 'block';
  }

  const btn = document.getElementById('crisisSettingsBtn'); // existe dans ton HTML :contentReference[oaicite:1]{index=1}
  if (btn) {
    const locked = !isPremium();
    btn.classList.toggle('locked', locked);
    btn.setAttribute('aria-disabled', locked ? 'true' : 'false');

    const parent = btn.parentElement;
    if (parent) {
      let hint = parent.querySelector('.locked-hint');
      if (!hint) {
        hint = document.createElement('div');
        hint.className = 'locked-hint';
        hint.style.display = 'none';
        hint.textContent = "🔒 Option restreinte en mode invité. Connectez-vous en Premium pour modifier.";
        parent.appendChild(hint);
      }
      hint.style.display = locked ? 'block' : 'none';
    }

    if (!btn.__guestLockBound) {
      btn.addEventListener('click', (e) => {
        if (isPremium()) return;
        e.preventDefault();
        e.stopPropagation();
        try { showToast?.("🔒 Option restreinte en mode invité (Premium requis)."); }
        catch { alert("Option restreinte en mode invité (Premium requis)."); }
      }, true);
      btn.__guestLockBound = true;
    }
  }
}

// ---------- UI: header + modal ----------
function authUpdateHeaderUI() {
  const statusEl = document.getElementById('authStatus');
  const btnLogin = document.getElementById('btnLogin');
  const btnLogout = document.getElementById('btnLogout');

  if (statusEl) statusEl.textContent = isPremium() ? 'Premium' : 'Invité';
  if (btnLogin) btnLogin.style.display = isPremium() ? 'none' : 'inline-flex';
  if (btnLogout) btnLogout.style.display = isPremium() ? 'inline-flex' : 'none';

  // applique les restrictions UI (INVITÉ)
  try { authApplyAccessRules(); } catch(e) {}
}

function function authShowLoginModal() {
  const overlay = document.getElementById('modalOverlay');
  const titleEl = document.getElementById('modalTitle');
  const bodyEl = document.getElementById('modalBody');
  const footerEl = document.getElementById('modalFooter');
  const closeBtn = document.getElementById('modalClose');

  if (!overlay || !titleEl || !bodyEl || !footerEl) {
    alert("Modale introuvable (modalOverlay/modalTitle/modalBody/modalFooter).");
    return;
  }

  const close = () => overlay.classList.remove('active');

  overlay.classList.add('active');
  if (closeBtn && !closeBtn.__authBound) {
    closeBtn.addEventListener('click', close);
    closeBtn.__authBound = true;
  }
  if (!overlay.__authOverlayBound) {
    overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
    overlay.__authOverlayBound = true;
  }

  titleEl.textContent = '🔐 Accès Premium';

  bodyEl.innerHTML = `
    <div style="display:flex; flex-direction:column; gap:12px;">
      <div style="font-size:13px; opacity:.9;">
        <b>Invité</b> = accès limité. <b>Premium</b> = accès complet.
      </div>

      <label style="display:flex; flex-direction:column; gap:6px;">
        <span>Mot de passe Premium</span>
        <input id="authPwd" type="password" autocomplete="current-password"
               style="padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,.15);">
        <small style="opacity:.8;">Minimum 6 caractères.</small>
      </label>

      <label style="display:flex; flex-direction:column; gap:6px;">
        <span>Token (pour 2ᵉ appareil) — optionnel</span>
        <textarea id="authToken" rows="4"
          style="padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,.15); resize:vertical;"
          placeholder="Colle ici le token exporté depuis l’appareil 1 si tu actives le Premium sur un 2ᵉ appareil"></textarea>
      </label>

      <div id="authInfo" style="font-size:13px; opacity:.9;"></div>
      <div id="authErr" style="font-size:13px; color:#D32F2F; font-weight:700;"></div>

      <div id="authTokenBox" style="display:none; padding:12px; border-radius:12px; border:1px dashed rgba(0,0,0,.25);">
        <div style="font-weight:800; margin-bottom:6px;">✅ Token à partager</div>
        <textarea id="authTokenOut" rows="5" readonly
          style="width:100%; padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,.15); resize:vertical;"></textarea>
        <div style="display:flex; gap:10px; margin-top:10px;">
          <button class="btn btn-secondary" id="btnCopyToken" style="flex:1;">📋 Copier</button>
          <button class="btn btn-primary" id="btnCloseAfterCopy" style="flex:1;">OK</button>
        </div>
        <div style="font-size:12px; opacity:.85; margin-top:8px;">
          Pour activer sur un 2ᵉ appareil : ouvrir Connexion → coller ce token → entrer le même mot de passe → “Importer Token”.
        </div>
      </div>
    </div>
  `;

  footerEl.innerHTML = `
    <div style="display:flex; flex-wrap:wrap; gap:10px;">
      <button class="btn btn-secondary" id="authBtnSetup">Créer Premium</button>
      <button class="btn btn-primary" id="authBtnLogin">Connexion</button>
      <button class="btn btn-secondary" id="authBtnExport">Exporter Token</button>
      <button class="btn btn-primary" id="authBtnImport">Importer Token</button>
    </div>
  `;

  setTimeout(async () => {
    const inpPwd = document.getElementById('authPwd');
    const inpToken = document.getElementById('authToken');
    const info = document.getElementById('authInfo');
    const err = document.getElementById('authErr');

    const tokenBox = document.getElementById('authTokenBox');
    const tokenOut = document.getElementById('authTokenOut');
    const btnCopyToken = document.getElementById('btnCopyToken');
    const btnCloseAfterCopy = document.getElementById('btnCloseAfterCopy');

    const setupBtn = document.getElementById('authBtnSetup');
    const loginBtn = document.getElementById('authBtnLogin');
    const exportBtn = document.getElementById('authBtnExport');
    const importBtn = document.getElementById('authBtnImport');

    const showErr = (m) => { if (err) err.textContent = m || ''; };
    const showInfo = (m) => { if (info) info.textContent = m || ''; };
    const pwd = () => (inpPwd?.value || '').trim();
    const tok = () => (inpToken?.value || '').trim();

    // adapter le texte selon si premium existe sur cet appareil
    const has = await authHasPremiumSetup().catch(() => false);
    showInfo(has
      ? "✅ Premium déjà configuré sur cet appareil : utilise “Connexion” (ou Export/Import Token)."
      : "🆕 Aucun Premium sur cet appareil : utilise “Créer Premium” (ou “Importer Token” si c’est ton 2ᵉ appareil)."
    );

    // Copier token
    if (btnCopyToken) {
      btnCopyToken.onclick = async () => {
        try {
          await navigator.clipboard.writeText(tokenOut.value || '');
          showToast?.('📋 Token copié');
        } catch {
          // fallback: sélectionner
          tokenOut.focus();
          tokenOut.select();
          showToast?.('Sélectionné (copie manuelle)');
        }
      };
    }
    if (btnCloseAfterCopy) btnCloseAfterCopy.onclick = () => close();

    // 1) Créer Premium (appareil 1)
    if (setupBtn) setupBtn.onclick = async () => {
      showErr('');
      const p = pwd();
      try {
        await authSetupPremium(p);
        // Génère token (appareil 1) et l’affiche pour partage
        const out = await createOrUpdatePremiumToken(p, 'Appareil 1');
        if (tokenOut) tokenOut.value = out.tokenStr || '';
        if (tokenBox) tokenBox.style.display = 'block';

        authUpdateHeaderUI();
        authApplyAccessRules?.();
        showToast?.('✅ Premium créé');
      } catch (e) {
        console.error(e);
        showErr(e?.message || 'Erreur création Premium');
      }
    };

    // 2) Connexion Premium (appareil déjà configuré)
    if (loginBtn) loginBtn.onclick = async () => {
      showErr('');
      const p = pwd();
      try {
        await authLoginPremium(p);
        authUpdateHeaderUI();
        authApplyAccessRules?.();
        close();
        showToast?.('✅ Connecté (Premium)');
      } catch (e) {
        console.error(e);
        showErr(e?.message || 'Erreur connexion');
      }
    };

    // 3) Exporter token (pour partager au 2e appareil)
    if (exportBtn) exportBtn.onclick = async () => {
      showErr('');
      const p = pwd();
      try {
        // Il faut le mot de passe pour chiffrer/déchiffrer le token portable
        const out = await createOrUpdatePremiumToken(p, 'Appareil 1');
        if (tokenOut) tokenOut.value = out.tokenStr || '';
        if (tokenBox) tokenBox.style.display = 'block';
        showToast?.('✅ Token prêt à partager');
      } catch (e) {
        console.error(e);
        showErr(e?.message || 'Erreur export token');
      }
    };

    // 4) Importer token (2e appareil)
    if (importBtn) importBtn.onclick = async () => {
      showErr('');
      const p = pwd();
      const t = tok();
      try {
        if (!t) throw new Error('Colle le token exporté depuis l’appareil 1.');
        // Ajoute ce 2e appareil au token si place
        const imp = await importPremiumToken(p, t, 'Appareil 2');

        // IMPORTANT : il faut renvoyer le token “mis à jour” vers l’appareil 1
        if (tokenOut) tokenOut.value = imp.updatedTokenStr || '';
        if (tokenBox) tokenBox.style.display = 'block';

        // Ensuite seulement: si premium local existe, login; sinon l’utilisateur doit “Créer Premium”
        // (sans serveur, on ne peut pas créer automatiquement premium_v1 ici sans ta logique complète)
        showInfo("✅ Import OK. Maintenant : copie le token mis à jour et renvoie-le à l’appareil 1 (pour synchroniser les 2 appareils).");

        showToast?.('✅ Token importé (2 appareils)');
      } catch (e) {
        console.error(e);
        showErr(e?.message || 'Erreur import token');
      }
    };
  }, 0);
}


function initLocalAuthSystem() {
  const btnLogin = document.getElementById('btnLogin');
  const btnLogout = document.getElementById('btnLogout');

  // Sécurité : ne jamais binder deux fois
  if (btnLogin && !btnLogin.__authBound) {
    btnLogin.addEventListener('click', () => {
      try {
        authShowLoginModal();
      } catch (e) {
        console.error('Erreur ouverture modale auth:', e);
        alert('Erreur ouverture connexion Premium');
      }
    });
    btnLogin.__authBound = true;
  }

  if (btnLogout && !btnLogout.__authBound) {
    btnLogout.addEventListener('click', () => {
      try {
        authLogout();
      } catch (e) {
        console.error('Erreur logout:', e);
      }
    });
    btnLogout.__authBound = true;
  }

  // Mise à jour immédiate de l’UI (Invité / Premium)
  try {
    authUpdateHeaderUI();
  } catch (e) {
    console.warn('authUpdateHeaderUI failed:', e);
  }

  // Application des règles invité (verrouillages, séparateur, etc.)
  try {
    authApplyAccessRules?.();
  } catch (e) {
    console.warn('authApplyAccessRules failed:', e);
  }
}


 // ========= DONNÉES LOCALES PAR DÉFAUT =========

function loadAppData() {
  try {
    const saved = localStorage.getItem('epimaat_data');
    return saved ? JSON.parse(saved) : null;
  } catch (e) {
    console.error('Erreur chargement localStorage', e);
    return null;
  }
}

function saveAppDataLocal() {
  try {
    localStorage.setItem('epimaat_data', JSON.stringify(appData));
  } catch (e) {
    console.error('Erreur sauvegarde localStorage', e);
  }
}

let appData = loadAppData() || {
  crises: [],
  profile: {
    firstname: '',
    lastname: '',
    birthdate: '', // format: 'YYYY-MM-DD'
    phone: '',
    weightKg: '',
    heightCm: '',
    doctors: [{ name: '', specialty: 'Neurologue', location: '', phone: '' }],
    emergencyContacts: [{ name: '', relationship: 'Conjoint(e)', phone: '' }]
  },

  medications: [],
  reminderSettings: { enabled: false, soundType: 'Sonnerie' },
  crisisButton: { type: 'Focale', custom: '', color: '#D32F2F' },

  quickActions: [
    {
      id: 'urgence_112',
      icon: '🆘',
      text: 'URGENCE 112',
      color: '#E53935',
      action: 'confirm_call_112'
    },
    {
      id: 'action_perso',
      icon: '➕',
      text: 'TON action',
      color: '#6B9AA6',
      action: 'custom_quick_action'
    },
    {
      id: 'contact_urgence',
      icon: '✚',
      text: "Contact d'urgence",
      color: '#E65100',
      action: 'call_custom_contact'
    },
    {
      id: 'backup_create',
      icon: '💾',
      text: 'Sauvegarde complète',
      color: '#1976D2',
      action: 'create_backup'
    }
  ],

  settings: {
    accessibility: {
      largeText: false,
      highContrast: false,
      reduceAnimations: false,
      crisisButtonSize: 180,
      textScale: 1.0
    },
    darkMode: false,
    epilepticMode: {
      disableAnimations: false,
      disablePulsing: false,
      reduceContrast: false
    },
    customQuickAction: {
      configured: false,
      label: 'TON Raccourci',
      icon: '➕',
      color: '#6B9AA6',
      key: 'show_medication_reminder',
      params: {
        page: 'treatment',
        phone: ''
      }
    },
    quickCall: {
      enabled: true,
      name: 'Contact',
      phone: ''
    }
  }
};

window.appData = appData;

// ========= ROUTER / HISTORIQUE (BOUTON RETOUR ANDROID) =========

function isModalOpen() {
  const modalOverlay = document.getElementById('modalOverlay');
  return !!(modalOverlay && modalOverlay.classList.contains('active'));
}

function isSidebarOpen() {
  const sidebar = document.getElementById('sidebar');
  return !!(sidebar && sidebar.classList.contains('open'));
}

function pageFromHash() {
  const h = (location.hash || '').replace('#', '').trim();
  return h || 'home';
}


  // ========= CONSTANTES =========

  const CRISIS_TYPES = [
    { name: 'Focale', icon: '🧠', desc: 'Crise partielle affectant une zone localisée du cerveau' },
    { name: 'Grand Mal', icon: '⚠️', desc: 'Crise généralisée avec perte de conscience' },
    { name: 'Absence', icon: '👁️', desc: 'Brève perte de conscience avec regard fixe' },
    { name: 'Myoclonique', icon: '⚡', desc: 'Secousses musculaires brusques et brèves' },
    { name: 'Salves', icon: '🔄', desc: 'Série de contractions musculaires répétées' }
  ];

  const MEDICATIONS_LIST = [
    'Briviact',
    'Carbatrol',
    'Dépakine',
    'Dépakote',
    'Di-Hydan',
    'Dilantin',
    'Epitomax',
    'Frisium',
    'Fycompa',
    'Gabitril',
    'Inovelon',
    'Keppra',
    'Lamictal',
    'Lyrica',
    'Micropakine',
    'Neurontin',
    'Onfi',
    'Oxtellar XR',
    'Rivotril',
    'Sabril',
    'Tegretol',
    'Topamax',
    'Trileptal',
    'Vimpat',
    'Zarontin',
    'Zebinix',
    'Zonegran',
    'Autre (personnalisé)'
  ];

  const CRISIS_COLORS = [
  '#B71C1C', // rouge SOS
  '#D32F2F', // rouge urgence
  '#E53935', // rouge doux
  '#EF6C00', // orange alerte
  '#F9A825', // jaune attention
  '#6A1B9A', // violet calme
  '#1565C0', // bleu sécurité
  '#2E7D32'  // vert rassurant
];
  let recordingState = { isRecording: false, startTime: null, interval: null };
  let notificationPermission = 'default';
  let reminderCheckInterval = null;

 // ========= SAUVEGARDE / CHARGEMENT SERVEUR =========

async function loadFromServer() {
  try {
    const res = await fetch('php/load_data.php', {
      method: 'GET',
      credentials: 'include'
    });

    if (!res.ok) {
      console.warn('Impossible de charger les données serveur', res.status);
      return;
    }

    const data = await res.json();
    if (!data || typeof data !== 'object') return;

    // ===== Fusion soft avec la structure par défaut =====
    if (Array.isArray(data.crises)) appData.crises = data.crises;

    if (data.profile && typeof data.profile === 'object') {
      appData.profile = { ...appData.profile, ...data.profile };
    }

    if (Array.isArray(data.medications)) appData.medications = data.medications;

    if (data.reminderSettings && typeof data.reminderSettings === 'object') {
      appData.reminderSettings = { ...appData.reminderSettings, ...data.reminderSettings };
    }

    if (data.crisisButton && typeof data.crisisButton === 'object') {
      appData.crisisButton = { ...appData.crisisButton, ...data.crisisButton };
    }

    // ✅ Fusion des quickActions SANS perdre les nouveaux boutons (ex: backup_create)
    if (Array.isArray(data.quickActions)) {
      const byId = new Map((data.quickActions || []).map(a => [a.id, a]));
      (appData.quickActions || []).forEach(def => {
        if (def && def.id && !byId.has(def.id)) byId.set(def.id, def);
      });
      appData.quickActions = Array.from(byId.values());
    }

    // ✅ Settings : merge profond (inclut customQuickAction)
    if (data.settings && typeof data.settings === 'object') {
      appData.settings = { ...appData.settings, ...data.settings };

      appData.settings.accessibility = {
        ...(appData.settings.accessibility || {}),
        ...(data.settings.accessibility || {})
      };

      appData.settings.epilepticMode = {
        ...(appData.settings.epilepticMode || {}),
        ...(data.settings.epilepticMode || {})
      };

      appData.settings.quickCall = {
        ...(appData.settings.quickCall || {}),
        ...(data.settings.quickCall || {})
      };

      appData.settings.customQuickAction = {
        ...(appData.settings.customQuickAction || {}),
        ...(data.settings.customQuickAction || {})
      };
    }

    window.appData = appData;
    console.log('Données chargées du serveur', appData);
  } catch (e) {
    console.error('Erreur loadFromServer', e);
  }
}

async function saveToServer() {
  try {
    await fetch('php/save_data.php', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(appData)
    });
    console.log('Données sauvegardées sur le serveur');
  } catch (e) {
    console.error('Erreur saveToServer', e);
  }
}

// ================================
// GLOBALS SAFE (TOP OF app.js)
// ================================

// ✅ Ne PAS redéclarer currentPage si déjà déclaré ailleurs
// On met juste une valeur par défaut si absent.
if (typeof window.currentPage === 'undefined' || !window.currentPage) {
  window.currentPage = 'home';
}

// ✅ idem pour isHandlingPopState
if (typeof window.isHandlingPopState === 'undefined') {
  window.isHandlingPopState = false;
}

// (optionnel) alias locaux si ton code utilise currentPage sans window.
currentPage = window.currentPage;
isHandlingPopState = window.isHandlingPopState;

// Helpers SAFE (évite crash si fonctions absentes)
function __safeIsModalOpen() {
  try {
    return (typeof isModalOpen === 'function') ? !!isModalOpen() : false;
  } catch (e) { return false; }
}

function __safeCloseModal() {
  try { if (typeof closeModal === 'function') closeModal(); } catch (e) {}
}

function __safeIsSidebarOpen() {
  try {
    if (typeof isSidebarOpen === 'function') return !!isSidebarOpen();
    const sb = document.getElementById('sidebar');
    return !!(sb && sb.classList.contains('open'));
  } catch (e) { return false; }
}

function __safeCloseSidebar() {
  try { if (typeof closeSidebar === 'function') closeSidebar(); } catch (e) {}
}

// Si ton hash historique contient "#dashboard", on le mappe vers "home"
function normalizePageName(p) {
  if (!p) return 'home';
  if (p === 'dashboard') return 'home';
  return p;
}

// ================================
// ========= INIT =========
// ================================
async function init() {
  // 1) Charger données (SAFE)
  try {
    if (typeof loadFromServer === 'function') {
      await loadFromServer();
    }
  } catch (e) {
    console.warn('loadFromServer error (ignored):', e);
  }

  // 2) UI / listeners
  try { setupEventListeners(); } catch (e) { console.error('setupEventListeners error:', e); }
  try { initLocalAuthSystem(); } catch (e) { console.warn('Auth init failed:', e); }
  try { updateHeaderClock(); } catch (e) {}
  try { setInterval(updateHeaderClock, 1000); } catch (e) {}
  try { if (typeof updateDashClock === 'function') setInterval(updateDashClock, 1000); } catch (e) {}
  try { if (typeof checkNotificationPermission === 'function') checkNotificationPermission(); } catch (e) {}
  try { if (typeof startReminderCheck === 'function') startReminderCheck(); } catch (e) {}
  try { if (typeof applySettings === 'function') applySettings(); } catch (e) { console.warn('applySettings missing/failed:', e); }

  // 3) Init historique (évite que le 1er "Retour" quitte l'app)
  let initial = 'home';
  try {
    initial = normalizePageName(pageFromHash());
  } catch (e) {}

  try {
    history.replaceState({ page: initial }, '', `#${initial}`);
  } catch (e) {}

  // 4) Afficher la page sans créer une nouvelle entrée
  navigateToPage(initial, { addToHistory: false });
}


// ================================
// ========= NAV / EVENT LISTENERS =========
// ================================
function setupEventListeners() {
  // --- Bouton menu ---
  const menuBtn = document.getElementById('menuBtn');
  if (menuBtn) {
    menuBtn.addEventListener('click', (e) => {
      e.preventDefault();
      const sidebar = document.getElementById('sidebar');
      const overlay = document.getElementById('sidebarOverlay');
      if (sidebar) sidebar.classList.add('open');
      if (overlay) overlay.classList.add('active');
    });
  }

  // --- Overlay sidebar ---
  const sidebarOverlay = document.getElementById('sidebarOverlay');
  if (sidebarOverlay) sidebarOverlay.addEventListener('click', () => closeSidebar());

  // --- Modal close (SAFE) ---
  const modalClose = document.getElementById('modalClose');
  if (modalClose) modalClose.addEventListener('click', () => __safeCloseModal());

  const modalOverlay = document.getElementById('modalOverlay');
  if (modalOverlay) {
    modalOverlay.addEventListener('click', (e) => {
      if (e.target === modalOverlay) __safeCloseModal();
    });
  }

  // --- Bottom nav ---
  document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      const page = normalizePageName(item.dataset.page);
      navigateToPage(page);
    });
  });

  // --- Sidebar nav (IMPORTANT: data-page, pas data-action !) ---
  document.querySelectorAll('.sidebar-item').forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      __safeCloseSidebar();
      const page = normalizePageName(item.dataset.page); // ✅ FIX ICI
      navigateToPage(page);
    });
  });

  // --- Android back button / PWA ---
  window.addEventListener('popstate', (event) => {
    // 1) fermer modale si ouverte
    if (__safeIsModalOpen()) {
      __safeCloseModal();
      return;
    }

    // 2) fermer sidebar si ouverte
    if (__safeIsSidebarOpen()) {
      __safeCloseSidebar();
      return;
    }

    // 3) naviguer dans l’app
    let page = null;
    try {
      page = normalizePageName((event.state && event.state.page) ? event.state.page : pageFromHash());
    } catch (e) {
      page = 'home';
    }

    if (page && page !== currentPage) {
      isHandlingPopState = true;
      try {
        navigateToPage(page, { addToHistory: false });
      } finally {
        isHandlingPopState = false;
      }
      return;
    }

    // 4) Si on est "à la racine", on empêche la sortie PWA
    // -> On re-pousse l’état courant pour que "Retour" ne ferme pas l’app
    try {
      const root = currentPage || 'home';
      history.pushState({ page: root }, '', `#${root}`);
    } catch (e) {}
  });
}

// ================================
// Sidebar helpers
// ================================
function closeSidebar() {
  const sb = document.getElementById('sidebar');
  const ov = document.getElementById('sidebarOverlay');
  if (sb) sb.classList.remove('open');
  if (ov) ov.classList.remove('active');
}

// ================================
// Clock
// ================================
function updateHeaderClock() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2, '0');
  const m = String(now.getMinutes()).padStart(2, '0');
  const s = String(now.getSeconds()).padStart(2, '0');
  const el = document.getElementById('headerClock');
  if (el) el.textContent = `${h}:${m}:${s}`;
}

// ================================
// Navigation
// ================================
function navigateToPage(page, options = {}) {
  const { addToHistory = true } = options;

  const pages = {
    home: renderHomePage,
    record: renderRecordPage,
    tracking: renderTrackingPage,
    rapport: renderRapportPage,
    treatment: renderTreatmentPage,
    settings: renderSettingsPage,
    profile: renderProfilePage,
    data: renderDataPage,
    guide: renderGuidePage,
    'user-guide': renderUserGuidePage,
    about: renderAboutPage
  };

  page = normalizePageName(page);

  // fallback
  if (!pages[page]) page = 'home';

  currentPage = page;

  // active bottom nav
  document.querySelectorAll('.nav-item').forEach(item => {
    item.classList.toggle('active', item.dataset.page === page);
  });

  // scroll top
  const main = document.getElementById('mainContent');
  if (main) main.scrollTop = 0;

  // render (SAFE)
  try { pages[page](); } catch (e) { console.error('Render error:', e); }

  // history
  if (addToHistory && !isHandlingPopState) {
    try {
      history.pushState({ page }, '', `#${page}`);
    } catch (e) {}
  }
}

window.appNavigate = navigateToPage;

  // ========= PAGE ACCUEIL =========

  function renderHomePage() {
    const btnLabel = appData.crisisButton.custom || appData.crisisButton.type;
    const stats = calculateStats();
    const btnSize = appData.settings.accessibility.crisisButtonSize;

    document.getElementById('mainContent').innerHTML = `
      <div class="card">
        <div class="clock-section">
          <div class="clock-time" id="dashClock">--:--:--</div>
          <div class="clock-date" id="dashDate">--</div>
        </div>
        <div class="crisis-section">
          <div class="crisis-btn-wrapper">
            <button class="crisis-btn" id="crisisBtn" style="background: ${appData.crisisButton.color}; width: ${btnSize}px; height: ${btnSize}px;">
              <span id="crisisBtnLabel">${btnLabel}</span>
              <div class="crisis-timer hidden" id="crisisTimer">00:00</div>
            </button>
          </div>
          <button class="crisis-settings-btn" id="crisisSettingsBtn">⚙️</button>
        </div>
      </div>
      <div class="card" style="margin-bottom: 24px;">
        <div class="stats-grid">
          <div class="stat-card"><div class="stat-label">Aujourd'hui</div><div class="stat-value">${stats.today}</div></div>
          <div class="stat-card"><div class="stat-label">Ce mois</div><div class="stat-value">${stats.month}</div></div>
          <div class="stat-card"><div class="stat-label">Jours sans</div><div class="stat-value">${stats.daysSince}</div></div>
          <div class="stat-card"><div class="stat-label">Total</div><div class="stat-value">${stats.total}</div></div>
        </div>
        <div class="section-title">Actions rapides</div>
        <div class="actions-grid" id="actionsGrid"></div>
      </div>
      <div class="card" style="padding: 0; overflow: hidden;">
        <button class="conseils-rapides-btn" id="conseilsRapidesBtn">
          <span class="conseils-icon">💡</span>
          <span class="conseils-text">Conseils Rapides</span>
          <span class="conseils-subtitle">Guide en cas de crise</span>
        </button>
      </div>
    `;

    updateDashClock();

    document.getElementById('crisisBtn').addEventListener('click', function () {
      if (!recordingState.isRecording) startRecording(this);
      else stopRecording(this);
    });

    document.getElementById('crisisSettingsBtn').addEventListener('click', showCrisisSettingsModal);
    try { authApplyAccessRules(); } catch(e) {}
   
    renderQuickActions();

    const conseilsBtn = document.getElementById('conseilsRapidesBtn');
    if (conseilsBtn) {
      conseilsBtn.addEventListener('click', showConseilsRapides);
    }
  }

  function showConseilsRapides() {
    const body = `
      <div style="max-height: 60vh; overflow-y: auto;">
        <div class="conseils-section">
          <div class="conseils-section-title" style="font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 16px;">Pendant la crise</div>
          <div style="margin-bottom: 16px;">
            <div style="font-size: 14px; color: var(--success); font-weight: 600; margin-bottom: 8px;">✓ À FAIRE :</div>
            <ul style="list-style: none; padding: 0; margin: 0;">
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Reste calme et observe la personne</li>
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Sécurise l'espace</li>
              <li style="padding: 6px 0 6px 32px; color: var(--text-secondary); line-height: 1.5;">• Éloigne les objets dangereux</li>
              <li style="padding: 6px 0 6px 32px; color: var(--text-secondary); line-height: 1.5;">• Desserre les vêtements autour du cou</li>
              <li style="padding: 6px 0 6px 32px; color: var(--text-secondary); line-height: 1.5;">• Protège la tête (veste, pull)</li>
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Note l'heure du début pour mesurer la durée</li>
            </ul>
          </div>
          <div style="margin-bottom: 16px;">
            <div style="font-size: 14px; color: var(--crisis-red); font-weight: 600; margin-bottom: 8px;">✗ NE PAS FAIRE :</div>
            <ul style="list-style: none; padding: 0; margin: 0;">
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--crisis-red); font-weight: 700;">✗</span> Ne retiens pas les mouvements : laisse la crise se dérouler</li>
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--crisis-red); font-weight: 700;">✗</span> Ne mets rien dans la bouche : ne pas bloquer la mâchoire</li>
              <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--crisis-red); font-weight: 700;">✗</span> Évite la foule : laisse de l'air autour de la personne</li>
            </ul>
          </div>
        </div>
        <div class="conseils-section" style="margin-top: 24px;">
          <div class="conseils-section-title" style="font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 16px;">Après la crise</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Mets la personne en PLS</li>
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Vérifie qu'elle respire bien</li>
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--text-secondary); line-height: 1.5;"><span style="position: absolute; left: 0; color: var(--success); font-weight: 700;">✓</span> Reste avec elle jusqu'au réveil complet</li>
          </ul>
        </div>
        <div class="warning-box" style="margin-top: 24px; background: rgba(211, 47, 47, 0.1); border: 2px solid var(--crisis-red); border-radius: 12px; padding: 16px;">
          <div style="font-size: 16px; font-weight: 700; color: var(--crisis-red); margin-bottom: 12px;">⚠️ Appelle le 112 si :</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            <li style="padding: 4px 0 4px 20px; position: relative; color: var(--text); line-height: 1.5; font-size: 14px;"><span style="position: absolute; left: 0;">•</span> La crise dure plus de 5 minutes</li>
            <li style="padding: 4px 0 4px 20px; position: relative; color: var(--text); line-height: 1.5; font-size: 14px;"><span style="position: absolute; left: 0;">•</span> Les crises s'enchaînent</li>
            <li style="padding: 4px 0 4px 20px; position: relative; color: var(--text); line-height: 1.5; font-size: 14px;"><span style="position: absolute; left: 0;">•</span> La personne ne reprend pas conscience</li>
            <li style="padding: 4px 0 4px 20px; position: relative; color: var(--text); line-height: 1.5; font-size: 14px;"><span style="position: absolute; left: 0;">•</span> C'est une première crise</li>
            <li style="padding: 4px 0 4px 20px; position: relative; color: var(--text); line-height: 1.5; font-size: 14px;"><span style="position: absolute; left: 0;">•</span> Elle est blessée ou a du mal à respirer</li>
          </ul>
        </div>
      </div>
    `;

    showModal({
      title: '💡 Conseils en cas de crise',
      body: body,
      footer: '<button class="btn btn-danger btn-full" id="call112FromConseils" style="background: #D32F2F;">Appeler le 112</button>'
    });

    document.getElementById('call112FromConseils').addEventListener('click', () => {
      window.location.href = 'tel:112';
      closeModal();
    });
  }

  function updateDashClock() {
    const now = new Date();
    const el = document.getElementById('dashClock');
    if (el) {
      const h = String(now.getHours()).padStart(2, '0');
      const m = String(now.getMinutes()).padStart(2, '0');
      const s = String(now.getSeconds()).padStart(2, '0');
      el.textContent = `${h}:${m}:${s}`;
    }
    const dateEl = document.getElementById('dashDate');
    if (dateEl) {
      dateEl.textContent = now.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
    }
  }

 function renderQuickActions() {
  const grid = document.getElementById('actionsGrid');
  if (!grid) return;

  const cfg = appData.settings?.quickCall || { enabled: true, name: 'Contact', phone: '' };
  const custom = appData.settings?.customQuickAction || {
    configured: false,
    label: 'TON Raccourci',
    icon: '➕',
    color: '#6B9AA6',
    key: 'show_medication_reminder',
    params: {}
  };

  grid.innerHTML = (appData.quickActions || []).map(action => {
    const isQuickCall = action.action === 'call_custom_contact';
    const isCustom = action.action === 'custom_quick_action';

    // masquer si désactivé
    if (isQuickCall && cfg.enabled === false) return '';

    const label = isQuickCall
      ? `Appeler ${cfg.name || 'Contact'}`
      : isCustom
        ? (custom.label || 'TON Raccourci')
        : (action.text || '');

    const ic = isCustom ? (custom.icon || '➕') : (action.icon || '✨');
    const bg = isCustom ? (custom.color || '#6B9AA6') : (action.color || '#6B9AA6');

    return `
      <button class="action-btn" style="background: ${bg}" data-action="${action.action}">
        <span class="action-icon">${ic}</span>
        <span class="action-text">${label}</span>
      </button>
    `;
  }).join('');

  grid.querySelectorAll('.action-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const action = btn.dataset.action;

      if (action === 'confirm_call_112') showUrgence112Modal();
      else if (action === 'custom_quick_action') handleCustomQuickAction();
      else if (action === 'call_custom_contact') callCustomQuickContact();
      else if (action === 'create_backup') createBackup();
      else showToast?.(`Action inconnue: ${action}`, 'error');
    });
  });
}

// ========= PATCH 3 (v2) : Catalogue + exécution + sélecteur d’icônes =========

const ACTION_CATALOG = [
  // Navigation
  {
    key: 'navigate',
    label: 'Ouvrir une page',
    needs: ['page'],
    pages: [
      { value: 'home', label: 'Accueil' },
      { value: 'record', label: 'Enregistrement' },
      { value: 'tracking', label: 'Suivi' },
      { value: 'rapport', label: 'Rapport médical' },
      { value: 'treatment', label: 'Traitement' },
      { value: 'settings', label: 'Paramètres' },
      { value: 'profile', label: 'Profil' },
      { value: 'data', label: 'Mes données' },
      { value: 'guide', label: 'Guide des crises' },
      { value: 'user-guide', label: "Guide d'utilisation" },
      { value: 'about', label: 'À propos' }
    ]
  },

  // Utilitaires
  { key: 'show_medication_reminder', label: 'Afficher le prochain rappel médicament', needs: [] },
  { key: 'open_treatment', label: 'Aller à la page Traitement', needs: [] },
  { key: 'open_tracking', label: 'Aller à la page Suivi', needs: [] },
  { key: 'open_profile', label: 'Aller à la page Profil', needs: [] },
  { key: 'open_settings', label: 'Aller à la page Paramètres', needs: [] },

  // Appels
  { key: 'call_quick_contact', label: 'Appeler le contact rapide (Paramètres)', needs: [] },
  { key: 'call_profile_emergency1', label: 'Appeler le 1er contact d’urgence (Profil)', needs: [] },
  { key: 'call_112', label: 'Appeler le 112 (urgence)', needs: [] },

  // Données / PDF
  { key: 'create_backup', label: 'Créer une sauvegarde complète (JSON)', needs: [] },
  { key: 'open_data_page', label: 'Ouvrir “Mes données” (backup/restauration)', needs: [] },
  { key: 'export_pdf', label: 'Exporter l’historique en PDF', needs: [] },
  { key: 'generate_medical_report', label: 'Générer le rapport médical PDF', needs: [] },

  // Modales utiles
  { key: 'show_emergency_numbers', label: 'Afficher les numéros d’urgence (liste)', needs: [] },
  { key: 'show_conseils', label: 'Afficher Conseils rapides (guide crise)', needs: [] },

  // Actions “système” simples
  { key: 'scroll_top', label: 'Remonter en haut de la page', needs: [] },
  { key: 'toggle_dark_mode', label: 'Basculer le mode sombre', needs: [] }
];

// ✅ Bibliothèque d’icônes (choix libre, indépendant de l’action)
const ICON_LIBRARY = [
  // Santé / urgence
  '💊','🩺','🏥','🚑','🆘','⚠️','✚','🫀','🧠','🧴','😴','💧','🧘',
  // Actions / outils
  '➕','✅','📌','📍','🧭','🧾','📄','🖨️','🗂️','📦','💾','📥','🔁','🔄','⚙️','🔔',
  // Téléphone / communication
  '📞','☎️','📱','💬','📩',
  // Temps / suivi
  '⏱️','⏰','📅','📈','📊','📝','🔎',
  // Sécurité / maison
  '🔒','🔓','🏠','🛡️'
];

// Optionnel : icône conseillée par action (mais l’utilisateur peut choisir autre chose)
const ACTION_DEFAULT_ICON = {
  navigate: '🧭',
  show_medication_reminder: '💊',
  open_treatment: '💊',
  open_tracking: '📊',
  open_profile: '👤',
  open_settings: '⚙️',
  call_quick_contact: '📞',
  call_profile_emergency1: '🚑',
  call_112: '🆘',
  create_backup: '💾',
  open_data_page: '🗂️',
  export_pdf: '📄',
  generate_medical_report: '🧾',
  show_emergency_numbers: '☎️',
  show_conseils: '💡',
  scroll_top: '⬆️',
  toggle_dark_mode: '🌙'
};

const ACTION_RUNNERS = {
  // Navigation
  navigate: (params = {}) => {
    const page = (params.page || '').trim();
    if (!page) return showToast?.('Page manquante', 'error');
    navigateToPage(page);
  },

  // Utilitaires
  show_medication_reminder: () => {
    if (typeof showMedicationReminder === 'function') return showMedicationReminder();
    showToast?.('Fonction rappel médicament introuvable', 'error');
  },
  open_treatment: () => navigateToPage('treatment'),
  open_tracking: () => navigateToPage('tracking'),
  open_profile: () => navigateToPage('profile'),
  open_settings: () => navigateToPage('settings'),

  // Appels
  call_quick_contact: () => {
    if (typeof callCustomQuickContact === 'function') return callCustomQuickContact();
    showToast?.('Fonction appel rapide introuvable', 'error');
  },
  call_profile_emergency1: () => {
    if (typeof callCustomEmergencyContact === 'function') return callCustomEmergencyContact();
    // fallback
    const c = appData.profile?.emergencyContacts?.[0];
    if (c?.phone) window.location.href = `tel:${String(c.phone).replace(/\s+/g,'')}`;
    else showToast?.('Aucun contact d’urgence configuré', 'error');
  },
  call_112: () => {
    // si tu veux confirmation: appelle showUrgence112Modal()
    if (typeof showUrgence112Modal === 'function') return showUrgence112Modal();
    window.location.href = 'tel:112';
  },

  // Données / PDF
  create_backup: () => {
    if (typeof createBackup === 'function') return createBackup();
    showToast?.('Fonction sauvegarde introuvable', 'error');
  },
  open_data_page: () => navigateToPage('data'),
  export_pdf: () => {
    if (typeof exportPDF === 'function') return exportPDF();
    showToast?.('Fonction export PDF introuvable', 'error');
  },
  generate_medical_report: () => {
    if (typeof generateMedicalReport === 'function') return generateMedicalReport();
    showToast?.('Fonction rapport médical introuvable', 'error');
  },

  // Modales
  show_emergency_numbers: () => {
    if (typeof showEmergencyNumbers === 'function') return showEmergencyNumbers();
    showToast?.('Fonction numéros d’urgence introuvable', 'error');
  },
  show_conseils: () => {
    if (typeof showConseilsRapides === 'function') return showConseilsRapides();
    showToast?.('Fonction conseils rapides introuvable', 'error');
  },

  // Actions “système”
  scroll_top: () => {
    const main = document.getElementById('mainContent');
    if (main) main.scrollTop = 0;
  },
  toggle_dark_mode: async () => {
    if (!appData.settings) appData.settings = {};
    appData.settings.darkMode = !appData.settings.darkMode;
    applySettings?.();
    await saveToServer?.();
    showToast?.('Mode sombre mis à jour', 'success');
  }
};

function getCustomQuickActionConfig() {
  if (!appData.settings) appData.settings = {};
  if (!appData.settings.customQuickAction) {
    appData.settings.customQuickAction = {
      configured: false,
      label: 'TON Raccourci',
      icon: '➕',
      color: '#6B9AA6',
      key: 'navigate',
      params: { page: 'treatment' }
    };
  }
  return appData.settings.customQuickAction;
}

function handleCustomQuickAction() {
  const cfg = getCustomQuickActionConfig();
  if (!cfg.configured) return openCustomQuickActionConfigModal();
  executeCustomQuickAction(cfg);
}

function executeCustomQuickAction(custom) {
  try {
    const key = custom?.key;
    const runner = ACTION_RUNNERS[key];
    if (!runner) {
      showToast?.(`Action inconnue: ${key}`, 'error');
      return openCustomQuickActionConfigModal();
    }
    runner(custom.params || {});
  } catch (e) {
    console.error(e);
    showToast?.('Erreur lors de l’action', 'error');
  }
}

function openCustomQuickActionConfigModal() {
  const cfg = getCustomQuickActionConfig();

  const selectedKey = cfg.key || 'show_medication_reminder';
  const selectedMeta = ACTION_CATALOG.find(a => a.key === selectedKey) || ACTION_CATALOG[0];

  // Si l'utilisateur n'a pas choisi d'icône, on propose une icône par défaut liée à l'action
  const suggestedIcon = ACTION_DEFAULT_ICON[selectedKey] || '➕';
  const currentIcon = (cfg.icon && cfg.icon.trim()) ? cfg.icon.trim() : suggestedIcon;

  const actionOptions = ACTION_CATALOG.map(a => {
    const sel = a.key === selectedKey ? 'selected' : '';
    return `<option value="${a.key}" ${sel}>${a.label}</option>`;
  }).join('');

  const needsPage = (selectedMeta.needs || []).includes('page');

  const pageOptions = (selectedMeta.pages || []).map(p => {
    const sel = (cfg.params?.page || 'home') === p.value ? 'selected' : '';
    return `<option value="${p.value}" ${sel}>${p.label}</option>`;
  }).join('');

  // Picker icônes
  const iconsGrid = ICON_LIBRARY.map(ic => {
    const active = ic === currentIcon ? 'outline:2px solid var(--primary);' : '';
    return `
      <button type="button" class="icon-pick" data-ic="${ic}"
        style="width:44px;height:44px;border-radius:12px;border:1px solid var(--border);
               background:var(--surface);font-size:22px;display:flex;align-items:center;justify-content:center;${active}">
        ${ic}
      </button>
    `;
  }).join('');

  const body = `
    <div class="form-group">
      <label class="form-label">Nom du bouton</label>
      <input type="text" class="form-input" id="cqa_label" maxlength="20"
        value="${cfg.label || ''}" placeholder="Ex: Rappel, Traitement…">
    </div>

    <div class="form-group">
      <label class="form-label">Couleur</label>
      <input type="color" class="form-input" id="cqa_color"
        value="${cfg.color || '#6B9AA6'}" style="height:48px;">
    </div>

    <div class="form-group">
      <label class="form-label">Action</label>
      <select class="form-input form-select" id="cqa_key">${actionOptions}</select>
    </div>

    <div class="form-group" id="cqa_page_wrap" style="display:${needsPage ? 'block' : 'none'};">
      <label class="form-label">Page à ouvrir</label>
      <select class="form-input form-select" id="cqa_page">
        ${pageOptions || `<option value="home">Accueil</option>`}
      </select>
    </div>

    <div class="form-group">
      <label class="form-label">Icône (indépendante de l’action)</label>
      <input type="text" class="form-input" id="cqa_icon" maxlength="2" value="${currentIcon}" placeholder="Ex: 💊">
      <div style="margin-top:10px; display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;">
        ${iconsGrid}
      </div>
      <div style="margin-top:10px; font-size:13px; color:var(--text-secondary);">
        Tu peux choisir n’importe quelle icône, même si l’action est différente.
      </div>
    </div>

    <div style="margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface);">
      <div style="font-size:13px; color:var(--text-secondary); margin-bottom:8px;">Aperçu :</div>
      <div style="display:flex; gap:12px; align-items:center;">
        <div id="cqa_preview_icon" style="font-size:26px;">${currentIcon}</div>
        <div>
          <div id="cqa_preview_label" style="font-weight:700;">${cfg.label || 'TON Raccourci'}</div>
          <div style="font-size:12px; color:var(--text-secondary);">${selectedMeta.label}</div>
        </div>
        <div style="margin-left:auto; width:18px; height:18px; border-radius:50%; background:${cfg.color || '#6B9AA6'};" id="cqa_preview_color"></div>
      </div>
    </div>
  `;

  showModal({
    title: '➕ Configurer TON action',
    body,
    footer: `
      <div class="btn-group">
        <button class="btn btn-secondary" id="cqa_cancel">Annuler</button>
        <button class="btn btn-primary" id="cqa_save">Enregistrer</button>
      </div>
    `
  });

  // --- Helpers preview ---
  const refreshPreview = () => {
    const label = (document.getElementById('cqa_label')?.value || 'TON Raccourci').trim() || 'TON Raccourci';
    const icon = (document.getElementById('cqa_icon')?.value || '➕').trim() || '➕';
    const color = (document.getElementById('cqa_color')?.value || '#6B9AA6').trim() || '#6B9AA6';
    const key = (document.getElementById('cqa_key')?.value || '').trim();
    const meta = ACTION_CATALOG.find(a => a.key === key);

    const elI = document.getElementById('cqa_preview_icon');
    const elL = document.getElementById('cqa_preview_label');
    const elC = document.getElementById('cqa_preview_color');
    if (elI) elI.textContent = icon;
    if (elL) elL.textContent = label;
    if (elC) elC.style.background = color;

    // si pas d'icône “vraie”, proposer la suggested
    if (!document.getElementById('cqa_icon')?.value?.trim()) {
      const sugg = ACTION_DEFAULT_ICON[key] || '➕';
      document.getElementById('cqa_icon').value = sugg;
      if (elI) elI.textContent = sugg;
    }

    const wrap = document.getElementById('cqa_page_wrap');
    const show = (meta?.needs || []).includes('page');
    if (wrap) wrap.style.display = show ? 'block' : 'none';

    // si l'action change et a des pages, on recharge la liste
    if (show && meta?.pages?.length) {
      const select = document.getElementById('cqa_page');
      if (select) {
        const current = select.value || 'home';
        select.innerHTML = meta.pages.map(p => `<option value="${p.value}" ${p.value===current?'selected':''}>${p.label}</option>`).join('');
      }
    }
  };

  // dynamique
  document.getElementById('cqa_label')?.addEventListener('input', refreshPreview);
  document.getElementById('cqa_color')?.addEventListener('input', refreshPreview);
  document.getElementById('cqa_key')?.addEventListener('change', refreshPreview);
  document.getElementById('cqa_icon')?.addEventListener('input', refreshPreview);

  // click picker icônes
  document.querySelectorAll('.icon-pick').forEach(b => {
    b.addEventListener('click', () => {
      const ic = b.dataset.ic;
      const input = document.getElementById('cqa_icon');
      if (input) input.value = ic;

      // highlight
      document.querySelectorAll('.icon-pick').forEach(x => x.style.outline = 'none');
      b.style.outline = '2px solid var(--primary)';

      refreshPreview();
    });
  });

  document.getElementById('cqa_cancel')?.addEventListener('click', closeModal);

  document.getElementById('cqa_save')?.addEventListener('click', async () => {
    const label = (document.getElementById('cqa_label')?.value || 'TON Raccourci').trim() || 'TON Raccourci';
    const icon = (document.getElementById('cqa_icon')?.value || '➕').trim() || '➕';
    const color = (document.getElementById('cqa_color')?.value || '#6B9AA6').trim() || '#6B9AA6';
    const key = (document.getElementById('cqa_key')?.value || 'show_medication_reminder').trim();

    const meta = ACTION_CATALOG.find(a => a.key === key);
    const params = { ...(cfg.params || {}) };

    if ((meta?.needs || []).includes('page')) {
      params.page = (document.getElementById('cqa_page')?.value || 'home').trim() || 'home';
    } else {
      delete params.page;
    }

    appData.settings.customQuickAction = {
      configured: true,
      label,
      icon,
      color,
      key,
      params
    };

    await saveToServer();
    closeModal();
    showToast?.('Raccourci enregistré ✔️', 'success');

    // refresh accueil si on est dessus
    if (typeof currentPage !== 'undefined' && currentPage === 'home') renderQuickActions();
  });

  // init preview
  refreshPreview();
}


  function startRecording(btn) {
    recordingState.isRecording = true;
    recordingState.startTime = Date.now();
    btn.classList.add('recording');
    document.getElementById('crisisBtnLabel').classList.add('hidden');
    document.getElementById('crisisTimer').classList.remove('hidden');

    recordingState.interval = setInterval(() => {
      const elapsed = Math.floor((Date.now() - recordingState.startTime) / 1000);
      document.getElementById('crisisTimer').textContent = formatDuration(elapsed);
    }, 1000);
  }

  function stopRecording(btn) {
    const duration = Math.floor((Date.now() - recordingState.startTime) / 1000);
    recordingState.isRecording = false;
    clearInterval(recordingState.interval);
    btn.classList.remove('recording');
    document.getElementById('crisisBtnLabel').classList.remove('hidden');
    document.getElementById('crisisTimer').classList.add('hidden');
    showQuickSaveModal(duration);
  }

  function showQuickSaveModal(duration) {
    const type = appData.crisisButton.custom || appData.crisisButton.type;
    showModal({
      title: 'Enregistrer la crise',
      body: `
        <div style="text-align: center; margin-bottom: 24px;">
          <div style="font-size: 48px; font-weight: 700; color: var(--primary); margin-bottom: 8px;">${formatDuration(duration)}</div>
          <div style="font-size: 16px; color: var(--text-secondary);">Type: ${type}</div>
        </div>
      `,
      footer: `
        <div class="btn-group">
          <button class="btn btn-secondary" id="addDetailsBtn">Ajouter détails</button>
          <button class="btn btn-primary" id="saveQuickBtn">Enregistrer directement</button>
        </div>
      `
    });

    document.getElementById('saveQuickBtn').addEventListener('click', async () => {
      saveCrisis({ type, duration, date: new Date().toISOString(), notes: '' });
      await saveToServer();
      closeModal();
      showToast('Crise enregistrée !', 'success');
      updateAllStats();
    });

    document.getElementById('addDetailsBtn').addEventListener('click', () => {
      closeModal();
      navigateToPage('record');
    });
  }

  function showCrisisSettingsModal() {
    const currentType = appData.crisisButton.type;
    const currentCustom = appData.crisisButton.custom || '';
    const currentColor = appData.crisisButton.color;

    showModal({
      title: 'Personnaliser le bouton',
      body: `
        <div class="form-group">
          <div class="form-label">Type de crise</div>
          ${CRISIS_TYPES.map(type => `
            <div class="type-option ${type.name === currentType && !currentCustom ? 'selected' : ''}" data-type="${type.name}">
              <span class="type-icon">${type.icon}</span>
              <span>${type.name}</span>
            </div>
          `).join('')}
        </div>
        <div class="form-group">
          <label class="form-label" for="customText">Ou texte personnalisé (15 max)</label>
          <input type="text" class="form-input" id="customText" maxlength="15" value="${currentCustom}" placeholder="Texte personnalisé">
        </div>
        <div class="form-group">
          <div class="form-label">Couleur</div>
          <div class="color-grid">
            ${CRISIS_COLORS.map(color => `
              <div class="color-option ${color === currentColor ? 'selected' : ''}" style="background: ${color}" data-color="${color}"></div>
            `).join('')}
          </div>
        </div>
      `,
      footer: `<button class="btn btn-primary btn-full" id="saveCrisisBtn">Enregistrer</button>`
    });

    document.querySelectorAll('.type-option').forEach(opt => {
      opt.addEventListener('click', () => {
        document.querySelectorAll('.type-option').forEach(o => o.classList.remove('selected'));
        opt.classList.add('selected');
        document.getElementById('customText').value = '';
      });
    });

    document.getElementById('customText').addEventListener('input', (e) => {
      if (e.target.value) document.querySelectorAll('.type-option').forEach(o => o.classList.remove('selected'));
    });

    document.querySelectorAll('.color-option').forEach(opt => {
      opt.addEventListener('click', () => {
        document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
        opt.classList.add('selected');
      });
    });

    document.getElementById('saveCrisisBtn').addEventListener('click', async () => {
      const selectedType = document.querySelector('.type-option.selected');
      const custom = document.getElementById('customText').value.trim();
      const selectedColor = document.querySelector('.color-option.selected');

      appData.crisisButton = {
        type: selectedType ? selectedType.dataset.type : currentType,
        custom: custom,
        color: selectedColor ? selectedColor.dataset.color : currentColor
      };

      await saveToServer();
      closeModal();
      showToast('Bouton personnalisé !', 'success');
      navigateToPage('home');
    });
  }
function callCustomEmergencyContact() {
  const contact = appData.profile?.emergencyContacts?.[0];

  if (!contact || !contact.phone) {
    showToast('Aucun contact d’urgence configuré', 'error');
    navigateToPage('profile');
    return;
  }

  const name = contact.name || 'Contact d’urgence';
  const phone = contact.phone.replace(/\s+/g, '');

  showModal({
    title: '📞 Appel d’urgence',
    body: `
      <p style="text-align:center; font-size:16px;">
        Appeler <strong>${name}</strong> ?
      </p>
      <p style="text-align:center; color:var(--text-secondary);">
        ${phone}
      </p>
    `,
    footer: `
      <div class="btn-group">
        <button class="btn btn-secondary" id="cancelEmergencyCall">Annuler</button>
        <button class="btn btn-danger" id="confirmEmergencyCall" style="background:#D32F2F">
          📞 Appeler
        </button>
      </div>
    `
  });

  document.getElementById('cancelEmergencyCall')?.addEventListener('click', closeModal);
  document.getElementById('confirmEmergencyCall')?.addEventListener('click', () => {
    window.location.href = `tel:${phone}`;
    closeModal();
  });
}

function callCustomQuickContact() {
  const cfg = appData.settings?.quickCall || { enabled: true, name: 'Contact', phone: '' };

  if (cfg.enabled === false) {
    showToast('Bouton contact désactivé', 'info');
    return;
  }

  // Si pas de téléphone en paramètres, fallback sur le 1er contact d'urgence du profil
  let name = (cfg.name || 'Contact').trim();
  let phone = (cfg.phone || '').trim();

  if (!phone) {
    const fallback = appData.profile?.emergencyContacts?.[0];
    if (fallback?.phone) {
      phone = fallback.phone;
      if (!name || name === 'Contact') name = fallback.name || 'Contact d’urgence';
    }
  }

  if (!phone) {
    showToast('Configurez un nom et un téléphone dans Paramètres', 'error');
    navigateToPage('settings');
    return;
  }

  phone = phone.replace(/\s+/g, '');

  showModal({
    title: '📞 Appel rapide',
    body: `
      <p style="text-align:center; font-size:16px;">
        Appeler <strong>${name}</strong> ?
      </p>
      <p style="text-align:center; color:var(--text-secondary);">
        ${phone}
      </p>
    `,
    footer: `
      <div class="btn-group">
        <button class="btn btn-secondary" id="quickCallCancel">Annuler</button>
        <button class="btn btn-danger" id="quickCallConfirm" style="background:#D32F2F">
          📞 Appeler
        </button>
      </div>
    `
  });

  // ✅ Pas de onclick inline (sinon closeModal non accessible à cause de l’IIFE)
  document.getElementById('quickCallCancel')?.addEventListener('click', closeModal);
  document.getElementById('quickCallConfirm')?.addEventListener('click', () => {
    window.location.href = `tel:${phone}`;
    closeModal();
  });
}

  function showUrgence112Modal() {
    showModal({
      title: '⚠️ Appeler le 112',
      body: `
        <div style="text-align: center; padding: 20px 0;">
          <p style="font-size: 18px; color: var(--text); margin-bottom: 20px; line-height: 1.6;">
            Voulez-vous appeler les services d'urgence ?
          </p>
        </div>
      `,
      footer: `
        <div class="btn-group">
          <button class="btn btn-secondary" id="cancelCall">Annuler</button>
          <button class="btn btn-danger" id="confirmCall112" style="background: #D32F2F;">Appeler le 112</button>
        </div>
      `
    });

    document.getElementById('cancelCall').addEventListener('click', closeModal);
    document.getElementById('confirmCall112').addEventListener('click', () => {
      window.location.href = 'tel:112';
      closeModal();
    });
  }
  



  function showMedicationReminder() {
    if (appData.medications.length === 0) {
      showToast('Aucun médicament enregistré', 'info');
      setTimeout(() => navigateToPage('treatment'), 1000);
      return;
    }

    const activeMeds = appData.medications.filter(m => m.active);
    if (activeMeds.length === 0) {
      showToast('Aucun traitement actif', 'info');
      return;
    }

    const now = new Date();
    const currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;

    let nextReminder = null;
    let nextMed = null;

    activeMeds.forEach(med => {
      med.times.forEach(time => {
        if (time >= currentTime && (!nextReminder || time < nextReminder)) {
          nextReminder = time;
          nextMed = med;
        }
      });
    });

    if (!nextMed) {
      nextMed = activeMeds[0];
      nextReminder = activeMeds[0].times[0];
    }

    const medName = nextMed.name === 'Autre (personnalisé)' ? nextMed.customName : nextMed.name;
    showToast(`Prochain rappel : ${medName} à ${nextReminder}`, 'success');
    setTimeout(() => navigateToPage('treatment'), 2000);
  }
 
  function showEmergencyNumbers() {
    const emergencyNumbers = [
      {
        category: 'Urgences médicales', numbers: [
          { num: '112', label: 'Urgences (pompiers, ambulance, police)' },
          { num: '101', label: 'Police (interventions urgentes)' },
          { num: '1733', label: 'Médecin de garde (non urgent)' }
        ]
      },
      {
        category: 'Services spécialisés', numbers: [
          { num: '070 245 245', label: 'Centre Antipoison (24/7)' },
          { num: '0800 32 123', label: 'Télé-Accueil (aide psychologique)' }
        ]
      }
    ];

    const body = emergencyNumbers.map(cat => `
      <div style="margin-bottom: 24px;">
        <div style="font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 12px;">${cat.category}</div>
        <div style="display: flex; flex-direction: column; gap: 8px;">
          ${cat.numbers.map(n => `
            <a href="tel:${n.num.replace(/\s/g, '')}" class="emergency-number-card" style="display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: all 0.2s;">
              <span style="font-size: 24px;">📞</span>
              <div style="flex: 1;">
                <div style="font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 2px;">${n.num}</div>
                <div style="font-size: 13px; color: var(--text-secondary);">${n.label}</div>
              </div>
            </a>
          `).join('')}
        </div>
      </div>
    `).join('');

    showModal({
      title: '📞 Numéros d\'urgence',
      body: body,
      footer: ''
    });
  }

  // ========= ENREGISTREMENT MANUEL =========

  let selectedDate = null;
  let selectedTime = null;
  let currentCalendarMonth = new Date();

  function renderRecordPage() {
  try {
    const main = document.getElementById('mainContent');
    if (!main) return;

    // ===== Cleanup (si on revient sur la page, on évite les listeners empilés) =====
    if (typeof window.__recordCleanup === 'function') {
      try { window.__recordCleanup(); } catch (e) {}
      window.__recordCleanup = null;
    }
    const ac = new AbortController();
    const { signal } = ac;
    window.__recordCleanup = () => ac.abort();

    // ===== Helpers =====
    const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (m) => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[m]));

    const pad2 = (n) => String(n).padStart(2, '0');

    const toLocalDate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
    const toLocalTime = (d) => `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;

    const prettyDateTime = (iso) => {
      const d = new Date(iso);
      if (isNaN(d.getTime())) return 'Date inconnue';
      return `${pad2(d.getDate())}/${pad2(d.getMonth() + 1)}/${d.getFullYear()} • ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
    };

    const safeSave = () => {
      try {
        if (typeof saveAppDataLocal === 'function') return saveAppDataLocal();
      } catch (e) {}
      // fallback si jamais
      try { localStorage.setItem('epimaat_data', JSON.stringify(window.appData)); } catch (e) {}
    };

    const ensureData = () => {
      if (!window.appData) window.appData = {};
      if (!Array.isArray(window.appData.crises)) window.appData.crises = [];
    };

    const uid = () => `c_${Date.now()}_${Math.random().toString(16).slice(2)}`;

    const go = (pageId) => {
      if (typeof window.navigateTo === 'function') window.navigateTo(pageId, true);
      else location.hash = '#' + pageId;
    };

    // ===== Options enrichies =====
    const TRIGGERS = [
      'Manque de sommeil', 'Stress', 'Anxiété', 'Fatigue', 'Lumières clignotantes',
      'Écrans (trop longtemps)', 'Alcool', 'Oubli de traitement', 'Retard de prise',
      'Changement de dose', 'Fièvre / infection', 'Douleur', 'Déshydratation',
      'Hypoglycémie / saut de repas', 'Chaleur', 'Froid', 'Règles / cycle',
      'Émotion forte', 'Surmenage', 'Bruit', 'Foule', 'Voyage', 'Décalage horaire',
      'Caféine', 'Sport intense', 'Conflit', 'Mauvaise nouvelle', 'Post-partum', 'Autre'
    ];

    const SYMPTOMS = [
      'Aura', 'Absence / regard fixe', 'Confusion', 'Troubles de la parole',
      'Perte de connaissance', 'Chute', 'Raideur', 'Secousses', 'Morsure de langue',
      'Bave', 'Respiration irrégulière', 'Cyanose (lèvres bleues)', 'Tremblements',
      'Fourmillements', 'Engourdissement', 'Nausée', 'Vomissements', 'Vertiges',
      'Céphalée', 'Somnolence', 'Amnésie', 'Agitation', 'Peur', 'Hallucinations',
      'Vision floue', 'Incontinence', 'Douleurs musculaires', 'Blessure', 'Autre'
    ];

    // Types de crise (fallback si CRISIS_TYPES absent)
    const typeOptions = (() => {
      try {
        if (typeof CRISIS_TYPES !== 'undefined' && Array.isArray(CRISIS_TYPES) && CRISIS_TYPES.length) {
          return CRISIS_TYPES
            .map(t => `<option value="${esc(t.name)}">${esc(t.icon)} ${esc(t.name)}</option>`)
            .join('');
        }
      } catch (e) {}
      return `
        <option value="Focale">Focale</option>
        <option value="Généralisée">Généralisée</option>
        <option value="Absence">Absence</option>
        <option value="Myoclonique">Myoclonique</option>
        <option value="Autre">Autre</option>
      `;
    })();

    const sectionCard = (title, icon, content) => `
      <div class="card" style="margin-bottom:16px;">
        <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
          <div style="font-size:22px; line-height:1;">${icon}</div>
          <div style="font-weight:800; font-size:18px;">${title}</div>
        </div>
        <div style="color: var(--text-secondary); line-height:1.65; font-size:15px;">
          ${content}
        </div>
      </div>
    `;

    const renderChips = (arr) => {
      if (!arr || !arr.length) return `<span style="color:var(--text-secondary)">—</span>`;
      return arr.map(x => `
        <span style="
          display:inline-flex; align-items:center;
          padding:6px 10px; border-radius:999px;
          border:1px solid var(--border);
          background: rgba(107,154,166,0.08);
          margin:4px 6px 0 0;
          font-size:12px; font-weight:800;
          color: var(--text);
        ">${esc(x)}</span>
      `).join('');
    };

    const renderList = () => {
      ensureData();
      const wrap = main.querySelector('#recordListWrap');
      if (!wrap) return;

      const items = [...window.appData.crises].sort((a, b) => {
        const ta = new Date(a.datetimeISO || 0).getTime();
        const tb = new Date(b.datetimeISO || 0).getTime();
        return tb - ta;
      });

      if (!items.length) {
        wrap.innerHTML = `<div style="color:var(--text-secondary)">Aucun enregistrement pour le moment.</div>`;
        return;
      }

      wrap.innerHTML = items.map(c => `
        <div class="card" style="margin:12px 0;">
          <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;">
            <div>
              <div style="font-weight:900; font-size:16px; color:var(--text);">
                🧠 ${esc(c.type || 'Crise')}
              </div>
              <div style="color:var(--text-secondary); font-size:13px; margin-top:4px;">
                ${esc(prettyDateTime(c.datetimeISO))}
                ${c.durationMin ? ` • ${esc(c.durationMin)} min` : ''}
                ${c.intensity ? ` • ${esc(c.intensity)}` : ''}
              </div>
            </div>

            <div style="display:flex; gap:8px;">
              <button class="btn btn-secondary" data-rec-action="edit" data-id="${esc(c.id)}">✏️ Modifier</button>
              <button class="btn btn-secondary" data-rec-action="delete" data-id="${esc(c.id)}">🗑️ Supprimer</button>
            </div>
          </div>

          <div style="margin-top:10px;">
            <div style="font-size:12px; font-weight:900; color:var(--text-secondary);">Déclencheurs</div>
            <div>${renderChips(c.triggers)}</div>
          </div>

          <div style="margin-top:10px;">
            <div style="font-size:12px; font-weight:900; color:var(--text-secondary);">Symptômes</div>
            <div>${renderChips(c.symptoms)}</div>
          </div>

          ${c.notes ? `
            <div style="margin-top:10px;">
              <div style="font-size:12px; font-weight:900; color:var(--text-secondary);">Notes</div>
              <div style="color:var(--text);">${esc(c.notes)}</div>
            </div>
          ` : ''}
        </div>
      `).join('');
    };

    const setFormFromCrisis = (c) => {
      const idEl = main.querySelector('#rec_edit_id');
      const typeEl = main.querySelector('#crisisType');
      const dateEl = main.querySelector('#crisisDate');
      const timeEl = main.querySelector('#crisisTime');
      const durEl = main.querySelector('#durationMin');
      const intEl = main.querySelector('#intensity');
      const notesEl = main.querySelector('#notes');

      if (idEl) idEl.value = c?.id || '';
      if (typeEl) typeEl.value = c?.type || typeEl.value;

      const d = c?.datetimeISO ? new Date(c.datetimeISO) : new Date();
      if (dateEl) dateEl.value = toLocalDate(d);
      if (timeEl) timeEl.value = toLocalTime(d);

      if (durEl) durEl.value = c?.durationMin ?? '';
      if (intEl) intEl.value = c?.intensity ?? '';
      if (notesEl) notesEl.value = c?.notes ?? '';

      // checkbox triggers/symptoms
      const trigSet = new Set(Array.isArray(c?.triggers) ? c.triggers : []);
      main.querySelectorAll('input[name="triggers"]').forEach(cb => cb.checked = trigSet.has(cb.value));

      const symSet = new Set(Array.isArray(c?.symptoms) ? c.symptoms : []);
      main.querySelectorAll('input[name="symptoms"]').forEach(cb => cb.checked = symSet.has(cb.value));

      const banner = main.querySelector('#editBanner');
      if (banner) banner.style.display = c?.id ? 'block' : 'none';
    };

    const clearForm = () => setFormFromCrisis(null);

    const collectChecked = (name) => {
      const arr = [];
      main.querySelectorAll(`input[name="${name}"]:checked`).forEach(cb => arr.push(cb.value));
      // si "Autre" coché, on garde aussi le champ texte si rempli
      if (name === 'triggers') {
        const other = main.querySelector('#triggerOther');
        const otherBox = main.querySelector('#triggerOtherBox');
        if (otherBox?.checked && other?.value?.trim()) arr.push(`Autre: ${other.value.trim()}`);
      }
      if (name === 'symptoms') {
        const other = main.querySelector('#symptomOther');
        const otherBox = main.querySelector('#symptomOtherBox');
        if (otherBox?.checked && other?.value?.trim()) arr.push(`Autre: ${other.value.trim()}`);
      }
      return arr;
    };

    // ===== UI =====
    ensureData();
    const now = new Date();

    main.innerHTML = `
      <div class="recording-header">
        <h1 class="recording-title">📝 Enregistrement</h1>
        <p class="recording-subtitle">Ajouter une crise + gérer vos enregistrements (modifier / supprimer)</p>
      </div>

      <div class="card" style="margin-bottom:16px;">
        <div style="display:flex; gap:12px; flex-wrap:wrap;">
          <button class="btn btn-primary btn-full" data-rec-nav="tracking">📊 Aller au Suivi</button>
          <button class="btn btn-secondary btn-full" data-rec-nav="guide">📖 Guide des crises</button>
        </div>
      </div>

      <div id="editBanner" class="warning-box" style="display:none; margin-bottom:16px;">
        <div class="warning-box-title">✏️ Mode modification</div>
        <div style="color:var(--text-secondary); line-height:1.6;">
          Tu modifies un enregistrement existant. Pense à enregistrer ou annuler.
        </div>
        <div style="margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;">
          <button class="btn btn-secondary" data-rec-action="cancelEdit">Annuler</button>
        </div>
      </div>

      <form id="recordForm">
        <input type="hidden" id="rec_edit_id" value="">

        ${sectionCard('📅 Type & date', '🗓️', `
          <div class="form-group">
            <label class="form-label required" for="crisisType">Type de crise</label>
            <select class="form-input form-select" id="crisisType" required>
              ${typeOptions}
            </select>
          </div>

          <div class="form-group">
            <label class="form-label required" for="crisisDate">Date</label>
            <input class="form-input" type="date" id="crisisDate" value="${esc(toLocalDate(now))}" required>
          </div>

          <div class="form-group">
            <label class="form-label required" for="crisisTime">Heure</label>
            <input class="form-input" type="time" id="crisisTime" value="${esc(toLocalTime(now))}" required>
          </div>
        `)}

        ${sectionCard('⏱️ Durée & intensité', '📌', `
          <div class="form-group">
            <label class="form-label" for="durationMin">Durée (minutes)</label>
            <input class="form-input" type="number" id="durationMin" min="0" max="999" placeholder="Ex: 2">
          </div>

          <div class="form-group">
            <label class="form-label" for="intensity">Intensité</label>
            <select class="form-input form-select" id="intensity">
              <option value="">—</option>
              <option value="Faible">Faible</option>
              <option value="Modérée">Modérée</option>
              <option value="Forte">Forte</option>
              <option value="Très forte">Très forte</option>
            </select>
          </div>
        `)}

        ${sectionCard('🧩 Détails de la crise', '🧠', `
          <details style="border:1px solid var(--border); border-radius:14px; padding:12px; background: rgba(107,154,166,0.04);">
            <summary style="cursor:pointer; font-weight:900; color:var(--text);">
              Ouvrir / fermer les détails (déclencheurs & symptômes)
            </summary>

            <div style="margin-top:12px;">
              <div style="font-weight:900; font-size:13px; color:var(--text-secondary); margin-bottom:8px;">
                Déclencheurs (plusieurs choix)
              </div>
              <div style="display:flex; flex-wrap:wrap; gap:10px;">
                ${TRIGGERS.map(t => `
                  <label style="display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:#fff;">
                    <input type="checkbox" name="triggers" value="${esc(t)}">
                    <span style="font-size:13px; font-weight:800; color:var(--text);">${esc(t)}</span>
                  </label>
                `).join('')}
              </div>

              <div style="margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                <label style="display:flex; align-items:center; gap:8px;">
                  <input type="checkbox" id="triggerOtherBox" name="triggers" value="Autre">
                  <span style="font-weight:800;">Autre :</span>
                </label>
                <input class="form-input" id="triggerOther" placeholder="Préciser (optionnel)">
              </div>
            </div>

            <div style="margin-top:16px;">
              <div style="font-weight:900; font-size:13px; color:var(--text-secondary); margin-bottom:8px;">
                Symptômes (plusieurs choix)
              </div>
              <div style="display:flex; flex-wrap:wrap; gap:10px;">
                ${SYMPTOMS.map(s => `
                  <label style="display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:#fff;">
                    <input type="checkbox" name="symptoms" value="${esc(s)}">
                    <span style="font-size:13px; font-weight:800; color:var(--text);">${esc(s)}</span>
                  </label>
                `).join('')}
              </div>

              <div style="margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                <label style="display:flex; align-items:center; gap:8px;">
                  <input type="checkbox" id="symptomOtherBox" name="symptoms" value="Autre">
                  <span style="font-weight:800;">Autre :</span>
                </label>
                <input class="form-input" id="symptomOther" placeholder="Préciser (optionnel)">
              </div>
            </div>
          </details>
        `)}

        ${sectionCard('🗒️ Notes', '✍️', `
          <div class="form-group">
            <label class="form-label" for="notes">Notes (facultatif)</label>
            <textarea class="form-textarea" id="notes" rows="3" placeholder="Ex: contexte, récupération, blessure..."></textarea>
          </div>
        `)}

        <div class="card" style="margin-bottom:16px;">
          <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <button type="submit" class="btn btn-primary btn-full" data-rec-action="save">✅ Enregistrer</button>
            <button type="button" class="btn btn-secondary btn-full" data-rec-action="reset">♻️ Réinitialiser</button>
          </div>
          <div id="recStatus" style="margin-top:10px; color:var(--text-secondary); font-size:13px; line-height:1.5;"></div>
        </div>
      </form>

      ${sectionCard('📚 Vos enregistrements', '🗂️', `
        <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
          <button class="btn btn-secondary btn-full" data-rec-action="refresh">🔄 Actualiser</button>
          <button class="btn btn-primary btn-full" data-rec-nav="tracking">📊 Voir le Suivi</button>
        </div>
        <div id="recordListWrap"></div>
      `)}
    `;

    // ===== List init =====
    renderList();
    setFormFromCrisis(null);

    // ===== Submit (prevent default) =====
    const form = main.querySelector('#recordForm');
    if (form) {
      form.addEventListener('submit', (e) => {
        e.preventDefault();
      }, { signal });
    }

    // ===== 1 seul listener (délégation) =====
    main.addEventListener('click', async (ev) => {
      const navBtn = ev.target.closest('[data-rec-nav]');
      const actionBtn = ev.target.closest('[data-rec-action]');
      const itemBtn = ev.target.closest('[data-rec-action][data-id]');

      if (navBtn) {
        const dest = navBtn.getAttribute('data-rec-nav');
        if (dest) go(dest);
        return;
      }

      if (itemBtn) {
        const action = itemBtn.getAttribute('data-rec-action');
        const id = itemBtn.getAttribute('data-id');
        if (!id) return;

        ensureData();
        const idx = window.appData.crises.findIndex(x => x && x.id === id);
        if (idx === -1) return;

        if (action === 'delete') {
          const ok = confirm('Supprimer cet enregistrement ?');
          if (!ok) return;
          window.appData.crises.splice(idx, 1);
          safeSave();
          renderList();
          const status = main.querySelector('#recStatus');
          if (status) status.textContent = '🗑️ Enregistrement supprimé.';
          return;
        }

        if (action === 'edit') {
          const c = window.appData.crises[idx];
          setFormFromCrisis(c);
          const status = main.querySelector('#recStatus');
          if (status) status.textContent = '✏️ Modification : mets à jour puis “Enregistrer”.';
          // scroll vers le haut du formulaire
          try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) {}
          return;
        }
      }

      if (actionBtn) {
        const action = actionBtn.getAttribute('data-rec-action');

        if (action === 'refresh') {
          renderList();
          const status = main.querySelector('#recStatus');
          if (status) status.textContent = '🔄 Liste actualisée.';
          return;
        }

        if (action === 'reset') {
          clearForm();
          const status = main.querySelector('#recStatus');
          if (status) status.textContent = '♻️ Formulaire réinitialisé.';
          return;
        }

        if (action === 'cancelEdit') {
          clearForm();
          const status = main.querySelector('#recStatus');
          if (status) status.textContent = '✅ Mode modification annulé.';
          return;
        }

        if (action === 'save') {
          ensureData();

          const idEl = main.querySelector('#rec_edit_id');
          const typeEl = main.querySelector('#crisisType');
          const dateEl = main.querySelector('#crisisDate');
          const timeEl = main.querySelector('#crisisTime');
          const durEl = main.querySelector('#durationMin');
          const intEl = main.querySelector('#intensity');
          const notesEl = main.querySelector('#notes');
          const status = main.querySelector('#recStatus');

          const type = typeEl?.value?.trim();
          const date = dateEl?.value;
          const time = timeEl?.value;

          if (!type || !date || !time) {
            if (status) status.textContent = '⚠️ Remplis au minimum : Type + Date + Heure.';
            return;
          }

          const dtISO = new Date(`${date}T${time}:00`).toISOString();
          const durationMin = durEl?.value ? Number(durEl.value) : null;
          const intensity = intEl?.value?.trim() || '';
          const notes = notesEl?.value?.trim() || '';

          const triggers = collectChecked('triggers');
          const symptoms = collectChecked('symptoms');

          const editId = idEl?.value?.trim();
          if (editId) {
            const idx = window.appData.crises.findIndex(x => x && x.id === editId);
            if (idx !== -1) {
              window.appData.crises[idx] = {
                ...window.appData.crises[idx],
                id: editId,
                type,
                datetimeISO: dtISO,
                durationMin: (Number.isFinite(durationMin) ? durationMin : null),
                intensity,
                triggers,
                symptoms,
                notes,
                updatedAtISO: new Date().toISOString()
              };
              safeSave();
              renderList();
              if (status) status.textContent = '✅ Enregistrement mis à jour.';
              clearForm();
              return;
            }
          }

          // new
          const crisis = {
            id: uid(),
            type,
            datetimeISO: dtISO,
            durationMin: (Number.isFinite(durationMin) ? durationMin : null),
            intensity,
            triggers,
            symptoms,
            notes,
            createdAtISO: new Date().toISOString()
          };
          window.appData.crises.push(crisis);
          safeSave();
          renderList();
          if (status) status.textContent = '✅ Enregistrement ajouté. Tu peux le modifier dans la liste ci-dessous.';
          clearForm();
          return;
        }
      }
    }, { signal });

  } catch (err) {
    console.error('renderRecordPage error:', err);
    // fallback minimal pour éviter page blanche
    const main = document.getElementById('mainContent');
    if (main) main.innerHTML = `<div class="card"><b>Erreur</b><div style="color:var(--text-secondary)">Impossible d’afficher Enregistrement.</div></div>`;
  }
}

  function formatDateDisplay(date) {
    const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
    return date.toLocaleDateString('fr-FR', options);
  }

  function formatTimeDisplay(date) {
    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
  }

  function updateDateTimeHiddenInputs() {
    if (selectedDate) {
      const dateStr = selectedDate.toISOString().split('T')[0];
      const dateInput = document.getElementById('crisisDate');
      if (dateInput) dateInput.value = dateStr;

      const dateDisplay = document.getElementById('crisisDateDisplay');
      if (dateDisplay) dateDisplay.textContent = formatDateDisplay(selectedDate);
    }

    if (selectedTime) {
      const timeStr = `${String(selectedTime.hours).padStart(2, '0')}:${String(selectedTime.minutes).padStart(2, '0')}`;
      const timeInput = document.getElementById('crisisTime');
      if (timeInput) timeInput.value = timeStr;

      const timeDisplay = document.getElementById('crisisTimeDisplay');
      if (timeDisplay) timeDisplay.textContent = timeStr;
    }
  }

  function showDatePicker() {
    currentCalendarMonth = new Date(selectedDate || new Date());
    const overlay = document.createElement('div');
    overlay.className = 'picker-overlay';
    overlay.id = 'pickerOverlay';

    const modal = document.createElement('div');
    modal.className = 'picker-modal';
    modal.innerHTML = `
      <div class="picker-header">
        <h3>📅 Sélectionner la date</h3>
        <button class="picker-close-btn" onclick="window.closePicker()">×</button>
      </div>
      <div class="picker-body">
        <div class="date-navigation">
          <button class="nav-btn" id="prevMonthBtn">‹</button>
          <span class="current-month-year" id="currentMonthYear"></span>
          <button class="nav-btn" id="nextMonthBtn">›</button>
        </div>
        <div class="calendar-grid" id="calendarGrid"></div>
        <button class="quick-btn" id="todayBtn">📅 Aujourd'hui</button>
      </div>
      <div class="picker-footer">
        <button class="btn-cancel" onclick="window.closePicker()">Annuler</button>
        <button class="btn-validate" id="validateDateBtn">Valider</button>
      </div>
    `;

    overlay.appendChild(modal);
    document.body.appendChild(overlay);

    setTimeout(() => overlay.classList.add('active'), 10);

    renderCalendar();

    document.getElementById('prevMonthBtn').addEventListener('click', () => {
      currentCalendarMonth.setMonth(currentCalendarMonth.getMonth() - 1);
      renderCalendar();
    });

    document.getElementById('nextMonthBtn').addEventListener('click', () => {
      currentCalendarMonth.setMonth(currentCalendarMonth.getMonth() + 1);
      renderCalendar();
    });

    document.getElementById('todayBtn').addEventListener('click', () => {
      selectedDate = new Date();
      currentCalendarMonth = new Date();
      renderCalendar();
    });

    document.getElementById('validateDateBtn').addEventListener('click', () => {
      updateDateTimeHiddenInputs();
      window.closePicker();
    });

    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) window.closePicker();
    });
  }

  function renderCalendar() {
    const monthYear = document.getElementById('currentMonthYear');
    const grid = document.getElementById('calendarGrid');
    if (!monthYear || !grid) return;

    const year = currentCalendarMonth.getFullYear();
    const month = currentCalendarMonth.getMonth();

    monthYear.textContent = currentCalendarMonth.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });

    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startDay = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
    const daysInMonth = lastDay.getDate();

    const dayHeaders = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
    let html = dayHeaders.map(d => `<div class="day-header">${d}</div>`).join('');

    const prevMonthDays = new Date(year, month, 0).getDate();
    for (let i = startDay - 1; i >= 0; i--) {
      html += `<div class="day-cell other-month">${prevMonthDays - i}</div>`;
    }

    const today = new Date();
    const todayStr = today.toDateString();
    const selectedStr = selectedDate ? selectedDate.toDateString() : null;

    for (let day = 1; day <= daysInMonth; day++) {
      const date = new Date(year, month, day);
      const dateStr = date.toDateString();
      const isToday = dateStr === todayStr;
      const isSelected = dateStr === selectedStr;

      let classes = 'day-cell';
      if (isToday) classes += ' today';
      if (isSelected) classes += ' selected';

      html += `<div class="${classes}" data-date="${date.toISOString()}">${day}</div>`;
    }

    const totalCells = startDay + daysInMonth;
    const remainingCells = 7 - (totalCells % 7);
    if (remainingCells < 7) {
      for (let i = 1; i <= remainingCells; i++) {
        html += `<div class="day-cell other-month">${i}</div>`;
      }
    }

    grid.innerHTML = html;

    grid.querySelectorAll('.day-cell:not(.other-month)').forEach(cell => {
      cell.addEventListener('click', () => {
        const dateStr = cell.dataset.date;
        if (dateStr) {
          selectedDate = new Date(dateStr);
          renderCalendar();
        }
      });
    });
  }

  function showTimePicker() {
    const overlay = document.createElement('div');
    overlay.className = 'picker-overlay';
    overlay.id = 'pickerOverlay';

    const modal = document.createElement('div');
    modal.className = 'picker-modal';
    modal.innerHTML = `
      <div class="picker-header">
        <h3>⏰ Sélectionner l'heure</h3>
        <button class="picker-close-btn" onclick="window.closePicker()">×</button>
      </div>
      <div class="picker-body">
        <div class="time-selector">
          <div class="time-column">
            <div class="time-label">Heures</div>
            <div class="time-scroll" id="hoursScroll"></div>
          </div>
          <div class="time-separator">:</div>
          <div class="time-column">
            <div class="time-label">Minutes</div>
            <div class="time-scroll" id="minutesScroll"></div>
          </div>
        </div>
        <button class="quick-btn" id="nowBtn">⏰ Maintenant</button>
      </div>
      <div class="picker-footer">
        <button class="btn-cancel" onclick="window.closePicker()">Annuler</button>
        <button class="btn-validate" id="validateTimeBtn">Valider</button>
      </div>
    `;

    overlay.appendChild(modal);
    document.body.appendChild(overlay);

    setTimeout(() => overlay.classList.add('active'), 10);

    initializeTimeScrolls();

    document.getElementById('nowBtn').addEventListener('click', () => {
      const now = new Date();
      selectedTime = { hours: now.getHours(), minutes: now.getMinutes() };
      initializeTimeScrolls();
    });

    document.getElementById('validateTimeBtn').addEventListener('click', () => {
      updateDateTimeHiddenInputs();
      window.closePicker();
    });

    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) window.closePicker();
    });
  }

  function initializeTimeScrolls() {
    const hoursScroll = document.getElementById('hoursScroll');
    const minutesScroll = document.getElementById('minutesScroll');
    if (!hoursScroll || !minutesScroll) return;

    let hoursHTML = '';
    for (let h = 0; h < 24; h++) {
      const hourStr = String(h).padStart(2, '0');
      const isSelected = selectedTime && selectedTime.hours === h;
      hoursHTML += `<div class="time-value ${isSelected ? 'selected' : ''}" data-value="${h}">${hourStr}</div>`;
    }
    hoursScroll.innerHTML = hoursHTML;

    let minutesHTML = '';
    for (let m = 0; m < 60; m++) {
      const minStr = String(m).padStart(2, '0');
      const isSelected = selectedTime && selectedTime.minutes === m;
      minutesHTML += `<div class="time-value ${isSelected ? 'selected' : ''}" data-value="${m}">${minStr}</div>`;
    }
    minutesScroll.innerHTML = minutesHTML;

    hoursScroll.querySelectorAll('.time-value').forEach(el => {
      el.addEventListener('click', () => {
        selectedTime.hours = parseInt(el.dataset.value, 10);
        initializeTimeScrolls();
      });
    });

    minutesScroll.querySelectorAll('.time-value').forEach(el => {
      el.addEventListener('click', () => {
        selectedTime.minutes = parseInt(el.dataset.value, 10);
        initializeTimeScrolls();
      });
    });

    if (selectedTime) {
      setTimeout(() => {
        const selectedHour = hoursScroll.querySelector('.selected');
        const selectedMin = minutesScroll.querySelector('.selected');
        if (selectedHour) selectedHour.scrollIntoView({ block: 'center', behavior: 'smooth' });
        if (selectedMin) selectedMin.scrollIntoView({ block: 'center', behavior: 'smooth' });
      }, 100);
    }
  }

  window.closePicker = function () {
    const overlay = document.getElementById('pickerOverlay');
    if (overlay) {
      overlay.classList.remove('active');
      setTimeout(() => overlay.remove(), 300);
    }
  };

// ========= PAGE SUIVI (SAFE: SUPPRIMER + MODIFIER, SANS CASSER) =========
// ✅ Version complète (coller/remplacer ton bloc Suivi)
// ✅ Améliore la section stats: jour/semaine/mois/année, durée totale & moyenne,
//    top type, jours sans crise, tendance semaine, mini tendance 4 semaines.
// ✅ Compatible avec tes fonctions existantes: filterCrises, exportPDF, deleteCrisis,
//    saveToServer, updateAllStats, showToast, formatDuration, etc.

function renderTrackingPage() {
  const main = document.getElementById('mainContent');
  if (!main) return;

  const crises = Array.isArray(appData.crises) ? appData.crises : [];

  // ✅ Stats améliorées (safe, ne modifie pas appData)
  const statsX = calculateStatsEnhanced(crises);

  const last = statsX.lastDate;
  const lastCrisisText = last
    ? `${last.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })} ${last.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
    : 'Aucune';

  const topTypeText = statsX.topType
    ? `${statsX.topType.icon || '🔹'} ${statsX.topType.name} (${statsX.topType.count})`
    : '—';

  const daysSinceText = (statsX.daysSinceLast == null)
    ? '—'
    : (statsX.daysSinceLast === 0 ? "0 j" : `${statsX.daysSinceLast} j`);

  const weekTrendText = (statsX.weekDeltaPct == null)
    ? '—'
    : `${statsX.weekDeltaPct > 0 ? '↗' : statsX.weekDeltaPct < 0 ? '↘' : '→'} ${Math.abs(statsX.weekDeltaPct)}%`;

  const totalDurText = minutesToPretty(statsX.totalDurationMin);
  const avgDurText = statsX.avgDurationMin != null ? minutesToPretty(statsX.avgDurationMin) : '—';

  main.innerHTML = `
    <h1 class="page-header">Suivi - Historique des crises</h1>

    <!-- ✅ STATS AMÉLIORÉES -->
    <div class="card" style="margin-bottom:16px;">
      <div class="section-title" style="margin-bottom:10px;">📊 Statistiques</div>

      <div class="stats-grid" style="margin-bottom:10px;">
        <div class="stat-card">
          <div class="stat-label">Total</div>
          <div class="stat-value">${statsX.total}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Aujourd’hui</div>
          <div class="stat-value">${statsX.today}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Cette semaine</div>
          <div class="stat-value">${statsX.week}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Ce mois</div>
          <div class="stat-value">${statsX.month}</div>
        </div>
      </div>

      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-label">Cette année</div>
          <div class="stat-value">${statsX.year}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Dernière crise</div>
          <div class="stat-value" style="font-size:14px; line-height:1.2;">${lastCrisisText}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Jours sans crise</div>
          <div class="stat-value">${daysSinceText}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Type le + fréquent</div>
          <div class="stat-value" style="font-size:14px; line-height:1.2;">${escapeHTML(topTypeText)}</div>
        </div>
      </div>

      <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px;">
        <div style="padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);">
          <div style="font-weight:800;">⏱ Durée totale</div>
          <div style="color:var(--text-secondary); font-size:13px; margin-top:4px;">
            ${totalDurText} (toutes crises)
          </div>
        </div>

        <div style="padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);">
          <div style="font-weight:800;">📌 Durée moyenne</div>
          <div style="color:var(--text-secondary); font-size:13px; margin-top:4px;">
            ${avgDurText} / crise
          </div>
        </div>
      </div>

      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;">
        <div style="flex:1; min-width:220px; padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);">
          <div style="font-weight:800;">📈 Tendance semaine</div>
          <div style="color:var(--text-secondary); font-size:13px; margin-top:4px;">
            vs semaine précédente : <strong>${weekTrendText}</strong>
          </div>
        </div>

        <div style="flex:1; min-width:220px; padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);">
          <div style="font-weight:800;">🗓 4 dernières semaines</div>
          <div style="margin-top:8px; display:flex; gap:8px; align-items:flex-end; height:46px;">
            ${renderMiniBars(statsX.last4WeeksCounts)}
          </div>
          <div style="color:var(--text-secondary); font-size:12px; margin-top:6px;">
            ${statsX.last4WeeksCounts.join(' • ')} (de la plus ancienne à la plus récente)
          </div>
        </div>
      </div>
    </div>

    <div class="card filter-section">
      <div class="filter-row">
        <div class="form-group">
          <label class="form-label" for="filterType">Type de crise</label>
          <select class="form-select" id="filterType">
            <option value="">Toutes</option>
            ${CRISIS_TYPES.map(t => `<option value="${escapeHTML(t.name)}">${escapeHTML(t.name)}</option>`).join('')}
          </select>
        </div>

        <div class="form-group">
          <label class="form-label" for="filterPeriod">Période</label>
          <select class="form-select" id="filterPeriod">
            <option value="all">Toutes</option>
            <option value="today">Aujourd'hui</option>
            <option value="week">Cette semaine</option>
            <option value="month">Ce mois</option>
            <option value="year">Cette année</option>
          </select>
        </div>
      </div>

      <button class="btn btn-primary btn-full" id="exportBtn">📄 Exporter en PDF</button>
    </div>

    <div id="crisisListContainer"></div>
    <div class="card" id="typesSummary" style="margin-top:24px;"></div>
  `;

  // Rendu initial
  refreshTrackingUI();

  // ✅ Refresh léger (évite spam)
  const scheduleRefresh = debounce(refreshTrackingUI, 60);
  document.getElementById('filterType')?.addEventListener('change', scheduleRefresh);
  document.getElementById('filterPeriod')?.addEventListener('change', scheduleRefresh);
  document.getElementById('exportBtn')?.addEventListener('click', exportPDF);

  // ✅ 1 seul listener pour: modifier/supprimer/enregistrer/annuler
  const list = document.getElementById('crisisListContainer');
  if (list) {
    list.addEventListener('click', async (e) => {
      const btn = e.target.closest('button[data-action]');
      if (!btn) return;

      const action = btn.dataset.action;
      const id = parseInt(btn.dataset.id, 10);
      if (!Number.isFinite(id)) return;

      if (action === 'delete') {
        if (!confirm('Supprimer cette crise ?')) return;
        try {
          deleteCrisis(id);
          await saveToServer();
          refreshTrackingUI();
          updateAllStats();
          showToast('Crise supprimée', 'success');
        } catch (err) {
          console.error(err);
          showToast('Erreur lors de la suppression', 'error');
        }
        return;
      }

      if (action === 'edit') {
        openInlineEditor(id);
        return;
      }

      if (action === 'cancel-edit') {
        closeInlineEditor(id);
        return;
      }

      if (action === 'save-edit') {
        await saveInlineEditor(id);
        return;
      }
    });
  }
}

function refreshTrackingUI() {
  renderCrisisList();
  renderTypesSummary();
}

function renderCrisisList() {
  const container = document.getElementById('crisisListContainer');
  if (!container) return;

  const filterType = document.getElementById('filterType')?.value || '';
  const filterPeriod = document.getElementById('filterPeriod')?.value || 'all';

  const filtered = filterCrises(appData.crises, filterType, filterPeriod) || [];
  const sorted = [...filtered].sort((a, b) => new Date(b.date) - new Date(a.date)); // ✅ copie

  if (sorted.length === 0) {
    container.innerHTML = '<div class="empty-state"><div class="empty-icon">📋</div><div class="empty-text">Aucune crise enregistrée</div></div>';
    return;
  }

  container.innerHTML = sorted.map(crisis => {
    const date = new Date(crisis.date);
    const typeInfo = CRISIS_TYPES.find(t => t.name === crisis.type) || { icon: '🔹' };

    const safeType = escapeHTML(crisis.type || '');
    const safeNotes = (crisis.notes || '').trim();

    const dtLocal = toDatetimeLocalValue(date);
    const durationMin = durationToMinutes(crisis.duration);

    return `
      <div class="crisis-card" data-crisis-card="${crisis.id}">
        <div class="crisis-card-header">
          <div>
            <div class="crisis-card-date">${date.toLocaleDateString('fr-FR', { weekday:'long', day:'numeric', month:'long', year:'numeric' })}</div>
            <div class="crisis-card-time">${date.toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' })}</div>
          </div>
          <div class="crisis-badge">${typeInfo.icon} ${safeType}</div>
        </div>

        <div class="crisis-card-body">
          <div class="crisis-info-row">
            <span class="crisis-info-label">Durée:</span>
            <span>${formatDuration(crisis.duration)}</span>
          </div>
          ${safeNotes ? `<div class="crisis-notes">${escapeHTML(safeNotes).replace(/\n/g, '<br>')}</div>` : ''}
        </div>

        <div class="crisis-card-footer" style="display:flex; gap:10px; flex-wrap:wrap;">
          <button class="btn btn-secondary btn-small" data-action="edit" data-id="${crisis.id}">✏️ Modifier</button>
          <button class="btn btn-danger btn-small" data-action="delete" data-id="${crisis.id}">Supprimer</button>
        </div>

        <!-- ✅ Éditeur inline (caché par défaut) -->
        <div class="card" data-editor="${crisis.id}" style="display:none; margin-top:12px; padding:14px;">
          <div class="section-title" style="margin-bottom:10px;">Modifier la crise</div>

          <div class="form-group" style="margin-bottom:12px;">
            <label class="form-label">Date & heure</label>
            <input class="form-input" type="datetime-local" data-field="date" value="${dtLocal}">
          </div>

          <div class="filter-row" style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:end;">
            <div class="form-group">
              <label class="form-label">Type</label>
              <select class="form-select" data-field="type">
                ${CRISIS_TYPES.map(t => {
                  const name = String(t.name || '');
                  const sel = (name === crisis.type) ? 'selected' : '';
                  return `<option value="${escapeHTML(name)}" ${sel}>${escapeHTML(name)}</option>`;
                }).join('')}
              </select>
            </div>

            <div class="form-group">
              <label class="form-label">Durée (minutes)</label>
              <input class="form-input" type="number" min="0" step="1" data-field="durationMin" value="${Number.isFinite(durationMin) ? durationMin : 0}">
            </div>
          </div>

          <div class="form-group" style="margin-top:12px;">
            <label class="form-label">Notes</label>
            <textarea class="form-textarea" rows="4" data-field="notes" placeholder="Détails...">${escapeHTMLTextarea(crisis.notes || '')}</textarea>
          </div>

          <div style="display:flex; gap:10px; margin-top:12px;">
            <button class="btn btn-primary btn-full" data-action="save-edit" data-id="${crisis.id}">✅ Enregistrer</button>
            <button class="btn btn-secondary btn-full" data-action="cancel-edit" data-id="${crisis.id}">Annuler</button>
          </div>
        </div>
      </div>
    `;
  }).join('');
}

function renderTypesSummary() {
  const container = document.getElementById('typesSummary');
  if (!container) return;

  const filterType = document.getElementById('filterType')?.value || '';
  const filterPeriod = document.getElementById('filterPeriod')?.value || 'all';
  const filtered = filterCrises(appData.crises, filterType, filterPeriod) || [];

  const typeCounts = Object.create(null);
  for (const c of filtered) {
    const key = c.type || 'Non précisé';
    typeCounts[key] = (typeCounts[key] || 0) + 1;
  }

  const entries = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]);
  if (entries.length === 0) { container.innerHTML = ''; return; }

  const total = filtered.length;

  container.innerHTML = `
    <div class="section-title">Total par type</div>
    <div style="color:var(--text-secondary); font-size:13px; margin:-6px 0 12px;">
      ${total} crise${total > 1 ? 's' : ''} sur la période
    </div>

    <div style="display:grid; gap:12px;">
      ${entries.map(([type, count]) => {
        const typeInfo = CRISIS_TYPES.find(t => t.name === type) || { icon: '🔹' };
        const pct = total ? Math.round((count / total) * 100) : 0;

        return `
          <div style="display:flex; justify-content:space-between; align-items:center; padding:14px; background:var(--surface); border-radius:10px; border:1px solid var(--border);">
            <div style="min-width:0;">
              <div style="font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                ${typeInfo.icon} ${escapeHTML(type)}
              </div>
              <div style="font-size:12px; color:var(--text-secondary);">${pct}%</div>
            </div>
            <div style="font-size:20px; font-weight:800; color:var(--primary);">${count}</div>
          </div>
        `;
      }).join('')}
    </div>
  `;
}

// ========= LOGIQUE MODIFICATION (SAFE) =========

function openInlineEditor(id) {
  document.querySelectorAll('[data-editor]').forEach(el => { el.style.display = 'none'; });
  const editor = document.querySelector(`[data-editor="${id}"]`);
  if (editor) editor.style.display = 'block';
}

function closeInlineEditor(id) {
  const editor = document.querySelector(`[data-editor="${id}"]`);
  if (editor) editor.style.display = 'none';
}

async function saveInlineEditor(id) {
  const editor = document.querySelector(`[data-editor="${id}"]`);
  if (!editor) return;

  const dateVal = editor.querySelector('[data-field="date"]')?.value || '';
  const typeVal = editor.querySelector('[data-field="type"]')?.value || '';
  const durationMinVal = editor.querySelector('[data-field="durationMin"]')?.value || '0';
  const notesVal = editor.querySelector('[data-field="notes"]')?.value || '';

  if (!dateVal) { showToast('Date invalide', 'error'); return; }
  const dateISO = new Date(dateVal).toISOString();

  const durationMin = Math.max(0, parseInt(durationMinVal, 10) || 0);
  const duration = minutesToDuration(durationMin);

  const ok = updateCrisisById(id, {
    date: dateISO,
    type: typeVal,
    duration,
    notes: notesVal
  });

  if (!ok) { showToast('Crise introuvable', 'error'); return; }

  try {
    await saveToServer();
    closeInlineEditor(id);
    refreshTrackingUI();
    updateAllStats();
    showToast('Crise modifiée', 'success');
  } catch (err) {
    console.error(err);
    showToast('Erreur lors de l’enregistrement', 'error');
  }
}

function updateCrisisById(id, patch) {
  if (!Array.isArray(appData.crises)) return false;
  const idx = appData.crises.findIndex(c => Number(c.id) === Number(id));
  if (idx === -1) return false;

  appData.crises[idx] = {
    ...appData.crises[idx],
    ...patch
  };
  return true;
}

// ========= STATS AMÉLIORÉES (SAFE) =========

function calculateStatsEnhanced(crises) {
  const list = Array.isArray(crises) ? crises : [];
  const now = new Date();

  const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);

  const startOfWeek = (d) => {
    // Lundi = 0 (FR)
    const x = startOfDay(d);
    const day = (x.getDay() + 6) % 7; // Dim(0)->6, Lun(1)->0...
    x.setDate(x.getDate() - day);
    return x;
  };

  const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
  const startOfYear  = (d) => new Date(d.getFullYear(), 0, 1, 0, 0, 0, 0);

  const todayStart = startOfDay(now);
  const weekStart = startOfWeek(now);
  const prevWeekStart = new Date(weekStart); prevWeekStart.setDate(prevWeekStart.getDate() - 7);
  const monthStart = startOfMonth(now);
  const yearStart = startOfYear(now);

  // last 4 weeks buckets (oldest -> newest)
  const w0 = new Date(weekStart); w0.setDate(w0.getDate() - 21); // start 4 weeks ago
  const weekBuckets = [0, 0, 0, 0];

  let total = 0, today = 0, week = 0, prevWeek = 0, month = 0, year = 0;
  let totalDurationMin = 0;
  let durationCount = 0;

  const typeCounts = Object.create(null);

  let lastDate = null;

  for (const c of list) {
    if (!c || !c.date) continue;
    const d = new Date(c.date);
    if (isNaN(d.getTime())) continue;

    total++;

    if (!lastDate || d > lastDate) lastDate = d;

    // counts by period
    if (d >= todayStart) today++;
    if (d >= weekStart) week++;
    else if (d >= prevWeekStart && d < weekStart) prevWeek++;
    if (d >= monthStart) month++;
    if (d >= yearStart) year++;

    // type
    const typeKey = (c.type || 'Non précisé');
    typeCounts[typeKey] = (typeCounts[typeKey] || 0) + 1;

    // duration
    const mins = durationToMinutes(c.duration);
    if (Number.isFinite(mins) && mins >= 0) {
      totalDurationMin += mins;
      durationCount++;
    }

    // last 4 weeks (from w0 to now)
    if (d >= w0) {
      const diffDays = Math.floor((startOfDay(d) - w0) / 86400000);
      const wIndex = Math.floor(diffDays / 7); // 0..3
      if (wIndex >= 0 && wIndex <= 3) weekBuckets[wIndex]++;
    }
  }

  // top type
  let topType = null;
  for (const [name, count] of Object.entries(typeCounts)) {
    if (!topType || count > topType.count) topType = { name, count };
  }
  if (topType) {
    const info = CRISIS_TYPES.find(t => t.name === topType.name);
    topType.icon = info?.icon || '🔹';
  }

  // days since last
  let daysSinceLast = null;
  if (lastDate) {
    const a = startOfDay(now).getTime();
    const b = startOfDay(lastDate).getTime();
    daysSinceLast = Math.max(0, Math.round((a - b) / 86400000));
  }

  // week delta %
  let weekDeltaPct = null;
  if (prevWeek === 0 && week === 0) weekDeltaPct = 0;
  else if (prevWeek === 0 && week > 0) weekDeltaPct = 100; // convention
  else if (prevWeek > 0) weekDeltaPct = Math.round(((week - prevWeek) / prevWeek) * 100);

  const avgDurationMin = durationCount ? Math.round(totalDurationMin / durationCount) : null;

  return {
    total,
    today,
    week,
    month,
    year,
    prevWeek,
    weekDeltaPct,
    lastDate,
    daysSinceLast,
    topType,
    totalDurationMin,
    avgDurationMin,
    last4WeeksCounts: weekBuckets
  };
}

function renderMiniBars(counts) {
  const arr = Array.isArray(counts) ? counts : [0, 0, 0, 0];
  const max = Math.max(1, ...arr);
  return arr.map(v => {
    const h = Math.max(6, Math.round((v / max) * 42));
    return `<div title="${v}" style="flex:1; border-radius:10px; border:1px solid var(--border); background: rgba(107,154,166,0.18); height:${h}px;"></div>`;
  }).join('');
}

function minutesToPretty(mins) {
  const m = Math.max(0, Math.round(Number(mins) || 0));
  if (m < 60) return `${m} min`;
  const h = Math.floor(m / 60);
  const r = m % 60;
  return r ? `${h} h ${r} min` : `${h} h`;
}

// ========= HELPERS LOCAUX (SAFE) =========

function getLatestCrisisDate(crises) {
  if (!Array.isArray(crises) || crises.length === 0) return null;
  let latest = null;
  for (const c of crises) {
    const d = new Date(c.date);
    if (!latest || d > latest) latest = d;
  }
  return latest;
}

function toDatetimeLocalValue(date) {
  const d = (date instanceof Date) ? date : new Date(date);
  const pad = (n) => String(n).padStart(2, '0');
  const yyyy = d.getFullYear();
  const mm = pad(d.getMonth() + 1);
  const dd = pad(d.getDate());
  const hh = pad(d.getHours());
  const mi = pad(d.getMinutes());
  return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
}

function durationToMinutes(duration) {
  if (duration == null) return 0;
  if (typeof duration === 'number' && Number.isFinite(duration)) return Math.max(0, Math.round(duration));

  const s = String(duration).trim();

  const hm = s.match(/^(\d{1,2}):(\d{2})$/);
  if (hm) return Math.max(0, (parseInt(hm[1], 10) * 60) + parseInt(hm[2], 10));

  const mins = s.match(/(\d+)\s*(m|min|minutes)\b/i);
  if (mins) return Math.max(0, parseInt(mins[1], 10));

  const n = parseInt(s, 10);
  return Number.isFinite(n) ? Math.max(0, n) : 0;
}

function minutesToDuration(mins) {
  const m = Math.max(0, parseInt(mins, 10) || 0);
  return `${m}m`;
}

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

function escapeHTMLTextarea(s) {
  return escapeHTML(s).replace(/"/g, '&quot;');
}

function debounce(fn, wait = 80) {
  let t = null;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), wait);
  };
}

// ========= RAPPORT MÉDICAL (SAFE ANTI-BLOCAGE + FILTRES + TRAITEMENTS + STATS) =========
// ✅ Tout est protégé (fallbacks) pour éviter que l'app se fige si une lib manque.
// ✅ Ne casse pas si jsPDF/autoTable/CRISIS_TYPES/showToast sont absents.
// ✅ N’écrase pas tes helpers globaux s’ils existent déjà.

function renderRapportPage() {
  try {
    const main = document.getElementById('mainContent');
    if (!main) return;

    const crisisTypes = (Array.isArray(window.CRISIS_TYPES) && window.CRISIS_TYPES.length)
      ? window.CRISIS_TYPES
      : [
          { name: 'Focale', icon: '🧠' },
          { name: 'Grand Mal', icon: '⚠️' },
          { name: 'Absence', icon: '👁️' },
          { name: 'Myoclonique', icon: '⚡' },
          { name: 'Salves', icon: '🔄' },
          { name: 'Non précisé', icon: '🔹' },
        ];

    main.innerHTML = `
      <h1 class="page-header">📄 Rapport Médical</h1>
      <p style="color: var(--text-secondary); margin-bottom: 24px; line-height: 1.6;">
        Génère un rapport clair (profil, traitements, crises, stats) pour votre neurologue.
      </p>

      <!-- PÉRIODE -->
      <div class="card">
        <div class="section-title">📅 Période</div>

        <div class="form-group">
          <label class="checkbox-label" style="margin-bottom: 12px; display:flex; align-items:center;">
            <input type="radio" name="period" value="1month" checked style="margin-right:8px;"><span>Dernier mois</span>
          </label>
          <label class="checkbox-label" style="margin-bottom: 12px; display:flex; align-items:center;">
            <input type="radio" name="period" value="3months" style="margin-right:8px;"><span>3 derniers mois</span>
          </label>
          <label class="checkbox-label" style="margin-bottom: 12px; display:flex; align-items:center;">
            <input type="radio" name="period" value="6months" style="margin-right:8px;"><span>6 derniers mois</span>
          </label>
          <label class="checkbox-label" style="margin-bottom: 12px; display:flex; align-items:center;">
            <input type="radio" name="period" value="1year" style="margin-right:8px;"><span>Dernière année</span>
          </label>
          <label class="checkbox-label" style="margin-bottom: 12px; display:flex; align-items:center;">
            <input type="radio" name="period" value="all" style="margin-right:8px;"><span>Toutes les données</span>
          </label>
        </div>

        <div class="filter-row" style="margin-top:12px;">
          <div class="form-group" style="flex:1;">
            <label class="form-label" for="reportFrom">Du (optionnel)</label>
            <input class="form-input" type="date" id="reportFrom">
          </div>
          <div class="form-group" style="flex:1;">
            <label class="form-label" for="reportTo">Au (optionnel)</label>
            <input class="form-input" type="date" id="reportTo">
          </div>
        </div>

        <p style="color: var(--text-secondary); font-size: 12px; margin-top: 10px; line-height:1.4;">
          Astuce : si "Du/Au" est rempli, cela remplace la période.
        </p>
      </div>

      <!-- FILTRES + OPTIONS -->
      <div class="card">
        <div class="section-title">🎯 Filtres & options</div>

        <div class="form-group" style="margin-bottom:12px;">
          <label class="form-label">Types de crises à inclure</label>
          <select class="form-select" id="reportTypeFilter" multiple style="min-height: 130px;">
            ${crisisTypes.map(t => `<option value="${__esc(t.name)}" selected>${__esc(t.icon || '🔹')} ${__esc(t.name)}</option>`).join('')}
          </select>
          <p style="color: var(--text-secondary); font-size: 12px; margin-top: 8px;">
            (Appui long / ctrl pour sélectionner plusieurs. Tout est sélectionné par défaut.)
          </p>
        </div>

        <div class="form-group" style="display:grid; gap:10px;">
          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optIncludeNotes" checked>
            <span>Inclure les notes dans l’historique (peut allonger le PDF)</span>
          </label>

          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optIncludeTriggers" checked>
            <span>Inclure une synthèse des déclencheurs / observations (analyse des notes)</span>
          </label>

          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optOnlyWithNotes">
            <span>Inclure uniquement les crises avec notes</span>
          </label>

          <div style="height:1px; background: var(--border); margin:6px 0;"></div>

          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optIncludeTreatments" checked>
            <span>Inclure un récap des traitements (épilepsie + autres)</span>
          </label>

          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optTreatmentsOnlyActive" checked>
            <span>N’afficher que les traitements actifs</span>
          </label>

          <label class="checkbox-label" style="display:flex; gap:10px; align-items:flex-start;">
            <input type="checkbox" id="optIncludeOtherTreatments" checked>
            <span>Inclure les “autres traitements” (non épilepsie)</span>
          </label>
        </div>
      </div>

      <!-- SECTIONS -->
      <div class="card">
        <div class="section-title">📋 Sections à inclure</div>
        <div class="form-group">
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_personal" checked> <span>Informations personnelles</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_medical" checked> <span>Équipe médicale (médecins)</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_emergency" checked> <span>Contacts d'urgence</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_medications" checked> <span>Traitements / médicaments (récap)</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_statistics" checked> <span>Statistiques (suivi)</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_types" checked> <span>Répartition par types</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_triggers" checked> <span>Déclencheurs / observations</span></label>
          <label class="checkbox-label" style="margin-bottom: 12px;"><input type="checkbox" id="sect_history" checked> <span>Historique détaillé</span></label>
        </div>
      </div>

      <div class="card">
        <button class="btn btn-primary btn-full" id="generateReportBtn">📄 Générer le rapport PDF</button>
        <button class="btn btn-secondary btn-full" id="previewReportBtn" style="margin-top:10px;">👁️ Aperçu (résumé)</button>
        <div id="reportPreviewBox" style="margin-top:12px; display:none;"></div>
      </div>
    `;

    // options traitements -> disable si décoché
    const syncTreatOptions = () => {
      const inc = !!document.getElementById('optIncludeTreatments')?.checked;
      const a = document.getElementById('optTreatmentsOnlyActive');
      const b = document.getElementById('optIncludeOtherTreatments');
      if (a) a.disabled = !inc;
      if (b) b.disabled = !inc;
    };
    document.getElementById('optIncludeTreatments')?.addEventListener('change', syncTreatOptions);
    syncTreatOptions();

    document.getElementById('generateReportBtn')?.addEventListener('click', () => {
      try { generateMedicalReport(); } catch (e) { console.error(e); __toast('Erreur rapport', 'error'); }
    });
    document.getElementById('previewReportBtn')?.addEventListener('click', () => {
      try { renderReportPreview(); } catch (e) { console.error(e); __toast('Erreur aperçu', 'error'); }
    });
  } catch (e) {
    console.error('renderRapportPage error:', e);
    __toast('Erreur page rapport', 'error');
  }
}

// ---------- APERÇU ----------
function renderReportPreview() {
  const box = document.getElementById('reportPreviewBox');
  if (!box) return;

  const cfg = __readReportConfigSafe();
  const crises = __getFilteredCrisesForReportSafe(cfg);

  const stats = __computeCrisisStatsSafe(crises);
  const types = Object.entries(stats.byType).sort((a, b) => b[1] - a[1]);

  const tr = __getTreatmentsForReportSafe(cfg);
  const tracking = __calculateStatsEnhancedSafe(crises);

  box.style.display = 'block';
  box.innerHTML = `
    <div class="section-title">Aperçu</div>

    <div style="color: var(--text-secondary); font-size:13px; line-height:1.6;">
      <div><b>Période :</b> ${__esc(cfg.periodLabel)}</div>
      <div><b>Crises retenues :</b> ${crises.length}</div>

      ${(cfg.sections.medications && cfg.options.includeTreatments) ? `
        <div style="margin-top:10px;"><b>Traitements (récap) :</b></div>
        <div style="display:grid; gap:8px; margin-top:8px;">
          <div style="display:flex; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface);">
            <span>💊 Épilepsie</span><b>${tr.meds.length}</b>
          </div>
          <div style="display:flex; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface);">
            <span>🩺 Autres traitements</span><b>${cfg.options.includeOtherTreatments ? tr.other.length : 0}</b>
          </div>
          <div style="font-size:12px; opacity:.9;">
            ${cfg.options.treatmentsOnlyActive ? 'Affichage: actifs uniquement' : 'Affichage: tous'}
          </div>
        </div>
      ` : ''}

      ${cfg.sections.statistics ? `
        <div style="margin-top:12px;"><b>Statistiques (suivi) :</b></div>
        <div style="display:grid; gap:8px; margin-top:8px;">
          ${__previewRow('Total', tracking.total)}
          ${__previewRow('Aujourd’hui', tracking.today)}
          ${__previewRow('Semaine', tracking.week)}
          ${__previewRow('Mois', tracking.month)}
          ${__previewRow('Année', tracking.year)}
          ${__previewRow('Durée totale', __minutesToPretty(tracking.totalDurationMin))}
          ${__previewRow('Durée moyenne', tracking.avgDurationMin != null ? __minutesToPretty(tracking.avgDurationMin) : '—')}
          ${__previewRow('Top type', tracking.topType ? `${tracking.topType.icon || '🔹'} ${tracking.topType.name} (${tracking.topType.count})` : '—')}
        </div>
      ` : ''}

      ${cfg.sections.types ? `
        <div style="margin-top:12px;"><b>Répartition :</b></div>
        <div style="display:grid; gap:8px; margin-top:8px;">
          ${types.slice(0, 8).map(([t, c]) => {
            const info = (Array.isArray(window.CRISIS_TYPES) ? window.CRISIS_TYPES : []).find(x => x.name === t) || { icon: '🔹' };
            return `<div style="display:flex; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface);">
              <span>${__esc(info.icon || '🔹')} ${__esc(t)}</span><b>${c}</b>
            </div>`;
          }).join('') || '<div>Aucun type.</div>'}
        </div>
      ` : ''}

      <p style="margin-top:10px; font-size:12px;">L’aperçu n’affiche pas tout (le PDF contiendra les sections sélectionnées).</p>
    </div>
  `;
}

function __previewRow(label, value) {
  return `
    <div style="display:flex; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface);">
      <span>${__esc(label)}</span><b>${__esc(String(value))}</b>
    </div>
  `;
}

// ---------- PDF ----------
function generateMedicalReport() {
  // ✅ Ne bloque jamais l’app si jsPDF manque
  if (!window.jspdf || !window.jspdf.jsPDF) {
    __toast('jsPDF non chargé (PDF indisponible)', 'error');
    return;
  }

  const cfg = __readReportConfigSafe();
  const crises = __getFilteredCrisesForReportSafe(cfg);
  const profile = (window.appData && window.appData.profile) ? window.appData.profile : {};
  const doctors = Array.isArray(profile.doctors) ? profile.doctors : [];
  const emergency = Array.isArray(profile.emergencyContacts) ? profile.emergencyContacts : [];

  const treatments = __getTreatmentsForReportSafe(cfg);
  const tracking = __calculateStatsEnhancedSafe(crises);
  const crisisStats = __computeCrisisStatsSafe(crises);
  const triggers = (cfg.sections.triggers && cfg.options.includeTriggers) ? __extractTriggers(crises, 12) : [];

  const { jsPDF } = window.jspdf;
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });
  const M = 10;
  let y = 12;

  const hasAutoTable = (typeof doc.autoTable === 'function');

  const ensureSpace = (needed = 18) => { if (y + needed > 285) { doc.addPage(); y = 12; } };
  const hr = () => { doc.setDrawColor(200); doc.line(M, y, 210 - M, y); y += 4; };
  const title = (t) => { doc.setFont('helvetica', 'bold'); doc.setFontSize(12); doc.text(String(t), M, y); y += 6; };
  const subtitle = (t) => { doc.setFont('helvetica', 'bold'); doc.setFontSize(10); doc.text(String(t), M, y); y += 5; };
  const text = (t) => { doc.setFont('helvetica', 'normal'); doc.setFontSize(9); __splitText(doc, String(t), M, y, 190); y += 5; };

  // Cover
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(16);
  doc.text('EpiMaat — Rapport médical', M, y); y += 8;

  doc.setFont('helvetica', 'normal');
  doc.setFontSize(10);
  doc.text(`Généré le ${new Date().toLocaleDateString('fr-FR')}`, M, y); y += 6;
  doc.text(`Période : ${cfg.periodLabel}`, M, y); y += 6;
  doc.text(`Crises retenues : ${crises.length}`, M, y); y += 8;
  hr();

  // Patient
  if (cfg.sections.personal) {
    ensureSpace(28);
    title('Patient');
    const fullName = `${profile.firstname || ''} ${profile.lastname || ''}`.trim() || '—';
    text(`Nom : ${fullName}`);
    if (profile.birthdate) text(`Date de naissance : ${profile.birthdate}`);
    if (profile.phone) text(`Téléphone : ${profile.phone}`);
    if (profile.weightKg) text(`Poids : ${profile.weightKg} kg`);
    if (profile.heightCm) text(`Taille : ${profile.heightCm} cm`);
    hr();
  }

  // Doctors
  if (cfg.sections.medical) {
    ensureSpace(24);
    title('Équipe médicale');
    if (!doctors.length) {
      text('Aucun médecin renseigné.');
    } else if (hasAutoTable) {
      doc.autoTable({
        startY: y,
        head: [['Nom', 'Spécialité', 'Lieu', 'Téléphone']],
        body: doctors.map(d => [__safe(d.name), __safe(d.specialty), __safe(d.location), __safe(d.phone)]),
        margin: { left: M, right: M },
        styles: { fontSize: 8, cellPadding: 1.4 },
        headStyles: { fontStyle: 'bold' }
      });
      y = doc.lastAutoTable.finalY + 6;
    } else {
      doctors.forEach(d => text(`${__safe(d.name)} — ${__safe(d.specialty)} — ${__safe(d.phone)}`));
    }
    hr();
  }

  // Emergency
  if (cfg.sections.emergency) {
    ensureSpace(22);
    title('Contacts d’urgence');
    if (!emergency.length) {
      text('Aucun contact d’urgence renseigné.');
    } else if (hasAutoTable) {
      doc.autoTable({
        startY: y,
        head: [['Nom', 'Lien', 'Téléphone']],
        body: emergency.map(c => [__safe(c.name), __safe(c.relationship), __safe(c.phone)]),
        margin: { left: M, right: M },
        styles: { fontSize: 8, cellPadding: 1.4 },
        headStyles: { fontStyle: 'bold' }
      });
      y = doc.lastAutoTable.finalY + 6;
    } else {
      emergency.forEach(c => text(`${__safe(c.name)} (${__safe(c.relationship)}) — ${__safe(c.phone)}`));
    }
    hr();
  }

  // Treatments recap
  if (cfg.sections.medications && cfg.options.includeTreatments) {
    ensureSpace(22);
    title('Traitements / médicaments');

    subtitle('Traitement épilepsie');
    if (!treatments.meds.length) {
      text('Aucun médicament (selon filtre).');
    } else if (hasAutoTable) {
      const head = cfg.options.includeNotes
        ? [['Médicament', 'Dosage', 'Fréquence', 'Heure(s)', 'Notes']]
        : [['Médicament', 'Dosage', 'Fréquence', 'Heure(s)']];
      const bodyFull = treatments.meds.map(m => [m.name, m.dosage || '—', m.frequency || '—', m.times || '—', (m.notes || '')]);
      const body = cfg.options.includeNotes ? bodyFull : bodyFull.map(r => r.slice(0, 4));
      doc.autoTable({ startY: y, head, body, margin:{ left:M, right:M }, styles:{ fontSize:7.5, cellPadding:1.2 }, headStyles:{ fontStyle:'bold' } });
      y = doc.lastAutoTable.finalY + 6;
    } else {
      treatments.meds.forEach(m => text(`• ${m.name} — ${m.dosage} — ${m.frequency} — ${m.times}`));
    }

    if (cfg.options.includeOtherTreatments) {
      ensureSpace(18);
      subtitle('Autres traitements');
      if (!treatments.other.length) {
        text('Aucun autre traitement (selon filtre).');
      } else if (hasAutoTable) {
        const head = cfg.options.includeNotes
          ? [['Traitement', 'Dosage', 'Fréquence', 'Heure(s)', 'Notes']]
          : [['Traitement', 'Dosage', 'Fréquence', 'Heure(s)']];
        const bodyFull = treatments.other.map(t => [t.label, t.dosage || '—', t.frequency || '—', t.times || '—', (t.notes || '')]);
        const body = cfg.options.includeNotes ? bodyFull : bodyFull.map(r => r.slice(0, 4));
        doc.autoTable({ startY: y, head, body, margin:{ left:M, right:M }, styles:{ fontSize:7.5, cellPadding:1.2 }, headStyles:{ fontStyle:'bold' } });
        y = doc.lastAutoTable.finalY + 6;
      } else {
        treatments.other.forEach(t => text(`• ${t.label} — ${t.dosage} — ${t.frequency} — ${t.times}`));
      }
    }

    hr();
  }

  // Tracking stats
  if (cfg.sections.statistics) {
    ensureSpace(22);
    title('Statistiques (suivi)');
    const top = tracking.topType ? `${tracking.topType.icon || '🔹'} ${tracking.topType.name} (${tracking.topType.count})` : '—';
    const lastTxt = tracking.lastDate
      ? `${tracking.lastDate.toLocaleDateString('fr-FR')} ${tracking.lastDate.toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' })}`
      : '—';

    text(`Total : ${tracking.total} | Aujourd’hui : ${tracking.today} | Semaine : ${tracking.week} | Mois : ${tracking.month} | Année : ${tracking.year}`);
    text(`Dernière crise : ${lastTxt}`);
    text(`Durée totale : ${__minutesToPretty(tracking.totalDurationMin)} | Durée moyenne : ${tracking.avgDurationMin != null ? __minutesToPretty(tracking.avgDurationMin) : '—'}`);
    text(`Type le plus fréquent : ${top}`);
    hr();
  }

  // Types split
  if (cfg.sections.types) {
    ensureSpace(20);
    title('Répartition par types');
    const entries = Object.entries(crisisStats.byType).sort((a, b) => b[1] - a[1]);
    if (!entries.length) {
      text('Aucune donnée.');
    } else if (hasAutoTable) {
      const body = entries.map(([t, c]) => {
        const info = (Array.isArray(window.CRISIS_TYPES) ? window.CRISIS_TYPES : []).find(x => x.name === t) || { icon: '🔹' };
        const pct = crisisStats.total ? Math.round((c / crisisStats.total) * 100) : 0;
        return [`${info.icon || '🔹'} ${t}`, String(c), `${pct}%`];
      });
      doc.autoTable({ startY: y, head:[['Type','Nombre','%']], body, margin:{ left:M, right:M }, styles:{ fontSize:8, cellPadding:1.4 }, headStyles:{ fontStyle:'bold' } });
      y = doc.lastAutoTable.finalY + 6;
    } else {
      entries.forEach(([t, c]) => text(`• ${t}: ${c}`));
    }
    hr();
  }

  // Triggers
  if (cfg.sections.triggers && cfg.options.includeTriggers) {
    ensureSpace(18);
    title('Déclencheurs / observations (notes)');
    if (!triggers.length) text('Aucune tendance détectée (ou pas de notes).');
    else triggers.forEach(x => text(`• ${x.k} (${x.n})`));
    hr();
  }

  // History
  if (cfg.sections.history) {
    ensureSpace(20);
    title('Historique détaillé');
    const sorted = [...crises].sort((a, b) => new Date(b.date) - new Date(a.date));

    if (!sorted.length) {
      text('Aucune crise sur la période.');
    } else if (hasAutoTable) {
      const includeNotes = !!cfg.options.includeNotes;
      const head = includeNotes ? [['Date','Heure','Type','Durée','Notes']] : [['Date','Heure','Type','Durée']];
      const bodyFull = sorted.map(c => {
        const d = new Date(c.date);
        const info = (Array.isArray(window.CRISIS_TYPES) ? window.CRISIS_TYPES : []).find(t => t.name === c.type) || { icon: '🔹' };
        const dur = (typeof window.formatDuration === 'function') ? window.formatDuration(c.duration) : __minutesToPretty(__durationToMinutesSafe(c.duration));
        const notes = includeNotes ? __safe(String(c.notes || '')).slice(0, 180) : '';
        return [
          d.toLocaleDateString('fr-FR'),
          d.toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' }),
          `${info.icon || '🔹'} ${__safe(c.type)}`,
          dur,
          notes
        ];
      });
      const body = includeNotes ? bodyFull : bodyFull.map(r => r.slice(0, 4));
      doc.autoTable({ startY:y, head, body, margin:{ left:M, right:M }, styles:{ fontSize:7.5, cellPadding:1.2 }, headStyles:{ fontStyle:'bold' } });
      y = doc.lastAutoTable.finalY + 6;
    } else {
      sorted.slice(0, 60).forEach(c => {
        const d = new Date(c.date);
        const dur = (typeof window.formatDuration === 'function') ? window.formatDuration(c.duration) : __minutesToPretty(__durationToMinutesSafe(c.duration));
        text(`${d.toLocaleDateString('fr-FR')} ${d.toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' })} — ${__safe(c.type)} — ${dur}`);
        if (cfg.options.includeNotes && c.notes) text(`Notes: ${__safe(c.notes).slice(0, 200)}`);
        ensureSpace(12);
      });
    }
    hr();
  }

  doc.save(`EpiMaat_Rapport_${new Date().toISOString().slice(0,10)}.pdf`);
  __toast('Rapport généré ✔️', 'success');
}

// ================== SAFE HELPERS (NE BLOQUE PAS) ==================

function __toast(msg, type) {
  try {
    if (typeof window.showToast === 'function') window.showToast(msg, type || 'info');
  } catch (e) {}
}

function __esc(s) {
  try {
    if (typeof window.escapeHTML === 'function') return window.escapeHTML(s);
  } catch (e) {}
  return String(s ?? '').replace(/[&<>"']/g, (m) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  }[m]));
}

function __safe(v) {
  const s = String(v ?? '').trim();
  return s || '—';
}

function __splitText(doc, txt, x, y, maxWidth) {
  try {
    if (doc && typeof doc.splitTextToSize === 'function') {
      const lines = doc.splitTextToSize(String(txt || ''), maxWidth);
      doc.text(lines, x, y);
    } else if (doc && typeof doc.text === 'function') {
      doc.text(String(txt || ''), x, y);
    }
  } catch (e) {
    // ignore
  }
}

function __readReportConfigSafe() {
  const period = document.querySelector('input[name="period"]:checked')?.value || '1month';
  const from = document.getElementById('reportFrom')?.value || '';
  const to = document.getElementById('reportTo')?.value || '';

  const typeSel = document.getElementById('reportTypeFilter');
  const selectedTypes = typeSel
    ? Array.from(typeSel.selectedOptions).map(o => String(o.value || '').trim()).filter(Boolean)
    : (Array.isArray(window.CRISIS_TYPES) ? window.CRISIS_TYPES.map(t => t.name) : []);

  const options = {
    includeNotes: !!document.getElementById('optIncludeNotes')?.checked,
    includeTriggers: !!document.getElementById('optIncludeTriggers')?.checked,
    onlyWithNotes: !!document.getElementById('optOnlyWithNotes')?.checked,
    includeTreatments: !!document.getElementById('optIncludeTreatments')?.checked,
    treatmentsOnlyActive: !!document.getElementById('optTreatmentsOnlyActive')?.checked,
    includeOtherTreatments: !!document.getElementById('optIncludeOtherTreatments')?.checked,
  };

  const sections = {
    personal: !!document.getElementById('sect_personal')?.checked,
    medical: !!document.getElementById('sect_medical')?.checked,
    emergency: !!document.getElementById('sect_emergency')?.checked,
    medications: !!document.getElementById('sect_medications')?.checked,
    statistics: !!document.getElementById('sect_statistics')?.checked,
    types: !!document.getElementById('sect_types')?.checked,
    triggers: !!document.getElementById('sect_triggers')?.checked,
    history: !!document.getElementById('sect_history')?.checked,
  };

  const range = __computePeriodRange(period, from, to);
  return { period, periodLabel: range.label, dateFrom: range.from, dateTo: range.to, selectedTypes, options, sections };
}

function __computePeriodRange(period, fromStr, toStr) {
  const now = new Date();
  const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
  const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);

  if (fromStr || toStr) {
    const from = fromStr ? startOfDay(new Date(fromStr)) : null;
    const to = toStr ? endOfDay(new Date(toStr)) : null;
    return { from, to, label: `Du ${fromStr || '…'} au ${toStr || '…'}` };
  }

  let from = null, to = endOfDay(now), label = '';
  if (period === '1month') { from = new Date(now); from.setMonth(from.getMonth() - 1); from = startOfDay(from); label = 'Dernier mois'; }
  else if (period === '3months') { from = new Date(now); from.setMonth(from.getMonth() - 3); from = startOfDay(from); label = '3 derniers mois'; }
  else if (period === '6months') { from = new Date(now); from.setMonth(from.getMonth() - 6); from = startOfDay(from); label = '6 derniers mois'; }
  else if (period === '1year') { from = new Date(now); from.setFullYear(from.getFullYear() - 1); from = startOfDay(from); label = 'Dernière année'; }
  else { from = null; to = null; label = 'Toutes les données'; }

  return { from, to, label };
}

function __getFilteredCrisesForReportSafe(cfg) {
  const all = (window.appData && Array.isArray(window.appData.crises)) ? window.appData.crises : [];
  const types = Array.isArray(cfg.selectedTypes) ? cfg.selectedTypes : [];

  const inRange = (d) => {
    if (!(d instanceof Date) || isNaN(d.getTime())) return false;
    if (cfg.dateFrom && d < cfg.dateFrom) return false;
    if (cfg.dateTo && d > cfg.dateTo) return false;
    return true;
  };

  return all.filter(c => {
    if (!c || !c.date) return false;
    const d = new Date(c.date);
    if (!inRange(d)) return false;

    const t = String(c.type || '').trim();
    if (types.length && t && !types.includes(t)) return false;

    if (cfg.options.onlyWithNotes) {
      const n = String(c.notes || '').trim();
      if (!n) return false;
    }
    return true;
  });
}

function __getTreatmentsForReportSafe(cfg) {
  const meds = (window.appData && Array.isArray(window.appData.medications)) ? window.appData.medications : [];
  const other = (window.appData && Array.isArray(window.appData.otherTreatments)) ? window.appData.otherTreatments : [];

  const onlyActive = !!cfg.options.treatmentsOnlyActive;

  const getName = (m) => {
    try {
      if (typeof window.getMedDisplayName === 'function') return window.getMedDisplayName(m);
    } catch (e) {}
    if (!m) return '';
    return (m.name === 'Autre (personnalisé)') ? (m.customName || 'Médicament (personnalisé)') : (m.name || 'Médicament');
  };

  const medsFiltered = meds
    .filter(m => m && (onlyActive ? !!m.active : true))
    .map(m => ({
      name: getName(m),
      dosage: `${__safe(m.dosage)} ${__safe(m.unit || 'mg')}`.trim(),
      frequency: __safe(m.frequency),
      times: Array.isArray(m.times) ? m.times.join(', ') : __safe(m.times),
      notes: __safe(m.notes),
      active: !!m.active
    }));

  const otherFiltered = other
    .filter(t => t && (onlyActive ? !!t.active : true))
    .map(t => ({
      label: __safe(t.label || 'Traitement'),
      dosage: __safe(t.dosage),
      frequency: __safe(t.frequency),
      times: Array.isArray(t.times) ? t.times.join(', ') : __safe(t.times),
      notes: __safe(t.notes),
      active: !!t.active
    }));

  return { meds: medsFiltered, other: otherFiltered };
}

function __computeCrisisStatsSafe(crises) {
  const list = Array.isArray(crises) ? crises : [];
  const byType = Object.create(null);
  let totalDurationMin = 0;
  let durationCount = 0;
  let lastDate = null;

  for (const c of list) {
    const t = c?.type || 'Non précisé';
    byType[t] = (byType[t] || 0) + 1;

    const d = new Date(c.date);
    if (!lastDate || d > lastDate) lastDate = d;

    const mins = __durationToMinutesSafe(c.duration);
    if (Number.isFinite(mins)) {
      totalDurationMin += Math.max(0, mins);
      durationCount++;
    }
  }

  return {
    total: list.length,
    byType,
    lastDate,
    totalDurationMin,
    avgDurationMin: durationCount ? Math.round(totalDurationMin / durationCount) : null
  };
}

function __durationToMinutesSafe(duration) {
  try {
    if (typeof window.durationToMinutes === 'function') return window.durationToMinutes(duration);
  } catch (e) {}
  if (duration == null) return 0;
  if (typeof duration === 'number' && Number.isFinite(duration)) return Math.max(0, Math.round(duration));
  const s = String(duration).trim();
  const hm = s.match(/^(\d{1,2}):(\d{2})$/);
  if (hm) return Math.max(0, (parseInt(hm[1], 10) * 60) + parseInt(hm[2], 10));
  const mins = s.match(/(\d+)\s*(m|min|minutes)\b/i);
  if (mins) return Math.max(0, parseInt(mins[1], 10));
  const n = parseInt(s, 10);
  return Number.isFinite(n) ? Math.max(0, n) : 0;
}

function __calculateStatsEnhancedSafe(crises) {
  // mini version (suffisante pour rapport)
  const list = Array.isArray(crises) ? crises : [];
  const now = new Date();
  const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0,0);
  const startOfWeek = (d) => { const x = startOfDay(d); const day = (x.getDay()+6)%7; x.setDate(x.getDate()-day); return x; };
  const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1, 0,0,0,0);
  const startOfYear = (d) => new Date(d.getFullYear(), 0, 1, 0,0,0,0);

  const todayStart = startOfDay(now);
  const weekStart = startOfWeek(now);
  const monthStart = startOfMonth(now);
  const yearStart = startOfYear(now);

  let total = 0, today = 0, week = 0, month = 0, year = 0;
  let totalDurationMin = 0, durationCount = 0;
  let lastDate = null;
  const typeCounts = Object.create(null);

  for (const c of list) {
    if (!c || !c.date) continue;
    const d = new Date(c.date);
    if (isNaN(d.getTime())) continue;

    total++;
    if (!lastDate || d > lastDate) lastDate = d;

    if (d >= todayStart) today++;
    if (d >= weekStart) week++;
    if (d >= monthStart) month++;
    if (d >= yearStart) year++;

    const typeKey = (c.type || 'Non précisé');
    typeCounts[typeKey] = (typeCounts[typeKey] || 0) + 1;

    const mins = __durationToMinutesSafe(c.duration);
    totalDurationMin += Math.max(0, mins || 0);
    durationCount++;
  }

  let topType = null;
  for (const [name, count] of Object.entries(typeCounts)) {
    if (!topType || count > topType.count) topType = { name, count };
  }
  if (topType) {
    const info = (Array.isArray(window.CRISIS_TYPES) ? window.CRISIS_TYPES : []).find(t => t.name === topType.name);
    topType.icon = info?.icon || '🔹';
  }

  return {
    total, today, week, month, year,
    lastDate,
    topType,
    totalDurationMin,
    avgDurationMin: durationCount ? Math.round(totalDurationMin / durationCount) : null
  };
}

function __minutesToPretty(mins) {
  const m = Math.max(0, Math.round(Number(mins) || 0));
  if (m < 60) return `${m} min`;
  const h = Math.floor(m / 60);
  const r = m % 60;
  return r ? `${h} h ${r} min` : `${h} h`;
}

function __extractTriggers(crises, maxItems = 10) {
  const list = Array.isArray(crises) ? crises : [];
  const freq = Object.create(null);
  const add = (k) => { freq[k] = (freq[k] || 0) + 1; };

  const keywords = [
    'stress','fatigue','manque de sommeil','alcool','lumière','lumiere',
    'écran','ecran','fièvre','fievre','menstru','douleur','anxi',
    'oubli','retard','médicament','medicament','café','cafe'
  ];

  for (const c of list) {
    const notes = String(c?.notes || '').toLowerCase();
    if (!notes) continue;
    for (const k of keywords) if (notes.includes(k)) add(k);
  }

  return Object.entries(freq).sort((a,b)=>b[1]-a[1]).slice(0, maxItems).map(([k,n])=>({k,n}));
}


// ================================
// ========= PAGE TRAITEMENT (3 ONGLETs) =========
// 1) Traitement épileptique
// 2) Autre traitement
// 3) Liste des médicaments (vue récap / enregistrés)
// Remplace entièrement ton bloc Traitement par celui-ci
// ================================

// -------- Helpers UI/format --------
function getMedDisplayName(med) {
  if (!med) return '';
  return (med.name === 'Autre (personnalisé)')
    ? (med.customName || 'Médicament (personnalisé)')
    : (med.name || 'Médicament');
}

function cleanTimeStr(t) {
  const s = String(t || '').trim();
  return /^\d{2}:\d{2}$/.test(s) ? s : '08:00';
}

function uniqSortedTimes(times) {
  const set = new Set((times || []).map(cleanTimeStr));
  return Array.from(set).sort((a, b) => a.localeCompare(b));
}

function isMedValid(med) {
  if (!med) return false;
  if (med.name === 'Autre (personnalisé)' && !(String(med.customName || '').trim())) return false;
  if (!uniqSortedTimes(med.times).length) return false;
  return true;
}

function ensureTreatmentDefaults() {
  if (!Array.isArray(appData.medications)) appData.medications = [];
  appData.medications = appData.medications.map(m => ({
    id: m?.id || Date.now(),
    name: m?.name || (MEDICATIONS_LIST?.[0] || 'Keppra'),
    customName: m?.customName || '',
    dosage: m?.dosage || '',
    unit: m?.unit || 'mg',
    frequency: m?.frequency || '1 fois par jour',
    times: uniqSortedTimes(m?.times || ['08:00']),
    notes: m?.notes || '',
    active: (typeof m?.active === 'boolean') ? m.active : true,
  }));

  // ✅ autres traitements (non épilepsie)
  if (!Array.isArray(appData.otherTreatments)) appData.otherTreatments = [];
  appData.otherTreatments = appData.otherTreatments.map(t => ({
    id: t?.id || Date.now(),
    label: String(t?.label || '').trim().slice(0, 60),
    dosage: String(t?.dosage || '').trim().slice(0, 30),
    frequency: t?.frequency || '1 fois par jour',
    times: uniqSortedTimes(t?.times || ['08:00']),
    notes: String(t?.notes || '').trim().slice(0, 500),
    active: (typeof t?.active === 'boolean') ? t.active : true,
  }));
}

function calcNextDoseTimeForItem(times, now = new Date()) {
  const ts = uniqSortedTimes(times);
  if (!ts.length) return null;

  const hh = String(now.getHours()).padStart(2, '0');
  const mm = String(now.getMinutes()).padStart(2, '0');
  const current = `${hh}:${mm}`;

  for (const t of ts) if (t >= current) return { time: t, isTomorrow: false };
  return { time: ts[0], isTomorrow: true };
}

function calcNextDoseGlobal(now = new Date()) {
  ensureTreatmentDefaults();
  const epi = (appData.medications || []).filter(m => m && m.active);
  const other = (appData.otherTreatments || []).filter(t => t && t.active);

  let best = null;

  const addCandidate = (label, times, refObj, kind) => {
    const next = calcNextDoseTimeForItem(times, now);
    if (!next) return;

    const base = new Date(now);
    const [H, M] = next.time.split(':').map(n => parseInt(n, 10));
    base.setSeconds(0, 0);
    base.setHours(H, M, 0, 0);
    if (next.isTomorrow) base.setDate(base.getDate() + 1);

    const candidate = {
      kind, // 'epi' | 'other'
      ref: refObj,
      label,
      time: next.time,
      isTomorrow: next.isTomorrow,
      ts: base.getTime()
    };

    if (!best || candidate.ts < best.ts) best = candidate;
  };

  epi.forEach(m => addCandidate(getMedDisplayName(m), m.times, m, 'epi'));
  other.forEach(t => addCandidate(t.label || 'Traitement', t.times, t, 'other'));

  return best;
}

// Remonte DOM -> appData.medications + otherTreatments (safe)
function updateTreatmentFromDOM() {
  // Épilepsie
  const epiCards = document.querySelectorAll('.epi-card[data-idx]');
  epiCards.forEach(card => {
    const idx = parseInt(card.dataset.idx, 10);
    const med = appData.medications[idx];
    if (!med) return;

    const name = card.querySelector('[data-field="name"]')?.value;
    const customName = card.querySelector('[data-field="customName"]')?.value;
    const dosage = card.querySelector('[data-field="dosage"]')?.value;
    const unit = card.querySelector('[data-field="unit"]')?.value;
    const frequency = card.querySelector('[data-field="frequency"]')?.value;
    const notes = card.querySelector('[data-field="notes"]')?.value;
    const active = !!card.querySelector('[data-field="active"]')?.checked;

    med.name = name || med.name;
    med.customName = String(customName || '').trim().slice(0, 60);
    med.dosage = String(dosage || '').trim().slice(0, 12);
    med.unit = unit || med.unit || 'mg';
    med.frequency = frequency || med.frequency || '1 fois par jour';
    med.notes = String(notes || '').trim().slice(0, 500);
    med.active = active;

    const timeInputs = Array.from(card.querySelectorAll('input[data-field="time"]'));
    med.times = uniqSortedTimes(timeInputs.map(inp => cleanTimeStr(inp.value)));
  });

  // Autres traitements
  const otherCards = document.querySelectorAll('.other-card[data-idx]');
  otherCards.forEach(card => {
    const idx = parseInt(card.dataset.idx, 10);
    const t = appData.otherTreatments[idx];
    if (!t) return;

    const label = card.querySelector('[data-field="label"]')?.value;
    const dosage = card.querySelector('[data-field="dosage"]')?.value;
    const frequency = card.querySelector('[data-field="frequency"]')?.value;
    const notes = card.querySelector('[data-field="notes"]')?.value;
    const active = !!card.querySelector('[data-field="active"]')?.checked;

    t.label = String(label || '').trim().slice(0, 60);
    t.dosage = String(dosage || '').trim().slice(0, 30);
    t.frequency = frequency || t.frequency || '1 fois par jour';
    t.notes = String(notes || '').trim().slice(0, 500);
    t.active = active;

    const timeInputs = Array.from(card.querySelectorAll('input[data-field="time"]'));
    t.times = uniqSortedTimes(timeInputs.map(inp => cleanTimeStr(inp.value)));
  });
}

// -------- UI Main --------
function renderTreatmentPage() {
  ensureTreatmentDefaults();

  const next = calcNextDoseGlobal(new Date());
  const nextTxt = next
    ? `${next.label} • ${next.time}${next.isTomorrow ? ' (demain)' : ''}`
    : 'Aucun traitement actif';

  const main = document.getElementById('mainContent');
  if (!main) return;

  main.innerHTML = `
    <div class="recording-header" style="margin-bottom: 14px;">
      <h1 class="recording-title">💊 Traitements</h1>
      <p class="recording-subtitle">3 onglets : épilepsie, autre traitement, et liste des médicaments</p>
    </div>

    <!-- Résumé -->
    <div class="card" style="margin-bottom: 14px;">
      <div style="display:flex; gap:12px; align-items:center;">
        <div style="width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background: rgba(107,154,166,0.14); font-size:22px;">
          ⏰
        </div>
        <div style="flex:1;">
          <div style="font-weight:800;">Prochaine prise</div>
          <div style="color: var(--text-secondary); font-size: 13px; line-height:1.4;">${nextTxt}</div>
        </div>
        <button class="btn btn-secondary" id="treatReminderBtn" type="button" style="white-space:nowrap;">
          🔔 Rappel
        </button>
      </div>
    </div>

    <!-- Onglets -->
    <div class="card" style="padding: 12px; margin-bottom: 14px;">
      <div style="display:flex; gap:10px; flex-wrap:wrap;">
        <button class="btn btn-primary" id="tabEpi" type="button" style="flex:1;">1) Épilepsie</button>
        <button class="btn btn-secondary" id="tabOther" type="button" style="flex:1;">2) Autre</button>
        <button class="btn btn-secondary" id="tabList" type="button" style="flex:1;">3) Liste médicaments</button>
      </div>

      <div id="treatActions" style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px;">
        <button class="btn btn-outline" id="treatAddBtn" type="button">+ Ajouter</button>
        <button class="btn btn-outline" id="treatSaveBtn" type="button">💾 Enregistrer</button>
      </div>

      <div style="margin-top:10px; font-size:13px; color: var(--text-secondary); line-height:1.4;">
        Astuce : désactive un traitement via <strong>Actif</strong> pour ne plus recevoir de rappel.
      </div>
    </div>

    <!-- Contenu -->
    <div class="card" style="padding: 14px;">
      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; gap:10px;">
        <div class="section-title" style="margin:0;" id="listTitle">Traitement épilepsie</div>
        <div style="font-size:12px; color: var(--text-secondary); white-space:nowrap;" id="treatCount"></div>
      </div>

      <div id="treatList"></div>
    </div>
  `;

  // state d'onglet (epi | other | list)
  window.__treatTab = window.__treatTab || 'epi';

  // binds top
  document.getElementById('treatReminderBtn')?.addEventListener('click', () => {
    if (typeof showMedicationReminder === 'function') showMedicationReminder();
    else showToast?.('Rappel indisponible', 'info');
  });

  document.getElementById('tabEpi')?.addEventListener('click', () => {
    window.__treatTab = 'epi';
    renderTreatmentList();
  });

  document.getElementById('tabOther')?.addEventListener('click', () => {
    window.__treatTab = 'other';
    renderTreatmentList();
  });

  document.getElementById('tabList')?.addEventListener('click', () => {
    window.__treatTab = 'list';
    renderTreatmentList();
  });

  // Ajouter (dépend de l'onglet)
  document.getElementById('treatAddBtn')?.addEventListener('click', () => {
    ensureTreatmentDefaults();

    if (window.__treatTab === 'other') {
      appData.otherTreatments.push({
        id: Date.now(),
        label: '',
        dosage: '',
        frequency: '1 fois par jour',
        times: ['08:00'],
        notes: '',
        active: true
      });
      renderTreatmentList();
      showToast?.('Traitement ajouté', 'success');
      return;
    }

    // Par défaut : ajoute un médicament épilepsie (même si onglet "liste")
    appData.medications.push({
      id: Date.now(),
      name: MEDICATIONS_LIST?.[0] || 'Keppra',
      customName: '',
      dosage: '',
      unit: 'mg',
      frequency: '1 fois par jour',
      times: ['08:00'],
      notes: '',
      active: true
    });

    // si on est sur "liste", on reste sur liste (ça montre bien l'ajout)
    renderTreatmentList();
    showToast?.('Médicament ajouté', 'success');
  });

  // Enregistrer
  document.getElementById('treatSaveBtn')?.addEventListener('click', async () => {
    ensureTreatmentDefaults();

    // si on est sur liste, il n’y a rien à remonter du DOM (vue read-only),
    // mais si on vient d’un autre onglet, on prend les champs.
    if (window.__treatTab !== 'list') {
      updateTreatmentFromDOM();
    }

    const invalidCount = (appData.medications || []).filter(m => !isMedValid(m)).length;

    try { await saveToServer(); } catch (e) { console.warn('saveToServer error:', e); }

    showToast?.(
      invalidCount ? `Enregistré (⚠️ ${invalidCount} à compléter)` : 'Enregistré ✔️',
      invalidCount ? 'info' : 'success'
    );

    renderTreatmentList();
  });

  renderTreatmentList();
}

// -------- Render list (onglet actif) --------
function renderTreatmentList() {
  ensureTreatmentDefaults();

  const tab = window.__treatTab || 'epi';

  // styles tabs
  const tabEpi = document.getElementById('tabEpi');
  const tabOther = document.getElementById('tabOther');
  const tabList = document.getElementById('tabList');
  if (tabEpi && tabOther && tabList) {
    tabEpi.className = (tab === 'epi') ? 'btn btn-primary' : 'btn btn-secondary';
    tabOther.className = (tab === 'other') ? 'btn btn-primary' : 'btn btn-secondary';
    tabList.className = (tab === 'list') ? 'btn btn-primary' : 'btn btn-secondary';
  }

  const title = document.getElementById('listTitle');
  if (title) {
    title.textContent =
      (tab === 'epi') ? 'Traitement épilepsie' :
      (tab === 'other') ? 'Autre traitement' :
      'Liste des médicaments (enregistrés)';
  }

  const list = document.getElementById('treatList');
  if (!list) return;

  const countEl = document.getElementById('treatCount');
  const actions = document.getElementById('treatActions');

  // ======= ONGLET 3 : LISTE DES MEDICAMENTS =======
  if (tab === 'list') {
    // actions visibles (tu peux garder Ajouter/Enregistrer)
    if (actions) actions.style.display = 'grid';

    const meds = appData.medications || [];
    const total = meds.length;
    const active = meds.filter(m => m?.active).length;
    if (countEl) countEl.textContent = `${active}/${total} actif(s)`;

    if (!total) {
      list.innerHTML = `
        <div class="empty-state" style="padding: 26px 10px;">
          <div class="empty-icon">📋</div>
          <div class="empty-text">Aucun médicament enregistré</div>
          <div style="color: var(--text-secondary); font-size:13px; margin-top:8px;">
            Ajoute un médicament dans l’onglet Épilepsie, puis enregistre.
          </div>
          <button class="btn btn-primary" id="emptyAddListBtn" style="margin-top:14px; width:100%;">+ Ajouter un médicament</button>
        </div>
      `;
      document.getElementById('emptyAddListBtn')?.addEventListener('click', () => {
        appData.medications.push({
          id: Date.now(),
          name: MEDICATIONS_LIST?.[0] || 'Keppra',
          customName: '',
          dosage: '',
          unit: 'mg',
          frequency: '1 fois par jour',
          times: ['08:00'],
          notes: '',
          active: true
        });
        renderTreatmentList();
      });
      return;
    }

    // Récap compact + accès rapide à l’édition (bouton)
    list.innerHTML = `
      <div style="display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;">
        <button class="btn btn-outline" id="goEpiEditBtn" type="button" style="flex:1;">✏️ Modifier (onglet Épilepsie)</button>
        <button class="btn btn-outline" id="goOtherEditBtn" type="button" style="flex:1;">🩺 Autres traitements</button>
      </div>

      <div style="display:flex; flex-direction:column; gap:10px;">
        ${meds.map((m, idx) => {
          const times = uniqSortedTimes(m.times);
          const name = getMedDisplayName(m);
          const dosageTxt = m.dosage ? `${m.dosage} ${m.unit || 'mg'}` : 'Dosage ?';
          const freq = m.frequency || 'Fréquence ?';
          const timeTxt = times.length ? times.join(' • ') : 'Heure ?';

          const pill = m.active
            ? `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(46,125,50,0.14); border:1px solid rgba(46,125,50,0.25);">Actif</span>`
            : `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(120,120,120,0.10); border:1px solid var(--border); color: var(--text-secondary);">Inactif</span>`;

          const warn = isMedValid(m)
            ? ''
            : `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(239,108,0,0.12); border:1px solid rgba(239,108,0,0.25);">⚠️ À compléter</span>`;

          return `
            <div style="border:1px solid var(--border); border-radius:14px; padding:14px; background: var(--surface);">
              <div style="display:flex; gap:10px; align-items:flex-start;">
                <div style="width:40px;height:40px;border-radius:12px;border:1px solid var(--border); background: rgba(107,154,166,0.14); display:flex; align-items:center; justify-content:center; font-size:20px;">💊</div>
                <div style="flex:1; min-width:0;">
                  <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                    <div style="font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;">${name}</div>
                    ${pill} ${warn}
                  </div>
                  <div style="margin-top:6px; color: var(--text-secondary); font-size:13px; line-height:1.4;">
                    ${dosageTxt} <span style="opacity:.6;">•</span> ${freq}<br/>
                    <span style="opacity:.9;">⏱</span> ${timeTxt}
                  </div>
                </div>
                <button type="button" class="list-jump-edit btn btn-secondary" data-idx="${idx}" style="white-space:nowrap;">Éditer</button>
              </div>
            </div>
          `;
        }).join('')}
      </div>
    `;

    document.getElementById('goEpiEditBtn')?.addEventListener('click', () => {
      window.__treatTab = 'epi';
      renderTreatmentList();
    });
    document.getElementById('goOtherEditBtn')?.addEventListener('click', () => {
      window.__treatTab = 'other';
      renderTreatmentList();
    });

    // "Éditer" -> bascule sur onglet epi et scroll vers la carte
    list.querySelectorAll('.list-jump-edit').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.idx || 'NaN', 10);
        window.__treatTab = 'epi';
        renderTreatmentList();
        // scroll après rendu
        setTimeout(() => {
          const card = document.querySelector(`.epi-card[data-idx="${idx}"]`);
          if (card && typeof card.scrollIntoView === 'function') {
            card.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        }, 50);
      });
    });

    return;
  }

  // ======= ONGLET 2 : AUTRES TRAITEMENTS =======
  if (tab === 'other') {
    if (actions) actions.style.display = 'grid';

    const total = appData.otherTreatments.length;
    const active = appData.otherTreatments.filter(t => t.active).length;
    if (countEl) countEl.textContent = `${active}/${total} actif(s)`;

    if (!total) {
      list.innerHTML = `
        <div class="empty-state" style="padding: 26px 10px;">
          <div class="empty-icon">🩺</div>
          <div class="empty-text">Aucun autre traitement</div>
          <div style="color: var(--text-secondary); font-size:13px; margin-top:8px;">
            Exemple : tension, diabète, vitamines…
          </div>
          <button class="btn btn-primary" id="emptyAddOtherBtn" style="margin-top:14px; width:100%;">+ Ajouter</button>
        </div>
      `;
      document.getElementById('emptyAddOtherBtn')?.addEventListener('click', () => {
        appData.otherTreatments.push({ id: Date.now(), label:'', dosage:'', frequency:'1 fois par jour', times:['08:00'], notes:'', active:true });
        renderTreatmentList();
      });
      return;
    }

    list.innerHTML = appData.otherTreatments.map((t, idx) => {
      const times = uniqSortedTimes(t.times);
      const label = t.label || 'Traitement (à nommer)';
      return `
        <div class="other-card" data-idx="${idx}" style="border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; background: var(--surface);">
          <div style="display:flex; align-items:flex-start; gap:10px;">
            <div style="width:40px;height:40px;border-radius:12px;border:1px solid var(--border); background: rgba(107,154,166,0.14); display:flex; align-items:center; justify-content:center; font-size:20px;">🩺</div>
            <div style="flex:1; min-width:0;">
              <div style="font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${label}</div>
              <div style="margin-top:6px; color: var(--text-secondary); font-size:13px;">
                ${t.dosage ? t.dosage : 'Dosage non renseigné'} <span style="opacity:.6;">•</span> ${t.frequency || 'Fréquence'}
              </div>
            </div>
            <button type="button" class="other-remove" data-idx="${idx}" style="width:40px;height:40px;border-radius:12px;border:1px solid var(--border); background: transparent; font-size:18px;">🗑️</button>
          </div>

          <div style="margin-top:12px;">
            <div class="form-group">
              <label class="form-label">Nom du traitement</label>
              <input type="text" class="form-input" data-field="label" value="${t.label || ''}" maxlength="60" placeholder="Ex: Vitamine D / Tension..." />
            </div>

            <div class="form-group">
              <label class="form-label">Dosage</label>
              <input type="text" class="form-input" data-field="dosage" value="${t.dosage || ''}" maxlength="30" placeholder="Ex: 1 comprimé / 10 gouttes..." />
            </div>

            <div class="form-group">
              <label class="form-label">Fréquence</label>
              <select class="form-select" data-field="frequency">
                <option value="1 fois par jour" ${t.frequency === '1 fois par jour' ? 'selected' : ''}>1 fois par jour</option>
                <option value="2 fois par jour" ${t.frequency === '2 fois par jour' ? 'selected' : ''}>2 fois par jour</option>
                <option value="3 fois par jour" ${t.frequency === '3 fois par jour' ? 'selected' : ''}>3 fois par jour</option>
                <option value="Au besoin" ${t.frequency === 'Au besoin' ? 'selected' : ''}>Au besoin</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label">Heure(s)</label>
              <div style="display:flex; flex-direction:column; gap:8px;">
                ${times.map((time, tIdx) => `
                  <div style="display:flex; gap:8px; align-items:center;">
                    <input type="time" class="form-input" data-field="time" data-time-idx="${tIdx}" value="${time}" style="flex:1;">
                    <button type="button" class="btn btn-secondary other-time-remove" data-idx="${idx}" data-time-idx="${tIdx}" style="width:46px; padding:0;">−</button>
                  </div>
                `).join('')}
                <button type="button" class="btn btn-outline other-time-add" data-idx="${idx}" style="width:100%;">+ Ajouter une heure</button>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">Notes</label>
              <textarea class="form-textarea" data-field="notes" style="min-height:90px;" placeholder="Optionnel...">${t.notes || ''}</textarea>
            </div>

            <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px;">
              <div>
                <div style="font-weight:800;">Actif</div>
                <div style="font-size:12px; color: var(--text-secondary);">Inclus dans la prochaine prise</div>
              </div>
              <input type="checkbox" data-field="active" ${t.active ? 'checked' : ''} style="transform: scale(1.2);">
            </div>
          </div>
        </div>
      `;
    }).join('');

    // bindings other
    list.querySelectorAll('.other-remove').forEach(btn => {
      btn.addEventListener('click', async () => {
        const idx = parseInt(btn.dataset.idx, 10);
        const label = appData.otherTreatments[idx]?.label || 'Traitement';
        if (confirm(`Supprimer "${label}" ?`)) {
          updateTreatmentFromDOM();
          appData.otherTreatments.splice(idx, 1);
          try { await saveToServer(); } catch (e) {}
          renderTreatmentList();
          showToast?.('Traitement supprimé', 'success');
        }
      });
    });

    list.querySelectorAll('.other-time-add').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.idx, 10);
        updateTreatmentFromDOM();
        const t = appData.otherTreatments[idx];
        if (!t) return;
        const times = uniqSortedTimes(t.times);
        const newTime = (times.includes('20:00') ? '21:00' : '20:00');
        t.times = uniqSortedTimes([...(t.times || []), newTime]);
        renderTreatmentList();
      });
    });

    list.querySelectorAll('.other-time-remove').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.idx, 10);
        const tIdx = parseInt(btn.dataset.timeIdx, 10);
        updateTreatmentFromDOM();
        const t = appData.otherTreatments[idx];
        if (!t) return;
        const times = uniqSortedTimes(t.times);
        times.splice(tIdx, 1);
        t.times = times.length ? times : ['08:00'];
        renderTreatmentList();
      });
    });

    return;
  }

  // ======= ONGLET 1 : ÉPILEPSIE =======
  if (actions) actions.style.display = 'grid';

  const total = appData.medications.length;
  const active = appData.medications.filter(m => m.active).length;
  if (countEl) countEl.textContent = `${active}/${total} actif(s)`;

  if (!total) {
    list.innerHTML = `
      <div class="empty-state" style="padding: 26px 10px;">
        <div class="empty-icon">💊</div>
        <div class="empty-text">Aucun médicament enregistré</div>
        <div style="color: var(--text-secondary); font-size:13px; margin-top:8px;">
          Ajoute ton traitement pour activer les rappels.
        </div>
        <button class="btn btn-primary" id="emptyAddEpiBtn" style="margin-top:14px; width:100%;">+ Ajouter</button>
      </div>
    `;
    document.getElementById('emptyAddEpiBtn')?.addEventListener('click', () => {
      appData.medications.push({ id: Date.now(), name: MEDICATIONS_LIST?.[0] || 'Keppra', customName:'', dosage:'', unit:'mg', frequency:'1 fois par jour', times:['08:00'], notes:'', active:true });
      renderTreatmentList();
    });
    return;
  }

  list.innerHTML = appData.medications.map((m, idx) => {
    const times = uniqSortedTimes(m.times);
    const valid = isMedValid(m);
    const isCustom = m.name === 'Autre (personnalisé)';

    const badge = m.active
      ? `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(46,125,50,0.14); border:1px solid rgba(46,125,50,0.25);">Actif</span>`
      : `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(120,120,120,0.10); border:1px solid var(--border); color: var(--text-secondary);">Inactif</span>`;

    const warn = valid ? '' : `<span style="font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(239,108,0,0.12); border:1px solid rgba(239,108,0,0.25);">⚠️ À compléter</span>`;

    return `
      <div class="epi-card" data-idx="${idx}" style="border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; background: var(--surface);">
        <div style="display:flex; align-items:flex-start; gap:10px;">
          <div style="width:40px;height:40px;border-radius:12px;border:1px solid var(--border); background: rgba(107,154,166,0.14); display:flex; align-items:center; justify-content:center; font-size:20px;">💊</div>
          <div style="flex:1; min-width:0;">
            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
              <div style="font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;">${getMedDisplayName(m)}</div>
              ${badge} ${warn}
            </div>
            <div style="margin-top:6px; color: var(--text-secondary); font-size:13px;">
              ${m.dosage ? `${m.dosage} ${m.unit || 'mg'}` : 'Dosage non renseigné'} <span style="opacity:.6;">•</span> ${m.frequency || 'Fréquence'}
            </div>
          </div>
          <button type="button" class="epi-remove" data-idx="${idx}" style="width:40px;height:40px;border-radius:12px;border:1px solid var(--border); background: transparent; font-size:18px;">🗑️</button>
        </div>

        <div style="margin-top:12px;">
          <div class="form-group">
            <label class="form-label">Médicament</label>
            <select class="form-select" data-field="name">
              ${(MEDICATIONS_LIST || ['Keppra','Autre (personnalisé)']).map(opt => `<option value="${opt}" ${m.name === opt ? 'selected' : ''}>${opt}</option>`).join('')}
            </select>
          </div>

          ${isCustom ? `
            <div class="form-group">
              <label class="form-label">Nom personnalisé</label>
              <input type="text" class="form-input" data-field="customName" value="${m.customName || ''}" maxlength="60" placeholder="Nom du médicament" />
            </div>
          ` : `<input type="hidden" data-field="customName" value="${m.customName || ''}">`}

          <div class="form-group">
            <label class="form-label">Dosage</label>
            <div style="display:flex; gap:8px;">
              <input type="number" class="form-input" data-field="dosage" value="${m.dosage || ''}" placeholder="Ex: 500" min="0" step="0.1" style="flex:2;">
              <select class="form-select" data-field="unit" style="flex:1;">
                <option value="mg" ${m.unit === 'mg' ? 'selected' : ''}>mg</option>
                <option value="g" ${m.unit === 'g' ? 'selected' : ''}>g</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Fréquence</label>
            <select class="form-select" data-field="frequency">
              <option value="1 fois par jour" ${m.frequency === '1 fois par jour' ? 'selected' : ''}>1 fois par jour</option>
              <option value="2 fois par jour" ${m.frequency === '2 fois par jour' ? 'selected' : ''}>2 fois par jour</option>
              <option value="3 fois par jour" ${m.frequency === '3 fois par jour' ? 'selected' : ''}>3 fois par jour</option>
              <option value="Au besoin" ${m.frequency === 'Au besoin' ? 'selected' : ''}>Au besoin</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Heure(s)</label>
            <div style="display:flex; flex-direction:column; gap:8px;">
              ${times.map((time, tIdx) => `
                <div style="display:flex; gap:8px; align-items:center;">
                  <input type="time" class="form-input" data-field="time" data-time-idx="${tIdx}" value="${time}" style="flex:1;">
                  <button type="button" class="btn btn-secondary epi-time-remove" data-idx="${idx}" data-time-idx="${tIdx}" style="width:46px; padding:0;">−</button>
                </div>
              `).join('')}
              <button type="button" class="btn btn-outline epi-time-add" data-idx="${idx}" style="width:100%;">+ Ajouter une heure</button>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Notes</label>
            <textarea class="form-textarea" data-field="notes" style="min-height:90px;" placeholder="Optionnel...">${m.notes || ''}</textarea>
          </div>

          <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px;">
            <div>
              <div style="font-weight:800;">Actif</div>
              <div style="font-size:12px; color: var(--text-secondary);">Inclus dans le rappel</div>
            </div>
            <input type="checkbox" data-field="active" ${m.active ? 'checked' : ''} style="transform: scale(1.2);">
          </div>
        </div>
      </div>
    `;
  }).join('');

  // bindings epi
  list.querySelectorAll('.epi-remove').forEach(btn => {
    btn.addEventListener('click', async () => {
      const idx = parseInt(btn.dataset.idx, 10);
      const label = getMedDisplayName(appData.medications[idx]);
      if (confirm(`Supprimer "${label}" ?`)) {
        updateTreatmentFromDOM();
        appData.medications.splice(idx, 1);
        try { await saveToServer(); } catch (e) {}
        renderTreatmentList();
        showToast?.('Médicament supprimé', 'success');
      }
    });
  });

  // name change -> rerender (customName show/hide)
  list.querySelectorAll('select[data-field="name"]').forEach(sel => {
    sel.addEventListener('change', () => {
      updateTreatmentFromDOM();
      renderTreatmentList();
    });
  });

  // fréquence -> préremplir heures
  list.querySelectorAll('select[data-field="frequency"]').forEach(sel => {
    sel.addEventListener('change', () => {
      updateTreatmentFromDOM();
      const card = sel.closest('.epi-card');
      const idx = parseInt(card?.dataset?.idx || 'NaN', 10);
      const m = appData.medications[idx];
      if (!m) return;

      if (m.frequency === '1 fois par jour') m.times = ['08:00'];
      else if (m.frequency === '2 fois par jour') m.times = ['08:00', '20:00'];
      else if (m.frequency === '3 fois par jour') m.times = ['08:00', '14:00', '20:00'];
      else m.times = uniqSortedTimes(m.times || ['08:00']);

      renderTreatmentList();
    });
  });

  list.querySelectorAll('.epi-time-add').forEach(btn => {
    btn.addEventListener('click', () => {
      const idx = parseInt(btn.dataset.idx, 10);
      updateTreatmentFromDOM();
      const m = appData.medications[idx];
      if (!m) return;
      const times = uniqSortedTimes(m.times);
      const newTime = (times.includes('20:00') ? '21:00' : '20:00');
      m.times = uniqSortedTimes([...(m.times || []), newTime]);
      renderTreatmentList();
    });
  });

  list.querySelectorAll('.epi-time-remove').forEach(btn => {
    btn.addEventListener('click', () => {
      const idx = parseInt(btn.dataset.idx, 10);
      const tIdx = parseInt(btn.dataset.timeIdx, 10);
      updateTreatmentFromDOM();
      const m = appData.medications[idx];
      if (!m) return;
      const times = uniqSortedTimes(m.times);
      times.splice(tIdx, 1);
      m.times = times.length ? times : ['08:00'];
      renderTreatmentList();
    });
  });
}


  // ========= PAGE PARAMÈTRES (RESTRUCTURÉE) =========

function ensureSettingsDefaults() {
  if (!appData.settings) appData.settings = {};

  if (!appData.settings.accessibility) {
    appData.settings.accessibility = {
      largeText: false,          // (ancien, on garde pour compat)
      highContrast: false,
      reduceAnimations: false,
      crisisButtonSize: 180,
      textScale: 1.0            // ✅ nouveau: 1.0 / 1.2 / 1.4 / ...
    };
  }

  if (typeof appData.settings.accessibility.textScale !== 'number') {
    appData.settings.accessibility.textScale = 1.0;
  }

  if (typeof appData.settings.darkMode !== 'boolean') {
    appData.settings.darkMode = false;
  }

  if (!appData.settings.quickCall) {
    appData.settings.quickCall = { enabled: true, name: 'Contact', phone: '' };
  }

  if (!appData.settings.customQuickAction) {
    appData.settings.customQuickAction = {
      configured: false,
      label: 'TON Raccourci',
      icon: '➕',
      color: '#6B9AA6',
      key: 'show_medication_reminder',
      params: { page: 'treatment' }
    };
  }
}

function renderSettingsPage() {
  ensureSettingsDefaults();

  const a11y = appData.settings.accessibility;
  const qc = appData.settings.quickCall;
  const cqa = appData.settings.customQuickAction;

  // paliers 20%
  const SCALE_STEPS = [1.0, 1.2, 1.4, 1.6, 1.8];
  const currentScale = SCALE_STEPS.includes(a11y.textScale) ? a11y.textScale : 1.0;

  document.getElementById('mainContent').innerHTML = `
    <h1 class="page-header">⚙️ Paramètres</h1>

    <!-- ===== SECTION ACCESSIBILITÉ ===== -->
    <div class="card settings-section">
      <div class="settings-section-header">
        <span class="settings-section-icon">♿</span>
        <span class="settings-section-title">Accessibilité</span>
      </div>

      <div class="settings-option">
        <div>
          <div class="settings-option-label">Contraste élevé</div>
          <div class="settings-option-desc">Améliore la lisibilité</div>
        </div>
        <div class="toggle-switch ${a11y.highContrast ? 'active' : ''}" id="toggleHighContrast"></div>
      </div>

      <div class="settings-option">
        <div>
          <div class="settings-option-label">Mode sombre</div>
          <div class="settings-option-desc">Réduit la fatigue oculaire</div>
        </div>
        <div class="toggle-switch ${appData.settings.darkMode ? 'active' : ''}" id="toggleDarkMode"></div>
      </div>

      <div class="form-group" style="margin-top: 14px;">
        <label class="form-label">Taille du texte</label>
        <select class="form-input form-select" id="textScaleSelect">
          ${SCALE_STEPS.map(v => {
            const pct = Math.round(v * 100);
            return `<option value="${v}" ${v === currentScale ? 'selected' : ''}>${pct}%</option>`;
          }).join('')}
        </select>
        
      </div>
    </div>

    <!-- ===== SECTION PARAMÈTRES DES BOUTONS ===== -->
    <div class="card settings-section">
      <div class="settings-section-header">
        <span class="settings-section-icon">🧩</span>
        <span class="settings-section-title">Paramètres des boutons</span>
      </div>

      <!-- Action rapide perso -->
      <div class="form-group" style="margin-top: 6px;">
        <label class="form-label">Action rapide (TON action)</label>
        <div style="display:flex; gap:10px;">
          <input type="text" class="form-input" id="cqaLabel" maxlength="20"
            value="${(cqa.label || 'TON Raccourci')}" placeholder="Nom du bouton">
          <input type="text" class="form-input" id="cqaIcon" maxlength="2"
            value="${(cqa.icon || '➕')}" style="width:90px;" placeholder="➕">
        </div>
        <div style="display:flex; gap:10px; margin-top:10px; align-items:center;">
          <input type="color" class="form-input" id="cqaColor"
            value="${(cqa.color || '#6B9AA6')}" style="width:120px; height:48px;">
          <button class="btn btn-secondary" id="openCqaConfigBtn" type="button" style="flex:1;">
            Choisir l’action…
          </button>
        </div>
       </div>

      <hr style="border:none; border-top:1px solid var(--border); margin: 18px 0;">

      <!-- Bouton appel rapide -->
      <div class="settings-option">
        <div>
          <div class="settings-option-label">Bouton “Appeler contact”</div>
          <div class="settings-option-desc">Affiche / masque l’action rapide</div>
        </div>
        <div class="toggle-switch ${qc.enabled ? 'active' : ''}" id="quickCallToggle"></div>
      </div>

      <div class="form-group" style="margin-top: 14px;">
        <label class="form-label" for="quickCallName">Nom affiché</label>
        <input type="text" class="form-input" id="quickCallName" maxlength="20"
          value="${(qc.name || 'Contact')}"
          placeholder="Ex: Maman, Conjoint, Voisin...">
      </div>

      <div class="form-group">
        <label class="form-label" for="quickCallPhone">Téléphone</label>
        <input type="tel" class="form-input" id="quickCallPhone"
          value="${(qc.phone || '')}"
          placeholder="Ex: +32 4 123 45 67">
      </div>

      <div style="margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.4;">
        Astuce : si le téléphone est vide, l’app utilisera automatiquement le 1er contact d’urgence du Profil.
      </div>
    </div>

    <!-- ===== BOUTON ENREGISTRER ===== -->
    <div class="card">
      <button class="btn btn-primary btn-full" id="saveSettingsBtn">
        💾 Enregistrer / Modifier les paramètres
      </button>
    </div>
  `;

  // ===== Events (ne sauvegarde PAS tout de suite) =====
  document.getElementById('toggleHighContrast')?.addEventListener('click', () => {
    a11y.highContrast = !a11y.highContrast;
    applySettings();
    renderSettingsPage();
  });

  document.getElementById('toggleDarkMode')?.addEventListener('click', () => {
    appData.settings.darkMode = !appData.settings.darkMode;
    applySettings();
    renderSettingsPage();
  });

  document.getElementById('textScaleSelect')?.addEventListener('change', (e) => {
    a11y.textScale = parseFloat(e.target.value) || 1.0;
    applySettings();
  });

  document.getElementById('quickCallToggle')?.addEventListener('click', () => {
    qc.enabled = !qc.enabled;
    renderSettingsPage();
  });

  // Ouvre la config “Patch 3” si présente
  document.getElementById('openCqaConfigBtn')?.addEventListener('click', () => {
    if (typeof openCustomQuickActionConfigModal === 'function') openCustomQuickActionConfigModal();
    else showToast?.("Configuration d'action rapide indisponible", 'error');
  });

  // ===== Enregistrer =====
  document.getElementById('saveSettingsBtn')?.addEventListener('click', async () => {
    // récupère champs action rapide
    const newLabel = (document.getElementById('cqaLabel')?.value || 'TON Raccourci').trim() || 'TON Raccourci';
    const newIcon = (document.getElementById('cqaIcon')?.value || '➕').trim() || '➕';
    const newColor = (document.getElementById('cqaColor')?.value || '#6B9AA6').trim() || '#6B9AA6';

    appData.settings.customQuickAction.label = newLabel;
    appData.settings.customQuickAction.icon = newIcon;
    appData.settings.customQuickAction.color = newColor;

    // récupère quick call
    appData.settings.quickCall.name = (document.getElementById('quickCallName')?.value || 'Contact').trim() || 'Contact';
    appData.settings.quickCall.phone = (document.getElementById('quickCallPhone')?.value || '').trim();

    await saveToServer();
    applySettings();
    showToast?.('✅ Paramètres enregistrés', 'success');
  });
}

// ✅ Mets à jour applySettings pour gérer le textScale (paliers 20%)
function applySettings() {
  const body = document.body;

  // classes existantes
  body.classList.toggle('high-contrast', !!appData.settings?.accessibility?.highContrast);

  if (appData.settings?.darkMode) body.setAttribute('data-theme', 'dark');
  else body.removeAttribute('data-theme');

  // ✅ échelle texte via CSS variable (à utiliser dans ton CSS: font-size: calc(16px * var(--text-scale));)
  const scale = appData.settings?.accessibility?.textScale || 1.0;
  body.style.setProperty('--text-scale', String(scale));
}

  // ========= PAGE PROFIL =========

  function cleanText(v, max = 120) {
    return String(v ?? '').trim().slice(0, max);
  }

  function cleanPhone(v) {
    return String(v ?? '').trim().replace(/\s+/g, '').slice(0, 32);
  }

  function isoToDateParts(iso) {
    if (!iso) return { day: '', month: '', year: '' };
    const [y, m, d] = iso.split('-');
    return { day: d || '', month: m || '', year: y || '' };
  }

  function datePartsToISO(day, month, year) {
    if (!day || !month || !year) return '';
    return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
  }

  function computeAgeFromParts(day, month, year) {
    if (!day || !month || !year) return '';
    const d = new Date(Number(year), Number(month) - 1, Number(day));
    if (Number.isNaN(d.getTime())) return '';
    const today = new Date();
    let age = today.getFullYear() - d.getFullYear();
    const m = today.getMonth() - d.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < d.getDate())) age--;
    return age >= 0 ? age : '';
  }

  function ensureProfileArrays() {
    if (!appData.profile) appData.profile = {};
    if (!Array.isArray(appData.profile.doctors)) appData.profile.doctors = [];
    if (!Array.isArray(appData.profile.emergencyContacts)) appData.profile.emergencyContacts = [];

    if (appData.profile.doctors.length === 0) {
      appData.profile.doctors.push({ name: '', specialty: 'Neurologue', location: '', phone: '' });
    }
    if (appData.profile.emergencyContacts.length === 0) {
      appData.profile.emergencyContacts.push({ name: '', relationship: 'Conjoint(e)', phone: '' });
    }
  }

  function getDoctorsFromDOM() {
    const docCards = document.querySelectorAll('.doctor-card');
    const doctors = Array.from(docCards).map(card => ({
      name: cleanText(card.querySelector('[data-field="doctorName"]')?.value, 120),
      specialty: cleanText(card.querySelector('[data-field="doctorSpecialty"]')?.value || 'Neurologue', 80) || 'Neurologue',
      location: cleanText(card.querySelector('[data-field="doctorLocation"]')?.value, 140),
      phone: cleanPhone(card.querySelector('[data-field="doctorPhone"]')?.value)
    })).filter(d => d.name || d.location || d.phone);

    return doctors.length ? doctors : [{ name: '', specialty: 'Neurologue', location: '', phone: '' }];
  }

  function getEmergenciesFromDOM() {
    const emerCards = document.querySelectorAll('.emergency-card');
    const contacts = Array.from(emerCards).map(card => ({
      name: cleanText(card.querySelector('[data-field="emergencyName"]')?.value, 120),
      relationship: cleanText(card.querySelector('[data-field="emergencyRelation"]')?.value, 80),
      phone: cleanPhone(card.querySelector('[data-field="emergencyPhone"]')?.value)
    })).filter(c => c.name || c.phone);

    return contacts.length ? contacts : [{ name: '', relationship: 'Conjoint(e)', phone: '' }];
  }

  async function savePatientSection() {
    const day = document.getElementById('birthDay')?.value;
    const month = document.getElementById('birthMonth')?.value;
    const year = document.getElementById('birthYear')?.value;

    appData.profile.firstname = cleanText(document.getElementById('firstname')?.value, 80);
    appData.profile.lastname = cleanText(document.getElementById('lastname')?.value, 80);
    appData.profile.birthdate = datePartsToISO(day, month, year);
    appData.profile.phone = cleanPhone(document.getElementById('phone')?.value);
    appData.profile.weightKg = cleanText(document.getElementById('weightKg')?.value, 10);
    appData.profile.heightCm = cleanText(document.getElementById('heightCm')?.value, 10);

    await saveToServer();
    showToast('✅ Données patient enregistrées', 'success');
  }

  async function saveDoctorsSection() {
    ensureProfileArrays();
    appData.profile.doctors = getDoctorsFromDOM();
    await saveToServer();
    showToast('✅ Médecins enregistrés', 'success');
  }

  async function saveEmergencySection() {
    ensureProfileArrays();
    appData.profile.emergencyContacts = getEmergenciesFromDOM();
    await saveToServer();
    showToast('✅ Contacts d’urgence enregistrés', 'success');
  }

  function renderProfilePage() {
    ensureProfileArrays();

    const p = appData.profile || {};
    const doctors = appData.profile.doctors;
    const emergencies = appData.profile.emergencyContacts;

    const { day, month, year } = isoToDateParts(p.birthdate);
    const age = computeAgeFromParts(day, month, year);

    const currentYear = new Date().getFullYear();
    const years = Array.from({ length: 120 }, (_, i) => currentYear - i);

    const monthLabels = [
      'Janvier','Février','Mars','Avril','Mai','Juin',
      'Juillet','Août','Septembre','Octobre','Novembre','Décembre'
    ];

    document.getElementById('mainContent').innerHTML = `
      <h1 class="page-header">Mon Profil</h1>

      <!-- ===================== PATIENT ===================== -->
      <div class="card" id="patientCard">
        <div class="section-title">👤 Données patient</div>

        <div class="form-group">
          <label class="form-label">Prénom</label>
          <input type="text" class="form-input" id="firstname" value="${p.firstname || ''}">
        </div>

        <div class="form-group">
          <label class="form-label">Nom</label>
          <input type="text" class="form-input" id="lastname" value="${p.lastname || ''}">
        </div>

        <div class="form-group">
          <label class="form-label">Date de naissance</label>
          <div style="display:flex; gap:8px;">
            <select class="form-select" id="birthDay">
              <option value="">Jour</option>
              ${Array.from({ length: 31 }, (_, i) =>
                `<option value="${i + 1}" ${String(i + 1) === String(Number(day)) ? 'selected' : ''}>${i + 1}</option>`
              ).join('')}
            </select>

            <select class="form-select" id="birthMonth">
              <option value="">Mois</option>
              ${monthLabels.map((m, i) =>
                `<option value="${i + 1}" ${String(i + 1).padStart(2, '0') === month ? 'selected' : ''}>${m}</option>`
              ).join('')}
            </select>

            <select class="form-select" id="birthYear">
              <option value="">Année</option>
              ${years.map(y =>
                `<option value="${y}" ${String(y) === year ? 'selected' : ''}>${y}</option>`
              ).join('')}
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Âge</label>
          <div class="custom-input"><span id="ageDisplay">${age !== '' ? age + ' ans' : '—'}</span></div>
        </div>

        <div class="form-group">
          <label class="form-label">Téléphone</label>
          <input type="tel" class="form-input" id="phone" value="${p.phone || ''}" placeholder="+324xxxxxxxx">
        </div>

        <div class="duration-inputs">
          <div class="duration-field">
            <label class="form-label">Poids (kg)</label>
            <input type="number" step="0.1" min="0" class="form-input" id="weightKg" value="${p.weightKg || ''}">
          </div>
          <div class="duration-field">
            <label class="form-label">Taille (cm)</label>
            <input type="number" step="0.1" min="0" class="form-input" id="heightCm" value="${p.heightCm || ''}">
          </div>
        </div>

        <button type="button" class="btn btn-primary btn-full" id="savePatientBtn" style="margin-top:12px;">
          💾 Enregistrer les données patient
        </button>
      </div>

      <!-- ===================== MEDECINS ===================== -->
      <div class="card" id="doctorsCard">
        <div class="section-title">🩺 Médecins</div>

        <div id="doctorsContainer">
          ${doctors.map((doc, idx) => `
            <div class="contact-card doctor-card" data-index="${idx}" style="margin-bottom: 16px;">
              <div class="contact-header">
                <div class="contact-title">Médecin ${idx + 1}</div>
                <button type="button" class="remove-btn remove-doctor-btn" data-index="${idx}">−</button>
              </div>

              <div class="form-group">
                <label class="form-label">Nom</label>
                <input type="text" class="form-input" data-field="doctorName" value="${doc.name || ''}" placeholder="Nom du médecin">
              </div>

              <div class="form-group">
                <label class="form-label">Spécialité</label>
                <input type="text" class="form-input" data-field="doctorSpecialty" value="${doc.specialty || 'Neurologue'}" placeholder="Neurologue">
              </div>

              <div class="form-group">
                <label class="form-label">Lieu</label>
                <input type="text" class="form-input" data-field="doctorLocation" value="${doc.location || ''}" placeholder="Hôpital / Cabinet / Ville">
              </div>

              <div class="form-group">
                <label class="form-label">Téléphone</label>
                <input type="tel" class="form-input" data-field="doctorPhone" value="${doc.phone || ''}" placeholder="+324xxxxxxxx">
              </div>
            </div>
          `).join('')}
        </div>

        <div class="btn-group" style="margin-top: 6px;">
          <button type="button" class="btn btn-secondary" id="addDoctorBtn">+ Ajouter un médecin</button>
          <button type="button" class="btn btn-primary" id="saveDoctorsBtn">💾 Enregistrer médecins</button>
        </div>
      </div>

      <!-- ===================== CONTACTS URGENCE ===================== -->
      <div class="card" id="emergencyCard">
        <div class="section-title">🚑 Contacts d’urgence</div>

        <div id="emergencyContainer">
          ${emergencies.map((c, idx) => `
            <div class="contact-card emergency-card" data-index="${idx}" style="margin-bottom: 16px;">
              <div class="contact-header">
                <div class="contact-title">Contact ${idx + 1}</div>
                <button type="button" class="remove-btn remove-emergency-btn" data-index="${idx}">−</button>
              </div>

              <div class="form-group">
                <label class="form-label">Prénom + Nom</label>
                <input type="text" class="form-input" data-field="emergencyName" value="${c.name || ''}" placeholder="Nom du contact">
              </div>

              <div class="form-group">
                <label class="form-label">Lien</label>
                <input type="text" class="form-input" data-field="emergencyRelation" value="${c.relationship || ''}" placeholder="Conjoint(e), Parent, Ami…">
              </div>

              <div class="form-group">
                <label class="form-label">Téléphone</label>
                <input type="tel" class="form-input" data-field="emergencyPhone" value="${c.phone || ''}" placeholder="+324xxxxxxxx">
              </div>
            </div>
          `).join('')}
        </div>

        <div class="btn-group" style="margin-top: 6px;">
          <button type="button" class="btn btn-secondary" id="addEmergencyBtn">+ Ajouter un contact</button>
          <button type="button" class="btn btn-primary" id="saveEmergencyBtn">💾 Enregistrer contacts</button>
        </div>

        <button type="button" class="btn btn-outline btn-full" id="saveAllProfileBtn" style="margin-top: 14px;">
          ✅ Enregistrer TOUT le profil
        </button>
      </div>
    `;

    // Age live
    ['birthDay', 'birthMonth', 'birthYear'].forEach(id => {
      document.getElementById(id)?.addEventListener('change', () => {
        const d = document.getElementById('birthDay')?.value;
        const m = document.getElementById('birthMonth')?.value;
        const y = document.getElementById('birthYear')?.value;
        const a = computeAgeFromParts(d, m, y);
        const el = document.getElementById('ageDisplay');
        if (el) el.textContent = a !== '' ? `${a} ans` : '—';
      });
    });

    // Add Doctor
    document.getElementById('addDoctorBtn')?.addEventListener('click', () => {
      appData.profile.doctors.push({ name: '', specialty: 'Neurologue', location: '', phone: '' });
      renderProfilePage();
    });

    // Remove Doctor
    document.querySelectorAll('.remove-doctor-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.index, 10);
        appData.profile.doctors.splice(idx, 1);
        if (appData.profile.doctors.length === 0) {
          appData.profile.doctors.push({ name: '', specialty: 'Neurologue', location: '', phone: '' });
        }
        renderProfilePage();
      });
    });

    // Add Emergency
    document.getElementById('addEmergencyBtn')?.addEventListener('click', () => {
      appData.profile.emergencyContacts.push({ name: '', relationship: 'Conjoint(e)', phone: '' });
      renderProfilePage();
    });

    // Remove Emergency
    document.querySelectorAll('.remove-emergency-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.index, 10);
        appData.profile.emergencyContacts.splice(idx, 1);
        if (appData.profile.emergencyContacts.length === 0) {
          appData.profile.emergencyContacts.push({ name: '', relationship: 'Conjoint(e)', phone: '' });
        }
        renderProfilePage();
      });
    });

    // Save Patient
    document.getElementById('savePatientBtn')?.addEventListener('click', savePatientSection);

    // Save Doctors
    document.getElementById('saveDoctorsBtn')?.addEventListener('click', saveDoctorsSection);

    // Save Emergencies
    document.getElementById('saveEmergencyBtn')?.addEventListener('click', saveEmergencySection);

    // Save All
    document.getElementById('saveAllProfileBtn')?.addEventListener('click', async () => {
      await savePatientSection();
      await saveDoctorsSection();
      await saveEmergencySection();
      showToast('✅ Profil complet enregistré', 'success');
      renderProfilePage();
    });
  }

  // ========= PAGE DONNÉES =========

function renderDataPage() {
  document.getElementById('mainContent').innerHTML = `
    <h1 class="page-header">💾 Mes données</h1>
    <div class="card">
      <div class="section-title">💾 Sauvegarder les données</div>
      <p style="margin-bottom: 16px; color: var(--text-secondary); line-height: 1.6;">
        Téléchargez une copie complète de toutes vos données sur votre appareil.
      </p>

      <button class="btn btn-primary btn-full" id="downloadBackupBtn" style="margin-bottom: 24px;">
        💾 Télécharger la sauvegarde
      </button>

      <div class="section-title">📂 Restaurer les données</div>
      <p style="margin-bottom: 16px; color: var(--text-secondary); line-height: 1.6;">
        Importez une sauvegarde précédente depuis votre appareil.
      </p>

      <input type="file" id="restoreFileInput" accept=".json" style="display: none;">
      <button class="btn btn-secondary btn-full" id="restoreBtn">
        📂 Restaurer les données
      </button>
    </div>
  `;

  // === Télécharger sauvegarde ===
  document.getElementById('downloadBackupBtn')?.addEventListener('click', () => {
    createBackup();
  });

  // === Ouvrir sélecteur de fichier ===
  document.getElementById('restoreBtn')?.addEventListener('click', () => {
    document.getElementById('restoreFileInput')?.click();
  });

  // === Restaurer sauvegarde ===
  document.getElementById('restoreFileInput')?.addEventListener('change', (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async (event) => {
      try {
        const raw = JSON.parse(event.target.result);

        // Support ancien format (appData brut) + nouveau format { meta, data }
        const restored =
          (raw && raw.data && typeof raw.data === 'object')
            ? raw.data
            : raw;

        if (!restored || typeof restored !== 'object') {
          throw new Error('Backup invalide');
        }

        // Merge soft sécurisé
        appData = { ...appData, ...restored };
        window.appData = appData;

        await saveToServer();
        showToast('✅ Données restaurées avec succès', 'success');

        setTimeout(() => navigateToPage('home'), 600);
      } catch (err) {
        console.error(err);
        showToast('❌ Fichier de sauvegarde invalide', 'error');
      }
    };

    reader.readAsText(file);
  });
}

  // ========= AUTRES PAGES (Guide, User Guide, About) =========

  function renderGuidePage() {
    document.getElementById('mainContent').innerHTML = `
      <h1 class="page-header">Guide des crises</h1>
      ${CRISIS_TYPES.map(type => `
        <div class="guide-card">
          <div class="guide-header">
            <span class="guide-icon">${type.icon}</span>
            <span class="guide-name">${type.name}</span>
          </div>
          <div class="guide-desc">${type.desc}</div>
          <div class="guide-section">
            <div class="guide-section-title">🩺 Que faire</div>
            <ul class="guide-list">
              <li>Restez calme et rassurant</li>
              <li>Assurez la sécurité de la personne</li>
              <li>Ne restreignez pas les mouvements</li>
              <li>Chronométrez la durée</li>
              <li>Appelez les urgences si &gt; 5 minutes</li>
            </ul>
          </div>
        </div>
      `).join('')}
      <div class="warning-box">
        <div class="warning-box-title">⚠️ Attention</div>
        <div>En cas de doute, de crise prolongée (&gt;5 min) ou de détresse respiratoire, appelez immédiatement les urgences (112).</div>
      </div>
    `;
  }

  function renderUserGuidePage() {
  document.getElementById('mainContent').innerHTML = `
    <h1 class="page-header">📖 Guide d’utilisation</h1>

    <div class="card">
      <p style="color: var(--text-secondary); line-height: 1.6;">
        Ce guide vous aide à comprendre et utiliser <strong>EpiMaat</strong> simplement,
        étape par étape, au quotidien.
      </p>
    </div>

    <!-- ===================== TABLEAU DE BORD ===================== -->
    <div class="card">
      <div class="section-title">🏠 Tableau de bord</div>
      <ul class="guide-list">
        <li>Affiche l’heure, la date et vos statistiques principales</li>
        <li>Bouton central pour enregistrer rapidement une crise</li>
        <li>Actions rapides personnalisables</li>
      </ul>
    </div>

    <!-- ===================== BOUTON CRISE ===================== -->
    <div class="card">
      <div class="section-title">🔴 Bouton crise</div>
      <ul class="guide-list">
        <li>Appuyez pour <strong>démarrer</strong> une crise</li>
        <li>Appuyez à nouveau pour <strong>arrêter le chronomètre</strong></li>
        <li>La durée est enregistrée automatiquement</li>
        <li>Le type et la couleur sont personnalisables ⚙️</li>
      </ul>
    </div>

    <!-- ===================== ACTIONS RAPIDES ===================== -->
    <div class="card">
      <div class="section-title">⚡ Actions rapides</div>
      <ul class="guide-list">
        <li>Appeler un contact personnalisé 📞</li>
        <li>Créer une sauvegarde complète 💾</li>
        <li>Utiliser <strong>TON action</strong> personnalisée</li>
      </ul>
      <p style="font-size: 14px; color: var(--text-secondary);">
        👉 Les actions rapides se configurent dans <strong>Paramètres → Paramètres des boutons</strong>
      </p>
    </div>

    <!-- ===================== ENREGISTREMENT MANUEL ===================== -->
    <div class="card">
      <div class="section-title">📝 Enregistrement manuel</div>
      <ul class="guide-list">
        <li>Ajoutez une crise manuellement</li>
        <li>Choisissez la date, l’heure et la durée</li>
        <li>Ajoutez des déclencheurs et des notes</li>
      </ul>
    </div>

    <!-- ===================== TRAITEMENT ===================== -->
    <div class="card">
      <div class="section-title">💊 Traitement & rappels</div>
      <ul class="guide-list">
        <li>Ajoutez vos médicaments</li>
        <li>Définissez les heures de prise</li>
        <li>Activez ou désactivez un traitement</li>
        <li>Les rappels utilisent vos données de traitement</li>
      </ul>
    </div>

    <!-- ===================== PARAMÈTRES ===================== -->
    <div class="card">
      <div class="section-title">⚙️ Paramètres importants</div>
      <ul class="guide-list">
        <li>Mode sombre 🌙</li>
        <li>Contraste élevé ♿</li>
        <li>Taille du texte (par palier de 20%)</li>
        <li>Configuration des boutons rapides</li>
      </ul>
    </div>

    <!-- ===================== SAUVEGARDE ===================== -->
    <div class="card">
      <div class="section-title">💾 Sauvegarde des données</div>
      <ul class="guide-list">
        <li>Téléchargez une sauvegarde complète (JSON)</li>
        <li>Restaurez vos données à tout moment</li>
        <li>Vos données restent <strong>sur votre appareil</strong></li>
      </ul>
    </div>

    <!-- ===================== ASTUCES ===================== -->
    <div class="card">
      <div class="section-title">💡 Astuces utiles</div>
      <ul class="guide-list">
        <li>Personnalisez les actions rapides selon vos besoins</li>
        <li>Sauvegardez régulièrement vos données</li>
        <li>Utilisez le guide des crises en cas d’urgence</li>
      </ul>
    </div>
  `;
}

 // ========= PAGE À PROPOS (SAFE: délégation + cleanup, étoiles + partage + mission) =========

function renderAboutPage() {
  const APP_NAME = 'EpiMaat';
  const APP_URL = 'https://www.epimaat.eu';
  const CONTACT_EMAIL = 'EpiMaat@outlook.be';
  const APP_VERSION = (typeof APP_BACKUP_VERSION !== 'undefined') ? APP_BACKUP_VERSION : '1.0.0';

  const main = document.getElementById('mainContent');
  if (!main) return;

  // ---- cleanup précédent (si on revient sur la page) ----
  if (typeof window.__aboutCleanup === 'function') {
    try { window.__aboutCleanup(); } catch (e) {}
    window.__aboutCleanup = null;
  }

  // AbortController = stoppe TOUS les events attachés avec {signal}
  const ac = new AbortController();
  const { signal } = ac;

  // On expose un cleanup global (appelé au prochain renderAboutPage)
  window.__aboutCleanup = () => ac.abort();

  const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (m) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  }[m]));

  const sectionCard = (title, icon, content) => `
    <div class="card" style="margin-bottom:16px;">
      <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
        <div style="font-size:22px; line-height:1;">${icon}</div>
        <div style="font-weight:800; font-size:18px;">${title}</div>
      </div>
      <div style="color: var(--text-secondary); line-height:1.65; font-size:15px;">
        ${content}
      </div>
    </div>
  `;

  const starsRow = `
    <div style="display:flex; gap:8px; justify-content:center; margin:10px 0 6px;">
      ${[1,2,3,4,5].map(v => `
        <button
          class="btn btn-secondary"
          data-about-star="${v}"
          aria-label="Noter ${v} sur 5"
          style="
            width:56px; height:56px; padding:0;
            display:flex; align-items:center; justify-content:center;
            border:1px solid var(--border);
            font-size:24px;
          "
        >☆</button>
      `).join('')}
    </div>
    <div id="aboutStarHint" style="
      text-align:center;
      margin-top:6px;
      padding:10px 12px;
      border:1px dashed var(--border);
      border-radius:12px;
      background: rgba(107,154,166,0.06);
      color: var(--text-secondary);
      font-size:13px;
      line-height:1.5;
    ">Choisis une note ⭐ (1 clic).</div>
  `;

// ---- UI ----
main.innerHTML = `
  <h1 class="page-header">ℹ️ À propos</h1>

  ${sectionCard('Qui sommes-nous ?', '👥', `
    <p style="margin:0; line-height:1.6; color: var(--text-secondary);">
      Deux développeurs passionnés : l’un vit avec l’épilepsie, l’autre agit avec bienveillance et écoute.
      L’application est née d’un vécu réel et du désir d’aider concrètement.
    </p>
  `)}

  ${sectionCard('Objectif', '🎯', `
    <p style="margin:0; line-height:1.6; color: var(--text-secondary);">
      Enregistrer ses crises rapidement, avec le minimum de clics, pour mieux comprendre et suivre leur évolution au quotidien.
    </p>
  `)}

  ${sectionCard('Mission', '💙', `
    <p style="margin:0; line-height:1.6; color: var(--text-secondary);">
      Proposer un outil simple et rassurant, pensé pour accompagner sans compliquer, aider à mieux se connaître
      et faciliter les échanges avec les professionnels de santé.
    </p>
  `)}

  ${sectionCard('Votre avis nous intéresse', '💬', `
    <p style="margin:0 0 12px 0; line-height:1.6; color: var(--text-secondary);">
      Une suggestion, un bug, ou un mot d’encouragement ? Votre retour nous aide à améliorer EpiMaat.
    </p>

    <div style="display:flex; flex-direction:column; gap:10px;">
      <!-- ⭐ Evaluation -->
      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:12px; background: var(--card-bg, rgba(255,255,255,0.04)); border:1px solid var(--border-color, rgba(255,255,255,0.08));">
        <div>
          <div style="font-weight:700; margin-bottom:4px;">⭐ Évaluez l’app</div>
          <div style="color: var(--text-secondary); font-size: 0.95rem;">Touchez une étoile (envoi par e-mail)</div>
        </div>

        <div id="ratingStars" style="display:flex; gap:6px; font-size:22px; line-height:1;">
          <button type="button" class="epi-star" data-rating="1" aria-label="1 étoile" style="all:unset; cursor:pointer; opacity:.95;">☆</button>
          <button type="button" class="epi-star" data-rating="2" aria-label="2 étoiles" style="all:unset; cursor:pointer; opacity:.95;">☆</button>
          <button type="button" class="epi-star" data-rating="3" aria-label="3 étoiles" style="all:unset; cursor:pointer; opacity:.95;">☆</button>
          <button type="button" class="epi-star" data-rating="4" aria-label="4 étoiles" style="all:unset; cursor:pointer; opacity:.95;">☆</button>
          <button type="button" class="epi-star" data-rating="5" aria-label="5 étoiles" style="all:unset; cursor:pointer; opacity:.95;">☆</button>
        </div>
      </div>

      <!-- ✉️ Message + Partage -->
      <div style="display:flex; flex-direction:column; gap:10px;">
        <button id="btnShareEpimaat" class="btn primary" type="button" style="display:flex; align-items:center; justify-content:center; gap:10px;">
          <span aria-hidden="true">📣</span>
          <span>Partager EpiMaat</span>
        </button>

        <button id="btnSendMessage" class="btn" type="button" style="display:flex; align-items:center; justify-content:center; gap:10px;">
          <span aria-hidden="true">✉️</span>
          <span>Envoyer un message</span>
        </button>

        <div id="aboutFeedbackHint" style="display:none; color: var(--text-secondary); font-size: 0.95rem; text-align:center;"></div>
      </div>
    </div>
  `)}
`;

// ---- LOGIQUE (SAFE) ----
try {
  const FEEDBACK_EMAIL = 'epimaat@outlook.be';

  // Petit helper (encodage mailto)
  function openMail(subject, body) {
    const s = encodeURIComponent(subject || '');
    const b = encodeURIComponent(body || '');
    window.location.href = `mailto:${FEEDBACK_EMAIL}?subject=${s}&body=${b}`;
  }

  // ⭐ Rating: UI + mail direct
  const starsWrap = document.getElementById('ratingStars');
  const hint = document.getElementById('aboutFeedbackHint');

  function paintStars(rating) {
    if (!starsWrap) return;
    const btns = starsWrap.querySelectorAll('.epi-star');
    btns.forEach(btn => {
      const r = Number(btn.getAttribute('data-rating')) || 0;
      btn.textContent = r <= rating ? '★' : '☆';
    });
  }

  if (starsWrap) {
    // Hover (facultatif, safe)
    starsWrap.addEventListener('mousemove', (e) => {
      const t = e.target;
      if (!t || !t.classList || !t.classList.contains('epi-star')) return;
      const r = Number(t.getAttribute('data-rating')) || 0;
      paintStars(r);
    });

    starsWrap.addEventListener('mouseleave', () => paintStars(0));

    // Click => email direct
    starsWrap.addEventListener('click', (e) => {
      const t = e.target;
      if (!t || !t.classList || !t.classList.contains('epi-star')) return;

      const rating = Number(t.getAttribute('data-rating')) || 0;
      paintStars(rating);

      const subject = `EpiMaat — Évaluation ${rating}/5`;
      const body =
`Bonjour,
Je souhaite donner ${rating}/5 à EpiMaat.

Message (optionnel) :
- 

Merci 🙏`;

      openMail(subject, body);
    });
  }

  // 📣 Partage
  const shareBtn = document.getElementById('btnShareEpimaat');
  if (shareBtn) {
    shareBtn.addEventListener('click', async () => {
      const title = (typeof APP_NAME !== 'undefined' && APP_NAME) ? APP_NAME : 'EpiMaat';
      const text = `Je te recommande ${title} : une app simple pour suivre les crises et s’organiser au quotidien.`;

      // Si tu as une URL officielle plus tard, mets-la ici :
      const url = (typeof location !== 'undefined' && location.href) ? location.href : '';

      try {
        if (navigator.share) {
          await navigator.share({ title, text, url });
          if (hint) { hint.style.display = 'block'; hint.textContent = 'Merci pour le partage 💙'; }
          return;
        }
      } catch (e) {
        // ignore (annulation / erreur share)
      }

      // Fallback: copier un texte
      const toCopy = `${text}${url ? `\n${url}` : ''}`;
      try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
          await navigator.clipboard.writeText(toCopy);
          if (hint) { hint.style.display = 'block'; hint.textContent = 'Lien copié ✅ Vous pouvez le coller où vous voulez.'; }
        } else {
          // dernier fallback : prompt
          window.prompt('Copiez ce message puis partagez-le :', toCopy);
        }
      } catch (e) {
        window.prompt('Copiez ce message puis partagez-le :', toCopy);
      }
    });
  }

  // ✉️ Envoyer un message (email direct)
  const msgBtn = document.getElementById('btnSendMessage');
  if (msgBtn) {
    msgBtn.addEventListener('click', () => {
      const subject = 'EpiMaat — Message / Suggestion';
      const body =
`Bonjour,
J’aimerais vous contacter à propos de EpiMaat.

Mon message :
- 

Merci 🙏`;
      openMail(subject, body);
    });
  }
} catch (e) {
  console.error('About feedback UI error:', e);
}


  // ---- État local de la page ----
  const state = { rating: 0 };

  const hintEl = main.querySelector('#aboutStarHint');
  const msgEl = main.querySelector('#aboutFeedbackMsg');
  const statusEl = main.querySelector('#aboutSendStatus');

  const updateStars = () => {
    const buttons = main.querySelectorAll('[data-about-star]');
    buttons.forEach(btn => {
      const v = Number(btn.getAttribute('data-about-star'));
      btn.textContent = (v <= state.rating) ? '★' : '☆';
      btn.style.borderColor = (v <= state.rating) ? 'var(--primary)' : 'var(--border)';
      btn.style.boxShadow = (v === state.rating && state.rating) ? '0 0 0 3px rgba(107,154,166,0.18)' : 'none';
    });

    if (!hintEl) return;
    hintEl.innerHTML = state.rating
      ? `✅ Note sélectionnée : <b>${state.rating}/5</b> — Merci !`
      : `Choisis une note ⭐ (1 clic).`;
  };

  const buildPayload = () => {
    const msg = (msgEl && msgEl.value ? msgEl.value.trim() : '');
    return {
      rating: state.rating ? `${state.rating}/5` : '(non renseigné)',
      msg,
      version: APP_VERSION,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    };
  };

  const payloadToText = (p) => ([
    `EpiMaat — Avis utilisateur`,
    `Note: ${p.rating}`,
    `Message: ${p.msg || '(vide)'}`,
    `Version: ${p.version}`,
    `Horodatage: ${p.timestamp}`,
    `UA: ${p.userAgent}`
  ].join('\n'));

  const copyText = async (text) => {
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
        return true;
      }
    } catch (e) {}
    try {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand('copy');
      document.body.removeChild(ta);
      return !!ok;
    } catch (e) {
      return false;
    }
  };

  const openMailClient = (subject, body) => {
    const mailto =
      `mailto:${encodeURIComponent(CONTACT_EMAIL)}` +
      `?subject=${encodeURIComponent(subject)}` +
      `&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
  };

  const go = (pageId) => {
    if (typeof window.navigateTo === 'function') {
      window.navigateTo(pageId, true);
    } else {
      location.hash = '#' + pageId;
    }
  };

  const shareApp = async () => {
    const text = `📱 ${APP_NAME} — outil d’aide au suivi de l’épilepsie\n${APP_URL}`;
    try {
      if (navigator.share) {
        await navigator.share({ title: APP_NAME, text, url: APP_URL });
        if (statusEl) statusEl.textContent = '✅ Partagé ! Merci 🙏';
        return;
      }
    } catch (e) {
      // si l'utilisateur annule, on ne panique pas
    }
    const ok = await copyText(text);
    if (statusEl) statusEl.textContent = ok
      ? '✅ Texte copié. Tu peux le coller où tu veux.'
      : 'ℹ️ Partage natif indisponible sur cet appareil.';
  };

  // ✅ 1 SEUL listener (délégation) -> beaucoup moins de risques de blocage
  main.addEventListener('click', async (ev) => {
    const starBtn = ev.target.closest('[data-about-star]');
    const actionBtn = ev.target.closest('[data-about-action]');
    const navBtn = ev.target.closest('[data-about-nav]');

    if (starBtn) {
      const v = Number(starBtn.getAttribute('data-about-star'));
      if (!Number.isFinite(v) || v < 1 || v > 5) return;
      state.rating = v;
      if (statusEl) statusEl.textContent = '';
      updateStars();
      return;
    }

    if (navBtn) {
      const dest = navBtn.getAttribute('data-about-nav');
      if (dest) go(dest);
      return;
    }

    if (actionBtn) {
      const action = actionBtn.getAttribute('data-about-action');

      if (action === 'shareApp') {
        await shareApp();
        return;
      }

      if (action === 'send') {
        if (!state.rating) {
          if (statusEl) statusEl.textContent = '⚠️ Choisis une note (1 à 5) avant d’envoyer.';
          updateStars();
          return;
        }
        const p = buildPayload();
        const text = payloadToText(p);

        const copied = await copyText(text);
        if (statusEl) statusEl.textContent = copied
          ? '✅ Détails copiés. Ouverture du mail…'
          : 'ℹ️ Ouverture du mail…';

        openMailClient(`EpiMaat — Avis ${p.rating} (v${p.version})`, text);
        return;
      }

      if (action === 'copy') {
        const p = buildPayload();
        const text = payloadToText(p);
        const ok = await copyText(text);
        if (statusEl) statusEl.textContent = ok
          ? '✅ Copié ! Tu peux coller dans un mail ou message.'
          : '❌ Copie impossible sur cet appareil.';
        return;
      }
    }
  }, { signal });

  updateStars();
}

  // ========= UTILS GLOBAL =========

  function calculateStats() {
    const now = new Date();
    const today = now.toISOString().split('T')[0];
    const stats = { total: appData.crises.length, today: 0, week: 0, month: 0, daysSince: 0 };

    const weekStart = getWeekStart(now);
    appData.crises.forEach(crisis => {
      const crisisDate = new Date(crisis.date);
      if (crisis.date.startsWith(today)) stats.today++;
      if (crisisDate >= weekStart && crisisDate <= now) stats.week++;
      if (crisisDate.getMonth() === now.getMonth() && crisisDate.getFullYear() === now.getFullYear()) stats.month++;
    });

    if (appData.crises.length > 0) {
      const sorted = [...appData.crises].sort((a, b) => new Date(b.date) - new Date(a.date));
      const lastCrisis = new Date(sorted[0].date);
      stats.daysSince = Math.floor((now - lastCrisis) / (1000 * 60 * 60 * 24));
    }

    return stats;
  }

  function saveCrisis(crisis) {
    appData.crises.push({ id: Date.now(), ...crisis });
  }

  function deleteCrisis(id) {
    appData.crises = appData.crises.filter(c => c.id !== id);
  }

  function updateAllStats() {
    const activePage = document.querySelector('.nav-item.active');
    if (activePage && activePage.dataset.page === 'home') {
      const stats = calculateStats();
      const statValues = document.querySelectorAll('.stat-value');
      if (statValues.length >= 4) {
        statValues[0].textContent = stats.today;
        statValues[1].textContent = stats.month;
        statValues[2].textContent = stats.daysSince;
        statValues[3].textContent = stats.total;
      }
    } else if (activePage && activePage.dataset.page === 'tracking') {
      renderTrackingPage();
    }
  }

  function formatDuration(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    const parts = [];
    if (h > 0) parts.push(`${h}h`);
    if (m > 0) parts.push(`${m}m`);
    if (s > 0 || parts.length === 0) parts.push(`${s}s`);
    return parts.join(' ');
  }

  function filterCrises(crises, type, period) {
    const now = new Date();
    return crises.filter(crisis => {
      if (type && crisis.type !== type) return false;
      const crisisDate = new Date(crisis.date);
      if (period === 'today') return isSameDay(crisisDate, now);
      else if (period === 'week') return crisisDate >= getWeekStart(now) && crisisDate <= now;
      else if (period === 'month') return crisisDate.getMonth() === now.getMonth() && crisisDate.getFullYear() === now.getFullYear();
      else if (period === 'year') return crisisDate.getFullYear() === now.getFullYear();
      return true;
    });
  }

  function isSameDay(d1, d2) {
    return d1.getDate() === d2.getDate() && d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear();
  }

  function getWeekStart(date) {
    const d = new Date(date);
    const day = d.getDay();
    const diff = d.getDate() - day + (day === 0 ? -6 : 1);
    return new Date(d.setDate(diff));
  }

  function showModal({ title, body, footer }) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = body;
    document.getElementById('modalFooter').innerHTML = footer || '';
    document.getElementById('modalOverlay').classList.add('active');
  }

// ========= SAUVEGARDE UNIQUE (JSON) - fiable =========

const APP_BACKUP_VERSION = '1.0.0';

function pad2(n) {
  return String(n).padStart(2, '0');
}

function formatBackupFilenameFR(date = new Date()) {
  // Nom demandé: "EpiMaat - jour, mois, année"
  // -> "EpiMaat - 21 décembre 2025.json"
  const day = pad2(date.getDate());
  const month = date.toLocaleDateString('fr-FR', { month: 'long' });
  const year = date.getFullYear();
  return `EpiMaat - ${day} ${month} ${year}.json`;
}

function buildBackupPayload() {
  // Format stable + versionné
  return {
    meta: {
      app: 'EpiMaat',
      version: APP_BACKUP_VERSION,
      createdAt: new Date().toISOString()
    },
    data: {
      crises: appData.crises,
      profile: appData.profile,
      medications: appData.medications,
      reminderSettings: appData.reminderSettings,
      crisisButton: appData.crisisButton,
      quickActions: appData.quickActions,
      settings: appData.settings
    }
  };
}

function downloadJsonUTF8(filename, obj) {
  const json = JSON.stringify(obj, null, 2);

  // UTF-8 robuste (accents OK)
  const bytes = new TextEncoder().encode(json);
  const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// ✅ LA SEULE fonction à utiliser partout
async function createBackup() {
  try {
    // Synchro serveur avant sauvegarde locale (si dispo)
    if (typeof saveToServer === 'function') {
      await saveToServer();
    }

    const payload = buildBackupPayload();
    const filename = formatBackupFilenameFR(new Date());
    downloadJsonUTF8(filename, payload);

    showToast?.('Sauvegarde complète effectuée ✔️', 'success');
  } catch (e) {
    console.error(e);
    showToast?.('Erreur lors de la sauvegarde ❌', 'error');
  }
}


 function closeModal() {
  document.getElementById('modalOverlay').classList.remove('active');
}

  function showToast(message, type = '') {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.className = 'toast show ' + type;
    setTimeout(() => toast.classList.remove('show'), 3000);
  }

  function exportPDF() {
  try {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF({ unit: 'mm', format: 'a4' });

    const PAGE_W = doc.internal.pageSize.getWidth();
    const PAGE_H = doc.internal.pageSize.getHeight();

    const M = 8; // marges réduites
    let y = 8;

    // ===== TITRE COMPACT =====
    doc.setFont('helvetica', 'bold');
    doc.setFontSize(12);
    doc.text('EpiMaat — Historique des crises', M, y);
    y += 5;

    // ===== SOUS-TITRE =====
    const crises = [...(appData.crises || [])]
      .sort((a, b) => new Date(b.date) - new Date(a.date));

    doc.setFont('helvetica', 'normal');
    doc.setFontSize(9);
    doc.text(
      `Généré le ${new Date().toLocaleDateString('fr-FR')} • Total: ${crises.length}`,
      M,
      y
    );
    y += 4;

    // ===== DONNÉES (ICI QUE TU CONTRÔLES LE CONTENU) =====
    const tableData = crises.map(c => {
      const d = new Date(c.date);
      const date = d.toLocaleDateString('fr-FR');
      const time = d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
      const type = c.type || '';
      const duree = formatDuration(c.duration || 0);

      const notes = (c.notes || '').replace(/\n/g, ' ');
      const notesShort = notes.length > 80 ? notes.slice(0, 80) + '…' : notes;

      return [date, time, type, duree, notesShort];
    });

    // ===== TABLE COMPACTE =====
    doc.autoTable({
      startY: y,
      head: [['Date', 'Heure', 'Type', 'Durée', 'Notes']],
      body: tableData.length
        ? tableData
        : [['—', '—', '—', '—', 'Aucune crise enregistrée']],

      theme: 'grid',
      margin: { left: M, right: M, top: 6, bottom: 6 },

      styles: {
        font: 'helvetica',
        fontSize: 8,
        cellPadding: 1.2,
        overflow: 'linebreak',
        valign: 'top'
      },

      headStyles: {
        fontStyle: 'bold',
        fontSize: 8,
        cellPadding: 1.4
      },

      columnStyles: {
        0: { cellWidth: 28 },     // Date
        1: { cellWidth: 16 },     // Heure
        2: { cellWidth: 22 },     // Type
        3: { cellWidth: 16 },     // Durée
        4: { cellWidth: 'auto' }  // Notes
      },

      didDrawPage: function () {
        const page = doc.internal.getNumberOfPages();
        doc.setFontSize(8);
        doc.text(`Page ${page}`, PAGE_W - M, PAGE_H - 4, { align: 'right' });
      }
    });

    doc.save(`EpiMaat-export-${new Date().toISOString().split('T')[0]}.pdf`);
    showToast('PDF exporté ✔️', 'success');

  } catch (err) {
    console.error(err);
    showToast("Erreur lors de l'export PDF", 'error');
  }
}


  function checkNotificationPermission() {
    if ('Notification' in window) notificationPermission = Notification.permission;
  }

  function startReminderCheck() {
    // à implémenter plus tard si besoin (notifications meds)
  }

  // ========= LANCEMENT =========

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

window.addEventListener('beforeunload', saveAppDataLocal);

})();