/* ===== DEVsmart - Styles globaux ===== */
:root{
  --ds-blue:#1877CC;
  --ds-blue-dark:#0f5aa0;
  --ds-red:#E8121A;
  --ds-red-dark:#c40d14;
  --ds-white:#ffffff;
  --ds-ink:#111827;
  --ds-gray:#6b7280;
  --ds-bg:#f4f6fb;
}

*{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ds-ink);background:var(--ds-bg);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--ds-blue);border-radius:8px;}
::-webkit-scrollbar-track{background:#e5e7eb;}

/* Gradient util */
.ds-gradient{background:linear-gradient(115deg,var(--ds-blue) 0%,var(--ds-blue) 48%,var(--ds-red) 52%,var(--ds-red) 100%);}
.text-ds-blue{color:var(--ds-blue);}
.text-ds-red{color:var(--ds-red);}
.bg-ds-blue{background:var(--ds-blue);}
.bg-ds-red{background:var(--ds-red);}
.border-ds-blue{border-color:var(--ds-blue);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;border-radius:.75rem;padding:.7rem 1.4rem;transition:.25s;cursor:pointer;border:none;}
.btn-blue{background:var(--ds-blue);color:#fff;}
.btn-blue:hover{background:var(--ds-blue-dark);transform:translateY(-2px);box-shadow:0 10px 20px -8px var(--ds-blue);}
.btn-red{background:var(--ds-red);color:#fff;}
.btn-red:hover{background:var(--ds-red-dark);transform:translateY(-2px);box-shadow:0 10px 20px -8px var(--ds-red);}
.btn-outline{background:transparent;border:2px solid var(--ds-blue);color:var(--ds-blue);}
.btn-outline:hover{background:var(--ds-blue);color:#fff;}

/* Card hover */
.product-card{transition:transform .3s,box-shadow .3s;}
.product-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px -18px rgba(24,119,204,.45);}

/* Hero animated blobs */
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 8s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.08);}}

/* Badge */
.badge{position:absolute;top:10px;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;color:#fff;z-index:5;}
.badge-new{left:10px;background:var(--ds-blue);}
.badge-promo{right:10px;background:var(--ds-red);}

/* Zoom image */
.zoom-wrap{overflow:hidden;}
.zoom-wrap img{transition:transform .4s;}
.zoom-wrap:hover img{transform:scale(1.25);}

/* Fade in on scroll */
[data-aos]{will-change:transform,opacity;}

/* Cart drawer */
.drawer{transition:transform .35s ease;}
.drawer.closed{transform:translateX(100%);}

/* Line clamp */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Placeholder image */
.img-ph{background:linear-gradient(135deg,#e5edf7,#f7e5e6);display:flex;align-items:center;justify-content:center;color:var(--ds-blue);}

/* Loader */
.spinner{width:38px;height:38px;border:4px solid #d1d5db;border-top-color:var(--ds-blue);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Mobile menu */
.mobile-menu{transition:transform .3s;}

/* Nav link */
.nav-link{position:relative;font-weight:500;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--ds-red);transition:width .25s;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}