{"id":11,"date":"2026-07-20T17:01:47","date_gmt":"2026-07-20T17:01:47","guid":{"rendered":"https:\/\/freshe.pro\/?page_id=11"},"modified":"2026-07-20T17:08:05","modified_gmt":"2026-07-20T17:08:05","slug":"11-2","status":"publish","type":"page","link":"https:\/\/freshe.pro\/index.php\/11-2\/","title":{"rendered":""},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>ClearView \u2014 Gestion interventions<\/title>\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@3.19.0\/dist\/tabler-icons.min.css\">\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f5f3;color:#1a1a1a;font-size:14px;line-height:1.5}\n.app{display:flex;height:100vh;overflow:hidden}\n\n\/* Sidebar *\/\n.sidebar{width:220px;flex-shrink:0;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column}\n.logo{padding:18px 16px 14px;border-bottom:1px solid #e8e8e8}\n.logo-row{display:flex;align-items:center;gap:10px}\n.logo-icon{width:32px;height:32px;background:#1D9E75;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}\n.logo-name{font-size:15px;font-weight:600}\n.logo-tagline{font-size:11px;color:#888;margin-top:1px}\n.nav{padding:10px 8px;flex:1;display:flex;flex-direction:column;gap:2px}\n.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:#666;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit}\n.nav-item i{font-size:17px;flex-shrink:0}\n.nav-item:hover{background:#f5f5f3;color:#1a1a1a}\n.nav-item.active{background:#E1F5EE;color:#0F6E56;font-weight:600}\n\n\/* Topbar *\/\n.topbar{height:52px;background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}\n.topbar-left{display:flex;align-items:center;gap:8px}\n.topbar-icon{font-size:18px;color:#1D9E75}\n.topbar-title{font-size:15px;font-weight:600}\n.content{flex:1;overflow-y:auto;padding:20px}\n\n\/* Search bar *\/\n.search-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:8px 14px;margin-bottom:14px}\n.search-bar i{color:#aaa;font-size:16px;flex-shrink:0}\n.search-bar input{border:none;outline:none;font-size:13px;font-family:inherit;flex:1;background:none;color:#1a1a1a}\n.search-bar input::placeholder{color:#bbb}\n.search-count{font-size:12px;color:#aaa;flex-shrink:0}\n\n\/* Buttons *\/\n.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid #ddd;background:#fff;color:#1a1a1a;font-family:inherit;font-weight:400;line-height:1;transition:all .15s}\n.btn:hover{background:#f5f5f3}\n.btn-green{background:#1D9E75;color:#fff;border-color:#1D9E75;font-weight:600}\n.btn-green:hover{background:#0F6E56;border-color:#0F6E56}\n.btn-sm{padding:5px 10px;font-size:12px}\n.btn-sms{background:#E6F1FB;color:#0C447C;border-color:#B5D4F4}\n.btn-sms:hover{background:#B5D4F4}\n.btn-star{background:#FAEEDA;color:#633806;border-color:#FAC775}\n.btn-star:hover{background:#FAC775}\n.btn-red{background:#FCEBEB;color:#791F1F;border-color:#F7C1C1}\n.btn-red:hover{background:#F7C1C1}\n.btn-orange{background:#FFF3E0;color:#7C4700;border-color:#FFCC80}\n.btn-orange:hover{background:#FFE0B2}\n.btn-purple{background:#F0EBFB;color:#4A1D96;border-color:#C4B5FD}\n.btn-purple:hover{background:#E9D5FF}\n\n\/* Stats *\/\n.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}\n.stat{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:14px 16px}\n.stat-num{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px}\n.stat-label{font-size:12px;color:#888}\n.stat-sub{font-size:11px;color:#aaa;margin-top:3px}\n.section-label{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}\n\n\/* Cards & Tables *\/\n.card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;overflow:hidden;margin-bottom:16px}\n.card-head{padding:12px 16px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between}\n.card-head-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}\n.tbl-head{display:grid;padding:9px 16px;background:#f9f9f7;border-bottom:1px solid #e8e8e8;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em}\n.tbl-row{display:grid;padding:0;border-bottom:1px solid #e8e8e8;align-items:stretch;font-size:13px;cursor:pointer}\n.tbl-row:last-child{border-bottom:none}\n.tbl-row:hover{background:#f9f9f7}\n.tbl-row-inner{display:grid;padding:12px 16px;align-items:center;width:100%}\n.cols-dash{grid-template-columns:minmax(0,2fr) minmax(80px,120px) 120px 120px 110px}\n.name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.sub{font-size:11px;color:#888;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n\n\/* Pills *\/\n.pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}\n.pill-blue{background:#E6F1FB;color:#0C447C}\n.pill-green{background:#E1F5EE;color:#085041}\n.pill-amber{background:#FAEEDA;color:#633806}\n.pill-red{background:#FCEBEB;color:#791F1F}\n.pill-gray{background:#f5f5f3;color:#666}\n.pill-purple{background:#F0EBFB;color:#4A1D96}\n.date-ok{color:#0F6E56;font-size:13px}\n.date-warn{color:#BA7517;font-weight:600;font-size:13px}\n.date-muted{color:#888;font-size:13px}\n\n\/* Relances *\/\n.rel-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #e8e8e8}\n.rel-row:last-child{border-bottom:none}\n.rel-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}\n.rel-body{flex:1;min-width:0}\n.rel-name{font-size:13px;font-weight:600}\n.rel-sub{font-size:11px;color:#888;margin-top:1px}\n\n\/* Views *\/\n.view{display:none}\n.view.active{display:block}\n.empty-state{padding:40px 20px;text-align:center;color:#aaa}\n.empty-state i{font-size:32px;display:block;margin-bottom:8px}\n.empty-state p{font-size:13px}\n\n\/* Modals *\/\n.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}\n.modal{background:#fff;border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.15)}\n.modal-head{padding:14px 18px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between}\n.modal-head-title{font-size:14px;font-weight:600}\n.modal-body{padding:18px;display:flex;flex-direction:column;gap:14px;max-height:520px;overflow-y:auto}\n.modal-foot{padding:12px 18px;border-top:1px solid #e8e8e8;display:flex;justify-content:flex-end;gap:8px}\n.field label{font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:5px}\n.field input,.field select,.field textarea{width:100%;padding:8px 11px;border:1px solid #ddd;border-radius:8px;font-size:13px;background:#fff;color:#1a1a1a;font-family:inherit;outline:none;line-height:1.4}\n.field input:focus,.field select:focus,.field textarea:focus{border-color:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,.1)}\n.field textarea{resize:vertical;min-height:60px}\n.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.close-btn{background:none;border:none;cursor:pointer;color:#aaa;font-size:20px;line-height:1;padding:2px;display:flex}\n.close-btn:hover{color:#1a1a1a}\n.notice{background:#f5f5f3;border-radius:8px;padding:10px 12px;font-size:12px;color:#666;display:flex;align-items:flex-start;gap:8px}\n.notice i{font-size:15px;color:#185FA5;flex-shrink:0;margin-top:1px}\n.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}\n\n\/* Fiche *\/\n.fiche-grid{display:grid;grid-template-columns:1fr 1fr}\n.fiche-cell{padding:10px 14px;border-bottom:1px solid #e8e8e8;border-right:1px solid #e8e8e8}\n.fiche-cell:nth-child(even){border-right:none}\n.fiche-cell-full{grid-column:1\/-1;padding:10px 14px;border-bottom:1px solid #e8e8e8}\n.fiche-label{font-size:11px;color:#888;margin-bottom:3px}\n.fiche-value{font-size:13px;font-weight:600}\n\n\/* Schedule mode toggle *\/\n.mode-toggle{display:flex;gap:0;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;margin-bottom:4px}\n.mode-btn{flex:1;padding:7px 10px;font-size:12px;font-weight:500;border:none;background:#fff;color:#888;cursor:pointer;font-family:inherit;transition:all .15s}\n.mode-btn.active{background:#1D9E75;color:#fff;font-weight:600}\n.schedule-preview{background:#E1F5EE;border-radius:8px;padding:9px 12px;font-size:12px;color:#0F6E56;display:flex;align-items:center;gap:7px}\n.schedule-preview i{font-size:14px;flex-shrink:0}\n\n\/* Services form *\/\n.service-block{border:1px solid #e8e8e8;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;position:relative;background:#fafaf9}\n.service-block-title{font-size:12px;font-weight:600;color:#555;margin-bottom:2px}\n.service-remove{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;color:#ccc;font-size:16px;line-height:1;padding:2px}\n.service-remove:hover{color:#e55}\n.add-service-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px dashed #ccc;border-radius:8px;background:none;cursor:pointer;font-size:12px;color:#888;font-family:inherit;width:100%;justify-content:center}\n.add-service-btn:hover{border-color:#1D9E75;color:#1D9E75;background:#f0faf6}\n\n\/* CA *\/\n.ca-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}\n.ca-stat{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:14px 16px}\n.ca-stat-num{font-size:22px;font-weight:700;line-height:1;margin-bottom:4px}\n.ca-stat-label{font-size:12px;color:#888}\n.bar-chart{display:flex;flex-direction:column;gap:8px}\n.bar-row{display:flex;align-items:center;gap:12px;font-size:13px}\n.bar-label{width:160px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}\n.bar-track{flex:1;height:26px;background:#f5f5f3;border-radius:6px;overflow:hidden}\n.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:10px;font-size:12px;font-weight:600;color:#fff;min-width:40px;transition:width .4s ease}\n.bar-amount{width:70px;text-align:right;font-weight:600;flex-shrink:0}\n.bar-freq{width:60px;text-align:right;font-size:11px;color:#aaa;flex-shrink:0}\n\n\/* Historique *\/\n.hist-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid #e8e8e8}\n.hist-item:last-child{border-bottom:none}\n.hist-dot{width:10px;height:10px;border-radius:50%;background:#1D9E75;flex-shrink:0;margin-top:4px}\n.hist-dot.old{background:#ccc}\n.hist-body{flex:1;min-width:0}\n.hist-date{font-size:13px;font-weight:600;color:#1a1a1a}\n.hist-detail{font-size:12px;color:#888;margin-top:2px}\n.hist-amount{font-size:13px;font-weight:600;color:#1D9E75;white-space:nowrap;flex-shrink:0}\n.tab-bar{display:flex;border-bottom:1px solid #e8e8e8}\n.tab{padding:10px 16px;font-size:13px;color:#888;cursor:pointer;border-bottom:2px solid transparent;font-weight:500;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}\n.tab.active{color:#0F6E56;border-bottom-color:#1D9E75}\n.tab:hover{color:#1a1a1a}\n<\/style>\n<\/head>\n<body>\n<div class=\"app\">\n  <div class=\"sidebar\">\n    <div class=\"logo\">\n      <div class=\"logo-row\">\n        <div class=\"logo-icon\"><i class=\"ti ti-droplet\"><\/i><\/div>\n        <div><div class=\"logo-name\">ClearView<\/div><div class=\"logo-tagline\">Laveur de vitres<\/div><\/div>\n      <\/div>\n    <\/div>\n    <nav class=\"nav\">\n      <button class=\"nav-item active\" onclick=\"goTo('dashboard',this)\"><i class=\"ti ti-layout-dashboard\"><\/i> Tableau de bord<\/button>\n      <button class=\"nav-item\" onclick=\"goTo('clients',this)\"><i class=\"ti ti-users\"><\/i> Mes clients<\/button>\n      <button class=\"nav-item\" onclick=\"goTo('planning',this)\"><i class=\"ti ti-calendar\"><\/i> Planning<\/button>\n      <button class=\"nav-item\" onclick=\"goTo('relances',this)\"><i class=\"ti ti-bell\"><\/i> Relances<\/button>\n      <button class=\"nav-item\" onclick=\"goTo('historique',this)\"><i class=\"ti ti-history\"><\/i> Historique<\/button>\n      <button class=\"nav-item\" onclick=\"goTo('ca',this)\"><i class=\"ti ti-chart-bar\"><\/i> Chiffre d'affaires<\/button>\n    <\/nav>\n  <\/div>\n\n  <div style=\"flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0\">\n    <div class=\"topbar\">\n      <div class=\"topbar-left\">\n        <i class=\"ti ti-layout-dashboard topbar-icon\" id=\"topbar-icon\"><\/i>\n        <span class=\"topbar-title\" id=\"topbar-title\">Tableau de bord<\/span>\n      <\/div>\n      <div id=\"topbar-btn\">\n        <button class=\"btn btn-green\" onclick=\"openAddModal()\"><i class=\"ti ti-plus\"><\/i> Nouveau client<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"content\">\n\n      <!-- DASHBOARD -->\n      <div class=\"view active\" id=\"view-dashboard\">\n        <div class=\"stats-grid\">\n          <div class=\"stat\"><div class=\"stat-num\" id=\"s-clients\">0<\/div><div class=\"stat-label\">Clients actifs<\/div><\/div>\n          <div class=\"stat\"><div class=\"stat-num\" id=\"s-mois\">0<\/div><div class=\"stat-label\">Interventions ce mois<\/div><\/div>\n          <div class=\"stat\"><div class=\"stat-num\" id=\"s-relances\">0<\/div><div class=\"stat-label\">Relances \u00e0 envoyer<\/div><\/div>\n          <div class=\"stat\"><div class=\"stat-num\" id=\"s-ca\" style=\"color:#1D9E75\">0 \u20ac<\/div><div class=\"stat-label\">CA mensuel estim\u00e9<\/div><div class=\"stat-sub\" id=\"s-ca-sub\"><\/div><\/div>\n        <\/div>\n        <div class=\"section-label\">Prochaines interventions<\/div>\n        <div class=\"card\">\n          <div class=\"tbl-head cols-dash\">\n            <span>Client<\/span><span>Fr\u00e9quence<\/span><span>Dernier passage<\/span><span>Prochain passage<\/span><span>CA \/ mois<\/span>\n          <\/div>\n          <div id=\"dash-rows\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CLIENTS -->\n      <div class=\"view\" id=\"view-clients\">\n        <div class=\"search-bar\">\n          <i class=\"ti ti-search\"><\/i>\n          <input id=\"search-input\" placeholder=\"Rechercher un client par nom, adresse, t\u00e9l\u00e9phone\u2026\" oninput=\"renderClients()\">\n          <span class=\"search-count\" id=\"search-count\"><\/span>\n        <\/div>\n        <div class=\"card\">\n          <div class=\"card-head\">\n            <span class=\"card-head-title\"><i class=\"ti ti-users\"><\/i> Tous mes clients<\/span>\n            <button class=\"btn btn-green btn-sm\" onclick=\"openAddModal()\"><i class=\"ti ti-plus\"><\/i> Ajouter<\/button>\n          <\/div>\n          <div class=\"tbl-head cols-dash\">\n            <span>Client<\/span><span>Fr\u00e9quence<\/span><span>Dernier passage<\/span><span>Prochain passage<\/span><span>CA \/ mois<\/span>\n          <\/div>\n          <div id=\"client-rows\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- PLANNING -->\n      <div class=\"view\" id=\"view-planning\">\n        <div class=\"card\">\n          <div class=\"card-head\">\n            <span class=\"card-head-title\"><i class=\"ti ti-calendar\"><\/i> Interventions \u00e0 planifier<\/span>\n          <\/div>\n          <div class=\"tbl-head\" style=\"grid-template-columns:minmax(0,2fr) minmax(80px,120px) 120px 120px 110px\">\n            <span>Client<\/span><span>Fr\u00e9quence<\/span><span>Date sugg\u00e9r\u00e9e<\/span><span>Date confirm\u00e9e<\/span><span>Action<\/span>\n          <\/div>\n          <div id=\"planning-rows\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- RELANCES -->\n      <div class=\"view\" id=\"view-relances\">\n        <div class=\"two-col\">\n          <div>\n            <div class=\"section-label\" style=\"display:flex;align-items:center;gap:6px\"><i class=\"ti ti-message\" style=\"font-size:13px;color:#185FA5\"><\/i> Rappels avant intervention<\/div>\n            <div class=\"card\"><div id=\"rel-avant\"><\/div><\/div>\n          <\/div>\n          <div>\n            <div class=\"section-label\" style=\"display:flex;align-items:center;gap:6px\"><i class=\"ti ti-star\" style=\"font-size:13px;color:#BA7517\"><\/i> Demandes d'avis Google<\/div>\n            <div class=\"card\"><div id=\"rel-apres\"><\/div><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- HISTORIQUE -->\n      <div class=\"view\" id=\"view-historique\">\n        <div class=\"search-bar\">\n          <i class=\"ti ti-search\"><\/i>\n          <input id=\"hist-search\" placeholder=\"Rechercher dans l'historique\u2026\" oninput=\"renderHistorique()\">\n          <span class=\"search-count\" id=\"hist-count\"><\/span>\n        <\/div>\n        <div class=\"card\">\n          <div class=\"card-head\">\n            <span class=\"card-head-title\"><i class=\"ti ti-history\"><\/i> Toutes les interventions<\/span>\n            <button class=\"btn btn-green btn-sm\" onclick=\"openAddIntervModal()\"><i class=\"ti ti-plus\"><\/i> Ajouter une intervention<\/button>\n          <\/div>\n          <div class=\"tbl-head\" style=\"grid-template-columns:120px minmax(0,2fr) 1fr 100px 90px\">\n            <span>Date<\/span><span>Client<\/span><span>Service<\/span><span>Montant<\/span><span>Statut<\/span>\n          <\/div>\n          <div id=\"hist-rows\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CA -->\n      <div class=\"view\" id=\"view-ca\">\n        <div class=\"ca-grid\">\n          <div class=\"ca-stat\"><div class=\"ca-stat-num\" id=\"ca-semaine\" style=\"color:#1D9E75\">0 \u20ac<\/div><div class=\"ca-stat-label\">CA par semaine (estim\u00e9)<\/div><\/div>\n          <div class=\"ca-stat\"><div class=\"ca-stat-num\" id=\"ca-mois\" style=\"color:#1D9E75\">0 \u20ac<\/div><div class=\"ca-stat-label\">CA par mois (estim\u00e9)<\/div><\/div>\n          <div class=\"ca-stat\"><div class=\"ca-stat-num\" id=\"ca-an\" style=\"color:#1D9E75\">0 \u20ac<\/div><div class=\"ca-stat-label\">CA par an (estim\u00e9)<\/div><\/div>\n        <\/div>\n        <div class=\"section-label\">Revenus par client<\/div>\n        <div class=\"card\">\n          <div class=\"card-head\"><span class=\"card-head-title\"><i class=\"ti ti-chart-bar\"><\/i> D\u00e9tail par client<\/span><\/div>\n          <div style=\"padding:16px\"><div class=\"bar-chart\" id=\"ca-bars\"><\/div><\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL : Ajouter \/ Modifier client -->\n<div class=\"overlay\" id=\"overlay-add\" style=\"display:none\">\n  <div class=\"modal\" style=\"width:500px\">\n    <div class=\"modal-head\">\n      <span class=\"modal-head-title\" id=\"modal-add-title\">Ajouter un client<\/span>\n      <button class=\"close-btn\" onclick=\"closeModal('add')\"><i class=\"ti ti-x\"><\/i><\/button>\n    <\/div>\n    <div class=\"modal-body\">\n      <div class=\"grid2\">\n        <div class=\"field\"><label>Nom \/ Entreprise *<\/label><input id=\"f-nom\" placeholder=\"Mme Dupont\"><\/div>\n        <div class=\"field\"><label>T\u00e9l\u00e9phone *<\/label><input id=\"f-tel\" placeholder=\"0470 00 00 00\" type=\"tel\"><\/div>\n      <\/div>\n      <div class=\"field\"><label>Adresse<\/label><input id=\"f-addr\" placeholder=\"Rue, code postal, ville\"><\/div>\n      <div class=\"field\"><label>Dernier passage<\/label><input id=\"f-last\" type=\"date\"><\/div>\n      <div>\n        <label style=\"font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:6px\">Planification du prochain passage<\/label>\n        <div class=\"mode-toggle\">\n          <button class=\"mode-btn active\" id=\"mode-btn-date\" onclick=\"setScheduleMode('date')\"><i class=\"ti ti-calendar\"><\/i> Date fixe<\/button>\n          <button class=\"mode-btn\" id=\"mode-btn-recur\" onclick=\"setScheduleMode('recur')\"><i class=\"ti ti-refresh\"><\/i> R\u00e9currence<\/button>\n        <\/div>\n        <!-- Mode date fixe -->\n        <div id=\"mode-date-panel\">\n          <div class=\"field\" style=\"margin-top:8px\"><input id=\"f-prochain\" type=\"date\" placeholder=\"Laisser vide pour calcul auto\"><\/div>\n          <div style=\"font-size:11px;color:#aaa;margin-top:4px\">Laisser vide : la date sera calcul\u00e9e automatiquement selon la fr\u00e9quence du service.<\/div>\n        <\/div>\n        <!-- Mode r\u00e9currence -->\n        <div id=\"mode-recur-panel\" style=\"display:none;margin-top:8px;display:none\">\n          <div class=\"grid2\" style=\"margin-bottom:8px\">\n            <div class=\"field\">\n              <label>Quelle occurrence ?<\/label>\n              <select id=\"f-recur-occ\" onchange=\"updateRecurPreview()\">\n                <option value=\"1\">Le 1er<\/option>\n                <option value=\"2\">Le 2\u00e8me<\/option>\n                <option value=\"3\">Le 3\u00e8me<\/option>\n                <option value=\"4\">Le 4\u00e8me<\/option>\n                <option value=\"-1\">Le dernier<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"field\">\n              <label>Quel jour ?<\/label>\n              <select id=\"f-recur-day\" onchange=\"updateRecurPreview()\">\n                <option value=\"1\">Lundi<\/option>\n                <option value=\"2\">Mardi<\/option>\n                <option value=\"3\">Mercredi<\/option>\n                <option value=\"4\">Jeudi<\/option>\n                <option value=\"5\">Vendredi<\/option>\n                <option value=\"6\">Samedi<\/option>\n                <option value=\"0\">Dimanche<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n          <div class=\"field\">\n            <label>De chaque<\/label>\n            <select id=\"f-recur-period\" onchange=\"updateRecurPreview()\">\n              <option value=\"week\">Semaine<\/option>\n              <option value=\"month\" selected>Mois<\/option>\n            <\/select>\n          <\/div>\n          <div id=\"recur-preview\" class=\"schedule-preview\" style=\"margin-top:8px;display:none\">\n            <i class=\"ti ti-calendar-check\"><\/i>\n            <span id=\"recur-preview-text\"><\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div>\n        <div style=\"font-size:12px;font-weight:600;color:#555;margin-bottom:8px\">Services & fr\u00e9quences<\/div>\n        <div id=\"services-list\" style=\"display:flex;flex-direction:column;gap:8px\"><\/div>\n        <button class=\"add-service-btn\" style=\"margin-top:8px\" onclick=\"addServiceBlock()\"><i class=\"ti ti-plus\"><\/i> Ajouter un service<\/button>\n      <\/div>\n      <div class=\"field\"><label>Notes<\/label><textarea id=\"f-notes\" placeholder=\"Acc\u00e8s, type de vitres, remarques\u2026\"><\/textarea><\/div>\n    <\/div>\n    <div class=\"modal-foot\">\n      <button class=\"btn\" onclick=\"closeModal('add')\">Annuler<\/button>\n      <button class=\"btn btn-green\" id=\"btn-save-client\" onclick=\"saveClient()\"><i class=\"ti ti-check\"><\/i> Enregistrer<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL : Confirmer date -->\n<div class=\"overlay\" id=\"overlay-date\" style=\"display:none\">\n  <div class=\"modal\" style=\"width:400px\">\n    <div class=\"modal-head\">\n      <span class=\"modal-head-title\">Confirmer la date d'intervention<\/span>\n      <button class=\"close-btn\" onclick=\"closeModal('date')\"><i class=\"ti ti-x\"><\/i><\/button>\n    <\/div>\n    <div class=\"modal-body\">\n      <div style=\"font-size:13px;color:#666\">Client : <span id=\"d-name\" style=\"font-weight:600;color:#1a1a1a\"><\/span><\/div>\n      <div class=\"field\"><label>Date propos\u00e9e \u2014 ajustez si besoin<\/label><input id=\"d-date\" type=\"date\"><\/div>\n      <div class=\"notice\"><i class=\"ti ti-calendar-event\"><\/i><span>En confirmant, un \u00e9v\u00e9nement sera cr\u00e9\u00e9 dans votre Google Agenda.<\/span><\/div>\n    <\/div>\n    <div class=\"modal-foot\">\n      <button class=\"btn\" onclick=\"closeModal('date')\">Annuler<\/button>\n      <button class=\"btn btn-green\" onclick=\"confirmDate()\"><i class=\"ti ti-calendar-check\"><\/i> Confirmer & Google Agenda<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL : Fiche client -->\n<div class=\"overlay\" id=\"overlay-fiche\" style=\"display:none\">\n  <div class=\"modal\" style=\"width:500px\">\n    <div class=\"modal-head\">\n      <span class=\"modal-head-title\" id=\"fiche-title\">Fiche client<\/span>\n      <button class=\"close-btn\" onclick=\"closeModal('fiche')\"><i class=\"ti ti-x\"><\/i><\/button>\n    <\/div>\n    <div>\n      <div class=\"tab-bar\">\n        <button class=\"tab active\" onclick=\"fichTab('infos',this)\">Infos<\/button>\n        <button class=\"tab\" onclick=\"fichTab('historique',this)\">Historique<\/button>\n      <\/div>\n      <div id=\"fiche-infos\"><\/div>\n      <div id=\"fiche-hist\" style=\"display:none\"><\/div>\n    <\/div>\n    <div class=\"modal-foot\" style=\"justify-content:space-between\">\n      <button class=\"btn btn-red btn-sm\" id=\"fiche-del\"><i class=\"ti ti-trash\"><\/i> Supprimer<\/button>\n      <div style=\"display:flex;gap:8px\">\n        <button class=\"btn btn-orange btn-sm\" id=\"fiche-edit\"><i class=\"ti ti-edit\"><\/i> Modifier<\/button>\n        <button class=\"btn\" onclick=\"closeModal('fiche')\">Fermer<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL : Ajouter intervention -->\n<div class=\"overlay\" id=\"overlay-interv\" style=\"display:none\">\n  <div class=\"modal\" style=\"width:420px\">\n    <div class=\"modal-head\">\n      <span class=\"modal-head-title\" id=\"interv-title\">Ajouter une intervention<\/span>\n      <button class=\"close-btn\" onclick=\"closeModal('interv')\"><i class=\"ti ti-x\"><\/i><\/button>\n    <\/div>\n    <div class=\"modal-body\">\n      <div class=\"field\"><label>Client *<\/label>\n        <select id=\"i-client\">\n          <option value=\"\">\u2014 Choisir un client \u2014<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"field\"><label>Service effectu\u00e9<\/label><input id=\"i-service\" placeholder=\"Ex : Vitres ext\u00e9rieures\"><\/div>\n      <div class=\"grid2\">\n        <div class=\"field\"><label>Date *<\/label><input id=\"i-date\" type=\"date\"><\/div>\n        <div class=\"field\"><label>Montant (\u20ac)<\/label><input id=\"i-montant\" type=\"number\" min=\"0\" step=\"0.5\" placeholder=\"Ex : 80\"><\/div>\n      <\/div>\n      <div class=\"field\"><label>Notes<\/label><textarea id=\"i-notes\" placeholder=\"Remarques sur cette intervention\u2026\" style=\"min-height:48px\"><\/textarea><\/div>\n    <\/div>\n    <div class=\"modal-foot\">\n      <button class=\"btn\" onclick=\"closeModal('interv')\">Annuler<\/button>\n      <button class=\"btn btn-green\" onclick=\"saveInterv()\"><i class=\"ti ti-check\"><\/i> Enregistrer<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst GOOGLE_REVIEW='https:\/\/g.page\/r\/CTmMyq1mZ6X9EAE\/review';\nconst FREQ_DAYS={hebdo:7,bimensuel:14,mensuel:30,bimestriel:60,trimestriel:90,semestriel:180,annuel:365};\nconst FREQ_LABEL={hebdo:'Hebdo',bimensuel:'Bimensuel',mensuel:'Mensuel',bimestriel:'Bimestriel',trimestriel:'Trimestriel',semestriel:'Semestriel',annuel:'Annuel'};\nconst FREQ_PER_MONTH={hebdo:4.33,bimensuel:2.17,mensuel:1,bimestriel:0.5,trimestriel:0.33,semestriel:0.167,annuel:0.083};\n\nlet clients=JSON.parse(localStorage.getItem('cv5-clients')||'[]');\nlet interventions=JSON.parse(localStorage.getItem('cv5-interventions')||'[]');\nlet pendingId=null,editingId=null,serviceCount=0;\nlet currentFicheId=null;\nlet scheduleMode='date'; \/\/ 'date' or 'recur'\n\nfunction save(){\n  localStorage.setItem('cv5-clients',JSON.stringify(clients));\n  localStorage.setItem('cv5-interventions',JSON.stringify(interventions));\n}\n\nfunction fmt(d){if(!d)return '\u2014';const[y,m,j]=d.split('-');return `${j}\/${m}\/${y}`;}\nfunction daysTo(d){if(!d)return null;return Math.ceil((new Date(d)-new Date())\/86400000);}\n\n\/\/ ---- SCHEDULE MODE ----\nconst JOURS=['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];\nconst OCC_LABEL={1:'1er',2:'2\u00e8me',3:'3\u00e8me',4:'4\u00e8me','-1':'dernier'};\n\nfunction setScheduleMode(mode){\n  scheduleMode=mode;\n  document.getElementById('mode-btn-date').classList.toggle('active',mode==='date');\n  document.getElementById('mode-btn-recur').classList.toggle('active',mode==='recur');\n  document.getElementById('mode-date-panel').style.display=mode==='date'?'block':'none';\n  document.getElementById('mode-recur-panel').style.display=mode==='recur'?'block':'none';\n  if(mode==='recur')updateRecurPreview();\n}\n\nfunction updateRecurPreview(){\n  const occ=document.getElementById('f-recur-occ')?.value;\n  const day=parseInt(document.getElementById('f-recur-day')?.value);\n  const period=document.getElementById('f-recur-period')?.value;\n  if(!occ||isNaN(day)||!period)return;\n  const next=calcNextRecur({recurOcc:occ,recurDay:day,recurPeriod:period},new Date());\n  const prev=document.getElementById('recur-preview');\n  const pt=document.getElementById('recur-preview-text');\n  if(next&&prev&&pt){\n    prev.style.display='flex';\n    pt.textContent=`Prochain passage : ${fmt(next)} (${OCC_LABEL[occ]} ${JOURS[day]} de chaque ${period==='week'?'semaine':'mois'})`;\n  }\n}\n\n\/\/ Calculate next occurrence of a recurring rule from a given date\nfunction calcNextRecur(rule,fromDate){\n  const {recurOcc,recurDay,recurPeriod}=rule;\n  const occ=parseInt(recurOcc);\n  const day=parseInt(recurDay);\n  const from=new Date(fromDate);\n  from.setHours(0,0,0,0);\n\n  if(recurPeriod==='month'){\n    \/\/ Find the Nth (or last) weekday of next few months\n    for(let monthOffset=0;monthOffset<=3;monthOffset++){\n      const d=new Date(from.getFullYear(),from.getMonth()+monthOffset,1);\n      let result=null;\n      if(occ===-1){\n        \/\/ Last occurrence: find last day of month, go backwards\n        const lastDay=new Date(d.getFullYear(),d.getMonth()+1,0);\n        let cur=new Date(lastDay);\n        while(cur.getDay()!==day)cur.setDate(cur.getDate()-1);\n        result=cur;\n      } else {\n        \/\/ Nth occurrence: find first weekday, then add weeks\n        let cur=new Date(d);\n        while(cur.getDay()!==day)cur.setDate(cur.getDate()+1);\n        cur.setDate(cur.getDate()+(occ-1)*7);\n        if(cur.getMonth()===d.getMonth())result=cur;\n      }\n      if(result&&result>from){\n        return result.toISOString().split('T')[0];\n      }\n    }\n  } else if(recurPeriod==='week'){\n    \/\/ Next occurrence of that weekday\n    const cur=new Date(from);\n    cur.setDate(cur.getDate()+1);\n    while(cur.getDay()!==day)cur.setDate(cur.getDate()+1);\n    return cur.toISOString().split('T')[0];\n  }\n  return null;\n}\n\nfunction recurLabel(c){\n  if(!c.recurOcc||!c.recurDay===undefined||!c.recurPeriod)return null;\n  const occ=OCC_LABEL[c.recurOcc]||c.recurOcc;\n  const day=JOURS[parseInt(c.recurDay)]||'';\n  const period=c.recurPeriod==='week'?'semaine':'mois';\n  return `${occ} ${day} du ${period}`;\n}\n\nfunction suggest(c){\n  \/\/ If recurring rule is set, use it\n  if(c.recurOcc!==undefined&&c.recurDay!==undefined&&c.recurPeriod){\n    return calcNextRecur(c,new Date());\n  }\n  \/\/ Otherwise use frequency-based calculation\n  if(!c.services||!c.services.length||!c.dernier)return null;\n  const d=new Date(c.dernier);d.setDate(d.getDate()+FREQ_DAYS[c.services[0].freq]);\n  return d.toISOString().split('T')[0];\n}\nfunction nextDate(c){return c.prochain||suggest(c);}\nfunction clientMensuel(c){\n  if(!c.services)return 0;\n  return c.services.reduce((s,sv)=>s+(parseFloat(sv.prix)||0)*FREQ_PER_MONTH[sv.freq||'mensuel'],0);\n}\nfunction servicesLabel(c){\n  if(c.recurOcc!==undefined&&c.recurDay!==undefined&&c.recurPeriod){\n    return recurLabel(c)||'\u2014';\n  }\n  if(!c.services||!c.services.length)return '\u2014';\n  return c.services.map(s=>FREQ_LABEL[s.freq]).join(' + ');\n}\n\n\/\/ ---- SMS ----\nfunction smsRappel(c){\n  const msg=`Bonjour ${c.nom},\\n\\nJe vous contacte pour vous rappeler mon passage pour le nettoyage de vos vitres le ${fmt(nextDate(c))}.\\n\\nN'h\u00e9sitez pas si vous avez des questions. \u00c0 bient\u00f4t !`;\n  window.open(`sms:${c.tel}?body=${encodeURIComponent(msg)}`);\n}\nfunction smsAvis(c){\n  const msg=`Bonjour ${c.nom},\\n\\nJ'esp\u00e8re que vous \u00eates satisfait(e) du nettoyage. Si vous avez un moment, un avis Google me ferait vraiment plaisir :\\n${GOOGLE_REVIEW}\\n\\nMerci beaucoup et \u00e0 bient\u00f4t !`;\n  window.open(`sms:${c.tel}?body=${encodeURIComponent(msg)}`);\n}\nfunction smsAvisMarked(id){const c=clients.find(x=>x.id===id);smsAvis(c);c.avisEnvoye=true;save();render();}\n\n\/\/ ---- SERVICE BLOCKS ----\nfunction addServiceBlock(service){\n  serviceCount++;\n  const idx=serviceCount;\n  const sl=document.getElementById('services-list');\n  const s=service||{};\n  const div=document.createElement('div');\n  div.className='service-block';div.id='svc-'+idx;\n  div.innerHTML=`\n    <div class=\"service-block-title\">Service ${sl.children.length+1}<\/div>\n    <button class=\"service-remove\" onclick=\"removeServiceBlock('svc-${idx}')\"><i class=\"ti ti-x\"><\/i><\/button>\n    <div class=\"field\"><label>Nom du service<\/label><input class=\"svc-nom\" value=\"${s.nom||''}\" placeholder=\"Ex : Vitres ext\u00e9rieures\"><\/div>\n    <div class=\"grid2\">\n      <div class=\"field\"><label>Fr\u00e9quence<\/label>\n        <select class=\"svc-freq\">\n          ${['hebdo','bimensuel','mensuel','bimestriel','trimestriel','semestriel','annuel'].map(f=>`<option value=\"${f}\" ${(s.freq||'mensuel')===f?'selected':''}>${FREQ_LABEL[f]}<\/option>`).join('')}\n        <\/select>\n      <\/div>\n      <div class=\"field\"><label>Prix (\u20ac)<\/label><input class=\"svc-prix\" type=\"number\" min=\"0\" step=\"0.5\" value=\"${s.prix||''}\" placeholder=\"Ex : 80\"><\/div>\n    <\/div>`;\n  sl.appendChild(div);renumberServices();\n}\nfunction removeServiceBlock(id){const el=document.getElementById(id);if(el)el.remove();renumberServices();}\nfunction renumberServices(){document.querySelectorAll('.service-block').forEach((el,i)=>{const t=el.querySelector('.service-block-title');if(t)t.textContent='Service '+(i+1);});}\nfunction getServicesFromForm(){\n  return [...document.querySelectorAll('.service-block')].map(b=>({\n    nom:b.querySelector('.svc-nom').value.trim(),\n    freq:b.querySelector('.svc-freq').value,\n    prix:b.querySelector('.svc-prix').value.trim()\n  })).filter(s=>s.nom||s.freq);\n}\n\n\/\/ ---- MODALS ----\nfunction openModal(id){document.getElementById('overlay-'+id).style.display='flex';}\nfunction closeModal(id){document.getElementById('overlay-'+id).style.display='none';}\n\nfunction openAddModal(){\n  editingId=null;\n  document.getElementById('modal-add-title').textContent='Ajouter un client';\n  document.getElementById('btn-save-client').innerHTML='<i class=\"ti ti-check\"><\/i> Enregistrer';\n  ['f-nom','f-tel','f-addr','f-notes'].forEach(i=>document.getElementById(i).value='');\n  document.getElementById('f-last').value='';\n  document.getElementById('f-prochain').value='';\n  document.getElementById('services-list').innerHTML='';serviceCount=0;\n  addServiceBlock();\n  setScheduleMode('date');\n  openModal('add');\n}\nfunction openEditModal(id){\n  const c=clients.find(x=>x.id===id);editingId=id;\n  document.getElementById('modal-add-title').textContent='Modifier le client';\n  document.getElementById('btn-save-client').innerHTML='<i class=\"ti ti-check\"><\/i> Mettre \u00e0 jour';\n  document.getElementById('f-nom').value=c.nom||'';\n  document.getElementById('f-tel').value=c.tel||'';\n  document.getElementById('f-addr').value=c.adresse||'';\n  document.getElementById('f-last').value=c.dernier||'';\n  document.getElementById('f-prochain').value=c.prochain||'';\n  document.getElementById('f-notes').value=c.notes||'';\n  document.getElementById('services-list').innerHTML='';serviceCount=0;\n  (c.services&&c.services.length?c.services:[{nom:'',freq:c.freq||'mensuel',prix:c.prix||''}]).forEach(s=>addServiceBlock(s));\n  \/\/ Restore schedule mode\n  if(c.recurOcc!==undefined&&c.recurDay!==undefined&&c.recurPeriod){\n    setScheduleMode('recur');\n    document.getElementById('f-recur-occ').value=c.recurOcc;\n    document.getElementById('f-recur-day').value=c.recurDay;\n    document.getElementById('f-recur-period').value=c.recurPeriod;\n    updateRecurPreview();\n  } else {\n    setScheduleMode('date');\n  }\n  closeModal('fiche');openModal('add');\n}\n\nfunction saveClient(){\n  const nom=document.getElementById('f-nom').value.trim();\n  const tel=document.getElementById('f-tel').value.trim();\n  if(!nom||!tel){alert('Le nom et le t\u00e9l\u00e9phone sont obligatoires.');return;}\n  const services=getServicesFromForm();\n  if(!services.length){alert('Ajoutez au moins un service.');return;}\n\n  \/\/ Schedule\n  let scheduleFields={};\n  if(scheduleMode==='recur'){\n    scheduleFields={\n      recurOcc:document.getElementById('f-recur-occ').value,\n      recurDay:parseInt(document.getElementById('f-recur-day').value),\n      recurPeriod:document.getElementById('f-recur-period').value,\n      prochain:'' \/\/ will be computed\n    };\n  } else {\n    scheduleFields={\n      recurOcc:undefined,recurDay:undefined,recurPeriod:undefined,\n      prochain:document.getElementById('f-prochain').value||''\n    };\n  }\n\n  if(editingId){\n    const c=clients.find(x=>x.id===editingId);\n    Object.assign(c,{nom,tel,adresse:document.getElementById('f-addr').value.trim(),dernier:document.getElementById('f-last').value,notes:document.getElementById('f-notes').value.trim(),services,...scheduleFields});\n    \/\/ Clean up old recur fields if switched to date mode\n    if(scheduleMode==='date'){delete c.recurOcc;delete c.recurDay;delete c.recurPeriod;}\n  } else {\n    clients.push({id:Date.now().toString(),nom,tel,adresse:document.getElementById('f-addr').value.trim(),dernier:document.getElementById('f-last').value,notes:document.getElementById('f-notes').value.trim(),services,avisEnvoye:false,...scheduleFields});\n  }\n  save();closeModal('add');editingId=null;render();\n}\n\n\/\/ ---- INTERVENTIONS ----\nfunction openAddIntervModal(clientId){\n  \/\/ populate select\n  const sel=document.getElementById('i-client');\n  sel.innerHTML='<option value=\"\">\u2014 Choisir un client \u2014<\/option>'+clients.map(c=>`<option value=\"${c.id}\" ${clientId===c.id?'selected':''}>${c.nom}<\/option>`).join('');\n  document.getElementById('i-service').value='';\n  document.getElementById('i-date').value=new Date().toISOString().split('T')[0];\n  document.getElementById('i-montant').value='';\n  document.getElementById('i-notes').value='';\n  document.getElementById('interv-title').textContent='Ajouter une intervention';\n  openModal('interv');\n}\nfunction saveInterv(){\n  const cid=document.getElementById('i-client').value;\n  const date=document.getElementById('i-date').value;\n  if(!cid||!date){alert('Client et date sont obligatoires.');return;}\n  const c=clients.find(x=>x.id===cid);\n  interventions.push({\n    id:Date.now().toString(),clientId:cid,clientNom:c?c.nom:'',\n    service:document.getElementById('i-service').value.trim(),\n    date,montant:document.getElementById('i-montant').value.trim(),\n    notes:document.getElementById('i-notes').value.trim()\n  });\n  \/\/ update dernier passage on client\n  if(c&&(!c.dernier||date>c.dernier)){c.dernier=date;c.prochain='';}\n  save();closeModal('interv');render();\n}\n\n\/\/ ---- FICHE ----\nlet ficheTab='infos';\nfunction fichTab(tab,btn){\n  ficheTab=tab;\n  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));\n  btn.classList.add('active');\n  document.getElementById('fiche-infos').style.display=tab==='infos'?'block':'none';\n  document.getElementById('fiche-hist').style.display=tab==='historique'?'block':'none';\n  if(tab==='historique'&&currentFicheId)renderFicheHist(currentFicheId);\n}\n\nfunction renderFicheHist(id){\n  const items=interventions.filter(i=>i.clientId===id).sort((a,b)=>b.date.localeCompare(a.date));\n  const el=document.getElementById('fiche-hist');\n  if(!items.length){el.innerHTML='<div class=\"empty-state\"><i class=\"ti ti-history\"><\/i><p>Aucune intervention enregistr\u00e9e<\/p><\/div>';return;}\n  el.innerHTML=`<div style=\"max-height:320px;overflow-y:auto\">`+items.map((iv,i)=>`\n    <div class=\"hist-item\">\n      <div class=\"hist-dot ${i>0?'old':''}\"><\/div>\n      <div class=\"hist-body\">\n        <div class=\"hist-date\">${fmt(iv.date)}<\/div>\n        <div class=\"hist-detail\">${iv.service||'Intervention'}${iv.notes?' \u00b7 '+iv.notes:''}<\/div>\n      <\/div>\n      ${iv.montant?`<div class=\"hist-amount\">${iv.montant} \u20ac<\/div>`:''}\n    <\/div>`).join('')+`<\/div>`;\n}\n\nfunction openFiche(id){\n  currentFicheId=id;ficheTab='infos';\n  const c=clients.find(x=>x.id===id);\n  document.getElementById('fiche-title').textContent=c.nom;\n  document.querySelectorAll('.tab').forEach((t,i)=>{t.classList.toggle('active',i===0);});\n  document.getElementById('fiche-infos').style.display='block';\n  document.getElementById('fiche-hist').style.display='none';\n\n  const servicesHtml=(c.services||[]).map((s,i)=>`\n    <div style=\"padding:10px 14px;border-bottom:1px solid #e8e8e8\">\n      <div style=\"display:flex;align-items:center;justify-content:space-between\">\n        <span style=\"font-size:12px;font-weight:600;color:#555\">${s.nom||'Service '+(i+1)}<\/span>\n        <span class=\"pill pill-blue\">${FREQ_LABEL[s.freq]}<\/span>\n      <\/div>\n      ${s.prix?`<div style=\"font-size:13px;font-weight:700;color:#1D9E75;margin-top:4px\">${s.prix} \u20ac \/ passage<\/div>`:''}\n    <\/div>`).join('');\n\n  const intervCount=interventions.filter(i=>i.clientId===id).length;\n  document.getElementById('fiche-infos').innerHTML=`\n    <div class=\"fiche-grid\">\n      <div class=\"fiche-cell\"><div class=\"fiche-label\">T\u00e9l\u00e9phone<\/div><div class=\"fiche-value\">${c.tel}<\/div><\/div>\n      <div class=\"fiche-cell\"><div class=\"fiche-label\">CA mensuel estim\u00e9<\/div><div class=\"fiche-value\" style=\"color:#1D9E75\">${clientMensuel(c).toFixed(0)} \u20ac\/mois<\/div><\/div>\n      <div class=\"fiche-cell\"><div class=\"fiche-label\">Dernier passage<\/div><div class=\"fiche-value\">${fmt(c.dernier)}<\/div><\/div>\n      <div class=\"fiche-cell\"><div class=\"fiche-label\">Prochain passage<\/div><div class=\"fiche-value\" style=\"color:#1D9E75\">${fmt(nextDate(c))}<\/div><\/div>\n      ${c.recurOcc!==undefined?`<div class=\"fiche-cell-full\"><div class=\"fiche-label\">Planification automatique<\/div><div class=\"fiche-value\" style=\"color:#185FA5\"><i class=\"ti ti-refresh\" style=\"font-size:12px;margin-right:4px\"><\/i>${recurLabel(c)}<\/div><\/div>`:''}\n      ${c.adresse?`<div class=\"fiche-cell-full\"><div class=\"fiche-label\">Adresse<\/div><div class=\"fiche-value\">${c.adresse}<\/div><\/div>`:''}\n      <div class=\"fiche-cell-full\"><div class=\"fiche-label\">Interventions enregistr\u00e9es<\/div><div class=\"fiche-value\">${intervCount} intervention${intervCount!==1?'s':''}<\/div><\/div>\n    <\/div>\n    <div style=\"border-top:1px solid #e8e8e8\">\n      <div style=\"padding:8px 14px;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;background:#f9f9f7\">Services<\/div>\n      ${servicesHtml}\n    <\/div>\n    ${c.notes?`<div style=\"padding:10px 14px;border-top:1px solid #e8e8e8\"><div class=\"fiche-label\">Notes<\/div><div style=\"font-size:13px;color:#555;margin-top:3px\">${c.notes}<\/div><\/div>`:''}\n    <div style=\"padding:12px 16px;border-top:1px solid #e8e8e8;display:flex;gap:8px;flex-wrap:wrap\">\n      <button class=\"btn btn-sms btn-sm\" onclick=\"smsRappel(clients.find(x=>x.id==='${id}'))\"><i class=\"ti ti-message\"><\/i> SMS rappel<\/button>\n      <button class=\"btn btn-star btn-sm\" onclick=\"smsAvis(clients.find(x=>x.id==='${id}'))\"><i class=\"ti ti-star\"><\/i> Avis Google<\/button>\n      <button class=\"btn btn-sm\" onclick=\"openDateModal('${id}');closeModal('fiche')\"><i class=\"ti ti-calendar\"><\/i> Planifier<\/button>\n      <button class=\"btn btn-purple btn-sm\" onclick=\"openAddIntervModal('${id}');closeModal('fiche')\"><i class=\"ti ti-plus\"><\/i> Intervention<\/button>\n    <\/div>`;\n\n  document.getElementById('fiche-del').onclick=()=>{if(confirm('Supprimer ce client ?')){clients=clients.filter(x=>x.id!==id);interventions=interventions.filter(i=>i.clientId!==id);save();closeModal('fiche');render();}};\n  document.getElementById('fiche-edit').onclick=()=>openEditModal(id);\n  openModal('fiche');\n}\n\n\/\/ ---- PLANNING ----\nfunction openDateModal(id){\n  const c=clients.find(x=>x.id===id);pendingId=id;\n  document.getElementById('d-name').textContent=c.nom;\n  document.getElementById('d-date').value=suggest(c)||new Date().toISOString().split('T')[0];\n  openModal('date');\n}\nfunction confirmDate(){\n  const d=document.getElementById('d-date').value;if(!d)return;\n  const c=clients.find(x=>x.id===pendingId);\n  c.prochain=d;c.avisEnvoye=false;save();closeModal('date');\n  const title=encodeURIComponent(`Nettoyage vitres \u2014 ${c.nom}`);\n  const loc=encodeURIComponent(c.adresse||'');\n  const ds=d.replace(\/-\/g,'');\n  window.open(`https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&text=${title}&dates=${ds}\/${ds}&location=${loc}`,'_blank');\n  render();\n}\nfunction markDone(id){\n  const c=clients.find(x=>x.id===id);\n  c.dernier=c.prochain||new Date().toISOString().split('T')[0];\n  c.prochain='';c.avisEnvoye=false;save();render();\n}\n\n\/\/ ---- ROW HTML ----\nfunction rowHtml(c){\n  const n=nextDate(c);const nd=daysTo(n);\n  const ncls=nd!==null&&nd<=5?'date-warn':'date-ok';\n  const mensuel=clientMensuel(c);\n  return `<div class=\"tbl-row\" onclick=\"openFiche('${c.id}')\">\n    <div class=\"tbl-row-inner cols-dash\">\n      <div><div class=\"name\">${c.nom}<\/div><div class=\"sub\">${c.adresse||'\u2014'}<\/div><\/div>\n      <span style=\"font-size:12px;color:#444\">${servicesLabel(c)}<\/span>\n      <span class=\"date-muted\">${fmt(c.dernier)}<\/span>\n      <span class=\"${ncls}\">${fmt(n)}<\/span>\n      <span style=\"font-weight:600;color:#1D9E75\">${mensuel>0?mensuel.toFixed(0)+' \u20ac':'\u2014'}<\/span>\n    <\/div>\n  <\/div>`;\n}\nfunction planRowHtml(c){\n  const sug=suggest(c);\n  return `<div style=\"display:grid;grid-template-columns:minmax(0,2fr) minmax(80px,120px) 120px 120px 110px;padding:12px 16px;border-bottom:1px solid #e8e8e8;align-items:center;font-size:13px\">\n    <div><div class=\"name\">${c.nom}<\/div><div class=\"sub\">${c.adresse||''}<\/div><\/div>\n    <span style=\"font-size:12px;color:#444\">${servicesLabel(c)}<\/span>\n    <span class=\"date-muted\">${fmt(sug)}<\/span>\n    <span style=\"color:${c.prochain?'#0F6E56':'#aaa'}\">${c.prochain?fmt(c.prochain):'Non confirm\u00e9'}<\/span>\n    <div>${!c.prochain\n      ?`<button class=\"btn btn-green btn-sm\" onclick=\"openDateModal('${c.id}')\"><i class=\"ti ti-check\"><\/i> Confirmer<\/button>`\n      :`<button class=\"btn btn-sm\" onclick=\"markDone('${c.id}')\"><i class=\"ti ti-check\"><\/i> Fait<\/button>`}\n    <\/div>\n  <\/div>`;\n}\n\n\/\/ ---- NAVIGATION ----\nconst PAGE_CFG={\n  dashboard:['Tableau de bord','ti-layout-dashboard',true],\n  clients:['Mes clients','ti-users',true],\n  planning:['Planning','ti-calendar',false],\n  relances:['Relances','ti-bell',false],\n  historique:['Historique','ti-history',false],\n  ca:['Chiffre d\\'affaires','ti-chart-bar',false]\n};\nfunction goTo(page,btn){\n  document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));\n  document.getElementById('view-'+page).classList.add('active');\n  document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));\n  btn.classList.add('active');\n  const[title,icon,showAdd]=PAGE_CFG[page];\n  document.getElementById('topbar-title').textContent=title;\n  document.getElementById('topbar-icon').className='ti '+icon+' topbar-icon';\n  document.getElementById('topbar-btn').innerHTML=showAdd?`<button class=\"btn btn-green\" onclick=\"openAddModal()\"><i class=\"ti ti-plus\"><\/i> Nouveau client<\/button>`:'';\n  if(page==='clients'){setTimeout(()=>document.getElementById('search-input').focus(),50);}\n  render();\n}\n\n\/\/ ---- RENDER ----\nfunction renderClients(){\n  const q=(document.getElementById('search-input')?.value||'').toLowerCase().trim();\n  const sorted=[...clients].sort((a,b)=>(nextDate(a)||'9999').localeCompare(nextDate(b)||'9999'));\n  const filtered=q?sorted.filter(c=>[c.nom,c.adresse,c.tel].some(v=>v&&v.toLowerCase().includes(q))):sorted;\n  document.getElementById('client-rows').innerHTML=filtered.length?filtered.map(rowHtml).join(''):`<div class=\"empty-state\"><i class=\"ti ti-search\"><\/i><p>Aucun client ne correspond \u00e0 \"${q}\"<\/p><\/div>`;\n  const sc=document.getElementById('search-count');\n  if(sc)sc.textContent=q?`${filtered.length} r\u00e9sultat${filtered.length!==1?'s':''}`:clients.length+' client'+(clients.length!==1?'s':'');\n}\n\nfunction renderHistorique(){\n  const q=(document.getElementById('hist-search')?.value||'').toLowerCase().trim();\n  const sorted=[...interventions].sort((a,b)=>b.date.localeCompare(a.date));\n  const filtered=q?sorted.filter(i=>[i.clientNom,i.service,i.notes].some(v=>v&&v.toLowerCase().includes(q))):sorted;\n  const hc=document.getElementById('hist-count');\n  if(hc)hc.textContent=filtered.length+' intervention'+(filtered.length!==1?'s':'');\n  const el=document.getElementById('hist-rows');\n  if(!el)return;\n  if(!filtered.length){\n    el.innerHTML=`<div class=\"empty-state\"><i class=\"ti ti-history\"><\/i><p>${q?'Aucune intervention ne correspond \u00e0 \"'+q+'\"':'Aucune intervention enregistr\u00e9e'}<\/p><\/div>`;\n    return;\n  }\n  el.innerHTML=filtered.map(iv=>`\n    <div style=\"display:grid;grid-template-columns:120px minmax(0,2fr) 1fr 100px 90px;padding:11px 16px;border-bottom:1px solid #e8e8e8;align-items:center;font-size:13px;cursor:pointer\" onclick=\"openFiche('${iv.clientId}')\">\n      <span class=\"date-muted\">${fmt(iv.date)}<\/span>\n      <div><div class=\"name\">${iv.clientNom}<\/div>${iv.notes?`<div class=\"sub\">${iv.notes}<\/div>`:''}<\/div>\n      <span style=\"color:#555\">${iv.service||'\u2014'}<\/span>\n      <span style=\"font-weight:600;color:#1D9E75\">${iv.montant?iv.montant+' \u20ac':'\u2014'}<\/span>\n      <span><span class=\"pill pill-green\">Effectu\u00e9<\/span><\/span>\n    <\/div>`).join('');\n}\n\nfunction render(){\n  const sorted=[...clients].sort((a,b)=>(nextDate(a)||'9999').localeCompare(nextDate(b)||'9999'));\n  const now=new Date();const m=now.getMonth();const y=now.getFullYear();\n  const empty=(icon,msg)=>`<div class=\"empty-state\"><i class=\"ti ${icon}\"><\/i><p>${msg}<\/p><\/div>`;\n\n  \/\/ Stats\n  document.getElementById('s-clients').textContent=clients.length;\n  document.getElementById('s-mois').textContent=clients.filter(c=>{const n=nextDate(c);return n&&new Date(n).getMonth()===m&&new Date(n).getFullYear()===y;}).length;\n  document.getElementById('s-relances').textContent=clients.filter(c=>{const n=nextDate(c);const d=daysTo(n);return d!==null&&d>=0&&d<=5;}).length;\n  const totalMensuel=clients.reduce((s,c)=>s+clientMensuel(c),0);\n  document.getElementById('s-ca').textContent=totalMensuel.toFixed(0)+' \u20ac';\n  document.getElementById('s-ca-sub').textContent='\u2248 '+(totalMensuel*12).toFixed(0)+' \u20ac\/an';\n\n  \/\/ Dashboard\n  const dr=document.getElementById('dash-rows');\n  dr.innerHTML=clients.length?sorted.slice(0,6).map(rowHtml).join(''):empty('ti-users','Ajoutez votre premier client pour commencer');\n\n  \/\/ Clients\n  renderClients();\n\n  \/\/ Planning\n  document.getElementById('planning-rows').innerHTML=sorted.length?sorted.map(planRowHtml).join(''):empty('ti-calendar','Aucune intervention \u00e0 planifier');\n\n  \/\/ Relances\n  const avant=clients.filter(c=>{const n=nextDate(c);const d=daysTo(n);return d!==null&&d>=0&&d<=5;});\n  const apres=clients.filter(c=>c.prochain&&daysTo(c.prochain)<-1&&!c.avisEnvoye);\n  document.getElementById('rel-avant').innerHTML=avant.length?avant.map(c=>`\n    <div class=\"rel-row\">\n      <div class=\"rel-avatar\" style=\"background:#E6F1FB;color:#0C447C\"><i class=\"ti ti-message\"><\/i><\/div>\n      <div class=\"rel-body\"><div class=\"rel-name\">${c.nom}<\/div><div class=\"rel-sub\">Passage pr\u00e9vu le ${fmt(nextDate(c))}<\/div><\/div>\n      <button class=\"btn btn-sms btn-sm\" onclick=\"smsRappel(clients.find(x=>x.id==='${c.id}'))\"><i class=\"ti ti-send\"><\/i> SMS<\/button>\n    <\/div>`).join(''):empty('ti-check','Aucun rappel \u00e0 envoyer');\n  document.getElementById('rel-apres').innerHTML=apres.length?apres.map(c=>`\n    <div class=\"rel-row\">\n      <div class=\"rel-avatar\" style=\"background:#FAEEDA;color:#633806\"><i class=\"ti ti-star\"><\/i><\/div>\n      <div class=\"rel-body\"><div class=\"rel-name\">${c.nom}<\/div><div class=\"rel-sub\">Intervention du ${fmt(c.prochain)}<\/div><\/div>\n      <button class=\"btn btn-star btn-sm\" onclick=\"smsAvisMarked('${c.id}')\"><i class=\"ti ti-send\"><\/i> SMS<\/button>\n    <\/div>`).join(''):empty('ti-star','Aucune demande d\\'avis en attente');\n\n  \/\/ Historique\n  renderHistorique();\n\n  \/\/ CA\n  const totalSemaine=totalMensuel\/4.33;\n  document.getElementById('ca-semaine').textContent=totalSemaine.toFixed(0)+' \u20ac';\n  document.getElementById('ca-mois').textContent=totalMensuel.toFixed(0)+' \u20ac';\n  document.getElementById('ca-an').textContent=(totalMensuel*12).toFixed(0)+' \u20ac';\n  const sortedCA=[...clients].sort((a,b)=>clientMensuel(b)-clientMensuel(a));\n  const maxCA=sortedCA.length?clientMensuel(sortedCA[0]):1;\n  const colors=['#1D9E75','#2BB5A0','#0F6E56','#48C9B0','#3AC0A0','#1ABC9C'];\n  document.getElementById('ca-bars').innerHTML=sortedCA.length?sortedCA.map((c,i)=>{\n    const mensuel=clientMensuel(c);const pct=maxCA>0?Math.max(8,(mensuel\/maxCA)*100):8;\n    return `<div class=\"bar-row\">\n      <div class=\"bar-label\" title=\"${c.nom}\">${c.nom}<\/div>\n      <div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${pct}%;background:${colors[i%colors.length]}\">${mensuel>=15?mensuel.toFixed(0)+' \u20ac':''}<\/div><\/div>\n      <div class=\"bar-amount\">${mensuel.toFixed(0)} \u20ac<\/div>\n      <div class=\"bar-freq\">\/mois<\/div>\n    <\/div>`;\n  }).join(''):empty('ti-chart-bar','Aucun client avec prix renseign\u00e9');\n}\n\n\/\/ Close on backdrop\ndocument.querySelectorAll('.overlay').forEach(o=>o.addEventListener('click',e=>{if(e.target===o)o.style.display='none';}));\n\n\/\/ ---- DEMO DATA ----\nif(!clients.length){\n  const ago=n=>{const d=new Date();d.setDate(d.getDate()-n);return d.toISOString().split('T')[0];};\n  const fwd=n=>{const d=new Date();d.setDate(d.getDate()+n);return d.toISOString().split('T')[0];};\n  clients=[\n    {id:'1',nom:'Dupont & Fils SARL',tel:'0470123456',adresse:'12 rue du Commerce, Li\u00e8ge',dernier:ago(28),prochain:fwd(3),notes:\"Acc\u00e8s par l'arri\u00e8re\",avisEnvoye:false,services:[{nom:'Vitres ext\u00e9rieures',freq:'hebdo',prix:'45'},{nom:'Vitres int\u00e9rieures',freq:'mensuel',prix:'80'}]},\n    {id:'2',nom:'Mme Renard',tel:'0478654321',adresse:'8 av. des Lilas, Namur',dernier:ago(80),prochain:fwd(10),notes:'',avisEnvoye:false,services:[{nom:'Nettoyage complet',freq:'trimestriel',prix:'120'}]},\n    {id:'3',nom:'Boulangerie Simon',tel:'0465987654',adresse:'3 Grand-Place, Mons',dernier:ago(12),prochain:'',notes:'T\u00f4t le matin',avisEnvoye:false,services:[{nom:'Vitres ext\u00e9rieures',freq:'bimensuel',prix:'60'},{nom:'Vitres int\u00e9rieures',freq:'mensuel',prix:'90'}]},\n    {id:'4',nom:'R\u00e9sidence Les Pins',tel:'0491234567',adresse:'45 rue des Pins, Bruxelles',dernier:ago(5),prochain:'',notes:'',avisEnvoye:true,services:[{nom:'Nettoyage annuel',freq:'annuel',prix:'350'}]},\n  ];\n  interventions=[\n    {id:'h1',clientId:'1',clientNom:'Dupont & Fils SARL',service:'Vitres ext\u00e9rieures',date:ago(28),montant:'45',notes:''},\n    {id:'h2',clientId:'1',clientNom:'Dupont & Fils SARL',service:'Vitres ext\u00e9rieures',date:ago(21),montant:'45',notes:''},\n    {id:'h3',clientId:'1',clientNom:'Dupont & Fils SARL',service:'Vitres ext\u00e9rieures + int\u00e9rieures',date:ago(14),montant:'125',notes:'Grand nettoyage mensuel'},\n    {id:'h4',clientId:'3',clientNom:'Boulangerie Simon',service:'Vitres ext\u00e9rieures',date:ago(12),montant:'60',notes:''},\n    {id:'h5',clientId:'2',clientNom:'Mme Renard',service:'Nettoyage complet',date:ago(80),montant:'120',notes:'Client tr\u00e8s satisfait'},\n  ];\n  save();\n}\nrender();\n<\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":3,"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/freshe.pro\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}