/* =========================
COULEURS (à remplacer par celles du site Electricom)
Astuce: change seulement ces 6 variables
========================= */
:root{
–brand: #0B5ED7; /* couleur principale (boutons/links) */
–brand-dark:#084298; /* hover */
–accent:#FFC107; /* petite touche (badges) */
–text:#111827; /* texte */
–muted:#6B7280; /* texte secondaire */
–bg:#FFFFFF; /* fond */
–panel:#F3F4F6; /* sections gris clair */
–line:#E5E7EB; /* bordures */
–ok:#16A34A;
–radius:14px;
–max:1180px;
}

*{box-sizing:border-box}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color:var(–text);
background:var(–bg);
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(–max); margin:0 auto; padding:0 18px}
.topbar{
position:sticky; top:0; z-index:50;
background:#fff;
border-bottom:1px solid var(–line);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
gap:14px; padding:14px 0;
}
.brand{display:flex; gap:10px; align-items:center}
.logo{
width:38px; height:38px; border-radius:10px;
background:var(–brand);
display:grid; place-items:center;
color:#fff; font-weight:800;
letter-spacing:.5px;
}
.brandText strong{display:block; line-height:1.1}
.brandText span{display:block; font-size:12px; color:var(–muted)}
.navLinks{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.link{font-size:14px; color:var(–muted)}
.link:hover{color:var(–text)}
.btn{
border:1px solid var(–line);
background:#fff;
padding:10px 12px;
border-radius:999px;
cursor:pointer;
font-weight:650;
font-size:14px;
}
.btnPrimary{
background:var(–brand);
color:#fff;
border-color:var(–brand);
}
.btnPrimary:hover{background:var(–brand-dark); border-color:var(–brand-dark)}
.badge{
display:inline-flex; align-items:center; gap:8px;
font-size:12px; color:var(–muted);
border:1px solid var(–line);
padding:7px 10px; border-radius:999px;
background:#fff;
}
.dot{width:8px; height:8px; border-radius:99px; background:var(–ok)}
.search{
width: min(520px, 100%);
border:1px solid var(–line);
border-radius:999px;
padding:10px 12px;
outline:none;
}

/* HERO */
.hero{padding:28px 0 10px}
.heroGrid{
display:grid; grid-template-columns: 1.25fr .75fr; gap:18px;
align-items:stretch;
}
.card{
border:1px solid var(–line);
border-radius:var(–radius);
background:#fff;
padding:16px;
}
.heroCard{padding:20px}
h1{margin:10px 0 10px; font-size:34px; line-height:1.1}
.sub{margin:0 0 14px; color:var(–muted); max-width:62ch}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.miniList{display:grid; gap:12px}
.mini{
background:var(–panel);
border:1px solid var(–line);
border-radius:var(–radius);
padding:14px;
}
.mini h3{margin:0 0 6px; font-size:14px}
.mini p{margin:0; color:var(–muted); font-size:13px; line-height:1.45}

/* SECTIONS */
.section{padding:18px 0}
.sectionHead{
display:flex; align-items:end; justify-content:space-between;
gap:14px; margin-bottom:10px;
}
.sectionHead h2{margin:0; font-size:18px}
.sectionHead p{margin:0; color:var(–muted); font-size:13px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
border:1px solid var(–line);
background:#fff;
padding:8px 10px;
border-radius:999px;
cursor:pointer;
font-size:13px;
color:var(–muted);
}
.chip.active{
border-color:rgba(11,94,215,.35);
background:rgba(11,94,215,.07);
color:var(–text);
}

.grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:12px;
}
.product{
border:1px solid var(–line);
border-radius:var(–radius);
background:#fff;
overflow:hidden;
display:flex;
flex-direction:column;
min-height: 250px;
}
.thumb{
height:120px;
background:var(–panel);
border-bottom:1px solid var(–line);
display:flex;
align-items:center;
justify-content:center;
color:var(–muted);
font-size:12px;
}
.pBody{padding:12px; display:flex; flex-direction:column; gap:8px; flex:1}
.meta{display:flex; justify-content:space-between; align-items:center; gap:10px}
.tag{
font-size:11px;
padding:5px 8px;
border-radius:999px;
background:rgba(255,193,7,.18);
color:#7a5b00;
border:1px solid rgba(255,193,7,.35);
}
.price{font-weight:800}
.title{margin:0; font-size:14px}
.desc{margin:0; color:var(–muted); font-size:12.5px; line-height:1.35}
.pActions{margin-top:auto; display:flex; gap:8px}
.btnSmall{
width:100%;
padding:10px 10px;
border-radius:12px;
border:1px solid var(–line);
background:#fff;
cursor:pointer;
font-weight:700;
font-size:13px;
}
.btnAdd{
border-color:rgba(11,94,215,.35);
background:rgba(11,94,215,.08);
color:var(–text);
}
.btnAdd:hover{background:rgba(11,94,215,.12)}

/* TRUST BAR */
.trustRow{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:10px;
margin-top:12px;
}
.trust{
border:1px solid var(–line);
background:#fff;
border-radius:var(–radius);
padding:12px;
color:var(–muted);
font-size:13px;
}

/* FOOTER */
footer{
margin-top:14px;
padding:22px 0 34px;
border-top:1px solid var(–line);
background:#fff;
}
.foot{
display:grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap:16px;
}
.foot h4{margin:0 0 10px; font-size:14px}
.foot a{display:block; padding:6px 0; color:var(–muted); font-size:13px}
.copy{margin-top:10px; color:var(–muted); font-size:12px}

/* CART DRAWER */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:80}
.overlay.show{display:block}
.drawer{
position:fixed; top:0; right:-420px; height:100vh; width:420px;
background:#fff;
border-left:1px solid var(–line);
z-index:90;
transition:right .2s ease;
display:flex; flex-direction:column;
}
.drawer.open{right:0}
.dHead{display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(–line)}
.dBody{padding:12px 14px; overflow:auto; flex:1}
.item{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(–line)}
.item small{color:var(–muted)}
.qty{display:flex; align-items:center; gap:8px}
.qty button{
width:28px; height:28px; border-radius:10px;
border:1px solid var(–line); background:#fff; cursor:pointer;
font-weight:800;
}
.dFoot{padding:12px 14px; border-top:1px solid var(–line)}
.tot{display:flex; justify-content:space-between; margin-bottom:10px}
.checkout{
width:100%;
border-radius:12px;
padding:12px 12px;
border:1px solid var(–brand);
background:var(–brand);
color:#fff;
font-weight:900;
cursor:pointer;
}
.checkout:hover{background:var(–brand-dark); border-color:var(–brand-dark)}

/* RESPONSIVE */
@media (max-width: 980px){
.heroGrid{grid-template-columns: 1fr}
.grid{grid-template-columns: repeat(2, 1fr)}
.foot{grid-template-columns: 1fr 1fr}
.search{display:none}
}
@media (max-width: 520px){
.grid{grid-template-columns: 1fr}
.drawer{width:100%; right:-100%}
h1{font-size:28px}
}

const PRODUCTS = [
{id:1, name:”Onduleur / UPS 1500VA”, cat:”Énergie”, price:249, tag:”Best-seller”, desc:”Protection électrique pour bureau et pro.”},
{id:2, name:”Stabilisateur de tension”, cat:”Énergie”, price:89, tag:”Pro”, desc:”Stabilise l’alimentation des équipements.”},
{id:3, name:”Routeur Dual-Band”, cat:”Réseau”, price:129, tag:”Nouveau”, desc:”Couverture optimisée, idéal PME.”},
{id:4, name:”Switch 24 ports Gigabit”, cat:”Réseau”, price:159, tag:”Pro”, desc:”Réseau fiable pour environnements pro.”},
{id:5, name:”Câble Ethernet Cat6 (50m)”, cat:”Câblage”, price:49, tag:”Stock”, desc:”Installation rapide, performance stable.”},
{id:6, name:”Rack mural 9U”, cat:”Câblage”, price:119, tag:”Pro”, desc:”Organisation réseau et sécurité.”},
{id:7, name:”Kit caméra IP (x4) + NVR”, cat:”Sécurité”, price:299, tag:”Pack”, desc:”Surveillance simple, accès à distance.”},
{id:8, name:”Contrôle d’accès (kit)”, cat:”Sécurité”, price:199, tag:”B2B”, desc:”Accès sécurisé pour bureaux et sites.”},
{id:9, name:”Panneau solaire 450W”, cat:”Solaire”, price:145, tag:”Nouveau”, desc:”Solution énergie (selon stock et marque).”},
{id:10, name:”Contrôleur MPPT”, cat:”Solaire”, price:119, tag:”Pro”, desc:”Optimise la production solaire.”},
{id:11, name:”Imprimante multifonction”, cat:”Informatique”, price:189, tag:”Pro”, desc:”Impression, scan, copie — PME.”},
{id:12, name:”Laptop pro 14” (exemple)”, cat:”Informatique”, price:699, tag:”Top”, desc:”Placeholder modèle pro.”},
];

const state = { filter:”Tous”, q:””, cart:new Map() };
const grid = document.getElementById(“grid”);
const chips = document.getElementById(“chips”);
const search = document.getElementById(“search”);
const cartBtn = document.getElementById(“cartBtn”);
const drawer = document.getElementById(“drawer”);
const overlay = document.getElementById(“overlay”);
const cartItems = document.getElementById(“cartItems”);
const cartCount = document.getElementById(“cartCount”);
const cartTotal = document.getElementById(“cartTotal”);
document.getElementById(“year”).textContent = new Date().getFullYear();

function scrollToContact(){ document.getElementById(“contact”).scrollIntoView({behavior:”smooth”}); }
function money(n){ return “$” + n.toLocaleString(“en-US”); }
function categories(){ return [“Tous”, …Array.from(new Set(PRODUCTS.map(p=>p.cat)))]; }

function renderChips(){
chips.innerHTML=””;
categories().forEach(cat=>{
const b=document.createElement(“button”);
b.className=”chip”+(state.filter===cat?” active”:””);
b.textContent=cat;
b.onclick=()=>{state.filter=cat; renderGrid(); renderChips();};
chips.appendChild(b);
});
}

function filtered(){
return PRODUCTS.filter(p=>{
const okF = state.filter===”Tous” || p.cat===state.filter;
const okQ = !state.q || (p.name+” “+p.cat+” “+p.desc).toLowerCase().includes(state.q.toLowerCase());
return okF && okQ;
});
}

function renderGrid(){
grid.innerHTML=””;
filtered().forEach(p=>{
const el=document.createElement(“div”);
el.className=”product”;
el.innerHTML=`

`;
el.querySelector(“.btnAdd”).onclick=()=>addToCart(p.id);
el.querySelectorAll(“.btnSmall”)[1].onclick=()=>alert(“Démo fiche produit :\n\n”+p.name+”\n”+p.desc+”\nPrix : “+money(p.price));
grid.appendChild(el);
});
}

function addToCart(id){
const qty = state.cart.get(id) || 0;
state.cart.set(id, qty+1);
updateCartUI();
openCart();
}

function setQty(id, qty){
if(qtyx.id===id);
count+=qty; total+=p.price*qty;
}
return {count,total};
}

function updateCartUI(){
const {count,total}=cartSummary();
cartCount.textContent=count;
cartTotal.textContent=money(total);

cartItems.innerHTML=””;
if(count===0){
cartItems.innerHTML=`

Votre panier est vide.

`;
return;
}

for(const [id,qty] of state.cart.entries()){
const p=PRODUCTS.find(x=>x.id===id);
const row=document.createElement(“div”);
row.className=”item”;
row.innerHTML=`

`;
const [minus,plus]=row.querySelectorAll(“button”);
minus.onclick=()=>setQty(id, qty-1);
plus.onclick=()=>setQty(id, qty+1);
cartItems.appendChild(row);
}
}

function openCart(){ drawer.classList.add(“open”); overlay.classList.add(“show”); }
function closeCart(){ drawer.classList.remove(“open”); overlay.classList.remove(“show”); }
cartBtn.addEventListener(“click”, openCart);

if(search){
search.addEventListener(“input”, (e)=>{ state.q=e.target.value; renderGrid(); });
}

renderChips();
renderGrid();
updateCartUI();