html::-webkit-scrollbar { display: none; } body::-webkit-scrollbar { display: none; } html { scrollbar-width: none; scroll-behavior: smooth; } body { background-color: lch(89.63% 2.16 19.28); margin: 0; overflow-x: hidden; scrollbar-width: none; scroll-behavior: smooth; } header { display: flex; justify-content: center; align-items: center; padding-top: 20px; position: relative; } .logo { width: 500px; } .papier { position: absolute; top: 260px; left: -120px; width: calc(100vw + 240px); max-width: none; z-index: -1; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); } /* ===================== */ /* CARTES DU BAS */ /* ===================== */ .menu-cards { position: absolute; top: 450px; left: 50%; transform: translateX(-50%); width: 100%; display: flex; justify-content: center; gap: 120px; z-index: 2; } .menu-btn { width: 500px; transition: 0.25s ease; cursor: pointer; } .menu-btn img { width: 100%; display: block; } .menu-btn:hover { transform: scale(1.08) translateY(-10px); filter: drop-shadow(0 0 15px rgba(0,0,0,0.35)); } /* ===================== */ /* ONGLETS DU HAUT */ /* ===================== */ .user-menu { position: absolute; top: 20px; right: 40px; display: flex; gap: 10px; } .user-btn { width: 160px; height: 80px; background-image: url("poudepapier.png"); /* MODIFICATION ICI : On utilise "cover" pour forcer la très grande image à s'adapter au petit bouton */ background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; justify-content: center; align-items: center; text-decoration: none; color: black; font-family: Impact, sans-serif; font-size: 18px; font-weight: bold; transition: 0.25s ease; } .user-btn:hover { transform: scale(1.08) translateY(-5px); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3)); }