✘✘ GRAYBYTE WORDPRESS FILE MANAGER ✘✘

<!-- ============================================================
   CreditoFacile.biz — Simulateur de crédit (partiel)
   Utilisé via le shortcode [cf_simulateur] dans Elementor
   Multilingue IT / FR auto-détection
   ============================================================ -->
<style>
/* ── SIMULATEUR CreditoFacile ──────────────────────────────── */
#cf-sim-wrap * { box-sizing: border-box; }
#cf-sim-wrap {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 48px rgba(10,61,143,.18);
  overflow: hidden;
  margin: 0 auto;
}
.cf-sim-header {
  background: linear-gradient(135deg, #0a3d8f 0%, #1565c0 60%, #1976d2 100%);
  padding: 32px 40px;
  color: #fff;
  text-align: center;
}
.cf-sim-header h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.cf-sim-header p  { font-size: .95rem; opacity: .88; margin: 0; }

.cf-sim-tabs { display: flex; background: #e8eef8; border-bottom: 2px solid #c5d3e8; }
.cf-sim-tab {
  flex: 1; padding: 18px 10px; text-align: center;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  color: #556; transition: all .2s; line-height: 1.3;
  border-right: 1px solid #c5d3e8;
}
.cf-sim-tab:last-child { border-right: none; }
.cf-sim-tab.active { background: #fff; color: #0a3d8f; border-bottom: 3px solid #0a3d8f; margin-bottom: -2px; }
.cf-sim-tab:hover:not(.active) { background: #f0f4fa; color: #0a3d8f; }

.cf-sim-body { padding: 40px 44px; }

.cf-form-row { display: flex; gap: 28px; margin-bottom: 28px; flex-wrap: wrap; }
.cf-form-col  { flex: 1; min-width: 200px; }
.cf-form-col label {
  display: block;
  font-size: .85rem; font-weight: 700;
  color: #2a3a5c; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: .6px;
}
.cf-form-col input,
.cf-form-col select {
  width: 100%; padding: 16px 18px;
  border: 2px solid #d0d8e8; border-radius: 12px;
  font-size: 1.05rem; font-weight: 500; color: #1a1a2e;
  background: #f7f9ff; transition: border .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.cf-form-col input:focus,
.cf-form-col select:focus {
  outline: none; border-color: #1565c0; background: #fff;
  box-shadow: 0 0 0 4px rgba(21,101,192,.12);
}

.cf-slider-wrap { margin-top: 14px; }
.cf-slider {
  width: 100%; -webkit-appearance: none;
  height: 7px; border-radius: 4px; background: #d0d8e8;
  outline: none; cursor: pointer;
}
.cf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 3px solid #1565c0; box-shadow: 0 2px 10px rgba(21,101,192,.35);
  cursor: pointer; transition: transform .15s;
}
.cf-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cf-slider-labels {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: #778; margin-top: 8px; font-weight: 500;
}

.cf-result-box {
  background: linear-gradient(135deg, #e8f0fe, #f3f8ff);
  border: 2px solid #b0c4ef; border-radius: 16px;
  padding: 24px 28px; margin-top: 8px;
}
.cf-result-main { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.cf-mensualite { text-align: center; min-width: 140px; }
.cf-mensualite .label   { font-size: .8rem; color: #556; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cf-mensualite .montant { font-size: 2.6rem; font-weight: 900; color: #0a3d8f; line-height: 1.1; }
.cf-mensualite .mois    { font-size: .85rem; color: #778; margin-top: 4px; }
.cf-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-width: 220px; }
.cf-detail-item { background: #fff; border-radius: 10px; padding: 12px 16px; border: 1px solid #d8e4f4; }
.cf-detail-item .lbl { font-size: .72rem; color: #778; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cf-detail-item .val { font-size: 1.05rem; font-weight: 700; color: #1a1a2e; margin-top: 4px; }

.cf-cta-section { margin-top: 32px; border-top: 2px solid #e8eef8; padding-top: 32px; }
.cf-cta-title { font-size: 1.05rem; font-weight: 800; color: #0a3d8f; margin-bottom: 22px; }
.cf-btn-submit {
  width: 100%; padding: 18px;
  background: linear-gradient(135deg, #e65100, #f57c00);
  color: #fff; border: none; border-radius: 12px;
  font-size: 1.1rem; font-weight: 800; cursor: pointer;
  transition: all .2s; box-shadow: 0 6px 20px rgba(230,81,0,.3);
  letter-spacing: .3px; margin-top: 6px;
}
.cf-btn-submit:hover { background: linear-gradient(135deg, #bf360c, #e65100); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(230,81,0,.4); }
.cf-legal { font-size: .75rem; color: #aaa; margin-top: 12px; line-height: 1.5; text-align: center; }
.cf-success {
  display: none; background: #e8f5e9;
  border: 2px solid #a5d6a7; border-radius: 12px;
  padding: 20px 24px; text-align: center; margin-top: 16px;
}
.cf-success .icon { font-size: 2rem; }
.cf-success p { font-size: 1rem; color: #2e7d32; font-weight: 700; margin-top: 6px; }

@media (max-width: 600px) {
  .cf-sim-tab   { font-size: .82rem; padding: 12px 4px; }
  .cf-sim-body  { padding: 20px 16px; }
  .cf-form-row  { gap: 14px; margin-bottom: 18px; }
  .cf-form-col input,
  .cf-form-col select { padding: 13px 12px; font-size: .97rem; }
  .cf-btn-submit { font-size: .88rem; padding: 14px 12px; white-space: normal; line-height: 1.35; letter-spacing: 0; }
  .cf-result-main { flex-direction: column; gap: 12px; }
  .cf-mensualite .montant { font-size: 2.2rem; }
  .cf-result-box { padding: 16px 14px; }
  .cf-detail-grid { min-width: unset; width: 100%; gap: 8px; grid-template-columns: 1fr 1fr; }
  .cf-detail-item { padding: 10px; }
  .cf-detail-item .lbl { font-size: .62rem; letter-spacing: 0; line-height: 1.3; word-break: break-word; }
  .cf-detail-item .val { font-size: .92rem; white-space: nowrap; }
}
</style>

<div id="cf-sim-wrap">
  <div class="cf-sim-header">
    <h2 id="cf-titre">Simulatore di Credito</h2>
    <p id="cf-sous-titre">Calcola la tua rata mensile in 30 secondi</p>
  </div>
  <div class="cf-sim-tabs">
    <div class="cf-sim-tab active" onclick="cfSetType('mutuo')" id="tab-mutuo">Mutuo</div>
    <div class="cf-sim-tab" onclick="cfSetType('prestito')" id="tab-prestito">Prestito Personale</div>
    <div class="cf-sim-tab" onclick="cfSetType('auto')" id="tab-auto">Prestito Auto</div>
    <div class="cf-sim-tab" onclick="cfSetType('cessione')" id="tab-cessione">Cessione V&deg;</div>
  </div>
  <div class="cf-sim-body">
    <div class="cf-form-row">
      <div class="cf-form-col">
        <label id="lbl-montant">Importo richiesto</label>
        <input type="number" id="cf-montant" value="100000" min="1000" max="1000000" step="1000" oninput="cfSync('montant');cfCalc()">
        <div class="cf-slider-wrap">
          <input type="range" class="cf-slider" id="cf-montant-slider" min="5000" max="500000" step="1000" value="100000" oninput="cfSync('slider-montant');cfCalc()">
          <div class="cf-slider-labels"><span id="sl-min">5.000&euro;</span><span id="sl-max">500.000&euro;</span></div>
        </div>
      </div>
      <div class="cf-form-col">
        <label id="lbl-duree">Durata (anni)</label>
        <input type="number" id="cf-duree" value="20" min="1" max="30" oninput="cfCalc()">
        <div class="cf-slider-wrap">
          <input type="range" class="cf-slider" id="cf-duree-slider" min="1" max="30" value="20" oninput="document.getElementById('cf-duree').value=this.value;cfCalc()">
          <div class="cf-slider-labels"><span>1</span><span id="sl-duree-max">30</span></div>
        </div>
      </div>
    </div>
    <div class="cf-form-row">
      <div class="cf-form-col">
        <label id="lbl-taux">Tasso (TAEG %)</label>
        <input type="number" id="cf-taux" value="4.5" min="0.1" max="25" step="0.1" oninput="cfCalc()">
      </div>
      <div class="cf-form-col">
        <label id="lbl-pays">Paese</label>
        <select id="cf-pays" onchange="cfChangePays()">
          <option value="IT">Italia</option>
          <option value="FR">France</option>
        </select>
      </div>
    </div>
    <div class="cf-result-box">
      <div class="cf-result-main">
        <div class="cf-mensualite">
          <div class="label" id="lbl-mensualite">Rata mensile</div>
          <div class="montant" id="cf-mensualite-val">537&euro;</div>
          <div class="mois" id="lbl-mois-sur">su 240 mesi</div>
        </div>
        <div class="cf-detail-grid">
          <div class="cf-detail-item"><div class="lbl" id="lbl-total">Totale rimborso</div><div class="val" id="cf-total-val">128.880&euro;</div></div>
          <div class="cf-detail-item"><div class="lbl" id="lbl-interets">Interessi totali</div><div class="val" id="cf-interets-val">28.880&euro;</div></div>
          <div class="cf-detail-item"><div class="lbl" id="lbl-taux-label">TAEG</div><div class="val" id="cf-taux-label-val">4.5%</div></div>
          <div class="cf-detail-item"><div class="lbl" id="lbl-duree-label">Durata</div><div class="val" id="cf-duree-label-val">20 anni</div></div>
        </div>
      </div>
    </div>
    <div class="cf-cta-section">
      <div class="cf-cta-title" id="cf-cta-title">Ricevi le migliori offerte per il tuo profilo</div>
      <div class="cf-lead-form" id="cf-lead-form">
        <div class="cf-form-row">
          <div class="cf-form-col"><label id="lbl-nome">Nome e Cognome</label><input type="text" id="cf-nome" placeholder="Mario Rossi"></div>
          <div class="cf-form-col"><label id="lbl-email">Email</label><input type="email" id="cf-email" placeholder="mario@email.com"></div>
        </div>
        <div class="cf-form-row">
          <div class="cf-form-col"><label id="lbl-tel">Telefono</label><input type="tel" id="cf-tel" placeholder="+39 333 000 0000"></div>
          <div class="cf-form-col">
            <label id="lbl-reddito">Reddito mensile netto</label>
            <select id="cf-reddito">
              <option value="">-- Seleziona --</option>
              <option value="&lt;1000">&lt; 1.000&euro;</option>
              <option value="1000-1500">1.000 - 1.500&euro;</option>
              <option value="1500-2500">1.500 - 2.500&euro;</option>
              <option value="2500-4000">2.500 - 4.000&euro;</option>
              <option value="&gt;4000">&gt; 4.000&euro;</option>
            </select>
          </div>
        </div>
        <button class="cf-btn-submit" onclick="cfSubmitLead()" id="cf-btn-submit">Richiedi Consulenza Gratuita &rarr;</button>
        <div class="cf-legal" id="cf-legal-txt">Inviando il modulo, accetti la nostra <a href="/note-legali/" style="color:#888">Privacy Policy</a>.</div>
      </div>
      <div class="cf-success" id="cf-success">
        <div class="icon">&#10003;</div>
        <p id="cf-success-msg">Richiesta ricevuta! Ti contatteremo entro 24h con le migliori offerte.</p>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  var T = {
    IT:{
      sim_titre:"Simulatore di Credito",
      sim_st:"Calcola la tua rata mensile in 30 secondi",
      tab_mutuo:"Mutuo", tab_prestito:"Prestito Personale",
      tab_auto:"Prestito Auto", tab_cessione:"Cessione V\u00b0",
      lbl_montant:"Importo richiesto", lbl_duree:"Durata (anni)",
      lbl_taux:"Tasso (TAEG %)", lbl_pays:"Paese",
      lbl_mensualite:"Rata mensile", lbl_total:"Totale rimborso",
      lbl_interets:"Interessi totali", lbl_taux_l:"TAEG", lbl_duree_l:"Durata",
      mesi:"mesi", anni:"anni",
      cta_sim:"Ricevi le migliori offerte per il tuo profilo",
      lbl_nome:"Nome e Cognome", lbl_email:"Email",
      lbl_tel:"Telefono", lbl_reddito:"Reddito mensile netto",
      btn_submit:"Richiedi Consulenza Gratuita \u2192",
      legal:'Inviando il modulo, accetti la nostra <a href="/note-legali/" style="color:#888">Privacy Policy</a>.',
      success:"Richiesta ricevuta! Ti contatteremo entro 24h.",
      taux_d:{mutuo:4.5,prestito:8.5,auto:6.5,cessione:10.5},
      duree_d:{mutuo:20,prestito:5,auto:5,cessione:10},
      mont_d:{mutuo:100000,prestito:15000,auto:18000,cessione:25000}
    },
    FR:{
      sim_titre:"Simulateur de Cr\u00e9dit",
      sim_st:"Calculez votre mensualit\u00e9 en 30 secondes",
      tab_mutuo:"Cr\u00e9dit Immo", tab_prestito:"Pr\u00eat Personnel",
      tab_auto:"Pr\u00eat Auto", tab_cessione:"Rachat Cr\u00e9dit",
      lbl_montant:"Montant souhait\u00e9", lbl_duree:"Dur\u00e9e (ann\u00e9es)",
      lbl_taux:"Taux (TAEG %)", lbl_pays:"Pays",
      lbl_mensualite:"Mensualit\u00e9", lbl_total:"Co\u00fbt total",
      lbl_interets:"Int\u00e9r\u00eats totaux", lbl_taux_l:"TAEG", lbl_duree_l:"Dur\u00e9e",
      mesi:"mois", anni:"ans",
      cta_sim:"Recevez les meilleures offres pour votre profil",
      lbl_nome:"Nom et Pr\u00e9nom", lbl_email:"Email",
      lbl_tel:"T\u00e9l\u00e9phone", lbl_reddito:"Revenus nets mensuels",
      btn_submit:"Demander un Conseil Gratuit \u2192",
      legal:'En soumettant ce formulaire, vous acceptez notre <a href="/note-legali/" style="color:#888">Politique de Confidentialit\u00e9</a>.',
      success:"Demande re\u00e7ue ! Nous vous contacterons sous 24h.",
      taux_d:{mutuo:3.9,prestito:6.5,auto:5.5,cessione:8.5},
      duree_d:{mutuo:20,prestito:5,auto:5,cessione:10},
      mont_d:{mutuo:200000,prestito:15000,auto:18000,cessione:30000}
    }
  };

  var lang = 'IT';
  var hl = (document.documentElement.lang||'').toUpperCase().slice(0,2);
  if (T[hl]) lang = hl;
  var currentType = 'mutuo';

  function setT(id,txt){ var e=document.getElementById(id); if(e) e.textContent=txt; }
  function setH(id,html){ var e=document.getElementById(id); if(e) e.innerHTML=html; }

  function applySimLang(){
    var t = T[lang]||T.IT;
    setT('cf-titre',t.sim_titre); setT('cf-sous-titre',t.sim_st);
    setT('tab-mutuo',t.tab_mutuo); setT('tab-prestito',t.tab_prestito);
    setT('tab-auto',t.tab_auto); setT('tab-cessione',t.tab_cessione);
    setT('lbl-montant',t.lbl_montant); setT('lbl-duree',t.lbl_duree);
    setT('lbl-taux',t.lbl_taux); setT('lbl-pays',t.lbl_pays);
    setT('lbl-mensualite',t.lbl_mensualite); setT('lbl-total',t.lbl_total);
    setT('lbl-interets',t.lbl_interets); setT('lbl-taux-label',t.lbl_taux_l);
    setT('lbl-duree-label',t.lbl_duree_l);
    setT('cf-cta-title',t.cta_sim);
    setT('lbl-nome',t.lbl_nome); setT('lbl-email',t.lbl_email);
    setT('lbl-tel',t.lbl_tel); setT('lbl-reddito',t.lbl_reddito);
    setT('cf-btn-submit',t.btn_submit);
    var legal=document.getElementById('cf-legal-txt'); if(legal) legal.innerHTML=t.legal;
  }

  window.cfSetType = function(type){
    currentType = type;
    var t = T[lang]||T.IT;
    ['mutuo','prestito','auto','cessione'].forEach(function(tp){
      var tab=document.getElementById('tab-'+tp);
      if(tab) tab.classList.toggle('active', tp===type);
    });
    var slider=document.getElementById('cf-montant-slider');
    var sMin=document.getElementById('sl-min'), sMax=document.getElementById('sl-max');
    var isLong=(type==='mutuo');
    if(slider){
      slider.min=isLong?50000:1000; slider.max=isLong?500000:75000; slider.step=isLong?5000:500;
      if(sMin) sMin.textContent=isLong?'50.000\u20ac':'1.000\u20ac';
      if(sMax) sMax.textContent=isLong?'500.000\u20ac':'75.000\u20ac';
    }
    var dSlider=document.getElementById('cf-duree-slider'), dMax=document.getElementById('sl-duree-max');
    if(dSlider){ var mx=(type==='mutuo'?30:(type==='cessione'?10:7)); dSlider.max=mx; if(dMax) dMax.textContent=mx; }
    if(t.taux_d&&t.taux_d[type]) document.getElementById('cf-taux').value=t.taux_d[type];
    if(t.duree_d&&t.duree_d[type]){ document.getElementById('cf-duree').value=t.duree_d[type]; document.getElementById('cf-duree-slider').value=t.duree_d[type]; }
    if(t.mont_d&&t.mont_d[type]){ document.getElementById('cf-montant').value=t.mont_d[type]; document.getElementById('cf-montant-slider').value=t.mont_d[type]; }
    cfCalc();
  };

  window.cfSync = function(type){
    var s=document.getElementById('cf-montant-slider'), v=document.getElementById('cf-montant');
    if(!s||!v) return;
    if(type==='montant') s.value=v.value; else v.value=s.value;
  };

  window.cfCalc = function(){
    var montant=parseFloat(document.getElementById('cf-montant').value)||0;
    var duree=parseFloat(document.getElementById('cf-duree').value)||1;
    var taux=parseFloat(document.getElementById('cf-taux').value)||0;
    var t=T[lang]||T.IT;
    var n=duree*12, r=taux/100/12, mensualite;
    if(r===0) mensualite=montant/n;
    else mensualite=montant*r*Math.pow(1+r,n)/(Math.pow(1+r,n)-1);
    var total=mensualite*n, interets=total-montant;
    var fmt=function(v){ return Math.round(v).toLocaleString('fr-FR')+'\u20ac'; };
    document.getElementById('cf-mensualite-val').textContent=fmt(mensualite);
    document.getElementById('cf-total-val').textContent=fmt(total);
    document.getElementById('cf-interets-val').textContent=fmt(interets);
    document.getElementById('cf-taux-label-val').textContent=taux.toFixed(1)+'%';
    document.getElementById('cf-duree-label-val').textContent=duree+' '+(t.anni||'anni');
    var surEl=document.getElementById('lbl-mois-sur');
    if(surEl) surEl.textContent='su '+n+' '+(t.mesi||'mesi');
  };

  window.cfChangePays = function(){
    var pays=document.getElementById('cf-pays').value;
    if(T[pays]){ lang=pays; applySimLang(); cfSetType(currentType); }
  };

  window.cfSubmitLead = function(){
    var email=(document.getElementById('cf-email').value||'').trim();
    if(!email||!email.includes('@')){
      alert(lang==='FR'?'Veuillez saisir un email valide.':'Inserisci un email valido.');
      return;
    }
    var btn=document.getElementById('cf-btn-submit');
    if(btn){ btn.disabled=true; btn.textContent='...'; }
    var data={
      nome:document.getElementById('cf-nome').value||'',
      email:email,
      tel:document.getElementById('cf-tel').value||'',
      pays:document.getElementById('cf-pays').value,
      reddito:document.getElementById('cf-reddito').value,
      type_credit:currentType,
      montant:document.getElementById('cf-montant').value,
      duree:document.getElementById('cf-duree').value,
      taux:document.getElementById('cf-taux').value,
      mensualite:document.getElementById('cf-mensualite-val').textContent,
      lang:lang
    };
    fetch('/wp-json/creditofacile/v1/lead',{
      method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)
    }).then(function(){
      document.getElementById('cf-lead-form').style.display='none';
      var s=document.getElementById('cf-success'); if(s) s.style.display='block';
      var m=document.getElementById('cf-success-msg'); if(m) m.textContent=(T[lang]||T.IT).success;
    }).catch(function(){
      document.getElementById('cf-lead-form').style.display='none';
      var s=document.getElementById('cf-success'); if(s) s.style.display='block';
    });
  };

  applySimLang();
  cfSetType('mutuo');
})();
</script>