/* Thème vitrine Digitec Dérouet — recopie de l'identité digitec-derouet.com
   (police Overpass, accent rouge #ba0909, header/footer sombres). Chargé après le
   <style> inline du layout, donc prioritaire. N'affecte que la vitrine Dérouet. */
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

body{font-family:'Overpass',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.logo .txt{font-family:'Overpass',sans-serif;letter-spacing:-.2px}

/* Accent rouge Dérouet sur les éléments clés */
.price,.product-price,.price-num,.p-price,.amount{color:#ba0909}
.btn-primary,button.add,.add-to-cart,.btn-add,.cta,.cta-banner .btn{background:#ba0909 !important;border-color:#ba0909 !important;color:#fff !important}
.btn-primary:hover,button.add:hover,.add-to-cart:hover,.cta:hover{background:#9d0808 !important}
a:hover{color:#ba0909}

/* Header : logo plus présent, fine barre rouge sous le header */
header.site{border-bottom:2px solid #ba0909}
header.site .logo img{height:34px}

/* Footer sombre façon Derouet */
footer.site{background:#111111;color:#c9c9c9;border-top:3px solid #ba0909}
footer.site h4{color:#fff}
footer.site a{color:#e6e6e6}
footer.site a:hover{color:#ba0909}
footer.site .legal{border-top-color:rgba(255,255,255,.12)}
footer.site .soc a{background:#ba0909}

/* Bandeau CTA à la couleur de la marque */
.cta-banner,.cta_banner{background:#111111}

/* ── Header noir (barre du haut) ───────────────────────────────────────── */
header.site{background:#000;border-bottom:2px solid #ba0909;box-shadow:0 1px 4px rgba(0,0,0,.45)}
header.site .logo .txt{color:#fff}
header.site .hnav-link{color:#fff}
header.site .hnav-link:hover{background:rgba(255,255,255,.12);color:#fff}
header.site .head-tel{color:#fff}
header.site .head-tel:hover{background:rgba(255,255,255,.12)}
header.site .cart-link{color:#fff}
header.site .cart-link:hover{background:rgba(255,255,255,.14);color:#fff}
header.site .cart-badge{background:#ba0909;color:#fff}
header.site .nav-burger{color:#fff}
/* champ de recherche adapté au header noir */
header.site .hsearch input{background:#1c1c1c;border-color:#3a3a3a;color:#fff}
header.site .hsearch input:focus{background:#262626;border-color:#ba0909}
header.site .hsearch input::placeholder{color:#9ca3af}
header.site .hsearch svg{color:#9ca3af}

/* Mobile : pousser tel/panier/menu tout à droite (le ressort nav.main flex:1 est masqué) */
header.site .head-actions{margin-left:auto}

/* ── Hero / carrousel : lisibilité texte + CTA ────────────────────────── */
.vs-hero .vs-hero-slide{position:relative}
.vs-hero .vs-hero-slide::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.22) 66%,rgba(0,0,0,0) 100%)}
.vs-hero.vs-align-center .vs-hero-slide::before{
  background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.58))}
.vs-hero .vs-hero-inner{position:relative;z-index:2}
.vs-hero h1{font-weight:800;letter-spacing:-.6px;text-shadow:0 2px 20px rgba(0,0,0,.65)}
.vs-hero .vs-sub{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6);max-width:560px}
/* CTA rouge, bien détaché */
.vs-hero .btn{background:#ba0909;color:#fff;border:0;font-weight:700;font-size:16px;
  padding:15px 34px;border-radius:8px;box-shadow:0 8px 20px rgba(186,9,9,.42)}
.vs-hero .btn:hover{background:#9d0808;filter:none;transform:translateY(-1px)}
/* puces du carrousel */
.vs-hero .vs-dot{border-color:rgba(255,255,255,.9)}
.vs-hero .vs-dot.is-active{background:#ba0909;border-color:#ba0909}