Calculateur CEE BAR-TH-161 - Calomatech
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold: #F7A600;
--gold-light: #F7CA66;
--gold-pale: #FEF3D0;
--grey: #717E86;
--grey-light: #B0B9BE;
--grey-pale: #E0E3E5;
--penn-blue: #11114D;
--white: #FFFFFF;
--off-white: #F5F6F7;
--text-dark: #1C2329;
--text-mid: #717E86;
--text-light: #A0AAB0;
--success: #2E7D32;
--success-light: #E8F5E9;
}
body {
font-family: 'Nunito Sans', 'Avenir', 'Segoe UI', sans-serif;
background: var(--off-white);
color: var(--text-dark);
line-height: 1.6;
min-height: 100vh;
}
/* ── FRISE HACHURÉE (brand element) ── */
.frise {
height: 10px;
background: repeating-linear-gradient(
-60deg,
var(--gold) 0px,
var(--gold) 8px,
var(--gold-light) 8px,
var(--gold-light) 12px,
var(--grey-pale) 12px,
var(--grey-pale) 16px,
var(--gold-light) 16px,
var(--gold-light) 20px
);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
/* ── HEADER ── */
.site-header {
background: var(--penn-blue);
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.logo-area {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* SVG icon approximation of the Calomatech submark */
.logo-icon svg {
width: 40px;
height: 40px;
}
.logo-wordmark {
font-size: 1.35rem;
font-weight: 900;
letter-spacing: -0.5px;
color: var(--white);
}
.logo-wordmark span {
color: var(--gold);
}
.logo-tagline {
font-size: 0.65rem;
color: var(--grey-light);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
margin-top: 1px;
}
/* ── HERO BAND ── */
.hero-band {
background: var(--penn-blue);
padding: 2rem 2rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-band::before {
content: '';
position: absolute;
right: -80px;
top: -80px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 60px solid rgba(247, 166, 0, 0.08);
}
.hero-band::after {
content: '';
position: absolute;
left: -60px;
bottom: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
border: 40px solid rgba(247, 202, 102, 0.06);
}
.hero-badge {
display: inline-block;
background: var(--gold);
color: var(--penn-blue);
font-size: 0.7rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
padding: 0.3rem 0.9rem;
border-radius: 2px;
margin-bottom: 1rem;
}
.hero-band h1 {
font-size: 2rem;
font-weight: 900;
color: var(--white);
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.hero-band h1 em {
font-style: normal;
color: var(--gold);
}
.hero-subtitle {
color: var(--grey-light);
font-size: 0.95rem;
font-weight: 300;
position: relative;
z-index: 1;
}
/* ── PROGRESS ── */
.progress-wrapper {
background: var(--white);
padding: 1.25rem 2rem;
border-bottom: 1px solid var(--grey-pale);
display: flex;
align-items: center;
gap: 1.25rem;
}
.progress-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--grey);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.progress-bar {
flex: 1;
background: var(--grey-pale);
border-radius: 99px;
height: 6px;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, var(--gold), var(--gold-light));
height: 100%;
border-radius: 99px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-steps {
display: flex;
gap: 6px;
}
.step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--grey-pale);
transition: background 0.3s ease;
}
.step-dot.done {
background: var(--gold);
}
.step-dot.active {
background: var(--gold);
box-shadow: 0 0 0 3px rgba(247, 166, 0, 0.25);
}
/* ── MAIN CONTENT ── */
.main-content {
max-width: 720px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}
/* ── CARD ── */
.card {
background: var(--white);
border-radius: 8px;
box-shadow: 0 2px 16px rgba(17, 17, 77, 0.07);
border: 1px solid var(--grey-pale);
overflow: hidden;
}
.card-inner {
padding: 2.5rem;
}
.step {
display: none;
animation: fadeSlide 0.4s ease-out;
}
.step.active {
display: block;
}
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── STEP HEADER ── */
.step-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.75rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--grey-pale);
}
.step-number {
width: 40px;
height: 40px;
background: var(--gold);
color: var(--penn-blue);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.1rem;
flex-shrink: 0;
}
.step-titles h2 {
font-size: 1.3rem;
font-weight: 900;
color: var(--penn-blue);
line-height: 1.2;
}
.step-titles p {
font-size: 0.9rem;
color: var(--text-mid);
margin-top: 0.2rem;
}
/* ── FORM ELEMENTS ── */
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
label .required {
color: var(--gold);
margin-left: 2px;
}
input[type="email"],
input[type="text"],
input[type="number"] {
width: 100%;
padding: 0.875rem 1.125rem;
border: 2px solid var(--grey-pale);
border-radius: 6px;
font-size: 1rem;
font-family: 'Nunito Sans', sans-serif;
color: var(--text-dark);
transition: all 0.25s ease;
background: var(--white);
}
input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 4px rgba(247, 166, 0, 0.12);
}
.zone-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--gold-pale);
border: 1.5px solid var(--gold);
color: var(--penn-blue);
font-weight: 700;
border-radius: 4px;
font-size: 0.9rem;
margin-top: 0.75rem;
}
.zone-badge::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* ── INFO BOX ── */
.info-box {
background: var(--gold-pale);
border-left: 4px solid var(--gold);
padding: 1.125rem 1.25rem;
border-radius: 0 6px 6px 0;
margin-top: 1.5rem;
}
.info-box p {
font-size: 0.88rem;
color: var(--penn-blue);
line-height: 1.6;
}
.info-box strong {
display: block;
margin-bottom: 0.25rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gold);
}
/* ── POINT SINGULIER CARDS ── */
.point-singulier {
background: var(--off-white);
border: 1.5px solid var(--grey-pale);
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 0.875rem;
transition: border-color 0.25s ease;
}
.point-singulier:hover {
border-color: var(--gold);
}
.point-singulier-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.point-singulier-title {
font-weight: 700;
color: var(--penn-blue);
font-size: 0.95rem;
}
.coef-badge {
background: var(--penn-blue);
color: var(--gold-light);
padding: 0.3rem 0.65rem;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 700;
font-family: 'DM Mono', monospace;
letter-spacing: 0.3px;
}
.point-singulier .form-group {
margin-bottom: 0;
}
/* ── TEMPERATURE SECTION LABEL ── */
.temp-label {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
font-size: 0.85rem;
font-weight: 700;
color: var(--grey);
text-transform: uppercase;
letter-spacing: 1px;
}
.temp-label::before,
.temp-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--grey-pale);
}
/* ── NAVIGATION ── */
.card-footer {
padding: 1.5rem 2.5rem;
background: var(--off-white);
border-top: 1px solid var(--grey-pale);
display: flex;
gap: 1rem;
justify-content: space-between;
}
.btn {
padding: 0.875rem 2rem;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
font-family: 'Nunito Sans', sans-serif;
cursor: pointer;
transition: all 0.25s ease;
text-transform: uppercase;
letter-spacing: 0.75px;
flex: 1;
}
.btn-primary {
background: var(--gold);
color: var(--penn-blue);
box-shadow: 0 4px 16px rgba(247, 166, 0, 0.3);
}
.btn-primary:hover:not(:disabled) {
background: #E89500;
box-shadow: 0 6px 20px rgba(247, 166, 0, 0.4);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--grey);
border: 2px solid var(--grey-pale);
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--grey);
color: var(--text-dark);
}
.btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* ── RESULTS ── */
.resultat-hero {
background: linear-gradient(135deg, var(--penn-blue) 0%, #1a1a6e 100%);
border-radius: 6px 6px 0 0;
padding: 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.resultat-hero::before {
content: '';
position: absolute;
right: -60px;
top: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 50px solid rgba(247, 166, 0, 0.1);
}
.resultat-hero h2 {
color: var(--grey-light);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.montant-total {
font-size: 4rem;
font-weight: 900;
color: var(--gold);
letter-spacing: -2px;
line-height: 1;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.montant-label {
color: var(--grey-light);
font-size: 0.85rem;
position: relative;
z-index: 1;
}
.email-display {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
padding: 0.5rem 1rem;
background: rgba(247, 166, 0, 0.12);
border: 1px solid rgba(247, 166, 0, 0.3);
border-radius: 99px;
font-size: 0.82rem;
color: var(--gold-light);
position: relative;
z-index: 1;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.detail-item {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--grey-pale);
border-right: 1px solid var(--grey-pale);
}
.detail-item:nth-child(even) {
border-right: none;
}
.detail-item:nth-last-child(-n+2) {
border-bottom: none;
}
.detail-item-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-light);
font-weight: 700;
margin-bottom: 0.375rem;
}
.detail-item-value {
font-size: 1.05rem;
font-weight: 700;
color: var(--penn-blue);
font-family: 'DM Mono', monospace;
}
/* ── ERRORS ── */
.error-message {
color: #C62828;
font-size: 0.82rem;
margin-top: 0.45rem;
display: none;
font-weight: 600;
}
.error-message.show {
display: block;
}
.hidden {
display: none;
}
/* ── FOOTER ── */
.site-footer {
text-align: center;
padding: 2rem;
font-size: 0.78rem;
color: var(--text-light);
}
/* ── RESPONSIVE ── */
@media (max-width: 640px) {
.hero-band h1 { font-size: 1.5rem; }
.card-inner { padding: 1.5rem; }
.card-footer { padding: 1.25rem 1.5rem; flex-direction: column-reverse; }
.montant-total { font-size: 3rem; }
.detail-grid { grid-template-columns: 1fr; }
.detail-item:nth-child(even) { border-right: none; }
.detail-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--grey-pale); }
.detail-item:last-child { border-bottom: none; }
}
Certificats d'Économies d'Énergie
Calculateur BAR-TH-161
Isolation de points singuliers d'un réseau hydraulique
💡 Valeur par défaut
Le prix par défaut est de 7 €/MWhc. Vous pouvez l'ajuster selon votre contexte ou la valeur négociée avec votre délégataire.
🔒 Confidentialité
Vos données sont utilisées uniquement pour vous apporter des conseils personnalisés sur votre projet d'économie d'énergie. Notre politique de confidentialité.
✓ Calcul prêt
Votre estimation a été calculée. Renseignez votre email pour la découvrir.
Prime CEE estimée
0 €
Montant indicatif hors taxes
📧
📞 Besoin d'accompagnement ?
Notre équipe vous contactera prochainement pour vous apporter des conseils personnalisés et maximiser votre prime CEE.
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbyUv2jEpaWd5QCjSEDi6cYxbGuY1EGjJ89Q3SagroMA-nNi7yEFAL-5gKhpQ1HoWRi1cQ/exec';
let currentStep = 1;
const totalSteps = 6;
const zoneClimatique = {
'H1': ['01','02','03','05','08','10','14','15','19','21','23','25','27','28','38','39','42','43','45','51','52','54','55','57','58','59','60','61','62','63','67','68','69','70','71','73','74','75','76','77','78','80','87','88','89','90','91','92','93','94','95'],
'H2': ['04','07','09','12','16','17','18','22','24','26','29','31','32','33','35','36','37','40','41','44','46','47','48','49','50','53','56','64','65','72','79','81','82','84','85','86'],
'H3': ['06','11','13','20','30','34','66','83']
};
const coefficients = {
'20-65-50': { H1: 11.7, H2: 10.5, H3: 8.8 },
'65-100-50': { H1: 25.1, H2: 22.7, H3: 18.9 },
'100-50': { H1: 40.9, H2: 37, H3: 30.8 },
'20-65-120': { H1: 12.9, H2: 11.6, H3: 9.7 },
'65-100-120': { H1: 27.8, H2: 25.1, H3: 20.9 },
'100-120': { H1: 45.4, H2: 41, H3: 34.1 }
};
let userData = { email:'', codePostal:'', zone:'H1', prixMWhc:7, points:{} };
document.getElementById('codePostal').addEventListener('input', function(e) {
const cp = e.target.value;
if (cp.length === 5) {
const dept = cp.substring(0,2);
let zone = 'H1';
for (const [z, depts] of Object.entries(zoneClimatique)) {
if (depts.includes(dept)) { zone = z; break; }
}
userData.zone = zone;
document.getElementById('zoneResult').classList.remove('hidden');
document.getElementById('zoneBadge').textContent = `Zone climatique détectée : ${zone}`;
updateCoefficients(zone);
} else {
document.getElementById('zoneResult').classList.add('hidden');
userData.zone = 'H1';
updateCoefficients('H1');
}
});
function updateCoefficients(zone) {
document.getElementById('coef-20-65-50').textContent = `${coefficients['20-65-50'][zone]} kWhc/housse (${zone})`;
document.getElementById('coef-65-100-50').textContent = `${coefficients['65-100-50'][zone]} kWhc/housse (${zone})`;
document.getElementById('coef-100-50').textContent = `${coefficients['100-50'][zone]} kWhc/housse (${zone})`;
document.getElementById('coef-20-65-120').textContent = `${coefficients['20-65-120'][zone]} kWhc/housse (${zone})`;
document.getElementById('coef-65-100-120').textContent = `${coefficients['65-100-120'][zone]} kWhc/housse (${zone})`;
document.getElementById('coef-100-120').textContent = `${coefficients['100-120'][zone]} kWhc/housse (${zone})`;
}
function validateEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function validateStep(step) {
if (step === 1) {
const cp = document.getElementById('codePostal').value;
if (cp.length !== 5 || !/^\d{5}$/.test(cp)) { document.getElementById('codePostalError').classList.add('show'); return false; }
document.getElementById('codePostalError').classList.remove('show');
userData.codePostal = cp;
}
if (step === 2) {
const prix = parseFloat(document.getElementById('prixMWhc').value);
if (isNaN(prix) || prix <= 0) { document.getElementById('prixError').classList.add('show'); return false; }
document.getElementById('prixError').classList.remove('show');
userData.prixMWhc = prix;
}
if (step === 5) {
const email = document.getElementById('userEmail').value;
if (!validateEmail(email)) { document.getElementById('emailError').classList.add('show'); return false; }
document.getElementById('emailError').classList.remove('show');
userData.email = email;
}
return true;
}
function nextStep() {
if (!validateStep(currentStep)) return;
if (currentStep === 4) { calculateResults(); }
if (currentStep === 5) { sendToGoogleSheets(); }
document.getElementById(`step${currentStep}`).classList.remove('active');
currentStep++;
document.getElementById(`step${currentStep}`).classList.add('active');
updateProgress();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function prevStep() {
document.getElementById(`step${currentStep}`).classList.remove('active');
currentStep--;
document.getElementById(`step${currentStep}`).classList.add('active');
updateProgress();
}
function updateProgress() {
const pct = (currentStep / totalSteps) * 100;
document.getElementById('progressFill').style.width = `${pct}%`;
document.getElementById('progressText').textContent = `Étape ${currentStep} / ${totalSteps}`;
// Dots
const dots = document.querySelectorAll('.step-dot');
dots.forEach((d, i) => {
d.className = 'step-dot';
if (i < currentStep - 1) d.classList.add('done');
else if (i === currentStep - 1) d.classList.add('active');
});
// Buttons
document.getElementById('btnPrev').disabled = (currentStep === 1);
const btnNext = document.getElementById('btnNext');
if (currentStep === totalSteps) {
btnNext.textContent = '↩ Nouveau calcul';
btnNext.onclick = restartCalculator;
} else if (currentStep === 5) {
btnNext.textContent = 'Voir mon résultat →';
btnNext.onclick = nextStep;
} else if (currentStep === 4) {
btnNext.textContent = 'Suivant →';
btnNext.onclick = nextStep;
} else {
btnNext.textContent = 'Suivant →';
btnNext.onclick = nextStep;
}
if (currentStep === totalSteps) {
document.getElementById('btnPrev').style.display = 'none';
} else {
document.getElementById('btnPrev').style.display = '';
}
}
function calculateResults() {
userData.points = {
'20-65-50': parseInt(document.getElementById('nbr-20-65-50').value) || 0,
'65-100-50': parseInt(document.getElementById('nbr-65-100-50').value) || 0,
'100-50': parseInt(document.getElementById('nbr-100-50').value) || 0,
'20-65-120': parseInt(document.getElementById('nbr-20-65-120').value) || 0,
'65-100-120': parseInt(document.getElementById('nbr-65-100-120').value) || 0,
'100-120': parseInt(document.getElementById('nbr-100-120').value) || 0
};
let totalKWhcumac = 0, totalPoints = 0;
for (const [type, nombre] of Object.entries(userData.points)) {
totalKWhcumac += nombre * coefficients[type][userData.zone];
totalPoints += nombre;
}
const montantTotal = (totalKWhcumac * userData.prixMWhc).toFixed(2);
document.getElementById('emailDisplay').textContent = userData.email;
document.getElementById('montantTotal').textContent = `${parseFloat(montantTotal).toLocaleString('fr-FR')} €`;
document.getElementById('totalKWh').textContent = `${totalKWhcumac.toFixed(1)} kWhcumac`;
document.getElementById('totalPoints').textContent = totalPoints;
document.getElementById('zoneClimatique').textContent = userData.zone;
document.getElementById('prixUtilise').textContent = `${userData.prixMWhc} €/MWhc`;
userData.totalKWhcumac = totalKWhcumac;
userData.montantTotal = montantTotal;
userData.totalPoints = totalPoints;
}
async function sendToGoogleSheets() {
try {
await fetch(GOOGLE_SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: userData.email,
codePostal: userData.codePostal,
zone: userData.zone,
prixMWhc: userData.prixMWhc,
points_20_65_50: userData.points['20-65-50'],
points_65_100_50: userData.points['65-100-50'],
points_100_50: userData.points['100-50'],
points_20_65_120: userData.points['20-65-120'],
points_65_100_120: userData.points['65-100-120'],
points_100_120: userData.points['100-120'],
totalPoints: userData.totalPoints,
totalKWhcumac: userData.totalKWhcumac,
montantTotal: userData.montantTotal,
timestamp: new Date().toISOString()
})
});
} catch(e) { console.error('Erreur envoi:', e); }
}
function restartCalculator() {
currentStep = 1;
userData = { email:'', codePostal:'', zone:'H1', prixMWhc:7, points:{} };
['userEmail','codePostal'].forEach(id => document.getElementById(id).value = '');
document.getElementById('prixMWhc').value = '7';
['nbr-20-65-50','nbr-65-100-50','nbr-100-50','nbr-20-65-120','nbr-65-100-120','nbr-100-120']
.forEach(id => document.getElementById(id).value = '0');
document.getElementById('zoneResult').classList.add('hidden');
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
document.getElementById('step1').classList.add('active');
updateProgress();
document.getElementById('btnPrev').style.display = '';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
updateCoefficients('H1');
