/* ============================================================ YOU1S — Refonte design (inspiration The Last Step) Typographie plus fine, hero XXL, menu mobile épuré, espacements premium. Chargée EN DERNIER → surcharge propre. ============================================================ */ /* ── 1. TYPOGRAPHIE PLUS FINE & ÉLÉGANTE ───────────────────── Les titres étaient en 800/900 (trop épais). On descend en 600/500 pour un rendu premium et aéré, sans perdre en lisibilité. */ .header__logo { font-weight: 800; letter-spacing: 0.01em; } /* Logo officiel (image) — remplace le texte quand un logo existe */ .brand-logo-img { height: 34px; width: auto; display: block; object-fit: contain; } .brand-logo-img--footer { height: 28px; } /* Footer sombre : logo noir → blanc */ .brand-logo-img--invert { filter: invert(1); } .brand-logo-img--drawer { height: 60px; margin: 0 auto; } @media (min-width: 768px) { .header__logo .brand-logo-img { height: 44px; } } /* ── Header desktop épuré façon The Last Step ───────────────── Logo YOU1S gros tout à gauche · catégories fines & espacées · icônes à droite. Nav = DM Sans 15px regular, Title Case, hairline. */ @media (min-width: 768px) { :root { --header-h: 85px; } .header { box-sizing: border-box; height: 85.14px; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .header__top { height: 100%; box-sizing: border-box; justify-content: flex-start; /* logo tout à gauche */ padding: 0 var(--page-px); } .header__logo { font-size: 32px; letter-spacing: 0.005em; } /* Catégories espacées sur toute la largeur, parfaitement centrées */ .header__nav-row { display: flex !important; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; height: auto; margin: 0; padding: 0; gap: 46px; } } /* Nav catégories — DM Sans fin & épuré (rendu identique à The Last Step) : regular (pas de gras), Title Case, soulignement animé au survol. */ .header__nav-link { font-family: 'Chivo', Arial, sans-serif !important; font-weight: 600 !important; font-size: 17px !important; letter-spacing: -0.02em !important; text-transform: none !important; color: #0a0a0a !important; position: relative; } .header__nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #0a0a0a; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(.22, 1, .36, 1); } .header__nav-link:hover::after { transform: scaleX(1); } /* !important : ces éléments sont stylés en