/* * TLSHOP — Header Desktop Custom * Sticky, blur, 3 colonnes, responsive * Upload dans : hello-elementor-child/tlshop-header.css */ /* 
===================================================== MASQUE LE HEADER ELEMENTOR — remplacé par le nôtre ===================================================== */
.elementor-element-4ee84bb, [data-id="4ee84bb"] { display: none !important; } 
/* ===================================================== HEADER PRINCIPAL ===================================================== */
#tlshop-header { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); width: calc(100% - 100px); min-width: 1100px; z-index: 9999; background: rgba(0,0,0,1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08); border-radius: 50px; padding: 0 30px; height: 80px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; transition: top 1.5s ease, background 1.5s ease, width 1.5s ease; } 
/* Scrollé — se colle un peu plus haut */
#tlshop-header.scrolled { background: rgba(0,0,0,0.5); width: calc(70% - 70px); transition: top 1.5s ease, background 1.5s ease, width 1.5s ease; } /* ===================================================== COL 1 — LOGO (aligné à gauche) ===================================================== */
#tlshop-header .th-logo { display: flex; align-items: center; justify-content: flex-start; text-decoration: none; flex-shrink: 0; } #tlshop-header .th-logo img { height: 45px; width: auto; object-fit: contain; transition: height .2s ease; } /* ===================================================== COL 2 — NAVIGATION (centrée) ===================================================== */ #tlshop-header .th-nav { display: flex; align-items: center; justify-content: center; gap: 6px; } #tlshop-header .th-nav a { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; padding: 8px 30px; border-radius: 30px; transition: color .45s, background .45s; white-space: nowrap; } #tlshop-header .th-nav a:hover { color: #ffffff; background: rgba(255,255,255,0.08); } #tlshop-header .th-nav a.active { color: #00C0FF; background: rgba(0,192,255,0.1); } /* ===================================================== COL 3 — ACTIONS (alignées à droite) ===================================================== */
#tlshop-header .th-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } #tlshop-header .th-icon-btn { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; border-radius: 50%; transition: color .45s, background .45s; text-decoration: none; position: relative; } #tlshop-header .th-icon-btn:hover { color: #ffffff; background: rgba(255,255,255,0.08); } #tlshop-header .th-icon-btn svg { width: 24px; height: 24px; flex-shrink: 0; } /* Badge panier */ #tlshop-header .th-cart-count { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: #00C0FF; color: #000; border-radius: 50%; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; line-height: 1; } #tlshop-header .th-cart-count[data-count="0"] { display: none; }
/* ===================================================== COMPENSATION POUR LE CONTENU SOUS LE HEADER ===================================================== */
body.tlshop-header-active { padding-top: 100px !important; } 
/* ===================================================== RESPONSIVE — réduit logo et nav entre 900px et 1400px ===================================================== */
@media (max-width: 1400px) and (min-width: 901px) { #tlshop-header { top: 12px; width: calc(100% - 32px); min-width: 800px; padding: 0 20px; height: 65px; } 
/* Scrollé — se colle un peu plus haut */
#tlshop-header.scrolled { background: rgba(0,0,0,0.5); width: calc(70% - 32px); } #tlshop-header .th-logo img { height: 32px; } #tlshop-header .th-nav a { font-size: 16px; padding: 6px 10px; letter-spacing: 0.08em; } #tlshop-header .th-icon-btn { width: 36px; height: 36px; } #tlshop-header .th-icon-btn svg { width: 20px; height: 20px; } } 
/* ===================================================== RESPONSIVE — réduit logo et nav entre 480px et 900px ===================================================== */
@media (max-width: 900px) and (min-width: 481px) { #tlshop-header { top: 12px; width: calc(100% - 32px); min-width: 400px; padding: 0 20px; height: 65px; } 
/* Scrollé — se colle un peu plus haut */
#tlshop-header.scrolled { background: rgba(0,0,0,0.5); width: calc(70% - 32px); } #tlshop-header .th-logo img { height: 32px; padding-right: 35px; } #tlshop-header .th-nav a { font-size: 14px; padding: 6px 10px; letter-spacing: 0.08em; } #tlshop-header .th-icon-btn { width: 36px; height: 36px; } #tlshop-header .th-icon-btn svg { width: 20px; height: 20px; } } 
/* Cache sur mobile — le header mobile prend le relais */
@media (max-width: 480px) { #tlshop-header { display: none !important; } body.tlshop-header-active { padding-top: 0 !important; } }