{"id":3159,"date":"2026-09-14T09:07:28","date_gmt":"2026-09-14T09:07:28","guid":{"rendered":"https:\/\/alromar-energie.ma\/h26\/?page_id=3159"},"modified":"2026-09-14T16:41:50","modified_gmt":"2026-09-14T16:41:50","slug":"solar-calculator","status":"publish","type":"page","link":"https:\/\/alromar-energie.ma\/h26\/solar-calculator\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Simulateur Solaire | ALROMAR ENERGIE MAROC<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\n<script src=\"https:\/\/challenges.cloudflare.com\/turnstile\/v0\/api.js\" async=\"\" defer=\"\"><\/script>\n<style>\n  :root {\n    --green-dark: #2e7d32;\n    --green-primary: #4CAF50;\n    --green-light: #8BC34A;\n    --green-bright: #6cbd45;\n    --green-soft: #f1f8e9;\n    --black: #1a1a1a;\n    --gray-dark: #2d3748;\n    --gray-mid: #718096;\n    --gray-light: #e2e8f0;\n    --bg: #f8faf9;\n    --gradient-green: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);\n    --gradient-green-hover: linear-gradient(135deg, #43a047 0%, #7cb342 100%);\n    --shadow: 0 8px 30px rgba(76, 175, 80, 0.15);\n  }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  body {\n    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;\n    background: var(--bg);\n    min-height: 100vh;\n    padding: 20px;\n    color: var(--gray-dark);\n  }\n  .container {\n    max-width: 820px;\n    margin: 0 auto;\n    background: #fff;\n    padding: 35px 30px;\n    border-radius: 16px;\n    box-shadow: var(--shadow);\n    border-top: 4px solid transparent;\n    border-image: var(--gradient-green) 1;\n  }\n  .lang-switch {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-bottom: 20px;\n  }\n  .lang-switch button {\n    width: auto;\n    padding: 7px 18px;\n    font-size: 13px;\n    font-weight: 600;\n    background: #f0f4f2;\n    color: var(--gray-dark);\n    border-radius: 20px;\n    border: 1px solid var(--gray-light);\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n  .lang-switch button:hover {\n    background: var(--green-soft);\n    border-color: var(--green-light);\n  }\n  .lang-switch button.active {\n    background: var(--gradient-green);\n    color: #fff;\n    border-color: transparent;\n  }\n  h1 {\n    color: var(--black);\n    text-align: center;\n    font-size: 28px;\n    font-weight: 800;\n    margin-bottom: 8px;\n    letter-spacing: -0.5px;\n  }\n  h1 span {\n    background: var(--gradient-green);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  .brand-top {\n    text-align: center;\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 3px;\n    color: var(--green-bright);\n    margin-bottom: 30px;\n    text-transform: uppercase;\n  }\n  label {\n    display: block;\n    margin-top: 18px;\n    font-weight: 700;\n    color: var(--gray-dark);\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n  input, select {\n    width: 100%;\n    padding: 13px 15px;\n    margin-top: 7px;\n    border: 2px solid var(--gray-light);\n    border-radius: 10px;\n    font-size: 15px;\n    transition: border 0.2s, box-shadow 0.2s;\n    background: #fff;\n    color: var(--gray-dark);\n    font-family: inherit;\n  }\n  input:focus, select:focus {\n    outline: none;\n    border-color: var(--green-primary);\n    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);\n  }\n  .hint {\n    font-size: 12px;\n    color: var(--gray-mid);\n    margin-top: 5px;\n    font-weight: normal;\n    font-style: italic;\n  }\n  .btn-calc {\n    width: 100%;\n    padding: 16px;\n    margin-top: 28px;\n    background: var(--gradient-green);\n    color: #fff;\n    border: none;\n    border-radius: 10px;\n    font-size: 17px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n  }\n  .btn-calc:hover {\n    background: var(--gradient-green-hover);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);\n  }\n  .btn-calc:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none;\n  }\n  .results {\n    margin-top: 30px;\n    background: var(--green-soft);\n    border: 2px solid #dcedc8;\n    padding: 22px;\n    border-radius: 12px;\n    display: none;\n  }\n  .results h2 {\n    color: var(--green-dark);\n    font-size: 18px;\n    margin-bottom: 18px;\n    text-align: center;\n    font-weight: 800;\n    letter-spacing: 0.5px;\n  }\n  .result-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n  }\n  .result-item {\n    background: #fff;\n    padding: 14px 16px;\n    border-radius: 10px;\n    border: 1px solid #e8f5e9;\n    transition: transform 0.2s;\n  }\n  .result-item:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);\n  }\n  .result-item .label {\n    font-size: 12px;\n    color: var(--gray-mid);\n    margin-bottom: 5px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n  }\n  .result-item .value {\n    font-size: 20px;\n    font-weight: 800;\n    color: var(--black);\n  }\n  .result-item .value.highlight {\n    background: var(--gradient-green);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  .area-warning {\n    margin-top: 16px;\n    padding: 14px 16px;\n    border-radius: 10px;\n    font-size: 14px;\n    display: none;\n    font-weight: 600;\n  }\n  .area-warning.ok {\n    background: #def7ec;\n    color: #03543f;\n    border: 1px solid #84e1bc;\n    display: block;\n  }\n  .area-warning.ko {\n    background: #fde8e8;\n    color: #9b1c1c;\n    border: 1px solid #f8b4b4;\n    display: block;\n  }\n  .disclaimer {\n    margin-top: 18px;\n    padding: 16px 18px;\n    background: #fffaf0;\n    border: 1px solid #f6e05e;\n    border-left: 4px solid #ecc94b;\n    border-radius: 10px;\n    font-size: 13px;\n    color: #744210;\n    line-height: 1.7;\n  }\n  .disclaimer strong {\n    color: #975a16;\n  }\n  html[dir=\"rtl\"] .disclaimer {\n    border-left: 1px solid #f6e05e;\n    border-right: 4px solid #ecc94b;\n  }\n  .chart-container {\n    margin-top: 20px;\n    background: #fff;\n    padding: 18px;\n    border-radius: 10px;\n    border: 1px solid #e8f5e9;\n  }\n  .cta-btn {\n    display: block;\n    text-align: center;\n    margin-top: 20px;\n    background: var(--gradient-green);\n    color: #fff;\n    padding: 16px;\n    border-radius: 10px;\n    text-decoration: none;\n    font-weight: 700;\n    font-size: 15px;\n    transition: transform 0.2s, box-shadow 0.2s;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n  .cta-btn:hover {\n    background: var(--gradient-green-hover);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);\n  }\n  .brand-bottom {\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 3px;\n    color: var(--gray-mid);\n    text-align: center;\n    margin-top: 25px;\n    text-transform: uppercase;\n  }\n\n  \/* ===== GATE FORM ===== *\/\n  .gate-form {\n    animation: fadeIn 0.4s ease;\n  }\n  .gate-header {\n    text-align: center;\n    margin-bottom: 20px;\n  }\n  .gate-header h2 {\n    color: var(--black);\n    font-size: 22px;\n    font-weight: 800;\n    margin-bottom: 8px;\n  }\n  .gate-header p {\n    color: var(--gray-mid);\n    font-size: 14px;\n    line-height: 1.6;\n    max-width: 520px;\n    margin: 0 auto;\n  }\n  .form-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n    margin-top: 6px;\n  }\n  .form-row label {\n    margin-top: 0;\n  }\n  .form-row .field {\n    margin-top: 14px;\n  }\n  .checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-top: 20px;\n    padding: 12px 14px;\n    background: #f8faf9;\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--gray-dark);\n    line-height: 1.5;\n    cursor: pointer;\n    text-transform: none;\n    letter-spacing: normal;\n    font-weight: normal;\n  }\n  .checkbox-label input[type=\"checkbox\"] {\n    width: auto;\n    margin: 2px 0 0 0;\n    accent-color: var(--green-primary);\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n  .gate-error {\n    color: #e53e3e;\n    font-size: 13px;\n    text-align: center;\n    margin-top: 14px;\n    min-height: 18px;\n    font-weight: 600;\n  }\n  .cf-turnstile {\n    margin-top: 20px;\n    display: flex;\n    justify-content: center;\n  }\n  .hidden { display: none !important; }\n  .calculator-app {\n    animation: fadeIn 0.5s ease;\n  }\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  @media (max-width: 600px) {\n    .form-row { grid-template-columns: 1fr; gap: 0; }\n    .form-row .field { margin-top: 14px; }\n  }\n  @media (max-width: 500px) {\n    .result-grid { grid-template-columns: 1fr; }\n    .container { padding: 22px 18px; }\n    h1 { font-size: 22px; }\n  }\n<\/style>\n\n\n\n<div class=\"container\">\n  <div class=\"lang-switch\">\n    <button onclick=\"setLang('fr')\" id=\"btn-fr\" class=\"active\">Fran\u00e7ais<\/button>\n    <button onclick=\"setLang('ar')\" id=\"btn-ar\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/button>\n    <button onclick=\"setLang('en')\" id=\"btn-en\">English<\/button>\n  <\/div>\n\n  <!-- ===== GATE FORM ===== -->\n  <div class=\"gate-form\" id=\"gate-form\">\n    <div class=\"gate-header\">\n      <h2 id=\"gate-title\">Acc\u00e9der au simulateur<\/h2>\n      <p id=\"gate-subtitle\">Veuillez remplir vos informations pour lancer la simulation solaire<\/p>\n    <\/div>\n\n    <div class=\"form-row\">\n      <div class=\"field\">\n        <label id=\"lbl-g-nom\">Nom et Pr\u00e9nom *<\/label>\n        <input type=\"text\" id=\"g-nom\" placeholder=\"Ex: Ahmed Benali\">\n      <\/div>\n      <div class=\"field\">\n        <label id=\"lbl-g-societe\">Soci\u00e9t\u00e9 (optionnel)<\/label>\n        <input type=\"text\" id=\"g-societe\" placeholder=\"Ex: SARL ABC\">\n      <\/div>\n    <\/div>\n\n    <div class=\"form-row\">\n      <div class=\"field\">\n        <label id=\"lbl-g-tel\">T\u00e9l\u00e9phone *<\/label>\n        <input type=\"tel\" id=\"g-tel\" placeholder=\"Ex: 0600000000\">\n      <\/div>\n      <div class=\"field\">\n        <label id=\"lbl-g-email\">Email *<\/label>\n        <input type=\"email\" id=\"g-email\" placeholder=\"Ex: ahmed@email.com\">\n      <\/div>\n    <\/div>\n\n    <label id=\"lbl-g-ville\">Ville *<\/label>\n    <input type=\"text\" id=\"g-ville\" placeholder=\"Ex: Casablanca\">\n\n    <label class=\"checkbox-label\" id=\"lbl-g-consent\">\n      <input type=\"checkbox\" id=\"g-consent\">\n      <span id=\"g-consent-text\">J&rsquo;accepte que mes donn\u00e9es soient utilis\u00e9es par ALROMAR ENERGIE MAROC pour \u00eatre contact\u00e9 au sujet de mon projet solaire.<\/span>\n    <\/label>\n\n    <!-- \u26a1 CLOUDFLARE TURNSTILE -->\n    <div class=\"cf-turnstile\" data-sitekey=\"0x4AAAAAAE0EkHCDAXsulDu9\" data-theme=\"light\" data-language=\"fr\">\n    <\/div>\n\n    <button class=\"btn-calc\" id=\"gate-btn\" onclick=\"submitGate()\">\n      <span id=\"gate-btn-text\">Lancer ma simulation \u2192<\/span>\n    <\/button>\n    <p class=\"gate-error\" id=\"gate-error\"><\/p>\n  <\/div>\n\n  <!-- ===== CALCULATOR APP ===== -->\n  <div class=\"calculator-app hidden\" id=\"calculator-app\">\n    <h1 id=\"title\">Calculateur <span>Solaire<\/span><\/h1>\n    <p class=\"brand-top\">By ALROMAR ENERGIE MAROC<\/p>\n\n    <label id=\"lbl-city\">Ville<\/label>\n    <select id=\"city\">\n      <optgroup label=\"Tanger-T\u00e9touan-Al Hoce\u00efma\">\n        <option value=\"4.48\">Tanger (4.48 kWh\/m\u00b2\/j)<\/option>\n        <option value=\"4.66\">T\u00e9touan (4.66)<\/option>\n        <option value=\"4.55\">Ksar El K\u00e9bir (4.55)<\/option>\n        <option value=\"4.72\">Larache (4.72)<\/option>\n        <option value=\"4.85\">Chefchaouen (4.85)<\/option>\n        <option value=\"4.80\">Al Hoceima (4.80)<\/option>\n        <option value=\"4.60\">M&rsquo;diq (4.60)<\/option>\n      <\/optgroup>\n      <optgroup label=\"L'Oriental\">\n        <option value=\"5.15\">Oujda (5.15)<\/option>\n        <option value=\"4.95\">Nador (4.95)<\/option>\n        <option value=\"5.10\">Berkane (5.10)<\/option>\n        <option value=\"5.20\">Taourirt (5.20)<\/option>\n        <option value=\"5.15\">Jerada (5.15)<\/option>\n        <option value=\"5.60\">Figuig (5.60)<\/option>\n      <\/optgroup>\n      <optgroup label=\"F\u00e8s-Mekn\u00e8s\">\n        <option value=\"5.20\">F\u00e8s (5.20)<\/option>\n        <option value=\"5.15\">Mekn\u00e8s (5.15)<\/option>\n        <option value=\"5.10\">Ifrane (5.10)<\/option>\n        <option value=\"5.15\">Taza (5.15)<\/option>\n        <option value=\"5.15\">El Hajeb (5.15)<\/option>\n        <option value=\"5.20\">Sefrou (5.20)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Rabat-Sal\u00e9-K\u00e9nitra\">\n        <option value=\"5.10\">Rabat (5.10)<\/option>\n        <option value=\"5.08\">Sal\u00e9 (5.08)<\/option>\n        <option value=\"4.95\">K\u00e9nitra (4.95)<\/option>\n        <option value=\"5.05\">T\u00e9mara (5.05)<\/option>\n        <option value=\"5.05\">Skhirat (5.05)<\/option>\n        <option value=\"5.05\">Sidi Slimane (5.05)<\/option>\n        <option value=\"5.10\">Sidi Kacem (5.10)<\/option>\n        <option value=\"5.10\">Kh\u00e9misset (5.10)<\/option>\n      <\/optgroup>\n      <optgroup label=\"B\u00e9ni Mellal-Kh\u00e9nifra\">\n        <option value=\"5.35\">B\u00e9ni Mellal (5.35)<\/option>\n        <option value=\"5.25\">Kh\u00e9nifra (5.25)<\/option>\n        <option value=\"5.35\">Khouribga (5.35)<\/option>\n        <option value=\"5.30\">Fquih Ben Salah (5.30)<\/option>\n        <option value=\"5.30\">Azilal (5.30)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Casablanca-Settat\">\n        <option value=\"5.00\">Casablanca (5.00)<\/option>\n        <option value=\"5.00\">Mohammedia (5.00)<\/option>\n        <option value=\"5.20\">El Jadida (5.20)<\/option>\n        <option value=\"5.25\">Settat (5.25)<\/option>\n        <option value=\"5.15\">Berrechid (5.15)<\/option>\n        <option value=\"5.10\">Benslimane (5.10)<\/option>\n        <option value=\"5.20\">Sidi Bennour (5.20)<\/option>\n        <option value=\"5.05\">Nouaceur (5.05)<\/option>\n        <option value=\"5.00\">M\u00e9diouna (5.00)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Marrakech-Safi\">\n        <option value=\"5.50\">Marrakech (5.50)<\/option>\n        <option value=\"5.25\">Essaouira (5.25)<\/option>\n        <option value=\"5.35\">Safi (5.35)<\/option>\n        <option value=\"5.45\">El Kelaa des Sraghna (5.45)<\/option>\n        <option value=\"5.45\">Chichaoua (5.45)<\/option>\n        <option value=\"5.30\">Youssoufia (5.30)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Dr\u00e2a-Tafilalet\">\n        <option value=\"5.95\">Ouarzazate (5.95)<\/option>\n        <option value=\"5.95\">Zagora (5.95)<\/option>\n        <option value=\"5.85\">Errachidia (5.85)<\/option>\n        <option value=\"5.90\">Tinghir (5.90)<\/option>\n        <option value=\"5.60\">Midelt (5.60)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Souss-Massa\">\n        <option value=\"5.50\">Agadir (5.50)<\/option>\n        <option value=\"5.55\">Taroudant (5.55)<\/option>\n        <option value=\"5.55\">Tiznit (5.55)<\/option>\n        <option value=\"5.50\">Inezgane (5.50)<\/option>\n        <option value=\"5.50\">Ait Melloul (5.50)<\/option>\n        <option value=\"5.50\">Chtouka Ait Baha (5.50)<\/option>\n        <option value=\"5.85\">Tata (5.85)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Guelmim-Oued Noun\">\n        <option value=\"5.70\">Guelmim (5.70)<\/option>\n        <option value=\"5.75\">Tan-Tan (5.75)<\/option>\n        <option value=\"5.50\">Sidi Ifni (5.50)<\/option>\n        <option value=\"5.80\">Assa-Zag (5.80)<\/option>\n      <\/optgroup>\n      <optgroup label=\"La\u00e2youne-Sakia El Hamra\">\n        <option value=\"5.80\">La\u00e2youne (5.80)<\/option>\n        <option value=\"5.85\">Boujdour (5.85)<\/option>\n        <option value=\"5.85\">Es-Semara (5.85)<\/option>\n        <option value=\"5.75\">Tarfaya (5.75)<\/option>\n      <\/optgroup>\n      <optgroup label=\"Dakhla-Oued Ed-Dahab\">\n        <option value=\"5.90\">Dakhla (5.90)<\/option>\n        <option value=\"5.95\">Aousserd (5.95)<\/option>\n      <\/optgroup>\n    <\/select>\n\n    <label id=\"lbl-bill\">Facture mensuelle moyenne (DH)<\/label>\n    <input type=\"number\" id=\"bill\" value=\"600\" min=\"0\" step=\"10\">\n    <p class=\"hint\" id=\"hint-bill\">Montant total de votre facture d&rsquo;\u00e9lectricit\u00e9 par mois<\/p>\n\n    <label id=\"lbl-price\">Prix du kWh (DH\/kWh)<\/label>\n    <input type=\"number\" id=\"priceKwh\" value=\"1.20\" min=\"0.1\" step=\"0.01\">\n    <p class=\"hint\" id=\"hint-price\">Indiquez le prix que vous payez par kWh (visible sur votre facture)<\/p>\n\n    <label id=\"lbl-area\">Surface de toiture disponible (m\u00b2)<\/label>\n    <input type=\"number\" id=\"area\" value=\"30\" min=\"0\" step=\"5\">\n\n    <label id=\"lbl-panel\">Puissance du panneau (W)<\/label>\n    <select id=\"panelWatt\">\n      <option value=\"450\">450 W<\/option>\n      <option value=\"550\">550 W<\/option>\n      <option value=\"580\">580 W<\/option>\n      <option value=\"620\">620 W<\/option>\n      <option value=\"710\" selected=\"\">710 W (N-Type TOPCon)<\/option>\n    <\/select>\n\n    <label id=\"lbl-tilt\">Inclinaison des panneaux (\u00b0)<\/label>\n    <select id=\"tiltAngle\">\n      <option value=\"10\">10\u00b0<\/option>\n      <option value=\"15\">15\u00b0<\/option>\n      <option value=\"20\">20\u00b0<\/option>\n      <option value=\"25\" selected=\"\">25\u00b0 (optimal Maroc)<\/option>\n      <option value=\"30\">30\u00b0<\/option>\n      <option value=\"35\">35\u00b0<\/option>\n    <\/select>\n\n    <label id=\"lbl-shading\">Niveau d&rsquo;ombrage \/ obstacles<\/label>\n    <select id=\"shading\">\n      <option value=\"none\">Aucun \u2014 Toiture d\u00e9gag\u00e9e (\u00d71.00)<\/option>\n      <option value=\"light\" selected=\"\">L\u00e9ger \u2014 Petit obstacle (\u00d71.10)<\/option>\n      <option value=\"medium\">Moyen \u2014 Obstacles multiples (\u00d71.25)<\/option>\n      <option value=\"heavy\">Fort \u2014 Toiture encombr\u00e9e (\u00d71.45)<\/option>\n    <\/select>\n\n    <button class=\"btn-calc\" onclick=\"calculate()\" id=\"btn-calc\">Calculer les \u00e9conomies<\/button>\n\n    <div class=\"results\" id=\"results\">\n      <h2 id=\"results-title\">\ud83d\udcca R\u00e9sultats<\/h2>\n      <div class=\"result-grid\">\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-consumption-label\">Consommation mensuelle<\/div>\n          <div class=\"value\" id=\"r-consumption\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-size-label\">Taille du syst\u00e8me<\/div>\n          <div class=\"value\" id=\"r-size\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-panels-label\">Nombre de panneaux<\/div>\n          <div class=\"value\" id=\"r-panels\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-area-label\">Surface requise<\/div>\n          <div class=\"value\" id=\"r-area\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-spacing-label\">Espacement entre rang\u00e9es<\/div>\n          <div class=\"value\" id=\"r-spacing\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-prod-label\">Production annuelle<\/div>\n          <div class=\"value\" id=\"r-prod\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-save-label\">\u00c9conomies annuelles<\/div>\n          <div class=\"value highlight\" id=\"r-save\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\">\n          <div class=\"label\" id=\"r-pay-label\">Retour sur investissement<\/div>\n          <div class=\"value\" id=\"r-pay\">\u2014<\/div>\n        <\/div>\n        <div class=\"result-item\" style=\"grid-column: 1 \/ -1;\">\n          <div class=\"label\" id=\"r-co2-label\">R\u00e9duction CO\u2082<\/div>\n          <div class=\"value\" id=\"r-co2\">\u2014<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"area-warning\" id=\"area-warning\"><\/div>\n\n      <div class=\"disclaimer\" id=\"disclaimer\"><\/div>\n\n      <div class=\"chart-container\">\n        <canvas id=\"savingsChart\"><\/canvas>\n      <\/div>\n\n      <a class=\"cta-btn\" id=\"contact-btn\" href=\"#\">\n        <span id=\"contact-text\">\ud83d\udce7 Demander un devis par email<\/span>\n      <\/a>\n    <\/div>\n\n    <p class=\"brand-bottom\">ALROMAR ENERGIE MAROC<\/p>\n  <\/div>\n<\/div>\n\n<script>\n\/\/ ========== URL Google Sheets ==========\nconst GOOGLE_SHEET_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzln7bGH1n8WsJTYIvZkt_ROA-9VDZ3KYgtvpWvWwh4LtaCr5raMf9R-BxH9TGO7bn5\/exec';\n\n\/\/ ========== Param\u00e8tres ==========\nconst SYSTEM_EFFICIENCY = 0.80;\nconst COST_PER_KWC = 10000;\nconst CO2_FACTOR = 0.72;\nconst DEGRADATION_RATE = 0.006;\nconst LATITUDE_MOROCCO = 32;\nconst SOLAR_DECLINATION_WINTER = -23.44;\nconst WINTER_ALTITUDE_ANGLE = 90 - LATITUDE_MOROCCO - Math.abs(SOLAR_DECLINATION_WINTER);\n\nconst PANEL_DIMENSIONS = {\n  450: { width: 1.96, length: 0.99, area: 1.94 },\n  550: { width: 2.28, length: 1.13, area: 2.58 },\n  580: { width: 2.28, length: 1.13, area: 2.58 },\n  620: { width: 2.38, length: 1.13, area: 2.69 },\n  710: { width: 2.384, length: 1.303, area: 3.106 }\n};\n\nconst SHADING = {\n  none:   { areaFactor: 1.00, prodLoss: 0.00 },\n  light:  { areaFactor: 1.10, prodLoss: 0.03 },\n  medium: { areaFactor: 1.25, prodLoss: 0.07 },\n  heavy:  { areaFactor: 1.45, prodLoss: 0.12 }\n};\n\n\/\/ ========== Traductions ==========\nconst translations = {\n  fr: {\n    gateTitle: 'Acc\u00e9der au simulateur',\n    gateSubtitle: 'Veuillez remplir vos informations pour lancer la simulation solaire',\n    gNom: 'Nom et Pr\u00e9nom *',\n    gSociete: 'Soci\u00e9t\u00e9 (optionnel)',\n    gTel: 'T\u00e9l\u00e9phone *',\n    gEmail: 'Email *',\n    gVille: 'Ville *',\n    gConsent: 'J\\'accepte que mes donn\u00e9es soient utilis\u00e9es par ALROMAR ENERGIE MAROC pour \u00eatre contact\u00e9 au sujet de mon projet solaire.',\n    gBtn: 'Lancer ma simulation \u2192',\n    gSending: 'Envoi en cours...',\n    errRequired: '\u26a0\ufe0f Veuillez remplir tous les champs obligatoires.',\n    errEmail: '\u26a0\ufe0f Email invalide.',\n    errConsent: '\u26a0\ufe0f Veuillez accepter les conditions.',\n    errCaptcha: '\u26a0\ufe0f Veuillez valider le captcha.',\n    title: 'Calculateur <span>Solaire<\/span>',\n    city: 'Ville',\n    bill: 'Facture mensuelle moyenne (DH)',\n    hintBill: 'Montant total de votre facture d\\'\u00e9lectricit\u00e9 par mois',\n    price: 'Prix du kWh (DH\/kWh)',\n    hintPrice: 'Indiquez le prix que vous payez par kWh (visible sur votre facture)',\n    area: 'Surface de toiture disponible (m\u00b2)',\n    panel: 'Puissance du panneau (W)',\n    tilt: 'Inclinaison des panneaux (\u00b0)',\n    shading: 'Niveau d\\'ombrage \/ obstacles',\n    btn: 'Calculer les \u00e9conomies',\n    resultsTitle: '\ud83d\udcca R\u00e9sultats',\n    consResult: 'Consommation mensuelle',\n    size: 'Taille du syst\u00e8me',\n    panels: 'Nombre de panneaux',\n    areaReq: 'Surface requise',\n    spacing: 'Espacement entre rang\u00e9es',\n    prod: 'Production annuelle',\n    save: '\u00c9conomies annuelles',\n    pay: 'Retour sur investissement',\n    co2: 'R\u00e9duction CO\u2082',\n    contact: '\ud83d\udce7 Demander un devis par email',\n    areaOk: '\u2705 Surface suffisante : {req} m\u00b2 requis sur {avail} m\u00b2 disponibles.',\n    areaKo: '\u26a0\ufe0f Surface insuffisante : il faut {req} m\u00b2 mais vous avez {avail} m\u00b2.',\n    disclaimer: '<strong>\u26a0\ufe0f Important :<\/strong> Ces r\u00e9sultats sont des estimations pr\u00e9liminaires et non d\u00e9finitives. Une \u00e9tude technique d\u00e9taill\u00e9e sur site est n\u00e9cessaire pour valider la conception, le dimensionnement et la rentabilit\u00e9 r\u00e9elle de votre installation solaire.',\n    unitKw: ' kWc',\n    unitPanel: ' panneaux',\n    unitKwh: ' kWh',\n    unitDh: ' DH',\n    unitYear: ' ans',\n    unitKg: ' kg\/an',\n    unitM2: ' m\u00b2',\n    unitM: ' m',\n    chartLabel: '\u00c9conomies cumul\u00e9es (DH)',\n    chartYear: 'Ann\u00e9e',\n    chartCost: 'Co\u00fbt syst\u00e8me',\n    emailSubject: 'Demande de devis solaire \u2014 ALROMAR ENERGIE MAROC',\n    emailBody: 'Bonjour,%0D%0A%0D%0AJe souhaite un devis pour une installation solaire.%0D%0A%0D%0A--- Informations client ---%0D%0ANom: {nom}%0D%0ASoci\u00e9t\u00e9: {societe}%0D%0AT\u00e9l\u00e9phone: {telephone}%0D%0AEmail: {email}%0D%0AVille: {ville}%0D%0A%0D%0A--- R\u00e9sultats de simulation ---%0D%0AConsommation mensuelle: {cons} kWh%0D%0APrix du kWh: {price} DH%0D%0ATaille du syst\u00e8me: {size} kWc%0D%0ANombre de panneaux: {panels}%0D%0ASurface requise: {area} m\u00b2%0D%0A\u00c9conomies annuelles: {savings} DH%0D%0A%0D%0ACordialement.'\n  },\n  ar: {\n    gateTitle: '\u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u062d\u0627\u0643\u064a',\n    gateSubtitle: '\u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u0645\u0639\u0644\u0648\u0645\u0627\u062a\u0643\u0645 \u0644\u0628\u062f\u0621 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629',\n    gNom: '\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 *',\n    gSociete: '\u0627\u0644\u0634\u0631\u0643\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)',\n    gTel: '\u0627\u0644\u0647\u0627\u062a\u0641 *',\n    gEmail: '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a *',\n    gVille: '\u0627\u0644\u0645\u062f\u064a\u0646\u0629 *',\n    gConsent: '\u0623\u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0628\u064a\u0627\u0646\u0627\u062a\u064a \u0645\u0646 \u0637\u0631\u0641 ALROMAR ENERGIE MAROC \u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u064a \u0628\u062e\u0635\u0648\u0635 \u0645\u0634\u0631\u0648\u0639\u064a \u0627\u0644\u0634\u0645\u0633\u064a.',\n    gBtn: '\u2190 \u0627\u0628\u062f\u0623 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629',\n    gSending: '\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644...',\n    errRequired: '\u26a0\ufe0f \u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0625\u0644\u0632\u0627\u0645\u064a\u0629.',\n    errEmail: '\u26a0\ufe0f \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u063a\u064a\u0631 \u0635\u062d\u064a\u062d.',\n    errConsent: '\u26a0\ufe0f \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629 \u0639\u0644\u0649 \u0627\u0644\u0634\u0631\u0648\u0637.',\n    errCaptcha: '\u26a0\ufe0f \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0643\u0627\u0628\u062a\u0634\u0627.',\n    title: '\u062d\u0627\u0633\u0628\u0629 <span>\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629<\/span>',\n    city: '\u0627\u0644\u0645\u062f\u064a\u0646\u0629',\n    bill: '\u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0641\u0627\u062a\u0648\u0631\u0629 \u0627\u0644\u0634\u0647\u0631\u064a\u0629 \u0644\u0644\u0643\u0647\u0631\u0628\u0627\u0621 (\u062f\u0631\u0647\u0645)',\n    hintBill: '\u0627\u0644\u0645\u0628\u0644\u063a \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0644\u0641\u0627\u062a\u0648\u0631\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0627\u0644\u0634\u0647\u0631\u064a\u0629',\n    price: '\u0633\u0639\u0631 \u0627\u0644\u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629 (\u062f\u0631\u0647\u0645\/kWh)',\n    hintPrice: '\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0633\u0639\u0631 \u0627\u0644\u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629 \u0643\u0645\u0627 \u0647\u0648 \u0645\u0628\u064a\u0646 \u0641\u064a \u0641\u0627\u062a\u0648\u0631\u062a\u0643\u0645',\n    area: '\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u062a\u0627\u062d\u0629 (\u0645\u00b2)',\n    panel: '\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u0648\u062d \u0627\u0644\u0634\u0645\u0633\u064a (\u0648\u0627\u0637)',\n    tilt: '\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u064a\u0644\u0627\u0646 (\u00b0)',\n    shading: '\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0638\u0644\u064a\u0644 \/ \u0627\u0644\u0639\u0648\u0627\u0626\u0642',\n    btn: '\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0648\u0641\u064a\u0631',\n    resultsTitle: '\ud83d\udcca \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062d\u0633\u0627\u0628',\n    consResult: '\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643 \u0627\u0644\u0634\u0647\u0631\u064a',\n    size: '\u062d\u062c\u0645 \u0627\u0644\u0646\u0638\u0627\u0645',\n    panels: '\u0639\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u062d',\n    areaReq: '\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629',\n    spacing: '\u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u0648\u0641',\n    prod: '\u0627\u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0633\u0646\u0648\u064a',\n    save: '\u0627\u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0633\u0646\u0648\u064a',\n    pay: '\u0641\u062a\u0631\u0629 \u0627\u0644\u0627\u0633\u062a\u0631\u062f\u0627\u062f',\n    co2: '\u062a\u0642\u0644\u064a\u0644 \u0627\u0646\u0628\u0639\u0627\u062b\u0627\u062a CO\u2082',\n    contact: '\ud83d\udce7 \u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0639\u0628\u0631 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',\n    areaOk: '\u2705 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0643\u0627\u0641\u064a\u0629: \u064a\u0644\u0632\u0645 {req} \u0645\u00b2 \u0645\u0646 \u0623\u0635\u0644 {avail} \u0645\u00b2 \u0645\u062a\u0627\u062d\u0629.',\n    areaKo: '\u26a0\ufe0f \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u063a\u064a\u0631 \u0643\u0627\u0641\u064a\u0629: \u064a\u0644\u0632\u0645 {req} \u0645\u00b2 \u0648\u0644\u0643\u0646 \u0644\u062f\u064a\u0643\u0645 {avail} \u0645\u00b2 \u0641\u0642\u0637.',\n    disclaimer: '<strong>\u26a0\ufe0f \u062a\u0646\u0628\u064a\u0647 \u0645\u0647\u0645:<\/strong> \u0647\u0630\u0647 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0647\u064a \u062a\u0642\u062f\u064a\u0631\u0627\u062a \u0623\u0648\u0644\u064a\u0629 \u0648\u0644\u064a\u0633\u062a \u0646\u0647\u0627\u0626\u064a\u0629. \u064a\u062a\u0639\u064a\u0646 \u0625\u062c\u0631\u0627\u0621 \u062f\u0631\u0627\u0633\u0629 \u062a\u0642\u0646\u064a\u0629 \u0645\u0641\u0635\u0644\u0629 \u0641\u064a \u0639\u064a\u0646 \u0627\u0644\u0645\u0643\u0627\u0646 \u0644\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0641\u0639\u0644\u064a \u0648\u062c\u062f\u0648\u0649 \u0627\u0644\u0631\u0628\u062d\u064a\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u0644\u0645\u0646\u0634\u0623\u062a\u0643\u0645 \u0627\u0644\u0634\u0645\u0633\u064a\u0629.',\n    unitKw: ' \u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0630\u0631\u0648\u0629',\n    unitPanel: ' \u0644\u0648\u062d',\n    unitKwh: ' \u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629',\n    unitDh: ' \u062f\u0631\u0647\u0645',\n    unitYear: ' \u0633\u0646\u0629',\n    unitKg: ' \u0643\u063a\/\u0633\u0646\u0629',\n    unitM2: ' \u0645\u00b2',\n    unitM: ' \u0645',\n    chartLabel: '\u0627\u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u062a\u0631\u0627\u0643\u0645\u064a (\u062f\u0631\u0647\u0645)',\n    chartYear: '\u0627\u0644\u0633\u0646\u0629',\n    chartCost: '\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0638\u0627\u0645',\n    emailSubject: '\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0644\u0645\u0646\u0634\u0623\u0629 \u0634\u0645\u0633\u064a\u0629 \u2014 ALROMAR ENERGIE MAROC',\n    emailBody: '\u0627\u0644\u0633\u0644\u0627\u0645 \u0639\u0644\u064a\u0643\u0645\u060c%0D%0A%0D%0A\u0623\u0631\u063a\u0628 \u0641\u064a \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0644\u0645\u0646\u0634\u0623\u0629 \u0634\u0645\u0633\u064a\u0629.%0D%0A%0D%0A--- \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644 ---%0D%0A\u0627\u0644\u0627\u0633\u0645: {nom}%0D%0A\u0627\u0644\u0634\u0631\u0643\u0629: {societe}%0D%0A\u0627\u0644\u0647\u0627\u062a\u0641: {telephone}%0D%0A\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a: {email}%0D%0A\u0627\u0644\u0645\u062f\u064a\u0646\u0629: {ville}%0D%0A%0D%0A--- \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 ---%0D%0A\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643 \u0627\u0644\u0634\u0647\u0631\u064a: {cons} \u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629%0D%0A\u0633\u0639\u0631 \u0627\u0644\u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629: {price} \u062f\u0631\u0647\u0645%0D%0A\u062d\u062c\u0645 \u0627\u0644\u0646\u0638\u0627\u0645: {size} \u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0630\u0631\u0648\u0629%0D%0A\u0639\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u062d: {panels}%0D%0A\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629: {area} \u0645\u00b2%0D%0A\u0627\u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0633\u0646\u0648\u064a: {savings} \u062f\u0631\u0647\u0645%0D%0A%0D%0A\u0648\u062a\u0641\u0636\u0644\u0648\u0627 \u0628\u0642\u0628\u0648\u0644 \u0641\u0627\u0626\u0642 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0645.'\n  },\n  en: {\n    gateTitle: 'Access the simulator',\n    gateSubtitle: 'Please fill in your information to start the solar simulation',\n    gNom: 'Full Name *',\n    gSociete: 'Company (optional)',\n    gTel: 'Phone *',\n    gEmail: 'Email *',\n    gVille: 'City *',\n    gConsent: 'I agree that my data may be used by ALROMAR ENERGIE MAROC to contact me about my solar project.',\n    gBtn: 'Start my simulation \u2192',\n    gSending: 'Sending...',\n    errRequired: '\u26a0\ufe0f Please fill in all required fields.',\n    errEmail: '\u26a0\ufe0f Invalid email.',\n    errConsent: '\u26a0\ufe0f Please accept the terms.',\n    errCaptcha: '\u26a0\ufe0f Please validate the captcha.',\n    title: 'Solar <span>Calculator<\/span>',\n    city: 'City',\n    bill: 'Average monthly bill (DH)',\n    hintBill: 'Total amount of your monthly electricity bill',\n    price: 'Price per kWh (DH\/kWh)',\n    hintPrice: 'Enter the price you pay per kWh (check your bill)',\n    area: 'Available roof area (m\u00b2)',\n    panel: 'Panel power (W)',\n    tilt: 'Panel tilt (\u00b0)',\n    shading: 'Shading level \/ obstacles',\n    btn: 'Calculate savings',\n    resultsTitle: '\ud83d\udcca Results',\n    consResult: 'Monthly consumption',\n    size: 'System size',\n    panels: 'Number of panels',\n    areaReq: 'Required area',\n    spacing: 'Row spacing',\n    prod: 'Annual production',\n    save: 'Annual savings',\n    pay: 'Payback period',\n    co2: 'CO\u2082 reduction',\n    contact: '\ud83d\udce7 Request a quote by email',\n    areaOk: '\u2705 Sufficient area: {req} m\u00b2 required out of {avail} m\u00b2 available.',\n    areaKo: '\u26a0\ufe0f Insufficient area: {req} m\u00b2 needed but you have {avail} m\u00b2.',\n    disclaimer: '<strong>\u26a0\ufe0f Important:<\/strong> These results are preliminary estimates and not final. A detailed on-site technical study is required to validate the design, sizing and actual profitability of your solar installation.',\n    unitKw: ' kWp',\n    unitPanel: ' panels',\n    unitKwh: ' kWh',\n    unitDh: ' DH',\n    unitYear: ' years',\n    unitKg: ' kg\/year',\n    unitM2: ' m\u00b2',\n    unitM: ' m',\n    chartLabel: 'Cumulative savings (DH)',\n    chartYear: 'Year',\n    chartCost: 'System cost',\n    emailSubject: 'Solar quote request \u2014 ALROMAR ENERGIE MAROC',\n    emailBody: 'Hello,%0D%0A%0D%0AI would like a quote for a solar installation.%0D%0A%0D%0A--- Client information ---%0D%0AName: {nom}%0D%0ACompany: {societe}%0D%0APhone: {telephone}%0D%0AEmail: {email}%0D%0ACity: {ville}%0D%0A%0D%0A--- Simulation results ---%0D%0AMonthly consumption: {cons} kWh%0D%0APrice per kWh: {price} DH%0D%0ASystem size: {size} kWp%0D%0ANumber of panels: {panels}%0D%0ARequired area: {area} m\u00b2%0D%0AAnnual savings: {savings} DH%0D%0A%0D%0ABest regards.'\n  }\n};\n\nlet currentLang = 'fr';\nlet chartInstance = null;\nlet leadData = null;\n\n\/\/ ========== Espacement entre rang\u00e9es ==========\nfunction calculateSpacing(panelWatt, tiltDeg, sunAngle) {\n  const dim = PANEL_DIMENSIONS[panelWatt] || PANEL_DIMENSIONS[710];\n  const panelWidth = dim.width;\n  const tiltRad = tiltDeg * Math.PI \/ 180;\n  const sunRad = sunAngle * Math.PI \/ 180;\n  const H = panelWidth * Math.sin(tiltRad);\n  const D = H * Math.sin(tiltRad) \/ Math.tan(sunRad);\n  return {\n    H: H,\n    D: D,\n    panelWidth: panelWidth,\n    panelLength: dim.length,\n    areaPerPanel: dim.area\n  };\n}\n\n\/\/ ========== Gate Form ==========\nasync function submitGate() {\n  const t = translations[currentLang];\n  const errorEl = document.getElementById('gate-error');\n  const nom = document.getElementById('g-nom').value.trim();\n  const societe = document.getElementById('g-societe').value.trim();\n  const telephone = document.getElementById('g-tel').value.trim();\n  const email = document.getElementById('g-email').value.trim();\n  const ville = document.getElementById('g-ville').value.trim();\n  const consent = document.getElementById('g-consent').checked;\n\n  if (!nom || !telephone || !email || !ville) {\n    errorEl.textContent = t.errRequired;\n    return;\n  }\n  const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n  if (!emailRegex.test(email)) {\n    errorEl.textContent = t.errEmail;\n    return;\n  }\n  if (!consent) {\n    errorEl.textContent = t.errConsent;\n    return;\n  }\n\n  \/\/ \u26a1 V\u00e9rification Turnstile\n  const turnstileInput = document.querySelector('[name=\"cf-turnstile-response\"]');\n  const turnstileToken = turnstileInput ? turnstileInput.value : '';\n  if (!turnstileToken) {\n    errorEl.textContent = t.errCaptcha;\n    return;\n  }\n\n  errorEl.textContent = '';\n  const btn = document.getElementById('gate-btn');\n  const btnText = document.getElementById('gate-btn-text');\n  btnText.textContent = t.gSending;\n  btn.disabled = true;\n\n  leadData = { nom, societe, telephone, email, ville };\n  localStorage.setItem('alromar_lead', JSON.stringify(leadData));\n\n  try {\n    await fetch(GOOGLE_SHEET_URL, {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: { 'Content-Type': 'application\/json' },\n      body: JSON.stringify({\n        nom: nom,\n        societe: societe,\n        telephone: telephone,\n        email: email,\n        ville: ville,\n        'cf-turnstile-response': turnstileToken\n      })\n    });\n  } catch (err) {\n    console.error('Erreur envoi:', err);\n  }\n\n  document.getElementById('gate-form').classList.add('hidden');\n  document.getElementById('calculator-app').classList.remove('hidden');\n}\n\n\/\/ ========== Calcul principal ==========\nfunction calculate() {\n  const sunHours = parseFloat(document.getElementById('city').value);\n  const bill = parseFloat(document.getElementById('bill').value) || 0;\n  const priceKwh = parseFloat(document.getElementById('priceKwh').value) || 1.20;\n  const area = parseFloat(document.getElementById('area').value) || 0;\n  const panelWatt = parseFloat(document.getElementById('panelWatt').value) || 710;\n  const tiltAngle = parseFloat(document.getElementById('tiltAngle').value) || 25;\n  const shadingKey = document.getElementById('shading').value;\n  const t = translations[currentLang];\n  const sh = SHADING[shadingKey];\n\n  const monthlyKwh = bill \/ priceKwh;\n  const dailyKwh = monthlyKwh \/ 30;\n  const systemSize = dailyKwh \/ (sunHours * SYSTEM_EFFICIENCY);\n  const panels = Math.ceil((systemSize * 1000) \/ panelWatt);\n\n  const spacing = calculateSpacing(panelWatt, tiltAngle, WINTER_ALTITUDE_ANGLE);\n  const spacedArea = (panels * (spacing.panelWidth + spacing.D) * spacing.panelLength);\n  const requiredArea = spacedArea * sh.areaFactor;\n\n  const annualProduction = systemSize * sunHours * 365 * SYSTEM_EFFICIENCY * (1 - sh.prodLoss);\n  const annualSavings = annualProduction * priceKwh;\n  const systemCost = systemSize * COST_PER_KWC;\n  const payback = annualSavings > 0 ? (systemCost \/ annualSavings) : 0;\n  const co2Reduction = annualProduction * CO2_FACTOR;\n\n  document.getElementById('r-consumption').textContent = Math.round(monthlyKwh).toLocaleString() + t.unitKwh;\n  document.getElementById('r-size').textContent = systemSize.toFixed(1) + t.unitKw;\n  document.getElementById('r-panels').textContent = panels + t.unitPanel;\n  document.getElementById('r-area').textContent = requiredArea.toFixed(1) + t.unitM2;\n  document.getElementById('r-spacing').textContent = spacing.D.toFixed(2) + t.unitM;\n  document.getElementById('r-prod').textContent = Math.round(annualProduction).toLocaleString() + t.unitKwh;\n  document.getElementById('r-save').textContent = Math.round(annualSavings).toLocaleString() + t.unitDh;\n  document.getElementById('r-pay').textContent = payback.toFixed(1) + t.unitYear;\n  document.getElementById('r-co2').textContent = Math.round(co2Reduction).toLocaleString() + t.unitKg;\n\n  const warningEl = document.getElementById('area-warning');\n  if (area > 0) {\n    if (area >= requiredArea) {\n      warningEl.className = 'area-warning ok';\n      warningEl.textContent = t.areaOk.replace('{req}', requiredArea.toFixed(1)).replace('{avail}', area.toFixed(1));\n    } else {\n      warningEl.className = 'area-warning ko';\n      warningEl.textContent = t.areaKo.replace('{req}', requiredArea.toFixed(1)).replace('{avail}', area.toFixed(1));\n    }\n  }\n\n  const emailBody = t.emailBody\n    .replace('{nom}', leadData ? leadData.nom : '-')\n    .replace('{societe}', leadData && leadData.societe ? leadData.societe : '-')\n    .replace('{telephone}', leadData ? leadData.telephone : '-')\n    .replace('{email}', leadData ? leadData.email : '-')\n    .replace('{ville}', leadData ? leadData.ville : '-')\n    .replace('{cons}', Math.round(monthlyKwh))\n    .replace('{price}', priceKwh.toFixed(2))\n    .replace('{size}', systemSize.toFixed(1))\n    .replace('{panels}', panels)\n    .replace('{area}', requiredArea.toFixed(1))\n    .replace('{savings}', Math.round(annualSavings));\n  document.getElementById('contact-btn').href = `mailto:contact@alromar-energie.ma?subject=${encodeURIComponent(t.emailSubject)}&body=${emailBody}`;\n\n  renderChart(annualProduction, priceKwh, systemCost, t);\n\n  document.getElementById('results').style.display = 'block';\n  document.getElementById('results').scrollIntoView({ behavior: 'smooth' });\n}\n\n\/\/ ========== Graphique ==========\nfunction renderChart(annualProd, price, systemCost, t) {\n  const years = [];\n  const cumulative = [];\n  let total = 0;\n  for (let y = 1; y <= 25; y++) {\n    const prod = annualProd * Math.pow(1 - DEGRADATION_RATE, y - 1);\n    const saving = prod * price;\n    total += saving;\n    years.push(y);\n    cumulative.push(Math.round(total));\n  }\n\n  const ctx = document.getElementById('savingsChart').getContext('2d');\n  if (chartInstance) chartInstance.destroy();\n\n  chartInstance = new Chart(ctx, {\n    type: 'line',\n    data: {\n      labels: years.map(y => t.chartYear + ' ' + y),\n      datasets: [\n        {\n          label: t.chartLabel,\n          data: cumulative,\n          borderColor: '#4CAF50',\n          backgroundColor: 'rgba(76, 175, 80, 0.12)',\n          fill: true,\n          tension: 0.3,\n          pointRadius: 2,\n          borderWidth: 2\n        },\n        {\n          label: '\ud83d\udcb0 ' + t.chartCost,\n          data: years.map(() => systemCost),\n          borderColor: '#8BC34A',\n          borderDash: [6, 4],\n          pointRadius: 0,\n          borderWidth: 2,\n          fill: false\n        }\n      ]\n    },\n    options: {\n      responsive: true,\n      plugins: {\n        legend: { position: 'bottom', labels: { font: { size: 12, weight: '600' } } },\n        tooltip: {\n          callbacks: {\n            label: function(ctx) {\n              return ctx.dataset.label + ': ' + ctx.parsed.y.toLocaleString() + ' DH';\n            }\n          }\n        }\n      },\n      scales: {\n        y: {\n          beginAtZero: true,\n          ticks: { callback: v => v.toLocaleString() + ' DH' }\n        }\n      }\n    }\n  });\n}\n\n\/\/ ========== Changement de langue ==========\nfunction setLang(lang) {\n  currentLang = lang;\n  const t = translations[lang];\n  const isAr = lang === 'ar';\n\n  document.documentElement.lang = lang;\n  document.documentElement.dir = isAr ? 'rtl' : 'ltr';\n\n  document.getElementById('gate-title').textContent = t.gateTitle;\n  document.getElementById('gate-subtitle').textContent = t.gateSubtitle;\n  document.getElementById('lbl-g-nom').textContent = t.gNom;\n  document.getElementById('lbl-g-societe').textContent = t.gSociete;\n  document.getElementById('lbl-g-tel').textContent = t.gTel;\n  document.getElementById('lbl-g-email').textContent = t.gEmail;\n  document.getElementById('lbl-g-ville').textContent = t.gVille;\n  document.getElementById('g-consent-text').textContent = t.gConsent;\n  document.getElementById('gate-btn-text').textContent = t.gBtn;\n\n  document.getElementById('title').innerHTML = t.title;\n  document.getElementById('lbl-city').textContent = t.city;\n  document.getElementById('lbl-bill').textContent = t.bill;\n  document.getElementById('hint-bill').textContent = t.hintBill;\n  document.getElementById('lbl-price').textContent = t.price;\n  document.getElementById('hint-price').textContent = t.hintPrice;\n  document.getElementById('lbl-area').textContent = t.area;\n  document.getElementById('lbl-panel').textContent = t.panel;\n  document.getElementById('lbl-tilt').textContent = t.tilt;\n  document.getElementById('lbl-shading').textContent = t.shading;\n  document.getElementById('btn-calc').textContent = t.btn;\n  document.getElementById('results-title').textContent = t.resultsTitle;\n  document.getElementById('r-consumption-label').textContent = t.consResult;\n  document.getElementById('r-size-label').textContent = t.size;\n  document.getElementById('r-panels-label').textContent = t.panels;\n  document.getElementById('r-area-label').textContent = t.areaReq;\n  document.getElementById('r-spacing-label').textContent = t.spacing;\n  document.getElementById('r-prod-label').textContent = t.prod;\n  document.getElementById('r-save-label').textContent = t.save;\n  document.getElementById('r-pay-label').textContent = t.pay;\n  document.getElementById('r-co2-label').textContent = t.co2;\n  document.getElementById('contact-text').textContent = t.contact;\n  document.getElementById('disclaimer').innerHTML = t.disclaimer;\n\n  document.getElementById('btn-fr').classList.toggle('active', lang === 'fr');\n  document.getElementById('btn-ar').classList.toggle('active', isAr);\n  document.getElementById('btn-en').classList.toggle('active', lang === 'en');\n}\n\n\/\/ ========== Init ==========\ndocument.addEventListener('DOMContentLoaded', function() {\n  setLang('fr');\n\n  const saved = localStorage.getItem('alromar_lead');\n  if (saved) {\n    try {\n      leadData = JSON.parse(saved);\n      document.getElementById('gate-form').classList.add('hidden');\n      document.getElementById('calculator-app').classList.remove('hidden');\n    } catch(e) {\n      console.log('Erreur lecture localStorage');\n    }\n  }\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Simulateur Solaire | ALROMAR ENERGIE MAROC Fran\u00e7ais \u0627\u0644\u0639\u0631\u0628\u064a\u0629 English Acc\u00e9der au simulateur Veuillez remplir vos informations pour lancer la simulation solaire Nom et Pr\u00e9nom * Soci\u00e9t\u00e9 (optionnel) T\u00e9l\u00e9phone * Email * Ville * J&rsquo;accepte que mes donn\u00e9es soient utilis\u00e9es par ALROMAR ENERGIE MAROC pour \u00eatre contact\u00e9 au sujet de mon projet solaire. Lancer ma simulation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3159","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/pages\/3159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/comments?post=3159"}],"version-history":[{"count":6,"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/pages\/3159\/revisions"}],"predecessor-version":[{"id":3211,"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/pages\/3159\/revisions\/3211"}],"wp:attachment":[{"href":"https:\/\/alromar-energie.ma\/h26\/wp-json\/wp\/v2\/media?parent=3159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}