#l{
  margin-left:120px;   /* ↑ adjust distance */
  border-radius: 50%;
  aspect-ratio: 1 / 1;   /* keeps it round even if the source file isn't square */
  object-fit: cover;
}
#m{
    margin-right:120px;   /* ↑ adjust distance */
    border-radius: 50%;
  aspect-ratio: 1 / 1;   /* keeps it round even if the source file isn't square */
  object-fit: cover;
}

/* =====  IMPORT  ===== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;600;900&display=swap');

/* =====  ROOT  ===== */
:root{
  --bg:#0d1117;
  --panel:#161b22;
  --border:#30363d;
  --cyan:#22d3ee;
  --purple:#a78bfa;
  --shadow:0 0 12px var(--cyan), 0 0 20px rgba(34,211,238,.35);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Exo 2',sans-serif;
}

body{
  background:var(--bg);
  color:#e6edf3;
  min-height:100vh;
}

/* =====  HEADER  ===== */
header.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
header .logo img{height:50px;transition:transform .3s;}
header .logo:hover img{transform:scale(1.1) rotate(-3deg);}
header h1{
  font-size:1.7rem;
  font-weight:900;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.social a img{height:30px;margin-left:12px;filter:drop-shadow(0 0 4px var(--cyan));transition:.2s;}
.social a:hover img{filter:drop-shadow(0 0 10px var(--purple));}

/* =====  MAIN  ===== */
main{padding:40px;}
.grid,.list{
  display:grid;
  gap:30px;
}
.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}

/* =====  CARD  ===== */
.card,.item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:25px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .3s,box-shadow .3s;
}
.card:hover,.item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

/* =====  PRODUCT IMAGE  ===== */
.prod-img{
  width:100%;
  height:160px;
  object-fit:contain;
  margin:0 auto 15px;
  filter:drop-shadow(0 0 6px var(--cyan));
}

/* =====  BUTTON  ===== */
.btn{
  display:inline-block;
  margin-top:15px;
  padding:10px 24px;
  background:linear-gradient(45deg,var(--cyan),var(--purple));
  color:#000;
  font-weight:600;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:filter .2s;
}
.btn:hover{filter:brightness(1.15);}
.btn:active{transform:scale(.98);}

/* =====  PRICE  ===== */
.price{font-size:1.3rem;font-weight:600;color:var(--cyan);margin:8px 0;text-shadow:0 0 4px var(--cyan);}

/* =====  INPUT  ===== */
input[type=number]{
  width:70px;
  padding:6px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--cyan);
  font-weight:600;
}

/* =====  FOOTER  ===== */
footer{
  text-align:center;
  padding:25px;
  font-size:.85rem;
  color:#8b949e;
  background:var(--panel);
  border-top:1px solid var(--border);
}
/* ----  CART ICON  ---- */
.cart-icon{
  position:fixed;top:20px;right:30px;z-index:200;
  background:#161b22;border:1px solid #30363d;border-radius:8px;
  padding:8px 14px;font-size:1.2rem;cursor:pointer;
  color:#22d3ee;box-shadow:0 0 10px #22d3ee;
}
.cart-icon span{background:#22d3ee;color:#000;font-size:.75rem;font-weight:700;padding:2px 6px;border-radius:50%;margin-left:6px;}

/* ----  PANEL  ---- */
.cart-panel{
  position:fixed;right:-400px;top:0;height:100%;width:360px;
  background:#0d1117;border-left:1px solid #30363d;
  box-shadow:-8px 0 24px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
  transition:right .35s;z-index:300;
}
.cart-panel.open{right:0;}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid #30363d;color:#22d3ee;}
.cart-header button{background:none;border:none;color:#22d3ee;font-size:1.2rem;cursor:pointer;}
.cart-list{flex:1;padding:18px;overflow:auto;}
.cart-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 0;border-bottom:1px solid #161b22;}
.cart-item button{background:none;border:none;color:#ff4d4d;cursor:pointer;}
.cart-footer{padding:18px;border-top:1px solid #30363d;text-align:center;}
.cart-footer .btn{width:100%;}
.cart-panel.empty .cart-list{display:grid;place-items:center;height:100%;color:#8b949e;}
.cart-panel.empty .cart-list::after{content:"Panier vide";}
.cart-icon .added{color:#22d3ee;margin-left:6px;font-size:.9rem;animation:fade .9s forwards;}
@keyframes fade{0%{opacity:1}100%{opacity:0}}
.item.out{opacity:.55;position:relative;}
.badge{display:inline-block;margin-top:10px;padding:4px 10px;background:#ff4d4f;color:#fff;font-size:.75rem;border-radius:4px;}
/* =====  BACK BUTTON  ===== */
.back-btn{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  padding:10px 20px;
  background:linear-gradient(45deg,#22d3ee,#a78bfa);
  color:#000;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  transition:filter .2s;
}
.back-btn:hover{filter:brightness(1.2);}