body{ background-attachment: fixed; } /* Composants "verre" génériques (réutilisables) */ .glass{ background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--glass-border); border-radius: var(--radius); } .glow{ position: relative; } .glow::before{ content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: calc(var(--radius) + 1px); background: linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; } /* === Bouton Retour === */ .btn-back{ --h: 46px; display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0 16px 0 14px; cursor: pointer; border: none; outline: none; position: relative; overflow: hidden; isolation: isolate; transition: transform .12s ease, box-shadow .2s ease, background-color .25s ease; } /* Halo animé doux au survol */ .btn-back__bg{ position: absolute; inset: -40%; background: radial-gradient(120px 120px at 10% 50%, rgba(39,240,208,.28), transparent 60%), radial-gradient(160px 160px at 80% 50%, rgba(159,255,227,.22), transparent 60%); transform: scale(0.9); opacity: .6; transition: transform .35s ease, opacity .35s ease; z-index: -1; } /* Icône + label */ .btn-back__icon{ display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, rgba(39,240,208,.18), rgba(0,191,166,.10)); border: 1px solid rgba(159,255,227,.35); transition: transform .2s ease; } .btn-back__label{ font-weight: 700; letter-spacing: .2px; } /* Interactions */ .btn-back:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.25); } .btn-back:hover .btn-back__bg{ transform: scale(1); opacity: .9; } .btn-back:active{ transform: translateY(0); } .btn-back:focus-visible{ outline: 2px solid #27F0D0; outline-offset: 3px; border-radius: calc(var(--radius) + 2px); } /* Animation “retour” subtile de l’icône au hover */ .btn-back:hover .btn-back__icon{ transform: translateX(-2px); } /* Variante fixe (si tu veux un bouton toujours visible en bas à gauche) */ .btn-back--fixed{ position: fixed; left: 14px; bottom: 14px; z-index: 9999; } /* Support RTL : inverser la direction (si ) */ html[dir="rtl"] .btn-back{ flex-direction: row-reverse; padding: 0 14px 0 16px; } html[dir="rtl"] .btn-back:hover .btn-back__icon{ transform: translateX(2px); }